import { h, icon, money, ymd, toast, initials } from '../ui.js'; import { api, num } from '../api.js'; import { load, loadMany, loadAll, invalidate, brand, getSetting, setSetting, markFresh, B, adjustBranchStock, writeBranch, setActiveBranch, invoicePrefix, multiBranch, branchName } from '../store.js'; import { modal, formModal, confirmBox, searchBox, uid, debounce } from '../components.js'; import { session } from '../session.js'; import { nextInvoiceNumber, fmtInv, openInvoice } from './invoice.js'; import { logActivity } from '../log.js'; const r2 = n => Math.round((n + Number.EPSILON) * 100) / 100; const WALKIN = { id: 'walk-in', name: 'Walk-in Client', phone: '', type: 'b2c', raw: {} }; const hue = s => { let x = 0; for (const c of String(s)) x = (x * 31 + c.charCodeAt(0)) % 360; return x; }; const MODES = [['Cash', 'wallet'], ['UPI', 'phone'], ['Card', 'card'], ['Split', 'share'], ['Credit', 'clock']]; export default async function pos(root, route) { if (B.active === 'all') setActiveBranch(writeBranch(), { silent: true }); // billing always happens in one branch api.licenseUsage().then(d => { const L = d.limits; if (!L || L.invoicesMonth < 0) return; const left = L.invoicesMonth - d.usage.invoicesMonth; if (left <= 0) toast('Monthly invoice limit reached. New invoices will be refused until next month or a plan upgrade.', 'err'); else if (left <= Math.max(3, Math.round(L.invoicesMonth * 0.1))) toast(left + ' invoice' + (left === 1 ? '' : 's') + ' left this month on your plan', 'warn'); }).catch(() => {}); const [items, clients, staff, mems, txs] = await loadMany('menu_items', 'clients', 'staff_profiles', 'memberships', 'transactions'); const txsAll = await loadAll('transactions'); const bd = await brand(); const promos = await getSetting('rabees_promos', []); let favs = await getSetting('rabees_pos_favs', []); let held = await getSetting('rabees_pos_held_v2', []); const taxCfg = bd.tax; const taxOn = !!(taxCfg.enabled || bd.gst); const editing = session.editing; session.editing = null; const S = { cart: [], client: null, discType: 'amount', discVal: 0, promo: null, date: ymd(new Date()), pricing: taxCfg.pricingMode || 'exclusive', q: '', tab: 'all', cat: 'all', busy: false, view: 'grid' }; // recent items (from the latest invoices) const recentIds = []; [...txs].filter(t => t.kind === 'invoice').sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0)).slice(0, 40).forEach(t => t.items.forEach(i => { const id = String(i.id); if (!recentIds.includes(id) && recentIds.length < 14) recentIds.push(id); })); if (editing) { S.client = clients.find(c => c.id === editing.clientId) || { ...WALKIN, id: editing.clientId || 'walk-in', name: editing.client }; S.cart = editing.items.map(i => ({ cartId: uid('l'), id: String(i.id), name: i.name, price: num(i.price ?? i.unitPrice), qty: num(i.qty) || 1, type: i.type || 'Product', hsn: i.hsn || '', gstRate: num(i.gstRate), staffId: i.staffId || '', disc: num(i.discount), note: i.note || '' })); S.date = editing.date; S.discVal = editing.discount || 0; S.promo = editing.promoCode || null; } else { if (route.query.client) S.client = clients.find(c => c.id === route.query.client) || null; if (route.query.appt) { const ap = (await load('appointments')).find(a => a.id === route.query.appt); if (ap) { S.client = clients.find(c => c.id === (ap.raw?.clientId || ap.raw?.client_id)) || S.client; ap.services.forEach(sv => { const it = items.find(i => i.id === String(sv.id ?? sv) || i.name === (sv.name ?? sv)); if (it) addToCart(it, true); }); } } } const cats = [...new Set(items.map(i => i.category))].sort(); function addToCart(it, silent) { if (it.type === 'Product' && !silent && !editing) { const inCart = S.cart.filter(l => l.id === it.id).reduce((a, l) => a + l.qty, 0); if (inCart >= it.stock) { toast(it.stock <= 0 ? `${it.name} is out of stock` : `Only ${it.stock} of ${it.name} in stock`, 'err'); return; } } const ex = S.cart.find(l => l.id === it.id && !l.disc && !l.note); if (ex) ex.qty++; else S.cart.push({ cartId: uid('l'), id: it.id, name: it.name, price: it.price, qty: 1, type: it.type, hsn: it.raw.hsn || (it.type === 'Service' ? '9997' : '3304'), gstRate: it.gst ?? num(taxCfg.gstRate ?? 18), staffId: '', disc: 0, note: '' }); if (!silent) { drawCart(); refreshBadges(); } } const lineGross = l => Math.max(0, l.price * l.qty - (l.disc || 0)); // ---- calculation (same engine as the classic POS, plus per-line discounts) ---- function calc() { const today = ymd(new Date()); const subtotal = S.cart.reduce((a, l) => a + lineGross(l), 0); const raw = num(S.discVal); const disc = S.discType === 'percent' ? subtotal * Math.min(100, Math.max(0, raw)) / 100 : Math.min(subtotal, Math.max(0, raw)); let promoDisc = 0; if (S.promo) { const p = promos.find(x => String(x.code).toUpperCase() === S.promo.toUpperCase()); if (p) { promoDisc = p.type === 'percent' ? subtotal * num(p.value) / 100 : num(p.value); promoDisc = Math.max(0, Math.min(promoDisc, subtotal - disc)); } } const c = S.client; let memDisc = 0, memName = ''; if (c && c.id !== 'walk-in') { const mid = c.raw.membershipId || c.raw.membership_id, exp = c.raw.membershipExpiry || c.raw.membership_expiry; const m = mems.find(x => x.id === mid); if (m && (!exp || String(exp).slice(0, 10) >= today)) { memDisc = subtotal * m.discount / 100; memName = m.name; } } const totalDisc = disc + promoDisc + memDisc, ratio = subtotal > 0 ? totalDisc / subtotal : 0; const sellerState = String(taxCfg.sellerState || '33'); const buyerState = String((c && (c.raw.stateCode || c.raw.state_code)) || (c?.raw.gst ? c.raw.gst.slice(0, 2) : '') || sellerState); const inter = !!(taxOn && c && c.id !== 'walk-in' && buyerState !== sellerState && (c.type === 'b2b' || c.raw.gst)); let taxable = 0, tax = 0, cgst = 0, sgst = 0, igst = 0; const hsn = {}; S.cart.forEach(l => { const net = Math.max(0, lineGross(l) * (1 - ratio)); let lt = net, ltax = 0; if (taxOn) { if (S.pricing === 'inclusive') { lt = net / (1 + l.gstRate / 100); ltax = net - lt; } else ltax = net * l.gstRate / 100; } taxable += lt; tax += ltax; if (inter) igst += ltax; else { cgst += ltax / 2; sgst += ltax / 2; } const k = l.hsn || '—'; hsn[k] = hsn[k] || { hsn: k, taxableAmount: 0, gstRate: l.gstRate, totalTax: 0 }; hsn[k].taxableAmount += lt; hsn[k].totalTax += ltax; }); const grand = taxOn ? (S.pricing === 'inclusive' ? Math.max(0, subtotal - totalDisc) : taxable + tax) : Math.max(0, subtotal - totalDisc); return { subtotal, lineDisc: S.cart.reduce((a, l) => a + (l.disc || 0), 0), disc, promoDisc, memDisc, memName, taxable, tax, cgst, sgst, igst, inter, grand: r2(grand), hsn: Object.values(hsn), sellerState, buyerState }; } // ---- left: item picking ---- const grid = h('div', { class: 'pos-items' }), rail = h('div', { class: 'cat-rail' }), tabsEl = h('div', { class: 'chips', style: 'flex:none' }); const visible = () => items.filter(i => (S.tab === 'all' || (S.tab === 'fav' ? favs.includes(i.id) : S.tab === 'recent' ? recentIds.includes(i.id) : i.type === S.tab)) && (S.cat === 'all' || i.category === S.cat) && (!S.q || (i.name + ' ' + i.category + ' ' + (i.raw.hsn || '') + ' ' + (i.raw.sku || '') + ' ' + (i.raw.barcode || '')).toLowerCase().includes(S.q))) .sort((a, b) => S.tab === 'recent' ? recentIds.indexOf(a.id) - recentIds.indexOf(b.id) : (favs.includes(b.id) - favs.includes(a.id)) || a.name.localeCompare(b.name)); const searchInput = h('input', { class: 'input', type: 'search', placeholder: 'Search, or scan a barcode / SKU… ( / )', 'aria-label': 'Search items', autocomplete: 'off', oninput: debounce(() => { S.q = searchInput.value.trim().toLowerCase(); drawItems(); }, 140), onkeydown: e => { if (e.key === 'Enter') { e.preventDefault(); const q = S.q; if (!q) return; const exact = items.find(i => [i.raw.barcode, i.raw.sku].some(v => v && String(v).toLowerCase() === q)); const first = exact || visible()[0]; if (first) { addToCart(first); searchInput.value = ''; S.q = ''; drawItems(); toast(`Added ${first.name}`, 'ok'); } else toast('No matching item', 'err'); } else if (e.key === 'Escape') { searchInput.value = ''; S.q = ''; drawItems(); searchInput.blur(); } } }); let shownTiles = 120, lastKey = ''; function refreshBadges() { const counts = {}; S.cart.forEach(l => counts[l.id] = (counts[l.id] || 0) + l.qty); grid.querySelectorAll('.item-tile').forEach(t => { const n = counts[t.dataset.id] || 0; let b = t.querySelector('.inc'); if (n && !b) { b = h('span', { class: 'inc' }); t.insertBefore(b, t.children[1] || null); } if (b) { if (n) b.textContent = n; else b.remove(); } }); } function drawItems() { const tabs = [['all', 'All', items.length], ['fav', '★ Favourites', favs.length], ['recent', 'Recent', recentIds.length], ['Product', 'Products'], ['Service', 'Services']]; tabsEl.replaceChildren(...tabs.map(([v, l, n]) => h('button', { class: 'chip-btn' + (S.tab === v ? ' on' : ''), onclick: () => { S.tab = v; drawItems(); } }, l, n != null ? h('em', {}, n) : null)), h('button', { class: 'chip-btn', style: 'border-style:dashed', onclick: customItem }, '+ Custom item'), h('button', { class: 'chip-btn', 'aria-label': 'Toggle list or grid view', title: 'Switch between grid and list', onclick: () => { S.view = S.view === 'grid' ? 'list' : 'grid'; drawItems(); } }, S.view === 'grid' ? '☰ List' : '▦ Grid')); grid.className = 'pos-items' + (S.view === 'list' ? ' list' : ''); rail.replaceChildren(...[['all', 'All categories', items.length], ...cats.map(c => [c, c, items.filter(i => i.category === c).length])].map(([v, l, n]) => h('button', { class: S.cat === v ? 'on' : '', onclick: () => { S.cat = v; drawItems(); } }, h('span', {}, l), h('em', {}, n)))); const key = S.q + '|' + S.tab + '|' + S.cat; if (key !== lastKey) { shownTiles = 120; lastKey = key; } const all = visible(), rows = all.slice(0, shownTiles); grid.replaceChildren(...(rows.length ? rows.map(i => { const inCart = S.cart.filter(l => l.id === i.id).reduce((a, l) => a + l.qty, 0), out = i.type === 'Product' && i.stock <= 0; return h('button', { class: 'item-tile' + (out ? ' out' : ''), 'data-id': i.id, style: `--h:${hue(i.name)}`, onclick: () => addToCart(i), title: i.name }, h('div', { class: 'thumb' }, initials(i.name)), inCart ? h('span', { class: 'inc' }, inCart) : null, h('span', { class: 'star' + (favs.includes(i.id) ? ' on' : ''), role: 'button', 'aria-label': 'Favourite', onclick: async e => { e.stopPropagation(); favs = favs.includes(i.id) ? favs.filter(x => x !== i.id) : [...favs, i.id]; drawItems(); await setSetting('rabees_pos_favs', favs).catch(() => {}); } }, favs.includes(i.id) ? '★' : '☆'), h('div', { class: 'meta' }, h('div', { class: 'tile-tags' }, h('span', { class: 'tag ' + (i.type === 'Product' ? 'prod' : 'serv') }, i.type), i.type === 'Product' ? h('span', { class: 'tag ' + (out ? 'out' : 'qty') }, 'Qty ' + i.stock) : null, taxOn ? h('span', { class: 'tag' }, (i.gst ?? num(taxCfg.gstRate ?? 18)) + '% GST') : null), h('b', {}, i.name), h('span', { class: 'muted', style: 'font-size:11px' }, i.type === 'Product' ? (out ? 'Out of stock' : i.stock + ' in stock') : ((i.raw.durationValue || i.raw.durationMin) ? (i.raw.durationValue || i.raw.durationMin) + ' ' + (i.raw.durationUnit || 'min') : 'Service')), h('span', { class: 'p num' }, money(i.price)))); }) : [h('div', { class: 'empty', style: 'grid-column:1/-1' }, items.length ? (S.tab === 'fav' ? 'Tap the ☆ on any item to pin it here' : 'No items match') : 'Add items in Inventory first')])); if (all.length > rows.length) grid.append(h('button', { class: 'btn', style: 'grid-column:1/-1;margin:6px auto', onclick: () => { shownTiles += 120; drawItems(); } }, `Show more (${all.length - rows.length} left) — or search above`)); } function customItem() { formModal({ title: 'Custom item', size: 'sm', fields: [{ name: 'name', label: 'Description', required: true }, { name: 'price', label: 'Price (₹)', type: 'number', step: '0.01', required: true }, { name: 'qty', label: 'Quantity', type: 'number', step: '1' }, { name: 'gstRate', label: 'GST %', type: 'select', options: ['0', '5', '12', '18', '28'].map(x => [x, x + '%']) }], values: { qty: 1, gstRate: String(num(taxCfg.gstRate ?? 18)) }, onSave: d => { if (!(d.price >= 0)) throw new Error('Enter a price'); S.cart.push({ cartId: uid('l'), id: uid('custom'), name: d.name, price: d.price, qty: Math.max(1, Math.round(d.qty || 1)), type: 'Service', hsn: '9997', gstRate: parseFloat(d.gstRate), staffId: '', disc: 0, note: '', custom: true }); drawCart(); } }); } const dueOf = id => txsAll.filter(t => t.kind === 'invoice' && !t.cancelled && t.clientId === id && t.credit > 0); function collectDues(c) { const list = dueOf(c.id).sort((a, b) => a.date.localeCompare(b.date)), total = list.reduce((a, t) => a + t.credit, 0); const m = formModal({ title: 'Collect dues · ' + c.name, size: 'sm', saveText: 'Record payment', values: { amount: total, mode: 'Cash' }, fields: [{ name: 'amount', label: `Amount received (total due ${money(total)})`, type: 'number', step: '0.01', required: true }, { name: 'mode', label: 'Mode', type: 'select', options: ['Cash', 'UPI', 'Card', 'Bank transfer'] }], onSave: async d => { if (!(d.amount > 0) || d.amount > total + 0.009) throw new Error('Enter an amount up to ' + money(total)); let left = d.amount; for (const t of list) { if (left <= 0.004) break; const pay = Math.min(left, t.credit); left = r2(left - pay); const rec = r2(t.received + pay), cr = r2(t.credit - pay); await api.update('transactions', t.id, { amountReceived: rec, creditAmount: cr, paymentStatus: cr > 0 ? 'Partial' : 'Paid' }); t.received = rec; t.credit = cr; } logActivity('Sales', `Collected ${money(d.amount)} dues from ${c.name}`); invalidate('transactions'); toast('Payment recorded. Oldest invoices cleared first.', 'ok'); drawCart(); } }); } // ---- clients, promo, held bills ---- function pickClient() { let q = ''; const list = h('div', { style: 'max-height:50vh;overflow:auto' }); const draw = () => { const rows = clients.filter(c => !q || (c.name + c.phone).toLowerCase().includes(q)).slice(0, 60); list.replaceChildren(h('div', { class: 'list-row', style: 'cursor:pointer', onclick: () => { S.client = null; m.close(); drawCart(); } }, h('div', { class: 'avatar' }, 'W'), h('div', {}, 'Walk-in client')), ...rows.map(c => h('div', { class: 'list-row', style: 'cursor:pointer', onclick: () => { S.client = c; m.close(); drawCart(); } }, h('div', { class: 'avatar' }, initials(c.name)), h('div', { style: 'flex:1' }, h('div', { style: 'font-weight:600' }, c.name), h('div', { class: 'muted', style: 'font-size:12px' }, c.phone)), c.type === 'b2b' ? h('span', { class: 'badge info' }, 'B2B') : null))); }; const m = modal({ title: 'Select client', size: 'sm', body: h('div', {}, searchBox('Search name or phone', v => { q = v; draw(); }), h('div', { style: 'height:10px' }), list), footer: [h('button', { class: 'btn primary', onclick: () => { m.close(); quickClient(); } }, '+ New client')] }); draw(); } function quickClient() { formModal({ title: 'New client', size: 'sm', fields: [{ name: 'name', label: 'Name', required: true }, { name: 'phone', label: 'Phone', type: 'tel' }, { name: 'type', label: 'Type', type: 'select', options: [['b2c', 'Individual'], ['b2b', 'Business']] }, { name: 'gst', label: 'GSTIN (optional)' }], onSave: async d => { const row = { ...d, id: uid('cli'), createdAt: Date.now() }; await api.save('clients', row); invalidate('clients'); const fr = await load('clients', { force: true }); clients.length = 0; clients.push(...fr); S.client = clients.find(c => c.id === row.id); drawCart(); toast('Client added', 'ok'); } }); } function applyPromo(code) { code = code.trim().toUpperCase(); if (!code) return; const today = ymd(new Date()), p = promos.find(x => String(x.code).toUpperCase() === code), sub = calc().subtotal; if (!p || String(p.status || 'active').toLowerCase() !== 'active') return toast('Invalid promo code', 'err'); if (p.expiry && p.expiry < today) return toast('This promo has expired', 'err'); if (p.startDate && p.startDate > today) return toast('This promo has not started yet', 'err'); if (p.clientId && S.client?.id !== p.clientId) return toast('This promo is for a specific client', 'err'); if (p.minBill && sub < num(p.minBill)) return toast(`Minimum bill ${money(p.minBill)} required`, 'err'); if (p.type === 'gift') { [].concat(p.rewardItem || []).forEach(id => { const it = items.find(i => i.id === String(id)); if (it && !S.cart.some(l => l.id === it.id && l.free)) S.cart.push({ cartId: uid('l'), id: it.id, name: it.name + ' (free gift)', price: 0, qty: 1, type: it.type, hsn: it.raw.hsn || '', gstRate: 0, staffId: '', disc: 0, note: 'Promo gift', free: true }); }); } S.promo = code; drawCart(); refreshBadges(); toast('Promo applied', 'ok'); } async function holdBill() { if (!S.cart.length) return toast('Nothing to hold', 'err'); held = [{ id: uid('h'), at: Date.now(), client: S.client ? { id: S.client.id } : null, cart: S.cart, discType: S.discType, discVal: S.discVal, promo: S.promo, total: calc().grand }, ...held].slice(0, 20); await setSetting('rabees_pos_held_v2', held); S.cart = []; S.promo = null; S.client = null; S.discVal = 0; drawCart(); refreshBadges(); toast('Bill held. Recall it any time.', 'ok'); } function recall() { const body = h('div'); const draw = () => body.replaceChildren(...(held.length ? held.map(b => h('div', { class: 'list-row' }, h('div', { style: 'flex:1' }, h('b', {}, ((clients.find(c => c.id === b.client?.id) || WALKIN).name)), h('div', { class: 'muted', style: 'font-size:12px' }, `${b.cart.length} item(s) · ${new Date(b.at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`)), h('b', { class: 'num' }, money(b.total)), h('button', { class: 'btn sm primary', onclick: async () => { if (S.cart.length && !await confirmBox('Replace the current cart with this held bill?')) return; S.cart = b.cart; S.client = clients.find(c => c.id === b.client?.id) || null; S.discType = b.discType; S.discVal = b.discVal; S.promo = b.promo; held = held.filter(x => x !== b); await setSetting('rabees_pos_held_v2', held); m.close(); drawCart(); refreshBadges(); } }, 'Recall'), h('button', { class: 'btn sm ghost', 'aria-label': 'Discard', html: icon('trash'), onclick: async () => { held = held.filter(x => x !== b); await setSetting('rabees_pos_held_v2', held); draw(); drawCart(); } }))) : [h('div', { class: 'empty' }, 'No held bills')])); const m = modal({ title: 'Held bills', size: 'sm', body }); draw(); } function editLine(l) { const m = formModal({ title: l.name, size: 'sm', values: { price: l.price, qty: l.qty, disc: l.disc || '', staffId: l.staffId, note: l.note }, saveText: 'Update', fields: [{ name: 'price', label: 'Unit price (₹)', type: 'number', step: '0.01', required: true }, { name: 'qty', label: 'Quantity', type: 'number', step: '1', min: 1, required: true }, { name: 'disc', label: 'Line discount (₹)', type: 'number', step: '0.01' }, { name: 'staffId', label: 'Staff', type: 'select', options: [['', 'Any staff'], ...staff.map(s => [s.id, s.name])] }, { name: 'note', label: 'Note on invoice', span: 2 }], extraFooter: [h('button', { class: 'btn danger ghost', type: 'button', onclick: () => { S.cart = S.cart.filter(x => x !== l); m.close(); drawCart(); refreshBadges(); } }, 'Remove')], onSave: d => { if (!(d.price >= 0) || !(d.qty >= 1)) throw new Error('Enter a valid price and quantity'); if ((d.disc || 0) > d.price * d.qty) throw new Error('Discount is more than the line total'); Object.assign(l, { price: d.price, qty: Math.round(d.qty), disc: d.disc || 0, staffId: d.staffId, note: d.note }); drawCart(); refreshBadges(); } }); } // ---- right: bill ---- const cartBox = h('div', { class: 'card pos-cart' }), fab = h('button', { class: 'pos-fab', onclick: () => document.body.classList.add('cart-open') }); let nextNo = ''; function drawCart() { const c = calc(), count = S.cart.reduce((a, l) => a + l.qty, 0); fab.replaceChildren(h('span', {}, `${count} item${count === 1 ? '' : 's'} · View bill`), h('b', { class: 'num' }, money(c.grand))); fab.style.display = count ? '' : 'none'; cartBox.replaceChildren( h('div', { class: 'bill-head' }, h('div', {}, h('b', { style: 'font-size:15px' }, editing ? `Editing ${fmtInv(editing.invoice)}` : 'New bill'), h('small', {}, editing ? 'Changes replace the original invoice' : nextNo ? 'Next: ' + nextNo + (multiBranch() ? ' · ' + branchName(writeBranch()) : '') : '')), h('div', { style: 'display:flex;gap:6px' }, !editing ? h('button', { class: 'btn sm', onclick: recall }, 'Held' + (held.length ? ` (${held.length})` : '')) : null, !editing ? h('button', { class: 'btn sm', onclick: holdBill, disabled: !S.cart.length }, 'Hold') : null, editing ? h('a', { class: 'btn ghost sm', href: '#/invoices' }, 'Cancel edit') : null, S.cart.length ? h('button', { class: 'btn ghost sm', onclick: () => { S.cart = []; S.promo = null; drawCart(); refreshBadges(); } }, 'Clear') : null, h('button', { class: 'btn ghost sm', id: 'cart-close', style: 'display:none', onclick: () => document.body.classList.remove('cart-open') }, 'Close'))), h('button', { class: 'client-row', onclick: pickClient }, h('div', { class: 'avatar' }, initials((S.client || WALKIN).name)), h('div', { style: 'flex:1;min-width:0' }, h('div', { style: 'font-weight:600' }, (S.client || WALKIN).name), h('div', { class: 'muted', style: 'font-size:12px' }, S.client ? (S.client.phone || 'No phone') + (c.memName ? ' · ' + c.memName + ' member' : '') : 'Tap to add a client')), S.client && S.client.id !== 'walk-in' && dueOf(S.client.id).length ? h('span', { class: 'badge warn', style: 'cursor:pointer', title: 'Collect dues', onclick: e => { e.stopPropagation(); collectDues(S.client); } }, 'Due ' + money(dueOf(S.client.id).reduce((a, t) => a + t.credit, 0))) : h('span', { class: 'muted' }, 'Change')), h('div', { class: 'cart-lines' }, ...(S.cart.length ? S.cart.map(l => h('div', { class: 'cart-line', onclick: e => { if (!e.target.closest('.qty, button')) editLine(l); } }, h('div', { style: 'min-width:0' }, h('div', { class: 'nm' }, l.name), h('div', { class: 'muted', style: 'font-size:12px' }, `${money(l.price, true)} × ${l.qty}${l.disc ? ' − ' + money(l.disc) : ''}${taxOn ? ' · ' + l.gstRate + '% GST' : ''}${l.staffId ? ' · ' + ((staff.find(s => s.id === l.staffId) || {}).name || '') : ''}`), l.note ? h('div', { class: 'note' }, l.note) : null), h('div', { style: 'text-align:right' }, h('b', { class: 'num' }, money(lineGross(l), true)), h('div', { style: 'margin-top:6px;display:flex;gap:6px;justify-content:flex-end;align-items:center' }, h('div', { class: 'qty' }, h('button', { 'aria-label': 'Decrease', onclick: () => { if (--l.qty <= 0) S.cart = S.cart.filter(x => x !== l); drawCart(); refreshBadges(); } }, '−'), h('span', { class: 'num' }, l.qty), h('button', { 'aria-label': 'Increase', onclick: () => { l.qty++; drawCart(); refreshBadges(); } }, '+')))))) : [h('div', { class: 'cart-empty' }, h('span', { class: 'ico', html: icon('cart') }), h('b', {}, 'Cart is empty'), h('span', {}, 'Tap an item, or type a name or scan a barcode and press Enter.'))])), h('div', { class: 'totals' }, h('div', { style: 'display:flex;gap:8px;flex-wrap:wrap' }, h('div', { style: 'display:flex;gap:6px;flex:1;min-width:150px' }, h('input', { class: 'input', type: 'number', min: 0, step: '0.01', placeholder: 'Discount', value: S.discVal || '', 'aria-label': 'Discount', oninput: e => { S.discVal = e.target.value; recalcOnly(); } }), h('select', { class: 'input', style: 'width:70px', 'aria-label': 'Discount type', onchange: e => { S.discType = e.target.value; drawCart(); } }, h('option', { value: 'amount', selected: S.discType === 'amount' }, '₹'), h('option', { value: 'percent', selected: S.discType === 'percent' }, '%'))), S.promo ? h('button', { class: 'btn sm', onclick: () => { S.promo = null; drawCart(); } }, h('b', {}, S.promo), ' ✕') : h('form', { style: 'display:flex;gap:6px', onsubmit: e => { e.preventDefault(); applyPromo(e.target.code.value); } }, h('input', { class: 'input', name: 'code', placeholder: 'Promo code', style: 'width:110px;text-transform:uppercase' }), h('button', { class: 'btn', type: 'submit' }, 'Apply'))), taxOn ? h('div', { style: 'display:flex;gap:8px;align-items:center' }, h('small', { class: 'muted' }, 'Prices are'), h('select', { class: 'input', style: 'height:32px', onchange: e => { S.pricing = e.target.value; drawCart(); } }, h('option', { value: 'exclusive', selected: S.pricing === 'exclusive' }, 'exclusive of GST'), h('option', { value: 'inclusive', selected: S.pricing === 'inclusive' }, 'inclusive of GST'))) : null, h('div', { id: 'tot-lines', style: 'display:grid;gap:6px' })), h('div', { class: 'cart-foot' }, h('input', { class: 'input', type: 'date', value: S.date, 'aria-label': 'Sale date', onchange: e => S.date = e.target.value }), h('div', { class: 'charge-row' }, !editing ? h('button', { class: 'btn', disabled: !S.cart.length || S.busy, onclick: proposalForm, title: 'Save as a proposal / estimate' }, 'Proposal') : null, h('button', { class: 'btn primary lg', id: 'charge', disabled: !S.cart.length || S.busy, onclick: openPayment }, '')))); recalcOnly(); if (window.innerWidth <= 860) { const cc = cartBox.querySelector('#cart-close'); if (cc) cc.style.display = ''; } } function recalcOnly() { const c = calc(), el = cartBox.querySelector('#tot-lines'); if (!el) return; const row = (a, b, cls = '') => h('div', { class: 'row ' + cls }, h('span', { class: cls ? '' : 'muted' }, a), h('span', { class: 'num' }, b)); el.replaceChildren(...[row('Subtotal', money(c.subtotal, true)), c.disc > 0 ? row('Discount', '−' + money(c.disc, true)) : null, c.promoDisc > 0 ? row('Promo ' + S.promo, '−' + money(c.promoDisc, true)) : null, c.memDisc > 0 ? row(c.memName + ' member', '−' + money(c.memDisc, true)) : null, taxOn && c.tax > 0 ? (c.inter ? row('IGST', money(c.igst, true)) : [row('CGST', money(c.cgst, true)), row('SGST', money(c.sgst, true))]) : null, row('Total', money(c.grand, true), 'grand')].flat().filter(Boolean)); const b = cartBox.querySelector('#charge'); if (b) b.textContent = `${editing ? 'Update' : 'Charge'} ${money(c.grand)}`; } // ---- payment screen ---- function openPayment() { if (!S.cart.length) return; const c = calc(), total = c.grand; const P = { mode: editing && ['Cash', 'UPI', 'Card', 'Credit'].includes(editing.mode) ? editing.mode : 'Cash', tendered: '', amt: total, split: [{ mode: 'Cash', amount: '' }, { mode: 'UPI', amount: '' }] }; const body = h('div'); const upi = bd.upi_id || bd.upiId; const received = () => P.mode === 'Credit' ? 0 : P.mode === 'Split' ? P.split.reduce((a, s) => a + num(s.amount), 0) : P.mode === 'Cash' ? Math.min(total, P.tendered === '' ? total : num(P.tendered)) : Math.min(total, num(P.amt)); function draw() { const rec = r2(received()), due = r2(total - rec); const parts = [h('div', { class: 'pay-total' }, h('span', { class: 'muted' }, 'Amount to collect'), h('b', { class: 'num' }, money(total, true))), h('div', { class: 'pay-big' }, ...MODES.map(([m, ico]) => h('button', { class: P.mode === m ? 'on' : '', onclick: () => { P.mode = m; if (m === 'Split') P.split[0].amount = total; draw(); }, html: icon(ico) + `${m}` }))), h('div', { style: 'height:16px' })]; if (P.mode === 'Cash') parts.push(h('div', { class: 'field' }, h('label', {}, 'Cash received from customer'), h('input', { class: 'input', id: 'tend', type: 'number', inputmode: 'decimal', step: '0.01', value: P.tendered, placeholder: String(total), oninput: e => { P.tendered = e.target.value; upd(); }, style: 'height:52px;font-size:22px;font-weight:700' })), h('div', { class: 'quick-amts', style: 'margin-top:10px' }, ...[...new Set([total, Math.ceil(total / 100) * 100, Math.ceil(total / 500) * 500, Math.ceil(total / 1000) * 1000, 2000])].filter(a => a >= total).slice(0, 5).map(a => h('button', { onclick: () => { P.tendered = String(a); draw(); } }, a === total ? 'Exact' : money(a))))); else if (P.mode === 'UPI' || P.mode === 'Card') parts.push(h('div', { class: 'field' }, h('label', {}, 'Amount paid by ' + P.mode.toLowerCase()), h('input', { class: 'input', id: 'amt', type: 'number', step: '0.01', value: P.amt, oninput: e => { P.amt = e.target.value; upd(); }, style: 'height:48px;font-size:20px;font-weight:700' })), P.mode === 'UPI' && upi ? h('div', { style: 'margin-top:12px;text-align:center' }, h('div', { class: 'qr-box', id: 'qr' }), h('small', { class: 'muted' }, `Scan to pay ${upi}`)) : P.mode === 'UPI' ? h('small', { class: 'muted' }, 'Add a UPI ID in Settings → Payments to show a QR code here.') : null); else if (P.mode === 'Split') parts.push(h('div', {}, ...P.split.map((s, i) => h('div', { class: 'split-row' }, h('select', { class: 'input', onchange: e => { s.mode = e.target.value; }, 'aria-label': 'Mode' }, ...['Cash', 'UPI', 'Card'].map(m => h('option', { selected: s.mode === m }, m))), h('input', { class: 'input', type: 'number', step: '0.01', placeholder: 'Amount', value: s.amount, 'aria-label': 'Amount', oninput: e => { s.amount = e.target.value; upd(); } }), P.split.length > 1 ? h('button', { class: 'btn ghost icon sm', 'aria-label': 'Remove', html: icon('x'), onclick: () => { P.split.splice(i, 1); draw(); } }) : h('span'))), h('button', { class: 'btn sm', onclick: () => { P.split.push({ mode: 'Cash', amount: due > 0 ? due : '' }); draw(); } }, '+ Add payment'))); else parts.push(h('div', { class: 'muted', style: 'text-align:center' }, 'Nothing is collected now. The full amount is added to the client’s dues.')); parts.push(h('div', { id: 'summary', style: 'margin-top:14px;display:grid;gap:8px' })); body.replaceChildren(...parts); upd(); if (P.mode === 'UPI' && upi) drawQr(); body.querySelector('#tend, #amt')?.focus(); } function upd() { const rec = r2(received()), due = r2(total - rec), tend = P.tendered === '' ? total : num(P.tendered), change = P.mode === 'Cash' ? Math.max(0, r2(tend - total)) : 0; const sm = body.querySelector('#summary'); if (!sm) return; sm.replaceChildren(...[change > 0 ? h('div', { class: 'change-box' }, h('span', {}, 'Change to return'), h('b', { class: 'num' }, money(change, true))) : null, due > 0.004 ? h('div', { class: 'change-box warn' }, h('span', {}, P.mode === 'Credit' ? 'Added to client dues' : 'Balance goes to dues'), h('b', { class: 'num' }, money(due, true))) : null, due > 0.004 && (!S.client || S.client.id === 'walk-in') ? h('small', { class: 'muted' }, 'Tip: choose a client first so the balance can be tracked and collected later.') : null].filter(Boolean)); done.disabled = (P.mode === 'Split' && rec <= 0) || (due > 0.004 && (!S.client || S.client.id === 'walk-in') && P.mode === 'Credit'); done.title = done.disabled && P.mode === 'Credit' ? 'Select a client to sell on credit' : ''; } async function drawQr() { const box = body.querySelector('#qr'); if (!box) return; const link = `upi://pay?pa=${encodeURIComponent(upi)}&pn=${encodeURIComponent(bd.name || '')}&am=${r2(num(P.amt) || total)}&cu=INR`; try { if (!window.QRCode) await new Promise((ok, no) => { document.head.append(h('script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js', onload: ok, onerror: no })); }); box.replaceChildren(); new window.QRCode(box, { text: link, width: 168, height: 168 }); } catch { box.textContent = 'QR unavailable offline'; } } const done = h('button', { class: 'btn primary lg', onclick: () => { const rec = r2(received()); const split = P.mode === 'Split' ? P.split.filter(s => num(s.amount) > 0).map(s => ({ mode: s.mode, amount: r2(num(s.amount)) })) : null; m.close(); submit({ mode: P.mode, received: rec, split, tendered: P.mode === 'Cash' ? (P.tendered === '' ? total : num(P.tendered)) : null }, false); } }, 'Complete sale'); const m = modal({ title: 'Payment', size: 'sm', body, footer: [h('button', { class: 'btn', onclick: () => m.close() }, 'Back'), done] }); m.el.addEventListener('keydown', e => { if (e.key === 'Enter' && !done.disabled && e.target.tagName === 'INPUT') { e.preventDefault(); done.click(); } }); draw(); } // ---- save ---- function proposalForm() { if (!S.cart.length) return; const nm = (S.client || WALKIN).name; formModal({ title: 'Proposal for ' + nm, size: 'lg', saveText: 'Create proposal', values: { proposalTitle: 'Proposal & Estimate', validDays: 15, scopeNote: '', paymentTerms: '50% advance, balance on delivery', termsText: '' }, fields: [{ name: 'proposalTitle', label: 'Title', required: true }, { name: 'validDays', label: 'Valid for (days)', type: 'number' }, { name: 'scopeNote', label: 'Introduction / scope of work', type: 'textarea', span: 2, rows: 4 }, { name: 'paymentTerms', label: 'Payment terms', span: 2 }, { name: 'termsText', label: 'Terms & conditions', type: 'textarea', span: 2, rows: 3 }], onSave: d => { const v = new Date(S.date + 'T00:00:00'); v.setDate(v.getDate() + (d.validDays || 15)); submit(null, true, { proposalTitle: d.proposalTitle, scopeNote: d.scopeNote, paymentTerms: d.paymentTerms, termsText: d.termsText, validUntil: ymd(v) }); } }); } async function submit(pay, asProposal, extra = {}) { if (S.busy || !S.cart.length) return; S.busy = true; drawCart(); try { const c = calc(), cl = S.client || WALKIN; let received = 0, credit = c.grand, status = 'Pending', mode = 'Pending'; if (!asProposal) { received = pay.received; credit = r2(c.grand - received); mode = pay.mode; status = credit <= 0.004 ? 'Paid' : (received > 0 ? 'Partial' : 'Pending'); if (credit < 0.005) credit = 0; } const fresh = await loadAll('transactions', { force: true }); const saleBranch = editing ? (editing.branchId || B.defaultId) : writeBranch(); const invNum = asProposal ? 'PROP-' + Date.now().toString().slice(-6) : (editing ? fmtInv(editing.invoice) : nextInvoiceNumber(fresh, invoicePrefix(saleBranch))); const id = editing ? editing.id : invNum; if (!editing && !asProposal && fresh.some(t => t.id === id)) throw new Error('Invoice number was just taken by another terminal. Please try again.'); const now = new Date(), clock = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); const row = { id, invoiceNum: invNum, invoice_num: invNum, branchId: saleBranch, clientId: cl.id, clientName: cl.name, companyName: cl.raw.companyName || cl.raw.company_name || '', clientPhone: cl.phone || '', shippingAddress: cl.raw.shippingAddress || cl.raw.address || '', date: S.date, time: editing?.time || clock, items: S.cart.map(l => ({ id: l.id, name: l.name, qty: l.qty, price: l.price, unitPrice: l.price, discount: l.disc || 0, note: l.note || '', type: l.type, staffId: l.staffId || '', hsn: l.hsn, gstRate: l.gstRate })), subtotal: r2(c.subtotal), discount: r2(c.disc), discountValue: r2(c.disc), promoCode: S.promo || '', promoDiscount: r2(c.promoDisc), membershipDiscount: r2(c.memDisc), taxBreakdown: { isTaxEnabled: taxOn, isInterState: c.inter, pricingMode: S.pricing, sellerState: c.sellerState, sellerGst: taxCfg.sellerGst || bd.gst || '', buyerState: c.buyerState, buyerGst: cl.raw.gst || '', taxableAmount: r2(c.taxable), gstRate: taxCfg.gstRate, cgstAmount: r2(c.cgst), sgstAmount: r2(c.sgst), igstAmount: r2(c.igst), cgst: r2(c.cgst), sgst: r2(c.sgst), igst: r2(c.igst), totalTax: r2(c.tax), hsnSummary: c.hsn }, taxPercentage: taxCfg.gstRate, taxableAmount: r2(c.taxable), cgst: r2(c.cgst), sgst: r2(c.sgst), igst: r2(c.igst), total: c.grand, totalAmount: c.grand, paymentMode: mode, paymentStatus: status, amountReceived: r2(received), creditAmount: r2(credit), paymentSplit: pay?.split || '', cashTendered: pay?.tendered ?? '', timestamp: editing?.timestamp && editing.date === S.date ? editing.timestamp : new Date(S.date + 'T' + now.toTimeString().slice(0, 8)).getTime() || now.getTime(), isCancelled: 0 }; if (asProposal) { Object.assign(row, extra); row.status = 'Proposal'; await api.save('proposals', row); await api.save('transactions', row); logActivity('Sales', `Created proposal ${invNum} for ${cl.name}`); } else { await api.save('transactions', row); const delta = {}; S.cart.forEach(l => { if (l.type === 'Product' && !l.custom) delta[l.id] = (delta[l.id] || 0) - l.qty; }); if (editing) editing.items.forEach(i => { if ((i.type || 'Product') === 'Product') delta[String(i.id)] = (delta[String(i.id)] || 0) + (num(i.qty) || 1); }); for (const [iid, d] of Object.entries(delta)) { const it = items.find(x => x.id === iid); if (it && d !== 0) await adjustBranchStock(it, saleBranch, d); } logActivity('Sales', `${editing ? 'Updated' : 'Generated'} invoice ${invNum} for ${cl.name} (${money(c.grand)})`); } invalidate('transactions', 'proposals', 'menu_items'); await markFresh(); const tx = (await load(asProposal ? 'proposals' : 'transactions', { force: true })).find(t => t.id === id) || { ...row, invoice: invNum, items: row.items, tax: row.taxBreakdown }; const change = pay?.tendered != null ? Math.max(0, r2(pay.tendered - c.grand)) : 0; S.cart = []; S.promo = null; S.client = null; S.discVal = 0; document.body.classList.remove('cart-open'); toast(asProposal ? 'Proposal saved' : change > 0 ? `Sale complete. Return ${money(change, true)} change` : editing ? 'Invoice updated' : 'Sale completed', 'ok'); if (editing) location.hash = '#/invoices'; else { const fr = await load('menu_items', { force: true }); items.length = 0; items.push(...fr); nextNo = nextInvoiceNumber(await loadAll('transactions'), invoicePrefix(writeBranch())); drawItems(); } openInvoice(tx, { proposal: asProposal }); if (!asProposal && (await getSetting('rabees_print_settings', {})).autoPrint) setTimeout(() => window.print(), 600); } catch (e) { toast(e.message || 'Could not save the sale', 'err'); } finally { S.busy = false; if (root.isConnected) { drawCart(); } } } // ---- keyboard shortcuts ---- const keys = e => { if (!root.isConnected) return; const typing = ['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName); if (document.querySelector('.modal-ov')) return; if (e.key === '/' && !typing) { e.preventDefault(); searchInput.focus(); searchInput.select(); } else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); openPayment(); } else if (e.key === 'F2') { e.preventDefault(); pickClient(); } else if (e.key === 'F4') { e.preventDefault(); holdBill(); } }; document.addEventListener('keydown', keys); window.__cleanup = () => document.removeEventListener('keydown', keys); root.replaceChildren(h('div', { class: 'pos' }, h('div', { class: 'pos-left' }, h('div', { class: 'searchbox', style: 'max-width:none;flex:none' }, h('span', { html: icon('search') }), searchInput), tabsEl, h('div', { class: 'pos-main' }, rail, grid), h('div', { class: 'kbd-hint' }, h('span', {}, h('kbd', {}, '/'), ' search'), h('span', {}, h('kbd', {}, 'Enter'), ' add first match'), h('span', {}, h('kbd', {}, 'F2'), ' client'), h('span', {}, h('kbd', {}, 'F4'), ' hold bill'), h('span', {}, h('kbd', {}, 'Ctrl'), '+', h('kbd', {}, 'Enter'), ' pay'))), cartBox), fab); document.body.append(fab); nextNo = nextInvoiceNumber(txsAll, invoicePrefix(writeBranch())); drawItems(); drawCart(); if (window.innerWidth > 860) searchInput.focus(); }

Welcome back