import { Head, Link, router } from '@inertiajs/react'; import type { ColumnDef } from '@tanstack/react-table'; import { format } from 'date-fns'; import { ArrowLeft, Trash2, UserPlus } from 'lucide-react'; import { useState } from 'react'; import { DataTable } from '@/components/data-table'; import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog'; import { FormDialog } from '@/components/form-dialog'; import InputError from '@/components/input-error'; import { PageHeader } from '@/components/page-header'; import { RowActions } from '@/components/row-actions'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Label } from '@/components/ui/label'; import { usePermissions } from '@/hooks/use-permissions'; import { index as courseClassIndex } from '@/routes/admin/manage/course-classes'; import { destroy, store, } from '@/routes/admin/manage/course-classes/enrollments'; import { formatAcademicTermLabel } from '@/types/academic-term'; import type { ClassEnrollment, EnrollmentStudent, } from '@/types/class-enrollment'; import type { CourseClass } from '@/types/course-class'; import { ClassMethodLabels } from '@/types/course-class'; type Props = { courseClass: CourseClass; enrollments: ClassEnrollment[]; availableStudents: EnrollmentStudent[]; }; export default function ClassEnrollmentIndex({ courseClass, enrollments, availableStudents, }: Props) { const [createOpen, setCreateOpen] = useState(false); const [deleting, setDeleting] = useState(null); const { hasPermission } = usePermissions(); const canCreate = hasPermission('create-course-class-enrollments'); const canDelete = hasPermission('delete-course-class-enrollments'); function handleDelete() { if (!deleting) { return; } router.delete(destroy([courseClass.id, deleting.id]), { onSuccess: () => setDeleting(null), }); } const columns: ColumnDef[] = [ { accessorKey: 'student.student_number', header: () => NIM, cell: ({ row }) => row.original.student?.student_number ?? '-', }, { accessorKey: 'student.user.profile.full_name', header: () => Nama Mahasiswa, cell: ({ row }) => row.original.student?.user?.profile?.full_name ?? '-', }, { accessorKey: 'student.department.name', header: () => Jurusan, cell: ({ row }) => row.original.student?.department?.name ?? '-', }, { accessorKey: 'enrolled_at', header: () => Tanggal Daftar, cell: ({ row }) => { const enrolledAt = row.getValue('enrolled_at') as string | null; return enrolledAt ? format(new Date(enrolledAt), 'd MMM yyyy') : '-'; }, }, { id: 'actions', header: () => Aksi, meta: { className: 'w-[80px] text-center', headerClassName: 'w-[80px] text-center', }, cell: ({ row }) => ( ), show: canDelete, onClick: () => setDeleting(row.original), }, ]} /> ), }, ]; return ( <>
Kembali } /> Detail Kelas Mata Kuliah

Mata Kuliah: {courseClass.course?.code} -{' '} {courseClass.course?.name}

Dosen Pengampu:{' '} {courseClass.lecturer?.user?.profile?.full_name ?? '-'}

Periode:{' '} {courseClass.academic_term ? formatAcademicTermLabel( courseClass.academic_term, ) : '-'}

Metode:{' '} {courseClass.method ? ClassMethodLabels[courseClass.method] : '-'}

Jumlah Peserta: {enrollments.length}

Daftar Mahasiswa

{canCreate && ( )}
{ if (!open) { setDeleting(null); } }} title="Keluarkan Mahasiswa" description={(enrollment) => `Apakah Anda yakin ingin mengeluarkan "${enrollment.student?.user?.profile?.full_name ?? 'mahasiswa ini'}" dari kelas ini?` } onConfirm={handleDelete} />
); } function EnrollForm({ open, onOpenChange, courseClassId, availableStudents, }: { open: boolean; onOpenChange: (open: boolean) => void; courseClassId: number; availableStudents: EnrollmentStudent[]; }) { const [selectedIds, setSelectedIds] = useState([]); const allSelected = availableStudents.length > 0 && selectedIds.length === availableStudents.length; function toggleAll() { setSelectedIds( allSelected ? [] : availableStudents.map((student) => student.id), ); } function toggleOne(id: number) { setSelectedIds((prev) => prev.includes(id) ? prev.filter((selectedId) => selectedId !== id) : [...prev, id], ); } return ( 0 ? `Tambahkan (${selectedIds.length})` : 'Tambahkan' } onSuccess={() => { onOpenChange(false); setSelectedIds([]); }} > {({ errors }) => (
{availableStudents.length > 0 && (
)}
{selectedIds.map((id) => ( ))}
{availableStudents.length === 0 ? (

Tidak ada mahasiswa dari jurusan yang sama untuk didaftarkan.

) : ( availableStudents.map((student) => ( )) )}
)} ); }