/* =============================================================
   CoreIQ Office — Ordering, Wholesaler invoices, Settlement,
   Corporate vouchers (flu), Payments (Adyen)
   ============================================================= */
const { useState: ordUseState, useMemo: ordUseMemo } = React;

// -----------------------------------------------------------------
// SAMPLE DATA
// -----------------------------------------------------------------
const HO_WHOLESALERS = [
  { id: "ws-sigma",   name: "Sigma Healthcare",          channel: "PharmX", account: "SIG-89441", terms: "Net 30", contact: "Ben Lee",       cutoff: "16:00 daily",  rebate: "2.4% Q",  status: "live" },
  { id: "ws-symbion", name: "Symbion",                   channel: "PharmX", account: "SYM-22408", terms: "Net 14", contact: "Olivia Marsh",  cutoff: "15:30 daily",  rebate: "1.8% Q",  status: "live" },
  { id: "ws-api",     name: "API",                       channel: "EDI",    account: "API-77104", terms: "Net 30", contact: "Daniel Park",   cutoff: "Twice weekly", rebate: "Volume",  status: "live" },
  { id: "ws-gsk",     name: "GSK Australia",             channel: "Direct (DHL)", account: "GSK-44102", terms: "Net 30", contact: "Maria Chen", cutoff: "Order ahead", rebate: "—", status: "live" },
  { id: "ws-webster", name: "Webstercare",               channel: "Direct (DHL)", account: "WEB-11220", terms: "Net 30", contact: "Jenna Hughes", cutoff: "Order ahead", rebate: "—", status: "live" },
  { id: "ws-ndss",    name: "Diabetes Australia · NDSS", channel: "EDI",    account: "NDSS-018",  terms: "Net 30", contact: "—",            cutoff: "Daily",         rebate: "—",       status: "live" },
  { id: "ws-csl",     name: "CSL Seqirus · vaccines",    channel: "Direct (DHL)", account: "CSL-22018", terms: "Pre-season", contact: "Ana Reyes", cutoff: "Seasonal", rebate: "Corporate voucher", status: "live" },
];

const HO_ORDERS = [
  { id: "PO-4422", supplier: "ws-sigma",   channel: "PharmX",       store: "S-001", lines: 4,  units: 158, value: 412.40,  status: "received",   sent: "Yesterday 22:00", expected: "Today 09:00",  received: "Today 09:14",  notes: "1 discrepancy · short 2 Atorvastatin" },
  { id: "PO-4423", supplier: "ws-symbion", channel: "PharmX",       store: "S-001", lines: 2,  units: 70,  value: 624.60,  status: "received",   sent: "Yesterday 22:00", expected: "Today 11:30",  received: "Today 11:30",  notes: "Cold chain logged" },
  { id: "PO-4424", supplier: "ws-api",     channel: "EDI",          store: "S-001", lines: 6,  units: 240, value: 1142.20, status: "in-transit", sent: "Today 06:30",     expected: "Today 16:00",  received: null,           notes: "ETA Camberwell 16:00" },
  { id: "PO-4425", supplier: "ws-gsk",     channel: "Direct (DHL)", store: "S-002", lines: 1,  units: 24,  value: 380.20,  status: "in-transit", sent: "25/05/2026 14:20", expected: "Today 14:00", received: null,           notes: "DHL · tracking 8821 0042 11" },
  { id: "PO-4426", supplier: "ws-csl",     channel: "Direct (DHL)", store: "S-001", lines: 3,  units: 600, value: 9420.00, status: "received",   sent: "12/04/2026",      expected: "20/04/2026",   received: "20/04/2026",   notes: "Flu pre-season · 3 SKUs · voucher batch" },
  { id: "PO-4427", supplier: "ws-ndss",    channel: "EDI",          store: "S-003", lines: 5,  units: 144, value: 410.20,  status: "open",       sent: "—",               expected: "—",            received: null,           notes: "Drafting order — reorder triggered" },
  { id: "PO-4428", supplier: "ws-sigma",   channel: "PharmX",       store: "S-002", lines: 8,  units: 220, value: 884.50,  status: "open",       sent: "—",               expected: "—",            received: null,           notes: "Auto-suggest from low-stock alerts" },
  { id: "PO-4429", supplier: "ws-webster", channel: "Direct (DHL)", store: "S-003", lines: 1,  units: 50,  value: 600.00,  status: "submitted",  sent: "Today 11:48",     expected: "Tomorrow",     received: null,           notes: "Webster pack media · weekly" },
  { id: "PO-4430", supplier: "ws-symbion", channel: "PharmX",       store: "S-003", lines: 6,  units: 188, value: 712.30,  status: "submitted",  sent: "Today 12:14",     expected: "Tomorrow 09:30", received: null,         notes: "Symbion overnight" },
];

const HO_INVOICES = [
  { id: "INV-SIG-8841", supplier: "ws-sigma",   po: "PO-4422", issued: "Today",       due: "26/06/2026", total: 412.40,   received: 0,       status: "open" },
  { id: "INV-SYM-2204", supplier: "ws-symbion", po: "PO-4423", issued: "Today",       due: "09/06/2026", total: 624.60,   received: 0,       status: "open" },
  { id: "INV-API-1140", supplier: "ws-api",     po: "PO-4418", issued: "Yesterday",   due: "25/06/2026", total: 1844.20,  received: 1844.20, status: "matched" },
  { id: "INV-GSK-7720", supplier: "ws-gsk",     po: "PO-4412", issued: "20/05/2026",  due: "19/06/2026", total: 980.40,   received: 0,       status: "open" },
  { id: "INV-CSL-FLU",  supplier: "ws-csl",     po: "PO-4426", issued: "21/04/2026",  due: "Voucher",    total: 9420.00,  received: 9420.00, status: "voucher", note: "Settled via corporate voucher · flu programme" },
  { id: "INV-SIG-8810", supplier: "ws-sigma",   po: "PO-4401", issued: "12/05/2026",  due: "11/06/2026", total: 884.10,   received: 884.10,  status: "matched" },
  { id: "INV-SYM-2188", supplier: "ws-symbion", po: "PO-4395", issued: "10/05/2026",  due: "24/05/2026", total: 318.20,   received: 318.20,  status: "matched" },
  { id: "INV-NDSS-022", supplier: "ws-ndss",    po: "PO-4408", issued: "08/05/2026",  due: "07/06/2026", total: 488.50,   received: 0,       status: "dispute", note: "Pricing dispute · 4 lines flagged" },
];

const HO_SETTLEMENTS = [
  { id: "SET-2226", provider: "Adyen", date: "Today",       gross: 4480.20, fees: 31.36, net: 4448.84, batch: 112, status: "settling" },
  { id: "SET-2225", provider: "Adyen", date: "Yesterday",   gross: 3942.80, fees: 27.60, net: 3915.20, batch: 98,  status: "settled" },
  { id: "SET-2224", provider: "Adyen", date: "25/05/2026",  gross: 5118.40, fees: 35.83, net: 5082.57, batch: 124, status: "settled" },
  { id: "SET-2223", provider: "Adyen", date: "24/05/2026",  gross: 2812.80, fees: 19.69, net: 2793.11, batch: 84,  status: "settled" },
  { id: "SET-2222", provider: "Adyen", date: "23/05/2026",  gross: 4220.60, fees: 29.54, net: 4191.06, batch: 102, status: "settled" },
  { id: "SET-2221", provider: "Adyen", date: "22/05/2026",  gross: 4940.20, fees: 34.58, net: 4905.62, batch: 118, status: "settled" },
  { id: "SET-2220", provider: "Adyen", date: "21/05/2026",  gross: 3680.40, fees: 25.76, net: 3654.64, batch: 92,  status: "settled" },
];

const HO_VOUCHER_PROGRAMS = [
  {
    id: "VP-FLU-2026",
    name: "Workplace Flu 2026",
    sponsor: "Multiple corporates · CSL Seqirus supply",
    season: "Apr → Aug 2026",
    status: "active",
    vouchersIssued: 4200,
    vouchersRedeemed: 2814,
    vaccineUnits: 4200,
    valuePerVoucher: 32.50,
    totalValue: 136500,
    corporates: 18,
    notes: "Each voucher = 1 quadrivalent influenza vaccine + admin. Settled monthly with corporate sponsor on issued voucher count.",
  },
  {
    id: "VP-COV-2026",
    name: "Workplace COVID booster",
    sponsor: "Corporate · 6 employers",
    season: "Mar → Dec 2026",
    status: "active",
    vouchersIssued: 880,
    vouchersRedeemed: 412,
    vaccineUnits: 880,
    valuePerVoucher: 28.00,
    totalValue: 24640,
    corporates: 6,
    notes: "Bivalent booster · co-billed with flu where eligible.",
  },
  {
    id: "VP-TRAVEL-2026",
    name: "Travel pack · employer",
    sponsor: "Bridgewater NDIS Services",
    season: "Year-round",
    status: "active",
    vouchersIssued: 60,
    vouchersRedeemed: 24,
    vaccineUnits: 0,
    valuePerVoucher: 88.00,
    totalValue: 5280,
    corporates: 1,
    notes: "Hep A/B, typhoid, malaria scripts — issued by HR before travel.",
  },
  {
    id: "VP-FLU-2025",
    name: "Workplace Flu 2025",
    sponsor: "Multiple corporates",
    season: "Apr → Aug 2025",
    status: "closed",
    vouchersIssued: 3640,
    vouchersRedeemed: 3622,
    vaccineUnits: 3640,
    valuePerVoucher: 29.50,
    totalValue: 107380,
    corporates: 14,
    notes: "Closed · final reconciliation Sep 2025.",
  },
];

const HO_CORPORATES = [
  { name: "Whitehorse Family Medical Centre", staff: 32,  vouchers: 28, redeemed: 22 },
  { name: "Camberwell Aged Care Facility",    staff: 188, vouchers: 188, redeemed: 142 },
  { name: "Bridgewater NDIS Services",        staff: 64,  vouchers: 64,  redeemed: 44 },
  { name: "Burke Road Community House",       staff: 18,  vouchers: 18,  redeemed: 12 },
  { name: "Eastland Medical Suites",          staff: 44,  vouchers: 44,  redeemed: 32 },
  { name: "Glen Iris Day Centre",             staff: 80,  vouchers: 80,  redeemed: 52 },
];

// =================================================================
// ORDERING (PharmX / EDI / Direct)
// =================================================================
function Ordering() {
  const { setScreen, setScreenState, pushToast } = window.useOffice();
  const [tab, setTab] = ordUseState("orders");
  const [filter, setFilter] = ordUseState("all");
  const [channel, setChannel] = ordUseState("all");

  const FILTERS = [
    { key: "all",        label: "All",         pred: () => true },
    { key: "open",       label: "Drafts",      pred: o => o.status === "open" },
    { key: "submitted",  label: "Submitted",   pred: o => o.status === "submitted" },
    { key: "in-transit", label: "In transit",  pred: o => o.status === "in-transit" },
    { key: "received",   label: "Received",    pred: o => o.status === "received" },
  ];
  const CHANNELS = ["all","PharmX","EDI","Direct (DHL)"];

  const list = HO_ORDERS.filter(o => {
    if (!FILTERS.find(f => f.key === filter).pred(o)) return false;
    if (channel !== "all" && o.channel !== channel) return false;
    return true;
  });

  return (
    <div className="off-screen">
      <header className="off-screen-header">
        <div className="off-screen-header-meta">
          <span className="off-screen-eyebrow">Head-office function</span>
          <h2 className="off-screen-title">Wholesaler ordering</h2>
        </div>
        <div className="off-screen-actions">
          <button className="btn btn--ghost btn--sm">Reorder suggestions</button>
          <button className="btn btn--secondary btn--sm"><OIcon name="transfer"/> Sync PharmX</button>
          <button className="btn btn--primary btn--sm" onClick={() => setScreen("orderNew")}>
            <OIcon name="plus"/> New order
          </button>
        </div>
      </header>

      <div className="off-subtabs">
        <button className={"off-subtab" + (tab === "orders" ? " off-subtab--active" : "")} onClick={() => setTab("orders")}>Purchase orders</button>
        <button className={"off-subtab" + (tab === "channels" ? " off-subtab--active" : "")} onClick={() => setTab("channels")}>Channels &amp; wholesalers</button>
        <button className={"off-subtab" + (tab === "suggestions" ? " off-subtab--active" : "")} onClick={() => setTab("suggestions")}>Reorder suggestions</button>
      </div>

      <div className="off-screen-body">
        <div className="off-kpi-grid">
          <KpiCard label="Orders in flight"     value={HO_ORDERS.filter(o => o.status === "submitted" || o.status === "in-transit").length} delta={{text: HO_ORDERS.filter(o => o.status === "in-transit").length + " in transit · " + HO_ORDERS.filter(o => o.status === "submitted").length + " submitted"}}/>
          <KpiCard label="Order value · 30d"    value={oMoney(HO_ORDERS.reduce((s, o) => s + o.value, 0))} delta={{dir:"up", text: "▲ 6.2% vs prior 30d"}}/>
          <KpiCard label="PharmX uptime"        value="99.8%" delta={{dir:"up", text: "Last outage 12/04"}}/>
          <KpiCard label="Active channels"      value={HO_WHOLESALERS.length} delta={{text: "PharmX · EDI · DHL Direct"}}/>
        </div>

        {tab === "orders" && (
          <div className="off-table">
            <div className="off-table-toolbar">
              <div className="off-filters">
                {FILTERS.map(f => {
                  const c = HO_ORDERS.filter(f.pred).length;
                  return (
                    <button key={f.key} className={"off-filter" + (filter === f.key ? " off-filter--active" : "")} onClick={() => setFilter(f.key)}>
                      {f.label} <span className="off-filter-count">{c}</span>
                    </button>
                  );
                })}
              </div>
              <div className="off-table-toolbar-sep"/>
              <div className="off-filters">
                {CHANNELS.map(c => (
                  <button key={c} className={"off-filter" + (channel === c ? " off-filter--active" : "")} onClick={() => setChannel(c)}>
                    {c === "all" ? "Any channel" : c}
                  </button>
                ))}
              </div>
              <div style={{marginLeft:'auto', fontSize:12, color:'var(--text-muted)'}}>{list.length} of {HO_ORDERS.length}</div>
            </div>

            <div className="off-grid" style={{gridTemplateColumns:'110px 1fr 110px 110px 60px 70px 110px 130px 130px'}}>
              <div className="off-grid-headcell">PO</div>
              <div className="off-grid-headcell">Supplier</div>
              <div className="off-grid-headcell">Channel</div>
              <div className="off-grid-headcell">Store</div>
              <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Lines</div>
              <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Units</div>
              <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Value</div>
              <div className="off-grid-headcell">Expected</div>
              <div className="off-grid-headcell">Status</div>

              {list.map(o => {
                const ws = HO_WHOLESALERS.find(w => w.id === o.supplier);
                const store = findS(o.store);
                return (
                  <div key={o.id} className="off-grid-row">
                    <div className="off-grid-cell off-cell-mono off-cell-strong">{o.id}</div>
                    <div className="off-grid-cell off-cell-strong">
                      {ws.name}
                      <div className="off-cell-mono off-muted" style={{marginTop:2, fontSize:11}}>{o.notes}</div>
                    </div>
                    <div className="off-grid-cell">
                      <span className="badge badge--neutral">{o.channel}</span>
                    </div>
                    <div className="off-grid-cell off-mono">{store?.code} · {store?.name}</div>
                    <div className="off-grid-cell off-cell-num">{o.lines}</div>
                    <div className="off-grid-cell off-cell-num">{o.units}</div>
                    <div className="off-grid-cell off-cell-num off-cell-strong">{oMoney(o.value)}</div>
                    <div className="off-grid-cell off-mono off-muted">{o.expected}</div>
                    <div className="off-grid-cell">
                      {o.status === "open"       && <span className="badge badge--neutral"><span className="badge-dot"/> Draft</span>}
                      {o.status === "submitted"  && <span className="badge badge--hold"><span className="badge-dot"/> Submitted</span>}
                      {o.status === "in-transit" && <span className="badge badge--brand"><span className="badge-dot"/> In transit</span>}
                      {o.status === "received"   && <span className="badge badge--paid"><span className="badge-dot"/> Received</span>}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {tab === "channels" && (
          <div className="off-table">
            <div className="off-grid" style={{gridTemplateColumns:'1.6fr 130px 130px 110px 1fr 130px 100px'}}>
              <div className="off-grid-headcell">Wholesaler</div>
              <div className="off-grid-headcell">Channel</div>
              <div className="off-grid-headcell">Account</div>
              <div className="off-grid-headcell">Terms</div>
              <div className="off-grid-headcell">Contact · cutoff</div>
              <div className="off-grid-headcell">Rebate</div>
              <div className="off-grid-headcell">Status</div>
              {HO_WHOLESALERS.map(ws => (
                <div key={ws.id} className="off-grid-row">
                  <div className="off-grid-cell off-cell-strong">{ws.name}</div>
                  <div className="off-grid-cell">
                    <span className="badge badge--brand">{ws.channel}</span>
                  </div>
                  <div className="off-grid-cell off-cell-mono">{ws.account}</div>
                  <div className="off-grid-cell">{ws.terms}</div>
                  <div className="off-grid-cell">
                    {ws.contact}
                    <div className="off-cell-mono off-muted" style={{marginTop:2, fontSize:11}}>Cutoff {ws.cutoff}</div>
                  </div>
                  <div className="off-grid-cell off-mono off-muted">{ws.rebate}</div>
                  <div className="off-grid-cell">
                    <span className="badge badge--paid"><span className="badge-dot"/> Live</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {tab === "suggestions" && (
          <div>
            <div className="off-card" style={{marginBottom:14, flexDirection:'row', alignItems:'center', gap:14, padding:'14px 18px'}}>
              <OIcon name="info" style={{color:'var(--brand)'}}/>
              <div style={{flex:1, fontSize:13, color:'var(--text-muted)'}}>
                Below-reorder SKUs grouped by preferred wholesaler. Click <strong style={{color:'var(--text)'}}>Generate PO</strong> to draft a purchase order.
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:12}}>
              {HO_WHOLESALERS.slice(0, 4).map(ws => {
                const sample = OD.PRODUCTS.filter(p => p.supplier === (ws.id.replace("ws-","sup-")) || ws.id === "ws-sigma").slice(0, 3);
                const total = sample.reduce((s, p) => s + p.cost * 24, 0);
                return (
                  <div key={ws.id} className="off-card" style={{padding:0, overflow:'hidden'}}>
                    <div style={{display:'flex', alignItems:'center', gap:14, padding:'12px 18px', background:'var(--bg-subtle)', borderBottom:'1px solid var(--border)'}}>
                      <div style={{fontWeight:600, fontSize:15}}>{ws.name}</div>
                      <span className="badge badge--brand">{ws.channel}</span>
                      <span className="off-mono off-muted" style={{fontSize:12}}>{sample.length} SKUs suggested · est {oMoney(total)}</span>
                      <button className="btn btn--primary btn--sm" style={{marginLeft:'auto'}} onClick={() => pushToast({kind:'paid', icon:'check-circle', title:`Draft PO for ${ws.name}`, meta:`${sample.length} lines · ${oMoney(total)}`})}>
                        <OIcon name="plus"/> Generate PO
                      </button>
                    </div>
                    <div className="off-grid" style={{gridTemplateColumns:'1.6fr 100px 90px 90px 110px'}}>
                      <div className="off-grid-headcell">Product</div>
                      <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>On hand</div>
                      <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Min</div>
                      <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Suggest</div>
                      <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Est cost</div>
                      {sample.map(p => (
                        <div key={p.id} className="off-grid-row">
                          <div className="off-grid-cell off-cell-strong">{p.name} <span className="off-muted" style={{fontWeight:400}}>· {p.strength}</span></div>
                          <div className="off-grid-cell off-cell-num">{window.officeTotalStock(p.id)}</div>
                          <div className="off-grid-cell off-cell-num off-muted">8</div>
                          <div className="off-grid-cell off-cell-num off-cell-strong">24</div>
                          <div className="off-grid-cell off-cell-num">{oMoney(p.cost * 24)}</div>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function OrderNew() {
  const { setScreen, pushToast } = window.useOffice();
  const [ws, setWs] = ordUseState("ws-sigma");
  const wsObj = HO_WHOLESALERS.find(w => w.id === ws);
  const [store, setStore] = ordUseState("S-001");
  const [lines, setLines] = ordUseState([
    { productId: "p002", qty: 60 },
    { productId: "p005", qty: 24 },
    { productId: "p008", qty: 36 },
  ]);

  const total = lines.reduce((s, l) => {
    const p = findP(l.productId);
    return s + (p ? p.cost * l.qty : 0);
  }, 0);

  return (
    <div className="off-screen">
      <header className="off-screen-header">
        <div className="off-screen-header-meta">
          <span className="off-screen-eyebrow">Wholesaler order</span>
          <h2 className="off-screen-title">New purchase order</h2>
        </div>
        <div className="off-screen-actions">
          <button className="btn btn--ghost btn--sm" onClick={() => setScreen("ordering")}>Cancel</button>
          <button className="btn btn--secondary btn--sm">Save as draft</button>
          <button className="btn btn--primary btn--sm" onClick={() => { pushToast({kind:'paid', icon:'check-circle', title:`Order submitted via ${wsObj.channel}`, meta:`${wsObj.name} · ${lines.length} lines · ${oMoney(total)}`}); setScreen("ordering"); }}>
            <OIcon name="check"/> Submit to {wsObj.channel}
          </button>
        </div>
      </header>

      <div className="off-screen-body" style={{maxWidth:1100, margin:'0 auto', width:'100%'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:16}}>
          <div style={{display:'flex', flexDirection:'column', gap:14}}>
            <div className="off-card">
              <div className="wiz-step-header"><span className="wiz-step-number">1</span><h3 className="wiz-step-title">Supplier &amp; destination</h3></div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
                <div className="field">
                  <label className="field-label">Wholesaler</label>
                  <select className="input select" value={ws} onChange={e => setWs(e.target.value)}>
                    {HO_WHOLESALERS.map(w => <option key={w.id} value={w.id}>{w.name} · {w.channel}</option>)}
                  </select>
                </div>
                <div className="field">
                  <label className="field-label">Deliver to</label>
                  <select className="input select" value={store} onChange={e => setStore(e.target.value)}>
                    {OD.STORES.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
                  </select>
                </div>
              </div>
              <div style={{display:'flex', gap:10, flexWrap:'wrap', fontSize:13, color:'var(--text-muted)', marginTop:6}}>
                <span><strong style={{color:'var(--text)'}}>Channel</strong> · {wsObj.channel}</span>
                <span>·</span>
                <span><strong style={{color:'var(--text)'}}>Terms</strong> · {wsObj.terms}</span>
                <span>·</span>
                <span><strong style={{color:'var(--text)'}}>Cutoff</strong> · {wsObj.cutoff}</span>
              </div>
            </div>

            <div className="off-card">
              <div className="wiz-step-header"><span className="wiz-step-number">2</span><h3 className="wiz-step-title">Lines</h3></div>
              <div className="off-grid" style={{gridTemplateColumns:'1.6fr 80px 90px 100px 40px'}}>
                <div className="off-grid-headcell">Product</div>
                <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Qty</div>
                <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Unit cost</div>
                <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Line total</div>
                <div className="off-grid-headcell"></div>
                {lines.map((l, i) => {
                  const p = findP(l.productId);
                  return (
                    <div key={i} className="off-grid-row">
                      <div className="off-grid-cell">
                        <select className="input select" value={l.productId} onChange={e => setLines(arr => arr.map((x, j) => j === i ? { ...x, productId: e.target.value } : x))} style={{height:32, fontSize:13}}>
                          {OD.PRODUCTS.map(p => <option key={p.id} value={p.id}>{p.name} · {p.strength}</option>)}
                        </select>
                      </div>
                      <div className="off-grid-cell off-cell-edit off-cell-num">
                        <input type="number" value={l.qty} onChange={e => setLines(arr => arr.map((x, j) => j === i ? { ...x, qty: parseInt(e.target.value) || 0 } : x))}/>
                      </div>
                      <div className="off-grid-cell off-cell-num">{oMoney(p?.cost || 0)}</div>
                      <div className="off-grid-cell off-cell-num off-cell-strong">{oMoney((p?.cost || 0) * l.qty)}</div>
                      <div className="off-grid-cell">
                        <button className="btn btn--ghost btn--sm" style={{padding:'4px'}} onClick={() => setLines(arr => arr.filter((_, j) => j !== i))}><OIcon name="x"/></button>
                      </div>
                    </div>
                  );
                })}
              </div>
              <button className="btn btn--ghost btn--sm" style={{alignSelf:'flex-start'}} onClick={() => setLines(arr => [...arr, { productId: "p001", qty: 12 }])}>
                <OIcon name="plus"/> Add line
              </button>
            </div>
          </div>

          <div style={{display:'flex', flexDirection:'column', gap:14, position:'sticky', top:0}}>
            <div className="off-card">
              <h3 className="off-card-title">Order summary</h3>
              <div style={{display:'flex', flexDirection:'column', gap:8, fontSize:13}}>
                <div style={{display:'flex', justifyContent:'space-between'}}><span style={{color:'var(--text-muted)'}}>Lines</span><strong className="tabular">{lines.length}</strong></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span style={{color:'var(--text-muted)'}}>Units</span><strong className="tabular">{lines.reduce((s, l) => s + l.qty, 0)}</strong></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span style={{color:'var(--text-muted)'}}>Subtotal</span><strong className="tabular">{oMoney(total)}</strong></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span style={{color:'var(--text-muted)'}}>GST (where applicable)</span><strong className="tabular">{oMoney(total * 0.07)}</strong></div>
                <div style={{display:'flex', justifyContent:'space-between', borderTop:'1px solid var(--border)', paddingTop:8, marginTop:4, fontSize:16, fontWeight:600}}>
                  <span>Total est.</span>
                  <span className="tabular">{oMoney(total * 1.07)}</span>
                </div>
              </div>
            </div>

            <div className="off-card" style={{background:'var(--brand-bg)', borderColor:'var(--brand-border)'}}>
              <h3 className="off-card-title" style={{color:'var(--brand)'}}>Submitting via {wsObj.channel}</h3>
              <div style={{fontSize:13, color:'var(--text-muted)', lineHeight:1.5}}>
                {wsObj.channel === "PharmX" && "Order will be posted to PharmX overnight (next cutoff " + wsObj.cutoff + "). Confirmation back within 30 min of cutoff."}
                {wsObj.channel === "EDI"    && "Order will be transmitted via EDI directly to " + wsObj.name + ". Acknowledgement (ASN) back within 2 hours."}
                {wsObj.channel === "Direct (DHL)" && "Direct order placed with " + wsObj.name + ". DHL tracking number will appear when dispatched."}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// =================================================================
// WHOLESALER INVOICES
// =================================================================
function Invoices() {
  const { pushToast } = window.useOffice();
  const [filter, setFilter] = ordUseState("all");

  const FILTERS = [
    { key: "all",      label: "All",        pred: () => true },
    { key: "open",     label: "Open",       pred: i => i.status === "open" },
    { key: "matched",  label: "Matched",    pred: i => i.status === "matched" },
    { key: "dispute",  label: "Dispute",    pred: i => i.status === "dispute" },
    { key: "voucher",  label: "Voucher-settled", pred: i => i.status === "voucher" },
  ];

  const list = HO_INVOICES.filter(FILTERS.find(f => f.key === filter).pred);
  const totals = {
    open: HO_INVOICES.filter(i => i.status === "open").reduce((s, i) => s + i.total, 0),
    overdue: HO_INVOICES.filter(i => i.status === "open" && /20\d\d/.test(i.due)).reduce((s, i) => s + i.total, 0),
    matched30d: HO_INVOICES.filter(i => i.status === "matched").reduce((s, i) => s + i.received, 0),
    dispute: HO_INVOICES.filter(i => i.status === "dispute").length,
  };

  return (
    <div className="off-screen">
      <header className="off-screen-header">
        <div className="off-screen-header-meta">
          <span className="off-screen-eyebrow">Head-office function</span>
          <h2 className="off-screen-title">Wholesaler invoices</h2>
        </div>
        <div className="off-screen-actions">
          <button className="btn btn--ghost btn--sm">Export to Xero</button>
          <button className="btn btn--secondary btn--sm"><OIcon name="transfer"/> Pull PharmX invoices</button>
          <button className="btn btn--primary btn--sm" onClick={() => pushToast({kind:'paid', icon:'plus', title:'Manual invoice', meta:'Form would open here'})}>
            <OIcon name="plus"/> Manual invoice
          </button>
        </div>
      </header>

      <div className="off-screen-body">
        <div className="off-kpi-grid">
          <KpiCard label="Open balance"      value={oMoney(totals.open)} delta={{text: `${HO_INVOICES.filter(i => i.status === "open").length} invoices outstanding`}}/>
          <KpiCard label="Matched · 30d"     value={oMoney(totals.matched30d)} delta={{dir: "up", text: "Auto-matched to POs"}}/>
          <KpiCard label="In dispute"        value={totals.dispute} delta={{dir: "down", text: "Flag with supplier"}}/>
          <KpiCard label="Voucher-settled"   value={HO_INVOICES.filter(i => i.status === "voucher").length} delta={{text: "Corporate flu programme"}}/>
        </div>

        <div className="off-table">
          <div className="off-table-toolbar">
            <div className="off-filters">
              {FILTERS.map(f => {
                const c = HO_INVOICES.filter(f.pred).length;
                return (
                  <button key={f.key} className={"off-filter" + (filter === f.key ? " off-filter--active" : "")} onClick={() => setFilter(f.key)}>
                    {f.label} <span className="off-filter-count">{c}</span>
                  </button>
                );
              })}
            </div>
            <div style={{marginLeft:'auto', fontSize:12, color:'var(--text-muted)'}}>Auto-match via 3-way (PO ↔ GRN ↔ invoice)</div>
          </div>

          <div className="off-grid" style={{gridTemplateColumns:'140px 1.4fr 110px 130px 130px 130px 130px 110px'}}>
            <div className="off-grid-headcell">Invoice</div>
            <div className="off-grid-headcell">Supplier</div>
            <div className="off-grid-headcell">PO</div>
            <div className="off-grid-headcell">Issued</div>
            <div className="off-grid-headcell">Due</div>
            <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Total</div>
            <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Outstanding</div>
            <div className="off-grid-headcell">Status</div>

            {list.map(i => {
              const ws = HO_WHOLESALERS.find(w => w.id === i.supplier);
              const outstanding = i.total - i.received;
              return (
                <div key={i.id} className="off-grid-row">
                  <div className="off-grid-cell off-cell-mono off-cell-strong">{i.id}</div>
                  <div className="off-grid-cell">
                    {ws.name}
                    {i.note && <div className="off-cell-mono off-muted" style={{marginTop:2, fontSize:11}}>{i.note}</div>}
                  </div>
                  <div className="off-grid-cell off-cell-mono">{i.po}</div>
                  <div className="off-grid-cell off-mono off-muted">{i.issued}</div>
                  <div className="off-grid-cell off-mono off-muted">{i.due}</div>
                  <div className="off-grid-cell off-cell-num off-cell-strong">{oMoney(i.total)}</div>
                  <div className="off-grid-cell off-cell-num" style={{color: outstanding > 0 ? 'var(--text)' : 'var(--paid-text)', fontWeight: 500}}>
                    {outstanding > 0 ? oMoney(outstanding) : "Settled"}
                  </div>
                  <div className="off-grid-cell">
                    {i.status === "open"    && <span className="badge badge--hold"><span className="badge-dot"/> Open</span>}
                    {i.status === "matched" && <span className="badge badge--paid"><span className="badge-dot"/> Matched</span>}
                    {i.status === "dispute" && <span className="badge badge--void"><span className="badge-dot"/> Dispute</span>}
                    {i.status === "voucher" && <span className="badge badge--sched"><span className="badge-dot"/> Voucher</span>}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

// =================================================================
// PAYMENTS & SETTLEMENT (Adyen)
// =================================================================
function Payments() {
  const { pushToast } = window.useOffice();
  const [tab, setTab] = ordUseState("settlements");

  const totals = {
    pendingGross: HO_SETTLEMENTS.filter(s => s.status === "settling").reduce((s, x) => s + x.gross, 0),
    settledMTD:   HO_SETTLEMENTS.reduce((s, x) => s + x.net, 0),
    feesMTD:      HO_SETTLEMENTS.reduce((s, x) => s + x.fees, 0),
    txCount:      HO_SETTLEMENTS.reduce((s, x) => s + x.batch, 0),
  };

  return (
    <div className="off-screen">
      <header className="off-screen-header">
        <div className="off-screen-header-meta">
          <span className="off-screen-eyebrow">Payments · provider · Adyen</span>
          <h2 className="off-screen-title">Settlement &amp; payments</h2>
        </div>
        <div className="off-screen-actions">
          <button className="btn btn--ghost btn--sm">Adyen dashboard</button>
          <button className="btn btn--secondary btn--sm"><OIcon name="transfer"/> Sync settlements</button>
          <button className="btn btn--primary btn--sm" onClick={() => pushToast({kind:'paid', icon:'check', title:'Reconciliation complete', meta:'All Adyen batches matched against POS sales'})}>
            <OIcon name="check"/> Reconcile day
          </button>
        </div>
      </header>

      <div className="off-subtabs">
        <button className={"off-subtab" + (tab === "settlements" ? " off-subtab--active" : "")} onClick={() => setTab("settlements")}>Settlements</button>
        <button className={"off-subtab" + (tab === "stores" ? " off-subtab--active" : "")} onClick={() => setTab("stores")}>By store</button>
        <button className={"off-subtab" + (tab === "accounts" ? " off-subtab--active" : "")} onClick={() => setTab("accounts")}>Settlement accounts</button>
        <button className={"off-subtab" + (tab === "transactions" ? " off-subtab--active" : "")} onClick={() => setTab("transactions")}>Transactions</button>
        <button className={"off-subtab" + (tab === "terminals" ? " off-subtab--active" : "")} onClick={() => setTab("terminals")}>Terminals</button>
        <button className={"off-subtab" + (tab === "fees" ? " off-subtab--active" : "")} onClick={() => setTab("fees")}>Fees &amp; rates</button>
      </div>

      <div className="off-screen-body">
        <div className="off-kpi-grid">
          <KpiCard label="Settling now"  value={oMoney(totals.pendingGross)} delta={{text:"Adyen · T+1 to bank"}}/>
          <KpiCard label="Settled net · 30d" value={oMoney(totals.settledMTD)} delta={{dir:"up", text:"▲ 9.2% vs prior 30d"}}/>
          <KpiCard label="Fees · 30d"    value={oMoney(totals.feesMTD)} delta={{text: ((totals.feesMTD / totals.settledMTD) * 100).toFixed(2) + "% effective rate"}}/>
          <KpiCard label="Transactions"  value={totals.txCount.toLocaleString()} delta={{text:"Across all terminals"}}/>
        </div>

        {tab === "settlements" && (
          <div className="off-table">
            <div className="off-grid" style={{gridTemplateColumns:'130px 100px 130px 90px 120px 120px 130px 110px'}}>
              <div className="off-grid-headcell">Batch ID</div>
              <div className="off-grid-headcell">Provider</div>
              <div className="off-grid-headcell">Date</div>
              <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Tx</div>
              <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Gross</div>
              <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Fees</div>
              <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Net to bank</div>
              <div className="off-grid-headcell">Status</div>
              {HO_SETTLEMENTS.map(s => (
                <div key={s.id} className="off-grid-row">
                  <div className="off-grid-cell off-cell-mono off-cell-strong">{s.id}</div>
                  <div className="off-grid-cell"><span className="badge badge--neutral">{s.provider}</span></div>
                  <div className="off-grid-cell off-mono off-muted">{s.date}</div>
                  <div className="off-grid-cell off-cell-num">{s.batch}</div>
                  <div className="off-grid-cell off-cell-num">{oMoney(s.gross)}</div>
                  <div className="off-grid-cell off-cell-num" style={{color:'var(--void-text)'}}>− {oMoney(s.fees)}</div>
                  <div className="off-grid-cell off-cell-num off-cell-strong" style={{color:'var(--paid-text)'}}>{oMoney(s.net)}</div>
                  <div className="off-grid-cell">
                    {s.status === "settling" ? <span className="badge badge--hold"><span className="badge-dot"/> Settling</span> : <span className="badge badge--paid"><span className="badge-dot"/> Settled</span>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {tab === "stores" && <PaymentsByStore/>}

        {tab === "accounts" && <SettlementAccounts/>}

        {tab === "transactions" && (
          <div className="off-table">
            <div className="off-grid" style={{gridTemplateColumns:'130px 110px 1fr 100px 110px 130px 100px 110px'}}>
              <div className="off-grid-headcell">Time</div>
              <div className="off-grid-headcell">Method</div>
              <div className="off-grid-headcell">Reference</div>
              <div className="off-grid-headcell">Store</div>
              <div className="off-grid-headcell">Terminal</div>
              <div className="off-grid-headcell">Card / wallet</div>
              <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Amount</div>
              <div className="off-grid-headcell">Result</div>
              {[
                { ts:"14:32",  m:"Eftpos · tap", ref:"Sale 4821", store:"S-001", term:"T-CMW-02", card:"Visa **4421",  amt: 60.22,  ok:true },
                { ts:"14:18",  m:"Mobile wallet", ref:"Sale 4820", store:"S-001", term:"T-CMW-01", card:"Apple Pay",     amt: 148.20, ok:true },
                { ts:"13:48",  m:"Cash",         ref:"Sale 4818", store:"S-001", term:"—",         card:"—",             amt: 28.45,  ok:true },
                { ts:"13:32",  m:"Eftpos · ins.",ref:"Sale 4817", store:"S-002", term:"T-GLI-01", card:"Mastercard **0114", amt:38.95, ok:true },
                { ts:"13:14",  m:"Eftpos · tap", ref:"Sale 4816", store:"S-003", term:"T-RNG-01", card:"Visa **8814",   amt: 92.10,  ok:true },
                { ts:"12:48",  m:"Eftpos · tap", ref:"Sale 4814", store:"S-001", term:"T-CMW-02", card:"Visa **8841",   amt: 11.20,  ok:false },
                { ts:"12:14",  m:"Refund",       ref:"REF-4814",  store:"S-001", term:"T-CMW-02", card:"Visa **8841",   amt: -24.95, ok:true },
                { ts:"11:48",  m:"Mobile wallet",ref:"Sale 4815", store:"S-001", term:"T-CMW-01", card:"Google Pay",    amt: 92.20,  ok:true },
                { ts:"11:14",  m:"Eftpos · ins.",ref:"Sale 4813", store:"S-002", term:"T-GLI-01", card:"Visa Debit",    amt: 18.50,  ok:true },
                { ts:"10:48",  m:"Eftpos · tap", ref:"Sale 4811", store:"S-003", term:"T-RNG-02", card:"Mastercard **2218", amt:46.40, ok:true },
              ].map((t, i) => (
                <div key={i} className="off-grid-row">
                  <div className="off-grid-cell off-mono off-muted">{t.ts}</div>
                  <div className="off-grid-cell">{t.m}</div>
                  <div className="off-grid-cell off-cell-mono">{t.ref}</div>
                  <div className="off-grid-cell off-mono">{findS(t.store)?.code}</div>
                  <div className="off-grid-cell off-cell-mono">{t.term}</div>
                  <div className="off-grid-cell off-cell-mono">{t.card}</div>
                  <div className="off-grid-cell off-cell-num off-cell-strong" style={{color: t.amt < 0 ? 'var(--void)' : 'var(--text)'}}>{oMoney(t.amt)}</div>
                  <div className="off-grid-cell">
                    {t.ok ? <span className="badge badge--paid"><span className="badge-dot"/> Approved</span> : <span className="badge badge--void"><span className="badge-dot"/> Declined</span>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {tab === "terminals" && (
          <div className="off-table">
            <div className="off-grid" style={{gridTemplateColumns:'130px 1fr 130px 110px 130px 130px 110px'}}>
              <div className="off-grid-headcell">Terminal</div>
              <div className="off-grid-headcell">Store · register</div>
              <div className="off-grid-headcell">Model</div>
              <div className="off-grid-headcell">Connection</div>
              <div className="off-grid-headcell">Firmware</div>
              <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Today</div>
              <div className="off-grid-headcell">Status</div>
              {[
                { id:"T-CMW-01", store:"S-001", reg:"Reg 01", model:"Adyen S1F2 · S1E", conn:"Wi-Fi", fw:"v2.84.1", today: 2418.50, ok:true },
                { id:"T-CMW-02", store:"S-001", reg:"Reg 02", model:"Adyen S1F2 · S1E", conn:"Ethernet", fw:"v2.84.1", today: 1812.30, ok:true },
                { id:"T-CMW-03", store:"S-001", reg:"Reg 03", model:"Adyen V400m",     conn:"4G",  fw:"v2.79.4", today: 589.85, ok:false },
                { id:"T-GLI-01", store:"S-002", reg:"Reg 01", model:"Adyen S1F2 · S1E", conn:"Wi-Fi", fw:"v2.84.1", today: 1318.20, ok:true },
                { id:"T-GLI-02", store:"S-002", reg:"Reg 02", model:"Adyen S1F2 · S1E", conn:"Wi-Fi", fw:"v2.84.1", today: 1100.20, ok:true },
                { id:"T-RNG-01", store:"S-003", reg:"Reg 01", model:"Adyen S1F2 · S1E", conn:"Wi-Fi", fw:"v2.84.1", today: 1820.50, ok:true },
                { id:"T-RNG-02", store:"S-003", reg:"Reg 02", model:"Adyen V400m",     conn:"4G",  fw:"v2.84.1", today: 1300.35, ok:true },
              ].map(t => (
                <div key={t.id} className="off-grid-row">
                  <div className="off-grid-cell off-cell-mono off-cell-strong">{t.id}</div>
                  <div className="off-grid-cell">{findS(t.store)?.name} · {t.reg}</div>
                  <div className="off-grid-cell">{t.model}</div>
                  <div className="off-grid-cell off-cell-mono">{t.conn}</div>
                  <div className="off-grid-cell off-cell-mono">{t.fw}</div>
                  <div className="off-grid-cell off-cell-num">{oMoney(t.today)}</div>
                  <div className="off-grid-cell">
                    {t.ok ? <span className="badge badge--paid"><span className="badge-dot"/> Online</span> : <span className="badge badge--hold"><span className="badge-dot"/> Firmware update</span>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {tab === "fees" && (
          <div className="off-card" style={{maxWidth:720}}>
            <h3 className="off-card-title">Adyen pricing schedule</h3>
            <div style={{fontSize:13, color:'var(--text-muted)', marginBottom:14}}>Interchange++ pricing, contracted Jan 2026.</div>
            <div className="off-grid" style={{gridTemplateColumns:'1fr 130px 130px 130px'}}>
              <div className="off-grid-headcell">Card scheme</div>
              <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Domestic</div>
              <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Intl</div>
              <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Premium</div>
              {[
                { scheme: "Visa Debit",       dom: "0.20% + $0.05", intl: "0.85% + $0.05", prem: "1.20%" },
                { scheme: "Visa Credit",      dom: "0.55% + $0.05", intl: "1.40%",         prem: "1.85%" },
                { scheme: "Mastercard Debit", dom: "0.20% + $0.05", intl: "0.85% + $0.05", prem: "1.20%" },
                { scheme: "Mastercard Credit",dom: "0.55% + $0.05", intl: "1.40%",         prem: "1.85%" },
                { scheme: "American Express", dom: "1.60%",         intl: "1.90%",         prem: "—" },
                { scheme: "EFTPOS",           dom: "0.10% + $0.04", intl: "—",             prem: "—" },
                { scheme: "Apple Pay · Google Pay", dom: "Underlying card rate", intl: "Underlying", prem: "Underlying" },
              ].map((r, i) => (
                <div key={i} className="off-grid-row">
                  <div className="off-grid-cell off-cell-strong">{r.scheme}</div>
                  <div className="off-grid-cell off-cell-mono" style={{textAlign:'right'}}>{r.dom}</div>
                  <div className="off-grid-cell off-cell-mono" style={{textAlign:'right'}}>{r.intl}</div>
                  <div className="off-grid-cell off-cell-mono" style={{textAlign:'right'}}>{r.prem}</div>
                </div>
              ))}
            </div>
            <div style={{fontSize:12, color:'var(--text-muted)', marginTop:14, padding:'10px 14px', background:'var(--bg-subtle)', borderRadius:8}}>
              <strong style={{color:'var(--text)'}}>Adyen platform fee:</strong> $0.10 per transaction. <strong style={{color:'var(--text)'}}>Settlement:</strong> T+1 to nominated bank (NAB · ****8214).
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// =================================================================
// CORPORATE VOUCHERS (flu programme etc.)
// =================================================================
function Vouchers() {
  const { setScreen, setScreenState, pushToast } = window.useOffice();

  return (
    <div className="off-screen">
      <header className="off-screen-header">
        <div className="off-screen-header-meta">
          <span className="off-screen-eyebrow">Head-office function</span>
          <h2 className="off-screen-title">Corporate voucher programmes</h2>
        </div>
        <div className="off-screen-actions">
          <button className="btn btn--ghost btn--sm">Export claims</button>
          <button className="btn btn--secondary btn--sm"><OIcon name="printer"/> Voucher batch</button>
          <button className="btn btn--primary btn--sm" onClick={() => pushToast({kind:'sched', icon:'plus', title:'New programme', meta:'Voucher programme wizard'})}>
            <OIcon name="plus"/> New programme
          </button>
        </div>
      </header>

      <div className="off-screen-body">
        <div className="off-kpi-grid">
          <KpiCard label="Active programmes"   value={HO_VOUCHER_PROGRAMS.filter(p => p.status === "active").length} delta={{text: "Flu · COVID · Travel"}}/>
          <KpiCard label="Vouchers issued"     value={HO_VOUCHER_PROGRAMS.filter(p => p.status === "active").reduce((s, p) => s + p.vouchersIssued, 0).toLocaleString()} delta={{text:"Across active programmes"}}/>
          <KpiCard label="Redeemed"            value={`${Math.round(HO_VOUCHER_PROGRAMS.filter(p => p.status === "active").reduce((s, p) => s + p.vouchersRedeemed, 0) / HO_VOUCHER_PROGRAMS.filter(p => p.status === "active").reduce((s, p) => s + p.vouchersIssued, 0) * 100)}%`} delta={{dir:"up", text: HO_VOUCHER_PROGRAMS.filter(p => p.status === "active").reduce((s, p) => s + p.vouchersRedeemed, 0).toLocaleString() + " redeemed"}}/>
          <KpiCard label="Programme value"     value={oMoney(HO_VOUCHER_PROGRAMS.filter(p => p.status === "active").reduce((s, p) => s + p.totalValue, 0))} delta={{text: "Issued · pre-settlement"}}/>
        </div>

        <div style={{display:'flex', flexDirection:'column', gap:14}}>
          {HO_VOUCHER_PROGRAMS.map(p => {
            const redemptionPct = Math.round((p.vouchersRedeemed / p.vouchersIssued) * 100);
            return (
              <div key={p.id} className="off-card" style={{padding:0, overflow:'hidden'}}>
                <div style={{display:'flex', alignItems:'center', gap:14, padding:'16px 20px', borderBottom:'1px solid var(--border)'}}>
                  <div style={{width:48, height:48, borderRadius:12, background: p.status === "active" ? 'var(--brand)' : 'var(--bg-muted)', color: p.status === "active" ? 'var(--brand-fg)' : 'var(--text-muted)', display:'grid', placeItems:'center'}}>
                    <OIcon name={p.name.toLowerCase().includes("flu") ? "pill" : p.name.toLowerCase().includes("covid") ? "shield" : "loyalty"} width={22} height={22}/>
                  </div>
                  <div style={{flex:1}}>
                    <div style={{display:'flex', alignItems:'center', gap:10}}>
                      <div style={{fontSize:17, fontWeight:600, letterSpacing:'-0.015em'}}>{p.name}</div>
                      {p.status === "active" ? <span className="badge badge--paid"><span className="badge-dot"/> Active</span> : <span className="badge badge--neutral"><span className="badge-dot"/> Closed</span>}
                    </div>
                    <div className="off-mono off-muted" style={{fontSize:12, marginTop:2}}>{p.id} · {p.sponsor} · Season {p.season} · {p.corporates} corporates</div>
                  </div>
                  <button className="btn btn--ghost btn--sm">View claims</button>
                </div>

                <div style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:0, borderBottom:'1px solid var(--border)'}}>
                  <div style={{padding:'14px 20px', borderRight:'1px solid var(--border)'}}>
                    <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Vouchers issued</div>
                    <div style={{fontSize:22, fontWeight:600, letterSpacing:'-0.015em', marginTop:2, fontVariantNumeric:'tabular-nums'}}>{p.vouchersIssued.toLocaleString()}</div>
                  </div>
                  <div style={{padding:'14px 20px', borderRight:'1px solid var(--border)'}}>
                    <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Redeemed</div>
                    <div style={{fontSize:22, fontWeight:600, letterSpacing:'-0.015em', marginTop:2, fontVariantNumeric:'tabular-nums'}}>{p.vouchersRedeemed.toLocaleString()} <span style={{fontSize:13, color:'var(--text-muted)', fontWeight:400}}>· {redemptionPct}%</span></div>
                    <div style={{height:5, background:'var(--bg-muted)', borderRadius:3, marginTop:6, overflow:'hidden'}}>
                      <div style={{height:'100%', width: redemptionPct + "%", background: p.status === "active" ? 'var(--brand)' : 'var(--text-subtle)'}}/>
                    </div>
                  </div>
                  <div style={{padding:'14px 20px', borderRight:'1px solid var(--border)'}}>
                    <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Value per voucher</div>
                    <div style={{fontSize:22, fontWeight:600, letterSpacing:'-0.015em', marginTop:2, fontVariantNumeric:'tabular-nums'}}>${p.valuePerVoucher.toFixed(2)}</div>
                  </div>
                  <div style={{padding:'14px 20px', borderRight:'1px solid var(--border)'}}>
                    <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Total value</div>
                    <div style={{fontSize:22, fontWeight:600, letterSpacing:'-0.015em', marginTop:2, fontVariantNumeric:'tabular-nums'}}>{oMoney(p.totalValue)}</div>
                  </div>
                  <div style={{padding:'14px 20px'}}>
                    <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Vaccine units</div>
                    <div style={{fontSize:22, fontWeight:600, letterSpacing:'-0.015em', marginTop:2, fontVariantNumeric:'tabular-nums'}}>{p.vaccineUnits > 0 ? p.vaccineUnits.toLocaleString() : "—"}</div>
                  </div>
                </div>

                <div style={{padding:'12px 20px', fontSize:12, color:'var(--text-muted)', background:'var(--bg-subtle)'}}>
                  {p.notes}
                </div>
              </div>
            );
          })}
        </div>

        <div className="off-card" style={{marginTop:18}}>
          <div className="off-card-header">
            <h3 className="off-card-title">Workplace Flu 2026 · participating corporates</h3>
            <button className="btn btn--ghost btn--sm">Add corporate</button>
          </div>
          <div className="off-grid" style={{gridTemplateColumns:'1.6fr 100px 130px 130px 110px'}}>
            <div className="off-grid-headcell">Corporate</div>
            <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Staff</div>
            <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Vouchers</div>
            <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Redeemed</div>
            <div className="off-grid-headcell">Status</div>
            {HO_CORPORATES.map(c => {
              const pct = Math.round((c.redeemed / c.vouchers) * 100);
              return (
                <div key={c.name} className="off-grid-row">
                  <div className="off-grid-cell off-cell-strong">{c.name}</div>
                  <div className="off-grid-cell off-cell-num">{c.staff}</div>
                  <div className="off-grid-cell off-cell-num">{c.vouchers}</div>
                  <div className="off-grid-cell off-cell-num">{c.redeemed} <span className="off-muted">· {pct}%</span></div>
                  <div className="off-grid-cell">
                    {pct >= 80 ? <span className="badge badge--paid"><span className="badge-dot"/> Strong</span> : pct >= 50 ? <span className="badge badge--hold"><span className="badge-dot"/> On track</span> : <span className="badge badge--neutral"><span className="badge-dot"/> Encourage</span>}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

window.OFFICE_SCREENS = Object.assign(window.OFFICE_SCREENS || {}, {
  ordering: Ordering,
  orderNew: OrderNew,
  invoices: Invoices,
  payments: Payments,
  vouchers: Vouchers,
});

// -----------------------------------------------------------------
// SETTLEMENT ACCOUNTS — where Adyen pays into
// -----------------------------------------------------------------
function SettlementAccounts() {
  const { pushToast } = window.useOffice();
  const [addOpen, setAddOpen] = ordUseState(false);
  const STORE_COLOURS = { "S-001": "var(--teal-700)", "S-002": "var(--navy-600)", "S-003": "var(--violet-600)" };

  const ACCOUNTS = [
    {
      id: "SA-MAIN", label: "Group operating account",
      bank: "NAB Business",
      bsb: "083 004", account: "****8214",
      balance: 184220.10,
      stores: ["S-001","S-002","S-003"],
      cadence: "T+1",
      currency: "AUD",
      primary: true,
      status: "active",
      todayIn: 12303.20, mtdIn: 176751.29,
      adyenMerchantId: "CoreIQGroup_AU",
      lastDeposit: "Today 10:00 · $4,448.84",
      purpose: "All POS card receipts settle here unless overridden by store routing.",
    },
    {
      id: "SA-CMW-TRUST", label: "Camberwell · PBS trust",
      bank: "CommBank",
      bsb: "062 902", account: "****1144",
      balance: 38240.50,
      stores: ["S-001"],
      cadence: "Daily",
      currency: "AUD",
      primary: false,
      status: "active",
      todayIn: 1812.30, mtdIn: 28104.20,
      adyenMerchantId: "CoreIQGroup_AU_S001",
      lastDeposit: "Today 09:48 · $1,812.30",
      purpose: "Camberwell PBS Online Claiming payments only. Separated by accountant.",
    },
    {
      id: "SA-GLI-OPS", label: "Glen Iris · operating",
      bank: "NAB Business",
      bsb: "083 004", account: "****8842",
      balance: 22418.40,
      stores: ["S-002"],
      cadence: "T+1",
      currency: "AUD",
      primary: false,
      status: "active",
      todayIn: 2418.00, mtdIn: 42118.40,
      adyenMerchantId: "CoreIQGroup_AU_S002",
      lastDeposit: "Today 10:00 · $1,488.20",
      purpose: "Routed for Glen Iris card receipts. Used for local supplier payments.",
    },
    {
      id: "SA-RNG-OPS", label: "Ringwood · operating",
      bank: "Westpac Business",
      bsb: "033 088", account: "****4402",
      balance: 28110.65,
      stores: ["S-003"],
      cadence: "T+1",
      currency: "AUD",
      primary: false,
      status: "active",
      todayIn: 3120.85, mtdIn: 58210.20,
      adyenMerchantId: "CoreIQGroup_AU_S003",
      lastDeposit: "Today 10:00 · $1,920.40",
      purpose: "Routed for Ringwood card receipts.",
    },
    {
      id: "SA-VOUCHER", label: "Corporate voucher clearing",
      bank: "Macquarie Business",
      bsb: "182 222", account: "****1108",
      balance: 18420.80,
      stores: [],
      cadence: "Monthly",
      currency: "AUD",
      primary: false,
      status: "active",
      todayIn: 0, mtdIn: 32140.00,
      adyenMerchantId: "—",
      lastDeposit: "01/05/2026 · $32,140.00",
      purpose: "Receives monthly settlement from corporate sponsors (Workplace Flu, COVID booster).",
    },
    {
      id: "SA-AMEX", label: "AmEx settlement",
      bank: "NAB Business",
      bsb: "083 004", account: "****8214",
      balance: 0,
      stores: ["S-001","S-002","S-003"],
      cadence: "T+3",
      currency: "AUD",
      primary: false,
      status: "active",
      todayIn: 218.40, mtdIn: 4128.20,
      adyenMerchantId: "CoreIQGroup_AU",
      lastDeposit: "Yesterday · $412.20",
      purpose: "Separate settlement schedule per AmEx contract. Merges into operating on T+3.",
      virtual: true,
    },
    {
      id: "SA-RESERVE", label: "Adyen reserve · holdback",
      bank: "Held by Adyen",
      bsb: "—", account: "—",
      balance: 8420.00,
      stores: [],
      cadence: "Released quarterly",
      currency: "AUD",
      primary: false,
      status: "reserve",
      todayIn: 0, mtdIn: 0,
      adyenMerchantId: "CoreIQGroup_AU",
      lastDeposit: "Released 01/04/2026 · $8,420.00",
      purpose: "Adyen holds 1.5% of card volume against chargeback risk. Released quarterly.",
    },
  ];

  const totals = {
    balance: ACCOUNTS.reduce((s, a) => s + a.balance, 0),
    todayIn: ACCOUNTS.reduce((s, a) => s + a.todayIn, 0),
    mtdIn:   ACCOUNTS.reduce((s, a) => s + a.mtdIn, 0),
    active:  ACCOUNTS.filter(a => a.status === "active").length,
  };

  return (
    <>
      <div className="off-kpi-grid">
        <KpiCard label="Combined balance"   value={oMoney(totals.balance)} delta={{text: `${totals.active} active accounts`}}/>
        <KpiCard label="Settling in today"  value={oMoney(totals.todayIn)} delta={{dir:"up", text: "Across all accounts"}}/>
        <KpiCard label="Inflows · 30d"      value={oMoney(totals.mtdIn)} delta={{text: "Card + PBS + voucher"}}/>
        <KpiCard label="Adyen reserve"      value={oMoney(ACCOUNTS.find(a => a.id === "SA-RESERVE").balance)} delta={{text: "Released quarterly"}}/>
      </div>

      <div className="off-card" style={{padding:'14px 18px', marginBottom:14, flexDirection:'row', alignItems:'center', gap:14}}>
        <div style={{width:36, height:36, borderRadius:9, background:'var(--brand-bg)', color:'var(--brand)', display:'grid', placeItems:'center'}}>
          <OIcon name="info"/>
        </div>
        <div style={{flex:1, fontSize:13, color:'var(--text-muted)', lineHeight:1.5}}>
          Adyen routes card receipts to these bank accounts on the cadence shown. The default operating account catches anything not explicitly routed. To change routing per store, open the account and update the Adyen sub-merchant mapping.
        </div>
        <button className="btn btn--ghost btn--sm">Routing rules</button>
        <button className="btn btn--primary btn--sm" onClick={() => setAddOpen(true)}>
          <OIcon name="plus"/> Link account
        </button>
      </div>

      <div style={{display:'flex', flexDirection:'column', gap:12}}>
        {ACCOUNTS.map(a => (
          <div key={a.id} className="off-card" style={{padding:0, overflow:'hidden'}}>
            <div style={{display:'flex', alignItems:'center', gap:14, padding:'14px 18px', borderBottom:'1px solid var(--border)'}}>
              <div style={{
                width:44, height:44, borderRadius:10,
                background: a.status === "reserve" ? 'var(--sched-bg)' : a.primary ? 'var(--brand)' : 'var(--bg-muted)',
                color: a.status === "reserve" ? 'var(--sched)' : a.primary ? 'var(--brand-fg)' : 'var(--text-muted)',
                display:'grid', placeItems:'center',
              }}>
                <OIcon name={a.status === "reserve" ? "lock" : a.virtual ? "card" : "cash"} width={20} height={20}/>
              </div>
              <div style={{flex:1}}>
                <div style={{display:'flex', alignItems:'center', gap:8}}>
                  <span style={{fontSize:15, fontWeight:600, letterSpacing:'-0.01em'}}>{a.label}</span>
                  {a.primary && <span className="badge badge--brand"><span className="badge-dot"/> Primary</span>}
                  {a.virtual && <span className="badge badge--neutral">Virtual</span>}
                  {a.status === "reserve" && <span className="badge badge--sched"><span className="badge-dot"/> Reserve</span>}
                </div>
                <div className="off-cell-mono off-muted" style={{fontSize:12, marginTop:2}}>
                  {a.bank}{a.bsb !== "—" && ` · BSB ${a.bsb} · ${a.account}`} · {a.cadence}
                </div>
              </div>
              <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
                {a.stores.length === 3 && <span className="badge badge--neutral">All stores</span>}
                {a.stores.length > 0 && a.stores.length < 3 && a.stores.map(sid => {
                  const store = findS(sid);
                  return <span key={sid} className="badge badge--neutral" style={{background:STORE_COLOURS[sid] + "22", color:STORE_COLOURS[sid], borderColor:STORE_COLOURS[sid] + "44"}}>{store.code}</span>;
                })}
                {a.stores.length === 0 && <span className="badge badge--neutral">Group-only</span>}
              </div>
              <button className="btn btn--ghost btn--sm" onClick={() => pushToast({kind:'paid', icon:'info', title:`Account · ${a.id}`, meta:'Detail would open here'})}>Open</button>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0}}>
              <div style={{padding:'14px 18px', borderRight:'1px solid var(--border)'}}>
                <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Balance</div>
                <div style={{fontSize:22, fontWeight:600, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.015em', marginTop:2}}>{oMoney(a.balance)}</div>
              </div>
              <div style={{padding:'14px 18px', borderRight:'1px solid var(--border)'}}>
                <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Settling today</div>
                <div style={{fontSize:22, fontWeight:600, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.015em', marginTop:2, color: a.todayIn > 0 ? 'var(--paid-text)' : 'var(--text-subtle)'}}>{a.todayIn > 0 ? oMoney(a.todayIn) : "—"}</div>
              </div>
              <div style={{padding:'14px 18px', borderRight:'1px solid var(--border)'}}>
                <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Inflows · 30d</div>
                <div style={{fontSize:22, fontWeight:600, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.015em', marginTop:2}}>{a.mtdIn > 0 ? oMoney(a.mtdIn) : "—"}</div>
              </div>
              <div style={{padding:'14px 18px'}}>
                <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Adyen merchant</div>
                <div className="off-cell-mono" style={{fontSize:13, fontWeight:500, marginTop:6}}>{a.adyenMerchantId}</div>
              </div>
            </div>

            <div style={{padding:'10px 18px', background:'var(--bg-subtle)', fontSize:12, color:'var(--text-muted)', borderTop:'1px solid var(--border)', display:'flex', gap:14, alignItems:'center'}}>
              <span><strong style={{color:'var(--text)'}}>Last deposit</strong> · {a.lastDeposit}</span>
              <span>·</span>
              <span style={{flex:1}}>{a.purpose}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Routing rules summary */}
      <div className="off-card" style={{marginTop:14}}>
        <div className="off-card-header">
          <h3 className="off-card-title">Active routing rules</h3>
          <button className="btn btn--ghost btn--sm">Edit rules</button>
        </div>
        <div className="off-grid" style={{gridTemplateColumns:'90px 1fr 1fr 1fr 120px'}}>
          <div className="off-grid-headcell">Priority</div>
          <div className="off-grid-headcell">When</div>
          <div className="off-grid-headcell">Card scheme</div>
          <div className="off-grid-headcell">Settles to</div>
          <div className="off-grid-headcell">Cadence</div>
          {[
            { p: 1, when: "All stores · AmEx",           scheme: "American Express", to: "AmEx settlement",        cad: "T+3" },
            { p: 2, when: "Camberwell · PBS receipts",   scheme: "Any",              to: "Camberwell PBS trust",   cad: "Daily" },
            { p: 3, when: "Glen Iris · all card",        scheme: "Visa / MC / EFTPOS / Wallet", to: "Glen Iris · operating", cad: "T+1" },
            { p: 4, when: "Ringwood · all card",         scheme: "Visa / MC / EFTPOS / Wallet", to: "Ringwood · operating",  cad: "T+1" },
            { p: 5, when: "Everything else · default",   scheme: "Any",              to: "Group operating account", cad: "T+1" },
          ].map((r, i) => (
            <div key={i} className="off-grid-row">
              <div className="off-grid-cell off-cell-num off-cell-strong">{r.p}</div>
              <div className="off-grid-cell">{r.when}</div>
              <div className="off-grid-cell off-mono off-muted">{r.scheme}</div>
              <div className="off-grid-cell off-cell-strong">{r.to}</div>
              <div className="off-grid-cell">{r.cad}</div>
            </div>
          ))}
        </div>
      </div>

      {addOpen && <LinkAccountModal onClose={() => setAddOpen(false)} onSubmit={(label, bank) => { setAddOpen(false); pushToast({kind:'paid', icon:'check-circle', title:'Bank account linked', meta:`${label} · ${bank}`}); }}/>}
    </>
  );
}

// -----------------------------------------------------------------
// Link account modal — bank details + Adyen routing
// -----------------------------------------------------------------
function LinkAccountModal({ onClose, onSubmit }) {
  const [step, setStep] = ordUseState(0);
  const STEPS = ["Identify", "Bank details", "Adyen routing", "Verify"];

  const [form, setForm] = ordUseState({
    label: "", purpose: "operating",
    holderName: "CoreIQ Pharmacy Group Pty Ltd",
    bank: "NAB Business",
    bsb: "", account: "", accountConfirm: "",
    currency: "AUD", cadence: "T+1", primary: false,
    stores: ["S-001","S-002","S-003"],
    schemes: { visa: true, mastercard: true, eftpos: true, amex: false, wallet: true },
    adyenMerchantId: "CoreIQGroup_AU",
    micro: false,
  });

  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }
  function toggleStore(id) { setForm(f => ({ ...f, stores: f.stores.includes(id) ? f.stores.filter(x => x !== id) : [...f.stores, id] })); }
  function toggleScheme(id) { setForm(f => ({ ...f, schemes: { ...f.schemes, [id]: !f.schemes[id] } })); }

  const bsbValid = /^\d{3}\s?-?\s?\d{3}$/.test(form.bsb);
  const acctValid = /^\d{6,10}$/.test(form.account.replace(/\s/g, ""));
  const acctMatches = form.account.replace(/\s/g, "") === form.accountConfirm.replace(/\s/g, "");

  const stepValid = (() => {
    if (step === 0) return form.label && form.purpose && form.holderName;
    if (step === 1) return bsbValid && acctValid && acctMatches && form.bank;
    if (step === 2) return form.stores.length > 0 || form.purpose === "voucher";
    return true;
  })();

  function submit() {
    onSubmit(form.label, `${form.bank} · BSB ${form.bsb} · •••• ${form.account.slice(-4)}`);
  }

  return (
    <div className="app-overlay" onClick={onClose}>
      <div className="app-overlay-card" style={{width:680, maxHeight:'92vh'}} onClick={e => e.stopPropagation()}>
        <div className="app-overlay-head">
          <div style={{display:'flex', alignItems:'center', gap:12}}>
            <div style={{width:34, height:34, borderRadius:8, background:'var(--brand)', color:'var(--brand-fg)', display:'grid', placeItems:'center'}}><OIcon name="cash"/></div>
            <h3 style={{margin:0}}>Link a bank account for settlement</h3>
          </div>
          <button className="off-topbar-btn" onClick={onClose} style={{marginLeft:'auto', border:'none'}}><OIcon name="x"/></button>
        </div>

        {/* Stepper */}
        <div style={{padding:'12px 22px', borderBottom:'1px solid var(--border)', background:'var(--bg-subtle)'}}>
          <div style={{display:'flex', alignItems:'center', gap:8}}>
            {STEPS.map((label, i) => (
              <React.Fragment key={i}>
                <div style={{display:'flex', alignItems:'center', gap:8, flex:1, color: i === step ? 'var(--text)' : i < step ? 'var(--paid-text)' : 'var(--text-subtle)'}}>
                  <div style={{
                    width:22, height:22, borderRadius:99,
                    background: i === step ? 'var(--brand)' : i < step ? 'var(--paid)' : 'var(--bg-muted)',
                    color: i === step ? 'var(--brand-fg)' : i < step ? 'var(--paid-fg)' : 'var(--text-subtle)',
                    border: '1px solid ' + (i === step ? 'var(--brand)' : i < step ? 'var(--paid)' : 'var(--border-strong)'),
                    display:'grid', placeItems:'center', fontSize:11, fontWeight:600,
                  }}>
                    {i < step ? <OIcon name="check" width={10} height={10}/> : i + 1}
                  </div>
                  <span style={{fontSize:12, fontWeight:500}}>{label}</span>
                </div>
                {i < STEPS.length - 1 && <div style={{flex:0.4, height:1, background: i < step ? 'var(--paid)' : 'var(--border-strong)'}}/>}
              </React.Fragment>
            ))}
          </div>
        </div>

        <div style={{padding:'22px', overflowY:'auto', flex:1}}>
          {step === 0 && (
            <>
              <h3 style={{margin:'0 0 4px', fontSize:16, fontWeight:600, letterSpacing:'-0.01em'}}>What is this account for?</h3>
              <p style={{margin:'0 0 18px', fontSize:13, color:'var(--text-muted)'}}>A label helps your team recognise it on the settlement screen.</p>

              <div className="field">
                <label className="field-label">Account label <span className="field-required">*</span></label>
                <input className="input" autoFocus placeholder="e.g. Ringwood operating account" value={form.label} onChange={e => set("label", e.target.value)}/>
                <div className="field-help">Internal name only — your bank doesn't see this.</div>
              </div>

              <div className="field" style={{marginTop:12}}>
                <label className="field-label">Purpose</label>
                <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:8}}>
                  {[
                    { id: "operating",  label: "Operating", desc: "Day-to-day card receipts" },
                    { id: "pbs-trust",  label: "PBS trust", desc: "PBS Online Claiming only" },
                    { id: "voucher",    label: "Voucher clearing", desc: "Corporate sponsor payments" },
                    { id: "amex",       label: "AmEx settlement",  desc: "Separate T+3 cadence" },
                  ].map(p => (
                    <label key={p.id} style={{display:'flex', flexDirection:'column', gap:2, padding:'12px 14px', border: '1px solid ' + (form.purpose === p.id ? 'var(--brand)' : 'var(--border)'), background: form.purpose === p.id ? 'var(--brand-bg)' : 'transparent', borderRadius:8, cursor:'pointer'}}>
                      <div style={{display:'flex', alignItems:'center', gap:8}}>
                        <input type="radio" checked={form.purpose === p.id} onChange={() => set("purpose", p.id)}/>
                        <span style={{fontWeight:500, fontSize:13}}>{p.label}</span>
                      </div>
                      <span style={{fontSize:12, color:'var(--text-muted)', paddingLeft:24}}>{p.desc}</span>
                    </label>
                  ))}
                </div>
              </div>

              <div className="field" style={{marginTop:12}}>
                <label className="field-label">Account holder name <span className="field-required">*</span></label>
                <input className="input" value={form.holderName} onChange={e => set("holderName", e.target.value)}/>
                <div className="field-help">Must match the name on the bank account exactly — used by Adyen to verify ownership.</div>
              </div>
            </>
          )}

          {step === 1 && (
            <>
              <h3 style={{margin:'0 0 4px', fontSize:16, fontWeight:600, letterSpacing:'-0.01em'}}>Bank account details</h3>
              <p style={{margin:'0 0 18px', fontSize:13, color:'var(--text-muted)'}}>Australian BSB + account number. Adyen will run a $0 verification when you finish.</p>

              <div className="field">
                <label className="field-label">Bank <span className="field-required">*</span></label>
                <select className="input select" value={form.bank} onChange={e => set("bank", e.target.value)}>
                  <option>NAB Business</option><option>CommBank</option><option>Westpac Business</option>
                  <option>ANZ Business</option><option>Macquarie Business</option><option>Bendigo / Adelaide</option>
                  <option>Other AU bank</option>
                </select>
              </div>

              <div style={{display:'grid', gridTemplateColumns:'180px 1fr', gap:12, marginTop:12}}>
                <div className="field">
                  <label className="field-label">BSB <span className="field-required">*</span></label>
                  <input className={"input tabular" + (form.bsb && !bsbValid ? " input--error" : "")} value={form.bsb} onChange={e => set("bsb", e.target.value)} placeholder="000-000" maxLength={7}/>
                  <div className="field-help">6 digits · e.g. 083-004</div>
                </div>
                <div className="field">
                  <label className="field-label">Account number <span className="field-required">*</span></label>
                  <input className={"input tabular" + (form.account && !acctValid ? " input--error" : "")} value={form.account} onChange={e => set("account", e.target.value)} placeholder="6–10 digits"/>
                </div>
              </div>

              <div className="field" style={{marginTop:12}}>
                <label className="field-label">Confirm account number <span className="field-required">*</span></label>
                <input className={"input tabular" + (form.accountConfirm && !acctMatches ? " input--error" : "")} value={form.accountConfirm} onChange={e => set("accountConfirm", e.target.value)} placeholder="Re-enter account number"/>
                {form.accountConfirm && !acctMatches && <div className="field-error">Account numbers don't match.</div>}
              </div>

              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginTop:12}}>
                <div className="field">
                  <label className="field-label">Currency</label>
                  <select className="input select" value={form.currency} onChange={e => set("currency", e.target.value)}><option>AUD</option><option>NZD</option></select>
                </div>
                <div className="field">
                  <label className="field-label">Settlement cadence</label>
                  <select className="input select" value={form.cadence} onChange={e => set("cadence", e.target.value)}>
                    <option>T+1</option><option>Daily</option><option>T+3</option><option>Weekly</option><option>Monthly</option>
                  </select>
                </div>
              </div>

              <div style={{display:'flex', alignItems:'center', gap:10, marginTop:14, padding:'10px 14px', background:'var(--brand-bg)', border:'1px solid var(--brand-border)', borderRadius:8, fontSize:12, color:'var(--brand)'}}>
                <OIcon name="lock"/>
                <span><strong>Encrypted at rest.</strong> Only Adyen and senior office admins can view the full account number after save.</span>
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <h3 style={{margin:'0 0 4px', fontSize:16, fontWeight:600, letterSpacing:'-0.01em'}}>Adyen routing</h3>
              <p style={{margin:'0 0 18px', fontSize:13, color:'var(--text-muted)'}}>Which Adyen sub-merchant settles to this account, and for which stores.</p>

              <div className="field">
                <label className="field-label">Adyen merchant ID</label>
                <select className="input select" value={form.adyenMerchantId} onChange={e => set("adyenMerchantId", e.target.value)}>
                  <option>CoreIQGroup_AU</option><option>CoreIQGroup_AU_S001</option><option>CoreIQGroup_AU_S002</option><option>CoreIQGroup_AU_S003</option>
                </select>
                <div className="field-help">Group MID receives everything by default. Sub-MIDs split settlement per store.</div>
              </div>

              <div className="field" style={{marginTop:14}}>
                <label className="field-label">Stores routed here</label>
                <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
                  {OD.STORES.map(s => (
                    <label key={s.id} style={{display:'flex', alignItems:'center', gap:8, padding:'8px 12px', border: '1px solid ' + (form.stores.includes(s.id) ? 'var(--brand)' : 'var(--border)'), background: form.stores.includes(s.id) ? 'var(--brand-bg)' : 'transparent', borderRadius:8, cursor:'pointer'}}>
                      <input type="checkbox" checked={form.stores.includes(s.id)} onChange={() => toggleStore(s.id)}/>
                      <span style={{fontSize:13, fontWeight:500}}>{s.name}</span>
                    </label>
                  ))}
                </div>
              </div>

              <div className="field" style={{marginTop:14}}>
                <label className="field-label">Card schemes</label>
                <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8}}>
                  {[["visa","Visa"],["mastercard","Mastercard"],["eftpos","EFTPOS"],["amex","American Express"],["wallet","Apple / Google Pay"]].map(([k, label]) => (
                    <label key={k} style={{display:'flex', alignItems:'center', gap:8, padding:'8px 12px', border: '1px solid ' + (form.schemes[k] ? 'var(--brand)' : 'var(--border)'), background: form.schemes[k] ? 'var(--brand-bg)' : 'transparent', borderRadius:8, cursor:'pointer'}}>
                      <input type="checkbox" checked={!!form.schemes[k]} onChange={() => toggleScheme(k)}/>
                      <span style={{fontSize:13, fontWeight:500}}>{label}</span>
                    </label>
                  ))}
                </div>
              </div>

              <div style={{marginTop:14}}>
                <label className="checkbox">
                  <input type="checkbox" checked={form.primary} onChange={e => set("primary", e.target.checked)}/>
                  <span className="checkbox-box"><OIcon name="check" width={14} height={14}/></span>
                  <span>Make this the <strong>primary</strong> default account · catches anything not explicitly routed</span>
                </label>
              </div>
            </>
          )}

          {step === 3 && (
            <>
              <h3 style={{margin:'0 0 4px', fontSize:16, fontWeight:600, letterSpacing:'-0.01em'}}>Review &amp; verify</h3>
              <p style={{margin:'0 0 18px', fontSize:13, color:'var(--text-muted)'}}>Adyen will deposit and reverse a small amount ($0.01–$0.99) within 24 hours to verify the account.</p>

              <div className="off-card" style={{padding:0, overflow:'hidden', gap:0}}>
                <div style={{padding:'14px 18px', background:'var(--bg-subtle)', borderBottom:'1px solid var(--border)'}}>
                  <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Account</div>
                  <div style={{fontSize:16, fontWeight:600, marginTop:2}}>{form.label || "(no label)"}</div>
                </div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:0}}>
                  <ReviewCell label="Holder name"   value={form.holderName}/>
                  <ReviewCell label="Purpose"       value={form.purpose}/>
                  <ReviewCell label="Bank"          value={form.bank}/>
                  <ReviewCell label="BSB"           value={form.bsb} mono/>
                  <ReviewCell label="Account #"     value={form.account ? "•••• " + form.account.slice(-4) : "—"} mono/>
                  <ReviewCell label="Currency"      value={form.currency}/>
                  <ReviewCell label="Cadence"       value={form.cadence}/>
                  <ReviewCell label="Primary"       value={form.primary ? "Yes" : "No"}/>
                  <ReviewCell label="Adyen MID"     value={form.adyenMerchantId} mono/>
                  <ReviewCell label="Stores"        value={form.stores.length === 3 ? "All stores" : form.stores.map(s => findS(s)?.code).join(", ") || "—"}/>
                </div>
                <div style={{padding:'10px 18px', background:'var(--bg-subtle)', borderTop:'1px solid var(--border)', fontSize:12, color:'var(--text-muted)'}}>
                  <strong style={{color:'var(--text)'}}>Schemes</strong> · {Object.entries(form.schemes).filter(([_, v]) => v).map(([k]) => k).join(", ") || "none"}
                </div>
              </div>

              <label className="checkbox" style={{marginTop:14}}>
                <input type="checkbox" checked={form.micro} onChange={e => set("micro", e.target.checked)}/>
                <span className="checkbox-box"><OIcon name="check" width={14} height={14}/></span>
                <span>Confirm with $0 verification (recommended) · Adyen sends a $0 auth, no real money moves.</span>
              </label>
            </>
          )}
        </div>

        <div style={{padding:'14px 22px', borderTop:'1px solid var(--border)', display:'flex', alignItems:'center', justifyContent:'space-between', background:'var(--bg-subtle)'}}>
          <div style={{fontSize:12, color:'var(--text-subtle)'}}>Step {step + 1} of {STEPS.length}</div>
          <div style={{display:'flex', gap:8}}>
            {step > 0 ? (
              <button className="btn btn--secondary btn--sm" onClick={() => setStep(s => s - 1)}>
                <OIcon name="chevron-right" style={{transform:'rotate(180deg)'}}/> Back
              </button>
            ) : (
              <button className="btn btn--ghost btn--sm" onClick={onClose}>Cancel</button>
            )}
            {step < STEPS.length - 1 ? (
              <button className="btn btn--primary btn--sm" onClick={() => setStep(s => s + 1)} disabled={!stepValid}>
                Continue <OIcon name="chevron-right"/>
              </button>
            ) : (
              <button className="btn btn--primary btn--sm" onClick={submit}>
                <OIcon name="check"/> Link account
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function ReviewCell({ label, value, mono }) {
  return (
    <div style={{padding:'12px 18px', borderRight:'1px solid var(--border-subtle)', borderBottom:'1px solid var(--border-subtle)'}}>
      <div style={{fontSize:10, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>{label}</div>
      <div style={{fontSize:13, fontWeight:500, marginTop:3, fontFamily: mono ? 'var(--font-mono)' : 'inherit'}}>{value || "—"}</div>
    </div>
  );
}

// -----------------------------------------------------------------
// PAYMENTS — by-store view (multi-store comparison)
// -----------------------------------------------------------------
function PaymentsByStore() {
  const STORE_COLOURS = { "S-001": "var(--teal-700)", "S-002": "var(--navy-600)", "S-003": "var(--violet-600)" };

  // Per-store payments data (today + 30d aggregates by method)
  const BY_STORE = [
    {
      id: "S-001",
      today: { gross: 2418.50 + 1812.30 + 589.85, fees: 16.93, net: 4803.72, tx: 64,
               methods: { card: 3520.40, wallet: 685.20, eftpos: 482.65, declined: 2 } },
      mtd:   { gross: 76420.50, fees: 535.30, net: 75885.20, tx: 1864,
               settled: "Today 10:00 · $4,448.84 to NAB",
               terminals: 3, terminalsOk: 2 },
    },
    {
      id: "S-002",
      today: { gross: 1318.20 + 1100.20, fees: 16.93, net: 2401.47, tx: 42,
               methods: { card: 1640.40, wallet: 482.00, eftpos: 296.00, declined: 0 } },
      mtd:   { gross: 42118.40, fees: 295.04, net: 41823.36, tx: 1042,
               settled: "Today 10:00 · settled normally",
               terminals: 2, terminalsOk: 2 },
    },
    {
      id: "S-003",
      today: { gross: 1820.50 + 1300.35, fees: 21.84, net: 3098.01, tx: 56,
               methods: { card: 2180.20, wallet: 540.65, eftpos: 400.00, declined: 1 } },
      mtd:   { gross: 58210.20, fees: 407.47, net: 57802.73, tx: 1418,
               settled: "Today 10:00 · settled normally",
               terminals: 2, terminalsOk: 2 },
    },
  ];

  // Aggregate totals
  const total = {
    today: { gross: BY_STORE.reduce((s, x) => s + x.today.gross, 0),
             fees:  BY_STORE.reduce((s, x) => s + x.today.fees, 0),
             tx:    BY_STORE.reduce((s, x) => s + x.today.tx, 0) },
    mtd:   { gross: BY_STORE.reduce((s, x) => s + x.mtd.gross, 0),
             fees:  BY_STORE.reduce((s, x) => s + x.mtd.fees, 0) },
  };

  // Method-mix series for stacked bars
  const maxToday = Math.max(...BY_STORE.map(s => s.today.gross));

  return (
    <>
      {/* Per-store cards */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14, marginBottom:18}}>
        {BY_STORE.map(s => {
          const store = findS(s.id);
          const effRate = s.mtd.gross > 0 ? ((s.mtd.fees / s.mtd.gross) * 100).toFixed(2) : "—";
          return (
            <div key={s.id} className="off-card" style={{padding:0, overflow:'hidden'}}>
              <div style={{padding:'14px 18px', borderBottom:'1px solid var(--border)', display:'flex', alignItems:'center', gap:12}}>
                <div className="off-topbar-store-av" style={{width:34, height:34, borderRadius:8, background:STORE_COLOURS[s.id], color:'#fff'}}>{store.code}</div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:600, fontSize:15, letterSpacing:'-0.01em'}}>{store.name}</div>
                  <div className="off-cell-mono off-muted" style={{fontSize:11}}>{s.mtd.terminals} terminals · {s.mtd.terminalsOk}/{s.mtd.terminals} online</div>
                </div>
                {s.mtd.terminalsOk < s.mtd.terminals
                  ? <span className="badge badge--hold"><span className="badge-dot"/> Terminal alert</span>
                  : <span className="badge badge--paid"><span className="badge-dot"/> Healthy</span>}
              </div>

              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:0}}>
                <div style={{padding:'12px 18px', borderRight:'1px solid var(--border)', borderBottom:'1px solid var(--border)'}}>
                  <div style={{fontSize:10, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Gross today</div>
                  <div style={{fontSize:20, fontWeight:600, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.01em', marginTop:2}}>{oMoney(s.today.gross)}</div>
                </div>
                <div style={{padding:'12px 18px', borderBottom:'1px solid var(--border)'}}>
                  <div style={{fontSize:10, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Tx today</div>
                  <div style={{fontSize:20, fontWeight:600, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.01em', marginTop:2}}>{s.today.tx}</div>
                </div>
                <div style={{padding:'12px 18px', borderRight:'1px solid var(--border)'}}>
                  <div style={{fontSize:10, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Net MTD</div>
                  <div style={{fontSize:20, fontWeight:600, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.01em', marginTop:2}}>{oMoney(s.mtd.net)}</div>
                </div>
                <div style={{padding:'12px 18px'}}>
                  <div style={{fontSize:10, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500}}>Effective rate</div>
                  <div style={{fontSize:20, fontWeight:600, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.01em', marginTop:2}}>{effRate}%</div>
                </div>
              </div>

              {/* Method-mix bar */}
              <div style={{padding:'14px 18px', borderTop:'1px solid var(--border)'}}>
                <div style={{fontSize:10, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--text-subtle)', fontWeight:500, marginBottom:6}}>Today by method</div>
                <div style={{display:'flex', height:8, borderRadius:4, overflow:'hidden', marginBottom:8}}>
                  <div style={{flex: s.today.methods.card, background: STORE_COLOURS[s.id]}}/>
                  <div style={{flex: s.today.methods.wallet, background: 'var(--brand)'}}/>
                  <div style={{flex: s.today.methods.eftpos, background: 'var(--text-subtle)'}}/>
                </div>
                <div style={{display:'flex', flexDirection:'column', gap:4, fontSize:12, color:'var(--text-muted)'}}>
                  <div style={{display:'flex', justifyContent:'space-between'}}><span><span style={{display:'inline-block', width:8, height:8, borderRadius:2, background:STORE_COLOURS[s.id], marginRight:6}}/>Card</span><span className="tabular">{oMoney(s.today.methods.card)}</span></div>
                  <div style={{display:'flex', justifyContent:'space-between'}}><span><span style={{display:'inline-block', width:8, height:8, borderRadius:2, background:'var(--brand)', marginRight:6}}/>Mobile wallet</span><span className="tabular">{oMoney(s.today.methods.wallet)}</span></div>
                  <div style={{display:'flex', justifyContent:'space-between'}}><span><span style={{display:'inline-block', width:8, height:8, borderRadius:2, background:'var(--text-subtle)', marginRight:6}}/>EFTPOS</span><span className="tabular">{oMoney(s.today.methods.eftpos)}</span></div>
                  {s.today.methods.declined > 0 && (
                    <div style={{display:'flex', justifyContent:'space-between', color:'var(--void-text)'}}><span>Declined</span><span className="tabular">{s.today.methods.declined}</span></div>
                  )}
                </div>
              </div>

              <div style={{padding:'10px 18px', background:'var(--bg-subtle)', fontSize:11, color:'var(--text-muted)', borderTop:'1px solid var(--border)'}}>
                {s.mtd.settled}
              </div>
            </div>
          );
        })}
      </div>

      {/* Side-by-side comparison table */}
      <div className="off-card" style={{padding:0, overflow:'hidden'}}>
        <div style={{padding:'14px 18px', borderBottom:'1px solid var(--border)', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <h3 className="off-card-title" style={{margin:0}}>Side-by-side comparison · 30 days</h3>
          <div style={{display:'flex', gap:8}}>
            <button className="btn btn--ghost btn--sm">Today</button>
            <button className="btn btn--secondary btn--sm" style={{background:'var(--text)', color:'var(--bg)'}}>30 days</button>
            <button className="btn btn--ghost btn--sm">YTD</button>
          </div>
        </div>
        <div className="off-grid" style={{gridTemplateColumns:'1.6fr 130px 110px 110px 130px 110px 110px'}}>
          <div className="off-grid-headcell">Store</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Gross</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Fees</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Net</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Transactions</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Avg sale</div>
          <div className="off-grid-headcell" style={{justifyContent:'flex-end'}}>Eff rate</div>
          {BY_STORE.map(s => {
            const store = findS(s.id);
            const avg = s.mtd.tx > 0 ? s.mtd.gross / s.mtd.tx : 0;
            const eff = s.mtd.gross > 0 ? ((s.mtd.fees / s.mtd.gross) * 100) : 0;
            return (
              <div key={s.id} className="off-grid-row">
                <div className="off-grid-cell" style={{display:'flex', alignItems:'center', gap:10}}>
                  <div className="off-topbar-store-av" style={{width:24, height:24, borderRadius:5, background:STORE_COLOURS[s.id], color:'#fff', fontSize:9}}>{store.code}</div>
                  <span className="off-cell-strong">{store.name}</span>
                </div>
                <div className="off-grid-cell off-cell-num">{oMoney(s.mtd.gross)}</div>
                <div className="off-grid-cell off-cell-num" style={{color:'var(--void-text)'}}>− {oMoney(s.mtd.fees)}</div>
                <div className="off-grid-cell off-cell-num off-cell-strong" style={{color:'var(--paid-text)'}}>{oMoney(s.mtd.net)}</div>
                <div className="off-grid-cell off-cell-num">{s.mtd.tx.toLocaleString()}</div>
                <div className="off-grid-cell off-cell-num">{oMoney(avg)}</div>
                <div className="off-grid-cell off-cell-num">{eff.toFixed(2)}%</div>
              </div>
            );
          })}
          {/* Group totals row */}
          <div className="off-grid-row">
            <div className="off-grid-cell off-cell-strong" style={{background:'var(--bg-subtle)'}}>Group total</div>
            <div className="off-grid-cell off-cell-num off-cell-strong" style={{background:'var(--bg-subtle)'}}>{oMoney(total.mtd.gross)}</div>
            <div className="off-grid-cell off-cell-num off-cell-strong" style={{background:'var(--bg-subtle)', color:'var(--void-text)'}}>− {oMoney(total.mtd.fees)}</div>
            <div className="off-grid-cell off-cell-num off-cell-strong" style={{background:'var(--bg-subtle)', color:'var(--paid-text)'}}>{oMoney(total.mtd.gross - total.mtd.fees)}</div>
            <div className="off-grid-cell off-cell-num off-cell-strong" style={{background:'var(--bg-subtle)'}}>{BY_STORE.reduce((s, x) => s + x.mtd.tx, 0).toLocaleString()}</div>
            <div className="off-grid-cell off-cell-num off-cell-strong" style={{background:'var(--bg-subtle)'}}>{oMoney(total.mtd.gross / BY_STORE.reduce((s, x) => s + x.mtd.tx, 0))}</div>
            <div className="off-grid-cell off-cell-num off-cell-strong" style={{background:'var(--bg-subtle)'}}>{((total.mtd.fees / total.mtd.gross) * 100).toFixed(2)}%</div>
          </div>
        </div>
      </div>

      {/* Daily volume by store */}
      <div className="off-card" style={{marginTop:14}}>
        <div className="off-card-header">
          <h3 className="off-card-title">Daily card volume · last 30 days · stacked by store</h3>
          <span className="off-mono off-muted" style={{fontSize:12}}>{oMoney(total.mtd.gross)} group MTD</span>
        </div>
        <div className="dash-chart" style={{height:180}}>
          {OD.REVENUE_30D["S-001"].map((_, i) => (
            <div key={i} className="dash-chart-stack">
              {BY_STORE.map(s => (
                <span key={s.id} style={{flex: OD.REVENUE_30D[s.id][i], background: STORE_COLOURS[s.id], opacity: i === 29 ? 1 : 0.95}}/>
              ))}
            </div>
          ))}
        </div>
        <div className="dash-chart-legend">
          {BY_STORE.map(s => {
            const store = findS(s.id);
            return (
              <span key={s.id}>
                <span className="dash-chart-legend-dot" style={{background:STORE_COLOURS[s.id]}}/>
                {store.name} · {oMoney(s.mtd.gross)}
              </span>
            );
          })}
        </div>
      </div>
    </>
  );
}
