feat(documents): wire folder sidebar + breadcrumb + In-progress tab

Documents hub now opens with the folder tree on the left and a
breadcrumb on top. Folder selection is its own state — undefined =
"All", null = "Root only", string = specific folder. Filter pushes
through to /api/v1/documents via folderId query param.

Drops the "Signature-based only" pill — it defaulted to true and
silently hid informational documents, which confused new reps. With
folders the rep organises by location, not by signature-vs-not.

Adds an "In progress" hub tab covering status IN (draft, sent,
partially_signed) for the everyday "what's in flight" view.

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

src/components/documents/documents-hub.tsx

@@ -18,11 +18,14 @@ import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { StatusPill, type StatusPillStatus } from '@/components/ui/status-pill';
 import { EmptyState } from '@/components/ui/empty-state';
 import { PageHeader } from '@/components/shared/page-header';
+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';
-import { cn } from '@/lib/utils';
 import { documentsHubTabs, type DocumentsHubTab } from '@/lib/validators/documents';
+import { FolderActionsMenu } from './folder-actions-menu';
+import { FolderBreadcrumb } from './folder-breadcrumb';
+import { FolderTreeSidebar } from './folder-tree-sidebar';
 
 interface HubDoc {
   id: string;
@@ -35,6 +38,7 @@ interface HubDoc {
 
 interface HubCounts {
   all: number;
+  in_progress: number;
   eoi_queue: number;
   awaiting_them: number;
   awaiting_me: number;
@@ -44,6 +48,7 @@ interface HubCounts {
 
 const TAB_LABELS: Record<DocumentsHubTab, string> = {
   all: 'All',
+  in_progress: 'In progress',
   eoi_queue: 'EOI queue',
   awaiting_them: 'Awaiting them',
   awaiting_me: 'Awaiting me',
@@ -92,7 +97,9 @@ 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);
+  // undefined = "All documents" (no folder filter), null = root only,
+  // string = a specific folder id.
+  const [selectedFolderId, setSelectedFolderId] = useState<string | null | undefined>(undefined);
   const [expandedDocId, setExpandedDocId] = useState<string | null>(null);
 
   const queryParams = useMemo(() => {
@@ -100,9 +107,11 @@ export function DocumentsHub({ portSlug, initialTab = 'all' }: DocumentsHubProps
     params.set('tab', tab);
     if (search) params.set('search', search);
     if (typeFilter && typeFilter !== 'all') params.set('documentType', typeFilter);
-    if (signatureOnly) params.set('signatureOnly', 'true');
+    if (selectedFolderId !== undefined) {
+      params.set('folderId', selectedFolderId ?? '');
+    }
     return params;
-  }, [tab, search, typeFilter, signatureOnly]);
+  }, [tab, search, typeFilter, selectedFolderId]);
 
   const { data: documents, isLoading } = usePaginatedQuery<HubDoc>({
     queryKey: ['documents', 'hub', queryParams.toString()],
@@ -130,6 +139,7 @@ export function DocumentsHub({ portSlug, initialTab = 'all' }: DocumentsHubProps
 
   const counts: HubCounts = countsResp?.data ?? {
     all: 0,
+    in_progress: 0,
     eoi_queue: 0,
     awaiting_them: 0,
     awaiting_me: 0,
@@ -208,7 +218,22 @@ export function DocumentsHub({ portSlug, initialTab = 'all' }: DocumentsHubProps
   };
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col sm:flex-row h-full">
+      <FolderTreeSidebar
+        selectedFolderId={selectedFolderId}
+        onSelect={setSelectedFolderId}
+        footer={
+          <PermissionGate resource="documents" action="manage_folders">
+            <FolderActionsMenu
+              selectedFolderId={selectedFolderId}
+              onAfterDelete={() => setSelectedFolderId(undefined)}
+            />
+          </PermissionGate>
+        }
+      />
+      <div className="flex-1 min-w-0 p-4 space-y-4">
+        <FolderBreadcrumb selectedFolderId={selectedFolderId} onSelect={setSelectedFolderId} />
+
         <PageHeader
           title="Documents"
           description="Track signing status, chase pending signers, and audit completion."
@@ -278,18 +303,6 @@ export function DocumentsHub({ portSlug, initialTab = 'all' }: DocumentsHubProps
               ))}
             </SelectContent>
           </Select>
-        <button
-          type="button"
-          onClick={() => setSignatureOnly((v) => !v)}
-          className={cn(
-            'rounded-full border px-3 py-1 text-xs transition-colors',
-            signatureOnly
-              ? 'border-brand-200 bg-brand-50 text-brand-700'
-              : 'border-slate-200 bg-white text-muted-foreground',
-          )}
-        >
-          Signature-based only
-        </button>
         </div>
 
         {isLoading ? (
@@ -322,5 +335,6 @@ export function DocumentsHub({ portSlug, initialTab = 'all' }: DocumentsHubProps
           <ul className="rounded-md border bg-white shadow-xs">{documents.map(renderRow)}</ul>
         )}
       </div>
+    </div>
   );
 }

src/lib/services/documents.service.ts

@@ -62,6 +62,13 @@ function buildHubTabFilters(
   if (!tab || tab === 'all') return filters;
 
   switch (tab) {
+    case 'in_progress':
+      // All document types currently in-flight — the everyday "what's in flight" view.
+      filters.push(
+        inArray(documents.status, ['draft', 'sent', 'partially_signed']),
+        sql`${documents.status} != 'expired'`,
+      );
+      break;
     case 'eoi_queue':
       // EOI documents currently in-flight (drafted, sent, or partially signed).
       // Used by the dedicated tab on the documents hub to triage EOI signing
@@ -288,6 +295,7 @@ export async function listDealDocumentsForBerth(
 
 export interface HubTabCounts {
   all: number;
+  in_progress: number;
   eoi_queue: number;
   awaiting_them: number;
   awaiting_me: number;
@@ -313,8 +321,10 @@ export async function getHubTabCounts(
     return row?.count ?? 0;
   }
 
-  const [all, eoi_queue, awaiting_them, awaiting_me, completed, expired] = await Promise.all([
+  const [all, in_progress, eoi_queue, awaiting_them, awaiting_me, completed, expired] =
+    await Promise.all([
       tabCount('all'),
+      tabCount('in_progress'),
       tabCount('eoi_queue'),
       tabCount('awaiting_them'),
       tabCount('awaiting_me'),
@@ -322,7 +332,7 @@ export async function getHubTabCounts(
       tabCount('expired'),
     ]);
 
-  return { all, eoi_queue, awaiting_them, awaiting_me, completed, expired };
+  return { all, in_progress, eoi_queue, awaiting_them, awaiting_me, completed, expired };
 }
 
 // ─── Get by ID ────────────────────────────────────────────────────────────────

src/lib/validators/documents.ts

@@ -72,6 +72,7 @@ export type CreateDocumentWizardInput = z.infer<typeof createDocumentWizardSchem
 
 export const documentsHubTabs = [
   'all',
+  'in_progress',
   'eoi_queue',
   'awaiting_them',
   'awaiting_me',