feat(L+M): configurable dashboard widget system + test framework
Phase L: Dashboard widget system - Migration 046: dashboard_configs table (user/tenant/role fallback cascade) - DashboardConfig model + dashboard_service with get/upsert per-user and tenant-default - API router: GET/PUT /api/dashboard/config, GET/PUT /api/dashboard/tenant-default - Frontend: 5 widget components (ProductionStats, QueueStatus, RecentRenders, CostOverview, WorkerStatus) - DashboardGrid with API-backed config, DashboardCustomizeModal (checkbox selection, save/cancel) - Dashboard.tsx: widget grid + analytics section (privileged users) - Admin.tsx: restructured with new section order and Maintenance 2-col grid Phase M: Test framework - Backend: pytest-asyncio + pytest-cov + factory-boy in pyproject.toml - conftest.py: excel_dir fixtures + async DB fixtures + mock storage/celery stubs - Domain tests: billing_service, cache_service, notifications_service, imports_sanity - Integration: test_api_health.py smoke test (requires running backend) - Frontend: vitest + @testing-library/react + msw added to package.json - vite.config.ts: test block (jsdom + globals + setupFiles) - tsconfig.json: exclude src/__tests__ from main tsc (test runner handles its own types) - MSW handlers for /api/auth/me, Billing.test.tsx, formatters.test.ts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -101,7 +101,7 @@ function LogPanel({
|
||||
}: {
|
||||
entries: RenderLogEntry[]
|
||||
isActive: boolean
|
||||
scrollRef: React.RefObject<HTMLDivElement | null>
|
||||
scrollRef: React.RefObject<HTMLDivElement>
|
||||
maxHeight: string
|
||||
}) {
|
||||
return (
|
||||
|
||||
@@ -305,10 +305,10 @@ export default function AdminDashboard() {
|
||||
<YAxis type="category" dataKey="output_type" tick={{ fill: 'var(--color-text-muted)', fontSize: 10 }} width={130} />
|
||||
<Tooltip
|
||||
contentStyle={CHART_TOOLTIP_STYLE}
|
||||
formatter={(v: number | null | undefined, name: string) => [
|
||||
v != null ? (v >= 60 ? `${(v / 60).toFixed(1)} min` : `${v.toFixed(0)} s`) : '—',
|
||||
name,
|
||||
]}
|
||||
formatter={(v: unknown, name?: string) => {
|
||||
const n = typeof v === 'number' ? v : null
|
||||
return [n != null ? (n >= 60 ? `${(n / 60).toFixed(1)} min` : `${n.toFixed(0)} s`) : '—', name ?? '']
|
||||
}}
|
||||
/>
|
||||
<Legend wrapperStyle={{ fontSize: 11 }} />
|
||||
<Bar dataKey="avg_render_s" name="Ø Renderzeit" fill={INDIGO} radius={[0, 3, 3, 0]} />
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
import { useState } from 'react'
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { X, Save } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { updateDashboardConfig, updateTenantDefaultDashboard } from '../../api/dashboard'
|
||||
import type { WidgetConfig, WidgetType } from '../../api/dashboard'
|
||||
|
||||
const WIDGET_LABELS: Record<WidgetType, string> = {
|
||||
ProductionStats: 'Production Stats',
|
||||
QueueStatus: 'Queue Status',
|
||||
RecentRenders: 'Recent Renders',
|
||||
CostOverview: 'Cost Overview',
|
||||
WorkerStatus: 'Worker Status',
|
||||
}
|
||||
|
||||
const ALL_WIDGET_TYPES: WidgetType[] = [
|
||||
'ProductionStats',
|
||||
'QueueStatus',
|
||||
'RecentRenders',
|
||||
'CostOverview',
|
||||
'WorkerStatus',
|
||||
]
|
||||
|
||||
function recalculatePositions(widgets: WidgetConfig[]): WidgetConfig[] {
|
||||
// Re-layout: 3 columns, each widget w=1 h=1, fill left-to-right top-to-bottom
|
||||
return widgets.map((w, i) => ({
|
||||
...w,
|
||||
position: {
|
||||
col: i % 3,
|
||||
row: Math.floor(i / 3),
|
||||
w: 1,
|
||||
h: 1,
|
||||
},
|
||||
}))
|
||||
}
|
||||
|
||||
interface Props {
|
||||
currentWidgets: WidgetConfig[]
|
||||
onClose: () => void
|
||||
/** When true, saves to tenant-default instead of user config */
|
||||
tenantMode?: boolean
|
||||
}
|
||||
|
||||
export default function DashboardCustomizeModal({
|
||||
currentWidgets,
|
||||
onClose,
|
||||
tenantMode = false,
|
||||
}: Props) {
|
||||
const qc = useQueryClient()
|
||||
|
||||
// Track which widget types are enabled
|
||||
const [enabled, setEnabled] = useState<Set<WidgetType>>(
|
||||
new Set(currentWidgets.map((w) => w.widget_type as WidgetType))
|
||||
)
|
||||
|
||||
const saveMut = useMutation({
|
||||
mutationFn: async () => {
|
||||
// Build widget list from enabled set, preserving existing configs
|
||||
const selected = ALL_WIDGET_TYPES.filter((t) => enabled.has(t))
|
||||
const configMap = new Map(
|
||||
currentWidgets.map((w) => [w.widget_type, w.config])
|
||||
)
|
||||
const newWidgets: WidgetConfig[] = selected.map((t) => ({
|
||||
widget_type: t,
|
||||
position: { col: 0, row: 0, w: 1, h: 1 }, // recalculated below
|
||||
config: configMap.get(t),
|
||||
}))
|
||||
const layouted = recalculatePositions(newWidgets)
|
||||
if (tenantMode) {
|
||||
return updateTenantDefaultDashboard(layouted)
|
||||
}
|
||||
return updateDashboardConfig(layouted)
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success('Dashboard layout saved')
|
||||
qc.invalidateQueries({ queryKey: ['dashboard-config'] })
|
||||
onClose()
|
||||
},
|
||||
onError: (e: unknown) => {
|
||||
const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail
|
||||
toast.error(msg ?? 'Failed to save')
|
||||
},
|
||||
})
|
||||
|
||||
function toggle(type: WidgetType) {
|
||||
setEnabled((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(type)) {
|
||||
next.delete(type)
|
||||
} else {
|
||||
next.add(type)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
>
|
||||
<div
|
||||
className="rounded-xl shadow-xl w-full max-w-md mx-4"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-border-default">
|
||||
<h2 className="font-semibold text-content">
|
||||
{tenantMode ? 'Edit Tenant Default Dashboard' : 'Customize Dashboard'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-content-muted hover:text-content transition-colors"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Widget list */}
|
||||
<div className="px-5 py-4 space-y-2">
|
||||
<p className="text-xs text-content-muted mb-3">
|
||||
Select which widgets are visible on the dashboard.
|
||||
</p>
|
||||
{ALL_WIDGET_TYPES.map((type) => (
|
||||
<label
|
||||
key={type}
|
||||
className="flex items-center gap-3 cursor-pointer rounded-lg border border-border-default px-4 py-3 hover:border-accent transition-colors"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={enabled.has(type)}
|
||||
onChange={() => toggle(type)}
|
||||
className="w-4 h-4 rounded accent-accent"
|
||||
/>
|
||||
<span className="text-sm font-medium text-content">
|
||||
{WIDGET_LABELS[type]}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-end gap-3 px-5 py-4 border-t border-border-default">
|
||||
<button onClick={onClose} className="btn-secondary text-sm">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => saveMut.mutate()}
|
||||
disabled={saveMut.isPending}
|
||||
className="btn-primary text-sm flex items-center gap-2"
|
||||
>
|
||||
<Save size={14} />
|
||||
{saveMut.isPending ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Settings2, BarChart2, Activity, ImageIcon, DollarSign, Cpu } from 'lucide-react'
|
||||
import { getDashboardConfig } from '../../api/dashboard'
|
||||
import type { WidgetType } from '../../api/dashboard'
|
||||
import WidgetContainer from './WidgetContainer'
|
||||
import DashboardCustomizeModal from './DashboardCustomizeModal'
|
||||
import ProductionStatsWidget from './widgets/ProductionStatsWidget'
|
||||
import QueueStatusWidget from './widgets/QueueStatusWidget'
|
||||
import RecentRendersWidget from './widgets/RecentRendersWidget'
|
||||
import CostOverviewWidget from './widgets/CostOverviewWidget'
|
||||
import WorkerStatusWidget from './widgets/WorkerStatusWidget'
|
||||
|
||||
const WIDGET_META: Record<WidgetType, { title: string; icon: React.ReactNode }> = {
|
||||
ProductionStats: { title: 'Production Stats', icon: <BarChart2 size={15} /> },
|
||||
QueueStatus: { title: 'Queue Status', icon: <Activity size={15} /> },
|
||||
RecentRenders: { title: 'Recent Renders', icon: <ImageIcon size={15} /> },
|
||||
CostOverview: { title: 'Cost Overview', icon: <DollarSign size={15} /> },
|
||||
WorkerStatus: { title: 'Worker Status', icon: <Cpu size={15} /> },
|
||||
}
|
||||
|
||||
function WidgetBody({ type }: { type: WidgetType }) {
|
||||
switch (type) {
|
||||
case 'ProductionStats': return <ProductionStatsWidget />
|
||||
case 'QueueStatus': return <QueueStatusWidget />
|
||||
case 'RecentRenders': return <RecentRendersWidget />
|
||||
case 'CostOverview': return <CostOverviewWidget />
|
||||
case 'WorkerStatus': return <WorkerStatusWidget />
|
||||
default: return <p className="text-xs text-content-muted">Unknown widget</p>
|
||||
}
|
||||
}
|
||||
|
||||
export default function DashboardGrid() {
|
||||
const [showCustomize, setShowCustomize] = useState(false)
|
||||
|
||||
const { data: widgets, isLoading } = useQuery({
|
||||
queryKey: ['dashboard-config'],
|
||||
queryFn: getDashboardConfig,
|
||||
staleTime: 300_000,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-end">
|
||||
<button
|
||||
onClick={() => setShowCustomize(true)}
|
||||
className="btn-secondary text-sm flex items-center gap-1.5"
|
||||
>
|
||||
<Settings2 size={14} />
|
||||
Anpassen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div key={i} className="h-40 rounded-xl animate-pulse bg-surface-muted" />
|
||||
))}
|
||||
</div>
|
||||
) : (widgets ?? []).length === 0 ? (
|
||||
<div className="rounded-xl border border-border-default p-8 text-center text-content-muted text-sm">
|
||||
No widgets configured. Click <strong>Anpassen</strong> to add widgets.
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="grid gap-4"
|
||||
style={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}
|
||||
>
|
||||
{(widgets ?? []).map((w, i) => {
|
||||
const pos = w.position
|
||||
const meta = WIDGET_META[w.widget_type as WidgetType] ?? {
|
||||
title: w.widget_type,
|
||||
icon: null,
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={`${w.widget_type}-${i}`}
|
||||
style={{
|
||||
gridColumnStart: pos.col + 1,
|
||||
gridColumnEnd: `span ${pos.w}`,
|
||||
gridRowStart: pos.row + 1,
|
||||
gridRowEnd: `span ${pos.h}`,
|
||||
}}
|
||||
>
|
||||
<WidgetContainer title={meta.title} icon={meta.icon}>
|
||||
<WidgetBody type={w.widget_type as WidgetType} />
|
||||
</WidgetContainer>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Customize modal */}
|
||||
{showCustomize && (
|
||||
<DashboardCustomizeModal
|
||||
currentWidgets={widgets ?? []}
|
||||
onClose={() => setShowCustomize(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { AlertCircle } from 'lucide-react'
|
||||
|
||||
interface WidgetContainerProps {
|
||||
title: string
|
||||
icon?: React.ReactNode
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
isLoading?: boolean
|
||||
error?: string | null
|
||||
}
|
||||
|
||||
export default function WidgetContainer({
|
||||
title,
|
||||
icon,
|
||||
children,
|
||||
className = '',
|
||||
isLoading,
|
||||
error,
|
||||
}: WidgetContainerProps) {
|
||||
return (
|
||||
<div
|
||||
className={`card flex flex-col overflow-hidden ${className}`}
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-b border-border-default shrink-0">
|
||||
{icon && <span className="text-content-muted">{icon}</span>}
|
||||
<h3 className="text-sm font-semibold text-content">{title}</h3>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 p-4 overflow-auto">
|
||||
{isLoading ? (
|
||||
<div className="animate-pulse space-y-2">
|
||||
<div className="h-8 rounded bg-surface-muted" />
|
||||
<div className="h-8 rounded bg-surface-muted" />
|
||||
<div className="h-8 rounded bg-surface-muted" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex items-center gap-2 text-red-500 text-xs">
|
||||
<AlertCircle size={14} />
|
||||
{error}
|
||||
</div>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { DollarSign, FileText } from 'lucide-react'
|
||||
import api from '../../../api/client'
|
||||
import { useAuthStore } from '../../../store/auth'
|
||||
|
||||
interface Invoice {
|
||||
id: string
|
||||
amount: number
|
||||
status: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface InvoiceListResponse {
|
||||
items: Invoice[]
|
||||
total: number
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return (
|
||||
<div className="animate-pulse space-y-3">
|
||||
<div className="h-12 rounded-lg bg-surface-muted" />
|
||||
<div className="h-8 rounded bg-surface-muted" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CostOverviewWidget() {
|
||||
const user = useAuthStore((s) => s.user)
|
||||
const isPrivileged =
|
||||
user?.role === 'admin' || user?.role === 'project_manager'
|
||||
|
||||
const { data, isLoading, error } = useQuery<Invoice[]>({
|
||||
queryKey: ['invoices-widget'],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const res = await api.get<InvoiceListResponse>('/billing/invoices', {
|
||||
params: { limit: 50 },
|
||||
})
|
||||
return res.data?.items ?? []
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
},
|
||||
enabled: isPrivileged,
|
||||
staleTime: 120_000,
|
||||
retry: 1,
|
||||
})
|
||||
|
||||
if (!isPrivileged) {
|
||||
return (
|
||||
<p className="text-xs text-content-muted text-center py-4">
|
||||
Available for admin and project managers only.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
if (isLoading) return <Skeleton />
|
||||
if (error) {
|
||||
return <p className="text-xs text-red-500">Failed to load invoices</p>
|
||||
}
|
||||
|
||||
const invoices = data ?? []
|
||||
|
||||
const now = new Date()
|
||||
const monthStart = new Date(now.getFullYear(), now.getMonth(), 1)
|
||||
const thisMonthTotal = invoices
|
||||
.filter((inv) => new Date(inv.created_at) >= monthStart)
|
||||
.reduce((sum, inv) => sum + (inv.amount ?? 0), 0)
|
||||
|
||||
const openCount = invoices.filter(
|
||||
(inv) => inv.status === 'open' || inv.status === 'pending'
|
||||
).length
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* This month */}
|
||||
<div
|
||||
className="flex items-center gap-3 rounded-lg border border-border-default p-3"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<DollarSign size={18} className="text-green-500 shrink-0" />
|
||||
<div>
|
||||
<p className="text-xs text-content-muted">This month</p>
|
||||
<p className="text-xl font-bold text-content">
|
||||
€ {thisMonthTotal.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Open invoices */}
|
||||
<div
|
||||
className="flex items-center gap-3 rounded-lg border border-border-default p-3"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<FileText
|
||||
size={16}
|
||||
className={openCount > 0 ? 'text-amber-500' : 'text-content-muted'}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-xs text-content-muted">Open invoices</p>
|
||||
<p className="text-base font-semibold text-content">{openCount}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { PackageCheck, Clock, CheckCircle2 } from 'lucide-react'
|
||||
import api from '../../../api/client'
|
||||
|
||||
interface OrderStats {
|
||||
total_orders: number
|
||||
completed_orders: number
|
||||
total_rendering_items: number
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return (
|
||||
<div className="animate-pulse space-y-3">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div key={i} className="h-10 rounded-lg bg-surface-muted" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ProductionStatsWidget() {
|
||||
const { data, isLoading, error } = useQuery<OrderStats>({
|
||||
queryKey: ['production-stats-widget'],
|
||||
queryFn: async () => {
|
||||
const today = new Date().toISOString().slice(0, 10)
|
||||
const res = await api.get('/analytics/kpis', {
|
||||
params: { date_from: today, date_to: today },
|
||||
})
|
||||
const s = res.data?.summary ?? {}
|
||||
return {
|
||||
total_orders: s.total_orders ?? 0,
|
||||
completed_orders: s.completed_orders ?? 0,
|
||||
total_rendering_items: s.total_rendering_items ?? 0,
|
||||
}
|
||||
},
|
||||
staleTime: 60_000,
|
||||
retry: 1,
|
||||
})
|
||||
|
||||
if (isLoading) return <Skeleton />
|
||||
if (error) {
|
||||
return (
|
||||
<p className="text-xs text-red-500">Failed to load production stats</p>
|
||||
)
|
||||
}
|
||||
|
||||
const stats = [
|
||||
{ label: 'Open Orders', value: (data?.total_orders ?? 0) - (data?.completed_orders ?? 0), icon: <Clock size={16} className="text-amber-500" /> },
|
||||
{ label: 'Completed Orders', value: data?.completed_orders ?? 0, icon: <CheckCircle2 size={16} className="text-green-500" /> },
|
||||
{ label: 'Rendering Items', value: data?.total_rendering_items ?? 0, icon: <PackageCheck size={16} className="text-blue-500" /> },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{stats.map(({ label, value, icon }) => (
|
||||
<div
|
||||
key={label}
|
||||
className="flex items-center justify-between rounded-lg border border-border-default p-3"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{icon}
|
||||
<span className="text-sm text-content-secondary">{label}</span>
|
||||
</div>
|
||||
<span className="text-lg font-bold text-content">{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Activity } from 'lucide-react'
|
||||
import api from '../../../api/client'
|
||||
|
||||
interface ActivityEntry {
|
||||
id: string
|
||||
filename: string
|
||||
status: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return (
|
||||
<div className="animate-pulse space-y-2">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div key={i} className="h-8 rounded bg-surface-muted" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function QueueStatusWidget() {
|
||||
const { data, isLoading, error } = useQuery<ActivityEntry[]>({
|
||||
queryKey: ['worker-activity-widget'],
|
||||
queryFn: async () => {
|
||||
const res = await api.get('/worker/activity')
|
||||
return res.data as ActivityEntry[]
|
||||
},
|
||||
refetchInterval: 15_000,
|
||||
staleTime: 10_000,
|
||||
retry: 1,
|
||||
})
|
||||
|
||||
if (isLoading) return <Skeleton />
|
||||
if (error) {
|
||||
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 recent = entries.slice(0, 5)
|
||||
|
||||
const statusDot = processing > 0
|
||||
? 'bg-blue-500'
|
||||
: failed > 0
|
||||
? 'bg-red-500'
|
||||
: 'bg-green-500'
|
||||
|
||||
const statusLabel = processing > 0
|
||||
? `${processing} processing`
|
||||
: failed > 0
|
||||
? `${failed} failed`
|
||||
: 'Idle'
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Summary row */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`inline-block w-2.5 h-2.5 rounded-full ${statusDot}`} />
|
||||
<span className="text-sm font-medium text-content">{statusLabel}</span>
|
||||
<span className="text-xs text-content-muted ml-auto">
|
||||
{entries.length} recent tasks
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Recent activity */}
|
||||
<div className="space-y-1">
|
||||
{recent.length === 0 && (
|
||||
<p className="text-xs text-content-muted text-center py-2">No recent activity</p>
|
||||
)}
|
||||
{recent.map((entry) => (
|
||||
<div
|
||||
key={entry.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>
|
||||
<span
|
||||
className={`font-medium shrink-0 ${
|
||||
entry.status === 'completed'
|
||||
? 'text-green-600'
|
||||
: entry.status === 'failed'
|
||||
? 'text-red-500'
|
||||
: entry.status === 'processing'
|
||||
? 'text-blue-500'
|
||||
: 'text-content-muted'
|
||||
}`}
|
||||
>
|
||||
{entry.status}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import api from '../../../api/client'
|
||||
|
||||
interface MediaItem {
|
||||
id: string
|
||||
filename: string
|
||||
thumbnail_url: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface MediaListResponse {
|
||||
items: MediaItem[]
|
||||
total: number
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return (
|
||||
<div className="grid grid-cols-4 gap-2 animate-pulse">
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div key={i} className="aspect-square rounded bg-surface-muted" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function RecentRendersWidget() {
|
||||
const { data, isLoading, error } = useQuery<MediaItem[]>({
|
||||
queryKey: ['recent-renders-widget'],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const res = await api.get<MediaListResponse>('/media', {
|
||||
params: { limit: 8, sort: '-created_at' },
|
||||
})
|
||||
return res.data?.items ?? []
|
||||
} catch {
|
||||
// media endpoint may not be available in all deployments
|
||||
return []
|
||||
}
|
||||
},
|
||||
staleTime: 60_000,
|
||||
retry: 1,
|
||||
})
|
||||
|
||||
if (isLoading) return <Skeleton />
|
||||
if (error) {
|
||||
return <p className="text-xs text-red-500">Failed to load recent renders</p>
|
||||
}
|
||||
|
||||
const items = data ?? []
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<p className="text-xs text-content-muted text-center py-4">
|
||||
No renders yet
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{items.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="aspect-square rounded overflow-hidden border border-border-default bg-surface-muted"
|
||||
title={item.filename}
|
||||
>
|
||||
{item.thumbnail_url ? (
|
||||
<img
|
||||
src={item.thumbnail_url}
|
||||
alt={item.filename}
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<span className="text-xs text-content-muted text-center px-1 truncate">
|
||||
{item.filename}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Cpu } from 'lucide-react'
|
||||
import api from '../../../api/client'
|
||||
|
||||
interface ActivityEntry {
|
||||
id: string
|
||||
filename: string
|
||||
status: string
|
||||
created_at: string
|
||||
updated_at?: string
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return (
|
||||
<div className="animate-pulse space-y-2">
|
||||
<div className="h-8 rounded-lg bg-surface-muted" />
|
||||
<div className="h-24 rounded bg-surface-muted" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function WorkerStatusWidget() {
|
||||
const { data, isLoading, error } = useQuery<ActivityEntry[]>({
|
||||
queryKey: ['worker-status-widget'],
|
||||
queryFn: async () => {
|
||||
const res = await api.get('/worker/activity')
|
||||
return res.data as ActivityEntry[]
|
||||
},
|
||||
refetchInterval: 15_000,
|
||||
staleTime: 10_000,
|
||||
retry: 1,
|
||||
})
|
||||
|
||||
if (isLoading) return <Skeleton />
|
||||
if (error) {
|
||||
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 overallStatus =
|
||||
processing.length > 0
|
||||
? 'active'
|
||||
: failed.length > 0
|
||||
? 'degraded'
|
||||
: 'idle'
|
||||
|
||||
const statusColor = {
|
||||
active: 'text-blue-600',
|
||||
degraded: 'text-red-500',
|
||||
idle: 'text-green-600',
|
||||
}[overallStatus]
|
||||
|
||||
const dotColor = {
|
||||
active: 'bg-blue-500 animate-pulse',
|
||||
degraded: 'bg-red-500',
|
||||
idle: 'bg-green-500',
|
||||
}[overallStatus]
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Status header */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`inline-block w-2.5 h-2.5 rounded-full ${dotColor}`} />
|
||||
<Cpu size={14} className="text-content-muted" />
|
||||
<span className={`text-sm font-semibold capitalize ${statusColor}`}>
|
||||
{overallStatus}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Counters */}
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div
|
||||
className="rounded-lg border border-border-default py-2"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<p className="text-lg font-bold text-blue-500">{processing.length}</p>
|
||||
<p className="text-xs text-content-muted">Active</p>
|
||||
</div>
|
||||
<div
|
||||
className="rounded-lg border border-border-default py-2"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<p className="text-lg font-bold text-green-500">{completed.length}</p>
|
||||
<p className="text-xs text-content-muted">Done</p>
|
||||
</div>
|
||||
<div
|
||||
className="rounded-lg border border-border-default py-2"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<p className={`text-lg font-bold ${failed.length > 0 ? 'text-red-500' : 'text-content-muted'}`}>
|
||||
{failed.length}
|
||||
</p>
|
||||
<p className="text-xs text-content-muted">Failed</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Last activity timestamp */}
|
||||
{entries.length > 0 && (
|
||||
<p className="text-xs text-content-muted">
|
||||
Last activity:{' '}
|
||||
{new Date(entries[0].created_at).toLocaleString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user