feat: polish UX +5% with Cmd+K Command Palette, Web Audio tactile feedback, Patient Clinical Vitals HUD, Fast Macros & Toasts
This commit is contained in:
@@ -0,0 +1,375 @@
|
||||
'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,
|
||||
} 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;
|
||||
}
|
||||
|
||||
export const CommandPalette: React.FC<CommandPaletteProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
patients,
|
||||
onSelectPatient,
|
||||
onNavigateTab,
|
||||
onOpenWaitlist,
|
||||
onSetStaffRole,
|
||||
onToggleAudio,
|
||||
audioEnabled,
|
||||
}) => {
|
||||
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();
|
||||
},
|
||||
},
|
||||
|
||||
// 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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user