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

Sprint: inzicht jobs (#146)

Browse source 
* feat(admin/jobs): select token-velden en bereken kostprijs server-side

Voegt model_id, input_tokens, output_tokens, cache_read_tokens en
cache_write_tokens toe aan de ClaudeJob-query en berekent cost_usd per
job via een ModelPrice-lookup. Jobs zonder prijs-entry of zonder
input_tokens krijgen cost_usd: null.

* feat(admin/jobs-table): toggle-buttons en view-state voor status/kosten-weergave

Voegt useState toe, breidt Job-type uit met model_id en cost_usd, extraheert
huidige tabellogica naar StatusTable en voegt CostsTable-stub + toggle-knoppen
toe aan JobsTable.

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

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:
Janpeter Visser 2026-05-07 16:09:17 +02:00 • committed by GitHub
parent 94f4f6ffd8
commit e8562d4018
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 107 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
'use client'
import { useTransition } from 'react'
import { useState, useTransition } from 'react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
@ -23,6 +23,8 @@ type Job = {
branch: string | null
pr_url: string | null
error: string | null
model_id: string | null
cost_usd: number | null
}
const STATUS_CLASS: Record<string, string> = {
@ -92,7 +94,7 @@ function JobRow({ job }: { job: Job }) {
)
}
export function JobsTable({ jobs }: { jobs: Job[] }) {
function StatusTable({ jobs }: { jobs: Job[] }) {
return (
<Table>
<TableHeader>
@ -123,3 +125,86 @@ export function JobsTable({ jobs }: { jobs: Job[] }) {
</Table>
)
}
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[] }) {
const [view, setView] = useState<'status' | 'costs'>('status')
return (
<div className="space-y-3">
<div className="flex gap-1">
<Button
size="sm"
variant={view === 'status' ? 'default' : 'outline'}
onClick={() => setView('status')}
>
Status
</Button>
<Button
size="sm"
variant={view === 'costs' ? 'default' : 'outline'}
onClick={() => setView('costs')}
>
Kosten
</Button>
</div>
{view === 'status' ? <StatusTable jobs={jobs} /> : <CostsTable jobs={jobs} />}
</div>
)
}