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/companies/company-card.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { Archive, Building2, Eye, Hash, MapPin, MoreHorizontal, Pencil } 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 { getCountryName } from '@/lib/i18n/countries';
+import type { CompanyRow } from './company-columns';
+
+const STATUS_COLORS: Record<string, string> = {
+  active: 'bg-green-100 text-green-800 border-green-300',
+  dissolved: 'bg-red-100 text-red-800 border-red-300',
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  active: 'Active',
+  dissolved: 'Dissolved',
+};
+
+interface CompanyCardProps {
+  company: CompanyRow;
+  portSlug: string;
+  onEdit: (company: CompanyRow) => void;
+  onArchive: (company: CompanyRow) => void;
+}
+
+export function CompanyCard({ company, portSlug, onEdit, onArchive }: CompanyCardProps) {
+  const statusLabel = STATUS_LABELS[company.status] ?? company.status;
+  const statusColor =
+    STATUS_COLORS[company.status] ?? 'bg-muted text-muted-foreground border-muted';
+
+  const country = company.incorporationCountryIso
+    ? getCountryName(company.incorporationCountryIso, 'en')
+    : null;
+
+  const memberCount = company.memberCount ?? 0;
+  const yachtCount = company.yachtCount ?? 0;
+  const countParts: string[] = [];
+  if (memberCount > 0)
+    countParts.push(`${memberCount} ${memberCount === 1 ? 'member' : 'members'}`);
+  if (yachtCount > 0) countParts.push(`${yachtCount} ${yachtCount === 1 ? 'yacht' : 'yachts'}`);
+
+  // Skip legalName if it is identical to name or absent
+  const showLegalName =
+    company.legalName && company.legalName.toLowerCase() !== company.name.toLowerCase();
+
+  return (
+    <ListCard
+      href={`/${portSlug}/companies/${company.id}`}
+      ariaLabel={`Company ${company.name}`}
+      actions={
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`Actions for ${company.name}`}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem asChild>
+              <Link href={`/${portSlug}/companies/${company.id}`}>
+                <Eye className="mr-2 h-3.5 w-3.5" />
+                View
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => onEdit(company)}>
+              <Pencil className="mr-2 h-3.5 w-3.5" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem className="text-destructive" onClick={() => onArchive(company)}>
+              <Archive className="mr-2 h-3.5 w-3.5" />
+              Archive
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      }
+    >
+      <div className="flex items-start gap-3">
+        <ListCardAvatar icon={<Building2 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">
+              {company.name}
+            </h3>
+            <span aria-hidden className="block h-9 w-9 shrink-0" />
+          </div>
+
+          {/* Legal name subtitle */}
+          {showLegalName ? (
+            <p className="mt-0.5 truncate text-sm text-muted-foreground">{company.legalName}</p>
+          ) : null}
+
+          {/* Country + Tax ID meta line */}
+          {country || company.taxId ? (
+            <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+              {country ? (
+                <ListCardMeta icon={<MapPin className="h-3 w-3" />}>{country}</ListCardMeta>
+              ) : null}
+              {company.taxId ? (
+                <ListCardMeta icon={<Hash className="h-3 w-3" />}>{company.taxId}</ListCardMeta>
+              ) : null}
+            </div>
+          ) : null}
+
+          {/* Member / yacht counts */}
+          {countParts.length > 0 ? (
+            <p className="mt-0.5 text-xs text-muted-foreground">{countParts.join(' · ')}</p>
+          ) : null}
+
+          {/* Status pill */}
+          {company.status ? (
+            <div className="mt-1.5">
+              <span
+                className={cn(
+                  'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium',
+                  statusColor,
+                )}
+              >
+                {statusLabel}
+              </span>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </ListCard>
+  );
+}

src/components/companies/company-list.tsx

@@ -14,6 +14,7 @@ import { EmptyState } from '@/components/shared/empty-state';
 import { TableSkeleton } from '@/components/shared/loading-skeleton';
 import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog';
 import { PermissionGate } from '@/components/shared/permission-gate';
+import { CompanyCard } from '@/components/companies/company-card';
 import { CompanyForm } from '@/components/companies/company-form';
 import { companyFilterDefinitions } from '@/components/companies/company-filters';
 import { getCompanyColumns, type CompanyRow } from '@/components/companies/company-columns';
@@ -123,6 +124,14 @@ export function CompanyList() {
           onSortChange={setSort}
           isLoading={isFetching && !isLoading}
           getRowId={(row) => row.id}
+          cardRender={(row) => (
+            <CompanyCard
+              company={row.original}
+              portSlug={portSlug}
+              onEdit={setEditCompany}
+              onArchive={setArchiveCompany}
+            />
+          )}
           emptyState={
             <EmptyState
               title="No companies yet"