82 lines
2.1 KiB
TypeScript
82 lines
2.1 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';
|
||
|
|
|
||
|
|
interface ClientData {
|
||
|
|
id: string;
|
||
|
|
portId: string;
|
||
|
|
fullName: string;
|
||
|
|
companyName: string | null;
|
||
|
|
nationality: string | null;
|
||
|
|
isProxy: boolean;
|
||
|
|
proxyType: string | null;
|
||
|
|
actualOwnerName: string | null;
|
||
|
|
yachtName: string | null;
|
||
|
|
yachtLengthFt: string | null;
|
||
|
|
yachtWidthFt: string | null;
|
||
|
|
yachtDraftFt: string | null;
|
||
|
|
yachtLengthM: string | null;
|
||
|
|
yachtWidthM: string | null;
|
||
|
|
yachtDraftM: string | null;
|
||
|
|
berthSizeDesired: string | null;
|
||
|
|
preferredContactMethod: string | null;
|
||
|
|
preferredLanguage: string | null;
|
||
|
|
timezone: string | null;
|
||
|
|
source: string | null;
|
||
|
|
sourceDetails: string | null;
|
||
|
|
archivedAt: string | null;
|
||
|
|
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;
|
||
|
|
}>;
|
||
|
|
}
|
||
|
|
|
||
|
|
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]],
|
||
|
|
});
|
||
|
|
|
||
|
|
const tabs = data
|
||
|
|
? getClientTabs({ clientId, currentUserId, client: data })
|
||
|
|
: [];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DetailLayout
|
||
|
|
header={data ? <ClientDetailHeader client={data} /> : null}
|
||
|
|
tabs={tabs}
|
||
|
|
defaultTab="overview"
|
||
|
|
isLoading={isLoading}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|