import { Head, Link, useForm } from '@inertiajs/react'; import { Download, FileText, FolderOpen, Pencil, Receipt, Scale, } from 'lucide-react'; import { EmptyState } from '@/components/empty-state'; import { PageHeader } from '@/components/page-header'; import { StatusBadge } from '@/components/status-badge'; import type { StatusTone } from '@/components/status-badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { Spinner } from '@/components/ui/spinner'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { usePermissions } from '@/hooks/use-permissions'; import { edit, exportMethod, index } from '@/routes/clients'; import { update as updateKyc } from '@/routes/clients/kyc'; type Matter = { id: string; matter_number: string; title: string; status: string; status_label: string; status_tone: StatusTone; stage: string | null; }; type Client = { id: string; client_number: string; name: string; kind_label: string; status: string; status_label: string; relationship_partner: string | null; kyc_completed: boolean; created_at: string | null; kyc_checklist: Record; representatives: { id: string; name: string; designation: string | null; is_primary: boolean; }[]; contact_detail: { email: string | null; phone: string | null; address: string | null; category: string | null; rc_number: string | null; }; }; type Props = { client: Client; matters: Matter[]; kycDocuments: { name: string; uploaded_at: string }[]; kycItems: string[]; }; const KYC_LABELS: Record = { id: 'Identity document', cac_docs: 'CAC documents', proof_of_address: 'Proof of address', mandate_letter: 'Mandate letter', }; function Field({ label, value }: { label: string; value: string | null }) { return (

{label}

{value || '—'}

); } export default function ClientShow({ client, matters, kycDocuments, kycItems, }: Props) { const { can } = usePermissions(); const kyc = useForm<{ kyc_checklist: Record; document: File | null; }>({ kyc_checklist: { ...client.kyc_checklist }, document: null, }); const saveKyc = (e: React.FormEvent) => { e.preventDefault(); kyc.post(updateKyc(client.id).url, { preserveScroll: true, forceFormData: true, }); }; return ( <>
{can('clients.export') && ( )} {can('contacts.edit') && ( )}
} />
{client.status_label} KYC {client.kyc_completed ? 'complete' : 'pending'}
Overview Matters Invoices Documents KYC
Client record Contact {client.representatives.length > 0 && ( Representatives Name Designation Primary {client.representatives.map( (rep) => ( {rep.name} {rep.designation ?? '—'} {rep.is_primary ? ( Primary ) : ( '—' )} ), )}
)}
{matters.length === 0 ? ( ) : ( Matter no. Title Stage Status {matters.map((m) => ( {m.matter_number} {m.title} {m.stage ?? '—'} {m.status_label} ))}
)}
KYC checklist
{kycItems.map((item) => ( ))}
{can('contacts.edit') && ( <>
kyc.setData( 'document', e.target .files?.[0] ?? null, ) } />
)}
Uploaded documents {kycDocuments.length === 0 ? ( ) : ( File Uploaded {kycDocuments.map((doc) => ( {doc.name} {doc.uploaded_at} ))}
)}
); }