danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: users table

Browse source
This commit is contained in:
Nicolas Meienberger 2026-03-15 12:14:38 +01:00
parent 59fcce7e40
commit 4356ace665
1 changed files with 90 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

174
app/client/modules/settings/components/user-management.tsx
View file

@ -139,93 +139,99 @@ export function UserManagement({ currentUser }: { currentUser: { id: string } |
No users found. No users found.
</TableCell> </TableCell>
</TableRow> </TableRow>
{filteredUsers.map((user) => ( {filteredUsers.map((user) => {
<TableRow key={user.id}> const displayName = user.name ?? user.email;
<TableCell> const isCurrentUser = user.id === currentUser?.id;
<div className="flex flex-col"> const isBanned = Boolean(user.banned);
<span className="font-medium">{user.name ?? user.email}</span>
<span className="text-sm text-muted-foreground">{user.email}</span>
</div>
</TableCell>
<TableCell>
<Badge>{user.role}</Badge>
</TableCell>
<TableCell>
<Badge variant="outline" className={cn("text-red-500 border-red-500", { hidden: !user.banned })}>
Banned
</Badge>
<Badge variant="outline" className={cn("bg-success/10 text-success", { hidden: user.banned })}>
Active
</Badge>
</TableCell>
<TableCell className="text-right">
<div className={cn("flex justify-end gap-2")}>
<Button
variant="ghost"
size="icon"
title="Demote to User"
className={cn({ hidden: user.role !== "admin" || user.id === currentUser?.id })}
onClick={() => setRoleMutation.mutate({ userId: user.id, role: "user" })}
>
<ShieldAlert className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
title="Promote to Admin"
className={cn({ hidden: user.role === "admin" || user.id === currentUser?.id })}
onClick={() => setRoleMutation.mutate({ userId: user.id, role: "admin" })}
>
<Shield className="h-4 w-4" />
</Button>
<Button return (
variant="ghost" <TableRow key={user.id}>
size="icon" <TableCell>
title="Unban user" <div className="flex flex-col">
className={cn({ hidden: !user.banned || user.id === currentUser?.id })} <span className="font-medium">{displayName}</span>
onClick={() => setUserToBan({ id: user.id, name: user.name ?? user.email, isBanned: true })} <span className="text-sm text-muted-foreground">{user.email}</span>
> </div>
<UserCheck className="h-4 w-4" /> </TableCell>
</Button> <TableCell>
<Button <Badge>{user.role}</Badge>
variant="ghost" </TableCell>
size="icon" <TableCell>
title="Ban user" <Badge variant="outline" className={cn("text-red-500 border-red-500", { hidden: !isBanned })}>
className={cn({ hidden: !!user.banned || user.id === currentUser?.id })} Banned
onClick={() => setUserToBan({ id: user.id, name: user.name ?? user.email, isBanned: false })} </Badge>
> <Badge variant="outline" className={cn("bg-success/10 text-success", { hidden: isBanned })}>
<Ban className="h-4 w-4" /> Active
</Button> </Badge>
</TableCell>
<TableCell className="text-right">
<div className={cn("flex justify-end gap-2")}>
<Button
variant="ghost"
size="icon"
title="Demote to User"
className={cn({ hidden: user.role !== "admin" || isCurrentUser })}
onClick={() => setRoleMutation.mutate({ userId: user.id, role: "user" })}
>
<ShieldAlert className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
title="Promote to Admin"
className={cn({ hidden: user.role === "admin" || isCurrentUser })}
onClick={() => setRoleMutation.mutate({ userId: user.id, role: "admin" })}
>
<Shield className="h-4 w-4" />
</Button>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
title="Delete User" title="Unban user"
className={cn({ hidden: user.id === currentUser?.id })} className={cn({ hidden: !isBanned || isCurrentUser })}
onClick={() => setUserToDelete(user.id)} onClick={() => setUserToBan({ id: user.id, name: displayName, isBanned: true })}
> >
<Trash2 className="h-4 w-4 text-destructive" /> <UserCheck className="h-4 w-4" />
</Button> </Button>
<Button
variant="ghost"
size="icon"
title="Ban user"
className={cn({ hidden: isBanned || isCurrentUser })}
onClick={() => setUserToBan({ id: user.id, name: displayName, isBanned: false })}
>
<Ban className="h-4 w-4" />
</Button>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
title="Manage Accounts" title="Delete User"
onClick={() => className={cn({ hidden: isCurrentUser })}
setUserToManageAccounts({ onClick={() => setUserToDelete(user.id)}
id: user.id, >
name: user.name ?? user.email, <Trash2 className="h-4 w-4 text-destructive" />
accounts: user.accounts, </Button>
})
} <Button
> variant="ghost"
<KeyRound className="h-4 w-4" /> size="icon"
</Button> title="Manage Accounts"
</div> onClick={() =>
</TableCell> setUserToManageAccounts({
</TableRow> id: user.id,
))} name: displayName,
accounts: user.accounts,
})
}
>
<KeyRound className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
);
})}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>