import { Head, router } from '@inertiajs/react'; import { FileSpreadsheet, Info, Plus, RotateCcw } from 'lucide-react'; import { useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import type { PaginationState } from '@/components/data-table'; import { DataTable } from '@/components/data-table'; import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog'; import type { FilterField } from '@/components/filter-dialog'; import { FilterDialog } from '@/components/filter-dialog'; import { PageHeader } from '@/components/page-header'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { Button } from '@/components/ui/button'; import { useServerTable } from '@/hooks/use-server-table'; import { create, destroy, edit, reset_password, update_status, exportMethod as exportStudents, index as studentsIndex, } from '@/routes/admin/users/students'; import { createStudentColumns } from './columns'; import type { Student } from './columns'; type Department = { id: number; name: string }; type StatusOption = { value: string; label: string }; type Props = { students: { data: Student[]; current_page: number; last_page: number; per_page: number; total: number; }; departments: Department[]; statuses: StatusOption[]; filters: { gender?: string; department_id?: string; status?: string; }; }; export default function StudentIndex({ students, departments, statuses, filters, }: Props) { const [deleting, setDeleting] = useState(null); const [resetting, setResetting] = useState(null); const filterFields: FilterField[] = [ { key: 'gender', label: 'Jenis Kelamin', options: [ { value: 'male', label: 'Laki-laki' }, { value: 'female', label: 'Perempuan' }, ], }, { key: 'department_id', label: 'Jurusan', options: departments.map((department) => ({ value: String(department.id), label: department.name, })), }, { key: 'status', label: 'Status', options: statuses, }, ]; const pagination: PaginationState = { current_page: students.current_page, last_page: students.last_page, per_page: students.per_page, total: students.total, }; const { search, handlePageChange, handlePerPageChange, handleSearchChange, applyFilters, } = useServerTable({ route: () => studentsIndex.url(), pagination, filters, }); function handleDelete() { if (!deleting) { return; } router.delete(destroy(deleting.id), { onSuccess: () => setDeleting(null), }); } function handleResetPassword() { if (!resetting) { return; } router.patch( reset_password.url(resetting.id), {}, { onSuccess: () => setResetting(null), }, ); } function handleStatusChange(student: Student, status: string) { router.patch( update_status.url(student.id), { status }, { preserveScroll: true }, ); } const columns = createStudentColumns({ handleEdit: (student) => { router.get(edit.url(student.id)); }, handleDeleteClick: (student) => setDeleting(student), handleResetPassword: (student) => setResetting(student), handleStatusChange, statuses, }); return ( <>

} /> Ubah status mahasiswa Klik badge Status pada tabel untuk mengubah status mahasiswa secara langsung. } /> { if (!open) { setDeleting(null); } }} title="Hapus Mahasiswa" description={(student) => `Apakah Anda yakin ingin menghapus mahasiswa "${student.profile?.full_name}"? Tindakan ini tidak dapat dibatalkan.` } onConfirm={handleDelete} /> { if (!open) { setResetting(null); } }} title="Reset Kata Sandi" description={ resetting ? `Apakah Anda yakin ingin mereset kata sandi mahasiswa "${resetting.profile?.full_name}" ke kata sandi default?` : '' } confirmLabel="Reset" confirmIcon={} variant="default" onConfirm={handleResetPassword} /> ); }