feat(mobile): mobile cards for yachts, companies, berths, invoices, expenses

Five new <EntityCard> files using the shared <ListCard> shell, wired
into each list page's <DataTable> via cardRender. Desktop view
(lg+) is unchanged.

  - YachtCard:    Ship icon, owner subtitle (User/Building2 icon by
                  ownerType), dimensions in meters preferred, hull #,
                  status pill. No accent bar (status is free-text).
  - CompanyCard:  Building2 icon, legalName subtitle, country (MapPin)
                  + tax id (Hash) meta, member/yacht count line.
  - BerthCard:    Anchor icon, area subtitle (MapPin), dimensions
                  meta, status pill. Status-encoded accent bar
                  (emerald=available, amber=under_offer, slate=sold).
  - InvoiceCard:  FileText icon, client subtitle, due date (Calendar)
                  meta, prominent currency-formatted amount. Status
                  accent bar (emerald=paid, orange=overdue, ...).
  - ExpenseCard:  Receipt icon, category subtitle, expense date meta,
                  prominent amount, payment-status pill, "Possible
                  duplicate" pill when duplicateOf is set. Accent bar
                  by paymentStatus, overridden to amber when flagged
                  as duplicate.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/berths/berth-card.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { Activity, Anchor, MapPin, MoreHorizontal, Pencil } from 'lucide-react';
+import { useRouter, useParams } from 'next/navigation';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { TagBadge } from '@/components/shared/tag-badge';
+import { ListCard, ListCardAvatar, ListCardMeta } from '@/components/shared/list-card';
+import { cn } from '@/lib/utils';
+import type { BerthRow } from './berth-columns';
+
+const STATUS_VARIANTS: Record<string, string> = {
+  available: 'bg-green-100 text-green-800 border-green-200',
+  under_offer: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+  sold: 'bg-red-100 text-red-800 border-red-200',
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  available: 'Available',
+  under_offer: 'Under Offer',
+  sold: 'Sold',
+};
+
+const ACCENT_CLASS: Record<string, string> = {
+  available: 'bg-emerald-400',
+  under_offer: 'bg-amber-400',
+  sold: 'bg-slate-400',
+};
+
+function formatPrice(price: string, currency: string): string {
+  try {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: currency || 'USD',
+      maximumFractionDigits: 0,
+    }).format(Number(price));
+  } catch {
+    return `${currency} ${price}`;
+  }
+}
+
+interface BerthCardProps {
+  berth: BerthRow;
+}
+
+export function BerthCard({ berth }: BerthCardProps) {
+  const router = useRouter();
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
+
+  const statusLabel = STATUS_LABELS[berth.status] ?? berth.status;
+  const statusColor =
+    STATUS_VARIANTS[berth.status] ?? 'bg-muted text-muted-foreground border-muted';
+  const accentClass = ACCENT_CLASS[berth.status] ?? 'bg-slate-300';
+
+  // Dimensions string
+  let dimText: string | null = null;
+  if (berth.lengthM || berth.widthM) {
+    const l = berth.lengthM ?? '?';
+    const w = berth.widthM ?? '?';
+    dimText = `${l}m × ${w}m`;
+  }
+
+  const metaParts: string[] = [];
+  if (dimText) metaParts.push(dimText);
+  if (berth.price) metaParts.push(formatPrice(berth.price, berth.priceCurrency));
+
+  const tags = berth.tags ?? [];
+
+  return (
+    <ListCard
+      href={`/${portSlug}/berths/${berth.id}`}
+      ariaLabel={`Berth ${berth.mooringNumber}`}
+      accentClassName={accentClass}
+      actions={
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`Actions for berth ${berth.mooringNumber}`}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                router.push(`/${portSlug}/berths/${berth.id}`);
+              }}
+            >
+              <Activity className="mr-2 h-3.5 w-3.5" />
+              View details
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                router.push(`/${portSlug}/berths/${berth.id}?edit=true`);
+              }}
+            >
+              <Pencil className="mr-2 h-3.5 w-3.5" />
+              Edit
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      }
+    >
+      <div className="flex items-start gap-3">
+        <ListCardAvatar icon={<Anchor className="h-5 w-5" />} />
+        <div className="min-w-0 flex-1">
+          {/* Title row + spacer for actions button */}
+          <div className="flex items-start justify-between gap-2">
+            <h3 className="truncate text-base font-semibold tracking-tight text-foreground">
+              {berth.mooringNumber}
+            </h3>
+            <span aria-hidden className="block h-9 w-9 shrink-0" />
+          </div>
+
+          {/* Area subtitle */}
+          {berth.area ? (
+            <p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
+              <MapPin className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
+              <span className="truncate">{berth.area}</span>
+            </p>
+          ) : null}
+
+          {/* Dimensions · Price meta line */}
+          {metaParts.length > 0 ? (
+            <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
+              {metaParts.map((part, i) => (
+                <span key={part} className="inline-flex items-center gap-1">
+                  {i > 0 ? <span aria-hidden>·</span> : null}
+                  <ListCardMeta>{part}</ListCardMeta>
+                </span>
+              ))}
+            </div>
+          ) : null}
+
+          {/* Status pill */}
+          <div className="mt-1.5">
+            <span
+              className={cn(
+                'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium',
+                statusColor,
+              )}
+            >
+              {statusLabel}
+            </span>
+          </div>
+
+          {/* Tags */}
+          {tags.length > 0 ? (
+            <div className="mt-2 flex flex-wrap gap-1">
+              {tags.slice(0, 2).map((tag) => (
+                <TagBadge key={tag.id} name={tag.name} color={tag.color} />
+              ))}
+              {tags.length > 2 ? (
+                <span className="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">
+                  +{tags.length - 2}
+                </span>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </ListCard>
+  );
+}