fix(dashboard): fix widget crashes on /worker/activity response shape

- 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>
This commit is contained in:
2026-03-06 22:06:55 +01:00
parent f1e02ded78
commit 208eb21988
3 changed files with 36 additions and 26 deletions
@@ -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>
@@ -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>
))}
@@ -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