/* eslint-disable */
/* =========================================================
TEO IoT Dashboard — primitives.
All shared atoms used across screens. TEO tokens only:
- radius 0 (except pill/circle)
- hairline borders (#EDEDED on light, rgba(255,255,255,.12) on dark)
- IBM Plex Sans + Mono
- accent #3A6FF8 used sparingly
========================================================= */
const COLORS = {
ok: '#3A6FF8',
warn: '#E0A13B',
crit: '#C44A4A',
idle: '#878787',
info: '#5A5E6E',
down: '#C44A4A',
};
const STATE_LABEL = {
ok:'Online', warn:'Degraded', down:'Offline', idle:'Idle',
crit:'Critical', info:'Info',
};
const Eyebrow = ({ children, accent, style }) => (
{children}
);
const Hairline = ({ vertical, color='#EDEDED', size=14, style }) =>
vertical
?
:
;
const StatusDot = ({ state='ok', size=8, pulse }) => {
const c = COLORS[state] || COLORS.ok;
return (
);
};
const StatusPill = ({ state='ok', children, mono }) => {
const c = COLORS[state] || COLORS.ok;
return (
{children || STATE_LABEL[state] || state}
);
};
const Sev = ({ s }) => {
const map = { info:['INFO','#5A5E6E','#F6F7F9'], warn:['WARN','#E0A13B','#FBF1DD'], crit:['CRIT','#C44A4A','#FADEDE'], ok:['OK','#3A6FF8','#E2EAFD'] };
const [l,col,bg] = map[s] || map.info;
return {l};
};
const Tag = ({ children, dark }) => (
{children}
);
const Button = ({ kind='primary', children, style, ...r }) => {
const styles = {
primary: { background:'#0A0F1F', color:'#FFF', border:'1px solid #0A0F1F' },
ghost: { background:'#FFF', color:'#0A0F1F', border:'1px solid #0A0F1F' },
accent: { background:'#3A6FF8', color:'#FFF', border:'1px solid #3A6FF8' },
subtle: { background:'transparent', color:'#0A0F1F', border:'1px solid #EBEBEB' },
danger: { background:'#FFF', color:'#C44A4A', border:'1px solid #C44A4A' },
};
return (
);
};
const SegmentedControl = ({ value, onChange, options }) => (
{options.map((o,i) => (
))}
);
const Card = ({ children, dark, pad=24, style }) => (
{children}
);
const MetricTile = ({ label, value, unit, delta, sub, big, mono }) => {
const isMobile = useIsMobile();
const baseSize = big ? 56 : 48;
const valSize = isMobile ? Math.round(baseSize * 0.65) : baseSize;
const unitSize = isMobile ? 14 : 18;
return (
{label}
{value}
{unit && {unit}}
{delta && {delta}}
{sub}
);
};
// Threshold bar — shows a metric inside its operating envelope with warn/crit zones.
const ThresholdBar = ({ value, min=0, max=100, warn, crit, unit='', height=8 }) => {
const pct = (v) => Math.max(0, Math.min(100, (v-min)/(max-min)*100));
const warnAt = warn!=null ? pct(warn) : null;
const critAt = crit!=null ? pct(crit) : null;
const valAt = pct(value);
// colour the value dot based on zone
const dotColor = crit!=null && value>=crit ? '#C44A4A'
: warn!=null && value>=warn ? '#E0A13B'
: '#3A6FF8';
return (
{warnAt!=null &&
}
{critAt!=null &&
}
{min}{unit}
{max}{unit}
);
};
// Sparkline — tiny inline trend used in tables.
const Sparkline = ({ data, w=80, h=22, color='#3A6FF8' }) => {
if (!data || !data.length) return null;
const max = Math.max(...data), min = Math.min(...data);
const pts = data.map((v,i)=>[i*(w/(data.length-1)), h - (v-min)/(max-min||1)*h]);
const d = pts.map((p,i)=> (i?'L':'M')+p[0].toFixed(1)+' '+p[1].toFixed(1)).join(' ');
return
};
// LiveDot — animated "live" indicator for stream headers.
const LiveDot = () => (
Live
);
const KindIcon = ({ kind, size=14 }) => {
const map = {
// Energy / logistics (original)
transformer:'zap', switchgear:'toggle-right', battery:'battery-charging',
inverter:'power', sensor:'radio', gateway:'router',
vehicle:'truck', conveyor:'move-right',
// Manufacturing
cnc:'cog', robot:'bot', paint:'paintbrush', ahu:'wind',
plant:'gauge', meter:'gauge-circle',
// HVAC
'vrf-outdoor':'air-vent', 'vrf-indoor':'snowflake', chiller:'thermometer-snowflake',
// Campus
occupancy:'users', projector:'projector', ap:'wifi',
};
return ;
};
// Match against the same 768px breakpoint used in the responsive CSS.
function useIsMobile(query = '(max-width: 768px)') {
const [m, setM] = React.useState(
() => typeof window !== 'undefined' && window.matchMedia(query).matches
);
React.useEffect(() => {
const mq = window.matchMedia(query);
const onChange = (e) => setM(e.matches);
mq.addEventListener ? mq.addEventListener('change', onChange) : mq.addListener(onChange);
return () => mq.removeEventListener ? mq.removeEventListener('change', onChange) : mq.removeListener(onChange);
}, [query]);
return m;
}
// Generic "field with label" used inside mobile cards.
const Field = ({ label, children, align='left', mono }) => (
{label}
{children}
);
// Mobile-friendly section heading used at the top of a card-stack list.
const MobileCardListHeader = ({ eyebrow, title, right }) => (
);
Object.assign(window, {
COLORS, Eyebrow, Hairline, StatusDot, StatusPill, Sev, Tag, Button,
SegmentedControl, Card, MetricTile, ThresholdBar, Sparkline, LiveDot, KindIcon,
useIsMobile, Field, MobileCardListHeader,
});