janpeter/Scrum4Me
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

feat(PBI-59): JobDetailPane component voor jobs-pagina

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scrum4Me Agent 2026-05-07 18:38:50 +02:00
parent 40819b3956
commit 0669e55175
1 changed files with 76 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

76
components/jobs/job-detail-pane.tsx Normal file
View file

@ -0,0 +1,76 @@
'use client'
import { cn } from '@/lib/utils'
import { JOB_STATUS_LABELS, JOB_STATUS_COLORS } from '@/components/shared/job-status'
import { jobStatusToApi } from '@/lib/job-status'
import type { JobWithRelations } from '@/actions/jobs-page'
interface FieldRowProps {
label: string
children: React.ReactNode
}
function FieldRow({ label, children }: FieldRowProps) {
return (
<div className="flex gap-2 py-1.5 border-b border-border/50 text-sm">
<span className="w-28 shrink-0 text-muted-foreground">{label}</span>
<span className="flex-1 min-w-0">{children}</span>
</div>
)
}
interface JobDetailPaneProps {
job: JobWithRelations | null
}
export default function JobDetailPane({ job }: JobDetailPaneProps) {
if (!job) {
return (
<div className="flex items-center justify-center h-full text-sm text-muted-foreground">
Selecteer een job om details te zien
</div>
)
}
const apiStatus = jobStatusToApi(job.status)
return (
<div className="overflow-y-auto h-full p-4">
<FieldRow label="Status">
<span className={cn('text-xs px-2 py-0.5 rounded-full border font-medium', JOB_STATUS_COLORS[apiStatus])}>
{JOB_STATUS_LABELS[apiStatus]}
</span>
</FieldRow>
<FieldRow label="Kind">{job.kind}</FieldRow>
<FieldRow label="Product">{job.productName}</FieldRow>
<FieldRow label="Model">{job.modelId || '—'}</FieldRow>
<FieldRow label="Tokens invoer">{job.inputTokens?.toLocaleString() || '—'}</FieldRow>
<FieldRow label="Tokens uitvoer">{job.outputTokens?.toLocaleString() || '—'}</FieldRow>
<FieldRow label="Cache read">{job.cacheReadTokens?.toLocaleString() || '—'}</FieldRow>
<FieldRow label="Cache write">{job.cacheWriteTokens?.toLocaleString() || '—'}</FieldRow>
<FieldRow label="Branch">
<span className="font-mono text-xs break-all">{job.branch || '—'}</span>
</FieldRow>
<FieldRow label="PR">
{job.prUrl ? (
<a href={job.prUrl} target="_blank" rel="noreferrer" className="text-primary underline text-xs break-all">
PR openen ↗
</a>
) : '—'}
</FieldRow>
<FieldRow label="Fout">
{job.error ? (
<pre className="text-xs text-status-blocked whitespace-pre-wrap break-all max-h-32 overflow-auto bg-status-blocked/5 rounded p-2">
{job.error}
</pre>
) : '—'}
</FieldRow>
<FieldRow label="Gestart">
{job.startedAt ? new Date(job.startedAt).toLocaleString('nl-NL') : '—'}
</FieldRow>
<FieldRow label="Klaar">
{job.finishedAt ? new Date(job.finishedAt).toLocaleString('nl-NL') : '—'}
</FieldRow>
</div>
)
}