nok/wms-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9a50080ae52a50e63ebe91ea09313a49adbeb813
wms-app/src/stock-overview.html
T
Thanakorn S 9a50080ae5 init wms
2026-02-19 14:48:40 +07:00

450 lines
19 KiB
HTML
Executable File
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Stock Overview - 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-0">Stock Overview</h1>
</div>
</div>
</div>
<div class="row g-5 mb-5">
<div class="col-xl-3 col-md-6 col-12">
<div class="card ">
<div class="card-body p-5">
<div class="d-flex justify-content-between">
<div>
<span class="mb-4 d-block">Total Sales</span>
<h3 class="fw-bold mb-0">1,234</h3>
<p class="mb-0 small text-secondary">Across all warehouses</p>
</div>
<div class="">
<i class="ti ti-box-seam fs-3 text-muted"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card ">
<div class="card-body p-5">
<div class="d-flex justify-content-between">
<div>
<span class="mb-4 d-block">Stock In (This Month)</span>
<h3 class="fw-bold mb-0 text-success">+456</h3>
<p class="mb-0 small text-secondary">Unit added</p>
</div>
<div class="">
<i class="ti ti-trending-up fs-3 text-success"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card ">
<div class="card-body p-5">
<div class="d-flex justify-content-between">
<div>
<span class="mb-4 d-block">Stock Out (This Month)</span>
<h3 class="fw-bold mb-0 text-danger">-289</h3>
<p class="mb-0 small text-secondary">Unit removed</p>
</div>
<div class="">
<i class="ti ti-trending-down fs-3 text-danger"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card ">
<div class="card-body p-5">
<div class="d-flex justify-content-between">
<div>
<span class="mb-4 d-block">Low Stock Alerts</span>
<h3 class="fw-bold mb-0 text-warning">12</h3>
<p class="mb-0 small text-secondary">Items need attention</p>
</div>
<div class="">
<i class="ti ti-alert-triangle fs-3 text-warning"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-5 mb-5">
<div class="col-lg-6 col-12">
<div class="card">
<div class="card-body p-5">
<div class="d-flex justify-content-between align-items-center">
<h5 class="mb-0">Stock Movement</h5>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-light text-dark btn-icon btn-md">1W</button>
<button type="button" class="btn btn-outline-light text-dark btn-icon btn-md">1M</button>
<button type="button" class="btn btn-outline-light text-dark btn-icon btn-md">3M</button>
<button type="button" class="btn btn-outline-light text-dark btn-icon btn-md">6M</button>
<button type="button" class="btn btn-primary btn-icon btn-md">1Y</button>
</div>
</div>
<div>
<div id="stockMovementChart"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="card">
<div class="card-body p-5">
<div class="d-flex justify-content-between align-items-center">
<h5 class="mb-0">Stock Level Trend</h5>
</div>
<div>
<div id="stockLevelTrendChart"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body p-5">
<h3 class="fs-5">Recent Stock Activity</h3>
<div class="border-bottom d-flex justify-content-between align-items-center mb-4 pb-3">
<div class="d-flex gap-3 align-items-center py-3">
<div class="icon-shape icon-md bg-success bg-opacity-10 text-success rounded-2">
<i class="ti ti-trending-up"></i>
</div>
<div>
<h5 class="mb-0">Product A</h5>
<p class="mb-0 small text-secondary">Stock In
</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="fs-5 text-success">+50</span>
<span>2 hour ago</span>
</div>
</div>
<div class="border-bottom d-flex justify-content-between align-items-center mb-4 pb-3">
<div class="d-flex gap-3 align-items-center py-3">
<div class="icon-shape icon-md bg-danger bg-opacity-10 text-danger rounded-2">
<i class="ti ti-trending-down"></i>
</div>
<div>
<h5 class="mb-0">Product B</h5>
<p class="mb-0 small text-secondary">Stock Out
</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="fs-5 text-danger">-25</span>
<span>4 hour ago</span>
</div>
</div>
<div class="border-bottom d-flex justify-content-between align-items-center mb-4 pb-3">
<div class="d-flex gap-3 align-items-center py-3">
<div class="icon-shape icon-md bg-success bg-opacity-10 text-success rounded-2">
<i class="ti ti-trending-up"></i>
</div>
<div>
<h5 class="mb-0">Product C</h5>
<p class="mb-0 small text-secondary">Stock Out
</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="fs-5 text-success">+100</span>
<span>6 hour ago</span>
</div>
</div>
<div class="border-bottom d-flex justify-content-between align-items-center mb-4 pb-3">
<div class="d-flex gap-3 align-items-center py-3">
<div class="icon-shape icon-md bg-danger bg-opacity-10 text-danger rounded-2">
<i class="ti ti-trending-down"></i>
</div>
<div>
<h5 class="mb-0">Product D</h5>
<p class="mb-0 small text-secondary">Stock Out
</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="fs-5 text-danger">-30</span>
<span>8 hour ago</span>
</div>
</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>
Reference in New Issue View Git Blame Copy Permalink