196 lines
8.0 KiB
TypeScript
196 lines
8.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import {
|
|
AlertTriangle, Phone, X, Heart,
|
|
User, Droplet, AlertCircle, MapPin
|
|
} from 'lucide-react'
|
|
|
|
import { useApp } from '../provider'
|
|
|
|
interface EmergencyWidgetProps {
|
|
workspaceId: string
|
|
}
|
|
|
|
export function EmergencyWidget({ workspaceId }: EmergencyWidgetProps) {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [emergencyInfo, setEmergencyInfo] = useState<any>(null)
|
|
const { currentWorkspace } = useApp()
|
|
|
|
useEffect(() => {
|
|
const fetchInfo = async () => {
|
|
try {
|
|
const response = await fetch(`/api/workspaces/${workspaceId}/emergency-info`)
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setEmergencyInfo(data.info)
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to fetch emergency info:', err)
|
|
}
|
|
}
|
|
fetchInfo()
|
|
}, [workspaceId])
|
|
|
|
if (!emergencyInfo) return null
|
|
|
|
const hasAnyInfo = emergencyInfo.patientName ||
|
|
emergencyInfo.bloodType ||
|
|
emergencyInfo.allergies ||
|
|
emergencyInfo.medicalConditions ||
|
|
emergencyInfo.clinicPhone ||
|
|
emergencyInfo.emergencyPhone
|
|
|
|
if (!hasAnyInfo) return null
|
|
|
|
return (
|
|
<>
|
|
{/* Floating Emergency Button */}
|
|
<button
|
|
onClick={() => setIsOpen(true)}
|
|
className="fixed bottom-20 right-4 z-40 w-14 h-14 rounded-full bg-red-600 text-white shadow-lg hover:bg-red-700 transition-all hover:scale-110 flex items-center justify-center"
|
|
title="Emergency Info"
|
|
>
|
|
<AlertTriangle className="w-6 h-6" />
|
|
</button>
|
|
|
|
{/* Emergency Modal */}
|
|
{isOpen && (
|
|
<div className="fixed inset-0 bg-black/60 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4">
|
|
<div className="bg-white w-full max-w-md rounded-t-2xl sm:rounded-2xl max-h-[90vh] overflow-auto animate-in slide-in-from-bottom duration-200">
|
|
{/* Header */}
|
|
<div className="sticky top-0 bg-red-600 text-white p-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<AlertTriangle className="w-6 h-6" />
|
|
<h2 className="text-lg font-semibold">Emergency Info</h2>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsOpen(false)}
|
|
className="p-2 hover:bg-red-700 rounded-full"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-4 space-y-4">
|
|
{/* Quick Call Buttons */}
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{emergencyInfo.emergencyPhone && (
|
|
<a
|
|
href={`tel:${emergencyInfo.emergencyPhone}`}
|
|
className="bg-red-100 border border-red-200 rounded-xl p-4 text-center hover:bg-red-200 transition-colors"
|
|
>
|
|
<Phone className="w-8 h-8 text-red-600 mx-auto mb-2" />
|
|
<p className="font-semibold text-red-800">Emergency</p>
|
|
<p className="text-sm text-red-600">{emergencyInfo.emergencyPhone}</p>
|
|
</a>
|
|
)}
|
|
{emergencyInfo.clinicPhone && (
|
|
<a
|
|
href={`tel:${emergencyInfo.clinicPhone}`}
|
|
className="bg-blue-100 border border-blue-200 rounded-xl p-4 text-center hover:bg-blue-200 transition-colors"
|
|
>
|
|
<Heart className="w-8 h-8 text-blue-600 mx-auto mb-2" />
|
|
<p className="font-semibold text-blue-800">Clinic</p>
|
|
<p className="text-sm text-blue-600">{emergencyInfo.clinicPhone}</p>
|
|
</a>
|
|
)}
|
|
{emergencyInfo.physicianPhone && (
|
|
<a
|
|
href={`tel:${emergencyInfo.physicianPhone}`}
|
|
className="bg-green-100 border border-green-200 rounded-xl p-4 text-center hover:bg-green-200 transition-colors col-span-2"
|
|
>
|
|
<User className="w-8 h-8 text-green-600 mx-auto mb-2" />
|
|
<p className="font-semibold text-green-800">Primary Physician</p>
|
|
<p className="text-sm text-green-600">{emergencyInfo.physicianPhone}</p>
|
|
{emergencyInfo.primaryPhysician && (
|
|
<p className="text-xs text-green-500 mt-1">
|
|
Dr. {emergencyInfo.primaryPhysician}
|
|
</p>
|
|
)}
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
{/* Medical ID Card */}
|
|
<div className="bg-amber-50 border-2 border-amber-200 rounded-xl p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<AlertCircle className="w-5 h-5 text-amber-600" />
|
|
<h3 className="font-semibold text-amber-900">Medical ID</h3>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{emergencyInfo.patientName && (
|
|
<div className="flex items-center gap-2">
|
|
<User className="w-4 h-4 text-amber-600" />
|
|
<span className="text-amber-900">
|
|
<strong>Name:</strong> {emergencyInfo.patientName}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{emergencyInfo.bloodType && (
|
|
<div className="flex items-center gap-2">
|
|
<Droplet className="w-4 h-4 text-amber-600" />
|
|
<span className="text-amber-900">
|
|
<strong>Blood Type:</strong> {emergencyInfo.bloodType}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{emergencyInfo.allergies && (
|
|
<div className="flex items-start gap-2">
|
|
<AlertCircle className="w-4 h-4 text-red-500 mt-0.5" />
|
|
<div>
|
|
<span className="text-red-700 font-medium">Allergies:</span>
|
|
<p className="text-red-600">{emergencyInfo.allergies}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{emergencyInfo.medicalConditions && (
|
|
<div className="flex items-start gap-2">
|
|
<Heart className="w-4 h-4 text-amber-600 mt-0.5" />
|
|
<div>
|
|
<span className="text-amber-900 font-medium">Conditions:</span>
|
|
<p className="text-amber-800">{emergencyInfo.medicalConditions}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Current Medications */}
|
|
{emergencyInfo.medications?.length > 0 && (
|
|
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
|
<h3 className="font-semibold text-blue-900 mb-2">Current Medications</h3>
|
|
<ul className="space-y-1">
|
|
{emergencyInfo.medications.map((med: any) => (
|
|
<li key={med.id} className="text-sm text-blue-800">
|
|
• {med.name} {med.instructions && `(${med.instructions})`}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit Button */}
|
|
{currentWorkspace.role !== 'VIEWER' && (
|
|
<a
|
|
href="/settings/emergency"
|
|
className="block w-full py-3 text-center text-secondary-600 hover:text-secondary-900 text-sm"
|
|
>
|
|
Edit Emergency Information
|
|
</a>
|
|
)}
|
|
|
|
{/* Disclaimer */}
|
|
<p className="text-xs text-secondary-400 text-center">
|
|
This information is for emergency use only.
|
|
Always call 000 (AU) or your local emergency number in a life-threatening emergency.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|