import { Head, router } from '@inertiajs/react'; import { Clock, MapPin, Pencil, Plus, Trash2, Video } from 'lucide-react'; import { useState } from 'react'; import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog'; import { FormDialog } from '@/components/form-dialog'; import InputError from '@/components/input-error'; import { PageHeader } from '@/components/page-header'; import { RowActions } from '@/components/row-actions'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { cn } from '@/lib/utils'; import { destroy, store, update, } from '@/routes/admin/academic-classes/schedules'; import type { Schedule } from '@/types/schedule'; import { DayOfWeekLabels, DaysOfWeek } from '@/types/schedule'; type CourseClassOption = { id: number; course: { id: number; code: string; name: string } | null; }; type Props = { schedules: Schedule[]; courseClasses: CourseClassOption[]; highlight?: number; }; const UNSCHEDULED = '__unscheduled__'; const BOARD_COLUMNS = [...DaysOfWeek, UNSCHEDULED] as const; function courseClassLabel(courseClass: CourseClassOption): string { return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`; } function toTimeInput(value: string | null): string { return value ? value.slice(0, 5) : ''; } export default function ScheduleIndex({ schedules, courseClasses, highlight, }: Props) { const [createOpen, setCreateOpen] = useState(false); const [editing, setEditing] = useState(null); const [deleting, setDeleting] = useState(null); function handleDelete() { if (!deleting) { return; } router.delete(destroy(deleting.id), { onSuccess: () => setDeleting(null), }); } const grouped = new Map(); for (const schedule of schedules) { const key = schedule.day_of_week ?? UNSCHEDULED; grouped.set(key, [...(grouped.get(key) ?? []), schedule]); } const columns = BOARD_COLUMNS.filter( (day) => day !== UNSCHEDULED || (grouped.get(UNSCHEDULED)?.length ?? 0) > 0, ); return ( <>
} /> { if (!open) { setEditing(null); } }} editing={editing} courseClasses={courseClasses} /> {schedules.length === 0 ? (

Belum ada data jadwal.

) : (
{columns.map((day) => { const items = grouped.get(day) ?? []; return (
{day === UNSCHEDULED ? 'Belum Diatur' : DayOfWeekLabels[day]} {items.length}
{items.length === 0 ? (

Tidak ada jadwal

) : ( items.map((schedule) => ( {courseClassLabel( schedule.course_class ?? { id: 0, course: null, }, )} ), onClick: () => setEditing( schedule, ), }, { label: 'Hapus', icon: ( ), onClick: () => setDeleting( schedule, ), }, ]} /> {(schedule.start_time || schedule.end_time) && ( {toTimeInput( schedule.start_time, ) || '-'}{' '} -{' '} {toTimeInput( schedule.end_time, ) || '-'} )} {schedule.room && ( {schedule.room} )} {schedule.online_link && ( )} )) )}
); })}
)} { if (!open) { setDeleting(null); } }} title="Hapus Jadwal" description={(schedule) => `Apakah Anda yakin ingin menghapus jadwal "${schedule.course_class?.course?.name ?? 'ini'}"? Tindakan ini tidak dapat dibatalkan.` } onConfirm={handleDelete} />
); } function CreateForm({ open, onOpenChange, courseClasses, }: { open: boolean; onOpenChange: (open: boolean) => void; courseClasses: CourseClassOption[]; }) { return ( onOpenChange(false)} > {({ errors }) => (
)} ); } function EditForm({ open, onOpenChange, editing, courseClasses, }: { open: boolean; onOpenChange: (open: boolean) => void; editing: Schedule | null; courseClasses: CourseClassOption[]; }) { return ( onOpenChange(false)} > {({ errors }) => editing && (
) } ); }