"use client" import { motion } from "framer-motion" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { fadeIn, slideUp, stagger, cardHover, cardHoverTarget, buttonTap, buttonTapTarget, staggerItem } from "@/lib/animations" import { Plus, Shield, Check, X, Search, MoreHorizontal, Edit3 } from "lucide-react" const roles = [ { name: "Admin", users: 4, permissions: ["all"] as const }, { name: "Editor", users: 12, permissions: ["read", "write", "delete"] as const }, { name: "Viewer", users: 48, permissions: ["read"] as const }, { name: "Moderator", users: 8, permissions: ["read", "write", "moderate"] as const }, { name: "Support", users: 15, permissions: ["read", "write", "tickets"] as const }, ] const permissions = ["Read", "Write", "Delete", "Manage Users", "Moderate", "Settings", "Billing", "Reports", "API Access", "Audit Logs"] const permissionMatrix: Record = { Admin: permissions, Editor: ["Read", "Write", "Delete", "Reports"], Viewer: ["Read"], Moderator: ["Read", "Write", "Moderate", "Reports"], Support: ["Read", "Write", "Moderate"], } const customRoles = [ { name: "Content Manager", users: 6, created: "Mar 2025", status: "Active" as const }, { name: "Auditor", users: 3, created: "Jan 2026", status: "Active" as const }, { name: "Developer", users: 22, created: "Feb 2025", status: "Active" as const }, ] export default function RoleManagement() { return (

Role Management

Permission Matrix {permissionMatrix && Object.keys(permissionMatrix).map((role) => ( ))} {permissions.map((perm) => ( {Object.entries(permissionMatrix).map(([role, perms]) => ( ))} ))}

Permission	{role}
{perm}	{perms.includes(perm) ? ( ) : ( )}

Custom Roles

Role Users Created Status

{customRoles.map((r) => (

{r.name} {r.users} {r.created} {r.status}

))}

) }

Permission	Admin	Editor	Viewer	Moderator	Support
Read
Write
Delete
Manage Users
Moderate
Settings
Billing
Reports
API Access
Audit Logs

Permission	Admin	Editor	Viewer	Moderator	Support
Read
Write
Delete
Manage Users
Moderate
Settings
Billing
Reports
API Access
Audit Logs