import { Head, Link, router } from '@inertiajs/react'; import { format } from 'date-fns'; import { ArrowLeft, ClipboardCheck, Pencil, Plus, Trash2 } from 'lucide-react'; import { useState } from 'react'; import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog'; import { PageHeader } from '@/components/page-header'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { usePermissions } from '@/hooks/use-permissions'; import { destroy, index as attendanceIndex, session, } from '@/routes/admin/academic-classes/attendances'; import { formatAcademicTermLabel } from '@/types/academic-term'; import type { AttendanceCourseClass, AttendanceSession, } from '@/types/attendance'; type Props = { courseClass: AttendanceCourseClass; sessions: AttendanceSession[]; nextMeetingNumber: number; }; function courseClassLabel(courseClass: AttendanceCourseClass): string { return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`; } export default function AttendanceCourseClass({ courseClass, sessions, nextMeetingNumber, }: Props) { const [newSessionOpen, setNewSessionOpen] = useState(false); const [deleting, setDeleting] = useState(null); const { hasPermission } = usePermissions(); const canCreate = hasPermission('create-attendances'); const canDelete = hasPermission('delete-attendances'); function handleDelete() { if (!deleting) { return; } router.delete(destroy([courseClass.id, deleting.meeting_number]).url, { onSuccess: () => setDeleting(null), }); } return ( <>
{formatAcademicTermLabel( courseClass.academic_term, )} ) } actions={
{canCreate && ( )}
} /> {sessions.length === 0 ? (

Belum ada pertemuan yang tercatat.

) : (
{sessions.map((item) => ( Pertemuan ke-{item.meeting_number} {item.present_count}/{item.total_count}{' '} Hadir

{format( new Date(item.date), 'd MMM yyyy', )}

{canDelete && ( )}
))}
)} { if (!open) { setDeleting(null); } }} title="Hapus Sesi Kehadiran" description={(item) => `Apakah Anda yakin ingin menghapus seluruh data kehadiran pertemuan ke-${item.meeting_number}? Tindakan ini tidak dapat dibatalkan.` } onConfirm={handleDelete} />
); } function NewSessionDialog({ open, onOpenChange, courseClassId, defaultMeetingNumber, }: { open: boolean; onOpenChange: (open: boolean) => void; courseClassId: number; defaultMeetingNumber: number; }) { const [meetingNumber, setMeetingNumber] = useState( String(defaultMeetingNumber), ); function handleOpenSession() { if (!meetingNumber) { return; } router.get(session([courseClassId, Number(meetingNumber)]).url); } return ( { onOpenChange(value); if (!value) { setMeetingNumber(String(defaultMeetingNumber)); } }} > Tambah Pertemuan
setMeetingNumber(e.target.value)} autoFocus />
); }