38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
|
||
|
|
import { DetailLayout } from '@/components/shared/detail-layout';
|
||
|
|
import { apiFetch } from '@/lib/api/client';
|
||
|
|
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
|
||
|
|
import { BerthDetailHeader } from './berth-detail-header';
|
||
|
|
import { buildBerthTabs } from './berth-tabs';
|
||
|
|
|
||
|
|
interface BerthDetailProps {
|
||
|
|
berthId: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function BerthDetail({ berthId }: BerthDetailProps) {
|
||
|
|
const { data, isLoading } = useQuery({
|
||
|
|
queryKey: ['berth', berthId],
|
||
|
|
queryFn: () =>
|
||
|
|
apiFetch<{ data: Record<string, unknown> }>(`/api/v1/berths/${berthId}`).then((r) => r.data),
|
||
|
|
});
|
||
|
|
|
||
|
|
useRealtimeInvalidation({
|
||
|
|
'berth:updated': [['berth', berthId]],
|
||
|
|
'berth:statusChanged': [['berth', berthId]],
|
||
|
|
});
|
||
|
|
|
||
|
|
const berth = data as any;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DetailLayout
|
||
|
|
isLoading={isLoading}
|
||
|
|
header={berth ? <BerthDetailHeader berth={berth} /> : null}
|
||
|
|
tabs={berth ? buildBerthTabs(berth) : []}
|
||
|
|
defaultTab="overview"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|