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 Procedure { id: string; code: string; name: string; category: string; price: string; tax: string; approval: string; status: string; created_at: string; } interface PageProps { procedures: { data: Procedure[]; links: Array<{ url: string | null; label: string; active: boolean; }>; }; status?: string; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Prosedur', href: '/procedures' }, ]; export default function ProcedureIndex() { const { procedures, status } = usePage().props; const [searchTerm, setSearchTerm] = useState(''); const [filteredProcedures, setFilteredProcedures] = useState(procedures.data); useEffect(() => { if (status) { toast.success(status); } }, [status]); useEffect(() => { const results = procedures.data.filter(procedure => Object.values(procedure).some( value => value && value.toString().toLowerCase().includes(searchTerm.toLowerCase()) ) ); setFilteredProcedures(results); }, [searchTerm, procedures.data]); return (

Data Prosedur

setSearchTerm(e.target.value)} />
{filteredProcedures.length === 0 ? ( Tambah Prosedur } /> ) : ( <>
Kode Nama Prosedur Kategori Harga Dasar Pajak Persetujuan Status Dibuat Pada Aksi {filteredProcedures.map((procedure) => ( {procedure.code} {procedure.name} {procedure.category} {procedure.price} {procedure.tax} {procedure.approval} {procedure.status} {procedure.created_at} Apakah Anda yakin? Data prosedur akan dihapus permanen. Tindakan ini tidak dapat dibatalkan. Batal Hapus ))}
{procedures.links.length > 3 && (
)} )}
); }