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

feat(admin/jobs-table): CostRow en CostsTable voor kosten-view

Browse source 
Voegt CostRow toe met kolommen ID/Gebruiker/Product/Type/Model/Kosten(USD)/
Aangemaakt/Acties en vervangt de CostsTable-stub door een volledige tabel.
Kostprijs geformatteerd als "$0.0042"; ontbrekende prijs toont "—".
This commit is contained in:
Scrum4Me Agent 2026-05-07 16:05:14 +02:00
parent 7ba9494ea9
commit 6f87965293
1 changed files with 55 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

57
components/admin/jobs-table.tsx
View file

@ -126,8 +126,61 @@ function StatusTable({ jobs }: { jobs: Job[] }) {
)
}
function CostsTable({ jobs: _jobs }: { jobs: Job[] }) {
return null
function CostRow({ job }: { job: Job }) {
const [pending, startTransition] = useTransition()
function handleCancel() { startTransition(() => cancelJobAction(job.id)) }
function handleDelete() { startTransition(() => deleteJobAction(job.id)) }
const costLabel = job.cost_usd != null ? `$${job.cost_usd.toFixed(4)}` : '—'
return (
<TableRow>
<TableCell className="font-mono text-xs text-muted-foreground">{job.id.slice(0, 8)}</TableCell>
<TableCell className="text-sm">{job.user.username}</TableCell>
<TableCell className="text-sm">{job.product.name}</TableCell>
<TableCell className="text-xs">{KIND_LABEL[job.kind] ?? job.kind}</TableCell>
<TableCell className="text-xs text-muted-foreground">{job.model_id ?? '—'}</TableCell>
<TableCell className="text-xs font-mono">{costLabel}</TableCell>
<TableCell className="text-xs text-muted-foreground">
{new Date(job.created_at).toLocaleString('nl-NL', { dateStyle: 'short', timeStyle: 'short' })}
</TableCell>
<TableCell>
<div className="flex gap-2 justify-end">
{ACTIVE_STATUSES.has(job.status) && (
<Button variant="outline" size="sm" onClick={handleCancel} disabled={pending}>Annuleer</Button>
)}
<Button variant="destructive" size="sm" onClick={handleDelete} disabled={pending}>Verwijder</Button>
</div>
</TableCell>
</TableRow>
)
}
function CostsTable({ jobs }: { jobs: Job[] }) {
return (
<Table>
<TableHeader>
<TableRow>
<TableHead>ID</TableHead>
<TableHead>Gebruiker</TableHead>
<TableHead>Product</TableHead>
<TableHead>Type</TableHead>
<TableHead>Model</TableHead>
<TableHead>Kosten (USD)</TableHead>
<TableHead>Aangemaakt</TableHead>
<TableHead className="text-right">Acties</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{jobs.length === 0 && (
<TableRow>
<TableCell colSpan={8} className="text-center text-muted-foreground py-8">
Geen jobs gevonden
</TableCell>
</TableRow>
)}
{jobs.map((job) => <CostRow key={job.id} job={job} />)}
</TableBody>
</Table>
)
}
export function JobsTable({ jobs }: { jobs: Job[] }) {