feat: DataTable scrollable layout with 200+ mock exchanges

Make Dashboard table fill viewport height with sticky header/footer
and internal scrolling. Expand mock exchange data from 15 to 200
records and Inventory showcase from 5 to 500 records.

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

src/mocks/exchanges.ts

@@ -313,3 +313,74 @@ export const exchanges: Exchange[] = [
     ],
   },
 ]
+
+// ── Generate additional exchanges to reach ~200 total ────────────────────────
+
+const GEN_ROUTES = [
+  'order-intake', 'payment-validate', 'order-enrichment', 'shipment-dispatch',
+  'payment-process', 'shipment-track', 'inventory-sync', 'notification-send',
+  'audit-log', 'customer-update', 'refund-process', 'invoice-generate',
+]
+const GEN_ROUTE_GROUPS = [
+  'order-flow', 'payment-flow', 'shipment-flow', 'inventory-flow',
+  'notification-flow', 'audit-flow', 'customer-flow', 'billing-flow',
+]
+const GEN_AGENTS = ['prod-1', 'prod-2', 'prod-3', 'prod-4']
+const GEN_STATUSES: Exchange['status'][] = [
+  'completed', 'completed', 'completed', 'completed', 'completed',
+  'completed', 'failed', 'warning', 'running',
+]
+const GEN_PROCESSORS: ProcessorData[][] = [
+  [
+    { name: 'from(jms:queue)', type: 'consumer', durationMs: 4, status: 'ok', startMs: 0 },
+    { name: 'unmarshal(json)', type: 'transform', durationMs: 6, status: 'ok', startMs: 4 },
+    { name: 'validate(schema)', type: 'process', durationMs: 10, status: 'ok', startMs: 10 },
+    { name: 'to(target)', type: 'to', durationMs: 15, status: 'ok', startMs: 20 },
+  ],
+  [
+    { name: 'from(jms:queue)', type: 'consumer', durationMs: 5, status: 'ok', startMs: 0 },
+    { name: 'enrich(external-api)', type: 'enrich', durationMs: 120, status: 'slow', startMs: 5 },
+    { name: 'to(target)', type: 'to', durationMs: 20, status: 'ok', startMs: 125 },
+  ],
+  [
+    { name: 'from(jms:queue)', type: 'consumer', durationMs: 3, status: 'ok', startMs: 0 },
+    { name: 'to(external-gateway)', type: 'to', durationMs: 400, status: 'fail', startMs: 3 },
+  ],
+]
+const GEN_ERRORS = [
+  { msg: 'org.apache.camel.CamelExecutionException: Timeout after 5000ms', cls: 'org.apache.camel.CamelExecutionException' },
+  { msg: 'java.sql.SQLTransientConnectionException: Connection pool exhausted', cls: 'java.sql.SQLTransientConnectionException' },
+  { msg: 'org.apache.camel.component.http.HttpOperationFailedException: HTTP 502 Bad Gateway', cls: 'org.apache.camel.component.http.HttpOperationFailedException' },
+]
+
+const BASE_TIME = new Date('2026-03-18T08:00:00').getTime()
+
+for (let i = 0; i < 185; i++) {
+  const idx = exchanges.length
+  const status = GEN_STATUSES[i % GEN_STATUSES.length]
+  const route = GEN_ROUTES[i % GEN_ROUTES.length]
+  const routeGroup = GEN_ROUTE_GROUPS[i % GEN_ROUTE_GROUPS.length]
+  const isFailed = status === 'failed'
+  const durationMs = isFailed
+    ? 1000 + ((i * 37) % 4000)
+    : status === 'running'
+      ? 10000 + ((i * 53) % 20000)
+      : 30 + ((i * 73) % 400)
+  const err = isFailed ? GEN_ERRORS[i % GEN_ERRORS.length] : undefined
+
+  exchanges.push({
+    id: `E-2026-03-18-${String(idx + 200).padStart(5, '0')}`,
+    orderId: `OP-${80000 + idx}`,
+    customer: `CUST-${10000 + ((i * 131) % 90000)}`,
+    route,
+    routeGroup,
+    status,
+    durationMs,
+    timestamp: new Date(BASE_TIME - i * 2 * 60 * 1000),
+    correlationId: `cmr-${i.toString(16).padStart(8, '0')}-gen`,
+    agent: GEN_AGENTS[i % GEN_AGENTS.length],
+    ...(err ? { errorMessage: err.msg, errorClass: err.cls } : {}),
+    processors: GEN_PROCESSORS[i % GEN_PROCESSORS.length].map((p) => ({ ...p })),
+    ...(i % 3 === 0 ? { correlationGroup: `${routeGroup}-${String(Math.floor(i / 3)).padStart(3, '0')}` } : {}),
+  })
+}