<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive inventory management dashboard with Chart.js analytics">
<title>StockFlow Inventory Dashboard</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>
<body>
<div class="dashboard-shell">
<aside class="sidebar" id="sidebar" aria-label="Main navigation">
<div class="sidebar-brand">
<div class="brand-emblem" aria-hidden="true">
<i class="fa-solid fa-boxes-stacked"></i>
</div>
<div class="brand-copy">
<strong>StockFlow</strong>
<span>Inventory Management</span>
</div>
<button class="sidebar-close" id="sidebarClose" type="button" aria-label="Close navigation">
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
</button>
</div>
<p class="navigation-label">Workspace</p>
<nav class="sidebar-nav">
<a class="nav-item active" href="#dashboard" aria-current="page">
<i class="fa-solid fa-chart-column" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
<a class="nav-item" href="#analytics">
<i class="fa-solid fa-chart-line" aria-hidden="true"></i>
<span>Analytics</span>
</a>
<a class="nav-item" href="#inventory">
<i class="fa-solid fa-boxes-stacked" aria-hidden="true"></i>
<span>Inventory</span>
</a>
<a class="nav-item" href="#warehouses">
<i class="fa-solid fa-warehouse" aria-hidden="true"></i>
<span>Warehouses</span>
</a>
<a class="nav-item" href="#activity">
<i class="fa-solid fa-right-left" aria-hidden="true"></i>
<span>Stock Movements</span>
</a>
</nav>
<div class="sidebar-status">
<div class="sidebar-status-heading">
<span>Inventory Health</span>
<strong>94%</strong>
</div>
<div class="mini-progress" aria-hidden="true">
<span style="width:94%"></span>
</div>
<p><span class="online-dot"></span>All warehouse systems operational</p>
</div>
<div class="sidebar-footer">
<i class="fa-solid fa-circle-check" aria-hidden="true"></i>
<span>System Online</span>
</div>
</aside>
<button class="sidebar-backdrop" id="sidebarBackdrop" type="button" aria-label="Close navigation" hidden></button>
<main class="main-content" id="dashboard">
<header class="page-header">
<div class="page-heading">
<button class="menu-button" id="menuButton" type="button" aria-label="Open navigation" aria-controls="sidebar" aria-expanded="false">
<i class="fa-solid fa-bars" aria-hidden="true"></i>
</button>
<div>
<p class="eyebrow">Inventory Overview</p>
<h1>Inventory Dashboard</h1>
<p class="page-description">Monitor stock, warehouse performance, and inventory movement.</p>
</div>
</div>
<div class="header-actions">
<button class="header-button" type="button" aria-label="Notifications">
<i class="fa-regular fa-bell" aria-hidden="true"></i>
<span class="notification-dot" aria-hidden="true"></span>
</button>
<div class="operator">
<div class="operator-avatar">IA</div>
<div>
<span>Inventory Admin</span>
<small>Warehouse Operations</small>
</div>
</div>
</div>
</header>
<div class="notice-bar">
<i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
<div>
<strong>Stock Attention Required</strong>
<span>Six products currently require immediate reorder review.</span>
</div>
</div>
<section class="summary-grid" aria-label="Inventory summary">
<article class="stat-card">
<div class="stat-card-top">
<span class="stat-icon blue"><i class="fa-solid fa-boxes-stacked" aria-hidden="true"></i></span>
<span class="trend positive"><i class="fa-solid fa-arrow-trend-up" aria-hidden="true"></i> 2.4%</span>
</div>
<p class="stat-label">Total Products</p>
<strong class="stat-value">1,248</strong>
<p class="stat-detail">24 products added this month</p>
</article>
<article class="stat-card">
<div class="stat-card-top">
<span class="stat-icon amber"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i></span>
<span class="attention-label">Attention</span>
</div>
<p class="stat-label">Low Stock</p>
<strong class="stat-value">18</strong>
<p class="stat-detail">6 products are critically low</p>
</article>
<article class="stat-card">
<div class="stat-card-top">
<span class="stat-icon green"><i class="fa-solid fa-dollar-sign" aria-hidden="true"></i></span>
<span class="trend positive"><i class="fa-solid fa-arrow-trend-up" aria-hidden="true"></i> 4.8%</span>
</div>
<p class="stat-label">Inventory Value</p>
<strong class="stat-value">$284,620</strong>
<p class="stat-detail">Across all active warehouses</p>
</article>
<article class="stat-card">
<div class="stat-card-top">
<span class="stat-icon navy"><i class="fa-solid fa-warehouse" aria-hidden="true"></i></span>
<span class="active-label">All Active</span>
</div>
<p class="stat-label">Warehouses</p>
<strong class="stat-value">4</strong>
<p class="stat-detail">3 regional and 1 central facility</p>
</article>
</section>
<section class="analytics-grid" id="analytics">
<article class="panel chart-panel wide-chart">
<div class="panel-header">
<div>
<p class="eyebrow">Six Month Trend</p>
<h2>Stock Movement</h2>
<p class="panel-description">Units received and issued each month.</p>
</div>
<span class="panel-tag"><i class="fa-solid fa-chart-line" aria-hidden="true"></i> Monthly</span>
</div>
<div class="chart-container line-chart-container">
<canvas id="stockMovementChart" role="img" aria-label="Line chart comparing inventory units received and issued from March through August"></canvas>
</div>
</article>
<article class="panel chart-panel">
<div class="panel-header">
<div>
<p class="eyebrow">Current Condition</p>
<h2>Stock Health</h2>
<p class="panel-description">Distribution of tracked inventory.</p>
</div>
</div>
<div class="donut-layout">
<div class="chart-container donut-chart-container">
<canvas id="inventoryHealthChart" role="img" aria-label="Doughnut chart showing healthy, low-stock, and out-of-stock inventory"></canvas>
</div>
<div class="chart-summary-list">
<div><span class="legend-dot healthy-dot"></span><span>Healthy</span><strong>1,173</strong></div>
<div><span class="legend-dot low-dot"></span><span>Low Stock</span><strong>18</strong></div>
<div><span class="legend-dot danger-dot"></span><span>Out of Stock</span><strong>7</strong></div>
</div>
</div>
</article>
</section>
<section class="overview-grid">
<article class="panel alert-panel" id="alertPanel">
<div class="panel-header">
<div>
<p class="eyebrow warning-eyebrow">Attention Required</p>
<h2>Low Stock Alerts</h2>
</div>
<button id="dismissAlerts" class="small-button" type="button">
<i class="fa-solid fa-check" aria-hidden="true"></i> Dismiss
</button>
</div>
<div class="warning-list">
<div class="warning-item critical-warning">
<span class="warning-icon"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i></span>
<div><strong>Wireless Barcode Scanner</strong><p>3 units remaining · Reorder level: 10</p></div>
<span class="status-badge critical">Critical</span>
</div>
<div class="warning-item">
<span class="warning-icon"><i class="fa-solid fa-box-open" aria-hidden="true"></i></span>
<div><strong>Thermal Label Roll</strong><p>12 units remaining · Reorder level: 20</p></div>
<span class="status-badge low">Low</span>
</div>
<div class="warning-item">
<span class="warning-icon"><i class="fa-solid fa-plug" aria-hidden="true"></i></span>
<div><strong>USB-C Hub</strong><p>8 units remaining · Reorder level: 15</p></div>
<span class="status-badge low">Low</span>
</div>
</div>
</article>
<article class="panel chart-panel capacity-panel">
<div class="panel-header">
<div>
<p class="eyebrow">Facility Utilization</p>
<h2>Warehouse Capacity</h2>
<p class="panel-description">Current storage utilization by facility.</p>
</div>
</div>
<div class="chart-container capacity-chart-container">
<canvas id="warehouseCapacityChart" role="img" aria-label="Bar chart comparing storage capacity usage at Central, North, South, and East warehouses"></canvas>
</div>
</article>
</section>
<section class="panel inventory-panel" id="inventory">
<div class="panel-header inventory-heading">
<div>
<p class="eyebrow">Product Records</p>
<h2>Inventory Register</h2>
<p class="record-count"><span id="resultCount">6</span> products displayed</p>
</div>
<span class="register-label"><i class="fa-solid fa-table-list" aria-hidden="true"></i> Current Inventory</span>
</div>
<div class="inventory-toolbar">
<label class="search-control">
<span class="visually-hidden">Search inventory</span>
<i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
<input id="inventorySearch" type="search" placeholder="Search product, SKU, category or warehouse" autocomplete="off">
</label>
<label class="filter-control">
<span class="visually-hidden">Filter inventory status</span>
<i class="fa-solid fa-filter" aria-hidden="true"></i>
<select id="statusFilter">
<option value="all">All Status</option>
<option value="healthy">Healthy</option>
<option value="low">Low Stock</option>
<option value="critical">Critical</option>
</select>
</label>
<button id="resetFilters" class="reset-button" type="button">
<i class="fa-solid fa-rotate-left" aria-hidden="true"></i> Reset
</button>
</div>
<div class="table-wrap">
<table>
<caption class="visually-hidden">Current inventory products and stock levels</caption>
<thead>
<tr><th scope="col">Product</th><th scope="col">SKU</th><th scope="col">Category</th><th scope="col">Warehouse</th><th scope="col">Stock</th><th scope="col">Status</th></tr>
</thead>
<tbody id="inventoryRows">
<tr data-status="healthy" data-search="industrial tablet tab-1024 devices central warehouse">
<td><div class="product-cell"><span class="product-marker devices"><i class="fa-solid fa-tablet-screen-button" aria-hidden="true"></i></span><div><strong>Industrial Tablet</strong><span>10-inch rugged device</span></div></div></td><td>TAB-1024</td><td>Devices</td><td>Central Warehouse</td><td class="quantity">148</td><td><span class="status-badge healthy">Healthy</span></td>
</tr>
<tr data-status="critical" data-search="wireless barcode scanner scn-0088 equipment north warehouse">
<td><div class="product-cell"><span class="product-marker equipment"><i class="fa-solid fa-barcode" aria-hidden="true"></i></span><div><strong>Wireless Barcode Scanner</strong><span>Handheld scanning unit</span></div></div></td><td>SCN-0088</td><td>Equipment</td><td>North Warehouse</td><td class="quantity critical-number">3</td><td><span class="status-badge critical">Critical</span></td>
</tr>
<tr data-status="healthy" data-search="shipping carton box-440 packaging south warehouse">
<td><div class="product-cell"><span class="product-marker packaging"><i class="fa-solid fa-box" aria-hidden="true"></i></span><div><strong>Shipping Carton</strong><span>Heavy-duty packaging</span></div></div></td><td>BOX-0440</td><td>Packaging</td><td>South Warehouse</td><td class="quantity">620</td><td><span class="status-badge healthy">Healthy</span></td>
</tr>
<tr data-status="low" data-search="thermal label roll lbl-214 supplies central warehouse">
<td><div class="product-cell"><span class="product-marker supplies"><i class="fa-solid fa-tag" aria-hidden="true"></i></span><div><strong>Thermal Label Roll</strong><span>Shipping-label supply</span></div></div></td><td>LBL-0214</td><td>Supplies</td><td>Central Warehouse</td><td class="quantity low-number">12</td><td><span class="status-badge low">Low Stock</span></td>
</tr>
<tr data-status="healthy" data-search="storage rack rck-720 warehouse equipment east warehouse">
<td><div class="product-cell"><span class="product-marker warehouse"><i class="fa-solid fa-layer-group" aria-hidden="true"></i></span><div><strong>Storage Rack</strong><span>Heavy-duty shelf unit</span></div></div></td><td>RCK-0720</td><td>Warehouse Equipment</td><td>East Warehouse</td><td class="quantity">42</td><td><span class="status-badge healthy">Healthy</span></td>
</tr>
<tr data-status="low" data-search="usb-c hub hub-312 devices north warehouse">
<td><div class="product-cell"><span class="product-marker devices"><i class="fa-solid fa-plug" aria-hidden="true"></i></span><div><strong>USB-C Hub</strong><span>Multi-port workstation hub</span></div></div></td><td>HUB-0312</td><td>Devices</td><td>North Warehouse</td><td class="quantity low-number">8</td><td><span class="status-badge low">Low Stock</span></td>
</tr>
</tbody>
</table>
</div>
<div id="emptyResults" class="empty-results" hidden>
<i class="fa-solid fa-box-open" aria-hidden="true"></i>
<strong>No matching inventory found</strong>
<p>Try changing your search or stock-status filter.</p>
</div>
</section>
<section class="content-grid" id="warehouses">
<article class="panel warehouse-panel">
<div class="panel-header">
<div>
<p class="eyebrow">Locations</p>
<h2>Warehouse Overview</h2>
</div>
<span class="register-label"><i class="fa-solid fa-warehouse" aria-hidden="true"></i> 4 Facilities</span>
</div>
<div class="warehouse-grid">
<article class="warehouse-card">
<div class="warehouse-image">
<img src="https://images.unsplash.com/photo-1720788613534-fbfce4cf7495?auto=format&fit=crop&w=900&h=500&q=82" alt="Tall warehouse racks holding stacked boxes and pallets" loading="lazy">
<span><i class="fa-solid fa-location-dot" aria-hidden="true"></i> Central Facility</span>
</div>
<div class="warehouse-card-body">
<h3>Central Warehouse</h3>
<p>Primary storage and distribution facility.</p>
<div class="warehouse-stats">
<div><span>SKUs</span><strong>512</strong></div>
<div><span>Capacity</span><strong>76%</strong></div>
<div><span>Status</span><strong class="success-text">Active</strong></div>
</div>
</div>
</article>
<article class="warehouse-card">
<div class="warehouse-image">
<img src="https://images.unsplash.com/photo-1782948603191-065fb15e2e8e?auto=format&fit=crop&w=900&h=500&q=82" alt="Large warehouse aisle with shelving and boxed inventory" loading="lazy">
<span><i class="fa-solid fa-location-dot" aria-hidden="true"></i> North Facility</span>
</div>
<div class="warehouse-card-body">
<h3>North Warehouse</h3>
<p>Regional storage and fulfillment facility.</p>
<div class="warehouse-stats">
<div><span>SKUs</span><strong>286</strong></div>
<div><span>Capacity</span><strong>58%</strong></div>
<div><span>Status</span><strong class="success-text">Active</strong></div>
</div>
</div>
</article>
</div>
</article>
<article class="panel activity-panel" id="activity">
<div class="panel-header">
<div>
<p class="eyebrow">Latest Changes</p>
<h2>Recent Stock Movements</h2>
</div>
</div>
<div class="activity-list">
<div class="activity-item">
<span class="activity-icon received"><i class="fa-solid fa-arrow-down" aria-hidden="true"></i></span>
<div><strong>120 Industrial Tablets received</strong><p>Central Warehouse</p></div>
<time>10:24 AM</time>
</div>
<div class="activity-item">
<span class="activity-icon issued"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i></span>
<div><strong>18 Shipping Cartons issued</strong><p>South Warehouse</p></div>
<time>9:42 AM</time>
</div>
<div class="activity-item">
<span class="activity-icon transferred"><i class="fa-solid fa-right-left" aria-hidden="true"></i></span>
<div><strong>32 Thermal Label Rolls transferred</strong><p>Central → North Warehouse</p></div>
<time>Yesterday</time>
</div>
<div class="activity-item">
<span class="activity-icon received"><i class="fa-solid fa-arrow-down" aria-hidden="true"></i></span>
<div><strong>45 Storage Racks received</strong><p>East Warehouse</p></div>
<time>Yesterday</time>
</div>
</div>
</article>
</section>
<section class="warehouse-feature" aria-labelledby="warehouseFeatureTitle">
<img src="https://images.unsplash.com/photo-1777026321659-64941fb943dd?auto=format&fit=crop&w=1500&h=750&q=82" alt="Long warehouse aisle lined with stocked shelving" loading="lazy">
<div class="warehouse-feature-overlay"></div>
<div class="warehouse-feature-content">
<span class="feature-label"><i class="fa-solid fa-warehouse" aria-hidden="true"></i> Warehouse Operations</span>
<h2 id="warehouseFeatureTitle">Keep every facility under control</h2>
<p>Track quantities, capacity, transfers, receiving activity, and stock alerts from one practical inventory workspace.</p>
<div class="feature-stats">
<div><i class="fa-solid fa-warehouse" aria-hidden="true"></i><strong>4</strong><span>Facilities</span></div>
<div><i class="fa-solid fa-boxes-stacked" aria-hidden="true"></i><strong>1,248</strong><span>Products</span></div>
<div><i class="fa-solid fa-circle-check" aria-hidden="true"></i><strong>94%</strong><span>Healthy Stock</span></div>
</div>
</div>
</section>
<footer class="dashboard-footer">
<div>
<strong>StockFlow Inventory Management</strong>
<span>Responsive business dashboard template</span>
</div>
<div class="footer-status"><i class="fa-solid fa-circle-check" aria-hidden="true"></i> System Online</div>
</footer>
</main>
</div>
</body>
</html>:root {
--page-bg: #eef1f4;
--surface: #ffffff;
--surface-soft: #f7f8fa;
--border: #d8dde3;
--border-strong: #bcc4cd;
--text: #26313c;
--muted: #66717d;
--navy: #223c55;
--navy-dark: #182d40;
--blue: #356da0;
--blue-soft: #e6f0f8;
--gold: #c4963c;
--green: #34704a;
--green-soft: #e4f1e8;
--amber: #a66b18;
--amber-soft: #fff0d6;
--red: #b33a31;
--red-soft: #fae6e4;
--shadow: 0 4px 14px rgba(35,48,60,.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--page-bg); font-family: Arial, Helvetica, sans-serif; line-height: 1.5; }
button, input, select { font: inherit; }
button, a, input, select { outline-offset: 3px; }
img { display: block; max-width: 100%; }
.dashboard-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; width: 252px; flex-direction: column; background: var(--navy-dark); border-right: 3px solid var(--gold); box-shadow: 3px 0 12px rgba(25,40,55,.14); }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 20px 16px; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-emblem { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; color: #fff; background: var(--blue); border: 2px solid rgba(255,255,255,.25); border-radius: 5px; font-size: 17px; }
.brand-copy strong, .brand-copy span { display: block; }
.brand-copy strong { color: #fff; font-size: 17px; }
.brand-copy span { color: #b8c6d3; font-size: 10px; }
.sidebar-close { display: none; margin-left: auto; color: #fff; background: transparent; border: 0; cursor: pointer; font-size: 20px; }
.navigation-label { margin: 17px 18px 7px; color: #8094a6; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: 3px; padding: 0 10px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; color: #d3dce4; border-radius: 5px; text-decoration: none; font-size: 12px; font-weight: 600; }
.nav-item > i { width: 21px; color: #9db1c2; text-align: center; font-size: 14px; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-item.active { color: #fff; background: var(--blue); box-shadow: inset 4px 0 var(--gold); }
.nav-item.active > i { color: #fff; }
.sidebar-status { margin: auto 14px 14px; padding: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 5px; }
.sidebar-status-heading { display: flex; justify-content: space-between; color: #dce4eb; font-size: 10px; }
.sidebar-status-heading strong { color: #9dd0aa; }
.mini-progress { overflow: hidden; height: 7px; margin: 8px 0 10px; background: rgba(255,255,255,.13); border-radius: 10px; }
.mini-progress span { display: block; height: 100%; background: #77ae87; }
.sidebar-status p { margin: 0; color: #aebbc6; font-size: 9px; }
.online-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #70af81; border-radius: 50%; }
.sidebar-footer { display: flex; align-items: center; gap: 6px; padding: 10px 15px; color: #9cb0c0; background: #122637; font-size: 9px; }
.sidebar-footer i { color: #73ad82; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; background: rgba(18,28,37,.52); border: 0; }
.main-content { min-height: 100vh; margin-left: 252px; padding: 24px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--navy); border-radius: 6px; box-shadow: var(--shadow); }
.page-heading { display: flex; align-items: flex-start; gap: 12px; }
.menu-button { display: none; width: 40px; height: 40px; color: var(--navy); background: #fff; border: 1px solid var(--border-strong); border-radius: 5px; cursor: pointer; }
.eyebrow { margin: 0 0 3px; color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.page-header h1 { margin: 0; color: var(--navy-dark); font-size: clamp(24px,3vw,33px); line-height: 1.2; }
.page-description, .panel-description { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-button { position: relative; width: 38px; height: 38px; color: var(--navy); background: #fff; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; background: var(--red); border-radius: 50%; }
.operator { display: flex; align-items: center; gap: 9px; padding-left: 12px; border-left: 1px solid var(--border); }
.operator-avatar { display: grid; width: 39px; height: 39px; place-items: center; color: #fff; background: var(--blue); border-radius: 5px; font-size: 11px; font-weight: 800; }
.operator span, .operator small { display: block; }
.operator span { font-size: 11px; font-weight: 700; }
.operator small { color: var(--muted); font-size: 9px; }
.notice-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 13px; color: #68460f; background: var(--amber-soft); border: 1px solid #d7b775; border-left: 4px solid var(--amber); border-radius: 4px; }
.notice-bar > i { font-size: 16px; }
.notice-bar strong, .notice-bar span { display: block; }
.notice-bar strong, .notice-bar span { font-size: 10px; }
.summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 14px; }
.stat-card, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }
.stat-card { padding: 16px; border-top: 3px solid var(--navy); }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid; border-radius: 5px; }
.stat-icon.blue { color: var(--blue); background: var(--blue-soft); border-color: #b4cada; }
.stat-icon.amber { color: var(--amber); background: var(--amber-soft); border-color: #dfc28c; }
.stat-icon.green { color: var(--green); background: var(--green-soft); border-color: #b2cfba; }
.stat-icon.navy { color: var(--navy); background: #e5ebf0; border-color: #bec9d2; }
.trend, .attention-label, .active-label { font-size: 9px; font-weight: 800; }
.trend.positive { color: var(--green); }
.attention-label { color: var(--amber); }
.active-label { color: var(--blue); }
.stat-label { margin: 13px 0 2px; color: var(--muted); font-size: 10px; font-weight: 700; }
.stat-value { display: block; color: var(--navy-dark); font-size: clamp(23px,3vw,29px); }
.stat-detail { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.analytics-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.75fr); gap: 14px; margin-bottom: 14px; }
.overview-grid, .content-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.panel { overflow: hidden; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.panel-header h2 { margin: 0; color: var(--navy-dark); font-size: 17px; }
.panel-tag, .register-label { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; color: var(--blue); background: var(--blue-soft); border: 1px solid #c5d7e5; border-radius: 4px; font-size: 8px; font-weight: 800; }
.chart-container { position: relative; width: 100%; }
.line-chart-container { height: 300px; padding: 14px 16px 16px; }
.donut-chart-container { height: 220px; }
.capacity-chart-container { height: 250px; padding: 12px 16px 16px; }
.donut-layout { display: grid; grid-template-columns: minmax(160px,1fr) 150px; align-items: center; gap: 8px; padding: 15px 16px 18px; }
.chart-summary-list { display: grid; gap: 13px; }
.chart-summary-list > div { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 7px; font-size: 9px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.healthy-dot { background: #34704a; }
.low-dot { background: #c88725; }
.danger-dot { background: #b33a31; }
.warning-eyebrow { color: var(--amber); }
.small-button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; color: var(--navy); background: #fff; border: 1px solid var(--border-strong); border-radius: 4px; cursor: pointer; font-size: 8px; font-weight: 800; }
.warning-list { padding: 5px 15px 14px; }
.warning-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 11px 3px; border-bottom: 1px solid var(--border); }
.warning-item:last-child { border-bottom: 0; }
.warning-icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--amber); background: var(--amber-soft); border: 1px solid #e2c78f; border-radius: 4px; }
.warning-item strong { display: block; font-size: 10px; }
.warning-item p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.inventory-panel { margin-bottom: 14px; }
.inventory-heading { align-items: center; }
.record-count { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.inventory-toolbar { display: grid; grid-template-columns: minmax(240px,1fr) 175px auto; gap: 8px; padding: 11px 14px; background: var(--surface-soft); border-bottom: 1px solid var(--border); }
.search-control, .filter-control { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 10px; background: #fff; border: 1px solid var(--border-strong); border-radius: 5px; }
.search-control input { width: 100%; padding: 9px 0; border: 0; outline: 0; font-size: 10px; }
.filter-control select { width: 100%; min-height: 35px; background: transparent; border: 0; outline: 0; font-size: 10px; }
.reset-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 13px; color: #fff; background: var(--navy); border: 1px solid var(--navy-dark); border-radius: 5px; cursor: pointer; font-size: 9px; font-weight: 800; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 850px; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 9px; }
th { color: #fff; background: #445c71; font-size: 8px; text-transform: uppercase; }
tbody tr:nth-child(even) { background: #fafbfc; }
tbody tr:hover { background: #f0f5f8; }
.product-cell { display: flex; align-items: center; gap: 9px; min-width: 220px; }
.product-cell strong, .product-cell div span { display: block; }
.product-cell strong { font-size: 10px; }
.product-cell div span { color: var(--muted); font-size: 8px; }
.product-marker { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 1px solid; border-radius: 5px; font-size: 13px; }
.product-marker.devices { color: var(--blue); background: var(--blue-soft); border-color: #b8ccdc; }
.product-marker.equipment { color: #80611e; background: #f6eacb; border-color: #d7bd7d; }
.product-marker.packaging { color: #865f3e; background: #f2e4d7; border-color: #d4b69c; }
.product-marker.supplies { color: #67558d; background: #ebe6f4; border-color: #c6badc; }
.product-marker.warehouse { color: var(--green); background: var(--green-soft); border-color: #b4ceb9; }
.quantity { font-weight: 800; }
.low-number { color: var(--amber); }
.critical-number { color: var(--red); }
.status-badge { display: inline-block; padding: 3px 7px; border: 1px solid; border-radius: 4px; font-size: 8px; font-weight: 800; }
.status-badge.healthy { color: var(--green); background: var(--green-soft); border-color: #a9c6b0; }
.status-badge.low { color: var(--amber); background: var(--amber-soft); border-color: #d8b878; }
.status-badge.critical { color: var(--red); background: var(--red-soft); border-color: #d2a29e; }
.empty-results { padding: 35px 20px; text-align: center; }
.empty-results > i { display: block; margin-bottom: 8px; color: #8b98a3; font-size: 30px; }
.empty-results strong { display: block; }
.empty-results p { color: var(--muted); font-size: 9px; }
.warehouse-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; }
.warehouse-card { overflow: hidden; border: 1px solid var(--border-strong); border-radius: 5px; }
.warehouse-image { position: relative; }
.warehouse-image img { width: 100%; height: 175px; object-fit: cover; }
.warehouse-image > span { position: absolute; left: 9px; bottom: 9px; padding: 5px 7px; color: #fff; background: rgba(24,45,64,.88); border-radius: 4px; font-size: 8px; }
.warehouse-card-body { padding: 12px; }
.warehouse-card-body h3 { margin: 0; color: var(--navy-dark); font-size: 13px; }
.warehouse-card-body > p { margin: 4px 0 11px; color: var(--muted); font-size: 9px; }
.warehouse-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--border); }
.warehouse-stats > div { padding: 9px 5px 0; text-align: center; }
.warehouse-stats span, .warehouse-stats strong { display: block; }
.warehouse-stats span { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.warehouse-stats strong { font-size: 9px; }
.success-text { color: var(--green); }
.activity-list { padding: 3px 16px 13px; }
.activity-item { display: grid; grid-template-columns: 33px 1fr 65px; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.activity-icon { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid; border-radius: 5px; }
.activity-icon.received { color: var(--green); background: var(--green-soft); }
.activity-icon.issued { color: var(--red); background: var(--red-soft); }
.activity-icon.transferred { color: var(--blue); background: var(--blue-soft); }
.activity-item strong { display: block; font-size: 9px; }
.activity-item p, .activity-item time { color: var(--muted); font-size: 8px; }
.warehouse-feature { position: relative; min-height: 350px; overflow: hidden; margin-bottom: 14px; border-top: 4px solid var(--gold); border-radius: 6px; box-shadow: var(--shadow); }
.warehouse-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.warehouse-feature-overlay { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(20,43,61,.92),rgba(20,43,61,.67),rgba(20,43,61,.16)); }
.warehouse-feature-content { position: relative; z-index: 2; max-width: 610px; padding: 58px 44px; color: #fff; }
.feature-label { display: inline-flex; gap: 6px; margin-bottom: 10px; padding: 5px 8px; color: var(--navy-dark); background: #f3dc9f; border-radius: 4px; font-size: 8px; font-weight: 800; }
.warehouse-feature-content h2 { margin: 0 0 11px; font-size: clamp(26px,4vw,40px); }
.warehouse-feature-content > p { color: #e0e7ec; font-size: 12px; }
.feature-stats { display: flex; margin-top: 24px; border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); }
.feature-stats > div { min-width: 118px; padding: 13px 18px 13px 0; margin-right: 18px; }
.feature-stats i, .feature-stats strong, .feature-stats span { display: block; }
.feature-stats i { color: #f1d58b; }
.feature-stats strong { font-size: 19px; }
.feature-stats span { color: #cbd6de; font-size: 7px; text-transform: uppercase; }
.dashboard-footer { display: flex; justify-content: space-between; padding: 12px 14px; color: #ced7de; background: var(--navy-dark); border-top: 3px solid var(--gold); border-radius: 4px; }
.dashboard-footer strong, .dashboard-footer span { display: block; }
.dashboard-footer strong { color: #fff; font-size: 9px; }
.dashboard-footer span { color: #9eb0bd; font-size: 8px; }
.footer-status { color: #8cc19a; font-size: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width:1150px) {
.summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.analytics-grid, .overview-grid, .content-grid { grid-template-columns: 1fr; }
}
@media (max-width:850px) {
.sidebar { transform: translateX(-100%); transition: transform .2s ease; }
.sidebar.is-open { transform: translateX(0); }
.sidebar-close, .menu-button { display: inline-grid; place-items: center; }
.main-content { margin-left: 0; padding: 18px; }
.inventory-toolbar { grid-template-columns: 1fr 170px auto; }
}
@media (max-width:650px) {
.main-content { padding: 12px; }
.page-header { align-items: flex-start; flex-direction: column; }
.header-actions { width: 100%; justify-content: flex-end; }
.summary-grid, .inventory-toolbar, .warehouse-grid { grid-template-columns: 1fr; }
.donut-layout { grid-template-columns: 1fr; }
.donut-chart-container { height: 200px; }
.chart-summary-list { grid-template-columns: repeat(3,1fr); }
.warning-item { grid-template-columns: 32px 1fr; }
.warning-item .status-badge { grid-column: 2; justify-self: start; }
.activity-item { grid-template-columns: 32px 1fr; }
.activity-item time { grid-column: 2; }
.warehouse-feature { min-height: 420px; }
.warehouse-feature-overlay { background: rgba(20,43,61,.76); }
.warehouse-feature-content { padding: 42px 24px; }
.feature-stats { flex-wrap: wrap; }
.dashboard-footer { flex-direction: column; gap: 8px; }
}const sidebar = document.getElementById('sidebar');
const menuButton = document.getElementById('menuButton');
const sidebarClose = document.getElementById('sidebarClose');
const sidebarBackdrop = document.getElementById('sidebarBackdrop');
const inventorySearch = document.getElementById('inventorySearch');
const statusFilter = document.getElementById('statusFilter');
const resetFilters = document.getElementById('resetFilters');
const inventoryRows = Array.from(document.querySelectorAll('#inventoryRows tr'));
const resultCount = document.getElementById('resultCount');
const emptyResults = document.getElementById('emptyResults');
const tableWrap = document.querySelector('.table-wrap');
const dismissAlerts = document.getElementById('dismissAlerts');
const alertPanel = document.getElementById('alertPanel');
function openSidebar() {
if (!sidebar || !menuButton || !sidebarBackdrop) return;
sidebar.classList.add('is-open');
sidebarBackdrop.hidden = false;
menuButton.setAttribute('aria-expanded', 'true');
}
function closeSidebar() {
if (!sidebar || !menuButton || !sidebarBackdrop) return;
sidebar.classList.remove('is-open');
sidebarBackdrop.hidden = true;
menuButton.setAttribute('aria-expanded', 'false');
}
function filterInventory() {
if (!inventorySearch || !statusFilter || !resultCount) return;
const searchValue = inventorySearch.value.trim().toLowerCase();
const selectedStatus = statusFilter.value;
let visibleCount = 0;
inventoryRows.forEach((row) => {
const searchableText = (row.dataset.search || '').toLowerCase();
const rowStatus = row.dataset.status || '';
const matchesSearch = searchableText.includes(searchValue);
const matchesStatus = selectedStatus === 'all' || rowStatus === selectedStatus;
const visible = matchesSearch && matchesStatus;
row.hidden = !visible;
if (visible) visibleCount += 1;
});
resultCount.textContent = String(visibleCount);
if (emptyResults && tableWrap) {
emptyResults.hidden = visibleCount !== 0;
tableWrap.hidden = visibleCount === 0;
}
}
function resetInventoryFilters() {
if (!inventorySearch || !statusFilter) return;
inventorySearch.value = '';
statusFilter.value = 'all';
filterInventory();
inventorySearch.focus();
}
function createCharts() {
if (typeof Chart === 'undefined') return;
Chart.defaults.font.family = 'Arial, Helvetica, sans-serif';
Chart.defaults.color = '#66717d';
const movementCanvas = document.getElementById('stockMovementChart');
const healthCanvas = document.getElementById('inventoryHealthChart');
const capacityCanvas = document.getElementById('warehouseCapacityChart');
if (movementCanvas) {
new Chart(movementCanvas, {
type: 'line',
data: {
labels: ['Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
datasets: [
{
label: 'Received',
data: [420, 510, 460, 620, 570, 690],
borderColor: '#356da0',
backgroundColor: 'rgba(53,109,160,0.10)',
pointBackgroundColor: '#356da0',
pointRadius: 3,
pointHoverRadius: 5,
borderWidth: 2,
tension: 0.25,
fill: true
},
{
label: 'Issued',
data: [310, 370, 390, 440, 410, 470],
borderColor: '#c4963c',
backgroundColor: 'rgba(196,150,60,0.05)',
pointBackgroundColor: '#c4963c',
pointRadius: 3,
pointHoverRadius: 5,
borderWidth: 2,
tension: 0.25,
fill: false
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false
},
plugins: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
boxWidth: 8,
padding: 18,
font: { size: 10 }
}
},
tooltip: {
callbacks: {
label: (context) => `${context.dataset.label}: ${context.parsed.y} units`
}
}
},
scales: {
x: {
grid: { display: false },
ticks: { font: { size: 9 } }
},
y: {
beginAtZero: true,
grid: { color: '#e7ebef' },
ticks: {
font: { size: 9 },
callback: (value) => `${value}`
}
}
}
}
});
}
if (healthCanvas) {
new Chart(healthCanvas, {
type: 'doughnut',
data: {
labels: ['Healthy', 'Low Stock', 'Out of Stock'],
datasets: [{
data: [1173, 18, 7],
backgroundColor: ['#34704a', '#c88725', '#b33a31'],
borderColor: '#ffffff',
borderWidth: 3,
hoverOffset: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '68%',
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: (context) => `${context.label}: ${context.raw} products`
}
}
}
}
});
}
if (capacityCanvas) {
new Chart(capacityCanvas, {
type: 'bar',
data: {
labels: ['Central', 'North', 'South', 'East'],
datasets: [{
label: 'Capacity Used',
data: [76, 58, 69, 47],
backgroundColor: ['#356da0', '#4f7ca4', '#668cae', '#809db8'],
borderColor: '#294f70',
borderWidth: 1,
borderRadius: 3,
maxBarThickness: 42
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: (context) => `${context.raw}% capacity used`
}
}
},
scales: {
x: {
grid: { display: false },
ticks: { font: { size: 9 } }
},
y: {
beginAtZero: true,
max: 100,
ticks: {
stepSize: 20,
font: { size: 9 },
callback: (value) => `${value}%`
},
grid: { color: '#e7ebef' }
}
}
}
});
}
}
if (menuButton) menuButton.addEventListener('click', openSidebar);
if (sidebarClose) sidebarClose.addEventListener('click', closeSidebar);
if (sidebarBackdrop) sidebarBackdrop.addEventListener('click', closeSidebar);
if (inventorySearch) inventorySearch.addEventListener('input', filterInventory);
if (statusFilter) statusFilter.addEventListener('change', filterInventory);
if (resetFilters) resetFilters.addEventListener('click', resetInventoryFilters);
if (dismissAlerts && alertPanel) {
dismissAlerts.addEventListener('click', () => {
alertPanel.hidden = true;
});
}
document.querySelectorAll('.sidebar-nav a').forEach((item) => {
item.addEventListener('click', () => {
document.querySelectorAll('.sidebar-nav a').forEach((navItem) => {
navItem.classList.remove('active');
navItem.removeAttribute('aria-current');
});
item.classList.add('active');
item.setAttribute('aria-current', 'page');
if (window.innerWidth <= 850) closeSidebar();
});
});
window.addEventListener('resize', () => {
if (window.innerWidth > 850) closeSidebar();
});
filterInventory();
createCharts();