feat: admin jobs en products pagina's
- /admin/jobs: overzicht van de laatste 100 Claude jobs met cancel/delete - /admin/products: overzicht van alle producten met archive/delete - JobsTable component met statusbadges en acties per job - ProductsTable component met eigenaar, leden/PBI-telling en acties Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
fbf58d4e44
commit
474a8da053
4 changed files with 308 additions and 0 deletions
124
components/admin/jobs-table.tsx
Normal file
124
components/admin/jobs-table.tsx
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
'use client'
|
||||
|
||||
import { useTransition } from 'react'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { cancelJobAction, deleteJobAction } from '@/actions/admin/jobs'
|
||||
|
||||
type Job = {
|
||||
id: string
|
||||
kind: string
|
||||
status: string
|
||||
created_at: Date
|
||||
user: { username: string }
|
||||
product: { name: string }
|
||||
branch: string | null
|
||||
pr_url: string | null
|
||||
error: string | null
|
||||
}
|
||||
|
||||
const STATUS_CLASS: Record<string, string> = {
|
||||
QUEUED: 'bg-secondary text-secondary-foreground',
|
||||
CLAIMED: 'bg-status-in-progress text-white border-transparent',
|
||||
RUNNING: 'bg-warning text-warning-foreground border-transparent',
|
||||
DONE: 'bg-status-done text-white border-transparent',
|
||||
FAILED: 'bg-priority-high text-white border-transparent',
|
||||
CANCELLED: 'bg-muted text-muted-foreground',
|
||||
}
|
||||
|
||||
const KIND_LABEL: Record<string, string> = {
|
||||
TASK_IMPLEMENTATION: 'Taak',
|
||||
IDEA_GRILL: 'Idee Grill',
|
||||
IDEA_MAKE_PLAN: 'Idee Plan',
|
||||
}
|
||||
|
||||
const ACTIVE_STATUSES = new Set(['QUEUED', 'CLAIMED', 'RUNNING'])
|
||||
|
||||
function JobRow({ job }: { job: Job }) {
|
||||
const [pending, startTransition] = useTransition()
|
||||
|
||||
function handleCancel() {
|
||||
startTransition(() => cancelJobAction(job.id))
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
startTransition(() => deleteJobAction(job.id))
|
||||
}
|
||||
|
||||
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>
|
||||
<Badge className={STATUS_CLASS[job.status] ?? 'bg-secondary'}>{job.status}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{job.branch ?? '—'}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{new Date(job.created_at).toLocaleString('nl-NL', { dateStyle: 'short', timeStyle: 'short' })}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{job.error && (
|
||||
<span className="text-xs text-priority-high line-clamp-1 max-w-[200px]" title={job.error}>
|
||||
{job.error}
|
||||
</span>
|
||||
)}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
export function JobsTable({ jobs }: { jobs: Job[] }) {
|
||||
return (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Gebruiker</TableHead>
|
||||
<TableHead>Product</TableHead>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Branch</TableHead>
|
||||
<TableHead>Aangemaakt</TableHead>
|
||||
<TableHead>Fout</TableHead>
|
||||
<TableHead className="text-right">Acties</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{jobs.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} className="text-center text-muted-foreground py-8">
|
||||
Geen jobs gevonden
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
{jobs.map(job => (
|
||||
<JobRow key={job.id} job={job} />
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
128
components/admin/products-table.tsx
Normal file
128
components/admin/products-table.tsx
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
'use client'
|
||||
|
||||
import { useTransition } from 'react'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogClose,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { adminArchiveProductAction, adminDeleteProductAction } from '@/actions/admin/products'
|
||||
|
||||
type Product = {
|
||||
id: string
|
||||
name: string
|
||||
archived: boolean
|
||||
created_at: Date
|
||||
user: { username: string }
|
||||
_count: { members: number; pbis: number }
|
||||
}
|
||||
|
||||
function ArchiveButton({ product }: { product: Product }) {
|
||||
const [pending, startTransition] = useTransition()
|
||||
|
||||
function handleToggle() {
|
||||
startTransition(() => adminArchiveProductAction(product.id, !product.archived))
|
||||
}
|
||||
|
||||
return (
|
||||
<Button variant="outline" size="sm" onClick={handleToggle} disabled={pending}>
|
||||
{product.archived ? 'Herstel' : 'Archiveer'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function DeleteDialog({ product }: { product: Product }) {
|
||||
const [pending, startTransition] = useTransition()
|
||||
|
||||
function handleDelete() {
|
||||
startTransition(() => adminDeleteProductAction(product.id))
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger render={<Button variant="destructive" size="sm" />}>
|
||||
Verwijder
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Product verwijderen</DialogTitle>
|
||||
</DialogHeader>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Weet je zeker dat je <strong>{product.name}</strong> wilt verwijderen?
|
||||
Dit verwijdert ook alle PBI's, stories en taken. Dit kan niet ongedaan worden gemaakt.
|
||||
</p>
|
||||
<DialogFooter>
|
||||
<DialogClose render={<Button variant="outline" />}>Annuleer</DialogClose>
|
||||
<Button variant="destructive" onClick={handleDelete} disabled={pending}>
|
||||
{pending ? 'Verwijderen…' : 'Verwijderen'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export function ProductsTable({ products }: { products: Product[] }) {
|
||||
return (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Naam</TableHead>
|
||||
<TableHead>Eigenaar</TableHead>
|
||||
<TableHead>Leden</TableHead>
|
||||
<TableHead>PBI's</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Aangemaakt</TableHead>
|
||||
<TableHead className="text-right">Acties</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{products.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center text-muted-foreground py-8">
|
||||
Geen producten gevonden
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
{products.map(product => (
|
||||
<TableRow key={product.id}>
|
||||
<TableCell className="font-medium">{product.name}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{product.user.username}</TableCell>
|
||||
<TableCell className="text-sm">{product._count.members}</TableCell>
|
||||
<TableCell className="text-sm">{product._count.pbis}</TableCell>
|
||||
<TableCell>
|
||||
{product.archived ? (
|
||||
<Badge className="bg-muted text-muted-foreground">Gearchiveerd</Badge>
|
||||
) : (
|
||||
<Badge className="bg-status-done text-white border-transparent">Actief</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{new Date(product.created_at).toLocaleDateString('nl-NL')}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<ArchiveButton product={product} />
|
||||
<DeleteDialog product={product} />
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue