/*
 * cenora-bundle-17-expansions.tsx — V4 repositioned/expanded modules (#7–#10)
 * ----------------------------------------------------------------------------
 * #7  Assets · Intangible branch    /assets/intangible (licences/software/patents/IP/goodwill/domains)
 * #8  Time & Activity · Shifts       /time/shifts      (roster, swaps, coverage)
 * #9  Facilities · Lease Management  /facilities/leases (IFRS 16 / ASC 842)
 * #10 HRIS · Travel & Expense        /hr/expenses      (mileage, per-diem, cards)
 *
 * Existing Fixed-Assets screens (AssetRegister/Depreciation/Disposals) are
 * reused as the "Fixed" branch; this adds the "Digital" branch + a branch
 * toggle surface. Lease postings + expense reimbursements flow to Finance.
 */
;/*__IIFE_WRAP_START__*/(function(){

/* shared branch toggle (Assets: Fixed | Digital) */
function BranchToggle({ value, onChange, options }: { value: string; onChange: (v: string) => void; options: { value: string; label: string; icon: string }[] }) {
  return (
    <div className="inline-flex items-center gap-0.5 rounded-md bg-cream p-0.5 border border-divider">
      {options.map(o => (
        <button key={o.value} onClick={() => onChange(o.value)} className={cn("h-7 px-3 rounded text-[11.5px] font-semibold inline-flex items-center gap-1.5 transition-colors", value === o.value ? "bg-surface text-brand shadow-sm" : "text-ink-mute hover:text-ink-soft")}>
          <Icon name={o.icon as any} size={12} />{o.label}
        </button>
      ))}
    </div>
  )
}

/* ════════════════════════════════════════════════════════════════════════
 * #7 · ASSETS — INTANGIBLE BRANCH  /assets/intangible
 *      Register + Amortisation. Software licences, capitalised software,
 *      patents, trademarks / IP, goodwill (indefinite — impairment-tested),
 *      domains. Amortisation charges post to Finance · GL.
 * ════════════════════════════════════════════════════════════════════════ */
interface Intangible {
  id: string; name: string
  cat: "Software licence" | "Capitalised software" | "Patent" | "Trademark / IP" | "Goodwill" | "Domain"
  vendor: string; entity: string; cost: number; currency: string
  life: string; lifeMonths: number; amortized: number   // lifeMonths 0 = indefinite life (impairment-tested)
  acquired: string; status: "active" | "review"
}
const INTANGIBLES: Intangible[] = [
  { id: "IN-2041", name: "Cenora Business Suite — platform licence", cat: "Software licence",     vendor: "Cenora",            entity: "HVG · Group", cost: 89760,   currency: "USD", life: "1 yr",       lifeMonths: 12,  amortized: 8,  acquired: "2025-06-01", status: "active" },
  { id: "IN-2042", name: "ERP customisations — capitalised build",   cat: "Capitalised software", vendor: "Internal · HVG IT", entity: "HVG · Group", cost: 240000,  currency: "USD", life: "5 yr",       lifeMonths: 60,  amortized: 14, acquired: "2025-03-01", status: "active" },
  { id: "IN-2043", name: "Autodesk AutoCAD — 25 seats",              cat: "Software licence",     vendor: "Autodesk",          entity: "HVPH",        cost: 42000,   currency: "USD", life: "1 yr",       lifeMonths: 12,  amortized: 5,  acquired: "2025-12-01", status: "active" },
  { id: "IN-2044", name: "“Helios” word mark — PH / SG / HK",        cat: "Trademark / IP",       vendor: "IP Counsel",        entity: "HVG · Group", cost: 18000,   currency: "USD", life: "10 yr",      lifeMonths: 120, amortized: 36, acquired: "2024-03-01", status: "active" },
  { id: "IN-2045", name: "Continuous-mix process — patent",          cat: "Patent",               vendor: "IP Counsel",        entity: "HVPH",        cost: 96000,   currency: "USD", life: "20 yr",      lifeMonths: 240, amortized: 30, acquired: "2023-09-01", status: "active" },
  { id: "IN-2046", name: "Goodwill — Vertex Manufacturing acq.",     cat: "Goodwill",             vendor: "—",                 entity: "HVG · Group", cost: 4200000, currency: "USD", life: "Indefinite", lifeMonths: 0,   amortized: 0,  acquired: "2024-01-15", status: "review" },
  { id: "IN-2047", name: "heliosvertex.com — domain portfolio",      cat: "Domain",               vendor: "GoDaddy",           entity: "HVG · Group", cost: 4800,    currency: "USD", life: "3 yr",       lifeMonths: 36,  amortized: 14, acquired: "2024-08-15", status: "active" },
]
const INTANG_TONE: Record<string, string> = { active: "success", review: "warn" }
const INTANG_CAT_ICON: Record<string, string> = { "Software licence": "monitor", "Capitalised software": "doc", "Patent": "award", "Trademark / IP": "tag", "Goodwill": "star", "Domain": "globe" }

const intangMonthly = (a: Intangible) => a.lifeMonths > 0 ? a.cost / a.lifeMonths : 0
const intangAccum   = (a: Intangible) => intangMonthly(a) * a.amortized
const intangNBV     = (a: Intangible) => a.cost - intangAccum(a)

function IntangibleViewTabs({ view }: { view: string }) {
  const { push } = useRouter()
  const tabs = [{ key: "register", label: "Register", href: "/assets/intangible" }, { key: "amortisation", label: "Amortisation", href: "/assets/intangible/amortisation" }]
  return (
    <div className="inline-flex items-center gap-0.5 rounded-md bg-cream p-0.5 border border-divider">
      {tabs.map(tb => (
        <button key={tb.key} onClick={() => push(tb.href)} className={cn("h-7 px-3 rounded text-[11.5px] font-semibold transition-colors", view === tb.key ? "bg-surface text-brand shadow-sm" : "text-ink-mute hover:text-ink-soft")}>{tb.label}</button>
      ))}
    </div>
  )
}

function AssetsIntangible({ view = "register" }: { view?: "register" | "amortisation" }) {
  const { push } = useRouter()
  const [branch, setBranch] = React.useState("intangible")
  const [cat, setCat] = React.useState("all")
  React.useEffect(() => { if (branch === "fixed") push("/assets/register") }, [branch])

  const grossVal   = INTANGIBLES.reduce((s, a) => s + a.cost, 0)
  const accumTotal = INTANGIBLES.reduce((s, a) => s + intangAccum(a), 0)
  const nbvTotal   = grossVal - accumTotal
  const goodwill   = INTANGIBLES.filter(a => a.lifeMonths === 0).reduce((s, a) => s + a.cost, 0)
  const monthly    = INTANGIBLES.reduce((s, a) => s + intangMonthly(a), 0)
  const inReview   = INTANGIBLES.filter(a => a.status === "review").length

  const leading = (
    <div className="flex items-center gap-2">
      <BranchToggle value={branch} onChange={setBranch} options={[{ value: "fixed", label: "Fixed", icon: "package" }, { value: "intangible", label: "Intangible", icon: "award" }]} />
      <IntangibleViewTabs view={view} />
    </div>
  )

  if (view === "amortisation") {
    return (
      <>
        <TopBar breadcrumb={[{ label: "Assets" }, { label: "Intangible Assets" }, { label: "Amortisation" }]}
          leading={leading}
          actions={<><Button variant="ghost" size="sm" leadingIcon="download">Export schedule</Button><Button variant="primary" size="sm" leadingIcon="check">Post period charge</Button></>} />
        <div className="flex-1 overflow-y-auto bg-app">
          <div className="max-w-[1440px] mx-auto p-6 space-y-5">
            <div className="grid grid-cols-4 gap-3">
              <KpiTile accent="brand"   label="Monthly amortisation" value={formatCurrency(monthly)} sub="straight-line · this period" />
              <KpiTile accent="info"    label="Accumulated to date"  value={formatCurrency(accumTotal)} sub="all definite-life" />
              <KpiTile accent="success" label="Net book value"       value={formatCurrency(nbvTotal)} sub={INTANGIBLES.length + " intangibles"} />
              <KpiTile accent="warn"    label="Impairment review"    value={inReview} sub="goodwill — annual test" />
            </div>
            <div className="bg-info-soft/50 border border-info/25 rounded-lg px-4 py-3 flex items-center gap-3">
              <div className="size-7 rounded-full bg-info-soft text-info flex items-center justify-center shrink-0"><Icon name="sparkle" size={14} /></div>
              <div className="flex-1 text-[12px] text-ink-soft"><strong className="text-ink">Indefinite-life intangibles are excluded from amortisation.</strong> Goodwill <span className="font-mono">IN-2046</span> is carried at cost and tested annually for impairment (next test 2026-12-31).</div>
              <FlowChip to="/finance/gl" label="Period charge → Finance · GL" icon="dollar" />
            </div>
            <Card>
              <CardHeader><CardTitle>Amortisation schedule</CardTitle><span className="text-[11px] text-ink-mute">Straight-line</span></CardHeader>
              <div className="grid grid-cols-[100px_1.6fr_90px_120px_130px_140px_130px] px-4 py-2 bg-cream text-[10px] uppercase tracking-wider font-bold text-ink-mute border-b border-divider">
                <span>Asset</span><span>Name</span><span>Life</span><span className="text-right">Cost</span><span className="text-right">Monthly charge</span><span className="text-right">Accumulated</span><span className="text-right">Net book value</span>
              </div>
              {INTANGIBLES.map(a => {
                const indefinite = a.lifeMonths === 0
                return (
                  <div key={a.id} className="grid grid-cols-[100px_1.6fr_90px_120px_130px_140px_130px] px-4 py-2.5 items-center border-b border-divider-soft hover:bg-cream/60">
                    <span className="font-mono text-[11px] text-brand-mid">{a.id}</span>
                    <span className="flex items-center gap-2 min-w-0"><span className="size-7 rounded-md bg-brand-soft text-brand flex items-center justify-center shrink-0"><Icon name={INTANG_CAT_ICON[a.cat] as any} size={13} /></span><span className="min-w-0"><span className="block text-[12.5px] text-ink truncate">{a.name}</span><span className="text-[10px] text-ink-mute">{a.cat}</span></span></span>
                    <span className="text-[11px] text-ink-soft">{a.life}</span>
                    <span className="text-right font-mono text-[12px] text-ink">{formatCurrency(a.cost, a.currency)}</span>
                    <span className="text-right font-mono text-[12px] text-ink">{indefinite ? "—" : formatCurrency(intangMonthly(a), a.currency)}</span>
                    <span className="text-right font-mono text-[12px] text-ink-soft">{indefinite ? "—" : formatCurrency(intangAccum(a), a.currency)}</span>
                    <span className="text-right font-mono text-[12px] text-ink">{formatCurrency(intangNBV(a), a.currency)}</span>
                  </div>
                )
              })}
            </Card>
          </div>
        </div>
      </>
    )
  }

  const cats = ["all", ...Array.from(new Set(INTANGIBLES.map(a => a.cat)))]
  const list = cat === "all" ? INTANGIBLES : INTANGIBLES.filter(a => a.cat === cat)
  return (
    <>
      <TopBar breadcrumb={[{ label: "Assets" }, { label: "Intangible Assets" }, { label: "Register" }]}
        leading={leading}
        actions={<Button variant="primary" leadingIcon="plus" size="sm">Add intangible asset</Button>} />
      <div className="flex-1 overflow-y-auto bg-app">
        <div className="max-w-[1440px] mx-auto p-6 space-y-5">
          <div className="grid grid-cols-4 gap-3">
            <KpiTile accent="brand"   label="Intangible value"  value={formatCurrency(grossVal)} sub={INTANGIBLES.length + " assets · gross"} />
            <KpiTile accent="success" label="Net book value"    value={formatCurrency(nbvTotal)} sub="after amortisation" />
            <KpiTile accent="info"    label="Amortised to date" value={formatCurrency(accumTotal)} sub="straight-line" />
            <KpiTile accent="warn"    label="Goodwill"          value={formatCurrency(goodwill)} sub="indefinite · impairment-tested" />
          </div>
          {inReview > 0 && (
            <div className="bg-warn-soft/60 border border-warn/30 rounded-lg px-4 py-3 flex items-center gap-3">
              <div className="size-7 rounded-full bg-warn-soft text-warn flex items-center justify-center shrink-0"><Icon name="alert-triangle" size={14} /></div>
              <div className="flex-1 text-[12px] text-ink-soft"><strong className="text-ink">{inReview} intangible due for impairment review</strong> — goodwill <span className="font-mono">IN-2046</span> from the Vertex Manufacturing acquisition is due its annual impairment test by 2026-12-31.</div>
              <FlowChip to="/finance/gl" label="Impairment → Finance · GL" icon="dollar" />
            </div>
          )}
          <Card>
            <CardHeader>
              <CardTitle>Intangible asset register</CardTitle>
              <div className="flex items-center gap-1.5">{cats.map(c => <button key={c} onClick={() => setCat(c)} className={cn("h-6 px-2.5 rounded-full text-[10.5px] font-semibold border transition-colors", cat === c ? "bg-brand text-white border-brand" : "bg-surface border-divider text-ink-mute hover:bg-cream")}>{c === "all" ? "All" : c}</button>)}</div>
            </CardHeader>
            <div className="grid grid-cols-[100px_1.7fr_1fr_120px_110px_150px_100px] px-4 py-2 bg-cream text-[10px] uppercase tracking-wider font-bold text-ink-mute border-b border-divider">
              <span>Asset</span><span>Name</span><span>Entity</span><span className="text-right">Cost</span><span>Useful life</span><span>Amortisation</span><span>Status</span>
            </div>
            {list.map(a => {
              const indefinite = a.lifeMonths === 0
              const pct = indefinite ? 0 : (a.amortized / a.lifeMonths) * 100
              return (
                <div key={a.id} className="grid grid-cols-[100px_1.7fr_1fr_120px_110px_150px_100px] px-4 py-2.5 items-center border-b border-divider-soft hover:bg-cream/60">
                  <span className="font-mono text-[11px] text-brand-mid">{a.id}</span>
                  <span className="flex items-center gap-2 min-w-0"><span className="size-7 rounded-md bg-brand-soft text-brand flex items-center justify-center shrink-0"><Icon name={INTANG_CAT_ICON[a.cat] as any} size={13} /></span><span className="min-w-0"><span className="block text-[12.5px] text-ink truncate">{a.name}</span><span className="text-[10px] text-ink-mute">{a.cat}</span></span></span>
                  <span className="text-[11.5px] text-ink-soft truncate">{a.entity}</span>
                  <span className="text-right font-mono text-[12px] text-ink">{formatCurrency(a.cost, a.currency)}</span>
                  <span className="text-[11px] text-ink-soft">{a.life}</span>
                  <span>{indefinite ? <span className="text-[10.5px] text-warn font-semibold">Impairment-tested</span> : <span className="flex items-center gap-2"><span className="flex-1 h-1.5 bg-cream-deep rounded-full overflow-hidden"><span className="block h-full rounded-full bg-brand" style={{ width: pct + "%" }} /></span><span className="font-mono text-[10px] text-ink-mute">{a.amortized}/{a.lifeMonths}</span></span>}</span>
                  <span><Badge variant={INTANG_TONE[a.status] as any} dot>{a.status === "review" ? "review" : "active"}</Badge></span>
                </div>
              )
            })}
          </Card>
        </div>
      </div>
    </>
  )
}

/* ════════════════════════════════════════════════════════════════════════
 * #8 · TIME & ACTIVITY — SHIFT SCHEDULING  /time/shifts
 * ════════════════════════════════════════════════════════════════════════ */
const SHIFT_STAFF = [
  { name: "Ana D.",   role: "Counter",     week: ["D","D","O","D","D","E","O"], hrs: 40, ot: 0 },
  { name: "Marco L.", role: "Counter",     week: ["E","E","E","O","D","D","O"], hrs: 40, ot: 2 },
  { name: "Wei C.",   role: "Showroom",    week: ["D","D","D","D","O","O","D"], hrs: 40, ot: 0 },
  { name: "Mei H.",   role: "Trade desk",  week: ["O","D","D","E","E","D","O"], hrs: 38, ot: 0 },
  { name: "Joy R.",   role: "Café",        week: ["D","O","D","D","D","E","E"], hrs: 42, ot: 4 },
  { name: "Raj P.",   role: "Warehouse",   week: ["N","N","N","O","O","N","N"], hrs: 40, ot: 6 },
]
const SHIFT_DAYS = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
const SHIFT_CODE: Record<string, { label: string; cls: string }> = {
  D: { label: "Day 09–17", cls: "bg-brand-soft text-brand border-brand/30" },
  E: { label: "Eve 13–21", cls: "bg-info-soft text-info border-info/30" },
  N: { label: "Night 22–06", cls: "bg-accent-soft text-accent-deep border-accent/30" },
  O: { label: "Off", cls: "bg-cream text-ink-faint border-divider" },
}
const SHIFT_OPEN = [
  { day: "Sat", role: "Counter · Manila", time: "09–17", bids: 2 },
  { day: "Sun", role: "Warehouse · Manila", time: "22–06", bids: 0 },
  { day: "Fri", role: "Café · Manila", time: "13–21", bids: 3 },
]
function ShiftScheduling() {
  return (
    <>
      <TopBar breadcrumb={[{ label: "Time & Activity" }, { label: "Shift Scheduling" }]}
        actions={<><Button variant="ghost" size="sm" leadingIcon="copy">Copy last week</Button><Button variant="primary" size="sm" leadingIcon="check">Publish roster</Button></>} />
      <div className="flex-1 overflow-y-auto bg-app">
        <div className="max-w-[1440px] mx-auto p-6 space-y-4">
          <div className="grid grid-cols-4 gap-3">
            <KpiTile accent="brand"   label="Scheduled hours" value="240" sub="this week" />
            <KpiTile accent="warn"    label="Overtime" value="12 h" sub="3 staff flagged" />
            <KpiTile accent="info"    label="Open shifts" value={SHIFT_OPEN.length} sub="awaiting cover" />
            <KpiTile accent="success" label="Coverage" value="96%" sub="vs demand forecast" />
          </div>
          <div className="grid grid-cols-[1fr_300px] gap-4">
            <Card>
              <CardHeader><CardTitle>Roster · week of May 25</CardTitle><div className="flex items-center gap-2 text-[10px]">{Object.entries(SHIFT_CODE).filter(([k]) => k !== "O").map(([k, v]) => <span key={k} className="flex items-center gap-1"><span className={cn("size-2.5 rounded-sm border", v.cls)} />{k}</span>)}</div></CardHeader>
              <div className="overflow-x-auto">
                <div className="min-w-[640px]">
                  <div className="grid grid-cols-[160px_repeat(7,1fr)_70px] px-3 py-2 bg-cream/60 text-[10px] uppercase tracking-wider font-bold text-ink-mute border-b border-divider">
                    <span>Employee</span>{SHIFT_DAYS.map(d => <span key={d} className="text-center">{d}</span>)}<span className="text-right">Hrs</span>
                  </div>
                  {SHIFT_STAFF.map(s => (
                    <div key={s.name} className="grid grid-cols-[160px_repeat(7,1fr)_70px] px-3 py-2 items-center border-b border-divider-soft hover:bg-cream/40">
                      <span className="min-w-0"><span className="block text-[12px] text-ink truncate">{s.name}</span><span className="text-[10px] text-ink-mute">{s.role}</span></span>
                      {s.week.map((c, i) => (
                        <span key={i} className="px-1 flex justify-center">
                          <span className={cn("w-full h-8 rounded-md border text-[9.5px] font-semibold flex items-center justify-center text-center leading-none", SHIFT_CODE[c].cls)} title={SHIFT_CODE[c].label}>{c === "O" ? "—" : c}</span>
                        </span>
                      ))}
                      <span className="text-right"><span className="font-mono text-[12px] text-ink">{s.hrs}</span>{s.ot > 0 && <span className="block text-[9px] text-warn font-semibold">+{s.ot} OT</span>}</span>
                    </div>
                  ))}
                </div>
              </div>
            </Card>
            <Card>
              <CardHeader><CardTitle>Open shifts & swaps</CardTitle></CardHeader>
              <div className="divide-y divide-divider-soft">
                {SHIFT_OPEN.map((o, i) => (
                  <div key={i} className="px-4 py-3">
                    <div className="flex items-center justify-between"><span className="text-[12px] text-ink font-medium">{o.role}</span><Badge variant={o.bids > 0 ? "info" : "warn"} dot>{o.bids} bids</Badge></div>
                    <div className="text-[10.5px] text-ink-mute mt-0.5">{o.day} · {o.time}</div>
                    <button className="text-[11px] text-brand font-semibold hover:underline mt-1.5">{o.bids > 0 ? "Review bids →" : "Broadcast to eligible →"}</button>
                  </div>
                ))}
              </div>
              <div className="px-4 py-3 border-t border-divider"><FlowChip to="/hr/attendance" label="Worked hours → HRIS Attendance" icon="clock" /></div>
            </Card>
          </div>
        </div>
      </div>
    </>
  )
}

/* ════════════════════════════════════════════════════════════════════════
 * #9 · FACILITIES — LEASE MANAGEMENT  /facilities/leases
 * ════════════════════════════════════════════════════════════════════════ */
interface Lease {
  id: string; asset: string; kind: "Property" | "Equipment" | "Vehicle"; lessor: string; entity: string
  start: string; term: number; monthly: number; currency: string
  rouAsset: number; liability: number; classification: "Finance" | "Operating"; status: "active" | "expiring"
}
const LEASES: Lease[] = [
  { id: "LSE-3301", asset: "Manila HQ — 4 floors", kind: "Property", lessor: "Ayala Land", entity: "HVPH", start: "2023-01-01", term: 60, monthly: 38000, currency: "USD", rouAsset: 1824000, liability: 1140000, classification: "Operating", status: "active" },
  { id: "LSE-3302", asset: "Singapore Showroom", kind: "Property", lessor: "CapitaLand", entity: "HVSG", start: "2024-06-01", term: 36, monthly: 22000, currency: "SGD", rouAsset: 792000, liability: 528000, classification: "Operating", status: "active" },
  { id: "LSE-3303", asset: "Forklift fleet (8 units)", kind: "Equipment", lessor: "Toyota Material Handling", entity: "HVPH", start: "2025-03-01", term: 48, monthly: 9600, currency: "USD", rouAsset: 460800, liability: 374400, classification: "Finance", status: "active" },
  { id: "LSE-3304", asset: "Delivery vans (5)", kind: "Vehicle", lessor: "ORIX Auto Leasing", entity: "HVAU", start: "2024-09-01", term: 36, monthly: 7200, currency: "USD", rouAsset: 259200, liability: 172800, classification: "Finance", status: "active" },
  { id: "LSE-3305", asset: "Kowloon Trade Centre unit", kind: "Property", lessor: "Sun Hung Kai", entity: "HVHK", start: "2022-07-01", term: 48, monthly: 28000, currency: "HKD", rouAsset: 1344000, liability: 168000, classification: "Operating", status: "expiring" },
]
const LEASE_KIND_TONE: Record<string, string> = { Property: "brand", Equipment: "info", Vehicle: "accent" }
function FacilitiesLeases() {
  const totalLiab = LEASES.reduce((s, l) => s + l.liability, 0)
  const totalRou = LEASES.reduce((s, l) => s + l.rouAsset, 0)
  return (
    <>
      <TopBar breadcrumb={[{ label: "Facilities" }, { label: "Lease Management" }]}
        actions={<Button variant="primary" leadingIcon="plus" size="sm">Add lease</Button>} />
      <ActionBar title="Lease Register & Accounting" status="IFRS 16 / ASC 842 · right-of-use assets & lease liabilities"
        primary={<FlowChip to="/finance/gl" label="Post schedule → Finance · GL" icon="database" />} />
      <div className="flex-1 overflow-y-auto bg-app">
        <div className="max-w-[1440px] mx-auto p-6 space-y-5">
          <div className="grid grid-cols-4 gap-3">
            <KpiTile accent="brand"   label="Right-of-use assets" value={formatCurrency(totalRou)} sub={`${LEASES.length} leases`} />
            <KpiTile accent="warn"    label="Lease liabilities" value={formatCurrency(totalLiab)} sub="present value" />
            <KpiTile accent="info"    label="Monthly lease cost" value={formatCurrency(LEASES.reduce((s, l) => s + l.monthly, 0))} sub="across entities" />
            <KpiTile accent="danger"  label="Expiring ≤ 6 mo" value={LEASES.filter(l => l.status === "expiring").length} sub="renewal decision" />
          </div>
          <Card>
            <CardHeader><CardTitle>Lease register</CardTitle></CardHeader>
            <div className="grid grid-cols-[110px_1.6fr_110px_1.1fr_110px_120px_120px_110px] px-4 py-2 bg-cream text-[10px] uppercase tracking-wider font-bold text-ink-mute border-b border-divider">
              <span>Lease</span><span>Asset</span><span>Kind</span><span>Lessor</span><span className="text-right">Monthly</span><span className="text-right">ROU asset</span><span className="text-right">Liability</span><span>Class</span>
            </div>
            {LEASES.map(l => (
              <div key={l.id} className="grid grid-cols-[110px_1.6fr_110px_1.1fr_110px_120px_120px_110px] px-4 py-2.5 items-center border-b border-divider-soft hover:bg-cream/60">
                <span className="font-mono text-[11px] text-brand-mid">{l.id}</span>
                <span className="text-[12.5px] text-ink truncate flex items-center gap-1.5">{l.asset}{l.status === "expiring" && <Badge variant="danger" dot>expiring</Badge>}</span>
                <span><Badge variant={LEASE_KIND_TONE[l.kind] as any}>{l.kind}</Badge></span>
                <span className="text-[11.5px] text-ink-soft truncate">{l.lessor}</span>
                <span className="text-right font-mono text-[12px] text-ink">{formatCurrency(l.monthly, l.currency)}</span>
                <span className="text-right font-mono text-[12px] text-ink">{formatCurrency(l.rouAsset, l.currency)}</span>
                <span className="text-right font-mono text-[12px] text-ink-soft">{formatCurrency(l.liability, l.currency)}</span>
                <span><Badge variant={l.classification === "Finance" ? "brand" : "neutral"}>{l.classification}</Badge></span>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </>
  )
}

/* ════════════════════════════════════════════════════════════════════════
 * #10 · HRIS — TRAVEL & EXPENSE  /hr/expenses
 * ════════════════════════════════════════════════════════════════════════ */
interface ExpenseClaim {
  id: string; employee: string; entity: string; type: "Mileage" | "Per-diem" | "Receipt" | "Corporate card"
  detail: string; amount: number; currency: string; date: string
  cardMatched?: boolean; status: "draft" | "submitted" | "approved" | "reimbursed" | "flagged"
}
const TE_CLAIMS: ExpenseClaim[] = [
  { id: "EXP-5541", employee: "Maya C.", entity: "HVPH", type: "Mileage", detail: "Site visit · 142 km @ $0.62", amount: 88, currency: "USD", date: "2026-05-29", status: "submitted" },
  { id: "EXP-5542", employee: "Maria A.", entity: "HVPH", type: "Per-diem", detail: "Singapore audit · 3 days", amount: 360, currency: "SGD", date: "2026-05-28", status: "approved" },
  { id: "EXP-5543", employee: "Wei C.", entity: "HVSG", type: "Receipt", detail: "Client dinner · Orchard Retail", amount: 184, currency: "SGD", date: "2026-05-27", cardMatched: true, status: "reimbursed" },
  { id: "EXP-5544", employee: "Raj P.", entity: "HVIN", type: "Corporate card", detail: "Flight MUM→DEL", amount: 220, currency: "USD", date: "2026-05-26", cardMatched: true, status: "approved" },
  { id: "EXP-5545", employee: "Mei H.", entity: "HVHK", type: "Receipt", detail: "Taxi + tolls (no receipt)", amount: 64, currency: "HKD", date: "2026-05-26", cardMatched: false, status: "flagged" },
  { id: "EXP-5546", employee: "Marco L.", entity: "HVPH", type: "Per-diem", detail: "Provincial deployment · 5 days", amount: 500, currency: "USD", date: "2026-05-25", status: "submitted" },
  { id: "EXP-5547", employee: "Joy R.", entity: "HVPH", type: "Corporate card", detail: "Team supplies — café", amount: 142, currency: "USD", date: "2026-05-24", cardMatched: true, status: "reimbursed" },
]
const TE_TONE: Record<string, string> = { draft: "neutral", submitted: "info", approved: "brand", reimbursed: "success", flagged: "danger" }
const TE_TYPE_ICON: Record<string, string> = { "Mileage": "route", "Per-diem": "calendar", "Receipt": "receipt", "Corporate card": "credit-card" }
function HRExpenses() {
  const [status, setStatus] = React.useState("all")
  const list = TE_CLAIMS.filter(c => status === "all" || c.status === status)
  const pending = TE_CLAIMS.filter(c => c.status === "submitted").length
  return (
    <>
      <TopBar breadcrumb={[{ label: "HRIS" }, { label: "Travel & Expense" }]} />
      <ActionBar title="Travel & Expense" status={`${pending} awaiting approval · mileage · per-diem · receipt capture · corporate-card matching`}
        search={<Button variant="ghost" size="sm" leadingIcon="image">Scan receipt</Button>}
        primary={<Button variant="primary" leadingIcon="plus" size="sm">New claim</Button>}
        filters={["all","submitted","approved","reimbursed","flagged"].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 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="credit-card" size={14} /></div>
            <div className="flex-1 text-[12px] text-ink-soft">Corporate-card feed auto-matches charges to claims. The card programme itself is administered in <strong className="text-ink">Finance</strong>; approved reimbursements post to payroll.</div>
            <FlowChip to="/finance/cash" label="Finance · Corporate cards" icon="credit-card" />
            <FlowChip to="/hr/payroll" label="HRIS · Payroll" icon="dollar" />
          </div>
          <Card>
            <div className="grid grid-cols-[110px_1.1fr_90px_120px_1.5fr_120px_130px_120px] px-4 py-2 bg-cream text-[10px] uppercase tracking-wider font-bold text-ink-mute border-b border-divider">
              <span>Claim</span><span>Employee</span><span>Entity</span><span>Type</span><span>Detail</span><span className="text-right">Amount</span><span>Card match</span><span>Status</span>
            </div>
            {list.map(c => (
              <div key={c.id} className="grid grid-cols-[110px_1.1fr_90px_120px_1.5fr_120px_130px_120px] px-4 py-2.5 items-center border-b border-divider-soft hover:bg-cream/60">
                <span className="font-mono text-[11px] text-brand-mid">{c.id}</span>
                <span className="text-[12px] text-ink truncate">{c.employee}</span>
                <span className="text-[11px] text-ink-mute">{c.entity}</span>
                <span className="flex items-center gap-1.5 text-[11.5px] text-ink-soft"><Icon name={TE_TYPE_ICON[c.type] as any} size={13} className="text-ink-mute" />{c.type}</span>
                <span className="text-[11.5px] text-ink-soft truncate">{c.detail}</span>
                <span className="text-right font-mono text-[12px] text-ink">{formatCurrency(c.amount, c.currency)}</span>
                <span>{c.type === "Corporate card" || c.cardMatched != null ? (c.cardMatched ? <span className="inline-flex items-center gap-1 text-[10.5px] text-success"><Icon name="check" size={11} strokeWidth={3} />matched</span> : <span className="inline-flex items-center gap-1 text-[10.5px] text-danger"><Icon name="alert-triangle" size={11} />no match</span>) : <span className="text-[10.5px] text-ink-faint">—</span>}</span>
                <span><Badge variant={TE_TONE[c.status] as any} dot>{c.status}</Badge></span>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </>
  )
}

/* ════════════════════════════════════════════════════════════════════════
 * #11 · ADMIN — ORG SCOPE  /admin/org-scope  (the flagship differentiator)
 * ----------------------------------------------------------------------------
 * Branded sub-tenants in ONE data model. Each sub-tenant carries its own
 * brand, subdomain & module scope while sharing the group ledger, master
 * data and AI layer — with explicit isolation boundaries. No competitor
 * ships this; it is the headline of the Admin Center.
 * ════════════════════════════════════════════════════════════════════════ */
interface SubTenant {
  id: string; brand: string; subdomain: string; color: string
  entities: string[]; modules: number; users: number
  isolation: "Isolated" | "Shared ledger" | "Shared + isolated AR"; status: "live" | "provisioning"
}
const ORG_SUBTENANTS: SubTenant[] = [
  { id: "ST-01", brand: "Helios Industrial", subdomain: "industrial.helios.app", color: "#0D4A4A", entities: ["HVPH", "HVAU", "HVIN"], modules: 18, users: 184, isolation: "Shared ledger", status: "live" },
  { id: "ST-02", brand: "Helios Retail",     subdomain: "retail.helios.app",     color: "#B25C3B", entities: ["HVSG", "HVHK"], modules: 14, users: 96, isolation: "Shared + isolated AR", status: "live" },
  { id: "ST-03", brand: "Helios Cloud",      subdomain: "cloud.helios.app",      color: "#2A6FDB", entities: ["HVG · Group"], modules: 9, users: 38, isolation: "Isolated", status: "live" },
  { id: "ST-04", brand: "Vertex Field Svcs", subdomain: "field.vertex.app",      color: "#1F8A5B", entities: ["HVPH", "HVAU"], modules: 7, users: 72, isolation: "Shared ledger", status: "provisioning" },
]
/* what's shared at the group level vs isolated per sub-tenant */
const ORG_SHARED = [
  { label: "Group general ledger & consolidation", icon: "database", shared: true },
  { label: "Master data — products, vendors, customers", icon: "tag", shared: true },
  { label: "Identity, SSO & role model", icon: "lock", shared: true },
  { label: "Cenora AI layer & agents", icon: "sparkle", shared: true },
  { label: "Brand, theme & public domains", icon: "globe", shared: false },
  { label: "Pricing, promotions & storefront", icon: "credit-card", shared: false },
  { label: "Module subscriptions & feature flags", icon: "layers", shared: false },
  { label: "Document numbering sequences", icon: "list", shared: false },
]
const ORG_ISO_TONE: Record<string, string> = { "Isolated": "danger", "Shared ledger": "brand", "Shared + isolated AR": "accent" }

function AdminOrgScope() {
  const { push } = useRouter()
  const totalUsers = ORG_SUBTENANTS.reduce((s, t) => s + t.users, 0)
  return (
    <>
      <TopBar breadcrumb={[{ label: "Admin / Settings" }, { label: "Org Scope" }]}
        actions={<Button variant="primary" leadingIcon="plus" size="sm">New sub-tenant</Button>} />
      <div className="flex-1 overflow-y-auto bg-app">
        <div className="max-w-[1440px] mx-auto p-6 space-y-5">

          {/* Flagship banner */}
          <div className="rounded-xl p-5 text-white relative overflow-hidden" style={{ background: "linear-gradient(120deg, var(--brand), #0a3a3a)" }}>
            <div className="flex items-start gap-3">
              <span className="size-10 rounded-xl bg-white/15 flex items-center justify-center shrink-0"><Icon name="globe" size={20} /></span>
              <div className="flex-1">
                <div className="flex items-center gap-2"><span className="font-serif text-[20px]">Org Scope</span><span className="text-[9px] font-bold uppercase tracking-wider bg-accent/90 text-ink px-2 py-0.5 rounded-full">Differentiator</span></div>
                <p className="text-[12.5px] text-white/85 mt-1 max-w-[760px] leading-relaxed">One data model, many <strong>branded sub-tenants</strong>. Each runs its own brand, public domain and module scope — while sharing the group ledger, master data, identity and AI layer. Isolation boundaries are explicit and auditable. No other ERP ships this.</p>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-4 gap-3">
            <KpiTile accent="brand"   label="Branded sub-tenants" value={ORG_SUBTENANTS.length} sub="in one data model" />
            <KpiTile accent="info"    label="Entities in scope" value="5" sub="across sub-tenants" />
            <KpiTile accent="success" label="Users" value={totalUsers} sub="single identity model" />
            <KpiTile accent="accent"  label="Shared services" value="4 / 8" sub="rest isolated per brand" />
          </div>

          {/* Topology diagram */}
          <Card>
            <CardHeader><CardTitle>Tenant topology</CardTitle><span className="text-[10.5px] text-ink-mute">Helios Vertex Group · one tenant</span></CardHeader>
            <div className="p-6">
              <div className="flex flex-col items-center">
                <div className="px-4 py-2 rounded-lg bg-brand text-white text-[12.5px] font-semibold flex items-center gap-2"><Icon name="database" size={14} />Helios Vertex Group — shared data model</div>
                <div className="w-px h-5 bg-divider-strong" />
                <div className="grid grid-cols-4 gap-3 w-full">
                  {ORG_SUBTENANTS.map(t => (
                    <button key={t.id} onClick={() => push("/multi-entity/navigator")} className="rounded-lg border border-divider bg-surface p-3 text-left hover:shadow-md hover:border-divider-strong transition-all">
                      <div className="flex items-center gap-2"><span className="size-6 rounded-md flex items-center justify-center text-white shrink-0" style={{ background: t.color }}><Icon name="globe" size={12} /></span><span className="text-[12px] font-semibold text-ink truncate">{t.brand}</span></div>
                      <div className="font-mono text-[9.5px] text-ink-mute mt-1.5 truncate">{t.subdomain}</div>
                      <div className="flex flex-wrap gap-1 mt-2">{t.entities.map(e => <span key={e} className="text-[9px] px-1.5 py-px rounded bg-cream border border-divider text-ink-soft">{e}</span>)}</div>
                      <div className="mt-2 pt-2 border-t border-divider-soft flex items-center justify-between"><span className="text-[10px] text-ink-mute">{t.modules} modules · {t.users} users</span>{t.status === "provisioning" && <Badge variant="warn" dot>setting up</Badge>}</div>
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </Card>

          <div className="grid grid-cols-[1.5fr_1fr] gap-4">
            {/* sub-tenant register */}
            <Card>
              <CardHeader><CardTitle>Sub-tenant register</CardTitle></CardHeader>
              <div className="grid grid-cols-[1.4fr_1.3fr_110px_70px_120px] px-4 py-2 bg-cream text-[10px] uppercase tracking-wider font-bold text-ink-mute border-b border-divider">
                <span>Brand</span><span>Subdomain</span><span>Isolation</span><span className="text-right">Users</span><span>Status</span>
              </div>
              {ORG_SUBTENANTS.map(t => (
                <div key={t.id} className="grid grid-cols-[1.4fr_1.3fr_110px_70px_120px] px-4 py-2.5 items-center border-b border-divider-soft hover:bg-cream/60">
                  <span className="flex items-center gap-2 min-w-0"><span className="size-2.5 rounded-full shrink-0" style={{ background: t.color }} /><span className="text-[12.5px] text-ink truncate">{t.brand}</span></span>
                  <span className="font-mono text-[10.5px] text-ink-mute truncate">{t.subdomain}</span>
                  <span><Badge variant={ORG_ISO_TONE[t.isolation] as any}>{t.isolation}</Badge></span>
                  <span className="text-right font-mono text-[12px] text-ink-soft">{t.users}</span>
                  <span>{t.status === "live" ? <Badge variant="success" dot>Live</Badge> : <Badge variant="warn" dot>Provisioning</Badge>}</span>
                </div>
              ))}
            </Card>
            {/* shared vs isolated */}
            <Card>
              <CardHeader><CardTitle>Shared vs isolated</CardTitle></CardHeader>
              <div className="divide-y divide-divider-soft">
                {ORG_SHARED.map((s, i) => (
                  <div key={i} className="px-4 py-2.5 flex items-center gap-3">
                    <span className={cn("size-7 rounded-lg flex items-center justify-center shrink-0", s.shared ? "bg-brand-soft text-brand" : "bg-accent-soft text-accent-deep")}><Icon name={s.icon as any} size={13} /></span>
                    <span className="flex-1 text-[11.5px] text-ink-soft">{s.label}</span>
                    <Badge variant={s.shared ? "brand" : "accent"} dot>{s.shared ? "Group-shared" : "Per sub-tenant"}</Badge>
                  </div>
                ))}
              </div>
            </Card>
          </div>

        </div>
      </div>
    </>
  )
}

Object.assign(globalThis as any, { AssetsIntangible, ShiftScheduling, FacilitiesLeases, HRExpenses, AdminOrgScope })

})();/*__IIFE_WRAP_END__*/