feat(sales-ux): triage signals, reminders, realtime toasts, mobile FAB

Sales-CRM workflow batch — closes audit recommendations #2, #3, #4, #6,
#7, #8, #9, #10, #13, #15. Skips #11 (My-pipeline filter — needs a real
assignee column on interests, defer until ownership model lands) and #12
(keyboard shortcuts — explicit user call).

  Interest list (the rep's main triage surface):

    - Last activity column replaces Created (sortable by
      dateLastContact). Postgres NULLs-last on DESC means
      never-contacted leads sort to the bottom — exactly the right
      triage default.
    - Comment-icon next to client name when notesCount > 0, with a
      tooltip showing the count. Cheap, glanceable signal that the
      lead has correspondence to peek at.
    - Urgency badges under stage when criteria fire: "Silent Nd"
      for mid-funnel interests with no contact in 7+ days,
      "EOI Nd" for EOIs awaiting signature 14+ days, "Deposit Nd"
      for eoi_signed interests with no deposit after 21 days.
      Pure derived — no extra fetch, computed from the dates the
      row already returns.
    - Bulk select checkbox column with bulk-archive (existing
      DataTable.bulkActions API; just wired with a confirm-dialog
      and a Promise.all fan-out).
    - Mobile FAB (+) for new interest, anchored above the bottom-tab
      bar with safe-area inset awareness.

    All four signals mirrored on the mobile InterestCard (comment
    icon, urgency badges, last-activity footer).

  Interest detail:

    - Reminder bell badge in the header showing pending/snoozed
      reminder count linked to the interest. Surfaced via
      getInterestById's new `activeReminderCount`.
    - "Latest note" teaser on the Overview tab — truncated 3-line
      preview of the most recent threaded note + relative time +
      "View all" link to the Notes tab. Saves a click for the
      common "what was discussed last?" peek.
    - Color-block swatches in InlineStagePicker dropdown (rounded-sm
      mini-bars in the stage's progressive saturation color, replacing
      the previous tiny dots). Reads as a visual scan instead of a
      list.

  Dashboard:

    - MyRemindersRail on the right sidebar above the existing
      AlertRail. Shows pending+snoozed reminders for the current
      user (overdue first), each with priority pill, relative due
      time, and click-through to the linked interest/client/berth.

  Berth detail:

    - BerthInterestPulse card at the top of the Overview tab,
      replacing the old "buried in tab" pattern. Shows up to 5
      active interests with avatar, stage pill, urgency badges, and
      last-activity. Mirrors the old Nuxt CRM's beloved "Interested
      Parties" panel but with the new triage signals.

  Realtime toasts:

    - New <RealtimeToasts /> mounted inside SocketProvider in the
      dashboard layout. Subscribes to interest:stageChanged,
      document:completed, document:signer:signed, and
      interest:outcomeSet — fires sonner toasts so reps watching any
      page learn about pipeline events without refreshing.

  Service layer:

    - listInterests: notesCount per row (left join + count + groupBy).
    - getInterestById: clientPrimaryPhone + clientPrimaryPhoneE164
      (for the Email/Call/WhatsApp buttons added last commit; phone
      pieces were missing), notesCount, recentNote, activeReminderCount.
    - sortColumn switch handles 'dateLastContact' explicitly; default
      stays 'updatedAt'.

tsc clean. vitest 835/835 pass. ESLint clean on every file touched.

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

src/components/berths/berth-interest-pulse.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { useQuery } from '@tanstack/react-query';
+import { ChevronRight, Users } from 'lucide-react';
+import { formatDistanceToNowStrict } from 'date-fns';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { apiFetch } from '@/lib/api/client';
+import { stageBadgeClass, stageLabel } from '@/lib/constants';
+import { computeUrgencyBadges } from '@/components/interests/urgency';
+import type { InterestRow } from '@/components/interests/interest-columns';
+import { cn } from '@/lib/utils';
+
+interface InterestsResponse {
+  data: InterestRow[];
+}
+
+const PREVIEW_LIMIT = 5;
+
+/**
+ * Top-of-overview pulse for the berth detail page. Lists the active
+ * interested parties with their stage + last activity, so the rep can do
+ * berth-level triage ("who's on this slip and how warm are they?")
+ * without clicking into the Interests tab.
+ *
+ * Borrows from the old Nuxt CRM's BerthDetailsModal "Interested Parties"
+ * pattern but uses the new at-a-glance signals (urgency badges, last
+ * activity).
+ */
+export function BerthInterestPulse({ berthId }: { berthId: string }) {
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
+
+  const { data, isLoading } = useQuery<InterestsResponse>({
+    queryKey: ['interests', { berthId, sort: 'dateLastContact', order: 'desc' }],
+    queryFn: () =>
+      apiFetch<InterestsResponse>(
+        `/api/v1/interests?berthId=${berthId}&limit=10&sort=dateLastContact&order=desc`,
+      ),
+    staleTime: 30_000,
+  });
+
+  const all = data?.data ?? [];
+  const active = all.filter((i) => !i.archivedAt && !i.outcome);
+  const preview = active.slice(0, PREVIEW_LIMIT);
+  const more = active.length - preview.length;
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium">Interested parties</CardTitle>
+        </CardHeader>
+        <CardContent className="pt-0">
+          <div className="space-y-2">
+            {[0, 1, 2].map((i) => (
+              <div key={i} className="h-10 animate-pulse rounded-md bg-muted/40" />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (active.length === 0) {
+    return (
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="flex items-center gap-1.5 text-sm font-medium">
+            <Users className="size-3.5" />
+            Interested parties
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pt-0">
+          <p className="text-sm text-muted-foreground">No active interests on this berth.</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between pb-3 space-y-0">
+        <CardTitle className="flex items-center gap-1.5 text-sm font-medium">
+          <Users className="size-3.5" />
+          Interested parties
+          <span className="ml-1 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+            {active.length}
+          </span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <ul className="divide-y divide-border">
+          {preview.map((i) => {
+            const lastIso = i.dateLastContact ?? i.updatedAt ?? null;
+            const lastActivity = lastIso
+              ? formatDistanceToNowStrict(new Date(lastIso), { addSuffix: true })
+              : null;
+            const urgency = computeUrgencyBadges(i);
+            const initials = (i.clientName ?? '?')
+              .split(/\s+/)
+              .filter(Boolean)
+              .slice(0, 2)
+              .map((p) => p[0]!.toUpperCase())
+              .join('');
+            return (
+              <li key={i.id}>
+                <Link
+                  href={`/${portSlug}/interests/${i.id}`}
+                  className="group flex items-center gap-3 px-1 py-2.5 transition-colors hover:bg-foreground/5 rounded-md -mx-1"
+                >
+                  <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-brand-100 text-xs font-semibold text-brand-700">
+                    {initials || '?'}
+                  </span>
+                  <div className="min-w-0 flex-1 space-y-0.5">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="truncate text-sm font-medium text-foreground">
+                        {i.clientName ?? 'Unknown'}
+                      </span>
+                      <span
+                        className={cn(
+                          'inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium',
+                          stageBadgeClass(i.pipelineStage),
+                        )}
+                      >
+                        {stageLabel(i.pipelineStage)}
+                      </span>
+                      {urgency.map((b) => (
+                        <span
+                          key={b.id}
+                          title={b.detail}
+                          className={cn(
+                            'inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium',
+                            b.className,
+                          )}
+                        >
+                          {b.label}
+                        </span>
+                      ))}
+                    </div>
+                    {lastActivity ? (
+                      <p className="text-[11px] tabular-nums text-muted-foreground">
+                        Last activity {lastActivity}
+                      </p>
+                    ) : null}
+                  </div>
+                  <ChevronRight className="size-4 shrink-0 text-muted-foreground/60 transition-transform group-hover:translate-x-0.5" />
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+        {more > 0 ? (
+          <Link
+            href={`/${portSlug}/berths/${berthId}?tab=interests`}
+            className="mt-2 inline-flex text-xs font-medium text-primary hover:underline"
+          >
+            View all {active.length} interests →
+          </Link>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

src/components/berths/berth-tabs.tsx

@@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { TagBadge } from '@/components/shared/tag-badge';
 import { BerthReservationsTab } from './berth-reservations-tab';
 import { BerthInterestsTab } from './berth-interests-tab';
+import { BerthInterestPulse } from './berth-interest-pulse';
 
 type BerthData = {
   id: string;
@@ -72,93 +73,99 @@ function OverviewTab({ berth }: { berth: BerthData }) {
     : null;
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-      {/* Specifications */}
-      <Card>
-        <CardHeader className="pb-3">
-          <CardTitle className="text-sm font-medium">Specifications</CardTitle>
-        </CardHeader>
-        <CardContent className="pt-0 divide-y">
-          <SpecRow label="Length" value={formatDim(berth.lengthFt, berth.lengthM)} />
-          <SpecRow
-            label="Width"
-            value={
-              formatDim(berth.widthFt, berth.widthM)
-                ? `${formatDim(berth.widthFt, berth.widthM)}${berth.widthIsMinimum ? ' (min)' : ''}`
-                : null
-            }
-          />
-          <SpecRow label="Draft" value={formatDim(berth.draftFt, berth.draftM)} />
-          <SpecRow
-            label="Nominal Boat Size"
-            value={berth.nominalBoatSize || berth.nominalBoatSizeM}
-          />
-          <SpecRow
-            label="Water Depth"
-            value={
-              berth.waterDepth || berth.waterDepthM
-                ? `${formatDim(berth.waterDepth, berth.waterDepthM)}${berth.waterDepthIsMinimum ? ' (min)' : ''}`
-                : null
-            }
-          />
-          <SpecRow label="Mooring Type" value={berth.mooringType} />
-          <SpecRow label="Side Pontoon" value={berth.sidePontoon} />
-          <SpecRow label="Bow Facing" value={berth.bowFacing} />
-          <SpecRow label="Access" value={berth.access} />
-          <SpecRow label="Approved" value={berth.berthApproved ? 'Yes' : null} />
-        </CardContent>
-      </Card>
+    <div className="space-y-6">
+      {/* Sales pulse — top-of-page so reps doing berth-level triage can see
+          who's interested + how warm without clicking into the Interests tab. */}
+      <BerthInterestPulse berthId={berth.id} />
 
-      {/* Infrastructure & Pricing */}
-      <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Specifications */}
         <Card>
           <CardHeader className="pb-3">
-            <CardTitle className="text-sm font-medium">Infrastructure</CardTitle>
-          </CardHeader>
-          <CardContent className="pt-0 divide-y">
-            <SpecRow label="Power Capacity" value={berth.powerCapacity} />
-            <SpecRow label="Voltage" value={berth.voltage} />
-            <SpecRow label="Cleat Type" value={berth.cleatType} />
-            <SpecRow label="Cleat Capacity" value={berth.cleatCapacity} />
-            <SpecRow label="Bollard Type" value={berth.bollardType} />
-            <SpecRow label="Bollard Capacity" value={berth.bollardCapacity} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="pb-3">
-            <CardTitle className="text-sm font-medium">Tenure & Pricing</CardTitle>
+            <CardTitle className="text-sm font-medium">Specifications</CardTitle>
           </CardHeader>
           <CardContent className="pt-0 divide-y">
+            <SpecRow label="Length" value={formatDim(berth.lengthFt, berth.lengthM)} />
             <SpecRow
-              label="Tenure Type"
-              value={berth.tenureType === 'permanent' ? 'Permanent' : 'Fixed Term'}
+              label="Width"
+              value={
+                formatDim(berth.widthFt, berth.widthM)
+                  ? `${formatDim(berth.widthFt, berth.widthM)}${berth.widthIsMinimum ? ' (min)' : ''}`
+                  : null
+              }
             />
-            {berth.tenureType === 'fixed_term' && (
-              <>
-                <SpecRow label="Years" value={berth.tenureYears} />
-                <SpecRow label="Start Date" value={berth.tenureStartDate} />
-                <SpecRow label="End Date" value={berth.tenureEndDate} />
-              </>
-            )}
-            <SpecRow label="Price" value={price} />
+            <SpecRow label="Draft" value={formatDim(berth.draftFt, berth.draftM)} />
+            <SpecRow
+              label="Nominal Boat Size"
+              value={berth.nominalBoatSize || berth.nominalBoatSizeM}
+            />
+            <SpecRow
+              label="Water Depth"
+              value={
+                berth.waterDepth || berth.waterDepthM
+                  ? `${formatDim(berth.waterDepth, berth.waterDepthM)}${berth.waterDepthIsMinimum ? ' (min)' : ''}`
+                  : null
+              }
+            />
+            <SpecRow label="Mooring Type" value={berth.mooringType} />
+            <SpecRow label="Side Pontoon" value={berth.sidePontoon} />
+            <SpecRow label="Bow Facing" value={berth.bowFacing} />
+            <SpecRow label="Access" value={berth.access} />
+            <SpecRow label="Approved" value={berth.berthApproved ? 'Yes' : null} />
           </CardContent>
         </Card>
 
-        {berth.tags.length > 0 && (
+        {/* Infrastructure & Pricing */}
+        <div className="space-y-6">
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-sm font-medium">Tags</CardTitle>
+              <CardTitle className="text-sm font-medium">Infrastructure</CardTitle>
             </CardHeader>
-            <CardContent className="pt-0">
-              <div className="flex flex-wrap gap-1.5">
-                {berth.tags.map((tag) => (
-                  <TagBadge key={tag.id} name={tag.name} color={tag.color} />
-                ))}
-              </div>
+            <CardContent className="pt-0 divide-y">
+              <SpecRow label="Power Capacity" value={berth.powerCapacity} />
+              <SpecRow label="Voltage" value={berth.voltage} />
+              <SpecRow label="Cleat Type" value={berth.cleatType} />
+              <SpecRow label="Cleat Capacity" value={berth.cleatCapacity} />
+              <SpecRow label="Bollard Type" value={berth.bollardType} />
+              <SpecRow label="Bollard Capacity" value={berth.bollardCapacity} />
             </CardContent>
           </Card>
-        )}
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium">Tenure & Pricing</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0 divide-y">
+              <SpecRow
+                label="Tenure Type"
+                value={berth.tenureType === 'permanent' ? 'Permanent' : 'Fixed Term'}
+              />
+              {berth.tenureType === 'fixed_term' && (
+                <>
+                  <SpecRow label="Years" value={berth.tenureYears} />
+                  <SpecRow label="Start Date" value={berth.tenureStartDate} />
+                  <SpecRow label="End Date" value={berth.tenureEndDate} />
+                </>
+              )}
+              <SpecRow label="Price" value={price} />
+            </CardContent>
+          </Card>
+
+          {berth.tags.length > 0 && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-medium">Tags</CardTitle>
+              </CardHeader>
+              <CardContent className="pt-0">
+                <div className="flex flex-wrap gap-1.5">
+                  {berth.tags.map((tag) => (
+                    <TagBadge key={tag.id} name={tag.name} color={tag.color} />
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
       </div>
     </div>
   );