import React, { useState, useEffect } from 'react'; import { Head, Link, router, usePage } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Invoice, PageProps } from '@/types'; import { Receipt, Search, Eye, Printer, Ban, CheckCircle2, AlertOctagon, Clock, Filter, X, Trash2 } from '@/Components/AnimatedIcons'; interface Props { invoices: { data: Invoice[]; links: any[]; current_page: number; last_page: number; }; filters: { search?: string; status?: string; branch_id?: string; start_date?: string; end_date?: string; }; } export default function InvoicesIndex({ invoices, filters }: Props) { const { auth } = usePage().props; const user = auth.user; const [search, setSearch] = useState(filters.search || ''); const [status, setStatus] = useState(filters.status || ''); const [startDate, setStartDate] = useState(filters.start_date || ''); const [endDate, setEndDate] = useState(filters.end_date || ''); // Void Modal State const [selectedInvoice, setSelectedInvoice] = useState(null); const [voidReason, setVoidReason] = useState(''); const [showVoidModal, setShowVoidModal] = useState(false); const [voidMode, setVoidMode] = useState<'REQUEST' | 'APPROVE'>('REQUEST'); // Active theme accent state (Pink vs SeaGreen) const [accent, setAccent] = useState<'pink' | 'seagreen'>(() => { if (typeof window !== 'undefined') { return (localStorage.getItem('admin_accent_color') as any) || 'pink'; } return 'pink'; }); useEffect(() => { const handler = () => { const current = (localStorage.getItem('admin_accent_color') as any) || 'pink'; setAccent(current); }; window.addEventListener('theme_accent_changed', handler); return () => window.removeEventListener('theme_accent_changed', handler); }, []); const isPink = accent === 'pink'; const accentText = isPink ? 'text-[#FF0D8F] dark:text-[#FF4DB8]' : 'text-[#0CA996] dark:text-[#00C8B2]'; const accentBg = isPink ? 'bg-[#FF0D8F]' : 'bg-[#0CA996]'; const accentHoverBg = isPink ? 'hover:bg-[#E0067B]' : 'hover:bg-[#098777]'; const handleFilter = (e: React.FormEvent) => { e.preventDefault(); router.get(route('invoices.index'), { search, status, start_date: startDate, end_date: endDate, }, { preserveState: true }); }; const resetFilters = () => { setSearch(''); setStatus(''); setStartDate(''); setEndDate(''); router.get(route('invoices.index')); }; const openVoidModal = (invoice: Invoice, mode: 'REQUEST' | 'APPROVE') => { setSelectedInvoice(invoice); setVoidReason(''); setVoidMode(mode); setShowVoidModal(true); }; const submitVoid = () => { if (!selectedInvoice) return; if (!voidReason.trim()) return; if (voidMode === 'REQUEST') { router.post(route('invoices.void-request', selectedInvoice.id), { reason: voidReason, }, { onSuccess: () => setShowVoidModal(false), }); } else { router.post(route('invoices.void-approve', selectedInvoice.id), { reason: voidReason, }, { onSuccess: () => setShowVoidModal(false), }); } }; const handleDelete = (id: number) => { if (confirm('Are you sure you want to permanently delete this invoice? This cannot be undone.')) { router.delete(route('invoices.destroy', id)); } }; return (
{/* Header */}

Invoices Ledger

Historical sales transaction receipts, void requests & print ledger

+ Create New Bill in POS
{/* Filter Bar */}
setSearch(e.target.value)} placeholder="INV # or mobile" className="w-full pl-9 pr-3 py-1.5 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 rounded-xl text-xs font-medium text-slate-900 dark:text-white" />
setStartDate(e.target.value)} className="w-full p-1.5 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 rounded-xl text-xs font-medium text-slate-900 dark:text-white" />
setEndDate(e.target.value)} className="w-full p-1.5 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 rounded-xl text-xs font-medium text-slate-900 dark:text-white" />
{/* Table */}
{invoices.data.map((inv) => ( ))} {invoices.data.length === 0 && ( )}
Invoice # Date & Time Branch Customer Payment Method Grand Total Status Actions
{inv.invoice_number} {new Date(inv.issued_at).toLocaleString()} {inv.branch?.name || 'Main Branch'} {inv.customer ? (
{inv.customer.name} {inv.customer.mobile}
) : ( Walk-in )}
{inv.payments?.map((p, idx) => ( {p.payment_method} ₹{Number(p.amount).toFixed(0)} ))}
₹{Number(inv.grand_total).toFixed(2)} {inv.status === 'CONFIRMED' && ( CONFIRMED )} {inv.status === 'VOID_REQUESTED' && ( VOID REQUEST )} {inv.status === 'VOIDED' && ( VOIDED )}
{inv.status === 'CONFIRMED' && !user?.is_admin && ( )} {(inv.status === 'VOID_REQUESTED' || (inv.status === 'CONFIRMED' && user?.is_admin)) && user?.is_admin && ( )} {user?.is_admin && ( )}
No invoices found matching current filters.
{/* VOID MODAL */} {showVoidModal && selectedInvoice && (

{voidMode === 'REQUEST' ? 'Request Invoice Void' : 'Authorize Invoice Cancellation'}

Invoice Number: {selectedInvoice.invoice_number}
Grand Total: ₹{Number(selectedInvoice.grand_total).toFixed(2)}
{selectedInvoice.void_reason && (
Cashier Reason: {selectedInvoice.void_reason}
)}