feat(mobile): mobile card view for clients + interests lists

Adds optional cardRender prop to <DataTable> that switches the layout
to a vertical card list below lg: while keeping the same TanStack
table instance powering both views (pagination, sort, selection).

New shared shell:
  - <ListCard>          rounded card with optional left status accent bar,
                        whole-card link to detail page, top-right actions
                        slot, and tactile hover/active states.
  - <ListCardAvatar>    40px brand-tinted circle (initials or domain icon).
  - <ListCardMeta>      inline icon + muted text segment.
  - deriveInitials()    shared helper that ignores numeric tokens (so
                        "Recovery Test 1777" -> "RT", not "R1").

Clients and interests pages now render mobile cards via cardRender
using this shell; desktop view (lg+) is unchanged. Interests cards
encode pipeline stage as a left-edge accent strip whose saturation
deepens with pipeline progression (open -> completed). Berths display
with an Anchor icon; null-berth interests fall back to a Compass +
"General interest" italic label. Hot leads get a discreet "Hot" pill.

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

src/components/clients/client-card.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { Archive, MoreHorizontal, Pencil } from 'lucide-react';
+
+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,
+  deriveInitials,
+} from '@/components/shared/list-card';
+import { getCountryName } from '@/lib/i18n/countries';
+import type { ClientRow } from './client-columns';
+
+const SOURCE_LABELS: Record<string, string> = {
+  website: 'Website',
+  manual: 'Manual',
+  referral: 'Referral',
+  broker: 'Broker',
+};
+
+interface ClientCardProps {
+  client: ClientRow;
+  portSlug: string;
+  onEdit: (client: ClientRow) => void;
+  onArchive: (client: ClientRow) => void;
+}
+
+export function ClientCard({ client, portSlug, onEdit, onArchive }: ClientCardProps) {
+  const primary = client.contacts?.find((c) => c.isPrimary);
+  const nationality = client.nationalityIso ? getCountryName(client.nationalityIso, 'en') : null;
+  const sourceLabel = client.source ? (SOURCE_LABELS[client.source] ?? client.source) : null;
+  const yachtCount = client.yachtCount ?? 0;
+  const companyCount = client.companyCount ?? 0;
+  const tags = client.tags ?? [];
+
+  const meta = [nationality, sourceLabel].filter(Boolean) as string[];
+  const counts: string[] = [];
+  if (yachtCount > 0) counts.push(`${yachtCount} ${yachtCount === 1 ? 'yacht' : 'yachts'}`);
+  if (companyCount > 0)
+    counts.push(`${companyCount} ${companyCount === 1 ? 'company' : 'companies'}`);
+
+  return (
+    <ListCard
+      href={`/${portSlug}/clients/${client.id}`}
+      ariaLabel={`Client ${client.fullName}`}
+      actions={
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`Actions for ${client.fullName}`}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => onEdit(client)}>
+              <Pencil className="mr-2 h-3.5 w-3.5" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem className="text-destructive" onClick={() => onArchive(client)}>
+              <Archive className="mr-2 h-3.5 w-3.5" />
+              Archive
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      }
+    >
+      <div className="flex items-start gap-3">
+        <ListCardAvatar initials={deriveInitials(client.fullName)} />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-2">
+            <h3 className="truncate text-base font-semibold tracking-tight text-foreground">
+              {client.fullName}
+            </h3>
+            <span aria-hidden className="block h-9 w-9 shrink-0" />
+          </div>
+
+          {primary ? (
+            <p className="truncate text-sm text-muted-foreground">{primary.value}</p>
+          ) : null}
+
+          {meta.length > 0 ? (
+            <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
+              {meta.map((m, i) => (
+                <span key={m} className="inline-flex items-center gap-1">
+                  {i > 0 ? <span aria-hidden>·</span> : null}
+                  <ListCardMeta>{m}</ListCardMeta>
+                </span>
+              ))}
+            </div>
+          ) : null}
+
+          {counts.length > 0 ? (
+            <p className="mt-0.5 text-xs text-muted-foreground">{counts.join(' · ')}</p>
+          ) : null}
+
+          {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>
+  );
+}

src/components/clients/client-list.tsx

@@ -16,6 +16,7 @@ import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog
 import { PermissionGate } from '@/components/shared/permission-gate';
 import { ClientForm } from '@/components/clients/client-form';
 import { clientFilterDefinitions } from '@/components/clients/client-filters';
+import { ClientCard } from '@/components/clients/client-card';
 import { getClientColumns, type ClientRow } from '@/components/clients/client-columns';
 import { usePaginatedQuery } from '@/hooks/use-paginated-query';
 import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
@@ -118,6 +119,14 @@ export function ClientList() {
           onSortChange={setSort}
           isLoading={isFetching && !isLoading}
           getRowId={(row) => row.id}
+          cardRender={(row) => (
+            <ClientCard
+              client={row.original}
+              portSlug={portSlug}
+              onEdit={setEditClient}
+              onArchive={setArchiveClient}
+            />
+          )}
           emptyState={
             <EmptyState
               title="No clients found"

src/components/interests/interest-card.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { Anchor, Archive, Compass, MoreHorizontal, Pencil } from 'lucide-react';
+
+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,
+  deriveInitials,
+} from '@/components/shared/list-card';
+import { cn } from '@/lib/utils';
+import type { InterestRow } from './interest-columns';
+
+const STAGE_LABELS: Record<string, string> = {
+  open: 'Open',
+  details_sent: 'Details Sent',
+  in_communication: 'In Communication',
+  visited: 'Visited',
+  signed_eoi_nda: 'Signed EOI/NDA',
+  deposit_10pct: 'Deposit 10%',
+  contract: 'Contract',
+  completed: 'Completed',
+};
+
+/** Pill colors (used for the stage badge in the meta row). */
+const STAGE_PILL: Record<string, string> = {
+  open: 'bg-slate-100 text-slate-700',
+  details_sent: 'bg-blue-100 text-blue-700',
+  in_communication: 'bg-sky-100 text-sky-700',
+  visited: 'bg-violet-100 text-violet-700',
+  signed_eoi_nda: 'bg-amber-100 text-amber-700',
+  deposit_10pct: 'bg-orange-100 text-orange-700',
+  contract: 'bg-green-100 text-green-700',
+  completed: 'bg-emerald-100 text-emerald-700',
+};
+
+/** Accent-bar colors — saturate progressively so the pipeline depth reads at a glance. */
+const STAGE_ACCENT: Record<string, string> = {
+  open: 'bg-slate-300',
+  details_sent: 'bg-blue-400',
+  in_communication: 'bg-sky-400',
+  visited: 'bg-violet-400',
+  signed_eoi_nda: 'bg-amber-400',
+  deposit_10pct: 'bg-orange-400',
+  contract: 'bg-green-500',
+  completed: 'bg-emerald-500',
+};
+
+const CATEGORY_LABELS: Record<string, string> = {
+  general_interest: 'General',
+  specific_qualified: 'Qualified',
+  hot_lead: 'Hot lead',
+};
+
+const SOURCE_LABELS: Record<string, string> = {
+  website: 'Website',
+  manual: 'Manual',
+  referral: 'Referral',
+  broker: 'Broker',
+};
+
+interface InterestCardProps {
+  interest: InterestRow;
+  portSlug: string;
+  onEdit: (interest: InterestRow) => void;
+  onArchive: (interest: InterestRow) => void;
+}
+
+export function InterestCard({ interest, portSlug, onEdit, onArchive }: InterestCardProps) {
+  const stageLabel = STAGE_LABELS[interest.pipelineStage] ?? interest.pipelineStage;
+  const stagePill = STAGE_PILL[interest.pipelineStage] ?? 'bg-gray-100 text-gray-700';
+  const accentClass = STAGE_ACCENT[interest.pipelineStage] ?? 'bg-slate-300';
+  const isHotLead = interest.leadCategory === 'hot_lead';
+  const categoryLabel = interest.leadCategory ? CATEGORY_LABELS[interest.leadCategory] : null;
+  const sourceLabel = interest.source ? (SOURCE_LABELS[interest.source] ?? interest.source) : null;
+  const tags = interest.tags ?? [];
+
+  const clientName = interest.clientName ?? 'Unknown client';
+  const berthLabel = interest.berthMooringNumber;
+
+  return (
+    <ListCard
+      href={`/${portSlug}/interests/${interest.id}`}
+      ariaLabel={`Interest for ${clientName}`}
+      accentClassName={accentClass}
+      actions={
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`Actions for ${clientName}'s interest`}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => onEdit(interest)}>
+              <Pencil className="mr-2 h-3.5 w-3.5" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem className="text-destructive" onClick={() => onArchive(interest)}>
+              <Archive className="mr-2 h-3.5 w-3.5" />
+              Archive
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      }
+    >
+      <div className="flex items-start gap-3">
+        <ListCardAvatar initials={deriveInitials(clientName)} />
+        <div className="min-w-0 flex-1">
+          {/* Title row: name + spacer for the absolutely-positioned actions menu */}
+          <div className="flex items-start justify-between gap-2">
+            <h3 className="truncate text-base font-semibold tracking-tight text-foreground">
+              {clientName}
+            </h3>
+            <span aria-hidden className="block h-9 w-9 shrink-0" />
+          </div>
+
+          {/* Berth or general-interest line */}
+          <p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
+            {berthLabel ? (
+              <>
+                <Anchor className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
+                <span className="truncate">{berthLabel}</span>
+              </>
+            ) : (
+              <>
+                <Compass className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
+                <span className="italic">General interest</span>
+              </>
+            )}
+          </p>
+
+          {/* Stage pill + category + source */}
+          <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
+            <span
+              className={cn(
+                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+                stagePill,
+              )}
+            >
+              {stageLabel}
+            </span>
+
+            {isHotLead ? (
+              <span className="inline-flex items-center rounded-full bg-rose-100 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide text-rose-700">
+                Hot
+              </span>
+            ) : null}
+
+            {(categoryLabel && !isHotLead) || sourceLabel ? (
+              <div className="flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
+                {categoryLabel && !isHotLead ? <ListCardMeta>{categoryLabel}</ListCardMeta> : null}
+                {categoryLabel && !isHotLead && sourceLabel ? <span aria-hidden>·</span> : null}
+                {sourceLabel ? <ListCardMeta>{sourceLabel}</ListCardMeta> : null}
+              </div>
+            ) : null}
+          </div>
+
+          {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>
+  );
+}

src/components/interests/interest-list.tsx

@@ -18,6 +18,7 @@ import { InterestForm } from '@/components/interests/interest-form';
 import { PipelineBoard } from '@/components/interests/pipeline-board';
 import { interestFilterDefinitions } from '@/components/interests/interest-filters';
 import { getInterestColumns, type InterestRow } from '@/components/interests/interest-columns';
+import { InterestCard } from '@/components/interests/interest-card';
 import { usePaginatedQuery } from '@/hooks/use-paginated-query';
 import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
 import { apiFetch } from '@/lib/api/client';
@@ -145,6 +146,14 @@ export function InterestList() {
           onSortChange={setSort}
           isLoading={isFetching && !isLoading}
           getRowId={(row) => row.id}
+          cardRender={(row) => (
+            <InterestCard
+              interest={row.original}
+              portSlug={portSlug}
+              onEdit={setEditInterest}
+              onArchive={setArchiveInterest}
+            />
+          )}
           emptyState={
             <EmptyState
               title="No interests found"

src/components/shared/data-table.tsx

@@ -6,6 +6,7 @@ import {
   getCoreRowModel,
   useReactTable,
   type ColumnDef,
+  type Row,
   type RowSelectionState,
 } from '@tanstack/react-table';
 import { ArrowDown, ArrowUp, ArrowUpDown, Loader2 } from 'lucide-react';
@@ -50,6 +51,13 @@ interface DataTableProps<TData> {
   isLoading?: boolean;
   getRowId?: (row: TData) => string;
   onRowClick?: (row: TData) => void;
+  /**
+   * Mobile card renderer. When provided, the table is hidden below `lg:`
+   * and replaced with a vertical list of cards built from this callback.
+   * The same TanStack `table` instance powers both views, so pagination,
+   * sort, and selection stay in sync across the breakpoint.
+   */
+  cardRender?: (row: Row<TData>) => React.ReactNode;
 }
 
 export function DataTable<TData>({
@@ -66,6 +74,7 @@ export function DataTable<TData>({
   isLoading,
   getRowId,
   onRowClick,
+  cardRender,
 }: DataTableProps<TData>) {
   const [internalSelection, setInternalSelection] = useState<RowSelectionState>({});
   const rowSelectionState = externalSelection ?? internalSelection;
@@ -142,9 +151,11 @@ export function DataTable<TData>({
     );
   }
 
+  const rows = table.getRowModel().rows;
+
   return (
     <div className="space-y-2">
-      <div className="rounded-md border overflow-x-auto">
+      <div className={cn('rounded-md border overflow-x-auto', cardRender && 'hidden lg:block')}>
         <Table>
           <TableHeader className="sticky top-0 z-10 bg-muted/50">
             {table.getHeaderGroups().map((headerGroup) => (
@@ -219,6 +230,23 @@ export function DataTable<TData>({
         </Table>
       </div>
 
+      {/* Mobile card list */}
+      {cardRender && (
+        <ul className="lg:hidden flex flex-col gap-2">
+          {isLoading ? (
+            <li className="rounded-md border bg-card p-6 text-center">
+              <Loader2 className="mx-auto h-5 w-5 animate-spin text-muted-foreground" />
+            </li>
+          ) : rows.length === 0 ? (
+            <li className="rounded-md border bg-card p-6 text-center text-sm text-muted-foreground">
+              {emptyState ?? 'No results.'}
+            </li>
+          ) : (
+            rows.map((row) => <li key={row.id}>{cardRender(row)}</li>)
+          )}
+        </ul>
+      )}
+
       {/* Pagination */}
       {pagination && pagination.totalPages > 1 && (
         <div className="flex items-center justify-between px-2">

src/components/shared/list-card.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import Link from 'next/link';
+import { type ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface ListCardProps {
+  /** Detail-page URL the card navigates to when tapped. */
+  href: string;
+  /**
+   * Optional Tailwind background class painted on a 3px vertical strip on the
+   * left edge — used to encode pipeline stage / status / category at a glance.
+   * Pass `undefined` for entities with no status to surface (clients, etc.).
+   */
+  accentClassName?: string;
+  /**
+   * Top-right action slot — typically a `<DropdownMenu>` for edit/archive.
+   * Rendered absolutely-positioned outside the navigation Link so its clicks
+   * don't trigger detail navigation.
+   */
+  actions?: ReactNode;
+  ariaLabel: string;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * Shared shell for every mobile list card. Wraps the body in a Link to the
+ * detail page, paints an optional status accent bar on the left edge, and
+ * exposes a top-right slot for an actions menu. Touch/hover feedback comes
+ * from a soft `hover:bg-muted/30` + `active:bg-muted/50` tint, no shadow
+ * shifts (which feel jittery on mobile).
+ */
+export function ListCard({
+  href,
+  accentClassName,
+  actions,
+  ariaLabel,
+  className,
+  children,
+}: ListCardProps) {
+  return (
+    <article
+      className={cn(
+        'group relative overflow-hidden rounded-lg border bg-card shadow-xs',
+        'transition-colors hover:bg-muted/30 active:bg-muted/50',
+        className,
+      )}
+    >
+      {accentClassName ? (
+        <span aria-hidden className={cn('absolute inset-y-0 left-0 w-1', accentClassName)} />
+      ) : null}
+      <Link
+        href={href}
+        aria-label={ariaLabel}
+        className={cn(
+          'block p-3',
+          accentClassName && 'pl-4',
+          'rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        )}
+      >
+        {children}
+      </Link>
+      {actions ? <div className="absolute right-1.5 top-1.5">{actions}</div> : null}
+    </article>
+  );
+}
+
+interface ListCardAvatarProps {
+  /** Two-letter initials (or one for single-word names). Caller derives. */
+  initials?: string;
+  /** Domain icon (Lucide). Used when the entity isn't a person — yacht, berth, company. */
+  icon?: ReactNode;
+  className?: string;
+}
+
+/**
+ * 40px lead-slot avatar. Pass `initials` for people-shaped entities, or
+ * `icon` for non-person entities (yachts, berths, companies, expenses).
+ * Uses the brand-soft background so it reads as part of the marina aesthetic
+ * rather than a generic Material avatar.
+ */
+export function ListCardAvatar({ initials, icon, className }: ListCardAvatarProps) {
+  return (
+    <div
+      className={cn(
+        'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',
+        'bg-brand-50 text-sm font-semibold tracking-tight text-brand',
+        className,
+      )}
+    >
+      {icon ?? initials ?? '?'}
+    </div>
+  );
+}
+
+interface ListCardMetaProps {
+  /** Optional Lucide icon, rendered at 12px next to the text. */
+  icon?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Single inline meta segment: tiny icon (optional) + muted text. Compose
+ * multiple segments inside a `<div className="flex flex-wrap items-center
+ * gap-x-2 gap-y-0.5 text-xs text-muted-foreground">` to build the meta line.
+ */
+export function ListCardMeta({ icon, children, className }: ListCardMetaProps) {
+  return (
+    <span className={cn('inline-flex items-center gap-1', className)}>
+      {icon ? <span className="shrink-0 text-muted-foreground/80">{icon}</span> : null}
+      <span className="truncate">{children}</span>
+    </span>
+  );
+}
+
+/**
+ * Derive 1–2 letter initials from a name, ignoring purely-numeric tokens
+ * (so "Recovery Test 1777" → "RT", not "R1"). Returns "?" only for empty
+ * input. Centralised here so every list card uses the same logic.
+ */
+export function deriveInitials(name: string): string {
+  const alphaParts = name
+    .trim()
+    .split(/\s+/)
+    .filter((p) => /^[A-Za-z]/.test(p));
+  if (alphaParts.length === 0) return name.trim().slice(0, 1).toUpperCase() || '?';
+  if (alphaParts.length === 1) return (alphaParts[0]?.[0] ?? '?').toUpperCase();
+  return ((alphaParts[0]?.[0] ?? '') + (alphaParts[1]?.[0] ?? '')).toUpperCase();
+}