360 lines
13 KiB
HTML
360 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:th="http://www.thymeleaf.org"
|
|
layout:decorate="~{layouts/blank-layout}">
|
|
<head>
|
|
<title th:text="${pageTitle}">Dashboard</title>
|
|
</head>
|
|
<body layout:fragment="page_content">
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-lg-3 ">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-rose card-header-icon">
|
|
<div class="card-icon">
|
|
<img class="img" th:src="${baseUrl}+@{/images/icons/permit_line.png}"
|
|
height="30px" style="filter: invert(100%)">
|
|
</div>
|
|
<p class="card-category text-danger"><strong>Resource Projections</strong></p>
|
|
<h3 class="card-title">104,200</h3>
|
|
</div>
|
|
<div class="card-body pb-0">
|
|
<div class="progress mt-2" style="height: 11px;">
|
|
<div class="progress-bar bg-info rounded-0" role="progressbar"
|
|
style="width: 100%" aria-valuenow="15" aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
<div class="progress-bar bg-warning rounded-0"
|
|
role="progressbar" style="width: 30%" aria-valuenow="20"
|
|
aria-valuemin="0" aria-valuemax="100"></div>
|
|
<div class="progress-bar bg-success rounded-0"
|
|
role="progressbar" style="width: 40%" aria-valuenow="20"
|
|
aria-valuemin="0" aria-valuemax="100"></div>
|
|
<div class="progress-bar bg-light rounded-0" role="progressbar"
|
|
style="width: 30%" aria-valuenow="20" aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="d-flex align-items-start mt-2">
|
|
<span><i class="fa fa-circle text-info font-14"></i></span>
|
|
<div class="ml-2 text-left">
|
|
<p class="card-category mt-0 mb-0">Approved by JTK</p>
|
|
<h5 class="card-title">500</h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-start mt-2">
|
|
<span><i class="fa fa-circle text-success font-14"></i></span>
|
|
<div class="ml-2 text-left">
|
|
<p class="card-category mt-0 mb-0">Approved by KDN</p>
|
|
<h5 class="card-title">500</h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-start mt-2">
|
|
<span><i class="fa fa-circle text-warning font-14"></i></span>
|
|
<div class="ml-2 text-left">
|
|
<p class="card-category mt-0 mb-0">Pending</p>
|
|
<h5 class="card-title">700</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> updated 4 minutes ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-9">
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-4 col-sm-4">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-info card-header-icon">
|
|
<div class="card-icon">
|
|
<img class="img"
|
|
th:src="${baseUrl}+@{/images/icons/employer_line.png}"
|
|
height="30px" style="filter: invert(100%)">
|
|
</div>
|
|
<p class="card-category text-danger"><strong>Employers</strong></p>
|
|
<h3 class="card-title">3,240</h3>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> updated 4 minutes
|
|
ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-4 col-sm-4">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-success card-header-icon">
|
|
<div class="card-icon">
|
|
<img class="img" th:src="${baseUrl}+@{/images/icons/agent_line.png}"
|
|
height="30px" style="filter: invert(100%)">
|
|
</div>
|
|
<p class="card-category text-danger"><strong>SC Agent</strong></p>
|
|
<h3 class="card-title">4,200</h3>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">update</i> Just Updated
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-4 col-sm-4">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-warning card-header-icon">
|
|
<div class="card-icon">
|
|
<img class="img"
|
|
th:src="${baseUrl}+@{/images/icons/worker_line.png}" height="30px"
|
|
style="filter: invert(100%)">
|
|
</div>
|
|
<p class="card-category text-danger"><strong>Resources</strong></p>
|
|
<h3 class="card-title">104,200</h3>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">update</i> Just Updated
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-4 col-sm-4">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-rose card-header-icon">
|
|
<div class="card-icon">
|
|
<img class="img"
|
|
th:src="${baseUrl}+@{/images/icons/airplane_line.png}"
|
|
height="30px" style="filter: invert(100%)">
|
|
</div>
|
|
<p class="card-category text-danger"><strong>Resource Arrival</strong></p>
|
|
<h3 class="card-title">52,240</h3>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> updated 4 minutes
|
|
ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-4 col-sm-4">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-danger card-header-icon">
|
|
<div class="card-icon">
|
|
<img class="img"
|
|
th:src="${baseUrl}+@{/images/icons/fomema_line.png}" height="30px"
|
|
style="filter: invert(100%)">
|
|
</div>
|
|
<p class="card-category text-danger"><strong>FOMEMA</strong></p>
|
|
<h3 class="card-title">52,240</h3>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> updated 4 minutes
|
|
ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-4 col-sm-4">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-info card-header-icon">
|
|
<div class="card-icon">
|
|
<img class="img"
|
|
th:src="${baseUrl}+@{/images/icons/employer_line.png}"
|
|
height="30px" style="filter: invert(100%)">
|
|
</div>
|
|
<p class="card-category text-danger"><strong>PLKS</strong></p>
|
|
<h3 class="card-title">51,200</h3>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">update</i> Just Updated
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-3 col-sm-3">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-success card-header-icon">
|
|
<div class="card-icon">
|
|
<img class="img" th:src="${baseUrl}+@{/images/icons/socso_line.png}"
|
|
height="30px" style="filter: invert(100%)">
|
|
</div>
|
|
<p class="card-category text-danger"><strong>SOCSO Registered</strong></p>
|
|
<h3 class="card-title">51,200</h3>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> updated 4 minutes ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-warning card-header-icon">
|
|
<div class="card-icon">
|
|
<img class="img" th:src="${baseUrl}+@{/images/icons/memo_line.png}"
|
|
height="30px" style="filter: invert(100%)">
|
|
</div>
|
|
<p class="card-category text-danger"><strong>Check Out Memo</strong></p>
|
|
<h3 class="card-title">1,240</h3>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> updated 4 minutes ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-success card-header-icon">
|
|
<div class="card-icon">
|
|
<img class="img"
|
|
th:src="${baseUrl}+@{/images/icons/replacement_line.png}"
|
|
height="30px" style="filter: invert(100%)">
|
|
</div>
|
|
<p class="card-category text-danger"><strong>Replacement</strong></p>
|
|
<h3 class="card-title">1,240</h3>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">date_range</i> Last 24 Hours
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-rose card-header-icon">
|
|
<div class="card-icon">
|
|
<img class="img"
|
|
th:src="${baseUrl}+@{/images/icons/complaint_line.png}" height="30px"
|
|
style="filter: invert(100%)">
|
|
</div>
|
|
<p class="card-category text-danger"><strong>Complaints</strong></p>
|
|
<h3 class="card-title">45</h3>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">update</i> Just Updated
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="display:none;">
|
|
<div class="col-md-4">
|
|
<div class="card card-chart">
|
|
<div class="card-header card-header-rose"
|
|
data-header-animation="true">
|
|
<div class="ct-chart" id="websiteViewsChart"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="card-actions">
|
|
<button type="button"
|
|
class="btn btn-danger btn-link fix-broken-card">
|
|
<i class="material-icons">build</i> Fix Header!
|
|
</button>
|
|
<button type="button" class="btn btn-info btn-link"
|
|
rel="tooltip" data-placement="bottom" title="Refresh">
|
|
<i class="material-icons">refresh</i>
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-link"
|
|
rel="tooltip" data-placement="bottom" title="Change Date">
|
|
<i class="material-icons">edit</i>
|
|
</button>
|
|
</div>
|
|
<h4 class="card-title">Website Views</h4>
|
|
<p class="card-category text-danger">Last Campaign Performance</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> campaign sent 2 days
|
|
ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card card-chart">
|
|
<div class="card-header card-header-success"
|
|
data-header-animation="true">
|
|
<div class="ct-chart" id="dailySalesChart"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="card-actions">
|
|
<button type="button"
|
|
class="btn btn-danger btn-link fix-broken-card">
|
|
<i class="material-icons">build</i> Fix Header!
|
|
</button>
|
|
<button type="button" class="btn btn-info btn-link"
|
|
rel="tooltip" data-placement="bottom" title="Refresh">
|
|
<i class="material-icons">refresh</i>
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-link"
|
|
rel="tooltip" data-placement="bottom" title="Change Date">
|
|
<i class="material-icons">edit</i>
|
|
</button>
|
|
</div>
|
|
<h4 class="card-title">Daily Sales</h4>
|
|
<p class="card-category text-danger">
|
|
<span class="text-success"><i class="fa fa-long-arrow-up"></i>
|
|
55% </span> increase in today sales.
|
|
</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> updated 4 minutes ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card card-chart">
|
|
<div class="card-header card-header-info"
|
|
data-header-animation="true">
|
|
<div class="ct-chart" id="completedTasksChart"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="card-actions">
|
|
<button type="button"
|
|
class="btn btn-danger btn-link fix-broken-card">
|
|
<i class="material-icons">build</i> Fix Header!
|
|
</button>
|
|
<button type="button" class="btn btn-info btn-link"
|
|
rel="tooltip" data-placement="bottom" title="Refresh">
|
|
<i class="material-icons">refresh</i>
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-link"
|
|
rel="tooltip" data-placement="bottom" title="Change Date">
|
|
<i class="material-icons">edit</i>
|
|
</button>
|
|
</div>
|
|
<h4 class="card-title">Completed Tasks</h4>
|
|
<p class="card-category text-danger">Last Campaign Performance</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> campaign sent 2 days
|
|
ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |