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:
@@ -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',
|
||||||
|
|||||||
@@ -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 “Show history” to load ended and cancelled reservations.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user