import { Head, router } from '@inertiajs/react'; import { Plus } from 'lucide-react'; import { useState } from 'react'; 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 { FormDialog } from '@/components/form-dialog'; import InputError from '@/components/input-error'; import { PageHeader } from '@/components/page-header'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { usePermissions } from '@/hooks/use-permissions'; import { useServerTable } from '@/hooks/use-server-table'; import { index as courseIndex, destroy, store, update, } from '@/routes/admin/master/courses'; import type { Course } from '@/types/course'; import { formatDepartmentLabel } from '@/types/department'; import { createCourseColumns } from './columns'; type Department = { id: number; name: string; degree_level: string | null }; type Props = { courses: { data: Course[]; current_page: number; last_page: number; per_page: number; total: number; }; departments: Department[]; semesterNumbers: number[]; highlight?: number; filters: { department_id?: string; semester_number?: string; }; }; export default function CourseIndex({ courses, departments, semesterNumbers, highlight, filters, }: Props) { const [createOpen, setCreateOpen] = useState(false); const [editing, setEditing] = useState(null); const [deleting, setDeleting] = useState(null); const { hasPermission } = usePermissions(); const canCreate = hasPermission('create-courses'); const canUpdate = hasPermission('update-courses'); const canDelete = hasPermission('delete-courses'); const filterFields: FilterField[] = [ { key: 'department_id', label: 'Jurusan', options: departments.map((department) => ({ value: String(department.id), label: formatDepartmentLabel(department), })), }, { key: 'semester_number', label: 'Semester', options: semesterNumbers.map((semester) => ({ value: String(semester), label: String(semester), })), }, ]; const pagination: PaginationState = { current_page: courses.current_page, last_page: courses.last_page, per_page: courses.per_page, total: courses.total, }; const { search, handlePageChange, handlePerPageChange, handleSearchChange, applyFilters, } = useServerTable({ route: () => courseIndex.url(), pagination, filters, }); function handleDelete() { if (!deleting) { return; } router.delete(destroy(deleting.id), { onSuccess: () => setDeleting(null), }); } const columns = createCourseColumns({ handleEdit: (course) => setEditing(course), handleDeleteClick: (course) => setDeleting(course), canUpdate, canDelete, }); return ( <>
Menampilkan mata kuliah dari notifikasi.

) } actions={ canCreate && ( ) } /> { if (!open) { setEditing(null); } }} editing={editing} departments={departments} /> } /> { if (!open) { setDeleting(null); } }} title="Hapus Mata Kuliah" description={(course) => `Apakah Anda yakin ingin menghapus mata kuliah "${course.name}"? Tindakan ini tidak dapat dibatalkan.` } onConfirm={handleDelete} />
); } function CreateForm({ open, onOpenChange, departments, }: { open: boolean; onOpenChange: (open: boolean) => void; departments: Department[]; }) { return ( onOpenChange(false)} > {({ errors }) => (
)} ); } function EditForm({ open, onOpenChange, editing, departments, }: { open: boolean; onOpenChange: (open: boolean) => void; editing: Course | null; departments: Department[]; }) { return ( onOpenChange(false)} > {({ errors }) => editing && (
) } ); }