KPI00/anycoder-a4bb2500
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Inventory Monitoring System</title>7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">8 <style>9 :root {10 --primary-color: #3498db;11 --secondary-color: #2980b9;12 --success-color: #2ecc71;13 --warning-color: #f39c12;14 --danger-color: #e74c3c;15 --light-color: #ecf0f1;16 --dark-color: #2c3e50;17 --text-color: #333;18 --border-radius: 8px;19 --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);20 --transition: all 0.3s ease;21 }22 23 * {24 margin: 0;25 padding: 0;26 box-sizing: border-box;27 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;28 }29 30 body {31 background-color: #f5f7fa;32 color: var(--text-color);33 line-height: 1.6;34 }35 36 .container {37 max-width: 100%;38 margin: 0 auto;39 padding: 20px;40 }41 42 header {43 background-color: var(--dark-color);44 color: white;45 padding: 15px 20px;46 display: flex;47 justify-content: space-between;48 align-items: center;49 margin-bottom: 20px;50 border-radius: var(--border-radius);51 box-shadow: var(--box-shadow);52 }53 54 header h1 {55 font-size: 1.8rem;56 font-weight: 600;57 }58 59 .anycoder-link {60 color: var(--success-color);61 text-decoration: none;62 font-weight: 500;63 transition: var(--transition);64 }65 66 .anycoder-link:hover {67 color: white;68 text-decoration: underline;69 }70 71 .date-display {72 background-color: white;73 padding: 15px;74 border-radius: var(--border-radius);75 margin-bottom: 20px;76 box-shadow: var(--box-shadow);77 display: flex;78 justify-content: space-between;79 align-items: center;80 }81 82 .date-info {83 display: flex;84 align-items: center;85 gap: 10px;86 }87 88 .date-info i {89 color: var(--primary-color);90 font-size: 1.2rem;91 }92 93 .controls {94 display: flex;95 gap: 10px;96 }97 98 .btn {99 padding: 8px 15px;100 border: none;101 border-radius: var(--border-radius);102 cursor: pointer;103 font-weight: 500;104 transition: var(--transition);105 display: flex;106 align-items: center;107 gap: 5px;108 }109 110 .btn-primary {111 background-color: var(--primary-color);112 color: white;113 }114 115 .btn-primary:hover {116 background-color: var(--secondary-color);117 }118 119 .btn-success {120 background-color: var(--success-color);121 color: white;122 }123 124 .btn-success:hover {125 background-color: #27ae60;126 }127 128 .btn-warning {129 background-color: var(--warning-color);130 color: white;131 }132 133 .btn-warning:hover {134 background-color: #e67e22;135 }136 137 .btn-danger {138 background-color: var(--danger-color);139 color: white;140 }141 142 .btn-danger:hover {143 background-color: #c0392b;144 }145 146 .inventory-table {147 width: 100%;148 overflow-x: auto;149 background-color: white;150 border-radius: var(--border-radius);151 box-shadow: var(--box-shadow);152 margin-bottom: 20px;153 }154 155 table {156 width: 100%;157 border-collapse: collapse;158 }159 160 th, td {161 padding: 12px 15px;162 text-align: left;163 border-bottom: 1px solid #ddd;164 }165 166 th {167 background-color: var(--dark-color);168 color: white;169 font-weight: 600;170 position: sticky;171 top: 0;172 z-index: 10;173 }174 175 tr:nth-child(even) {176 background-color: var(--light-color);177 }178 179 tr:hover {180 background-color: rgba(52, 152, 219, 0.1);181 }182 183 .status-cell {184 display: flex;185 align-items: center;186 gap: 5px;187 }188 189 .status-indicator {190 width: 10px;191 height: 10px;192 border-radius: 50%;193 }194 195 .status-low {196 background-color: var(--danger-color);197 }198 199 .status-medium {200 background-color: var(--warning-color);201 }202 203 .status-high {204 background-color: var(--success-color);205 }206 207 .action-btn {208 padding: 5px 10px;209 border: none;210 border-radius: 4px;211 cursor: pointer;212 font-size: 0.9rem;213 transition: var(--transition);214 }215 216 .action-btn i {217 margin-right: 3px;218 }219 220 .edit-btn {221 background-color: var(--primary-color);222 color: white;223 }224 225 .edit-btn:hover {226 background-color: var(--secondary-color);227 }228 229 .delete-btn {230 background-color: var(--danger-color);231 color: white;232 }233 234 .delete-btn:hover {235 background-color: #c0392b;236 }237 238 .search-filter {239 display: flex;240 justify-content: space-between;241 align-items: center;242 margin-bottom: 20px;243 gap: 10px;244 }245 246 .search-box {247 flex: 1;248 max-width: 400px;249 position: relative;250 }251 252 .search-box input {253 width: 100%;254 padding: 10px 15px 10px 40px;255 border: 1px solid #ddd;256 border-radius: var(--border-radius);257 font-size: 1rem;258 transition: var(--transition);259 }260 261 .search-box input:focus {262 outline: none;263 border-color: var(--primary-color);264 box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);265 }266 267 .search-box i {268 position: absolute;269 left: 15px;270 top: 50%;271 transform: translateY(-50%);272 color: #7f8c8d;273 }274 275 .filter-select {276 padding: 10px 15px;277 border: 1px solid #ddd;278 border-radius: var(--border-radius);279 font-size: 1rem;280 background-color: white;281 cursor: pointer;282 }283 284 .summary-cards {285 display: grid;286 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));287 gap: 20px;288 margin-bottom: 20px;289 }290 291 .summary-card {292 background-color: white;293 padding: 20px;294 border-radius: var(--border-radius);295 box-shadow: var(--box-shadow);296 display: flex;297 flex-direction: column;298 gap: 10px;299 }300 301 .summary-card h3 {302 font-size: 1rem;303 color: #7f8c8d;304 font-weight: 500;305 }306 307 .summary-card .value {308 font-size: 2rem;309 font-weight: 700;310 color: var(--dark-color);311 }312 313 .summary-card i {314 font-size: 2.5rem;315 opacity: 0.2;316 align-self: flex-end;317 }318 319 .card-total {320 color: var(--primary-color);321 }322 323 .card-low {324 color: var(--danger-color);325 }326 327 .card-medium {328 color: var(--warning-color);329 }330 331 .card-high {332 color: var(--success-color);333 }334 335 .modal {336 display: none;337 position: fixed;338 z-index: 1000;339 left: 0;340 top: 0;341 width: 100%;342 height: 100%;343 background-color: rgba(0, 0, 0, 0.5);344 overflow: auto;345 }346 347 .modal-content {348 background-color: white;349 margin: 5% auto;350 padding: 30px;351 border-radius: var(--border-radius);352 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);353 width: 90%;354 max-width: 600px;355 position: relative;356 }357 358 .close-modal {359 position: absolute;360 right: 20px;361 top: 20px;362 font-size: 1.5rem;363 cursor: pointer;364 color: #7f8c8d;365 transition: var(--transition);366 }367 368 .close-modal:hover {369 color: var(--danger-color);370 }371 372 .modal-header {373 display: flex;374 justify-content: space-between;375 align-items: center;376 margin-bottom: 20px;377 padding-bottom: 15px;378 border-bottom: 1px solid #eee;379 }380 381 .modal-header h2 {382 font-size: 1.5rem;383 color: var(--dark-color);384 }385 386 .form-group {387 margin-bottom: 20px;388 }389 390 .form-group label {391 display: block;392 margin-bottom: 8px;393 font-weight: 500;394 color: var(--dark-color);395 }396 397 .form-group input,398 .form-group select {399 width: 100%;400 padding: 10px 15px;401 border: 1px solid #ddd;402 border-radius: var(--border-radius);403 font-size: 1rem;404 transition: var(--transition);405 }406 407 .form-group input:focus,408 .form-group select:focus {409 outline: none;410 border-color: var(--primary-color);411 box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);412 }413 414 .modal-footer {415 display: flex;416 justify-content: flex-end;417 gap: 10px;418 margin-top: 20px;419 }420 421 .pagination {422 display: flex;423 justify-content: center;424 align-items: center;425 gap: 5px;426 margin-top: 20px;427 }428 429 .pagination button {430 padding: 8px 12px;431 border: 1px solid #ddd;432 background-color: white;433 border-radius: var(--border-radius);434 cursor: pointer;435 transition: var(--transition);436 }437 438 .pagination button:hover {439 background-color: var(--light-color);440 }441 442 .pagination button.active {443 background-color: var(--primary-color);444 color: white;445 border-color: var(--primary-color);446 }447 448 .pagination button:disabled {449 opacity: 0.5;450 cursor: not-allowed;451 }452 453 .export-section {454 display: flex;455 gap: 10px;456 margin-bottom: 20px;457 }458 459 .export-btn {460 padding: 10px 15px;461 border: 1px solid #ddd;462 background-color: white;463 border-radius: var(--border-radius);464 cursor: pointer;465 display: flex;466 align-items: center;467 gap: 5px;468 transition: var(--transition);469 }470 471 .export-btn:hover {472 background-color: var(--light-color);473 }474 475 .chart-container {476 background-color: white;477 padding: 20px;478 border-radius: var(--border-radius);479 box-shadow: var(--box-shadow);480 margin-top: 20px;481 }482 483 .chart-header {484 display: flex;485 justify-content: space-between;486 align-items: center;487 margin-bottom: 20px;488 }489 490 .chart-header h2 {491 font-size: 1.3rem;492 color: var(--dark-color);493 }494 495 .chart-select {496 padding: 8px 15px;497 border: 1px solid #ddd;498 border-radius: var(--border-radius);499 font-size: 0.9rem;500 }501 502 @media (max-width: 768px) {503 header {504 flex-direction: column;505 gap: 10px;506 text-align: center;507 }508 509 .date-display {510 flex-direction: column;511 gap: 10px;512 text-align: center;513 }514 515 .search-filter {516 flex-direction: column;517 align-items: stretch;518 }519 520 .search-box {521 max-width: 100%;522 }523 524 .summary-cards {525 grid-template-columns: 1fr;526 }527 528 .modal-content {529 width: 95%;530 padding: 20px;531 }532 533 th, td {534 padding: 8px 10px;535 font-size: 0.9rem;536 }537 538 .action-btn {539 padding: 3px 6px;540 font-size: 0.8rem;541 }542 }543 544 @media (max-width: 480px) {545 header h1 {546 font-size: 1.3rem;547 }548 549 .date-info {550 flex-direction: column;551 text-align: center;552 }553 554 .controls {555 flex-wrap: wrap;556 justify-content: center;557 }558 559 .btn {560 padding: 6px 10px;561 font-size: 0.9rem;562 }563 564 .form-group input,565 .form-group select {566 padding: 8px 12px;567 }568 }569 </style>570</head>571<body>572 <div class="container">573 <header>574 <h1>Inventory Monitoring System</h1>575 <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">576 <i class="fas fa-code"></i> Built with anycoder577 </a>578 </header>579 580 <div class="date-display">581 <div class="date-info">582 <i class="fas fa-calendar-alt"></i>583 <span>Inventory Date: <strong>10/23/2025</strong></span>584 </div>585 <div class="controls">586 <button class="btn btn-primary" id="refreshBtn">587 <i class="fas fa-sync-alt"></i> Refresh588 </button>589 <button class="btn btn-success" id="addItemBtn">590 <i class="fas fa-plus"></i> Add Item591 </button>592 </div>593 </div>594 595 <div class="search-filter">596 <div class="search-box">597 <i class="fas fa-search"></i>598 <input type="text" id="searchInput" placeholder="Search items...">599 </div>600 <select class="filter-select" id="statusFilter">601 <option value="all">All Status</option>602 <option value="low">Low Stock</option>603 <option value="medium">Medium Stock</option>604 <option value="high">High Stock</option>605 </select>606 </div>607 608 <div class="summary-cards">609 <div class="summary-card">610 <h3>Total Items</h3>611 <div class="value" id="totalItems">0</div>612 <i class="fas fa-boxes card-total"></i>613 </div>614 <div class="summary-card">615 <h3>Low Stock</h3>616 <div class="value" id="lowStock">0</div>617 <i class="fas fa-exclamation-triangle card-low"></i>618 </div>619 <div class="summary-card">620 <h3>Medium Stock</h3>621 <div class="value" id="mediumStock">0</div>622 <i class="fas fa-exclamation-circle card-medium"></i>623 </div>624 <div class="summary-card">625 <h3>High Stock</h3>626 <div class="value" id="highStock">0</div>627 <i class="fas fa-check-circle card-high"></i>628 </div>629 </div>630 631 <div class="export-section">632 <button class="export-btn" id="exportExcel">633 <i class="fas fa-file-excel"></i> Export to Excel634 </button>635 <button class="export-btn" id="exportPDF">636 <i class="fas fa-file-pdf"></i> Export to PDF637 </button>638 <button class="export-btn" id="printBtn">639 <i class="fas fa-print"></i> Print640 </button>641 </div>642 643 <div class="inventory-table">644 <table id="inventoryTable">645 <thead>646 <tr>647 <th>Item Description</th>648 <th>Supplier</th>649 <th>Pallet Config</th>650 <th>Daily Consumption</th>651 <th>Total for Buffer</th>652 <th>Current Inventory (Pasig)</th>653 <th>Current Inventory (Jenny's)</th>654 <th>Total Inventory</th>655 <th>Consumption Days</th>656 <th>Status</th>657 <th>Actions</th>658 </tr>659 </thead>660 <tbody id="tableBody">661 <!-- Table data will be populated by JavaScript -->662 </tbody>663 </table>664 </div>665 666 <div class="pagination">667 <button id="prevBtn" disabled><i class="fas fa-chevron-left"></i></button>668 <div id="pageNumbers"></div>669 <button id="nextBtn" disabled><i class="fas fa-chevron-right"></i></button>670 </div>671 672 <div class="chart-container">673 <div class="chart-header">674 <h2>Inventory Status Distribution</h2>675 <select class="chart-select" id="chartType">676 <option value="pie">Pie Chart</option>677 <option value="bar">Bar Chart</option>678 </select>679 </div>680 <canvas id="inventoryChart" width="400" height="200"></canvas>681 </div>682 </div>683 684 <!-- Add/Edit Item Modal -->685 <div id="itemModal" class="modal">686 <div class="modal-content">687 <span class="close-modal">×</span>688 <div class="modal-header">689 <h2 id="modalTitle">Add New Item</h2>690 </div>691 <form id="itemForm">692 <div class="form-group">693 <label for="itemDescription">Item Description</label>694 <input type="text" id="itemDescription" required>695 </div>696 <div class="form-group">697 <label for="supplier">Supplier</label>698 <select id="supplier" required>699 <option value="">Select Supplier</option>700 <option value="Synergy">Synergy</option>701 <option value="Metro Paper">Metro Paper</option>702 <option value="Label-line">Label-line</option>703 <option value="Lorenza">Lorenza</option>704 <option value="Sanfo">Sanfo</option>705 <option value="Mega Fortris">Mega Fortris</option>706 <option value="M'sakay">M'sakay</option>707 <option value="Am. Tech">Am. Tech</option>708 <option value="Metasystem">Metasystem</option>709 <option value="RVA">RVA</option>710 <option value="ONE1">ONE1</option>711 <option value="Ink for less">Ink for less</option>712 <option value="IFL">IFL</option>713 <option value="Psalms">Psalms</option>714 <option value="Contrade">Contrade</option>715 <option value="Advance Lane">Advance Lane</option>716 <option value="ELITE">ELITE</option>717 </select>718 </div>719 <div class="form-group">720 <label for="palletConfig">Pallet Configuration</label>721 <input type="text" id="palletConfig" placeholder="e.g., 15 boxes per pallet">722 </div>723 <div class="form-group">724 <label for="dailyConsumption">Daily Consumption</label>725 <input type="number" id="dailyConsumption" min="0">726 </div>727 <div class="form-group">728 <label for="bufferTotal">Total for Buffer (December)</label>729 <input type="number" id="bufferTotal" min="0">730 </div>731 <div class="form-group">732 <label for="pasigInventory">Current Inventory @ Pasig Whse</label>733 <input type="number" id="pasigInventory" min="0">734 </div>735 <div class="form-group">736 <label for="jennyInventory">Current Inventory @ Jenny's Whse</label>737 <input type="number" id="jennyInventory" min="0">738 </div>739 <div class="form-group">740 <label for="lastUpdated">Last Updated Date</label>741 <input type="date" id="lastUpdated">742 </div>743 <div class="modal-footer">744 <button type="button" class="btn btn-danger" id="cancelBtn">Cancel</button>745 <button type="submit" class="btn btn-success" id="saveBtn">Save</button>746 </div>747 </form>748 </div>749 </div>750 751 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>752 <script>753 // Sample inventory data754 const inventoryData = [755 {756 id: 1,757 description: "Packaging Tape (144pcs)",758 supplier: "Synergy",759 palletConfig: "15 boxes per pallet",760 dailyConsumption: 13,761 bufferTotal: 1,762 pasigInventory: 213,763 jennyInventory: 0,764 lastUpdated: "2025-11-06",765 unit: "Box"766 },767 {768 id: 2,769 description: "Stretch Film",770 supplier: "Synergy",771 palletConfig: "",772 dailyConsumption: 3,773 bufferTotal: 2,774 pasigInventory: 112,775 jennyInventory: 845,776 lastUpdated: "2026-05-02",777 unit: "Roll"778 },779 {780 id: 3,781 description: "Bubble Wrap",782 supplier: "Synergy",783 palletConfig: "",784 dailyConsumption: 1,785 bufferTotal: 0,786 pasigInventory: 0,787 jennyInventory: 0,788 lastUpdated: "2025-10-23",789 unit: "Roll"790 },791 {792 id: 4,793 description: "Bond Paper",794 supplier: "Metro Paper",795 palletConfig: "60 boxes per pallet",796 dailyConsumption: 40,797 bufferTotal: 5,798 pasigInventory: 1195,799 jennyInventory: 0,800 lastUpdated: "2025-11-15",801 unit: "Ream"802 },803 {804 id: 5,805 description: "3-Ply Continuous Form",806 supplier: "Metro Paper",807 palletConfig: "75 boxes per pallet",808 dailyConsumption: 5,809 bufferTotal: 10,810 pasigInventory: 305,811 jennyInventory: 0,812 lastUpdated: "2025-11-12",813 unit: "Box"814 },815 {816 id: 6,817 description: "2-Ply Continuous Form",818 supplier: "Metro Paper",819 palletConfig: "1,000 piece per box",820 dailyConsumption: 16,821 bufferTotal: 12,822 pasigInventory: 96,823 jennyInventory: 0,824 lastUpdated: "2025-10-26",825 unit: "Box"826 },827 {828 id: 7,829 description: "1-Ply Continuous Form",830 supplier: "Metro Paper",831 palletConfig: "80 box per pallet",832 dailyConsumption: 6,833 bufferTotal: 10,834 pasigInventory: 261,835 jennyInventory: 0,836 lastUpdated: "2025-11-08",837 unit: "Box"838 },839 {840 id: 8,841 description: "Barcode (Plain) LabelLine",842 supplier: "Label-line",843 palletConfig: "15 rolls per box",844 dailyConsumption: 12,845 bufferTotal: 3,846 pasigInventory: 135,847 jennyInventory: 0,848 lastUpdated: "2025-11-01",849 unit: "Roll"850 },851 {852 id: 9,853 description: "CDI Sticker",854 supplier: "Label-line",855 palletConfig: "10 pads per bundle",856 dailyConsumption: 15,857 bufferTotal: 0,858 pasigInventory: 0,859 jennyInventory: 0,860 lastUpdated: "2025-10-23",861 unit: "Pad"862 },863 {864 id: 10,865 description: "Store Parcel Route Sticker",866 supplier: "Label-line",867 palletConfig: "10 pads per bundle",868 dailyConsumption: 5,869 bufferTotal: 0,870 pasigInventory: 105,871 jennyInventory: 0,872 lastUpdated: "2025-11-13",873 unit: "Pad"874 }875 ];876 877 // DOM Elements878 const tableBody = document.getElementById('tableBody');879 const searchInput = document.getElementById('searchInput');880 const statusFilter = document.getElementById('statusFilter');881 const addItemBtn = document.getElementById('addItemBtn');882 const itemModal = document.getElementById('itemModal');883 const closeModal = document.querySelector('.close-modal');884 const cancelBtn = document.getElementById('cancelBtn');885 const itemForm = document.getElementById('itemForm');886 const modalTitle = document.getElementById('modalTitle');887 const saveBtn = document.getElementById('saveBtn');888 const prevBtn = document.getElementById('prevBtn');889 const nextBtn = document.getElementById('nextBtn');890 const pageNumbers = document.getElementById('pageNumbers');891 const exportExcel = document.getElementById('exportExcel');892 const exportPDF = document.getElementById('exportPDF');893 const printBtn = document.getElementById('printBtn');894 const chartType = document.getElementById('chartType');895 896 // Pagination variables897 let currentPage = 1;898 const rowsPerPage = 10;899 let filteredData = [...inventoryData];900 901 // Chart variables902 let inventoryChart;903 904 // Initialize the app905 function init() {906 renderTable();907 renderPagination();908 renderSummary();909 renderChart();910 setupEventListeners();911 }912 913 // Render table with data914 function renderTable() {915 const startIndex = (currentPage - 1) * rowsPerPage;916 const endIndex = startIndex + rowsPerPage;917 const paginatedData = filteredData.slice(startIndex, endIndex);918 919 tableBody.innerHTML = '';920 921 if (paginatedData.length === 0) {922 tableBody.innerHTML = `923 <tr>924 <td colspan="11" style="text-align: center; padding: 40px; color: #7f8c8d;">925 No items found matching your criteria.926 </td>927 </tr>928 `;929 return;930 }931 932 paginatedData.forEach(item => {933 const totalInventory = item.pasigInventory + item.jennyInventory;934 const consumptionDays = item.dailyConsumption > 0935 ? Math.floor(totalInventory / item.dailyConsumption)936 : 0;937 938 let status = 'high';939 let statusText = 'Enough Stock';940 941 if (consumptionDays <= 7) {942 status = 'low';943 statusText = 'Low Stock';944 } else if (consumptionDays <= 14) {945 status = 'medium';946 statusText = 'Medium Stock';947 }948 949 const row = document.createElement('tr');950 row.innerHTML = `951 <td>${item.description}</td>952 <td>${item.supplier}</td>953 <td>${item.palletConfig}</td>954 <td>${item.dailyConsumption}</td>955 <td>${item.bufferTotal}</td>956 <td>${item.pasigInventory.toLocaleString()}</td>957 <td>${item.jennyInventory.toLocaleString()}</td>958 <td>${totalInventory.toLocaleString()}</td>959 <td>${consumptionDays}</td>960 <td>961 <div class="status-cell">962 <div class="status-indicator status-${status}"></div>963 ${statusText}964 </div>965 </td>966 <td>967 <button class="action-btn edit-btn" data-id="${item.id}">968 <i class="fas fa-edit"></i> Edit969 </button>970 <button class="action-btn delete-btn" data-id="${item.id}">971 <i class="fas fa-trash"></i> Delete972 </button>973 </td>974 `;975 tableBody.appendChild(row);976 });977 978 // Add event listeners to action buttons979 document.querySelectorAll('.edit-btn').forEach(btn => {980 btn.addEventListener('click', () => editItem(btn.dataset.id));981 });982 983 document.querySelectorAll('.delete-btn').forEach(btn => {984 btn.addEventListener('click', () => deleteItem(btn.dataset.id));985 });986 }987 988 // Render pagination controls989 function renderPagination() {990 const totalPages = Math.ceil(filteredData.length / rowsPerPage);991 992 // Update page numbers993 pageNumbers.innerHTML = '';994 for (let i = 1; i <= totalPages; i++) {995 const pageBtn = document.createElement('button');996 pageBtn.textContent = i;997 if (i === currentPage) {998 pageBtn.classList.add('active');999 }1000 pageBtn.addEventListener('click', () => {1001 currentPage = i;1002 renderTable();1003 renderPagination();1004 });1005 pageNumbers.appendChild(pageBtn);1006 }1007 1008 // Update prev/next buttons1009 prevBtn.disabled = currentPage === 1;1010 nextBtn.disabled = currentPage === totalPages || totalPages === 0;1011 }1012 1013 // Render summary cards1014 function renderSummary() {1015 const lowStockItems = filteredData.filter(item => {1016 const totalInventory = item.pasigInventory + item.jennyInventory;1017 const consumptionDays = item.dailyConsumption > 01018 ? Math.floor(totalInventory / item.dailyConsumption)1019 : 0;1020 return consumptionDays <= 7;1021 }).length;1022 1023 const mediumStockItems = filteredData.filter(item => {1024 const totalInventory = item.pasigInventory + item.jennyInventory;1025 const consumptionDays = item.dailyConsumption > 01026 ? Math.floor(totalInventory / item.dailyConsumption)1027 : 0;1028 return consumptionDays > 7 && consumptionDays <= 14;1029 }).length;1030 1031 const highStockItems = filteredData.filter(item => {1032 const totalInventory = item.pasigInventory + item.jennyInventory;1033 const consumptionDays = item.dailyConsumption > 01034 ? Math.floor(totalInventory / item.dailyConsumption)1035 : 0;1036 return consumptionDays > 14;1037 }).length;1038 1039 document.getElementById('totalItems').textContent = filteredData.length;1040 document.getElementById('lowStock').textContent = lowStockItems;1041 document.getElementById('mediumStock').textContent = mediumStockItems;1042 document.getElementById('highStock').textContent = highStockItems;1043 }1044 1045 // Render chart1046 function renderChart() {1047 const ctx = document.getElementById('inventoryChart').getContext('2d');1048 1049 const lowStockItems = filteredData.filter(item => {1050 const totalInventory = item.pasigInventory + item.jennyInventory;1051 const consumptionDays = item.dailyConsumption > 01052 ? Math.floor(totalInventory / item.dailyConsumption)1053 : 0;1054 return consumptionDays <= 7;1055 }).length;1056 1057 const mediumStockItems = filteredData.filter(item => {1058 const totalInventory = item.pasigInventory + item.jennyInventory;1059 const consumptionDays = item.dailyConsumption > 01060 ? Math.floor(totalInventory / item.dailyConsumption)1061 : 0;1062 return consumptionDays > 7 && consumptionDays <= 14;1063 }).length;1064 1065 const highStockItems = filteredData.filter(item => {1066 const totalInventory = item.pasigInventory + item.jennyInventory;1067 const consumptionDays = item.dailyConsumption > 01068 ? Math.floor(totalInventory / item.dailyConsumption)1069 : 0;1070 return consumptionDays > 14;1071 }).length;1072 1073 if (inventoryChart) {1074 inventoryChart.destroy();1075 }1076 1077 if (chartType.value === 'pie') {1078 inventoryChart = new Chart(ctx, {1079 type: 'pie',1080 data: {1081 labels: ['Low Stock', 'Medium Stock', 'High Stock'],1082 datasets: [{1083 data: [lowStockItems, mediumStockItems, highStockItems],1084 backgroundColor: [1085 '#e74c3c',1086 '#f39c12',1087 '#2ecc71'1088 ],1089 borderWidth: 11090 }]1091 },1092 options: {1093 responsive: true,1094 plugins: {1095 legend: {1096 position: 'top',1097 },1098 tooltip: {1099 callbacks: {1100 label: function(context) {1101 const label = context.label || '';1102 const value = context.raw || 0;1103 const total = context.dataset.data.reduce((a, b) => a + b, 0);1104 const percentage = Math.round((value / total) * 100);1105 return `${label}: ${value} (${percentage}%)`;1106 }1107 }1108 }1109 }1110 }1111 });1112 } else {1113 inventoryChart = new Chart(ctx, {1114 type: 'bar',1115 data: {1116 labels: ['Low Stock', 'Medium Stock', 'High Stock'],1117 datasets: [{1118 label: 'Number of Items',1119 data: [lowStockItems, mediumStockItems, highStockItems],1120 backgroundColor: [1121 '#e74c3c',1122 '#f39c12',1123 '#2ecc71'1124 ],1125 borderWidth: 11126 }]1127 },1128 options: {1129 responsive: true,1130 plugins: {1131 legend: {1132 display: false1133 },1134 tooltip: {1135 callbacks: {1136 label: function(context) {1137 return `${context.dataset.label}: ${context.raw}`;1138 }1139 }1140 }1141 },1142 scales: {1143 y: {1144 beginAtZero: true,1145 ticks: {1146 stepSize: 11147 }1148 }1149 }1150 }1151 });1152 }1153 }1154 1155 // Filter data based on search and status1156 function filterData() {1157 const searchTerm = searchInput.value.toLowerCase();1158 const status = statusFilter.value;1159 1160 filteredData = inventoryData.filter(item => {1161 const matchesSearch = item.description.toLowerCase().includes(searchTerm) ||1162 item.supplier.toLowerCase().includes(searchTerm);1163 1164 if (status === 'all') return matchesSearch;1165 1166 const totalInventory = item.pasigInventory + item.jennyInventory;1167 const consumptionDays = item.dailyConsumption > 01168 ? Math.floor(totalInventory / item.dailyConsumption)1169 : 0;1170 1171 if (status === 'low') {1172 return matchesSearch && consumptionDays <= 7;1173 } else if (status === 'medium') {1174 return matchesSearch && consumptionDays > 7 && consumptionDays <= 14;1175 } else {1176 return matchesSearch && consumptionDays > 14;1177 }1178 });1179 1180 currentPage = 1;1181 renderTable();1182 renderPagination();1183 renderSummary();1184 renderChart();1185 }1186 1187 // Open modal for adding/editing item1188 function openModal(item = null) {1189 if (item) {1190 modalTitle.textContent = 'Edit Item';1191 document.getElementById('itemDescription').value = item.description;1192 document.getElementById('supplier').value = item.supplier;1193 document.getElementById('palletConfig').value = item.palletConfig;1194 document.getElementById('dailyConsumption').value = item.dailyConsumption;1195 document.getElementById('bufferTotal').value = item.bufferTotal;1196 document.getElementById('pasigInventory').value = item.pasigInventory;1197 document.getElementById('jennyInventory').value = item.jennyInventory;1198 document.getElementById('lastUpdated').value = item.lastUpdated;1199 saveBtn.textContent = 'Update';1200 saveBtn.dataset.id = item.id;