From 7ba9494ea90bc75b283d92ce3fd22dc85b10353e Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Thu, 7 May 2026 16:03:24 +0200
Subject: [PATCH] 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.
---
 components/admin/jobs-table.tsx | 36 +++++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/components/admin/jobs-table.tsx b/components/admin/jobs-table.tsx
index a241549..1d710a4 100644
--- a/components/admin/jobs-table.tsx
+++ b/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,33 @@ export function JobsTable({ jobs }: { jobs: Job[] }) {
     </Table>
   )
 }
+
+function CostsTable({ jobs: _jobs }: { jobs: Job[] }) {
+  return null
+}
+
+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>
+  )
+}