feat(ui): yacht detail page with header, tabs, ownership history
Implements Task 5.3: server page passes yachtId to a client YachtDetail, which fetches via TanStack Query and renders the shared DetailLayout with Overview / Ownership History / Interests / Reservations / Notes / Tags tabs. Header shows name, dimensions, polymorphic owner link, status badge, and Edit / Transfer / Archive actions. Transfer is a stub dialog pending Task 5.5; Notes tab is a placeholder because NotesList does not yet support entityType='yachts'. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
263
src/components/yachts/yacht-detail-header.tsx
Normal file
263
src/components/yachts/yacht-detail-header.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Pencil, Archive, ArrowRightLeft } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog';
|
||||
import { YachtForm } from '@/components/yachts/yacht-form';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
|
||||
interface YachtDetailHeaderYacht {
|
||||
id: string;
|
||||
name: string;
|
||||
hullNumber: string | null;
|
||||
registration: string | null;
|
||||
flag: string | null;
|
||||
yearBuilt: number | null;
|
||||
builder: string | null;
|
||||
model: string | null;
|
||||
hullMaterial: string | null;
|
||||
lengthFt: string | null;
|
||||
widthFt: string | null;
|
||||
draftFt: string | null;
|
||||
lengthM: string | null;
|
||||
widthM: string | null;
|
||||
draftM: string | null;
|
||||
currentOwnerType: 'client' | 'company';
|
||||
currentOwnerId: string;
|
||||
status: string;
|
||||
notes: string | null;
|
||||
archivedAt: string | null;
|
||||
}
|
||||
|
||||
interface YachtDetailHeaderProps {
|
||||
yacht: YachtDetailHeaderYacht;
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
active: 'bg-green-100 text-green-800 border-green-300',
|
||||
retired: 'bg-gray-100 text-gray-800 border-gray-300',
|
||||
sold_away: 'bg-amber-100 text-amber-800 border-amber-300',
|
||||
};
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
active: 'Active',
|
||||
retired: 'Retired',
|
||||
sold_away: 'Sold Away',
|
||||
};
|
||||
|
||||
export function OwnerLink({
|
||||
portSlug,
|
||||
type,
|
||||
id,
|
||||
}: {
|
||||
portSlug: string;
|
||||
type: 'client' | 'company';
|
||||
id: string;
|
||||
}) {
|
||||
const { data } = useQuery<{ fullName?: string; name?: string }>({
|
||||
queryKey: [type === 'client' ? 'clients' : 'companies', id, 'name-only'],
|
||||
queryFn: () =>
|
||||
apiFetch<{ data: { fullName?: string; name?: string } }>(
|
||||
type === 'client' ? `/api/v1/clients/${id}` : `/api/v1/companies/${id}`,
|
||||
).then((r) => r.data),
|
||||
});
|
||||
|
||||
const label = type === 'client' ? data?.fullName : data?.name;
|
||||
const href = type === 'client' ? `/${portSlug}/clients/${id}` : `/${portSlug}/companies/${id}`;
|
||||
|
||||
return (
|
||||
<Link
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
href={href as any}
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
{label ?? `${type === 'client' ? 'Client' : 'Company'} ${id.slice(0, 8)}`}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function formatDimensions(yacht: YachtDetailHeaderYacht): string | null {
|
||||
const parts: string[] = [];
|
||||
if (yacht.lengthFt) parts.push(`${yacht.lengthFt} ft`);
|
||||
if (yacht.widthFt) parts.push(`${yacht.widthFt} ft`);
|
||||
|
||||
let summary: string | null = null;
|
||||
if (parts.length > 0) {
|
||||
summary = parts.join(' × ');
|
||||
}
|
||||
if (yacht.draftFt) {
|
||||
summary = summary ? `${summary} (draft ${yacht.draftFt} ft)` : `draft ${yacht.draftFt} ft`;
|
||||
}
|
||||
return summary;
|
||||
}
|
||||
|
||||
export function YachtDetailHeader({ yacht }: YachtDetailHeaderProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
const params = useParams<{ portSlug: string }>();
|
||||
const portSlug = params?.portSlug ?? '';
|
||||
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [archiveOpen, setArchiveOpen] = useState(false);
|
||||
const [transferOpen, setTransferOpen] = useState(false);
|
||||
|
||||
const isArchived = !!yacht.archivedAt;
|
||||
|
||||
const archiveMutation = useMutation({
|
||||
mutationFn: () => apiFetch(`/api/v1/yachts/${yacht.id}`, { method: 'DELETE' }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['yachts', yacht.id] });
|
||||
queryClient.invalidateQueries({ queryKey: ['yachts'] });
|
||||
toast.success('Yacht archived');
|
||||
setArchiveOpen(false);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
router.push(`/${portSlug}/yachts` as any);
|
||||
},
|
||||
onError: (err: Error) => {
|
||||
toast.error(err.message || 'Failed to archive yacht');
|
||||
},
|
||||
});
|
||||
|
||||
const dimensions = formatDimensions(yacht);
|
||||
const statusLabel = STATUS_LABELS[yacht.status] ?? yacht.status;
|
||||
const statusColor = STATUS_COLORS[yacht.status] ?? 'bg-muted text-muted-foreground border-muted';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3 flex-wrap">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h1 className="text-2xl font-bold text-foreground truncate">{yacht.name}</h1>
|
||||
<span
|
||||
className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusColor}`}
|
||||
>
|
||||
{statusLabel}
|
||||
</span>
|
||||
{isArchived && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
Archived
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{dimensions && <p className="text-muted-foreground mt-0.5 text-sm">{dimensions}</p>}
|
||||
|
||||
<div className="flex items-center gap-2 mt-2 text-sm text-muted-foreground">
|
||||
<span>Owner:</span>
|
||||
<OwnerLink
|
||||
portSlug={portSlug}
|
||||
type={yacht.currentOwnerType}
|
||||
id={yacht.currentOwnerId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
|
||||
<Pencil className="mr-1.5 h-3.5 w-3.5" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setTransferOpen(true)}
|
||||
disabled={isArchived}
|
||||
>
|
||||
<ArrowRightLeft className="mr-1.5 h-3.5 w-3.5" />
|
||||
Transfer
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setArchiveOpen(true)}
|
||||
disabled={isArchived}
|
||||
>
|
||||
<Archive className="mr-1.5 h-3.5 w-3.5" />
|
||||
Archive
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<YachtForm
|
||||
open={editOpen}
|
||||
onOpenChange={setEditOpen}
|
||||
yacht={{
|
||||
id: yacht.id,
|
||||
name: yacht.name,
|
||||
hullNumber: yacht.hullNumber,
|
||||
registration: yacht.registration,
|
||||
flag: yacht.flag,
|
||||
yearBuilt: yacht.yearBuilt,
|
||||
builder: yacht.builder,
|
||||
model: yacht.model,
|
||||
hullMaterial: yacht.hullMaterial,
|
||||
lengthFt: yacht.lengthFt,
|
||||
widthFt: yacht.widthFt,
|
||||
draftFt: yacht.draftFt,
|
||||
lengthM: yacht.lengthM,
|
||||
widthM: yacht.widthM,
|
||||
draftM: yacht.draftM,
|
||||
currentOwnerType: yacht.currentOwnerType,
|
||||
currentOwnerId: yacht.currentOwnerId,
|
||||
status: yacht.status,
|
||||
notes: yacht.notes,
|
||||
}}
|
||||
/>
|
||||
|
||||
<ArchiveConfirmDialog
|
||||
open={archiveOpen}
|
||||
onOpenChange={setArchiveOpen}
|
||||
entityName={yacht.name}
|
||||
entityType="Yacht"
|
||||
isArchived={isArchived}
|
||||
onConfirm={() => {
|
||||
archiveMutation.mutate();
|
||||
}}
|
||||
isLoading={archiveMutation.isPending}
|
||||
/>
|
||||
|
||||
{/* TODO(Task 5.5): Replace with real YachtTransferDialog component. */}
|
||||
<Dialog open={transferOpen} onOpenChange={setTransferOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Transfer Ownership</DialogTitle>
|
||||
<DialogDescription>
|
||||
The yacht ownership transfer flow will be implemented in Task 5.5.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="py-2 text-sm text-muted-foreground">
|
||||
This stub will be replaced with a form that lets you pick a new owner, effective date,
|
||||
reason, and notes — then calls{' '}
|
||||
<code className="rounded bg-muted px-1 text-xs">
|
||||
POST /api/v1/yachts/{'{id}'}/transfer
|
||||
</code>
|
||||
.
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setTransferOpen(false)}>
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user