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 { 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 TiptapEditor from '@/components/rich-text-editor'; 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 { useServerTable } from '@/hooks/use-server-table'; import { index as feedbackIndex, destroy, store, update, } from '@/routes/admin/feedback'; import type { Feedback } from '@/types/feedback'; import { createFeedbackColumns } from './columns'; type FeedbackTypeOption = { value: string; label: string }; type Props = { feedbacks: { data: Feedback[]; current_page: number; last_page: number; per_page: number; total: number; }; types: FeedbackTypeOption[]; statuses: FeedbackTypeOption[]; filters: { type?: string; status?: string; }; }; export default function FeedbackIndex({ feedbacks, types, statuses, filters, }: Props) { const [createOpen, setCreateOpen] = useState(false); const [editing, setEditing] = useState(null); const [deleting, setDeleting] = useState(null); const filterFields: FilterField[] = [ { key: 'type', label: 'Jenis', options: types, }, { key: 'status', label: 'Status', options: statuses, }, ]; const pagination: PaginationState = { current_page: feedbacks.current_page, last_page: feedbacks.last_page, per_page: feedbacks.per_page, total: feedbacks.total, }; const { search, handlePageChange, handlePerPageChange, handleSearchChange, applyFilters, } = useServerTable({ route: () => feedbackIndex.url(), pagination, filters, }); function handleDelete() { if (!deleting) { return; } router.delete(destroy(deleting.id), { onSuccess: () => setDeleting(null), }); } const columns = createFeedbackColumns({ handleEdit: (feedback) => setEditing(feedback), handleDeleteClick: (feedback) => setDeleting(feedback), }); return ( <>

Sampaikan kritik, saran, atau aduan Anda kepada kami.

} actions={ } /> { if (!open) { setEditing(null); } }} editing={editing} types={types} /> } /> { if (!open) { setDeleting(null); } }} title="Hapus Masukan" description={(feedback) => `Apakah Anda yakin ingin menghapus "${feedback.subject}"? Tindakan ini tidak dapat dibatalkan.` } onConfirm={handleDelete} />

); } function FeedbackFields({ errors, editing, types, }: { errors: Record; editing?: Feedback; types: FeedbackTypeOption[]; }) { const [message, setMessage] = useState(editing?.message ?? ''); return ( <>

Jenis * {!editing && }

Subjek *

Pesan *

); } function CreateForm({ open, onOpenChange, types, }: { open: boolean; onOpenChange: (open: boolean) => void; types: FeedbackTypeOption[]; }) { return ( onOpenChange(false)} > {({ errors }) => (

)} ); } function EditForm({ open, onOpenChange, editing, types, }: { open: boolean; onOpenChange: (open: boolean) => void; editing: Feedback | null; types: FeedbackTypeOption[]; }) { return ( onOpenChange(false)} > {({ errors }) => editing && (

) } ); }