From c6925bbbca2806dd3c7cf0097a036f0bfa76c1b6 Mon Sep 17 00:00:00 2001
From: alphaeusmote <41258468-alphaeusmote@users.noreply.replit.com>
Date: Thu, 10 Apr 2025 02:37:54 +0000
Subject: [PATCH] Add custom role management functionality.  This includes
 creating, reading, updating, and deleting custom roles.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9111ef36-26c8-4085-84ca-a35dc1fec1b5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7083d608-d6d3-4a6a-9a27-6286c5109627/a2c93ffa-6494-4413-93ca-36f98dc098cd.jpg
---
 client/src/pages/roles.tsx | 1075 +++++++++++++-----------------------
 server/routes.ts           |  138 ++++-
 2 files changed, 522 insertions(+), 691 deletions(-)

diff --git a/client/src/pages/roles.tsx b/client/src/pages/roles.tsx
index e0dd2b1..420772f 100644
--- a/client/src/pages/roles.tsx
+++ b/client/src/pages/roles.tsx
@@ -1,30 +1,23 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
-import { MainLayout } from "@/components/layouts/main-layout";
-import { useAuth } from "@/hooks/use-auth";
-import { apiRequest, queryClient } from "@/lib/queryClient";
+import { queryClient } from "@/lib/queryClient";
 import { useToast } from "@/hooks/use-toast";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { useAuth } from "@/hooks/use-auth";
+import { apiRequest } from "@/lib/queryClient";
 import { z } from "zod";
-import { CustomRole, InsertCustomRole, SystemRole, systemRoles } from "@shared/schema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { SystemRole, systemRoles, CustomRole } from "@shared/schema";
+
+// UI Components
 import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -33,6 +26,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  DialogClose,
 } from "@/components/ui/dialog";
 import {
   AlertDialog,
@@ -46,231 +40,129 @@ import {
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Loader2, MoreVertical, ShieldAlert, ShieldCheck, ShieldX, Lock, Key, FileText, Edit, Trash, Plus, Shield } from "lucide-react";
-import { formatDistanceToNow } from "date-fns";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 
-// Available permissions for custom roles
+import { Loader2, PlusCircle, Edit, Trash2, ShieldAlert, ShieldCheck } from "lucide-react";
+
+// Available permissions
 const availablePermissions = [
-  { id: "domain.read", label: "View Domains" },
-  { id: "domain.create", label: "Create Domains" },
-  { id: "domain.update", label: "Edit Domains" },
-  { id: "domain.delete", label: "Delete Domains" },
-  { id: "dnsrecord.read", label: "View DNS Records" },
-  { id: "dnsrecord.create", label: "Create DNS Records" },
-  { id: "dnsrecord.update", label: "Edit DNS Records" },
-  { id: "dnsrecord.delete", label: "Delete DNS Records" },
-  { id: "user.read", label: "View Users" },
-  { id: "user.create", label: "Create Users" },
-  { id: "user.update", label: "Edit Users" },
-  { id: "user.delete", label: "Delete Users" },
-  { id: "provider.read", label: "View DNS Providers" },
-  { id: "provider.create", label: "Add DNS Providers" },
-  { id: "provider.update", label: "Edit DNS Providers" },
-  { id: "provider.delete", label: "Remove DNS Providers" },
-  { id: "webhook.read", label: "View Webhooks" },
-  { id: "webhook.create", label: "Create Webhooks" },
-  { id: "webhook.update", label: "Edit Webhooks" },
-  { id: "webhook.delete", label: "Delete Webhooks" },
-  { id: "apitoken.read", label: "View API Tokens" },
-  { id: "apitoken.create", label: "Create API Tokens" },
-  { id: "apitoken.update", label: "Edit API Tokens" },
-  { id: "apitoken.delete", label: "Delete API Tokens" },
-  { id: "metrics.read", label: "View Metrics" },
-  { id: "history.read", label: "View DNS History" },
-  { id: "organization.read", label: "View Organizations" },
-  { id: "organization.create", label: "Create Organizations" },
-  { id: "organization.update", label: "Edit Organizations" },
-  { id: "organization.delete", label: "Delete Organizations" },
-  { id: "group.read", label: "View Groups" },
-  { id: "group.create", label: "Create Groups" },
-  { id: "group.update", label: "Edit Groups" },
-  { id: "group.delete", label: "Delete Groups" },
-  { id: "role.read", label: "View Roles" },
-  { id: "role.create", label: "Create Roles" },
-  { id: "role.update", label: "Edit Roles" },
-  { id: "role.delete", label: "Delete Roles" },
+  { id: "domains.view", label: "View Domains" },
+  { id: "domains.create", label: "Create Domains" },
+  { id: "domains.edit", label: "Edit Domains" },
+  { id: "domains.delete", label: "Delete Domains" },
+  { id: "records.view", label: "View DNS Records" },
+  { id: "records.create", label: "Create DNS Records" },
+  { id: "records.edit", label: "Edit DNS Records" },
+  { id: "records.delete", label: "Delete DNS Records" },
+  { id: "providers.view", label: "View Providers" },
+  { id: "providers.create", label: "Create Providers" },
+  { id: "providers.edit", label: "Edit Providers" },
+  { id: "providers.delete", label: "Delete Providers" },
+  { id: "webhooks.view", label: "View Webhooks" },
+  { id: "webhooks.create", label: "Create Webhooks" },
+  { id: "webhooks.edit", label: "Edit Webhooks" },
+  { id: "webhooks.delete", label: "Delete Webhooks" },
+  { id: "api-tokens.view", label: "View API Tokens" },
+  { id: "api-tokens.create", label: "Create API Tokens" },
+  { id: "api-tokens.edit", label: "Edit API Tokens" },
+  { id: "api-tokens.delete", label: "Delete API Tokens" },
+  { id: "organizations.view", label: "View Organizations" },
+  { id: "organizations.create", label: "Create Organizations" },
+  { id: "organizations.edit", label: "Edit Organizations" },
+  { id: "organizations.delete", label: "Delete Organizations" },
+  { id: "users.view", label: "View Users" },
+  { id: "users.create", label: "Create Users" },
+  { id: "users.edit", label: "Edit Users" },
+  { id: "users.delete", label: "Delete Users" },
+  { id: "roles.view", label: "View Roles" },
+  { id: "roles.create", label: "Create Roles" },
+  { id: "roles.edit", label: "Edit Roles" },
+  { id: "roles.delete", label: "Delete Roles" },
+  { id: "metrics.view", label: "View Metrics" },
+  { id: "history.view", label: "View History" },
 ];
 
-// Group permissions by category
-const permissionCategories = [
-  {
-    id: "domain",
-    name: "Domains",
-    permissions: availablePermissions.filter(p => p.id.startsWith("domain.")),
-  },
-  {
-    id: "dns",
-    name: "DNS Records",
-    permissions: availablePermissions.filter(p => p.id.startsWith("dnsrecord.")),
-  },
-  {
-    id: "user",
-    name: "Users",
-    permissions: availablePermissions.filter(p => p.id.startsWith("user.")),
-  },
-  {
-    id: "provider",
-    name: "DNS Providers",
-    permissions: availablePermissions.filter(p => p.id.startsWith("provider.")),
-  },
-  {
-    id: "webhook",
-    name: "Webhooks",
-    permissions: availablePermissions.filter(p => p.id.startsWith("webhook.")),
-  },
-  {
-    id: "apitoken",
-    name: "API Tokens",
-    permissions: availablePermissions.filter(p => p.id.startsWith("apitoken.")),
-  },
-  {
-    id: "organization",
-    name: "Organizations",
-    permissions: availablePermissions.filter(p => p.id.startsWith("organization.")),
-  },
-  {
-    id: "group",
-    name: "Groups",
-    permissions: availablePermissions.filter(p => p.id.startsWith("group.")),
-  },
-  {
-    id: "role",
-    name: "Roles",
-    permissions: availablePermissions.filter(p => p.id.startsWith("role.")),
-  },
-  {
-    id: "other",
-    name: "Other",
-    permissions: availablePermissions.filter(p => 
-      p.id.startsWith("metrics.") || p.id.startsWith("history.")),
-  },
-];
+// Default permissions for system roles
+const systemRolePermissions: Record<SystemRole, string[]> = {
+  admin: availablePermissions.map(p => p.id),
+  manager: [
+    "domains.view", "domains.create", "domains.edit", "domains.delete",
+    "records.view", "records.create", "records.edit", "records.delete",
+    "webhooks.view", "webhooks.create", "webhooks.edit", "webhooks.delete",
+    "api-tokens.view", "api-tokens.create", "api-tokens.edit", "api-tokens.delete",
+    "metrics.view", "history.view",
+  ],
+  user: [
+    "domains.view", 
+    "records.view", "records.create", "records.edit",
+    "webhooks.view",
+    "api-tokens.view",
+    "metrics.view", "history.view",
+  ],
+  readonly: [
+    "domains.view",
+    "records.view",
+    "webhooks.view",
+    "api-tokens.view",
+    "metrics.view", "history.view",
+  ],
+};
 
-// Zod schema for role form
+// Form validation schema
 const roleFormSchema = z.object({
-  name: z.string().min(3, "Name must be at least 3 characters"),
-  description: z.string().optional(),
+  name: z.string().min(3, "Name must be at least 3 characters").max(50, "Name cannot exceed 50 characters"),
+  description: z.string().max(255, "Description cannot exceed 255 characters").optional(),
   permissions: z.array(z.string()).min(1, "Select at least one permission"),
-  isActive: z.boolean().default(true),
 });
 
 type RoleFormValues = z.infer<typeof roleFormSchema>;
 
-// Role card component for system roles
+// System role card component
 const SystemRoleCard = ({ roleName }: { roleName: SystemRole }) => {
-  const roleInfo = {
-    admin: {
-      title: "Administrator",
-      description: "Full system access with all permissions",
-      icon: <ShieldAlert className="w-8 h-8 text-destructive" />,
-      color: "bg-destructive/10 text-destructive border-destructive/20",
-    },
-    manager: {
-      title: "Manager",
-      description: "Can manage domains and records, but not users or system settings",
-      icon: <ShieldCheck className="w-8 h-8 text-warning" />,
-      color: "bg-warning/10 text-warning border-warning/20",
-    },
-    user: {
-      title: "User",
-      description: "Can manage assigned domains and records",
-      icon: <Shield className="w-8 h-8 text-primary" />,
-      color: "bg-primary/10 text-primary border-primary/20",
-    },
-    readonly: {
-      title: "Read-only",
-      description: "View-only access to assigned domains and records",
-      icon: <ShieldX className="w-8 h-8 text-muted-foreground" />,
-      color: "bg-muted/10 text-muted-foreground border-muted/20",
-    },
-  }[roleName];
-
   return (
-    <Card>
-      <CardHeader className="pb-3">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-3">
-            {roleInfo.icon}
-            <div>
-              <CardTitle>{roleInfo.title}</CardTitle>
-              <CardDescription>System Role</CardDescription>
-            </div>
-          </div>
-          <Badge variant="outline" className={roleInfo.color}>
-            {roleName}
-          </Badge>
-        </div>
+    <Card className="mb-4">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <ShieldAlert className="h-5 w-5 text-primary" />
+          {roleName.charAt(0).toUpperCase() + roleName.slice(1)}
+          <Badge variant="outline" className="ml-2">System</Badge>
+        </CardTitle>
+        <CardDescription>
+          {roleName === "admin" && "Full access to all system features and settings"}
+          {roleName === "manager" && "Manage domains, records, and access to organizational resources"}
+          {roleName === "user" && "Standard user with ability to view and modify specific resources"}
+          {roleName === "readonly" && "View-only access to resources without modification permissions"}
+        </CardDescription>
       </CardHeader>
       <CardContent>
-        <p className="text-sm text-muted-foreground">{roleInfo.description}</p>
-
-        <div className="mt-3 pt-3 border-t">
-          <h4 className="text-sm font-medium mb-2">Permissions</h4>
-          {roleName === "admin" ? (
-            <div className="flex items-center">
-              <ShieldAlert className="w-4 h-4 mr-2 text-destructive" />
-              <span className="text-sm">All permissions</span>
-            </div>
-          ) : (
-            <div className="flex flex-wrap gap-1">
-              {roleName === "readonly" ? (
-                <Badge variant="outline" className="text-xs bg-muted/10">
-                  Read-only access
-                </Badge>
-              ) : roleName === "manager" ? (
-                <>
-                  <Badge variant="outline" className="text-xs bg-primary/10">
-                    Domain management
-                  </Badge>
-                  <Badge variant="outline" className="text-xs bg-primary/10">
-                    DNS record management
-                  </Badge>
-                  <Badge variant="outline" className="text-xs bg-primary/10">
-                    Webhook management
-                  </Badge>
-                </>
-              ) : (
-                <>
-                  <Badge variant="outline" className="text-xs bg-primary/10">
-                    Domain access
-                  </Badge>
-                  <Badge variant="outline" className="text-xs bg-primary/10">
-                    DNS record management
-                  </Badge>
-                </>
-              )}
-            </div>
-          )}
+        <div className="flex flex-wrap gap-2">
+          {systemRolePermissions[roleName].map((permission) => (
+            <Badge key={permission} variant="secondary" className="mb-1">
+              {availablePermissions.find(p => p.id === permission)?.label || permission}
+            </Badge>
+          ))}
         </div>
       </CardContent>
     </Card>
@@ -282,36 +174,14 @@ export default function RolesPage() {
   const { user } = useAuth();
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [selectedRole, setSelectedRole] = useState<CustomRole | null>(null);
-  const [activeTab, setActiveTab] = useState("system-roles");
+  const [currentRole, setCurrentRole] = useState<CustomRole | null>(null);
+
+  const isAdmin = user?.role === "admin";
 
   // Fetch custom roles
-  const { data: customRoles = [], isLoading, error } = useQuery<CustomRole[]>({
+  const { data: customRoles, isLoading } = useQuery({
     queryKey: ["/api/roles/custom"],
-    enabled: !!user && user.role === "admin",
-  });
-
-  // Create role form
-  const createRoleForm = useForm<RoleFormValues>({
-    resolver: zodResolver(roleFormSchema),
-    defaultValues: {
-      name: "",
-      description: "",
-      permissions: [],
-      isActive: true,
-    },
-  });
-
-  // Edit role form
-  const editRoleForm = useForm<RoleFormValues>({
-    resolver: zodResolver(roleFormSchema),
-    defaultValues: {
-      name: "",
-      description: "",
-      permissions: [],
-      isActive: true,
-    },
+    enabled: isAdmin,
   });
 
   // Create role mutation
@@ -324,13 +194,12 @@ export default function RolesPage() {
       return await res.json();
     },
     onSuccess: () => {
-      setIsCreateDialogOpen(false);
-      createRoleForm.reset();
       queryClient.invalidateQueries({ queryKey: ["/api/roles/custom"] });
       toast({
         title: "Role created",
-        description: "The custom role has been created successfully.",
+        description: "The role has been created successfully.",
       });
+      setIsCreateDialogOpen(false);
     },
     onError: (error: Error) => {
       toast({
@@ -343,19 +212,18 @@ export default function RolesPage() {
 
   // Update role mutation
   const updateRoleMutation = useMutation({
-    mutationFn: async ({ id, data }: { id: string; data: Partial<RoleFormValues> }) => {
-      const res = await apiRequest("PUT", `/api/roles/custom/${id}`, data);
+    mutationFn: async (data: { id: string; values: Partial<RoleFormValues> }) => {
+      const res = await apiRequest("PUT", `/api/roles/custom/${data.id}`, data.values);
       return await res.json();
     },
     onSuccess: () => {
-      setIsEditDialogOpen(false);
-      editRoleForm.reset();
-      setSelectedRole(null);
       queryClient.invalidateQueries({ queryKey: ["/api/roles/custom"] });
       toast({
         title: "Role updated",
-        description: "The custom role has been updated successfully.",
+        description: "The role has been updated successfully.",
       });
+      setIsEditDialogOpen(false);
+      setCurrentRole(null);
     },
     onError: (error: Error) => {
       toast({
@@ -372,12 +240,10 @@ export default function RolesPage() {
       await apiRequest("DELETE", `/api/roles/custom/${id}`);
     },
     onSuccess: () => {
-      setIsDeleteDialogOpen(false);
-      setSelectedRole(null);
       queryClient.invalidateQueries({ queryKey: ["/api/roles/custom"] });
       toast({
         title: "Role deleted",
-        description: "The custom role has been deleted successfully.",
+        description: "The role has been deleted successfully.",
       });
     },
     onError: (error: Error) => {
@@ -389,331 +255,231 @@ export default function RolesPage() {
     },
   });
 
-  // Handle role edit
+  // Setup forms
+  const createForm = useForm<RoleFormValues>({
+    resolver: zodResolver(roleFormSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      permissions: [],
+    },
+  });
+
+  const editForm = useForm<RoleFormValues>({
+    resolver: zodResolver(roleFormSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      permissions: [],
+    },
+  });
+
   const handleEditRole = (role: CustomRole) => {
-    setSelectedRole(role);
-    editRoleForm.reset({
+    setCurrentRole(role);
+    editForm.reset({
       name: role.name,
       description: role.description || "",
       permissions: role.permissions,
-      isActive: role.isActive,
     });
     setIsEditDialogOpen(true);
   };
 
-  // Handle role deletion
   const handleDeleteRole = (role: CustomRole) => {
-    setSelectedRole(role);
-    setIsDeleteDialogOpen(true);
+    if (confirm(`Are you sure you want to delete the role "${role.name}"?`)) {
+      deleteRoleMutation.mutate(role.id);
+    }
   };
 
-  // Submit handlers
   const onCreateSubmit = (data: RoleFormValues) => {
     createRoleMutation.mutate(data);
   };
 
   const onEditSubmit = (data: RoleFormValues) => {
-    if (selectedRole) {
-      updateRoleMutation.mutate({ id: selectedRole.id, data });
+    if (currentRole) {
+      updateRoleMutation.mutate({
+        id: currentRole.id,
+        values: data,
+      });
     }
   };
 
-  const confirmDeleteRole = () => {
-    if (selectedRole) {
-      deleteRoleMutation.mutate(selectedRole.id);
-    }
-  };
-
-  // Check if current user is admin
-  if (user?.role !== "admin") {
+  if (!isAdmin) {
     return (
-      <MainLayout
-        title="Roles & Permissions"
-        description="Manage roles and their permissions."
-      >
-        <Card>
-          <CardContent className="pt-6 flex flex-col items-center justify-center h-64">
-            <Lock className="h-12 w-12 text-muted-foreground mb-4" />
-            <h3 className="text-lg font-medium mb-2">Access Restricted</h3>
-            <p className="text-center text-muted-foreground">
-              You don't have permission to access this page. Only administrators can manage roles and permissions.
-            </p>
-          </CardContent>
-        </Card>
-      </MainLayout>
+      <div className="container mx-auto py-6">
+        <h1 className="text-3xl font-bold mb-6">Role Management</h1>
+        <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md p-4 mb-6">
+          <p className="text-yellow-800 dark:text-yellow-300">
+            You don't have permission to access this page. Admin privileges required.
+          </p>
+        </div>
+      </div>
     );
   }
 
   return (
-    <MainLayout
-      title="Roles & Permissions"
-      description="Manage roles and their permissions."
-    >
-      <div className="mb-6 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
-        <div className="space-y-1">
-          <h2 className="text-xl font-semibold">Role Management</h2>
-          <p className="text-sm text-muted-foreground">
-            Define user roles and their permissions
-          </p>
-        </div>
+    <div className="container mx-auto py-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold">Role Management</h1>
         <Button onClick={() => setIsCreateDialogOpen(true)}>
-          <Plus className="mr-2 h-4 w-4" />
-          Create Custom Role
+          <PlusCircle className="h-4 w-4 mr-2" />
+          Create Role
         </Button>
       </div>
 
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
-        <TabsList>
-          <TabsTrigger value="system-roles">System Roles</TabsTrigger>
-          <TabsTrigger value="custom-roles">Custom Roles</TabsTrigger>
-        </TabsList>
-
-        {/* System Roles Tab */}
-        <TabsContent value="system-roles" className="space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="space-y-6">
+        <div>
+          <h2 className="text-xl font-semibold mb-4">System Roles</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {systemRoles.map((role) => (
-              <SystemRoleCard key={role} roleName={role as SystemRole} />
+              <SystemRoleCard key={role} roleName={role} />
             ))}
           </div>
-        </TabsContent>
+        </div>
 
-        {/* Custom Roles Tab */}
-        <TabsContent value="custom-roles" className="space-y-4">
+        <div>
+          <h2 className="text-xl font-semibold mb-4">Custom Roles</h2>
           {isLoading ? (
-            <div className="flex justify-center items-center py-8">
+            <div className="flex justify-center p-8">
               <Loader2 className="h-8 w-8 animate-spin text-primary" />
             </div>
-          ) : customRoles.length === 0 ? (
+          ) : !customRoles || customRoles.length === 0 ? (
             <Card>
-              <CardContent className="pt-6 flex flex-col items-center justify-center h-64">
-                <div className="rounded-full bg-primary/10 p-3 mb-4">
-                  <Key className="h-6 w-6 text-primary" />
-                </div>
-                <h3 className="text-lg font-medium mb-2">No Custom Roles</h3>
-                <p className="text-center text-muted-foreground mb-4 max-w-md">
-                  Create custom roles to define specific permissions for users in your organization.
-                </p>
-                <Button onClick={() => setIsCreateDialogOpen(true)}>
-                  Create Custom Role
-                </Button>
+              <CardContent className="pt-6 text-center text-muted-foreground">
+                No custom roles available. Create one using the "Create Role" button.
               </CardContent>
             </Card>
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {customRoles.map((role) => (
-                <Card key={role.id} className={!role.isActive ? "opacity-70" : ""}>
-                  <CardHeader className="pb-3">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center space-x-3">
-                        <div className="bg-primary/10 p-2 rounded-full">
-                          <Key className="w-5 h-5 text-primary" />
-                        </div>
-                        <div>
-                          <CardTitle>{role.name}</CardTitle>
-                          <CardDescription>
-                            {role.description || "Custom role"}
-                          </CardDescription>
-                        </div>
+              {customRoles.map((role: CustomRole) => (
+                <Card key={role.id} className="mb-4">
+                  <CardHeader>
+                    <div className="flex justify-between items-start">
+                      <div>
+                        <CardTitle className="flex items-center gap-2">
+                          <ShieldCheck className="h-5 w-5 text-primary" />
+                          {role.name}
+                          <Badge variant="secondary" className="ml-2">Custom</Badge>
+                        </CardTitle>
+                        {role.description && (
+                          <CardDescription>{role.description}</CardDescription>
+                        )}
+                      </div>
+                      <div className="flex space-x-2">
+                        <Button variant="ghost" size="icon" onClick={() => handleEditRole(role)}>
+                          <Edit className="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" size="icon" onClick={() => handleDeleteRole(role)}>
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
                       </div>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" size="icon">
-                            <MoreVertical className="h-4 w-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => handleEditRole(role)}>
-                            <Edit className="mr-2 h-4 w-4" />
-                            Edit
-                          </DropdownMenuItem>
-                          <DropdownMenuItem
-                            className="text-destructive focus:text-destructive"
-                            onClick={() => handleDeleteRole(role)}
-                          >
-                            <Trash className="mr-2 h-4 w-4" />
-                            Delete
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
                     </div>
                   </CardHeader>
                   <CardContent>
-                    <div className="mb-4">
-                      <div className="flex items-center justify-between mb-2">
-                        <span className="text-sm font-medium">Status</span>
-                        <Badge variant={role.isActive ? "default" : "secondary"}>
-                          {role.isActive ? "Active" : "Inactive"}
+                    <div className="flex flex-wrap gap-2">
+                      {role.permissions.map((permission) => (
+                        <Badge key={permission} variant="secondary" className="mb-1">
+                          {availablePermissions.find(p => p.id === permission)?.label || permission}
                         </Badge>
-                      </div>
-                      <div className="flex justify-between text-sm">
-                        <span className="text-muted-foreground">Created</span>
-                        <span>
-                          {formatDistanceToNow(new Date(role.createdAt), { addSuffix: true })}
-                        </span>
-                      </div>
-                    </div>
-
-                    <div className="border-t pt-3">
-                      <h4 className="text-sm font-medium mb-2">Permissions ({role.permissions.length})</h4>
-                      <div className="flex flex-wrap gap-1">
-                        {role.permissions.slice(0, 5).map((permission) => (
-                          <Badge
-                            key={permission}
-                            variant="outline"
-                            className="text-xs bg-primary/10"
-                          >
-                            {permission}
-                          </Badge>
-                        ))}
-                        {role.permissions.length > 5 && (
-                          <Badge variant="outline" className="text-xs">
-                            +{role.permissions.length - 5} more
-                          </Badge>
-                        )}
-                      </div>
+                      ))}
                     </div>
                   </CardContent>
                 </Card>
               ))}
             </div>
           )}
-        </TabsContent>
-      </Tabs>
+        </div>
+      </div>
 
       {/* Create Role Dialog */}
       <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-        <DialogContent className="sm:max-w-[600px]">
+        <DialogContent className="sm:max-w-[525px]">
           <DialogHeader>
-            <DialogTitle>Create Custom Role</DialogTitle>
+            <DialogTitle>Create New Role</DialogTitle>
             <DialogDescription>
-              Define a new role with custom permissions.
+              Define a new custom role with specific permissions.
             </DialogDescription>
           </DialogHeader>
-
-          <Form {...createRoleForm}>
-            <form onSubmit={createRoleForm.handleSubmit(onCreateSubmit)} className="space-y-6">
-              <div className="space-y-4">
-                <FormField
-                  control={createRoleForm.control}
-                  name="name"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Role Name</FormLabel>
-                      <FormControl>
-                        <Input placeholder="Enter role name" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={createRoleForm.control}
-                  name="description"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Description</FormLabel>
-                      <FormControl>
-                        <Textarea
-                          placeholder="Describe the purpose of this role"
-                          {...field}
-                          value={field.value || ""}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={createRoleForm.control}
-                  name="isActive"
-                  render={({ field }) => (
-                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
-                      <FormControl>
-                        <Checkbox
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
-                      </FormControl>
-                      <div className="space-y-1 leading-none">
-                        <FormLabel>Active</FormLabel>
-                        <FormDescription>
-                          This role will be available for assignment to users.
-                        </FormDescription>
-                      </div>
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={createRoleForm.control}
-                  name="permissions"
-                  render={() => (
-                    <FormItem>
-                      <div className="mb-4">
-                        <FormLabel>Permissions</FormLabel>
-                        <FormDescription>
-                          Select the permissions for this role
-                        </FormDescription>
-                      </div>
-                      <div className="space-y-5">
-                        {permissionCategories.map((category) => (
-                          <div key={category.id} className="space-y-3">
-                            <h4 className="text-sm font-medium">{category.name}</h4>
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-                              {category.permissions.map((permission) => (
-                                <FormField
-                                  key={permission.id}
-                                  control={createRoleForm.control}
-                                  name="permissions"
-                                  render={({ field }) => (
-                                    <FormItem
-                                      key={permission.id}
-                                      className="flex flex-row items-start space-x-3 space-y-0"
-                                    >
-                                      <FormControl>
-                                        <Checkbox
-                                          checked={field.value?.includes(permission.id)}
-                                          onCheckedChange={(checked) => {
-                                            const currentValue = field.value || [];
-                                            return checked
-                                              ? field.onChange([...currentValue, permission.id])
-                                              : field.onChange(
-                                                  currentValue.filter(
-                                                    (value) => value !== permission.id
-                                                  )
-                                                );
-                                          }}
-                                        />
-                                      </FormControl>
-                                      <FormLabel className="font-normal cursor-pointer">
-                                        {permission.label}
-                                      </FormLabel>
-                                    </FormItem>
-                                  )}
-                                />
-                              ))}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
+          <Form {...createForm}>
+            <form onSubmit={createForm.handleSubmit(onCreateSubmit)} className="space-y-6">
+              <FormField
+                control={createForm.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Role Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Enter role name" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={createForm.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Enter role description"
+                        className="resize-none"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={createForm.control}
+                name="permissions"
+                render={() => (
+                  <FormItem>
+                    <div className="mb-4">
+                      <FormLabel>Permissions</FormLabel>
+                      <FormDescription>
+                        Select the permissions for this role
+                      </FormDescription>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-60 overflow-y-auto p-2">
+                      {availablePermissions.map((permission) => (
+                        <FormItem
+                          key={permission.id}
+                          className="flex flex-row items-start space-x-3 space-y-0"
+                        >
+                          <FormControl>
+                            <Checkbox
+                              checked={createForm.watch("permissions").includes(permission.id)}
+                              onCheckedChange={(checked) => {
+                                const currentPermissions = createForm.getValues("permissions");
+                                if (checked) {
+                                  createForm.setValue("permissions", [
+                                    ...currentPermissions,
+                                    permission.id,
+                                  ]);
+                                } else {
+                                  createForm.setValue(
+                                    "permissions",
+                                    currentPermissions.filter((p) => p !== permission.id)
+                                  );
+                                }
+                              }}
+                            />
+                          </FormControl>
+                          <FormLabel className="font-normal cursor-pointer">
+                            {permission.label}
+                          </FormLabel>
+                        </FormItem>
+                      ))}
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
               <DialogFooter>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setIsCreateDialogOpen(false)}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
+                <Button 
+                  type="submit" 
                   disabled={createRoleMutation.isPending}
                 >
                   {createRoleMutation.isPending && (
@@ -729,177 +495,106 @@ export default function RolesPage() {
 
       {/* Edit Role Dialog */}
       <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-        <DialogContent className="sm:max-w-[600px]">
+        <DialogContent className="sm:max-w-[525px]">
           <DialogHeader>
             <DialogTitle>Edit Role</DialogTitle>
             <DialogDescription>
-              Update role details and permissions.
+              Modify the role's details and permissions.
             </DialogDescription>
           </DialogHeader>
-
-          <Form {...editRoleForm}>
-            <form onSubmit={editRoleForm.handleSubmit(onEditSubmit)} className="space-y-6">
-              <div className="space-y-4">
-                <FormField
-                  control={editRoleForm.control}
-                  name="name"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Role Name</FormLabel>
-                      <FormControl>
-                        <Input placeholder="Enter role name" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={editRoleForm.control}
-                  name="description"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Description</FormLabel>
-                      <FormControl>
-                        <Textarea
-                          placeholder="Describe the purpose of this role"
-                          {...field}
-                          value={field.value || ""}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={editRoleForm.control}
-                  name="isActive"
-                  render={({ field }) => (
-                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
-                      <FormControl>
-                        <Checkbox
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
-                      </FormControl>
-                      <div className="space-y-1 leading-none">
-                        <FormLabel>Active</FormLabel>
-                        <FormDescription>
-                          This role will be available for assignment to users.
-                        </FormDescription>
-                      </div>
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={editRoleForm.control}
-                  name="permissions"
-                  render={() => (
-                    <FormItem>
-                      <div className="mb-4">
-                        <FormLabel>Permissions</FormLabel>
-                        <FormDescription>
-                          Select the permissions for this role
-                        </FormDescription>
-                      </div>
-                      <div className="space-y-5">
-                        {permissionCategories.map((category) => (
-                          <div key={category.id} className="space-y-3">
-                            <h4 className="text-sm font-medium">{category.name}</h4>
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-                              {category.permissions.map((permission) => (
-                                <FormField
-                                  key={permission.id}
-                                  control={editRoleForm.control}
-                                  name="permissions"
-                                  render={({ field }) => (
-                                    <FormItem
-                                      key={permission.id}
-                                      className="flex flex-row items-start space-x-3 space-y-0"
-                                    >
-                                      <FormControl>
-                                        <Checkbox
-                                          checked={field.value?.includes(permission.id)}
-                                          onCheckedChange={(checked) => {
-                                            const currentValue = field.value || [];
-                                            return checked
-                                              ? field.onChange([...currentValue, permission.id])
-                                              : field.onChange(
-                                                  currentValue.filter(
-                                                    (value) => value !== permission.id
-                                                  )
-                                                );
-                                          }}
-                                        />
-                                      </FormControl>
-                                      <FormLabel className="font-normal cursor-pointer">
-                                        {permission.label}
-                                      </FormLabel>
-                                    </FormItem>
-                                  )}
-                                />
-                              ))}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
+          <Form {...editForm}>
+            <form onSubmit={editForm.handleSubmit(onEditSubmit)} className="space-y-6">
+              <FormField
+                control={editForm.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Role Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Enter role name" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={editForm.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Enter role description"
+                        className="resize-none"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={editForm.control}
+                name="permissions"
+                render={() => (
+                  <FormItem>
+                    <div className="mb-4">
+                      <FormLabel>Permissions</FormLabel>
+                      <FormDescription>
+                        Select the permissions for this role
+                      </FormDescription>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-60 overflow-y-auto p-2">
+                      {availablePermissions.map((permission) => (
+                        <FormItem
+                          key={permission.id}
+                          className="flex flex-row items-start space-x-3 space-y-0"
+                        >
+                          <FormControl>
+                            <Checkbox
+                              checked={editForm.watch("permissions").includes(permission.id)}
+                              onCheckedChange={(checked) => {
+                                const currentPermissions = editForm.getValues("permissions");
+                                if (checked) {
+                                  editForm.setValue("permissions", [
+                                    ...currentPermissions,
+                                    permission.id,
+                                  ]);
+                                } else {
+                                  editForm.setValue(
+                                    "permissions",
+                                    currentPermissions.filter((p) => p !== permission.id)
+                                  );
+                                }
+                              }}
+                            />
+                          </FormControl>
+                          <FormLabel className="font-normal cursor-pointer">
+                            {permission.label}
+                          </FormLabel>
+                        </FormItem>
+                      ))}
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
               <DialogFooter>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setIsEditDialogOpen(false)}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
+                <Button 
+                  type="submit" 
                   disabled={updateRoleMutation.isPending}
                 >
                   {updateRoleMutation.isPending && (
                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   )}
-                  Update Role
+                  Save Changes
                 </Button>
               </DialogFooter>
             </form>
           </Form>
         </DialogContent>
       </Dialog>
-
-      {/* Delete Role Confirmation */}
-      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete Role</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to delete the "{selectedRole?.name}" role?
-              This action cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDeleteRole}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {deleteRoleMutation.isPending ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Trash className="mr-2 h-4 w-4" />
-              )}
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </MainLayout>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/server/routes.ts b/server/routes.ts
index 1fb8ea9..902bfe4 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -1,8 +1,10 @@
 import type { Express, Request, Response } from "express";
 import { createServer, type Server } from "http";
 import { storage } from "./storage";
+import { db } from "./db";
 import { setupAuth, requireRole } from "./auth";
 import { z } from "zod";
+import { eq } from "drizzle-orm";
 import {
   insertDomainSchema,
   insertDnsRecordSchema,
@@ -11,8 +13,10 @@ import {
   insertOrganizationSchema,
   insertWebhookSchema,
   insertDnsMetricSchema,
+  insertCustomRoleSchema,
   recordTypes,
-  providerTypes
+  providerTypes,
+  customRoles
 } from "@shared/schema";
 import { randomBytes } from "crypto";
 
@@ -1100,5 +1104,137 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
+  // Custom Roles endpoints
+  
+  // Get all custom roles
+  app.get("/api/roles/custom", requireRole(["admin"]), async (req, res) => {
+    try {
+      // Only admins can view custom roles
+      const customRoles = await db.query.customRoles.findMany({
+        orderBy: (roles, { desc }) => [desc(roles.createdAt)],
+      });
+      
+      res.json(customRoles);
+    } catch (error) {
+      console.error("Error fetching custom roles:", error);
+      res.status(500).json({ message: "Internal server error" });
+    }
+  });
+  
+  // Get a single custom role by ID
+  app.get("/api/roles/custom/:id", requireRole(["admin"]), async (req, res) => {
+    try {
+      const role = await db.query.customRoles.findFirst({
+        where: eq(customRoles.id, req.params.id),
+      });
+      
+      if (!role) {
+        return res.status(404).json({ message: "Role not found" });
+      }
+      
+      res.json(role);
+    } catch (error) {
+      console.error("Error fetching custom role:", error);
+      res.status(500).json({ message: "Internal server error" });
+    }
+  });
+  
+  // Create a new custom role
+  app.post("/api/roles/custom", requireRole(["admin"]), async (req, res) => {
+    try {
+      const validatedData = insertCustomRoleSchema.parse(req.body);
+      
+      // Check if a role with this name already exists
+      const existingRole = await db.query.customRoles.findFirst({
+        where: eq(customRoles.name, validatedData.name),
+      });
+      
+      if (existingRole) {
+        return res.status(400).json({ message: "A role with this name already exists" });
+      }
+      
+      const [newRole] = await db.insert(customRoles).values(validatedData).returning();
+      
+      res.status(201).json(newRole);
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        res.status(400).json({ message: "Validation error", errors: error.errors });
+      } else {
+        console.error("Error creating custom role:", error);
+        res.status(500).json({ message: "Internal server error" });
+      }
+    }
+  });
+  
+  // Update a custom role
+  app.put("/api/roles/custom/:id", requireRole(["admin"]), async (req, res) => {
+    try {
+      const roleId = req.params.id;
+      
+      // Check if the role exists
+      const existingRole = await db.query.customRoles.findFirst({
+        where: eq(customRoles.id, roleId),
+      });
+      
+      if (!existingRole) {
+        return res.status(404).json({ message: "Role not found" });
+      }
+      
+      // Validate the request data
+      const validatedData = insertCustomRoleSchema.partial().parse(req.body);
+      
+      // If name is being updated, check for duplicates
+      if (validatedData.name && validatedData.name !== existingRole.name) {
+        const duplicateName = await db.query.customRoles.findFirst({
+          where: eq(customRoles.name, validatedData.name),
+        });
+        
+        if (duplicateName) {
+          return res.status(400).json({ message: "A role with this name already exists" });
+        }
+      }
+      
+      // Update the role
+      const [updatedRole] = await db
+        .update(customRoles)
+        .set(validatedData)
+        .where(eq(customRoles.id, roleId))
+        .returning();
+      
+      res.json(updatedRole);
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        res.status(400).json({ message: "Validation error", errors: error.errors });
+      } else {
+        console.error("Error updating custom role:", error);
+        res.status(500).json({ message: "Internal server error" });
+      }
+    }
+  });
+  
+  // Delete a custom role
+  app.delete("/api/roles/custom/:id", requireRole(["admin"]), async (req, res) => {
+    try {
+      const roleId = req.params.id;
+      
+      // Check if the role exists
+      const existingRole = await db.query.customRoles.findFirst({
+        where: eq(customRoles.id, roleId),
+      });
+      
+      if (!existingRole) {
+        return res.status(404).json({ message: "Role not found" });
+      }
+      
+      // Delete the role
+      await db.delete(customRoles).where(eq(customRoles.id, roleId));
+      
+      res.status(204).end();
+    } catch (error) {
+      console.error("Error deleting custom role:", error);
+      res.status(500).json({ message: "Internal server error" });
+    }
+  });
+
   return httpServer;
 }