— storefront reads master data directly. No sync, no connector.

Online revenue — last 14 days +{COM_KPIS.revenueDeltaPct}% vs prior

{formatCurrency(COM_KPIS.revenueMtd)}

Orders by channel {COM_CHANNELS.map(c => (

{c.label} {c.value}%

))}

Top products — this month

ProductPriceSoldRevenueLive stock

{COM_TOP_PRODUCTS.map(p => (

{p.name}{p.sku} {formatCurrency(p.price, p.currency)} {p.sold} {formatCurrency(p.revenue)} {p.stock === 0 ? Sold out : p.stock < 20 ? {p.stock} left : {p.stock}}

))}

) } /* ════════════════════════════════════════════════════════════════════════ * 2 · STOREFRONT EDITOR /commerce/storefront (rendered mini storefront) * ════════════════════════════════════════════════════════════════════════ */ const STORE_THEMES = [ { id: "industrial", name: "Industrial", swatch: "#0D4A4A" }, { id: "slate", name: "Slate Pro", swatch: "#334155" }, { id: "sand", name: "Warm Sand", swatch: "#D4A96A" }, ] function CommerceStorefront() { const [theme, setTheme] = React.useState("industrial") const [device, setDevice] = React.useState<"desktop" | "mobile">("desktop") const [hero, setHero] = React.useState("Industrial parts, shipped same-day across APAC") const accent = STORE_THEMES.find(t => t.id === theme)?.swatch || "#0D4A4A" return ( <> } />

{/* Editor rail */}

Theme

{STORE_THEMES.map(t => ( ))}

Hero headline

setHero(e.target.value)} rows={3} className="w-full text-[12.5px] rounded-md border border-divider bg-cream/50 p-2.5 resize-none focus:outline-none focus:ring-1 focus:ring-brand" />
          </div>
          <div>
            <div className="text-[10px] uppercase tracking-wider font-bold text-ink-mute mb-2">Sections</div>
            <div className="space-y-1.5">
              {["Hero banner","Featured categories","Best sellers","B2B sign-in CTA","Footer"].map((s, i) => (
                <div key={s} className="flex items-center gap-2 px-2.5 py-2 rounded-md border border-divider bg-cream/40 text-[11.5px] text-ink-soft">
                  <Icon name="menu" size={12} className="text-ink-faint" /><span className="flex-1">{s}</span>
                  {i < 3 && <Badge variant="success" dot>on</Badge>}
                </div>
              ))}
            </div>
          </div>
          <div className="bg-brand-soft/40 border border-brand/20 rounded-lg p-3">
            <div className="flex items-center gap-2 mb-1.5"><Icon name="box" size={13} className="text-brand" /><span className="text-[11px] font-semibold text-ink">Catalog source</span></div>
            <p className="text-[10.5px] text-ink-soft leading-relaxed">Listings render live from <strong>Products</strong> + <strong>Warehouse</strong>. Edits to price or stock there reflect instantly — no export, no sync job.</p>
            <div className="mt-2 flex gap-1.5"><FlowChip to="/products/list" label="Products" icon="tag" dir="in" /><FlowChip to="/warehouse" label="Stock" icon="box" dir="in" /></div>
          </div>
        </div>

{/* Preview */}
        <div className="overflow-y-auto p-6 flex flex-col items-center">
          <div className="flex items-center gap-1 bg-cream border border-divider rounded-md p-0.5 mb-4">
            {(["desktop","mobile"] as const).map(d => (
              <button key={d} onClick={() => setDevice(d)} className={cn("h-7 px-3 rounded text-[11px] font-semibold inline-flex items-center gap-1.5 transition-colors", device === d ? "bg-surface text-brand shadow-sm" : "text-ink-mute")}>
                <Icon name={d === "desktop" ? "monitor" : "smartphone"} size={12} />{d === "desktop" ? "Desktop" : "Mobile"}
              </button>
            ))}
          </div>
          <div className={cn("bg-white rounded-xl border border-divider shadow-lg overflow-hidden transition-all", device === "desktop" ? "w-full max-w-[760px]" : "w-[300px]")}>
            {/* mini storefront */}
            <div className="h-10 flex items-center justify-between px-4 border-b" style={{ background: accent }}>
              <span className="text-white font-serif text-[15px]">Helios Direct</span>
              <div className="flex items-center gap-3 text-white/90"><Icon name="search" size={13} /><Icon name="user" size={13} /><Icon name="wallet" size={13} /></div>
            </div>
            <div className="p-5 text-center" style={{ background: `${accent}10` }}>
              <div className="font-serif text-[20px] text-slate-800 leading-tight max-w-[420px] mx-auto">{hero}</div>
              <button className="mt-3 h-9 px-5 rounded-md text-white text-[12px] font-semibold" style={{ background: accent }}>Shop industrial parts</button>
            </div>
            <div className="p-4">
              <div className="text-[11px] font-bold uppercase tracking-wider text-slate-400 mb-2">Best sellers</div>
              <div className={cn("grid gap-3", device === "desktop" ? "grid-cols-3" : "grid-cols-2")}>
                {COM_TOP_PRODUCTS.slice(0, device === "desktop" ? 3 : 2).map(p => (
                  <div key={p.sku} className="border border-slate-200 rounded-lg p-2.5">
                    <div className="h-14 rounded bg-slate-100 flex items-center justify-center mb-2 text-slate-400"><Icon name={p.img as any} size={20} /></div>
                    <div className="text-[10.5px] font-medium text-slate-700 leading-tight line-clamp-2">{p.name}</div>
                    <div className="flex items-center justify-between mt-1.5">
                      <span className="font-mono text-[11px] font-bold text-slate-900">{formatCurrency(p.price, p.currency)}</span>
                      {p.stock === 0 ? <span className="text-[8.5px] font-bold text-rose-600 uppercase">Backorder</span> : <span className="text-[8.5px] font-bold text-emerald-600 uppercase">In stock</span>}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="mt-3 text-[10.5px] text-ink-mute">Live preview · {device} · theme “{STORE_THEMES.find(t => t.id === theme)?.name}”</div>
        </div>
      </div>
    </>
  )
}

/* ════════════════════════════════════════════════════════════════════════
 * 3 · ORDERS  /commerce/orders  (online → Sales Orders + AR)
 * ════════════════════════════════════════════════════════════════════════ */
function CommerceOrders() {
  const { push } = useRouter()
  const [channel, setChannel] = React.useState("all")
  const [query, setQuery] = React.useState("")
  const list = COM_ORDERS.filter(o =>
    (channel === "all" || o.channel === channel) &&
    (!query.trim() || o.customer.toLowerCase().includes(query.toLowerCase()) || o.id.toLowerCase().includes(query.toLowerCase()))
  )
  const counts = { all: COM_ORDERS.length, B2B: COM_ORDERS.filter(o => o.channel === "B2B").length, B2C: COM_ORDERS.filter(o => o.channel === "B2C").length, Marketplace: COM_ORDERS.filter(o => o.channel === "Marketplace").length }
  return (
    <>
      <TopBar breadcrumb={[{ label: "E-commerce" }, { label: "Orders" }]} />
      <ActionBar
        title="Online Orders"
        status={`${COM_ORDERS.length} orders this cycle · each posts a Sales Order + AR invoice automatically`}
        search={<SearchBox value={query} onChange={setQuery} placeholder="Search orders…" className="w-56" />}
        primary={<Button variant="primary" leadingIcon="plus" size="sm">New order</Button>}
        filters={(["all","B2B","B2C","Marketplace"] as const).map(c => (
          <FilterChip key={c} active={channel === c} count={(counts as any)[c]} onClick={() => setChannel(c)}>{c === "all" ? "All channels" : c}</FilterChip>
        ))}
      />
      <div className="flex-1 overflow-y-auto bg-app">
        <div className="max-w-[1440px] mx-auto p-6 space-y-4">
          <div className="bg-brand-soft/40 border border-brand/20 rounded-lg px-4 py-3 flex items-center gap-3">
            <div className="size-7 rounded-full bg-brand-soft text-brand flex items-center justify-center shrink-0"><Icon name="git-branch" size={14} /></div>
            <div className="flex-1 text-[12px] text-ink-soft">Every paid web order drops a <strong className="text-ink">Sales Order</strong> into CRM and an <strong className="text-ink">AR invoice</strong> into Finance — fulfilment pulls stock straight from Warehouse.</div>
            <FlowChip to="/crm/sales-orders" label="CRM · Sales Orders" icon="receipt" />
            <FlowChip to="/finance/ar" label="Finance · AR" icon="dollar" />
          </div>
          <Card>
            <div className="grid grid-cols-[150px_1.5fr_80px_100px_70px_120px_110px_130px] px-4 py-2 bg-cream text-[10px] uppercase tracking-wider font-bold text-ink-mute border-b border-divider">
              <span>Order</span><span>Customer</span><span>Entity</span><span>Channel</span><span className="text-right">Items</span><span className="text-right">Total</span><span>Status</span><span>Sales Order</span>
            </div>
            {list.map(o => (
              <div key={o.id} className="grid grid-cols-[150px_1.5fr_80px_100px_70px_120px_110px_130px] px-4 py-2.5 items-center border-b border-divider-soft hover:bg-cream/60 transition-colors">
                <span className="font-mono text-[11px] text-brand-mid">{o.id}</span>
                <span className="text-[12.5px] text-ink truncate">{o.customer}</span>
                <span className="text-[11px] text-ink-mute">{o.entity}</span>
                <span><Badge variant={o.channel === "B2B" ? "brand" : o.channel === "B2C" ? "info" : "accent"}>{o.channel}</Badge></span>
                <span className="text-right font-mono text-[12px] text-ink-soft">{o.items}</span>
                <span className="text-right font-mono text-[12px] text-ink">{formatCurrency(o.total, o.currency)}</span>
                <span><Badge variant={COM_ORD_TONE[o.status] as any} dot>{o.status}</Badge></span>
                <span>{o.soRef ? <button onClick={() => push("/crm/sales-orders")} className="font-mono text-[10.5px] text-brand hover:underline">{o.soRef}</button> : <span className="text-[10.5px] text-ink-faint">— pending —</span>}</span>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </>
  )
}

/* ════════════════════════════════════════════════════════════════════════
 * 4 · PROMOTIONS  /commerce/promotions
 * ════════════════════════════════════════════════════════════════════════ */
function CommercePromotions() {
  const [status, setStatus] = React.useState("all")
  const list = COM_PROMOS.filter(p => status === "all" || p.status === status)
  const active = COM_PROMOS.filter(p => p.status === "active")
  const revenue = active.reduce((s, p) => s + p.revenue, 0)
  return (
    <>
      <TopBar breadcrumb={[{ label: "E-commerce" }, { label: "Promotions" }]} />
      <ActionBar
        title="Promotions & Discounts"
        status={`${active.length} live promos · ${formatCurrency(revenue)} attributed revenue`}
        primary={<Button variant="primary" leadingIcon="plus" size="sm">New promotion</Button>}
        filters={(["all","active","scheduled","expired"] as const).map(s => (
          <FilterChip key={s} active={status === s} onClick={() => setStatus(s)}>{s === "all" ? "All" : s[0].toUpperCase() + s.slice(1)}</FilterChip>
        ))}
      />
      <div className="flex-1 overflow-y-auto bg-app">
        <div className="max-w-[1440px] mx-auto p-6">
          <div className="grid grid-cols-3 gap-4">
            {list.map(p => (
              <div key={p.code} className="bg-surface border border-divider rounded-lg p-4">
                <div className="flex items-start justify-between gap-2">
                  <div>
                    <div className="font-mono text-[15px] font-bold text-brand tracking-wide">{p.code}</div>
                    <div className="text-[11.5px] text-ink-soft mt-0.5">{p.detail}</div>
                  </div>
                  <Badge variant={COM_PROMO_TONE[p.status] as any} dot>{p.status}</Badge>
                </div>
                <div className="flex items-center gap-2 mt-3"><Badge variant="neutral">{p.kind}</Badge><span className="text-[10.5px] text-ink-mute">ends {p.ends}</span></div>
                <div className="grid grid-cols-2 gap-2 mt-3 pt-3 border-t border-divider-soft text-[11px]">
                  <div><div className="text-ink-mute text-[10px] uppercase tracking-wide">Redemptions</div><div className="font-mono font-semibold text-ink mt-0.5">{p.uses}{p.cap ? ` / ${p.cap}` : ""}</div></div>
                  <div><div className="text-ink-mute text-[10px] uppercase tracking-wide">Revenue</div><div className="font-mono font-semibold text-ink mt-0.5">{formatCurrency(p.revenue)}</div></div>
                </div>
                {p.cap && <div className="mt-2 h-1.5 bg-cream-deep rounded-full overflow-hidden"><div className="h-full rounded-full bg-brand" style={{ width: `${Math.min((p.uses / p.cap) * 100, 100)}%` }} /></div>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  )
}

/* ════════════════════════════════════════════════════════════════════════
 * 5 · B2B PORTAL  /commerce/b2b
 * ════════════════════════════════════════════════════════════════════════ */
function CommerceB2B() {
  const { push } = useRouter()
  const [query, setQuery] = React.useState("")
  const [sel, setSel] = React.useState<B2BAccount | null>(null)
  const list = COM_B2B.filter(a => !query.trim() || a.name.toLowerCase().includes(query.toLowerCase()) || a.id.toLowerCase().includes(query.toLowerCase()))
  return (
    <>
      <TopBar breadcrumb={[{ label: "E-commerce" }, { label: "B2B Accounts" }]} />
      <ActionBar
        title="B2B Account Portal"
        status={`${COM_B2B.length} contract accounts · negotiated price lists · credit terms`}
        search={<SearchBox value={query} onChange={setQuery} placeholder="Search accounts…" className="w-56" />}
        primary={<Button variant="primary" leadingIcon="plus" size="sm">Invite account</Button>}
      />
      <div className="flex-1 overflow-y-auto bg-app">
        <div className="max-w-[1440px] mx-auto p-6">
          <Card>
            <div className="grid grid-cols-[110px_1.6fr_90px_1.1fr_100px_1.4fr_120px] px-4 py-2 bg-cream text-[10px] uppercase tracking-wider font-bold text-ink-mute border-b border-divider">
              <span>Account</span><span>Company</span><span>Tier</span><span>Price list</span><span>Terms</span><span>Credit used</span><span className="text-right">YTD spend</span>
            </div>
            {list.map(a => {
              const pct = (a.creditUsed / a.creditLimit) * 100
              return (
                <button key={a.id} onClick={() => setSel(a)} className="w-full grid grid-cols-[110px_1.6fr_90px_1.1fr_100px_1.4fr_120px] px-4 py-2.5 text-left items-center border-b border-divider-soft hover:bg-cream/60 transition-colors">
                  <span className="font-mono text-[11px] text-brand-mid">{a.id}</span>
                  <span className="text-[12.5px] text-ink truncate">{a.name}</span>
                  <span><Badge variant={COM_TIER_TONE[a.tier] as any}>{a.tier}</Badge></span>
                  <span className="text-[11.5px] text-ink-soft truncate">{a.priceList}</span>
                  <span className="text-[11px] text-ink-mute">{a.terms}</span>
                  <span className="flex items-center gap-2">
                    <span className="flex-1 h-2 bg-cream-deep rounded-full overflow-hidden"><span className={cn("block h-full rounded-full", pct > 90 ? "bg-danger" : pct > 70 ? "bg-warn" : "bg-success")} style={{ width: `${pct}%` }} /></span>
                    <span className="font-mono text-[10px] text-ink-mute">{pct.toFixed(0)}%</span>
                  </span>
                  <span className="text-right font-mono text-[12px] text-ink">{formatCurrency(a.ytdSpend)}</span>
                </button>
              )
            })}
          </Card>
        </div>
      </div>

<Sheet open={!!sel} onOpenChange={(o: boolean) => !o && setSel(null)}>
        {sel && (
          <div className="w-[460px] h-full flex flex-col bg-surface">
            <div className="px-5 py-4 border-b border-divider flex items-start justify-between">
              <div>
                <div className="flex items-center gap-2"><span className="font-mono text-[10.5px] text-ink-mute">{sel.id}</span><Badge variant={COM_TIER_TONE[sel.tier] as any}>{sel.tier}</Badge><Badge variant={COM_ACC_TONE[sel.status] as any} dot>{sel.status}</Badge></div>
                <div className="font-serif text-xl text-ink mt-1">{sel.name}</div>
                <div className="text-[11.5px] text-ink-mute">{sel.entity} · {sel.priceList}</div>
              </div>
              <button onClick={() => setSel(null)} className="text-ink-mute hover:text-ink p-1"><Icon name="x" size={16} /></button>
            </div>
            <div className="flex-1 overflow-y-auto p-5 space-y-4">
              <div className="grid grid-cols-2 gap-2">
                <div className="bg-cream border border-divider rounded-lg px-3 py-2"><div className="text-[9.5px] uppercase tracking-wider font-bold text-ink-mute">Credit limit</div><div className="font-mono text-[14px] text-ink font-semibold mt-0.5">{formatCurrency(sel.creditLimit, sel.currency)}</div></div>
                <div className="bg-cream border border-divider rounded-lg px-3 py-2"><div className="text-[9.5px] uppercase tracking-wider font-bold text-ink-mute">Available</div><div className="font-mono text-[14px] text-ink font-semibold mt-0.5">{formatCurrency(sel.creditLimit - sel.creditUsed, sel.currency)}</div></div>
              </div>
              <div>
                <div className="flex items-center justify-between text-[11px] mb-1.5"><span className="text-[10px] uppercase tracking-wider font-bold text-ink-mute">Credit utilization</span><span className="font-mono text-ink font-semibold">{((sel.creditUsed / sel.creditLimit) * 100).toFixed(0)}%</span></div>
                <div className="h-2.5 bg-cream-deep rounded-full overflow-hidden"><div className={cn("h-full rounded-full", (sel.creditUsed / sel.creditLimit) > 0.9 ? "bg-danger" : "bg-brand")} style={{ width: `${(sel.creditUsed / sel.creditLimit) * 100}%` }} /></div>
              </div>
              <div className="flex items-center gap-2"><FlowChip to="/finance/ar" label="Finance · AR ledger" icon="dollar" /><FlowChip to="/crm/customers" label="CRM record" icon="user" /></div>
              {sel.status === "hold" && <div className="bg-danger-soft/50 border border-danger/30 rounded-lg p-3 text-[11.5px] text-ink-soft"><strong className="text-danger">Credit hold.</strong> New web orders require prepayment until balance clears.</div>}
            </div>
            <div className="px-5 py-3 border-t border-divider flex items-center gap-2">
              <Button variant="primary" size="sm" leadingIcon="edit">Edit price list</Button>
              <Button variant="ghost" size="sm" leadingIcon="x" className="ml-auto" onClick={() => setSel(null)}>Close</Button>
            </div>
          </div>
        )}
      </Sheet>
    </>
  )
}

/* ════════════════════════════════════════════════════════════════════════
 * Exports → globals
 * ════════════════════════════════════════════════════════════════════════ */
Object.assign(globalThis as any, {
  CommerceDashboard, CommerceStorefront, CommerceOrders, CommercePromotions, CommerceB2B,
})

})();/*__IIFE_WRAP_END__*/