fix(nav): drop dedicated EOI route + alerts sidebar entry, fix paginated-URL bug

Trimmed two surfaces that didn't earn their nav weight:

  - The /[port]/documents/eoi route added in the previous commit was
    redundant with the per-interest EOI status milestones already on
    the interest detail and the existing eoi_queue tab inside the
    Documents hub. Removed the route + the "EOI queue" sidebar entry.
  - The Alerts sidebar entry was promoting a mostly-empty page that
    duplicated the dashboard alert rail. Dropped the entry; the
    /[port]/alerts route stays accessible via the dashboard rail's
    "View all" link and the topbar bell, which is enough for the
    audit-trail use case.

While testing the EOI tab, found and fixed a real bug: usePaginatedQuery
was producing malformed URLs like `…?tab=eoi_queue&signatureOnly=true?page=1&limit=25`
(two `?` separators) when the endpoint string already carried query
params. The API rejected those with 400, so the EOI tab in the
documents hub was silently broken. The hook now uses `&` when the
endpoint already contains a `?`.

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

.gitignore

@@ -20,10 +20,17 @@ tsconfig.tsbuildinfo
 docker-compose.override.yml
 .remember/
 .DS_Store
-eoi/
+# Root-only ad-hoc EOI scratch dir; routes under src/app/.../eoi/ must NOT match.
+/eoi/
 
 # Brainstorming companion mockup files
 .superpowers/
 
 # Ad-hoc screenshots / scratch artifacts at repo root
 /*.png
+
+# Legacy Nuxt portal — kept on disk for reference, not tracked here
+/client-portal/
+
+# Mobile audit screenshots — generated locally, regenerable
+/.audit/

docs/superpowers/specs/2026-04-29-mobile-optimization-design.md

@@ -0,0 +1,189 @@
+# Mobile Optimization Design
+
+**Status**: Design approved 2026-04-29 — pending plan.
+**Plan decomposition**: Foundation PR (§3) is one implementation plan; per-page migration phases (§5) become follow-up plans, scoped per phase.
+**Branch base**: stacks on `refactor/data-model`.
+**Out of scope**: Phase B/C features, desktop redesign, Capacitor wrapper, swipe-actions on rows, native menus, server-driven UI.
+
+---
+
+## 1. Background
+
+The CRM was built desktop-first. A 2026-04-29 mobile audit captured every authenticated and public page across the active iPhone viewport range. Findings:
+
+1. **No `viewport` meta in the root layout** (one exists only in the scanner PWA sub-layout, `src/app/(scanner)/[portSlug]/scan/layout.tsx`). Without it, iOS Safari renders pages at the default 980px logical width and zooms out to fit — text becomes unreadable and touch targets sub-tappable. Playwright's `isMobile` emulation in the audit forces 393px-wide rendering, which exposes the layout breakage you'd otherwise have to discover by pinching to zoom.
+2. **Topbar overflows**. Search input + port switcher + sign-out button cram into one row; sign-out clips off the right edge as a half-visible blue bar on every authenticated page.
+3. **Tables render as desktop tables**. Every list page (clients, yachts, companies, invoices, expenses, interests, audit, users, etc.) shows truncated columns with horizontal scroll.
+4. **Page headers don't downsize**. Titles like "Dashboard" truncate to "Dash..."; primary action buttons (`+ New Client`) overlap their subtitles.
+5. **Detail page action chips overflow**. The chip row ("Invite to portal | GDPR export | Archive | …") horizontally overflows on every detail page.
+6. **One half-good pattern**: detail pages already collapse their tabs to a `<select>` dropdown on small screens. Worth extending.
+7. **Auth + scanner pages are already mobile-first** (`/login`, `/[portSlug]/scan`). Reference for the "what good looks like" target.
+
+The audit harness (`tests/e2e/audit/mobile.spec.ts` + `mobile-audit` Playwright project) is added on this branch (not yet committed); re-runs regenerate `.audit/mobile/` (gitignored).
+
+## 2. Approach
+
+**Adaptive shell + responsive content** — chosen over (a) per-page conditional render, (b) a separate `(mobile)` route group, and (c) Tailwind-only responsive.
+
+The "native feel" the user wants comes from the chrome — bottom tab bar, sheet modals, sticky compact header, safe-area awareness. Page content (forms, lists, details) doesn't need duplication; it gets responsive via shared mobile-aware primitives. This concentrates the dedicated-mobile work in ~10 components and keeps content single-source.
+
+**Breakpoint**: Tailwind `lg` (1024px). Below `lg`, the mobile shell renders. At and above, the existing desktop shell is untouched.
+
+### 2.1 Target iPhone viewport range
+
+The mobile shell + content primitives must look correct across the full active iPhone viewport range (portrait):
+
+| Tier                                       | Models                                          | Viewport |
+| ------------------------------------------ | ----------------------------------------------- | -------- |
+| Narrowest                                  | iPhone SE 2nd / 3rd gen                         | 375×667  |
+| Standard                                   | iPhone 12/13/14 (and Mini)                      | 390×844  |
+| Standard newer                             | iPhone 15 / 15 Pro / 16                         | 393×852  |
+| Pro newer (Dynamic Island, thinner bezels) | iPhone 16 Pro / 17 Pro                          | 402×874  |
+| Plus / older Max                           | iPhone 14 Plus / 15 Plus / 15 Pro Max / 16 Plus | 430×932  |
+| Pro Max                                    | iPhone 16 Pro Max / 17 Pro Max                  | 440×956  |
+
+**Anchors used by audit and design validation**: 375×667 (worst-case narrow + short), 393×852 (most common current), 402×874 (current Pro), 440×956 (current Pro Max). Models within ±5px of an anchor (390, 430) are skipped — primitives that look correct at the anchors will look correct at neighbors.
+
+**Dynamic Island**: iPhone 14 Pro and later have a larger top safe-area inset (~59px vs ~47px on classic-notch models). The CSS `env(safe-area-inset-top)` we expose as `pt-safe` handles this transparently — no per-model code paths.
+
+**Landscape**: out of scope for this design. Phones in landscape are rare for CRM-style work; if needed later, the mobile shell at landscape widths would still fall under `lg` and would just stretch. Tablet landscape is addressed in the §5 tablet-pass phase.
+
+**Routing**: no new route group. URLs and middleware unchanged. RBAC, services, queries, validators, RHF/zod forms, TanStack Query stores, socket.io — all unchanged.
+
+## 3. Foundation PR
+
+A single branch lands the infra + shell + primitives before any per-page work. After this merges, every authenticated page already gains: real viewport meta, no clipped topbar, bottom tab navigation, safe-area handling, and 44px touch targets — without any per-page edits.
+
+### 3.1 Infrastructure
+
+- `viewport` export in `src/app/layout.tsx` — `width=device-width, initial-scale=1, viewport-fit=cover`.
+- `theme-color` meta + `apple-mobile-web-app-capable` meta + `apple-mobile-web-app-status-bar-style` for PWA-ish status-bar integration.
+- Safe-area CSS variables (`env(safe-area-inset-*)`) exposed as Tailwind utilities (`pt-safe`, `pb-safe`, `pl-safe`, `pr-safe`).
+- `useIsMobile()` hook in `src/hooks/use-is-mobile.ts` — backed by `window.matchMedia('(max-width: 1023.98px)')`, no resize listener.
+- Server-side body-class detection: the root layout (`src/app/layout.tsx`) reads the `user-agent` request header via `next/headers`'s `headers()`, runs a small known-mobile-token check (Mobile / iPhone / iPad / Android — no library), and renders `<body data-form-factor="mobile|desktop">`. No middleware needed. CSS `[data-form-factor="mobile"]` reveals the mobile shell. The CSS media-query fallback (`@media (max-width: 1023.98px)`) handles UA misclassification (e.g., desktop browser resized to narrow width, or stripped UA).
+
+### 3.2 Mobile shell
+
+Both desktop and mobile shells are rendered to the DOM by the root layout; CSS reveals one and hides the other based on `[data-form-factor="mobile"]` plus a `@media (max-width: 1023.98px)` fallback. The existing `<Sidebar>` and `<Topbar>` components stay unchanged for the desktop shell. The mobile shell is wholly new:
+
+- **`<MobileLayout>`** (`src/components/layout/mobile/mobile-layout.tsx`)
+  Fixed 52px compact topbar (safe-area aware) + scrollable content + fixed 56px bottom tab bar (safe-area inset). Renders instead of the desktop sidebar+topbar shell when the form factor resolves to mobile.
+
+- **`<MobileTopbar>`**
+  Page title (auto-truncating, single-line) + back button when route depth > 1 + single primary action slot (passed via context from the page) + port-switcher behind a `<Sheet>` trigger.
+
+- **`<MobileBottomTabs>`**
+  Fixed 5 tabs: **Dashboard / Clients / Yachts / Berths / More**. Active state from current path. Lucide icons (no emoji). Badge support for the alerts count.
+
+- **`<MoreSheet>`**
+  Bottom sheet opened by the More tab. Holds the long tail in a scrollable list grouped by section: Companies, Interests, Invoices, Expenses, Documents, Email, Alerts, Reports, Reminders, Settings, Admin (with admin nesting one level deep into a child sheet).
+
+- **`<MobileLayoutProvider>`**
+  React context that lets each page push its title, back button, and primary action slot to `<MobileTopbar>` via a hook (`useMobileChrome({ title, action })`).
+
+### 3.3 Primitives
+
+All built once in `src/components/shared/`. Render desktop-style above `lg`, mobile-style below.
+
+- **`<Sheet>`** — vaul-based bottom sheet on mobile, falls through to existing Radix `<Dialog>` on desktop. Same API as `<Dialog>` so adoption is mechanical.
+- **`<DataView>`** — accepts the same column defs the codebase uses today via TanStack Table. Above `lg`: renders the existing table. Below `lg`: renders a card list with a per-row `cardRender({ row }) => ReactNode` callback. Filter chips stay above the list; sort moves into a `<Sheet>` opened by a sort button.
+- **`<PageHeader>`** — title + optional subtitle + actions. Truncates title to one line, stacks actions to a second row on mobile, hides subtitle below `sm` if action row is present.
+- **`<ActionRow>`** — chip-style action group; `flex-nowrap overflow-x-auto scroll-smooth snap-x` on mobile, no overflow on desktop.
+- **`<DetailPageShell>`** — wraps detail pages with: sticky compact header (entity name, primary status), tab dropdown selector (existing pattern, extracted), scrollable content area, optional sticky bottom action bar (Save / Archive / etc.) on mobile that pins above the bottom tab bar.
+- **`<FilterChips>`** — chip-row filter UI used by `<DataView>`. Active filters are dismissable chips; "Add filter" opens a `<Sheet>`.
+
+### 3.4 Default style adjustments
+
+- `<Button>` and `<Input>` defaults: `min-h-11` (44px, Apple HIG touch-target).
+- `<Input>` and `<Textarea>` body text: `text-base` (16px) so iOS doesn't zoom on focus.
+- `<Dialog>` default base styling tweaked so any remaining unmigrated dialogs render full-screen on mobile (until they get migrated to `<Sheet>`).
+
+### 3.5 Bundle impact
+
+Both shells render server-side and switch via the `data-form-factor` body attribute, so both ship to every client (dynamic-importing one would cause a hydration flash). Rough estimate ~40KB gzipped added to the layout subtree for the mobile shell + new primitives (vaul ≈ 5KB gz, the rest is in-house components). Verify post-build with `pnpm build` and adjust if it's materially higher. Acceptable trade for no flash and no UA-based render-time branching.
+
+### 3.6 PWA assets
+
+The PWA scanner already references `icon-192.png`, `icon-512.png`, `icon-512-maskable.png` from `public/`, but those files don't exist yet (separate flagged blocker). The mobile shell adds an `apple-touch-icon` reference too. The Foundation PR includes placeholder PNGs so home-screen install works; production-quality icons can replace them without a code change.
+
+## 4. Per-page playbook
+
+Once foundation lands, each page follows the same workflow:
+
+1. Open the page in headed Playwright at the anchor viewports per §2.1 (start at 393×852 for the iteration loop, spot-check 375 and 440 before declaring done).
+2. Replace any `<Dialog>` with `<Sheet>`.
+3. If list page: wrap the table in `<DataView>` and provide a `cardRender` callback. The 2-3 fields shown on the card are decided per page during migration with the user.
+4. Replace the ad-hoc page header with `<PageHeader>`.
+5. Replace ad-hoc action button rows with `<ActionRow>`.
+6. Touch up any custom embedded widgets the page uses (rare for simple pages, common for `email`, `documents`, `expenses/scan`).
+7. User reviews live in the headed browser, points out tweaks, iterate.
+
+Most pages take 5–15 minutes in this loop. Heavy pages (email inbox, documents hub) may take 30–60 because the embedded widgets need their own mobile treatment beyond the primitives.
+
+## 5. Migration sequence
+
+After foundation PR:
+
+1. **Quick-win sweep** (~half day) — pages mostly fixed by foundation alone. Just need `<PageHeader>` swap-in (no list-card conversion, no detail-shell wrap):
+   `dashboard` (overview), `settings` (user-profile), `reports`, and the admin sub-pages that are forms or stat cards: `admin/settings`, `admin/branding`, `admin/forms`, `admin/ocr`, `admin/roles`, `admin/tags`, `admin/documenso`, `admin/templates`, `admin/custom-fields`, `admin/monitoring`, `admin/backup`, `admin/webhooks`, `admin/import`, `admin/ports`.
+2. **List pages** (~1–2 days) — convert via `<DataView>` + per-page `cardRender`:
+   `clients`, `yachts`, `companies`, `berths`, `interests`, `invoices`, `expenses`, `alerts`, `reminders`, `admin/audit`, `admin/users`.
+3. **Heavy pages** (~1 day each) — embedded widgets need their own mobile treatment beyond the primitives:
+   `documents` (sig-tracking + filters from Phase A), `email` (thread list + reader + composer).
+4. **Detail pages** (~1–2 days) — wrap in `<DetailPageShell>`, extend the tab-dropdown pattern, add sticky bottom action shelf:
+   `clients/[clientId]`, `yachts/[yachtId]`, `companies/[companyId]`, `berths/[berthId]`, `invoices/[id]`, `expenses/[id]`.
+5. **Forms & wizards** — touch-up only, since `<Input>`/`<Button>` defaults handle the bulk:
+   `invoices/new` (3-step wizard), `expenses/scan` (already mobile-first, just verify).
+6. **Portal** — same patterns, smaller scope:
+   authenticated: `portal/dashboard`, `portal/invoices`, `portal/my-yachts`, `portal/documents`, `portal/interests`, `portal/my-reservations`. Public: `portal/login`, `portal/activate`, `portal/forgot-password`, `portal/reset-password` (already styled by `<BrandedAuthShell>` — just verify).
+7. **Tablet pass** — re-audit at iPad Air 11" portrait (820×1180) and landscape (1180×820), iPad Air 13" portrait (1024×1366) and landscape (1366×1024). The 820 portrait case will hit the mobile shell (820 < 1024) and probably want a "tablet-portrait" treatment with sidebar visible — flagged for design refinement at that phase, not now. The other three viewports fall above `lg` and use the desktop shell unchanged.
+
+## 6. Testing
+
+- **Mobile audit project** (`mobile-audit` in `playwright.config.ts`) is the regression harness. Re-runs after every page-migration PR; output goes to `.audit/mobile/` (gitignored). Audit covers the four anchor viewports defined in §2.1: 375×667, 393×852, 402×874, 440×956. Run time ~14 min headed.
+- **Smoke project** gets a curated mobile-viewport variant (~10 pages at the 393×852 anchor) — adds ~2 min to CI; full audit stays out of CI to avoid the ~14 min cost.
+- **Visual baselines** — `visual` project gets new mobile snapshots at the 393×852 anchor for: dashboard, clients-list, clients-detail, invoices-list, invoices-new, scan, documents, login. Regenerate with `--update-snapshots` after intentional changes (existing convention).
+- **Anchor device descriptors** lifted into a shared fixture at `tests/e2e/fixtures/devices.ts` (one per anchor in §2.1) so specs don't redefine viewport.
+- **No new unit tests** for the primitives — they are presentational. Coverage comes from visual + integration runs.
+
+## 7. Open questions
+
+- **Bottom-tab taxonomy**: locked at Dashboard / Clients / Yachts / Berths / More for now. The More sheet holds everything else losslessly, so this is reversible — if real usage suggests a different top-5 (e.g., Interests or Invoices in the tabs), swap them later without code restructure.
+- **`refactor/data-model` push order**: 155 commits unpushed. Foundation PR can stack on top and rebase, or wait until that branch merges. Decision deferred to user.
+- **Desktop touch-target adjustments**: bumping `<Button>`/`<Input>` to `min-h-11` will affect desktop too. Verify visually that no desktop layout breaks; if any does, scope the bump to mobile-only via the `data-form-factor` attribute.
+
+## 8. Files to create
+
+```
+src/hooks/use-is-mobile.ts
+src/components/layout/mobile/
+  mobile-layout.tsx
+  mobile-topbar.tsx
+  mobile-bottom-tabs.tsx
+  more-sheet.tsx
+  mobile-layout-provider.tsx
+src/components/shared/
+  sheet.tsx                    (new — vaul wrapper)
+  data-view.tsx                (new — table↔card)
+  page-header.tsx              (new)
+  action-row.tsx               (new)
+  detail-page-shell.tsx        (new)
+  filter-chips.tsx             (new)
+src/app/layout.tsx             (modified — viewport export, theme-color, UA-derived data-form-factor body attribute via headers())
+public/icon-192.png            (placeholder PWA asset)
+public/icon-512.png            (placeholder PWA asset)
+public/icon-512-maskable.png   (placeholder PWA asset)
+public/apple-touch-icon.png    (placeholder PWA asset)
+tailwind.config.ts             (modified — safe-area utilities, touch-target defaults)
+tests/e2e/fixtures/devices.ts  (new — shared device descriptors)
+```
+
+## 9. Files to modify per page
+
+Per the playbook in §4, each page typically needs:
+
+- One swap of header markup → `<PageHeader>`.
+- For list pages: one wrap of table → `<DataView>` + add `cardRender` callback.
+- For detail pages: wrap in `<DetailPageShell>`.
+- Replace `<Dialog>` imports with `<Sheet>`.
+- No service, validator, query, or schema changes anywhere.

package.json

@@ -87,6 +87,7 @@
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "tesseract.js": "^7.0.0",
+    "vaul": "^1.1.2",
     "zod": "^3.24.0",
     "zustand": "^5.0.0"
   },
@@ -112,6 +113,7 @@
     "lint-staged": "^15.2.0",
     "postcss": "^8.4.0",
     "prettier": "^3.4.0",
+    "react-grab": "^0.1.32",
     "tailwindcss": "^3.4.0",
     "tsx": "^4.19.0",
     "typescript": "^5.7.0",

playwright.config.ts

@@ -75,6 +75,24 @@ export default defineConfig({
         viewport: { width: 1440, height: 900 },
       },
     },
+    {
+      // Mobile / tablet audit — visits every page in headed Chromium at iPhone
+      // viewports (portrait), screenshots full-page to .audit/mobile/<viewport>/,
+      // and writes an index.md. Depends on `setup` for seeded admin + port-role.
+      name: 'mobile-audit',
+      testMatch: /audit\/mobile\.spec\.ts/,
+      dependencies: ['setup'],
+      // Single test walks 4 viewports × ~45 routes sequentially with slowMo;
+      // 30 min headroom keeps us well under the wall-clock cost.
+      timeout: 1_800_000,
+      use: {
+        headless: false,
+        launchOptions: { slowMo: 200 },
+        screenshot: 'off',
+        video: 'off',
+        trace: 'off',
+      },
+    },
   ],
 
   // Don't start the dev server — we expect it to already be running

pnpm-lock.yaml

@@ -206,6 +206,9 @@ importers:
       tesseract.js:
         specifier: ^7.0.0
         version: 7.0.0
+      vaul:
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       zod:
         specifier: ^3.24.0
         version: 3.25.76
@@ -276,6 +279,9 @@ importers:
       prettier:
         specifier: ^3.4.0
         version: 3.8.1
+      react-grab:
+        specifier: ^0.1.32
+        version: 0.1.32(react@19.2.4)
       tailwindcss:
         specifier: ^3.4.0
         version: 3.4.19(tsx@4.21.0)(yaml@2.8.2)
@@ -339,6 +345,10 @@ packages:
     peerDependencies:
       react: '>=16.9.0'
 
+  '@antfu/ni@0.23.2':
+    resolution: {integrity: sha512-FSEVWXvwroExDXUu8qV6Wqp2X3D1nJ0Li4LFymCyvCVrm7I3lNfG0zZWSWvGU1RE7891eTnFTyh31L3igOwNKQ==}
+    hasBin: true
+
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
@@ -2077,6 +2087,10 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
 
+  '@react-grab/cli@0.1.32':
+    resolution: {integrity: sha512-TI4SHATLH2yM1DMRXgH3dt/8b3Rj51BplDOqOQiHQKAMOuKVAR9WE2WGWJRT3LwFpl8BXR9ytAM9vrGDrB7QGw==}
+    hasBin: true
+
   '@reduxjs/toolkit@2.11.2':
     resolution: {integrity: sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==}
     peerDependencies:
@@ -2848,6 +2862,11 @@ packages:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
+  bippy@0.5.39:
+    resolution: {integrity: sha512-8hE8rKSl8JWyeaY+JjpnmceWAZPpLEyzOZQpWXM5Rc7861c5WotMJHy2aRZKZrGA8nMpvLNF01t4yQQ+HcZG3w==}
+    peerDependencies:
+      react: '>=17.0.1'
+
   block-stream2@2.1.0:
     resolution: {integrity: sha512-suhjmLI57Ewpmq00qaygS8UgEq2ly2PCItenIyhMqVjo4t4pGzqMvfgJuX8iWTeSDdfSSqS6j38fL4ToNL7Pfg==}
 
@@ -2953,6 +2972,10 @@ packages:
     resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
     engines: {node: '>=18'}
 
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
+
   cli-truncate@4.0.0:
     resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
     engines: {node: '>=18'}
@@ -3008,6 +3031,10 @@ packages:
     resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
     engines: {node: '>=18'}
 
+  commander@14.0.3:
+    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
+    engines: {node: '>=20'}
+
   commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
@@ -3982,6 +4009,10 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-interactive@2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -4030,6 +4061,14 @@ packages:
     resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
     engines: {node: '>= 0.4'}
 
+  is-unicode-supported@1.3.0:
+    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
+    engines: {node: '>=12'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
   is-url@1.2.4:
     resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
 
@@ -4121,6 +4160,9 @@ packages:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
 
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
+
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -4128,6 +4170,10 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
   kysely@0.28.11:
     resolution: {integrity: sha512-zpGIFg0HuoC893rIjYX1BETkVWdDnzTzF5e0kWXJFg5lE0k1/LfNWBejrcnOFu8Q2Rfq/hTDTU7XLUM8QOrpzg==}
     engines: {node: '>=20.0.0'}
@@ -4274,6 +4320,10 @@ packages:
   lodash@4.17.23:
     resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
 
+  log-symbols@6.0.0:
+    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
+    engines: {node: '>=18'}
+
   log-update@6.1.0:
     resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
     engines: {node: '>=18'}
@@ -4582,6 +4632,10 @@ packages:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
+  ora@8.2.0:
+    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
+    engines: {node: '>=18'}
+
   own-keys@1.0.1:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
@@ -4781,6 +4835,10 @@ packages:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
 
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -5071,6 +5129,15 @@ packages:
   react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
 
+  react-grab@0.1.32:
+    resolution: {integrity: sha512-ODZkzu4zjwX/5a1VxTdIkagPD6uPnp8IkSN2v5FDgFMZkH5r/YEMq43hIsdpHV5/R2ymqS9zLxp4H7SNSRx5ng==}
+    hasBin: true
+    peerDependencies:
+      react: '>=17.0.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+
   react-hook-form@7.71.2:
     resolution: {integrity: sha512-1CHvcDYzuRUNOflt4MOq3ZM46AronNJtQ1S7tnX6YN4y72qhgiUItpacZUAQ0TyWYci3yz1X+rXaSxiuEm86PA==}
     engines: {node: '>=18.0.0'}
@@ -5357,6 +5424,9 @@ packages:
   simple-swizzle@0.2.4:
     resolution: {integrity: sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==}
 
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
   slice-ansi@5.0.0:
     resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
     engines: {node: '>=12'}
@@ -5369,6 +5439,10 @@ packages:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
 
+  smol-toml@1.6.1:
+    resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==}
+    engines: {node: '>= 18'}
+
   socket.io-adapter@2.5.6:
     resolution: {integrity: sha512-DkkO/dz7MGln0dHn5bmN3pPy+JmywNICWrJqVWiVOyvXjWQFIv9c2h24JrQLLFJ2aQVQf/Cvl1vblnd4r2apLQ==}
 
@@ -5431,6 +5505,10 @@ packages:
   std-env@4.0.0:
     resolution: {integrity: sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==}
 
+  stdin-discarder@0.2.2:
+    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
+    engines: {node: '>=18'}
+
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
@@ -5763,6 +5841,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
   victory-vendor@37.3.6:
     resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
 
@@ -6065,6 +6149,8 @@ snapshots:
       resize-observer-polyfill: 1.5.1
       throttle-debounce: 5.0.2
 
+  '@antfu/ni@0.23.2': {}
+
   '@babel/helper-string-parser@7.27.1': {}
 
   '@babel/helper-validator-identifier@7.28.5': {}
@@ -7467,6 +7553,17 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
+  '@react-grab/cli@0.1.32':
+    dependencies:
+      '@antfu/ni': 0.23.2
+      commander: 14.0.3
+      ignore: 7.0.5
+      jsonc-parser: 3.3.1
+      ora: 8.2.0
+      picocolors: 1.1.1
+      prompts: 2.4.2
+      smol-toml: 1.6.1
+
   '@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1))(react@19.2.4)':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -8233,6 +8330,10 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
+  bippy@0.5.39(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
   block-stream2@2.1.0:
     dependencies:
       readable-stream: 3.6.2
@@ -8353,6 +8454,8 @@ snapshots:
     dependencies:
       restore-cursor: 5.1.0
 
+  cli-spinners@2.9.2: {}
+
   cli-truncate@4.0.0:
     dependencies:
       slice-ansi: 5.0.0
@@ -8409,6 +8512,8 @@ snapshots:
 
   commander@13.1.0: {}
 
+  commander@14.0.3: {}
+
   commander@4.1.1: {}
 
   component-classes@1.2.6:
@@ -9561,6 +9666,8 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-interactive@2.0.0: {}
+
   is-map@2.0.3: {}
 
   is-negative-zero@2.0.3: {}
@@ -9604,6 +9711,10 @@ snapshots:
     dependencies:
       which-typed-array: 1.1.20
 
+  is-unicode-supported@1.3.0: {}
+
+  is-unicode-supported@2.1.0: {}
+
   is-url@1.2.4: {}
 
   is-weakmap@2.0.2: {}
@@ -9685,6 +9796,8 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
+  jsonc-parser@3.3.1: {}
+
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.9
@@ -9696,6 +9809,8 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  kleur@3.0.3: {}
+
   kysely@0.28.11: {}
 
   language-subtag-registry@0.3.23: {}
@@ -9823,6 +9938,11 @@ snapshots:
 
   lodash@4.17.23: {}
 
+  log-symbols@6.0.0:
+    dependencies:
+      chalk: 5.6.2
+      is-unicode-supported: 1.3.0
+
   log-update@6.1.0:
     dependencies:
       ansi-escapes: 7.3.0
@@ -10121,6 +10241,18 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
+  ora@8.2.0:
+    dependencies:
+      chalk: 5.6.2
+      cli-cursor: 5.0.0
+      cli-spinners: 2.9.2
+      is-interactive: 2.0.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 6.0.0
+      stdin-discarder: 0.2.2
+      string-width: 7.2.0
+      strip-ansi: 7.2.0
+
   own-keys@1.0.1:
     dependencies:
       get-intrinsic: 1.3.0
@@ -10313,6 +10445,11 @@ snapshots:
 
   process@0.11.10: {}
 
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -10728,6 +10865,13 @@ snapshots:
 
   react-fast-compare@3.2.2: {}
 
+  react-grab@0.1.32(react@19.2.4):
+    dependencies:
+      '@react-grab/cli': 0.1.32
+      bippy: 0.5.39(react@19.2.4)
+    optionalDependencies:
+      react: 19.2.4
+
   react-hook-form@7.71.2(react@19.2.4):
     dependencies:
       react: 19.2.4
@@ -11075,6 +11219,8 @@ snapshots:
     dependencies:
       is-arrayish: 0.3.4
 
+  sisteransi@1.0.5: {}
+
   slice-ansi@5.0.0:
     dependencies:
       ansi-styles: 6.2.3
@@ -11087,6 +11233,8 @@ snapshots:
 
   smart-buffer@4.2.0: {}
 
+  smol-toml@1.6.1: {}
+
   socket.io-adapter@2.5.6:
     dependencies:
       debug: 4.4.3
@@ -11167,6 +11315,8 @@ snapshots:
 
   std-env@4.0.0: {}
 
+  stdin-discarder@0.2.2: {}
+
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -11584,6 +11734,15 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   victory-vendor@37.3.6:
     dependencies:
       '@types/d3-array': 3.2.2

scripts/dev-set-password.ts

@@ -0,0 +1,40 @@
+/**
+ * Dev helper: set a user's password directly (bypasses email reset).
+ * Usage: pnpm tsx scripts/dev-set-password.ts <email> <password>
+ */
+import 'dotenv/config';
+import { hashPassword } from 'better-auth/crypto';
+import { eq, and } from 'drizzle-orm';
+import { db } from '@/lib/db';
+import { user, account } from '@/lib/db/schema/users';
+
+async function main() {
+  const [, , email, password] = process.argv;
+  if (!email || !password) {
+    console.error('Usage: pnpm tsx scripts/dev-set-password.ts <email> <password>');
+    process.exit(1);
+  }
+
+  const u = await db.query.user.findFirst({ where: eq(user.email, email) });
+  if (!u) {
+    console.error(`User not found: ${email}`);
+    process.exit(1);
+  }
+
+  const hash = await hashPassword(password);
+  const result = await db
+    .update(account)
+    .set({ password: hash, updatedAt: new Date() })
+    .where(and(eq(account.userId, u.id), eq(account.providerId, 'credential')))
+    .returning({ id: account.id });
+
+  if (result.length === 0) {
+    console.error(`No credential account row for ${email}`);
+    process.exit(1);
+  }
+
+  console.log(`Updated password for ${email} (account id ${result[0]?.id}).`);
+  process.exit(0);
+}
+
+main();

src/app/(dashboard)/[portSlug]/admin/backup/page.tsx

@@ -1,10 +1,9 @@
+import { PageHeader } from '@/components/shared/page-header';
+
 export default function BackupManagementPage() {
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold text-foreground">Backup Management</h1>
-        <p className="text-muted-foreground">Manage system backups and restoration</p>
-      </div>
+      <PageHeader title="Backup Management" description="Manage system backups and restoration" />
       <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
         <p className="text-lg font-medium text-muted-foreground">Coming in Layer 4</p>
         <p className="text-sm text-muted-foreground">

src/app/(dashboard)/[portSlug]/admin/branding/page.tsx

@@ -2,6 +2,7 @@ import {
   SettingsFormCard,
   type SettingFieldDef,
 } from '@/components/admin/shared/settings-form-card';
+import { PageHeader } from '@/components/shared/page-header';
 
 const FIELDS: SettingFieldDef[] = [
   {
@@ -47,13 +48,10 @@ const FIELDS: SettingFieldDef[] = [
 export default function BrandingSettingsPage() {
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Branding</h1>
-        <p className="text-sm text-muted-foreground">
-          Logo, primary color, app name, and email header/footer HTML used by the branded auth shell
-          and outgoing email templates.
-        </p>
-      </div>
+      <PageHeader
+        title="Branding"
+        description="Logo, primary color, app name, and email header/footer HTML used by the branded auth shell and outgoing email templates."
+      />
       <SettingsFormCard
         title="Identity"
         description="App name, logo, and primary color."

src/app/(dashboard)/[portSlug]/admin/documenso/page.tsx

@@ -3,6 +3,7 @@ import {
   type SettingFieldDef,
 } from '@/components/admin/shared/settings-form-card';
 import { DocumensoTestButton } from '@/components/admin/documenso/documenso-test-button';
+import { PageHeader } from '@/components/shared/page-header';
 
 const API_FIELDS: SettingFieldDef[] = [
   {
@@ -48,13 +49,10 @@ const EOI_FIELDS: SettingFieldDef[] = [
 export default function DocumensoSettingsPage() {
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Documenso & EOI</h1>
-        <p className="text-sm text-muted-foreground">
-          API credentials and default EOI generation pathway. Use the test-connection button to
-          verify a saved configuration before relying on it.
-        </p>
-      </div>
+      <PageHeader
+        title="Documenso & EOI"
+        description="API credentials and default EOI generation pathway. Use the test-connection button to verify a saved configuration before relying on it."
+      />
 
       <SettingsFormCard
         title="Documenso API"

src/app/(dashboard)/[portSlug]/admin/email/page.tsx

@@ -2,6 +2,7 @@ import {
   SettingsFormCard,
   type SettingFieldDef,
 } from '@/components/admin/shared/settings-form-card';
+import { PageHeader } from '@/components/shared/page-header';
 
 const FIELDS: SettingFieldDef[] = [
   {
@@ -79,13 +80,10 @@ const FIELDS: SettingFieldDef[] = [
 export default function EmailSettingsPage() {
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Email Settings</h1>
-        <p className="text-sm text-muted-foreground">
-          Per-port outgoing email configuration. SMTP credentials and the From address default to
-          environment variables when these fields are blank.
-        </p>
-      </div>
+      <PageHeader
+        title="Email Settings"
+        description="Per-port outgoing email configuration. SMTP credentials and the From address default to environment variables when these fields are blank."
+      />
       <SettingsFormCard
         title="From address & signature"
         description="Identity headers and shared HTML used by system-generated emails."

src/app/(dashboard)/[portSlug]/admin/import/page.tsx

@@ -1,10 +1,9 @@
+import { PageHeader } from '@/components/shared/page-header';
+
 export default function DataImportPage() {
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold text-foreground">Data Import</h1>
-        <p className="text-muted-foreground">Import data from external sources</p>
-      </div>
+      <PageHeader title="Data Import" description="Import data from external sources" />
       <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
         <p className="text-lg font-medium text-muted-foreground">Coming in Layer 4</p>
         <p className="text-sm text-muted-foreground">

src/app/(dashboard)/[portSlug]/admin/invitations/page.tsx

@@ -1,15 +1,13 @@
 import { InvitationsManager } from '@/components/admin/invitations/invitations-manager';
+import { PageHeader } from '@/components/shared/page-header';
 
 export default function InvitationsPage() {
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Invitations</h1>
-        <p className="text-sm text-muted-foreground">
-          Send a single-use invitation to a new CRM user. The recipient sets their own password via
-          the link in the email.
-        </p>
-      </div>
+      <PageHeader
+        title="Invitations"
+        description="Send a single-use invitation to a new CRM user. The recipient sets their own password via the link in the email."
+      />
       <InvitationsManager />
     </div>
   );

src/app/(dashboard)/[portSlug]/admin/onboarding/page.tsx

@@ -1,10 +1,9 @@
+import { PageHeader } from '@/components/shared/page-header';
+
 export default function OnboardingPage() {
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold text-foreground">Onboarding</h1>
-        <p className="text-muted-foreground">Guided setup for new port configurations</p>
-      </div>
+      <PageHeader title="Onboarding" description="Guided setup for new port configurations" />
       <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
         <p className="text-lg font-medium text-muted-foreground">Coming in Layer 4</p>
         <p className="text-sm text-muted-foreground">

src/app/(dashboard)/[portSlug]/admin/page.tsx

@@ -20,6 +20,7 @@ import {
 } from 'lucide-react';
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { PageHeader } from '@/components/shared/page-header';
 
 interface AdminSection {
   href: string;
@@ -165,13 +166,10 @@ export default async function AdminLandingPage({
   const { portSlug } = await params;
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Administration</h1>
-        <p className="text-sm text-muted-foreground">
-          Per-port configuration and system administration. Each card below opens a dedicated
-          settings page.
-        </p>
-      </div>
+      <PageHeader
+        title="Administration"
+        description="Per-port configuration and system administration. Each card below opens a dedicated settings page."
+      />
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
         {SECTIONS.map((s) => {
           const Icon = s.icon;

src/app/(dashboard)/[portSlug]/admin/reminders/page.tsx

@@ -2,6 +2,7 @@ import {
   SettingsFormCard,
   type SettingFieldDef,
 } from '@/components/admin/shared/settings-form-card';
+import { PageHeader } from '@/components/shared/page-header';
 
 const DEFAULT_FIELDS: SettingFieldDef[] = [
   {
@@ -53,14 +54,10 @@ const DIGEST_FIELDS: SettingFieldDef[] = [
 export default function ReminderSettingsPage() {
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Reminders</h1>
-        <p className="text-sm text-muted-foreground">
-          Default reminder behaviour for new interests and the optional daily-digest delivery
-          window. Individual users can still configure their own digest preferences in Notifications
-          → Preferences.
-        </p>
-      </div>
+      <PageHeader
+        title="Reminders"
+        description="Default reminder behaviour for new interests and the optional daily-digest delivery window. Individual users can still configure their own digest preferences in Notifications → Preferences."
+      />
 
       <SettingsFormCard
         title="Defaults for new interests"

src/app/(dashboard)/[portSlug]/admin/reports/page.tsx

@@ -1,10 +1,12 @@
+import { PageHeader } from '@/components/shared/page-header';
+
 export default function ScheduledReportsPage() {
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold text-foreground">Scheduled Reports</h1>
-        <p className="text-muted-foreground">Configure and manage automated report delivery</p>
-      </div>
+      <PageHeader
+        title="Scheduled Reports"
+        description="Configure and manage automated report delivery"
+      />
       <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
         <p className="text-lg font-medium text-muted-foreground">Coming in Layer 3</p>
         <p className="text-sm text-muted-foreground">

src/app/(dashboard)/[portSlug]/admin/webhooks/page.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
+import { PageHeader } from '@/components/shared/page-header';
 import { Badge } from '@/components/ui/badge';
 import {
   AlertDialog,
@@ -36,7 +37,11 @@ export default function WebhooksPage() {
   const [deleteTarget, setDeleteTarget] = useState<Webhook | null>(null);
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const [regenerating, setRegenerating] = useState<string | null>(null);
-  const [newSecret, setNewSecret] = useState<{ webhookId: string; secret: string; masked: string } | null>(null);
+  const [newSecret, setNewSecret] = useState<{
+    webhookId: string;
+    secret: string;
+    masked: string;
+  } | null>(null);
 
   const loadWebhooks = useCallback(async () => {
     try {
@@ -98,15 +103,20 @@ export default function WebhooksPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-foreground">Webhooks</h1>
-          <p className="text-muted-foreground">Configure outgoing webhook integrations</p>
-        </div>
-        <Button onClick={() => { setEditTarget(null); setFormOpen(true); }}>
-          Add Webhook
-        </Button>
-      </div>
+      <PageHeader
+        title="Webhooks"
+        description="Configure outgoing webhook integrations"
+        actions={
+          <Button
+            onClick={() => {
+              setEditTarget(null);
+              setFormOpen(true);
+            }}
+          >
+            Add Webhook
+          </Button>
+        }
+      />
 
       {loading ? (
         <p className="text-sm text-muted-foreground">Loading...</p>
@@ -116,7 +126,13 @@ export default function WebhooksPage() {
           <p className="text-sm text-muted-foreground mt-1">
             Add a webhook to receive real-time notifications of CRM events.
           </p>
-          <Button className="mt-4" onClick={() => { setEditTarget(null); setFormOpen(true); }}>
+          <Button
+            className="mt-4"
+            onClick={() => {
+              setEditTarget(null);
+              setFormOpen(true);
+            }}
+          >
             Add Webhook
           </Button>
         </div>
@@ -141,17 +157,16 @@ export default function WebhooksPage() {
                 </div>
 
                 <div className="flex items-center gap-2 shrink-0">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => handleToggleActive(webhook)}
-                  >
+                  <Button variant="ghost" size="sm" onClick={() => handleToggleActive(webhook)}>
                     {webhook.isActive ? 'Disable' : 'Enable'}
                   </Button>
                   <Button
                     variant="ghost"
                     size="sm"
-                    onClick={() => { setEditTarget(webhook); setFormOpen(true); }}
+                    onClick={() => {
+                      setEditTarget(webhook);
+                      setFormOpen(true);
+                    }}
                   >
                     Edit
                   </Button>
@@ -163,11 +178,7 @@ export default function WebhooksPage() {
                   >
                     Delete
                   </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => toggleExpand(webhook.id)}
-                  >
+                  <Button variant="ghost" size="sm" onClick={() => toggleExpand(webhook.id)}>
                     {expandedId === webhook.id ? 'Collapse' : 'Details'}
                   </Button>
                 </div>
@@ -228,18 +239,26 @@ export default function WebhooksPage() {
         onSuccess={loadWebhooks}
       />
 
-      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => { if (!open) setDeleteTarget(null); }}>
+      <AlertDialog
+        open={!!deleteTarget}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null);
+        }}
+      >
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>Delete Webhook</AlertDialogTitle>
             <AlertDialogDescription>
-              Delete &quot;{deleteTarget?.name}&quot;? This will also delete all delivery history. This action
-              cannot be undone.
+              Delete &quot;{deleteTarget?.name}&quot;? This will also delete all delivery history.
+              This action cannot be undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground">
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-destructive text-destructive-foreground"
+            >
               Delete
             </AlertDialogAction>
           </AlertDialogFooter>

src/app/(dashboard)/[portSlug]/expenses/page.tsx

@@ -20,6 +20,7 @@ import { TableSkeleton } from '@/components/shared/loading-skeleton';
 import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog';
 import { PermissionGate } from '@/components/shared/permission-gate';
 import { ExpenseFormDialog } from '@/components/expenses/expense-form-dialog';
+import { ExpenseCard } from '@/components/expenses/expense-card';
 import { expenseFilterDefinitions } from '@/components/expenses/expense-filters';
 import { getExpenseColumns, type ExpenseRow } from '@/components/expenses/expense-columns';
 import { usePaginatedQuery } from '@/hooks/use-paginated-query';
@@ -60,8 +61,7 @@ export default function ExpensesPage() {
   });
 
   const archiveMutation = useMutation({
-    mutationFn: (id: string) =>
-      apiFetch(`/api/v1/expenses/${id}`, { method: 'DELETE' }),
+    mutationFn: (id: string) => apiFetch(`/api/v1/expenses/${id}`, { method: 'DELETE' }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['expenses'] });
       setArchiveExpense(null);
@@ -151,6 +151,14 @@ export default function ExpensesPage() {
           onSortChange={setSort}
           isLoading={isFetching && !isLoading}
           getRowId={(row) => row.id}
+          cardRender={(row) => (
+            <ExpenseCard
+              expense={row.original}
+              portSlug={portSlug}
+              onEdit={setEditExpense}
+              onArchive={setArchiveExpense}
+            />
+          )}
           emptyState={
             <EmptyState
               title="No expenses found"

src/app/(dashboard)/[portSlug]/expenses/scan/page.tsx

@@ -1,9 +1,11 @@
 'use client';
 
-import { useState, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { useMutation } from '@tanstack/react-query';
-import { Upload, Loader2, ScanLine } from 'lucide-react';
+import { Camera, Loader2, ScanLine, Upload } from 'lucide-react';
+
+import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
 
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -33,9 +35,16 @@ export default function ScanReceiptPage() {
   const router = useRouter();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const cameraInputRef = useRef<HTMLInputElement>(null);
   const [scanResult, setScanResult] = useState<ScanResult | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
+  const { setChrome } = useMobileChrome();
+  useEffect(() => {
+    setChrome({ title: 'Scan Receipt', showBackButton: true });
+    return () => setChrome({ title: null, showBackButton: false });
+  }, [setChrome]);
+
   // Editable fields from scan
   const [establishment, setEstablishment] = useState('');
   const [amount, setAmount] = useState('');
@@ -94,7 +103,7 @@ export default function ScanReceiptPage() {
 
   return (
     <div className="max-w-2xl mx-auto space-y-6">
-      <div>
+      <div className="hidden sm:block">
         <h1 className="text-2xl font-bold">Scan Receipt</h1>
         <p className="text-muted-foreground mt-1">
           Upload a receipt image and we will extract the expense details automatically.
@@ -109,28 +118,44 @@ export default function ScanReceiptPage() {
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div
-            className="border-2 border-dashed rounded-lg p-8 text-center cursor-pointer hover:bg-muted/50 transition-colors"
-            onClick={() => fileInputRef.current?.click()}
-          >
-            {previewUrl ? (
+          {previewUrl ? (
+            <div
+              className="border-2 border-dashed rounded-lg p-4 text-center cursor-pointer hover:bg-muted/50 transition-colors"
+              onClick={() => fileInputRef.current?.click()}
+            >
               <img
                 src={previewUrl}
                 alt="Receipt preview"
                 className="max-h-64 mx-auto rounded object-contain"
               />
-            ) : (
-              <div className="space-y-2">
-                <Upload className="h-8 w-8 mx-auto text-muted-foreground" />
-                <p className="text-sm text-muted-foreground">
-                  Click to upload or drag and drop
-                </p>
-                <p className="text-xs text-muted-foreground">
-                  JPEG, PNG, WebP up to 10MB
-                </p>
-              </div>
-            )}
-          </div>
+            </div>
+          ) : (
+            <div className="grid gap-2 sm:grid-cols-2">
+              <Button
+                type="button"
+                size="lg"
+                className="w-full h-14 sm:hidden"
+                onClick={() => cameraInputRef.current?.click()}
+              >
+                <Camera className="mr-2 h-5 w-5" />
+                Take photo
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="lg"
+                className="w-full h-14"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                <Upload className="mr-2 h-5 w-5" />
+                <span className="sm:hidden">Choose from library</span>
+                <span className="hidden sm:inline">Click to upload or drag and drop</span>
+              </Button>
+              <p className="text-xs text-muted-foreground sm:col-span-2 text-center">
+                JPEG, PNG, WebP up to 10MB
+              </p>
+            </div>
+          )}
           <input
             ref={fileInputRef}
             type="file"
@@ -138,6 +163,14 @@ export default function ScanReceiptPage() {
             className="hidden"
             onChange={handleFileChange}
           />
+          <input
+            ref={cameraInputRef}
+            type="file"
+            accept="image/*"
+            capture="environment"
+            className="hidden"
+            onChange={handleFileChange}
+          />
 
           {scanMutation.isPending && (
             <div className="flex items-center justify-center gap-2 mt-4 text-muted-foreground">
@@ -222,25 +255,18 @@ export default function ScanReceiptPage() {
             </div>
 
             {saveMutation.isError && (
-              <p className="text-sm text-destructive">
-                {(saveMutation.error as Error).message}
-              </p>
+              <p className="text-sm text-destructive">{(saveMutation.error as Error).message}</p>
             )}
 
             <div className="flex gap-2 pt-2">
-              <Button
-                variant="outline"
-                onClick={() => router.push(`/${params.portSlug}/expenses`)}
-              >
+              <Button variant="outline" onClick={() => router.push(`/${params.portSlug}/expenses`)}>
                 Cancel
               </Button>
               <Button
                 onClick={() => saveMutation.mutate()}
                 disabled={saveMutation.isPending || !amount}
               >
-                {saveMutation.isPending && (
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                )}
+                {saveMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                 Save as Expense
               </Button>
             </div>

src/app/(dashboard)/[portSlug]/invoices/new/page.tsx

@@ -1,11 +1,13 @@
 'use client';
 
-import { useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { useForm, FormProvider } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useMutation } from '@tanstack/react-query';
-import { ChevronLeft, ChevronRight, Check, Loader2 } from 'lucide-react';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { ChevronLeft, ChevronRight, Check, Loader2, Wallet } from 'lucide-react';
+
+import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
 
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -43,9 +45,35 @@ export default function NewInvoicePage() {
   const params = useParams<{ portSlug: string }>();
   const portSlug = params?.portSlug ?? '';
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const prefilledInterestId = searchParams.get('interestId') ?? undefined;
+  const prefilledKind =
+    searchParams.get('kind') === 'deposit' ? ('deposit' as const) : ('general' as const);
 
   const [step, setStep] = useState(1);
 
+  const { setChrome } = useMobileChrome();
+  useEffect(() => {
+    setChrome({ title: 'New Invoice', showBackButton: true });
+    return () => setChrome({ title: null, showBackButton: false });
+  }, [setChrome]);
+
+  // When the form is launched from an interest detail with `?interestId=…&kind=deposit`,
+  // fetch enough of the interest to display "Deposit for {client} — Berth {n}" in
+  // the review step. Doubles as the source of truth for the billing entity prefill.
+  const { data: prefilledInterest } = useQuery<{
+    data: {
+      id: string;
+      clientId: string;
+      clientName: string | null;
+      berthMooringNumber: string | null;
+    };
+  }>({
+    queryKey: ['interest-prefill', prefilledInterestId],
+    queryFn: () => apiFetch(`/api/v1/interests/${prefilledInterestId}`),
+    enabled: !!prefilledInterestId,
+  });
+
   const methods = useForm<CreateInvoiceInput>({
     resolver: zodResolver(createInvoiceSchema),
     defaultValues: {
@@ -53,6 +81,8 @@ export default function NewInvoicePage() {
       currency: 'USD',
       lineItems: [],
       expenseIds: [],
+      interestId: prefilledInterestId,
+      kind: prefilledKind,
     },
   });
 
@@ -65,6 +95,21 @@ export default function NewInvoicePage() {
   } = methods;
 
   const watchedValues = watch();
+  const isDepositInvoice = watchedValues.kind === 'deposit';
+
+  // Pre-fill the billing entity from the linked interest's client on launch.
+  useEffect(() => {
+    if (prefilledInterest?.data && !watchedValues.billingEntity) {
+      setValue(
+        'billingEntity',
+        { type: 'client', id: prefilledInterest.data.clientId },
+        { shouldValidate: true },
+      );
+    }
+    // We only want this to run when the interest data first arrives.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [prefilledInterest?.data?.clientId]);
+
   const lineItems = watchedValues.lineItems ?? [];
   const subtotal = lineItems.reduce(
     (sum, li) => sum + (Number(li.quantity) || 0) * (Number(li.unitPrice) || 0),
@@ -117,8 +162,8 @@ export default function NewInvoicePage() {
 
   return (
     <div className="max-w-2xl mx-auto space-y-6">
-      {/* Header */}
-      <div className="flex items-center gap-3">
+      {/* Header — desktop only; mobile gets the title from the topbar */}
+      <div className="hidden sm:flex items-center gap-3">
         <Button variant="ghost" size="sm" onClick={() => router.push(`/${portSlug}/invoices`)}>
           <ChevronLeft className="h-4 w-4" />
         </Button>
@@ -157,6 +202,23 @@ export default function NewInvoicePage() {
                 <CardTitle className="text-base">Client Information</CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
+                {isDepositInvoice ? (
+                  <div className="flex items-start gap-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900">
+                    <Wallet className="mt-0.5 h-4 w-4 shrink-0" />
+                    <div className="min-w-0">
+                      <p className="font-medium">Deposit invoice</p>
+                      <p className="text-xs text-amber-800">
+                        {prefilledInterest?.data
+                          ? `Linked to ${prefilledInterest.data.clientName ?? 'interest'}${
+                              prefilledInterest.data.berthMooringNumber
+                                ? ` — Berth ${prefilledInterest.data.berthMooringNumber}`
+                                : ''
+                            }. Marking this invoice as paid will advance the interest to "Deposit 10%".`
+                          : 'Marking this invoice as paid will advance the linked interest to "Deposit 10%".'}
+                      </p>
+                    </div>
+                  </div>
+                ) : null}
                 <div className="space-y-2">
                   <Label>
                     Billing entity <span className="text-destructive">*</span>

src/app/(dashboard)/[portSlug]/invoices/page.tsx

@@ -12,6 +12,7 @@ import { PageHeader } from '@/components/shared/page-header';
 import { EmptyState } from '@/components/shared/empty-state';
 import { TableSkeleton } from '@/components/shared/loading-skeleton';
 import { PermissionGate } from '@/components/shared/permission-gate';
+import { InvoiceCard } from '@/components/invoices/invoice-card';
 import { invoiceFilterDefinitions } from '@/components/invoices/invoice-filters';
 import { getInvoiceColumns, type InvoiceRow } from '@/components/invoices/invoice-columns';
 import { usePaginatedQuery } from '@/hooks/use-paginated-query';
@@ -63,8 +64,7 @@ export default function InvoicesPage() {
   });
 
   const deleteMutation = useMutation({
-    mutationFn: (id: string) =>
-      apiFetch(`/api/v1/invoices/${id}`, { method: 'DELETE' }),
+    mutationFn: (id: string) => apiFetch(`/api/v1/invoices/${id}`, { method: 'DELETE' }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['invoices'] });
       setDeleteTarget(null);
@@ -72,8 +72,7 @@ export default function InvoicesPage() {
   });
 
   const sendMutation = useMutation({
-    mutationFn: (id: string) =>
-      apiFetch(`/api/v1/invoices/${id}/send`, { method: 'POST' }),
+    mutationFn: (id: string) => apiFetch(`/api/v1/invoices/${id}/send`, { method: 'POST' }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['invoices'] });
     },
@@ -82,8 +81,7 @@ export default function InvoicesPage() {
   const columns = getInvoiceColumns({
     portSlug,
     onSend: (invoice) => sendMutation.mutate(invoice.id),
-    onRecordPayment: (invoice) =>
-      router.push(`/${portSlug}/invoices/${invoice.id}?tab=payment`),
+    onRecordPayment: (invoice) => router.push(`/${portSlug}/invoices/${invoice.id}?tab=payment`),
     onDelete: (invoice) => setDeleteTarget(invoice),
   });
 
@@ -141,6 +139,17 @@ export default function InvoicesPage() {
           onSortChange={setSort}
           isLoading={isFetching && !isLoading}
           getRowId={(row) => row.id}
+          cardRender={(row) => (
+            <InvoiceCard
+              invoice={row.original}
+              portSlug={portSlug}
+              onSend={(invoice) => sendMutation.mutate(invoice.id)}
+              onRecordPayment={(invoice) =>
+                router.push(`/${portSlug}/invoices/${invoice.id}?tab=payment`)
+              }
+              onDelete={setDeleteTarget}
+            />
+          )}
           emptyState={
             <EmptyState
               title="No invoices found"
@@ -161,15 +170,11 @@ export default function InvoicesPage() {
             <h3 className="font-semibold">Delete Invoice?</h3>
             <p className="text-sm text-muted-foreground">
               This will permanently delete invoice{' '}
-              <span className="font-mono font-medium">{deleteTarget.invoiceNumber}</span>.
-              This action cannot be undone.
+              <span className="font-mono font-medium">{deleteTarget.invoiceNumber}</span>. This
+              action cannot be undone.
             </p>
             <div className="flex items-center gap-2 justify-end">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setDeleteTarget(null)}
-              >
+              <Button variant="outline" size="sm" onClick={() => setDeleteTarget(null)}>
                 Cancel
               </Button>
               <Button

src/app/(dashboard)/layout.tsx

@@ -12,6 +12,7 @@ import { PortProvider } from '@/providers/port-provider';
 import { PermissionsProvider } from '@/providers/permissions-provider';
 import { Sidebar } from '@/components/layout/sidebar';
 import { Topbar } from '@/components/layout/topbar';
+import { MobileLayout } from '@/components/layout/mobile/mobile-layout';
 
 export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
   const session = await auth.api.getSession({ headers: await headers() });
@@ -37,7 +38,8 @@ export default async function DashboardLayout({ children }: { children: React.Re
       <PortProvider ports={ports} defaultPortId={ports[0]?.id ?? null}>
         <PermissionsProvider>
           <SocketProvider>
-            <div className="flex h-screen overflow-hidden bg-background">
+            {/* Desktop shell — hidden by CSS on mobile */}
+            <div data-shell="desktop" className="flex h-screen overflow-hidden bg-background">
               <Sidebar
                 portRoles={portRoles}
                 isSuperAdmin={profile?.isSuperAdmin ?? false}
@@ -57,6 +59,9 @@ export default async function DashboardLayout({ children }: { children: React.Re
                 <main className="flex-1 overflow-y-auto bg-background p-6">{children}</main>
               </div>
             </div>
+
+            {/* Mobile shell — hidden by CSS on desktop */}
+            <MobileLayout>{children}</MobileLayout>
           </SocketProvider>
         </PermissionsProvider>
       </PortProvider>

src/app/(portal)/portal/interests/page.tsx

@@ -5,28 +5,19 @@ import type { Metadata } from 'next';
 import { getPortalSession } from '@/lib/portal/auth';
 import { getClientInterests } from '@/lib/services/portal.service';
 import { Badge } from '@/components/ui/badge';
+import { stageLabel, safeStage, type PipelineStage } from '@/lib/constants';
 
 export const metadata: Metadata = { title: 'Interests' };
 
-const STAGE_LABELS: Record<string, string> = {
-  open: 'Open',
-  details_sent: 'Details Sent',
-  in_communication: 'In Communication',
-  visited: 'Visited',
-  signed_eoi_nda: 'EOI / NDA Signed',
-  deposit_10pct: 'Deposit Received',
-  contract: 'Contract Stage',
-  completed: 'Completed',
-};
-
-const STAGE_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+const STAGE_VARIANT: Record<PipelineStage, 'default' | 'secondary' | 'destructive' | 'outline'> = {
   open: 'secondary',
   details_sent: 'secondary',
   in_communication: 'default',
-  visited: 'default',
-  signed_eoi_nda: 'default',
+  eoi_sent: 'default',
+  eoi_signed: 'default',
   deposit_10pct: 'default',
-  contract: 'default',
+  contract_sent: 'default',
+  contract_signed: 'default',
   completed: 'outline',
 };
 
@@ -40,9 +31,7 @@ export default async function PortalInterestsPage() {
     <div className="space-y-6">
       <div>
         <h1 className="text-2xl font-semibold text-gray-900">Berth Interests</h1>
-        <p className="text-sm text-gray-500 mt-1">
-          Your berth enquiries and applications
-        </p>
+        <p className="text-sm text-gray-500 mt-1">Your berth enquiries and applications</p>
       </div>
 
       {interests.length === 0 ? (
@@ -56,10 +45,7 @@ export default async function PortalInterestsPage() {
       ) : (
         <div className="space-y-3">
           {interests.map((interest) => (
-            <div
-              key={interest.id}
-              className="bg-white rounded-lg border p-5"
-            >
+            <div key={interest.id} className="bg-white rounded-lg border p-5">
               <div className="flex items-start justify-between gap-4">
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1">
@@ -98,8 +84,8 @@ export default async function PortalInterestsPage() {
                     )}
                   </div>
                 </div>
-                <Badge variant={STAGE_COLORS[interest.pipelineStage] ?? 'default'}>
-                  {STAGE_LABELS[interest.pipelineStage] ?? interest.pipelineStage}
+                <Badge variant={STAGE_VARIANT[safeStage(interest.pipelineStage)]}>
+                  {stageLabel(interest.pipelineStage)}
                 </Badge>
               </div>
             </div>

src/app/api/v1/berth-reservations/[id]/handlers.ts

@@ -0,0 +1,107 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+
+import { type RouteHandler } from '@/lib/api/helpers';
+import { parseBody } from '@/lib/api/route-helpers';
+import { requirePermission } from '@/lib/auth/permissions';
+import { errorResponse } from '@/lib/errors';
+import {
+  activate,
+  cancel,
+  endReservation,
+  getById,
+} from '@/lib/services/berth-reservations.service';
+
+// ─── PATCH body schema (action-based discriminated union) ────────────────────
+
+const patchBodySchema = z.discriminatedUnion('action', [
+  z.object({
+    action: z.literal('activate'),
+    contractFileId: z.string().optional(),
+    effectiveDate: z.coerce.date().optional(),
+  }),
+  z.object({
+    action: z.literal('end'),
+    endDate: z.coerce.date(),
+    notes: z.string().optional(),
+  }),
+  z.object({
+    action: z.literal('cancel'),
+    reason: z.string().optional(),
+  }),
+]);
+
+// ─── Handlers ────────────────────────────────────────────────────────────────
+
+export const getHandler: RouteHandler = async (_req, ctx, params) => {
+  try {
+    const reservation = await getById(params.id!, ctx.portId);
+    return NextResponse.json({ data: reservation });
+  } catch (error) {
+    return errorResponse(error);
+  }
+};
+
+export const patchHandler: RouteHandler = async (req, ctx, params) => {
+  try {
+    const body = await parseBody(req, patchBodySchema);
+    const meta = {
+      userId: ctx.userId,
+      portId: ctx.portId,
+      ipAddress: ctx.ipAddress,
+      userAgent: ctx.userAgent,
+    };
+
+    if (body.action === 'activate') {
+      requirePermission(ctx, 'reservations', 'activate');
+      const result = await activate(
+        params.id!,
+        ctx.portId,
+        {
+          contractFileId: body.contractFileId,
+          effectiveDate: body.effectiveDate,
+        },
+        meta,
+      );
+      return NextResponse.json({ data: result });
+    }
+
+    if (body.action === 'end') {
+      // `end` is lifecycle progression; same privilege as activate.
+      requirePermission(ctx, 'reservations', 'activate');
+      const result = await endReservation(
+        params.id!,
+        ctx.portId,
+        { endDate: body.endDate, notes: body.notes },
+        meta,
+      );
+      return NextResponse.json({ data: result });
+    }
+
+    // action === 'cancel'
+    requirePermission(ctx, 'reservations', 'cancel');
+    const result = await cancel(params.id!, ctx.portId, { reason: body.reason }, meta);
+    return NextResponse.json({ data: result });
+  } catch (error) {
+    return errorResponse(error);
+  }
+};
+
+export const deleteHandler: RouteHandler = async (_req, ctx, params) => {
+  try {
+    await cancel(
+      params.id!,
+      ctx.portId,
+      {},
+      {
+        userId: ctx.userId,
+        portId: ctx.portId,
+        ipAddress: ctx.ipAddress,
+        userAgent: ctx.userAgent,
+      },
+    );
+    return new NextResponse(null, { status: 204 });
+  } catch (error) {
+    return errorResponse(error);
+  }
+};

src/app/api/v1/berth-reservations/[id]/route.ts

@@ -1,110 +1,6 @@
-import { NextResponse } from 'next/server';
-import { z } from 'zod';
+import { withAuth, withPermission } from '@/lib/api/helpers';
 
-import { withAuth, withPermission, type RouteHandler } from '@/lib/api/helpers';
-import { parseBody } from '@/lib/api/route-helpers';
-import { requirePermission } from '@/lib/auth/permissions';
-import { errorResponse } from '@/lib/errors';
-import {
-  activate,
-  cancel,
-  endReservation,
-  getById,
-} from '@/lib/services/berth-reservations.service';
-
-// ─── PATCH body schema (action-based discriminated union) ────────────────────
-
-const patchBodySchema = z.discriminatedUnion('action', [
-  z.object({
-    action: z.literal('activate'),
-    contractFileId: z.string().optional(),
-    effectiveDate: z.coerce.date().optional(),
-  }),
-  z.object({
-    action: z.literal('end'),
-    endDate: z.coerce.date(),
-    notes: z.string().optional(),
-  }),
-  z.object({
-    action: z.literal('cancel'),
-    reason: z.string().optional(),
-  }),
-]);
-
-// ─── Handlers ────────────────────────────────────────────────────────────────
-
-export const getHandler: RouteHandler = async (_req, ctx, params) => {
-  try {
-    const reservation = await getById(params.id!, ctx.portId);
-    return NextResponse.json({ data: reservation });
-  } catch (error) {
-    return errorResponse(error);
-  }
-};
-
-export const patchHandler: RouteHandler = async (req, ctx, params) => {
-  try {
-    const body = await parseBody(req, patchBodySchema);
-    const meta = {
-      userId: ctx.userId,
-      portId: ctx.portId,
-      ipAddress: ctx.ipAddress,
-      userAgent: ctx.userAgent,
-    };
-
-    if (body.action === 'activate') {
-      requirePermission(ctx, 'reservations', 'activate');
-      const result = await activate(
-        params.id!,
-        ctx.portId,
-        {
-          contractFileId: body.contractFileId,
-          effectiveDate: body.effectiveDate,
-        },
-        meta,
-      );
-      return NextResponse.json({ data: result });
-    }
-
-    if (body.action === 'end') {
-      // `end` is lifecycle progression; same privilege as activate.
-      requirePermission(ctx, 'reservations', 'activate');
-      const result = await endReservation(
-        params.id!,
-        ctx.portId,
-        { endDate: body.endDate, notes: body.notes },
-        meta,
-      );
-      return NextResponse.json({ data: result });
-    }
-
-    // action === 'cancel'
-    requirePermission(ctx, 'reservations', 'cancel');
-    const result = await cancel(params.id!, ctx.portId, { reason: body.reason }, meta);
-    return NextResponse.json({ data: result });
-  } catch (error) {
-    return errorResponse(error);
-  }
-};
-
-export const deleteHandler: RouteHandler = async (_req, ctx, params) => {
-  try {
-    await cancel(
-      params.id!,
-      ctx.portId,
-      {},
-      {
-        userId: ctx.userId,
-        portId: ctx.portId,
-        ipAddress: ctx.ipAddress,
-        userAgent: ctx.userAgent,
-      },
-    );
-    return new NextResponse(null, { status: 204 });
-  } catch (error) {
-    return errorResponse(error);
-  }
-};
+import { getHandler, patchHandler, deleteHandler } from './handlers';
 
 export const GET = withAuth(withPermission('reservations', 'view', getHandler));
 // PATCH cannot use `withPermission` wrapper — the required permission depends

src/app/api/v1/companies/[id]/members/[mid]/handlers.ts

@@ -0,0 +1,47 @@
+import { NextResponse } from 'next/server';
+
+import { type RouteHandler } from '@/lib/api/helpers';
+import { parseBody } from '@/lib/api/route-helpers';
+import { errorResponse } from '@/lib/errors';
+import { endMembership, updateMembership } from '@/lib/services/company-memberships.service';
+import { endMembershipSchema, updateMembershipSchema } from '@/lib/validators/company-memberships';
+
+export const patchHandler: RouteHandler = async (req, ctx, params) => {
+  try {
+    const body = await parseBody(req, updateMembershipSchema);
+    const updated = await updateMembership(params.mid!, ctx.portId, body, {
+      userId: ctx.userId,
+      portId: ctx.portId,
+      ipAddress: ctx.ipAddress,
+      userAgent: ctx.userAgent,
+    });
+    return NextResponse.json({ data: updated });
+  } catch (error) {
+    return errorResponse(error);
+  }
+};
+
+export const deleteHandler: RouteHandler = async (req, ctx, params) => {
+  try {
+    let endDate = new Date();
+    const text = await req.text();
+    if (text.length > 0) {
+      const parsed = endMembershipSchema.parse(JSON.parse(text));
+      endDate = parsed.endDate;
+    }
+    await endMembership(
+      params.mid!,
+      ctx.portId,
+      { endDate },
+      {
+        userId: ctx.userId,
+        portId: ctx.portId,
+        ipAddress: ctx.ipAddress,
+        userAgent: ctx.userAgent,
+      },
+    );
+    return new NextResponse(null, { status: 204 });
+  } catch (error) {
+    return errorResponse(error);
+  }
+};

src/app/api/v1/companies/[id]/members/[mid]/route.ts

@@ -1,50 +1,6 @@
-import { NextResponse } from 'next/server';
+import { withAuth, withPermission } from '@/lib/api/helpers';
 
-import { withAuth, withPermission, type RouteHandler } from '@/lib/api/helpers';
-import { parseBody } from '@/lib/api/route-helpers';
-import { errorResponse } from '@/lib/errors';
-import { endMembership, updateMembership } from '@/lib/services/company-memberships.service';
-import { endMembershipSchema, updateMembershipSchema } from '@/lib/validators/company-memberships';
-
-export const patchHandler: RouteHandler = async (req, ctx, params) => {
-  try {
-    const body = await parseBody(req, updateMembershipSchema);
-    const updated = await updateMembership(params.mid!, ctx.portId, body, {
-      userId: ctx.userId,
-      portId: ctx.portId,
-      ipAddress: ctx.ipAddress,
-      userAgent: ctx.userAgent,
-    });
-    return NextResponse.json({ data: updated });
-  } catch (error) {
-    return errorResponse(error);
-  }
-};
-
-export const deleteHandler: RouteHandler = async (req, ctx, params) => {
-  try {
-    let endDate = new Date();
-    const text = await req.text();
-    if (text.length > 0) {
-      const parsed = endMembershipSchema.parse(JSON.parse(text));
-      endDate = parsed.endDate;
-    }
-    await endMembership(
-      params.mid!,
-      ctx.portId,
-      { endDate },
-      {
-        userId: ctx.userId,
-        portId: ctx.portId,
-        ipAddress: ctx.ipAddress,
-        userAgent: ctx.userAgent,
-      },
-    );
-    return new NextResponse(null, { status: 204 });
-  } catch (error) {
-    return errorResponse(error);
-  }
-};
+import { patchHandler, deleteHandler } from './handlers';
 
 export const PATCH = withAuth(withPermission('memberships', 'manage', patchHandler));
 export const DELETE = withAuth(withPermission('memberships', 'manage', deleteHandler));

src/app/api/v1/companies/[id]/members/[mid]/set-primary/handlers.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+
+import { type RouteHandler } from '@/lib/api/helpers';
+import { errorResponse } from '@/lib/errors';
+import { setPrimary } from '@/lib/services/company-memberships.service';
+
+export const setPrimaryHandler: RouteHandler = async (_req, ctx, params) => {
+  try {
+    const membership = await setPrimary(params.mid!, ctx.portId, {
+      userId: ctx.userId,
+      portId: ctx.portId,
+      ipAddress: ctx.ipAddress,
+      userAgent: ctx.userAgent,
+    });
+    return NextResponse.json({ data: membership });
+  } catch (error) {
+    return errorResponse(error);
+  }
+};

src/app/api/v1/companies/[id]/members/[mid]/set-primary/route.ts

@@ -1,21 +1,5 @@
-import { NextResponse } from 'next/server';
+import { withAuth, withPermission } from '@/lib/api/helpers';
 
-import { withAuth, withPermission, type RouteHandler } from '@/lib/api/helpers';
-import { errorResponse } from '@/lib/errors';
-import { setPrimary } from '@/lib/services/company-memberships.service';
-
-export const setPrimaryHandler: RouteHandler = async (_req, ctx, params) => {
-  try {
-    const membership = await setPrimary(params.mid!, ctx.portId, {
-      userId: ctx.userId,
-      portId: ctx.portId,
-      ipAddress: ctx.ipAddress,
-      userAgent: ctx.userAgent,
-    });
-    return NextResponse.json({ data: membership });
-  } catch (error) {
-    return errorResponse(error);
-  }
-};
+import { setPrimaryHandler } from './handlers';
 
 export const POST = withAuth(withPermission('memberships', 'manage', setPrimaryHandler));

src/app/api/v1/companies/[id]/members/handlers.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+
+import { type RouteHandler } from '@/lib/api/helpers';
+import { parseBody, parseQuery } from '@/lib/api/route-helpers';
+import { errorResponse } from '@/lib/errors';
+import { addMembership, listByCompany } from '@/lib/services/company-memberships.service';
+import { addMembershipSchema } from '@/lib/validators/company-memberships';
+
+const listQuerySchema = z.object({
+  activeOnly: z
+    .enum(['true', 'false'])
+    .transform((v) => v === 'true')
+    .default('true'),
+});
+
+export const listHandler: RouteHandler = async (req, ctx, params) => {
+  try {
+    const { activeOnly } = parseQuery(req, listQuerySchema);
+    const memberships = await listByCompany(params.id!, ctx.portId, { activeOnly });
+    return NextResponse.json({ data: memberships });
+  } catch (error) {
+    return errorResponse(error);
+  }
+};
+
+export const createHandler: RouteHandler = async (req, ctx, params) => {
+  try {
+    const body = await parseBody(req, addMembershipSchema);
+    const membership = await addMembership(params.id!, ctx.portId, body, {
+      userId: ctx.userId,
+      portId: ctx.portId,
+      ipAddress: ctx.ipAddress,
+      userAgent: ctx.userAgent,
+    });
+    return NextResponse.json({ data: membership }, { status: 201 });
+  } catch (error) {
+    return errorResponse(error);
+  }
+};

src/app/api/v1/companies/[id]/members/route.ts

@@ -1,43 +1,6 @@
-import { NextResponse } from 'next/server';
-import { z } from 'zod';
+import { withAuth, withPermission } from '@/lib/api/helpers';
 
-import { withAuth, withPermission, type RouteHandler } from '@/lib/api/helpers';
-import { parseBody, parseQuery } from '@/lib/api/route-helpers';
-import { errorResponse } from '@/lib/errors';
-import { addMembership, listByCompany } from '@/lib/services/company-memberships.service';
-import { addMembershipSchema } from '@/lib/validators/company-memberships';
-
-const listQuerySchema = z.object({
-  activeOnly: z
-    .enum(['true', 'false'])
-    .transform((v) => v === 'true')
-    .default('true'),
-});
-
-export const listHandler: RouteHandler = async (req, ctx, params) => {
-  try {
-    const { activeOnly } = parseQuery(req, listQuerySchema);
-    const memberships = await listByCompany(params.id!, ctx.portId, { activeOnly });
-    return NextResponse.json({ data: memberships });
-  } catch (error) {
-    return errorResponse(error);
-  }
-};
-
-export const createHandler: RouteHandler = async (req, ctx, params) => {
-  try {
-    const body = await parseBody(req, addMembershipSchema);
-    const membership = await addMembership(params.id!, ctx.portId, body, {
-      userId: ctx.userId,
-      portId: ctx.portId,
-      ipAddress: ctx.ipAddress,
-      userAgent: ctx.userAgent,
-    });
-    return NextResponse.json({ data: membership }, { status: 201 });
-  } catch (error) {
-    return errorResponse(error);
-  }
-};
+import { listHandler, createHandler } from './handlers';
 
 export const GET = withAuth(withPermission('memberships', 'view', listHandler));
 export const POST = withAuth(withPermission('memberships', 'manage', createHandler));

src/app/api/v1/companies/autocomplete/handlers.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server';
+
+import { type RouteHandler } from '@/lib/api/helpers';
+import { errorResponse } from '@/lib/errors';
+import { autocomplete } from '@/lib/services/companies.service';
+
+export const autocompleteHandler: RouteHandler = async (req, ctx) => {
+  try {
+    const q = req.nextUrl.searchParams.get('q');
+    if (!q) {
+      return NextResponse.json({ data: [] });
+    }
+    const companies = await autocomplete(ctx.portId, q);
+    return NextResponse.json({ data: companies });
+  } catch (error) {
+    return errorResponse(error);
+  }
+};

src/app/api/v1/companies/autocomplete/route.ts

@@ -1,20 +1,5 @@
-import { NextResponse } from 'next/server';
+import { withAuth, withPermission } from '@/lib/api/helpers';
 
-import { withAuth, withPermission, type RouteHandler } from '@/lib/api/helpers';
-import { errorResponse } from '@/lib/errors';
-import { autocomplete } from '@/lib/services/companies.service';
-
-export const autocompleteHandler: RouteHandler = async (req, ctx) => {
-  try {
-    const q = req.nextUrl.searchParams.get('q');
-    if (!q) {
-      return NextResponse.json({ data: [] });
-    }
-    const companies = await autocomplete(ctx.portId, q);
-    return NextResponse.json({ data: companies });
-  } catch (error) {
-    return errorResponse(error);
-  }
-};
+import { autocompleteHandler } from './handlers';
 
 export const GET = withAuth(withPermission('companies', 'view', autocompleteHandler));

src/app/api/v1/interests/[id]/outcome/route.ts

@@ -0,0 +1,41 @@
+import { NextResponse } from 'next/server';
+
+import { withAuth, withPermission } from '@/lib/api/helpers';
+import { parseBody } from '@/lib/api/route-helpers';
+import { errorResponse } from '@/lib/errors';
+import { clearInterestOutcome, setInterestOutcome } from '@/lib/services/interests.service';
+import { clearOutcomeSchema, setOutcomeSchema } from '@/lib/validators/interests';
+
+export const POST = withAuth(
+  withPermission('interests', 'change_stage', async (req, ctx, params) => {
+    try {
+      const body = await parseBody(req, setOutcomeSchema);
+      const result = await setInterestOutcome(params.id!, ctx.portId, body, {
+        userId: ctx.userId,
+        portId: ctx.portId,
+        ipAddress: ctx.ipAddress,
+        userAgent: ctx.userAgent,
+      });
+      return NextResponse.json({ data: result });
+    } catch (error) {
+      return errorResponse(error);
+    }
+  }),
+);
+
+export const DELETE = withAuth(
+  withPermission('interests', 'change_stage', async (req, ctx, params) => {
+    try {
+      const body = await parseBody(req, clearOutcomeSchema);
+      const result = await clearInterestOutcome(params.id!, ctx.portId, body, {
+        userId: ctx.userId,
+        portId: ctx.portId,
+        ipAddress: ctx.ipAddress,
+        userAgent: ctx.userAgent,
+      });
+      return NextResponse.json({ data: result });
+    } catch (error) {
+      return errorResponse(error);
+    }
+  }),
+);

src/app/api/v1/interests/[id]/timeline/route.ts

@@ -7,6 +7,25 @@ import { db } from '@/lib/db';
 import { interests } from '@/lib/db/schema/interests';
 import { auditLogs } from '@/lib/db/schema/system';
 import { documents, documentEvents } from '@/lib/db/schema/documents';
+import { stageLabel } from '@/lib/constants';
+
+const OUTCOME_LABELS: Record<string, string> = {
+  won: 'Won',
+  lost_other_marina: 'Lost — went to another marina',
+  lost_unqualified: 'Lost — unqualified',
+  lost_no_response: 'Lost — no response',
+  cancelled: 'Cancelled',
+};
+
+const DOC_EVENT_LABELS: Record<string, string> = {
+  sent: 'sent for signing',
+  completed: 'fully signed',
+  signed: 'signed by recipient',
+  rejected: 'rejected',
+  expired: 'expired',
+  cancelled: 'cancelled',
+  reminder_sent: 'reminder sent',
+};
 
 interface TimelineEvent {
   id: string;
@@ -33,12 +52,7 @@ export const GET = withAuth(
       const auditRows = await db
         .select()
         .from(auditLogs)
-        .where(
-          and(
-            eq(auditLogs.entityType, 'interest'),
-            eq(auditLogs.entityId, interestId),
-          ),
-        )
+        .where(and(eq(auditLogs.entityType, 'interest'), eq(auditLogs.entityId, interestId)))
         .orderBy(desc(auditLogs.createdAt))
         .limit(50);
 
@@ -72,21 +86,30 @@ export const GET = withAuth(
         id: row.id,
         type: 'audit',
         action: row.action,
-        description: buildAuditDescription(row.action, row.newValue as Record<string, unknown> | null),
+        description: buildAuditDescription(
+          row.action,
+          row.newValue as Record<string, unknown> | null,
+          (row.metadata as Record<string, unknown>) ?? {},
+          row.userId,
+        ),
         userId: row.userId,
         createdAt: row.createdAt,
         metadata: (row.metadata as Record<string, unknown>) ?? {},
       }));
 
-      const docEvents: TimelineEvent[] = docEventRows.map((row) => ({
-        id: row.id,
-        type: 'document_event',
-        action: row.eventType,
-        description: `Document "${docTitles[row.documentId] ?? row.documentId}": ${row.eventType}`,
-        userId: null,
-        createdAt: row.createdAt,
-        metadata: (row.eventData as Record<string, unknown>) ?? {},
-      }));
+      const docEvents: TimelineEvent[] = docEventRows.map((row) => {
+        const title = docTitles[row.documentId] ?? row.documentId;
+        const action = DOC_EVENT_LABELS[row.eventType] ?? row.eventType;
+        return {
+          id: row.id,
+          type: 'document_event',
+          action: row.eventType,
+          description: `Document "${title}" ${action}`,
+          userId: null,
+          createdAt: row.createdAt,
+          metadata: (row.eventData as Record<string, unknown>) ?? {},
+        };
+      });
 
       const allEvents = [...auditEvents, ...docEvents];
       allEvents.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
@@ -101,12 +124,39 @@ export const GET = withAuth(
 function buildAuditDescription(
   action: string,
   newValue: Record<string, unknown> | null,
+  metadata: Record<string, unknown>,
+  userId: string | null,
 ): string {
   if (action === 'create') return 'Interest created';
   if (action === 'archive') return 'Interest archived';
   if (action === 'restore') return 'Interest restored';
+
+  const type = metadata.type;
+
+  if (type === 'outcome_set') {
+    const outcomeKey = (newValue?.outcome as string | undefined) ?? '';
+    const label = OUTCOME_LABELS[outcomeKey] ?? outcomeKey ?? 'Closed';
+    const reason = (newValue?.reason as string | undefined) ?? '';
+    return reason ? `Marked as ${label} — ${reason}` : `Marked as ${label}`;
+  }
+
+  if (type === 'outcome_cleared') {
+    const stage = (newValue?.pipelineStage as string | undefined) ?? '';
+    return stage ? `Reopened to ${stageLabel(stage)}` : 'Reopened';
+  }
+
+  if (type === 'stage_change' && newValue?.pipelineStage) {
+    const stage = stageLabel(newValue.pipelineStage as string);
+    const reason = (newValue.reason as string | undefined) ?? '';
+    const auto = userId === 'system';
+    if (auto) {
+      return reason ? `${stage} (auto-advanced — ${reason})` : `Stage advanced to ${stage}`;
+    }
+    return reason ? `Stage changed to ${stage} — ${reason}` : `Stage changed to ${stage}`;
+  }
+
   if (action === 'update' && newValue?.pipelineStage) {
-    return `Stage changed to "${newValue.pipelineStage}"`;
+    return `Stage changed to ${stageLabel(newValue.pipelineStage as string)}`;
   }
   if (action === 'update') return 'Interest updated';
   return action;

src/app/api/v1/yachts/[id]/ownership-history/handlers.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+
+import { type RouteHandler } from '@/lib/api/helpers';
+import { errorResponse } from '@/lib/errors';
+import { listOwnershipHistory } from '@/lib/services/yachts.service';
+
+export const historyHandler: RouteHandler = async (_req, ctx, params) => {
+  try {
+    const history = await listOwnershipHistory(params.id!, ctx.portId);
+    return NextResponse.json({ data: history });
+  } catch (error) {
+    return errorResponse(error);
+  }
+};

src/app/api/v1/yachts/[id]/ownership-history/route.ts

@@ -1,16 +1,5 @@
-import { NextResponse } from 'next/server';
+import { withAuth, withPermission } from '@/lib/api/helpers';
 
-import { withAuth, withPermission, type RouteHandler } from '@/lib/api/helpers';
-import { errorResponse } from '@/lib/errors';
-import { listOwnershipHistory } from '@/lib/services/yachts.service';
-
-export const historyHandler: RouteHandler = async (req, ctx, params) => {
-  try {
-    const history = await listOwnershipHistory(params.id!, ctx.portId);
-    return NextResponse.json({ data: history });
-  } catch (error) {
-    return errorResponse(error);
-  }
-};
+import { historyHandler } from './handlers';
 
 export const GET = withAuth(withPermission('yachts', 'view', historyHandler));

src/app/api/v1/yachts/[id]/transfer/handlers.ts

@@ -0,0 +1,22 @@
+import { NextResponse } from 'next/server';
+
+import { type RouteHandler } from '@/lib/api/helpers';
+import { parseBody } from '@/lib/api/route-helpers';
+import { errorResponse } from '@/lib/errors';
+import { transferOwnership } from '@/lib/services/yachts.service';
+import { transferOwnershipSchema } from '@/lib/validators/yachts';
+
+export const transferHandler: RouteHandler = async (req, ctx, params) => {
+  try {
+    const body = await parseBody(req, transferOwnershipSchema);
+    const yacht = await transferOwnership(params.id!, ctx.portId, body, {
+      userId: ctx.userId,
+      portId: ctx.portId,
+      ipAddress: ctx.ipAddress,
+      userAgent: ctx.userAgent,
+    });
+    return NextResponse.json({ data: yacht });
+  } catch (error) {
+    return errorResponse(error);
+  }
+};

src/app/api/v1/yachts/[id]/transfer/route.ts

@@ -1,24 +1,5 @@
-import { NextResponse } from 'next/server';
+import { withAuth, withPermission } from '@/lib/api/helpers';
 
-import { withAuth, withPermission, type RouteHandler } from '@/lib/api/helpers';
-import { parseBody } from '@/lib/api/route-helpers';
-import { errorResponse } from '@/lib/errors';
-import { transferOwnership } from '@/lib/services/yachts.service';
-import { transferOwnershipSchema } from '@/lib/validators/yachts';
-
-export const transferHandler: RouteHandler = async (req, ctx, params) => {
-  try {
-    const body = await parseBody(req, transferOwnershipSchema);
-    const yacht = await transferOwnership(params.id!, ctx.portId, body, {
-      userId: ctx.userId,
-      portId: ctx.portId,
-      ipAddress: ctx.ipAddress,
-      userAgent: ctx.userAgent,
-    });
-    return NextResponse.json({ data: yacht });
-  } catch (error) {
-    return errorResponse(error);
-  }
-};
+import { transferHandler } from './handlers';
 
 export const POST = withAuth(withPermission('yachts', 'transfer', transferHandler));

src/app/api/v1/yachts/autocomplete/handlers.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server';
+
+import { type RouteHandler } from '@/lib/api/helpers';
+import { errorResponse } from '@/lib/errors';
+import { autocomplete } from '@/lib/services/yachts.service';
+
+export const autocompleteHandler: RouteHandler = async (req, ctx) => {
+  try {
+    const q = req.nextUrl.searchParams.get('q');
+    if (!q) {
+      return NextResponse.json({ data: [] });
+    }
+    const yachts = await autocomplete(ctx.portId, q);
+    return NextResponse.json({ data: yachts });
+  } catch (error) {
+    return errorResponse(error);
+  }
+};

src/app/api/v1/yachts/autocomplete/route.ts

@@ -1,20 +1,5 @@
-import { NextResponse } from 'next/server';
+import { withAuth, withPermission } from '@/lib/api/helpers';
 
-import { withAuth, withPermission, type RouteHandler } from '@/lib/api/helpers';
-import { errorResponse } from '@/lib/errors';
-import { autocomplete } from '@/lib/services/yachts.service';
-
-export const autocompleteHandler: RouteHandler = async (req, ctx) => {
-  try {
-    const q = req.nextUrl.searchParams.get('q');
-    if (!q) {
-      return NextResponse.json({ data: [] });
-    }
-    const yachts = await autocomplete(ctx.portId, q);
-    return NextResponse.json({ data: yachts });
-  } catch (error) {
-    return errorResponse(error);
-  }
-};
+import { autocompleteHandler } from './handlers';
 
 export const GET = withAuth(withPermission('yachts', 'view', autocompleteHandler));

src/app/globals.css

@@ -127,3 +127,45 @@
     @apply bg-muted-foreground/30;
   }
 }
+
+/* ─── Form-factor shell visibility ──────────────────────────────────────────
+ * Two shells (desktop + mobile) render to the DOM on every page; CSS hides
+ * the inactive one. The data-form-factor body attribute is set server-side
+ * from User-Agent (see src/lib/form-factor.ts). The media-query fallback
+ * handles desktop browsers resized below lg (1024px), or stripped UAs.
+ *
+ * IMPORTANT: only `display: none` rules are emitted — we never set a positive
+ * display, because the desktop shell uses Tailwind's `flex` class which would
+ * be overridden by `display: block` (same specificity, later cascade).
+ */
+[data-shell='mobile'] {
+  display: none;
+}
+
+@media (max-width: 1023.98px) {
+  [data-shell='desktop'] {
+    display: none;
+  }
+  [data-shell='mobile'] {
+    display: block;
+  }
+}
+
+body[data-form-factor='mobile'] [data-shell='desktop'] {
+  display: none;
+}
+body[data-form-factor='mobile'] [data-shell='mobile'] {
+  display: block;
+}
+
+/*
+ * React Query Devtools floating button collides with the bottom tab bar's
+ * "More" tab on mobile. The devtools panel itself remains accessible from
+ * desktop where the toggle is positioned out of the way of any UI.
+ */
+@media (max-width: 1023.98px) {
+  .tsqd-open-btn-container,
+  .tsqd-parent-container {
+    display: none !important;
+  }
+}

src/app/layout.tsx

@@ -1,6 +1,9 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
+import Script from 'next/script';
+import { headers } from 'next/headers';
 import { Inter, JetBrains_Mono } from 'next/font/google';
 import { Toaster } from 'sonner';
+import { classifyFormFactor } from '@/lib/form-factor';
 import './globals.css';
 
 const inter = Inter({
@@ -15,18 +18,52 @@ const jetbrainsMono = JetBrains_Mono({
   display: 'swap',
 });
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  viewportFit: 'cover',
+  themeColor: '#1e2844',
+};
+
 export const metadata: Metadata = {
   title: {
     default: 'Port Nimara CRM',
     template: '%s | Port Nimara CRM',
   },
   description: 'Marina management system for Port Nimara',
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: 'black-translucent',
+    title: 'Port Nimara',
+  },
+  icons: {
+    icon: [
+      { url: '/icon-192.png', sizes: '192x192', type: 'image/png' },
+      { url: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+    ],
+    apple: '/apple-touch-icon.png',
+  },
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const headerList = await headers();
+  const formFactor = classifyFormFactor(headerList.get('user-agent'));
+
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}>
+      <head>
+        {process.env.NODE_ENV === 'development' && (
+          <Script
+            src="//unpkg.com/react-grab/dist/index.global.js"
+            crossOrigin="anonymous"
+            strategy="beforeInteractive"
+          />
+        )}
+      </head>
+      <body
+        data-form-factor={formFactor}
+        className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}
+      >
         {children}
         <Toaster richColors position="top-right" />
       </body>

src/components/admin/audit/audit-log-card.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { Activity, Clock, Eye, Pencil, Plus, Trash2, User } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+
+import { ListCard, ListCardAvatar, ListCardMeta } from '@/components/shared/list-card';
+import { cn } from '@/lib/utils';
+
+interface AuditEntry {
+  id: string;
+  userId: string | null;
+  action: string;
+  entityType: string;
+  entityId: string | null;
+  fieldChanged: string | null;
+  oldValue: Record<string, unknown> | null;
+  newValue: Record<string, unknown> | null;
+  metadata: Record<string, unknown> | null;
+  ipAddress: string | null;
+  createdAt: string;
+  actor: { id: string; email: string; name: string } | null;
+}
+
+const ACTION_ACCENT: Record<string, string> = {
+  create: 'bg-emerald-400',
+  update: 'bg-blue-400',
+  delete: 'bg-rose-400',
+  viewed: 'bg-slate-300',
+};
+
+const ACTION_BADGE_COLORS: Record<string, string> = {
+  create: 'bg-green-600',
+  update: 'bg-blue-500',
+  delete: 'bg-red-600',
+  archive: 'bg-orange-500',
+  restore: 'bg-teal-500',
+  login: 'bg-gray-500',
+  permission_denied: 'bg-red-800',
+  merge: 'bg-purple-500',
+  revert: 'bg-amber-500',
+};
+
+function ActionIcon({ action }: { action: string }) {
+  if (action === 'create') return <Plus className="h-5 w-5" />;
+  if (action === 'update') return <Pencil className="h-5 w-5" />;
+  if (action === 'delete') return <Trash2 className="h-5 w-5" />;
+  if (action === 'viewed') return <Eye className="h-5 w-5" />;
+  return <Activity className="h-5 w-5" />;
+}
+
+function actionVerb(action: string): string {
+  const map: Record<string, string> = {
+    create: 'Created',
+    update: 'Updated',
+    delete: 'Deleted',
+    archive: 'Archived',
+    restore: 'Restored',
+    login: 'Logged in',
+    permission_denied: 'Permission denied',
+    merge: 'Merged',
+    revert: 'Reverted',
+    viewed: 'Viewed',
+  };
+  return map[action] ?? action.charAt(0).toUpperCase() + action.slice(1);
+}
+
+interface AuditLogCardProps {
+  entry: AuditEntry;
+}
+
+export function AuditLogCard({ entry }: AuditLogCardProps) {
+  const accentClass = ACTION_ACCENT[entry.action] ?? 'bg-slate-300';
+  const badgeColor = ACTION_BADGE_COLORS[entry.action] ?? 'bg-gray-500';
+
+  const entityTitle = `${entry.entityType.charAt(0).toUpperCase()}${entry.entityType.slice(1)}${
+    entry.entityId ? ` ${entry.entityId.slice(0, 8)}…` : ''
+  }`;
+
+  const actorName = entry.actor?.name ?? (entry.userId ? `${entry.userId.slice(0, 8)}…` : 'system');
+
+  // Changed-fields chip line: prefer fieldChanged (single field), then newValue keys
+  let changedFields: string[] = [];
+  if (entry.fieldChanged) {
+    changedFields = [entry.fieldChanged];
+  } else if (entry.newValue) {
+    changedFields = Object.keys(entry.newValue);
+  }
+  const visibleFields = changedFields.slice(0, 3);
+  const overflowCount = changedFields.length - visibleFields.length;
+
+  return (
+    <ListCard
+      href="#"
+      ariaLabel={`Audit: ${actionVerb(entry.action)} ${entityTitle}`}
+      accentClassName={accentClass}
+    >
+      <div className="flex items-start gap-3">
+        <ListCardAvatar icon={<ActionIcon action={entry.action} />} />
+        <div className="min-w-0 flex-1">
+          {/* Title: entity type + short ID */}
+          <h3 className="truncate text-base font-semibold tracking-tight text-foreground">
+            {entityTitle}
+          </h3>
+
+          {/* Subtitle: action verb + actor */}
+          <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">
+              {actionVerb(entry.action)} by {actorName}
+            </span>
+          </p>
+
+          {/* Timestamp meta line */}
+          <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+            <ListCardMeta icon={<Clock className="h-3 w-3" />}>
+              {formatDistanceToNow(new Date(entry.createdAt), { addSuffix: true })}
+            </ListCardMeta>
+          </div>
+
+          {/* Action badge + changed-fields chips */}
+          <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 text-white',
+                badgeColor,
+              )}
+            >
+              {entry.action}
+            </span>
+
+            {visibleFields.length > 0 ? (
+              <>
+                {visibleFields.map((field) => (
+                  <span
+                    key={field}
+                    className="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground"
+                  >
+                    {field}
+                  </span>
+                ))}
+                {overflowCount > 0 ? (
+                  <span className="text-xs text-muted-foreground">+{overflowCount}</span>
+                ) : null}
+              </>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </ListCard>
+  );
+}

src/components/admin/audit/audit-log-list.tsx

@@ -19,6 +19,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { apiFetch } from '@/lib/api/client';
+import { AuditLogCard } from './audit-log-card';
 
 interface AuditEntry {
   id: string;
@@ -357,6 +358,7 @@ export function AuditLogList() {
           data={entries}
           isLoading={loading}
           getRowId={(row) => row.id}
+          cardRender={(row) => <AuditLogCard entry={row.original} />}
           emptyState={
             <div className="text-center py-8">
               <p className="text-muted-foreground">No audit log entries found.</p>

src/components/admin/settings/settings-manager.tsx

@@ -68,9 +68,11 @@ const KNOWN_SETTINGS: Array<{
       open: 0.05,
       details_sent: 0.1,
       in_communication: 0.2,
-      signed_eoi_nda: 0.4,
-      deposit_10pct: 0.6,
-      contract: 0.8,
+      eoi_sent: 0.4,
+      eoi_signed: 0.6,
+      deposit_10pct: 0.75,
+      contract_sent: 0.85,
+      contract_signed: 0.95,
       completed: 1.0,
     },
   },
@@ -105,6 +107,17 @@ const KNOWN_SETTINGS: Array<{
     type: 'json',
     defaultValue: [],
   },
+  {
+    key: 'eoi_signers',
+    label: 'EOI Signers',
+    description:
+      'Internal staff who countersign every EOI. JSON object with `developer` (signs after the client) and `approver` (final approval). Both fields take `{ name, email }`.',
+    type: 'json',
+    defaultValue: {
+      developer: { name: 'David Mizrahi', email: 'dm@portnimara.com' },
+      approver: { name: 'Abbie May', email: 'sales@portnimara.com' },
+    },
+  },
 ];
 
 export function SettingsManager() {

src/components/admin/system-monitoring-dashboard.tsx

@@ -7,6 +7,7 @@ import { apiFetch } from '@/lib/api/client';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ServiceHealthCard } from './service-health-card';
 import { QueueOverview } from './queue-overview';
+import { PageHeader } from '@/components/shared/page-header';
 import type {
   HealthStatus,
   QueueStatus,
@@ -17,16 +18,14 @@ import type {
 export function SystemMonitoringDashboard() {
   const { data: healthData } = useQuery({
     queryKey: ['system', 'health'],
-    queryFn: () =>
-      apiFetch<{ data: HealthStatus }>('/api/v1/admin/health').then((r) => r.data),
+    queryFn: () => apiFetch<{ data: HealthStatus }>('/api/v1/admin/health').then((r) => r.data),
     staleTime: 30_000,
     refetchInterval: 30_000,
   });
 
   const { data: queuesData } = useQuery({
     queryKey: ['system', 'queues'],
-    queryFn: () =>
-      apiFetch<{ data: QueueStatus[] }>('/api/v1/admin/queues').then((r) => r.data),
+    queryFn: () => apiFetch<{ data: QueueStatus[] }>('/api/v1/admin/queues').then((r) => r.data),
     staleTime: 10_000,
     refetchInterval: 10_000,
   });
@@ -47,11 +46,10 @@ export function SystemMonitoringDashboard() {
 
   return (
     <div className="space-y-8">
-      {/* Page header */}
-      <div>
-        <h1 className="text-2xl font-bold text-foreground">System Monitoring</h1>
-        <p className="text-muted-foreground">Real-time health, queue status and connection tracking</p>
-      </div>
+      <PageHeader
+        title="System Monitoring"
+        description="Real-time health, queue status and connection tracking"
+      />
 
       {/* Service health */}
       <section className="space-y-3">
@@ -79,10 +77,7 @@ export function SystemMonitoringDashboard() {
         ) : (
           <div className="flex gap-3">
             {[1, 2, 3, 4].map((i) => (
-              <div
-                key={i}
-                className="h-[88px] w-[160px] rounded-xl border bg-card animate-pulse"
-              />
+              <div key={i} className="h-[88px] w-[160px] rounded-xl border bg-card animate-pulse" />
             ))}
           </div>
         )}
@@ -124,9 +119,7 @@ export function SystemMonitoringDashboard() {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <p className="text-3xl font-bold">
-              {queues.reduce((sum, q) => sum + q.active, 0)}
-            </p>
+            <p className="text-3xl font-bold">{queues.reduce((sum, q) => sum + q.active, 0)}</p>
           </CardContent>
         </Card>
       </section>
@@ -141,10 +134,7 @@ export function SystemMonitoringDashboard() {
         ) : (
           <div className="grid grid-cols-5 gap-3">
             {[1, 2, 3, 4, 5].map((i) => (
-              <div
-                key={i}
-                className="h-[110px] rounded-xl border bg-card animate-pulse"
-              />
+              <div key={i} className="h-[110px] rounded-xl border bg-card animate-pulse" />
             ))}
           </div>
         )}
@@ -159,8 +149,7 @@ export function SystemMonitoringDashboard() {
 function RecentErrorsPanel() {
   const { data: errorsData } = useQuery({
     queryKey: ['system', 'errors'],
-    queryFn: () =>
-      apiFetch<{ data: RecentError[] }>('/api/v1/admin/errors').then((r) => r.data),
+    queryFn: () => apiFetch<{ data: RecentError[] }>('/api/v1/admin/errors').then((r) => r.data),
     staleTime: 30_000,
     refetchInterval: 30_000,
   });

src/components/admin/users/user-card.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { Clock, Mail, MoreHorizontal, Pencil, Shield, Trash2 } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ConfirmationDialog } from '@/components/shared/confirmation-dialog';
+import {
+  ListCard,
+  ListCardAvatar,
+  ListCardMeta,
+  deriveInitials,
+} from '@/components/shared/list-card';
+import { cn } from '@/lib/utils';
+
+interface UserRow {
+  userId: string;
+  displayName: string;
+  email: string;
+  phone: string | null;
+  isActive: boolean;
+  isSuperAdmin: boolean;
+  lastLoginAt: string | null;
+  role: { id: string; name: string };
+  assignedAt: string;
+}
+
+interface UserCardProps {
+  user: UserRow;
+  onEdit: (user: UserRow) => void;
+  onRemove: (userId: string) => void;
+  isRemoving: boolean;
+}
+
+export function UserCard({ user, onEdit, onRemove, isRemoving }: UserCardProps) {
+  const initials = deriveInitials(user.displayName || user.email);
+
+  const accentClass = user.isSuperAdmin
+    ? 'bg-violet-400'
+    : !user.isActive
+      ? 'bg-slate-400'
+      : undefined;
+
+  return (
+    <ListCard
+      href="#"
+      ariaLabel={`User: ${user.displayName}`}
+      accentClassName={accentClass}
+      actions={
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`Actions for ${user.displayName}`}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                onEdit(user);
+              }}
+            >
+              <Pencil className="mr-2 h-3.5 w-3.5" />
+              Edit
+            </DropdownMenuItem>
+            <ConfirmationDialog
+              trigger={
+                <DropdownMenuItem className="text-destructive" onSelect={(e) => e.preventDefault()}>
+                  <Trash2 className="mr-2 h-3.5 w-3.5" />
+                  Remove
+                </DropdownMenuItem>
+              }
+              title="Remove User"
+              description={`Remove "${user.displayName}" from this port? They will lose access but their account remains.`}
+              confirmLabel="Remove"
+              onConfirm={() => onRemove(user.userId)}
+              loading={isRemoving}
+            />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      }
+    >
+      <div className="flex items-start gap-3">
+        <ListCardAvatar initials={initials} className={cn(!user.isActive && 'opacity-50')} />
+        <div className="min-w-0 flex-1">
+          {/* Title row + spacer for actions button */}
+          <div className="flex items-start justify-between gap-2">
+            <h3
+              className={cn(
+                'truncate text-base font-semibold tracking-tight',
+                user.isActive ? 'text-foreground' : 'text-muted-foreground',
+              )}
+            >
+              {user.displayName || user.email}
+            </h3>
+            <span aria-hidden className="block h-9 w-9 shrink-0" />
+          </div>
+
+          {/* Email subtitle — only when display name is shown as title */}
+          {user.displayName && user.displayName !== user.email ? (
+            <p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
+              <Mail className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
+              <span className="truncate">{user.email}</span>
+            </p>
+          ) : null}
+
+          {/* Role + last login meta */}
+          <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+            <ListCardMeta icon={<Shield className="h-3 w-3" />}>{user.role.name}</ListCardMeta>
+
+            {user.lastLoginAt ? (
+              <ListCardMeta icon={<Clock className="h-3 w-3" />}>
+                {formatDistanceToNow(new Date(user.lastLoginAt), { addSuffix: true })}
+              </ListCardMeta>
+            ) : (
+              <ListCardMeta icon={<Clock className="h-3 w-3" />}>Never logged in</ListCardMeta>
+            )}
+          </div>
+
+          {/* Status + super-admin pills */}
+          <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
+            {!user.isActive ? (
+              <span className="inline-flex items-center rounded-full bg-slate-200 px-2 py-0.5 text-xs font-medium text-slate-700">
+                Inactive
+              </span>
+            ) : null}
+            {user.isSuperAdmin ? (
+              <span className="inline-flex items-center rounded-full bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                Super Admin
+              </span>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </ListCard>
+  );
+}

src/components/admin/users/user-list.tsx

@@ -10,6 +10,7 @@ import { ConfirmationDialog } from '@/components/shared/confirmation-dialog';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { apiFetch } from '@/lib/api/client';
+import { UserCard } from './user-card';
 import { UserForm } from './user-form';
 
 interface UserRow {
@@ -152,6 +153,14 @@ export function UserList() {
         data={users}
         isLoading={loading}
         getRowId={(row) => row.userId}
+        cardRender={(row) => (
+          <UserCard
+            user={row.original}
+            onEdit={handleEditUser}
+            onRemove={handleRemoveUser}
+            isRemoving={deletingId === row.original.userId}
+          />
+        )}
         emptyState={
           <div className="text-center py-8">
             <p className="text-muted-foreground">No users assigned to this port.</p>

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>
+  );
+}

src/components/berths/berth-detail-header.tsx

@@ -170,7 +170,9 @@ export function BerthDetailHeader({ berth }: BerthDetailHeaderProps) {
         <div className="flex items-start gap-4">
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-3 flex-wrap">
-              <h1 className="text-2xl font-bold text-foreground">Berth {berth.mooringNumber}</h1>
+              <h1 className="hidden sm:block text-2xl font-bold text-foreground">
+                Berth {berth.mooringNumber}
+              </h1>
               <span
                 className={`inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium ${STATUS_COLORS[berth.status] ?? 'bg-muted text-muted-foreground border-muted'}`}
               >
@@ -180,7 +182,7 @@ export function BerthDetailHeader({ berth }: BerthDetailHeaderProps) {
             {berth.area && <p className="text-muted-foreground mt-1">{berth.area}</p>}
           </div>
 
-          <div className="flex items-center gap-2 shrink-0">
+          <div className="flex flex-wrap items-center gap-2 shrink-0">
             <PermissionGate resource="berths" action="edit">
               <Button variant="outline" size="sm" onClick={() => setStatusOpen(true)}>
                 <RefreshCw className="mr-1.5 h-4 w-4" />

src/components/berths/berth-detail.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import { useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 
 import { DetailLayout } from '@/components/shared/detail-layout';
+import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
 import { apiFetch } from '@/lib/api/client';
 import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
 import { BerthDetailHeader } from './berth-detail-header';
@@ -26,6 +28,13 @@ export function BerthDetail({ berthId }: BerthDetailProps) {
     'berth:statusChanged': [['berth', berthId]],
   });
 
+  const { setChrome } = useMobileChrome();
+  const titleForChrome: string | null = data?.mooringNumber ?? null;
+  useEffect(() => {
+    setChrome({ title: titleForChrome, showBackButton: true });
+    return () => setChrome({ title: null, showBackButton: false });
+  }, [titleForChrome, setChrome]);
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const berth = data as any;
 

src/components/berths/berth-interests-tab.tsx

@@ -19,6 +19,7 @@ import {
 import { TableSkeleton } from '@/components/shared/loading-skeleton';
 import { EmptyState } from '@/components/shared/empty-state';
 import { Bookmark } from 'lucide-react';
+import { PIPELINE_STAGES, stageLabel } from '@/lib/constants';
 import type { InterestRow } from '@/components/interests/interest-columns';
 
 interface BerthInterestsTabProps {
@@ -28,27 +29,10 @@ interface BerthInterestsTabProps {
 type StageFilter = 'all' | 'active' | 'lost';
 type SortMode = 'newest' | 'stage' | 'category';
 
-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',
-};
-
-const STAGE_ORDER: Record<string, number> = {
-  open: 0,
-  details_sent: 1,
-  in_communication: 2,
-  visited: 3,
-  signed_eoi_nda: 4,
-  deposit_10pct: 5,
-  contract: 6,
-  completed: 7,
-};
+function stageRank(stage: string): number {
+  const idx = PIPELINE_STAGES.indexOf(stage as (typeof PIPELINE_STAGES)[number]);
+  return idx === -1 ? 99 : idx;
+}
 
 const CATEGORY_RANK: Record<string, number> = {
   hot_lead: 0,
@@ -104,8 +88,8 @@ export function BerthInterestsTab({ berthId }: BerthInterestsTabProps) {
     });
     const sorted = [...filtered].sort((a, b) => {
       if (sortMode === 'stage') {
-        const sa = STAGE_ORDER[a.pipelineStage] ?? 99;
-        const sb = STAGE_ORDER[b.pipelineStage] ?? 99;
+        const sa = stageRank(a.pipelineStage);
+        const sb = stageRank(b.pipelineStage);
         if (sa !== sb) return sb - sa; // furthest along first
       }
       if (sortMode === 'category') {
@@ -189,7 +173,7 @@ export function BerthInterestsTab({ berthId }: BerthInterestsTabProps) {
                 </td>
                 <td className="px-3 py-2">
                   <Badge variant="secondary" className="font-normal">
-                    {STAGE_LABELS[i.pipelineStage] ?? i.pipelineStage}
+                    {stageLabel(i.pipelineStage)}
                   </Badge>
                 </td>
                 <td className="px-3 py-2 text-muted-foreground">

src/components/berths/berth-list.tsx

@@ -9,6 +9,7 @@ import { SavedViewsDropdown } from '@/components/shared/saved-views-dropdown';
 import { EmptyState } from '@/components/shared/empty-state';
 import { usePaginatedQuery } from '@/hooks/use-paginated-query';
 import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
+import { BerthCard } from './berth-card';
 import { berthColumns, type BerthRow } from './berth-columns';
 import { berthFilterDefinitions } from './berth-filters';
 import { Anchor } from 'lucide-react';
@@ -73,6 +74,7 @@ export function BerthList() {
         onSortChange={setSort}
         getRowId={(row) => row.id}
         onRowClick={(row) => router.push(`/${params.portSlug}/berths/${row.id}`)}
+        cardRender={(row) => <BerthCard berth={row.original} />}
         emptyState={
           <EmptyState
             icon={Anchor}

src/components/clients/client-card.tsx

@@ -0,0 +1,142 @@
+'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 { stageBadgeClass, stageLabel } from '@/lib/constants';
+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 tags = client.tags ?? [];
+
+  const meta = [nationality, sourceLabel].filter(Boolean) as string[];
+
+  const interest = client.latestInterest ?? null;
+  const interestCount = client.interestCount ?? 0;
+  const interestBerthLabel = interest
+    ? interest.mooringNumber
+      ? `Berth ${interest.mooringNumber}`
+      : 'General interest'
+    : null;
+  const interestStageLabel = interest ? stageLabel(interest.stage) : null;
+  const interestStageBadge = interest ? stageBadgeClass(interest.stage) : null;
+  const extraInterests = interestCount > 1 ? interestCount - 1 : 0;
+
+  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}
+
+          {interest ? (
+            <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
+              <span className="truncate">{interestBerthLabel}</span>
+              <span aria-hidden>·</span>
+              <span
+                className={`shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-medium ${interestStageBadge}`}
+              >
+                {interestStageLabel}
+              </span>
+              {extraInterests > 0 ? (
+                <span className="shrink-0 text-muted-foreground/80">+{extraInterests}</span>
+              ) : null}
+            </div>
+          ) : 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-detail-header.tsx

@@ -74,7 +74,9 @@ export function ClientDetailHeader({ client }: ClientDetailHeaderProps) {
         <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">{client.fullName}</h1>
+              <h1 className="hidden sm:block text-2xl font-bold text-foreground truncate">
+                {client.fullName}
+              </h1>
               {isArchived && (
                 <Badge variant="secondary" className="text-xs">
                   Archived
@@ -115,7 +117,7 @@ export function ClientDetailHeader({ client }: ClientDetailHeaderProps) {
           </div>
 
           {/* Actions */}
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2">
             {!isArchived && client.clientPortalEnabled !== false && (
               <PortalInviteButton
                 clientId={client.id}

src/components/clients/client-detail.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import { useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 
 import { DetailLayout } from '@/components/shared/detail-layout';
+import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
 import { ClientDetailHeader } from '@/components/clients/client-detail-header';
 import { getClientTabs } from '@/components/clients/client-tabs';
 import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
@@ -80,6 +82,13 @@ export function ClientDetail({ clientId, currentUserId }: ClientDetailProps) {
       apiFetch<{ data: ClientData }>(`/api/v1/clients/${clientId}`).then((r) => r.data),
   });
 
+  const { setChrome } = useMobileChrome();
+  const titleForChrome: string | null = data?.fullName ?? null;
+  useEffect(() => {
+    setChrome({ title: titleForChrome, showBackButton: true });
+    return () => setChrome({ title: null, showBackButton: false });
+  }, [titleForChrome, setChrome]);
+
   useRealtimeInvalidation({
     'client:updated': [['clients', clientId]],
     'client:archived': [['clients', clientId]],

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/clients/pipeline-constants.ts

@@ -0,0 +1,14 @@
+// Re-export from the canonical source so legacy imports keep working.
+export {
+  PIPELINE_STAGES,
+  STAGE_LABELS,
+  STAGE_BADGE,
+  STAGE_DOT,
+  STAGE_WEIGHTS,
+  STAGE_TRANSITIONS,
+  safeStage,
+  stageLabel,
+  stageBadgeClass,
+  stageDotClass,
+  type PipelineStage,
+} from '@/lib/constants';

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-detail-header.tsx

@@ -80,7 +80,9 @@ export function CompanyDetailHeader({ company }: CompanyDetailHeaderProps) {
         <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">{company.name}</h1>
+              <h1 className="hidden sm:block text-2xl font-bold text-foreground truncate">
+                {company.name}
+              </h1>
               <span
                 className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusColor}`}
               >
@@ -100,7 +102,7 @@ export function CompanyDetailHeader({ company }: CompanyDetailHeaderProps) {
           </div>
 
           {/* Actions */}
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2">
             <PermissionGate resource="companies" action="edit">
               <Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
                 <Pencil className="mr-1.5 h-3.5 w-3.5" />

src/components/companies/company-detail.tsx

@@ -1,9 +1,11 @@
 'use client';
 
+import { useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'next/navigation';
 
 import { DetailLayout } from '@/components/shared/detail-layout';
+import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
 import { CompanyDetailHeader } from '@/components/companies/company-detail-header';
 import { getCompanyTabs } from '@/components/companies/company-tabs';
 import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
@@ -45,6 +47,13 @@ export function CompanyDetail({ companyId, currentUserId }: CompanyDetailProps)
       apiFetch<{ data: CompanyData }>(`/api/v1/companies/${companyId}`).then((r) => r.data),
   });
 
+  const { setChrome } = useMobileChrome();
+  const titleForChrome: string | null = data?.name ?? null;
+  useEffect(() => {
+    setChrome({ title: titleForChrome, showBackButton: true });
+    return () => setChrome({ title: null, showBackButton: false });
+  }, [titleForChrome, setChrome]);
+
   useRealtimeInvalidation({
     'company:updated': [['companies', companyId]],
     'company:archived': [['companies', companyId]],

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"

src/components/dashboard/pipeline-chart.tsx

@@ -1,19 +1,12 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import { apiFetch } from '@/lib/api/client';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { CardSkeleton } from '@/components/shared/loading-skeleton';
+import { stageLabel } from '@/lib/constants';
 import { WidgetErrorBoundary } from './widget-error-boundary';
 
 interface PipelineRow {
@@ -21,17 +14,6 @@ interface PipelineRow {
   count: number;
 }
 
-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',
-};
-
 function PipelineChartInner() {
   const { data, isLoading } = useQuery<PipelineRow[]>({
     queryKey: ['dashboard', 'pipeline'],
@@ -45,7 +27,7 @@ function PipelineChartInner() {
   }
 
   const chartData = (data ?? []).map((row) => ({
-    stage: STAGE_LABELS[row.stage] ?? row.stage,
+    stage: stageLabel(row.stage),
     count: row.count,
   }));
 

src/components/dashboard/pipeline-funnel-chart.tsx

@@ -4,21 +4,11 @@ import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxi
 
 import { CardSkeleton } from '@/components/shared/loading-skeleton';
 import { EmptyState } from '@/components/shared/empty-state';
+import { stageLabel } from '@/lib/constants';
 import { ChartCard } from './chart-card';
 import { useFunnel } from './use-analytics';
 import type { DateRange } from '@/lib/services/analytics.service';
 
-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',
-};
-
 interface Props {
   range: DateRange;
 }
@@ -28,7 +18,7 @@ export function PipelineFunnelChart({ range }: Props) {
 
   const stages = data?.stages ?? [];
   const chartData = stages.map((s) => ({
-    stage: STAGE_LABELS[s.stage] ?? s.stage,
+    stage: stageLabel(s.stage),
     count: s.count,
     conversionPct: s.conversionPct,
   }));

src/components/dashboard/revenue-forecast.tsx

@@ -6,6 +6,7 @@ import { apiFetch } from '@/lib/api/client';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { CardSkeleton } from '@/components/shared/loading-skeleton';
+import { stageLabel } from '@/lib/constants';
 import { WidgetErrorBoundary } from './widget-error-boundary';
 
 interface StageBreakdownRow {
@@ -20,17 +21,6 @@ interface ForecastData {
   weightsSource: 'db' | 'default';
 }
 
-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',
-};
-
 function formatCurrency(value: number): string {
   return new Intl.NumberFormat('en-US', {
     style: 'currency',
@@ -66,9 +56,7 @@ function RevenueForecastInner() {
       <CardContent className="space-y-4">
         <div>
           <p className="text-xs text-muted-foreground">Weighted Pipeline Value</p>
-          <p className="text-2xl font-bold">
-            {formatCurrency(data?.totalWeightedValue ?? 0)}
-          </p>
+          <p className="text-2xl font-bold">{formatCurrency(data?.totalWeightedValue ?? 0)}</p>
         </div>
 
         {activeStages.length > 0 && (
@@ -76,12 +64,10 @@ function RevenueForecastInner() {
             {activeStages.map((s) => (
               <div key={s.stage} className="flex items-center justify-between text-sm">
                 <span className="text-muted-foreground">
-                  {STAGE_LABELS[s.stage] ?? s.stage}
+                  {stageLabel(s.stage)}
                   <span className="ml-1 text-xs">({s.count})</span>
                 </span>
-                <span className="font-medium tabular-nums">
-                  {formatCurrency(s.weightedValue)}
-                </span>
+                <span className="font-medium tabular-nums">{formatCurrency(s.weightedValue)}</span>
               </div>
             ))}
           </div>

src/components/documents/documents-hub.tsx

@@ -76,10 +76,11 @@ const STATUS_PILL_MAP: Record<string, StatusPillStatus> = {
 
 interface DocumentsHubProps {
   portSlug: string;
+  initialTab?: DocumentsHubTab;
 }
 
-export function DocumentsHub({ portSlug }: DocumentsHubProps) {
-  const [tab, setTab] = useState<DocumentsHubTab>('all');
+export function DocumentsHub({ portSlug, initialTab = 'all' }: DocumentsHubProps) {
+  const [tab, setTab] = useState<DocumentsHubTab>(initialTab);
   const [search, setSearch] = useState('');
   const [typeFilter, setTypeFilter] = useState<string>('all');
   const [signatureOnly, setSignatureOnly] = useState(true);

src/components/expenses/expense-card.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import { format } from 'date-fns';
+import { Archive, Calendar, Eye, MoreHorizontal, Pencil, Receipt, Tag } 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 { ExpenseRow } from './expense-columns';
+
+const PAYMENT_STATUS_COLORS: Record<string, string> = {
+  unpaid: 'bg-red-100 text-red-700 border-red-200',
+  paid: 'bg-green-100 text-green-700 border-green-200',
+  partial: 'bg-yellow-100 text-yellow-700 border-yellow-200',
+  reconciled: 'bg-green-100 text-green-700 border-green-200',
+  flagged: 'bg-rose-100 text-rose-700 border-rose-200',
+  pending: 'bg-amber-100 text-amber-700 border-amber-200',
+};
+
+/**
+ * Accent bar by payment status:
+ *   paid / reconciled → emerald
+ *   pending           → amber
+ *   flagged           → rose
+ *   other / null      → slate
+ * If duplicateOf is set, override to amber-500.
+ */
+function deriveAccent(status: string | null, duplicateOf: string | null): string {
+  if (duplicateOf) return 'bg-amber-500';
+  switch (status) {
+    case 'paid':
+    case 'reconciled':
+      return 'bg-emerald-400';
+    case 'pending':
+      return 'bg-amber-400';
+    case 'flagged':
+      return 'bg-rose-400';
+    default:
+      return 'bg-slate-300';
+  }
+}
+
+function formatAmount(amount: string, currency: string): string {
+  try {
+    return new Intl.NumberFormat('en', { style: 'currency', currency }).format(Number(amount));
+  } catch {
+    return `${currency} ${amount}`;
+  }
+}
+
+interface ExpenseCardProps {
+  expense: ExpenseRow;
+  portSlug: string;
+  onEdit: (expense: ExpenseRow) => void;
+  onArchive: (expense: ExpenseRow) => void;
+}
+
+export function ExpenseCard({ expense, portSlug, onEdit, onArchive }: ExpenseCardProps) {
+  const accentClass = deriveAccent(expense.paymentStatus, expense.duplicateOf);
+
+  const title =
+    expense.establishmentName ??
+    (expense.description ? expense.description.slice(0, 40) : null) ??
+    'Untitled expense';
+
+  // Subtitle: category (capitalized) or "{paymentMethod} by {payer}"
+  let subtitle: string | null = null;
+  if (expense.category) {
+    subtitle = expense.category.replace(/_/g, ' ');
+    // Capitalize first letter
+    subtitle = subtitle.charAt(0).toUpperCase() + subtitle.slice(1);
+  } else if (expense.paymentMethod || expense.payer) {
+    const parts: string[] = [];
+    if (expense.paymentMethod) parts.push(expense.paymentMethod);
+    if (expense.payer) parts.push(`by ${expense.payer}`);
+    subtitle = parts.join(' ');
+  }
+  const hasCategory = !!expense.category;
+
+  let dateFormatted: string | null = null;
+  try {
+    dateFormatted = format(new Date(expense.expenseDate), 'MMM d, yyyy');
+  } catch {
+    dateFormatted = expense.expenseDate;
+  }
+
+  const amountFormatted = formatAmount(expense.amount, expense.currency);
+
+  const statusColor = expense.paymentStatus
+    ? (PAYMENT_STATUS_COLORS[expense.paymentStatus] ??
+      'bg-muted text-muted-foreground border-muted')
+    : null;
+
+  return (
+    <ListCard
+      href={`/${portSlug}/expenses/${expense.id}`}
+      ariaLabel={`Expense: ${title}`}
+      accentClassName={accentClass}
+      actions={
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`Actions for expense: ${title}`}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem asChild>
+              <Link href={`/${portSlug}/expenses/${expense.id}`}>
+                <Eye className="mr-2 h-3.5 w-3.5" />
+                View
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => onEdit(expense)}>
+              <Pencil className="mr-2 h-3.5 w-3.5" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem className="text-destructive" onClick={() => onArchive(expense)}>
+              <Archive className="mr-2 h-3.5 w-3.5" />
+              Archive
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      }
+    >
+      <div className="flex items-start gap-3">
+        <ListCardAvatar icon={<Receipt 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">
+              {title}
+            </h3>
+            <span aria-hidden className="block h-9 w-9 shrink-0" />
+          </div>
+
+          {/* Category / payer subtitle */}
+          {subtitle ? (
+            <p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
+              {hasCategory ? (
+                <Tag className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
+              ) : null}
+              <span className="truncate">{subtitle}</span>
+            </p>
+          ) : null}
+
+          {/* Amount — prominent */}
+          <p className="mt-1 text-base font-semibold tabular-nums text-foreground">
+            {amountFormatted}
+          </p>
+
+          {/* Date meta */}
+          {dateFormatted ? (
+            <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" />}>{dateFormatted}</ListCardMeta>
+            </div>
+          ) : null}
+
+          {/* Status + duplicate pills */}
+          <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
+            {statusColor && expense.paymentStatus ? (
+              <span
+                className={cn(
+                  'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium capitalize',
+                  statusColor,
+                )}
+              >
+                {expense.paymentStatus}
+              </span>
+            ) : null}
+
+            {expense.duplicateOf ? (
+              <span className="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">
+                Possible duplicate
+              </span>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </ListCard>
+  );
+}

src/components/expenses/expense-detail.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { format } from 'date-fns';
 import { Loader2, Receipt, Edit, Archive } from 'lucide-react';
@@ -10,6 +10,7 @@ import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog';
 import { apiFetch } from '@/lib/api/client';
+import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
 import type { ExpenseRow } from './expense-columns';
 import { ExpenseDuplicateBanner } from './expense-duplicate-banner';
 
@@ -34,6 +35,14 @@ export function ExpenseDetail({ expenseId, onEdit, onArchived }: ExpenseDetailPr
     queryFn: () => apiFetch(`/api/v1/expenses/${expenseId}`),
   });
 
+  const { setChrome } = useMobileChrome();
+  const titleForChrome: string | null =
+    data?.data?.establishmentName ?? data?.data?.description?.slice(0, 40) ?? null;
+  useEffect(() => {
+    setChrome({ title: titleForChrome ?? 'Expense', showBackButton: true });
+    return () => setChrome({ title: null, showBackButton: false });
+  }, [titleForChrome, setChrome]);
+
   const archiveMutation = useMutation({
     mutationFn: () => apiFetch(`/api/v1/expenses/${expenseId}`, { method: 'DELETE' }),
     onSuccess: () => {

src/components/interests/interest-card.tsx

@@ -0,0 +1,154 @@
+'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 { stageBadgeClass, stageDotClass, stageLabel as toStageLabel } from '@/lib/constants';
+import type { InterestRow } from './interest-columns';
+
+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 = toStageLabel(interest.pipelineStage);
+  const stagePill = stageBadgeClass(interest.pipelineStage);
+  const accentClass = stageDotClass(interest.pipelineStage);
+  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-columns.tsx

@@ -14,6 +14,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Badge } from '@/components/ui/badge';
 import { TagBadge } from '@/components/shared/tag-badge';
+import { stageBadgeClass, stageLabel } from '@/lib/constants';
 
 export interface InterestRow {
   id: string;
@@ -29,28 +30,6 @@ export interface InterestRow {
   tags?: Array<{ id: string; name: string; color: string }>;
 }
 
-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',
-};
-
-const STAGE_COLORS: 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',
-};
-
 const CATEGORY_LABELS: Record<string, string> = {
   general_interest: 'General Interest',
   specific_qualified: 'Specific Qualified',
@@ -117,9 +96,9 @@ export function getInterestColumns({
         const stage = getValue() as string;
         return (
           <span
-            className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${STAGE_COLORS[stage] ?? 'bg-gray-100 text-gray-700'}`}
+            className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${stageBadgeClass(stage)}`}
           >
-            {STAGE_LABELS[stage] ?? stage}
+            {stageLabel(stage)}
           </span>
         );
       },
@@ -205,10 +184,7 @@ export function getInterestColumns({
               <Pencil className="mr-2 h-3.5 w-3.5" />
               Edit
             </DropdownMenuItem>
-            <DropdownMenuItem
-              className="text-destructive"
-              onClick={() => onArchive(row.original)}
-            >
+            <DropdownMenuItem className="text-destructive" onClick={() => onArchive(row.original)}>
               <Archive className="mr-2 h-3.5 w-3.5" />
               Archive
             </DropdownMenuItem>

src/components/interests/interest-detail-header.tsx

@@ -2,43 +2,30 @@
 
 import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { Pencil, Archive, RotateCcw, TrendingUp } from 'lucide-react';
+import { Pencil, Archive, RotateCcw, Trophy, XCircle, RefreshCcw } from 'lucide-react';
 import Link from 'next/link';
 
-import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { TagBadge } from '@/components/shared/tag-badge';
 import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog';
 import { DetailHeaderStrip } from '@/components/shared/detail-header-strip';
 import { PermissionGate } from '@/components/shared/permission-gate';
 import { InterestForm } from '@/components/interests/interest-form';
-import { InterestStagePicker } from '@/components/interests/interest-stage-picker';
+import { InlineStagePicker } from '@/components/interests/inline-stage-picker';
+import { InterestOutcomeDialog } from '@/components/interests/interest-outcome-dialog';
 import { apiFetch } from '@/lib/api/client';
+import { cn } from '@/lib/utils';
 
-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',
-};
-
-const STAGE_COLORS: 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',
+const OUTCOME_BADGE: Record<string, { label: string; className: string }> = {
+  won: { label: 'Won', className: 'bg-emerald-100 text-emerald-700' },
+  lost_other_marina: { label: 'Lost — other marina', className: 'bg-rose-100 text-rose-700' },
+  lost_unqualified: { label: 'Lost — unqualified', className: 'bg-rose-100 text-rose-700' },
+  lost_no_response: { label: 'Lost — no response', className: 'bg-rose-100 text-rose-700' },
+  cancelled: { label: 'Cancelled', className: 'bg-slate-200 text-slate-700' },
 };
 
 const CATEGORY_LABELS: Record<string, string> = {
-  general_interest: 'General Interest',
+  general_interest: 'General',
   specific_qualified: 'Specific Qualified',
   hot_lead: 'Hot Lead',
 };
@@ -58,6 +45,8 @@ interface InterestDetailHeaderProps {
     reminderEnabled: boolean;
     reminderDays: number | null;
     archivedAt: string | null;
+    outcome?: string | null;
+    outcomeReason?: string | null;
     tags?: Array<{ id: string; name: string; color: string }>;
   };
 }
@@ -66,9 +55,20 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
   const queryClient = useQueryClient();
   const [editOpen, setEditOpen] = useState(false);
   const [archiveOpen, setArchiveOpen] = useState(false);
-  const [stageOpen, setStageOpen] = useState(false);
+  const [outcomeDialog, setOutcomeDialog] = useState<null | 'won' | 'lost'>(null);
 
   const isArchived = !!interest.archivedAt;
+  const outcomeBadge = interest.outcome ? OUTCOME_BADGE[interest.outcome] : null;
+  const isClosed = !!interest.outcome;
+
+  const reopenMutation = useMutation({
+    mutationFn: () =>
+      apiFetch(`/api/v1/interests/${interest.id}/outcome`, { method: 'DELETE', body: {} }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['interests', interest.id] });
+      queryClient.invalidateQueries({ queryKey: ['interests'] });
+    },
+  });
 
   const archiveMutation = useMutation({
     mutationFn: () => apiFetch(`/api/v1/interests/${interest.id}`, { method: 'DELETE' }),
@@ -88,13 +88,40 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
     },
   });
 
+  const meta: Array<{ key: string; node: React.ReactNode }> = [];
+  if (interest.berthMooringNumber) {
+    meta.push({
+      key: 'berth',
+      node: (
+        <Link
+          href={`/${portSlug}/berths/${interest.berthId}`}
+          className="text-foreground hover:underline"
+        >
+          Berth {interest.berthMooringNumber}
+        </Link>
+      ),
+    });
+  }
+  if (interest.leadCategory) {
+    meta.push({
+      key: 'cat',
+      node: <span>{CATEGORY_LABELS[interest.leadCategory] ?? interest.leadCategory}</span>,
+    });
+  }
+  if (interest.source) {
+    meta.push({
+      key: 'src',
+      node: <span className="capitalize">{interest.source}</span>,
+    });
+  }
+
   return (
     <>
       <DetailHeaderStrip>
-        <div className="flex items-start gap-3 flex-wrap">
-          <div className="flex-1 min-w-0">
+        <div className="flex items-start gap-2">
+          <div className="min-w-0 flex-1 space-y-1.5">
             <div className="flex items-center gap-2 flex-wrap">
-              <h1 className="text-2xl font-bold text-foreground">
+              <h1 className="truncate text-lg font-bold text-foreground sm:text-xl">
                 {interest.clientName ?? 'Unknown Client'}
               </h1>
               {isArchived && (
@@ -102,42 +129,52 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
                   Archived
                 </Badge>
               )}
-              <span
-                className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-medium ${STAGE_COLORS[interest.pipelineStage] ?? 'bg-gray-100 text-gray-700'}`}
-              >
-                {STAGE_LABELS[interest.pipelineStage] ?? interest.pipelineStage}
-              </span>
+              {outcomeBadge ? (
+                <span
+                  className={cn(
+                    'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
+                    outcomeBadge.className,
+                  )}
+                  title={interest.outcomeReason ?? undefined}
+                >
+                  {outcomeBadge.label}
+                </span>
+              ) : (
+                <PermissionGate
+                  resource="interests"
+                  action="change_stage"
+                  fallback={
+                    <span className="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-700">
+                      {interest.pipelineStage}
+                    </span>
+                  }
+                >
+                  <InlineStagePicker
+                    interestId={interest.id}
+                    currentStage={interest.pipelineStage}
+                    className="-ml-2.5"
+                  />
+                </PermissionGate>
+              )}
             </div>
 
-            <div className="flex items-center gap-4 mt-2 flex-wrap text-sm text-muted-foreground">
-              {interest.berthMooringNumber && (
-                <span>
-                  Berth:{' '}
-                  <Link
-                    href={`/${portSlug}/berths/${interest.berthId}`}
-                    className="text-foreground hover:underline"
-                  >
-                    {interest.berthMooringNumber}
-                  </Link>
-                </span>
-              )}
-              {interest.leadCategory && (
-                <span>
-                  Category:{' '}
-                  <span className="text-foreground">
-                    {CATEGORY_LABELS[interest.leadCategory] ?? interest.leadCategory}
+            {meta.length > 0 ? (
+              <p className="text-xs text-muted-foreground sm:text-sm">
+                {meta.map((m, i) => (
+                  <span key={m.key}>
+                    {i > 0 ? (
+                      <span aria-hidden className="mx-1.5">
+                        ·
+                      </span>
+                    ) : null}
+                    {m.node}
                   </span>
-                </span>
-              )}
-              {interest.source && (
-                <span>
-                  Source: <span className="text-foreground capitalize">{interest.source}</span>
-                </span>
-              )}
-            </div>
+                ))}
+              </p>
+            ) : null}
 
             {interest.tags && interest.tags.length > 0 && (
-              <div className="flex flex-wrap gap-1 mt-2">
+              <div className="flex flex-wrap gap-1 pt-0.5">
                 {interest.tags.map((tag) => (
                   <TagBadge key={tag.id} name={tag.name} color={tag.color} />
                 ))}
@@ -145,52 +182,101 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
             )}
           </div>
 
-          {/* Actions */}
-          <div className="flex items-center gap-2 flex-wrap">
-            <PermissionGate resource="interests" action="edit">
-              <Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
-                <Pencil className="mr-1.5 h-3.5 w-3.5" />
-                Edit
-              </Button>
-            </PermissionGate>
+          {/* Top-right icon-only actions — no stacking, no labels eating room. */}
+          <div className="flex shrink-0 items-center gap-0.5">
             <PermissionGate resource="interests" action="change_stage">
-              <Button variant="outline" size="sm" onClick={() => setStageOpen(true)}>
-                <TrendingUp className="mr-1.5 h-3.5 w-3.5" />
-                Change Stage
-              </Button>
+              {isClosed ? (
+                <button
+                  type="button"
+                  onClick={() => reopenMutation.mutate()}
+                  disabled={reopenMutation.isPending}
+                  aria-label="Reopen interest"
+                  title="Reopen interest"
+                  className={cn(
+                    'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
+                    'hover:bg-foreground/5 hover:text-foreground',
+                    'disabled:opacity-50',
+                  )}
+                >
+                  <RefreshCcw className="size-4" />
+                </button>
+              ) : (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => setOutcomeDialog('won')}
+                    aria-label="Mark as won"
+                    title="Mark as won"
+                    className={cn(
+                      'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
+                      'hover:bg-emerald-50 hover:text-emerald-700',
+                    )}
+                  >
+                    <Trophy className="size-4" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setOutcomeDialog('lost')}
+                    aria-label="Close as lost"
+                    title="Close as lost"
+                    className={cn(
+                      'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
+                      'hover:bg-rose-50 hover:text-rose-700',
+                    )}
+                  >
+                    <XCircle className="size-4" />
+                  </button>
+                </>
+              )}
+            </PermissionGate>
+            <PermissionGate resource="interests" action="edit">
+              <button
+                type="button"
+                onClick={() => setEditOpen(true)}
+                aria-label="Edit interest"
+                title="Edit interest"
+                className={cn(
+                  'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
+                  'hover:bg-foreground/5 hover:text-foreground',
+                )}
+              >
+                <Pencil className="size-4" />
+              </button>
             </PermissionGate>
             <PermissionGate resource="interests" action="delete">
-              <Button variant="outline" size="sm" onClick={() => setArchiveOpen(true)}>
-                {isArchived ? (
-                  <>
-                    <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
-                    Restore
-                  </>
-                ) : (
-                  <>
-                    <Archive className="mr-1.5 h-3.5 w-3.5" />
-                    Archive
-                  </>
+              <button
+                type="button"
+                onClick={() => setArchiveOpen(true)}
+                aria-label={isArchived ? 'Restore interest' : 'Archive interest'}
+                title={isArchived ? 'Restore interest' : 'Archive interest'}
+                className={cn(
+                  'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
+                  'hover:bg-foreground/5',
+                  isArchived ? 'hover:text-foreground' : 'hover:text-destructive',
                 )}
-              </Button>
+              >
+                {isArchived ? <RotateCcw className="size-4" /> : <Archive className="size-4" />}
+              </button>
             </PermissionGate>
           </div>
         </div>
       </DetailHeaderStrip>
 
+      {outcomeDialog && (
+        <InterestOutcomeDialog
+          interestId={interest.id}
+          mode={outcomeDialog}
+          open={outcomeDialog !== null}
+          onOpenChange={(open) => !open && setOutcomeDialog(null)}
+        />
+      )}
+
       <InterestForm
         open={editOpen}
         onOpenChange={setEditOpen}
         interest={interest as unknown as Parameters<typeof InterestForm>[0]['interest']}
       />
 
-      <InterestStagePicker
-        open={stageOpen}
-        onOpenChange={setStageOpen}
-        interestId={interest.id}
-        currentStage={interest.pipelineStage}
-      />
-
       <ArchiveConfirmDialog
         open={archiveOpen}
         onOpenChange={setArchiveOpen}

src/components/interests/interest-filters.tsx

@@ -1,16 +1,5 @@
 import type { FilterDefinition } from '@/components/shared/filter-bar';
-import { PIPELINE_STAGES, LEAD_CATEGORIES } from '@/lib/constants';
-
-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',
-};
+import { PIPELINE_STAGES, STAGE_LABELS, LEAD_CATEGORIES } from '@/lib/constants';
 
 const CATEGORY_LABELS: Record<string, string> = {
   general_interest: 'General Interest',
@@ -30,7 +19,7 @@ export const interestFilterDefinitions: FilterDefinition[] = [
     label: 'Stage',
     type: 'multi-select',
     options: PIPELINE_STAGES.map((s) => ({
-      label: STAGE_LABELS[s] ?? s,
+      label: STAGE_LABELS[s],
       value: s,
     })),
   },

src/components/interests/interest-form.tsx

@@ -35,20 +35,9 @@ import { YachtPicker } from '@/components/yachts/yacht-picker';
 import { apiFetch } from '@/lib/api/client';
 import { useEntityOptions } from '@/hooks/use-entity-options';
 import { createInterestSchema, type CreateInterestInput } from '@/lib/validators/interests';
-import { PIPELINE_STAGES, LEAD_CATEGORIES } from '@/lib/constants';
+import { PIPELINE_STAGES, STAGE_LABELS, LEAD_CATEGORIES } from '@/lib/constants';
 import { cn } from '@/lib/utils';
 
-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',
-};
-
 const CATEGORY_LABELS: Record<string, string> = {
   general_interest: 'General Interest',
   specific_qualified: 'Specific Qualified',
@@ -58,6 +47,11 @@ const CATEGORY_LABELS: Record<string, string> = {
 interface InterestFormProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /**
+   * Pre-fill clientId when launching the form from a client detail page.
+   * Ignored when `interest` is provided (edit mode).
+   */
+  defaultClientId?: string;
   interest?: {
     id: string;
     clientId: string;
@@ -75,7 +69,7 @@ interface InterestFormProps {
   };
 }
 
-export function InterestForm({ open, onOpenChange, interest }: InterestFormProps) {
+export function InterestForm({ open, onOpenChange, defaultClientId, interest }: InterestFormProps) {
   const queryClient = useQueryClient();
   const isEdit = !!interest;
 
@@ -140,14 +134,14 @@ export function InterestForm({ open, onOpenChange, interest }: InterestFormProps
       });
     } else if (!interest && open) {
       reset({
-        clientId: '',
+        clientId: defaultClientId ?? '',
         yachtId: undefined,
         pipelineStage: 'open',
         reminderEnabled: false,
         tagIds: [],
       });
     }
-  }, [interest, open, reset]);
+  }, [interest, defaultClientId, open, reset]);
 
   const mutation = useMutation({
     mutationFn: async (data: CreateInterestInput) => {
@@ -347,7 +341,7 @@ export function InterestForm({ open, onOpenChange, interest }: InterestFormProps
                   <SelectContent>
                     {PIPELINE_STAGES.map((s) => (
                       <SelectItem key={s} value={s}>
-                        {STAGE_LABELS[s] ?? s}
+                        {STAGE_LABELS[s]}
                       </SelectItem>
                     ))}
                   </SelectContent>

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/interests/interest-outcome-dialog.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Loader2, Trophy, XCircle } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { apiFetch } from '@/lib/api/client';
+import { type InterestOutcome } from '@/lib/validators/interests';
+
+const OUTCOME_LABELS: Record<InterestOutcome, string> = {
+  won: 'Won',
+  lost_other_marina: 'Lost — went to another marina',
+  lost_unqualified: 'Lost — unqualified',
+  lost_no_response: 'Lost — no response',
+  cancelled: 'Cancelled',
+};
+
+const LOST_OUTCOMES: InterestOutcome[] = [
+  'lost_other_marina',
+  'lost_unqualified',
+  'lost_no_response',
+  'cancelled',
+];
+
+interface Props {
+  interestId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Determines which outcomes are offered. 'won' opens with just the Won option preselected. */
+  mode: 'won' | 'lost';
+}
+
+export function InterestOutcomeDialog({ interestId, open, onOpenChange, mode }: Props) {
+  const queryClient = useQueryClient();
+  const choices: InterestOutcome[] = mode === 'won' ? ['won'] : LOST_OUTCOMES;
+  const [outcome, setOutcome] = useState<InterestOutcome>(choices[0]!);
+  const [reason, setReason] = useState('');
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      apiFetch(`/api/v1/interests/${interestId}/outcome`, {
+        method: 'POST',
+        body: { outcome, reason: reason || undefined },
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['interests', interestId] });
+      queryClient.invalidateQueries({ queryKey: ['interests'] });
+      onOpenChange(false);
+      setReason('');
+    },
+  });
+
+  function handleOpenChange(next: boolean) {
+    if (!next) {
+      setReason('');
+      setOutcome(choices[0]!);
+    }
+    onOpenChange(next);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {mode === 'won' ? (
+              <Trophy className="h-4 w-4 text-emerald-600" />
+            ) : (
+              <XCircle className="h-4 w-4 text-rose-600" />
+            )}
+            {mode === 'won' ? 'Mark interest as won' : 'Close interest as lost'}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {mode === 'lost' ? (
+            <div className="space-y-1">
+              <Label>Reason</Label>
+              <Select value={outcome} onValueChange={(v) => setOutcome(v as InterestOutcome)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {LOST_OUTCOMES.map((o) => (
+                    <SelectItem key={o} value={o}>
+                      {OUTCOME_LABELS[o]}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : null}
+
+          <div className="space-y-1">
+            <Label htmlFor="outcome-reason">Notes (optional)</Label>
+            <Textarea
+              id="outcome-reason"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              placeholder={
+                mode === 'won'
+                  ? 'Anything notable about the win? (visible in timeline + reports)'
+                  : 'What happened? (visible in timeline + reports)'
+              }
+              rows={3}
+            />
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            This will move the interest to <strong>Completed</strong> and stamp the outcome. You can
+            reopen it later.
+          </p>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => handleOpenChange(false)}
+            disabled={mutation.isPending}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => mutation.mutate()}
+            disabled={mutation.isPending}
+            className={
+              mode === 'won'
+                ? 'bg-emerald-600 hover:bg-emerald-700'
+                : 'bg-rose-600 hover:bg-rose-700'
+            }
+          >
+            {mutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {mode === 'won' ? 'Mark as won' : 'Close as lost'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/interests/interest-stage-picker.tsx

@@ -22,18 +22,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { apiFetch } from '@/lib/api/client';
-import { PIPELINE_STAGES } from '@/lib/constants';
-
-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',
-};
+import { PIPELINE_STAGES, STAGE_LABELS, stageLabel } from '@/lib/constants';
 
 interface InterestStagePickerProps {
   open: boolean;
@@ -76,9 +65,7 @@ export function InterestStagePicker({
         <div className="space-y-4 py-2">
           <div className="space-y-1">
             <Label>Current Stage</Label>
-            <p className="text-sm text-muted-foreground">
-              {STAGE_LABELS[currentStage] ?? currentStage}
-            </p>
+            <p className="text-sm text-muted-foreground">{stageLabel(currentStage)}</p>
           </div>
 
           <div className="space-y-1">
@@ -90,7 +77,7 @@ export function InterestStagePicker({
               <SelectContent>
                 {PIPELINE_STAGES.map((s) => (
                   <SelectItem key={s} value={s}>
-                    {STAGE_LABELS[s] ?? s}
+                    {STAGE_LABELS[s]}
                   </SelectItem>
                 ))}
               </SelectContent>

src/components/interests/interest-tabs.tsx

@@ -1,16 +1,23 @@
 'use client';
 
-import { format } from 'date-fns';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { format, formatDistanceToNowStrict } from 'date-fns';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { CheckCircle2, Circle, FileSignature, Plus, Send, Wallet } from 'lucide-react';
 
 import type { DetailTab } from '@/components/shared/detail-layout';
+import { Button } from '@/components/ui/button';
 import { NotesList } from '@/components/shared/notes-list';
 import { InlineEditableField } from '@/components/shared/inline-editable-field';
 import { InlineTagEditor } from '@/components/shared/inline-tag-editor';
 import { RecommendationList } from '@/components/interests/recommendation-list';
 import { InterestTimeline } from '@/components/interests/interest-timeline';
+import { InterestDocumentsTab } from '@/components/interests/interest-documents-tab';
+import { InterestFilesTab } from '@/components/interests/interest-files-tab';
 import { LEAD_CATEGORIES } from '@/lib/constants';
 import { apiFetch } from '@/lib/api/client';
+import { cn } from '@/lib/utils';
 
 type InterestPatchField = 'leadCategory' | 'source' | 'notes';
 
@@ -58,6 +65,21 @@ function useInterestPatch(interestId: string) {
   });
 }
 
+function useStageMutation(interestId: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ stage, reason }: { stage: string; reason?: string }) =>
+      apiFetch(`/api/v1/interests/${interestId}/stage`, {
+        method: 'PATCH',
+        body: { pipelineStage: stage, reason },
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['interests', interestId] });
+      qc.invalidateQueries({ queryKey: ['interests'] });
+    },
+  });
+}
+
 function EditableRow({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="flex gap-2 py-1.5 border-b last:border-0 items-center">
@@ -82,6 +104,121 @@ function formatDate(date: string | null) {
   return format(new Date(date), 'MMM d, yyyy');
 }
 
+function relativeDate(date: string | null) {
+  if (!date) return null;
+  return `${formatDistanceToNowStrict(new Date(date))} ago`;
+}
+
+interface MilestoneSectionProps {
+  title: string;
+  icon: React.ComponentType<{ className?: string }>;
+  /** Lifecycle for this milestone, in chronological order. */
+  steps: Array<{
+    label: string;
+    date: string | null;
+    /** Stage to advance to when the user clicks the action button for this step. */
+    advanceStage?: string;
+    /** Optional override for the action label. */
+    actionLabel?: string;
+  }>;
+  status: string | null;
+  onAdvance: (stage: string) => void;
+  isPending: boolean;
+  /** Extra nodes (e.g. "Create deposit invoice" link) rendered below the steps. */
+  footer?: React.ReactNode;
+}
+
+/**
+ * One milestone section (EOI / Deposit / Contract) — shows a vertical lifecycle
+ * with completed steps checked, the next step exposing a quick "mark as…"
+ * button that bumps the pipeline stage. Each stage flip auto-stamps its date
+ * via the service layer (interests.service.ts). When external systems wire in
+ * (Documenso webhook, paid invoice → deposit, etc.), they patch the same
+ * stage endpoint and these checkmarks light up automatically.
+ */
+function MilestoneSection({
+  title,
+  icon: Icon,
+  steps,
+  status,
+  onAdvance,
+  isPending,
+  footer,
+}: MilestoneSectionProps) {
+  const firstUnsetIdx = steps.findIndex((s) => !s.date);
+
+  return (
+    <section className="rounded-xl border border-border bg-card p-4 shadow-sm">
+      <header className="mb-3 flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <Icon className="size-4 text-muted-foreground" />
+          <h3 className="text-sm font-semibold tracking-tight text-foreground">{title}</h3>
+        </div>
+        {status ? (
+          <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+            {status.replace(/_/g, ' ')}
+          </span>
+        ) : null}
+      </header>
+
+      <ol className="space-y-2">
+        {steps.map((step, i) => {
+          const done = !!step.date;
+          const isNext = !done && i === firstUnsetIdx;
+          return (
+            <li key={step.label} className="flex items-start gap-2 text-sm">
+              {done ? (
+                <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-emerald-600" />
+              ) : (
+                <Circle
+                  className={cn(
+                    'mt-0.5 size-4 shrink-0',
+                    isNext ? 'text-foreground/60' : 'text-muted-foreground/40',
+                  )}
+                />
+              )}
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
+                  <span
+                    className={cn(
+                      'truncate',
+                      done
+                        ? 'text-foreground'
+                        : isNext
+                          ? 'text-foreground'
+                          : 'text-muted-foreground',
+                    )}
+                  >
+                    {step.label}
+                  </span>
+                  {step.date ? (
+                    <span className="text-xs text-muted-foreground">
+                      {formatDate(step.date)} · {relativeDate(step.date)}
+                    </span>
+                  ) : null}
+                </div>
+                {isNext && step.advanceStage ? (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    disabled={isPending}
+                    onClick={() => onAdvance(step.advanceStage!)}
+                    className="mt-2 h-7 px-2.5 text-xs"
+                  >
+                    {step.actionLabel ?? `Mark as ${step.label.toLowerCase()}`}
+                  </Button>
+                ) : null}
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+      {footer ? <div className="mt-3 border-t pt-3 text-xs">{footer}</div> : null}
+    </section>
+  );
+}
+
 function OverviewTab({
   interestId,
   interest,
@@ -89,89 +226,159 @@ function OverviewTab({
   interestId: string;
   interest: InterestTabsOptions['interest'];
 }) {
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
   const mutation = useInterestPatch(interestId);
+  const stageMutation = useStageMutation(interestId);
   const save = (field: InterestPatchField) => async (next: string | null) => {
     await mutation.mutateAsync({ [field]: next });
   };
+  const advance = (stage: string) =>
+    stageMutation.mutate({ stage, reason: 'Marked from overview' });
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-      {/* Lead & Source (editable) */}
-      <div className="space-y-1">
-        <h3 className="text-sm font-medium mb-2">Lead</h3>
-        <dl>
-          <EditableRow label="Lead Category">
-            <InlineEditableField
-              variant="select"
-              options={LEAD_CATEGORY_OPTIONS}
-              value={interest.leadCategory}
-              onSave={save('leadCategory')}
-            />
-          </EditableRow>
-          <EditableRow label="Source">
-            <InlineEditableField value={interest.source} onSave={save('source')} />
-          </EditableRow>
-        </dl>
+    <div className="space-y-6">
+      {/* Sales-process milestones — the heart of the system. Each section is a
+          mini lifecycle that auto-completes as actions happen on the platform
+          (Documenso webhook, paid deposit invoice, signed contract). Until the
+          automation lands, salespeople nudge stages forward via the inline
+          buttons here, which auto-stamp the milestone date server-side. */}
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <MilestoneSection
+          title="EOI"
+          icon={Send}
+          status={interest.eoiStatus}
+          isPending={stageMutation.isPending}
+          onAdvance={advance}
+          steps={[
+            {
+              label: 'EOI sent',
+              date: interest.dateEoiSent,
+              advanceStage: 'eoi_sent',
+              actionLabel: 'Mark EOI as sent',
+            },
+            {
+              label: 'EOI signed',
+              date: interest.dateEoiSigned,
+              advanceStage: 'eoi_signed',
+              actionLabel: 'Mark EOI as signed',
+            },
+          ]}
+        />
+        <MilestoneSection
+          title="Deposit"
+          icon={Wallet}
+          status={interest.depositStatus}
+          isPending={stageMutation.isPending}
+          onAdvance={advance}
+          steps={[
+            {
+              label: 'Deposit received',
+              date: interest.dateDepositReceived,
+              advanceStage: 'deposit_10pct',
+              actionLabel: 'Mark deposit received',
+            },
+          ]}
+          footer={
+            !interest.dateDepositReceived ? (
+              <Link
+                href={`/${portSlug}/invoices/new?interestId=${interestId}&kind=deposit`}
+                className="inline-flex items-center gap-1.5 text-foreground/80 hover:text-foreground"
+              >
+                <Plus className="size-3.5" />
+                Create deposit invoice
+              </Link>
+            ) : null
+          }
+        />
+        <MilestoneSection
+          title="Contract"
+          icon={FileSignature}
+          status={interest.contractStatus}
+          isPending={stageMutation.isPending}
+          onAdvance={advance}
+          steps={[
+            {
+              label: 'Contract sent',
+              date: interest.dateContractSent,
+              advanceStage: 'contract_sent',
+              actionLabel: 'Mark contract as sent',
+            },
+            {
+              label: 'Contract signed',
+              date: interest.dateContractSigned,
+              advanceStage: 'contract_signed',
+              actionLabel: 'Mark contract as signed',
+            },
+          ]}
+        />
       </div>
 
-      {/* EOI & Contract Status (read-only — derived) */}
-      <div className="space-y-1">
-        <h3 className="text-sm font-medium mb-2">Status</h3>
-        <dl>
-          <InfoRow label="EOI Status" value={interest.eoiStatus} />
-          <InfoRow label="Contract Status" value={interest.contractStatus} />
-          <InfoRow label="Deposit Status" value={interest.depositStatus} />
-          <InfoRow label="Reservation Status" value={interest.reservationStatus} />
-        </dl>
-      </div>
-
-      {/* Key Dates (read-only — set by workflow events) */}
-      <div className="space-y-1 md:col-span-2">
-        <h3 className="text-sm font-medium mb-2">Key Dates</h3>
-        <dl>
-          <InfoRow label="First Contact" value={formatDate(interest.dateFirstContact)} />
-          <InfoRow label="Last Contact" value={formatDate(interest.dateLastContact)} />
-          <InfoRow label="EOI Sent" value={formatDate(interest.dateEoiSent)} />
-          <InfoRow label="EOI Signed" value={formatDate(interest.dateEoiSigned)} />
-          <InfoRow label="Contract Sent" value={formatDate(interest.dateContractSent)} />
-          <InfoRow label="Contract Signed" value={formatDate(interest.dateContractSigned)} />
-          <InfoRow label="Deposit Received" value={formatDate(interest.dateDepositReceived)} />
-        </dl>
-      </div>
-
-      {/* Reminder */}
-      {interest.reminderEnabled && (
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Lead & Source (editable) */}
         <div className="space-y-1">
-          <h3 className="text-sm font-medium mb-2">Reminder</h3>
+          <h3 className="text-sm font-medium mb-2">Lead</h3>
           <dl>
-            <InfoRow
-              label="Reminder Days"
-              value={interest.reminderDays ? `${interest.reminderDays} days` : null}
-            />
-            <InfoRow label="Last Fired" value={formatDate(interest.reminderLastFired)} />
+            <EditableRow label="Lead Category">
+              <InlineEditableField
+                variant="select"
+                options={LEAD_CATEGORY_OPTIONS}
+                value={interest.leadCategory}
+                onSave={save('leadCategory')}
+              />
+            </EditableRow>
+            <EditableRow label="Source">
+              <InlineEditableField value={interest.source} onSave={save('source')} />
+            </EditableRow>
           </dl>
         </div>
-      )}
 
-      {/* Notes (editable, multiline) */}
-      <div className="space-y-1 md:col-span-2">
-        <h3 className="text-sm font-medium mb-2">Notes</h3>
-        <InlineEditableField
-          variant="textarea"
-          value={interest.notes}
-          onSave={save('notes')}
-          emptyText="No notes — click to add"
-        />
-      </div>
+        {/* Contact dates (read-only — kept compact next to Lead) */}
+        <div className="space-y-1">
+          <h3 className="text-sm font-medium mb-2">Contact</h3>
+          <dl>
+            <InfoRow label="First Contact" value={formatDate(interest.dateFirstContact)} />
+            <InfoRow label="Last Contact" value={formatDate(interest.dateLastContact)} />
+            {interest.reservationStatus ? (
+              <InfoRow label="Reservation" value={interest.reservationStatus} />
+            ) : null}
+          </dl>
+        </div>
 
-      {/* Tags */}
-      <div className="space-y-1 md:col-span-2">
-        <h3 className="text-sm font-medium mb-2">Tags</h3>
-        <InlineTagEditor
-          endpoint={`/api/v1/interests/${interestId}/tags`}
-          currentTags={interest.tags ?? []}
-          invalidateKey={['interests', interestId]}
-        />
+        {/* Reminder */}
+        {interest.reminderEnabled && (
+          <div className="space-y-1">
+            <h3 className="text-sm font-medium mb-2">Reminder</h3>
+            <dl>
+              <InfoRow
+                label="Reminder Days"
+                value={interest.reminderDays ? `${interest.reminderDays} days` : null}
+              />
+              <InfoRow label="Last Fired" value={formatDate(interest.reminderLastFired)} />
+            </dl>
+          </div>
+        )}
+
+        {/* Notes (editable, multiline) */}
+        <div className="space-y-1 md:col-span-2">
+          <h3 className="text-sm font-medium mb-2">Notes</h3>
+          <InlineEditableField
+            variant="textarea"
+            value={interest.notes}
+            onSave={save('notes')}
+            emptyText="No notes — click to add"
+          />
+        </div>
+
+        {/* Tags */}
+        <div className="space-y-1 md:col-span-2">
+          <h3 className="text-sm font-medium mb-2">Tags</h3>
+          <InlineTagEditor
+            endpoint={`/api/v1/interests/${interestId}/tags`}
+            currentTags={interest.tags ?? []}
+            invalidateKey={['interests', interestId]}
+          />
+        </div>
       </div>
     </div>
   );
@@ -198,20 +405,12 @@ export function getInterestTabs({
     {
       id: 'documents',
       label: 'Documents',
-      content: (
-        <div className="text-center py-12 text-muted-foreground">
-          <p>Documents tab available after document system is built</p>
-        </div>
-      ),
+      content: <InterestDocumentsTab interestId={interestId} />,
     },
     {
       id: 'files',
       label: 'Files',
-      content: (
-        <div className="text-center py-12 text-muted-foreground">
-          <p>Files tab available after file system is built</p>
-        </div>
-      ),
+      content: <InterestFilesTab interestId={interestId} />,
     },
     {
       id: 'recommendations',

src/components/interests/interest-timeline.tsx

@@ -1,8 +1,19 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
-import { format } from 'date-fns';
-import { Pencil, FileText, Clock, PlusCircle, Archive, RotateCcw } from 'lucide-react';
+import { format, formatDistanceToNowStrict } from 'date-fns';
+import {
+  Pencil,
+  FileText,
+  Clock,
+  PlusCircle,
+  Archive,
+  RotateCcw,
+  Trophy,
+  XCircle,
+  RefreshCcw,
+  Bot,
+} from 'lucide-react';
 
 import { apiFetch } from '@/lib/api/client';
 
@@ -20,15 +31,37 @@ interface InterestTimelineProps {
   interestId: string;
 }
 
+const LOST_OUTCOMES = new Set([
+  'lost_other_marina',
+  'lost_unqualified',
+  'lost_no_response',
+  'cancelled',
+]);
+
 function eventIcon(event: TimelineEvent) {
-  if (event.type === 'document_event') return <FileText className="h-4 w-4" />;
+  const type = event.metadata?.type as string | undefined;
+
+  if (type === 'outcome_set') {
+    const outcome = (event.metadata as Record<string, unknown>).outcome as string | undefined;
+    if (outcome === 'won') return <Trophy className="h-4 w-4 text-emerald-600" />;
+    if (outcome && LOST_OUTCOMES.has(outcome)) return <XCircle className="h-4 w-4 text-rose-600" />;
+    return <XCircle className="h-4 w-4 text-rose-600" />;
+  }
+  if (type === 'outcome_cleared') return <RefreshCcw className="h-4 w-4 text-blue-500" />;
+  if (event.type === 'document_event') return <FileText className="h-4 w-4 text-sky-600" />;
   if (event.action === 'create') return <PlusCircle className="h-4 w-4 text-green-500" />;
   if (event.action === 'archive') return <Archive className="h-4 w-4 text-orange-500" />;
   if (event.action === 'restore') return <RotateCcw className="h-4 w-4 text-blue-500" />;
-  if (event.metadata?.type === 'stage_change') return <Clock className="h-4 w-4 text-purple-500" />;
+  if (type === 'stage_change') return <Clock className="h-4 w-4 text-purple-500" />;
   return <Pencil className="h-4 w-4 text-muted-foreground" />;
 }
 
+function actorLabel(userId: string | null): string | null {
+  if (!userId) return null;
+  if (userId === 'system') return 'system';
+  return userId;
+}
+
 export function InterestTimeline({ interestId }: InterestTimelineProps) {
   const { data, isLoading } = useQuery<{ data: TimelineEvent[] }>({
     queryKey: ['interest-timeline', interestId],
@@ -66,22 +99,36 @@ export function InterestTimeline({ interestId }: InterestTimelineProps) {
       {/* Vertical line */}
       <div className="absolute left-4 top-2 bottom-2 w-px bg-border" />
 
-      {events.map((event, _idx) => (
-        <div key={event.id} className="relative flex gap-4 pb-6">
-          {/* Icon */}
-          <div className="relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-background border">
-            {eventIcon(event)}
-          </div>
+      {events.map((event) => {
+        const actor = actorLabel(event.userId);
+        const isAuto = event.userId === 'system';
+        return (
+          <div key={event.id} className="relative flex gap-4 pb-6">
+            {/* Icon */}
+            <div className="relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-background border">
+              {eventIcon(event)}
+            </div>
 
-          <div className="flex-1 pt-1">
-            <p className="text-sm">{event.description}</p>
-            <p className="text-xs text-muted-foreground mt-0.5">
-              {format(new Date(event.createdAt), 'MMM d, yyyy HH:mm')}
-              {event.userId && ` · by ${event.userId}`}
-            </p>
+            <div className="flex-1 pt-1">
+              <p className="text-sm">
+                {event.description}
+                {isAuto ? (
+                  <span className="ml-2 inline-flex items-center gap-1 rounded-full bg-muted px-1.5 py-0.5 align-middle text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                    <Bot className="h-3 w-3" />
+                    Auto
+                  </span>
+                ) : null}
+              </p>
+              <p className="mt-0.5 text-xs text-muted-foreground">
+                <time dateTime={event.createdAt} title={format(new Date(event.createdAt), 'PPpp')}>
+                  {formatDistanceToNowStrict(new Date(event.createdAt), { addSuffix: true })}
+                </time>
+                {actor ? <span> · by {actor}</span> : null}
+              </p>
+            </div>
           </div>
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 }

src/components/interests/pipeline-board.tsx

@@ -8,18 +8,7 @@ import { DndContext, closestCenter, type DragEndEvent } from '@dnd-kit/core';
 import { PipelineColumn } from '@/components/interests/pipeline-column';
 import { apiFetch } from '@/lib/api/client';
 import { usePipelineStore } from '@/stores/pipeline-store';
-import { PIPELINE_STAGES } from '@/lib/constants';
-
-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',
-};
+import { PIPELINE_STAGES, STAGE_LABELS } from '@/lib/constants';
 
 interface InterestRow {
   id: string;
@@ -116,7 +105,7 @@ export function PipelineBoard() {
           <PipelineColumn
             key={stage}
             stage={stage}
-            label={STAGE_LABELS[stage] ?? stage}
+            label={STAGE_LABELS[stage]}
             items={grouped[stage] ?? []}
           />
         ))}

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>
+  );
+}

src/components/invoices/invoice-detail.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { Loader2, Send, CreditCard } from 'lucide-react';
@@ -15,6 +15,7 @@ import { Input } from '@/components/ui/input';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { InvoicePdfPreview } from './invoice-pdf-preview';
 import { apiFetch } from '@/lib/api/client';
+import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
 import { recordPaymentSchema, type RecordPaymentInput } from '@/lib/validators/invoices';
 
 const STATUS_COLORS: Record<string, string> = {
@@ -40,6 +41,13 @@ export function InvoiceDetail({ invoiceId }: InvoiceDetailProps) {
     queryFn: () => apiFetch<{ data: any }>(`/api/v1/invoices/${invoiceId}`),
   });
 
+  const { setChrome } = useMobileChrome();
+  const titleForChrome: string | null = data?.data?.invoiceNumber ?? null;
+  useEffect(() => {
+    setChrome({ title: titleForChrome, showBackButton: true });
+    return () => setChrome({ title: null, showBackButton: false });
+  }, [titleForChrome, setChrome]);
+
   const sendMutation = useMutation({
     mutationFn: () => apiFetch(`/api/v1/invoices/${invoiceId}/send`, { method: 'POST' }),
     onSuccess: () => {

src/components/layout/mobile/mobile-bottom-tabs.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { LayoutDashboard, Users, Ship, Anchor, Menu } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+type TabSpec = {
+  label: string;
+  icon: typeof LayoutDashboard;
+  segment: string; // route segment after /[portSlug]/
+};
+
+const TABS: TabSpec[] = [
+  { label: 'Dashboard', icon: LayoutDashboard, segment: 'dashboard' },
+  { label: 'Clients', icon: Users, segment: 'clients' },
+  { label: 'Yachts', icon: Ship, segment: 'yachts' },
+  { label: 'Berths', icon: Anchor, segment: 'berths' },
+];
+
+export function MobileBottomTabs({ onMoreClick }: { onMoreClick: () => void }) {
+  const pathname = usePathname();
+
+  // Derive the active port slug from the URL so tab links always target the
+  // current port, even after a port-switch. The dashboard route shape is
+  // /[portSlug]/<rest>, so the slug is the first non-empty path segment.
+  const portSlug = pathname.split('/').filter(Boolean)[0] ?? 'port-nimara';
+
+  function isActive(segment: string): boolean {
+    return pathname.startsWith(`/${portSlug}/${segment}`);
+  }
+
+  return (
+    <nav
+      aria-label="Primary navigation"
+      className={cn(
+        'fixed bottom-0 inset-x-0 z-40 bg-background border-t border-border',
+        'pb-safe-bottom',
+        'grid grid-cols-5',
+      )}
+    >
+      {TABS.map((tab) => {
+        const active = isActive(tab.segment);
+        const Icon = tab.icon;
+        return (
+          <Link
+            key={tab.segment}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            href={`/${portSlug}/${tab.segment}` as any}
+            aria-current={active ? 'page' : undefined}
+            className={cn(
+              'flex flex-col items-center justify-center gap-0.5 h-14 text-xs',
+              active ? 'text-primary' : 'text-muted-foreground',
+            )}
+          >
+            <Icon className="size-5" aria-hidden />
+            <span className="font-medium">{tab.label}</span>
+          </Link>
+        );
+      })}
+      <button
+        type="button"
+        onClick={onMoreClick}
+        className="flex flex-col items-center justify-center gap-0.5 h-14 text-xs text-muted-foreground"
+      >
+        <Menu className="size-5" aria-hidden />
+        <span className="font-medium">More</span>
+      </button>
+    </nav>
+  );
+}

src/components/layout/mobile/mobile-layout-provider.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';
+
+type MobileChromeState = {
+  title: string | null;
+  primaryAction: ReactNode | null;
+  showBackButton: boolean;
+};
+
+type MobileChromeApi = MobileChromeState & {
+  setChrome: (next: Partial<MobileChromeState>) => void;
+};
+
+const MobileChromeContext = createContext<MobileChromeApi | null>(null);
+
+export function MobileLayoutProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<MobileChromeState>({
+    title: null,
+    primaryAction: null,
+    showBackButton: false,
+  });
+
+  const setChrome = useCallback((next: Partial<MobileChromeState>) => {
+    setState((prev) => ({ ...prev, ...next }));
+  }, []);
+
+  const value = useMemo<MobileChromeApi>(() => ({ ...state, setChrome }), [state, setChrome]);
+
+  return <MobileChromeContext.Provider value={value}>{children}</MobileChromeContext.Provider>;
+}
+
+const NOOP_SET_CHROME = () => {};
+const NOOP_CHROME: MobileChromeApi = {
+  title: null,
+  primaryAction: null,
+  showBackButton: false,
+  setChrome: NOOP_SET_CHROME,
+};
+
+/**
+ * Page-level hook to push a title / back-button / primary action into the
+ * mobile topbar. Both the desktop and mobile shells render the same
+ * children, so this hook MUST be safe to call from either tree. When the
+ * provider is missing (desktop tree), it returns a no-op so callers don't
+ * have to branch on shell type.
+ */
+export function useMobileChrome() {
+  const ctx = useContext(MobileChromeContext);
+  return ctx ?? NOOP_CHROME;
+}

src/components/layout/mobile/mobile-layout.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+import { MobileLayoutProvider } from './mobile-layout-provider';
+import { MobileTopbar } from './mobile-topbar';
+import { MobileBottomTabs } from './mobile-bottom-tabs';
+import { MoreSheet } from './more-sheet';
+
+/**
+ * Mobile shell: fixed compact topbar + scrollable content + fixed bottom tab
+ * bar. Renders only when CSS reveals it (data-shell="mobile") — both shells
+ * are in the DOM, see src/app/globals.css. The bottom tabs and More sheet
+ * derive the active port slug from the URL themselves, so this layout takes
+ * no portSlug prop.
+ */
+export function MobileLayout({ children }: { children: ReactNode }) {
+  const [moreOpen, setMoreOpen] = useState(false);
+
+  return (
+    <div data-shell="mobile" className="min-h-screen bg-background">
+      <MobileLayoutProvider>
+        <MobileTopbar />
+        <main
+          className={cn(
+            'px-4 min-h-screen',
+            // 56px topbar + safe-area + 16px breathing room
+            'pt-[calc(56px+env(safe-area-inset-top)+1rem)]',
+            // 56px tab bar + safe-area + 32px breathing room
+            'pb-[calc(56px+env(safe-area-inset-bottom)+2rem)]',
+          )}
+        >
+          {children}
+        </main>
+        <MobileBottomTabs onMoreClick={() => setMoreOpen(true)} />
+        <MoreSheet open={moreOpen} onOpenChange={setMoreOpen} />
+      </MobileLayoutProvider>
+    </div>
+  );
+}

src/components/layout/mobile/mobile-topbar.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { ChevronLeft } from 'lucide-react';
+import { useRouter, usePathname } from 'next/navigation';
+
+import { cn } from '@/lib/utils';
+import { useMobileChrome } from './mobile-layout-provider';
+
+/**
+ * Fixed mobile topbar (56px + safe-area top inset). Marina-editorial premium:
+ * deep-navy gradient surface with white type, the brand "PN" mark on the
+ * left when there's no back affordance, and a soft glow shadow underneath
+ * for depth instead of a hard divider line.
+ *
+ * Slots: title (auto-truncating), back arrow, primary action — all driven by
+ * `useMobileChrome()` from the active page. When no page has set a title the
+ * URL's last segment is title-cased as a fallback.
+ */
+export function MobileTopbar() {
+  const { title, primaryAction, showBackButton } = useMobileChrome();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const fallbackTitle =
+    pathname
+      .split('/')
+      .filter(Boolean)
+      .pop()
+      ?.replace(/-/g, ' ')
+      .replace(/\b\w/g, (c) => c.toUpperCase()) ?? 'Port Nimara';
+
+  return (
+    <header
+      className={cn(
+        'fixed top-0 inset-x-0 z-40',
+        'bg-gradient-to-b from-[#1e2844] to-[#171f35]',
+        'shadow-[0_4px_18px_-6px_rgba(15,23,42,0.45)]',
+        'h-[calc(56px+env(safe-area-inset-top))] pt-safe-top',
+        'flex items-center gap-2 px-3',
+      )}
+    >
+      {showBackButton ? (
+        <button
+          type="button"
+          onClick={() => router.back()}
+          aria-label="Go back"
+          className={cn(
+            'size-11 inline-flex items-center justify-center rounded-full -ml-1',
+            'text-white/95 active:bg-white/10 transition-colors',
+          )}
+        >
+          <ChevronLeft className="size-[22px] stroke-[2.25]" />
+        </button>
+      ) : (
+        <div
+          aria-label="Port Nimara"
+          className={cn(
+            'size-9 shrink-0 rounded-lg flex items-center justify-center',
+            'bg-[#3a7bc8] shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_1px_2px_rgba(0,0,0,0.25)]',
+          )}
+        >
+          <span className="text-white font-bold text-[13px] tracking-tight">PN</span>
+        </div>
+      )}
+
+      <h1
+        className={cn(
+          'flex-1 min-w-0 truncate text-center',
+          'text-[17px] font-semibold tracking-tight text-white',
+        )}
+      >
+        {title ?? fallbackTitle}
+      </h1>
+
+      <div className="size-11 inline-flex items-center justify-center text-white/95">
+        {primaryAction}
+      </div>
+    </header>
+  );
+}

src/components/layout/mobile/more-sheet.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  Building2,
+  Bookmark,
+  Receipt,
+  FileText,
+  FolderOpen,
+  Mail,
+  Bell,
+  ShieldAlert,
+  BarChart3,
+  Settings,
+  Shield,
+} from 'lucide-react';
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerClose,
+} from '@/components/shared/drawer';
+
+type MoreItem = {
+  label: string;
+  icon: typeof Building2;
+  segment: string;
+};
+
+const MORE_ITEMS: MoreItem[] = [
+  { label: 'Companies', icon: Building2, segment: 'companies' },
+  { label: 'Interests', icon: Bookmark, segment: 'interests' },
+  { label: 'Invoices', icon: FileText, segment: 'invoices' },
+  { label: 'Expenses', icon: Receipt, segment: 'expenses' },
+  { label: 'Documents', icon: FolderOpen, segment: 'documents' },
+  { label: 'Email', icon: Mail, segment: 'email' },
+  { label: 'Alerts', icon: ShieldAlert, segment: 'alerts' },
+  { label: 'Reports', icon: BarChart3, segment: 'reports' },
+  { label: 'Reminders', icon: Bell, segment: 'reminders' },
+  { label: 'Settings', icon: Settings, segment: 'settings' },
+  { label: 'Admin', icon: Shield, segment: 'admin' },
+];
+
+export function MoreSheet({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (next: boolean) => void;
+}) {
+  const pathname = usePathname();
+  const portSlug = pathname.split('/').filter(Boolean)[0] ?? 'port-nimara';
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>More</DrawerTitle>
+        </DrawerHeader>
+        <ul className="grid grid-cols-3 gap-1 px-3 pb-4">
+          {MORE_ITEMS.map((item) => {
+            const Icon = item.icon;
+            return (
+              <li key={item.segment}>
+                <DrawerClose asChild>
+                  <Link
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    href={`/${portSlug}/${item.segment}` as any}
+                    className="flex flex-col items-center justify-center gap-1.5 rounded-md py-4 text-xs text-foreground hover:bg-accent"
+                  >
+                    <Icon className="size-6 text-muted-foreground" aria-hidden />
+                    <span className="font-medium">{item.label}</span>
+                  </Link>
+                </DrawerClose>
+              </li>
+            );
+          })}
+        </ul>
+      </DrawerContent>
+    </Drawer>
+  );
+}

src/components/layout/sidebar.tsx

@@ -16,25 +16,21 @@ import {
   Mail,
   Bell,
   Camera,
-  ShieldAlert,
   Settings,
   Shield,
   Home,
   ChevronLeft,
   ChevronRight,
-  Menu,
   ChevronDown,
   ChevronUp,
 } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 import { useUIStore } from '@/stores/ui-store';
-import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import type { UserPortRole } from '@/lib/db/schema/users';
 import type { Role } from '@/lib/db/schema/users';
@@ -71,7 +67,6 @@ function buildNavSections(portSlug: string | undefined): NavSection[] {
       marinaRequired: true,
       items: [
         { href: `${base}/dashboard`, label: 'Dashboard', icon: LayoutDashboard },
-        { href: `${base}/alerts`, label: 'Alerts', icon: ShieldAlert },
         { href: `${base}/clients`, label: 'Clients', icon: Users },
         { href: `${base}/yachts`, label: 'Yachts', icon: Ship },
         { href: `${base}/companies`, label: 'Companies', icon: Building2 },
@@ -360,50 +355,23 @@ export function Sidebar({ portRoles, isSuperAdmin = false, user }: SidebarProps)
     portRoles.some((pr) => pr.residentialAccess || pr.role?.permissions?.residential_clients?.view);
 
   return (
-    <>
-      {/* Desktop sidebar */}
-      <aside
-        className={cn(
-          'relative hidden md:flex flex-col h-screen border-r border-[#474e66] transition-all duration-200 ease-in-out shrink-0',
-          sidebarCollapsed ? 'w-sidebar-collapsed' : 'w-sidebar',
-        )}
-        style={{ backgroundColor: '#1e2844' }}
-      >
-        <SidebarContent
-          collapsed={sidebarCollapsed}
-          portSlug={currentPortSlug ?? undefined}
-          portRoles={portRoles}
-          hasAdminAccess={hasAdminAccess}
-          hasMarinaAccess={hasMarinaAccess}
-          hasResidentialAccess={hasResidentialAccess}
-          user={user}
-          onToggleCollapse={toggleSidebar}
-        />
-      </aside>
-
-      {/* Mobile drawer */}
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="md:hidden fixed top-3 left-3 z-50 text-white bg-[#1e2844] hover:bg-[#171f35]"
-          >
-            <Menu className="w-5 h-5" />
-            <span className="sr-only">Open navigation</span>
-          </Button>
-        </SheetTrigger>
-        <SheetContent side="left" className="p-0 w-sidebar border-r-0">
-          <SidebarContent
-            collapsed={false}
-            portSlug={currentPortSlug ?? undefined}
-            portRoles={portRoles}
-            hasAdminAccess={hasAdminAccess}
-            hasMarinaAccess={hasMarinaAccess}
-            hasResidentialAccess={hasResidentialAccess}
-          />
-        </SheetContent>
-      </Sheet>
-    </>
+    <aside
+      className={cn(
+        'relative hidden md:flex flex-col h-screen border-r border-[#474e66] transition-all duration-200 ease-in-out shrink-0',
+        sidebarCollapsed ? 'w-sidebar-collapsed' : 'w-sidebar',
+      )}
+      style={{ backgroundColor: '#1e2844' }}
+    >
+      <SidebarContent
+        collapsed={sidebarCollapsed}
+        portSlug={currentPortSlug ?? undefined}
+        portRoles={portRoles}
+        hasAdminAccess={hasAdminAccess}
+        hasMarinaAccess={hasMarinaAccess}
+        hasResidentialAccess={hasResidentialAccess}
+        user={user}
+        onToggleCollapse={toggleSidebar}
+      />
+    </aside>
   );
 }

src/components/reminders/reminder-card.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import {
+  Anchor,
+  Bell,
+  Calendar,
+  CheckCircle2,
+  Clock,
+  FileText,
+  MoreHorizontal,
+  User,
+  XCircle,
+} from 'lucide-react';
+import { format } from 'date-fns';
+
+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';
+
+interface Reminder {
+  id: string;
+  title: string;
+  note: string | null;
+  dueAt: string;
+  priority: 'low' | 'medium' | 'high' | 'urgent';
+  status: 'pending' | 'snoozed' | 'completed' | 'dismissed';
+  assignedTo: string | null;
+  createdBy: string;
+  clientId: string | null;
+  interestId: string | null;
+  berthId: string | null;
+  autoGenerated: boolean;
+  snoozedUntil: string | null;
+  completedAt: string | null;
+  createdAt: string;
+  client?: { id: string; fullName: string } | null;
+  interest?: { id: string; pipelineStage: string } | null;
+  berth?: { id: string; mooringNumber: string } | null;
+}
+
+const STATUS_CONFIG = {
+  pending: { label: 'Pending', icon: Bell },
+  snoozed: { label: 'Snoozed', icon: Clock },
+  completed: { label: 'Completed', icon: CheckCircle2 },
+  dismissed: { label: 'Dismissed', icon: XCircle },
+} as const;
+
+const STATUS_PILL: Record<string, string> = {
+  pending: 'bg-amber-100 text-amber-700',
+  snoozed: 'bg-slate-100 text-slate-700',
+  completed: 'bg-emerald-100 text-emerald-700',
+  dismissed: 'bg-emerald-100 text-emerald-700',
+};
+
+const PRIORITY_CONFIG = {
+  urgent: { label: 'Urgent', className: 'bg-red-600 text-white' },
+  high: { label: 'High', className: 'bg-orange-500 text-white' },
+  medium: { label: 'Medium', className: 'bg-blue-500 text-white' },
+  low: { label: 'Low', className: 'bg-gray-400 text-white' },
+} as const;
+
+function accentForReminder(status: string, isPastDue: boolean): string {
+  if (isPastDue) return 'bg-rose-400';
+  if (status === 'pending') return 'bg-amber-400';
+  if (status === 'snoozed') return 'bg-slate-400';
+  if (status === 'completed' || status === 'dismissed') return 'bg-emerald-400';
+  return 'bg-slate-300';
+}
+
+interface ReminderCardProps {
+  reminder: Reminder;
+  portSlug: string;
+  onComplete: (id: string) => void;
+  onSnooze: (id: string) => void;
+  onDismiss: (id: string) => void;
+  onEdit: (reminder: Reminder) => void;
+}
+
+export function ReminderCard({
+  reminder,
+  portSlug: _portSlug,
+  onComplete,
+  onSnooze,
+  onDismiss,
+  onEdit,
+}: ReminderCardProps) {
+  const isPastDue =
+    (reminder.status === 'pending' || reminder.status === 'snoozed') &&
+    new Date(reminder.dueAt) < new Date();
+
+  const accentClass = accentForReminder(reminder.status, isPastDue);
+  const statusConfig = STATUS_CONFIG[reminder.status];
+  const StatusIcon = statusConfig.icon;
+  const statusPill = STATUS_PILL[reminder.status] ?? 'bg-slate-100 text-slate-700';
+  const priorityConfig = PRIORITY_CONFIG[reminder.priority];
+
+  const isResolved = reminder.status === 'completed' || reminder.status === 'dismissed';
+
+  // Subtitle: related-entity context
+  let subtitleIcon: React.ReactNode = null;
+  let subtitleText: string | null = null;
+  if (reminder.client) {
+    subtitleIcon = <User className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />;
+    subtitleText = reminder.client.fullName;
+  } else if (reminder.berth) {
+    subtitleIcon = <Anchor className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />;
+    subtitleText = `Berth ${reminder.berth.mooringNumber}`;
+  } else if (reminder.interest) {
+    subtitleIcon = (
+      <FileText className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
+    );
+    subtitleText = `Interest (${reminder.interest.pipelineStage})`;
+  }
+
+  const hasActions = !isResolved;
+
+  return (
+    <ListCard
+      href="#"
+      ariaLabel={`Reminder: ${reminder.title}`}
+      accentClassName={accentClass}
+      actions={
+        hasActions ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9"
+                onClick={(e) => e.stopPropagation()}
+                aria-label={`Actions for reminder: ${reminder.title}`}
+              >
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  onComplete(reminder.id);
+                }}
+              >
+                <CheckCircle2 className="mr-2 h-3.5 w-3.5 text-green-600" />
+                Complete
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  onSnooze(reminder.id);
+                }}
+              >
+                <Clock className="mr-2 h-3.5 w-3.5" />
+                Snooze
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  onEdit(reminder);
+                }}
+              >
+                <Bell className="mr-2 h-3.5 w-3.5" />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-destructive"
+                onClick={(e) => {
+                  e.preventDefault();
+                  onDismiss(reminder.id);
+                }}
+              >
+                <XCircle className="mr-2 h-3.5 w-3.5" />
+                Dismiss
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : undefined
+      }
+    >
+      <div className="flex items-start gap-3">
+        <ListCardAvatar icon={<Bell 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">
+              {reminder.title}
+            </h3>
+            {hasActions ? <span aria-hidden className="block h-9 w-9 shrink-0" /> : null}
+          </div>
+
+          {/* Related entity subtitle */}
+          {subtitleText ? (
+            <p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
+              {subtitleIcon}
+              <span className="truncate">{subtitleText}</span>
+            </p>
+          ) : null}
+
+          {/* Due date meta line */}
+          <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+            <ListCardMeta
+              icon={
+                <Calendar
+                  className={cn(
+                    'h-3 w-3',
+                    isPastDue ? 'text-rose-500' : 'text-muted-foreground/80',
+                  )}
+                />
+              }
+            >
+              <span className={isPastDue ? 'font-medium text-rose-600' : ''}>
+                Due {format(new Date(reminder.dueAt), 'MMM d, yyyy')}
+              </span>
+            </ListCardMeta>
+          </div>
+
+          {/* Pills row: status + priority + past-due flag */}
+          <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
+            {/* Status pill */}
+            <span
+              className={cn(
+                'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',
+                statusPill,
+              )}
+            >
+              <StatusIcon className="h-3 w-3" aria-hidden />
+              {statusConfig.label}
+            </span>
+
+            {/* Priority pill */}
+            <span
+              className={cn(
+                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+                priorityConfig.className,
+              )}
+            >
+              {priorityConfig.label}
+            </span>
+
+            {/* Past-due flag */}
+            {isPastDue ? (
+              <span className="inline-flex items-center rounded-full bg-rose-100 px-2 py-0.5 text-xs font-medium text-rose-700">
+                Past due
+              </span>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </ListCard>
+  );
+}

src/components/reminders/reminder-list.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { type ColumnDef } from '@tanstack/react-table';
 import { Plus, CheckCircle2, Clock, XCircle, AlertTriangle, Bell } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
+import { useParams } from 'next/navigation';
 
 import { DataTable } from '@/components/shared/data-table';
 import { PageHeader } from '@/components/shared/page-header';
@@ -19,6 +20,7 @@ import {
 } from '@/components/ui/select';
 import { apiFetch } from '@/lib/api/client';
 import { usePermissions } from '@/hooks/use-permissions';
+import { ReminderCard } from './reminder-card';
 import { ReminderForm } from './reminder-form';
 import { SnoozeDialog } from './snooze-dialog';
 
@@ -69,6 +71,8 @@ export function ReminderList() {
   const [total, setTotal] = useState(0);
   const { can } = usePermissions();
   const canViewAll = can('reminders', 'view_all');
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
 
   const fetchReminders = useCallback(async () => {
     setLoading(true);
@@ -290,6 +294,19 @@ export function ReminderList() {
         data={reminders}
         isLoading={loading}
         getRowId={(row) => row.id}
+        cardRender={(row) => (
+          <ReminderCard
+            reminder={row.original}
+            portSlug={portSlug}
+            onComplete={handleComplete}
+            onSnooze={setSnoozingId}
+            onDismiss={handleDismiss}
+            onEdit={(r) => {
+              setEditingReminder(r);
+              setFormOpen(true);
+            }}
+          />
+        )}
         emptyState={
           <div className="text-center py-8">
             <Bell className="mx-auto h-8 w-8 text-muted-foreground mb-2" />

src/components/reports/reports-page-client.tsx

@@ -3,6 +3,7 @@
 import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
 import { GenerateReportForm } from '@/components/reports/generate-report-form';
 import { ReportsList } from '@/components/reports/reports-list';
+import { PageHeader } from '@/components/shared/page-header';
 
 export function ReportsPageClient() {
   useRealtimeInvalidation({
@@ -13,12 +14,10 @@ export function ReportsPageClient() {
 
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold text-foreground">Reports</h1>
-        <p className="text-muted-foreground">
-          Generate and download port reports as PDF documents
-        </p>
-      </div>
+      <PageHeader
+        title="Reports"
+        description="Generate and download port reports as PDF documents"
+      />
 
       <GenerateReportForm />
       <ReportsList />

src/components/shared/action-row.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+/**
+ * Chip-row action group used on detail-page headers. On mobile (`< sm`), the
+ * row scrolls horizontally with snap-x, no overflow clipping. On desktop, it
+ * wraps freely.
+ */
+export function ActionRow({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div
+      className={cn(
+        'flex gap-2',
+        'overflow-x-auto snap-x snap-mandatory scroll-smooth -mx-3 px-3 sm:mx-0 sm:px-0',
+        'sm:flex-wrap sm:overflow-visible',
+        '[&>*]:snap-start [&>*]:shrink-0 sm:[&>*]:snap-none',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

src/components/shared/branded-auth-shell.tsx

@@ -10,15 +10,23 @@ const LOGO_URL =
  */
 export function BrandedAuthShell({ children }: { children: React.ReactNode }) {
   return (
-    <div
-      className="min-h-screen flex items-center justify-center px-4 py-8"
-      style={{
-        backgroundImage: `url('${BG_URL}')`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundColor: '#f2f2f2',
-      }}
-    >
+    <div className="relative min-h-screen min-h-[100dvh] flex items-center justify-center px-4 py-8">
+      {/*
+        Full-viewport background layer — pinned to the visible viewport via
+        `fixed inset-0` so the marina image always reaches the actual screen
+        edges regardless of the iOS Safari URL bar showing/hiding. The shell's
+        layout layer above sits on top via z-index.
+      */}
+      <div
+        aria-hidden
+        className="fixed inset-0 -z-10"
+        style={{
+          backgroundImage: `url('${BG_URL}')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundColor: '#f2f2f2',
+        }}
+      />
       <div className="w-full max-w-md">
         <div className="bg-white rounded-lg shadow-lg p-8">
           <div className="flex justify-center mb-6">

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">