// Shared UI primitives for Norwill scorecard
const { useState, useEffect, useMemo, useRef, useCallback } = React;
// ─── Responsive helper ───────────────────────────────────────
// useMedia('(max-width: 760px)') → boolean. Re-renders when the match flips.
function useMedia(query) {
const [matches, setMatches] = useState(() =>
typeof window !== 'undefined' && window.matchMedia ? window.matchMedia(query).matches : false
);
useEffect(() => {
if (!window.matchMedia) return;
const mq = window.matchMedia(query);
const onChange = () => setMatches(mq.matches);
onChange();
if (mq.addEventListener) {
mq.addEventListener('change', onChange);
return () => mq.removeEventListener('change', onChange);
}
mq.addListener(onChange);
return () => mq.removeListener(onChange);
}, [query]);
return matches;
}
// ─── Status helpers ──────────────────────────────────────────
function metricCadence(metric) {
if (!metric) return 'weekly';
if (metric.frequency) return metric.frequency;
return metric.daily != null ? 'daily' : 'weekly';
}
function entryTarget(metric, period) {
if (!metric) return null;
if (period === 'day') return metric.dailyTarget ?? metric.daily ?? null;
if (period === 'month') return metric.monthlyTarget ?? metric.monthly ?? metric.weeklyTarget ?? metric.weekly ?? null;
return metric.weeklyTarget ?? metric.weekly ?? null;
}
function scorecardTarget(metric) {
if (!metric) return null;
if (metricCadence(metric) === 'monthly') {
return metric.monthlyTarget ?? metric.monthly ?? metric.weeklyTarget ?? metric.weekly ?? null;
}
return metric.weeklyTarget ?? metric.weekly ?? null;
}
function metricAgg(metric) {
if (!metric) return 'SUM';
return metric.aggregationMethod ? metric.aggregationMethod.toUpperCase() : (metric.agg || 'SUM');
}
function metricStatus(metric, value) {
if (value == null || isNaN(value)) return 'unknown';
const goal = scorecardTarget(metric);
if (goal == null || isNaN(goal)) return 'unknown';
if (metric.dir === '>=') {
if (value >= goal) return 'good';
if (value >= goal * 0.85) return 'warn';
return 'bad';
} else {
if (value <= goal) return 'good';
if (value <= goal * 1.15) return 'warn';
return 'bad';
}
}
function fmtNum(n, metric) {
if (n == null || isNaN(n)) return '—';
if (!metric) return typeof n === 'number' ? n.toLocaleString() : n;
if (metric.fn === 'Finance' || metric.id === 'cash' || metric.id === 'ar60') return '$' + Math.round(n).toLocaleString();
if (metric.label.includes('%')) return Math.round(n * 10) / 10 + '%';
return Math.round(n).toLocaleString();
}
// ─── Sparkline (SVG) ─────────────────────────────────────────
function Spark({ data, width = 120, height = 34, target = null, dir = '>=', fill = true }) {
const clean = (data || []).filter(v => v != null && !isNaN(v));
if (clean.length < 2) return null;
const pad = 2;
const min = Math.min(...clean, target ?? Infinity);
const max = Math.max(...clean, target ?? -Infinity);
const range = max - min || 1;
const pts = clean.map((v, i) => {
const x = pad + (i / (clean.length - 1)) * (width - pad * 2);
const y = height - pad - ((v - min) / range) * (height - pad * 2);
return [x, y];
});
const last = clean[clean.length - 1];
const good = dir === '>=' ? last >= (target ?? last) : last <= (target ?? last);
const strokeColor = good ? 'var(--good)' : 'var(--bad)';
const fillColor = good ? 'rgba(30,158,106,0.10)' : 'rgba(201,52,44,0.10)';
const d = pts.map((p, i) => (i === 0 ? 'M' : 'L') + p[0].toFixed(1) + ',' + p[1].toFixed(1)).join(' ');
const area = d + ` L${pts[pts.length-1][0]},${height} L${pts[0][0]},${height} Z`;
let targetY = null;
if (target != null) {
targetY = height - pad - ((target - min) / range) * (height - pad * 2);
}
return (
);
}
// ─── Avatar ──────────────────────────────────────────────────
function Avatar({ person, size = 28, bordered = false }) {
if (!person) return null;
return (
{person.initials}
);
}
// ─── Norwill mark — client logo ──────────────────────────────
function NorwillMark({ size = 28 }) {
return (
);
}
// ─── Icons ───────────────────────────────────────────────────
const Icon = {
home: () => ,
pulse: () => ,
grid: () => ,
alert: () => ,
rock: () => ,
map: () => ,
bell: () => ,
chat: () => ,
sparkle: () => ,
check: () => ,
arrow: () => ,
up: () => ,
down: () => ,
close: () => ,
send: () => ,
mic: () => ,
target: () => ,
sun: () => ,
calendar: () => ,
link: () => ,
users: () => ,
key: () => ,
trash: () => ,
plus: () => ,
book: () => ,
};
// ─── Pill helpers ────────────────────────────────────────────
function StatusDot({ status, size = 8 }) {
const colors = { good: 'var(--good)', bad: 'var(--bad)', warn: 'var(--warn)', unknown: 'var(--ink-300)' };
return ;
}
function Pct({ value, dim }) {
return {value}%;
}
// ─── Delta arrow ─────────────────────────────────────────────
function Delta({ value, good }) {
if (value === 0 || value == null) return —;
const up = value > 0;
const isGood = good === 'up' ? up : !up;
return (
{up ? : }
{Math.abs(value).toFixed(0)}%
);
}
Object.assign(window, {
metricStatus,
fmtNum,
Spark,
Avatar,
NorwillMark,
Icon,
StatusDot,
Pct,
Delta,
useMedia,
metricCadence,
entryTarget,
scorecardTarget,
metricAgg,
});