add the invoices ui over the invoiceshelf sidecar

a /invoices workspace screen replicating the parts of the invoiceshelf web ui
that are actually used: dashboard, invoices, estimates, recurring invoices,
payments, expenses, customers, items and reports.

one document editor serves invoices, estimates and recurring invoices — they
share the line-item table, the discounts, the taxes and the totals, and differ
only in a header strip. the arithmetic is a port of upstream's
use-document-calculations, rounding points included, because the server
re-validates the totals it is sent. money is integer minor units throughout and
is converted to major units at the edges only.

selection and editor state live in the url (`/invoices/:section`, `?selected=`,
`?edit=`), so the nav highlight is derived rather than held, back closes an
editor instead of leaving the screen, and a half-written form survives a reload.

sending a document is behind an explicit confirmation — it emails the customer.

built against the running 2.4.2 instance rather than the 3.0 checkout in
_references; the two differ materially. typechecked, not yet exercised in a
browser.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/apps/officer-web/App.tsx

@@ -46,6 +46,8 @@ export function App() {
             <Route path="/headscale/:section" element={<Dashboard.HeadscaleScreen />} />
             <Route path="/transmission" element={<Dashboard.TransmissionScreen />} />
             <Route path="/transmission/:section" element={<Dashboard.TransmissionScreen />} />
+            <Route path="/invoices" element={<Dashboard.InvoicesScreen />} />
+            <Route path="/invoices/:section" element={<Dashboard.InvoicesScreen />} />
             <Route path="/system-monitor" element={<Dashboard.SystemMonitorScreen />} />
             <Route path="/activity" element={<Dashboard.ActivityScreen />} />
 

src/apps/officer-web/Screens/Dashboard/Invoices/InvoicesScreen.tsx

@@ -0,0 +1,58 @@
+import type { LayoutNode } from 'officerdev';
+import { useEffect, useMemo } from 'react';
+import { Navigate, useParams } from 'react-router';
+import { DEFAULT_INVOICES_SECTION, invoicesSectionPath, isInvoicesSection, WorkspaceView } from 'officerdev';
+import { useDashboardState } from 'state/useDashboardState';
+import { defaultLayout } from './defaultLayout';
+
+// /invoices uses the Workspace/Panel system (like /transmission and /headscale): the section nav on the
+// left, the section itself on the right. Both panels talk to the officer-invoiceshelf sidecar through the
+// /api/invoiceshelf auth proxy — the InvoiceShelf URL, its Sanctum token and the company header live in the
+// sidecar and never reach the browser.
+//
+// The open section is :section in the URL; list filters, the selected record and the open editor are query
+// params. So the panels read the URL rather than passing state to each other, and this screen is the single
+// place that decides what an absent or bogus section means.
+
+const ALLOWED_APP_TYPES = new Set<string | null>(['invoices-nav', 'invoices-view', null]);
+
+function normalizeLayout(node: LayoutNode): LayoutNode {
+  if (node.type === 'panel') {
+    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'invoices-view' };
+  }
+  const children = node.children.map((c) => {
+    const fixed = normalizeLayout(c.node);
+    return fixed === c.node ? c : { ...c, node: fixed };
+  });
+  const changed = children.some((c, i) => c !== node.children[i]);
+  return changed ? { ...node, children } : node;
+}
+
+export const InvoicesScreen = () => {
+  const { section } = useParams();
+  const rawWorkspace = useDashboardState<LayoutNode>('screens/invoices', defaultLayout);
+
+  const workspace = useMemo(() => {
+    const fixed = normalizeLayout(rawWorkspace.value);
+    if (fixed === rawWorkspace.value) return rawWorkspace;
+    return { ...rawWorkspace, value: fixed };
+  }, [rawWorkspace]);
+
+  useEffect(() => {
+    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
+      rawWorkspace.setValue(workspace.value);
+    }
+  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+
+  // Bare /invoices, or a section that doesn't exist, resolves to a canonical URL rather than rendering a
+  // default while the address bar says something else — the nav highlight is derived from the URL.
+  if (!isInvoicesSection(section)) {
+    return <Navigate to={invoicesSectionPath(DEFAULT_INVOICES_SECTION)} replace />;
+  }
+
+  return (
+    <div className="h-full w-full pt-2">
+      <WorkspaceView workspace={workspace} locked />
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Invoices/defaultLayout.ts

@@ -0,0 +1,11 @@
+import type { LayoutNode } from 'officerdev';
+
+export const defaultLayout: LayoutNode = {
+  type: 'group',
+  id: 'invoices-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'invoices-nav', appType: 'invoices-nav' }, size: 20 },
+    { node: { type: 'panel', id: 'invoices-view', appType: 'invoices-view' }, size: 80 },
+  ],
+};

src/apps/officer-web/Screens/Dashboard/Invoices/index.tsx

@@ -0,0 +1 @@
+export * from './InvoicesScreen';

src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx

@@ -136,6 +136,7 @@ import {
   Radio,
   Network,
   ArrowDownUp,
+  Receipt,
 } from 'lucide-react';
 
 export const ALL_DOCK_ITEMS: DockItem[] = [
@@ -147,6 +148,7 @@ export const ALL_DOCK_ITEMS: DockItem[] = [
   { label: 'Soulseek', to: '/soulseek', image: '/slskd.png', color: '#ffffff' },
   { label: 'Headscale', to: '/headscale', icon: Network, color: '#818cf8' },
   { label: 'Transmission', to: '/transmission', icon: ArrowDownUp, color: '#e11d48' },
+  { label: 'Invoices', to: '/invoices', icon: Receipt, color: '#0891b2' },
   { label: 'Editor', to: '/code-editor', icon: Code, color: '#a78bfa' },
   { label: 'Plans', to: '/plans', icon: FileText, color: '#f472b6' },
   { label: 'Jobs', to: '/jobs', icon: Workflow, color: '#14b8a6' },

src/apps/officer-web/Screens/Dashboard/index.tsx

@@ -14,6 +14,7 @@ export * from './Music';
 export * from './Soulseek';
 export * from './Headscale';
 export * from './Transmission';
+export * from './Invoices';
 export * from './SystemMonitor';
 export * from './Activity';
 export * from './CodeEditor';

src/apps/officer-web/state/usePageTitle.ts

@@ -19,6 +19,7 @@ const RULES: TitleRule[] = [
   { match: (p) => p.startsWith('/soulseek'), title: 'Soulseek' },
   { match: (p) => p.startsWith('/headscale'), title: 'Headscale' },
   { match: (p) => p.startsWith('/transmission'), title: 'Transmission' },
+  { match: (p) => p.startsWith('/invoices'), title: 'Invoices' },
   { match: (p) => p.startsWith('/system-monitor'), title: 'System Monitor' },
   { match: (p) => p.startsWith('/code-editor'), title: 'Code Editor' },
   { match: (p) => p.startsWith('/task-logs'), title: 'Task Logs' },