{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "telehealth-video-room", "title": "Telehealth Video Room", "type": "registry:page", "files": [ { "path": "packages/registry-react/blocks/telehealth-video-room/TelehealthVideoRoom.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n AlertCircle,\n Check,\n CheckCircle2,\n ChevronRight,\n Clock,\n Download,\n ExternalLink,\n Eye,\n FileCheck,\n FileText,\n Heart,\n HeartPulse,\n Lock,\n Maximize2,\n Mic,\n MicOff,\n MoreVertical,\n PanelRightClose,\n PanelRightOpen,\n Paperclip,\n PhoneOff,\n Pill,\n Plus,\n RefreshCw,\n Send,\n Share2,\n ShieldCheck,\n Sliders,\n Thermometer,\n UploadCloud,\n User,\n Video,\n VideoOff,\n Volume2,\n Wifi,\n X,\n MessageSquare,\n Settings,\n} from 'lucide-react'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\nimport { Textarea } from '@/components/ui/textarea'\n\ninterface PrescriptionItem {\n id: string\n drugName: string\n dosage: string\n sig: string\n quantity: string\n refills: number\n pharmacy: string\n timestamp: string\n status: 'transmitted' | 'pending'\n rxNumber: string\n}\n\ninterface ChatMessage {\n id: string\n sender: 'doctor' | 'patient'\n senderName: string\n text: string\n timestamp: string\n attachment?: {\n name: string\n size: string\n type: 'pdf' | 'image'\n }\n}\n\nconst drugOptions = [\n {\n id: 'metoprolol',\n name: 'Metoprolol Succinate ER',\n defaultDosage: '25mg PO Daily (Morning)',\n defaultQty: '30 tablets',\n refills: '2',\n },\n {\n id: 'propranolol',\n name: 'Propranolol HCl',\n defaultDosage: '10mg PO BID (Twice Daily)',\n defaultQty: '60 tablets',\n refills: '1',\n },\n {\n id: 'diltiazem',\n name: 'Diltiazem HCl Extended Release',\n defaultDosage: '120mg PO Daily',\n defaultQty: '30 capsules',\n refills: '3',\n },\n { id: 'lisinopril', name: 'Lisinopril', defaultDosage: '10mg PO Daily', defaultQty: '30 tablets', refills: '3' },\n]\n\nexport function TelehealthVideoRoom() {\n // Interactive Call State\n const [isMuted, setIsMuted] = React.useState(false)\n const [isCameraOff, setIsCameraOff] = React.useState(false)\n const [isScreenSharing, setIsScreenSharing] = React.useState(false)\n const [isSidebarOpen, setIsSidebarOpen] = React.useState(true)\n const [activeTab, setActiveTab] = React.useState<'notes' | 'chat' | 'vitals'>('notes')\n const [isCallEnded, setIsCallEnded] = React.useState(false)\n const [showSettingsModal, setShowSettingsModal] = React.useState(false)\n const [callDurationSeconds, setCallDurationSeconds] = React.useState(868) // 14:28\n const [unreadChatCount, setUnreadChatCount] = React.useState(0)\n const [lastVitalsUpdate, setLastVitalsUpdate] = React.useState('Just now')\n const [isRefreshingVitals, setIsRefreshingVitals] = React.useState(false)\n\n // Timer effect\n React.useEffect(() => {\n if (isCallEnded) return\n const interval = setInterval(() => {\n setCallDurationSeconds((prev) => prev + 1)\n }, 1000)\n return () => clearInterval(interval)\n }, [isCallEnded])\n\n const formattedDuration = React.useMemo(() => {\n const mins = Math.floor(callDurationSeconds / 60)\n const secs = callDurationSeconds % 60\n return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`\n }, [callDurationSeconds])\n\n // SOAP Notes State\n const [chiefComplaint] = React.useState(\n 'Recurrent palpitations, sudden resting tachycardia (120-140 bpm), and lightheadedness over the past 2 weeks following morning coffee.',\n )\n const [soapSubjective] = React.useState(\n 'Patient reports 4 distinct episodes in past 14 days. Episodes last ~5-10 minutes with abrupt onset and offset. No syncope, mild lightheadedness. Denies chest pressure or radiating pain. Reports high work stress and 3-4 espresso shots daily.',\n )\n const [soapObjective] = React.useState(\n 'In-call vitals: HR 74 bpm regular sinus, BP 128/82 mmHg, SpO2 98%. Telemetry strip transmitted via Smart Hub shows NSR with infrequent PACs. No ST elevation or ischemic changes.',\n )\n const [soapAssessment] = React.useState(\n '1. Paroxysmal Supraventricular Tachycardia (PSVT) vs. Benign Premature Atrial Contractions (PACs) secondary to high caffeine consumption and sympathetic stress.\\n2. Stage 1 Essential Hypertension - well controlled on current regimen.',\n )\n const [soapPlan, setSoapPlan] = React.useState(\n '1. Ordered 14-day continuous Holter monitor patch.\\n2. Titrate Metoprolol Succinate ER to 25mg PO daily.\\n3. Restrict caffeine to ≤1 cup/day; hydration goal 2.5L daily.\\n4. Follow-up video consultation in 3 weeks or ASAP if syncope occurs.',\n )\n\n // Prescription Generator State\n const [selectedDrugPreset, setSelectedDrugPreset] = React.useState('metoprolol')\n const [customDosage, setCustomDosage] = React.useState('25mg PO Daily in Morning')\n const [customQuantity, setCustomQuantity] = React.useState('30 tablets')\n const [customRefills, setCustomRefills] = React.useState('2')\n const [rxSuccessMessage, setRxSuccessMessage] = React.useState('')\n const [prescriptions, setPrescriptions] = React.useState([\n {\n id: 'rx-1',\n drugName: 'Metoprolol Succinate ER 25mg',\n dosage: 'Take 1 tablet by mouth daily in the morning',\n sig: '1 tab PO QAM',\n quantity: '30 tablets',\n refills: 2,\n pharmacy: 'CVS Pharmacy #4021 (Austin, TX)',\n timestamp: '10:24 AM',\n status: 'transmitted',\n rxNumber: 'RX-994182',\n },\n ])\n\n function handleSelectDrugPreset(drugId: string) {\n setSelectedDrugPreset(drugId)\n const found = drugOptions.find((d) => d.id === drugId)\n if (found) {\n setCustomDosage(found.defaultDosage)\n setCustomQuantity(found.defaultQty)\n setCustomRefills(found.refills)\n }\n }\n\n function handleGeneratePrescription() {\n const current = drugOptions.find((d) => d.id === selectedDrugPreset)\n const drugName = current ? current.name : 'Custom Medication'\n const newRx: PrescriptionItem = {\n id: `rx-${Date.now()}`,\n drugName: `${drugName} (${customDosage})`,\n dosage: customDosage,\n sig: `Take as directed: ${customDosage}`,\n quantity: customQuantity,\n refills: parseInt(customRefills) || 1,\n pharmacy: 'CVS Pharmacy #4021 (Austin, TX)',\n timestamp: 'Just now',\n status: 'transmitted',\n rxNumber: `RX-${Math.floor(100000 + Math.random() * 900000)}`,\n }\n setPrescriptions((prev) => [newRx, ...prev])\n setRxSuccessMessage(`e-Rx signed & securely transmitted to CVS Pharmacy #4021 (${newRx.rxNumber})`)\n setTimeout(() => {\n setRxSuccessMessage('')\n }, 4500)\n }\n\n // Chat State\n const [chatInput, setChatInput] = React.useState('')\n const [chatMessages, setChatMessages] = React.useState([\n {\n id: 'msg-1',\n sender: 'doctor',\n senderName: 'Dr. Sarah Jenkins, MD',\n text: 'Hello David! I have your chart open and we are receiving your continuous telemetry stream. How are you feeling right now?',\n timestamp: '10:15 AM',\n },\n {\n id: 'msg-2',\n sender: 'patient',\n senderName: 'David Chen (You)',\n text: 'Good morning Dr. Jenkins. Feeling better than yesterday, but had another fluttering sensation around 8 AM after my second cup of coffee.',\n timestamp: '10:17 AM',\n },\n {\n id: 'msg-3',\n sender: 'patient',\n senderName: 'David Chen (You)',\n text: 'I captured the rhythm episode on my smart watch and exported the 30-second single lead PDF strip here.',\n timestamp: '10:18 AM',\n attachment: {\n name: 'Apple_Watch_ECG_Lead_I_2026.pdf',\n size: '1.4 MB · PDF ECG Report',\n type: 'pdf',\n },\n },\n {\n id: 'msg-4',\n sender: 'doctor',\n senderName: 'Dr. Sarah Jenkins, MD',\n text: 'Thank you, David! Reviewing the strip now. The baseline is normal sinus rhythm with occasional isolated PACs. This matches our telemetry.',\n timestamp: '10:20 AM',\n },\n ])\n\n function handleSendMessage() {\n const text = chatInput.trim()\n if (!text) return\n setChatMessages((prev) => [\n ...prev,\n {\n id: `msg-${Date.now()}`,\n sender: 'patient',\n senderName: 'David Chen (You)',\n text,\n timestamp: 'Just now',\n },\n ])\n setChatInput('')\n\n // Simulated provider automated acknowledgment\n setTimeout(() => {\n if (!isCallEnded) {\n setChatMessages((prev) => [\n ...prev,\n {\n id: `msg-doc-${Date.now()}`,\n sender: 'doctor',\n senderName: 'Dr. Sarah Jenkins, MD',\n text: 'Noted! I have added this observation into your encounter notes and prescription schedule.',\n timestamp: 'Just now',\n },\n ])\n }\n }, 1200)\n }\n\n function handleOpenTab(tab: 'notes' | 'chat' | 'vitals') {\n setActiveTab(tab)\n setIsSidebarOpen(true)\n }\n\n function handleEndCall() {\n setIsCallEnded(true)\n }\n\n function handleRestartCall() {\n setIsCallEnded(false)\n setCallDurationSeconds(0)\n }\n\n function handleRefreshVitals() {\n setIsRefreshingVitals(true)\n setTimeout(() => {\n setIsRefreshingVitals(false)\n setLastVitalsUpdate('Just now')\n }, 800)\n }\n\n return (\n
\n {/* Top Room Bar */}\n
\n
\n {/* Call Metadata & HIPAA Badge */}\n
\n
\n \n {!isCallEnded && (\n \n )}\n \n \n
\n \n {isCallEnded ? 'Call Ended' : formattedDuration}\n
\n
\n\n \n\n {/* HIPAA Encrypted Connection Badge */}\n \n \n HIPAA Encrypted · AES-256\n \n\n \n\n {/* Doctor & Patient Context Strip */}\n
\n
\n Provider:\n Dr. Sarah Jenkins, MD\n (Cardiology)\n
\n
\n Patient:\n David Chen\n (MRN-88412)\n
\n
\n
\n\n {/* Header Actions: End Call & Network Status */}\n
\n \n\n {!isCallEnded ? (\n \n \n End Consultation\n \n ) : (\n \n \n Reconnect Call\n \n )}\n
\n
\n
\n\n {/* Main Video Room Grid (Video Canvas + Collapsible Workspace) */}\n
\n {/* Video Call Canvas (Center 8 cols when open, full 12 cols when collapsed) */}\n \n {/* Overlay Top: Provider Status & Watermark */}\n
\n {/* Doctor Name & Active Speaking Indicator */}\n
\n \n SJ\n \n
\n
\n Dr. Sarah Jenkins, MD\n \n Attending\n \n
\n
\n
\n \n
\n \n \n \n \n
\n Speaking\n
\n ·\n St. Jude Telehealth Clinic\n
\n
\n
\n\n {/* Feed Encryption & Signal Badge */}\n
\n \n 1080p 60fps · BAA Protected\n
\n
\n\n {/* Main Video Placeholder Canvas (Simulated high-res clinical video stream) */}\n
\n {/* Background radial glow */}\n
\n\n
\n {/* Simulated Video Avatar Portrait with active ring */}\n
\n
\n
\n \n \n SJ\n \n \n
\n \n
\n\n {/* Provider Live Status Title */}\n
\n

\n Dr. Sarah Jenkins, MD\n

\n

\n Department of Cardiovascular Medicine · Clinical Telehealth Encounter\n

\n
\n\n {/* Video Stream Diagnostic Watermark */}\n
\n \n Session: #TH-9021-TX\n ·\n Latency: 24ms (0% loss)\n
\n
\n
\n\n {/* Picture-in-Picture Self Video Tile (Patient View - Bottom Right) */}\n
\n {!isCameraOff ? (\n
\n
\n \n You (720p)\n \n \n {isMuted ? : }\n
\n
\n\n
\n \n DC\n \n David Chen\n
\n
\n ) : (\n
\n \n Camera Off\n
\n )}\n
\n\n {/* Floating Call Controls Bar (Bottom Center) */}\n
\n
\n {/* Mute / Unmute Button */}\n setIsMuted(!isMuted)}\n >\n {isMuted ? : }\n \n\n {/* Video On / Off Button */}\n setIsCameraOff(!isCameraOff)}\n >\n {isCameraOff ? :
\n
\n\n {/* Quick Settings Flyout / Drawer Banner */}\n {showSettingsModal && (\n
\n
\n

AV Devices & HIPAA

\n setShowSettingsModal(false)}\n >\n \n \n
\n
\n
\n \n
\n Default - MacBook Pro Mic (CoreAudio)\n
\n
\n
\n \n
\n FaceTime HD Camera (1080p)\n
\n
\n
\n \n
\n Studio Display Speakers\n
\n
\n
\n
\n )}\n \n\n {/* Collapsible Side Workspace (Right 1/3 when open) */}\n {isSidebarOpen && (\n
\n ))}\n
\n\n {/* Chat Composer */}\n
\n
\n setChatInput(e.target.value)}\n placeholder=\"Type encrypted message to Dr. Jenkins...\"\n className=\"h-8 text-xs\"\n onKeyDown={(e) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault()\n handleSendMessage()\n }\n }}\n />\n \n \n \n \n \n Send\n \n
\n
\n Press Enter to send\n BAA Encrypted\n
\n
\n \n\n {/* TAB 3: Patient Vitals & Telemetry */}\n \n {/* Telemetry Stream Banner */}\n
\n
\n \n \n \n \n
\n

Live Telemetry Feed

\n

BLE Medical Hub · Updated {lastVitalsUpdate}

\n
\n
\n \n \n Refresh\n \n
\n\n {/* Vitals Telemetry Grid */}\n
\n {/* Blood Pressure */}\n \n
\n Blood Pressure\n \n Normal\n \n
\n
\n
\n 128/82\n mmHg\n
\n

Target: <130/85 mmHg

\n
\n
\n Smart Cuff\n MAP: 97\n
\n \n\n {/* Heart Rate */}\n \n
\n \n \n Heart Rate\n \n \n NSR\n \n
\n
\n
\n 74\n bpm\n
\n

Resting (Range: 68-88)

\n
\n
\n Rhythm: Sinus\n Regular\n
\n \n\n {/* Oxygen Saturation (SpO2) */}\n \n
\n Oxygen (SpO2)\n \n Optimal\n \n
\n
\n
\n 98%\n Ambient\n
\n

Room Air (FiO2 21%)

\n
\n
\n PulseOx Probe\n PI: 4.8%\n
\n \n\n {/* Body Temperature */}\n \n
\n \n \n Temperature\n \n \n Afebrile\n \n
\n
\n
\n 98.4°\n F\n
\n

36.9°C (Temporal Scan)

\n
\n
\n Scanner Hub\n Normal\n
\n \n\n {/* Respiration Rate */}\n \n
\n Respiration\n \n Eupneic\n \n
\n
\n
\n 16\n br/min\n
\n

Range: 12-20 normal

\n
\n
\n Chest Sensor\n Steady\n
\n \n\n {/* Fasting Blood Glucose */}\n \n
\n Glucose\n \n Normal\n \n
\n
\n
\n 94\n mg/dL\n
\n

Fasting 3.5h post-meal

\n
\n
\n Continuous CGM\n In Range\n
\n \n
\n\n {/* Physician Vitals Summary */}\n
\n
\n \n Physician Baseline Parameter Assessment\n
\n

\n All live telemetry telemetry values remain within normal hemodynamic thresholds. Patient exhibits no\n signs of acute decompensation or malignant arrhythmias during the video encounter.\n

\n
\n \n \n \n )}\n
\n \n )\n}\n\nexport default TelehealthVideoRoom\n", "type": "registry:page", "target": "~/components/blocks/TelehealthVideoRoom.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/tabs.json", "https://uipkge.dev/r/react/textarea.json" ], "description": "HIPAA-compliant telehealth video consultation room with live telemetry vitals, clinical SOAP notes, in-call encrypted chat, and prescription generator drawer.", "categories": [ "healthcare", "app", "communication" ] }