From 474738a8947dbd5a8ef566cb514e08c633f2098c Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 30 Mar 2026 15:26:26 +0200
Subject: [PATCH] fix: resolve TypeScript strict mode errors failing CI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- StatusDot: status → variant (correct prop name)
- Badge: color="muted" → color="auto" (valid BadgeColor)
- AreaChart: remove stacked prop (not in AreaChartProps)
- DataTable: remove defaultSort prop (not in DataTableProps)
- TopError → ErrorRow with id field (DataTable requires T extends {id})
- slaCompliance: type assertion for runtime field not in TS schema
- PunchcardHeatmap Scatter shape: proper typing for custom renderer

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/DashboardTab/DashboardL1.tsx      | 7 +++----
 ui/src/pages/DashboardTab/DashboardL2.tsx      | 5 +++--
 ui/src/pages/DashboardTab/DashboardL3.tsx      | 3 +--
 ui/src/pages/DashboardTab/PunchcardHeatmap.tsx | 2 +-
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/ui/src/pages/DashboardTab/DashboardL1.tsx b/ui/src/pages/DashboardTab/DashboardL1.tsx
index 27fd2753..d3c38e03 100644
--- a/ui/src/pages/DashboardTab/DashboardL1.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL1.tsx
@@ -51,7 +51,7 @@ const APP_COLUMNS: Column<AppRow>[] = [
   {
     key: 'health',
     header: '',
-    render: (_, row) => <StatusDot status={row.health} />,
+    render: (_, row) => <StatusDot variant={row.health} />,
   },
   {
     key: 'appId',
@@ -142,7 +142,7 @@ function aggregateByApp(
 
     // SLA compliance: weighted average of per-route slaCompliance from backend
     const appSettings = settingsMap.get(appId);
-    const slaWeightedSum = routes.reduce((s, r) => s + (r.slaCompliance ?? 100) * r.exchangeCount, 0);
+    const slaWeightedSum = routes.reduce((s, r) => s + ((r as Record<string, unknown>).slaCompliance as number ?? 100) * r.exchangeCount, 0);
     const slaCompliance = totalExchanges > 0 ? slaWeightedSum / totalExchanges : 100;
 
     const errorCount = Math.round(totalFailed);
@@ -413,7 +413,7 @@ export default function DashboardL1() {
           <span className={styles.tableTitle}>Application Health</span>
           <div className={styles.tableRight}>
             <span className={styles.tableMeta}>{appRows.length} applications</span>
-            <Badge label="ALL" color="muted" />
+            <Badge label="ALL" color="auto" />
           </div>
         </div>
         <DataTable
@@ -431,7 +431,6 @@ export default function DashboardL1() {
             <AreaChart
               series={throughputByAppSeries}
               yLabel="msg/s"
-              stacked
               height={200}
               className={styles.chart}
             />
diff --git a/ui/src/pages/DashboardTab/DashboardL2.tsx b/ui/src/pages/DashboardTab/DashboardL2.tsx
index 79a51198..51cb0c69 100644
--- a/ui/src/pages/DashboardTab/DashboardL2.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL2.tsx
@@ -113,7 +113,9 @@ const ROUTE_COLUMNS: Column<RouteRow>[] = [
 
 // ── Top errors columns ──────────────────────────────────────────────────────
 
-const ERROR_COLUMNS: Column<TopError>[] = [
+type ErrorRow = TopError & { id: string };
+
+const ERROR_COLUMNS: Column<ErrorRow>[] = [
   {
     key: 'errorType',
     header: 'Error Type',
@@ -394,7 +396,6 @@ export default function DashboardL2() {
             <AreaChart
               series={throughputByRouteSeries}
               yLabel="msg/s"
-              stacked
               height={200}
               className={styles.chart}
             />
diff --git a/ui/src/pages/DashboardTab/DashboardL3.tsx b/ui/src/pages/DashboardTab/DashboardL3.tsx
index 83c94b75..034e7eae 100644
--- a/ui/src/pages/DashboardTab/DashboardL3.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL3.tsx
@@ -56,7 +56,7 @@ const PROCESSOR_COLUMNS: Column<ProcessorRow>[] = [
     key: 'processorType',
     header: 'Type',
     sortable: true,
-    render: (_, row) => <Badge label={row.processorType} color="muted" />,
+    render: (_, row) => <Badge label={row.processorType} color="auto" />,
   },
   {
     key: 'totalCount',
@@ -411,7 +411,6 @@ export default function DashboardL3() {
           columns={PROCESSOR_COLUMNS}
           data={processorRows}
           sortable
-          defaultSort={{ key: 'p99DurationMs', direction: 'desc' }}
         />
       </div>
 
diff --git a/ui/src/pages/DashboardTab/PunchcardHeatmap.tsx b/ui/src/pages/DashboardTab/PunchcardHeatmap.tsx
index 1d5cdae2..abeacff7 100644
--- a/ui/src/pages/DashboardTab/PunchcardHeatmap.tsx
+++ b/ui/src/pages/DashboardTab/PunchcardHeatmap.tsx
@@ -126,7 +126,7 @@ export function PunchcardHeatmap({ cells, mode }: PunchcardHeatmapProps) {
         />
         <Scatter
           data={data}
-          shape={HeatmapCell as unknown as React.FC}
+          shape={(props: unknown) => <HeatmapCell {...(props as Record<string, unknown>)} />}
           isAnimationActive={false}
         />
       </ScatterChart>