import { useEffect, useState } from 'react'; import { Plus, UserRound } from 'lucide-react'; import { studioClient } from '@/api/studioClient';
import PageTitle from '@/components/studio/PageTitle'; import PatientForm from '@/components/studio/PatientForm'; import EmptyState from '@/components/studio/EmptyState'; import StatusPill from '@/components/studio/StatusPill';
const Patients=()=>{const [items,setItems]=useState([]),[open,setOpen]=useState(false),[loading,setLoading]=useState(true);const load=()=>studioClient.entities.Patient.list('-created_date').then(setItems).finally(()=>setLoading(false));useEffect(()=>{load()},[]);const save=async v=>{const p=await studioClient.entities.Patient.create(v);await studioClient.entities.AuditLog.create({action:'patient_created',resource_type:'Patient',resource_id:p.id,details:`Created ${v.patient_code}`});setOpen(false);load()};return <div className="p-4 pb-24 lg:p-6">
<PageTitle eyebrow="Clinical records" title="Patient Management" description="Securely organize patient references and associated digital cases." action={<button onClick={()=>setOpen(true)} className="primary-button"><Plus/>Add patient</button>}/>{open&&<PatientForm onSave={save} onCancel={()=>setOpen(false)}/>}<div className="glass-panel overflow-hidden">{loading?<div className="p-8 text-xs text-slate-500">Loading patients…</div>:!items.length?<EmptyState title="No patients yet" detail="Add a patient to begin a digital case."/>:<div className="divide-y divide-white/[.05]">{items.map(p=><div key={p.id} className="flex items-center gap-4 p-4 hover:bg-white/[.02]"><div className="grid h-10 w-10 place-items-center rounded-xl bg-cyan-400/10 text-cyan-300"><UserRound className="h-4 w-4"/></div><div className="min-w-0 flex-1"><div className="text-sm text-white">{p.full_name}</div><div className="text-[10px] text-slate-600">{p.patient_code} · DOB {p.date_of_birth||'Not recorded'}</div></div><StatusPill>{p.status||'active'}</StatusPill></div>)}</div>}</div></div>};
export default Patients;