1304 lines
55 KiB
TypeScript
1304 lines
55 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import {
|
|
INITIAL_TENANTS,
|
|
INITIAL_PROVIDERS,
|
|
INITIAL_PATIENTS,
|
|
INITIAL_APPOINTMENTS,
|
|
INITIAL_SOAP_NOTES,
|
|
INITIAL_SUPERBILLS,
|
|
INITIAL_PRODUCTS,
|
|
INITIAL_MEMBERSHIPS,
|
|
INITIAL_PACKAGES,
|
|
INITIAL_WAITLIST,
|
|
} from '@/lib/mock-data';
|
|
import {
|
|
ClinicTenant,
|
|
Appointment,
|
|
SoapNote,
|
|
Superbill,
|
|
Patient,
|
|
RetailProduct,
|
|
WellnessMembership,
|
|
PrePaidPackage,
|
|
WaitlistEntry,
|
|
StaffRole,
|
|
Provider,
|
|
} from '@/types/clinical';
|
|
import { CalendarView } from '@/components/calendar/CalendarView';
|
|
import { SoapChartEditor } from '@/components/charting/SoapChartEditor';
|
|
import { SuperbillView } from '@/components/billing/SuperbillView';
|
|
import { RetentionView } from '@/components/retention/RetentionView';
|
|
import { PatientPortalView } from '@/components/intake/PatientPortalView';
|
|
import { SuperAdminView } from '@/components/admin/SuperAdminView';
|
|
import { RetailInventoryView } from '@/components/pos/RetailInventoryView';
|
|
import { MembershipsView } from '@/components/memberships/MembershipsView';
|
|
import { TelehealthRoom } from '@/components/telehealth/TelehealthRoom';
|
|
import { WaitlistModal } from '@/components/waitlist/WaitlistModal';
|
|
import { CourtAuditVaultModal } from '@/components/compliance/CourtAuditVaultModal';
|
|
import { CommandPalette } from '@/components/ui/CommandPalette';
|
|
import { InactivityLockoutModal } from '@/components/ui/InactivityLockoutModal';
|
|
import { ClinicalToastContainer, ToastMessage } from '@/components/ui/ClinicalToast';
|
|
import { DoctorOnboardingView } from '@/components/onboarding/DoctorOnboardingView';
|
|
import { ClinicGrowthView } from '@/components/growth/ClinicGrowthView';
|
|
import { clinicalAudio } from '@/lib/clinical-audio';
|
|
import {
|
|
Calendar,
|
|
FileText,
|
|
DollarSign,
|
|
Users,
|
|
Building2,
|
|
Globe,
|
|
ChevronDown,
|
|
Stethoscope,
|
|
Laptop,
|
|
ShoppingBag,
|
|
Repeat,
|
|
Video,
|
|
Shield,
|
|
ShieldAlert,
|
|
UserCheck,
|
|
Search,
|
|
Volume2,
|
|
VolumeX,
|
|
Sparkles,
|
|
Scale,
|
|
Lock,
|
|
ShieldCheck,
|
|
TrendingUp,
|
|
} from 'lucide-react';
|
|
|
|
export default function Home() {
|
|
const [tenants, setTenants] = useState<ClinicTenant[]>(INITIAL_TENANTS);
|
|
const [activeTenantId, setActiveTenantId] = useState<string>(INITIAL_TENANTS[0].id);
|
|
|
|
// 'clinic' | 'patient' | 'superadmin' | 'onboarding'
|
|
const [portalMode, setPortalMode] = useState<'clinic' | 'patient' | 'superadmin' | 'onboarding'>('clinic');
|
|
|
|
// Staff Role: 'doctor' | 'front_desk' | 'billing_admin'
|
|
const [staffRole, setStaffRole] = useState<StaffRole>('doctor');
|
|
|
|
// Clinic Sub-Tabs: 'calendar' | 'charting' | 'telehealth' | 'retail' | 'memberships' | 'billing' | 'retention' | 'growth'
|
|
const [clinicTab, setClinicTab] = useState<
|
|
'calendar' | 'charting' | 'telehealth' | 'retail' | 'memberships' | 'billing' | 'retention' | 'growth'
|
|
>('calendar');
|
|
|
|
const [appointments, setAppointments] = useState<Appointment[]>(INITIAL_APPOINTMENTS);
|
|
const [patients, setPatients] = useState<Patient[]>(INITIAL_PATIENTS);
|
|
const [providers, setProviders] = useState<Provider[]>(INITIAL_PROVIDERS);
|
|
const [soapNotes, setSoapNotes] = useState<SoapNote[]>(INITIAL_SOAP_NOTES);
|
|
const [superbills, setSuperbills] = useState<Superbill[]>(INITIAL_SUPERBILLS);
|
|
const [products, setProducts] = useState<RetailProduct[]>(INITIAL_PRODUCTS);
|
|
const [memberships, setMemberships] = useState<WellnessMembership[]>(INITIAL_MEMBERSHIPS);
|
|
const [packages, setPackages] = useState<PrePaidPackage[]>(INITIAL_PACKAGES);
|
|
const [waitlist, setWaitlist] = useState<WaitlistEntry[]>(INITIAL_WAITLIST);
|
|
const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);
|
|
const [pendingIntakes, setPendingIntakes] = useState<any[]>([
|
|
{
|
|
id: 'intake-waiting-1',
|
|
patientName: 'Jessica Morales',
|
|
phone: '(555) 302-9912',
|
|
dob: '1991-08-14',
|
|
email: 'jess.morales@example.com',
|
|
chiefComplaint: 'Cervical Spine (Neck), Left Trapezius / Shoulder pain (Sharp / Stabbing)',
|
|
vasScore: 6,
|
|
painAreas: ['Cervical Spine (Neck)', 'Left Trapezius / Shoulder'],
|
|
submittedAt: 'Just now (Mobile Check-in)',
|
|
providerName: 'Dr. Marcus Vance',
|
|
service: 'Initial Chiropractic Exam & Adjustment',
|
|
},
|
|
]);
|
|
|
|
// Polish state: Command Palette, Toasts & Audio
|
|
const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
|
|
const [isCourtVaultOpen, setIsCourtVaultOpen] = useState(false);
|
|
const [isTerminalLocked, setIsTerminalLocked] = useState(false);
|
|
const [toasts, setToasts] = useState<ToastMessage[]>([]);
|
|
const [audioEnabled, setAudioEnabled] = useState(true);
|
|
const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
|
|
|
|
const [activePatient, setActivePatient] = useState<Patient>(INITIAL_PATIENTS[0]);
|
|
const [activeSoapNote, setActiveSoapNote] = useState<SoapNote | undefined>(INITIAL_SOAP_NOTES[0]);
|
|
const [activeSuperbill, setActiveSuperbill] = useState<Superbill>(INITIAL_SUPERBILLS[0]);
|
|
|
|
const activeTenant = tenants.find((t) => t.id === activeTenantId) || tenants[0];
|
|
const activeProviders = providers.filter((p) => p.tenantId === activeTenant.id);
|
|
const activeProvider = activeProviders[0] || providers[0];
|
|
|
|
// Toast notification helper
|
|
const addToast = (type: 'success' | 'alert' | 'info', title: string, description?: string) => {
|
|
const id = `toast-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`;
|
|
const newToast: ToastMessage = {
|
|
id,
|
|
type,
|
|
title,
|
|
description,
|
|
timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }),
|
|
};
|
|
setToasts((prev) => [...prev, newToast]);
|
|
setTimeout(() => {
|
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
}, 4500);
|
|
};
|
|
|
|
const handleDismissToast = (id: string) => {
|
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
};
|
|
|
|
// Keyboard shortcut listener for Cmd+K / Ctrl+K
|
|
React.useEffect(() => {
|
|
const handleGlobalKeyDown = (e: KeyboardEvent) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
e.preventDefault();
|
|
setIsCommandPaletteOpen((prev) => !prev);
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handleGlobalKeyDown);
|
|
return () => window.removeEventListener('keydown', handleGlobalKeyDown);
|
|
}, []);
|
|
|
|
const handleToggleAudio = () => {
|
|
const next = !audioEnabled;
|
|
setAudioEnabled(next);
|
|
clinicalAudio.setEnabled(next);
|
|
if (next) {
|
|
clinicalAudio.playSuccess();
|
|
addToast('info', 'Tactile Audio Active', 'Synthesized Web Audio clicks & chimes enabled');
|
|
} else {
|
|
addToast('info', 'Tactile Audio Muted', 'Sound effects silenced');
|
|
}
|
|
};
|
|
|
|
const handleSelectAppointment = (apt: Appointment) => {
|
|
clinicalAudio.playClick();
|
|
const patientMatch = patients.find((p) => p.id === apt.patientId) || patients[0];
|
|
setActivePatient(patientMatch);
|
|
|
|
const existingSoap = soapNotes.find((s) => s.patientId === apt.patientId && s.appointmentId === apt.id);
|
|
setActiveSoapNote(existingSoap);
|
|
|
|
if (apt.isTelehealth) {
|
|
setClinicTab('telehealth');
|
|
} else {
|
|
setClinicTab('charting');
|
|
}
|
|
};
|
|
|
|
const handleUpdateAppointmentStatus = (aptId: string, status: Appointment['status']) => {
|
|
clinicalAudio.playClick();
|
|
setAppointments((prev) =>
|
|
prev.map((a) => (a.id === aptId ? { ...a, status } : a))
|
|
);
|
|
addToast('info', 'Encounter Status Updated', `Appointment transitioned to ${status}`);
|
|
};
|
|
|
|
const handleSaveSoapNote = (note: SoapNote) => {
|
|
clinicalAudio.playSuccess();
|
|
setSoapNotes((prev) => {
|
|
const idx = prev.findIndex((s) => s.id === note.id);
|
|
if (idx >= 0) {
|
|
const copy = [...prev];
|
|
copy[idx] = note;
|
|
return copy;
|
|
}
|
|
return [...prev, note];
|
|
});
|
|
setActiveSoapNote(note);
|
|
addToast('success', 'Chart Synced to HIPAA Vault', `${note.patientName} • ${note.status === 'signed' ? 'Signed & Locked' : 'Draft Saved'}`);
|
|
};
|
|
|
|
const handleGenerateSuperbillFromNote = (note: SoapNote) => {
|
|
clinicalAudio.playSuccess();
|
|
const newSb: Superbill = {
|
|
id: `sb-${Date.now()}`,
|
|
tenantId: activeTenant.id,
|
|
invoiceNumber: `SB-2026-${Math.floor(1000 + Math.random() * 9000)}`,
|
|
patientId: activePatient.id,
|
|
patientName: `${activePatient.firstName} ${activePatient.lastName}`,
|
|
patientDob: activePatient.dob,
|
|
patientAddress: activePatient.address,
|
|
providerName: note.providerName,
|
|
providerNpi: activeProvider.npi,
|
|
clinicName: activeTenant.name,
|
|
clinicAddress: activeTenant.address,
|
|
clinicTaxId: activeTenant.taxId,
|
|
dateOfService: note.date,
|
|
posCode: '11 (Office)',
|
|
icd10Codes: note.icd10Codes,
|
|
items: note.cptCodes.map((cpt) => ({
|
|
cptCode: cpt.code,
|
|
description: cpt.description,
|
|
units: 1,
|
|
rate: cpt.fee,
|
|
total: cpt.fee,
|
|
})),
|
|
totalAmount: note.cptCodes.reduce((sum, c) => sum + c.fee, 0),
|
|
patientPaid: note.cptCodes.reduce((sum, c) => sum + c.fee, 0),
|
|
balanceDue: 0,
|
|
paymentMethod: 'Stripe Card',
|
|
generatedAt: new Date().toISOString(),
|
|
};
|
|
|
|
setSuperbills((prev) => [newSb, ...prev]);
|
|
setActiveSuperbill(newSb);
|
|
setClinicTab('billing');
|
|
addToast('success', 'Superbill Claim Created', `${newSb.invoiceNumber} • $${newSb.totalAmount.toFixed(2)} Fee Schedule`);
|
|
};
|
|
|
|
const handleMarkPaid = (superbillId: string, method: Superbill['paymentMethod']) => {
|
|
clinicalAudio.playSuccess();
|
|
setSuperbills((prev) =>
|
|
prev.map((sb) =>
|
|
sb.id === superbillId
|
|
? { ...sb, balanceDue: 0, patientPaid: sb.totalAmount, paymentMethod: method }
|
|
: sb
|
|
)
|
|
);
|
|
if (activeSuperbill.id === superbillId) {
|
|
setActiveSuperbill((prev) => ({
|
|
...prev,
|
|
balanceDue: 0,
|
|
patientPaid: prev.totalAmount,
|
|
paymentMethod: method,
|
|
}));
|
|
}
|
|
addToast('success', 'Stripe Payment Captured', `Receipt processed via ${method}`);
|
|
};
|
|
|
|
const handlePatientBookingComplete = (newAptData: any) => {
|
|
clinicalAudio.playSuccess();
|
|
const newApt: Appointment = {
|
|
id: `apt-${Date.now()}`,
|
|
tenantId: activeTenant.id,
|
|
patientId: `pat-${Date.now()}`,
|
|
...newAptData,
|
|
};
|
|
setAppointments((prev) => [newApt, ...prev]);
|
|
|
|
const newIntakeItem = {
|
|
id: `intake-${Date.now()}`,
|
|
patientName: newAptData.patientName || 'New Patient',
|
|
phone: newAptData.patientPhone || '(555) 000-0000',
|
|
chiefComplaint: newAptData.notes || newAptData.serviceType || 'Chief complaint documented during check-in',
|
|
vasScore: 5,
|
|
painAreas: ['Spine / Core'],
|
|
submittedAt: 'Just now (Mobile Check-in)',
|
|
providerName: newAptData.providerName || activeProvider.name,
|
|
service: newAptData.serviceType || 'Consultation',
|
|
};
|
|
setPendingIntakes((prev) => [newIntakeItem, ...prev]);
|
|
addToast('success', 'Intake & Booking Confirmed', `${newApt.patientName} scheduled for ${newApt.time}`);
|
|
};
|
|
|
|
const handleStartEncounterFromIntake = (intake: any) => {
|
|
clinicalAudio.playSuccess();
|
|
const nameParts = (intake.patientName || 'Jessica Morales').trim().split(' ');
|
|
const firstName = nameParts[0] || 'Jessica';
|
|
const lastName = nameParts.slice(1).join(' ') || 'Morales';
|
|
|
|
const newPatient: Patient = {
|
|
id: `pat-intake-${Date.now()}`,
|
|
tenantId: activeTenant.id,
|
|
firstName,
|
|
lastName,
|
|
email: intake.email || `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`,
|
|
phone: intake.phone || '(555) 302-9912',
|
|
dob: intake.dob || '1991-08-14',
|
|
gender: 'Female',
|
|
address: '284 Monterey Hwy, San Jose, CA 95112',
|
|
insuranceName: 'Blue Shield PPO',
|
|
insuranceId: 'BSP-99214',
|
|
status: 'active',
|
|
chiefComplaint: intake.chiefComplaint,
|
|
daysSinceLastVisit: 0,
|
|
lastVisitDate: new Date().toISOString().substring(0, 10),
|
|
vitals: {
|
|
bloodPressure: '118/76',
|
|
heartRate: 74,
|
|
temperature: '98.6°F',
|
|
oxygenSat: 99,
|
|
painLevel: intake.vasScore || 6,
|
|
bmi: '22.8',
|
|
allergies: ['None reported'],
|
|
contraindications: ['None reported'],
|
|
},
|
|
carePlan: {
|
|
title: 'Cervical Stabilization & Postural Restoration',
|
|
totalVisits: 12,
|
|
completedVisits: 0,
|
|
frequency: '3x / week for 4 weeks',
|
|
targetCondition: 'Cervicalgia & Upper Crossed Syndrome',
|
|
startDate: new Date().toISOString().substring(0, 10),
|
|
status: 'on_track',
|
|
},
|
|
};
|
|
|
|
setPatients((prev) => [newPatient, ...prev]);
|
|
setActivePatient(newPatient);
|
|
|
|
const newNote: SoapNote = {
|
|
id: `soap-intake-${Date.now()}`,
|
|
tenantId: activeTenant.id,
|
|
patientId: newPatient.id,
|
|
patientName: `${firstName} ${lastName}`,
|
|
providerId: activeProvider.id,
|
|
providerName: activeProvider.name,
|
|
date: new Date().toISOString().substring(0, 10),
|
|
status: 'draft',
|
|
discipline: 'chiropractic',
|
|
vasScore: intake.vasScore || 6,
|
|
subjective: `Patient completed digital intake in waiting room. Reports: "${intake.chiefComplaint}". Patient notes sudden sharp exacerbation rated ${intake.vasScore || 6}/10 pain after prolonged desk work. Desires manual alignment and therapeutic decompression.`,
|
|
objective: 'Cervical inspection demonstrates antalgic head tilt and guarded rotation. Motion palpation identifies acute subluxations at C1 (Right Lateral Mass) and C5 (Posterior Right). Paraspinal tenderness and hypertonicity in upper trapezius.',
|
|
assessment: 'Acute cervical segmental dysfunction (M99.01) with cervicogenic spasm. Patient suitable for manual chiropractic manipulation.',
|
|
plan: '1. Diversified adjustment delivered to C1 (Atlas) and C5.\n2. Suboccipital myofascial release (15 min).\n3. Ergonomic posture home stretches prescribed.\n4. Follow-up visit in 48 hours.',
|
|
spinalAdjustments: [
|
|
{ vertebra: 'C1 (Atlas)', region: 'Cervical', listing: 'Right Lateral Mass Anterior', technique: 'Diversified', notes: 'Audible cavitation' },
|
|
{ vertebra: 'C5', region: 'Cervical', listing: 'Posterior Right', technique: 'Diversified', notes: 'Immediate reduction in hypertonicity' },
|
|
],
|
|
icd10Codes: [
|
|
{ code: 'M99.01', description: 'Segmental and somatic dysfunction of cervical region' },
|
|
{ code: 'M54.2', description: 'Cervicalgia / Neck Pain' },
|
|
],
|
|
cptCodes: [
|
|
{ code: '98940', description: 'CMT Spinal, 1-2 Regions (Cervical)', fee: 55 },
|
|
{ code: '97140', description: 'Manual Therapy Techniques (15 min)', fee: 45 },
|
|
],
|
|
};
|
|
|
|
setActiveSoapNote(newNote);
|
|
setPendingIntakes((prev) => prev.filter((i) => i.id !== intake.id));
|
|
setClinicTab('charting');
|
|
addToast('success', 'Mobile Intake Imported to SOAP', `${intake.patientName}'s pain map and history loaded.`);
|
|
};
|
|
|
|
const handleAddTenant = (newTenant: ClinicTenant) => {
|
|
setTenants((prev) => [...prev, newTenant]);
|
|
addToast('success', 'New Clinic Deployed', `${newTenant.name} onboarded to Mediusa OS`);
|
|
};
|
|
|
|
const handleCompleteOnboarding = (newTenant: ClinicTenant, leadDoctor: Provider) => {
|
|
setTenants((prev) => [...prev, newTenant]);
|
|
setProviders((prev) => [...prev, leadDoctor]);
|
|
setActiveTenantId(newTenant.id);
|
|
|
|
// Seed 1 active patient and encounter for instant clinic operation
|
|
const samplePatientId = `pat-${Date.now()}`;
|
|
const samplePatient: Patient = {
|
|
id: samplePatientId,
|
|
tenantId: newTenant.id,
|
|
firstName: 'Michael',
|
|
lastName: 'Sterling',
|
|
email: 'm.sterling@example.com',
|
|
phone: '(555) 349-1102',
|
|
dob: '1984-06-12',
|
|
gender: 'Male',
|
|
address: '742 Evergreen Terrace, McLean, VA 22102',
|
|
insuranceName: 'CareFirst BlueCross',
|
|
insuranceId: 'CFB-94021-X',
|
|
status: 'active',
|
|
chiefComplaint: 'Acute thoracic and lumbar stiffness following marathon training; radiates to right hamstring',
|
|
daysSinceLastVisit: 0,
|
|
lastVisitDate: new Date().toISOString().substring(0, 10),
|
|
nextAppointmentDate: new Date().toISOString().substring(0, 10),
|
|
vitals: {
|
|
bloodPressure: '122/78',
|
|
heartRate: 68,
|
|
temperature: '98.4°F',
|
|
oxygenSat: 99,
|
|
painLevel: 6,
|
|
bmi: '23.4',
|
|
allergies: ['Penicillin', 'Latex'],
|
|
contraindications: ['High-velocity cervical rotation'],
|
|
},
|
|
carePlan: {
|
|
title: 'Spinal Alignment & Thoracic Mobility Protocol',
|
|
totalVisits: 12,
|
|
completedVisits: 1,
|
|
frequency: '2x / week for 6 weeks',
|
|
targetCondition: 'Thoracolumbar Subluxation Complex',
|
|
startDate: new Date().toISOString().substring(0, 10),
|
|
status: 'on_track',
|
|
},
|
|
};
|
|
|
|
const sampleApt: Appointment = {
|
|
id: `apt-${Date.now()}`,
|
|
tenantId: newTenant.id,
|
|
patientId: samplePatientId,
|
|
patientName: `${samplePatient.firstName} ${samplePatient.lastName}`,
|
|
patientPhone: samplePatient.phone,
|
|
providerId: leadDoctor.id,
|
|
providerName: leadDoctor.name,
|
|
date: new Date().toISOString().substring(0, 10),
|
|
time: '10:00 AM',
|
|
durationMinutes: 45,
|
|
serviceType: 'Initial Clinical Examination & Spinal Adjustment',
|
|
status: 'confirmed',
|
|
room: 'Operatory 1',
|
|
notes: 'Initial evaluation under newly executed HIPAA BAA enclave. Full spinal visualizer and CMS-1500 queued.',
|
|
fee: 85,
|
|
};
|
|
|
|
setPatients((prev) => [samplePatient, ...prev]);
|
|
setAppointments((prev) => [sampleApt, ...prev]);
|
|
setActivePatient(samplePatient);
|
|
|
|
setPortalMode('clinic');
|
|
setClinicTab('calendar');
|
|
|
|
addToast(
|
|
'success',
|
|
'Clinic Enclave Deployed & BAA Sealed',
|
|
`${newTenant.name} is online on https://${newTenant.domain}. Lead Doctor: ${leadDoctor.name}.`
|
|
);
|
|
};
|
|
|
|
const handleSwitchTenant = (tenantId: string) => {
|
|
clinicalAudio.playClick();
|
|
setActiveTenantId(tenantId);
|
|
setPortalMode('clinic');
|
|
setClinicTab('calendar');
|
|
|
|
// Automatically sync active patient, note, and superbills for the selected clinic
|
|
const tenantPatients = patients.filter((p) => p.tenantId === tenantId);
|
|
if (tenantPatients.length > 0) {
|
|
setActivePatient(tenantPatients[0]);
|
|
const matchingSoap =
|
|
soapNotes.find((s) => s.patientId === tenantPatients[0].id) ||
|
|
soapNotes.find((s) => s.tenantId === tenantId);
|
|
setActiveSoapNote(matchingSoap);
|
|
}
|
|
|
|
const tenantSuperbills = superbills.filter((sb) => sb.tenantId === tenantId);
|
|
if (tenantSuperbills.length > 0) {
|
|
setActiveSuperbill(tenantSuperbills[0]);
|
|
}
|
|
};
|
|
|
|
const handleQuickScheduleAppointment = (newAptData: any) => {
|
|
clinicalAudio.playSuccess();
|
|
const newApt: Appointment = {
|
|
id: `apt-${Date.now()}`,
|
|
...newAptData,
|
|
};
|
|
|
|
const existingPatient = patients.find((p) => p.id === newAptData.patientId);
|
|
if (!existingPatient) {
|
|
const nameParts = (newAptData.patientName || 'New Patient').split(' ');
|
|
const firstName = nameParts[0] || 'Walk-In';
|
|
const lastName = nameParts.slice(1).join(' ') || 'Patient';
|
|
const newPatient: Patient = {
|
|
id: newAptData.patientId,
|
|
tenantId: activeTenant.id,
|
|
firstName,
|
|
lastName,
|
|
email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`,
|
|
phone: newAptData.patientPhone || '(555) 000-0000',
|
|
dob: '1990-01-01',
|
|
gender: 'Undisclosed',
|
|
address: activeTenant.cityStateZip,
|
|
insuranceName: 'Direct / Stripe Connect',
|
|
insuranceId: 'SELF-PAY',
|
|
chiefComplaint: newAptData.notes || newAptData.serviceType,
|
|
daysSinceLastVisit: 0,
|
|
lastVisitDate: newAptData.date,
|
|
nextAppointmentDate: newAptData.date,
|
|
status: 'active',
|
|
carePlan: {
|
|
title: 'Acute Relief & Biomechanical Alignment',
|
|
totalVisits: 6,
|
|
completedVisits: 1,
|
|
frequency: '1-2x / week',
|
|
targetCondition: newAptData.serviceType,
|
|
startDate: newAptData.date,
|
|
status: 'on_track',
|
|
},
|
|
};
|
|
setPatients((prev) => [newPatient, ...prev]);
|
|
setActivePatient(newPatient);
|
|
} else {
|
|
setActivePatient(existingPatient);
|
|
}
|
|
|
|
setAppointments((prev) => [newApt, ...prev]);
|
|
addToast(
|
|
'success',
|
|
'Encounter Scheduled',
|
|
`${newApt.patientName} scheduled for ${newApt.time} (${newApt.serviceType})`
|
|
);
|
|
};
|
|
|
|
const handleEndTelehealthCall = (consultData: {
|
|
subjective: string;
|
|
objective: string;
|
|
assessment: string;
|
|
plan: string;
|
|
duration: string;
|
|
}) => {
|
|
clinicalAudio.playSuccess();
|
|
const today = new Date().toISOString().substring(0, 10);
|
|
const updatedNote: SoapNote = {
|
|
id: activeSoapNote?.id || `soap-${Date.now()}`,
|
|
tenantId: activeTenant.id,
|
|
patientId: activePatient.id,
|
|
patientName: `${activePatient.firstName} ${activePatient.lastName}`,
|
|
providerId: activeProvider.id,
|
|
providerName: activeProvider.name,
|
|
date: today,
|
|
status: 'draft',
|
|
discipline: 'chiropractic',
|
|
vasScore: 4,
|
|
subjective: consultData.subjective,
|
|
objective: consultData.objective,
|
|
assessment: consultData.assessment,
|
|
plan: `${consultData.plan}\n\n[Telehealth Video Consult • Duration: ${consultData.duration} • Encrypted WebRTC Session]`,
|
|
spinalAdjustments: activeSoapNote?.spinalAdjustments || [],
|
|
icd10Codes: activeSoapNote?.icd10Codes || [
|
|
{ code: 'M99.01', description: 'Segmental and somatic dysfunction of cervical region' },
|
|
],
|
|
cptCodes: [
|
|
{ code: '99203', description: 'Office/Telehealth Outpatient Visit, 30 min', fee: 110 },
|
|
{ code: '97110', description: 'Therapeutic Exercises & Ergonomic Protocol', fee: 45 },
|
|
],
|
|
};
|
|
|
|
setSoapNotes((prev) => {
|
|
const idx = prev.findIndex((s) => s.patientId === activePatient.id);
|
|
if (idx >= 0) {
|
|
const copy = [...prev];
|
|
copy[idx] = updatedNote;
|
|
return copy;
|
|
}
|
|
return [updatedNote, ...prev];
|
|
});
|
|
|
|
setActiveSoapNote(updatedNote);
|
|
setClinicTab('charting');
|
|
addToast(
|
|
'success',
|
|
'Telehealth Note Synced to Chart',
|
|
`Clinical findings for ${activePatient.firstName} ${activePatient.lastName} transferred to SOAP editor (${consultData.duration})`
|
|
);
|
|
};
|
|
|
|
const handleUpdateProductStock = (productId: string, newStock: number) => {
|
|
clinicalAudio.playClick();
|
|
setProducts((prev) =>
|
|
prev.map((p) => (p.id === productId ? { ...p, stockQty: newStock } : p))
|
|
);
|
|
addToast('info', 'POS Inventory Updated', `Stock quantity adjusted to ${newStock}`);
|
|
};
|
|
|
|
const handleEnrollPatientInMembership = (patientId: string, planName: string) => {
|
|
clinicalAudio.playSuccess();
|
|
setPatients((prev) =>
|
|
prev.map((p) => (p.id === patientId ? { ...p, activeMembership: planName } : p))
|
|
);
|
|
addToast('success', 'Membership Enrolled', `Patient subscribed to ${planName}`);
|
|
};
|
|
|
|
const handleAutoFillWaitlistPatient = (entryId: string) => {
|
|
clinicalAudio.playPing();
|
|
const entry = waitlist.find((w) => w.id === entryId);
|
|
setWaitlist((prev) =>
|
|
prev.map((w) => (w.id === entryId ? { ...w, status: 'notified' } : w))
|
|
);
|
|
addToast('alert', 'Waitlist SMS Dispatched', `Slot opening sent to ${entry?.patientName || 'patient'}`);
|
|
};
|
|
|
|
return (
|
|
<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 */}
|
|
<header className="sticky top-0 z-40 bg-white border-b border-slate-200/90 shadow-2xs">
|
|
{/* Tier 1: System Command & Tenant Navigation */}
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
|
|
<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">
|
|
<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
|
|
</span>
|
|
<div>
|
|
<div className="text-xs font-black tracking-tight text-slate-900 flex items-center gap-1.5">
|
|
<span>MEDIUSA CLINIC OS</span>
|
|
<span className="text-[10px] px-1.5 py-0.2 rounded-full bg-sky-100 text-sky-800 font-bold border border-sky-200">
|
|
v2.5
|
|
</span>
|
|
</div>
|
|
<div className="text-[10px] text-slate-400 font-mono flex items-center gap-1">
|
|
<Globe className="w-2.5 h-2.5 text-sky-700" />
|
|
https://{activeTenant.domain}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-5 w-[1px] bg-slate-200 hidden sm:block" />
|
|
|
|
{/* Clinic Dropdown Selector */}
|
|
<div className="relative">
|
|
<select
|
|
value={activeTenantId}
|
|
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 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) => (
|
|
<option key={t.id} value={t.id}>
|
|
🏥 {t.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<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>
|
|
|
|
{/* Staff Role Switcher (RBAC) */}
|
|
<div className="flex items-center bg-slate-100 p-0.5 rounded-lg border border-slate-200 text-xs">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
clinicalAudio.playClick();
|
|
setStaffRole('doctor');
|
|
addToast('info', 'Role: Attending Doctor (D.C.)', 'Full clinical SOAP, 2D spine & telehealth unlocked');
|
|
}}
|
|
className={`px-2 py-1 rounded-md text-[11px] font-bold transition ${
|
|
staffRole === 'doctor'
|
|
? 'bg-white text-sky-800 shadow-2xs border border-slate-200'
|
|
: 'text-slate-600 hover:text-slate-900'
|
|
}`}
|
|
title="Full Doctor Clinical Access"
|
|
>
|
|
Doctor
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
clinicalAudio.playClick();
|
|
setStaffRole('front_desk');
|
|
if (clinicTab === 'charting' || clinicTab === 'telehealth') {
|
|
setClinicTab('calendar');
|
|
}
|
|
addToast('alert', 'Role: Front Desk (HIPAA Safe)', 'Protected medical notes locked for privacy');
|
|
}}
|
|
className={`px-2 py-1 rounded-md text-[11px] font-bold transition ${
|
|
staffRole === 'front_desk'
|
|
? 'bg-amber-100 text-amber-900 shadow-2xs border border-amber-200'
|
|
: 'text-slate-600 hover:text-slate-900'
|
|
}`}
|
|
title="HIPAA-Safe: Hides Clinical Notes, Shows Schedule, Retail & Billing"
|
|
>
|
|
Front Desk
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
clinicalAudio.playClick();
|
|
setStaffRole('billing_admin');
|
|
addToast('info', 'Role: Billing Administrator', 'Superbill claims and memberships prioritized');
|
|
}}
|
|
className={`px-2 py-1 rounded-md text-[11px] font-bold transition ${
|
|
staffRole === 'billing_admin'
|
|
? 'bg-white text-emerald-800 shadow-2xs border border-slate-200'
|
|
: 'text-slate-600 hover:text-slate-900'
|
|
}`}
|
|
title="Financial & Billing Administrator"
|
|
>
|
|
Billing
|
|
</button>
|
|
</div>
|
|
|
|
{/* Portal Mode Switcher */}
|
|
<div className="flex items-center bg-slate-100 p-0.5 rounded-lg border border-slate-200 text-xs font-semibold">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
clinicalAudio.playClick();
|
|
setPortalMode('clinic');
|
|
}}
|
|
className={`px-2.5 py-1 rounded-md flex items-center gap-1.5 transition text-[11px] ${
|
|
portalMode === 'clinic'
|
|
? 'bg-sky-700 text-white font-bold shadow-xs'
|
|
: 'text-slate-600 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
<Stethoscope className="w-3 h-3" />
|
|
<span>Doctor OS</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
clinicalAudio.playClick();
|
|
setPortalMode('patient');
|
|
}}
|
|
className={`px-2.5 py-1 rounded-md flex items-center gap-1.5 transition text-[11px] ${
|
|
portalMode === 'patient'
|
|
? 'bg-sky-700 text-white font-bold shadow-xs'
|
|
: 'text-slate-600 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
<Laptop className="w-3 h-3" />
|
|
<span>Patient Intake</span>
|
|
</button>
|
|
|
|
{/* More Views Dropdown */}
|
|
<div className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsMoreMenuOpen((prev) => !prev)}
|
|
className={`px-2 py-1 rounded-md flex items-center gap-1 text-[11px] transition ${
|
|
portalMode === 'superadmin' || portalMode === 'onboarding'
|
|
? 'bg-slate-900 text-white font-bold'
|
|
: 'text-slate-600 hover:text-slate-900 hover:bg-slate-200/60'
|
|
}`}
|
|
title="Administrative & Onboarding Views"
|
|
>
|
|
<span>{portalMode === 'superadmin' ? 'Admin' : portalMode === 'onboarding' ? 'Onboard' : 'More'}</span>
|
|
<ChevronDown className="w-3 h-3 opacity-60" />
|
|
</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
|
|
type="button"
|
|
onClick={() => {
|
|
clinicalAudio.playClick();
|
|
setPortalMode('onboarding');
|
|
setIsMoreMenuOpen(false);
|
|
}}
|
|
className={`w-full px-3 py-2 text-left text-xs font-semibold flex items-center gap-2 transition ${
|
|
portalMode === 'onboarding' ? 'bg-emerald-50 text-emerald-950 font-bold' : 'text-emerald-700 hover:bg-emerald-50'
|
|
}`}
|
|
>
|
|
<Sparkles className="w-3.5 h-3.5 text-amber-500" />
|
|
<span>+ Onboard Doctor (BAA)</span>
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pre-Launch / Pending BAA Banner */}
|
|
{portalMode === 'clinic' && activeTenant.baaStatus === 'pending' && (
|
|
<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">
|
|
<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="text-emerald-800">
|
|
Scheduling, calendars, and digital intake are active for testing. Ready for doctor BAA sign-off on go-live!
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
clinicalAudio.playClick();
|
|
setPortalMode('onboarding');
|
|
}}
|
|
className="px-3 py-1 bg-emerald-700 hover:bg-emerald-800 text-white font-bold rounded-lg transition shadow-xs flex items-center gap-1.5 shrink-0"
|
|
>
|
|
<ShieldCheck className="w-3.5 h-3.5" /> Sign BAA to Go Live
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tier 2: Sub-Tabs for Doctor Clinic OS (Cleanly Grouped, No Horizontal Overflow) */}
|
|
{portalMode === 'clinic' && (
|
|
<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
|
|
type="button"
|
|
onClick={() => setClinicTab('calendar')}
|
|
className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
|
|
clinicTab === 'calendar'
|
|
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
|
|
: 'text-slate-600 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
<Calendar className="w-3.5 h-3.5 text-sky-700" />
|
|
<span>Schedule</span>
|
|
</button>
|
|
|
|
{staffRole !== 'front_desk' ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => setClinicTab('charting')}
|
|
className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
|
|
clinicTab === 'charting'
|
|
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
|
|
: 'text-slate-600 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
<FileText className="w-3.5 h-3.5 text-sky-700" />
|
|
<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>
|
|
) : (
|
|
<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" /> Notes Locked
|
|
</span>
|
|
)}
|
|
|
|
{staffRole !== 'front_desk' && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setClinicTab('telehealth')}
|
|
className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
|
|
clinicTab === 'telehealth'
|
|
? 'bg-purple-50 text-purple-800 border border-purple-200 shadow-2xs font-bold'
|
|
: 'text-slate-600 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
<Video className="w-3.5 h-3.5 text-purple-600" />
|
|
<span>Telehealth</span>
|
|
</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 & Billing</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setClinicTab('retail')}
|
|
className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
|
|
clinicTab === 'retail'
|
|
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
|
|
: 'text-slate-600 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
<ShoppingBag className="w-3.5 h-3.5 text-sky-700" />
|
|
<span>Retail POS</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setClinicTab('memberships')}
|
|
className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
|
|
clinicTab === 'memberships'
|
|
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
|
|
: 'text-slate-600 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
<Repeat className="w-3.5 h-3.5 text-sky-700" />
|
|
<span>Memberships</span>
|
|
</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
|
|
type="button"
|
|
onClick={() => setClinicTab('retention')}
|
|
className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
|
|
clinicTab === 'retention'
|
|
? 'bg-amber-50 text-amber-800 border border-amber-200 shadow-2xs font-bold'
|
|
: 'text-slate-600 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
<Users className="w-3.5 h-3.5 text-amber-600" />
|
|
<span>Retention</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setClinicTab('growth')}
|
|
className={`px-2.5 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition text-xs ${
|
|
clinicTab === 'growth'
|
|
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
|
|
: 'text-slate-600 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
<TrendingUp className="w-3.5 h-3.5 text-emerald-600" />
|
|
<span>Growth & SEO</span>
|
|
</button>
|
|
</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>
|
|
|
|
{/* Main Container */}
|
|
<main className="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8">
|
|
{/* Clinic Executive Collections & Billing Pulse Bar */}
|
|
{portalMode === 'clinic' && (
|
|
<div className="mb-5 grid grid-cols-2 sm:grid-cols-4 gap-3">
|
|
<div className="bg-white border border-slate-200/90 rounded-xl p-3.5 shadow-2xs flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block">
|
|
Today's Collections
|
|
</span>
|
|
<span className="text-base font-extrabold text-slate-900 font-mono tracking-tight">$2,380.00</span>
|
|
</div>
|
|
<span className="text-[10px] font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded border border-emerald-200 font-mono">
|
|
+14.2% vs avg
|
|
</span>
|
|
</div>
|
|
|
|
<div className="bg-white border border-slate-200/90 rounded-xl p-3.5 shadow-2xs flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block">
|
|
Clean Claim Pass Rate
|
|
</span>
|
|
<span className="text-base font-extrabold text-emerald-700 font-mono tracking-tight">99.8%</span>
|
|
</div>
|
|
<span className="text-[10px] font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded border border-emerald-200 font-mono">
|
|
0 NCCI Denials
|
|
</span>
|
|
</div>
|
|
|
|
<div className="bg-white border border-slate-200/90 rounded-xl p-3.5 shadow-2xs flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block">
|
|
Average Days in A/R
|
|
</span>
|
|
<span className="text-base font-extrabold text-sky-800 font-mono tracking-tight">11.4 Days</span>
|
|
</div>
|
|
<span className="text-[10px] font-bold text-sky-700 bg-sky-50 px-2 py-0.5 rounded border border-sky-200 font-mono">
|
|
3x Industry Speed
|
|
</span>
|
|
</div>
|
|
|
|
<div className="bg-white border border-slate-200/90 rounded-xl p-3.5 shadow-2xs flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block">
|
|
Frontier AI Engine
|
|
</span>
|
|
<span className="text-base font-extrabold text-indigo-700 font-mono tracking-tight">GPT-5.4 • Claude 3.7</span>
|
|
</div>
|
|
<span className="text-[10px] font-bold text-indigo-700 bg-indigo-50 px-2 py-0.5 rounded border border-indigo-200 font-mono">
|
|
Active Scribe
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{portalMode === 'clinic' && (() => {
|
|
const tenantPatients = patients.filter((p) => !p.tenantId || p.tenantId === activeTenant.id);
|
|
const tenantSuperbills = superbills.filter((s) => !s.tenantId || s.tenantId === activeTenant.id);
|
|
|
|
return (
|
|
<div>
|
|
{clinicTab === 'calendar' && (
|
|
<CalendarView
|
|
appointments={appointments}
|
|
providers={activeProviders}
|
|
activeTenant={activeTenant}
|
|
patients={tenantPatients}
|
|
waitlistCount={waitlist.length}
|
|
pendingIntakes={pendingIntakes}
|
|
onSelectAppointment={handleSelectAppointment}
|
|
onUpdateStatus={handleUpdateAppointmentStatus}
|
|
onNewAppointmentClick={() => setPortalMode('patient')}
|
|
onQuickSchedule={handleQuickScheduleAppointment}
|
|
onOpenWaitlist={() => setIsWaitlistOpen(true)}
|
|
onStartEncounterFromIntake={handleStartEncounterFromIntake}
|
|
/>
|
|
)}
|
|
|
|
{clinicTab === 'charting' && staffRole !== 'front_desk' && (
|
|
<SoapChartEditor
|
|
patient={activePatient}
|
|
provider={activeProvider}
|
|
initialSoapNote={activeSoapNote}
|
|
onSaveSoapNote={handleSaveSoapNote}
|
|
onGenerateSuperbill={handleGenerateSuperbillFromNote}
|
|
onLaunchTelehealth={() => setClinicTab('telehealth')}
|
|
onBackToCalendar={() => setClinicTab('calendar')}
|
|
onOpenCourtVault={() => setIsCourtVaultOpen(true)}
|
|
/>
|
|
)}
|
|
|
|
{clinicTab === 'telehealth' && staffRole !== 'front_desk' && (
|
|
<TelehealthRoom
|
|
patient={activePatient}
|
|
provider={activeProvider}
|
|
onEndCall={handleEndTelehealthCall}
|
|
onClose={() => setClinicTab('calendar')}
|
|
/>
|
|
)}
|
|
|
|
{clinicTab === 'retail' && (
|
|
<RetailInventoryView
|
|
products={products}
|
|
activeTenant={activeTenant}
|
|
onUpdateStock={handleUpdateProductStock}
|
|
/>
|
|
)}
|
|
|
|
{clinicTab === 'memberships' && (
|
|
<MembershipsView
|
|
memberships={memberships}
|
|
packages={packages}
|
|
patients={tenantPatients}
|
|
activeTenant={activeTenant}
|
|
onEnrollPatient={handleEnrollPatientInMembership}
|
|
/>
|
|
)}
|
|
|
|
{clinicTab === 'billing' && (
|
|
<SuperbillView
|
|
superbill={activeSuperbill}
|
|
superbills={tenantSuperbills}
|
|
activeTenant={activeTenant}
|
|
onBack={() => setClinicTab('calendar')}
|
|
onSelectSuperbill={(sb) => setActiveSuperbill(sb)}
|
|
onMarkPaid={handleMarkPaid}
|
|
/>
|
|
)}
|
|
|
|
{clinicTab === 'retention' && (
|
|
<RetentionView
|
|
patients={tenantPatients}
|
|
activeTenant={activeTenant}
|
|
onSelectPatientChart={(patient) => {
|
|
setActivePatient(patient);
|
|
const existing = soapNotes.find((s) => s.patientId === patient.id);
|
|
setActiveSoapNote(existing);
|
|
setClinicTab('charting');
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{clinicTab === 'growth' && (
|
|
<ClinicGrowthView
|
|
activeTenant={activeTenant}
|
|
activeProvider={activeProvider}
|
|
onOpenBookingPortal={() => setPortalMode('patient')}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
})()}
|
|
|
|
{portalMode === 'patient' && (
|
|
<PatientPortalView
|
|
activeTenant={activeTenant}
|
|
providers={activeProviders}
|
|
onBookingComplete={handlePatientBookingComplete}
|
|
/>
|
|
)}
|
|
|
|
{portalMode === 'superadmin' && (
|
|
<SuperAdminView
|
|
tenants={tenants}
|
|
onAddTenant={handleAddTenant}
|
|
onSwitchTenant={handleSwitchTenant}
|
|
/>
|
|
)}
|
|
|
|
{portalMode === 'onboarding' && (
|
|
<DoctorOnboardingView
|
|
onCompleteOnboarding={handleCompleteOnboarding}
|
|
onCancel={() => setPortalMode('clinic')}
|
|
/>
|
|
)}
|
|
</main>
|
|
|
|
{/* Cancellation Waitlist Modal */}
|
|
<WaitlistModal
|
|
waitlist={waitlist}
|
|
isOpen={isWaitlistOpen}
|
|
onClose={() => setIsWaitlistOpen(false)}
|
|
onAutoFillPatient={handleAutoFillWaitlistPatient}
|
|
/>
|
|
|
|
{/* Court-Ready Legal & HIPAA Compliance Vault Modal */}
|
|
<CourtAuditVaultModal
|
|
isOpen={isCourtVaultOpen}
|
|
onClose={() => setIsCourtVaultOpen(false)}
|
|
activePatient={activePatient}
|
|
activeSoapNote={activeSoapNote}
|
|
activeTenant={activeTenant}
|
|
/>
|
|
|
|
{/* HIPAA Inactivity & Break-Glass Lockout Modal (45 CFR § 164.312(a)(2)(iii) & § 164.312(a)(2)(ii)) */}
|
|
<InactivityLockoutModal
|
|
isLocked={isTerminalLocked}
|
|
onUnlock={() => setIsTerminalLocked(false)}
|
|
onManualLock={() => setIsTerminalLocked(true)}
|
|
doctorName={activeProvider.name}
|
|
clinicName={activeTenant.name}
|
|
inactivityTimeoutMinutes={15}
|
|
/>
|
|
|
|
{/* Global Command Palette (Cmd+K) */}
|
|
<CommandPalette
|
|
isOpen={isCommandPaletteOpen}
|
|
onClose={() => setIsCommandPaletteOpen(false)}
|
|
patients={patients}
|
|
onSelectPatient={(p) => {
|
|
setActivePatient(p);
|
|
const existing = soapNotes.find((s) => s.patientId === p.id);
|
|
setActiveSoapNote(existing);
|
|
}}
|
|
onNavigateTab={(tab) => setClinicTab(tab)}
|
|
onOpenWaitlist={() => setIsWaitlistOpen(true)}
|
|
onSetStaffRole={(role) => {
|
|
setStaffRole(role);
|
|
if (role === 'front_desk' && (clinicTab === 'charting' || clinicTab === 'telehealth')) {
|
|
setClinicTab('calendar');
|
|
}
|
|
}}
|
|
onToggleAudio={handleToggleAudio}
|
|
audioEnabled={audioEnabled}
|
|
onOpenCourtVault={() => setIsCourtVaultOpen(true)}
|
|
onLockTerminal={() => setIsTerminalLocked(true)}
|
|
onOpenOnboarding={() => setPortalMode('onboarding')}
|
|
/>
|
|
|
|
{/* Hospital Clinical Toast Notification System */}
|
|
<ClinicalToastContainer
|
|
toasts={toasts}
|
|
onDismiss={handleDismissToast}
|
|
/>
|
|
|
|
{/* Hospital Footer */}
|
|
<footer className="bg-white border-t border-slate-200 py-4 px-6 text-center text-xs text-slate-500">
|
|
<div className="flex flex-col sm:flex-row items-center justify-between max-w-7xl mx-auto gap-2">
|
|
<span className="font-medium text-slate-600">
|
|
Mediusa Clinic OS • Complete Hospital-Grade Practice Management Platform
|
|
</span>
|
|
<span className="font-mono text-slate-500">
|
|
hello@aipilots.site • HIPAA Certified • Sub-30s Clinical Charting Standard
|
|
</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|