import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { EmptyState } from '@/components/ui/empty-state'; 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 { Input } from '@/components/ui/input'; // Tambahkan import Input import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'; interface Employee { id: string; employee_id: string; name: string; email: string; gender: string; nik: string; birth_date: Date; birth_place: string; address: string; phone_number: string; join_date: string; is_active: boolean; } interface PageProps { employees: { data: Employee[]; links: Array<{ url: string | null; label: string; active: boolean; }>; }; status?: string; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Employees', href: '/employees' }, ]; export default function EmployeeIndex() { const { employees, status } = usePage().props; const [searchTerm, setSearchTerm] = useState(''); const [filteredEmployees, setFilteredEmployees] = useState(employees.data); useEffect(() => { if (status) { toast.success(status); } }, [status]); useEffect(() => { // Filter data berdasarkan search term const results = employees.data.filter(employee => Object.values(employee).some( value => value && value.toString().toLowerCase().includes(searchTerm.toLowerCase()) ) ); setFilteredEmployees(results); }, [searchTerm, employees.data]); return (

Data Pegawai

{/* Tambahkan input search */}
setSearchTerm(e.target.value)} />
{filteredEmployees.length === 0 ? ( Add Employee } /> ) : ( <>
ID Pegawai Nama NIK Jenis Kelamin Tempat, Tanggal Lahir No. Telpon Tanggal Bergabung Status Action {filteredEmployees.map((employee) => ( {employee.employee_id} {employee.name}
{employee.email} {employee.nik} {employee.gender} {employee.birth_place ? `${employee.birth_place}, ${new Date(employee.birth_date).toLocaleDateString('id-ID', { day: '2-digit', month: 'long', year: 'numeric' })}` : new Date(employee.birth_date).toLocaleDateString('id-ID', { day: '2-digit', month: 'long', year: 'numeric' })} {employee.phone_number} {new Date(employee.join_date).toLocaleDateString()} {employee.is_active ? 'Active' : 'Inactive'} Apakah Anda yakin? Tindakan ini tidak dapat dibatalkan. Data pegawai akan dihapus secara permanen. Batal toast.success('Employee deleted successfully')} preserveScroll > Hapus ))}
{/* Tetap tampilkan pagination untuk data asli */} {employees.links.length > 3 && (
)} )}
); }