{/* Subtle radial accent in the background */}

{site.customer || site.sector || 'Workspace'} · {site.id}

{site.name.replace(/^[^·]+·\s/, '')}

{/* Status row */}

{statusLabel}

{/* Fleet state mix bar */}

{counts.ok > 0 &&

} {counts.warn > 0 &&

} {counts.down > 0 &&

} {counts.idle > 0 &&

}

{/* Stat row */}

{onlinePct}% online {counts.ok}/{total} devices 0 ? '#E0A13B' : 'rgba(255,255,255,.65)' }}> {openAlerts} alert{openAlerts !== 1 ? 's' : ''}

); }; const KPIStrip = ({ devices, alerts }) => { const total = devices.length; const online = devices.filter(d => d.state === 'ok').length; const warn = devices.filter(d => d.state === 'warn').length; const down = devices.filter(d => d.state === 'down').length; const openAlerts = alerts.filter(a => !a.ack).length; return (

); }; const FleetStatusDonut = ({ devices }) => { const counts = { ok:0, warn:0, down:0, idle:0 }; devices.forEach(d => { counts[d.state] = (counts[d.state]||0)+1; }); const slices = [ { label:'Online', value:counts.ok, color:'#3A6FF8' }, { label:'Degraded', value:counts.warn, color:'#E0A13B' }, { label:'Offline', value:counts.down, color:'#C44A4A' }, { label:'Idle', value:counts.idle, color:'#878787' }, ].filter(s => s.value > 0); return ( ); }; const SectorBreakdown = ({ devices }) => { // Aggregate by kind, take top 6 const byKind = {}; devices.forEach(d => { byKind[d.kind] = (byKind[d.kind]||0)+1; }); const palette = ['#0A0F1F','#3A6FF8','#7A9CFF','#23459E','#5A5E6E','#878787']; const slices = Object.entries(byKind) .sort((a,b) => b[1]-a[1]) .slice(0, 6) .map(([k,v], i) => ({ label: k.charAt(0).toUpperCase()+k.slice(1).replace('-',' '), value:v, color:palette[i % palette.length] })); return ( ); }; // Compact "today's snapshot" card — sector-aware so workspace sites // show occupancy / air quality, energy sites show throughput / cost, etc. // Fills the visual gap next to the Fleet Status donut. const TodaySnapshot = ({ site, devices }) => { const siteDevices = devices.filter(d => d.site === site.id); // Compute relevant stats from real device data const occupancy = siteDevices.filter(d => d.kind === 'occupancy'); const co2 = siteDevices.filter(d => d.kind === 'sensor' && (d.metric.label === 'CO₂' || d.metric.unit === 'ppm')); const meters = siteDevices.filter(d => d.kind === 'meter'); const meetings = siteDevices.filter(d => d.kind === 'meeting-room'); const hotDesks = siteDevices.filter(d => d.kind === 'hot-desk'); const totalPeople = Math.round(occupancy.reduce((s, d) => s + d.metric.value, 0)); const peakPpl = occupancy.length ? Math.max(...occupancy.map(d => d.metric.value)) : 0; const avgCo2 = co2.length ? Math.round(co2.reduce((s, d) => s + d.metric.value, 0) / co2.length) : null; const totalKw = Math.round(meters.reduce((s, d) => s + d.metric.value, 0)); const avgBooked = meetings.length ? Math.round(meetings.reduce((s, d) => s + d.metric.value, 0) / meetings.length) : null; const deskTotal = hotDesks.reduce((s, d) => s + d.metric.value, 0); const deskCap = hotDesks.reduce((s, d) => s + d.metric.max, 0); const isWorkspace = site.sector === 'Workspace' || site.customer === 'Form Property'; // Pick 4 relevant stats based on sector let stats; if (isWorkspace) { stats = [ { label:'People on site', value:totalPeople, unit:'', hint:'across occupancy sensors' }, { label:'Air quality', value:avgCo2 || '—', unit:'ppm', hint:`avg CO₂ · ${avgCo2 > 1000 ? 'elevated' : 'good'}` }, { label:'Energy use', value:totalKw, unit:'kW', hint:'current draw' }, ...(meetings.length ? [{ label:'Meeting rooms', value:avgBooked, unit:'%', hint:'avg utilisation today' }] : hotDesks.length ? [{ label:'Hot desks', value:deskTotal, unit:`/${deskCap}`, hint:'occupied · capacity' }] : [{ label:'Active sensors', value:siteDevices.length, unit:'', hint:'across the site' }] ), ]; } else { stats = [ { label:'Devices', value:siteDevices.length, unit:'', hint:'on this site' }, { label:'Energy', value:totalKw || '—', unit:'kW', hint:'current draw' }, { label:'Avg CO₂', value:avgCo2 || '—', unit:'ppm', hint:avgCo2 > 1000 ? 'review ventilation' : 'within range' }, { label:'Active', value:siteDevices.filter(d => d.state==='ok').length, unit:'', hint:'online now' }, ]; } return (

Today · live snapshot

{isWorkspace ? 'Workspace activity' : 'Site activity'}

{stats.map((s, i) => (

{s.label}

{s.value}{s.unit && {s.unit}}

{s.hint}

))}

); }; // Synthetic 24h x 7d alert-volume heatmap const AlertHeatmap = () => { // deterministic pseudo-random based on (row, col) so it doesn't jitter every render const cols = ['00','03','06','09','12','15','18','21']; const rows = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']; const matrix = rows.map((_, r) => cols.map((_, c) => { // peak around 09-15 weekdays const peakHour = c >= 3 && c <= 5 ? 1 : 0.3; const weekday = r < 5 ? 1 : 0.4; const noise = ((r * 7 + c * 13) % 7) / 10; return Math.round(peakHour * weekday * (3 + noise * 5)); })); return ; }; const LiveEventStream = ({ events }) => { const isMobile = useIsMobile(); return (

Event stream

Following

{events.map(([t,lvl,src,msg],i) => { if (isMobile) { return (

{lvl.toUpperCase()} {t}

{msg}

{src}

); } return (

{t} {lvl.toUpperCase()} {src} {msg}

); })}

); }; const HealthTrend = () => { const series = [ { label:'Throughput', unit:'msg/s', color:'#3A6FF8', data: MOCK.makeSeries(800, 60) }, { label:'Errors', unit:'/min', color:'#C44A4A', data: MOCK.makeSeries(2, 1) }, ]; const [range, setRange] = React.useState('24h'); return ; }; // Connected systems panel — shows every subsystem the platform brings // into one dashboard. The pitch: instead of 6+ separate vendor apps // (BMS, lighting, access, HVAC, energy, fire), it's one TEO view. const ConnectedSystems = ({ devices, site }) => { const isMobile = useIsMobile(); const siteDevices = devices.filter(d => d.site === site.id); // Categorise devices into BMS subsystems by kind const SYSTEMS = [ { key:'hvac', label:'HVAC', kinds:['ahu','chiller','heat-pump','vrf-outdoor','vrf-indoor'], icon:'wind', vendor:'Carrier · Mitsubishi · Trane' }, { key:'lighting', label:'Lighting', kinds:['lighting'], icon:'lightbulb', vendor:'Casambi' }, { key:'access', label:'Access', kinds:['smart-lock'], icon:'lock', vendor:'Salto' }, { key:'energy', label:'Energy', kinds:['meter','smart-meter','solar-pv'], icon:'plug', vendor:'Schneider · Landis+Gyr' }, { key:'air', label:'Air quality',kinds:['sensor','damp-sensor'], icon:'leaf', vendor:'TEO sensors' }, { key:'space', label:'Workspace',kinds:['occupancy','hot-desk','meeting-room','ap'], icon:'users', vendor:'TEO · Aruba' }, { key:'mobility', label:'Mobility', kinds:['lift','ev-charger'], icon:'arrow-up-down', vendor:'KONE · Pod Point' }, ]; const rows = SYSTEMS.map(s => { const matched = siteDevices.filter(d => s.kinds.includes(d.kind)); const ok = matched.filter(d => d.state === 'ok' || d.state === 'idle').length; const total = matched.length; const issues = matched.filter(d => d.state === 'warn' || d.state === 'down').length; return { ...s, total, ok, issues, status: issues > 0 ? 'warn' : total > 0 ? 'ok' : 'idle' }; }); const totalDevices = siteDevices.length; const totalSystems = rows.filter(r => r.total > 0).length; return (

One platform

Connected systems

All seven subsystems on this site report into one dashboard — replacing the patchwork of vendor apps.

{totalSystems}/ 7

integrated

{rows.map((r, i) => (

{r.label}

{r.vendor}

{r.total === 0 ? — : {r.total}}

))}

{totalDevices} devices across {totalSystems} subsystems → unified
); }; const ZoneSummary = ({ devices, site, onZoneClick }) => { const isMobile = useIsMobile(); const siteDevices = devices.filter(d => d.site === site.id); const zones = {}; siteDevices.forEach(d => { if (!zones[d.zone]) zones[d.zone] = { total:0, ok:0, warn:0, down:0, idle:0 }; zones[d.zone].total++; zones[d.zone][d.state]++; }); return (

Site rollup
{site.name}

{Object.entries(zones).map(([zone, s]) => (

{zone}

{s.total} devices

{s.ok>0 && {s.ok}} {s.warn>0 && {s.warn}} {s.down>0 && {s.down}} {s.idle>0 && {s.idle}}

))} ); }; const Overview = ({ site, devices, alerts, events, onNav, sites, onSite }) => { const isMobile = useIsMobile(); const [scope, setScope] = React.useState('This building'); // If on a customer with multiple sites, expose a scope toggle for aggregation. const groupSites = site.customer ? sites.filter(s => s.customer === site.customer) : []; const showAggregateToggle = groupSites.length > 1; const scopedSiteIds = (showAggregateToggle && scope === 'All buildings') ? new Set(groupSites.map(s => s.id)) : new Set([site.id]); const scopedDevices = devices.filter(d => scopedSiteIds.has(d.site)); const scopedAlerts = alerts.filter(a => scopedSiteIds.has(a.site)); const scopedEvents = events; // events feed not site-scoped return (
{isMobile && } {showAggregateToggle && (

{site.customer} · {groupSites.length} buildings

)}

{/* Portfolio map — full-width — always visible above the rest */} {sites && sites.length > 1 && ( { onSite && onSite(s); }} devices={devices} alerts={alerts} /> )} {/* Row 1: donut (1/3) | heatmap (2/3) */}

{/* Row 2: snapshot (1/2) | connected systems (1/2) */}

{/* Row 3: zone summary full-width */} onNav('twin')} /> {/* Row 4: live event stream full-width */}

); }; Object.assign(window, { Overview });