{data.map((v, i) => (

))}

); } function CArea({ pts, h = 96, w = 320, accent, soft }) { const max = Math.max(...pts), min = Math.min(...pts); const norm = (v) => h - ((v - min) / (max - min || 1)) * (h - 16) - 8; const step = w / (pts.length - 1); const d = pts.map((v, i) => `${i === 0 ? 'M' : 'L'}${(i * step).toFixed(1)},${norm(v).toFixed(1)}`).join(' '); return ( ); } // ── shared dashboard shell — guarantees uniform look across all three ────────── function DashShell({ w = 600, product, account, breadcrumb, title, subtitle, sidebar, metrics, children }) { const t = PROD[product]; return (

{/* topbar */}

{account} ▾ TODAY

{/* dark sidebar */}

{sidebar.map((sec, si) => (

{sec.label}

{sec.items.map((it, ii) => { const active = si === 0 && ii === 0; return (

{it}

); })}

))}

{/* main */}

{breadcrumb}

{title}

{subtitle}

{/* 5 uniform metric tiles */}

{metrics.map((m) => (

{m.l}

{m.v}

{m.s}

))}

{/* product-specific 2-col content */}

{children}

); } // small reusable content card function DCard({ title, badge, badgeTone, children, pad = 11 }) { return (

{title && (

{title} {badge && {badge}}

)} {children}

); } // ── KYNDRID INTELLIGENCE ──────────────────────────────────────────────────────── function DashIntelligence({ w = 600 }) { const t = PROD.intelligence; return (

Actual sales Forecast

{['Reorder draught lines before Friday', 'Cut Tuesday evening labour by 1 shift', 'Menu item #14 margin slipping — review price'].map((r, i) => (

{r}

))}

Updated 2 min ago View all →

); } // ── ASSET OPS ──────────────────────────────────────────────────────────────────── function DashAssetOps({ w = 600 }) { const t = PROD.asset; const categories = [ { n: 'IT Equipment', pct: 18, count: 21, val: '£35,460', col: '#3b82f6' }, { n: 'Furniture', pct: 18, count: 21, val: '£20,320', col: '#8b5cf6' }, { n: 'Office Equip.', pct: 13, count: 15, val: '£14,200', col: '#22c55e' }, { n: 'Electrical', pct: 23, count: 26, val: '£17,938', col: '#f59e0b' }, { n: 'Vehicles', pct: 3, count: 3, val: '£34,850', col: '#ef4444' }, { n: 'Building & Fac.', pct: 13, count: 15, val: '£12,065', col: '#6b7280' }, ]; const sites = [ { n: 'HQ · Croydon', count: 15, pct: 100 }, { n: 'Bradford Office', count: 10, pct: 67 }, { n: 'Birmingham Branch', count: 10, pct: 67 }, { n: 'Leicester Branch', count: 9, pct: 60 }, { n: 'Glasgow Branch', count: 9, pct: 60 }, ]; return (

115 assets

Across 26 sites £148,153 total value

{categories.map(c =>

)}

{categories.map(c => (

{c.n} {c.pct}%

{c.val}

{c.count}

))}

{sites.map(s => (

{s.n} {s.count}

))}

Estate health

Across all sites

16 watch

); } // ── HERO AUTO-SWITCHING DASHBOARD ────────────────────────────────────────────── function HeroCarousel({ w = 600 }) { const intervalMs = 6000; const stageH = 430; const slides = [ { key: 'intelligence', render: () => }, { key: 'asset', render: () => }, ]; const [active, setActive] = React.useState(0); const [cycle, setCycle] = React.useState(0); const [reduceMotion, setReduceMotion] = React.useState(false); React.useEffect(() => { const media = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)'); if (!media) return; const update = () => setReduceMotion(media.matches); update(); if (media.addEventListener) { media.addEventListener('change', update); return () => media.removeEventListener('change', update); } media.addListener(update); return () => media.removeListener(update); }, []); React.useEffect(() => { const id = setTimeout(() => { setActive((a) => (a + 1) % slides.length); setCycle((c) => c + 1); }, intervalMs); return () => clearTimeout(id); }, [active, cycle]); const switchSlide = () => { setActive((a) => (a + 1) % slides.length); setCycle((c) => c + 1); }; const activeTone = PROD[slides[active].key]; return (

{slides.map((slide, i) => (

{slide.render()}

))}

); } Object.assign(window, { HeroCarousel, DashIntelligence, DashAssetOps, KProductLogo, KMark, LOGO_SRC, PROD, DashShell, DCard, CBars, CArea });