feat(interests): EOI/contract/reservation tabs + contact log + berth interest milestone + interest list overhaul

Major interest workflow expansion driven by the rapid-fire UX session.

EOI / Contract / Reservation tabs replace the generic Documents tab when
the deal is at the relevant stage — workspace pattern with active-doc
hero, signing progress, paper-signed upload, and history strip. Stage-
conditional visibility wired through interest-tabs.tsx so the tab set
shrinks/expands as the deal moves through the pipeline.

Contact log: per-interaction structured log (channel/direction/summary/
optional follow-up reminder). New `interest_contact_log` table + service
+ tab UI (timeline with channel-coded icons + compose dialog).
auto-creates a reminder when followUpAt is set.

Berth Interest milestone: first milestone in the OverviewTab's pipeline
strip, completes the moment any berth is linked via the junction. Drives
the "have we captured what they want?" sanity check for general_interest
leads before they move to EOI.

Stage-conditional milestones: past phases collapse into a one-liner
strip, current phase expands, future phases hide behind a "Show
upcoming" toggle. Inline stage picker now defers reason capture to an
override-confirm view (only required for illegal transitions, not the
default flow).

Notes blob → threaded: dropped `interests.notes` column entirely; the
threaded `interest_notes` table is the single source of truth. Latest-
note teaser on Overview links into the dedicated Notes tab. Polymorphic
notes service gains aggregated client view (unions client + interest +
yacht notes with source chips and group-by-source toggle).

Berth interest list overhaul:
  - Configurable columns via ColumnPicker (18 toggleable, 5 default-on)
  - Natural-sort SQL ORDER BY on mooring number (A1, A2, A10 not A10, A2)
  - Per-letter row tinting via colored left-border accent + dot in cell
  - Documents tab merged Files (single attachments section)

Topbar improvements:
  - Always-visible back arrow on detail pages (path depth > 2)
  - Breadcrumb-hint store + useBreadcrumbHint hook so detail pages can
    push their entity hierarchy (Clients › Mary Smith › Interest › B17)
  - Tighter spacing, softer separators, 160px crumb truncation

DataTable upgrades:
  - Page-size selector with All option (validator cap raised to 1000)
  - getRowClassName slot for per-row styling (used by berth tinting)
  - Fixed Radix SelectItem crash on empty-string values via __any__
    sentinel (was crashing every list page that opened a select filter)

Interest list:
  - Configurable columns picker
  - Stage cell clickable into detail
  - TagPicker + SavedViewsDropdown sized h-8 to match adjacent buttons
  - Save view moved into ColumnPicker menu; Views button hidden when
    no views are saved
  - Pipeline kanban board endpoint at /api/v1/interests/board with
    minimal projection, 5000-row cap + truncated banner, filter
    pass-through

Mobile chrome + sidebar collapse removed (always-expanded design choice).

User management lists super-admins (was inner-joined on user_port_roles
which excluded global super-admins).

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

src/components/berths/berth-list.tsx

@@ -1,35 +1,57 @@
 'use client';
 
 import { useRouter, useParams } from 'next/navigation';
+import { Anchor } from 'lucide-react';
 
 import { DataTable } from '@/components/shared/data-table';
 import { FilterBar } from '@/components/shared/filter-bar';
 import { PageHeader } from '@/components/shared/page-header';
 import { SavedViewsDropdown } from '@/components/shared/saved-views-dropdown';
+import { ColumnPicker } from '@/components/shared/column-picker';
 import { EmptyState } from '@/components/shared/empty-state';
 import { usePaginatedQuery } from '@/hooks/use-paginated-query';
 import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
+import { useTablePreferences } from '@/hooks/use-table-preferences';
 import { BerthCard } from './berth-card';
-import { berthColumns, type BerthRow } from './berth-columns';
+import {
+  berthColumns,
+  BERTH_COLUMN_OPTIONS,
+  BERTH_DEFAULT_HIDDEN,
+  type BerthRow,
+} from './berth-columns';
 import { berthFilterDefinitions } from './berth-filters';
-import { Anchor } from 'lucide-react';
+import { mooringLetterTone } from './mooring-letter-tone';
 
 export function BerthList() {
   const router = useRouter();
   const params = useParams<{ portSlug: string }>();
 
-  const { data, pagination, isLoading, sort, setSort, filters, setFilter, clearFilters, setPage } =
-    usePaginatedQuery<BerthRow>({
-      queryKey: ['berths'],
-      endpoint: '/api/v1/berths',
-      filterDefinitions: berthFilterDefinitions,
-    });
+  const {
+    data,
+    pagination,
+    isLoading,
+    sort,
+    setSort,
+    filters,
+    setFilter,
+    clearFilters,
+    setPage,
+    setPageSize,
+  } = usePaginatedQuery<BerthRow>({
+    queryKey: ['berths'],
+    endpoint: '/api/v1/berths',
+    filterDefinitions: berthFilterDefinitions,
+  });
 
   useRealtimeInvalidation({
     'berth:updated': [['berths']],
     'berth:statusChanged': [['berths']],
   });
 
+  // Persisted column visibility — same pattern as ClientList / InterestList.
+  const { hidden, setHidden } = useTablePreferences('berths', BERTH_DEFAULT_HIDDEN);
+  const columnVisibility = Object.fromEntries(hidden.map((id) => [id, false]));
+
   return (
     <div className="space-y-6">
       <PageHeader
@@ -46,21 +68,21 @@ export function BerthList() {
           onChange={setFilter}
           onClear={clearFilters}
         />
-        <div className="ml-auto">
+        <div className="ml-auto flex items-center gap-2">
           <SavedViewsDropdown
             entityType="berths"
-            currentFilters={filters}
-            currentSort={sort}
             onApplyView={(savedFilters, _savedSort) => {
               clearFilters();
               Object.entries(savedFilters).forEach(([key, value]) => setFilter(key, value));
             }}
           />
+          <ColumnPicker columns={BERTH_COLUMN_OPTIONS} hidden={hidden} onChange={setHidden} />
         </div>
       </div>
 
       <DataTable<BerthRow>
         columns={berthColumns}
+        columnVisibility={columnVisibility}
         data={data}
         isLoading={isLoading}
         pagination={{
@@ -69,11 +91,15 @@ export function BerthList() {
           total: pagination.total,
           totalPages: pagination.totalPages,
         }}
-        onPaginationChange={(page) => setPage(page)}
+        onPaginationChange={(page, pageSize) => {
+          setPage(page);
+          setPageSize(pageSize);
+        }}
         sort={sort}
         onSortChange={setSort}
         getRowId={(row) => row.id}
         onRowClick={(row) => router.push(`/${params.portSlug}/berths/${row.id}`)}
+        getRowClassName={(row) => mooringLetterTone(row.mooringNumber)}
         cardRender={(row) => <BerthCard berth={row.original} />}
         emptyState={
           <EmptyState