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/notes-list.tsx

@@ -18,32 +18,72 @@ interface Note {
   isLocked: boolean;
   createdAt: string;
   updatedAt: string;
+  /** Aggregated-mode only: which child entity this note came from. */
+  source?: 'client' | 'interest' | 'yacht';
+  sourceId?: string;
+  sourceLabel?: string;
 }
 
 interface NotesListProps {
-  entityType: 'clients' | 'interests' | 'yachts' | 'companies';
+  entityType:
+    | 'clients'
+    | 'interests'
+    | 'yachts'
+    | 'companies'
+    | 'residential_clients'
+    | 'residential_interests';
   entityId: string;
   currentUserId?: string;
+  /**
+   * When `entityType='clients'` and this is true, the list aggregates
+   * notes from the client + their interests + directly-owned yachts.
+   * Notes from interests/yachts render with a source chip and are
+   * read-only here (edit them on the source entity's page).
+   */
+  aggregate?: boolean;
 }
 
 const NOTE_EDIT_WINDOW_MS = 15 * 60 * 1000; // 15 minutes
 
-export function NotesList({ entityType, entityId, currentUserId }: NotesListProps) {
+/** Sort by source then chronologically inside each source.
+ *  Used by the aggregated view's "Group by source" toggle. */
+function sortByGroup(notes: Note[]): Note[] {
+  const sourceOrder: Record<string, number> = { client: 0, interest: 1, yacht: 2 };
+  return [...notes].sort((a, b) => {
+    const aRank = sourceOrder[a.source ?? 'client'] ?? 99;
+    const bRank = sourceOrder[b.source ?? 'client'] ?? 99;
+    if (aRank !== bRank) return aRank - bRank;
+    const aLabel = a.sourceLabel ?? '';
+    const bLabel = b.sourceLabel ?? '';
+    if (aLabel !== bLabel) return aLabel.localeCompare(bLabel);
+    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+  });
+}
+
+export function NotesList({ entityType, entityId, currentUserId, aggregate }: NotesListProps) {
   const queryClient = useQueryClient();
   const [newNote, setNewNote] = useState('');
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editContent, setEditContent] = useState('');
+  const [groupBySource, setGroupBySource] = useState(false);
 
-  const endpoint = `/api/v1/${entityType}/${entityId}/notes`;
-  const queryKey = [entityType, entityId, 'notes'];
+  const aggregateOn = aggregate && entityType === 'clients';
+  const baseEndpoint = `/api/v1/${entityType}/${entityId}/notes`;
+  const listEndpoint = aggregateOn ? `${baseEndpoint}?aggregate=true` : baseEndpoint;
+  const queryKey = [entityType, entityId, 'notes', aggregateOn ? 'aggregated' : 'own'];
 
   const { data: notes = [], isLoading } = useQuery<Note[]>({
     queryKey,
-    queryFn: () => apiFetch<{ data: Note[] }>(endpoint).then((r) => r.data),
+    queryFn: () => apiFetch<{ data: Note[] }>(listEndpoint).then((r) => r.data),
   });
 
+  // Mutations always target the parent entity (client). Aggregated
+  // notes from interests/yachts are read-only here — the rep edits
+  // them on the source entity's page (we surface a "Open source" link
+  // below). Keeping mutations against `baseEndpoint` keeps the POST
+  // route handler clean.
   const createMutation = useMutation({
-    mutationFn: (content: string) => apiFetch(endpoint, { method: 'POST', body: { content } }),
+    mutationFn: (content: string) => apiFetch(baseEndpoint, { method: 'POST', body: { content } }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey });
       setNewNote('');
@@ -52,7 +92,7 @@ export function NotesList({ entityType, entityId, currentUserId }: NotesListProp
 
   const updateMutation = useMutation({
     mutationFn: ({ noteId, content }: { noteId: string; content: string }) =>
-      apiFetch(`${endpoint}/${noteId}`, { method: 'PATCH', body: { content } }),
+      apiFetch(`${baseEndpoint}/${noteId}`, { method: 'PATCH', body: { content } }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey });
       setEditingId(null);
@@ -60,13 +100,17 @@ export function NotesList({ entityType, entityId, currentUserId }: NotesListProp
   });
 
   const deleteMutation = useMutation({
-    mutationFn: (noteId: string) => apiFetch(`${endpoint}/${noteId}`, { method: 'DELETE' }),
+    mutationFn: (noteId: string) => apiFetch(`${baseEndpoint}/${noteId}`, { method: 'DELETE' }),
     onSuccess: () => queryClient.invalidateQueries({ queryKey }),
   });
 
   function canEdit(note: Note): boolean {
     if (note.authorId !== currentUserId) return false;
     if (note.isLocked) return false;
+    // Aggregated view: only client-level notes are editable in-place.
+    // Notes from interests/yachts must be edited on their own page so
+    // the right entity timeline records the change.
+    if (aggregateOn && note.source && note.source !== 'client') return false;
     const elapsed = Date.now() - new Date(note.createdAt).getTime();
     return elapsed < NOTE_EDIT_WINDOW_MS;
   }
@@ -105,6 +149,29 @@ export function NotesList({ entityType, entityId, currentUserId }: NotesListProp
         </div>
       </div>
 
+      {/* Aggregated-mode controls — sort toggle. Only renders when
+       *  aggregation is on and there's actually content to group. */}
+      {aggregateOn && notes.length > 0 && (
+        <div className="flex items-center justify-end gap-2 text-xs text-muted-foreground">
+          <span>View:</span>
+          <button
+            type="button"
+            className={!groupBySource ? 'font-medium text-foreground' : 'hover:text-foreground'}
+            onClick={() => setGroupBySource(false)}
+          >
+            Chronological
+          </button>
+          <span>·</span>
+          <button
+            type="button"
+            className={groupBySource ? 'font-medium text-foreground' : 'hover:text-foreground'}
+            onClick={() => setGroupBySource(true)}
+          >
+            Group by source
+          </button>
+        </div>
+      )}
+
       {/* Notes list */}
       {isLoading ? (
         <div className="text-center py-8 text-muted-foreground">Loading notes...</div>
@@ -112,7 +179,7 @@ export function NotesList({ entityType, entityId, currentUserId }: NotesListProp
         <div className="text-center py-8 text-muted-foreground">No notes yet</div>
       ) : (
         <div className="space-y-3">
-          {notes.map((note) => (
+          {(groupBySource ? sortByGroup(notes) : notes).map((note) => (
             <div key={note.id} className="flex gap-3 p-3 rounded-lg border bg-card">
               <Avatar className="h-8 w-8 shrink-0">
                 <AvatarFallback className="text-xs">
@@ -120,11 +187,23 @@ export function NotesList({ entityType, entityId, currentUserId }: NotesListProp
                 </AvatarFallback>
               </Avatar>
               <div className="flex-1 min-w-0 space-y-1">
-                <div className="flex items-center gap-2 text-sm">
+                <div className="flex items-center gap-2 text-sm flex-wrap">
                   <span className="font-medium">{note.authorName ?? 'User'}</span>
                   <span className="text-muted-foreground">
                     {formatDistanceToNow(new Date(note.createdAt), { addSuffix: true })}
                   </span>
+                  {aggregateOn && note.source && note.source !== 'client' && note.sourceLabel && (
+                    <span
+                      className={
+                        note.source === 'interest'
+                          ? 'inline-flex items-center rounded-full bg-blue-100 text-blue-900 px-1.5 py-0.5 text-[10px] font-medium'
+                          : 'inline-flex items-center rounded-full bg-emerald-100 text-emerald-900 px-1.5 py-0.5 text-[10px] font-medium'
+                      }
+                      title={`From ${note.source}`}
+                    >
+                      {note.source === 'interest' ? 'Interest' : 'Yacht'} · {note.sourceLabel}
+                    </span>
+                  )}
                   {note.isLocked && <Lock className="h-3 w-3 text-muted-foreground" />}
                   {canEdit(note) && (
                     <span className="text-xs text-muted-foreground">{getTimeRemaining(note)}</span>