Add roles and users admin UI with role management API
Backend: - GET /v1/users (list company users) - GET/POST/PATCH/DELETE /v1/roles (role CRUD with permissions) - GET/POST/DELETE /v1/users/:userId/roles (role assignment) - GET /v1/me/permissions (current user's effective permissions) Frontend: - Roles list page with kebab menu (edit permissions, delete custom) - Role detail page with grouped permission checkboxes and inheritance note - New role page with auto-generated slug - Users list page showing assigned roles per user - Manage Roles dialog for adding/removing roles per user - Sidebar: Admin section with Users, Roles, Help links
This commit is contained in:
Ryan Moon
195
packages/admin/src/routes/_authenticated/users.tsx
Normal file
195
packages/admin/src/routes/_authenticated/users.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import { createFileRoute, useNavigate } from '@tanstack/react-router'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { useState } from 'react'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { roleListOptions, rbacKeys, rbacMutations } from '@/api/rbac'
|
||||
import { userRolesOptions, type UserRecord } from '@/api/users'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { MoreVertical, Shield, Plus, X } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { queryOptions } from '@tanstack/react-query'
|
||||
|
||||
function userListOptions() {
|
||||
return queryOptions({
|
||||
queryKey: ['users'],
|
||||
queryFn: () => api.get<{ data: UserRecord[] }>('/v1/users'),
|
||||
})
|
||||
}
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/users')({
|
||||
component: UsersPage,
|
||||
})
|
||||
|
||||
function UserRoleBadges({ userId }: { userId: string }) {
|
||||
const { data } = useQuery(userRolesOptions(userId))
|
||||
const roles = data?.data ?? []
|
||||
|
||||
if (roles.length === 0) return <span className="text-sm text-muted-foreground">No roles</span>
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{roles.map((r) => (
|
||||
<Badge key={r.id} variant={r.isSystem ? 'secondary' : 'default'} className="text-xs">
|
||||
{r.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ManageRolesDialog({ user, open, onClose }: { user: UserRecord; open: boolean; onClose: () => void }) {
|
||||
const queryClient = useQueryClient()
|
||||
const { data: userRolesData } = useQuery(userRolesOptions(user.id))
|
||||
const { data: allRolesData } = useQuery(roleListOptions())
|
||||
const [selectedRoleId, setSelectedRoleId] = useState('')
|
||||
|
||||
const userRoles = userRolesData?.data ?? []
|
||||
const allRoles = allRolesData?.data ?? []
|
||||
const assignedIds = new Set(userRoles.map((r) => r.id))
|
||||
const availableRoles = allRoles.filter((r) => !assignedIds.has(r.id))
|
||||
|
||||
const assignMutation = useMutation({
|
||||
mutationFn: (roleId: string) => rbacMutations.assignRole(user.id, roleId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['users', user.id, 'roles'] })
|
||||
setSelectedRoleId('')
|
||||
toast.success('Role assigned')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const removeMutation = useMutation({
|
||||
mutationFn: (roleId: string) => rbacMutations.removeRole(user.id, roleId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['users', user.id, 'roles'] })
|
||||
toast.success('Role removed')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(o) => !o && onClose()}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Manage Roles — {user.firstName} {user.lastName}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium">Assigned Roles</p>
|
||||
{userRoles.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No roles assigned</p>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{userRoles.map((r) => (
|
||||
<div key={r.id} className="flex items-center justify-between p-2 rounded-md border">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">{r.name}</span>
|
||||
{r.isSystem && <Badge variant="secondary" className="text-xs">System</Badge>}
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => removeMutation.mutate(r.id)}>
|
||||
<X className="h-3 w-3 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{availableRoles.length > 0 && (
|
||||
<div className="flex gap-2">
|
||||
<Select value={selectedRoleId} onValueChange={setSelectedRoleId}>
|
||||
<SelectTrigger className="flex-1">
|
||||
<SelectValue placeholder="Select a role to add" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableRoles.map((r) => (
|
||||
<SelectItem key={r.id} value={r.id}>{r.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={!selectedRoleId || assignMutation.isPending}
|
||||
onClick={() => selectedRoleId && assignMutation.mutate(selectedRoleId)}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function UsersPage() {
|
||||
const { data, isLoading } = useQuery(userListOptions())
|
||||
const [managingUser, setManagingUser] = useState<UserRecord | null>(null)
|
||||
|
||||
const allUsers = data?.data ?? []
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold">Users</h1>
|
||||
|
||||
{managingUser && (
|
||||
<ManageRolesDialog user={managingUser} open={!!managingUser} onClose={() => setManagingUser(null)} />
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<p className="text-muted-foreground">Loading...</p>
|
||||
) : allUsers.length === 0 ? (
|
||||
<p className="text-muted-foreground py-8 text-center">No users found</p>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Roles</TableHead>
|
||||
<TableHead className="w-12"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{allUsers.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell className="font-medium">{user.firstName} {user.lastName}</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell><UserRoleBadges userId={user.id} /></TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setManagingUser(user)}>
|
||||
<Shield className="mr-2 h-4 w-4" />
|
||||
Manage Roles
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user