b75834ab7e
- ClientData in client-detail.tsx now reflects the stripped shape from Task 8.2 (drop companyName/isProxy/proxy*/yacht*/berthSizeDesired) and gains yachts / companies / activeReservations arrays. - client-tabs.tsx: Overview trimmed (personal, contacts, source, tags); three new count-badged tabs (Yachts, Companies, Reservations). - New client-yachts-tab.tsx renders owned yachts + Add yacht CTA (TODO: YachtForm preset-owner wiring for v2). - New client-companies-tab.tsx renders memberships with Primary badge and since-date; management still lives on the company detail page. - New client-reservations-tab.tsx maps activeReservations into ReservationRow shape and delegates to <ReservationList showBerth />. - client-columns.tsx drops companyName column (TODO: add Yachts count + Primary company once list endpoint joins those). - client-filters.tsx drops isProxy filter. - Wire realtime invalidations for yacht:ownership_transferred, company_membership:added/ended, and berth_reservation:*.
98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import Link from 'next/link';
|
||
import { useParams } from 'next/navigation';
|
||
import { Plus } from 'lucide-react';
|
||
|
||
import { Button } from '@/components/ui/button';
|
||
import {
|
||
Table,
|
||
TableHeader,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableRow,
|
||
} from '@/components/ui/table';
|
||
import { EmptyState } from '@/components/shared/empty-state';
|
||
import { PermissionGate } from '@/components/shared/permission-gate';
|
||
import { YachtForm } from '@/components/yachts/yacht-form';
|
||
|
||
interface ClientYachtsTabProps {
|
||
clientId: string;
|
||
yachts: Array<{
|
||
id: string;
|
||
name: string;
|
||
hullNumber: string | null;
|
||
registration: string | null;
|
||
lengthFt: string | null;
|
||
widthFt: string | null;
|
||
status: string;
|
||
}>;
|
||
}
|
||
|
||
export function ClientYachtsTab({ clientId: _clientId, yachts }: ClientYachtsTabProps) {
|
||
const routeParams = useParams<{ portSlug: string }>();
|
||
const portSlug = routeParams?.portSlug ?? '';
|
||
const [createOpen, setCreateOpen] = useState(false);
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-sm font-medium">Client-owned yachts</h3>
|
||
<PermissionGate resource="yachts" action="create">
|
||
<Button size="sm" onClick={() => setCreateOpen(true)}>
|
||
<Plus className="mr-1.5 h-4 w-4" />
|
||
Add yacht
|
||
</Button>
|
||
</PermissionGate>
|
||
</div>
|
||
|
||
{yachts.length === 0 ? (
|
||
<EmptyState title="No yachts" description="No yachts owned by this client yet." />
|
||
) : (
|
||
<div className="rounded-md border">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>Name</TableHead>
|
||
<TableHead>Dimensions</TableHead>
|
||
<TableHead>Hull Number</TableHead>
|
||
<TableHead>Status</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{yachts.map((y) => (
|
||
<TableRow key={y.id}>
|
||
<TableCell>
|
||
<Link
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
href={`/${portSlug}/yachts/${y.id}` as any}
|
||
className="text-primary hover:underline"
|
||
>
|
||
{y.name}
|
||
</Link>
|
||
</TableCell>
|
||
<TableCell>
|
||
{y.lengthFt && y.widthFt ? `${y.lengthFt} × ${y.widthFt} ft` : '—'}
|
||
</TableCell>
|
||
<TableCell>{y.hullNumber ?? '—'}</TableCell>
|
||
<TableCell className="capitalize">{y.status.replace('_', ' ')}</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
)}
|
||
|
||
{/*
|
||
TODO: YachtForm (Task 5.2) does not yet accept a preset owner prop.
|
||
When opened here, the user must manually pick this client in the owner
|
||
picker. Wire an `initialOwner` prop into YachtForm in a follow-up so
|
||
we can pre-select `{ type: 'client', id: clientId }`.
|
||
*/}
|
||
{createOpen && <YachtForm open={createOpen} onOpenChange={setCreateOpen} />}
|
||
</div>
|
||
);
|
||
}
|