inventrack 3.0.0

package/frontend/js/utils.js

@@ -0,0 +1,234 @@
+// * json-server --watch db.json --port 3000
+
+// Fun for NavBar
+function renderNavbar(activePage) {
+  // Top NavBar
+  const topNavbar = `
+    <nav class="navbar navbar-expand-lg px-4" style="background-color: var(--primary); height: var(--topbar-height);">
+
+        <a class="navbar-brand d-flex align-items-center gap-2 fw-bold text-white" href="dashboard.html">
+            <img src="assets/logo.png" alt="InvenTrack" width="32" height="32" class="rounded-circle" />
+            InvenTrack
+        </a>
+
+        <div class="ms-auto d-flex align-items-center gap-3">
+            <i class="fas fa-bell fs-5 text-white"></i>
+            <div>
+                <img src="https://cdn-icons-png.flaticon.com/512/149/149071.png" width="34" height="34" class="rounded-circle border border-white" role="button" data-bs-toggle="dropdown" alt="profile" />
+                <ul class="dropdown-menu dropdown-menu-end">
+                    <li><a class="dropdown-item" href="#">Profile</a></li>
+                    <li><hr class="dropdown-divider" /></li>
+                    <li><a class="dropdown-item text-danger" href="index.html">Logout</a></li>
+                </ul>
+            </div>
+        </div>
+
+    </nav>
+  `;
+
+  //   Second NavBar
+  const pages = [
+    { label: "Dashboard", icon: "fa-gauge", href: "dashboard.html" },
+    { label: "Products", icon: "fa-box", href: "products.html" },
+    { label: "Categories", icon: "fa-tags", href: "categories.html" },
+    { label: "Suppliers", icon: "fa-truck", href: "suppliers.html" },
+    { label: "Orders", icon: "fa-cart-shopping", href: "orders.html" },
+    { label: "InventoryInsights", icon: "fa-chart-bar", href: "inventoryInsights.html" },
+    { label: "InventoryOverview", icon: "fa-chart-bar", href: "inventoryOverview.html" },
+  ];
+
+  const navItems = pages
+    .map(
+      (page) => `
+    <li class="nav-item">
+        <a class="nav-link ${activePage === page.label ? "active" : ""}" href="${page.href}">
+            <i class="fas ${page.icon} me-1"></i>${((page.label).split('y')).join('y ')}
+        </a>
+    </li>
+  `,
+    )
+    .join("");
+
+  const secondNavbar = `
+    <nav class="navbar navbar-expand-lg px-4" style="background-color: #fff; border-bottom: 2px solid #e5e0f5;">
+
+             <a class="nav-link active d-flex d-lg-none align-items-center gap-2 fw-semibold" style="color: var(--primary);" href="#">
+                <i class="fas ${pages.find((p) => p.label === activePage)?.icon} me-1"></i>${activePage}
+             </a>
+
+             <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#secondNavMenu">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="secondNavMenu">
+                <ul class="navbar-nav flex-row flex-wrap gap-1 me-auto">
+                    ${navItems}
+                </ul>
+            </div>
+
+    </nav>
+  `;
+
+  document.getElementById("top-navbar").innerHTML = topNavbar;
+  document.getElementById("second-navbar").innerHTML = secondNavbar;
+}
+
+function renderFooter() {
+  const footer = `
+    <div class="container">
+      <p>copyright@invenTrack.com</p>
+    </div>
+ `
+  document.getElementById('footer').innerHTML = footer;
+}
+
+// * Modal Helpers
+
+const closeModal = function () {
+  modal.classList.add('hidden')
+  modalOverlay.classList.add('hidden')
+}
+const showModal = function () {
+  modal.classList.remove('hidden')
+  modalOverlay.classList.remove('hidden')
+}
+
+// * Search functionality (Should be suitable for all pages)
+
+
+// ^ search By Name
+async function searchByName(endpoint, searchInputValue) {
+  let pageData = (await getData(`${endpoint}`)).data
+  let dataAfterFilteration = pageData.filter((data) => {
+    return data.name.toLowerCase().includes(searchInputValue.toLowerCase());
+  });
+  return dataAfterFilteration;
+}
+
+// ^ filter By Status
+async function filterByStatus(selectValue, endpoint) {
+  let pageData = (await getData(`${endpoint}`)).data
+  if (!selectValue.value || selectValue.value !== 'all') {
+    return pageData.filter((data) => {
+      return data.status.toLowerCase() === selectValue.value.toLowerCase()
+    });
+  }
+  else {
+    return pageData
+  }
+}
+
+
+
+// * Sort Functionality (Should be suitable for all pages)
+
+
+
+
+// * Pagination
+
+// ~ notes for pagination in Yur HTML you should only add this html tag at the same level of your table of data
+// * <div id="pagination" class="container w-50 d-flex align-items-center justify-content-between"> </div > 
+
+// & Calculate total pages number
+function getTotalPages(totalCount, limit) {
+  return Math.ceil(totalCount / limit);
+}
+
+// & Rendering Pagination
+// ^ Container > is the pagination container you want buttons inside 
+// ^ state > I added it in each js page so you can control pagination state using one VARIABLE (Object) istead ot multiple Variables
+// ^ onPageChange > is a parameter representing the renderTable function which is used to render data in the table from the json file
+
+// ! Don't forget to call it every time (After rendering data and if no products found also but not in < network error > (Getting data from json file))
+
+function renderPagination(container, state, onPageChange) {
+  if (!container) {
+    console.error("Pagination container not found");
+    return;
+  }
+
+  container.innerHTML = "";
+
+  const totalPages = Math.ceil(state.totalCount / state.limit);
+
+  if (totalPages <= 1) return;
+
+  const prevBtn = document.createElement("button");
+  prevBtn.textContent = "Prev";
+  prevBtn.classList.add('prevBtn')
+  prevBtn.disabled = state.page === 1;
+  prevBtn.addEventListener("click", function () {
+    if (state.page > 1) {
+      state.page--;
+      onPageChange();
+    }
+  });
+  container.appendChild(prevBtn);
+
+  for (let i = 1; i <= totalPages; i++) {
+    const btn = document.createElement("button");
+    btn.classList.add('pagePaginateBtn')
+    btn.textContent = i;
+
+    if (i === state.page) {
+      btn.classList.add("active");
+      btn.classList.add('colored')
+    }
+
+    btn.addEventListener("click", function () {
+      state.page = i;
+      onPageChange();
+    });
+
+    container.appendChild(btn);
+  }
+
+  const nextBtn = document.createElement("button");
+  nextBtn.textContent = "Next";
+  nextBtn.classList.add('nextBtn')
+  nextBtn.disabled = state.page === totalPages;
+  nextBtn.addEventListener("click", function () {
+    if (state.page < totalPages) {
+      state.page++;
+      onPageChange();
+    }
+  });
+  container.appendChild(nextBtn);
+}
+
+
+// * Validation 
+
+function validateInputs(regexForValidInput, inputElement, messageShowForUser) {
+  const value = inputElement.value.trim();
+
+  if (regexForValidInput.test(value)) {
+    inputElement.setCustomValidity("");
+    inputElement.style.border = "2px solid rgb(0, 208, 59)";
+  } else {
+    inputElement.setCustomValidity(messageShowForUser);
+    inputElement.reportValidity();
+    inputElement.style.border = "2px solid rgba(255, 89, 89, 0.89)";
+  }
+}
+
+function validateSelect(selectValidate) {
+  if (selectValidate.value === "") {
+    selectValidate.setCustomValidity("Please select a value");
+    selectValidate.reportValidity();
+    selectValidate.style.border = "2px solid rgba(255, 89, 89, 0.89)";
+  } else {
+    selectValidate.setCustomValidity("");
+    selectValidate.style.border = "2px solid rgb(0, 208, 59)";
+  }
+}
+
+
+// * Get Stock Class 
+
+function getStockClass(quantity, minStock) {
+  if (quantity === 0) return "stock-critical";
+  if (quantity <= minStock) return "stock-critical";
+  return "stock-normal";
+}

package/frontend/orders.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Orders Page</title>
+
+  <link rel="stylesheet" href="css/bootstrap.min.css" />
+  <link rel="stylesheet" href="css/all.min.css" />
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="stylesheet" href="css/orders.css" />
+</head>
+
+<body class="orders-page">
+  <div id="top-navbar"></div>
+  <div id="second-navbar"></div>
+
+  <main class="orders-content">
+    <div class="container px-3 px-md-4 px-lg-5">
+      <!-- Header -->
+      <div
+        class="orders-header d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
+        <div>
+          <h1 class="orders-title">Purchase Orders</h1>
+          <p class="orders-subtitle mb-0">Manage orders from suppliers</p>
+        </div>
+
+        <button class="btn create-order-btn" data-bs-toggle="modal" data-bs-target="#createOrderModal">
+          <i class="fa-solid fa-plus"></i>
+          <span>Create Order</span>
+        </button>
+      </div>
+
+      <!-- Search -->
+      <div class="search-wrapper">
+        <i class="fa-solid fa-magnifying-glass search-icon"></i>
+        <input type="text" class="form-control order-search-input" placeholder="Search by Order ID or Supplier..." />
+      </div>
+
+      <!-- Desktop / Tablet Table -->
+      <div class="orders-table-card d-none d-md-block">
+        <div class="table-responsive">
+          <table class="table orders-table align-middle mb-0">
+            <thead>
+              <tr>
+                <th>ORDER ID</th>
+                <th>SUPPLIER</th>
+                <th>ORDER DATE</th>
+                <th>ITEMS COUNT</th>
+                <th>TOTAL COST</th>
+                <th>STATUS</th>
+                <th class="text-center">ACTIONS</th>
+              </tr>
+            </thead>
+
+            <tbody id="ordersTableBody">
+            </tbody>
+          </table>
+        </div>
+
+        <div
+          class="table-footer d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-3">
+          <p class="results-text mb-0">Showing 1 to 4 of 28 orders</p>
+
+          <div class="pagination-custom d-flex align-items-center gap-2">
+            <button class="page-btn">
+              <i class="fa-solid fa-angle-left"></i>
+            </button>
+            <button class="page-btn active">1</button>
+            <button class="page-btn">2</button>
+            <button class="page-btn">3</button>
+            <button class="page-btn">
+              <i class="fa-solid fa-angle-right"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Mobile Cards -->
+      <div class="orders-mobile d-block d-md-none" id="ordersMobile"></div>
+    </div>
+  </main>
+
+  <!--  Modal -->
+  <div class="modal fade create-order-modal" id="createOrderModal" tabindex="-1" aria-labelledby="createOrderModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+      <div class="modal-content create-order-modal-content">
+
+        <!-- Header -->
+        <div class="modal-header create-order-modal-header">
+          <div class="d-flex align-items-center gap-3">
+            <div class="modal-icon-box">
+              <i class="fa-solid fa-cart-plus"></i>
+            </div>
+            <h5 class="modal-title create-order-modal-title" id="createOrderModalLabel">Create New Order</h5>
+          </div>
+
+          <button type="button" class="btn-close custom-close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+
+        <!-- Body -->
+        <div class="modal-body create-order-modal-body">
+          <form id="createOrderForm">
+            <div class="row g-3 mb-4">
+              <div class="col-12 col-md-6">
+                <label for="supplierSelect" class="form-label modal-label">Supplier</label>
+                <select id="supplierSelect" class="form-select modal-input">
+                  <option selected>Select a supplier</option>
+                  <option>Global Tech Solutions</option>
+                  <option>Acme Corp</option>
+                  <option>Logistics Hub</option>
+                  <option>Office Supplies Co</option>
+                </select>
+              </div>
+
+              <div class="col-12 col-md-6">
+                <label for="orderDate" class="form-label modal-label">Order Date</label>
+                <input type="date" id="orderDate" class="form-control modal-input" value="2023-10-24">
+              </div>
+            </div>
+
+            <div class="order-items-header d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
+              <h6 class="order-items-title mb-0">ORDER ITEMS</h6>
+              <button type="button" class="btn add-row-btn" id="addProductRowBtn">
+                <i class="fa-regular fa-circle-plus"></i>
+                Add Product Row
+              </button>
+            </div>
+
+            <div class="items-table-wrapper mb-4">
+              <div class="table-responsive">
+                <table class="table modal-items-table align-middle mb-0">
+                  <thead>
+                    <tr>
+                      <th>PRODUCT</th>
+                      <th>QTY</th>
+                      <th>COST</th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody id="orderItemsBody">
+                    <tr>
+                      <td>
+                        <input type="text" class="form-control item-input" value="Wireless Mouse MX">
+                      </td>
+                      <td>
+                        <input type="number" class="form-control item-input qty-input" value="12" min="1">
+                      </td>
+                      <td>
+                        <input type="number" class="form-control item-input cost-input" value="24.99" min="0"
+                          step="0.01">
+                      </td>
+                      <td class="text-end">
+                        <button type="button" class="remove-row-btn" aria-label="Remove row">
+                          <i class="fa-regular fa-trash-can"></i>
+                        </button>
+                      </td>
+                    </tr>
+
+                    <tr>
+                      <td>
+                        <input type="text" class="form-control item-input" value="Mechanical Keyboard K2">
+                      </td>
+                      <td>
+                        <input type="number" class="form-control item-input qty-input" value="5" min="1">
+                      </td>
+                      <td>
+                        <input type="number" class="form-control item-input cost-input" value="89.00" min="0"
+                          step="0.01">
+                      </td>
+                      <td class="text-end">
+                        <button type="button" class="remove-row-btn" aria-label="Remove row">
+                          <i class="fa-regular fa-trash-can"></i>
+                        </button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <div class="d-flex justify-content-end">
+              <div class="total-card">
+                <div class="total-row small-row">
+                  <span>Subtotal</span>
+                  <span id="subtotalValue">$744.88</span>
+                </div>
+                <div class="total-row grand-total-row">
+                  <span>Total Cost</span>
+                  <span id="totalValue">$744.88</span>
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+
+        <!-- Footer -->
+        <div class="modal-footer create-order-modal-footer">
+          <button type="button" class="btn modal-cancel-btn" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn modal-save-btn">Save Order</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <footer id="footer"></footer>
+
+  <script src="js/bootstrap.bundle.min.js"></script>
+  <script src="js/utils.js"></script>
+  <script src="js/api.js"></script>
+  <script src="js/orders.js"></script>
+</body>
+
+</html>

package/frontend/products.html

@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Products Page</title>
+  <!-- CSS -->
+  <link rel="stylesheet" href="css/bootstrap.min.css" />
+  <link rel="stylesheet" href="css/all.min.css" />
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="stylesheet" href="css/products.css">
+</head>
+
+<body>
+  <div id="top-navbar"></div>
+  <div id="second-navbar"></div>
+
+  <main>
+    <div class="container">
+      <div class="main-content w-100 mt-4 position-relative">
+        <div class="modal-wrapper hidden position-absolute justify-content-center align-items-start" id="modal">
+          <div class="modal-data">
+            <div class="modal-header d-flex flex-column">
+              <h2><span id="modalType"></span> Product</h2>
+              <p>Fill in the information belwo to update your inventory</p>
+            </div>
+            <form action="" id="productData" class="d-flex flex-column gap-3">
+              <div class="form-group d-flex flex-column">
+                <label for="product-name">Product Name</label>
+                <input type="text" required id="productName" placeholder="Enter Your Product Name" class="product-name"
+                  name="productName">
+              </div>
+              <div class="form-row d-flex justify-content-between">
+                <div class="form-group d-flex flex-column">
+                  <label for="productSKU">SKU</label>
+                  <input type="text" class="product-sku" id="productSKU" name="sku" placeholder="WH-1000-PRO" required>
+                </div>
+                <div class="form-group d-flex flex-column">
+                  <label for="productPrice">Price</label>
+                  <input type="text" id="productPrice" placeholder="$ 100" class="product-price" name="price" required>
+                </div>
+              </div>
+
+              <div class="form-row d-flex justify-content-between">
+                <div class="form-group d-flex flex-column">
+                  <label for="category">Category</label>
+                  <select name="category" id="category">
+                    <option value="" selected>Select</option>
+                  </select>
+                </div>
+                <div class="form-group d-flex flex-column">
+                  <label for="supplier">Supplier</label>
+                  <select name="supplier" id="supplier">
+                    <option value="" selected>Select</option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="form-row d-flex justify-content-between">
+                <div class="form-group d-flex flex-column">
+                  <label for="initialQty">Initial Quantity</label>
+                  <input type="text" class="product-qty" id="initialQty" name="Quantity" placeholder="100" required>
+                </div>
+                <div class="form-group d-flex flex-column">
+                  <label for="reorderLevel">Reorder Level</label>
+                  <input type="text" id="reorderLevel" placeholder="10" class="reorder-level" name="reoder-level"
+                    required>
+                </div>
+              </div>
+            </form>
+            <div class="modal-btns mt-4 d-flex justify-content-between align-items-center">
+              <button class="cancel-btn" id="cancelBtn">Cancel</button>
+              <button class="save-product-btn" id="saveProduct"><i class="fa-solid fa-file-circle-check"></i> Save
+                Product</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-overlay hidden position-absolute" id="modalOverlay"></div>
+        <div class="page-header d-flex align-items-center justify-content-between my-5">
+          <div class="page-title">
+            <h1 class="mb-1 fw-bold">Products</h1>
+            <p class="m-0">Manage all products and stock level</p>
+          </div>
+          <div class="header-btns">
+            <button class="export-btn" id="exportBtn"><i class="fa-solid fa-download"></i> Export</button>
+            <button class="add-product" data-type="Add" id="addProductBtn"><i class="fa-solid fa-plus"></i> Add
+              Product</button>
+          </div>
+        </div>
+
+        <!-- section search -->
+        <section class="card p-4 border-0 mb-3">
+          <form class="row g-2">
+            <div class="col-9">
+              <input type="search" class="form-control rounded-4" placeholder="Search by Product name"
+                id="searchByProductName">
+            </div>
+
+            <div class="col-2">
+              <select class="form-select" id="formSelect">
+                <option value="" selected>Status: All</option>
+                <option value="in_stock">In Stock</option>
+                <option value="low_stock">Low Stock</option>
+                <option value="out_of_stock">Out of Stock</option>
+              </select>
+            </div> <!--form-select-->
+
+            <div class="col-1">
+              <div class="sorting border text-center py-2 px-2 rounded-3">
+                <img src="./assets/IconSort.png" class="m-auto mt-2">
+              </div> <!--sorting-->
+            </div>
+          </form>
+        </section> <!--cardSearch-->
+
+        <div class="products-card card">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Product Name</th>
+                <th>Category</th>
+                <th>Price</th>
+                <th>Stock</th>
+                <th>Status</th>
+                <th colspan="2">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="table-body" id="tableBody">
+
+            </tbody>
+          </table>
+          <div class="table-footer">
+            <span id="inventoryTableInfo"></span>
+            <div class="pagination" id="pagination"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+
+  <footer id="footer"></footer>
+  <!-- Scripts -->
+  <script src="js/bootstrap.bundle.min.js"></script>
+  <script src="js/api.js"></script>
+  <script src="js/utils.js"></script>
+  <script src="js/products.js"></script>
+</body>
+
+</html>