import { Head, router } from '@inertiajs/react'; import { Plus } from 'lucide-react'; import { useState } from 'react'; import type { PaginationState } from '@/components/data-table'; import { DataTable } from '@/components/data-table'; import { DateTimeField } from '@/components/datetime-field'; import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog'; import type { FilterField } from '@/components/filter-dialog'; import { FilterDialog } from '@/components/filter-dialog'; import { FormDialog } from '@/components/form-dialog'; import InputError from '@/components/input-error'; import { PageHeader } from '@/components/page-header'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Textarea } from '@/components/ui/textarea'; import { usePermissions } from '@/hooks/use-permissions'; import { useServerTable } from '@/hooks/use-server-table'; import { index as academicAdvisingLogIndex, destroy, store, update, } from '@/routes/admin/services/academic-advising-logs'; import type { AcademicAdvisingLog, AcademicAdvisingLogLecturer, AcademicAdvisingLogStudent, } from '@/types/academic-advising-log'; import { createAcademicAdvisingLogColumns } from './columns'; type Props = { logs: { data: AcademicAdvisingLog[]; current_page: number; last_page: number; per_page: number; total: number; }; students: AcademicAdvisingLogStudent[]; lecturers: AcademicAdvisingLogLecturer[]; highlight?: number; filters: { lecturer_id?: string; }; }; function studentLabel(student: AcademicAdvisingLogStudent): string { return `${student.user?.profile?.full_name ?? 'N/A'} - ${student.student_number}`; } function lecturerLabel(lecturer: AcademicAdvisingLogLecturer): string { return `${lecturer.user?.profile?.full_name ?? 'N/A'} - ${lecturer.lecturer_number}`; } export default function AcademicAdvisingLogIndex({ logs, students, lecturers, highlight, filters, }: Props) { const [createOpen, setCreateOpen] = useState(false); const [editing, setEditing] = useState(null); const [deleting, setDeleting] = useState(null); const { hasPermission } = usePermissions(); const canCreate = hasPermission('create-academic-advising-logs'); const canUpdate = hasPermission('update-academic-advising-logs'); const canDelete = hasPermission('delete-academic-advising-logs'); const filterFields: FilterField[] = [ { key: 'lecturer_id', label: 'Dosen', options: lecturers.map((lecturer) => ({ value: String(lecturer.id), label: lecturerLabel(lecturer), })), }, ]; const pagination: PaginationState = { current_page: logs.current_page, last_page: logs.last_page, per_page: logs.per_page, total: logs.total, }; const { search, handlePageChange, handlePerPageChange, handleSearchChange, applyFilters, } = useServerTable({ route: () => academicAdvisingLogIndex.url(), pagination, filters, }); function handleDelete() { if (!deleting) { return; } router.delete(destroy(deleting.id), { onSuccess: () => setDeleting(null), }); } const columns = createAcademicAdvisingLogColumns({ handleEdit: (log) => setEditing(log), handleDeleteClick: (log) => setDeleting(log), canUpdate, canDelete, }); return ( <>

Menampilkan log bimbingan dari notifikasi.

) } actions={ canCreate && ( ) } /> { if (!open) { setEditing(null); } }} editing={editing} students={students} lecturers={lecturers} /> } /> { if (!open) { setDeleting(null); } }} title="Hapus Log Bimbingan" description={(log) => `Apakah Anda yakin ingin menghapus log bimbingan untuk "${log.student?.user?.profile?.full_name ?? 'mahasiswa ini'}"? Tindakan ini tidak dapat dibatalkan.` } onConfirm={handleDelete} />

); } function AdvisingLogFields({ errors, editing, students, lecturers, }: { errors: Record; editing?: AcademicAdvisingLog; students: AcademicAdvisingLogStudent[]; lecturers: AcademicAdvisingLogLecturer[]; }) { return ( <>

Mahasiswa * {!editing && }

Dosen Wali * {!editing && }

Topik

Catatan

<InputError message={errors.notes} />
            </div>
            <DateTimeField
                label="Tanggal Sesi"
                name="session_date"
                defaultValue={editing?.session_date}
                placeholder="Pilih tanggal sesi"
                error={errors.session_date}
            />
        </>
    );
}

function CreateForm({
    open,
    onOpenChange,
    students,
    lecturers,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    students: AcademicAdvisingLogStudent[];
    lecturers: AcademicAdvisingLogLecturer[];
}) {
    return (
        <FormDialog
            open={open}
            onOpenChange={onOpenChange}
            title="Tambah Bimbingan Akademik"
            action={store()}
            resetOnSuccess
            onSuccess={() => onOpenChange(false)}
        >
            {({ errors }) => (
                <div className="grid gap-4">
                    <AdvisingLogFields
                        errors={errors}
                        students={students}
                        lecturers={lecturers}
                    />
                </div>
            )}
        </FormDialog>
    );
}

function EditForm({
    open,
    onOpenChange,
    editing,
    students,
    lecturers,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    editing: AcademicAdvisingLog | null;
    students: AcademicAdvisingLogStudent[];
    lecturers: AcademicAdvisingLogLecturer[];
}) {
    return (
        <FormDialog
            open={open}
            onOpenChange={onOpenChange}
            title="Edit Bimbingan Akademik"
            action={editing ? update(editing.id) : ''}
            resetOnSuccess
            onSuccess={() => onOpenChange(false)}
        >
            {({ errors }) =>
                editing && (
                    <div className="grid gap-4">
                        <AdvisingLogFields
                            errors={errors}
                            editing={editing}
                            students={students}
                            lecturers={lecturers}
                        />
                    </div>
                )
            }
        </FormDialog>
    );
}