import React, { useState, useEffect } from 'react'; import { Head, router } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Branch, User } from '@/types'; import { BarChart3, Printer, DollarSign, Package, Users, Clock } from '@/Components/AnimatedIcons'; interface Props { reportType: string; reportData: any; branches: Branch[]; cashiers: User[]; filters: { type: string; start_date: string; end_date: string; branch_id?: string; cashier_id?: string; payment_method?: string; }; } export default function ReportsIndex({ reportType, reportData, branches, cashiers, filters }: Props) { const [type, setType] = useState(filters.type || 'sales'); const [startDate, setStartDate] = useState(filters.start_date || ''); const [endDate, setEndDate] = useState(filters.end_date || ''); const [branchId, setBranchId] = useState(filters.branch_id || ''); const [cashierId, setCashierId] = useState(filters.cashier_id || ''); const [paymentMethod, setPaymentMethod] = useState(filters.payment_method || ''); 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 handleFilter = (e?: React.FormEvent) => { if (e) e.preventDefault(); router.get(route('admin.reports.index'), { type, start_date: startDate, end_date: endDate, branch_id: branchId, cashier_id: cashierId, payment_method: paymentMethod, }, { preserveState: true }); }; const switchTab = (newType: string) => { setType(newType); router.get(route('admin.reports.index'), { type: newType, start_date: startDate, end_date: endDate, branch_id: branchId, cashier_id: cashierId, payment_method: paymentMethod, }, { preserveState: true }); }; const handlePrint = () => { window.print(); }; return (

Financial & Sales Reports Center

Authoritative transaction analytics & financial reporting engine

{/* Report Type Tabs */}
{/* Filter Bar */}
setStartDate(e.target.value)} className="w-full p-2 border border-slate-200 dark:border-slate-800 dark:bg-slate-950 rounded-xl text-xs font-medium text-slate-900 dark:text-white focus:outline-none" />
setEndDate(e.target.value)} className="w-full p-2 border border-slate-200 dark:border-slate-800 dark:bg-slate-950 rounded-xl text-xs font-medium text-slate-900 dark:text-white focus:outline-none" />
{type === 'payments' && (
)}
{/* REPORT DATA VIEWS */} {/* 1. SALES REPORT */} {type === 'sales' && reportData?.summary && (
Net Revenue ₹{reportData.summary.total_sales.toFixed(2)}
Invoices Count {reportData.summary.total_bills}
GST Tax Collected ₹{reportData.summary.total_tax.toFixed(2)}
Total Discounts ₹{reportData.summary.total_discount.toFixed(2)}
{reportData.invoices?.data?.map((inv: any) => ( ))}
Invoice # Date Branch Cashier Tax Discount Grand Total
{inv.invoice_number} {new Date(inv.issued_at).toLocaleString()} {inv.branch?.name} {inv.cashier?.name} ₹{Number(inv.tax_amount).toFixed(2)} ₹{Number(inv.discount_amount).toFixed(2)} ₹{Number(inv.grand_total).toFixed(2)}
)} {/* 2. PAYMENTS REPORT */} {type === 'payments' && reportData?.summary && (
Cash Collection ₹{reportData.summary.cash.toFixed(2)}
UPI Collection ₹{reportData.summary.upi.toFixed(2)}
Card Collection ₹{reportData.summary.card.toFixed(2)}
Total Payments ₹{reportData.summary.total.toFixed(2)}
)} {/* 3. PRODUCT SALES REPORT */} {type === 'products' && reportData?.products && (
{reportData.products.data?.map((p: any, idx: number) => ( ))}
Product Name SKU Qty Sold Avg Unit Price Total Revenue
{p.product_name_snapshot} {p.sku_snapshot} {p.total_quantity} ₹{Number(p.avg_unit_price).toFixed(2)} ₹{Number(p.total_revenue).toFixed(2)}
)}
); }