import React, { useState, useEffect } from 'react'; import { Head, useForm, usePage, router } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Trash2, Plus, X } from '@/Components/AnimatedIcons'; import { PageProps } from '@/types'; interface WastageItem { id: number; category: string; item_name: string; quantity: number; unit: string; estimated_value: number; reason: string; description: string | null; status: 'PENDING' | 'APPROVED' | 'REJECTED'; reported_at: string; reporter?: { name: string }; approver?: { name: string }; reported_by: number; } interface Props { records: { data: WastageItem[]; links: any[]; }; } export default function Index({ records }: Props) { const { auth } = usePage().props; const user = auth.user; const [showAddModal, setShowAddModal] = useState(false); 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 { data, setData, post, processing, errors, reset } = useForm({ category: 'Cakes', item_name: '', quantity: 1, unit: 'pcs', estimated_value: '', reason: 'DAMAGED', description: '', }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post(route('wastage.store'), { onSuccess: () => { reset(); setShowAddModal(false); } }); }; const handleApprove = (id: number) => { router.post(route('wastage.approve', id)); }; const handleReject = (id: number) => { router.post(route('wastage.reject', id)); }; const handleDelete = (id: number) => { if (confirm('Are you sure you want to permanently delete this wastage entry? This cannot be undone.')) { router.delete(route('wastage.destroy', id)); } }; return (
{/* Header */}

Operational Wastage & Spoilage Register

Log damaged cakes, expired pastries, and production losses for branch reporting

{/* Wastage Table */}
{records.data.map((row) => { const isOwnSubmission = row.reported_by === user?.id && !user?.is_admin; return ( ); })} {records.data.length === 0 && ( )}
Reported Date Item & Category Qty Est. Value Reason Reported By Status Actions
{new Date(row.reported_at).toLocaleString()} {row.item_name} {row.category} {row.quantity} {row.unit} ₹{Number(row.estimated_value).toFixed(2)} {row.reason} {row.reporter?.name || 'Staff'} {row.status} {row.status === 'PENDING' ? ( isOwnSubmission ? ( Self-approval restricted ) : (
) ) : ( {row.approver?.name ? `By ${row.approver.name}` : 'Processed'} )} {user?.is_admin && ( )}
No wastage records reported for this branch.
{/* CREATE WASTAGE MODAL */} {showAddModal && (

Report Spoilage / Wastage Entry

setData('item_name', 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-semibold text-slate-900 dark:text-white focus:outline-none" />
setData('quantity', parseInt(e.target.value, 10))} 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" />
setData('unit', 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-semibold text-slate-900 dark:text-white focus:outline-none" />
setData('estimated_value', 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 focus:outline-none" />