fix(audit): replace 'coming soon' tab stubs (H7 + R2-M5)

H7: Three tabs were rendering "coming soon" placeholders to every user
on every detail page:
- Client Files: now uses ClientFilesTab (already existed) which renders
  the FileGrid + upload zone via /api/v1/files?clientId=...
- Client Reservations: split into Active / History sections; History
  lazy-loads ended + cancelled reservations on demand from
  /api/v1/berth-reservations?clientId=&status=
- Berth Waiting List + Maintenance Log: removed from buildBerthTabs
  until the underlying surfaces ship (schema tables exist; UIs don't)

R2-M5: Company Documents tab was a "Coming soon" EmptyState. Removed
from buildCompanyTabs until /api/v1/files accepts a companyId filter
(schema supports it, validator doesn't).

1175/1175 vitest passing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
2026-05-06 22:21:23 +02:00
parent 5fc68a5f34
commit 59b9e8f177
4 changed files with 86 additions and 41 deletions

View File

@@ -321,14 +321,6 @@ function OverviewTab({ berth }: { berth: BerthData }) {
); );
} }
function StubTab({ label }: { label: string }) {
return (
<div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center">
<p className="text-muted-foreground">{label} coming soon</p>
</div>
);
}
export function buildBerthTabs(berth: BerthData): DetailTab[] { export function buildBerthTabs(berth: BerthData): DetailTab[] {
return [ return [
{ {
@@ -351,16 +343,9 @@ export function buildBerthTabs(berth: BerthData): DetailTab[] {
label: 'Documents', label: 'Documents',
content: <BerthDocumentsTab berthId={berth.id} />, content: <BerthDocumentsTab berthId={berth.id} />,
}, },
{ // Waiting List + Maintenance Log tabs were stubs ("coming soon")
id: 'waiting-list', // visible to every operator. Hidden here until the
label: 'Waiting List', // berth_waiting_list / berth_maintenance_log feature surfaces ship.
content: <StubTab label="Waiting List" />,
},
{
id: 'maintenance',
label: 'Maintenance Log',
content: <StubTab label="Maintenance Log" />,
},
{ {
id: 'activity', id: 'activity',
label: 'Activity', label: 'Activity',

View File

@@ -1,6 +1,11 @@
'use client'; 'use client';
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { ReservationList, type ReservationRow } from '@/components/reservations/reservation-list'; import { ReservationList, type ReservationRow } from '@/components/reservations/reservation-list';
import { Button } from '@/components/ui/button';
import { apiFetch } from '@/lib/api/client';
interface ClientReservationsTabProps { interface ClientReservationsTabProps {
clientId: string; clientId: string;
@@ -14,14 +19,21 @@ interface ClientReservationsTabProps {
}>; }>;
} }
interface ReservationListResponse {
data: ReservationRow[];
pagination?: { total: number };
}
export function ClientReservationsTab({ export function ClientReservationsTab({
clientId, clientId,
activeReservations, activeReservations,
}: ClientReservationsTabProps) { }: ClientReservationsTabProps) {
const rows: ReservationRow[] = activeReservations.map((r) => ({ const [showHistory, setShowHistory] = useState(false);
const activeRows: ReservationRow[] = activeReservations.map((r) => ({
id: r.id, id: r.id,
berthId: r.berthId, berthId: r.berthId,
portId: '', // not rendered by ReservationList portId: '',
clientId, clientId,
yachtId: r.yachtId, yachtId: r.yachtId,
status: r.status as ReservationRow['status'], status: r.status as ReservationRow['status'],
@@ -33,19 +45,73 @@ export function ClientReservationsTab({
createdAt: '', createdAt: '',
})); }));
// Lazy-load history (ended + cancelled). Two parallel queries because
// the API takes one status at a time; combining once both resolve.
const endedQuery = useQuery({
queryKey: ['reservations', { clientId, status: 'ended' }],
queryFn: () =>
apiFetch<ReservationListResponse>(
`/api/v1/berth-reservations?clientId=${encodeURIComponent(clientId)}&status=ended&pageSize=50`,
),
enabled: showHistory,
});
const cancelledQuery = useQuery({
queryKey: ['reservations', { clientId, status: 'cancelled' }],
queryFn: () =>
apiFetch<ReservationListResponse>(
`/api/v1/berth-reservations?clientId=${encodeURIComponent(clientId)}&status=cancelled&pageSize=50`,
),
enabled: showHistory,
});
const historyRows: ReservationRow[] = [
...(endedQuery.data?.data ?? []),
...(cancelledQuery.data?.data ?? []),
].sort((a, b) => (a.startDate < b.startDate ? 1 : -1));
const isHistoryLoading = showHistory && (endedQuery.isLoading || cancelledQuery.isLoading);
return ( return (
<div className="space-y-4"> <div className="space-y-6">
<div> <div>
<div className="flex items-center justify-between">
<h3 className="text-sm font-medium">Active reservations</h3> <h3 className="text-sm font-medium">Active reservations</h3>
<p className="text-xs text-muted-foreground mt-0.5">
Showing currently active reservations. History is coming soon.
</p>
</div> </div>
<ReservationList <ReservationList
reservations={rows} reservations={activeRows}
showBerth showBerth
emptyMessage="This client has no active reservations." emptyMessage="This client has no active reservations."
/> />
</div> </div>
<div>
<div className="flex items-center justify-between mb-2">
<h3 className="text-sm font-medium">History</h3>
<Button
size="sm"
variant="outline"
onClick={() => setShowHistory((v) => !v)}
disabled={isHistoryLoading}
>
{showHistory ? 'Hide history' : 'Show history'}
</Button>
</div>
{showHistory ? (
isHistoryLoading ? (
<p className="text-xs text-muted-foreground">Loading</p>
) : (
<ReservationList
reservations={historyRows}
showBerth
emptyMessage="No ended or cancelled reservations."
/>
)
) : (
<p className="text-xs text-muted-foreground">
Click &ldquo;Show history&rdquo; to load ended and cancelled reservations.
</p>
)}
</div>
</div>
); );
} }

View File

@@ -14,6 +14,7 @@ import { ClientPipelineSummary } from '@/components/clients/client-pipeline-summ
import { ClientYachtsTab } from '@/components/clients/client-yachts-tab'; import { ClientYachtsTab } from '@/components/clients/client-yachts-tab';
import { ClientCompaniesTab } from '@/components/clients/client-companies-tab'; import { ClientCompaniesTab } from '@/components/clients/client-companies-tab';
import { ClientReservationsTab } from '@/components/clients/client-reservations-tab'; import { ClientReservationsTab } from '@/components/clients/client-reservations-tab';
import { ClientFilesTab } from '@/components/clients/client-files-tab';
import { ContactsEditor } from '@/components/clients/contacts-editor'; import { ContactsEditor } from '@/components/clients/contacts-editor';
import { AddressesEditor, type Address } from '@/components/shared/addresses-editor'; import { AddressesEditor, type Address } from '@/components/shared/addresses-editor';
import { EntityActivityFeed } from '@/components/shared/entity-activity-feed'; import { EntityActivityFeed } from '@/components/shared/entity-activity-feed';
@@ -271,11 +272,7 @@ export function getClientTabs({ clientId, currentUserId, client }: ClientTabsOpt
{ {
id: 'files', id: 'files',
label: 'Files', label: 'Files',
content: ( content: <ClientFilesTab clientId={clientId} />,
<div className="text-center py-12 text-muted-foreground">
<p>File attachments coming soon.</p>
</div>
),
}, },
{ {
id: 'activity', id: 'activity',

View File

@@ -3,7 +3,6 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import type { DetailTab } from '@/components/shared/detail-layout'; import type { DetailTab } from '@/components/shared/detail-layout';
import { EmptyState } from '@/components/shared/empty-state';
import { InlineEditableField } from '@/components/shared/inline-editable-field'; import { InlineEditableField } from '@/components/shared/inline-editable-field';
import { InlineCountryField } from '@/components/shared/inline-country-field'; import { InlineCountryField } from '@/components/shared/inline-country-field';
import { SubdivisionCombobox } from '@/components/shared/subdivision-combobox'; import { SubdivisionCombobox } from '@/components/shared/subdivision-combobox';
@@ -227,11 +226,9 @@ export function getCompanyTabs({
/> />
), ),
}, },
{ // The Documents tab was a "Coming soon" stub. Hidden until the
id: 'documents', // /api/v1/files endpoint accepts a companyId filter (the schema
label: 'Documents', // supports it; the validator doesn't).
content: <EmptyState title="Documents" description="Coming soon" />,
},
{ {
id: 'notes', id: 'notes',
label: 'Notes', label: 'Notes',