import React, { useState, useEffect } from 'react'; import { Head, useForm, usePage, router } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { DollarSign, Plus, X, Trash2 } from '@/Components/AnimatedIcons'; import { PageProps } from '@/types'; interface ExpenseItem { id: number; expense_date: string; category: string; amount: number; description: string | null; paid_by: string | null; payment_method: string; creator?: { name: string }; } interface Props { expenses: { data: ExpenseItem[]; links: any[]; }; } export default function Index({ expenses }: 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({ expense_date: new Date().toISOString().split('T')[0], category: 'Petty Cash', amount: '', description: '', paid_by: '', payment_method: 'CASH', }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post(route('expenses.store'), { onSuccess: () => { reset(); setShowAddModal(false); } }); }; const handleDelete = (id: number) => { if (confirm('Are you sure you want to permanently delete this expense? This cannot be undone.')) { router.delete(route('expenses.destroy', id)); } }; return (
{/* Header */}

Branch Operational Expense Register

Track store petty cash, electricity, packaging, cleaning, and maintenance expenses

{/* Expenses Table */}
{expenses.data.map((row) => ( ))} {expenses.data.length === 0 && ( )}
Expense Date Category & Description Amount Payment Method Paid By Logged By Actions
{row.expense_date} {row.category} {row.description && {row.description}} ₹{Number(row.amount).toFixed(2)} {row.payment_method} {row.paid_by || 'Store Cash'} {row.creator?.name || 'Staff'} {user?.is_admin && ( )}
No operational expenses logged yet.
{/* CREATE EXPENSE MODAL */} {showAddModal && (

Log Branch Expense Entry

setData('expense_date', 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('amount', 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" />
setData('paid_by', 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" />