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

380 lines
17 KiB
HTML
Executable File
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Order Details - 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 d-flex align-items-center justify-content-between">
<div>
<h1 class="fs-3 mb-1">Order ORD-001
</h1>
<p class="mb-0">View and manage order details</p>
</div>
<div class="d-flex align-items-center gap-1">
<span class="badge bg-success">Delivered</span>
<span class="badge bg-success">Paid</span>
</div>
</div>
</div>
</div>
<div class="row g-6">
<div class="col-lg-8">
<div class="card">
<div class="card-body">
<div>
<h2 class="fs-4">Order Items</h2>
<div>
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th>Product</th>
<th>SKU</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wireless Mouse</td>
<td>WM-12345</td>
<td>2</td>
<td>$29.99</td>
<td>$59.98</td>
</tr>
<tr>
<td>Bluetooth Keyboard</td>
<td>BK-67890</td>
<td>1</td>
<td>$12.99</td>
<td>$38.97</td>
</tr>
</tbody>
<tfoot class="border-top">
<tr>
<td colspan="4" class="text-muted border-bottom-0">Subtotal</td>
<td class="border-bottom-0">$98.95</td>
</tr>
<tr>
<td colspan="4" class="text-muted border-bottom-0">Shipping</td>
<td class="border-bottom-0">$9.99</td>
</tr>
<tr>
<td colspan="4" class="text-muted ">Tax</td>
<td>$8.92</td>
</tr>
<tr>
<td colspan="4" class="fw-semibold">Total</td>
<td>$127.86</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="card mt-4">
<div class="card-body">
<h2 class="fs-4 mb-4">Shipping Information
</h2>
<p class="mb-0"><span class="text-muted">Tracking Number:</span>
<span class="fw-semibold">1Z999AA10123456784</span>
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-body">
<h2 class="fs-4 mb-4">Customer Information
</h2>
<p class="mb-3"><span class="text-muted me-1"><i class="ti ti-user">
</i></span>
<span class="fw-semibold">John Doe</span>
</p>
<p class="mb-3"><span class="text-muted me-1"><i class="ti ti-mail">
</i></span>
<span class="fw-semibold"> john.doe@example.com</span>
</p>
<p class="mb-0"><span class="text-muted me-1"><i class="ti ti-phone"></i></span>
<span class="fw-semibold">+1 234 567 8901</span>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h2 class="fs-4 mb-4">Shipping Address
</h2>
<p class="mb-0 d-flex gap-2"><i class="ti ti-map-pin mt-1"></i>
<span>123 Main St, Apt 4B,<br>
Springfield, IL 62704,<br>
USA</span>
</p>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h2 class="fs-4 mb-4">Payment Information
</h2>
<p class="mb-3"><span class="text-muted me-1"><i class="ti ti-credit-card">
</i></span>
<span class="fw-semibold">Credit Card</span>
</p>
<p class="mb-0"><span class="text-muted me-1"><i class="ti ti-file-invoice">
</i></span>
<span class="fw-semibold">INV-1001</span>
</p>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h2 class="fs-4 mb-4">Order Notes
</h2>
<p class="mb-0">Please deliver between 9 AM and 5 PM. Leave the package at the front door if no one is home.
</p>
</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