import React, { useState, useEffect } from 'react'; import { Head, Link } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Customer, Invoice } from '@/types'; import { Phone, Mail, ArrowLeft } from '@/Components/AnimatedIcons'; interface Props { customer: Customer; } export default function CustomerShow({ customer }: Props) { 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]' : 'bg-[#FF0D8F]'; const accentText = accentColor === 'seagreen' ? 'text-[#0CA996]' : 'text-[#FF0D8F]'; const totalSpend = customer.invoices?.reduce((sum: number, inv: Invoice) => { return inv.status === 'CONFIRMED' ? sum + Number(inv.grand_total) : sum; }, 0) || 0; return (

Back to Customers {/* Customer Header Info */}

{customer.name.charAt(0)}

{customer.name}

{customer.mobile} {customer.email && ( {customer.email} )}

Total Lifetime Spend ₹{totalSpend.toFixed(2)}

{/* Order History */}

Purchase History ({customer.invoices?.length || 0} Invoices)

{customer.invoices?.map((inv) => ( ))}

Invoice #	Date	Branch	Cashier	Grand Total	Status	Action
{inv.invoice_number}	{new Date(inv.issued_at).toLocaleDateString()}	{inv.branch?.name}	{inv.cashier?.name}	₹{Number(inv.grand_total).toFixed(2)}	{inv.status}	Receipt

); }