init wms
@@ -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>""
|
||||
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 802 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 15 KiB |
@@ -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"}
|
||||
|
After Width: | Height: | Size: 12 KiB |
@@ -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 |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 1.3 MiB |
@@ -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();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
import "./chart.js";
|
||||
import "./sidebar.js"
|
||||
import "./dropzone.js"
|
||||
@@ -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,
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
|
||||
|
||||
// Import Bootstrap JS
|
||||
import * as bootstrap from 'bootstrap';
|
||||
import './custom.js';
|
||||
|
||||
|
||||
// Import SCSS
|
||||
import '../scss/style.scss';
|
||||
@@ -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');
|
||||
}
|
||||
});
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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";
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
@@ -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";
|
||||
@@ -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;
|
||||
@@ -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";
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>""
|
||||
@@ -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>""
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||