// Shared UI primitives: icons, pills, etc.
const { useState, useEffect, useRef, useMemo, useCallback } = React;
const Icon = ({ name, size = 16 }) => {
const paths = {
dashboard: <>,
calendar: <>,
users: <>,
clipboard: <>,
workflow: <>,
clock: <>,
box: <>,
bell: <>,
chart: <>,
settings: <>,
search: <>,
plus: <>,
x: <>,
check: <>,
chevronRight: <>,
chevronLeft: <>,
chevronDown: <>,
alert: <>,
warn: <>,
drag: <>,
filter: <>,
wand: <>,
stethoscope: <>,
pill: <>,
history: <>,
phone: <>,
edit: <>,
trash: <>,
arrow: <>,
zap: <>,
menu: <>,
moon: <>,
};
return (
);
};
const Pill = ({ tone = 'default', children }) => (
{children}
);
const StatusPill = ({ status }) => {
const map = {
scheduled: ['accent', 'Scheduled'],
'in-progress': ['warn', 'In room'],
completed: ['ok', 'Completed'],
cancelled: ['', 'Cancelled'],
};
const [tone, label] = map[status] || ['', status];
return {label};
};
const PriorityPill = ({ priority }) => {
const map = {
urgent: 'err',
elevated: 'warn',
standard: 'accent',
routine: 'default',
};
return {priority};
};
const Avatar = ({ name, size = 30 }) => {
const initials = name.split(' ').map(n => n[0]).slice(0, 2).join('');
const hash = name.split('').reduce((a, c) => a + c.charCodeAt(0), 0);
const hue = (hash * 17) % 360;
return (
{initials}
);
};
// Simple SVG sparkline
const Spark = ({ data, color = 'var(--accent)', height = 40 }) => {
const W = 200, H = height;
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const step = W / (data.length - 1);
const path = data.map((v, i) => {
const x = i * step;
const y = H - ((v - min) / range) * (H - 6) - 3;
return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
}).join(' ');
const area = path + ` L${W},${H} L0,${H} Z`;
return (
);
};
Object.assign(window, { Icon, Pill, StatusPill, PriorityPill, Avatar, Spark });