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
30
app/(app)/admin/jobs/page.tsx
Normal file
30
app/(app)/admin/jobs/page.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { requireAdmin } from '@/lib/auth-guard'
|
||||||
|
import { prisma } from '@/lib/prisma'
|
||||||
|
import { JobsTable } from '@/components/admin/jobs-table'
|
||||||
|
|
||||||
|
export default async function AdminJobsPage() {
|
||||||
|
await requireAdmin()
|
||||||
|
|
||||||
|
const jobs = await prisma.claudeJob.findMany({
|
||||||
|
orderBy: { created_at: 'desc' },
|
||||||
|
take: 100,
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
kind: true,
|
||||||
|
status: true,
|
||||||
|
created_at: true,
|
||||||
|
branch: true,
|
||||||
|
pr_url: true,
|
||||||
|
error: true,
|
||||||
|
user: { select: { username: true } },
|
||||||
|
product: { select: { name: true } },
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold mb-4">Claude Jobs</h1>
|
||||||
|
<JobsTable jobs={jobs} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
26
app/(app)/admin/products/page.tsx
Normal file
26
app/(app)/admin/products/page.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { requireAdmin } from '@/lib/auth-guard'
|
||||||
|
import { prisma } from '@/lib/prisma'
|
||||||
|
import { ProductsTable } from '@/components/admin/products-table'
|
||||||
|
|
||||||
|
export default async function AdminProductsPage() {
|
||||||
|
await requireAdmin()
|
||||||
|
|
||||||
|
const products = await prisma.product.findMany({
|
||||||
|
orderBy: { created_at: 'desc' },
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
name: true,
|
||||||
|
archived: true,
|
||||||
|
created_at: true,
|
||||||
|
user: { select: { username: true } },
|
||||||
|
_count: { select: { members: true, pbis: true } },
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-semibold mb-4">Producten</h1>
|
||||||
|
<ProductsTable products={products} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
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