import React, { useState, useEffect } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Category, Product } from '@/types'; import { Package, Plus, Search, Edit3, Power, FolderTree, X } from '@/Components/AnimatedIcons'; interface Props { products: { data: Product[]; links: any[]; }; categories: Category[]; filters: { search?: string; category_id?: string; }; } export default function ProductsIndex({ products, categories, filters }: Props) { const [search, setSearch] = useState(filters.search || ''); const [categoryId, setCategoryId] = useState(filters.category_id || ''); 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 accentBorder = accentColor === 'seagreen' ? 'border-[#0CA996]/30' : 'border-[#FF0D8F]/30'; // Modal State const [showModal, setShowModal] = useState(false); const [editingProduct, setEditingProduct] = useState(null); const [formCategory, setFormCategory] = useState(categories[0]?.id || 1); const [formName, setFormName] = useState(''); const [formSku, setFormSku] = useState(''); const [formPrice, setFormPrice] = useState(0); const [formDescription, setFormDescription] = useState(''); const openCreateModal = () => { setEditingProduct(null); setFormCategory(categories[0]?.id || 1); setFormName(''); setFormSku(`CK-${Math.floor(100 + Math.random() * 900)}`); setFormPrice(0); setFormDescription(''); setShowModal(true); }; const openEditModal = (p: Product) => { setEditingProduct(p); setFormCategory(p.category_id); setFormName(p.name); setFormSku(p.sku); setFormPrice(Number(p.selling_price)); setFormDescription(p.description || ''); setShowModal(true); }; const handleFilter = (e: React.FormEvent) => { e.preventDefault(); router.get(route('admin.products.index'), { search, category_id: categoryId, }, { preserveState: true }); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const payload = { category_id: formCategory, name: formName, sku: formSku, selling_price: formPrice, description: formDescription, }; if (editingProduct) { router.put(route('admin.products.update', editingProduct.id), payload, { onSuccess: () => setShowModal(false), }); } else { router.post(route('admin.products.store'), payload, { onSuccess: () => setShowModal(false), }); } }; const toggleStatus = (id: number) => { router.post(route('admin.products.toggle', id)); }; return (

{/* Header */}

Products & Bakery Items

Manage bakery item catalog, SKUs, and live POS availability

Categories

{/* Filter Bar */} {/* Table */}

{products.data.map((prod) => ( ))}

SKU	Product Name	Category	Selling Price	Status	Actions
{prod.sku}	{prod.name}	{prod.category?.name \|\| 'Uncategorized'}	₹{Number(prod.selling_price).toFixed(2)}	{prod.is_active ? 'Active' : 'Inactive'}

{/* CREATE / EDIT MODAL */} {showModal && (

{editingProduct ? 'Edit Bakery Item' : 'Add New Bakery Product'}

Category

Product Name setFormName(e.target.value)} placeholder="e.g. Belgian Truffle Cake 1kg" 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 />

SKU Code setFormSku(e.target.value)} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-bold text-slate-900 dark:text-white uppercase focus:outline-none" required />

Price (₹) setFormPrice(parseFloat(e.target.value) || 0)} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-bold text-slate-900 dark:text-white focus:outline-none" required />

Description (Optional)

setFormDescription(e.target.value)}
                  placeholder="Product ingredients, weight, or special notes..."
                  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"
                  rows={2}
                />
              </div>

<div className="pt-3 border-t border-slate-200 dark:border-slate-800 flex justify-end space-x-3">
                <button
                  type="button"
                  onClick={() => setShowModal(false)}
                  className="px-4 py-2.5 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-xl text-slate-700 dark:text-slate-300 font-semibold transition-colors"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className={`px-5 py-2.5 ${accentBg} text-white font-semibold rounded-xl shadow-md transition-all`}
                >
                  Save Product
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </AuthenticatedLayout>
  );
}