406 lines
13 KiB
TypeScript
406 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import {
|
|
Search,
|
|
Calendar,
|
|
FileText,
|
|
Video,
|
|
ShoppingBag,
|
|
Repeat,
|
|
DollarSign,
|
|
Users,
|
|
Activity,
|
|
User,
|
|
Shield,
|
|
Volume2,
|
|
VolumeX,
|
|
X,
|
|
Sparkles,
|
|
Command,
|
|
Scale,
|
|
Lock,
|
|
} from 'lucide-react';
|
|
import { Patient, StaffRole } from '@/types/clinical';
|
|
import { clinicalAudio } from '@/lib/clinical-audio';
|
|
|
|
export interface CommandItem {
|
|
id: string;
|
|
category: 'Patients' | 'Navigation' | 'Actions' | 'Staff Role' | 'Settings';
|
|
title: string;
|
|
subtitle?: string;
|
|
icon: React.ReactNode;
|
|
badge?: string;
|
|
action: () => void;
|
|
}
|
|
|
|
interface CommandPaletteProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
patients: Patient[];
|
|
onSelectPatient: (p: Patient) => void;
|
|
onNavigateTab: (tab: 'calendar' | 'charting' | 'telehealth' | 'retail' | 'memberships' | 'billing' | 'retention') => void;
|
|
onOpenWaitlist: () => void;
|
|
onSetStaffRole: (role: StaffRole) => void;
|
|
onToggleAudio: () => void;
|
|
audioEnabled: boolean;
|
|
onOpenCourtVault?: () => void;
|
|
onLockTerminal?: () => void;
|
|
}
|
|
|
|
export const CommandPalette: React.FC<CommandPaletteProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
patients,
|
|
onSelectPatient,
|
|
onNavigateTab,
|
|
onOpenWaitlist,
|
|
onSetStaffRole,
|
|
onToggleAudio,
|
|
audioEnabled,
|
|
onOpenCourtVault,
|
|
onLockTerminal,
|
|
}) => {
|
|
const [query, setQuery] = useState('');
|
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const listRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setTimeout(() => inputRef.current?.focus(), 50);
|
|
setQuery('');
|
|
setSelectedIndex(0);
|
|
clinicalAudio.playClick();
|
|
}
|
|
}, [isOpen]);
|
|
|
|
// Generate commands list
|
|
const baseCommands: CommandItem[] = [
|
|
// Patients
|
|
...patients.map((p) => ({
|
|
id: `patient-${p.id}`,
|
|
category: 'Patients' as const,
|
|
title: `${p.firstName} ${p.lastName}`,
|
|
subtitle: `${p.carePlan.targetCondition} • Visit ${p.carePlan.completedVisits}/${p.carePlan.totalVisits}`,
|
|
badge: p.status === 'dropout_risk' ? 'Dropout Risk' : 'Active Patient',
|
|
icon: <User className="w-4 h-4 text-sky-600" />,
|
|
action: () => {
|
|
onSelectPatient(p);
|
|
onNavigateTab('charting');
|
|
onClose();
|
|
},
|
|
})),
|
|
|
|
// Navigation
|
|
{
|
|
id: 'nav-calendar',
|
|
category: 'Navigation',
|
|
title: 'Schedule & Operatory Calendar',
|
|
subtitle: 'View live provider schedules and patient arrival states',
|
|
icon: <Calendar className="w-4 h-4 text-sky-600" />,
|
|
action: () => {
|
|
onNavigateTab('calendar');
|
|
onClose();
|
|
},
|
|
},
|
|
{
|
|
id: 'nav-charting',
|
|
category: 'Navigation',
|
|
title: 'Clinical SOAP Charting & Spine Visualizer',
|
|
subtitle: '2D anatomical subluxation clicks and ambient AI scribe',
|
|
icon: <FileText className="w-4 h-4 text-emerald-600" />,
|
|
action: () => {
|
|
onNavigateTab('charting');
|
|
onClose();
|
|
},
|
|
},
|
|
{
|
|
id: 'nav-telehealth',
|
|
category: 'Navigation',
|
|
title: 'Virtual Telehealth Consultation Suite',
|
|
subtitle: 'HIPAA-compliant video consult with live side-by-side notes',
|
|
icon: <Video className="w-4 h-4 text-blue-600" />,
|
|
action: () => {
|
|
onNavigateTab('telehealth');
|
|
onClose();
|
|
},
|
|
},
|
|
{
|
|
id: 'nav-retail',
|
|
category: 'Navigation',
|
|
title: 'Front-Desk Supplement & Retail POS',
|
|
subtitle: 'Stock inventory, barcode search, Stripe terminal checkout',
|
|
icon: <ShoppingBag className="w-4 h-4 text-amber-600" />,
|
|
action: () => {
|
|
onNavigateTab('retail');
|
|
onClose();
|
|
},
|
|
},
|
|
{
|
|
id: 'nav-memberships',
|
|
category: 'Navigation',
|
|
title: 'Recurring Memberships & Visit Packages',
|
|
subtitle: '$89/mo monthly wellness club and pre-paid visit blocks',
|
|
icon: <Repeat className="w-4 h-4 text-emerald-600" />,
|
|
action: () => {
|
|
onNavigateTab('memberships');
|
|
onClose();
|
|
},
|
|
},
|
|
{
|
|
id: 'nav-billing',
|
|
category: 'Navigation',
|
|
title: 'Medical Superbill & CMS-1500 Billing',
|
|
subtitle: 'Generate reimbursement claim PDF and Stripe copay checkout',
|
|
icon: <DollarSign className="w-4 h-4 text-slate-700" />,
|
|
action: () => {
|
|
onNavigateTab('billing');
|
|
onClose();
|
|
},
|
|
},
|
|
{
|
|
id: 'nav-retention',
|
|
category: 'Navigation',
|
|
title: 'Care Plan Retention & Dropout Radar',
|
|
subtitle: 'Autonomous recovery SMS dispatch for lagging patients',
|
|
icon: <Users className="w-4 h-4 text-rose-600" />,
|
|
action: () => {
|
|
onNavigateTab('retention');
|
|
onClose();
|
|
},
|
|
},
|
|
|
|
// Fast Actions
|
|
{
|
|
id: 'action-waitlist',
|
|
category: 'Actions',
|
|
title: 'Cancellation Waitlist Queue',
|
|
subtitle: 'Dispatch SMS alerts to queued patients for open slots',
|
|
badge: 'Waitlist',
|
|
icon: <Activity className="w-4 h-4 text-amber-600" />,
|
|
action: () => {
|
|
onOpenWaitlist();
|
|
onClose();
|
|
},
|
|
},
|
|
{
|
|
id: 'action-court-vault',
|
|
category: 'Actions',
|
|
title: 'Court-Ready Legal & HIPAA Compliance Vault',
|
|
subtitle: '21 CFR Part 11 cryptographic hash seal, non-repudiation, chain-of-custody audit',
|
|
badge: '21 CFR Part 11',
|
|
icon: <Scale className="w-4 h-4 text-sky-600" />,
|
|
action: () => {
|
|
if (onOpenCourtVault) onOpenCourtVault();
|
|
onClose();
|
|
},
|
|
},
|
|
{
|
|
id: 'action-lock-terminal',
|
|
category: 'Actions',
|
|
title: 'Lock Clinical Terminal (HIPAA Auto-Logoff)',
|
|
subtitle: 'Instant exam room screen lock pursuant to 45 CFR § 164.312(a)(2)(iii) (Cmd+L)',
|
|
badge: 'HIPAA Lock',
|
|
icon: <Lock className="w-4 h-4 text-rose-600" />,
|
|
action: () => {
|
|
if (onLockTerminal) onLockTerminal();
|
|
onClose();
|
|
},
|
|
},
|
|
|
|
// Staff Roles
|
|
{
|
|
id: 'role-doctor',
|
|
category: 'Staff Role',
|
|
title: 'Switch Role: Doctor (D.C.)',
|
|
subtitle: 'Full access to clinical SOAP, 2D spine, AI scribe & telehealth',
|
|
icon: <Shield className="w-4 h-4 text-sky-600" />,
|
|
action: () => {
|
|
onSetStaffRole('doctor');
|
|
onClose();
|
|
},
|
|
},
|
|
{
|
|
id: 'role-front-desk',
|
|
category: 'Staff Role',
|
|
title: 'Switch Role: Front Desk (HIPAA-Safe Mode)',
|
|
subtitle: 'Locks medical charts; grants schedule, POS & waitlist access',
|
|
icon: <Shield className="w-4 h-4 text-emerald-600" />,
|
|
action: () => {
|
|
onSetStaffRole('front_desk');
|
|
onClose();
|
|
},
|
|
},
|
|
{
|
|
id: 'role-billing-admin',
|
|
category: 'Staff Role',
|
|
title: 'Switch Role: Billing Administrator',
|
|
subtitle: 'Direct focus on superbills, claims, packages & recurring clubs',
|
|
icon: <Shield className="w-4 h-4 text-indigo-600" />,
|
|
action: () => {
|
|
onSetStaffRole('billing_admin');
|
|
onClose();
|
|
},
|
|
},
|
|
|
|
// Settings
|
|
{
|
|
id: 'setting-audio',
|
|
category: 'Settings',
|
|
title: audioEnabled ? 'Mute Tactile Clinical Audio' : 'Enable Tactile Clinical Audio',
|
|
subtitle: 'Web Audio synthesizer feedback for spine clicks and payments',
|
|
icon: audioEnabled ? <VolumeX className="w-4 h-4 text-slate-600" /> : <Volume2 className="w-4 h-4 text-emerald-600" />,
|
|
action: () => {
|
|
onToggleAudio();
|
|
onClose();
|
|
},
|
|
},
|
|
];
|
|
|
|
const filtered = baseCommands.filter((cmd) => {
|
|
const q = query.toLowerCase();
|
|
return (
|
|
cmd.title.toLowerCase().includes(q) ||
|
|
(cmd.subtitle && cmd.subtitle.toLowerCase().includes(q)) ||
|
|
cmd.category.toLowerCase().includes(q)
|
|
);
|
|
});
|
|
|
|
// Handle keyboard navigation inside the list
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
setSelectedIndex((prev) => (prev + 1) % (filtered.length || 1));
|
|
clinicalAudio.playClick();
|
|
} else if (e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
setSelectedIndex((prev) => (prev - 1 + filtered.length) % (filtered.length || 1));
|
|
clinicalAudio.playClick();
|
|
} else if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
if (filtered[selectedIndex]) {
|
|
clinicalAudio.playSuccess();
|
|
filtered[selectedIndex].action();
|
|
}
|
|
} else if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Command Palette"
|
|
className="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4 bg-slate-900/40 backdrop-blur-sm transition-all"
|
|
onClick={(e) => {
|
|
if (e.target === e.currentTarget) onClose();
|
|
}}
|
|
>
|
|
<div
|
|
className="w-full max-w-xl bg-white rounded-2xl shadow-2xl border border-slate-200 overflow-hidden transform transition-all flex flex-col max-h-[80vh]"
|
|
onKeyDown={handleKeyDown}
|
|
>
|
|
{/* Search Header */}
|
|
<div className="flex items-center px-4 py-3.5 border-b border-slate-100 bg-slate-50/50">
|
|
<Search className="w-5 h-5 text-slate-400 mr-3 shrink-0" />
|
|
<input
|
|
ref={inputRef}
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => {
|
|
setQuery(e.target.value);
|
|
setSelectedIndex(0);
|
|
}}
|
|
placeholder="Type a patient name, clinical command, or view... (Cmd+K)"
|
|
className="w-full text-sm text-slate-800 placeholder-slate-400 bg-transparent border-none focus:outline-none focus:ring-0"
|
|
/>
|
|
<kbd className="hidden sm:inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-mono font-medium text-slate-400 bg-slate-100 border border-slate-200 rounded">
|
|
ESC
|
|
</kbd>
|
|
</div>
|
|
|
|
{/* Results List */}
|
|
<div ref={listRef} className="overflow-y-auto p-2 divide-y divide-slate-50 space-y-1">
|
|
{filtered.length === 0 ? (
|
|
<div className="py-12 text-center text-slate-400 text-xs">
|
|
No matching patients or clinical commands found for “{query}”
|
|
</div>
|
|
) : (
|
|
filtered.map((item, idx) => {
|
|
const isSelected = idx === selectedIndex;
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
onClick={() => {
|
|
clinicalAudio.playSuccess();
|
|
item.action();
|
|
}}
|
|
onMouseEnter={() => setSelectedIndex(idx)}
|
|
className={`w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-left transition-all ${
|
|
isSelected ? 'bg-sky-50/80 border border-sky-200' : 'hover:bg-slate-50 border border-transparent'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
<div
|
|
className={`p-2 rounded-lg shrink-0 ${
|
|
isSelected ? 'bg-white shadow-xs' : 'bg-slate-100'
|
|
}`}
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-semibold text-slate-800 truncate">
|
|
{item.title}
|
|
</span>
|
|
{item.badge && (
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-slate-100 text-slate-600">
|
|
{item.badge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{item.subtitle && (
|
|
<p className="text-[11px] text-slate-500 truncate mt-0.5">
|
|
{item.subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<span className="text-[10px] font-medium text-slate-400 uppercase tracking-wider shrink-0 ml-2">
|
|
{item.category}
|
|
</span>
|
|
</button>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer shortcuts helper */}
|
|
<div className="px-4 py-2.5 bg-slate-50 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-500">
|
|
<div className="flex items-center gap-3">
|
|
<span className="flex items-center gap-1">
|
|
<kbd className="px-1.5 py-0.5 bg-white border border-slate-200 rounded font-mono text-[9px]">↑</kbd>
|
|
<kbd className="px-1.5 py-0.5 bg-white border border-slate-200 rounded font-mono text-[9px]">↓</kbd>
|
|
Navigate
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<kbd className="px-1.5 py-0.5 bg-white border border-slate-200 rounded font-mono text-[9px]">↵</kbd>
|
|
Select
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-[10px] text-sky-700 font-medium">
|
|
<Sparkles className="w-3 h-3" /> Mediusa Quick Command Hub
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|