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[] {
return [
{
@@ -351,16 +343,9 @@ export function buildBerthTabs(berth: BerthData): DetailTab[] {
label: 'Documents',
content: <BerthDocumentsTab berthId={berth.id} />,
},
{
id: 'waiting-list',
label: 'Waiting List',
content: <StubTab label="Waiting List" />,
},
{
id: 'maintenance',
label: 'Maintenance Log',
content: <StubTab label="Maintenance Log" />,
},
// Waiting List + Maintenance Log tabs were stubs ("coming soon")
// visible to every operator. Hidden here until the
// berth_waiting_list / berth_maintenance_log feature surfaces ship.
{
id: 'activity',
label: 'Activity',

View File

@@ -1,6 +1,11 @@
'use client';
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { ReservationList, type ReservationRow } from '@/components/reservations/reservation-list';
import { Button } from '@/components/ui/button';
import { apiFetch } from '@/lib/api/client';
interface ClientReservationsTabProps {
clientId: string;
@@ -14,14 +19,21 @@ interface ClientReservationsTabProps {
}>;
}
interface ReservationListResponse {
data: ReservationRow[];
pagination?: { total: number };
}
export function ClientReservationsTab({
clientId,
activeReservations,
}: ClientReservationsTabProps) {
const rows: ReservationRow[] = activeReservations.map((r) => ({
const [showHistory, setShowHistory] = useState(false);
const activeRows: ReservationRow[] = activeReservations.map((r) => ({
id: r.id,
berthId: r.berthId,
portId: '', // not rendered by ReservationList
portId: '',
clientId,
yachtId: r.yachtId,
status: r.status as ReservationRow['status'],
@@ -33,19 +45,73 @@ export function ClientReservationsTab({
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 (
<div className="space-y-4">
<div className="space-y-6">
<div>
<div className="flex items-center justify-between">
<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>
<ReservationList
reservations={rows}
reservations={activeRows}
showBerth
emptyMessage="This client has no active reservations."
/>
</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 { ClientCompaniesTab } from '@/components/clients/client-companies-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 { AddressesEditor, type Address } from '@/components/shared/addresses-editor';
import { EntityActivityFeed } from '@/components/shared/entity-activity-feed';
@@ -271,11 +272,7 @@ export function getClientTabs({ clientId, currentUserId, client }: ClientTabsOpt
{
id: 'files',
label: 'Files',
content: (
<div className="text-center py-12 text-muted-foreground">
<p>File attachments coming soon.</p>
</div>
),
content: <ClientFilesTab clientId={clientId} />,
},
{
id: 'activity',

View File

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