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/invoices/invoice-card.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { format } from 'date-fns';
+import {
+  Calendar,
+  CreditCard,
+  Eye,
+  FileText,
+  MoreHorizontal,
+  Send,
+  Trash2,
+  User,
+} from 'lucide-react';
+import Link from 'next/link';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ListCard, ListCardAvatar, ListCardMeta } from '@/components/shared/list-card';
+import { cn } from '@/lib/utils';
+import type { InvoiceRow } from './invoice-columns';
+
+const STATUS_COLORS: Record<string, string> = {
+  draft: 'bg-gray-100 text-gray-700 border-gray-200',
+  sent: 'bg-blue-100 text-blue-700 border-blue-200',
+  paid: 'bg-green-100 text-green-700 border-green-200',
+  overdue: 'bg-red-100 text-red-700 border-red-200',
+  cancelled: 'bg-gray-100 text-gray-500 border-gray-200',
+};
+
+/**
+ * Accent bar encodes payment completeness using `status`:
+ *   paid     → green
+ *   overdue  → orange (past-due unpaid)
+ *   sent     → slate (awaiting payment, not yet overdue)
+ *   draft    → slate-200
+ *   other    → slate-300
+ */
+const STATUS_ACCENT: Record<string, string> = {
+  paid: 'bg-emerald-400',
+  overdue: 'bg-orange-400',
+  sent: 'bg-slate-300',
+  draft: 'bg-slate-200',
+  cancelled: 'bg-slate-200',
+};
+
+function formatAmount(total: string, currency: string): string {
+  try {
+    return new Intl.NumberFormat('en', { style: 'currency', currency }).format(Number(total));
+  } catch {
+    return `${currency} ${total}`;
+  }
+}
+
+interface InvoiceCardProps {
+  invoice: InvoiceRow;
+  portSlug: string;
+  onSend?: (invoice: InvoiceRow) => void;
+  onRecordPayment?: (invoice: InvoiceRow) => void;
+  onDelete?: (invoice: InvoiceRow) => void;
+}
+
+export function InvoiceCard({
+  invoice,
+  portSlug,
+  onSend,
+  onRecordPayment,
+  onDelete,
+}: InvoiceCardProps) {
+  const statusColor = STATUS_COLORS[invoice.status] ?? STATUS_COLORS.draft;
+  const accentClass = STATUS_ACCENT[invoice.status] ?? 'bg-slate-300';
+
+  let dueDateFormatted: string | null = null;
+  try {
+    dueDateFormatted = format(new Date(invoice.dueDate), 'MMM d, yyyy');
+  } catch {
+    dueDateFormatted = invoice.dueDate;
+  }
+
+  const amountFormatted = formatAmount(invoice.total, invoice.currency);
+
+  return (
+    <ListCard
+      href={`/${portSlug}/invoices/${invoice.id}`}
+      ariaLabel={`Invoice ${invoice.invoiceNumber}`}
+      accentClassName={accentClass}
+      actions={
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`Actions for invoice ${invoice.invoiceNumber}`}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem asChild>
+              <Link href={`/${portSlug}/invoices/${invoice.id}`}>
+                <Eye className="mr-2 h-3.5 w-3.5" />
+                View
+              </Link>
+            </DropdownMenuItem>
+            {invoice.pdfFileId ? (
+              <DropdownMenuItem asChild>
+                <Link href={`/api/v1/files/${invoice.pdfFileId}/preview`} target="_blank">
+                  <FileText className="mr-2 h-3.5 w-3.5" />
+                  View PDF
+                </Link>
+              </DropdownMenuItem>
+            ) : null}
+            {invoice.status === 'draft' && onSend ? (
+              <DropdownMenuItem onClick={() => onSend(invoice)}>
+                <Send className="mr-2 h-3.5 w-3.5" />
+                Send
+              </DropdownMenuItem>
+            ) : null}
+            {(invoice.status === 'sent' || invoice.status === 'overdue') && onRecordPayment ? (
+              <DropdownMenuItem onClick={() => onRecordPayment(invoice)}>
+                <CreditCard className="mr-2 h-3.5 w-3.5" />
+                Record Payment
+              </DropdownMenuItem>
+            ) : null}
+            {invoice.status === 'draft' && onDelete ? (
+              <DropdownMenuItem className="text-destructive" onClick={() => onDelete(invoice)}>
+                <Trash2 className="mr-2 h-3.5 w-3.5" />
+                Delete
+              </DropdownMenuItem>
+            ) : null}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      }
+    >
+      <div className="flex items-start gap-3">
+        <ListCardAvatar icon={<FileText className="h-5 w-5" />} />
+        <div className="min-w-0 flex-1">
+          {/* Title row: invoice number + spacer for actions */}
+          <div className="flex items-start justify-between gap-2">
+            <h3 className="truncate font-mono text-base font-semibold tabular-nums tracking-tight text-foreground">
+              {invoice.invoiceNumber}
+            </h3>
+            <span aria-hidden className="block h-9 w-9 shrink-0" />
+          </div>
+
+          {/* Client name */}
+          <p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
+            <User className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
+            <span className="truncate">{invoice.clientName}</span>
+          </p>
+
+          {/* Amount — prominent */}
+          <p className="mt-1 text-base font-semibold tabular-nums text-foreground">
+            {amountFormatted}
+          </p>
+
+          {/* Due date */}
+          {dueDateFormatted ? (
+            <div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground">
+              <ListCardMeta icon={<Calendar className="h-3 w-3" />}>
+                Due {dueDateFormatted}
+              </ListCardMeta>
+            </div>
+          ) : null}
+
+          {/* Status pill */}
+          <div className="mt-1.5">
+            <span
+              className={cn(
+                'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium capitalize',
+                statusColor,
+              )}
+            >
+              {invoice.status}
+            </span>
+          </div>
+        </div>
+      </div>
+    </ListCard>
+  );
+}