135 lines
6.4 KiB
PHP
135 lines
6.4 KiB
PHP
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">Dashboard Overview</h1>
|
|
<div class="btn-toolbar mb-2 mb-md-0">
|
|
<div class="btn-group me-2">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary d-flex align-items-center gap-1">
|
|
<i class="bi bi-calendar3"></i>
|
|
Budget Year 2026
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-12 col-sm-6 col-xxl-3">
|
|
<div class="card bg-primary text-white h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="card-title mb-0">Total Procurement Plans</h6>
|
|
<i class="bi bi-cart3 fs-4 text-white-50"></i>
|
|
</div>
|
|
<h2 class="mb-0">124</h2>
|
|
<small class="text-white-50">+12% from last month</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-xxl-3">
|
|
<div class="card bg-success text-white h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="card-title mb-0">Active Equipments</h6>
|
|
<i class="bi bi-pc-display fs-4 text-white-50"></i>
|
|
</div>
|
|
<h2 class="mb-0">842</h2>
|
|
<small class="text-white-50">Deployed across hospitals</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-xxl-3">
|
|
<div class="card bg-info text-white h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="card-title mb-0">Active Subscriptions</h6>
|
|
<i class="bi bi-windows fs-4 text-white-50"></i>
|
|
</div>
|
|
<h2 class="mb-0">45</h2>
|
|
<small class="text-white-50">Total Software Licenses</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-xxl-3">
|
|
<div class="card bg-danger text-white h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="card-title mb-0">Expiring Soon (<30 Days)</h6>
|
|
<i class="bi bi-exclamation-triangle fs-4 text-white-50"></i>
|
|
</div>
|
|
<h2 class="mb-0">3</h2>
|
|
<small class="text-white-50">Needs immediate renewal</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-lg-8 mb-4">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white border-bottom-0 pt-3 pb-0">
|
|
<h6 class="mb-0">Recent Software Renewals</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Software</th>
|
|
<th>Vendor</th>
|
|
<th>Type</th>
|
|
<th>Expiry Date</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><div class="fw-medium">Microsoft 365</div><small class="text-muted">100 Licenses</small></td>
|
|
<td>Microsoft Corp.</td>
|
|
<td><span class="badge bg-light text-dark border">Subscription (1 Year)</span></td>
|
|
<td>Dec 31, 2026</td>
|
|
<td><span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25">Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="fw-medium">Adobe Creative Cloud</div><small class="text-muted">15 Licenses</small></td>
|
|
<td>Adobe Inc.</td>
|
|
<td><span class="badge bg-light text-dark border">Subscription (3 Years)</span></td>
|
|
<td>Oct 15, 2026</td>
|
|
<td><span class="badge bg-warning bg-opacity-10 text-warning border border-warning border-opacity-25">Expiring Soon</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-4 mb-4">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-white border-bottom-0 pt-3 pb-0">
|
|
<h6 class="mb-0">System Activity Log</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-start mb-3">
|
|
<div class="bg-primary bg-opacity-10 text-primary rounded-circle p-2 me-3">
|
|
<i class="bi bi-arrow-repeat"></i>
|
|
</div>
|
|
<div>
|
|
<p class="mb-0 fw-medium text-dark" style="font-size: 0.9rem;">Renewal Cycle Changed</p>
|
|
<p class="mb-0 text-muted small">Microsoft 365 (1 Year → 3 Years) by Somchai</p>
|
|
<small class="text-muted" style="font-size: 0.75rem;">10 mins ago</small>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-start mb-3">
|
|
<div class="bg-success bg-opacity-10 text-success rounded-circle p-2 me-3">
|
|
<i class="bi bi-check-circle"></i>
|
|
</div>
|
|
<div>
|
|
<p class="mb-0 fw-medium text-dark" style="font-size: 0.9rem;">Procurement Approved</p>
|
|
<p class="mb-0 text-muted small">Plan PR-2026-001 by Director</p>
|
|
<small class="text-muted" style="font-size: 0.75rem;">1 hour ago</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|