import { Head, Link, router } from '@inertiajs/react'; import { format } from 'date-fns'; import { ClipboardCheck, Pencil, Plus, Trash2, X } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { destroy, session } from '@/routes/admin/academic-classes/attendances'; import type { AttendanceCourseClass, AttendanceSession, } from '@/types/attendance'; type Props = { sessions: AttendanceSession[]; courseClasses: AttendanceCourseClass[]; }; function courseClassLabel(courseClass: AttendanceCourseClass): string { return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`; } export default function AttendanceIndex({ sessions, courseClasses }: Props) { const [newSessionOpen, setNewSessionOpen] = useState(false); const [deleting, setDeleting] = useState(null); function handleDelete() { if (!deleting || deleting.meeting_number === null) { return; } router.delete( destroy([deleting.course_class_id, deleting.meeting_number]).url, { onSuccess: () => setDeleting(null) }, ); } return ( <>

setNewSessionOpen(true)}> Ambil Kehadiran } /> {sessions.length === 0 ? (

Belum ada data kehadiran.

) : (

{sessions.map((item) => { const key = `${item.course_class_id}-${item.meeting_number}-${item.date}`; const canOpen = item.meeting_number !== null; return ( {item.course_class ? courseClassLabel( item.course_class, ) : '-'} {item.present_count}/ {item.total_count} Hadir

Pertemuan ke- {item.meeting_number ?? '-'}{' '} ·{' '} {format( new Date(item.date), 'd MMM yyyy', )}

); })}

)} { if (!open) { setDeleting(null); } }} title="Hapus Sesi Kehadiran" description={(item) => `Apakah Anda yakin ingin menghapus seluruh data kehadiran pertemuan ke-${item.meeting_number} untuk kelas ini? Tindakan ini tidak dapat dibatalkan.` } onConfirm={handleDelete} />

); } function NewSessionDialog({ open, onOpenChange, courseClasses, }: { open: boolean; onOpenChange: (open: boolean) => void; courseClasses: AttendanceCourseClass[]; }) { const [courseClassId, setCourseClassId] = useState(''); const [meetingNumber, setMeetingNumber] = useState(''); function reset() { setCourseClassId(''); setMeetingNumber(''); } function handleOpenSession() { if (!courseClassId || !meetingNumber) { return; } router.get(session([Number(courseClassId), Number(meetingNumber)]).url); } return ( ); }