import { Head, setLayoutProps } from '@inertiajs/react'; import { useEffect, useMemo, useState } from 'react'; import { CategoryActionsMenu } from '@/components/categories/category-actions-menu'; import { CategoryFormDialog } from '@/components/categories/category-form-dialog'; import { createAppColumnHelper, DataTable, DataTableColumnHeader, } from '@/components/data-table'; import type { useServerTable } from '@/components/data-table/use-server-table'; import { Button } from '@/components/ui/button'; import { expense, income } from '@/routes/categories'; import type { CategoriesIndexProps, CategoryRow, CategoryType, } from '@/types/category'; import { categoryPageTitle, categoryTypeLabel } from '@/types/category'; const columnHelper = createAppColumnHelper(); type CategoryTableColumns = Parameters< typeof useServerTable >[0]['columns']; function indexUrlForType(categoryType: CategoryType) { switch (categoryType) { case 'income': return income.url; case 'expense': return expense.url; } } function indexRouteForType(categoryType: CategoryType) { switch (categoryType) { case 'income': return income; case 'expense': return expense; } } export default function CategoriesIndex({ categories, query, categoryType, parents, }: CategoriesIndexProps) { const [createOpen, setCreateOpen] = useState(false); const [editingCategory, setEditingCategory] = useState( null, ); const columns = useMemo(() => { return [ columnHelper.accessor('name', { header: ({ column }) => ( ), cell: ({ row }) => (
{row.original.name}
), enableSorting: true, }), columnHelper.display({ id: 'parent', header: 'Parent', cell: ({ row }) => row.original.parent?.name ?? '—', }), columnHelper.accessor('icon', { header: 'Icon', cell: ({ getValue }) => getValue() ?? '—', enableSorting: false, }), columnHelper.display({ id: 'actions', header: 'Actions', cell: ({ row }) => ( setEditingCategory(row.original)} /> ), }), ] as CategoryTableColumns; }, []); const indexRoute = indexRouteForType(categoryType); const pageTitle = categoryPageTitle(categoryType); useEffect(() => { setLayoutProps({ breadcrumbs: [ { title: pageTitle, href: indexRoute(), }, ], }); }, [indexRoute, pageTitle]); return ( <>

{pageTitle}

Manage your{' '} {categoryTypeLabel(categoryType).toLowerCase()}{' '} categories.

indexUrlForType(categoryType)(params)} reload={['categories', 'query', 'parents']} />
{ if (!open) { setEditingCategory(null); } }} categoryType={categoryType} parents={parents} category={editingCategory} /> ); }