Sprint: inzicht jobs (#146)

* 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 "—".

app/(app)/admin/jobs/page.tsx

@@ -16,15 +16,34 @@ export default async function AdminJobsPage() {
       branch: true,
       pr_url: true,
       error: true,
+      model_id: true,
+      input_tokens: true,
+      output_tokens: true,
+      cache_read_tokens: true,
+      cache_write_tokens: true,
       user: { select: { username: true } },
       product: { select: { name: true } },
     },
   })
 
+  const prices = await prisma.modelPrice.findMany()
+  const priceMap = new Map(prices.map((p) => [p.model_id, p]))
+
+  const jobsWithCost = jobs.map((job) => {
+    const p = job.model_id ? priceMap.get(job.model_id) : undefined
+    if (!p || job.input_tokens == null) return { ...job, cost_usd: null }
+    const cost =
+      (job.input_tokens ?? 0) * Number(p.input_price_per_1m) / 1_000_000 +
+      (job.output_tokens ?? 0) * Number(p.output_price_per_1m) / 1_000_000 +
+      (job.cache_read_tokens ?? 0) * Number(p.cache_read_price_per_1m) / 1_000_000 +
+      (job.cache_write_tokens ?? 0) * Number(p.cache_write_price_per_1m) / 1_000_000
+    return { ...job, cost_usd: cost }
+  })
+
   return (
     <div>
       <h1 className="text-xl font-semibold mb-4">Claude Jobs</h1>
-      <JobsTable jobs={jobs} />
+      <JobsTable jobs={jobsWithCost} />
     </div>
   )
 }

components/admin/jobs-table.tsx

@@ -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>
+  )
+}