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>
2026-05-02 00:01:33 +02:00
parent 886119cbde
commit ba5fb6db5e
21 changed files with 10995 additions and 112 deletions
--- a/src/components/documents/documents-hub.tsx
+++ b/src/components/documents/documents-hub.tsx
@@ -76,10 +76,11 @@ const STATUS_PILL_MAP: Record<string, StatusPillStatus> = {

 interface DocumentsHubProps {
  portSlug: string;
+  initialTab?: DocumentsHubTab;
 }

-export function DocumentsHub({ portSlug }: DocumentsHubProps) {
-  const [tab, setTab] = useState<DocumentsHubTab>('all');
+export function DocumentsHub({ portSlug, initialTab = 'all' }: DocumentsHubProps) {
+  const [tab, setTab] = useState<DocumentsHubTab>(initialTab);
  const [search, setSearch] = useState('');
  const [typeFilter, setTypeFilter] = useState<string>('all');
  const [signatureOnly, setSignatureOnly] = useState(true);
--- a/src/components/interests/interest-detail-header.tsx
+++ b/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}
--- a/src/components/interests/interest-outcome-dialog.tsx
+++ b/src/components/interests/interest-outcome-dialog.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Loader2, Trophy, XCircle } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { apiFetch } from '@/lib/api/client';
+import { type InterestOutcome } from '@/lib/validators/interests';
+
+const OUTCOME_LABELS: Record<InterestOutcome, string> = {
+  won: 'Won',
+  lost_other_marina: 'Lost — went to another marina',
+  lost_unqualified: 'Lost — unqualified',
+  lost_no_response: 'Lost — no response',
+  cancelled: 'Cancelled',
+};
+
+const LOST_OUTCOMES: InterestOutcome[] = [
+  'lost_other_marina',
+  'lost_unqualified',
+  'lost_no_response',
+  'cancelled',
+];
+
+interface Props {
+  interestId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Determines which outcomes are offered. 'won' opens with just the Won option preselected. */
+  mode: 'won' | 'lost';
+}
+
+export function InterestOutcomeDialog({ interestId, open, onOpenChange, mode }: Props) {
+  const queryClient = useQueryClient();
+  const choices: InterestOutcome[] = mode === 'won' ? ['won'] : LOST_OUTCOMES;
+  const [outcome, setOutcome] = useState<InterestOutcome>(choices[0]!);
+  const [reason, setReason] = useState('');
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      apiFetch(`/api/v1/interests/${interestId}/outcome`, {
+        method: 'POST',
+        body: { outcome, reason: reason || undefined },
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['interests', interestId] });
+      queryClient.invalidateQueries({ queryKey: ['interests'] });
+      onOpenChange(false);
+      setReason('');
+    },
+  });
+
+  function handleOpenChange(next: boolean) {
+    if (!next) {
+      setReason('');
+      setOutcome(choices[0]!);
+    }
+    onOpenChange(next);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {mode === 'won' ? (
+              <Trophy className="h-4 w-4 text-emerald-600" />
+            ) : (
+              <XCircle className="h-4 w-4 text-rose-600" />
+            )}
+            {mode === 'won' ? 'Mark interest as won' : 'Close interest as lost'}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {mode === 'lost' ? (
+            <div className="space-y-1">
+              <Label>Reason</Label>
+              <Select value={outcome} onValueChange={(v) => setOutcome(v as InterestOutcome)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {LOST_OUTCOMES.map((o) => (
+                    <SelectItem key={o} value={o}>
+                      {OUTCOME_LABELS[o]}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : null}
+
+          <div className="space-y-1">
+            <Label htmlFor="outcome-reason">Notes (optional)</Label>
+            <Textarea
+              id="outcome-reason"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              placeholder={
+                mode === 'won'
+                  ? 'Anything notable about the win? (visible in timeline + reports)'
+                  : 'What happened? (visible in timeline + reports)'
+              }
+              rows={3}
+            />
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            This will move the interest to <strong>Completed</strong> and stamp the outcome. You can
+            reopen it later.
+          </p>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => handleOpenChange(false)}
+            disabled={mutation.isPending}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => mutation.mutate()}
+            disabled={mutation.isPending}
+            className={
+              mode === 'won'
+                ? 'bg-emerald-600 hover:bg-emerald-700'
+                : 'bg-rose-600 hover:bg-rose-700'
+            }
+          >
+            {mutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {mode === 'won' ? 'Mark as won' : 'Close as lost'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/components/interests/interest-tabs.tsx
+++ b/src/components/interests/interest-tabs.tsx
@@ -1,8 +1,10 @@
 'use client';

+import Link from 'next/link';
+import { useParams } from 'next/navigation';
 import { format, formatDistanceToNowStrict } from 'date-fns';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { CheckCircle2, Circle, FileSignature, Send, Wallet } from 'lucide-react';
+import { CheckCircle2, Circle, FileSignature, Plus, Send, Wallet } from 'lucide-react';

 import type { DetailTab } from '@/components/shared/detail-layout';
 import { Button } from '@/components/ui/button';
@@ -122,6 +124,8 @@ interface MilestoneSectionProps {
  status: string | null;
  onAdvance: (stage: string) => void;
  isPending: boolean;
+  /** Extra nodes (e.g. "Create deposit invoice" link) rendered below the steps. */
+  footer?: React.ReactNode;
 }

 /**
@@ -139,6 +143,7 @@ function MilestoneSection({
  status,
  onAdvance,
  isPending,
+  footer,
 }: MilestoneSectionProps) {
  const firstUnsetIdx = steps.findIndex((s) => !s.date);

@@ -209,6 +214,7 @@ function MilestoneSection({
          );
        })}
      </ol>
+      {footer ? <div className="mt-3 border-t pt-3 text-xs">{footer}</div> : null}
    </section>
  );
 }
@@ -220,6 +226,8 @@ function OverviewTab({
  interestId: string;
  interest: InterestTabsOptions['interest'];
 }) {
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
  const mutation = useInterestPatch(interestId);
  const stageMutation = useStageMutation(interestId);
  const save = (field: InterestPatchField) => async (next: string | null) => {
@@ -271,6 +279,17 @@ function OverviewTab({
              actionLabel: 'Mark deposit received',
            },
          ]}
+          footer={
+            !interest.dateDepositReceived ? (
+              <Link
+                href={`/${portSlug}/invoices/new?interestId=${interestId}&kind=deposit`}
+                className="inline-flex items-center gap-1.5 text-foreground/80 hover:text-foreground"
+              >
+                <Plus className="size-3.5" />
+                Create deposit invoice
+              </Link>
+            ) : null
+          }
        />
        <MilestoneSection
          title="Contract"
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -12,6 +12,7 @@ import {
  Building2,
  Receipt,
  FileText,
+  FileSignature,
  FolderOpen,
  Mail,
  Bell,
@@ -97,6 +98,7 @@ function buildNavSections(portSlug: string | undefined): NavSection[] {
      marinaRequired: true,
      items: [
        { href: `${base}/documents`, label: 'Documents', icon: FileText },
+        { href: `${base}/documents/eoi`, label: 'EOI queue', icon: FileSignature },
        { href: `${base}/documents/files`, label: 'Files', icon: FolderOpen },
      ],
    },