import { Head, useForm } from '@inertiajs/react'; import { FolderTree, Plus, Save, X } from 'lucide-react'; import { useState } from 'react'; import { PageHeader, SectionCard } from '@/components/crm/page-header'; import { Field } from '@/components/crm/form-field'; import { NativeSelect } from '@/components/crm/native-select'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { store, update } from '@/routes/warehouse/categories'; import type { ProductCategoryRow } from '@/types'; export default function Categories({ categories, can, }: { categories: ProductCategoryRow[]; can: { manage: boolean }; }) { const [editing, setEditing] = useState(null); const [showCreate, setShowCreate] = useState(false); const topLevel = categories.filter( (category) => category.parent_id === null, ); return ( <>
Warehouse } title="Product categories" description="The headings the catalogue is organised by. They are rows, not code, so a company can shape the catalogue around its own range." actions={ can.manage ? ( ) : undefined } /> {can.manage && showCreate ? ( setShowCreate(false)} /> ) : null} {categories.length === 0 ? (

No categories yet. Run the starter catalogue seeder or add the first one.

) : (
Code Category Products Status {can.manage ? ( ) : null} {categories.map((category) => editing === category.id ? ( setEditing(null) } /> ) : ( {category.code ?? '—'} {category.parent_id ? `↳ ${category.name}` : category.name} {category.description ? ( { category.description } ) : null} {category.products_count} {category.is_active ? 'Active' : 'Inactive'} {can.manage ? ( ) : null} ), )}
)}
); } function CategoryForm({ category, topLevel, onDone, }: { category?: ProductCategoryRow; topLevel: ProductCategoryRow[]; onDone: () => void; }) { const form = useForm({ name: category?.name ?? '', code: category?.code ?? '', description: category?.description ?? '', parent_id: category?.parent_id ? String(category.parent_id) : '', sort_order: String(category?.sort_order ?? 0), is_active: category?.is_active ?? true, }); const submit = () => { if (category) { form.patch(update(category.id).url, { preserveScroll: true, onSuccess: onDone, }); } else { form.post(store().url, { preserveScroll: true, onSuccess: () => { form.reset(); onDone(); }, }); } }; return (
{ event.preventDefault(); submit(); }} className="flex flex-col gap-3" >
form.setData('name', event.target.value) } placeholder="Mounting equipment" required /> form.setData('code', event.target.value) } placeholder="D" maxLength={12} /> form.setData('parent_id', event.target.value) } > {topLevel .filter((option) => option.id !== category?.id) .map((option) => ( ))} form.setData('sort_order', event.target.value) } /> form.setData('description', event.target.value) } />
); }