From 208eb219886303e05daf8bee9a9efacf04b7df63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Fri, 6 Mar 2026 22:06:55 +0100
Subject: [PATCH] fix(dashboard): fix widget crashes on /worker/activity
 response shape
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- QueueStatusWidget + WorkerStatusWidget expected res.data to be ActivityEntry[]
  but /api/worker/activity returns {cad_processing: [...], render_jobs: [...]}
  → TypeError: entries.filter is not a function → blank screen (no error boundary)
- Both widgets now use ActivityResponse interface and read data?.cad_processing
- Field names updated: id→cad_file_id, filename→original_name, status→processing_status
- AdminDashboard: fix duplicate React key in top_products table (pim_id can repeat)
  → use index suffix to guarantee unique keys

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/dashboard/AdminDashboard.tsx   |  4 +--
 .../dashboard/widgets/QueueStatusWidget.tsx   | 35 +++++++++++--------
 .../dashboard/widgets/WorkerStatusWidget.tsx  | 23 +++++++-----
 3 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/dashboard/AdminDashboard.tsx b/frontend/src/components/dashboard/AdminDashboard.tsx
index d1edb15..42cc1af 100644
--- a/frontend/src/components/dashboard/AdminDashboard.tsx
+++ b/frontend/src/components/dashboard/AdminDashboard.tsx
@@ -501,8 +501,8 @@ export default function AdminDashboard() {
                 </tr>
               </thead>
               <tbody className="divide-y divide-border-light">
-                {top_products.map((p) => (
-                  <tr key={p.pim_id}>
+                {top_products.map((p, i) => (
+                  <tr key={`${p.pim_id}-${i}`}>
                     <td className="py-1.5 pr-3 font-mono text-xs text-content-muted">{p.pim_id}</td>
                     <td className="py-1.5 pr-3 text-content truncate max-w-[160px]">{p.product_name || '—'}</td>
                     <td className="py-1.5 pr-3 text-content-muted">{p.category}</td>
diff --git a/frontend/src/components/dashboard/widgets/QueueStatusWidget.tsx b/frontend/src/components/dashboard/widgets/QueueStatusWidget.tsx
index dc9f373..6815b1d 100644
--- a/frontend/src/components/dashboard/widgets/QueueStatusWidget.tsx
+++ b/frontend/src/components/dashboard/widgets/QueueStatusWidget.tsx
@@ -3,12 +3,17 @@ import { Activity } from 'lucide-react'
 import api from '../../../api/client'
 
 interface ActivityEntry {
-  id: string
-  filename: string
-  status: string
+  cad_file_id: string
+  original_name: string
+  processing_status: string
   created_at: string
 }
 
+interface ActivityResponse {
+  cad_processing: ActivityEntry[]
+  render_jobs: ActivityEntry[]
+}
+
 function Skeleton() {
   return (
     <div className="animate-pulse space-y-2">
@@ -20,11 +25,11 @@ function Skeleton() {
 }
 
 export default function QueueStatusWidget() {
-  const { data, isLoading, error } = useQuery<ActivityEntry[]>({
+  const { data, isLoading, error } = useQuery<ActivityResponse>({
     queryKey: ['worker-activity-widget'],
     queryFn: async () => {
       const res = await api.get('/worker/activity')
-      return res.data as ActivityEntry[]
+      return res.data as ActivityResponse
     },
     refetchInterval: 15_000,
     staleTime: 10_000,
@@ -36,9 +41,9 @@ export default function QueueStatusWidget() {
     return <p className="text-xs text-red-500">Failed to load queue status</p>
   }
 
-  const entries = data ?? []
-  const processing = entries.filter((e) => e.status === 'processing').length
-  const failed = entries.filter((e) => e.status === 'failed').length
+  const entries = data?.cad_processing ?? []
+  const processing = entries.filter((e) => e.processing_status === 'processing').length
+  const failed = entries.filter((e) => e.processing_status === 'failed').length
   const recent = entries.slice(0, 5)
 
   const statusDot = processing > 0
@@ -71,26 +76,26 @@ export default function QueueStatusWidget() {
         )}
         {recent.map((entry) => (
           <div
-            key={entry.id}
+            key={entry.cad_file_id}
             className="flex items-center gap-2 rounded px-2 py-1.5 text-xs"
             style={{ backgroundColor: 'var(--color-bg-surface)' }}
           >
             <Activity size={12} className="text-content-muted shrink-0" />
-            <span className="flex-1 truncate text-content-secondary" title={entry.filename}>
-              {entry.filename}
+            <span className="flex-1 truncate text-content-secondary" title={entry.original_name}>
+              {entry.original_name}
             </span>
             <span
               className={`font-medium shrink-0 ${
-                entry.status === 'completed'
+                entry.processing_status === 'completed'
                   ? 'text-green-600'
-                  : entry.status === 'failed'
+                  : entry.processing_status === 'failed'
                   ? 'text-red-500'
-                  : entry.status === 'processing'
+                  : entry.processing_status === 'processing'
                   ? 'text-blue-500'
                   : 'text-content-muted'
               }`}
             >
-              {entry.status}
+              {entry.processing_status}
             </span>
           </div>
         ))}
diff --git a/frontend/src/components/dashboard/widgets/WorkerStatusWidget.tsx b/frontend/src/components/dashboard/widgets/WorkerStatusWidget.tsx
index 11e5390..fae8021 100644
--- a/frontend/src/components/dashboard/widgets/WorkerStatusWidget.tsx
+++ b/frontend/src/components/dashboard/widgets/WorkerStatusWidget.tsx
@@ -3,13 +3,18 @@ import { Cpu } from 'lucide-react'
 import api from '../../../api/client'
 
 interface ActivityEntry {
-  id: string
-  filename: string
-  status: string
+  cad_file_id: string
+  original_name: string
+  processing_status: string
   created_at: string
   updated_at?: string
 }
 
+interface ActivityResponse {
+  cad_processing: ActivityEntry[]
+  render_jobs: ActivityEntry[]
+}
+
 function Skeleton() {
   return (
     <div className="animate-pulse space-y-2">
@@ -20,11 +25,11 @@ function Skeleton() {
 }
 
 export default function WorkerStatusWidget() {
-  const { data, isLoading, error } = useQuery<ActivityEntry[]>({
+  const { data, isLoading, error } = useQuery<ActivityResponse>({
     queryKey: ['worker-status-widget'],
     queryFn: async () => {
       const res = await api.get('/worker/activity')
-      return res.data as ActivityEntry[]
+      return res.data as ActivityResponse
     },
     refetchInterval: 15_000,
     staleTime: 10_000,
@@ -36,10 +41,10 @@ export default function WorkerStatusWidget() {
     return <p className="text-xs text-red-500">Failed to load worker status</p>
   }
 
-  const entries = data ?? []
-  const processing = entries.filter((e) => e.status === 'processing')
-  const failed = entries.filter((e) => e.status === 'failed')
-  const completed = entries.filter((e) => e.status === 'completed')
+  const entries = data?.cad_processing ?? []
+  const processing = entries.filter((e) => e.processing_status === 'processing')
+  const failed = entries.filter((e) => e.processing_status === 'failed')
+  const completed = entries.filter((e) => e.processing_status === 'completed')
 
   const overallStatus =
     processing.length > 0