e9359fc431
Promotes interests from a stub tab to a first-class surface on the client
detail page, and surfaces pipeline activity in two more places:
UI:
- New ClientInterestsTab (475 lines) — table of every active interest
for the client with stage-stepper visualization, lead category, source,
last-activity timestamp, and a drawer-on-tap row preview.
- New OverviewTab pipeline-summary panel above the existing 2-column
layout, rendering ClientPipelineSummary (already on this branch) in
its panel variant. Reps see the live pipeline at a glance without
leaving Overview.
- Removes "Preferred Language" inline field from the Overview tab and
the create form — unused, and the field added noise without driving
any downstream behavior.
- Tab order: Overview / Interests / Yachts / Companies / ... (Interests
moves up from the back of the list, where it was a stub anyway).
Data:
- listClients now returns interestCount + latestInterest{stage, mooring}
per row, joined from interests + berths in two parallel queries.
ClientRow type updated to surface them; Client list views can now
render "3 interests · last on D-02 (EOI Signed)" without a per-row
fetch.
- Contact rows in client detail now expose valueE164 + valueCountry to
the UI (already returned by the API; just wasn't typed through the
detail-page contract).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
117 lines
3.3 KiB
TypeScript
117 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
|
|
import { DetailLayout } from '@/components/shared/detail-layout';
|
|
import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
|
|
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;
|
|
valueE164: string | null;
|
|
valueCountry: string | null;
|
|
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),
|
|
});
|
|
|
|
const { setChrome } = useMobileChrome();
|
|
const titleForChrome: string | null = data?.fullName ?? null;
|
|
useEffect(() => {
|
|
setChrome({ title: titleForChrome, showBackButton: true });
|
|
return () => setChrome({ title: null, showBackButton: false });
|
|
}, [titleForChrome, setChrome]);
|
|
|
|
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}
|
|
/>
|
|
);
|
|
}
|