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:
2026-05-25 15:29:22 +02:00
parent 3a48150d13
commit e4daa482de
8 changed files with 93 additions and 24 deletions

View File

@@ -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

View File

@@ -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;
}