import { Head, Link } from '@inertiajs/react'; import { format } from 'date-fns'; import { ArrowLeft } from 'lucide-react'; 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 { index } from '@/routes/student/course-registrations'; import { formatAcademicTermLabel } from '@/types/academic-term'; import type { CourseRegistrationSubmission } from '@/types/course-registration'; import { RegistrationStatusLabels } from '@/types/course-registration'; type Props = { submission: CourseRegistrationSubmission; }; export default function CourseRegistrationShow({ submission }: Props) { return ( <>
Kembali } />
{submission.academic_term ? formatAcademicTermLabel( submission.academic_term, ) : '-'}

Ditandatangani pada{' '} {format( new Date(submission.signed_at), 'd MMM yyyy, HH:mm', )}

{RegistrationStatusLabels[submission.status]} Tanda Tangan {submission.signature_url ? (
Tanda tangan
) : (

Tidak ada tanda tangan.

)} Mata Kuliah ( {submission.course_registrations.length}) {submission.course_registrations.map((registration) => (

{registration.course_class?.course?.code ?? '-'}{' '} -{' '} {registration.course_class?.course?.name ?? 'N/A'}

{registration.course_class?.course ?.credits ?? '-'}{' '} SKS ·{' '} {registration.course_class?.lecturer?.user ?.profile?.full_name ?? 'Dosen belum ditentukan'}

))} Riwayat {submission.logs.map((log, index) => ( l.status === 'submitted') } /> ))}
); } function LogBubble({ log, isResubmission, }: { log: CourseRegistrationSubmission['logs'][number]; isResubmission: boolean; }) { const actorName = log.actor?.profile?.full_name ?? 'Sistem'; const message = log.status === 'approved' ? `${actorName} menyetujui KRS ini.` : log.status === 'rejected' ? `${actorName} menolak KRS ini dengan alasan: "${log.reason}"` : isResubmission ? `${actorName} mengajukan ulang KRS.` : `${actorName} mengajukan KRS.`; const colorClasses = log.status === 'approved' ? 'border-primary/30 bg-primary/10' : log.status === 'rejected' ? 'border-destructive/30 bg-destructive/10' : 'border-border bg-muted'; return (

{message}

{format(new Date(log.created_at), 'd MMM yyyy, HH:mm')}

); }