540 lines
23 KiB
HTML
Executable File
540 lines
23 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Stock Expired - InApp Inventory Dashboard</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="./assets/images/favicon_io/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon_io/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon_io/favicon-16x16.png">
|
|
<link rel="manifest" href="./assets/images/favicon_io/site.webmanifest">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="overlay" class="overlay"></div>
|
|
<!-- TOPBAR -->
|
|
<nav id="topbar" class="navbar bg-white border-bottom fixed-top topbar px-3">
|
|
<button id="toggleBtn" class="d-none d-lg-inline-flex btn btn-light btn-icon btn-sm ">
|
|
<i class="ti ti-layout-sidebar-left-expand"></i>
|
|
</button>
|
|
|
|
<!-- MOBILE -->
|
|
<button id="mobileBtn" class="btn btn-light btn-icon btn-sm d-lg-none me-2">
|
|
<i class="ti ti-layout-sidebar-left-expand"></i>
|
|
</button>
|
|
<div>
|
|
<!-- Navbar nav -->
|
|
<ul class="list-unstyled d-flex align-items-center mb-0 gap-1">
|
|
<!-- Pages link -->
|
|
|
|
<!-- Bell icon -->
|
|
<li>
|
|
<a class="position-relative btn-icon btn-sm btn-light btn rounded-circle" data-bs-toggle="dropdown"
|
|
aria-expanded="false" href="#" role="button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-bell">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
|
|
<path d="M9 17v1a3 3 0 0 0 6 0v-1" />
|
|
</svg>
|
|
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger mt-2 ms-n2">
|
|
2
|
|
<span class="visually-hidden">unread messages</span>
|
|
</span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end dropdown-menu-md p-0">
|
|
<ul class="list-unstyled p-0 m-0">
|
|
<li class="p-3 border-bottom ">
|
|
<div class="d-flex gap-3">
|
|
<img src="./assets/images/avatar/avatar-1.jpg" alt="" class="avatar avatar-sm rounded-circle" />
|
|
<div class="flex-grow-1 small">
|
|
<p class="mb-0">New order received</p>
|
|
<p class="mb-1">Order #12345 has been placed</p>
|
|
<div class="text-secondary">5 minutes ago</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="p-3 border-bottom ">
|
|
<div class="d-flex gap-3">
|
|
<img src="./assets/images/avatar/avatar-4.jpg" alt="" class="avatar avatar-sm rounded-circle" />
|
|
<div class="flex-grow-1 small">
|
|
<p class="mb-0">New user registered</p>
|
|
<p class="mb-1">User @john_doe has signed up</p>
|
|
<div class="text-secondary">30 minutes ago</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="p-3 border-bottom">
|
|
<div class="d-flex gap-3">
|
|
<img src="./assets/images/avatar/avatar-2.jpg" alt="" class="avatar avatar-sm rounded-circle" />
|
|
<div class="flex-grow-1 small">
|
|
<p class="mb-0">Payment confirmed</p>
|
|
<p class="mb-1">Payment of $299 has been received</p>
|
|
<div class="text-secondary">1 hour ago</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="px-4 py-3 text-center">
|
|
<a href="#" class="text-primary ">View all notifications</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<!-- Dropdown -->
|
|
<li class="ms-3 dropdown">
|
|
<a href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<img src="./assets/images/avatar/avatar-1.jpg" alt="" class="avatar avatar-sm rounded-circle" />
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end p-0" style="min-width: 200px;">
|
|
<div>
|
|
<div class="d-flex gap-3 align-items-center border-dashed border-bottom px-3 py-3">
|
|
<img src="./assets/images/avatar/avatar-1.jpg" alt="" class="avatar avatar-md rounded-circle" />
|
|
<div>
|
|
<h4 class="mb-0 small">Shrina Tesla</h4>
|
|
<p class="mb-0 small">@imshrina</p>
|
|
</div>
|
|
</div>
|
|
<div class="p-3 d-flex flex-column gap-1 small lh-lg">
|
|
<a href="#!" class="">
|
|
|
|
<span>Home</span>
|
|
</a>
|
|
<a href="#!" class="">
|
|
|
|
<span> Inbox</span>
|
|
</a>
|
|
<a href="#!" class="">
|
|
|
|
<span> Chat</span>
|
|
</a>
|
|
<a href="#!" class="">
|
|
|
|
<span> Activity</span>
|
|
</a>
|
|
<a href="#!" class="">
|
|
|
|
<span> Account Settings</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
<!-- SIDEBAR -->
|
|
<aside id="sidebar" class="sidebar overflow-y-auto">
|
|
<div class="logo-area">
|
|
<a href="index.html" class="d-inline-flex"><img src="./assets/images/logo-icon.svg" alt="" width="24">
|
|
<span class="logo-text ms-2"> <img src="./assets/images/logo.svg" alt=""></span>
|
|
</a>
|
|
</div>
|
|
<ul class="nav flex-column">
|
|
<li class="nav-text-space"><small class="nav-text text-muted">Main</small></li>
|
|
<li><a class="nav-link active" href="index.html"><i class="ti ti-home"></i><span
|
|
class="nav-text">Dashboard</span></a></li>
|
|
<li><a class="nav-link" href="inventory.html"><i class="ti ti-box-seam"></i><span
|
|
class="nav-text">Inventory</span></a></li>
|
|
|
|
<li><a class="nav-link" href="reports.html"><i class="ti ti-receipt"></i><span class="nav-text">Reports</span></a>
|
|
</li>
|
|
|
|
|
|
<li class="nav-text-space"><small class="nav-text text-muted">Product</small></li>
|
|
<li><a class="nav-link" href="create-product.html"><i class="ti ti-plus"></i><span class="nav-text">Add
|
|
Product</span></a></li>
|
|
<li><a class="nav-link" href="edit-product.html"><i class="ti ti-edit"></i><span class="nav-text">Edit
|
|
Product</span></a></li>
|
|
<li><a class="nav-link" href="product-details.html"><i class="ti ti-eye"></i><span class="nav-text">Product
|
|
Details</span></a></li>
|
|
<li><a class="nav-link" href="product-categories.html"><i class="ti ti-category"></i><span
|
|
class="nav-text">Categories</span></a></li>
|
|
<li><a class="nav-link" href="product-brands.html"><i class="ti ti-building-plus"></i><span
|
|
class="nav-text">Brands</span></a></li>
|
|
<li><a class="nav-link" href="product-variants.html"><i class="ti ti-palette"></i><span
|
|
class="nav-text">Variants</span></a></li>
|
|
<li class="nav-text-space"><small class="nav-text text-muted">Inventory / Stock</small></li>
|
|
<li><a class="nav-link" href="stock-overview.html"><i class="ti ti-clipboard"></i><span class="nav-text">Stock
|
|
Overview</span></a></li>
|
|
<li><a class="nav-link" href="stock-in.html"><i class="ti ti-package-import"></i><span class="nav-text">Stock In /
|
|
Add Stock</span></a></li>
|
|
<li><a class="nav-link" href="stock-out.html"><i class="ti ti-package-export"></i><span class="nav-text">Stock Out
|
|
/ Remove</span></a></li>
|
|
<li><a class="nav-link" href="low-stock-products.html"><i class="ti ti-alert-triangle"></i><span
|
|
class="nav-text">Low Stock Products</span></a></li>
|
|
<li><a class="nav-link" href="stock-expired.html"><i class="ti ti-clock"></i><span class="nav-text">Expired
|
|
Stock</span></a></li>
|
|
<li><a class="nav-link" href="warehouse-location-managment.html"><i class="ti ti-map-pin"></i><span
|
|
class="nav-text">Warehouse Location</span></a></li>
|
|
<li class="nav-text-space"><small class="nav-text text-muted">Orders & Sales</small></li>
|
|
<li><a class="nav-link" href="order-list.html"><i class="ti ti-shopping-cart"></i><span class="nav-text">Order List</span></a></li>
|
|
<li><a class="nav-link" href="order-details.html"><i class="ti ti-file-search"></i><span class="nav-text">Order Details</span></a></li>
|
|
<li><a class="nav-link" href="create-order.html"><i class="ti ti-folder"></i><span class="nav-text">Create New Order</span></a></li>
|
|
<li><a class="nav-link" href="invoice.html"><i class="ti ti-file-text"></i><span
|
|
class="nav-text">Invoice</span></a></li>
|
|
<li><a class="nav-link" href="returns-refunds.html"><i class="ti ti-squares"></i><span class="nav-text">Returns / Refunds</span></a></li>
|
|
<li><a class="nav-link" href="pos.html"><i class="ti ti-navigation-pin"></i><span
|
|
class="nav-text">Pos(Point of Sale)</span></a></li>
|
|
|
|
|
|
|
|
|
|
<li class="nav-text-space"><small class="nav-text">Account</small></li>
|
|
<li><a class="nav-link" href="signin.html"><i class="ti ti-logout"></i><span class="nav-text">Log in</span></a>
|
|
</li>
|
|
<li><a class="nav-link" href="signup.html"><i class="ti ti-user-plus"></i><span class="nav-text">Sign
|
|
up</span></a></li>
|
|
<li class="nav-text-space"><small class="nav-text">Utilities</small></li>
|
|
<li><a class="nav-link" href="404-error.html"><i class="ti ti-alert-circle"></i><span class="nav-text">404
|
|
Error</span></a>
|
|
</li>
|
|
<li><a class="nav-link" href="docs.html"><i class="ti ti-file-text"></i><span class="nav-text">Docs</span></a>
|
|
</li>
|
|
<li><a class="nav-link" href="changelog.html"><i class="ti ti-exchange"></i><span class="nav-text">Changelog</span></a>
|
|
</li>
|
|
</ul>
|
|
|
|
</aside>
|
|
<!-- MAIN CONTENT -->
|
|
<main id="content" class="content py-15">
|
|
<div class="container-fluid">
|
|
<div class="row ">
|
|
<div class="col-12">
|
|
<div class="mb-6 ">
|
|
<h1 class="fs-3 mb-1">Expired / Near Expiry Products
|
|
</h1>
|
|
<p class="mb-0">Monitor and manage products approaching or past expiry dates</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-5 g-5">
|
|
<div class="col-xl-3 col-md-6 col-12">
|
|
<div class="card bg-primary bg-opacity-10 border-primary border-opacity-25">
|
|
<div class="card-body p-5">
|
|
<div class="">
|
|
|
|
<span class="icon-shape icon-md bg-primary text-white rounded-2">
|
|
<i class="ti ti-trash fs-4"></i>
|
|
</span>
|
|
</div>
|
|
<div class="d-flex flex-column mt-3">
|
|
<span class="fs-2 fw-bold mb-0 d-block">3</span>
|
|
<span class="fs-5">Expired Products</span>
|
|
|
|
<small class="text-muted">
|
|
Requires immediate action</small>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6 col-12">
|
|
<div class="card bg-primary bg-opacity-10 border-primary border-opacity-25">
|
|
<div class="card-body p-5">
|
|
<div class="">
|
|
|
|
<span class="icon-shape icon-md bg-primary text-white rounded-2">
|
|
<i class="ti ti-alert-triangle fs-4"></i>
|
|
</span>
|
|
</div>
|
|
<div class="d-flex flex-column mt-3">
|
|
<span class="fs-2 fw-bold mb-0 d-block">2</span>
|
|
<span class="fs-5">Critical (≤7 days)</span>
|
|
|
|
<small class="text-muted">
|
|
Expiring within a week</small>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="col-xl-3 col-md-6 col-12">
|
|
<div class="card bg-primary bg-opacity-10 border-primary border-opacity-25">
|
|
<div class="card-body p-5">
|
|
<div class="">
|
|
<span class="icon-shape icon-md bg-primary text-white rounded-2">
|
|
<i class="ti ti-clock fs-4"></i>
|
|
</span>
|
|
</div>
|
|
<div class="d-flex flex-column mt-3">
|
|
<span class="fs-2 fw-bold mb-0 d-block">2</span>
|
|
<span class="fs-5">Warning (8-14 days)</span>
|
|
|
|
<small class="text-muted">
|
|
Expiring in 2 weeks</small>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-xl-3 col-md-6 col-12">
|
|
<div class="card bg-primary bg-opacity-10 border-primary border-opacity-25">
|
|
<div class="card-body p-5">
|
|
<div class="">
|
|
<span class="icon-shape icon-md bg-primary text-white rounded-2">
|
|
<i class="ti ti-calendar-clock fs-4"></i>
|
|
</span>
|
|
</div>
|
|
<div class="d-flex flex-column mt-3">
|
|
<span class="fs-2 fw-bold mb-0 d-block">2</span>
|
|
<span class="fs-5">Caution (15-30 days)</span>
|
|
|
|
<small class="text-muted">
|
|
Monitor closely</small>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row g-5 mb-5">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body p-5">
|
|
<h2 class="fs-4 mb-4">Filter Products</h2>
|
|
<div class="row g-5">
|
|
<div class="col-lg-7">
|
|
<div class="position-relative">
|
|
<input type="search" class="form-control ps-9" placeholder="Search by product name or SKU">
|
|
<span class="position-absolute top-25 ms-4">
|
|
<i class="ti ti-search text-muted"></i>
|
|
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5">
|
|
<div class="d-flex gap-3">
|
|
<select class="form-select">
|
|
<option selected>All Status</option>
|
|
<option value="Expired">Expired</option>
|
|
<option value="Critical">Critical</option>
|
|
<option value="Warning">Warning</option>
|
|
<option value="Caution">Caution</option>
|
|
</select>
|
|
<select class="form-select">
|
|
<option selected>All Categories</option>
|
|
<option value="Category 1">Category 1</option>
|
|
<option value="Category 2">Category 2</option>
|
|
<option value="Category 3">Category 3</option>
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row g-5 mb-5">
|
|
<div class="col-12">
|
|
<div class="card ">
|
|
<div class="card-body p-5">
|
|
<div>
|
|
<h2 class="fs-4 mb-2">Expired Products</h2>
|
|
<p>Products that have passed their expiry date and need to be removed</p>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table mb-0 text-nowrap table-hover table-centered">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="py-3">Product Name</th>
|
|
<th class="py-3">SKU</th>
|
|
<th class="py-3">Category</th>
|
|
<th class="py-3">Expiry Date</th>
|
|
<th class="py-3">Days Overdue</th>
|
|
<th class="py-3">Quantity</th>
|
|
<th class="py-3">Status</th>
|
|
<th class="py-3">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="py-3">Wireless Mouse</td>
|
|
<td class="py-3">WM-001</td>
|
|
<td class="py-3">Electronics</td>
|
|
<td class="py-3">2025-11-15</td>
|
|
<td class="py-3">47 days</td>
|
|
<td class="py-3">12</td>
|
|
<td class="py-3"><span class="badge bg-danger">Expired</span></td>
|
|
<td class="py-3">
|
|
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3">USB-C Cable</td>
|
|
<td class="py-3">UC-002</td>
|
|
<td class="py-3">Accessories</td>
|
|
<td class="py-3">2025-12-01</td>
|
|
<td class="py-3">31 days</td>
|
|
<td class="py-3">8</td>
|
|
<td class="py-3"><span class="badge bg-danger">Expired</span></td>
|
|
<td class="py-3">
|
|
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3">Keyboard</td>
|
|
<td class="py-3">KB-004</td>
|
|
<td class="py-3">Electronics</td>
|
|
<td class="py-3">2025-12-20</td>
|
|
<td class="py-3">12 days</td>
|
|
<td class="py-3">5</td>
|
|
<td class="py-3"><span class="badge bg-danger">Expired</span></td>
|
|
<td class="py-3">
|
|
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-5">
|
|
<div class="col-12">
|
|
<div class="card ">
|
|
<div class="card-body p-5">
|
|
<div>
|
|
<h2 class="fs-4 mb-2">Near Expiry Products</h2>
|
|
<p>Products approaching their expiry date that may need attention</p>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table mb-0 text-nowrap table-hover table-centered">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="py-3">Product Name</th>
|
|
<th class="py-3">SKU</th>
|
|
<th class="py-3">Category</th>
|
|
<th class="py-3">Expiry Date</th>
|
|
<th class="py-3">Days Remaining</th>
|
|
<th class="py-3">Quantity</th>
|
|
<th>Status</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="py-3">Laptop Stand</td>
|
|
<td class="py-3">LS-003</td>
|
|
<td class="py-3">Furniture</td>
|
|
<td class="py-3">2026-01-05</td>
|
|
<td class="py-3 text-primary">4 days</td>
|
|
<td class="py-3">15</td>
|
|
<td class="py-3"><span class="badge bg-primary">Critical (≤7 days)</span></td>
|
|
<td class="py-3">
|
|
<a href="#" class="btn btn-light">Mark For Sale</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3">Monitor</td>
|
|
<td class="py-3"> MN-005</td>
|
|
<td class="py-3">Electronics</td>
|
|
<td class="py-3">2026-01-08</td>
|
|
<td class="py-3">7 days</td>
|
|
<td class="py-3">10</td>
|
|
<td class="py-3"><span class="badge bg-primary">Critical (≤7 days)</span></td>
|
|
<td class="py-3">
|
|
<a href="#" class="btn btn-light">Mark For Sale</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3">Desk Lamp</td>
|
|
<td class="py-3">DL-006</td>
|
|
<td class="py-3">Furniture</td>
|
|
<td class="py-3">2026-01-12</td>
|
|
<td class="py-3">11 days</td>
|
|
<td class="py-3">20</td>
|
|
<td class="py-3"><span class="badge bg-warning">Warning (8-14 days)</span></td>
|
|
<td class="py-3">
|
|
<a href="#" class="btn btn-light">Mark For Sale</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3">Webcam HD</td>
|
|
<td class="py-3">WC-007</td>
|
|
<td class="py-3">Electronics</td>
|
|
<td class="py-3">2026-01-18</td>
|
|
<td class="py-3">17 days</td>
|
|
<td class="py-3">18</td>
|
|
<td class="py-3"><span class="badge bg-warning">Caution (15-30 days)</span></td>
|
|
<td class="py-3">
|
|
<a href="#" class="btn btn-light">Mark For Sale</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3">HDMI Cable</td>
|
|
<td class="py-3">HD-008</td>
|
|
<td class="py-3">Accessories</td>
|
|
<td class="py-3">2026-01-25</td>
|
|
<td class="py-3">24 days</td>
|
|
<td class="py-3">30</td>
|
|
<td class="py-3"><span class="badge bg-warning">Caution (15-30 days)</span></td>
|
|
<td class="py-3">
|
|
<a href="#" class="btn btn-light">Mark For Sale</a>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<footer class="text-center py-2 mt-6 text-secondary ">
|
|
<p class="mb-0">Copyright © 2026 InApp Inventory Dashboard. Developed by <a href="https://codescandy.com/"
|
|
target="_blank" class="text-primary">CodesCandy</a> </p>
|
|
</footer>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="position-fixed end-0 bottom-0 m-4">
|
|
<a href="https://codescandy.com/template/inventory-admin-dashboard-template/" class="btn btn-dark"
|
|
target="_blank"> Download Now</a>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="./assets/js/main.js" type="module"></script>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html> |