done dashboard
This commit is contained in:
@@ -40,11 +40,19 @@
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider my-0">
|
||||
|
||||
<!-- Nav Item - Dashboard -->
|
||||
<!-- Nav Item - Dashboard Collapse Menu -->
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" th:href="@{/manage}">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseDashboard"
|
||||
aria-expanded="true" aria-controls="collapseDashboard">
|
||||
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||
<span>Dashboard</span></a>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<div id="collapseDashboard" class="collapse" aria-labelledby="headingDashboard" data-parent="#accordionSidebar">
|
||||
<div class="bg-white py-2 collapse-inner rounded">
|
||||
<a class="collapse-item" th:href="@{/manage}">Home</a>
|
||||
<a class="collapse-item" th:href="@{/manage/updates}">Updates</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Divider -->
|
||||
|
||||
@@ -11,145 +11,110 @@
|
||||
<!-- Page Heading -->
|
||||
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
||||
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
|
||||
<a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i
|
||||
class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
|
||||
</div>
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-primary shadow h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
|
||||
Earnings (Monthly)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-calendar fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Earnings (Annual) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-success shadow h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
|
||||
Earnings (Annual)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tasks Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-info shadow h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tasks
|
||||
</div>
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="progress progress-sm mr-2">
|
||||
<div class="progress-bar bg-info" role="progressbar"
|
||||
style="width: 50%" aria-valuenow="50" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pending Requests Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-warning shadow h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
|
||||
Pending Requests</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">18</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-comments fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Content Column -->
|
||||
<div class="col-lg-12 mb-4">
|
||||
|
||||
<!-- Project Card Example -->
|
||||
<!-- Server Health -->
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Projects</h6>
|
||||
<h6 class="m-0 font-weight-bold text-primary">Site Health & Telemetry</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4 class="small font-weight-bold">Server Migration <span
|
||||
class="float-right">20%</span></h4>
|
||||
<h4 class="small font-weight-bold">CPU Load <span
|
||||
class="float-right" th:text="${cpuPercentage} + '%'">0%</span></h4>
|
||||
<div class="progress mb-4">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%"
|
||||
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div th:class="'progress-bar ' + (${cpuPercentage} > 80 ? 'bg-danger' : (${cpuPercentage} > 50 ? 'bg-warning' : 'bg-success'))"
|
||||
role="progressbar" th:style="'width: ' + ${cpuPercentage} + '%'"
|
||||
th:aria-valuenow="${cpuPercentage}" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<h4 class="small font-weight-bold">Sales Tracking <span
|
||||
class="float-right">40%</span></h4>
|
||||
|
||||
<h4 class="small font-weight-bold">Memory (RAM) <span
|
||||
class="float-right" th:text="${usedRamMb} + ' MB / ' + ${totalRamMb} + ' MB (' + ${ramPercentage} + '%)'">0 MB / 0 MB</span></h4>
|
||||
<div class="progress mb-4">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 40%"
|
||||
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div th:class="'progress-bar ' + (${ramPercentage} > 80 ? 'bg-danger' : (${ramPercentage} > 50 ? 'bg-warning' : 'bg-info'))"
|
||||
role="progressbar" th:style="'width: ' + ${ramPercentage} + '%'"
|
||||
th:aria-valuenow="${ramPercentage}" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<h4 class="small font-weight-bold">Customer Database <span
|
||||
class="float-right">60%</span></h4>
|
||||
|
||||
<h4 class="small font-weight-bold">Disk Space (I/O) <span
|
||||
class="float-right" th:text="${usedSpaceGb} + ' GB / ' + ${totalSpaceGb} + ' GB (' + ${ioPercentage} + '%)'">0 GB / 0 GB</span></h4>
|
||||
<div class="progress mb-4">
|
||||
<div class="progress-bar" role="progressbar" style="width: 60%"
|
||||
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<h4 class="small font-weight-bold">Payout Details <span
|
||||
class="float-right">80%</span></h4>
|
||||
<div class="progress mb-4">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 80%"
|
||||
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<h4 class="small font-weight-bold">Account Setup <span
|
||||
class="float-right">Complete!</span></h4>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 100%"
|
||||
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div th:class="'progress-bar ' + (${ioPercentage} > 80 ? 'bg-danger' : (${ioPercentage} > 50 ? 'bg-warning' : 'bg-primary'))"
|
||||
role="progressbar" th:style="'width: ' + ${ioPercentage} + '%'"
|
||||
th:aria-valuenow="${ioPercentage}" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Draft -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Quick Draft</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form th:action="@{/manage/quick-draft}" method="post">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" name="title" placeholder="Title" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" name="content" rows="4" placeholder="What's on your mind?"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-outline-primary btn-sm">Save Draft</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 mb-4">
|
||||
<!-- At a Glance -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">At a Glance</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row text-center mb-3">
|
||||
<div class="col-6">
|
||||
<i class="fas fa-file-alt fa-2x text-gray-300 mb-2"></i>
|
||||
<h4 class="h5 text-gray-800"><span th:text="${postCount}">0</span> Posts</h4>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<i class="fas fa-file fa-2x text-gray-300 mb-2"></i>
|
||||
<h4 class="h5 text-gray-800"><span th:text="${pageCount}">0</span> Pages</h4>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-muted text-center mb-0 small">Running Spring Boot 4.0.6 (Java 21)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Recent Activity</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center" th:each="post : ${recentPosts}">
|
||||
<div>
|
||||
<span class="text-muted small mr-2" th:text="${#temporals.format(post.createdDate, 'dd/MM/yyyy HH:mm')}">Date</span>
|
||||
<a th:href="@{/manage/posts/{id}/edit(id=${post.id})}" th:text="${post.title}">Post Title</a>
|
||||
</div>
|
||||
<span class="badge badge-pill"
|
||||
th:classappend="${post.status == 'PUBLISHED' ? 'badge-success' : (post.status == 'DRAFT' ? 'badge-secondary' : 'badge-warning')}"
|
||||
th:text="${post.status}">DRAFT</span>
|
||||
</li>
|
||||
<li class="list-group-item text-muted text-center small" th:if="${#lists.isEmpty(recentPosts)}">
|
||||
No recent activity
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{fragments/manage-layout}">
|
||||
|
||||
<head>
|
||||
<title>System Updates</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div layout:fragment="content">
|
||||
<!-- Page Heading -->
|
||||
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
||||
<h1 class="h3 mb-0 text-gray-800">System Updates</h1>
|
||||
</div>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
<span th:text="${successMessage}"></span>
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Core Update -->
|
||||
<div class="col-lg-12 mb-4">
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary" th:text="${coreUpdateAvailable} ? 'An updated version of the system is available.' : 'You have the latest version of the system.'">An updated version of the system is available.</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Important:</strong> Before updating, please back up your database and files. For help with updates, visit the <a href="#">Updating Documentation</a>.</p>
|
||||
|
||||
<div th:if="${coreUpdateAvailable}" class="alert alert-warning">
|
||||
<strong>Update Available:</strong> You are currently running version <span th:text="${coreVersionCurrent}">X</span>.
|
||||
Version <span th:text="${coreVersionLatest}">Y</span> is available.
|
||||
</div>
|
||||
<div th:unless="${coreUpdateAvailable}" class="alert alert-success">
|
||||
<strong>Up to Date:</strong> You are currently running version <span th:text="${coreVersionCurrent}">X</span>. No core updates are available.
|
||||
</div>
|
||||
|
||||
<form th:action="@{/manage/updates/core}" method="post">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
|
||||
<button type="submit" class="btn btn-primary" th:disabled="${!coreUpdateAvailable}">Update Now</button>
|
||||
</form>
|
||||
<p class="text-muted small mt-2">While your site is being updated, it will be in maintenance mode. As soon as your updates are complete, your site will return to normal.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plugins Update -->
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Plugins</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p th:if="${pluginSeoUpdateAvailable}">The following plugins have new versions available. Check the ones you want to update and then click "Update Plugins".</p>
|
||||
<p th:unless="${pluginSeoUpdateAvailable}">Your plugins are all up to date.</p>
|
||||
|
||||
<form th:action="@{/manage/updates/plugins}" method="post" th:if="${pluginSeoUpdateAvailable}">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" checked disabled></th>
|
||||
<th>Plugin Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked disabled></td>
|
||||
<td><strong>Sample SEO Plugin</strong><br><small>You have version <span th:text="${pluginSeoVersion}">1.0.0</span>. Update to 1.1.2.</small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button type="submit" class="btn btn-secondary btn-sm">Update Selected Plugins</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Themes & Translations Update -->
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Themes</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Your themes are all up to date.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Translations</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Your translations are all up to date.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user