84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
|
import { redirect } from 'next/navigation';
|
||
|
|
import { CalendarCheck } from 'lucide-react';
|
||
|
|
import type { Metadata } from 'next';
|
||
|
|
|
||
|
|
import { getPortalSession } from '@/lib/portal/auth';
|
||
|
|
import { getPortalUserReservations } from '@/lib/services/portal.service';
|
||
|
|
import { Badge } from '@/components/ui/badge';
|
||
|
|
|
||
|
|
export const metadata: Metadata = { title: 'My Reservations' };
|
||
|
|
|
||
|
|
const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
|
||
|
|
pending: 'secondary',
|
||
|
|
active: 'default',
|
||
|
|
ended: 'outline',
|
||
|
|
cancelled: 'destructive',
|
||
|
|
};
|
||
|
|
|
||
|
|
const TENURE_LABELS: Record<string, string> = {
|
||
|
|
permanent: 'Permanent',
|
||
|
|
fixed_term: 'Fixed term',
|
||
|
|
seasonal: 'Seasonal',
|
||
|
|
};
|
||
|
|
|
||
|
|
function formatDate(d: Date | string): string {
|
||
|
|
return new Date(d).toLocaleDateString('en-US', {
|
||
|
|
year: 'numeric',
|
||
|
|
month: 'short',
|
||
|
|
day: 'numeric',
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
export default async function PortalMyReservationsPage() {
|
||
|
|
const session = await getPortalSession();
|
||
|
|
if (!session) redirect('/portal/login');
|
||
|
|
|
||
|
|
const reservations = await getPortalUserReservations(session.clientId, session.portId);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div>
|
||
|
|
<h1 className="text-2xl font-semibold text-gray-900">My Reservations</h1>
|
||
|
|
<p className="text-sm text-gray-500 mt-1">Your current and pending berth reservations</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{reservations.length === 0 ? (
|
||
|
|
<div className="bg-white rounded-lg border p-12 text-center">
|
||
|
|
<CalendarCheck className="h-10 w-10 text-gray-300 mx-auto mb-3" />
|
||
|
|
<p className="text-gray-500 font-medium">No active reservations</p>
|
||
|
|
<p className="text-sm text-gray-400 mt-1">
|
||
|
|
Contact your port representative to discuss reservations.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-3">
|
||
|
|
{reservations.map((r) => (
|
||
|
|
<div key={r.id} className="bg-white rounded-lg border p-5">
|
||
|
|
<div className="flex items-start justify-between gap-4">
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<div className="flex items-center gap-2 mb-1">
|
||
|
|
<span className="font-medium text-gray-900">{r.yachtName ?? 'Yacht'}</span>
|
||
|
|
{r.berthMooringNumber && (
|
||
|
|
<span className="text-sm text-gray-400">— Berth {r.berthMooringNumber}</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<p className="text-sm text-gray-500">
|
||
|
|
{TENURE_LABELS[r.tenureType] ?? r.tenureType}
|
||
|
|
</p>
|
||
|
|
<div className="flex flex-wrap gap-3 mt-2 text-xs text-gray-400">
|
||
|
|
<span>
|
||
|
|
From {formatDate(r.startDate)}
|
||
|
|
{r.endDate ? ` to ${formatDate(r.endDate)}` : ' · ongoing'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Badge variant={STATUS_COLORS[r.status] ?? 'default'}>{r.status}</Badge>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|