import { Form, Head } from '@inertiajs/react'; import { useState } from 'react'; import HeadingSmall from '@/components/heading-small'; import { SortableHeader, useSort } from '@/components/sortable-header'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; import AppLayout from '@/layouts/app-layout'; import { index, store, update, destroy } from '@/routes/admin/states'; type State = { id: number; code: string; name: string; }; type Props = { states: State[]; }; const breadcrumbs = [{ title: 'States', href: index.url() }]; export default function States({ states }: Props) { const [editingId, setEditingId] = useState(null); const [createOpen, setCreateOpen] = useState(false); const { sorted, sortColumn, sortDirection, toggleSort } = useSort(states, 'code'); return (

States

Add state Create a new state for the energy market.
setCreateOpen(false)} > {({ processing, errors }) => (
{errors.code && (
{errors.code}
)}
{errors.name && (
{errors.name}
)}
)}
{/* States table */}
{sorted.map((s) => ( ))}
{s.code} {s.name}
setEditingId(open ? s.id : null)} > Edit state Update {s.name} settings.
setEditingId(null)} > {({ processing, errors }) => (
{errors.code && (
{errors.code}
)}
{errors.name && (
{errors.name}
)}
)}
{({ processing }) => ( )}
{states.length === 0 && (
No states yet.
)}
); }