import { Head, Link, router, useForm } from '@inertiajs/react'; import { Library, Pencil, Plus, Trash2 } from 'lucide-react'; import { useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { EmptyState } from '@/components/empty-state'; import InputError from '@/components/input-error'; import { PageHeader } from '@/components/page-header'; import { StatusBadge } from '@/components/status-badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; 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, index, store, update } from '@/routes/reference'; type Item = { id: string; name: string; sort_order: number; is_active: boolean; type?: string | null; type_label?: string | null; location?: string | null; }; type CourtType = { value: string; label: string }; type Props = { type: string; label: string; isCourts: boolean; courtTypes: CourtType[]; items: Item[]; }; const TABS: { slug: string; label: string }[] = [ { slug: 'courts', label: 'Courts' }, { slug: 'practice-areas', label: 'Practice Areas' }, { slug: 'matter-stages', label: 'Matter Stages' }, { slug: 'contact-categories', label: 'Contact Categories' }, { slug: 'document-types', label: 'Document Types' }, ]; export default function ReferenceIndex({ type, label, isCourts, courtTypes, items, }: Props) { const [editing, setEditing] = useState(null); const [open, setOpen] = useState(false); const form = useForm({ name: '', sort_order: 0, is_active: true, type: '' as string, location: '' as string, }); const openCreate = () => { setEditing(null); form.setDefaults(); form.reset(); form.clearErrors(); setOpen(true); }; const openEdit = (item: Item) => { setEditing(item); form.setData({ name: item.name, sort_order: item.sort_order, is_active: item.is_active, type: item.type ?? '', location: item.location ?? '', }); form.clearErrors(); setOpen(true); }; const submit = (e: React.FormEvent) => { e.preventDefault(); const opts = { preserveScroll: true, onSuccess: () => setOpen(false), }; if (editing) { form.put(update({ type, reference: editing.id }).url, opts); } else { form.post(store(type).url, opts); } }; return ( <>
Add {label.replace(/s$/, '')} } />
{TABS.map((tab) => ( {tab.label} ))}
{items.length === 0 ? ( Add {label.replace(/s$/, '')} } /> ) : (
    {items.map((item) => (

  • {item.name}

    {isCourts && item.type_label ? `${item.type_label}${item.location ? ` · ${item.location}` : ''}` : `Order: ${item.sort_order}`}

    {item.is_active ? 'Active' : 'Inactive'} router.delete( destroy({ type, reference: item.id, }).url, ) } trigger={ } />
    • ))}
)}
{editing ? 'Edit' : 'Add'}{' '} {label.replace(/s$/, '')}
form.setData('name', e.target.value) } required />
{isCourts && ( <>
form.setData( 'location', e.target.value, ) } />
)}
form.setData( 'sort_order', Number(e.target.value), ) } />
); }