import { useEffect, useState } from 'react'; import { Plus, Boxes } from 'lucide-react'; import { studioClient } from '@/api/studioClient';
import PageTitle from '@/components/studio/PageTitle'; import CaseForm from '@/components/studio/CaseForm'; import EmptyState from '@/components/studio/EmptyState'; import StatusPill from '@/components/studio/StatusPill';
const Cases=()=>{const [items,setItems]=useState([]),[open,setOpen]=useState(false),[loading,setLoading]=useState(true);const load=()=>studioClient.entities.DentalCase.list('-created_date').then(setItems).finally(()=>setLoading(false));useEffect(()=>{load()},[]);const save=async v=>{const c=await studioClient.entities.DentalCase.create(v);await studioClient.entities.AuditLog.create({action:'case_created',resource_type:'DentalCase',resource_id:c.id,details:`Created ${v.case_number}`});setOpen(false);load()};return <div className="p-4 pb-24 lg:p-6">
<PageTitle eyebrow="Digital case management" title="Cases" description="Track scan, planning, review, manufacturing and quality-control stages." action={<button onClick={()=>setOpen(true)} className="primary-button"><Plus/>New case</button>}/>{open&&<CaseForm onSave={save} onCancel={()=>setOpen(false)}/>}<div className="glass-panel overflow-hidden">{loading?<div className="p-8 text-xs text-slate-500">Loading cases…</div>:!items.length?<EmptyState title="No digital cases" detail="Create a case to start the laboratory workflow."/>:<div className="divide-y divide-white/[.05]">{items.map(c=><div key={c.id} className="grid items-center gap-3 p-4 hover:bg-white/[.02] sm:grid-cols-[auto_1fr_auto_auto]"><div className="grid h-10 w-10 place-items-center rounded-xl bg-cyan-400/10"><Boxes className="h-4 w-4 text-cyan-300"/></div><div><div className="text-sm text-white">{c.case_number} · {c.patient_name}</div><div className="text-[10px] text-slate-600">{c.case_type} · Due {c.due_date||'Not set'}</div></div><StatusPill>{c.status}</StatusPill><span className="text-[10px] text-amber-300/70">Professional review required</span></div>)}</div>}</div></div>};
export default Cases;