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

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

@ -139,11 +139,16 @@ export function UserManagement({ currentUser }: { currentUser: { id: string } |
No users found. No users found.
</TableCell> </TableCell>
</TableRow> </TableRow>
{filteredUsers.map((user) => ( {filteredUsers.map((user) => {
const displayName = user.name ?? user.email;
const isCurrentUser = user.id === currentUser?.id;
const isBanned = Boolean(user.banned);
return (
<TableRow key={user.id}> <TableRow key={user.id}>
<TableCell> <TableCell>
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-medium">{user.name ?? user.email}</span> <span className="font-medium">{displayName}</span>
<span className="text-sm text-muted-foreground">{user.email}</span> <span className="text-sm text-muted-foreground">{user.email}</span>
</div> </div>
</TableCell> </TableCell>
@ -151,10 +156,10 @@ export function UserManagement({ currentUser }: { currentUser: { id: string } |
<Badge>{user.role}</Badge> <Badge>{user.role}</Badge>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Badge variant="outline" className={cn("text-red-500 border-red-500", { hidden: !user.banned })}> <Badge variant="outline" className={cn("text-red-500 border-red-500", { hidden: !isBanned })}>
Banned Banned
</Badge> </Badge>
<Badge variant="outline" className={cn("bg-success/10 text-success", { hidden: user.banned })}> <Badge variant="outline" className={cn("bg-success/10 text-success", { hidden: isBanned })}>
Active Active
</Badge> </Badge>
</TableCell> </TableCell>
@ -164,7 +169,7 @@ export function UserManagement({ currentUser }: { currentUser: { id: string } |
variant="ghost" variant="ghost"
size="icon" size="icon"
title="Demote to User" title="Demote to User"
className={cn({ hidden: user.role !== "admin" || user.id === currentUser?.id })} className={cn({ hidden: user.role !== "admin" || isCurrentUser })}
onClick={() => setRoleMutation.mutate({ userId: user.id, role: "user" })} onClick={() => setRoleMutation.mutate({ userId: user.id, role: "user" })}
> >
<ShieldAlert className="h-4 w-4" /> <ShieldAlert className="h-4 w-4" />
@ -173,7 +178,7 @@ export function UserManagement({ currentUser }: { currentUser: { id: string } |
variant="ghost" variant="ghost"
size="icon" size="icon"
title="Promote to Admin" title="Promote to Admin"
className={cn({ hidden: user.role === "admin" || user.id === currentUser?.id })} className={cn({ hidden: user.role === "admin" || isCurrentUser })}
onClick={() => setRoleMutation.mutate({ userId: user.id, role: "admin" })} onClick={() => setRoleMutation.mutate({ userId: user.id, role: "admin" })}
> >
<Shield className="h-4 w-4" /> <Shield className="h-4 w-4" />
@ -183,8 +188,8 @@ export function UserManagement({ currentUser }: { currentUser: { id: string } |
variant="ghost" variant="ghost"
size="icon" size="icon"
title="Unban user" title="Unban user"
className={cn({ hidden: !user.banned || user.id === currentUser?.id })} className={cn({ hidden: !isBanned || isCurrentUser })}
onClick={() => setUserToBan({ id: user.id, name: user.name ?? user.email, isBanned: true })} onClick={() => setUserToBan({ id: user.id, name: displayName, isBanned: true })}
> >
<UserCheck className="h-4 w-4" /> <UserCheck className="h-4 w-4" />
</Button> </Button>
@ -192,8 +197,8 @@ export function UserManagement({ currentUser }: { currentUser: { id: string } |
variant="ghost" variant="ghost"
size="icon" size="icon"
title="Ban user" title="Ban user"
className={cn({ hidden: !!user.banned || user.id === currentUser?.id })} className={cn({ hidden: isBanned || isCurrentUser })}
onClick={() => setUserToBan({ id: user.id, name: user.name ?? user.email, isBanned: false })} onClick={() => setUserToBan({ id: user.id, name: displayName, isBanned: false })}
> >
<Ban className="h-4 w-4" /> <Ban className="h-4 w-4" />
</Button> </Button>
@ -202,7 +207,7 @@ export function UserManagement({ currentUser }: { currentUser: { id: string } |
variant="ghost" variant="ghost"
size="icon" size="icon"
title="Delete User" title="Delete User"
className={cn({ hidden: user.id === currentUser?.id })} className={cn({ hidden: isCurrentUser })}
onClick={() => setUserToDelete(user.id)} onClick={() => setUserToDelete(user.id)}
> >
<Trash2 className="h-4 w-4 text-destructive" /> <Trash2 className="h-4 w-4 text-destructive" />
@ -215,7 +220,7 @@ export function UserManagement({ currentUser }: { currentUser: { id: string } |
onClick={() => onClick={() =>
setUserToManageAccounts({ setUserToManageAccounts({
id: user.id, id: user.id,
name: user.name ?? user.email, name: displayName,
accounts: user.accounts, accounts: user.accounts,
}) })
} }
@ -225,7 +230,8 @@ export function UserManagement({ currentUser }: { currentUser: { id: string } |
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} );
})}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>