feat(tenancies-p6): module-gate entity tabs (berth / client / yacht)
- PortProvider exposes tenanciesModuleByPort + a useTenanciesModuleEnabled() hook that returns the flag for the currently-active port. Synchronous read off context (server-resolved in the dashboard layout), so no fetch latency / hydration flicker when the rep flips ports. - buildBerthTabs / getClientTabs / getYachtTabs gain a tenanciesModuleEnabled option. When false, the Tenancies tab is filtered out entirely. When true, it slots into the entity-specific position (after Interests on berth + yacht; after Companies on client). - BerthDetail / ClientDetail / YachtDetail pass the hook value through. Hook call ordered above the early-return so React's rules-of-hooks stays satisfied. Existing read-only tab content (Active tenancy card + History + the berth-side BerthReserveDialog "Create tenancy" CTA from P2) stays untouched — it just becomes visible when the module is on. Deferred (separate ship): generic TenancyCreateDialog that pre-fills clientId / yachtId from the parent entity context, so client / yacht tabs can mint a tenancy without bouncing through the berth detail page. Today client/yacht Tenancies tabs are read-only (the create entry-point is the berth tab); the generic dialog will land alongside the Edit / Renew / Transfer / End dialogs (design § P6 sub-tasks). Verified: tsc clean, 1493/1493 vitest. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -9,6 +9,7 @@ import { DetailNotFound } from '@/components/shared/detail-not-found';
|
||||
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 { useTenanciesModuleEnabled } from '@/providers/port-provider';
|
||||
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
|
||||
import { useBreadcrumbHint } from '@/hooks/use-breadcrumb-hint';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
@@ -118,6 +119,8 @@ export function ClientDetail({ clientId, currentUserId }: ClientDetailProps) {
|
||||
'berth_tenancy:cancelled': [['clients', clientId]],
|
||||
});
|
||||
|
||||
const tenanciesModuleEnabled = useTenanciesModuleEnabled();
|
||||
|
||||
if (error && !isLoading) {
|
||||
const status = (error as { status?: number } | null | undefined)?.status;
|
||||
return (
|
||||
@@ -130,7 +133,9 @@ export function ClientDetail({ clientId, currentUserId }: ClientDetailProps) {
|
||||
);
|
||||
}
|
||||
|
||||
const tabs = data ? getClientTabs({ clientId, currentUserId, client: data }) : [];
|
||||
const tabs = data
|
||||
? getClientTabs({ clientId, currentUserId, client: data, tenanciesModuleEnabled })
|
||||
: [];
|
||||
|
||||
return (
|
||||
<DetailLayout
|
||||
|
||||
@@ -250,8 +250,13 @@ function OverviewTab({
|
||||
);
|
||||
}
|
||||
|
||||
export function getClientTabs({ clientId, currentUserId, client }: ClientTabsOptions): DetailTab[] {
|
||||
return [
|
||||
export function getClientTabs({
|
||||
clientId,
|
||||
currentUserId,
|
||||
client,
|
||||
tenanciesModuleEnabled = false,
|
||||
}: ClientTabsOptions & { tenanciesModuleEnabled?: boolean }): DetailTab[] {
|
||||
const tabs: DetailTab[] = [
|
||||
{
|
||||
id: 'overview',
|
||||
label: 'Overview',
|
||||
@@ -275,12 +280,6 @@ export function getClientTabs({ clientId, currentUserId, client }: ClientTabsOpt
|
||||
badge: client.companies.length,
|
||||
content: <ClientCompaniesTab clientId={clientId} companies={client.companies} />,
|
||||
},
|
||||
{
|
||||
id: 'tenancies',
|
||||
label: 'Tenancies',
|
||||
badge: client.activeTenancies.length,
|
||||
content: <ClientTenanciesTab clientId={clientId} activeTenancies={client.activeTenancies} />,
|
||||
},
|
||||
{
|
||||
id: 'addresses',
|
||||
label: 'Addresses',
|
||||
@@ -323,4 +322,15 @@ export function getClientTabs({ clientId, currentUserId, client }: ClientTabsOpt
|
||||
),
|
||||
},
|
||||
];
|
||||
if (tenanciesModuleEnabled) {
|
||||
// Insert the Tenancies tab after Companies (index 4) so the entity
|
||||
// ordering reads: Overview → Interests → Yachts → Companies → Tenancies.
|
||||
tabs.splice(4, 0, {
|
||||
id: 'tenancies',
|
||||
label: 'Tenancies',
|
||||
badge: client.activeTenancies.length,
|
||||
content: <ClientTenanciesTab clientId={clientId} activeTenancies={client.activeTenancies} />,
|
||||
});
|
||||
}
|
||||
return tabs;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user