// app-ui.jsx — shared UI atoms for the PulseChart Claims working app. // Independent of the design-canvas components.jsx (different concerns). const PCAT = window.PCT; const PCAD = window.PCA; // ── Icons ───────────────────────────────────────────────── function AppIcon({ name, size = 16, color = 'currentColor', stroke = 1.7 }) { const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round', }; switch (name) { case 'home': return ; case 'inbox': return ; case 'list': return ; case 'claims': return ; case 'docs': return ; case 'denial': return ; case 'money': return ; case 'ar': return ; case 'chart': return ; case 'gear': return ; case 'search': return ; case 'plus': return ; case 'down': return ; case 'up': return ; case 'right': return ; case 'left': return ; case 'check': return ; case 'x': return ; case 'clock': return ; case 'alert': return ; case 'info': return ; case 'send': return ; case 'upload': return ; case 'download': return ; case 'paperclip': return ; case 'flag': return ; case 'user': return ; case 'users': return ; case 'sparkle': return ; case 'shield': return ; case 'bed': return ; case 'phone': return ; case 'filter': return ; case 'columns': return ; case 'kbd': return ; case 'bell': return ; case 'pill': return ; case 'scalpel': return ; case 'lab': return ; case 'box': return ; case 'bar': return ; case 'id': return ; case 'card': return ; case 'whatsapp': return ; case 'menu': return ; case 'refresh': return ; default: return null; } } // ── Money ───────────────────────────────────────────────── function AppMoney({ value, muted, strong, size = 13, neg }) { if (value == null) return —; return ( {neg ? '−' : ''}{PCAD.inr(Math.abs(value))} ); } // ── StatusPill ─────────────────────────────────────────── function AppStatusPill({ status }) { const meta = PCAD.statusMeta[status] || { label: status, tone:'neutral' }; const tones = { success: { bg: PCAT.c.successTint, fg: '#15803D', dot: PCAT.c.success }, warning: { bg: PCAT.c.warningTint, fg: '#92400E', dot: PCAT.c.warning }, error: { bg: PCAT.c.errorTint, fg: '#991B1B', dot: PCAT.c.error }, info: { bg: PCAT.c.accentTint, fg: '#075985', dot: PCAT.c.accent }, neutral: { bg: PCAT.c.surface2, fg: '#44403C', dot: PCAT.c.textDim }, }; const t = tones[meta.tone]; return ( {meta.label} ); } // ── SLA Timer (live) ───────────────────────────────────── function AppSLATimer({ deadline, compact }) { const [, force] = React.useReducer(x => x + 1, 0); React.useEffect(() => { if (!deadline) return; const t = setInterval(force, 1000); return () => clearInterval(t); }, [deadline]); if (!deadline) return null; const ms = deadline - Date.now(); const breach = ms < 0; const abs = Math.abs(ms); const mins = Math.floor(abs / 60000); const secs = Math.floor((abs % 60000) / 1000); const text = mins >= 60 ? `${Math.floor(mins/60)}h ${mins%60}m` : `${mins}:${String(secs).padStart(2,'0')}`; const tone = breach ? PCAT.c.error : ms < 15 * 60 * 1000 ? PCAT.c.warning : PCAT.c.success; if (compact) { return ( {breach ? '−' : ''}{text} ); } return (
{breach ? 'BREACH · ' : ''}{text}
); } // ── PayerChip ──────────────────────────────────────────── function AppPayerChip({ insurerId, size = 28 }) { const insurer = PCAD.findInsurer(insurerId); if (!insurer) return null; return (
{insurer.logo}
{insurer.name}
{insurer.type}
); } // ── Button ─────────────────────────────────────────────── function AppBtn({ children, kind = 'ghost', size = 'md', onClick, icon, iconRight, full, disabled, type = 'button' }) { const sizes = { sm: { h:28, px:10, fs:12 }, md: { h:34, px:14, fs:13 }, lg: { h:40, px:18, fs:14 }, }[size]; const kinds = { primary: { bg: PCAT.c.accent, fg:'#fff', bd: PCAT.c.accent }, dark: { bg: PCAT.c.text, fg:'#fff', bd: PCAT.c.text }, ghost: { bg: PCAT.c.surface, fg: PCAT.c.text, bd: PCAT.c.border }, soft: { bg: PCAT.c.surface2, fg: PCAT.c.text, bd: 'transparent' }, danger: { bg: PCAT.c.error, fg:'#fff', bd: PCAT.c.error }, success: { bg: PCAT.c.success, fg:'#fff', bd: PCAT.c.success }, brand: { bg: PCAT.c.brand, fg:'#fff', bd: PCAT.c.brand }, }[kind]; return ( ); } // ── Card / Section Label / KBD ──────────────────────────── function AppCard({ children, pad = 20, style = {}, onClick }) { return (
{children}
); } function AppSectionLabel({ children, right }) { return (
{children}
{right}
); } function AppKBD({ children }) { return {children}; } function AppAvatar({ name, size = 28, bg }) { const initials = name.split(' ').map(s => s[0]).slice(0,2).join('').toUpperCase(); return (
{initials}
); } function AppFlagChip({ kind }) { const map = { 'sla-breach': { label:'SLA BREACH', bg: PCAT.c.errorTint, fg: PCAT.c.error }, 'escalate': { label:'Escalate', bg: PCAT.c.errorTint, fg: PCAT.c.error }, 'urgent': { label:'Urgent', bg: PCAT.c.warningTint, fg: PCAT.c.warning }, 'gap': { label:'Patient gap', bg: PCAT.c.warningTint, fg: PCAT.c.warning }, 'implant-pending':{ label:'Implant gate', bg: PCAT.c.warningTint, fg: PCAT.c.warning }, 'query': { label:'Query', bg: PCAT.c.warningTint, fg: PCAT.c.warning }, 'docs': { label:'Docs pending', bg: PCAT.c.surface2, fg: PCAT.c.textMuted }, 'denied': { label:'Denied', bg: PCAT.c.errorTint, fg: PCAT.c.error }, 'self-pay-conv': { label:'→ Self-pay', bg: PCAT.c.surface2, fg: PCAT.c.textMuted }, }[kind]; if (!map) return null; return ( {map.label} ); } // ── Form atoms ──────────────────────────────────────────── function AppField({ label, hint, children, required }) { return (
{children} {hint &&
{hint}
}
); } function AppInput({ value, onChange, placeholder, mono, type = 'text' }) { return ( onChange && onChange(e.target.value)} placeholder={placeholder} style={{ height: 36, padding: '0 12px', background: PCAT.c.surface, border: `1px solid ${PCAT.c.border}`, borderRadius: 7, fontFamily: mono ? PCAT.f.mono : PCAT.f.sans, fontSize: 13.5, color: PCAT.c.text, outline: 'none', }} onFocus={e => e.target.style.borderColor = PCAT.c.accent} onBlur={e => e.target.style.borderColor = PCAT.c.border} /> ); } function AppTextarea({ value, onChange, placeholder, rows = 3 }) { return (