142 lines
6.6 KiB
PHP
142 lines
6.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>bbsys - Staff Dashboard</title>
|
|
<meta name="description" content="Blood Bank System Dashboard. Built with Flatlogic Generator.">
|
|
<meta name="keywords" content="blood bank, inventory management, donor management, blood drive, analytics, reports, Built with Flatlogic Generator">
|
|
<meta property="og:title" content="bbsys - Staff Dashboard">
|
|
<meta property="og:description" content="Blood Bank System Dashboard. Built with Flatlogic Generator.">
|
|
<meta property="og:image" content="">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="sidebar">
|
|
<h4 class="my-3 text-center">BBSys</h4>
|
|
<nav class="nav flex-column">
|
|
<a class="nav-link active" href="dashboard.php"><span class="material-icons">dashboard</span>Dashboard</a>
|
|
<a class="nav-link" href="inventory.php"><span class="material-icons">inventory</span>Inventory</a>
|
|
<a class="nav-link" href="#"><span class="material-icons">people</span>Donors</a>
|
|
<a class="nav-link" href="#"><span class="material-icons">event</span>Drives</a>
|
|
<a class="nav-link" href="#"><span class="material-icons">biotech</span>Requests</a>
|
|
<a class="nav-link" href="#"><span class="material-icons">assessment</span>Reports</a>
|
|
<a class="nav-link" href="#"><span class="material-icons">admin_panel_settings</span>Admin</a>
|
|
</nav>
|
|
<div class="mt-auto p-3 text-center">
|
|
<a href="index.php" class="btn btn-danger">Logout</a>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="main-content">
|
|
<div class="container-fluid">
|
|
<h1 class="h2 mb-4">Dashboard</h1>
|
|
|
|
<!-- Metric Cards -->
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card metric-card">
|
|
<div class="card-body">
|
|
<div>
|
|
<h5 class="card-title text-muted">Total Units</h5>
|
|
<p class="h2">1,258</p>
|
|
</div>
|
|
<div class="icon-circle bg-primary-light">
|
|
<span class="material-icons">bloodtype</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card metric-card">
|
|
<div class="card-body">
|
|
<div>
|
|
<h5 class="card-title text-muted">Donors</h5>
|
|
<p class="h2">4,312</p>
|
|
</div>
|
|
<div class="icon-circle bg-secondary-light">
|
|
<span class="material-icons">people</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card metric-card">
|
|
<div class="card-body">
|
|
<div>
|
|
<h5 class="card-title text-muted">Requests</h5>
|
|
<p class="h2">75</p>
|
|
</div>
|
|
<div class="icon-circle bg-success-light">
|
|
<span class="material-icons">biotech</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card metric-card">
|
|
<div class="card-body">
|
|
<div>
|
|
<h5 class="card-title text-muted">Low Stock</h5>
|
|
<p class="h2">3 Groups</p>
|
|
</div>
|
|
<div class="icon-circle bg-warning-light">
|
|
<span class="material-icons">warning</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity Table -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="table-wrapper">
|
|
<h4 class="mb-3">Low Stock Alerts</h4>
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Blood Group</th>
|
|
<th>Current Units</th>
|
|
<th>Threshold</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>O-</td>
|
|
<td>8</td>
|
|
<td>10</td>
|
|
<td><span class="badge bg-danger">Critical</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>B-</td>
|
|
<td>12</td>
|
|
<td>15</td>
|
|
<td><span class="badge bg-warning text-dark">Low</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>AB+</td>
|
|
<td>18</td>
|
|
<td>20</td>
|
|
<td><span class="badge bg-warning text-dark">Low</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html> |