feat(ST-111ci8t4): /admin/users pagina met tabel, role-editor en delete-dialog
- app/(app)/admin/layout.tsx: admin-sidebar met links (Gebruikers/Claude Jobs/Producten) - app/(app)/admin/page.tsx: redirect naar /admin/users - app/(app)/admin/users/page.tsx: server component, query users+roles, geeft userId door - components/admin/users-table.tsx: client component met UsersTable, RoleBadge, RolesDialog (checkboxes, eigen ADMIN-rol geblokkeerd), DeleteDialog (confirm), ResetToggle — alles via useTransition + server actions
This commit is contained in:
Scrum4Me Agent
parent
5fd56e3f67
commit
31edfa8194
4 changed files with 279 additions and 0 deletions
239
components/admin/users-table.tsx
Normal file
239
components/admin/users-table.tsx
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { Role } from '@prisma/client'
|
||||
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 {
|
||||
deleteUserAction,
|
||||
updateUserRolesAction,
|
||||
setMustResetPasswordAction,
|
||||
} from '@/actions/admin/users'
|
||||
|
||||
type UserWithRoles = {
|
||||
id: string
|
||||
username: string
|
||||
email: string | null
|
||||
must_reset_password: boolean
|
||||
created_at: Date
|
||||
roles: { role: Role }[]
|
||||
}
|
||||
|
||||
const ALL_ROLES: Role[] = [Role.PRODUCT_OWNER, Role.SCRUM_MASTER, Role.DEVELOPER, Role.ADMIN]
|
||||
|
||||
const ROLE_LABEL: Record<Role, string> = {
|
||||
PRODUCT_OWNER: 'Product Owner',
|
||||
SCRUM_MASTER: 'Scrum Master',
|
||||
DEVELOPER: 'Developer',
|
||||
ADMIN: 'Admin',
|
||||
}
|
||||
|
||||
function RoleBadge({ role }: { role: Role }) {
|
||||
const cls =
|
||||
role === Role.ADMIN
|
||||
? 'bg-status-done text-white border-transparent'
|
||||
: role === Role.PRODUCT_OWNER
|
||||
? 'bg-status-in-progress text-white border-transparent'
|
||||
: role === Role.SCRUM_MASTER
|
||||
? 'bg-priority-medium text-white border-transparent'
|
||||
: 'bg-secondary text-secondary-foreground'
|
||||
return <Badge className={cls}>{ROLE_LABEL[role]}</Badge>
|
||||
}
|
||||
|
||||
function RolesDialog({ user, currentUserId }: { user: UserWithRoles; currentUserId: string }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [selected, setSelected] = useState<Set<Role>>(new Set(user.roles.map(r => r.role)))
|
||||
const [pending, startTransition] = useTransition()
|
||||
const isSelf = user.id === currentUserId
|
||||
|
||||
function toggle(role: Role) {
|
||||
setSelected(prev => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(role)) next.delete(role)
|
||||
else next.add(role)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
startTransition(async () => {
|
||||
await updateUserRolesAction(user.id, Array.from(selected))
|
||||
setOpen(false)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger render={<Button variant="outline" size="sm" />}>
|
||||
Rollen
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Rollen voor {user.username}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-2 py-2">
|
||||
{ALL_ROLES.map(role => {
|
||||
const isDisabled = isSelf && role === Role.ADMIN && selected.has(role)
|
||||
return (
|
||||
<label key={role} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.has(role)}
|
||||
disabled={isDisabled}
|
||||
onChange={() => toggle(role)}
|
||||
className="rounded border-border"
|
||||
/>
|
||||
<span className="text-sm">{ROLE_LABEL[role]}</span>
|
||||
{isDisabled && <span className="text-xs text-muted-foreground">(eigen rol)</span>}
|
||||
</label>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<DialogFooter showCloseButton>
|
||||
<Button onClick={handleSave} disabled={pending}>
|
||||
{pending ? 'Opslaan…' : 'Opslaan'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function DeleteDialog({ user, currentUserId }: { user: UserWithRoles; currentUserId: string }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [pending, startTransition] = useTransition()
|
||||
const isSelf = user.id === currentUserId
|
||||
|
||||
function handleDelete() {
|
||||
startTransition(async () => {
|
||||
await deleteUserAction(user.id)
|
||||
setOpen(false)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger
|
||||
render={
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
disabled={isSelf}
|
||||
title={isSelf ? 'Zelfverwijdering niet toegestaan' : undefined}
|
||||
/>
|
||||
}
|
||||
>
|
||||
Verwijder
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Gebruiker verwijderen</DialogTitle>
|
||||
</DialogHeader>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Weet je zeker dat je <strong>{user.username}</strong> wilt verwijderen? 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>
|
||||
)
|
||||
}
|
||||
|
||||
function ResetToggle({ user }: { user: UserWithRoles }) {
|
||||
const [pending, startTransition] = useTransition()
|
||||
|
||||
function handleToggle() {
|
||||
startTransition(async () => {
|
||||
await setMustResetPasswordAction(user.id, !user.must_reset_password)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant={user.must_reset_password ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={handleToggle}
|
||||
disabled={pending}
|
||||
title="Forceer wachtwoord-reset bij volgende login"
|
||||
>
|
||||
{user.must_reset_password ? 'Reset gepland' : 'Reset pw'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function UsersTable({
|
||||
users,
|
||||
currentUserId,
|
||||
}: {
|
||||
users: UserWithRoles[]
|
||||
currentUserId: string
|
||||
}) {
|
||||
return (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Gebruiker</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Rollen</TableHead>
|
||||
<TableHead>Reset pw</TableHead>
|
||||
<TableHead>Aangemaakt</TableHead>
|
||||
<TableHead className="text-right">Acties</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{users.map(user => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell className="font-medium">{user.username}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{user.email ?? '—'}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{user.roles.map(r => (
|
||||
<RoleBadge key={r.role} role={r.role} />
|
||||
))}
|
||||
{user.roles.length === 0 && <span className="text-muted-foreground text-xs">Geen</span>}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{user.must_reset_password ? (
|
||||
<Badge className="bg-priority-high text-white border-transparent">Ja</Badge>
|
||||
) : (
|
||||
<span className="text-muted-foreground text-xs">—</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground text-xs">
|
||||
{new Date(user.created_at).toLocaleDateString('nl-NL')}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<ResetToggle user={user} />
|
||||
<RolesDialog user={user} currentUserId={currentUserId} />
|
||||
<DeleteDialog user={user} currentUserId={currentUserId} />
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue