-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex1.html
More file actions
503 lines (444 loc) · 26.4 KB
/
index1.html
File metadata and controls
503 lines (444 loc) · 26.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>BIET Store | Cloud POS</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
/* THEME: Professional Slate & Brand Blue */
:root { --bg-dark: #0f172a; --bg-panel: #1e293b; --brand: #3b82f6; --text-main: #f8fafc; --text-muted: #94a3b8; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-dark); color: var(--text-main); height: 100vh; overflow: hidden; }
/* Utility */
.glass-panel { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); }
.input-std { background: #020617; border: 1px solid #334155; color: white; padding: 10px; border-radius: 8px; outline: none; transition: 0.2s; }
.input-std:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }
/* Grids */
.layout-master { display: grid; grid-template-columns: 260px 1fr; height: 100vh; }
.layout-pos { display: grid; grid-template-columns: 1fr 400px; height: 100%; }
/* Animations */
.fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* Print */
@media print {
body * { visibility: hidden; }
#receipt-modal, #receipt-modal * { visibility: visible; }
#receipt-modal { position: absolute; left: 0; top: 0; width: 80mm; background: white; color: black; padding: 0; margin: 0; border: none; }
.no-print { display: none !important; }
}
/* Mobile */
@media (max-width: 1024px) {
.layout-master { grid-template-columns: 1fr; }
.sidebar { display: none; position: absolute; z-index: 50; height: 100%; width: 260px; background: var(--bg-panel); }
.sidebar.open { display: flex; }
.layout-pos { grid-template-columns: 1fr; }
#bill-panel { display: none; position: fixed; bottom: 0; width: 100%; height: 80vh; z-index: 40; background: var(--bg-panel); border-top: 2px solid var(--brand); }
#bill-panel.open { display: flex; }
}
</style>
</head>
<body>
<div id="view-login" class="fixed inset-0 z-50 flex items-center justify-center bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-slate-800 via-slate-950 to-black">
<div class="w-96 p-8 glass-panel rounded-2xl shadow-2xl relative border-t-4 border-blue-500">
<button onclick="document.getElementById('settings-modal').classList.remove('hidden')" class="absolute top-4 right-4 text-slate-500 hover:text-white transition"><i class="fa-solid fa-gear"></i></button>
<div class="text-center mb-8">
<div class="w-16 h-16 bg-blue-600 rounded-2xl mx-auto flex items-center justify-center text-3xl text-white shadow-lg mb-4">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<h1 class="text-2xl font-bold tracking-tight">BIET STORE</h1>
<p class="text-slate-400 text-xs uppercase tracking-widest mt-1">Cloud Retail System</p>
</div>
<form onsubmit="handleLogin(event)" class="space-y-4">
<div>
<label class="text-xs font-bold text-slate-400 uppercase ml-1">Username</label>
<input type="text" id="login-user" value="Anagha" class="input-std w-full">
</div>
<div>
<label class="text-xs font-bold text-slate-400 uppercase ml-1">Password</label>
<input type="password" id="login-pass" value="Anagha@2007" class="input-std w-full">
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 rounded-xl shadow-lg transition active:scale-95">
ACCESS SYSTEM
</button>
</form>
<div class="mt-6 text-center pt-4 border-t border-slate-700/50">
<div id="login-status" class="inline-flex items-center gap-2 text-xs text-slate-400 bg-slate-900/50 px-3 py-1 rounded-full border border-slate-700">
<span class="w-2 h-2 rounded-full bg-slate-500"></span> Offline Mode
</div>
</div>
</div>
</div>
<div id="view-app" class="layout-master hidden">
<aside id="sidebar" class="bg-slate-900 border-r border-slate-800 flex flex-col sidebar transition-all">
<div class="p-6 border-b border-slate-800 flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center font-bold text-white shadow-lg">B</div>
<div>
<h3 class="font-bold text-white text-sm">BIET Store</h3>
<p class="text-[10px] text-slate-500 uppercase tracking-wider">Campus POS</p>
</div>
</div>
<nav class="flex-1 p-4 space-y-1">
<div class="px-3 mb-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest role-admin hidden">Admin</div>
<button onclick="nav('dashboard')" id="nav-dashboard" class="role-admin hidden w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white transition">
<i class="fa-solid fa-chart-pie w-5 text-center"></i> Dashboard
</button>
<button onclick="nav('inventory')" id="nav-inventory" class="role-admin hidden w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white transition">
<i class="fa-solid fa-boxes-stacked w-5 text-center"></i> Database
</button>
<div class="px-3 mt-6 mb-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest">Operation</div>
<button onclick="nav('pos')" id="nav-pos" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg bg-blue-600 text-white shadow-lg shadow-blue-900/50">
<i class="fa-solid fa-cash-register w-5 text-center"></i> Terminal
</button>
</nav>
<div class="p-4 border-t border-slate-800 bg-slate-950/30">
<div class="flex items-center gap-3 mb-3">
<div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold border border-slate-600 text-blue-400">ID</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-bold text-white truncate" id="display-name">User</p>
<p class="text-[10px] text-slate-500 truncate uppercase" id="display-role">Role</p>
</div>
</div>
<button onclick="location.reload()" class="w-full py-2 text-xs font-bold text-red-400 hover:bg-red-500/10 rounded border border-red-500/20 transition">LOGOUT</button>
</div>
</aside>
<main class="bg-slate-950 flex flex-col relative overflow-hidden">
<header class="h-16 bg-slate-900 border-b border-slate-800 flex items-center justify-between px-6 shrink-0 z-20">
<div class="flex items-center gap-4">
<button class="lg:hidden text-slate-400" onclick="document.getElementById('sidebar').classList.toggle('open')"><i class="fa-solid fa-bars text-xl"></i></button>
<h2 class="font-bold text-white text-lg tracking-tight" id="page-title">POS Terminal</h2>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 bg-slate-950 border border-slate-800 px-3 py-1.5 rounded-full">
<span id="cloud-indicator" class="w-2 h-2 rounded-full bg-slate-500"></span>
<span id="cloud-text" class="text-[10px] font-bold text-slate-500 uppercase">Offline</span>
</div>
<div class="h-6 w-px bg-slate-800"></div>
<div class="text-right">
<p class="text-xs font-bold text-white font-mono" id="clock">00:00</p>
<p class="text-[10px] text-slate-500" id="date">Date</p>
</div>
</div>
</header>
<div id="view-dashboard" class="hidden p-6 overflow-y-auto h-full">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div class="glass-panel p-5 rounded-xl border-l-4 border-blue-500">
<p class="text-slate-400 text-xs font-bold uppercase">Total Revenue</p>
<h3 class="text-3xl font-black text-white mt-1">₹<span id="kpi-rev">0</span></h3>
</div>
<div class="glass-panel p-5 rounded-xl border-l-4 border-emerald-500">
<p class="text-slate-400 text-xs font-bold uppercase">Orders Today</p>
<h3 class="text-3xl font-black text-white mt-1" id="kpi-orders">0</h3>
</div>
<div class="glass-panel p-5 rounded-xl border-l-4 border-amber-500">
<p class="text-slate-400 text-xs font-bold uppercase">Cloud Syncs</p>
<h3 class="text-3xl font-black text-white mt-1" id="kpi-syncs">0</h3>
</div>
</div>
<div class="glass-panel p-6 rounded-xl mb-6">
<h3 class="font-bold text-white mb-4 text-sm">System Logs (Cloud Activity)</h3>
<div class="h-32 overflow-y-auto bg-black/30 rounded p-2 text-[10px] font-mono text-slate-400" id="sys-logs">
<div>> System Initialized...</div>
</div>
</div>
</div>
<div id="view-pos" class="h-full">
<div class="layout-pos">
<div class="flex flex-col h-full overflow-hidden border-r border-slate-800 relative">
<div class="p-4 pb-0 z-10">
<div class="flex gap-2 mb-4">
<input type="text" id="barcode-input" placeholder="Scan Barcode / Search Item..."
class="input-std flex-1 text-sm font-mono"
onkeypress="if(event.key==='Enter') manualScan()">
<button onclick="manualScan()" class="bg-blue-600 hover:bg-blue-500 text-white px-6 rounded-lg font-bold">ADD</button>
</div>
</div>
<div class="flex-1 overflow-y-auto px-4 pb-4">
<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3" id="inventory-grid"></div>
</div>
</div>
<div id="bill-panel" class="bg-slate-900 flex flex-col shadow-2xl relative z-40">
<div class="p-4 border-b border-slate-800 bg-slate-800/30 flex justify-between items-center">
<div><h3 class="font-bold text-white">Current Bill</h3><span class="text-xs text-slate-500">#<span id="inv-num">...</span></span></div>
<button onclick="clearCart()" class="text-red-400 hover:text-white text-xs font-bold"><i class="fa-solid fa-trash mr-1"></i> CLEAR</button>
</div>
<div class="flex-1 overflow-y-auto p-3 space-y-2" id="cart-list">
<div class="h-full flex flex-col items-center justify-center text-slate-600 opacity-40"><i class="fa-solid fa-basket-shopping text-4xl mb-2"></i><p class="text-sm">Scan items</p></div>
</div>
<div class="p-5 bg-slate-950 border-t border-slate-800">
<div class="flex justify-between items-end mb-4">
<span class="text-lg font-bold text-white">Total</span>
<span class="text-3xl font-mono font-black text-blue-400">₹<span id="lbl-total">0.00</span></span>
</div>
<button onclick="openCheckout()" class="w-full bg-blue-600 hover:bg-blue-500 text-white py-3 rounded-lg font-bold shadow-lg shadow-blue-900/50">CHECKOUT</button>
</div>
</div>
</div>
</div>
<div id="view-inventory" class="hidden p-6 overflow-y-auto">
<div class="glass-panel p-6 rounded-xl">
<div class="flex justify-between mb-4">
<h3 class="font-bold text-white">Database</h3>
<button onclick="openAddItem()" class="bg-green-600 text-white px-3 py-1 rounded text-xs font-bold">+ New Item</button>
</div>
<table class="w-full text-left text-slate-300 text-sm">
<thead class="bg-slate-900/50 text-[10px] uppercase font-bold text-slate-500"><tr><th class="p-3">Code</th><th class="p-3">Name</th><th class="p-3 text-right">Price</th></tr></thead>
<tbody id="db-table"></tbody>
</table>
</div>
</div>
</main>
</div>
<div id="settings-modal" class="hidden fixed inset-0 z-[60] bg-black/90 flex items-center justify-center p-4">
<div class="bg-slate-800 p-6 rounded-xl w-full max-w-lg border border-slate-700">
<h3 class="font-bold text-white text-lg mb-4">Cloud Configuration</h3>
<p class="text-xs text-slate-400 mb-2">Paste your Google Apps Script Web App URL here to enable real-time sync.</p>
<input id="cloud-url" placeholder="https://script.google.com/macros/s/..." class="input-std w-full mb-4 font-mono text-xs">
<div class="flex gap-2">
<button onclick="saveSettings()" class="bg-green-600 text-white px-4 py-2 rounded font-bold flex-1">CONNECT</button>
<button onclick="document.getElementById('settings-modal').classList.add('hidden')" class="bg-slate-700 text-white px-4 py-2 rounded font-bold">CLOSE</button>
</div>
</div>
</div>
<div id="checkout-modal" class="hidden fixed inset-0 z-[60] bg-black/90 flex items-center justify-center p-4">
<div class="bg-slate-800 p-6 rounded-xl w-full max-w-md border border-slate-700">
<h3 class="font-bold text-white text-lg mb-4">Customer Details</h3>
<div class="space-y-3">
<input id="cust-name" placeholder="Customer Name" class="input-std w-full">
<input id="cust-phone" placeholder="Phone Number" class="input-std w-full">
<textarea id="cust-addr" placeholder="Address" class="input-std w-full h-20"></textarea>
</div>
<div class="flex gap-2 mt-6">
<button onclick="finalizeBill()" class="bg-blue-600 text-white px-4 py-3 rounded font-bold flex-1 shadow-lg">PRINT BILL</button>
<button onclick="document.getElementById('checkout-modal').classList.add('hidden')" class="bg-slate-700 text-white px-4 py-3 rounded font-bold">CANCEL</button>
</div>
</div>
</div>
<div id="receipt-modal" class="hidden">
<div class="p-4 text-center">
<h2 class="font-black text-xl mb-1">BIET STORE</h2>
<p class="text-xs mb-2">Campus Retail Unit, Davangere</p>
<div class="border-b border-black border-dashed my-2"></div>
<div class="text-left text-xs mb-2">
<p><b>Inv:</b> <span id="p-inv"></span></p>
<p><b>Date:</b> <span id="p-date"></span></p>
<p><b>To:</b> <span id="p-cust"></span></p>
<p><b>Addr:</b> <span id="p-addr"></span></p>
</div>
<table class="w-full text-left text-xs mb-2">
<thead class="border-b border-black"><tr><th>Item</th><th class="text-right">Qty</th><th class="text-right">Amt</th></tr></thead>
<tbody id="p-items"></tbody>
</table>
<div class="border-b border-black border-dashed my-2"></div>
<div class="flex justify-between font-bold text-lg"><span>TOTAL</span><span>₹<span id="p-total"></span></span></div>
<p class="text-[10px] mt-4">*** THANK YOU ***</p>
<div class="no-print mt-4 flex gap-2">
<button onclick="window.print()" class="bg-black text-white px-4 py-2 w-full font-bold">PRINT</button>
<button onclick="document.getElementById('receipt-modal').classList.add('hidden')" class="bg-gray-300 px-4 py-2 w-full font-bold">CLOSE</button>
</div>
</div>
</div>
<script>
// --- DATA STORE ---
const initialData = {
products: [
{ barcode: "101", name: "Classmate Notebook", price: 65, stock: 100 },
{ barcode: "102", name: "Blue Pen (Pack)", price: 50, stock: 50 },
{ barcode: "103", name: "Engineering Record", price: 120, stock: 30 },
{ barcode: "104", name: "Lays Chips", price: 20, stock: 200 },
{ barcode: "105", name: "Coca Cola", price: 40, stock: 80 },
{ barcode: "106", name: "College Bag", price: 450, stock: 15 },
{ barcode: "107", name: "Scientific Calc", price: 950, stock: 10 },
{ barcode: "108", name: "Water Bottle", price: 85, stock: 40 }
],
users: [
{ username: "Anagha", password: "Anagha@2007", role: "admin", name: "Anagha Admin" },
{ username: "staff", password: "staff@123", role: "cashier", name: "Staff User" }
],
sales: []
};
let db = JSON.parse(localStorage.getItem('biet_db')) || initialData;
let cart = [];
let currentUser = null;
let api_url = localStorage.getItem('biet_api_url') || "";
// --- STARTUP ---
window.onload = () => {
document.getElementById('inv-num').innerText = Date.now().toString().slice(-6);
updateTime();
setInterval(updateTime, 1000);
document.getElementById('cloud-url').value = api_url;
checkCloud(); // Try connecting
};
// --- AUTH ---
function handleLogin(e) {
e.preventDefault();
const u = document.getElementById('login-user').value.trim();
const p = document.getElementById('login-pass').value.trim();
const user = db.users.find(x => x.username === u && x.password === p);
if(user) {
currentUser = user;
initUI();
document.getElementById('view-login').classList.add('hidden');
document.getElementById('view-app').classList.remove('hidden');
document.getElementById('view-app').classList.add('layout-master');
log(`User ${user.username} logged in.`);
} else {
alert("Invalid Credentials");
}
}
function initUI() {
document.getElementById('display-name').innerText = currentUser.name;
document.getElementById('display-role').innerText = currentUser.role;
if(currentUser.role === 'admin') {
document.querySelectorAll('.role-admin').forEach(e => e.classList.remove('hidden'));
initDashboard();
} else {
nav('pos');
}
renderInventory();
}
// --- CLOUD ---
function saveSettings() {
api_url = document.getElementById('cloud-url').value;
localStorage.setItem('biet_api_url', api_url);
document.getElementById('settings-modal').classList.add('hidden');
checkCloud();
}
async function checkCloud() {
const indicator = document.getElementById('cloud-indicator');
const text = document.getElementById('cloud-text');
const loginStatus = document.getElementById('login-status');
if(!api_url) return;
try {
const res = await fetch(api_url + "?action=read");
const data = await res.json();
if(data.status === "connected") {
indicator.className = "w-2 h-2 rounded-full bg-green-500 animate-pulse shadow-[0_0_10px_#22c55e]";
text.innerText = "CONNECTED";
text.classList.replace("text-slate-500", "text-green-500");
loginStatus.innerHTML = `<span class="w-2 h-2 rounded-full bg-green-500"></span> Cloud Online`;
log("Cloud Connection Established");
}
} catch(e) {
log("Cloud Connection Failed");
}
}
// --- POS ---
function manualScan() {
const val = document.getElementById('barcode-input').value.toLowerCase();
if(!val) return;
const p = db.products.find(x => x.barcode === val || x.name.toLowerCase().includes(val));
if(p) {
addToCart(p);
document.getElementById('barcode-input').value = "";
} else {
// Quick Add Item
if(confirm("Item not found. Create local entry?")) {
const price = prompt("Enter Price:");
const name = prompt("Enter Name:");
if(price && name) {
const newItem = { barcode: val, name, price: parseFloat(price), stock: 100 };
db.products.push(newItem);
localStorage.setItem('biet_db', JSON.stringify(db));
addToCart(newItem);
renderInventory();
}
}
}
}
function addToCart(p) {
const exist = cart.find(x => x.barcode === p.barcode);
if(exist) exist.qty++;
else cart.push({ ...p, qty: 1 });
renderCart();
}
function renderCart() {
const list = document.getElementById('cart-list');
list.innerHTML = cart.map((x, i) => `
<div class="flex justify-between items-center bg-slate-800 p-2 rounded mb-1 border border-slate-700">
<div><div class="font-bold text-sm text-white">${x.name}</div><div class="text-xs text-slate-400">${x.qty} x ₹${x.price}</div></div>
<div class="font-bold text-blue-400">₹${x.qty*x.price} <button onclick="cart.splice(${i},1);renderCart()" class="ml-2 text-red-500">x</button></div>
</div>`).join('');
const total = cart.reduce((a,b) => a + (b.qty*b.price), 0);
document.getElementById('lbl-total').innerText = (total * 1.18).toFixed(2);
}
// --- CHECKOUT ---
function openCheckout() {
if(cart.length === 0) return alert("Cart Empty");
document.getElementById('checkout-modal').classList.remove('hidden');
}
function finalizeBill() {
const name = document.getElementById('cust-name').value || "Cash Customer";
const total = document.getElementById('lbl-total').innerText;
const inv = document.getElementById('inv-num').innerText;
// Record Sale
db.sales.push({ id: inv, total: parseFloat(total) });
localStorage.setItem('biet_db', JSON.stringify(db));
// Sync Cloud
if(api_url) {
fetch(api_url, {
method: "POST",
body: JSON.stringify({ action: "sale", id: inv, customer: name, total: total, paymentMode: "CASH", items: cart })
});
log(`Sale ${inv} synced to Cloud`);
}
// Print
document.getElementById('p-inv').innerText = inv;
document.getElementById('p-date').innerText = new Date().toLocaleDateString();
document.getElementById('p-cust').innerText = name;
document.getElementById('p-addr').innerText = document.getElementById('cust-addr').value;
document.getElementById('p-items').innerHTML = cart.map(x => `<tr><td>${x.name}</td><td align="right">${x.qty}</td><td align="right">${x.qty*x.price}</td></tr>`).join('');
document.getElementById('p-total').innerText = total;
document.getElementById('checkout-modal').classList.add('hidden');
document.getElementById('receipt-modal').classList.remove('hidden');
// Update Stats
if(currentUser.role==='admin') initDashboard();
// Reset
setTimeout(() => window.print(), 500);
cart = []; renderCart();
document.getElementById('inv-num').innerText = Date.now().toString().slice(-6);
}
function closeReceipt() { document.getElementById('receipt-modal').classList.add('hidden'); }
// --- HELPERS ---
function renderInventory() {
const grid = document.getElementById('inventory-grid');
grid.innerHTML = db.products.map(p => `
<button onclick="document.getElementById('barcode-input').value='${p.barcode}';manualScan()" class="bg-slate-800 p-3 rounded hover:bg-blue-900 border border-slate-700 text-left relative overflow-hidden group">
<div class="text-[10px] text-slate-500 font-mono group-hover:text-blue-400">${p.barcode}</div>
<div class="font-bold text-white text-sm truncate">${p.name}</div>
<div class="text-blue-400 font-bold text-xs mt-1">₹${p.price}</div>
</button>`).join('');
const tbl = document.getElementById('db-table');
if(tbl) tbl.innerHTML = db.products.map(p => `<tr class="border-b border-slate-700"><td class="p-2 font-mono text-slate-400">${p.barcode}</td><td class="p-2 text-white">${p.name}</td><td class="p-2 text-right text-blue-400">${p.price}</td></tr>`).join('');
}
function nav(v) {
['dashboard','pos','inventory'].forEach(id => {
document.getElementById('view-'+id).classList.add('hidden');
document.getElementById('nav-'+id)?.classList.remove('bg-blue-600', 'text-white');
});
document.getElementById('view-'+v).classList.remove('hidden');
document.getElementById('nav-'+v)?.classList.add('bg-blue-600', 'text-white');
}
function initDashboard() {
const rev = db.sales.reduce((a,b)=>a+b.total, 0);
document.getElementById('kpi-rev').innerText = rev.toLocaleString();
document.getElementById('kpi-orders').innerText = db.sales.length;
}
function log(msg) {
const div = document.createElement('div');
div.innerText = `> ${new Date().toLocaleTimeString()} : ${msg}`;
document.getElementById('sys-logs').prepend(div);
}
function updateTime() {
const d = new Date();
document.getElementById('clock').innerText = d.toLocaleTimeString();
document.getElementById('date').innerText = d.toLocaleDateString();
}
function clearCart() { cart=[]; renderCart(); }
function logout() { location.reload(); }
</script>
</body>
</html>