feat(sales): EOI queue route + invoice→deposit auto-advance + won/lost outcomes

Three independent strengthenings of the sales spine that the prior coherence
sweep made it possible to do cleanly.

  1. EOI queue page

     - Sidebar entry under Documents → "EOI queue".
     - Route /[port]/documents/eoi renders DocumentsHub with the existing
       eoi_queue tab pre-selected (filters in-flight EOIs only).
     - .gitignore: tightened root-only `eoi/` ignore so the documents/eoi
       route is no longer silently excluded.

  2. Invoice ↔ deposit link

     - invoices.interestId (FK, ON DELETE SET NULL) + invoices.kind
       ('general' | 'deposit'). Indexed on (port_id, interest_id).
     - createInvoiceSchema requires interestId when kind === 'deposit';
       the service validates the linked interest belongs to the same port
       before insert.
     - recordPayment auto-advances pipelineStage to deposit_10pct (via
       advanceStageIfBehind) when a paid invoice is kind=deposit and has
       an interestId. No-op if the interest is already further along.
     - "Create deposit invoice" link added to the Deposit milestone on the
       interest detail. Links to /invoices/new?interestId=…&kind=deposit;
       the form prefills the billing entity from the linked interest's
       client and shows a context banner.

  3. Won / lost terminal outcomes

     - interests.outcome ('won' | 'lost_other_marina' | 'lost_unqualified'
       | 'lost_no_response' | 'cancelled') + outcomeReason text +
       outcomeAt timestamp. Indexed on (port_id, outcome).
     - setInterestOutcome / clearInterestOutcome services + POST/DELETE
       /api/v1/interests/:id/outcome endpoints (gated by change_stage
       permission). Setting an outcome moves the interest to `completed`
       in the same write; clearing reopens to `in_communication` (or a
       caller-specified stage).
     - Mark Won / Mark Lost icon buttons on the interest detail header,
       plus an outcome badge that replaces the stage pill once a terminal
       outcome is set, plus a Reopen button.
     - Funnel + dashboard math updated to exclude lost/cancelled outcomes
       from active calculations (KPIs.activeInterests, pipelineValueUsd,
       getPipelineCounts, computePipelineFunnel, getRevenueForecast).
       The funnel now also returns a `lost` summary so callers can
       surface leakage without polluting conversion percentages.

Schema changes shipped via 0019_lazy_vampiro.sql; applied to dev DB
manually via psql because drizzle-kit push hits a pre-existing zod
parsing issue on the companies index. Dev server may need a restart
to flush prepared-statement caches.

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

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

src/components/interests/interest-detail-header.tsx

@@ -2,43 +2,30 @@
 
 import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { Pencil, Archive, RotateCcw, TrendingUp } from 'lucide-react';
+import { Pencil, Archive, RotateCcw, Trophy, XCircle, RefreshCcw } from 'lucide-react';
 import Link from 'next/link';
 
-import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { TagBadge } from '@/components/shared/tag-badge';
 import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog';
 import { DetailHeaderStrip } from '@/components/shared/detail-header-strip';
 import { PermissionGate } from '@/components/shared/permission-gate';
 import { InterestForm } from '@/components/interests/interest-form';
-import { InterestStagePicker } from '@/components/interests/interest-stage-picker';
+import { InlineStagePicker } from '@/components/interests/inline-stage-picker';
+import { InterestOutcomeDialog } from '@/components/interests/interest-outcome-dialog';
 import { apiFetch } from '@/lib/api/client';
+import { cn } from '@/lib/utils';
 
-const STAGE_LABELS: Record<string, string> = {
-  open: 'Open',
-  details_sent: 'Details Sent',
-  in_communication: 'In Communication',
-  visited: 'Visited',
-  signed_eoi_nda: 'Signed EOI/NDA',
-  deposit_10pct: 'Deposit 10%',
-  contract: 'Contract',
-  completed: 'Completed',
-};
-
-const STAGE_COLORS: Record<string, string> = {
-  open: 'bg-slate-100 text-slate-700',
-  details_sent: 'bg-blue-100 text-blue-700',
-  in_communication: 'bg-sky-100 text-sky-700',
-  visited: 'bg-violet-100 text-violet-700',
-  signed_eoi_nda: 'bg-amber-100 text-amber-700',
-  deposit_10pct: 'bg-orange-100 text-orange-700',
-  contract: 'bg-green-100 text-green-700',
-  completed: 'bg-emerald-100 text-emerald-700',
+const OUTCOME_BADGE: Record<string, { label: string; className: string }> = {
+  won: { label: 'Won', className: 'bg-emerald-100 text-emerald-700' },
+  lost_other_marina: { label: 'Lost — other marina', className: 'bg-rose-100 text-rose-700' },
+  lost_unqualified: { label: 'Lost — unqualified', className: 'bg-rose-100 text-rose-700' },
+  lost_no_response: { label: 'Lost — no response', className: 'bg-rose-100 text-rose-700' },
+  cancelled: { label: 'Cancelled', className: 'bg-slate-200 text-slate-700' },
 };
 
 const CATEGORY_LABELS: Record<string, string> = {
-  general_interest: 'General Interest',
+  general_interest: 'General',
   specific_qualified: 'Specific Qualified',
   hot_lead: 'Hot Lead',
 };
@@ -58,6 +45,8 @@ interface InterestDetailHeaderProps {
     reminderEnabled: boolean;
     reminderDays: number | null;
     archivedAt: string | null;
+    outcome?: string | null;
+    outcomeReason?: string | null;
     tags?: Array<{ id: string; name: string; color: string }>;
   };
 }
@@ -66,9 +55,20 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
   const queryClient = useQueryClient();
   const [editOpen, setEditOpen] = useState(false);
   const [archiveOpen, setArchiveOpen] = useState(false);
-  const [stageOpen, setStageOpen] = useState(false);
+  const [outcomeDialog, setOutcomeDialog] = useState<null | 'won' | 'lost'>(null);
 
   const isArchived = !!interest.archivedAt;
+  const outcomeBadge = interest.outcome ? OUTCOME_BADGE[interest.outcome] : null;
+  const isClosed = !!interest.outcome;
+
+  const reopenMutation = useMutation({
+    mutationFn: () =>
+      apiFetch(`/api/v1/interests/${interest.id}/outcome`, { method: 'DELETE', body: {} }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['interests', interest.id] });
+      queryClient.invalidateQueries({ queryKey: ['interests'] });
+    },
+  });
 
   const archiveMutation = useMutation({
     mutationFn: () => apiFetch(`/api/v1/interests/${interest.id}`, { method: 'DELETE' }),
@@ -88,13 +88,40 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
     },
   });
 
+  const meta: Array<{ key: string; node: React.ReactNode }> = [];
+  if (interest.berthMooringNumber) {
+    meta.push({
+      key: 'berth',
+      node: (
+        <Link
+          href={`/${portSlug}/berths/${interest.berthId}`}
+          className="text-foreground hover:underline"
+        >
+          Berth {interest.berthMooringNumber}
+        </Link>
+      ),
+    });
+  }
+  if (interest.leadCategory) {
+    meta.push({
+      key: 'cat',
+      node: <span>{CATEGORY_LABELS[interest.leadCategory] ?? interest.leadCategory}</span>,
+    });
+  }
+  if (interest.source) {
+    meta.push({
+      key: 'src',
+      node: <span className="capitalize">{interest.source}</span>,
+    });
+  }
+
   return (
     <>
       <DetailHeaderStrip>
-        <div className="flex items-start gap-3 flex-wrap">
-          <div className="flex-1 min-w-0">
+        <div className="flex items-start gap-2">
+          <div className="min-w-0 flex-1 space-y-1.5">
             <div className="flex items-center gap-2 flex-wrap">
-              <h1 className="text-2xl font-bold text-foreground">
+              <h1 className="truncate text-lg font-bold text-foreground sm:text-xl">
                 {interest.clientName ?? 'Unknown Client'}
               </h1>
               {isArchived && (
@@ -102,42 +129,52 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
                   Archived
                 </Badge>
               )}
-              <span
-                className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-medium ${STAGE_COLORS[interest.pipelineStage] ?? 'bg-gray-100 text-gray-700'}`}
-              >
-                {STAGE_LABELS[interest.pipelineStage] ?? interest.pipelineStage}
-              </span>
+              {outcomeBadge ? (
+                <span
+                  className={cn(
+                    'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
+                    outcomeBadge.className,
+                  )}
+                  title={interest.outcomeReason ?? undefined}
+                >
+                  {outcomeBadge.label}
+                </span>
+              ) : (
+                <PermissionGate
+                  resource="interests"
+                  action="change_stage"
+                  fallback={
+                    <span className="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-700">
+                      {interest.pipelineStage}
+                    </span>
+                  }
+                >
+                  <InlineStagePicker
+                    interestId={interest.id}
+                    currentStage={interest.pipelineStage}
+                    className="-ml-2.5"
+                  />
+                </PermissionGate>
+              )}
             </div>
 
-            <div className="flex items-center gap-4 mt-2 flex-wrap text-sm text-muted-foreground">
-              {interest.berthMooringNumber && (
-                <span>
-                  Berth:{' '}
-                  <Link
-                    href={`/${portSlug}/berths/${interest.berthId}`}
-                    className="text-foreground hover:underline"
-                  >
-                    {interest.berthMooringNumber}
-                  </Link>
-                </span>
-              )}
-              {interest.leadCategory && (
-                <span>
-                  Category:{' '}
-                  <span className="text-foreground">
-                    {CATEGORY_LABELS[interest.leadCategory] ?? interest.leadCategory}
+            {meta.length > 0 ? (
+              <p className="text-xs text-muted-foreground sm:text-sm">
+                {meta.map((m, i) => (
+                  <span key={m.key}>
+                    {i > 0 ? (
+                      <span aria-hidden className="mx-1.5">
+                        ·
+                      </span>
+                    ) : null}
+                    {m.node}
                   </span>
-                </span>
-              )}
-              {interest.source && (
-                <span>
-                  Source: <span className="text-foreground capitalize">{interest.source}</span>
-                </span>
-              )}
-            </div>
+                ))}
+              </p>
+            ) : null}
 
             {interest.tags && interest.tags.length > 0 && (
-              <div className="flex flex-wrap gap-1 mt-2">
+              <div className="flex flex-wrap gap-1 pt-0.5">
                 {interest.tags.map((tag) => (
                   <TagBadge key={tag.id} name={tag.name} color={tag.color} />
                 ))}
@@ -145,52 +182,101 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
             )}
           </div>
 
-          {/* Actions */}
-          <div className="flex items-center gap-2 flex-wrap">
-            <PermissionGate resource="interests" action="edit">
-              <Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
-                <Pencil className="mr-1.5 h-3.5 w-3.5" />
-                Edit
-              </Button>
-            </PermissionGate>
+          {/* Top-right icon-only actions — no stacking, no labels eating room. */}
+          <div className="flex shrink-0 items-center gap-0.5">
             <PermissionGate resource="interests" action="change_stage">
-              <Button variant="outline" size="sm" onClick={() => setStageOpen(true)}>
-                <TrendingUp className="mr-1.5 h-3.5 w-3.5" />
-                Change Stage
-              </Button>
+              {isClosed ? (
+                <button
+                  type="button"
+                  onClick={() => reopenMutation.mutate()}
+                  disabled={reopenMutation.isPending}
+                  aria-label="Reopen interest"
+                  title="Reopen interest"
+                  className={cn(
+                    'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
+                    'hover:bg-foreground/5 hover:text-foreground',
+                    'disabled:opacity-50',
+                  )}
+                >
+                  <RefreshCcw className="size-4" />
+                </button>
+              ) : (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => setOutcomeDialog('won')}
+                    aria-label="Mark as won"
+                    title="Mark as won"
+                    className={cn(
+                      'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
+                      'hover:bg-emerald-50 hover:text-emerald-700',
+                    )}
+                  >
+                    <Trophy className="size-4" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setOutcomeDialog('lost')}
+                    aria-label="Close as lost"
+                    title="Close as lost"
+                    className={cn(
+                      'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
+                      'hover:bg-rose-50 hover:text-rose-700',
+                    )}
+                  >
+                    <XCircle className="size-4" />
+                  </button>
+                </>
+              )}
+            </PermissionGate>
+            <PermissionGate resource="interests" action="edit">
+              <button
+                type="button"
+                onClick={() => setEditOpen(true)}
+                aria-label="Edit interest"
+                title="Edit interest"
+                className={cn(
+                  'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
+                  'hover:bg-foreground/5 hover:text-foreground',
+                )}
+              >
+                <Pencil className="size-4" />
+              </button>
             </PermissionGate>
             <PermissionGate resource="interests" action="delete">
-              <Button variant="outline" size="sm" onClick={() => setArchiveOpen(true)}>
-                {isArchived ? (
-                  <>
-                    <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
-                    Restore
-                  </>
-                ) : (
-                  <>
-                    <Archive className="mr-1.5 h-3.5 w-3.5" />
-                    Archive
-                  </>
+              <button
+                type="button"
+                onClick={() => setArchiveOpen(true)}
+                aria-label={isArchived ? 'Restore interest' : 'Archive interest'}
+                title={isArchived ? 'Restore interest' : 'Archive interest'}
+                className={cn(
+                  'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
+                  'hover:bg-foreground/5',
+                  isArchived ? 'hover:text-foreground' : 'hover:text-destructive',
                 )}
-              </Button>
+              >
+                {isArchived ? <RotateCcw className="size-4" /> : <Archive className="size-4" />}
+              </button>
             </PermissionGate>
           </div>
         </div>
       </DetailHeaderStrip>
 
+      {outcomeDialog && (
+        <InterestOutcomeDialog
+          interestId={interest.id}
+          mode={outcomeDialog}
+          open={outcomeDialog !== null}
+          onOpenChange={(open) => !open && setOutcomeDialog(null)}
+        />
+      )}
+
       <InterestForm
         open={editOpen}
         onOpenChange={setEditOpen}
         interest={interest as unknown as Parameters<typeof InterestForm>[0]['interest']}
       />
 
-      <InterestStagePicker
-        open={stageOpen}
-        onOpenChange={setStageOpen}
-        interestId={interest.id}
-        currentStage={interest.pipelineStage}
-      />
-
       <ArchiveConfirmDialog
         open={archiveOpen}
         onOpenChange={setArchiveOpen}