From 6f87965293499880115e42f6c68e89b22361b3a2 Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Thu, 7 May 2026 16:05:14 +0200
Subject: [PATCH] feat(admin/jobs-table): CostRow en CostsTable voor
 kosten-view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 "—".
---
 components/admin/jobs-table.tsx | 57 +++++++++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 2 deletions(-)

diff --git a/components/admin/jobs-table.tsx b/components/admin/jobs-table.tsx
index 1d710a4..3b1c312 100644
--- a/components/admin/jobs-table.tsx
+++ b/components/admin/jobs-table.tsx
@@ -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[] }) {