46937bbcb9
Client and company detail pages each gain an Addresses tab with click-to-edit fields wired to the existing CountryCombobox/SubdivisionCombobox primitives. Adds a primary toggle that demotes the previous primary inside one transaction so the partial unique index never trips. - New service helpers: list/add/update/remove ClientAddress + CompanyAddress - New routes: /api/v1/clients/[id]/addresses[/addressId], same under companies/ - New shared component: <AddressesEditor> reused by both detail surfaces - Integration tests cover happy path, primary demotion, and tenant scoping Tests: 747/747 vitest (was 741, +6 address tests). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
106 lines
2.8 KiB
TypeScript
106 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
|
|
import { DetailLayout } from '@/components/shared/detail-layout';
|
|
import { ClientDetailHeader } from '@/components/clients/client-detail-header';
|
|
import { getClientTabs } from '@/components/clients/client-tabs';
|
|
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
|
|
import { apiFetch } from '@/lib/api/client';
|
|
import type { Address } from '@/components/shared/addresses-editor';
|
|
|
|
interface ClientData {
|
|
id: string;
|
|
portId: string;
|
|
fullName: string;
|
|
nationalityIso: string | null;
|
|
preferredContactMethod: string | null;
|
|
preferredLanguage: string | null;
|
|
timezone: string | null;
|
|
source: string | null;
|
|
sourceDetails: string | null;
|
|
archivedAt: string | null;
|
|
clientPortalEnabled: boolean;
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
contacts: Array<{
|
|
id: string;
|
|
channel: string;
|
|
value: string;
|
|
label: string | null;
|
|
isPrimary: boolean;
|
|
notes: string | null;
|
|
}>;
|
|
tags: Array<{
|
|
id: string;
|
|
name: string;
|
|
color: string;
|
|
}>;
|
|
yachts: Array<{
|
|
id: string;
|
|
name: string;
|
|
hullNumber: string | null;
|
|
registration: string | null;
|
|
lengthFt: string | null;
|
|
widthFt: string | null;
|
|
status: string;
|
|
}>;
|
|
companies: Array<{
|
|
membershipId: string;
|
|
role: string;
|
|
isPrimary: boolean;
|
|
startDate: string | Date;
|
|
company: {
|
|
id: string;
|
|
name: string;
|
|
legalName: string | null;
|
|
status: string;
|
|
};
|
|
}>;
|
|
activeReservations: Array<{
|
|
id: string;
|
|
berthId: string;
|
|
yachtId: string;
|
|
startDate: string | Date;
|
|
tenureType: string;
|
|
status: string;
|
|
}>;
|
|
addresses: Address[];
|
|
}
|
|
|
|
interface ClientDetailProps {
|
|
clientId: string;
|
|
currentUserId?: string;
|
|
}
|
|
|
|
export function ClientDetail({ clientId, currentUserId }: ClientDetailProps) {
|
|
const { data, isLoading } = useQuery<ClientData>({
|
|
queryKey: ['clients', clientId],
|
|
queryFn: () =>
|
|
apiFetch<{ data: ClientData }>(`/api/v1/clients/${clientId}`).then((r) => r.data),
|
|
});
|
|
|
|
useRealtimeInvalidation({
|
|
'client:updated': [['clients', clientId]],
|
|
'client:archived': [['clients', clientId]],
|
|
'client:restored': [['clients', clientId]],
|
|
'yacht:ownership_transferred': [['clients', clientId]],
|
|
'company_membership:added': [['clients', clientId]],
|
|
'company_membership:ended': [['clients', clientId]],
|
|
'berth_reservation:activated': [['clients', clientId]],
|
|
'berth_reservation:ended': [['clients', clientId]],
|
|
'berth_reservation:cancelled': [['clients', clientId]],
|
|
});
|
|
|
|
const tabs = data ? getClientTabs({ clientId, currentUserId, client: data }) : [];
|
|
|
|
return (
|
|
<DetailLayout
|
|
header={data ? <ClientDetailHeader client={data} /> : null}
|
|
tabs={tabs}
|
|
defaultTab="overview"
|
|
isLoading={isLoading}
|
|
/>
|
|
);
|
|
}
|