import React, { useState, useEffect } from 'react'; import { Head, router } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Category } from '@/types'; import { FolderTree, Plus, Edit3, X } from '@/Components/AnimatedIcons'; interface Props { categories: Category[]; } export default function CategoriesIndex({ categories }: Props) { const [showModal, setShowModal] = useState(false); const [editingCategory, setEditingCategory] = useState(null); const [name, setName] = useState(''); const [description, setDescription] = useState(''); const [accentColor, setAccentColor] = useState(() => localStorage.getItem('admin_accent_color') || 'pink'); useEffect(() => { const handleAccentChange = (e: CustomEvent) => setAccentColor(e.detail); window.addEventListener('theme_accent_changed', handleAccentChange as EventListener); return () => window.removeEventListener('theme_accent_changed', handleAccentChange as EventListener); }, []); const accentBg = accentColor === 'seagreen' ? 'bg-[#0CA996] hover:bg-[#098878]' : 'bg-[#FF0D8F] hover:bg-[#d90978]'; const accentText = accentColor === 'seagreen' ? 'text-[#0CA996]' : 'text-[#FF0D8F]'; const openCreateModal = () => { setEditingCategory(null); setName(''); setDescription(''); setShowModal(true); }; const openEditModal = (c: Category) => { setEditingCategory(c); setName(c.name); setDescription(c.description || ''); setShowModal(true); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const payload = { name, description }; if (editingCategory) { router.put(route('admin.categories.update', editingCategory.id), payload, { onSuccess: () => setShowModal(false), }); } else { router.post(route('admin.categories.store'), payload, { onSuccess: () => setShowModal(false), }); } }; return (

Category Catalogue

Organize bakery products into celebratory categories

{categories.map((cat) => (

{cat.name}

{cat.products_count ?? 0} Products

{cat.description || 'No description provided'}

))}
{showModal && (

{editingCategory ? 'Edit Category' : 'Add New Category'}

setName(e.target.value)} placeholder="e.g. Cakes, Pastries, Beverages" className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-semibold text-slate-900 dark:text-white focus:outline-none" required />