This commit is contained in:
Thanakorn S
2026-02-19 14:48:40 +07:00
commit 9a50080ae5
221 changed files with 30788 additions and 0 deletions
+42
View File
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>404 Error - 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 class="container d-flex align-items-center justify-content-center min-vh-100">
<div class="" style="max-width: 500px; width: 100%;">
<div class="text-center">
<div class="mb-5">
<a href="index.html" class="d-inline-block mb-5">
<img src="./assets/images/logo-icon.svg" alt="" width="36">
<span class="ms-2"><img src="./assets/images/logo.svg" alt=""></span>
</a>
</div>
<h1 class="display-1 fw-bold text-primary mb-2">404</h1>
<h2 class="card-title h4 mb-3">Page Not Found</h2>
<p class="text-muted mb-5">Sorry, the page you're looking for doesn't exist or has been moved.</p>
<a href="index.html" class="btn btn-primary">Go to Dashboard</a>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="./assets/js/main.js" type="module"></script>
</body>
</html>""
Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 802 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

+1
View File
@@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+11
View File
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 KiB

+8
View File
@@ -0,0 +1,8 @@
<svg width="62" height="67" viewBox="0 0 62 67" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.604 66.378L0.00805664 48.1582V35.7825L30.604 54.0023V66.378Z" fill="#302C4D"/>
<path d="M61.1996 48.1582L30.604 66.378V54.0023L61.1996 35.7825V48.1582Z" fill="#E66239"/>
<path d="M30.5955 0L0 18.2198V30.5955L30.5955 12.3757V0Z" fill="#657E92"/>
<path d="M61.191 18.2198L30.5955 0V12.3757L61.191 30.5955V18.2198Z" fill="#A3B2BE"/>
<path d="M30.604 48.8457L0.00805664 30.6259V18.2498L30.604 36.47V48.8457Z" fill="#302C4D"/>
<path d="M61.1996 30.6259L30.604 48.8457V36.47L61.1996 18.2498V30.6259Z" fill="#E66239"/>
</svg>

After

Width:  |  Height:  |  Size: 628 B

+5
View File
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 11 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

+397
View File
@@ -0,0 +1,397 @@
import ApexCharts from 'apexcharts';
document.addEventListener('DOMContentLoaded', () => {
if (document.getElementById('salesPurchaseChart')) {
var options = {
series: [
{
name: 'Sales',
data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
},
{
name: 'Purchase',
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
},
],
colors: ['#f7a085', '#E66239'],
chart: {
type: 'bar',
height: 350,
width: '100%',
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
grid: {
show: true,
borderColor: "#e2e8f0",
},
legend: {
show: true,
fontFamily: 'Poppins, serif',
fontWeight: 500,
markers: {
size: 5,
shape: 'square',
strokeWidth: 0,
fillColors: undefined,
customHTML: undefined,
onClick: undefined,
offsetX: -2,
offsetY: 0,
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '85%',
borderRadius: 3,
borderRadiusApplication: 'end',
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: false,
width: 2,
colors: ['transparent'],
},
xaxis: {
categories: ['28 Jan', '29 Jan', '30 Jan', '31 Jan', '1 Feb', '2 Feb', '3 Feb', '4 Feb', '5 Feb'],
axisBorder: {
show: false,
color: "#e2e8f0",
height: 1,
width: '100%',
offsetX: 0,
offsetY: 0,
},
axisTicks: {
show: false,
borderType: 'solid',
color: "#e2e8f0",
height: 6,
offsetX: 0,
offsetY: 0,
},
},
yaxis: {
labels: {
formatter: function (e) {
return e + 'k';
},
},
title: {
text: '$ (thousands)' ,
},
},
fill: {
opacity: 1,
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
},
};
var chart = new ApexCharts(document.querySelector("#salesPurchaseChart"), options);
chart.render();
}
if (document.getElementById('customerChart')) {
var options = {
series: [44, 55],
chart: {
height: 200,
type: 'radialBar',
},
colors: ['#5BE49B', '#E66239'],
plotOptions: {
radialBar: {
dataLabels: {
name: {
fontSize: '22px',
},
value: {
fontSize: '16px',
},
total: {
show: false,
},
},
hollow: {
margin: 3,
size: '40%',
background: 'transparent',
image: undefined,
imageWidth: 150,
imageHeight: 150,
imageOffsetX: 0,
imageOffsetY: 0,
imageClipped: true,
position: 'front',
dropShadow: {
enabled: false,
top: 0,
left: 0,
blur: 3,
opacity: 0.5,
},
},
track: {
show: true,
startAngle: undefined,
endAngle: undefined,
background: "#f0f0f0",
strokeWidth: '45%',
opacity: 1,
margin: 5,
dropShadow: {
enabled: false,
top: 0,
left: 0,
blur: 3,
opacity: 0.5,
},
},
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
type: 'vertical',
gradientToColors: ['#007867', '#FFD666', '#FFAC82'],
stops: [0, 100],
},
},
stroke: {
lineCap: 'round',
},
labels: ['First Time', 'Return' ],
};
var chart = new ApexCharts(document.querySelector('#customerChart'), options);
chart.render();
}
if (document.getElementById('salesChart')) {
// --- Replace these arrays with your real monthly sales numbers (12 values each) ---
const salesThisYear = [42000, 53000, 48000, 61000, 72000, 69000, 74000, 82000, 78000, 86000, 91000, 97000];
const salesLastYear = [38000, 45000, 47000, 56000, 65000, 63000, 68000, 70000, 69000, 75000, 80000, 84000];
// Categories for x-axis (months)
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const options = {
chart: {
id: 'sales-overview',
type: 'area',
height: 420,
zoom: { enabled: false },
toolbar: {
show: false,
},
},
colors: ['#E66239', '#198754'],
stroke: { width: [3, 2.5], curve: 'smooth' },
markers: { size: 4, hover: { sizeOffset: 2 } },
series: [
{ name: 'This Year', data: salesThisYear },
{ name: 'Last Year', data: salesLastYear }
],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 60, 100]
}
},
yaxis: {
labels: { formatter: function (val) { return formatCurrency(val); } },
title: { text: 'Sales (INR)' }
},
xaxis: {
categories: months,
tickPlacement: 'on'
},
tooltip: {
shared: true,
y: {
formatter: function(val) { return formatCurrency(val); }
}
},
legend: {
position: 'top',
horizontalAlign: 'right'
},
responsive: [
{
breakpoint: 640,
options: {
chart: { height: 340 },
legend: { position: 'bottom', horizontalAlign: 'center' }
}
}
]
};
// mount chart
const chart = new ApexCharts(document.querySelector("#salesChart"), options);
chart.render();
// helper: format currency with thousands separators (assumes INR — change locale/currency as needed)
function formatCurrency(value) {
if (value == null) return '-';
// ensure numeric
const n = Number(value);
return '₹' + n.toLocaleString('en-IN', { maximumFractionDigits: 0 });
}
// Example control: Randomize data (for demo)
document.getElementById('btn-random').addEventListener('click', () => {
const rand = () => Math.round((Math.random() * 80 + 20) * 1000); // 20k - 100k
const newThisYear = Array.from({length: 12}, rand);
const newLastYear = Array.from({length: 12}, rand);
chart.updateSeries([
{ name: 'This Year', data: newThisYear },
{ name: 'Last Year', data: newLastYear }
]);
});
// Example control: Toggle to show only This Year
let showingBoth = true;
document.getElementById('btn-update').addEventListener('click', () => {
if (showingBoth) {
chart.updateSeries([{ name: 'This Year', data: salesThisYear }]);
document.getElementById('btn-update').textContent = 'Show Comparison';
} else {
chart.updateSeries([
{ name: 'This Year', data: salesThisYear },
{ name: 'Last Year', data: salesLastYear }
]);
document.getElementById('btn-update').textContent = 'Show This Year Only';
}
showingBoth = !showingBoth;
});
// Public function: update chart with new monthly sales data
// call updateMonthlySales([arrayOf12], optionalCompareArrayOf12)
function updateMonthlySales(currentYearArray, compareYearArray = null) {
if (!Array.isArray(currentYearArray) || currentYearArray.length !== 12) {
console.warn('updateMonthlySales expects an array of 12 numbers for currentYearArray');
return;
}
const series = [{ name: 'This Year', data: currentYearArray }];
if (Array.isArray(compareYearArray) && compareYearArray.length === 12) {
series.push({ name: 'Last Year', data: compareYearArray });
}
chart.updateSeries(series);
}
}
if (document.getElementById('stockMovementChart')) {
var options = {
series: [{
name: 'Stock In',
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
}, {
name: 'Stock Out',
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
}],
chart: {
type: 'bar',
height: 350,
toolbar: {
show: false
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
borderRadius: 5,
borderRadiusApplication: 'end'
},
},
colors: ['#E66239', '#00C951'],
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
yaxis: {
title: {
text: '$ (thousands)'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
}
};
var chart = new ApexCharts(document.querySelector("#stockMovementChart"), options);
chart.render();
}
if (document.getElementById('stockLevelTrendChart')) {
var options = {
series: [{
name: 'series1',
data: [0, 400, 800, 1200, 1600, 2000, 2400]
}, ],
chart: {
height: 350,
type: 'area',
toolbar: {
show: false
},
},
colors: ['#E66239'],
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector("#stockLevelTrendChart"), options);
chart.render();
}
});
+7
View File
@@ -0,0 +1,7 @@
import "./chart.js";
import "./sidebar.js"
import "./dropzone.js"
+17
View File
@@ -0,0 +1,17 @@
import Dropzone from "dropzone";
Dropzone.autoDiscover = false;
document.addEventListener("DOMContentLoaded", function () {
const dropzoneEl = document.querySelector('#my-dropzone');
if (!dropzoneEl) return; // ⛔ Stop if element not found
new Dropzone(dropzoneEl, {
url: 'https://httpbin.org/post',
maxFilesize: 5,
acceptedFiles: 'image/*',
addRemoveLinks: true,
autoProcessQueue: true,
});
});
+9
View File
@@ -0,0 +1,9 @@
// Import Bootstrap JS
import * as bootstrap from 'bootstrap';
import './custom.js';
// Import SCSS
import '../scss/style.scss';
+61
View File
@@ -0,0 +1,61 @@
const sidebar = document.getElementById('sidebar');
const content = document.getElementById('content');
const topbar = document.getElementById('topbar');
const toggleBtn = document.getElementById('toggleBtn');
const mobileBtn = document.getElementById('mobileBtn');
const overlay = document.getElementById('overlay');
// Desktop collapse
if (toggleBtn) {
toggleBtn.addEventListener('click', () => {
if (sidebar) sidebar.classList.toggle('collapsed');
if (content) content.classList.toggle('full');
if (topbar) topbar.classList.toggle('full');
});
}
// Mobile sidebar open
if (mobileBtn) {
mobileBtn.addEventListener('click', () => {
if (sidebar) sidebar.classList.add('mobile-show');
if (overlay) overlay.classList.add('show');
});
}
// 🔥 Click outside to close
if (overlay) {
overlay.addEventListener('click', () => {
if (sidebar) sidebar.classList.remove('mobile-show');
if (overlay) overlay.classList.remove('show');
});
}
// const currentPage = window.location.pathname.split('/').pop() || 'index.html';
// const navLinks = document.querySelectorAll('.sidebar .nav-link');
// if (navLinks.length > 0) {
// navLinks.forEach(link => {
// link.classList.remove('active');
// if (link.getAttribute('href') === currentPage) {
// link.classList.add('active');
// }
// });
// }
const currentPath = window.location.pathname.replace(/\/$/, '');
const navLinks = document.querySelectorAll('.sidebar .nav-link');
navLinks.forEach(link => {
link.classList.remove('active');
const linkPath = new URL(link.href).pathname.replace(/\/$/, '');
if (
linkPath === currentPath ||
(currentPath === '' && linkPath.endsWith('index.html'))
) {
link.classList.add('active');
}
});
+153
View File
@@ -0,0 +1,153 @@
// Avatar
.avatar {
position: relative;
display: inline-block;
width: 3rem;
height: 3rem;
}
// Avatar Size
.avatar-xs {
width: $avatar-size-xs;
height: $avatar-size-xs;
}
.avatar-sm {
width: $avatar-size-sm;
height: $avatar-size-sm;
}
.avatar-md {
width: $avatar-size-md;
height: $avatar-size-md;
}
.avatar-lg {
width: $avatar-size-lg;
height: $avatar-size-lg;
}
.avatar-xl {
width: $avatar-size-xl;
height: $avatar-size-xl;
}
.avatar-xxl {
width: $avatar-size-xxl;
height: $avatar-size-xxl;
}
// Avatar img
.avatar img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.avatar-indicators {
position: relative;
}
.avatar-indicators:before {
content: '';
position: absolute;
bottom: 0px;
right: 5%;
width: 30%;
height: 30%;
border-radius: 50%;
border: 2px solid var(--#{$prefix}white);
display: table;
}
.avatar-xxl.avatar-indicators:before {
bottom: 5px;
right: 17%;
width: 16%;
height: 16%;
}
// Avatar indicators
.avatar-offline:before {
background-color: var(--#{$prefix}gray-400);
}
.avatar-online:before {
background-color: $success;
}
.avatar-away:before {
background-color: $warning;
}
.avatar-busy:before {
background-color: $danger;
}
.avatar-info:before {
background-color: $info;
}
// Avatar intials
.avatar-initials {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
pointer-events: none;
text-transform: uppercase;
}
// Color varient
.avatar-primary .avatar-initials {
color: var(--#{$prefix}white);
background-color: $primary;
}
.avatar-secondary .avatar-initials {
color: var(--#{$prefix}white);
background-color: $secondary;
}
.avatar-success .avatar-initials {
color: var(--#{$prefix}white);
background-color: $success;
}
.avatar-warning .avatar-initials {
color: var(--#{$prefix}white);
background-color: $warning;
}
.avatar-info .avatar-initials {
color: var(--#{$prefix}white);
background-color: $info;
}
.avatar-danger .avatar-initials {
color: var(--#{$prefix}white);
background-color: $danger;
}
.avatar-light .avatar-initials {
color: var(--#{$prefix}white);
background-color: $light;
}
.avatar-dark .avatar-initials {
color: var(--#{$prefix}white);
background-color: $dark;
}
// Avatar Group
.avatar-group .avatar + .avatar {
margin-left: -1.2rem;
}
.avatar-group .avatar:hover {
z-index: 2;
}
// Avatar border
.avatar-group img,
.avatar-group .avatar .avatar-initials {
border: 2px solid var(--#{$prefix}white);
}
+34
View File
@@ -0,0 +1,34 @@
// Border dashed
.border-dashed {
--ds-border-style: dashed;
}
.timeline-vertical {
position: relative;
.timeline-item {
.timeline-bar {
position: absolute;
height: 100px;
left: 5px;
top: 24px;
}
}
}
.timeline-vertical-height {
.timeline-item {
.timeline-bar {
height: calc(100% - 1rem) !important;
}
}
}
// vr border
.vr {
display: inline-block;
align-self: stretch;
width: $vr-border-width;
min-height: 1em;
background-color: var(--#{$prefix}border-color) !important;
opacity: $hr-opacity;
}
+34
View File
@@ -0,0 +1,34 @@
.btn-icon {
position: relative;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
font-size: 0.92969rem;
font-weight: 400;
width: 2.5rem;
height: 2.5rem;
padding: 0;
}
.btn-icon.btn-xs {
font-size: 0.75rem;
width: 1.75rem;
height: 1.75rem;
}
.btn-icon.btn-sm {
font-size: 0.875rem;
width: 2.1875rem;
height: 2.1875rem;
}
.btn-icon.btn-lg {
font-size: 1rem;
width: 3.36875rem;
height: 3.36875rem;
}
+143
View File
@@ -0,0 +1,143 @@
.overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
backdrop-filter: blur(1px);
display: none;
z-index: 1030;
}
.overlay.show {
display: block;
}
.sidebar {
width: 240px;
background: $white;
transition: width .3s, left .3s;
border-right: 1px solid $gray-200;
height: 100vh;
position: fixed;
top: 0;
left: 0;
padding-top: 60px;
z-index: 1030;
.nav-text-space {
padding: 12px 16px;
}
.nav-link {
color: $gray-800;
padding: 8px 10px;
display: flex;
align-items: center;
font-size: 14px;
font-weight: 400;
gap: 12px;
white-space: nowrap;
margin: 1px 12px;
border-radius: 8px;
&:hover {
color: $primary;
background-color: rgba($primary, 0.095);
}
&.active {
color: $primary;
background-color: rgba($primary, 0.095);
}
.ti {
font-size: 18px;
}
}
.nav-text {
transition: opacity .2s;
}
.logo-area {
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100%;
background: $white;
display: flex;
align-items: center;
gap: 10px;
padding-left: 16px;
color: $gray-800;
border-bottom: 1px solid $gray-200;
}
}
/* width */
::-webkit-scrollbar {
width: 4px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.sidebar.collapsed {
.nav-text-space {
padding: 0px;
}
width: 60px;
.nav-link{
margin: 0 0px;
background-color: transparent;
padding: 8px 18px;
}
.nav-text {
display: none;
}
.logo-text {
display: none;
}
}
.topbar {
height: 60px;
margin-left: 240px;
// transition: margin-left .3s;
}
.topbar.full {
margin-left: 60px;
}
.content {
margin-left: 240px;
// transition: margin-left .3s;
// padding: 20px;
}
.content.full {
margin-left: 60px;
}
@media (max-width: 992px) {
.sidebar {
left: -240px;
}
.sidebar.mobile-show {
left: 0;
}
.topbar {
margin-left: 0 !important;
width: 100% !important;
}
.content {
margin-left: 0 !important;
}
}
@import "./avatar";
@import "./button";
@import "./icon-shape";
@import "./utilities";
@import "./dropzone";
@import "./table";
+53
View File
@@ -0,0 +1,53 @@
@import "dropzone/dist/dropzone.css";
// Dropzone
.dropzone {
background: var(--#{$prefix}light) !important ;
.dz-message {
padding: 3rem !important;
margin: 0 !important;
}
.dz-remove {
:hover {
text-decoration: none;
}
}
}
// dropzone js
.profile-dropzone {
height: 3rem;
width: 105px;
border: 2px dashed var(--#{$prefix}gray-300);
border-radius: 0.5rem;
min-height: 105px;
position: relative;
padding: 0;
.dz-message {
display: none;
}
.dz-preview {
margin: 0;
.dz-image {
position: absolute;
display: inline-block;
vertical-align: top;
margin: 0;
min-height: 60px;
height: 100px;
width: 100px;
top: 0;
left: 0;
border-radius: 0.5rem;
}
.dz-error-mark {
margin-left: 23px;
margin-top: -27px;
}
}
}
.dropzone .dz-preview .dz-remove:hover {
text-decoration: none;
}
+50
View File
@@ -0,0 +1,50 @@
// Icon shape
.icon-xxs {
width: $icon-size-xxs;
height: $icon-size-xxs;
line-height: $icon-size-xxs;
}
.icon-xs {
width: $icon-size-xs;
height: $icon-size-xs;
line-height: $icon-size-xs;
}
.icon-sm {
width: $icon-size-sm;
height: $icon-size-sm;
line-height: $icon-size-sm;
}
.icon-md {
width: $icon-size-md;
height: $icon-size-md;
line-height: $icon-size-md;
}
.icon-lg {
width: $icon-size-lg;
height: $icon-size-lg;
line-height: $icon-size-lg;
}
.icon-xl {
width: $icon-size-xl;
height: $icon-size-xl;
line-height: $icon-size-xl;
}
.icon-xxl {
width: $icon-size-xxl;
height: $icon-size-xxl;
line-height: $icon-size-xxl;
}
.icon-xxxl {
width: $icon-size-xxxl;
height: $icon-size-xxxl;
line-height: $icon-size-xxxl;
}
.icon-shape {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
vertical-align: middle;
}
+68
View File
@@ -0,0 +1,68 @@
// Table
table tr:last-child td {
border-bottom-width: 0px;
}
// Table centered
.table-centered td,
.table-centered th {
vertical-align: middle !important;
}
.table {
& thead {
background-color: var(--#{$prefix}gray-100);
}
& th {
border: 0px;
color: var(--#{$prefix}gray-600);
}
}
thead,
tbody,
tfoot,
tr,
td,
th {
border-color: inherit;
border-style: solid;
border-width: 0;
}
.table-responsive {
/* width */
&::-webkit-scrollbar {
height: 6px;
}
/* Track */
&::-webkit-scrollbar-track {
background: var(--#{$prefix}gray-100);
border-radius: $border-radius-xl;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: var(--#{$prefix}gray-300);
border-radius: $border-radius-xl;
}
/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background: var(--#{$prefix}gray-300);
}
}
.table-checkbox {
tbody {
tr:has(.form-check-input:checked) {
background-color: rgba(var(--#{$prefix}primary-rgb), $alpha: 0.15);
}
}
}
.table-hover > tbody > tr:hover:has(.form-check-input:checked) > * {
--ds-table-color-state: rgba(var(--#{$prefix}primary-rgb), $alpha: 1);
--ds-table-bg-state: rgba(var(--#{$prefix}primary-rgb), $alpha: 0.75); // Slightly darker on hover
}
+102
View File
@@ -0,0 +1,102 @@
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"font-size": (
rfs: true,
responsive: true,
property: font-size,
class: fs,
values: $font-sizes
),
"position": (
property: position,
responsive: true,
values: static relative absolute fixed sticky
),
"top": (
property: top,
responsive: true,
values: $position-values
),
"bottom": (
property: bottom,
responsive: true,
values: $position-values
),
"start": (
property: left,
class: start,
responsive: true,
values: $position-values
),
"end": (
property: right,
class: end,
responsive: true,
values: $position-values
),
"translate-middle": (
property: transform,
class: translate-middle,
responsive: true,
values: (
null: translate(-50%, -50%),
x: translateX(-50%),
y: translateY(-50%),
)
),
"border": (
property: border,
responsive: true,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0
)
),
"border-top": (
property: border-top,
responsive: true,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0
)
),
"border-end": (
property: border-right,
responsive: true,
class: border-end,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0
)
),
"border-bottom": (
property: border-bottom,
responsive: true,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0
)
),
"border-start": (
property: border-left,
responsive: true,
class: border-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0
)
),
)
);
@import "bootstrap/scss/utilities/api";
+145
View File
@@ -0,0 +1,145 @@
// Example: override Bootstrap color variables
$gray-50: #fafafa !default;
$gray-100: #f5f5f5 !default;
$gray-200: #e5e5e5 !default;
$gray-300: #d4d4d4 !default;
$gray-400: #a3a3a3 !default;
$gray-500: #737373 !default;
$gray-600: #525252 !default;
$gray-700: #404040 !default;
$gray-800: #262626 !default;
$gray-900: #171717 !default;
$gray-950: #0a0a0a !default;
$orange: #E66239 !default;
$red: #FB2C36 !default;
$green: #00C951 !default;
$cyan: #00B8DB !default;
$yellow: #F0B100 !default;
$primary: $orange !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$min-contrast-ratio: 2.5 !default;
$link-hover-decoration: none !default;
$link-color: $gray-700 !default;
$link-hover-color: $primary !default;
$light: $gray-100 !default;
$border-color: $gray-200 !default;
$border-color-translucent: $gray-200 !default;
$enable-negative-margins: true !default;
$enable-rounded: true !default;
$headings-font-weight: 400 !default;
$grid-gutter-width: 2.5rem !default;
// scss-docs-start position-map
$position-values: (
0: 0,
10: 10%,
25: 25%,
50: 50%,
60: 60%,
65:65%,
70: 70%,
75: 75%,
100: 100%,
auto: auto
) !default;
// scss-docs-end position-map
// scss-docs-start spacer-variables-maps
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer * 0.25,
// 4px
2: $spacer * 0.5,
// 8px
3: $spacer * 0.75,
// 16px
4: $spacer * 1,
// 24px
5: $spacer * 1.25,
// 32px
6: $spacer * 1.5,
// 40px
7: $spacer * 1.75,
// 48px
8: $spacer * 2,
// 64px
9: $spacer * 2.5,
// 80px
10: $spacer * 3,
// 96px
11: $spacer * 3.5,
// 128px
12: $spacer * 4,
// 160px
13: $spacer * 4.5,
// 192px
14: $spacer * 5,
// 240px
15: $spacer * 6
// 288px
) !default;
// scss-docs-end spacer-variables-maps
$font-family-base: 'Poppins', sans-serif !default;
$font-size-root: null !default;
$font-size-base: .875rem !default; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .85 !default;
$font-size-lg: $font-size-base * 1.25 !default;
$font-xs: 0.75rem !default;
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
// scss-docs-start border-radius-variables
$input-btn-padding-y: 0.5rem !default;
$input-btn-padding-x: .875rem !default;
$table-th-font-weight: 400!default;
$link-decoration: none !default;
$link-hover-decoration: underline !default;
// Icon
$icon-size-xxs: 1rem !default;
$icon-size-xs: 1.5rem !default;
$icon-size-sm: 2rem !default;
$icon-size-md: 2.5rem !default;
$icon-size-lg: 3rem !default;
$icon-size-xl: 3.5rem !default;
$icon-size-xxl: 4rem !default;
$icon-size-xxxl: 7rem !default;
// Avatar
$avatar-size-xs: 1.5rem !default;
$avatar-size-sm: 2rem !default;
$avatar-size-md: 2.5rem !default;
$avatar-size-lg: 3.5rem !default;
$avatar-size-xl: 5rem !default;
$avatar-size-xxl: 7.5rem !default;
+14
View File
@@ -0,0 +1,14 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.35.0/tabler-icons.min.css');
// Import Bootstrap functions first
@import "bootstrap/scss/functions";
// Override Bootstrap variables here
@import "./variables";
// Import Bootstrap
@import "bootstrap/scss/bootstrap";
// Custom styles
@import "./custom";
+256
View File
@@ -0,0 +1,256 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Changelog - 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="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
<div class="">
<h1 class="fs-3 mb-1">Changelog</h1>
<p>
Stay up to date with all of the latest additions and improvements we've made to Inapp Pro.
</p>
<div class=" row mt-7">
<div class="col-lg-5 col-12">
<div id="initial">
<h4 class="mb-3 fw-semi-bold">
<code>v1.0.0</code>
- Jan 21, 2026
</h4>
</div>
</div>
<div class="col-md-7 col-12">
<div>
<h3 class="mb-0">Inital Release </h3>
</div>
</div>
</div>
</div>
</div>
</div>
</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>
+231
View File
@@ -0,0 +1,231 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Create Order - 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="text-center mb-5 h-100 d-flex flex-column justify-content-center align-items-center">
<div>
<h1 class=" mb-1">Coming Soon
</h1>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Bootstrap JS -->
<script src="./assets/js/main.js" type="module"></script>
</body>
</html>
+302
View File
@@ -0,0 +1,302 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Create Product - 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="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
<div class="">
<h1 class="fs-3 mb-1">Add Inventory</h1>
<p class="mb-0">Manage your inventory items</p>
</div>
<div>
<a href="inventory.html" class="btn btn-primary">Go to Inventory List</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body p-6">
<form id="addProductForm">
<div class="row">
<div class="col-md-6 mb-3">
<label for="productName" class="form-label">Product Name</label>
<input type="text" class="form-control" id="productName" placeholder="Enter product name" required>
</div>
<div class="col-md-6 mb-3">
<label for="productSKU" class="form-label">SKU</label>
<input type="text" class="form-control" id="productSKU" placeholder="Enter SKU" required>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="productPrice" class="form-label">Price</label>
<input type="number" class="form-control" id="productPrice" placeholder="0.00" step="0.01" required>
</div>
<div class="col-md-6 mb-3">
<label for="productStock" class="form-label">Stock Quantity</label>
<input type="number" class="form-control" id="productStock" placeholder="0" required>
</div>
</div>
<div class="mb-3">
<label for="productCategory" class="form-label">Category</label>
<select class="form-select" id="productCategory" required>
<option value="">Select category</option>
<option value="electronics">Electronics</option>
<option value="clothing">Clothing</option>
<option value="food">Food</option>
</select>
</div>
<div class="mb-3">
<label for="productImage" class="form-label">Product Image</label>
<input type="file" class="form-control" id="productImage" accept="image/*" required>
</div>
<div class="mb-3">
<label for="productDescription" class="form-label">Description</label>
<textarea class="form-control" id="productDescription" rows="4"
placeholder="Enter product description"></textarea>
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary">Add Product</button>
<button type="reset" class="btn btn-secondary">Clear</button>
</div>
</form>
</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>
<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>
Executable
+334
View File
@@ -0,0 +1,334 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documentation - 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="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
<div class="">
<h1 class="fs-3 mb-1">Documentation</h1>
<p>
This documentation will guide you through the setup and usage of the InApp Inventory Dashboard template.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="">
<div class="">
<!-- Prerequisites -->
<div class="mb-5">
<div class="mb-2">
<h2 class="h5 mb-1">Prerequisites</h2>
<p>Before you begin, ensure you have the following installed:</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item ps-0">Node.js (v14 or higher)</li>
<li class="list-group-item ps-0">npm or yarn package manager</li>
<li class="list-group-item ps-0">[Any other specific tools/dependencies]</li>
</ul>
</div>
<!-- Installation -->
<div class="mb-5">
<h2 class="h5 mb-2">Installation</h2>
<ol class="list-group list-group-numbered list-group-flush">
<li class="list-group-item ps-0" >Clone the repository or download the template</li>
<li class="list-group-item ps-0">Navigate to the project directory</li>
<li class="list-group-item ps-0">
Install dependencies:
<pre class="bg-light border rounded p-3 mt-2"><code>npm install</code></pre>
</li>
</ol>
</div>
<!-- Usage -->
<div class="mb-6">
<h2 class="h5 mb-2">Run the app</h2>
<p>To start the development server:</p>
<pre class="bg-light border rounded p-3"><code>npm run dev</code></pre>
</div>
<!-- Next Steps -->
<div class="mb-5">
<h2 class="h5 mb-2">Next Steps</h2>
<ol class="list-group list-group-numbered list-group-flush">
<li class="list-group-item ps-0">Review the main entry point in <code>src/js/main.js</code></li>
<li class="list-group-item ps-0">Customize components according to your needs</li>
<li class="list-group-item ps-0">
Build for production:
<pre class="bg-light border rounded p-3 mt-4"><code>npm run build</code></pre>
</li>
</ol>
</div>
<!-- Project Structure -->
<div class="mb-5">
<h2 class="h5 mb-0">Project Structure</h2>
<pre>
<code>
inapp/
├── src/
│ ├── assest/ # Static assets
│ │ ├── images/ # Images
│ │ ├── js/ # JS
│ │ ├── scss/ # CSS and styling
│ └── Pages # All Pages
├── vite.config.js/ # Config Files
├── package.json # Project dependencies
├── README.md # Documentation
└── .gitignore # Git ignore file
</code>
</pre>
</div>
<!-- Support -->
<div class="mb-2">
<h2 class="h5">Support</h2>
<p>
For issues or questions, please refer to the documentation or create an issue in the repository. Also you can contact
us at <a href="https://codescandy.com/" class="text-primary">CodesCandy</a>.
</p>
</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>
<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>
+374
View File
@@ -0,0 +1,374 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Edit Product - 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="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
<div class="">
<h1 class="fs-3 mb-1">Edit Product</h1>
<p class="mb-0">Update product information</p>
</div>
</div>
</div>
</div>
<div class="row g-5">
<div class="col-lg-8 col-12">
<div class="card mb-5 ">
<div class="card-body p-6">
<h2 class="fs-4 mb-3">Product Information</h2>
<div class="row g-5">
<div class="col-lg-6">
<label for="productName" class="form-label"> Product Name</label>
<input type="text" name="" id="productName" class="form-control" placeholder="" value="Lenovo 3rd Generation">
</div>
<div class="col-lg-6">
<label for="sku" class="form-label"> SKU</label>
<input type="text" name="" id="sku" class="form-control" placeholder="" value="PT001">
</div>
<div class="col-lg-6">
<label for="catogires" class="form-label"> Category</label>
<select name="" id="catogires" class="form-select">
<option value="Leptop">Leptop</option>
<option value="Desktop">Desktop</option>
<option value="Accessories">Accessories</option>
<option value="Phone">Phone</option>
</select>
</div>
<div class="col-lg-6">
<label for="brand" class="form-label"> Brand</label>
<select name="" id="brand" class="form-select">
<option value="Lenovo">Lenovo</option>
<option value="Apple">Apple</option>
<option value="Dell">Dell</option>
<option value="HP">HP</option>
</select>
</div>
<div class="col-lg-12">
<label for="description" class="form-label"> Description</label>
<textarea name="description" rows="3" id="description" class="form-control" placeholder="High-performance laptop with latest specifications."></textarea>
</div>
</div>
</div>
</div>
<div class="card ">
<div class="card-body p-6">
<h2 class="fs-4 mb-3">Pricing & Stock</h2>
<div class="row g-5">
<div class="col-lg-4">
<label for="productPrice" class="form-label"> Price ($)</label>
<input type="number" name="" id="productPrice" class="form-control" placeholder="" value="1500">
</div>
<div class="col-lg-4">
<label for="productTax" class="form-label"> Tax (%)</label>
<input type="number" name="" id="productTax" class="form-control" placeholder="" value="5">
</div>
<div class="col-lg-4">
<label for="discount" class="form-label"> Discount (%)</label>
<input type="number" name="discount" id="discount" class="form-control" placeholder="" value="10">
</div>
<div class="col-lg-4">
<label for="quantity" class="form-label"> Quantity</label>
<input type="number" name="quantity" id="quantity" class="form-control" placeholder="" value="100">
</div>
<div class="col-lg-4">
<label for="Minquantity" class="form-label"> Minimum Quantity</label>
<input type="number" name="Minquantity" id="Minquantity" class="form-control" placeholder="" value="10">
</div>
<div class="col-lg-4">
<label for="unit" class="form-label"> Unit</label>
<select name="" id="unit" class="form-select">
<option value="Piece">Piece</option>
<option value="Kg">Kg</option>
<option value="Box">Box</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="card mb-5">
<div class="card-body p-6">
<h2 class="fs-4 mb-3">Product Images</h2>
<div id="my-dropzone" class="dropzone border border-dashed rounded-3">
<div class="fallback"><input type="file" name="file" required /></div>
</div>
</div>
</div>
<div class="card mb-5">
<div class="card-body p-6">
<h2 class="fs-4 mb-3">Status</h2>
<div class="">
<label for="status" class="form-label">Status</label>
<select name="status" id="status" class="form-select">
<option value="Active"> Active </option>
<option value="Inactive"> Inactive </option>
<option value="Draft"> Draft </option>
</select>
</div>
</div>
</div>
<div>
<a href="#!" class="btn btn-secondary">cancel</a>
<a href="inventory.html" class="btn btn-primary">Update Product</a>
</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>
<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>
Executable
+700
View File
@@ -0,0 +1,700 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>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 overflow-x-hidden">
<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">Dashboard</h1>
<p>Your main content goes here…</p>
</div>
</div>
</div>
<div class="row g-5 mb-5">
<div class="col-lg-3 col-12">
<div class="card p-4 bg-primary bg-opacity-10 border border-primary border-opacity-25 rounded-2">
<div class="d-flex gap-3 ">
<div class="icon-shape icon-md bg-primary text-white rounded-2">
<i class="ti ti-report-analytics fs-4"></i>
</div>
<div>
<h2 class="mb-3 fs-6">Total Sales</h2>
<h3 class="fw-bold mb-0">$25,000</h3>
<p class="text-primary mb-0 small">+5% since last month</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-12">
<div class="card p-4 bg-success bg-opacity-10 border border-success border-opacity-25 rounded-2">
<div class="d-flex gap-3 ">
<div class="icon-shape icon-md bg-success text-white rounded-2">
<i class="ti ti-repeat fs-4"></i>
</div>
<div>
<h2 class="mb-3 fs-6">Total Purchase</h2>
<h3 class="fw-bold mb-0">$18,000</h3>
<p class="text-success mb-0 small">+22% since last month</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-12">
<div class="card p-4 bg-info bg-opacity-10 border border-info border-opacity-25 rounded-2">
<div class="d-flex gap-3 ">
<div class="icon-shape icon-md bg-info text-white rounded-2">
<i class="ti ti-currency-dollar fs-4"></i>
</div>
<div>
<h2 class="mb-3 fs-6">Total Expenses</h2>
<h3 class="fw-bold mb-0">$9,000</h3>
<p class="text-info mb-0 small">+10% since last month</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-12">
<div class="card p-4 bg-warning bg-opacity-10 border border-warning border-opacity-25 rounded-2">
<div class="d-flex gap-3 ">
<div class="icon-shape icon-md bg-warning text-white rounded-2">
<i class="ti ti-notes fs-4"></i>
</div>
<div>
<h2 class="mb-3 fs-6">Invoice Due</h2>
<h3 class="fw-bold mb-0">$25,000</h3>
<p class="text-warning mb-0 small">+35% since last month</p>
</div>
</div>
</div>
</div>
</div>
<div class="row g-5 mb-5">
<div class="col-lg-4 col-12">
<div class="card">
<div class="card-body p-6">
<div class="d-flex justify-content-between border-bottom pb-5 mb-3">
<div>
<h3 class="fw-bold h4">$25,458</h3>
<span>Total Profit</span>
</div>
<div>
<i class="ti ti-layers-subtract fs-1 text-primary"></i>
</div>
</div>
<div class="d-flex justify-content-between align-items-center small">
<div class="text-muted"><span class="text-success">+35%</span> vs Last Month</div>
<div><a href="#" class="link-primary text-decoration-underline">View</a></div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="card">
<div class="card-body p-6">
<div class="d-flex justify-content-between border-bottom pb-5 mb-3">
<div>
<h3 class="fw-bold h4">$45,458</h3>
<span>Total Payment Returns</span>
</div>
<div>
<i class="ti ti-credit-card fs-1 text-danger"></i>
</div>
</div>
<div class="d-flex justify-content-between align-items-center small">
<div class="text-muted"><span class="text-danger">-20%</span> vs Last Month</div>
<div><a href="#" class="link-primary text-decoration-underline">View</a></div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="card">
<div class="card-body p-6">
<div class="d-flex justify-content-between border-bottom pb-5 mb-3">
<div>
<h3 class="fw-bold h4">$34,458</h3>
<span>Total Expenses</span>
</div>
<div>
<i class="ti ti-cash-banknote fs-1 text-warning"></i>
</div>
</div>
<div class="d-flex justify-content-between align-items-center small">
<div class="text-muted"><span class="text-warning">-20%</span> vs Last Month</div>
<div><a href="#" class="link-primary text-decoration-underline">View</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-5 mb-5">
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center bg-transparent px-4 py-3">
<h3 class="h5 mb-0">Sales vs Purchase</h3>
<div>
<select class="form-select form-select-sm">
<option selected>This Year</option>
<option>This Month</option>
<option>This Week</option>
</select>
</div>
</div>
<div class="card-body p-6">
<div id="salesPurchaseChart"></div>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center bg-transparent px-4 py-3">
<h3 class="h5 mb-0">Overall Information</h3>
<div>
<select class="form-select form-select-sm">
<option selected>Last 6 Months</option>
<option>This Month</option>
<option>This Week</option>
</select>
</div>
</div>
<div class="card-body p-6">
<h3 class="h6">Customers Overview</h3>
<div class="row align-items-center">
<div class="col-sm-6">
<div id="customerChart">
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-6 border-end">
<div class="text-center ">
<h2 class="mb-1">5.5K</h2>
<p class="text-success mb-2">First Time</p>
<span class="badge bg-success"><i class="ti ti-arrow-up-left me-1"></i>25%</span>
</div>
</div>
<div class="col-6">
<div class="text-center">
<h2 class="mb-1">3.5K</h2>
<p class="text-warning mb-2">Return</p>
<span class="badge bg-success badge-xs d-inline-flex align-items-center"><i
class="ti ti-arrow-up-left me-1"></i>21%</span>
</div>
</div>
</div>
</div>
</div>
<div class="row text-center border-top mt-4 pt-4">
<div class="col-4 border-end">
<h3 class="fw-bold mb-2">6987</h3>
<small class="text-secondary">Suppliers</small>
</div>
<div class="col-4 border-end">
<h3 class="fw-bold mb-2">4896</h3>
<small class="text-secondary">Customers</small>
</div>
<div class="col-4">
<h3 class="fw-bold mb-2">487</h3>
<small class="text-secondary">Orders</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-5">
<!-- CARD 1 — Top Selling Products -->
<div class="col-lg-4">
<div class="card h-100">
<div class="card-header bg-white d-flex justify-content-between align-items-center px-4 py-3">
<h4 class="mb-0 h5">Top Selling Products</h4>
<button class="btn btn-sm btn-outline-secondary">
<i class="ti ti-calendar"></i> Today
</button>
</div>
<ul class="list-group list-group-flush">
<!-- item -->
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-2.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">Wireless Earphones</p>
<div class="d-flex align-items-center gap-2 text-muted">
<small class="fw-semibold">$89 </small>
<small>•</small>
<small>1,250 Units</small>
</div>
</div>
<span class="badge bg-danger-subtle text-danger border border-danger">18%</span>
</li>
<!-- repeat -->
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-1.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">Gaming Joy Stick</p>
<div class="d-flex align-items-center gap-2 text-muted">
<small class="fw-semibold">$49 </small>
<small>•</small>
<small>5,420 Units</small>
</div>
</div>
<span class="badge bg-primary-subtle text-primary border border-primary">32%</span>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-3.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">Smart Watch Pro</p>
<div class="d-flex align-items-center gap-2 text-muted">
<small class="fw-semibold">$98 </small>
<small>•</small>
<small>862 Units</small>
</div>
</div>
<span class="badge bg-info-subtle text-info border border-info">22%</span>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-4.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">USB-C Fast Charger</p>
<div class="d-flex align-items-center gap-2 text-muted">
<small class="fw-semibold">$35 </small>
<small>•</small>
<small>3,200 Units</small>
</div>
</div>
<span class="badge bg-success-subtle text-success border border-success">28%</span>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-5.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">Portable Bluetooth Speaker</p>
<div class="d-flex align-items-center gap-2 text-muted">
<small class="fw-semibold">$65 </small>
<small>•</small>
<small>2,890 Units</small>
</div>
</div>
<span class="badge bg-warning-subtle text-warning border border-warning">25%</span>
</li>
</ul>
</div>
</div>
<!-- CARD 2 — Low Stock Products -->
<div class="col-lg-4">
<div class="card h-100">
<div class="card-header bg-white d-flex justify-content-between align-items-center px-4 py-3">
<div class="d-flex align-items-center">
<h4 class="mb-0 h5">Low Stock Products</h4>
</div>
<a href="#" class="small text-primary text-decoration-underline">View All</a>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-8.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">Wireless Headphones</p>
<small>ID: #554433</small>
</div>
<div class="d-flex flex-column gap-0 align-items-center">
<span class="fw-semibold text-primary">06</span>
<small class="text-muted">In Stock</small>
</div>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-4.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">USB-C Cable Pack</p>
<small>ID: #887766</small>
</div>
<div class="d-flex flex-column gap-0 align-items-center">
<span class="fw-semibold text-primary">09</span>
<small class="text-muted">In Stock</small>
</div>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-10.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">Phone Screen Protector</p>
<small>ID: #332211</small>
</div>
<div class="d-flex flex-column gap-0 align-items-center">
<span class="fw-semibold text-primary">03</span>
<small class="text-muted">In Stock</small>
</div>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-4.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">Portable Charger 20000mAh</p>
<small>ID: #998877</small>
</div>
<div class="d-flex flex-column gap-0 align-items-center">
<span class="fw-semibold text-primary">07</span>
<small class="text-muted">In Stock</small>
</div>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-6.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">Mechanical Keyboard RGB</p>
<small>ID: #665544</small>
</div>
<div class="d-flex flex-column gap-0 align-items-center">
<span class="fw-semibold text-primary">02</span>
<small class="text-muted">In Stock</small>
</div>
</li>
</ul>
</div>
</div>
<!-- CARD 3 — Recent Sales -->
<div class="col-lg-4">
<div class="card h-100">
<div class="card-header bg-white d-flex justify-content-between align-items-center px-4 py-3">
<h4 class="mb-0 h5">Recent Sales</h4>
<button class="btn btn-sm btn-outline-secondary">
<i class="ti ti-calendar-event"></i> Weekly
</button>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-7.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">MacBook Pro 16"</p>
<div class="d-flex align-items-center gap-2 text-muted">
<small class="fw-semibold">Computers </small>
<small>•</small>
<small>2,$2,499</small>
</div>
</div>
<span class="badge bg-success-subtle text-success">Completed</span>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-9.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">AirPods Pro Max</p>
<div class="d-flex align-items-center gap-2 text-muted">
<small class="fw-semibold">Audio </small>
<small>•</small>
<small>$549</small>
</div>
</div>
<span class="badge bg-primary-subtle text-primary">Processing</span>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-8.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">iPad Air 11"</p>
<div class="d-flex align-items-center gap-2 text-muted">
<small class="fw-semibold">Tablets </small>
<small>•</small>
<small>$799</small>
</div>
</div>
<span class="badge bg-success-subtle text-success">Completed</span>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-3.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">Apple Watch Ultra</p>
<div class="d-flex align-items-center gap-2 text-muted">
<small class="fw-semibold">Wearables </small>
<small>•</small>
<small>$799</small>
</div>
</div>
<span class="badge bg-warning-subtle text-warning">Pending</span>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<img src="./assets/images/product-6.png" class="rounded" width="48">
<div class="flex-grow-1">
<p class="mb-1">Magic Keyboard</p>
<div class="d-flex align-items-center gap-2 text-muted">
<small class="fw-semibold">Accessories </small>
<small>•</small>
<small>$299</small>
</div>
</div>
<span class="badge bg-danger-subtle text-danger">Cancelled</span>
</li>
</ul>
</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>
+434
View File
@@ -0,0 +1,434 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Inventory - 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="d-flex justify-content-between align-items-center mb-5">
<div class="">
<h1 class="fs-3 mb-1">Inventory</h1>
<p class="mb-0">Manage your product inventory</p>
</div>
<div>
<a href="create-product.html" class="btn btn-primary">Add Product</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div>
<div class="d-flex gap-2 mb-3 flex-wrap justify-content-between">
<input type="text" class="form-control" placeholder="Search products..." style="max-width: 250px;">
<div class="d-flex gap-2">
<button class="btn btn-outline-secondary">
<i class="ti ti-filter"></i> Filter
</button>
<button class="btn btn-outline-secondary">
<i class="ti ti-file-excel"></i> Excel
</button>
<button class="btn btn-outline-secondary">
<i class="ti ti-file-pdf"></i> PDF
</button>
</div>
</div>
</div>
<div class="card table-responsive ">
<table class="table mb-0 text-nowrap table-hover">
<thead class="table-light border-light">
<tr>
<th>Image</th>
<th>Code</th>
<th>Category</th>
<th>Brand</th>
<th>Price</th>
<th>Unit</th>
<th>Quantity</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="align-middle ">
<td><a href=""><img src="./assets/images/product-1.png" alt="" class="avatar avatar-md rounded" /><span class="ms-3">Gaming Joy Stick</span></a>
</td>
<td>PRD001</td>
<td>Electronics</td>
<td>Brand Name</td>
<td>$99.99</td>
<td>pcs</td>
<td>150</td>
<td class="">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr class="align-middle">
<td><a href=""><img src="./assets/images/product-2.png" alt="" class="avatar avatar-md rounded" /><span class="ms-3">Wireless Earphones</span></a>
</td>
<td>PRD002</td>
<td>Electronics</td>
<td>Tech Pro</td>
<td>$89.99</td>
<td>pcs</td>
<td>320</td>
<td class="">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr class="align-middle">
<td><a href=""><img src="./assets/images/product-3.png" alt="" class="avatar avatar-md rounded" /><span class="ms-3">Smart Watch Pro</span></a>
</td>
<td>PRD003</td>
<td>Electronics</td>
<td>Tech Pro</td>
<td>$98.00</td>
<td>pcs</td>
<td>200</td>
<td class="">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr class="align-middle">
<td><a href=""><img src="./assets/images/product-4.png" alt="" class="avatar avatar-md rounded" /><span class="ms-3">USB-C Fast Charger</span></a>
</td>
<td>PRD004</td>
<td>Electronics</td>
<td>Tech Pro</td>
<td>$86.00</td>
<td>pcs</td>
<td>80</td>
<td class="">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr class="align-middle">
<td><a href=""><img src="./assets/images/product-5.png" alt="" class="avatar avatar-md rounded" /><span class="ms-3">Portable Bluetooth Speaker</span></a>
</td>
<td>PRD005</td>
<td>Electronics</td>
<td>Tech Pro</td>
<td>$32.00</td>
<td>pcs</td>
<td>110</td>
<td class="">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr class="align-middle">
<td><a href=""><img src="./assets/images/product-6.png" alt="" class="avatar avatar-md rounded" /><span class="ms-3">Magic Keyboard</span></a>
</td>
<td>PRD006</td>
<td>Electronics</td>
<td>Tech Pro</td>
<td>$49.00</td>
<td>pcs</td>
<td>10</td>
<td class="">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr class="align-middle">
<td><a href=""><img src="./assets/images/product-7.png" alt="" class="avatar avatar-md rounded" /><span class="ms-3">MacBook Pro 16"</span></a>
</td>
<td>PRD007</td>
<td>Electronics</td>
<td>Tech Pro</td>
<td>$99.00</td>
<td>pcs</td>
<td>10</td>
<td class="">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr class="align-middle">
<td><a href=""><img src="./assets/images/product-8.png" alt="" class="avatar avatar-md rounded" /><span class="ms-3">Wireless Earphones</span></a>
</td>
<td>PRD008</td>
<td>Electronics</td>
<td>Tech Pro</td>
<td>$109.00</td>
<td>pcs</td>
<td>200</td>
<td class="">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
</tbody>
<tfoot class="">
<tr>
<td class="border-bottom-0">Showing product per page</td>
<td colspan="9" class="border-bottom-0">
<nav aria-label="Page navigation" class="d-flex justify-content-end">
<ul class="pagination mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</td>
</tr>
</tfoot>
</table>
</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>
<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>
+231
View File
@@ -0,0 +1,231 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Invoice - 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="text-center mb-5 h-100 d-flex flex-column justify-content-center align-items-center">
<div>
<h1 class=" mb-1">Coming Soon
</h1>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Bootstrap JS -->
<script src="./assets/js/main.js" type="module"></script>
</body>
</html>
+388
View File
@@ -0,0 +1,388 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Low Stock Products - 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 justify-content-between align-items-center">
<h1 class="fs-3 mb-0">Low Stock Products
</h1>
<a href="#!" class="btn btn-primary">
<span><i class="ti ti-plus"></i></span>
<span>Restock All</span></a>
</div>
</div>
</div>
<div class="row mb-5 g-5">
<div class="col-lg-4 col-12">
<div class="card border border-warning border-opacity-25">
<div class="card-body p-5">
<div class="d-flex justify-content-between align-items-center">
<span>Total Low Stock</span>
<span>
<i class="ti ti-alert-triangle fs-3 text-warning"></i>
</span>
</div>
<div class="d-flex flex-column mt-3">
<span class="fs-3 fw-bold mb-0 d-block text-warning">6</span>
<small class="text-muted">
Products need attention</small>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="card border border-danger border-opacity-25">
<div class="card-body p-5">
<div class="d-flex justify-content-between align-items-center">
<span>Critical Level</span>
<span>
<i class="ti ti-activity-heartbeat fs-3 text-danger"></i>
</span>
</div>
<div class="d-flex flex-column mt-3">
<span class="fs-3 fw-bold mb-0 d-block text-danger">3</span>
<small class="text-muted">
Immediate restock needed</small>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="card border border-success border-opacity-25">
<div class="card-body p-5">
<div class="d-flex justify-content-between align-items-center">
<span>Warning Level</span>
<span>
<i class="ti ti-box-seam fs-3 text-success"></i>
</span>
</div>
<div class="d-flex flex-column mt-3">
<span class="fs-3 fw-bold mb-0 d-block text-success">3</span>
<small class="text-muted">
Restock soon</small>
</div>
</div>
</div>
</div>
</div>
<div class="row g-5">
<div class="col-12">
<div class="card">
<div class="card-body p-5">
<h2 class="mb-4 fs-5">Low Stock Items</h2>
<div class="table-responsive">
<table class="table table-hover mb-0 table-centered">
<thead class="table-light">
<tr>
<th>Product</th>
<th>SKU</th>
<th>Current Stock</th>
<th>Min Stock</th>
<th>Warehouse</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr><td class="py-3">Product A</td>
<td class="py-3 text-secondary">SKU-001</td>
<td class="py-3 text-danger">5</td>
<td class="py-3">20</td>
<td class="py-3">Main Warehouse</td>
<td class="py-3"><span class="badge bg-danger rounded-pill">Critical</span></td>
<td class="py-3"><a href="#!" class="btn btn-sm btn-secondary">Restock</a></td></tr>
</td></tr>
<tr><td class="py-3">Product B</td>
<td class="py-3 text-secondary">SKU-002</td>
<td class="py-3 text-warning">12</td>
<td class="py-3">25</td>
<td class="py-3">Main Warehouse</td>
<td class="py-3"><span class="badge bg-secondary bg-opacity-10 text-dark rounded-pill">Warning</span></td>
<td class="py-3"><a href="#!" class="btn btn-sm btn-secondary">Restock</a></td></tr>
</td></tr>
<tr><td class="py-3">Product C</td>
<td class="py-3 text-secondary">SKU-003</td>
<td class="py-3 text-danger">3</td>
<td class="py-3">15</td>
<td class="py-3">Secondary Warehouse</td>
<td class="py-3"><span class="badge bg-danger rounded-pill">Critical</span></td>
<td class="py-3"><a href="#!" class="btn btn-sm btn-secondary">Restock</a></td></tr>
</td></tr>
<tr><td class="py-3">Product D</td>
<td class="py-3 text-secondary">SKU-004</td>
<td class="py-3 text-warning">18</td>
<td class="py-3">30</td>
<td class="py-3">Main Warehouse</td>
<td class="py-3"><span class="badge bg-secondary bg-opacity-10 text-dark rounded-pill">Warning</span></td>
<td class="py-3"><a href="#!" class="btn btn-sm btn-secondary">Restock</a></td></tr>
</td></tr>
<tr><td class="py-3">Product E</td>
<td class="py-3 text-secondary">SKU-005</td>
<td class="py-3 text-danger">2</td>
<td class="py-3">10</td>
<td class="py-3">Secondary Warehouse</td>
<td class="py-3"><span class="badge bg-danger rounded-pill">Critical</span></td>
<td class="py-3"><a href="#!" class="btn btn-sm btn-secondary">Restock</a></td></tr>
</td>
</tr>
<tr><td class="py-3">Product F</td>
<td class="py-3 text-secondary">SKU-006</td>
<td class="py-3 text-warning">8</td>
<td class="py-3">20</td>
<td class="py-3">Main Warehouse</td>
<td class="py-3"><span class="badge bg-secondary bg-opacity-10 text-dark rounded-pill">Warning</span></td>
<td class="py-3"><a href="#!" class="btn btn-sm btn-secondary">Restock</a></td></tr>
</td>
</tr>
<!-- Table rows will be dynamically populated here -->
</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>
+380
View File
@@ -0,0 +1,380 @@
<!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>
+501
View File
@@ -0,0 +1,501 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Order List - 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 List
</h1>
<p class="mb-0">Manage and track all customer orders</p>
</div>
<div>
<a href="#!" class="btn btn-secondary">Add Order</a>
</div>
</div>
</div>
</div>
<div class="row mb-5 g-5">
<div class="col-lg-3 col-md-6 col-12">
<div class="card">
<div class="card-body p-5">
<div class="d-flex align-items-center gap-2">
<div class="icon-shape icon-md bg-primary bg-opacity-10 rounded-circle text-primary me-3">
<i class="ti ti-shopping-cart fs-4"></i>
</div>
<div>
<h2 class="mb-0 fs-3 fw-bold">1,250</h2>
<p class="mb-0 text-muted">Total Orders</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12">
<div class="card">
<div class="card-body p-5">
<div class="d-flex align-items-center gap-2">
<div class="icon-shape icon-md bg-primary bg-opacity-10 rounded-circle text-primary me-3">
<i class="ti ti-clock fs-4"></i>
</div>
<div>
<h2 class="mb-0 fs-3 fw-semibold">50</h2>
<p class="mb-0 text-muted">Pending Orders</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12">
<div class="card">
<div class="card-body p-5">
<div class="d-flex align-items-center gap-2">
<div class="icon-shape icon-md bg-primary bg-opacity-10 rounded-circle text-primary me-3">
<i class="ti ti-circle-check fs-4"></i>
</div>
<div>
<h2 class="mb-0 fs-3 fw-semibold">600</h2>
<p class="mb-0 text-muted">Delivered</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12">
<div class="card">
<div class="card-body p-5">
<div class="d-flex align-items-center gap-2">
<div class="icon-shape icon-md bg-primary bg-opacity-10 rounded-circle text-primary me-3">
<i class="ti ti-file-dollar fs-4"></i>
</div>
<div>
<h2 class="mb-0 fs-3 fw-semibold">$993.84
</h2>
<p class="mb-0 text-muted">Total Revenue</p>
</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 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="Pending">Pending</option>
<option value="Processing">Processing</option>
<option value="Shipped">Shipped</option>
<option value="Delivered">Delivered</option>
<option value="Cancelled">Cancelled</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="">
<div class="table-responsive">
<table class="table mb-0 text-nowrap table-hover table-centered">
<thead class="table-light">
<tr>
<th class="py-3">Order #</th>
<th class="py-3">Customer</th>
<th class="py-3">Date</th>
<th class="py-3">Items</th>
<th class="py-3">Status</th>
<th class="py-3">Payment</th>
<th class="py-3">Total</th>
<th class="py-3">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-3">ORD-001</td>
<td class="py-3">
<div class="small d-flex flex-column">
<span>John Smith</span>
<span>john@example.com</span>
</div>
</td>
<td class="py-3">2024-01-15</td>
<td class="py-3">
2 items
</td>
<td class="py-3"><span class="badge bg-success">Delivered</span></td>
<td class="py-3"><span class="badge bg-success">Paid</span></td>
<td>$98.95</td>
<td class="py-3">
<a href="order-details.html" class="btn btn-light btn-sm">View</a>
</td>
</tr>
<tr>
<td class="py-3">ORD-002</td>
<td class="py-3">
<div class="small d-flex flex-column">
<span>Jane Doe</span>
<span>jane@example.com</span>
</div>
</td>
<td class="py-3">2024-01-16</td>
<td class="py-3">
2 item
</td>
<td class="py-3"><span class="badge bg-info">Shipped</span></td>
<td class="py-3"><span class="badge bg-success">Paid</span></td>
<td>$129.00</td>
<td class="py-3">
<a href="order-details.html" class="btn btn-light btn-sm">View</a>
</td>
</tr>
<tr>
<td class="py-3">ORD-003</td>
<td class="py-3">
<div class="small d-flex flex-column">
<span>Mike Wilson</span>
<span>mike@example.com</span>
</div>
</td>
<td class="py-3">2024-01-13</td>
<td class="py-3">
1 item
</td>
<td class="py-3"><span class="badge bg-secondary bg-opacity-10 text-dark">Processing</span></td>
<td class="py-3"><span class="badge bg-success">Paid</span></td>
<td>$599.98</td>
<td class="py-3">
<a href="order-details.html" class="btn btn-light btn-sm">View</a>
</td>
</tr>
<tr>
<td class="py-3">ORD-004</td>
<td class="py-3">
<div class="small d-flex flex-column">
<span>Emily Brown</span>
<span>emily@example.com</span>
</div>
</td>
<td class="py-3">2024-01-12</td>
<td class="py-3">
2 item
</td>
<td class="py-3"><span class="badge bg-warning">Pending</span></td>
<td class="py-3"><span class="badge bg-warning">Pending</span></td>
<td>$169.95</td>
<td class="py-3">
<a href="order-details.html" class="btn btn-light btn-sm">View</a>
</td>
</tr>
<tr>
<td class="py-3">ORD-005</td>
<td class="py-3">
<div class="small d-flex flex-column">
<span>David Lee</span>
<span>david@example.com</span>
</div>
</td>
<td class="py-3">2024-01-11</td>
<td class="py-3">
1 item
</td>
<td class="py-3"><span class="badge bg-danger">Cancelled</span></td>
<td class="py-3"><span class="badge bg-secondary bg-opacity-10 text-dark">Refunded</span></td>
<td>$159.98</td>
<td class="py-3">
<a href="order-details.html" class="btn btn-light btn-sm">View</a>
</td>
</tr>
<tr>
<td class="py-3">ORD-006</td>
<td class="py-3">
<div class="small d-flex flex-column">
<span>Lisa Anderson</span>
<span>lisa@example.com</span>
</div>
</td>
<td class="py-3">2024-01-10</td>
<td class="py-3">
2 item
</td>
<td class="py-3"><span class="badge bg-success">Delivered</span></td>
<td class="py-3"><span class="badge bg-success">Paid</span></td>
<td>$164.93</td>
<td class="py-3">
<a href="order-details.html" class="btn btn-light btn-sm">View</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>
Executable
+231
View File
@@ -0,0 +1,231 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Point of Sale - 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="text-center mb-5 h-100 d-flex flex-column justify-content-center align-items-center">
<div>
<h1 class=" mb-1">Coming Soon
</h1>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Bootstrap JS -->
<script src="./assets/js/main.js" type="module"></script>
</body>
</html>
+475
View File
@@ -0,0 +1,475 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Product Brands - 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="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
<div class="">
<h1 class="fs-3 mb-1">Brands / Manufacturers</h1>
<p class="mb-0">Manage product brands and manufacturers</p>
</div>
<div>
<a href="#!" class="btn btn-primary">
<span class="me-1"><i class="ti ti-plus"></i></span>
<span>Add Brand</span></a>
</div>
</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-6">
<div class="d-flex align-items-start gap-3 justify-content-between">
<div class="">
<span>Total Brands</span>
<h2 class="fw-bold mb-0" >7</h2>
</div>
<div class="icon-shape icon-lg bg-secondary bg-opacity-10 text-secondary rounded-circle">
<i class="ti ti-building fs-4 "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="card-body p-6">
<div class="d-flex align-items-start gap-3 justify-content-between">
<div class="">
<span>Active</span>
<h2 class="fw-bold mb-0" >6</h2>
</div>
<div class="icon-shape icon-lg bg-secondary bg-opacity-10 text-secondary rounded-circle">
<i class="ti ti-check fs-4 "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="card-body p-6">
<div class="d-flex align-items-start gap-3 justify-content-between">
<div class="">
<span>Inactive</span>
<h2 class="fw-bold mb-0" >1</h2>
</div>
<div class="icon-shape icon-lg bg-secondary bg-opacity-10 text-secondary rounded-circle">
<i class="ti ti-x fs-4 "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="card-body p-6">
<div class="d-flex align-items-start gap-3 justify-content-between">
<div class="">
<span>Total Products</span>
<h2 class="fw-bold mb-0" >450</h2>
</div>
<div class="icon-shape icon-lg bg-secondary bg-opacity-10 text-secondary rounded-circle">
<i class="ti ti-box-seam fs-4 "></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card overflow-hidden">
<div class="card-body p-6">
<div
class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center gap-3 mb-5">
<div>
<h3 class="mb-1 fs-4">Brands List</h3>
<p class="mb-0">List of all product brands</p>
</div>
<div>
<input type="search" class="form-control" placeholder="Search Brands....">
</div>
</div>
<div class="table-responsive">
<table class="table mb-0 text-nowrap table-hover table-centered">
<thead class="table-light border-light">
<tr>
<th>Brand</th>
<th>Description</th>
<th>Website</th>
<th>Products</th>
<th>Status</th>
<th>Actions</th>
</tr>
<tbody>
<tr>
<td class="py-3">Apple</td>
<td class="py-3">Premium electronics and devices</td>
<td class="py-3">apple.com</td>
<td class="py-3">85</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Lenovo</td>
<td class="py-3">Computers and laptops</td>
<td class="py-3">lenovo.com</td>
<td class="py-3">62</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Samsung</td>
<td class="py-3">Electronics and appliances</td>
<td class="py-3">samsung.com</td>
<td class="py-3">120</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Dell</td>
<td class="py-3">Computer technology company</td>
<td class="py-3">dell.com</td>
<td class="py-3">45</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">HP</td>
<td class="py-3">Computing and printing</td>
<td class="py-3">hp.com</td>
<td class="py-3">58</td>
<td class="py-3"><span class="badge bg-secondary">Inactive</span></td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Sony</td>
<td class="py-3">Entertainment and electronics</td>
<td class="py-3">sony.com</td>
<td class="py-3">38</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">LG</td>
<td class="py-3">Electronics and home appliances</td>
<td class="py-3">lg.com</td>
<td class="py-3">42</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
</tbody>
<tfoot class="">
<tr>
<td class="border-top">Showing product per page</td>
<td colspan="9" class="border-top">
<nav aria-label="Page navigation" class="d-flex justify-content-end">
<ul class="pagination mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</td>
</tr>
</tfoot>
</table>
</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>
<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>
</main>
<!-- Bootstrap JS -->
<script src="./assets/js/main.js" type="module"></script>
</body>
</html>
+446
View File
@@ -0,0 +1,446 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Product Categories - 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="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
<div class="">
<h1 class="fs-3 mb-1">Product Categories</h1>
<p class="mb-0">Manage your product categories</p>
</div>
<div>
<a href="#!" class="btn btn-primary">
<span class="me-1"><i class="ti ti-plus"></i></span>
<span>Add Categories</span></a>
</div>
</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-6">
<div class="d-flex align-items-start gap-3">
<div class="icon-shape icon-lg bg-primary bg-opacity-10 text-primary rounded-2">
<i class="ti ti-category fs-4 "></i>
</div>
<div class="">
<span>Total Categories</span>
<h2 class="fw-bold mb-0" >6</h2>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="card-body p-6">
<div class="d-flex align-items-start gap-3">
<div class="icon-shape icon-lg bg-info bg-opacity-10 text-info rounded-2">
<i class="ti ti-check fs-4 "></i>
</div>
<div class="">
<span>Active</span>
<h2 class="fw-bold mb-0" >5</h2>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="card-body p-6">
<div class="d-flex align-items-start gap-3">
<div class="icon-shape icon-lg bg-warning bg-opacity-10 text-warning rounded-2">
<i class="ti ti-x fs-4 "></i>
</div>
<div class="">
<span>Inactive</span>
<h2 class="fw-bold mb-0" >1</h2>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="card-body p-6">
<div class="d-flex align-items-start gap-3">
<div class="icon-shape icon-lg bg-warning bg-opacity-10 text-warning rounded-2">
<i class="ti ti-box-seam fs-4 "></i>
</div>
<div class="">
<span>Total Products</span>
<h2 class="fw-bold mb-0" >356</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card overflow-hidden">
<div class="card-body p-6">
<div
class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center gap-3 mb-5">
<div>
<h3 class="mb-1 fs-4">Product Categories</h3>
<p class="mb-0">List of all product categories</p>
</div>
<div>
<input type="search" class="form-control" placeholder="Search Categories....">
</div>
</div>
<div class="table-responsive">
<table class="table mb-0 text-nowrap table-hover table-centered">
<thead class="table-light border-light">
<tr>
<th>Category</th>
<th>Slug</th>
<th>Description</th>
<th>Products</th>
<th>Status</th>
<th>Created</th>
<th>Actions</th>
</tr>
<tbody>
<tr>
<td class="py-3">Laptop</td>
<td class="py-3">laptop</td>
<td class="py-3">All types of laptops</td>
<td class="py-3">45</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3">2024-01-10</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Desktop</td>
<td class="py-3">desktop</td>
<td class="py-3">Desktop computers and workstations</td>
<td class="py-3">32</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3">2024-01-12</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a></td>
</tr>
<tr>
<td class="py-3">Phone</td>
<td class="py-3">phone</td>
<td class="py-3">Mobile phones and smartphones</td>
<td class="py-3">78</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3">2024-01-18</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a></td>
</tr>
<tr>
<td class="py-3">Tablet</td>
<td class="py-3">tablet</td>
<td class="py-3">Tablets and mobile devices</td>
<td class="py-3">25</td>
<td class="py-3"><span class="badge bg-secondary">Inactive</span></td>
<td class="py-3">2024-01-18</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a></td>
</tr>
<tr>
<td class="py-3">Audio</td>
<td class="py-3">audio</td>
<td class="py-3">Headphones, speakers, and audio equipment</td>
<td class="py-3">56</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3">2024-01-18</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a></td>
</tr>
</tbody>
<tfoot class="">
<tr>
<td class="border-bottom-0">Showing product per page</td>
<td colspan="9" class="border-bottom-0">
<nav aria-label="Page navigation" class="d-flex justify-content-end">
<ul class="pagination mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</td>
</tr>
</tfoot>
</table>
</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>
<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>
</main>
<!-- Bootstrap JS -->
<script src="./assets/js/main.js" type="module"></script>
</body>
</html>
+492
View File
@@ -0,0 +1,492 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Product 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="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
<div class="">
<h1 class="fs-3 mb-1">Lenovo 3rd Generation</h1>
<p class="mb-0">SKU: PT001</p>
</div>
<div>
<a href="#!" class="btn btn-secondary">
<span class="me-1"><i class="ti ti-edit"></i></span>
<span>Edit</span></a>
<a href="#!" class="btn btn-primary"> <span class="me-1"><i class="ti ti-trash"></i></span>
<span>Delete</span></a>
</div>
</div>
</div>
</div>
<div>
<div class="row g-5 mb-5">
<div class="col-12 col-md-3">
<div class="card">
<div class="card-body p-6">
<div class="d-flex align-items-center gap-3">
<div class="icon-shape icon-lg bg-info-subtle text-info-emphasis rounded-2">
<i class="ti ti-box-seam fs-3"></i>
</div>
<div class="d-flex flex-column gap-0">
<span class="text-muted">In Stock</span>
<span class="fs-4 fw-semibold">100</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-3">
<div class="card">
<div class="card-body p-6">
<div class="d-flex align-items-center gap-3">
<div class="icon-shape icon-lg bg-primary-subtle text-primary-emphasis rounded-2">
<i class="ti ti-file-dollar fs-3"></i>
</div>
<div class="d-flex flex-column gap-0">
<span class="text-muted">Sale Price</span>
<span class="fs-4 fw-semibold">$1500</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-3">
<div class="card">
<div class="card-body p-6">
<div class="d-flex align-items-center gap-3">
<div class="icon-shape icon-lg bg-success-subtle text-success-emphasis rounded-2">
<i class="ti ti-trending-up fs-3"></i>
</div>
<div class="d-flex flex-column gap-0">
<span class="text-muted">Total Sold</span>
<span class="fs-4 fw-semibold">45</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-3">
<div class="card">
<div class="card-body p-6">
<div class="d-flex align-items-center gap-3">
<div class="icon-shape icon-lg bg-warning-subtle text-warning-emphasis rounded-2">
<i class="ti ti-chart-histogram fs-3"></i>
</div>
<div class="d-flex flex-column gap-0">
<span class="text-muted">Revenue</span>
<span class="fs-4 fw-semibold">$67500</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-5">
<div class="col-lg-8 col-12">
<div class="card">
<div class="card-body p-6">
<h2 class="fs-4 mb-3">Product Details</h2>
<ul class="nav nav-pills mb-3 bg-light p-2 rounded-2 d-inline-flex" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-information-tab" data-bs-toggle="pill" data-bs-target="#pills-information" type="button" role="tab" aria-controls="pills-information" aria-selected="true">Information</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-variants-tab" data-bs-toggle="pill" data-bs-target="#pills-variants" type="button" role="tab" aria-controls="pills-variants" aria-selected="false">Variants</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-salesHistory-tab" data-bs-toggle="pill" data-bs-target="#pills-salesHistory" type="button" role="tab" aria-controls="pills-salesHistory" aria-selected="false">Sales History</button>
</li>
</ul>
<div class="tab-content mt-3" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-information" role="tabpanel" aria-labelledby="pills-information-tab" tabindex="0">
<div class="row">
<div class="col-12 col-md-6 mb-3">
<h5 class="mb-2 fs-6">Category</h5>
<p class="mb-0 fw-semibold">Laptop</p>
</div>
<div class="col-12 col-md-6 mb-3">
<h5 class="mb-2 fs-6">Brand</h5>
<p class="mb-0 fw-semibold">Lenovo</p>
</div>
<div class="col-12 col-md-6 mb-3">
<h5 class="mb-2 fs-6">Unit</h5>
<p class="mb-0 fw-semibold">Piece</p>
</div>
<div class="col-12 col-md-6 mb-3">
<h5 class="mb-2 fs-6">Min Quantity</h5>
<p class="mb-0 fw-semibold">10</p>
</div>
<div class="col-12 col-md-6 mb-3">
<h5 class="mb-2 fs-6">Tax</h5>
<p class="mb-0 fw-semibold">5%</p>
</div>
<div class="col-12 col-md-6 mb-3">
<h5 class="mb-2 fs-6">Discount</h5>
<p class="mb-0 fw-semibold">10%</p>
</div>
<div class="col-12 col-md-6 mb-3">
<h5 class="mb-2 fs-6">Cost Price</h5>
<p class="mb-0 fw-semibold">$1200</p>
</div>
<div class="col-12 col-md-6 mb-3">
<h5 class="mb-2 fs-6">Status</h5>
<p class="mb-0 fw-semibold">Active</p>
</div>
<div class="col-12 mb-3">
<h5 class="mb-2 fs-6">Description</h5>
<p class="mb-0">High-performance laptop with latest specifications. Features include 16GB RAM, 512GB SSD, and Intel Core i7 processor.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-variants" role="tabpanel" aria-labelledby="pills-variants-tab" tabindex="0">
<div class="d-flex justify-content-between bg-light p-3 rounded-2 mb-2">
<div class="fw-semibold">
8GB RAM
</div>
<div class="d-flex gap-2">
<span>Stock: 30</span>
<span class="fw-semibold">$1300</span>
</div>
</div>
<div class="d-flex justify-content-between bg-light p-3 rounded-2 mb-2">
<div class="fw-semibold">
16GB RAM
</div>
<div class="d-flex gap-2">
<span>Stock: 50</span>
<span class="fw-semibold">$1500</span>
</div>
</div>
<div class="d-flex justify-content-between bg-light p-3 rounded-2 mb-2">
<div class="fw-semibold">
32GB RAM
</div>
<div class="d-flex gap-2">
<span>Stock: 20</span>
<span class="fw-semibold">$1800</span>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-salesHistory" role="tabpanel" aria-labelledby="pills-salesHistory-tab" tabindex="0">
<div class="d-flex justify-content-between bg-light p-3 rounded-2 mb-2">
<div class="">
2024-03-10
</div>
<div class="d-flex gap-2">
<span>Qty: 5
</span>
<span class="fw-semibold">$7500</span>
</div>
</div>
<div class="d-flex justify-content-between bg-light p-3 rounded-2 mb-2">
<div class="">
2024-03-08
</div>
<div class="d-flex gap-2">
<span>Qty: 3</span>
<span class="fw-semibold">$4500</span>
</div>
</div>
<div class="d-flex justify-content-between bg-light p-3 rounded-2 mb-2">
<div class="">
2024-03-05
</div>
<div class="d-flex gap-2">
<span>Qty: 8</span>
<span class="fw-semibold">$12000</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="card mb-5">
<div class="card-body p-6">
<h2 class="fs-4 mb-3">Product Images</h2>
<div id="my-dropzone" class="dropzone border border-dashed rounded-3">
<div class="fallback"><input type="file" name="file" required /></div>
</div>
</div>
</div>
<div class="card mb-5">
<div class="card-body p-6">
<h2 class="fs-4 mb-3">Timeline</h2>
<div class="d-flex flex-column mb-3">
<span>Created</span>
<span class=" fw-semibold">2024-01-15</span>
</div>
<div class="d-flex flex-column mb-3">
<span>Last Updated</span>
<span class=" fw-semibold">2024-03-10</span>
</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>
<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>
+703
View File
@@ -0,0 +1,703 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Product Variants - 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="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
<div class="">
<h1 class="fs-3 mb-1">Product Variants</h1>
<p class="mb-0">Manage size, color, and other product attributes</p>
</div>
<div>
<a href="#!" class="btn btn-primary">
<span class="me-1"><i class="ti ti-plus"></i></span>
<span>Add Variant Type</span></a>
</div>
</div>
</div>
</div>
<div class="row g-5 mb-5">
<div class="col-xl-3 col-md-6 col-12">
<div class="card bg-info bg-opacity-10 border-info">
<div class="card-body p-6">
<div class="d-flex align-items-start gap-3 justify-content-between">
<div class="">
<span>Variant Types</span>
<h2 class="fw-bold mb-0">3</h2>
</div>
<div class="icon-shape icon-lg bg-info bg-opacity-10 text-info rounded-2">
<i class="ti ti-adjustments-horizontal fs-2 "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card bg-primary bg-opacity-10 border-primary">
<div class="card-body p-6">
<div class="d-flex align-items-start gap-3 justify-content-between">
<div class="">
<span>Size Options</span>
<h2 class="fw-bold mb-0">6</h2>
</div>
<div class="icon-shape icon-lg bg-primary bg-opacity-10 text-primary rounded-3">
<i class="ti ti-ruler-2 fs-2 "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card bg-success bg-opacity-10 border-success">
<div class="card-body p-6">
<div class="d-flex align-items-start gap-3 justify-content-between">
<div class="">
<span>Color Options</span>
<h2 class="fw-bold mb-0">7</h2>
</div>
<div class="icon-shape icon-lg bg-success bg-opacity-10 text-success rounded-3">
<i class="ti ti-palette fs-2 "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card bg-warning bg-opacity-10 border-warning">
<div class="card-body p-6">
<div class="d-flex align-items-start gap-3 justify-content-between">
<div class="">
<span>Other Attributes</span>
<h2 class="fw-bold mb-0">8</h2>
</div>
<div class="icon-shape icon-lg bg-warning bg-opacity-10 text-warning rounded-3">
<i class="ti ti-adjustments-share fs-2 "></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card overflow-hidden">
<div class="card-body p-6">
<div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center gap-3 mb-5">
<div>
<h3 class="mb-1 fs-4">Manage Variants</h3>
</div>
<div>
<input type="search" class="form-control" placeholder="Search Variants....">
</div>
</div>
<ul class="nav nav-pills mb-3 bg-light p-2 rounded-2 d-inline-flex overflow-y-auto flex-nowrap text-nowrap" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-sizes-tab" data-bs-toggle="pill"
data-bs-target="#pills-sizes" type="button" role="tab" aria-controls="pills-sizes"
aria-selected="true">Sizes</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-colors-tab" data-bs-toggle="pill" data-bs-target="#pills-colors"
type="button" role="tab" aria-controls="pills-colors" aria-selected="false">Colors</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-otherAttribute-tab" data-bs-toggle="pill"
data-bs-target="#pills-otherAttribute" type="button" role="tab" aria-controls="pills-otherAttribute"
aria-selected="false">Other Attributes</button>
</li>
</ul>
<div class="tab-content mt-3" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-sizes" role="tabpanel"
aria-labelledby="pills-sizes-tab" tabindex="0">
<div class="table-responsive">
<table class="table mb-0 text-nowrap table-hover table-centered">
<thead class="table-light border-light">
<tr>
<td>Size Name </td>
<td>Code</td>
<td>Products Using </td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr>
<td class="py-3">Extra Small</td>
<td class="py-3">XS</td>
<td class="py-3">14</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Small</td>
<td class="py-3">SM</td>
<td class="py-3">25</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Medium</td>
<td class="py-3">MD</td>
<td class="py-3">30</td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Large</td>
<td class="py-3">LG</td>
<td class="py-3">20</td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Extra Large</td>
<td class="py-3">XL</td>
<td class="py-3">56</td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="pills-colors" role="tabpanel" aria-labelledby="pills-colors-tab"
tabindex="0">
<div class="table-responsive">
<table class="table mb-0 text-nowrap table-hover table-centered">
<thead class="table-light border-light">
<tr>
<td>Color </td>
<td>Preview</td>
<td>Hex Code</td>
<td>Products Using </td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr>
<td class="py-3">Black</td>
<td class="py-3">
<span class="icon-shape icon-xs bg-dark rounded-circle"></span>
</td>
<td class="py-3"> #000000</td>
<td class="py-3"> 220</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">White</td>
<td class="py-3">
<span class="icon-shape icon-xs bg-white border rounded-circle"></span>
</td>
<td class="py-3">#FFFFFF</td>
<td class="py-3">185</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Red</td>
<td class="py-3">
<span class="icon-shape icon-xs bg-danger rounded-circle"></span>
</td>
<td class="py-3">#EF4444</td>
<td class="py-3">78</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Blue</td>
<td class="py-3">
<span class="icon-shape icon-xs rounded-circle" style="background-color: #3B82F6;"></span>
</td>
<td class="py-3">#3B82F6</td>
<td class="py-3">95</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Green</td>
<td class="py-3">
<span class="icon-shape icon-xs bg-success rounded-circle"></span>
</td>
<td class="py-3">#22C55E</td>
<td class="py-3">62</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Yellow</td>
<td class="py-3">
<span class="icon-shape icon-xs bg-warning rounded-circle"></span>
</td>
<td class="py-3">#EAB308</td>
<td class="py-3">45</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="pills-otherAttribute" role="tabpanel"
aria-labelledby="pills-otherAttribute-tab" tabindex="0">
<table class="table mb-0 text-nowrap table-hover table-centered">
<thead class="table-light border-light">
<tr>
<td>Type </td>
<td>Value</td>
<td>Products Using</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr>
<td class="py-3"><span
class="badge bg-light text-secondary px-3 py-2 rounded-pill">Material</span></td>
<td class="py-3">
Cotton
</td>
<td class="py-3">150</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3"><span
class="badge bg-light text-secondary px-3 py-2 rounded-pill">Material</span></td>
<td class="py-3">
Polyester
</td>
<td class="py-3"> 85</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3"><span
class="badge bg-light text-secondary px-3 py-2 rounded-pill">Material</span></td>
<td class="py-3">
Leather
</td>
<td class="py-3"> 42</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3"><span
class="badge bg-light text-secondary px-3 py-2 rounded-pill">Storage</span></td>
<td class="py-3">
128GB
</td>
<td class="py-3"> 92</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3"><span
class="badge bg-light text-secondary px-3 py-2 rounded-pill">Storage</span></td>
<td class="py-3">
256GB
</td>
<td class="py-3"> 65</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3"><span
class="badge bg-light text-secondary px-3 py-2 rounded-pill">Storage</span></td>
<td class="py-3">
512GB
</td>
<td class="py-3">48</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3"><span class="badge bg-light text-secondary px-3 py-2 rounded-pill">RAM</span>
</td>
<td class="py-3">
8GB
</td>
<td class="py-3">75</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2 fs-5"></i></a>
</td>
</tr>
<tr>
<td class="py-3"><span class="badge bg-light text-secondary px-3 py-2 rounded-pill">RAM</span>
</td>
<td class="py-3">
16GB
</td>
<td class="py-3">110</td>
<td class="py-3"><a href="#" class=""><i class="ti ti-edit fs-5"></i></a>
<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">
<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>
<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>
</main>
<!-- Bootstrap JS -->
<script src="./assets/js/main.js" type="module"></script>
</body>
</html>
+387
View File
@@ -0,0 +1,387 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Reports - 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="d-flex justify-content-between align-items-center mb-5">
<div class="">
<h1 class="fs-3 mb-1">Reports</h1>
<p class="mb-0">View your inventory analytics and reports</p>
</div>
</div>
</div>
</div>
<div class="row g-5 mb-5">
<!-- Stat cards -->
<div class="col-12 col-sm-6 col-md-3">
<div class="card h-100">
<div class="card-body p-6">
<h6 class="mb-5 ">Total Revenue</h6>
<h3 class="mb-1 fw-bold">$45,231</h3>
<p class="mb-0 text-success small"><i class="ti ti-arrow-up"> </i>12% from last month</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="card h-100">
<div class="card-body p-6">
<h6 class="mb-5 ">Products Sold</h6>
<h3 class="mb-1 fw-bold">1,234</h3>
<p class="mb-0 text-success small"><i class="ti ti-arrow-up"> </i> 8% from last month</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="card h-100">
<div class="card-body p-6">
<h6 class="mb-5 ">Low Stock Items</h6>
<h3 class="mb-1 fw-bold">23</h3>
<p class="mb-0 text-danger small"><i class="ti ti-arrow-down"> </i> 3% from last month</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="card h-100">
<div class="card-body p-6">
<h6 class="mb-5 ">Out of Stock</h6>
<h3 class="mb-1 fw-bold">5</h3>
<p class="mb-0 text-danger small"><i class="ti ti-arrow-down"> </i> 2% from last month</p>
</div>
</div>
</div>
</div>
<div class="row mb-3">
<!-- Sales Overview (full width) -->
<div class="col-12">
<div class="card">
<div class="card-body p-6">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start mb-3 gap-2">
<div>
<h2 class="mb-0 fs-5">Sales Overview</h2>
</div>
<div class="controls">
<button id="btn-random" class="btn btn-light btn-sm">Randomize Data</button>
<button id="btn-update" class="btn btn-primary btn-sm">Show This Year Only</button>
</div>
</div>
<!-- Chart placeholder: replace with canvas or chart container when integrating chart library -->
<div id="salesChart"></div>
<div class="d-flex justify-content-end">
<a href="#" class="small">View detailed report</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Top Products -->
<div class="col-12">
<div class="card">
<div class="card-body p-6">
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<h2 class="mb-0 fs-5">Top Products</h2>
</div>
</div>
<!-- Product rows -->
<div class="list-group list-group-flush">
<div class="list-group-item p-3 d-flex align-items-center">
<div class="me-3">
<img src="./assets/images/product-1.png" alt="Product A" class="rounded" style="width:48px; height:48px; object-fit:cover;">
</div>
<div class="flex-grow-1">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">Gaming Joy Stick</h6>
<small class="text-secondary">156 units sold</small>
</div>
<div class="text-end">
<strong>$3,120</strong>
</div>
</div>
</div>
</div>
<div class="list-group-item p-3 d-flex align-items-center">
<div class="me-3">
<img src="./assets/images/product-2.png" alt="Product B" class="rounded" style="width:48px; height:48px; object-fit:cover;">
</div>
<div class="flex-grow-1">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">Wireless Headphones</h6>
<small class="text-secondary">134 units sold</small>
</div>
<div class="text-end">
<strong>$2,680</strong>
</div>
</div>
</div>
</div>
<div class="list-group-item p-3 d-flex align-items-center">
<div class="me-3">
<img src="./assets/images/product-3.png" alt="Product C" class="rounded" style="width:48px; height:48px; object-fit:cover;">
</div>
<div class="flex-grow-1">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">Smartwatch</h6>
<small class="text-secondary">98 units sold</small>
</div>
<div class="text-end">
<strong>$1,960</strong>
</div>
</div>
</div>
</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>
<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>
+231
View File
@@ -0,0 +1,231 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Returns & Refunds - 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="text-center mb-5 h-100 d-flex flex-column justify-content-center align-items-center">
<div>
<h1 class=" mb-1">Coming Soon
</h1>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Bootstrap JS -->
<script src="./assets/js/main.js" type="module"></script>
</body>
</html>
+72
View File
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Signin - 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 class="container d-flex align-items-center justify-content-center min-vh-100">
<div class="card " style="max-width:420px; width:100%;">
<div class="card-body p-5">
<div class="text-center mb-3">
<a href="index.html" class="mb-5 d-inline-block"><img src="./assets/images/logo-icon.svg" alt="" width="36">
<span class=" ms-2"> <img src="./assets/images/logo.svg" alt=""></span>
</a>
<h1 class="card-title mb-5 h5">Sign in to your account</h1>
</div>
<form class="needs-validation mt-3" novalidate>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input id="email" type="email" class="form-control" placeholder="name@example.com" required autofocus>
<div class="invalid-feedback">Please enter a valid email.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label d-flex justify-content-between">
<span>Password</span>
<a href="#" class="small link-primary">Forgot Password?</a>
</label>
<input id="password" type="password" class="form-control" placeholder="Password" required minlength="6">
<div class="invalid-feedback">Please provide a password (min 6 characters).</div>
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="form-check">
<input id="remember" class="form-check-input" type="checkbox">
<label class="form-check-label small" for="remember">Remember me</label>
</div>
</div>
<button class="btn btn-primary w-100" type="submit">Sign in</button>
</form>
<div class="text-center mt-3 small text-muted">
Don't have an account? <a href="signup.html" class="link-primary">Sign up</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="./assets/js/main.js" type="module"></script>
</body>
</html>""
+79
View File
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Signup - 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 class="container d-flex align-items-center justify-content-center min-vh-100">
<div class="card " style="max-width:420px; width:100%;">
<div class="card-body p-5">
<div class="text-center mb-3">
<a href="index.html" class="mb-5 d-inline-block"><img src="./assets/images/logo-icon.svg" alt="" width="36">
<span class="ms-2"> <img src="./assets/images/logo.svg" alt=""></span>
</a>
<h1 class="card-title mb-5 h5">Create your account</h1>
</div>
<form class="needs-validation mt-3" novalidate>
<div class="mb-3">
<label for="fullName" class="form-label">Full name</label>
<input id="fullName" type="text" class="form-control" placeholder="Jane Doe" required>
<div class="invalid-feedback">Please enter your name.</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input id="email" type="email" class="form-control" placeholder="name@example.com" required>
<div class="invalid-feedback">Please enter a valid email.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input id="password" type="password" class="form-control" placeholder="Create a password" required minlength="6">
<div class="invalid-feedback">Please provide a password (min 6 characters).</div>
</div>
<div class="mb-3">
<label for="confirmPassword" class="form-label">Confirm password</label>
<input id="confirmPassword" type="password" class="form-control" placeholder="Repeat password" required
oninput="this.setCustomValidity(document.getElementById('password').value !== this.value ? 'Passwords do not match.' : '')">
<div class="invalid-feedback">Passwords must match.</div>
</div>
<div class="mb-3 form-check">
<input id="terms" class="form-check-input" type="checkbox" required>
<label class="form-check-label small" for="terms">I agree to the <a href="#" class="text-decoration-none">terms and privacy</a></label>
<div class="invalid-feedback">You must agree before continuing.</div>
</div>
<button class="btn btn-primary w-100" type="submit">Sign up</button>
</form>
<div class="text-center mt-3 small text-muted">
Already have an account? <a href="signin.html" class="link-primary">Sign in</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="./assets/js/main.js" type="module"></script>
</body>
</html>""
+540
View File
@@ -0,0 +1,540 @@
<!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>
+299
View File
@@ -0,0 +1,299 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Stock In - 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 In / Add Stock</h1>
</div>
</div>
</div>
<div class="row g">
<div class="col-lg-8 col-12">
<div class="card">
<div class="card-body p-5">
<h2 class="fs-5 mb-4">Add Stock</h2>
<form class="row gx-5">
<!-- Product Name -->
<div class="mb-3 col-lg-6">
<label for="productName" class="form-label">Product</label>
<select name="product" id="productName" class="form-select">
<option value="">Select a product</option>
<option value="productA">Product A</option>
<option value="productB">Product B</option>
<option value="productC">Product C</option>
</select>
</div>
<!-- SKU or Product Code -->
<div class="mb-3 col-lg-6">
<label for="quantity" class="form-label">Quantity</label>
<input type="number" class="form-control" id="quantity" placeholder="Enter quantity">
</div>
<!-- Warehouse -->
<div class="mb-3 col-lg-6">
<label for="warehouse" class="form-label">Warehouse</label>
<select name="warehouse" id="warehouse" class="form-select">
<option value="">Select a warehouse</option>
<option value="warehouse1">Warehouse 1</option>
<option value="warehouse2">Warehouse 2</option>
<option value="warehouse3">Warehouse 3</option>
</select>
</div>
<!-- Supplier -->
<div class="mb-3 col-lg-6">
<label for="supplier" class="form-label">Supplier</label>
<input type="text" class="form-control" id="supplier" placeholder="Enter supplier name">
</div>
<!-- Notes / Description -->
<div class="mb-3 col-lg-12">
<label for="notes" class="form-label">Notes / Description</label>
<textarea class="form-control" id="notes" rows="3" placeholder="Enter any notes"></textarea>
</div>
<!-- Submit Button -->
<div class="mb-3 col-lg-12">
<button type="submit" class="btn btn-primary">Add Stock</button>
</div>
</form>
</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>
+398
View File
@@ -0,0 +1,398 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Stock Out - 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 Out / Remove Stock</h1>
</div>
</div>
</div>
<div class="row mb-5">
<div class="col-lg-12 col-12">
<div class="card">
<div class="card-body p-5">
<h2 class="fs-5 mb-4">Remove Stock</h2>
<form class="row gx-5">
<!-- Product Name -->
<div class="mb-3 col-lg-6">
<label for="productName" class="form-label">Product</label>
<select name="product" id="productName" class="form-select">
<option value="">Select a product</option>
<option value="productA">Product A</option>
<option value="productB">Product B</option>
<option value="productC">Product C</option>
</select>
</div>
<!-- SKU or Product Code -->
<div class="mb-3 col-lg-6">
<label for="quantity" class="form-label">Quantity</label>
<input type="number" class="form-control" id="quantity" placeholder="Enter quantity">
</div>
<!-- Warehouse -->
<div class="mb-3 col-lg-6">
<label for="warehouse" class="form-label">Warehouse</label>
<select name="warehouse" id="warehouse" class="form-select">
<option value="">Select a warehouse</option>
<option value="warehouse1">Warehouse 1</option>
<option value="warehouse2">Warehouse 2</option>
<option value="warehouse3">Warehouse 3</option>
</select>
</div>
<!-- Reason -->
<div class="mb-3 col-lg-6">
<label for="reason" class="form-label">Reason</label>
<select name="reason" id="reason" class="form-select">
<option value="">Select a reason</option>
<option value="damaged">Damaged</option>
<option value="expired">Expired</option>
<option value="lost">Lost</option>
</select>
</div>
<!-- Notes / Description -->
<div class="mb-3 col-lg-12">
<label for="notes" class="form-label">Notes / Description</label>
<textarea class="form-control" id="notes" rows="3" placeholder="Enter any notes"></textarea>
</div>
<!-- Submit Button -->
<div class="mb-3 col-lg-12">
<button type="submit" class="btn btn-primary">Remove Stock</button>
</div>
</form>
</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 Removals</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-danger bg-opacity-10 text-danger rounded-2">
<i class="ti ti-trending-down"></i>
</div>
<div>
<h5 class="mb-0">Product A</h5>
<p class="mb-0 small text-secondary">Main Warehouse • Sold
</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="fs-5 text-danger">-30</span>
<span>Today, 10:30 AM</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">Secondary Warehouse • Damaged
</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="fs-5 text-danger">-15</span>
<span>Today, 9:15 AMo</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 C</h5>
<p class="mb-0 small text-secondary">Main Warehouse • Sold
</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="fs-5 text-danger">-50</span>
<span>Yesterday, 4:00 PM</span>
</div>
</div>
<div class=" d-flex justify-content-between align-items-center 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">Main Warehouse • Expired
</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<span class="fs-5 text-danger">-10</span>
<span>Yesterday, 2:30 PM</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>
+450
View File
@@ -0,0 +1,450 @@
<!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>
+622
View File
@@ -0,0 +1,622 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Warehouse Location - 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">Warehouse / Location Management
</h1>
<p class="mb-0">Manage your warehouses, storage locations, and capacity.</p>
</div>
<div>
<a href="#!" class="btn btn-secondary">Add Warehouse</a>
</div>
</div>
</div>
</div>
<div class="row mb-5 g-5">
<div class="col-12">
<div class="card ">
<div class="card-body p-0">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap ">
<div class=" p-6 flex-grow-1 d-flex justify-content-between">
<div class="d-flex flex-column">
<span class="fs-2 fw-bold mb-3 d-block">5</span>
<span class="fs-5">Total Warehouses</span>
<small class="text-info">
Across 5 locations</small>
</div>
<div class="">
<span class="text-info">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" 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-building-warehouse"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21v-13l9 -4l9 4v13" /><path d="M13 13h4v8h-10v-6h6" /><path d="M13 21v-9a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v3" /></svg>
</span>
</div>
</div>
<div class=" p-6 flex-grow-1 d-flex justify-content-between">
<div class="d-flex flex-column">
<span class="fs-2 fw-bold mb-3 d-block">41,000</span>
<span class="fs-5">Total Capacity</span>
<small class="text-warning">
Storage units available</small>
</div>
<div class="">
<span class="text-warning">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" 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-building-plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21h9" /><path d="M9 8h1" /><path d="M9 12h1" /><path d="M9 16h1" /><path d="M14 8h1" /><path d="M14 12h1" /><path d="M5 21v-16c0 -.53 .211 -1.039 .586 -1.414c.375 -.375 .884 -.586 1.414 -.586h10c.53 0 1.039 .211 1.414 .586c.375 .375 .586 .884 .586 1.414v7" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
</span>
</div>
</div>
<div class=" p-6 flex-grow-1 d-flex justify-content-between">
<div class="d-flex flex-column">
<span class="fs-2 fw-bold mb-3 d-block">25,500</span>
<span class="fs-5">Space Used</span>
<small class="text-success">
Storage units available</small>
</div>
<div class="">
<span class="text-success">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" 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-package"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
</span>
</div>
</div>
<div class="-0 p-6 flex-grow-1 d-flex justify-content-between">
<div class="d-flex flex-column">
<span class="fs-2 fw-bold mb-3 d-block">730</span>
<span class="fs-5">Total Products</span>
<small class="text-primary">
Products stored</small>
</div>
<div class="">
<span class="text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" 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-map-pin"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" /></svg>
</span>
</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 class="row gx-5">
<div class="col-lg-12">
<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>
</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">Warehouses</h2>
<p>All warehouse facilities and their current status</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">Warehouse Name</th>
<th class="py-3">Location</th>
<th class="py-3">Manager</th>
<th class="py-3">Capacity</th>
<th class="py-3">Products</th>
<th class="py-3">Status</th>
<th class="py-3">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-3">Main Warehouse</td>
<td class="py-3">123 Industrial Ave, New York, NY 10001</td>
<td class="py-3">John Smith</td>
<td class="py-3">
<div class="small d-flex justify-content-between text-muted">
<span>7,500 / 10,000</span>
<span>75%</span>
</div>
<div>
<div class="progress-stacked" style="height: 8px;">
<div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 75%" >
<div class="progress-bar bg-info"></div>
</div>
<div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
<div class="progress-bar"></div>
</div>
</div>
</div>
</td>
<td class="py-3 ps-6">245</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr>
<td class="py-3">East Distribution Center</td>
<td class="py-3">456 Commerce Blvd, Boston, MA 02101</td>
<td class="py-3">Sarah Johnson</td>
<td class="py-3">
<div class="small d-flex justify-content-between text-muted">
<span>6,200 / 8,000</span>
<span>78%</span>
</div>
<div>
<div class="progress-stacked" style="height: 8px;">
<div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 40%" >
<div class="progress-bar bg-info"></div>
</div>
<div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<div class="progress-bar"></div>
</div>
</div>
</div>
</td>
<td class="py-3 ps-6">245</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr>
<td class="py-3">West Storage Facility</td>
<td class="py-3">789 Logistics Dr, Los Angeles, CA 90001</td>
<td class="py-3">Mike Davis</td>
<td class="py-3">
<div class="small d-flex justify-content-between text-muted">
<span>4,800 / 12,000</span>
<span>48%</span>
</div>
<div>
<div class="progress-stacked" style="height: 8px;">
<div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 78%" >
<div class="progress-bar bg-info"></div>
</div>
<div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 22%">
<div class="progress-bar bg-success"></div>
</div>
</div>
</div>
</td>
<td class="py-3 ps-6">156</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr>
<td class="py-3">South Hub</td>
<td class="py-3">321 Supply St, Miami, FL 33101</td>
<td class="py-3">Emily Brown</td>
<td class="py-3">
<div class="small d-flex justify-content-between text-muted">
<span>5,800 / 6,000</span>
<span>97%</span>
</div>
<div>
<div class="progress-stacked" style="height: 8px;">
<div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 97%" >
<div class="progress-bar bg-info"></div>
</div>
<div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 3%">
<div class="progress-bar bg-primary"></div>
</div>
</div>
</div>
</td>
<td class="py-3 ps-6">98</td>
<td class="py-3"><span class="badge bg-primary">Near Capacity</span></td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Overflow Storage</td>
<td class="py-3">555 Reserve Rd, Chicago, IL 60601</td>
<td class="py-3">Tom Wilson</td>
<td class="py-3">
<div class="small d-flex justify-content-between text-muted">
<span>1,200 / 5,000</span>
<span>24%</span>
</div>
<div>
<div class="progress-stacked" style="height: 8px;">
<div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 76%" >
<div class="progress-bar bg-info"></div>
</div>
<div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 24%">
<div class="progress-bar bg-success"></div>
</div>
</div>
</div>
</td>
<td class="py-3 ps-6">42</td>
<td class="py-3"><span class="badge bg-success">Active</span></td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></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">Storage Locations</h2>
<p>Zones, aisles, and rack assignments</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">Warehouse</th>
<th class="py-3">Zone</th>
<th class="py-3">Aisle Range</th>
<th class="py-3">Rack Range</th>
<th class="py-3">Items Stored</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-3">Main Warehouse</td>
<td class="py-3">
<span class="badge bg-secondary bg-opacity-10 rounded-pill text-muted">
Zone A</span></td>
<td class="py-3">A1-A10</td>
<td class="py-3">R1-R50</td>
<td class="py-3">1,250</td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit "></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr>
<td class="py-3">Main Warehouse</td>
<td class="py-3">
<span class="badge bg-secondary bg-opacity-10 rounded-pill text-muted">
Zone B</span></td>
<td class="py-3">B1-B8</td>
<td class="py-3">R1-R40</td>
<td class="py-3">980</td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr>
<td class="py-3">East Distribution Center</td>
<td class="py-3">
<span class="badge bg-secondary bg-opacity-10 rounded-pill text-muted">
Zone 1</span></td>
<td class="py-3">1A-1F</td>
<td class="py-3">R1-R30</td>
<td class="py-3">750</td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr>
<td class="py-3">West Storage Facility</td>
<td class="py-3">
<span class="badge bg-secondary bg-opacity-10 rounded-pill text-muted">
Section North</span></td>
<td class="py-3">N1-N12</td>
<td class="py-3">R1-R60</td>
<td class="py-3">1,100</td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></a>
</td>
</tr>
<tr>
<td class="py-3">South Hub</td>
<td class="py-3">
<span class="badge bg-secondary bg-opacity-10 rounded-pill text-muted">
Primary</span></td>
<td class="py-3">P1-P6</td>
<td class="py-3">R1-R25</td>
<td class="py-3">420</td>
<td class="py-3">
<a href="#" class=""><i class="ti ti-edit"></i></a>
<a href="#" class="link-danger"><i class="ti ti-trash ms-2"></i></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>