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 { DatePicker } from '@/components/date-picker'; 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 { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { useServerTable } from '@/hooks/use-server-table'; import { index as academicTermIndex, destroy, store, update, update_status, } from '@/routes/admin/master/academic-terms'; import type { AcademicTerm } from '@/types/academic-term'; import { Semester, SemesterLabels } from '@/types/academic-term'; import { createAcademicTermColumns } from './columns'; type Props = { academicTerms: { data: AcademicTerm[]; current_page: number; last_page: number; per_page: number; total: number; }; highlight?: number; filters: { semester?: string; is_active?: string; }; }; const filterFields: FilterField[] = [ { key: 'semester', label: 'Semester', options: Object.values(Semester).map((value) => ({ value, label: SemesterLabels[value], })), }, { key: 'is_active', label: 'Status', options: [ { value: 'true', label: 'Aktif' }, { value: 'false', label: 'Tidak Aktif' }, ], }, ]; export default function AcademicTermIndex({ academicTerms, highlight, filters, }: Props) { const [createOpen, setCreateOpen] = useState(false); const [editing, setEditing] = useState(null); const [deleting, setDeleting] = useState(null); const pagination: PaginationState = { current_page: academicTerms.current_page, last_page: academicTerms.last_page, per_page: academicTerms.per_page, total: academicTerms.total, }; const { search, handlePageChange, handlePerPageChange, handleSearchChange, applyFilters, } = useServerTable({ route: () => academicTermIndex.url(), pagination, filters, }); function handleDelete() { if (!deleting) { return; } router.delete(destroy(deleting.id), { onSuccess: () => setDeleting(null), }); } function handleStatusChange(academicTerm: AcademicTerm, isActive: boolean) { router.patch( update_status.url(academicTerm.id), { is_active: isActive }, { preserveScroll: true }, ); } const columns = createAcademicTermColumns({ handleEdit: (academicTerm) => setEditing(academicTerm), handleDeleteClick: (academicTerm) => setDeleting(academicTerm), handleStatusChange, }); return ( <>
Menampilkan periode akademik dari notifikasi.

) } actions={ } /> { if (!open) { setEditing(null); } }} editing={editing} /> } /> { if (!open) { setDeleting(null); } }} title="Hapus Periode Akademik" description={(academicTerm) => `Apakah Anda yakin ingin menghapus periode akademik "${academicTerm.name}"? Tindakan ini tidak dapat dibatalkan.` } onConfirm={handleDelete} />
); } function CreateForm({ open, onOpenChange, }: { open: boolean; onOpenChange: (open: boolean) => void; }) { const [startDate, setStartDate] = useState(); const [endDate, setEndDate] = useState(); return ( { onOpenChange(false); setStartDate(undefined); setEndDate(undefined); }} > {({ errors }) => (
{Object.values(Semester).map((value) => (
))}
)} ); } function EditForm({ open, onOpenChange, editing, }: { open: boolean; onOpenChange: (open: boolean) => void; editing: AcademicTerm | null; }) { const [startDate, setStartDate] = useState( editing?.start_date ? new Date(editing.start_date) : undefined, ); const [endDate, setEndDate] = useState( editing?.end_date ? new Date(editing.end_date) : undefined, ); return ( { onOpenChange(false); setStartDate(undefined); setEndDate(undefined); }} > {({ errors }) => editing && (
{Object.values(Semester).map((value) => (
))}
) } ); }