/* ClinicFlow AI — shared components. Exports to window. */
const { useState, useEffect, useMemo, useRef } = React;
// ---------- ICONS (inline lucide-style strokes) ----------
const Icon = ({ d, size = 16, className = '', stroke = 'currentColor', fill = 'none', sw = 2, children, ...rest }) => (
);
const I = {
// nav
layout: (p) => ,
users: (p) => ,
user: (p) => ,
calendar: (p) => ,
zap: (p) => ,
chart: (p) => ,
message: (p) => ,
settings: (p) => ,
bell: (p) => ,
search: (p) => ,
plus: (p) => ,
arrowUp: (p) => ,
arrowDown: (p) => ,
arrowRight:(p) => ,
trendUp: (p) => ,
trendDown: (p) => ,
check: (p) => ,
x: (p) => ,
send: (p) => ,
edit: (p) => ,
more: (p) => ,
refresh: (p) => ,
retry: (p) => ,
chevL: (p) => ,
chevR: (p) => ,
chevDown: (p) => ,
phone: (p) => ,
mail: (p) => ,
cake: (p) => ,
wa: (p) => ,
list: (p) => ,
filter: (p) => ,
pill: (p) => ,
beaker: (p) => ,
heart: (p) => ,
sparkles: (p) => ,
building: (p) => ,
};
// ---------- AVATAR ----------
function PatientAvatar({ name, size }) {
const meta = window.avatarFor(name);
const cls = `avatar ${size || ''}`.trim();
return (
{meta.initials}
);
}
// ---------- STATUS BADGE ----------
const STATUS_MAP = {
confirmed: { cls: 'badge-success', label: 'Confirmed' },
pending: { cls: 'badge-warning', label: 'Pending' },
missed: { cls: 'badge-danger', label: 'Missed' },
failed: { cls: 'badge-danger', label: 'Failed' },
sent: { cls: 'badge-success', label: 'Sent' },
Active: { cls: 'badge-success', label: 'Active' },
'At Risk': { cls: 'badge-warning', label: 'At Risk' },
New: { cls: 'badge-purple', label: 'New' },
Inactive: { cls: 'badge-neutral', label: 'Inactive' },
Low: { cls: 'badge-success', label: 'Low' },
Medium: { cls: 'badge-warning', label: 'Medium' },
High: { cls: 'badge-danger', label: 'High' },
Medication:{ cls: 'badge-lavender', label: 'Medication' },
Revisit: { cls: 'badge-blue', label: 'Revisit' },
Test: { cls: 'badge-teal', label: 'Test' },
};
function StatusBadge({ value, dot }) {
const m = STATUS_MAP[value] || { cls: 'badge-neutral', label: value };
return {dot && }{m.label};
}
// ---------- AI BADGE ----------
function AIBadge() {
return AI;
}
// ---------- WA TICK ----------
function WaTicks({ state }) {
// single gray = sent, double gray = delivered, double blue = read
const color = state === 'read' ? '#34B7F1' : '#9CA3AF';
if (state === 'sent') {
return (
);
}
return (
);
}
// ---------- KPI CARD ----------
function KPICard({ label, value, trend, trendDir = 'up', children, icon, foot }) {
return (
{icon}
{label}
{value}
{trend && (
{trendDir === 'up' ? : trendDir === 'down' ? : null}
{trend}
)}
{children}
{foot &&
{foot}
}
);
}
// ---------- SPARKLINE ----------
function Sparkline({ data, color = '#7C3AED', height = 32 }) {
const w = 140;
const max = Math.max(...data), min = Math.min(...data);
const range = max - min || 1;
const step = w / (data.length - 1);
const points = data.map((v, i) => `${i * step},${height - 4 - ((v - min) / range) * (height - 8)}`).join(' ');
const area = `M0,${height} L${points.split(' ').join(' L')} L${w},${height} Z`;
return (
);
}
// ---------- PROGRESS RING ----------
function ProgressRing({ pct, size = 56, color = '#7C3AED' }) {
const r = (size - 8) / 2;
const C = 2 * Math.PI * r;
return (
{pct}%
);
}
// ---------- AREA CHART ----------
function AreaChart({ data, color = '#7C3AED', gradTo = '#A78BFA', height = 220 }) {
const padX = 40, padY = 24;
const w = 600;
const max = Math.max(...data.map(d => d.y)) * 1.15;
const min = 0;
const step = (w - padX * 2) / (data.length - 1);
const pts = data.map((d, i) => [padX + i * step, height - padY - ((d.y - min) / (max - min)) * (height - padY * 2)]);
const path = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
const area = `${path} L${pts[pts.length-1][0]},${height - padY} L${pts[0][0]},${height - padY} Z`;
const gid = `ar-${color.slice(1)}`;
// y-axis ticks
const yticks = [0, 0.25, 0.5, 0.75, 1].map(t => ({ y: padY + t * (height - padY * 2), v: Math.round(max - t * max) }));
return (
);
}
// ---------- LINE CHART ----------
function LineChart({ data, color = '#7C3AED', height = 200 }) {
const padX = 40, padY = 24;
const w = 800;
const max = Math.max(...data.map(d => d.y)) * 1.1;
const min = Math.min(...data.map(d => d.y)) * 0.8;
const step = (w - padX * 2) / (data.length - 1);
const pts = data.map((d, i) => [padX + i * step, height - padY - ((d.y - min) / (max - min)) * (height - padY * 2)]);
const path = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
const yticks = [0, 0.5, 1].map(t => ({ y: padY + t * (height - padY * 2), v: Math.round(max - t * (max - min)) }));
return (
);
}
// ---------- DONUT ----------
function Donut({ segments, size = 180 }) {
const r = size / 2 - 14;
const C = 2 * Math.PI * r;
const total = segments.reduce((s, x) => s + x.value, 0);
let acc = 0;
return (
);
}
// ---------- ORBIS LOGO ----------
function OrbisMark({ size = 28 }) {
return (
);
}
Object.assign(window, {
I, Icon, PatientAvatar, StatusBadge, AIBadge, WaTicks, KPICard,
Sparkline, ProgressRing, AreaChart, LineChart, Donut, OrbisMark,
});