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:*.
104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useParams } from 'next/navigation';
|
|
import { format } from 'date-fns';
|
|
|
|
import {
|
|
Table,
|
|
TableHeader,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { EmptyState } from '@/components/shared/empty-state';
|
|
|
|
interface ClientCompaniesTabProps {
|
|
clientId: string;
|
|
companies: Array<{
|
|
membershipId: string;
|
|
role: string;
|
|
isPrimary: boolean;
|
|
startDate: string | Date;
|
|
company: {
|
|
id: string;
|
|
name: string;
|
|
legalName: string | null;
|
|
status: string;
|
|
};
|
|
}>;
|
|
}
|
|
|
|
function formatSince(startDate: string | Date): string {
|
|
const d = typeof startDate === 'string' ? new Date(startDate) : startDate;
|
|
if (Number.isNaN(d.getTime())) return '—';
|
|
return format(d, 'MMM d, yyyy');
|
|
}
|
|
|
|
export function ClientCompaniesTab({ clientId: _clientId, companies }: ClientCompaniesTabProps) {
|
|
const routeParams = useParams<{ portSlug: string }>();
|
|
const portSlug = routeParams?.portSlug ?? '';
|
|
|
|
if (companies.length === 0) {
|
|
return (
|
|
<EmptyState
|
|
title="No company memberships"
|
|
description="This client is not affiliated with any companies yet. Add a membership from a company's detail page."
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<h3 className="text-sm font-medium">Company affiliations</h3>
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Company</TableHead>
|
|
<TableHead>Role</TableHead>
|
|
<TableHead>Primary</TableHead>
|
|
<TableHead>Since</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{companies.map((m) => (
|
|
<TableRow key={m.membershipId}>
|
|
<TableCell>
|
|
<Link
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
href={`/${portSlug}/companies/${m.company.id}` as any}
|
|
className="text-primary hover:underline"
|
|
>
|
|
{m.company.name}
|
|
</Link>
|
|
{m.company.legalName && (
|
|
<span className="ml-2 text-xs text-muted-foreground">
|
|
({m.company.legalName})
|
|
</span>
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="capitalize">{m.role.replace('_', ' ')}</TableCell>
|
|
<TableCell>
|
|
{m.isPrimary ? (
|
|
<Badge variant="secondary" className="text-xs">
|
|
Primary
|
|
</Badge>
|
|
) : (
|
|
<span className="text-muted-foreground">—</span>
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground text-sm">
|
|
{formatSince(m.startDate)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|