import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { EmptyState } from '@/components/ui/empty-state'; import { Input } from '@/components/ui/input'; import { Pagination } from '@/components/ui/pagination'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Head, Link, usePage } from '@inertiajs/react'; import { PencilIcon, PlusIcon, Trash2Icon } from 'lucide-react'; import { useEffect, useState } from 'react'; import { Toaster, toast } from 'sonner'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '@/components/ui/alert-dialog'; interface Patient { id: string; medical_record_number: string; name: string; gender: string; nik: string; birth_date: string; birth_place: string; phone_number: string; blood_type: string; religion: string; is_active: boolean; created_at: string; } interface PageProps { patients: { data: Patient[]; links: Array<{ url: string | null; label: string; active: boolean; }>; }; status?: string; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Patients', href: '/patients' }, ]; export default function PatientIndex() { const { patients, status } = usePage().props; const [searchTerm, setSearchTerm] = useState(''); const [filteredPatients, setFilteredPatients] = useState(patients.data); useEffect(() => { if (status) { toast.success(status); } }, [status]); useEffect(() => { const results = patients.data.filter(patient => Object.values(patient).some( value => value && value.toString().toLowerCase().includes(searchTerm.toLowerCase()) ) ); setFilteredPatients(results); }, [searchTerm, patients.data]); return (

Data Pasien

setSearchTerm(e.target.value)} />
{filteredPatients.length === 0 ? ( Tambah Pasien } /> ) : ( <>
No. Pasien Nama NIK Jenis Kelamin Tempat, Tanggal Lahir Golongan Darah Agama Status Aksi {filteredPatients.map((patient) => ( {patient.medical_record_number} {patient.name}
{patient.phone_number} {patient.nik || '-'} {patient.gender} {patient.birth_place ? `${patient.birth_place}, ${new Date(patient.birth_date).toLocaleDateString('id-ID', { day: '2-digit', month: 'long', year: 'numeric' })}` : new Date(patient.birth_date).toLocaleDateString('id-ID', { day: '2-digit', month: 'long', year: 'numeric' })} {patient.blood_type || '-'} {patient.religion} {patient.is_active ? 'Aktif' : 'Non-Aktif'} Apakah Anda yakin? Data pasien akan dihapus permanen. Tindakan ini tidak dapat dibatalkan. Batal Hapus ))}
{patients.links.length > 3 && (
)} )}
); }