f1c4953a63
- Restructure: move backend from new_project/ to backend/ - Add full React/TypeScript frontend (37 pages, 17 services, 16 type defs, 11 query hooks) - Add docs/ with SRS specs, user stories, and workflow documentation - Update .gitignore for new directory layout Workflows implemented: WF1 User Signup, WF2 Placement Test, WF3 Exam Configuration, WF4 General English Exam, WF5 Course Generation, WF6 Entity Student Onboarding, AI Course Generation, Adaptive Learning Engine UI, White-Label Branding, Score Release Made-with: Cursor
384 lines
18 KiB
TypeScript
384 lines
18 KiB
TypeScript
import { useState } from "react";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import {
|
|
Search, Loader2, UserCog, Shield, Key, Eye, ChevronRight, Users,
|
|
} from "lucide-react";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { rolesService } from "@/services/roles.service";
|
|
import type { UserWithRoles, UserRoleDetail, Role, Permission } from "@/types/role-permission";
|
|
|
|
const ROLE_COLORS = [
|
|
"bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
|
|
"bg-violet-100 text-violet-700 dark:bg-violet-900 dark:text-violet-300",
|
|
"bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300",
|
|
"bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300",
|
|
"bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300",
|
|
"bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300",
|
|
"bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300",
|
|
];
|
|
|
|
function roleColor(idx: number) {
|
|
return ROLE_COLORS[idx % ROLE_COLORS.length];
|
|
}
|
|
|
|
function initials(name: string) {
|
|
return name.split(" ").map(w => w[0]).join("").toUpperCase().slice(0, 2);
|
|
}
|
|
|
|
const CATEGORY_BADGE: Record<string, string> = {
|
|
exam: "bg-violet-100 text-violet-700",
|
|
user: "bg-blue-100 text-blue-700",
|
|
entity: "bg-emerald-100 text-emerald-700",
|
|
assignment: "bg-amber-100 text-amber-700",
|
|
classroom: "bg-rose-100 text-rose-700",
|
|
payment: "bg-cyan-100 text-cyan-700",
|
|
report: "bg-orange-100 text-orange-700",
|
|
};
|
|
|
|
function catBadge(cat: string) {
|
|
return CATEGORY_BADGE[cat.toLowerCase()] ?? "bg-gray-100 text-gray-700";
|
|
}
|
|
|
|
export default function UserRoles() {
|
|
const { toast } = useToast();
|
|
const qc = useQueryClient();
|
|
const [search, setSearch] = useState("");
|
|
const [roleFilter, setRoleFilter] = useState("all");
|
|
|
|
const [editOpen, setEditOpen] = useState(false);
|
|
const [editUserId, setEditUserId] = useState<number | null>(null);
|
|
const [editRoleIds, setEditRoleIds] = useState<Set<number>>(new Set());
|
|
|
|
const [viewOpen, setViewOpen] = useState(false);
|
|
const [viewUserId, setViewUserId] = useState<number | null>(null);
|
|
|
|
const usersQ = useQuery({
|
|
queryKey: ["users-with-roles", search, roleFilter],
|
|
queryFn: () => rolesService.listUsersWithRoles({
|
|
...(search ? { search } : {}),
|
|
...(roleFilter !== "all" ? { role_id: Number(roleFilter) } : {}),
|
|
size: 200,
|
|
}),
|
|
});
|
|
const rolesQ = useQuery({ queryKey: ["roles"], queryFn: () => rolesService.listRoles() });
|
|
const viewQ = useQuery({
|
|
queryKey: ["user-roles-detail", viewUserId],
|
|
queryFn: () => rolesService.getUserRoles(viewUserId!),
|
|
enabled: viewUserId !== null,
|
|
});
|
|
|
|
const users: UserWithRoles[] = usersQ.data?.data ?? [];
|
|
const allRoles: Role[] = rolesQ.data?.data ?? [];
|
|
|
|
const saveRolesMut = useMutation({
|
|
mutationFn: ({ userId, roleIds }: { userId: number; roleIds: number[] }) =>
|
|
rolesService.updateUserRoles(userId, roleIds),
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ["users-with-roles"] });
|
|
qc.invalidateQueries({ queryKey: ["roles"] });
|
|
setEditOpen(false);
|
|
toast({ title: "Roles updated successfully" });
|
|
},
|
|
onError: () => toast({ title: "Failed to update roles", variant: "destructive" }),
|
|
});
|
|
|
|
const loading = usersQ.isLoading || rolesQ.isLoading;
|
|
|
|
const totalWithRoles = users.filter(u => u.role_ids.length > 0).length;
|
|
const totalWithoutRoles = users.filter(u => u.role_ids.length === 0).length;
|
|
|
|
const openEditRoles = (u: UserWithRoles) => {
|
|
setEditUserId(u.id);
|
|
setEditRoleIds(new Set(u.role_ids));
|
|
setEditOpen(true);
|
|
};
|
|
|
|
const openViewPerms = (u: UserWithRoles) => {
|
|
setViewUserId(u.id);
|
|
setViewOpen(true);
|
|
};
|
|
|
|
const toggleRole = (rid: number) => {
|
|
setEditRoleIds(prev => {
|
|
const s = new Set(prev);
|
|
if (s.has(rid)) s.delete(rid); else s.add(rid);
|
|
return s;
|
|
});
|
|
};
|
|
|
|
const handleSave = () => {
|
|
if (editUserId !== null) {
|
|
saveRolesMut.mutate({ userId: editUserId, roleIds: Array.from(editRoleIds) });
|
|
}
|
|
};
|
|
|
|
const viewDetail: UserRoleDetail | undefined = viewQ.data;
|
|
const effectivePerms: Permission[] = viewDetail?.effective_permissions ?? [];
|
|
const permsByCategory = effectivePerms.reduce<Record<string, Permission[]>>((acc, p) => {
|
|
const cat = p.category || "General";
|
|
(acc[cat] ??= []).push(p);
|
|
return acc;
|
|
}, {});
|
|
|
|
if (loading) {
|
|
return <div className="flex items-center justify-center min-h-[400px]"><Loader2 className="h-8 w-8 animate-spin text-primary" /></div>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold flex items-center gap-2">
|
|
<UserCog className="h-7 w-7 text-primary" />
|
|
User Roles
|
|
</h1>
|
|
<p className="text-muted-foreground">Assign roles to users and view their effective permissions.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
|
<Card>
|
|
<CardContent className="pt-5 pb-4 flex items-center gap-3">
|
|
<div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center"><Users className="h-5 w-5 text-primary" /></div>
|
|
<div><p className="text-xl font-bold">{users.length}</p><p className="text-xs text-muted-foreground">Total Users</p></div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="pt-5 pb-4 flex items-center gap-3">
|
|
<div className="h-10 w-10 rounded-lg bg-emerald-500/10 flex items-center justify-center"><Shield className="h-5 w-5 text-emerald-500" /></div>
|
|
<div><p className="text-xl font-bold">{totalWithRoles}</p><p className="text-xs text-muted-foreground">With Roles</p></div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="pt-5 pb-4 flex items-center gap-3">
|
|
<div className="h-10 w-10 rounded-lg bg-amber-500/10 flex items-center justify-center"><UserCog className="h-5 w-5 text-amber-500" /></div>
|
|
<div><p className="text-xl font-bold">{totalWithoutRoles}</p><p className="text-xs text-muted-foreground">No Roles</p></div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="pt-5 pb-4 flex items-center gap-3">
|
|
<div className="h-10 w-10 rounded-lg bg-violet-500/10 flex items-center justify-center"><Key className="h-5 w-5 text-violet-500" /></div>
|
|
<div><p className="text-xl font-bold">{allRoles.length}</p><p className="text-xs text-muted-foreground">Available Roles</p></div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-wrap gap-3">
|
|
<div className="relative max-w-xs w-full">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input placeholder="Search users..." className="pl-9" value={search} onChange={e => setSearch(e.target.value)} />
|
|
</div>
|
|
<Select value={roleFilter} onValueChange={setRoleFilter}>
|
|
<SelectTrigger className="w-[200px]">
|
|
<SelectValue placeholder="Filter by role" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Roles</SelectItem>
|
|
{allRoles.map(r => (
|
|
<SelectItem key={r.id} value={String(r.id)}>{r.name}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Users Table */}
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>User</TableHead>
|
|
<TableHead>Email / Login</TableHead>
|
|
<TableHead>Assigned Roles</TableHead>
|
|
<TableHead className="text-center">Permissions</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{users.length === 0 && (
|
|
<TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-12">No users found.</TableCell></TableRow>
|
|
)}
|
|
{users.map(u => (
|
|
<TableRow key={u.id} className="group">
|
|
<TableCell>
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarFallback className="text-xs bg-primary/10 text-primary font-medium">{initials(u.name)}</AvatarFallback>
|
|
</Avatar>
|
|
<span className="font-medium">{u.name}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground text-sm">{u.email || u.login}</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-1">
|
|
{u.roles.length === 0 && <span className="text-xs text-muted-foreground italic">No roles</span>}
|
|
{u.roles.map((r, i) => (
|
|
<Badge key={r.id} variant="outline" className={`text-[11px] px-1.5 py-0 ${roleColor(i)}`}>
|
|
<Shield className="h-2.5 w-2.5 mr-0.5" />{r.name}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<Badge variant="secondary" className="text-xs">{u.effective_permission_count}</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex justify-end gap-1">
|
|
<Tooltip><TooltipTrigger asChild>
|
|
<Button size="sm" variant="ghost" className="h-8 gap-1 text-xs" onClick={() => openViewPerms(u)}>
|
|
<Eye className="h-3.5 w-3.5" /> View
|
|
</Button>
|
|
</TooltipTrigger><TooltipContent>View effective permissions</TooltipContent></Tooltip>
|
|
<Tooltip><TooltipTrigger asChild>
|
|
<Button size="sm" variant="outline" className="h-8 gap-1 text-xs" onClick={() => openEditRoles(u)}>
|
|
<UserCog className="h-3.5 w-3.5" /> Assign <ChevronRight className="h-3 w-3" />
|
|
</Button>
|
|
</TooltipTrigger><TooltipContent>Manage role assignments</TooltipContent></Tooltip>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* ── Assign Roles Dialog ── */}
|
|
<Dialog open={editOpen} onOpenChange={o => { setEditOpen(o); if (!o) setEditUserId(null); }}>
|
|
<DialogContent className="max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<UserCog className="h-5 w-5 text-primary" />
|
|
Assign Roles
|
|
</DialogTitle>
|
|
<CardDescription>
|
|
Toggle roles for user: <strong>{users.find(u => u.id === editUserId)?.name}</strong>
|
|
</CardDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-2 max-h-[50vh] overflow-y-auto pr-1">
|
|
{allRoles.length === 0 && <p className="text-sm text-muted-foreground text-center py-8">No roles available. Create roles first.</p>}
|
|
{allRoles.map((r, i) => (
|
|
<label key={r.id} className={`flex items-center gap-3 px-4 py-3 rounded-lg border cursor-pointer transition-all ${
|
|
editRoleIds.has(r.id)
|
|
? "border-primary/40 bg-primary/5 shadow-sm"
|
|
: "border-border hover:border-muted-foreground/30 hover:bg-muted/30"
|
|
}`}>
|
|
<Switch checked={editRoleIds.has(r.id)} onCheckedChange={() => toggleRole(r.id)} />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="outline" className={`text-[10px] px-1.5 py-0 ${roleColor(i)}`}>
|
|
<Shield className="h-2.5 w-2.5 mr-0.5" />{r.name}
|
|
</Badge>
|
|
<span className="text-xs text-muted-foreground">{r.permissions.length} permission{r.permissions.length !== 1 ? "s" : ""}</span>
|
|
</div>
|
|
{r.description && <p className="text-xs text-muted-foreground mt-0.5 truncate">{r.description}</p>}
|
|
</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
<DialogFooter>
|
|
<div className="flex items-center gap-2 mr-auto text-sm text-muted-foreground">
|
|
<Shield className="h-4 w-4" /> {editRoleIds.size} of {allRoles.length} selected
|
|
</div>
|
|
<Button variant="outline" onClick={() => setEditOpen(false)}>Cancel</Button>
|
|
<Button disabled={saveRolesMut.isPending} onClick={handleSave}>
|
|
{saveRolesMut.isPending ? <Loader2 className="h-4 w-4 mr-1 animate-spin" /> : null}
|
|
Save Roles
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* ── View Effective Permissions Dialog ── */}
|
|
<Dialog open={viewOpen} onOpenChange={o => { setViewOpen(o); if (!o) setViewUserId(null); }}>
|
|
<DialogContent className="max-w-2xl max-h-[85vh]">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<Key className="h-5 w-5 text-primary" />
|
|
Effective Permissions
|
|
</DialogTitle>
|
|
{viewDetail && (
|
|
<CardDescription>
|
|
<strong>{viewDetail.user.name}</strong> ({viewDetail.user.login})
|
|
</CardDescription>
|
|
)}
|
|
</DialogHeader>
|
|
{viewQ.isLoading ? (
|
|
<div className="flex justify-center py-12"><Loader2 className="h-6 w-6 animate-spin text-primary" /></div>
|
|
) : viewDetail ? (
|
|
<div className="space-y-4 overflow-y-auto max-h-[60vh] pr-1">
|
|
{/* Assigned roles summary */}
|
|
<div>
|
|
<p className="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wider">Assigned Roles</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{viewDetail.roles.filter(r => r.assigned).map((r, i) => (
|
|
<Badge key={r.id} variant="outline" className={`${roleColor(i)} text-xs px-2 py-0.5`}>
|
|
<Shield className="h-3 w-3 mr-1" />{r.name}
|
|
<span className="ml-1 text-[10px] opacity-70">({r.permission_count})</span>
|
|
</Badge>
|
|
))}
|
|
{viewDetail.roles.filter(r => r.assigned).length === 0 && (
|
|
<span className="text-sm text-muted-foreground italic">No roles assigned</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Permissions grouped by category */}
|
|
<div>
|
|
<p className="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wider">
|
|
Effective Permissions ({effectivePerms.length})
|
|
</p>
|
|
{effectivePerms.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground italic py-4 text-center">No permissions (assign roles to grant permissions)</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{Object.entries(permsByCategory).map(([cat, perms]) => (
|
|
<Card key={cat} className="border-muted">
|
|
<CardHeader className="py-2 px-4">
|
|
<div className="flex items-center gap-2">
|
|
<Badge className={`${catBadge(cat)} font-medium text-[10px]`}>{cat}</Badge>
|
|
<span className="text-xs text-muted-foreground">{perms.length}</span>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="px-4 pb-3 pt-0">
|
|
<div className="grid gap-1">
|
|
{perms.map(p => (
|
|
<div key={p.id} className="flex items-center gap-2 py-1">
|
|
<div className="h-5 w-5 rounded bg-emerald-500/15 flex items-center justify-center">
|
|
<Key className="h-2.5 w-2.5 text-emerald-600" />
|
|
</div>
|
|
<code className="text-[10px] font-mono bg-muted px-1 rounded text-muted-foreground">{p.code}</code>
|
|
<span className="text-xs">{p.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setViewOpen(false)}>Close</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|