55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import Link from 'next/link';
|
||
|
|
import { useParams } from 'next/navigation';
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
|
||
|
|
import { PageHeader } from '@/components/shared/page-header';
|
||
|
|
import { ReservationList, type ReservationRow } from '@/components/reservations/reservation-list';
|
||
|
|
import { TableSkeleton } from '@/components/shared/loading-skeleton';
|
||
|
|
import { apiFetch } from '@/lib/api/client';
|
||
|
|
|
||
|
|
interface ReservationsApiResponse {
|
||
|
|
data: ReservationRow[];
|
||
|
|
pagination: { total: number; page: number; pageSize: number };
|
||
|
|
}
|
||
|
|
|
||
|
|
export function BerthReservationsList() {
|
||
|
|
const params = useParams<{ portSlug: string }>();
|
||
|
|
const portSlug = params?.portSlug ?? '';
|
||
|
|
|
||
|
|
const { data, isLoading } = useQuery<ReservationsApiResponse>({
|
||
|
|
queryKey: ['berth-reservations', 'list'],
|
||
|
|
queryFn: () => apiFetch('/api/v1/berth-reservations?page=1&limit=100&order=desc'),
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col gap-6">
|
||
|
|
<PageHeader
|
||
|
|
eyebrow="Marina"
|
||
|
|
title="Berth Reservations"
|
||
|
|
description="All reservations across all berths"
|
||
|
|
actions={
|
||
|
|
<Link
|
||
|
|
href={`/${portSlug}/berths`}
|
||
|
|
className="text-sm text-muted-foreground hover:text-foreground"
|
||
|
|
>
|
||
|
|
View berths
|
||
|
|
</Link>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{isLoading ? (
|
||
|
|
<TableSkeleton />
|
||
|
|
) : (
|
||
|
|
<ReservationList
|
||
|
|
reservations={data?.data ?? []}
|
||
|
|
showBerth
|
||
|
|
portSlug={portSlug}
|
||
|
|
emptyMessage="No reservations found."
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|