inventrack 3.0.0

package/frontend/css/style.css

@@ -0,0 +1,282 @@
+:root {
+  /* =========================
+     BACKGROUNDS
+  ========================= */
+  --bg-page: #f5f6fa;
+  --bg-sidebar: #ffffff;
+  --bg-card: #ffffff;
+  --bg-soft: #f9fafc;
+  --bg-hover: #f3f4f6;
+
+  /* =========================
+     PRIMARY / BRAND
+  ========================= */
+  --primary: #7c3aed;
+  --primary-hover: #6d28d9;
+  --primary-light: #a78bfa;
+  --primary-soft: #ede9fe;
+  --primary-gradient: linear-gradient(135deg, #7c3aed 0%, #9233ea 100%);
+  --secondary-gradient: linear-gradient(135deg, #b7adda, #c8bee678);
+
+  /* =========================
+     TEXT
+  ========================= */
+  --text-primary: #111827;
+  --text-secondary: #6b7280;
+  --text-muted: #9ca3af;
+  --text-light: #d1d5db;
+  --text-white: #ffffff;
+  --text-over: #0f172a;
+  --text-header: #64748b;
+
+  /* =========================
+     BORDERS / LINES
+  ========================= */
+  --border-light: #e5e7eb;
+  --border-soft: #eef1f5;
+  --divider: #f1f3f7;
+
+  /* =========================
+     SUCCESS
+  ========================= */
+  --success: #10b981;
+  --success-dark: #059669;
+  --success-bg: #d1fae5;
+
+  /* =========================
+     WARNING
+  ========================= */
+  --warning: #f59e0b;
+  --warning-dark: #d97706;
+  --warning-bg: #fef3c7;
+
+  /* =========================
+     DANGER
+  ========================= */
+  --danger: #ef4444;
+  --danger-dark: #dc2626;
+  --danger-bg: #fee2e2;
+
+  /* =========================
+     INFO
+  ========================= */
+  --info: #3b82f6;
+  --info-dark: #2563eb;
+  --info-bg: #dbeafe;
+
+  /* =========================
+     ACTIVITY / ICON BACKGROUNDS
+  ========================= */
+  --icon-purple-bg: #ede9fe;
+  --icon-blue-bg: #dbeafe;
+  --icon-green-bg: #d1fae5;
+  --icon-yellow-bg: #fef3c7;
+  --icon-red-bg: #fee2e2;
+
+  /* =========================
+     ACTIVITY DOT / ACCENT COLORS
+  ========================= */
+  --activity-blue: #60a5fa;
+  --activity-green: #34d399;
+  --activity-yellow: #fbbf24;
+  --activity-red: #f87171;
+
+  /* =========================
+     CHART / DATA VISUALS
+  ========================= */
+  --chart-primary: #7c3aed;
+  --chart-secondary: #a78bfa;
+
+  /* =========================
+     SHADOWS
+  ========================= */
+  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
+  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  --topbar-height: 64px;
+  --subnav-height: 52px;
+  --page-width: 1280px;
+
+  --transition-fast: 0.2s ease;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  font-size: 14px;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-family);
+  background: var(--bg-page);
+  color: var(--text-primary);
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+.card {
+  border-radius: var(--radius-md);
+}
+.dataNotMatch {
+  text-align: center;
+  color: var(--text-secondary);
+  width: 100%;
+  font-size: 18px;
+  font-weight: bold;
+  padding-top: 20px;
+  overflow-x: hidden;
+}
+
+/*y NavBar */
+#second-navbar .nav-link {
+  color: var(--text-muted) !important;
+  border-radius: var(--radius-sm);
+  padding: 6px 14px;
+  transition: var(--transition-fast);
+  display: flex;
+  align-items: center;
+}
+
+#second-navbar .nav-link:hover {
+  background-color: var(--primary-light);
+  color: var(--primary) !important;
+}
+
+#second-navbar .nav-link.active {
+  border-color: var(--primary-light);
+  color: var(--primary) !important;
+  font-weight: 600;
+}
+td {
+  vertical-align: middle;
+}
+.sorting {
+  cursor: pointer;
+}
+
+table {
+  margin-bottom: 0px !important;
+}
+/*y Pagination  */
+.table-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-top: 1px solid #eee;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.pagination button {
+  border: none;
+  background: none;
+  margin: 0 4px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: var(--transition-fast);
+}
+
+.pagination button:hover {
+  background-color: var(--bg-hover);
+}
+
+.pagination .active {
+  background: var(--primary-soft);
+  color: var(--primary);
+  font-weight: bold;
+}
+
+/* .prevBtn {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 6px 16px;
+  width: fit-content;
+  min-width: fit-content;
+  border-radius: 20px;
+  font-weight: bold;
+  transition: var(--transition-fast);
+}
+
+.prevBtn:hover {
+  background-color: var(--primary-hover);
+}
+
+.pagePaginateBtn {
+  background: var(--primary-light);
+  color: white;
+  border: none;
+  padding: 6px 16px;
+  width: fit-content;
+  min-width: fit-content;
+  border-radius: 20px;
+  font-weight: bold;
+  transition: var(--transition-fast);
+} */
+
+/* .colored {
+  background-color: var(--primary-hover);
+}
+
+.nextBtn {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 6px 16px;
+  width: fit-content;
+  min-width: fit-content;
+  border-radius: 20px;
+  font-weight: bold;
+  transition: var(--transition-fast);
+}
+.nextBtn:hover {
+  background-color: var(--primary-hover);
+} */
+footer {
+  background-color: var(--primary);
+  min-height: 80px;
+  margin-top: 30px;
+}
+footer .container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+footer p {
+  align-self: center;
+  margin-top: 30px;
+  color: var(--bs-light);
+}

package/frontend/css/suppliers.css

@@ -0,0 +1,136 @@
+/* =========================
+   SUPPLIERS PAGE
+========================= */
+.suplier {
+  background-color: var(--bg-page);
+}
+header > div > h1 , .headerMod >h2{
+  color: var(--text-over);
+}
+header > div > p  , .headerMod > p{
+  color: var(--text-header);
+}
+.sorting img {
+  width: 30px;
+  height: 10px;
+}
+.sorting {
+  height: 33px;
+  width: 30px;
+  cursor: pointer;
+}
+.page-link {
+  color: #94a3b8;
+}
+.add-supplier , .save-supplier{
+  color: var(--text-white);
+  background-color: var(--primary);
+  transition: var(--transition-fast);
+}
+.add-supplier:hover , .save-supplier:hover {
+  background-color: var(--primary-hover);
+  color: var(--text-white);
+}
+.suplier .page-active {
+  color: var(--text-white);
+  background-color: var(--primary);
+}
+
+.suplier .first-latter {
+  width: 40px;
+  height: 35px;
+  background-color: rgba(109, 13, 253, 0.1);
+  color: var(--primary);
+}
+.suplier .searchBySupplierName:focus{
+    border: 2px solid rgba(109, 13, 253, 0.2);
+}
+.suplier .Page .paggination {
+  border-bottom: 0;
+}
+.suplier tbody td a,
+.suplier .modal-footer .cancle {
+  color: var(--primary);
+}
+.suplier tbody tr:last-child {
+  border-bottom: 0;
+}
+.supplier-card{
+   width: 100%;
+   border: none !important;
+  box-shadow: var(--shadow-md);
+}
+.supplier-card thead th{
+  font-size: 16px;
+  padding: var(--space-4);
+   background: #f3eefb;
+  color: #64748b;
+}
+
+.supplier-card tbody td{
+  font-size: 15px;
+  padding: var(--space-4);
+  vertical-align: middle;
+}
+
+.supplier-card #editSupplierBtn{
+   background-color: var(--primary-soft);
+   color: var(--primary);
+}
+.supplier-card #editSupplierBtn:hover{
+  background-color: var(--primary-light);
+  color: var(--text-white);
+}
+.supplier-card #deleteSupplierBtn{
+   background-color: var(--danger-bg);
+   color: var(--danger);
+}
+.supplier-card #deleteSupplierBtn:hover{
+  background-color: var(--danger);
+  color: var(--text-white);
+}
+
+.status_active,
+.status_inactive {
+  /* height: 20px; */
+  border-radius: var(--space-3);
+  text-align: center;
+  padding: 2px var(--space-2);
+
+}
+
+.status_active {
+  background-color: var(--success-bg);
+  color: var(--success-dark);
+}
+.status_inactive {
+  background-color: #f1f5f9;
+  color: var(--text-secondary);
+}
+.status_active p,
+.status_inactive p {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+}
+.dot-color {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  padding: var(--space-1);
+}
+.status_active .dot-color {
+  background-color: var(--success-dark);
+}
+.status_inactive .dot-color {
+  background-color: var(--text-secondary);
+}
+
+.suplier .modal input,
+.suplier .modal textarea,
+.suplier .modal select {
+  border: 1px solid rgba(109, 13, 253, 0.2);
+  color: var(--text-secondary);
+}

package/frontend/dashboard.html

@@ -0,0 +1,160 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Dashboard 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/dashboard.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">
+        <div class="page-title my-5">
+          <h1 class="fw-bold">Dashboard Overview</h1>
+          <p class="m-0">Welcome Back. Here's what's happening in your inventory today.</p>
+        </div>
+        <div class="summary-cards d-flex gap-5 w-100">
+          <div class="card">
+            <div class="top-icons d-flex justify-content-between align-items-center pb-4">
+              <img src="assets/card-icon-1.png" alt="Icon for card one" class="icon-purple">
+              <div class="products-status d-flex justify-content-between align-items-center gap-1">
+                <i class="fa-solid fa-arrow-trend-up"></i>
+                <small>12%</small>
+              </div>
+            </div>
+            <h6>Total Products</h6>
+            <h3 id="totalProducts">1240</h3>
+          </div>
+          <div class="card">
+            <div class="top-icons d-flex justify-content-between align-items-center pb-4">
+              <img src="assets/card-icon-2.png" alt="Icon for card Two" class="icon-yellow">
+              <div class="stock-status d-flex justify-content-between align-items-center gap-1">
+                <i class="fa-solid fa-arrow-trend-up"></i>
+                <small>12%</small>
+              </div>
+            </div>
+            <h6>Low stck Items</h6>
+            <h3 id="lowStockItems">12</h3>
+          </div>
+          <div class="card">
+            <div class="top-icons d-flex justify-content-between align-items-center pb-4">
+              <img src="assets/card-icon-3.png" alt="Icon for card Three" class="icon-blue">
+              <div class="supplier-status d-flex justify-content-between align-items-center gap-1">
+                <i class="fa-solid fa-arrow-trend-up"></i>
+                <small>12%</small>
+              </div>
+            </div>
+            <h6>Total Suppliers</h6>
+            <h3 id="totalSuppliers">48</h3>
+          </div>
+          <div class="card">
+            <div class="top-icons d-flex justify-content-between align-items-center pb-4">
+              <img src="assets/card-icon-4.png" alt="Icon for card Four" class="icon-green">
+              <div class="inventory-status d-flex justify-content-between align-items-center gap-1">
+                <i class="fa-solid fa-arrow-trend-up"></i>
+                <small>12%</small>
+              </div>
+            </div>
+            <h6>Inventory Value</h6>
+            <h3 id="inventoryValue">&dollar;450,000</h3>
+          </div>
+        </div>
+        <div class="statistics mt-5 mb-5">
+          <div class="statistics-top d-flex justify-content-between align-item-center mt-5 mb-5">
+            <div class="inventory-chart p-5">
+              <div class="top-caption d-flex w-100 justify-content-between align-items-center mb-2">
+                <h3>Inventory By Category</h3>
+                <small>Last 30 Days</small>
+              </div>
+              <div class="container text-center d-flex justify-content-between align-items-end">
+                <div class="chart-col h-100 d-flex flex-column justify-content-end">
+                  <div class="level"></div>
+                  <small>Electronics</small>
+                </div>
+                <div class="chart-col h-100 d-flex flex-column justify-content-end">
+                  <div class="level"></div>
+                  <small>Furniture</small>
+                </div>
+                <div class="chart-col h-100 d-flex flex-column justify-content-end">
+                  <div class="level"></div>
+                  <small>Office</small>
+                </div>
+                <div class="chart-col h-100 d-flex flex-column justify-content-end">
+                  <div class="level"></div>
+                  <small>Tools</small>
+                </div>
+                <div class="chart-col h-100 d-flex flex-column justify-content-end">
+                  <div class="level"></div>
+                  <small>Aplliances</small>
+                </div>
+                <div class="chart-col h-100 d-flex flex-column justify-content-end">
+                  <div class="level"></div>
+                  <small>Other</small>
+                </div>
+              </div>
+            </div>
+            <div class="recent-activity p-5">
+              <h2 class="mb-2">Recent Activity</h2>
+              <div class="container activities">
+              </div>
+            </div>
+          </div>
+          <div class="low-wtock-preview card">
+            <div class="container">
+              <div class="low-stock-header d-flex justify-content-between align-items-center m-auto">
+                <div class="low-stock-title">
+                  <h2>Low Stock Preview</h2>
+                  <p>Items that require immediate action</p>
+                </div>
+                <button class="bulk-order-btn" id="bulkOrderBtn"><i class="fa-solid fa-cart-plus"></i> Create Bulk
+                  Order</button>
+              </div>
+              <div class="low-stock-card">
+                <div class="table-responsive">
+                  <table class="table">
+                    <thead>
+                      <tr>
+                        <th>Product Name</th>
+                        <th>Category</th>
+                        <th>Current Stock</th>
+                        <th>Reorder Level</th>
+                        <th>Status</th>
+                        <th>Action</th>
+                      </tr>
+                    </thead>
+                    <tbody id="tableBody">
+
+                    </tbody>
+                  </table>
+                  <div class="table-footer">
+                    <div id="pagination" class="container d-flex align-items-center justify-content-between">
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+  </main>
+
+  <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/dashboard.js"></script>
+</body>
+
+</html>

package/frontend/index.html

@@ -0,0 +1,124 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>InvenTrack</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/signin.css">
+</head>
+
+<body>
+    <div id="top-navbar"></div>
+    <div id="second-navbar"></div>
+
+    <!-- ////////////////////// Sign In ////////////////////////// -->
+    <main class="container">
+        <div class="card mb-3 border-0 mt-5 m-auto rounded-3" style="width: 80%;">
+            <div class="row g-0">
+
+                <!-- /// Left Side:== Inventory-->
+                <aside class="col-md-6 col-sm-12 left-Side">
+                    <div class="bg border-0 m-3 p-4">
+                        <div class="d-flex justify-content-start logo border-0 ms-2 col-12">
+                            <div>
+                                <img src="./assets/Icon.png" class="img-fluid p-2" alt="LOGO">
+                            </div>
+                            <p class="fs-4 fw-bold">Inventory System</p>
+                        </div> <!--card-header-->
+                        <div class="card-body border-0">
+                            <h5 class="card-title fs-3 fw-bold">Everything you need to manage stock.</h5>
+                            <p class="card-text fs-5">
+                                Manage products, suppliers, orders, and inventory insights in one centralized
+                                dashboard.
+                            </p>
+                            <div class="overlay position-relative">
+                                <img src="./assets/login.png" alt="Inventory System" class=" rounded-4">
+                                <div
+                                    class="chartUnderImg d-flex justify-content-around align-items-end rounded-4 position-absolute bottom-0 start-0 p-4 ">
+                                    <div class="bar1 rounded-top  ms-1" style="height:90px;"></div>
+                                    <div class="bar2 rounded-top  ms-1" style="height:150px;"></div>
+                                    <div class="bar3 rounded-top  ms-1" style="height:130px;"></div>
+                                    <div class="bar4 rounded-top  ms-1" style="height:200px;"></div>
+                                    <div class="bar5 rounded-top  ms-1" style="height:170px;"></div>
+                                    <div class="bar6 rounded-top  ms-1" style="height:60px;"></div>
+                                </div>
+                            </div> <!--overlay-->
+
+                        </div> <!--card-body-->
+                        <div class="border-0 p-2 footer-card d-flex justify-content-start">
+                            <div class="smallCircls d-flex justify-content-start">
+                                <div class="circle1 rounded-circle border border-white p-3"></div>
+                                <div class="circle2 rounded-circle border border-white p-3"></div>
+                                <div class="circle3 rounded-circle border border-white p-3"></div>
+                            </div> <!--smallCircls-->
+                            <p class="ms-2 mb-0 mt-1">Joined by 2,000+ logistics professionals</p>
+                        </div> <!--card-footer-->
+                    </div> <!--bg-->
+                </aside> <!--col-->
+
+
+                <!-- /// Right side :== Sign In -->
+                <section class="col-md-6 py-5 col-sm-12">
+                    <div class="loginForm">
+                        <div class="border-0 px-4 py-2">
+                            <h5 class="card-title fs-3 fw-bold">Sign In</h5>
+                            <p class="card-text fs-5">Access your inventory dashboard to get started.</p>
+                        </div>
+                        <div class="formInput px-4 py-3">
+                            <form class="row g-2 needs-validation" novalidate action="dashboard.html" id="formValidate">
+                                <div class="mb-3 col-12">
+                                    <label for="exampleFormControlInput1" class="form-label">Email address</label>
+                                    <input type="email" class="form-control" id="userEmail"
+                                        placeholder="name@company.com">
+                                </div>
+                                <div class="mb-3 col-12">
+                                    <label for="exampleFormControlTextarea1"
+                                        class="form-label d-flex justify-content-between">
+                                        <span>Password</span>
+                                        <a href="#" id="forgetPass">Forgot password?</a>
+                                    </label>
+                                    <input type="password" class="form-control" id="userPass"
+                                        placeholder="••••••••">
+                                </div>
+                                <div class="mb-1 col-12">
+                                    <label for="" id="checkCorrectorNot"></label>
+                                </div>
+                                <div class="col-12">
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" value="" id="invalidCheck"
+                                            required>
+                                        <label class="form-check-label" for="invalidCheck">
+                                            Remember me for 30 days
+                                        </label>
+
+                                    </div>
+                                </div>
+                                <div class="col-12">
+                                    <button class="btn btn-sign px-4 py-2  mt-2 col-12" type="submit" id="signInBtn">Sign In <i
+                                            class="fa-solid fa-arrow-right"></i></button>
+                                </div>
+                            </form>
+                        </div> <!--formInput-->
+                        <div class="border-0 text-center py-4 col-sm-12">
+                            <p>Don't have an account? <a href="#" id="contactAdmin">Contact your administrator</a></p>
+                        </div>
+                    </div>
+                </section> <!--col-->
+
+            </div>
+        </div> <!--card-->
+    </main> <!--container-->
+
+    <!-- Scripts -->
+    <script src="js/bootstrap.bundle.min.js"></script>
+    <script src="js/utils.js"></script>
+    <script src="js/api.js"></script>
+    <script src="js/auth.js"></script>
+</body>
+
+</html>