import { motion } from 'framer-motion'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link } from '@inertiajs/react'; import { Badge } from '@/Components/ui/badge'; import { LinkButton } from '@/Components/ui/button'; import { formatCurrency, formatDate } from '@/lib/utils'; import { Edit, Truck, DollarSign, Mail, Phone, Globe, MapPin } from 'lucide-react'; export default function CustomerShow({ customer, orders, totalValue }: any) { const addressLines = [customer.address, customer.address2, customer.address3].filter(Boolean); const cityLine = [customer.city, customer.postcode].filter(Boolean).join(' '); const stateLine = [customer.state, customer.country].filter(Boolean).join(', '); return (
{/* Header */}

{customer.name}

{customer.company_reg_no && (

Reg. No. {customer.company_reg_no}

)}
Edit Customer ← Back
{/* Stat cards */}
{[ { icon: , label: 'Total Orders', value: customer.delivery_orders_count ?? orders.length, gradient: 'bg-blue-50 border-blue-100', valueColor: 'text-blue-700', }, { icon: , label: 'Total Value', value: totalValue, gradient: 'bg-purple-50 border-purple-100', valueColor: 'text-purple-700', isCurrency: true, }, ].map((card, i) => (
{card.label} {card.icon}
{card.isCurrency ? (

MYR {Number(card.value).toLocaleString('en-MY', { minimumFractionDigits: 2 })}

) : (

{card.value}

)}
))}
{/* Main grid */}
{/* Left — Contact + Business */}

Contact Details

{customer.contact_name && (

Person in Charge

{customer.contact_name}

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

{customer.phone}

)} {customer.url && ( )} {(addressLines.length > 0 || cityLine || stateLine) && (
{addressLines.map((line: string, i: number) =>
{line}
)} {cityLine &&
{cityLine}
} {stateLine &&
{stateLine}
}
)}

Business Info

{[ ['Tax ID', customer.tax_id], ['Reg No', customer.company_reg_no], ].filter(([, v]) => v).map(([label, value]) => (

{label}

{value}

))} {customer.notes && (

Notes

{customer.notes}

)} {!customer.tax_id && !customer.company_reg_no && !customer.notes && (

No business info recorded.

)}
{/* Right — Delivery orders */}

Delivery Orders

+ New DO
{orders.map((o: any) => ( ))}
DO # Date Status Amount
{o.do_number ?? Draft} {formatDate(o.created_at)} {formatCurrency(o.total_amount)}
{orders.length === 0 && (

No delivery orders yet.

)}
); }