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/interests/interest-documents-tab.tsx

@@ -1,12 +1,18 @@
 'use client';
 
 import { useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { FileSignature } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 import { DocumentList } from '@/components/documents/document-list';
 import { EoiGenerateDialog } from '@/components/documents/eoi-generate-dialog';
+import { FileGrid, type FileRow } from '@/components/files/file-grid';
+import { FileUploadZone } from '@/components/files/file-upload-zone';
+import { FilePreviewDialog } from '@/components/files/file-preview-dialog';
+import { PermissionGate } from '@/components/shared/permission-gate';
+import { usePaginatedQuery } from '@/hooks/use-paginated-query';
+import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
 import { apiFetch } from '@/lib/api/client';
 
 interface InterestDocumentsTabProps {
@@ -15,70 +21,151 @@ interface InterestDocumentsTabProps {
 
 interface InterestData {
   id: string;
-  yachtId?: string | null;
-  berthId?: string | null;
-  clientName?: string | null;
-  /** Surfaced by getInterestById for the EOI prerequisites checklist. */
-  clientPrimaryEmail?: string | null;
-  clientHasAddress?: boolean;
+  clientId?: string | null;
 }
 
+/**
+ * Documents tab — legal instruments (EOI / contract / reservation) with
+ * full signing status, plus an Attachments section for any other file the
+ * rep wants on the deal. Replaces the standalone Files tab — at the
+ * interest level virtually everything is either a legal doc or rare
+ * one-off, and a separate tab was dead weight 95% of the time.
+ */
 export function InterestDocumentsTab({ interestId }: InterestDocumentsTabProps) {
+  const queryClient = useQueryClient();
   const [eoiDialogOpen, setEoiDialogOpen] = useState(false);
+  const [previewFile, setPreviewFile] = useState<FileRow | null>(null);
 
-  // Same query key + queryFn shape as InterestDetail's parent query, so the
-  // cache is consistent. (Mismatched shapes on the same key clobber each other
-  // and the parent header degenerates to "Unknown Client".)
   const { data: interest } = useQuery<InterestData>({
     queryKey: ['interests', interestId],
     queryFn: () =>
       apiFetch<{ data: InterestData }>(`/api/v1/interests/${interestId}`).then((r) => r.data),
   });
 
-  const prerequisites = {
-    // Required (EOI Section 2 - top paragraph): name, address, email.
-    hasName: Boolean(interest?.clientName),
-    hasEmail: Boolean(interest?.clientPrimaryEmail),
-    hasAddress: Boolean(interest?.clientHasAddress),
-    // Optional (EOI Section 3): yacht + berth. Render blank when absent.
-    hasYacht: Boolean(interest?.yachtId),
-    hasBerth: Boolean(interest?.berthId),
+  // Files attach at the client level (the schema has no interest_id
+  // FK on `files`). For an interest, surface every file that belongs
+  // to its parent client — covers the realistic case where a rep
+  // uploaded a passport / scan / photo while working a deal.
+  // Until the interest record loads we pass a sentinel clientId so the
+  // server returns empty rather than the unscoped port-wide file list.
+  const clientId = interest?.clientId ?? '__pending__';
+  const filesQueryKey = ['files', { clientId }] as const;
+  const { data: files, isLoading: filesLoading } = usePaginatedQuery<FileRow>({
+    queryKey: filesQueryKey,
+    endpoint: `/api/v1/files?clientId=${encodeURIComponent(clientId)}`,
+    filterDefinitions: [],
+  });
+
+  useRealtimeInvalidation({
+    'file:uploaded': [filesQueryKey],
+    'file:updated': [filesQueryKey],
+    'file:deleted': [filesQueryKey],
+  });
+
+  const handleDownload = async (file: FileRow) => {
+    try {
+      const res = await apiFetch<{ data: { url: string; filename: string } }>(
+        `/api/v1/files/${file.id}/download`,
+      );
+      const a = document.createElement('a');
+      a.href = res.data.url;
+      a.download = res.data.filename;
+      a.click();
+    } catch {
+      // silent
+    }
   };
 
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h3 className="text-sm font-medium text-muted-foreground">Documents</h3>
-        <Button size="sm" variant="outline" onClick={() => setEoiDialogOpen(true)}>
-          Generate EOI
-        </Button>
-      </div>
+  const handleDelete = async (file: FileRow) => {
+    if (!confirm(`Delete "${file.filename}"? This cannot be undone.`)) return;
+    try {
+      await apiFetch(`/api/v1/files/${file.id}`, { method: 'DELETE' });
+      queryClient.invalidateQueries({ queryKey: filesQueryKey });
+    } catch {
+      // silent
+    }
+  };
 
-      <DocumentList
-        interestId={interestId}
-        emptyState={
-          <div className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-border bg-muted/20 px-6 py-10 text-center">
-            <div className="flex size-10 items-center justify-center rounded-full bg-background text-muted-foreground">
-              <FileSignature className="size-5" />
+  const hasAttachments = files.length > 0;
+
+  return (
+    <div className="space-y-8">
+      <section className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-medium text-muted-foreground">Legal documents</h3>
+          <Button size="sm" variant="outline" onClick={() => setEoiDialogOpen(true)}>
+            Generate EOI
+          </Button>
+        </div>
+
+        <DocumentList
+          interestId={interestId}
+          emptyState={
+            <div className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-border bg-muted/20 px-6 py-10 text-center">
+              <div className="flex size-10 items-center justify-center rounded-full bg-background text-muted-foreground">
+                <FileSignature className="size-5" />
+              </div>
+              <div className="space-y-1">
+                <p className="text-sm font-medium text-foreground">No documents yet</p>
+                <p className="text-xs text-muted-foreground">
+                  Generate the EOI to send it for signing in one click.
+                </p>
+              </div>
+              <Button size="sm" onClick={() => setEoiDialogOpen(true)}>
+                Generate EOI
+              </Button>
             </div>
-            <div className="space-y-1">
-              <p className="text-sm font-medium text-foreground">No documents yet</p>
-              <p className="text-xs text-muted-foreground">
-                Generate the EOI to send it for signing in one click.
-              </p>
-            </div>
-            <Button size="sm" onClick={() => setEoiDialogOpen(true)}>
-              Generate EOI
-            </Button>
-          </div>
-        }
-      />
+          }
+        />
+      </section>
+
+      <section className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-medium text-muted-foreground">Attachments</h3>
+          {hasAttachments ? (
+            <span className="text-xs text-muted-foreground">
+              {files.length} file{files.length === 1 ? '' : 's'}
+            </span>
+          ) : null}
+        </div>
+
+        <PermissionGate resource="files" action="upload">
+          {interest?.clientId ? (
+            <FileUploadZone
+              entityType="client"
+              entityId={interest.clientId}
+              onUploadComplete={() => {
+                queryClient.invalidateQueries({ queryKey: filesQueryKey });
+              }}
+            />
+          ) : null}
+        </PermissionGate>
+
+        {hasAttachments ? (
+          <FileGrid
+            files={files}
+            onDownload={handleDownload}
+            onPreview={setPreviewFile}
+            onRename={() => {}}
+            onDelete={handleDelete}
+            isLoading={filesLoading}
+          />
+        ) : null}
+      </section>
 
       <EoiGenerateDialog
         interestId={interestId}
+        clientId={interest?.clientId ?? null}
         open={eoiDialogOpen}
         onOpenChange={setEoiDialogOpen}
-        prerequisites={prerequisites}
+      />
+
+      <FilePreviewDialog
+        open={!!previewFile}
+        onOpenChange={(open) => !open && setPreviewFile(null)}
+        fileId={previewFile?.id}
+        fileName={previewFile?.filename}
+        mimeType={previewFile?.mimeType ?? undefined}
       />
     </div>
   );