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/layout/breadcrumbs.tsx

@@ -13,7 +13,8 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
-import { usePortContext } from '@/providers/port-provider';
+import { useUIStore } from '@/stores/ui-store';
+import { useBreadcrumbStore } from '@/stores/breadcrumb-store';
 
 // Human-readable labels for route segments
 const SEGMENT_LABELS: Record<string, string> = {
@@ -51,7 +52,8 @@ function formatSegment(segment: string): string {
 
 export function Breadcrumbs() {
   const pathname = usePathname();
-  const { currentPort, currentPortSlug } = usePortContext();
+  const currentPortSlug = useUIStore((s) => s.currentPortSlug);
+  const hint = useBreadcrumbStore((s) => s.hints[pathname]);
 
   // Split pathname and filter empty segments
   const rawSegments = pathname.split('/').filter(Boolean);
@@ -62,22 +64,10 @@ export function Breadcrumbs() {
     currentPortSlug ? rawSegments.filter((seg) => seg !== currentPortSlug) : rawSegments
   ).filter((seg) => !isIdSegment(seg));
 
-  if (segments.length === 0) {
-    return (
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbPage className="text-foreground font-medium">
-              {currentPort?.name ?? 'Port Nimara CRM'}
-            </BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
-    );
-  }
+  if (segments.length === 0) return null;
 
-  // Build href for each segment
-  const crumbs = segments.map((segment, index) => {
+  // Build href for each segment from the URL.
+  const urlCrumbs = segments.map((segment, index) => {
     const segmentsUpToHere = rawSegments.slice(0, rawSegments.indexOf(segment, index) + 1);
     const href = '/' + segmentsUpToHere.join('/');
     const label = formatSegment(segment);
@@ -86,35 +76,37 @@ export function Breadcrumbs() {
     return { label, href, isLast };
   });
 
+  // When a detail page registered a hint, splice in the parent crumbs
+  // (e.g. the parent client name) and replace the trailing label with
+  // the entity's actual name (e.g. "B17"). This turns the URL-only
+  // "Clients › Interests" into "Clients › Mary Smith › Interest › B17"
+  // when the rep clicked from a client page. URL-only renders untouched
+  // when no hint is registered.
+  const crumbs = (() => {
+    if (!hint) return urlCrumbs;
+    const head = urlCrumbs.slice(0, -1).map((c) => ({ ...c, isLast: false }));
+    const parents = hint.parents.map((p) => ({
+      label: p.label,
+      href: p.href ?? pathname,
+      isLast: false,
+    }));
+    const lastUrlCrumb = urlCrumbs[urlCrumbs.length - 1];
+    const tail = {
+      label: hint.current,
+      href: lastUrlCrumb?.href ?? pathname,
+      isLast: true,
+    };
+    return [...head, ...parents, tail];
+  })();
+
   return (
     <Breadcrumb>
-      <BreadcrumbList>
-        {currentPort && (
-          <>
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  href={`/${currentPortSlug}/dashboard` as any}
-                  className="text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  {currentPort.name}
-                </Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            {crumbs.length > 0 && (
-              <BreadcrumbSeparator>
-                <ChevronRight className="w-3 h-3" />
-              </BreadcrumbSeparator>
-            )}
-          </>
-        )}
-
+      <BreadcrumbList className="text-sm gap-1.5">
         {crumbs.map((crumb, _index) => (
           <Fragment key={crumb.href}>
             <BreadcrumbItem>
               {crumb.isLast ? (
-                <BreadcrumbPage className="font-medium text-foreground">
+                <BreadcrumbPage className="font-medium text-foreground truncate max-w-[160px]">
                   {crumb.label}
                 </BreadcrumbPage>
               ) : (
@@ -122,7 +114,7 @@ export function Breadcrumbs() {
                   <Link
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     href={crumb.href as any}
-                    className="text-muted-foreground hover:text-foreground transition-colors"
+                    className="text-muted-foreground hover:text-foreground transition-colors rounded px-1 -mx-1 truncate max-w-[160px]"
                   >
                     {crumb.label}
                   </Link>
@@ -130,7 +122,7 @@ export function Breadcrumbs() {
               )}
             </BreadcrumbItem>
             {!crumb.isLast && (
-              <BreadcrumbSeparator>
+              <BreadcrumbSeparator className="text-muted-foreground/40">
                 <ChevronRight className="w-3 h-3" />
               </BreadcrumbSeparator>
             )}