import { Head, Link } from '@inertiajs/react'; import type { FilterField } from '@/components/filter-dialog'; import { FilterDialog } from '@/components/filter-dialog'; import { PageHeader } from '@/components/page-header'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { useServerTable } from '@/hooks/use-server-table'; import { index as attendanceIndex, show, } from '@/routes/admin/academic-classes/attendances'; import { formatAcademicTermLabel } from '@/types/academic-term'; import type { AttendanceCourseClassOverview } from '@/types/attendance'; type AcademicTermOption = { id: number; academic_year: string; semester: string; }; type Props = { courseClasses: AttendanceCourseClassOverview[]; academicTerms: AcademicTermOption[]; filters: { academic_term_id?: string; }; }; function courseClassLabel(courseClass: AttendanceCourseClassOverview): string { return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`; } export default function AttendanceIndex({ courseClasses, academicTerms, filters, }: Props) { const filterFields: FilterField[] = [ { key: 'academic_term_id', label: 'Periode Akademik', options: academicTerms.map((term) => ({ value: String(term.id), label: formatAcademicTermLabel(term), })), }, ]; const { applyFilters } = useServerTable({ route: () => attendanceIndex.url(), pagination: { current_page: 1, last_page: 1, per_page: 999999, total: courseClasses.length, }, filters, }); function handleApplyFilters(newFilters: Record) { // Tanpa `academic_term_id` eksplisit, backend akan kembali ke // periode aktif, jadi menghapus filter ini perlu dikirim eksplisit // alih-alih hanya menghilangkan key-nya. const clearedAcademicTerm = Boolean(filters.academic_term_id) && !newFilters.academic_term_id; applyFilters({ ...newFilters, ...(clearedAcademicTerm ? { academic_term_id: '' } : {}), }); } return ( <>
} /> {courseClasses.length === 0 ? (

Tidak ada kelas untuk periode ini.

) : (
{courseClasses.map((courseClass) => ( {courseClassLabel(courseClass)}
{courseClass.meetings_count}{' '} Pertemuan {courseClass.enrollments_count}{' '} Mahasiswa {courseClass.academic_term && ( {formatAcademicTermLabel( courseClass.academic_term, )} )}
))}
)}
); }