/* global React, I, PROVIDERS, STATUS_COLORS, APPT_TYPES, TODAY_PATIENTS, useState, useRef, useEffect, useMemo, Modal, Fragment */ // ============================================================================ // SCHEDULE // ============================================================================ const HOURS = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17]; const ROW_H = 60; // px per hour const COL_W = 168; function timeToY(hhmm) { const [h, m] = hhmm.split(":").map(Number); return (h - HOURS[0]) * ROW_H + (m / 60) * ROW_H; } function fmtTime(hhmm) { const [h, m] = hhmm.split(":").map(Number); const ap = h >= 12 ? "p" : "a"; const h12 = ((h + 11) % 12) + 1; return `${h12}:${String(m).padStart(2, "0")}${ap}`; } function ApptCard({ p, onClick, onHover, onHoverEnd, selected }) { const yTop = timeToY(p.time); const yEnd = timeToY(p.end); const h = yEnd - yTop; const prov = PROVIDERS.find(x => x.id === p.provider); const status = STATUS_COLORS[p.status]; const type = APPT_TYPES[p.type]; return (
{/* Top stripe = arrival status */}
{/* Body */}
{fmtTime(p.time)} · {prov.initials}
{p.tags.slice(0, 2).map((t, i) => {t})}
{p.name}
{h > 50 && (
{p.typeLabel}
)} {h > 80 && p.alerts.length > 0 && (
{p.alerts.slice(0, 2).map((a, i) => ( {a} ))}
)}
{/* Bottom stripe = provider */}
); } function HoverSnap({ patient, x, y }) { if (!patient) return null; const prov = PROVIDERS.find(p => p.id === patient.provider); const status = STATUS_COLORS[patient.status]; return (
{patient.first[0]}{patient.last[0]}
{patient.name}
{patient.age} y/o · {patient.phone}
{status.label}
Time {fmtTime(patient.time)} – {fmtTime(patient.end)} · Apr 30 Provider {prov.name} Operatory {patient.op} Procedures {patient.typeLabel} Forms {patient.formsRed > 0 && {patient.formsRed} outstanding} {patient.formsRed > 0 && patient.formsGreen > 0 && " "} {patient.formsGreen > 0 && {patient.formsGreen} complete} {patient.alerts.length > 0 && ( <> Alerts {patient.alerts.map((a, i) => {a})} )}
); } function Schedule({ selectedPatientId, onSelectPatient, view, setView }) { const [hover, setHover] = useState(null); const [draggingDate, setDraggingDate] = useState(false); const ops = ["Op 1", "Op 2", "Op 3", "Op 4", "Op 5", "Op 6"]; const provByOp = (op) => PROVIDERS.find(p => p.op === op); // arrival summary const arrivals = useMemo(() => { const counts = { confirmed: 0, arrived: 0, seated: 0, inroom: 0, ready: 0, complete: 0, scheduled: 0 }; TODAY_PATIENTS.forEach(p => { counts[p.status] = (counts[p.status] || 0) + 1; }); return counts; }, []); return (
{/* Schedule body */}
{/* Day controls */}
Thursday, April 30, 2026
28 appointments · $22,189 booked · 4 operatories open
{/* Grid */}
{/* Time column */}
{HOURS.map(h => (
{h === 12 ? "12p" : h > 12 ? `${h - 12}p` : `${h}a`}
))}
{/* Operatory columns */} {ops.map(op => { const prov = provByOp(op); const ptsHere = TODAY_PATIENTS.filter(p => p.op === op); return (
{/* Header */}
{op}
{prov.initials} · {prov.name.replace(/^(Dr\.|Hyg\.) /, "")}
{/* Hour cells */}
{HOURS.map((h, i) => (
{/* 30min line */}
))} {/* Now line */}
{/* Appts */} {ptsHere.map(p => ( onSelectPatient(p.id)} onHover={(e) => { const r = e.currentTarget.getBoundingClientRect(); setHover({ id: p.id, x: r.right + 8, y: r.top }); }} onHoverEnd={() => setHover(null)} /> ))}
); })}
{/* Hover snap */} {hover && p.id === hover.id)} x={hover.x} y={hover.y} />}
); } function ArrivalLegend({ counts }) { const items = [ ["Confirmed", "confirmed"], ["Arrived", "arrived"], ["Seated", "seated"], ["In room", "inroom"], ["Ready", "ready"], ["Complete", "complete"], ]; return (
{items.map(([label, key]) => (
{label} {counts[key] || 0}
))}
); } function SegToggle({ value, onChange, options }) { return (
{options.map(o => { const IconC = o.icon; const active = value === o.v; return ( ); })}
); } // ============================================================================ // PATIENT SIDE PANEL // ============================================================================ function PatientSidePanel({ patient, onClose, onOpenInsurance, onOpenChart, onOpenForm, onStartVisit }) { const [tab, setTab] = useState("overview"); if (!patient) return null; const prov = PROVIDERS.find(p => p.id === patient.provider); return ( ); } function Section({ title, right, children }) { return (
{title}
{right}
{children}
); } function KV({ label, children }) { return (
{label} {children}
); } function StatTile({ label, value, accent }) { const accentColor = accent === "rose" ? "var(--rose-700)" : accent === "amber" ? "var(--amber-700)" : "var(--sage-700)"; const bg = accent === "rose" ? "var(--rose-50)" : accent === "amber" ? "var(--amber-50)" : "var(--sage-50)"; return (
{label}
{value}
); } function QuickAction({ icon: IconC, label }) { return ( ); } function MiniMetric({ label, used, total }) { const pct = parseFloat(used.replace("$", "").replace(",", "")) / parseFloat(total.replace("$", "").replace(",", "")) * 100; return (
{label}
{used} / {total}
75 ? "var(--amber-500)" : "var(--sage-500)" }} />
); } function FamilyDot({ label, name, avatar }) { return (
{name[0]}
{name}
{label}
); } function Timeline({ items }) { return (
{items.map((it, i) => { const IconC = it.icon; return (
{it.label}
{it.time}
); })}
); } function FormRow({ f, onAction }) { return (
{f.status === "complete" ? : } {f.status === "complete" ? "Complete" : "Pending"}
{f.name}
{f.note}
); } function TxRow({ code, desc, estimate }) { return (
{code} {desc} {estimate}
); } function fmtDate(iso) { const d = new Date(iso); return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }); } // ============================================================================ // INSURANCE POPOUT // ============================================================================ function InsurancePopout({ open, onClose, patient }) { if (!open || !patient) return null; return (
{patient.insurance}
Group #02184 · Policy #DD-{patient.id.toUpperCase()}448
Verified Apr 27 Auto re-check enabled
Coverage
Limitations
Procedure history 126
Notes
Auto-populated via Vyne integration — last refresh 3h ago. Fields marked {" "}{" "} are pulled from the carrier portal automatically.
); } function MetricBig({ label, v, sub, pct, done }) { return (
{label}
{v}
{sub}
); } function CoverageCol({ title, pct, rows }) { return (
{title}
{pct}% covered
{rows.map((r, i) => ( ))}
{r[0]} {r[1]} {r[2]}
); } Object.assign(window, { Schedule, PatientSidePanel, InsurancePopout, fmtTime, fmtDate, });