// ───────────────────────────────────────────────────────────── // Corda Calendar · Providers section // Multi-patient (Nana + Papa), PCP highlight, search, add/edit form, // detail, archive, restore, delete // ───────────────────────────────────────────────────────────── // ── Extended provider data — includes contact + patient assignment ── const CAL_PROV_DATA = [ { id: 'cp_williams', name: 'Dr. Sara Williams', spec: 'Primary Care', org: 'Sutter · Castro', nbhd: 'Castro', tone: 'sage', patient: 'both', isPCP: true, phone: '(415) 206-4200', address: '45 Castro St, San Francisco', hours: 'Mon–Fri · 8:00 AM – 5:00 PM', notes: 'Manages both Nana and Papa. Call the nurse line first for non-urgent questions. She prefers portal messages over phone.', }, { id: 'cp_patel', name: 'Dr. Anika Patel', spec: 'Neurology', org: 'UCSF · Mission Bay', nbhd: 'Mission Bay', tone: 'plum', patient: 'nana', isPCP: false, phone: '(415) 353-2273', address: '1825 4th St, Suite 240, San Francisco', hours: 'Mon–Thu · 9:00 AM – 4:00 PM', notes: 'Prefers email follow-ups via patient portal. Will call back same-day if marked urgent. Nana likes morning slots — she\'s sharper before noon.', }, { id: 'cp_tomas', name: 'Tomás Reyes, PT', spec: 'Physical Therapy', org: 'Bay Home Health', nbhd: 'Home visits', tone: 'amber', patient: 'nana', isPCP: false, phone: '(415) 555-0192', address: 'Home visits — Nana\'s home', hours: 'Tue, Thu, Fri · 10:00 AM – 12:00 PM', notes: '', }, { id: 'cp_mreyes', name: 'Dr. Marco Reyes', spec: 'Cardiology', org: 'St. Mary\'s Heart Center', nbhd: 'Western Addition', tone: 'plum', patient: 'papa', isPCP: false, phone: '(415) 750-5800', address: '45 Stanyan St, San Francisco', hours: 'Mon–Fri · 9:00 AM – 5:00 PM', notes: 'Referred us to this practice from UCSF. Good communicator — always sends a visit summary.', }, { id: 'cp_yang', name: 'Dr. Lily Yang', spec: 'Ophthalmology', org: 'Pacific Vision', nbhd: 'Sunset', tone: 'plum', patient: 'papa', isPCP: false, phone: '(415) 664-8901', address: '2340 Irving St, San Francisco', hours: 'Wed–Sat · 9:00 AM – 3:00 PM', notes: '', }, ]; const CAL_PROV_ARCHIVED = [ { id: 'cp_chang', name: 'Dr. Amy Chang', spec: 'Dermatology', org: 'SF Derm Associates', tone: 'plum', patient: 'nana', archivedDate: 'Jan 12', }, ]; const CAL_PCP = CAL_PROV_DATA.find(p => p.isPCP); // ── Shared provider atoms ───────────────────────────────────── // Pill chrome button — same as visit view const CalProvChrome = ({ children, calProvStyle }) => (
{children}
); // Patient pip row — used in list when "Both" is active const CalProvPatientPips = ({ patient }) => { if (patient === 'both') return (
); const p = CAL_PATIENTS[patient]; if (!p) return null; return (
{p.name}
); }; // Provider list row — compact, with optional patient pip const CalProvRow = ({ prov, showPatient = true, isLast }) => { const initials = prov.name.replace('Dr. ', '').replace(/, (PT|RN|OT|PA)$/, ''); return (
{prov.name}
{[prov.spec, prov.org].filter(Boolean).join(' · ')}
{showPatient && ( )}
); }; // PCP highlight card at top of list const CalPCPCard = ({ showPatient = true }) => { const p = CAL_PCP; return (
Primary care
{p.name}
{p.org}
{showPatient && (
)}
); }; // Form field components (inline, no colliding style vars) const CalProvFieldLabel = ({ children, required }) => (
{children} {required && required}
); const CalProvInput = ({ label, value, placeholder, required, trailing, leading, multiline, focus }) => (
{label}
{leading} {value || placeholder} {trailing}
); // Detail info row const CalProvDetailRow = ({ icon, label, value, sub, last }) => (
{label}
{value}
{sub &&
{sub}
}
); // ───────────────────────────────────────────────────────────── // 1 · Providers list // ───────────────────────────────────────────────────────────── const ScreenCalProviders = ({ activePatient = 'all' }) => { const filtered = activePatient === 'all' ? CAL_PROV_DATA.filter(p => !p.isPCP) : CAL_PROV_DATA.filter(p => !p.isPCP && (p.patient === activePatient || p.patient === 'both')); const total = activePatient === 'all' ? CAL_PROV_DATA.length : CAL_PROV_DATA.filter(p => p.patient === activePatient || p.patient === 'both').length; const showPatientPip = activePatient === 'all'; return (
{/* Header — switcher row, then eyebrow + title (mirrors app ProvidersHeader) */}
{total} providers
Care team
{/* PCP highlight */} {/* Care team — rest of providers, sorted A–Z under the PCP */}
{filtered.map((p, i) => ( ))}
{/* Archived link — ghost button */}
); }; // Variant — filtered to Nana only const ScreenCalProvidersNana = () => ; // ───────────────────────────────────────────────────────────── // 2 · Provider search // ───────────────────────────────────────────────────────────── const ScreenCalProvidersSearch = () => { const query = 'patel'; const results = CAL_PROV_DATA.filter(p => p.name.toLowerCase().includes(query) || p.spec.toLowerCase().includes(query) || p.org.toLowerCase().includes(query) ); return (
{query}
Cancel
{results.length} match{results.length !== 1 ? 'es' : ''}
{results.map((p, i) => ( ))} {results.length === 0 && (
No providers match "{query}"
)}
{/* Other providers dimmed */} {results.length > 0 && ( <>
All providers
{CAL_PROV_DATA.filter(p => !results.find(r => r.id === p.id)).map((p, i, arr) => ( ))}
)}
); }; // ───────────────────────────────────────────────────────────── // 3 · Provider detail — read-only with chrome pills // ───────────────────────────────────────────────────────────── const ScreenCalProviderDetail = () => { const prov = CAL_PROV_DATA.find(p => p.id === 'cp_patel'); const pat = CAL_PATIENTS[prov.patient]; return ( {/* Top chrome — back pill + Edit pill */}
Edit
{/* Hero */}
{prov.name}
{prov.spec} · {prov.org}
{pat.full}
{/* Quick actions */}
{[ { icon: 'phone', label: 'Call', bg: 'var(--sage-tint)', fg: 'var(--sage-deep)' }, { icon: 'pin', label: 'Directions', bg: 'var(--surface-2)', fg: 'var(--ink-2)' }, { icon: 'note', label: 'Notes', bg: 'var(--surface-2)', fg: 'var(--ink-2)' }, ].map(a => ( ))}
{/* Contact */}
Contact
{/* Notes */} {prov.notes ? (
Notes
{prov.notes}
) : null} {/* Visit count */}
Added by you · May 2
); }; // ───────────────────────────────────────────────────────────── // 4a · Add provider — type chooser (bottom sheet shown before the form) // ───────────────────────────────────────────────────────────── const CAL_PROV_TYPES = [ { id: 'medical', label: 'Medical', desc: 'PCP, specialists, neurology, cardiology…', icon: 'stethoscope', bg: 'var(--sage-tint)', fg: 'var(--sage-deep)' }, { id: 'therapy', label: 'Therapy', desc: 'Physical, occupational, and speech therapy', icon: 'activity', bg: 'var(--plum-soft)', fg: 'var(--plum)' }, { id: 'home', label: 'Home & Nursing', desc: 'Home health nursing, aide, hospice', icon: 'home', bg: 'var(--amber-soft)', fg: 'oklch(0.45 0.08 70)' }, { id: 'pharmacy', label: 'Pharmacy', desc: 'Retail or mail-order pharmacy', icon: 'pill', bg: 'var(--clay-soft)', fg: 'oklch(0.48 0.16 20)' }, ]; const ScreenCalProviderAddType = () => ( {/* dimmed care team behind */}
5 providers
Care team
{/* sheet */}
Add provider
What type of provider?
{CAL_PROV_TYPES.map(o => (
{o.label}
{o.desc}
))}
); // ───────────────────────────────────────────────────────────── // 4 · Provider add form // ───────────────────────────────────────────────────────────── const ScreenCalProviderAdd = () => (
Cancel
Add provider
Save
{/* Hero prompt */}
Medical provider
Who's joining the care team?
Required fields are marked. Everything else can come later.
{/* Patient assignment — first decision */}
Which patient is this for?
{[CAL_PATIENTS.nana, CAL_PATIENTS.papa].map(p => (
{p.full}
{p.age} yrs
))}
Shared — for both Nana & Papa
{/* Basics */}
Basics
{/* Find a practice — autofills address, phone, organization */}
} />
Autofills address, phone, and organization.
{/* Specialty / type — picker */}
} />
{/* Title */}
Title / prefix
{['MD', 'DO', 'NP', 'PA-C', 'No title', 'Other'].map((t) => { const sel = t === 'No title'; return (
{sel && } {t}
); })}
{/* First + Last name */}
{/* Organization */}
{/* Phone */}
} />
{/* Address */}
} trailing={} />
{/* Hours */}
} />
{/* PCP toggle */}
Set as Primary Care Provider
Pins them to the top of the care team
{/* Notes */}
Fill required fields to save
); // ───────────────────────────────────────────────────────────── // 5 · Provider edit — same form, pre-filled, + archive in footer // ───────────────────────────────────────────────────────────── const ScreenCalProviderEdit = () => { const prov = CAL_PROV_DATA.find(p => p.id === 'cp_patel'); const pat = CAL_PATIENTS[prov.patient]; return (
Cancel
Edit provider
Save
{/* Patient assignment — shows current, tap to change */}
Patient
{pat.full}
{/* Title chips — medical set, MD selected */}
Title / prefix
{['MD', 'DO', 'NP', 'PA-C', 'No title', 'Other'].map((t) => { const sel = t === 'MD'; return (
{sel && } {t}
); })}
{/* Provider type — Medical selected */}
Provider type
{['Medical', 'Therapy', 'Home & Nursing', 'Pharmacy'].map((t) => { const sel = t === 'Medical'; return (
{t}
); })}
} />
} />
} />
} />
{/* Archive + Delete in form footer */}
Danger zone
); }; // ───────────────────────────────────────────────────────────── // 6 · Archived list // ───────────────────────────────────────────────────────────── const ScreenCalProviderArchived = () => (
Archived providers
These providers are hidden from your care team. Restore to bring them back.
{CAL_PROV_ARCHIVED.map((prov, i) => { const pat = CAL_PATIENTS[prov.patient]; return (
{prov.name}
{prov.spec} · archived {prov.archivedDate}
{pat && (
)}
); })}
{CAL_PROV_ARCHIVED.length === 0 && (
No archived providers.
)}
); // ───────────────────────────────────────────────────────────── // 7 · Archived provider detail — Restore + Delete // ───────────────────────────────────────────────────────────── const ScreenCalProviderDetailArchived = () => { const prov = CAL_PROV_ARCHIVED[0]; const pat = CAL_PATIENTS[prov.patient]; return (
Archived
{prov.name}
{prov.spec} · {prov.org}
Archived {prov.archivedDate}
{/* Restore + Delete */}
Restoring adds them back to the active care team. Their contact info and notes are preserved.
); }; Object.assign(window, { ScreenCalProviders, ScreenCalProvidersNana, ScreenCalProvidersSearch, ScreenCalProviderDetail, ScreenCalProviderAddType, ScreenCalProviderAdd, ScreenCalProviderEdit, ScreenCalProviderArchived, ScreenCalProviderDetailArchived, });