add helloword.html, improved UI for analytics
This commit is contained in:
ssbg04 committed
1 parent
f15f7d0e60
commit
75bdfe843e
4 files changed
+334
-126
No files matched your search
+90
-96
@@ -1,102 +1,96 @@
|
||||
<div class="d-flex justify-content-between align-items-center mb-4 header-actions" id="analyticsButtons">
|
||||
<h4 class="mb-0 fw-bold">System Overview</h4>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-outline-success bg-white shadow-sm" onclick="exportExcel()">
|
||||
<i class="bi bi-file-earmark-excel me-1"></i> Excel
|
||||
</button>
|
||||
<button class="btn btn-outline-danger bg-white shadow-sm" onclick="exportPDF()">
|
||||
<i class="bi bi-file-earmark-pdf me-1"></i> PDF
|
||||
</button>
|
||||
<button class="btn btn-primary shadow-sm" onclick="loadAnalytics(this)">
|
||||
<i class="bi bi-arrow-clockwise me-1"></i> Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="analyticsContainer">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4 header-actions">
|
||||
<h4 class="mb-0 fw-bold">Dashboard Analytics</h4>
|
||||
<div class="d-flex gap-2" id="analyticsButtons">
|
||||
<button class="btn btn-outline-success shadow-sm rounded-pill px-3 bg-white" onclick="exportExcel()">
|
||||
<i class="bi bi-file-earmark-excel me-1"></i> Excel
|
||||
</button>
|
||||
<button class="btn btn-outline-danger shadow-sm rounded-pill px-3 bg-white" onclick="exportPDF()">
|
||||
<i class="bi bi-file-earmark-pdf me-1"></i> PDF
|
||||
</button>
|
||||
<button class="btn btn-outline-primary shadow-sm rounded-pill px-3 bg-white" onclick="loadAnalytics(this)">
|
||||
<i class="bi bi-arrow-clockwise me-1"></i> Refresh
|
||||
</button>
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-3">
|
||||
<div class="card border-0 shadow-sm h-100 bg-primary text-white">
|
||||
<div class="card-body p-4">
|
||||
<div class="text-white-50 small fw-bold text-uppercase mb-1">Current Stock Value</div>
|
||||
<h3 class="fw-bold mb-0" id="statTotalValue">₱0.00</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-lg-8">
|
||||
|
||||
<h6 class="fw-bold text-secondary text-uppercase mb-3" style="letter-spacing: 1px;"><i class="bi bi-eye text-primary me-2"></i>1. Descriptive (Current State)</h6>
|
||||
<div class="row g-3 mb-5">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card card-custom kpi-card p-3 text-center h-100 border-top border-primary border-4">
|
||||
<div class="text-muted small fw-bold mb-1">STOCK VALUATION</div>
|
||||
<h4 id="statTotalValue" class="fw-bold text-primary mb-0">₱0.00</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card card-custom kpi-card p-3 text-center h-100 border-top border-dark border-4">
|
||||
<div class="text-muted small fw-bold mb-1">TOTAL PO SPEND</div>
|
||||
<h4 id="statTotalSpend" class="fw-bold text-dark mb-0">₱0.00</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card card-custom kpi-card p-3 text-center h-100 border-top border-secondary border-4">
|
||||
<div class="text-muted small fw-bold mb-1">UNIQUE ITEMS</div>
|
||||
<h4 id="statTotalItems" class="fw-bold text-secondary mb-0">0</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 class="fw-bold text-secondary text-uppercase mb-3" style="letter-spacing: 1px;"><i class="bi bi-search text-info me-2"></i>2. Diagnostic (Trends & Causes)</h6>
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card card-custom kpi-card p-3 text-center h-100 bg-light">
|
||||
<div class="text-muted small fw-bold mb-1">INVENTORY TURNOVER</div>
|
||||
<h3 id="statTurnover" class="fw-bold text-info mb-1">0.00x</h3>
|
||||
<span class="small text-muted">Spend vs. Current Stock</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="card card-custom p-3 h-100">
|
||||
<div class="text-muted small fw-bold mb-2 text-center">SPEND BY CATEGORY (SUPPLIER)</div>
|
||||
<div style="position: relative; height: 150px; width: 100%">
|
||||
<canvas id="spendChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card card-custom p-3">
|
||||
<div class="text-muted small fw-bold mb-2 text-center">VALUATION BY SUPPLIER</div>
|
||||
<div style="position: relative; height: 200px; width: 100%">
|
||||
<canvas id="valuationChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-4">
|
||||
|
||||
<h6 class="fw-bold text-secondary text-uppercase mb-3" style="letter-spacing: 1px;"><i class="bi bi-graph-up-arrow text-warning me-2"></i>3. Predictive (Forecast)</h6>
|
||||
<div class="card card-custom mb-5 p-0 overflow-hidden">
|
||||
<div class="bg-warning bg-opacity-10 p-3 border-bottom border-warning border-opacity-25">
|
||||
<h6 class="fw-bold text-dark mb-0">High-Risk Stockouts</h6>
|
||||
<span class="small text-muted">Items predicted to run out in < 7 days based on recent burn rates.</span>
|
||||
</div>
|
||||
<div class="p-0">
|
||||
<ul class="list-group list-group-flush" id="predictiveList">
|
||||
<li class="list-group-item text-center py-4 text-muted small">Loading predictions...</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 class="fw-bold text-secondary text-uppercase mb-3" style="letter-spacing: 1px;"><i class="bi bi-lightning-charge-fill text-success me-2"></i>4. Prescriptive (Action)</h6>
|
||||
<div class="card card-custom bg-success bg-opacity-10 border-0 p-4 text-center">
|
||||
<div class="mb-3">
|
||||
<i class="bi bi-robot text-success" style="font-size: 2.5rem;"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold text-dark mb-2">System Recommendation</h5>
|
||||
<p class="text-muted small mb-4">
|
||||
You have <strong class="text-danger" id="prescriptiveLowCount">0</strong> items currently below their reorder thresholds. The system can automatically generate optimized Purchase Orders for all affected suppliers right now.
|
||||
</p>
|
||||
<button class="btn btn-success rounded-pill fw-bold shadow-sm w-100 py-2" id="prescriptiveAutoRestockBtn">
|
||||
<i class="bi bi-magic me-2"></i> Execute Auto-Restock
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="text-muted small fw-bold text-uppercase mb-1">Items Borrowed/Issued (30 Days)</div>
|
||||
<h3 class="fw-bold mb-0 text-dark" id="statIssuedItems">0</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="text-muted small fw-bold text-uppercase mb-1">Total Purchases</div>
|
||||
<h3 class="fw-bold mb-0 text-dark" id="statTotalSpend">₱0.00</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="text-muted small fw-bold text-uppercase mb-1">Total Unique Items</div>
|
||||
<h3 class="fw-bold mb-0 text-dark" id="statTotalItems">0</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-md-8">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<h6 class="fw-bold text-dark mb-4">Stock Value by Supplier</h6>
|
||||
<div style="height: 300px;"><canvas id="valuationChart"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<h6 class="fw-bold text-dark mb-4">Spending by Category</h6>
|
||||
<div style="height: 300px;"><canvas id="spendChart"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<h6 class="fw-bold text-dark mb-3"><i class="bi bi-graph-down-arrow text-danger me-2"></i>Stock Depletion Forecast</h6>
|
||||
<p class="text-muted small mb-3">Items expected to run out soon based on recent usage.</p>
|
||||
<ul class="list-group list-group-flush border-top" id="predictiveList"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm h-100 bg-light border border-success border-opacity-25">
|
||||
<div class="card-body p-4 text-center d-flex flex-column justify-content-center">
|
||||
<div class="bg-success bg-opacity-10 text-success d-inline-flex p-3 rounded-circle mx-auto mb-3">
|
||||
<i class="bi bi-box-seam fs-2"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold text-dark">Action Items</h5>
|
||||
<p class="text-muted mb-4">You have <strong id="prescriptiveLowCount" class="text-danger">0</strong> items currently at or below their minimum reorder level.</p>
|
||||
<button class="btn btn-success rounded-pill px-4 py-2 mx-auto shadow-sm" id="prescriptiveAutoRestockBtn">
|
||||
<i class="bi bi-lightning-charge-fill me-1"></i> Auto-Generate Restock Orders
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user