Mediusa/mediusa-clinic-os
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(layout): streamline header layout and sub-tab navigation to eliminate horizontal overflow

Browse Source
This commit is contained in:
Mediusa
2026-09-07 16:55:57 -07:00
parent 18ceab33f8
commit 3fa9f7e21b
2 changed files with 409 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.tsx
+2 -2
View File
@@ -13,8 +13,8 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en" className="h-full antialiased"> <html lang="en" className="h-full antialiased overflow-x-hidden">
<body className="min-h-full flex flex-col bg-slate-50 text-slate-900 font-sans selection:bg-sky-500 selection:text-white transition-colors duration-200"> <body className="min-h-full flex flex-col bg-slate-50 text-slate-900 font-sans selection:bg-sky-500 selection:text-white transition-colors duration-200 overflow-x-hidden">
{children} {children}
</body> </body>
</html> </html>
src/app/page.tsx
+215 -133
View File
@@ -116,6 +116,7 @@ export default function Home() {
const [isTerminalLocked, setIsTerminalLocked] = useState(false); const [isTerminalLocked, setIsTerminalLocked] = useState(false);
const [toasts, setToasts] = useState<ToastMessage[]>([]); const [toasts, setToasts] = useState<ToastMessage[]>([]);
const [audioEnabled, setAudioEnabled] = useState(true); const [audioEnabled, setAudioEnabled] = useState(true);
const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
const [activePatient, setActivePatient] = useState<Patient>(INITIAL_PATIENTS[0]); const [activePatient, setActivePatient] = useState<Patient>(INITIAL_PATIENTS[0]);
const [activeSoapNote, setActiveSoapNote] = useState<SoapNote | undefined>(INITIAL_SOAP_NOTES[0]); const [activeSoapNote, setActiveSoapNote] = useState<SoapNote | undefined>(INITIAL_SOAP_NOTES[0]);
@@ -607,95 +608,41 @@ export default function Home() {
}; };
return ( return (
<div className="min-h-screen bg-slate-50 text-slate-900 flex flex-col"> <div className="min-h-screen bg-slate-50 text-slate-900 flex flex-col w-full max-w-full overflow-x-hidden">
{/* Top Hospital Command Header */} {/* Top Hospital Command Header */}
<header className="sticky top-0 z-40 bg-white border-b border-slate-200/90 px-4 lg:px-8 py-3 shadow-2xs"> <header className="sticky top-0 z-40 bg-white border-b border-slate-200/90 shadow-2xs">
<div className="max-w-7xl mx-auto flex flex-col md:flex-row md:items-center justify-between gap-4"> {/* Tier 1: System Command & Tenant Navigation */}
{/* Hospital Brand & Domain */} <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
<div className="flex items-center gap-4"> <div className="flex items-center justify-between gap-3 flex-wrap lg:flex-nowrap">
{/* Left Cluster: Hospital Brand & Clinic Identity */}
<div className="flex items-center gap-3 shrink-0">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<span className="w-9 h-9 rounded-lg bg-sky-700 flex items-center justify-center font-black text-sm text-white shadow-xs"> <span className="w-8 h-8 rounded-lg bg-sky-700 flex items-center justify-center font-black text-xs text-white shadow-xs">
+M +M
</span> </span>
<div> <div>
<div className="text-xs font-black tracking-tight text-slate-900 flex items-center gap-1.5"> <div className="text-xs font-black tracking-tight text-slate-900 flex items-center gap-1.5">
<span>MEDIUSA CLINIC OS</span> <span>MEDIUSA CLINIC OS</span>
<span className="text-[10px] px-2 py-0.5 rounded-full bg-sky-100 text-sky-800 font-bold border border-sky-200"> <span className="text-[10px] px-1.5 py-0.2 rounded-full bg-sky-100 text-sky-800 font-bold border border-sky-200">
CLINICAL v2.5 v2.5
</span> </span>
</div> </div>
<div className="text-xs text-slate-500 font-mono flex items-center gap-1 mt-0.5"> <div className="text-[10px] text-slate-400 font-mono flex items-center gap-1">
<Globe className="w-3 h-3 text-sky-700" /> <Globe className="w-2.5 h-2.5 text-sky-700" />
https://{activeTenant.domain} https://{activeTenant.domain}
</div> </div>
</div> </div>
</div> </div>
{/* Quick Command Palette Trigger (Cmd+K) */} <div className="h-5 w-[1px] bg-slate-200 hidden sm:block" />
<button
type="button"
onClick={() => {
clinicalAudio.playClick();
setIsCommandPaletteOpen(true);
}}
className="hidden xl:flex items-center gap-2 px-3 py-1.5 bg-slate-50 hover:bg-slate-100 border border-slate-200 rounded-lg text-slate-500 text-xs transition shadow-2xs"
>
<Search className="w-3.5 h-3.5 text-slate-400" />
<span>Search patients or actions...</span>
<kbd className="px-1.5 py-0.5 text-[9px] font-mono bg-white border border-slate-200 rounded text-slate-500 font-bold">
⌘K
</kbd>
</button>
{/* Audio Toggle Button */} {/* Clinic Dropdown Selector */}
<button
type="button"
onClick={handleToggleAudio}
title={audioEnabled ? 'Tactile Audio Active (Click to Mute)' : 'Tactile Audio Muted (Click to Enable)'}
className={`p-1.5 rounded-lg border text-xs transition flex items-center gap-1 shadow-2xs ${
audioEnabled
? 'bg-sky-50 border-sky-200 text-sky-700 hover:bg-sky-100'
: 'bg-slate-100 border-slate-200 text-slate-400 hover:bg-slate-200'
}`}
>
{audioEnabled ? <Volume2 className="w-4 h-4" /> : <VolumeX className="w-4 h-4" />}
</button>
{/* Court & HIPAA Compliance Vault Trigger Button */}
<button
type="button"
onClick={() => {
clinicalAudio.playClick();
setIsCourtVaultOpen(true);
}}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold transition shadow-xs border border-slate-700"
title="21 CFR Part 11 Court Defense Audit Trail, Non-Repudiation Seal & BAA"
>
<Scale className="w-3.5 h-3.5 text-sky-400" />
<span className="hidden sm:inline">Court &amp; HIPAA Vault</span>
<span className="sm:hidden">Vault</span>
</button>
{/* Quick Terminal Lockout Button (HIPAA 45 CFR § 164.312(a)(2)(iii)) */}
<button
type="button"
onClick={() => {
clinicalAudio.playClick();
setIsTerminalLocked(true);
}}
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-slate-100 hover:bg-rose-50 border border-slate-200 hover:border-rose-300 text-slate-700 hover:text-rose-700 text-xs font-bold transition shadow-2xs"
title="Lock Clinical Terminal (Cmd+L / 45 CFR § 164.312(a)(2)(iii))"
>
<Lock className="w-3.5 h-3.5 text-slate-500 hover:text-rose-600" />
<span className="hidden md:inline">Lock</span>
</button>
{/* Clinic Dropdown */}
<div className="relative"> <div className="relative">
<select <select
value={activeTenantId} value={activeTenantId}
onChange={(e) => handleSwitchTenant(e.target.value)} onChange={(e) => handleSwitchTenant(e.target.value)}
className="appearance-none bg-slate-50 hover:bg-slate-100 border border-slate-300 text-slate-800 text-xs font-bold rounded-lg px-3 py-1.5 pr-8 cursor-pointer focus:outline-none focus:border-sky-500 transition shadow-2xs" className="appearance-none bg-slate-50 hover:bg-slate-100 border border-slate-300 text-slate-800 text-xs font-bold rounded-lg pl-2.5 pr-7 py-1.5 cursor-pointer focus:outline-none focus:border-sky-500 transition shadow-2xs max-w-[190px] sm:max-w-[240px] truncate"
title="Switch Clinic Location / Practice"
> >
{tenants.map((t) => ( {tenants.map((t) => (
<option key={t.id} value={t.id}> <option key={t.id} value={t.id}>
@@ -703,12 +650,92 @@ export default function Home() {
</option> </option>
))} ))}
</select> </select>
<ChevronDown className="w-3.5 h-3.5 text-slate-500 absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none" /> <ChevronDown className="w-3.5 h-3.5 text-slate-500 absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none" />
</div>
</div>
{/* Center: Command Palette / Search Bar (Responsive) */}
<div className="flex-1 max-w-xs xl:max-w-sm hidden md:block">
<button
type="button"
onClick={() => {
clinicalAudio.playClick();
setIsCommandPaletteOpen(true);
}}
className="w-full flex items-center justify-between px-3 py-1.5 bg-slate-50 hover:bg-slate-100 border border-slate-200 rounded-lg text-slate-500 text-xs transition shadow-2xs group"
>
<div className="flex items-center gap-2 truncate">
<Search className="w-3.5 h-3.5 text-slate-400 group-hover:text-sky-600 transition" />
<span className="truncate">Search patients, charts, or actions...</span>
</div>
<kbd className="px-1.5 py-0.5 text-[9px] font-mono bg-white border border-slate-200 rounded text-slate-500 font-bold shrink-0 ml-2">
⌘K
</kbd>
</button>
</div>
{/* Right Cluster: Quick Tools + Role Switcher + Portal Switcher */}
<div className="flex items-center gap-2 shrink-0 flex-wrap justify-end">
{/* Search button on small screens where full bar is hidden */}
<button
type="button"
onClick={() => {
clinicalAudio.playClick();
setIsCommandPaletteOpen(true);
}}
className="md:hidden p-1.5 rounded-lg border border-slate-200 bg-slate-50 hover:bg-slate-100 text-slate-600 shadow-2xs"
title="Search patients (⌘K)"
>
<Search className="w-4 h-4" />
</button>
{/* Utility & Security Actions Cluster */}
<div className="flex items-center gap-0.5 bg-slate-100/80 p-0.5 rounded-lg border border-slate-200">
{/* Audio Toggle */}
<button
type="button"
onClick={handleToggleAudio}
title={audioEnabled ? 'Tactile Audio Active (Click to Mute)' : 'Tactile Audio Muted (Click to Enable)'}
className={`p-1.5 rounded-md text-xs transition ${
audioEnabled
? 'bg-white text-sky-700 shadow-2xs font-semibold'
: 'text-slate-400 hover:text-slate-600'
}`}
>
{audioEnabled ? <Volume2 className="w-3.5 h-3.5 text-sky-600" /> : <VolumeX className="w-3.5 h-3.5" />}
</button>
{/* Court Vault Button */}
<button
type="button"
onClick={() => {
clinicalAudio.playClick();
setIsCourtVaultOpen(true);
}}
className="flex items-center gap-1 px-2 py-1 rounded-md text-slate-700 hover:text-slate-950 hover:bg-white text-xs font-semibold transition"
title="21 CFR Part 11 Court Defense Audit Vault & BAA Non-Repudiation Seal"
>
<Scale className="w-3.5 h-3.5 text-sky-600" />
<span className="hidden sm:inline text-[11px]">Vault</span>
</button>
{/* Terminal Lock Button */}
<button
type="button"
onClick={() => {
clinicalAudio.playClick();
setIsTerminalLocked(true);
}}
className="flex items-center gap-1 px-2 py-1 rounded-md text-slate-700 hover:text-rose-700 hover:bg-rose-50 text-xs font-semibold transition"
title="Lock Clinical Terminal (HIPAA 45 CFR § 164.312(a)(2)(iii))"
>
<Lock className="w-3.5 h-3.5 text-slate-500" />
<span className="hidden sm:inline text-[11px]">Lock</span>
</button>
</div> </div>
{/* Staff Role Switcher (RBAC) */} {/* Staff Role Switcher (RBAC) */}
<div className="flex items-center gap-1 bg-slate-100 p-1 rounded-lg border border-slate-200 text-xs"> <div className="flex items-center bg-slate-100 p-0.5 rounded-lg border border-slate-200 text-xs">
<span className="text-[10px] uppercase font-bold text-slate-500 px-1.5">Role:</span>
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
@@ -716,14 +743,14 @@ export default function Home() {
setStaffRole('doctor'); setStaffRole('doctor');
addToast('info', 'Role: Attending Doctor (D.C.)', 'Full clinical SOAP, 2D spine & telehealth unlocked'); addToast('info', 'Role: Attending Doctor (D.C.)', 'Full clinical SOAP, 2D spine & telehealth unlocked');
}} }}
className={`px-2 py-1 rounded text-xs font-bold transition ${ className={`px-2 py-1 rounded-md text-[11px] font-bold transition ${
staffRole === 'doctor' staffRole === 'doctor'
? 'bg-white text-sky-800 shadow-2xs border border-slate-200' ? 'bg-white text-sky-800 shadow-2xs border border-slate-200'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
}`} }`}
title="Full Doctor Clinical Access" title="Full Doctor Clinical Access"
> >
Doctor (D.C.) Doctor
</button> </button>
<button <button
type="button" type="button"
@@ -735,7 +762,7 @@ export default function Home() {
} }
addToast('alert', 'Role: Front Desk (HIPAA Safe)', 'Protected medical notes locked for privacy'); addToast('alert', 'Role: Front Desk (HIPAA Safe)', 'Protected medical notes locked for privacy');
}} }}
className={`px-2 py-1 rounded text-xs font-bold transition ${ className={`px-2 py-1 rounded-md text-[11px] font-bold transition ${
staffRole === 'front_desk' staffRole === 'front_desk'
? 'bg-amber-100 text-amber-900 shadow-2xs border border-amber-200' ? 'bg-amber-100 text-amber-900 shadow-2xs border border-amber-200'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
@@ -751,34 +778,33 @@ export default function Home() {
setStaffRole('billing_admin'); setStaffRole('billing_admin');
addToast('info', 'Role: Billing Administrator', 'Superbill claims and memberships prioritized'); addToast('info', 'Role: Billing Administrator', 'Superbill claims and memberships prioritized');
}} }}
className={`px-2 py-1 rounded text-xs font-bold transition ${ className={`px-2 py-1 rounded-md text-[11px] font-bold transition ${
staffRole === 'billing_admin' staffRole === 'billing_admin'
? 'bg-white text-emerald-800 shadow-2xs border border-slate-200' ? 'bg-white text-emerald-800 shadow-2xs border border-slate-200'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
}`} }`}
title="Financial & Billing Administrator" title="Financial & Billing Administrator"
> >
Billing Admin Billing
</button> </button>
</div> </div>
</div>
{/* Portal Switcher Tabs */} {/* Portal Mode Switcher */}
<div className="flex items-center gap-1 bg-slate-100 p-1 rounded-lg border border-slate-200 text-xs font-semibold"> <div className="flex items-center bg-slate-100 p-0.5 rounded-lg border border-slate-200 text-xs font-semibold">
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
clinicalAudio.playClick(); clinicalAudio.playClick();
setPortalMode('clinic'); setPortalMode('clinic');
}} }}
className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 transition ${ className={`px-2.5 py-1 rounded-md flex items-center gap-1.5 transition text-[11px] ${
portalMode === 'clinic' portalMode === 'clinic'
? 'bg-sky-700 text-white font-bold shadow-xs' ? 'bg-sky-700 text-white font-bold shadow-xs'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
}`} }`}
> >
<Stethoscope className="w-3.5 h-3.5" /> <Stethoscope className="w-3 h-3" />
Doctor &amp; Practice OS <span>Doctor OS</span>
</button> </button>
<button <button
@@ -787,50 +813,83 @@ export default function Home() {
clinicalAudio.playClick(); clinicalAudio.playClick();
setPortalMode('patient'); setPortalMode('patient');
}} }}
className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 transition ${ className={`px-2.5 py-1 rounded-md flex items-center gap-1.5 transition text-[11px] ${
portalMode === 'patient' portalMode === 'patient'
? 'bg-sky-700 text-white font-bold shadow-xs' ? 'bg-sky-700 text-white font-bold shadow-xs'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
}`} }`}
> >
<Laptop className="w-3.5 h-3.5" /> <Laptop className="w-3 h-3" />
Patient Booking &amp; Intake <span>Patient Intake</span>
</button> </button>
{/* More Views Dropdown */}
<div className="relative">
<button <button
type="button" type="button"
onClick={() => setPortalMode('superadmin')} onClick={() => setIsMoreMenuOpen((prev) => !prev)}
className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 transition ${ className={`px-2 py-1 rounded-md flex items-center gap-1 text-[11px] transition ${
portalMode === 'superadmin' portalMode === 'superadmin' || portalMode === 'onboarding'
? 'bg-slate-900 text-white font-bold shadow-xs' ? 'bg-slate-900 text-white font-bold'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-200/60'
}`} }`}
title="Administrative & Onboarding Views"
> >
<Building2 className="w-3.5 h-3.5" /> <span>{portalMode === 'superadmin' ? 'Admin' : portalMode === 'onboarding' ? 'Onboard' : 'More'}</span>
Mediusa Super-Admin <ChevronDown className="w-3 h-3 opacity-60" />
</button> </button>
{isMoreMenuOpen && (
<>
<div
className="fixed inset-0 z-40"
onClick={() => setIsMoreMenuOpen(false)}
/>
<div className="absolute right-0 top-full mt-1.5 bg-white border border-slate-200 shadow-xl rounded-xl py-1.5 w-52 z-50 animate-in fade-in zoom-in-95 duration-100">
<div className="px-3 py-1 text-[10px] uppercase font-bold text-slate-400 tracking-wider">
Administrative Views
</div>
<button
type="button"
onClick={() => {
clinicalAudio.playClick();
setPortalMode('superadmin');
setIsMoreMenuOpen(false);
}}
className={`w-full px-3 py-2 text-left text-xs font-semibold flex items-center gap-2 transition ${
portalMode === 'superadmin' ? 'bg-slate-100 text-slate-950 font-bold' : 'text-slate-700 hover:bg-slate-50'
}`}
>
<Building2 className="w-3.5 h-3.5 text-slate-500" />
<span>Mediusa Super-Admin</span>
</button>
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
clinicalAudio.playClick(); clinicalAudio.playClick();
setPortalMode('onboarding'); setPortalMode('onboarding');
setIsMoreMenuOpen(false);
}} }}
className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 transition ${ className={`w-full px-3 py-2 text-left text-xs font-semibold flex items-center gap-2 transition ${
portalMode === 'onboarding' portalMode === 'onboarding' ? 'bg-emerald-50 text-emerald-950 font-bold' : 'text-emerald-700 hover:bg-emerald-50'
? 'bg-emerald-700 text-white font-bold shadow-xs'
: 'text-emerald-700 hover:text-emerald-900 bg-emerald-50/70 hover:bg-emerald-100/70 border border-emerald-200/60'
}`} }`}
> >
<Sparkles className="w-3.5 h-3.5 text-amber-500 animate-pulse" /> <Sparkles className="w-3.5 h-3.5 text-amber-500" />
+ Onboard Doctor (BAA) <span>+ Onboard Doctor (BAA)</span>
</button> </button>
</div> </div>
</>
)}
</div>
</div>
</div>
</div>
</div> </div>
{/* Pre-Launch / Pending BAA Banner */} {/* Pre-Launch / Pending BAA Banner */}
{portalMode === 'clinic' && activeTenant.baaStatus === 'pending' && ( {portalMode === 'clinic' && activeTenant.baaStatus === 'pending' && (
<div className="max-w-7xl mx-auto mt-2.5 p-2.5 bg-emerald-50 border border-emerald-200/90 rounded-xl flex flex-col sm:flex-row items-center justify-between gap-2 text-xs"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-2.5">
<div className="p-2.5 bg-emerald-50 border border-emerald-200/90 rounded-xl flex flex-col sm:flex-row items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-2 text-emerald-950"> <div className="flex items-center gap-2 text-emerald-950">
<span className="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse shrink-0" /> <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse shrink-0" />
<span className="font-bold">{activeTenant.name}:</span> <span className="font-bold">{activeTenant.name}:</span>
@@ -849,41 +908,49 @@ export default function Home() {
<ShieldCheck className="w-3.5 h-3.5" /> Sign BAA to Go Live <ShieldCheck className="w-3.5 h-3.5" /> Sign BAA to Go Live
</button> </button>
</div> </div>
</div>
)} )}
{/* Sub-Tabs for Doctor Clinic OS */} {/* Tier 2: Sub-Tabs for Doctor Clinic OS (Cleanly Grouped, No Horizontal Overflow) */}
{portalMode === 'clinic' && ( {portalMode === 'clinic' && (
<div className="max-w-7xl mx-auto flex items-center gap-2 mt-3 pt-2.5 border-t border-slate-100 overflow-x-auto text-xs"> <div className="border-t border-slate-100 bg-slate-50/50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2 flex items-center justify-between flex-wrap gap-2 text-xs">
{/* Grouped Clinical Workspace Navigation */}
<div className="flex items-center flex-wrap gap-1.5">
{/* Group 1: Clinical Operations */}
<div className="flex items-center bg-white p-0.5 rounded-lg border border-slate-200/90 shadow-2xs">
<button <button
type="button" type="button"
onClick={() => setClinicTab('calendar')} onClick={() => setClinicTab('calendar')}
className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${ className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
clinicTab === 'calendar' clinicTab === 'calendar'
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold' ? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
}`} }`}
> >
<Calendar className="w-3.5 h-3.5 text-sky-700" /> <Calendar className="w-3.5 h-3.5 text-sky-700" />
Schedule &amp; Encounters <span>Schedule</span>
</button> </button>
{/* Clinical Charts - Hidden if in Front Desk HIPAA-safe mode */}
{staffRole !== 'front_desk' ? ( {staffRole !== 'front_desk' ? (
<button <button
type="button" type="button"
onClick={() => setClinicTab('charting')} onClick={() => setClinicTab('charting')}
className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${ className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
clinicTab === 'charting' clinicTab === 'charting'
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold' ? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
}`} }`}
> >
<FileText className="w-3.5 h-3.5 text-sky-700" /> <FileText className="w-3.5 h-3.5 text-sky-700" />
SOAP Chart &amp; Spine ({activePatient.firstName} {activePatient.lastName}) <span>SOAP Chart</span>
<span className="text-[10px] px-1.5 py-0.2 rounded bg-sky-100 text-sky-800 font-mono font-medium">
{activePatient.firstName} {activePatient.lastName.charAt(0)}.
</span>
</button> </button>
) : ( ) : (
<span className="px-2.5 py-1 text-[11px] text-amber-700 bg-amber-50 rounded-md border border-amber-200 font-medium flex items-center gap-1"> <span className="px-2 py-1 text-[10px] text-amber-700 bg-amber-50 rounded font-medium flex items-center gap-1">
<Shield className="w-3 h-3 text-amber-600" /> HIPAA: Notes Protected <Shield className="w-3 h-3 text-amber-600" /> Notes Locked
</span> </span>
)} )}
@@ -891,82 +958,97 @@ export default function Home() {
<button <button
type="button" type="button"
onClick={() => setClinicTab('telehealth')} onClick={() => setClinicTab('telehealth')}
className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${ className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
clinicTab === 'telehealth' clinicTab === 'telehealth'
? 'bg-purple-50 text-purple-800 border border-purple-200 shadow-2xs font-bold' ? 'bg-purple-50 text-purple-800 border border-purple-200 shadow-2xs font-bold'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
}`} }`}
> >
<Video className="w-3.5 h-3.5 text-purple-600" /> <Video className="w-3.5 h-3.5 text-purple-600" />
Telehealth Virtual Room <span>Telehealth</span>
</button> </button>
)} )}
</div>
{/* Group 2: Practice & Revenue */}
<div className="flex items-center bg-white p-0.5 rounded-lg border border-slate-200/90 shadow-2xs">
<button
type="button"
onClick={() => setClinicTab('billing')}
className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
clinicTab === 'billing'
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
: 'text-slate-600 hover:text-slate-900'
}`}
>
<DollarSign className="w-3.5 h-3.5 text-emerald-600" />
<span>Superbills &amp; Billing</span>
</button>
<button <button
type="button" type="button"
onClick={() => setClinicTab('retail')} onClick={() => setClinicTab('retail')}
className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${ className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
clinicTab === 'retail' clinicTab === 'retail'
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold' ? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
}`} }`}
> >
<ShoppingBag className="w-3.5 h-3.5 text-sky-700" /> <ShoppingBag className="w-3.5 h-3.5 text-sky-700" />
Retail &amp; Supplement POS <span>Retail POS</span>
</button> </button>
<button <button
type="button" type="button"
onClick={() => setClinicTab('memberships')} onClick={() => setClinicTab('memberships')}
className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${ className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
clinicTab === 'memberships' clinicTab === 'memberships'
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold' ? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
}`} }`}
> >
<Repeat className="w-3.5 h-3.5 text-sky-700" /> <Repeat className="w-3.5 h-3.5 text-sky-700" />
Memberships &amp; Packages <span>Memberships</span>
</button>
<button
type="button"
onClick={() => setClinicTab('billing')}
className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${
clinicTab === 'billing'
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
: 'text-slate-600 hover:text-slate-900'
}`}
>
<DollarSign className="w-3.5 h-3.5 text-sky-700" />
Superbills &amp; Invoicing
</button> </button>
</div>
{/* Group 3: Patient Retention & Growth */}
<div className="flex items-center bg-white p-0.5 rounded-lg border border-slate-200/90 shadow-2xs">
<button <button
type="button" type="button"
onClick={() => setClinicTab('retention')} onClick={() => setClinicTab('retention')}
className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${ className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
clinicTab === 'retention' clinicTab === 'retention'
? 'bg-amber-50 text-amber-800 border border-amber-200 shadow-2xs font-bold' ? 'bg-amber-50 text-amber-800 border border-amber-200 shadow-2xs font-bold'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
}`} }`}
> >
<Users className="w-3.5 h-3.5 text-amber-600" /> <Users className="w-3.5 h-3.5 text-amber-600" />
Retention Radar <span>Retention</span>
</button> </button>
<button <button
type="button" type="button"
onClick={() => setClinicTab('growth')} onClick={() => setClinicTab('growth')}
className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${ className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
clinicTab === 'growth' clinicTab === 'growth'
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold' ? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
}`} }`}
> >
<TrendingUp className="w-3.5 h-3.5 text-emerald-600" /> <TrendingUp className="w-3.5 h-3.5 text-emerald-600" />
Growth &amp; SEO (GSC/GA4) <span>Growth &amp; SEO</span>
</button> </button>
</div> </div>
</div>
{/* Right: Active Clinician Presence Indicator */}
<div className="hidden xl:flex items-center gap-2 text-xs text-slate-500 font-mono">
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
<span>Active: <strong>{activeProvider.name}</strong></span>
</div>
</div>
</div>
)} )}
</header> </header>