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/shared/column-picker.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { Columns3, Check, Bookmark } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export interface ColumnPickerOption {
+  /** Stable ID matching the column's `id` field in the table. */
+  id: string;
+  /** Human-readable label shown in the dropdown menu. */
+  label: string;
+  /**
+   * When true, the column can't be toggled off (e.g. Name + actions).
+   * It still appears in the menu but with a disabled checkmark.
+   */
+  alwaysVisible?: boolean;
+}
+
+/**
+ * Dropdown menu for toggling table column visibility. Lives next to the
+ * filter bar — single source of truth for which columns the current
+ * user wants to see in this table. Persistence is handled by the
+ * parent (typically via `useTablePreferences`).
+ */
+export function ColumnPicker({
+  columns,
+  hidden,
+  onChange,
+  onSaveView,
+}: {
+  columns: ColumnPickerOption[];
+  hidden: string[];
+  onChange: (hidden: string[]) => void;
+  /**
+   * Optional callback. When provided, a "Save current view" item is
+   * appended to the menu — folds the save-view affordance into the
+   * column picker instead of a separate top-level button.
+   */
+  onSaveView?: () => void;
+}) {
+  const hiddenSet = new Set(hidden);
+
+  function toggle(id: string) {
+    const next = new Set(hiddenSet);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    onChange(Array.from(next));
+  }
+
+  function showAll() {
+    onChange([]);
+  }
+
+  // The "All visible" affordance is only useful when something is
+  // hidden — a no-op button is noise.
+  const canShowAll = hidden.some((id) =>
+    columns.some((col) => col.id === id && !col.alwaysVisible),
+  );
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-1.5 h-8">
+          <Columns3 className="h-3.5 w-3.5" />
+          <span className="hidden sm:inline">Columns</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel className="text-xs text-muted-foreground">
+          Show / hide columns
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {columns.map((col) => {
+          const isVisible = !hiddenSet.has(col.id);
+          return (
+            <DropdownMenuItem
+              key={col.id}
+              disabled={col.alwaysVisible}
+              onSelect={(e) => {
+                // Keep the menu open while toggling so the user can
+                // flip multiple columns in one pass.
+                e.preventDefault();
+                if (col.alwaysVisible) return;
+                toggle(col.id);
+              }}
+              className="flex items-center gap-2"
+            >
+              <span
+                aria-hidden
+                className={`flex h-4 w-4 items-center justify-center rounded-sm border ${
+                  isVisible ? 'bg-primary border-primary text-primary-foreground' : 'border-border'
+                }`}
+              >
+                {isVisible && <Check className="h-3 w-3" />}
+              </span>
+              <span className="flex-1">{col.label}</span>
+              {col.alwaysVisible && (
+                <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                  always
+                </span>
+              )}
+            </DropdownMenuItem>
+          );
+        })}
+        {canShowAll && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={showAll} className="text-xs text-muted-foreground">
+              Show all columns
+            </DropdownMenuItem>
+          </>
+        )}
+        {onSaveView && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={onSaveView}>
+              <Bookmark className="mr-2 h-3.5 w-3.5" />
+              Save current view
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}