03/08/2026
Hardware & Warehouse ERP System
:root {
--bg-dark: ;
--panel-bg: ;
--accent: ;
--accent-hover: ;
--text-main: ;
--text-muted: ;
--border: #334155;
--danger: ;
--success: ;
}
* { box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; margin: 0; padding: 0; }
body { background-color: var(--bg-dark); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; }
/* Sidebar Navigation */
.sidebar { width: 260px; background: var(--panel-bg); border-right: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.logo { font-size: 1.3rem; font-weight: 700; color: ; text-align: center; margin-bottom: 30px; letter-spacing: 0.5px; }
.nav-list { list-style: none; }
.nav-item { padding: 12px 16px; border-radius: 8px; color: var(--text-muted); cursor: pointer; margin-bottom: 8px; font-weight: 500; display: flex; align-items: center; gap: 10px; transition: all 0.2s; }
.nav-item:hover, .nav-item.active { background: var(--accent); color: white; }
/* Main Workspace */
.main { flex: 1; padding: 30px; overflow-y: auto; background: ; }
.header-title { font-size: 1.5rem; margin-bottom: 20px; font-weight: 600; }
/* Grid Cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px; }
.card { background: var(--panel-bg); border: 1px solid var(--border); padding: 20px; border-radius: 12px; }
.card-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
.card-value { font-size: 1.8rem; font-weight: 700; margin-top: 10px; color: var(--text-main); }
/* Layout Views */
.view { display: none; }
.view.active { display: block; }
/* Forms Styling */
.form-card { background: var(--panel-bg); border: 1px solid var(--border); padding: 20px; border-radius: 12px; margin-bottom: 25px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.form-group input, .form-group select { background: ; border: 1px solid var(--border); padding: 10px 12px; border-radius: 6px; color: white; font-size: 0.95rem; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--accent); }
.btn { background: var(--accent); color: white; border: none; padding: 12px 20px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.2s; }
.btn:hover { background: var(--accent-hover); }
.btn-success { background: var(--success); }
.btn-success:hover { background: ; }
/* Tables */
.table-container { background: var(--panel-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
th { background: #182234; color: var(--text-muted); font-weight: 600; }
tr:last-child td { border-bottom: none; }
/* Badges */
.badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.badge-danger { background: rgba(239, 68, 68, 0.2); color: var(--danger); border: 1px solid var(--danger); }
.badge-success { background: rgba(34, 197, 94, 0.2); color: var(--success); border: 1px solid var(--success); }
HARDWARE ERP
📊 Dashboard
📦 Stock & Warehouse
🛒 New Sale (POS)
📄 Sales History
Local Database Active
Business Overview
Total Items in Stock0
Total Stock Worth (PKR)Rs. 0
Total Revenue GeneratedRs. 0
Low Stock Alerts0
Inventory & Warehouse Management
Product Name
Category
Location (Shop/Warehouse)
Main Shop
Warehouse A
Warehouse B
Quantity
Cost Price (Buying)
Sale Price (Selling)
Add Product to Inventory
Item Name
Category
Location
Stock Qty
Cost Price
Sale Price
Status
Point of Sale (Billing)
Select Item to Sell
Quantity to Sell
Complete Sale
Sales History
Date & Time
Item Name
Qty Sold
Total Sale Value
Profit (PKR)
// Data Structures Initialization with Storage
let db = {
products: JSON.parse(localStorage.getItem('hw_products')) || [],
sales: JSON.parse(localStorage.getItem('hw_sales_data')) || []
};
function saveDB() {
localStorage.setItem('hw_products', JSON.stringify(db.products));
localStorage.setItem('hw_sales_data', JSON.stringify(db.sales));
renderSystem();
}
function navigate(viewId, element) {
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
document.getElementById(viewId).classList.add('active');
element.classList.add('active');
}
// System Rendering & Dynamic Calculation
function renderSystem() {
// Dashboard Logic
const totalItemsCount = db.products.reduce((acc, item) => acc + Number(item.qty), 0);
const totalStockWorth = db.products.reduce((acc, item) => acc + (Number(item.qty) * Number(item.cost)), 0);
const totalRevenue = db.sales.reduce((acc, sale) => acc + Number(sale.totalPrice), 0);
const lowStockCount = db.products.filter(item => Number(item.qty) {
const statusBadge = p.qty 0) {
saleSelect.innerHTML += `${p.name} (${p.location}) - Available: ${p.qty}`;
}
});
// Render Sales History Table
const salesTbody = document.getElementById('sales-history-table');
salesTbody.innerHTML = '';
db.sales.slice().reverse().forEach(s => {
salesTbody.innerHTML += `
${s.timestamp}
${s.itemName}
${s.qty}
Rs. ${s.totalPrice.toLocaleString()}
+ Rs. ${s.profit.toLocaleString()}
`;
});
}
// Add Product Form
document.getElementById('add-product-form').addEventListener('submit', (e) => {
e.preventDefault();
const product = {
id: Date.now(),
name: document.getElementById('p-name').value,
category: document.getElementById('p-cat').value || 'General',
location: document.getElementById('p-loc').value,
qty: Number(document.getElementById('p-qty').value),
cost: Number(document.getElementById('p-cost').value),
price: Number(document.getElementById('p-price').value)
};
db.products.push(product);
saveDB();
e.target.reset();
alert('Product stock mein add ho gaya hai!');
});
// Process Sale Form
document.getElementById('sale-form').addEventListener('submit', (e) => {
e.preventDefault();
const productId = Number(document.getElementById('sale-item-id').value);
const qtyToSell = Number(document.getElementById('sale-qty').value);
const product = db.products.find(p => p.id === productId);
if (!product) {
alert('Meharbani karke product chunein!');
return;
}
if (product.qty < qtyToSell) {
alert('Stock mein itna maal majood nahi hai!');
return;
}
// Deduct Stock
product.qty -= qtyToSell;
// Calculate Sale & Profit
const totalPrice = qtyToSell * product.price;
const profit = (product.price - product.cost) * qtyToSell;
db.sales.push({
timestamp: new Date().toLocaleString(),
itemName: product.name,
qty: qtyToSell,
totalPrice: totalPrice,
profit: profit
});
saveDB();
e.target.reset();
alert('Sale kamyabi se record ho gayi hai!');
});
// Initial Load
renderSystem();
