// Approvals queue page + Voucher Detail Drawer (the receipt that gets approved) // + Mobile operator UI function ApprovalsPage({ highlightId, openDetailFor, isApproving, isApproved }) { const pendingCount = PENDING_APPROVALS.length - (isApproved ? 1 : 0); return (
{/* Queue */}

Pending Vouchers

Awaiting manager review
{PENDING_APPROVALS.map((p) => { const isHighlighted = highlightId === p.id; const isOpen = openDetailFor === p.id; const isDone = isApproved && p.id === highlightId; return ( ); })}
Voucher Type By Lines Value
{p.id}
{p.party}
 {p.type}
s[0]).join("").slice(0, 2)} size={22} tint="oklch(0.86 0.06 200)" color="oklch(0.30 0.10 200)" className="flex-shrink-0" /> {p.by}
{p.lines} {fmtINR(p.value)}
{/* Detail drawer */} {openDetailFor && }
); } function VoucherDetail({ isApproving, isApproved }) { const voucher = PENDING_APPROVALS.find((p) => p.id === "GRN-2026-0184"); const supplier = SUPPLIERS[0]; return ( {/* Header */}
Goods Receipt Note Pending Review {isApproving && Approving…} {isApproved && Approved · Stock applied}

GRN-2026-0184

Linked to PO-2026-0091 · 3 lines
Supplier
{supplier.name}
{supplier.gstin}
Receive At
MUM-1
Mumbai Central Warehouse
Submitted
Ravi Kumar
07 May 2026, 09:17 AM · Telegram
{/* Lines */}
3 Line Items
{RECEIPT_LINES.map((l) => { const it = itemById(l.itemId); return ( ); })}
Item Qty Rate Amount
{it.name}
{it.sku}
{l.qty}
{l.unit}
 {fmtINR(l.rate)} {fmtINR(l.qty * l.rate)}
3 lines · 660 units total
{fmtINR(RECEIPT_LINES.reduce((s, l) => s + l.qty * l.rate, 0))}
{/* Stock impact preview */}
On approval, stock at MUM-1 will update
{RECEIPT_LINES.map((l) => { const it = itemById(l.itemId); const before = STOCK_BEFORE.find((r) => r.itemId === l.itemId && r.locId === "loc-mum-1")?.qty ?? 0; const after = before + l.qty; return (
{it.name} {before} {after} +{l.qty}
); })}
); } // Mobile operator UI — phone frame to the right of mobile-shaped scenes function MobileOperator({ scene = "list" }) { return (
{/* Left: marketing-ish explainer */}
Operator on Mobile

Field operators submit receipts from the warehouse floor.

Ravi unloads the Britannia delivery. He opens the Telegram Mini App, scans the supplier’s invoice, confirms the lines, and submits. The voucher lands in Priya’s queue with status pending_review.

{[ { icon: "scan-line", title: "Scan supplier invoice", note: "OCR via Gemini auto-fills items, qty, rate" }, { icon: "check-check", title: "Operator can never apply stock", note: "Submission is always pending_review" }, { icon: "shield-check", title: "Manager sees a full evidence trail", note: "Photos, OCR confidence, GPS — attached" }]. map((s, i) =>
{s.title}
{s.note}
)}
{/* Right: phone */}
{scene === "list" && } {scene === "review" && } {scene === "submitted" && }
); } function PhoneFrame({ children }) { return (
{/* notch */}
{/* status bar */}
09:17
{children}
); } function MobileChrome({ title, subtitle, children, accent = false }) { return ( <>
{title}
{subtitle &&
{subtitle}
}
{children}
); } function MobileListScene() { return (
Today
{[ { id: "GRN-2026-0182", party: "ITC Foods", at: "08:14", status: "open", lines: 5 }, { id: "GRN-2026-0181", party: "Mahesh Wholesale", at: "07:42", status: "open", lines: 2 }]. map((r) =>
{r.id}
{r.party}
{r.lines} lines · {r.at}
)} ); } function MobileReviewScene() { return ( {/* Scanned invoice preview */}
Supplier invoice
INV-BR-25/4521 · 07 May
OCR · 96% confidence
3 Lines · auto-extracted
{RECEIPT_LINES.map((l) => { const it = itemById(l.itemId); return (
{it.name}
{it.sku}
Qty
{l.qty} {l.unit.split(" ")[0]}
Rate
{fmtINR(l.rate)}
); })}
Total value {fmtINR(RECEIPT_LINES.reduce((s, l) => s + l.qty * l.rate, 0))}
Voucher will be created as pending_review until your manager approves.
); } function MobileSubmittedScene() { return (

Sent for approval

Priya will be notified. You’ll see the voucher status update here when it’s approved.

pending_review
3 lines · {fmtINR(GRN_184_VALUE)} · MUM-1
); } Object.assign(window, { ApprovalsPage, VoucherDetail, MobileOperator, PhoneFrame });