import { Head } from '@inertiajs/react'; import { format } from 'date-fns'; import { PageHeader } from '@/components/page-header'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/components/ui/accordion'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { formatAcademicTermLabel } from '@/types/academic-term'; import type { AttendanceClassSummary } from '@/types/attendance'; import { AttendanceStatusLabels } from '@/types/attendance'; type Props = { summaries: AttendanceClassSummary[]; }; function courseClassLabel( courseClass: AttendanceClassSummary['course_class'], ): string { return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`; } function percentageOf(part: number, total: number): number { return total > 0 ? Math.round((part / total) * 100) : 0; } export default function MyAttendance({ summaries }: Props) { return ( <>
{summaries.length === 0 ? (

Belum ada kelas yang terdaftar.

) : (
{summaries.map((summary) => ( {courseClassLabel(summary.course_class)}
= 75 ? 'secondary' : 'destructive' } className="w-fit text-[10px] font-normal" > Hadir {summary.present_count} /{' '} {summary.total_count} ( {percentageOf( summary.present_count, summary.total_count, )} %) {summary.course_class.academic_term && ( {formatAcademicTermLabel( summary.course_class .academic_term, )} )}
{summary.records.length > 0 && ( Detail Pertemuan
{summary.records.map( (record) => (
Pertemuan ke- {record.meeting_number ?? '-'}{' '} ·{' '} {format( new Date( record.date, ), 'd MMM yyyy', )} { AttendanceStatusLabels[ record .status ] }
), )}
)} ))}
)}
); }