hazo_auth 0.1.2 → 1.0.0

package/src/components/layouts/user_management/index.tsx

@@ -0,0 +1,1295 @@
+// file_description: User Management layout component with three tabs for managing users, roles, and permissions
+// section: client_directive
+"use client";
+
+// section: imports
+import { useState, useEffect, useCallback } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { use_hazo_auth } from "@/components/layouts/shared/hooks/use_hazo_auth";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RolesMatrix } from "./components/roles_matrix";
+import { UserX, KeyRound, Edit, Trash2, Loader2, CircleCheck, CircleX, Plus, UserPlus } from "lucide-react";
+import { toast } from "sonner";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+// section: types
+export type UserManagementLayoutProps = {
+  className?: string;
+};
+
+type User = {
+  id: string;
+  name: string | null;
+  email_address: string;
+  email_verified: boolean;
+  is_active: boolean;
+  last_logon: string | null;
+  created_at: string | null;
+  profile_picture_url: string | null;
+  profile_source: string | null;
+};
+
+type Permission = {
+  id: number;
+  permission_name: string;
+  description: string;
+  source: "db" | "config";
+};
+
+// section: component
+/**
+ * User Management layout component with three tabs
+ * Tab 1: Manage Users - data table with user details and actions
+ * Tab 2: Roles - roles-permissions matrix
+ * Tab 3: Permissions - manage permissions from DB and config
+ * @param props - Component props
+ * @returns User Management layout component
+ */
+export function UserManagementLayout({ className }: UserManagementLayoutProps) {
+  // Permission checks
+  const authResult = use_hazo_auth();
+  const hasUserManagementPermission = authResult.authenticated && 
+    authResult.permissions.includes("admin_user_management");
+  const hasRoleManagementPermission = authResult.authenticated && 
+    authResult.permissions.includes("admin_role_management");
+  const hasPermissionManagementPermission = authResult.authenticated && 
+    authResult.permissions.includes("admin_permission_management");
+
+  // Determine which tabs to show
+  const showUsersTab = hasUserManagementPermission;
+  const showRolesTab = hasRoleManagementPermission;
+  const showPermissionsTab = hasPermissionManagementPermission;
+  const hasAnyPermission = showUsersTab || showRolesTab || showPermissionsTab;
+
+  // Tab 1: Users state
+  const [users, setUsers] = useState<User[]>([]);
+  const [usersLoading, setUsersLoading] = useState(true);
+  const [deactivateDialogOpen, setDeactivateDialogOpen] = useState(false);
+  const [resetPasswordDialogOpen, setResetPasswordDialogOpen] = useState(false);
+  const [userDetailDialogOpen, setUserDetailDialogOpen] = useState(false);
+  const [assignRolesDialogOpen, setAssignRolesDialogOpen] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [usersActionLoading, setUsersActionLoading] = useState(false);
+
+  // Tab 3: Permissions state
+  const [permissions, setPermissions] = useState<Permission[]>([]);
+  const [permissionsLoading, setPermissionsLoading] = useState(true);
+  const [editPermissionDialogOpen, setEditPermissionDialogOpen] = useState(false);
+  const [addPermissionDialogOpen, setAddPermissionDialogOpen] = useState(false);
+  const [editingPermission, setEditingPermission] = useState<Permission | null>(null);
+  const [editDescription, setEditDescription] = useState("");
+  const [newPermissionName, setNewPermissionName] = useState("");
+  const [newPermissionDescription, setNewPermissionDescription] = useState("");
+  const [permissionsActionLoading, setPermissionsActionLoading] = useState(false);
+  const [migrateLoading, setMigrateLoading] = useState(false);
+
+  // Load users function (reusable)
+  const loadUsers = useCallback(async () => {
+    setUsersLoading(true);
+    try {
+      const response = await fetch("/api/hazo_auth/user_management/users");
+      const data = await response.json();
+
+      if (data.success) {
+        setUsers(data.users);
+      } else {
+        toast.error("Failed to load users");
+      }
+    } catch (error) {
+      toast.error("Failed to load users");
+    } finally {
+      setUsersLoading(false);
+    }
+  }, []);
+
+  // Load users (only if user has permission)
+  useEffect(() => {
+    if (!showUsersTab) {
+      setUsersLoading(false);
+      return;
+    }
+
+    void loadUsers();
+  }, [showUsersTab, loadUsers]);
+
+  // Load permissions (only if user has permission)
+  useEffect(() => {
+    if (!showPermissionsTab) {
+      setPermissionsLoading(false);
+      return;
+    }
+
+    const loadPermissions = async () => {
+      setPermissionsLoading(true);
+      try {
+        const response = await fetch("/api/hazo_auth/user_management/permissions");
+        const data = await response.json();
+
+        if (data.success) {
+          const db_perms: Permission[] = data.db_permissions.map((p: {
+            id: number;
+            permission_name: string;
+            description: string;
+          }) => ({
+            id: p.id,
+            permission_name: p.permission_name,
+            description: p.description,
+            source: "db" as const,
+          }));
+
+          const config_perms: Permission[] = data.config_permissions.map((name: string) => ({
+            id: 0, // Temporary ID for config permissions
+            permission_name: name,
+            description: "",
+            source: "config" as const,
+          }));
+
+          setPermissions([...db_perms, ...config_perms]);
+        } else {
+          toast.error("Failed to load permissions");
+        }
+      } catch (error) {
+        toast.error("Failed to load permissions");
+      } finally {
+        setPermissionsLoading(false);
+      }
+    };
+
+    void loadPermissions();
+  }, [showPermissionsTab]);
+
+  // Handle deactivate user
+  const handleDeactivateUser = async () => {
+    if (!selectedUser) return;
+
+    setUsersActionLoading(true);
+    try {
+      const response = await fetch("/api/user_management/users", {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          user_id: selectedUser.id,
+          is_active: false,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        toast.success("User deactivated successfully");
+        setDeactivateDialogOpen(false);
+        setSelectedUser(null);
+
+        // Reload users
+        const reload_response = await fetch("/api/user_management/users");
+        const reload_data = await reload_response.json();
+        if (reload_data.success) {
+          setUsers(reload_data.users);
+        }
+      } else {
+        toast.error(data.error || "Failed to deactivate user");
+      }
+    } catch (error) {
+      toast.error("Failed to deactivate user");
+    } finally {
+      setUsersActionLoading(false);
+    }
+  };
+
+  // Handle reset password
+  const handleResetPassword = async () => {
+    if (!selectedUser) return;
+
+    setUsersActionLoading(true);
+    try {
+      const response = await fetch("/api/user_management/users", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          user_id: selectedUser.id,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        toast.success("Password reset email sent successfully");
+        setResetPasswordDialogOpen(false);
+        setSelectedUser(null);
+      } else {
+        toast.error(data.error || "Failed to send password reset email");
+      }
+    } catch (error) {
+      toast.error("Failed to send password reset email");
+    } finally {
+      setUsersActionLoading(false);
+    }
+  };
+
+
+  // Handle migrate permissions
+  const handleMigratePermissions = async () => {
+    setMigrateLoading(true);
+    try {
+      const response = await fetch("/api/hazo_auth/user_management/permissions?action=migrate", {
+        method: "POST",
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        const created_count = data.created?.length || 0;
+        const skipped_count = data.skipped?.length || 0;
+
+        if (created_count > 0) {
+          toast.success(
+            `Migrated ${created_count} permission(s) to database. ${skipped_count} already existed.`
+          );
+        } else {
+          toast.info(`All permissions already exist in database. ${skipped_count} skipped.`);
+        }
+
+        // Show detailed list in toast if there are changes
+        if (data.created && data.created.length > 0) {
+          toast.info(`Created: ${data.created.join(", ")}`);
+        }
+        if (data.skipped && data.skipped.length > 0) {
+          toast.info(`Skipped: ${data.skipped.join(", ")}`);
+        }
+
+        // Reload permissions
+        const reload_response = await fetch("/api/user_management/permissions");
+        const reload_data = await reload_response.json();
+        if (reload_data.success) {
+          const db_perms: Permission[] = reload_data.db_permissions.map((p: {
+            id: number;
+            permission_name: string;
+            description: string;
+          }) => ({
+            id: p.id,
+            permission_name: p.permission_name,
+            description: p.description,
+            source: "db" as const,
+          }));
+
+          const config_perms: Permission[] = reload_data.config_permissions.map((name: string) => ({
+            id: 0,
+            permission_name: name,
+            description: "",
+            source: "config" as const,
+          }));
+
+          setPermissions([...db_perms, ...config_perms]);
+        }
+      } else {
+        toast.error(data.error || "Failed to migrate permissions");
+      }
+    } catch (error) {
+      toast.error("Failed to migrate permissions");
+    } finally {
+      setMigrateLoading(false);
+    }
+  };
+
+  // Handle edit permission
+  const handleEditPermission = async () => {
+    if (!editingPermission || editingPermission.source === "config") return;
+
+    setPermissionsActionLoading(true);
+    try {
+      const response = await fetch("/api/user_management/permissions", {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          permission_id: editingPermission.id,
+          description: editDescription,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        toast.success("Permission updated successfully");
+        setEditPermissionDialogOpen(false);
+        setEditingPermission(null);
+        setEditDescription("");
+
+        // Reload permissions
+        const reload_response = await fetch("/api/user_management/permissions");
+        const reload_data = await reload_response.json();
+        if (reload_data.success) {
+          const db_perms: Permission[] = reload_data.db_permissions.map((p: {
+            id: number;
+            permission_name: string;
+            description: string;
+          }) => ({
+            id: p.id,
+            permission_name: p.permission_name,
+            description: p.description,
+            source: "db" as const,
+          }));
+
+          const config_perms: Permission[] = reload_data.config_permissions.map((name: string) => ({
+            id: 0,
+            permission_name: name,
+            description: "",
+            source: "config" as const,
+          }));
+
+          setPermissions([...db_perms, ...config_perms]);
+        }
+      } else {
+        toast.error(data.error || "Failed to update permission");
+      }
+    } catch (error) {
+      toast.error("Failed to update permission");
+    } finally {
+      setPermissionsActionLoading(false);
+    }
+  };
+
+  // Handle add permission
+  const handleAddPermission = async () => {
+    if (!newPermissionName.trim()) {
+      toast.error("Permission name is required");
+      return;
+    }
+
+    setPermissionsActionLoading(true);
+    try {
+      const response = await fetch("/api/user_management/permissions", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          permission_name: newPermissionName.trim(),
+          description: newPermissionDescription.trim(),
+        }),
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        toast.success("Permission created successfully");
+        setAddPermissionDialogOpen(false);
+        setNewPermissionName("");
+        setNewPermissionDescription("");
+
+        // Reload permissions
+        const reload_response = await fetch("/api/user_management/permissions");
+        const reload_data = await reload_response.json();
+        if (reload_data.success) {
+          const db_perms: Permission[] = reload_data.db_permissions.map((p: {
+            id: number;
+            permission_name: string;
+            description: string;
+          }) => ({
+            id: p.id,
+            permission_name: p.permission_name,
+            description: p.description,
+            source: "db" as const,
+          }));
+
+          const config_perms: Permission[] = reload_data.config_permissions.map((name: string) => ({
+            id: 0,
+            permission_name: name,
+            description: "",
+            source: "config" as const,
+          }));
+
+          setPermissions([...db_perms, ...config_perms]);
+        }
+      } else {
+        toast.error(data.error || "Failed to create permission");
+      }
+    } catch (error) {
+      toast.error("Failed to create permission");
+    } finally {
+      setPermissionsActionLoading(false);
+    }
+  };
+
+  // Handle delete permission
+  const handleDeletePermission = async (permission: Permission) => {
+    if (permission.source === "config") return;
+
+    setPermissionsActionLoading(true);
+    try {
+      const response = await fetch(
+        `/api/hazo_auth/user_management/permissions?permission_id=${permission.id}`,
+        {
+          method: "DELETE",
+        }
+      );
+
+      const data = await response.json();
+
+      if (data.success) {
+        toast.success("Permission deleted successfully");
+
+        // Reload permissions
+        const reload_response = await fetch("/api/user_management/permissions");
+        const reload_data = await reload_response.json();
+        if (reload_data.success) {
+          const db_perms: Permission[] = reload_data.db_permissions.map((p: {
+            id: number;
+            permission_name: string;
+            description: string;
+          }) => ({
+            id: p.id,
+            permission_name: p.permission_name,
+            description: p.description,
+            source: "db" as const,
+          }));
+
+          const config_perms: Permission[] = reload_data.config_permissions.map((name: string) => ({
+            id: 0,
+            permission_name: name,
+            description: "",
+            source: "config" as const,
+          }));
+
+          setPermissions([...db_perms, ...config_perms]);
+        }
+      } else {
+        toast.error(data.error || "Failed to delete permission");
+      }
+    } catch (error) {
+      toast.error("Failed to delete permission");
+    } finally {
+      setPermissionsActionLoading(false);
+    }
+  };
+
+  // Get user initials for avatar fallback
+  const getUserInitials = (user: User): string => {
+    if (user.name) {
+      const parts = user.name.trim().split(" ");
+      if (parts.length >= 2) {
+        return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+      }
+      return user.name[0]?.toUpperCase() || "";
+    }
+    if (user.email_address) {
+      return user.email_address[0]?.toUpperCase() || "";
+    }
+    return "?";
+  };
+
+  return (
+    <div className={`cls_user_management_layout flex flex-col gap-4 w-full ${className || ""}`}>
+      {/* Show loading spinner while checking permissions */}
+      {authResult.loading ? (
+        <div className="cls_user_management_permissions_loading flex items-center justify-center p-8">
+          <Loader2 className="h-6 w-6 animate-spin text-slate-400" />
+        </div>
+      ) : !hasAnyPermission ? (
+        <div className="cls_user_management_no_permissions flex flex-col items-center justify-center p-8 gap-4">
+          <p className="text-lg font-semibold text-slate-700">
+            Access Denied
+          </p>
+          <p className="text-sm text-muted-foreground text-center">
+            You don&apos;t have permission to access User Management. Please contact your administrator.
+          </p>
+        </div>
+      ) : (
+        <Tabs 
+          defaultValue={
+            showUsersTab ? "users" : 
+            showRolesTab ? "roles" : 
+            showPermissionsTab ? "permissions" : "users"
+          } 
+          className="cls_user_management_tabs w-full"
+        >
+          <TabsList className="cls_user_management_tabs_list flex w-full">
+            {showUsersTab && (
+              <TabsTrigger value="users" className="cls_user_management_tabs_trigger flex-1">
+                Manage Users
+              </TabsTrigger>
+            )}
+            {showRolesTab && (
+              <TabsTrigger value="roles" className="cls_user_management_tabs_trigger flex-1">
+                Roles
+              </TabsTrigger>
+            )}
+            {showPermissionsTab && (
+              <TabsTrigger value="permissions" className="cls_user_management_tabs_trigger flex-1">
+                Permissions
+              </TabsTrigger>
+            )}
+          </TabsList>
+
+          {/* Tab 1: Manage Users */}
+          {showUsersTab && (
+            <TabsContent value="users" className="cls_user_management_tab_users w-full">
+          {usersLoading ? (
+            <div className="cls_user_management_users_loading flex items-center justify-center p-8">
+              <Loader2 className="h-6 w-6 animate-spin text-slate-400" />
+            </div>
+          ) : (
+            <div className="cls_user_management_users_table_container border rounded-lg overflow-auto w-full">
+              <Table className="cls_user_management_users_table w-full">
+                <TableHeader className="cls_user_management_users_table_header">
+                  <TableRow className="cls_user_management_users_table_header_row">
+                    <TableHead className="cls_user_management_users_table_header_profile_pic w-16">
+                      Photo
+                    </TableHead>
+                    <TableHead className="cls_user_management_users_table_header_id">ID</TableHead>
+                    <TableHead className="cls_user_management_users_table_header_name">
+                      Name
+                    </TableHead>
+                    <TableHead className="cls_user_management_users_table_header_email">
+                      Email
+                    </TableHead>
+                    <TableHead className="cls_user_management_users_table_header_email_verified">
+                      Email Verified
+                    </TableHead>
+                    <TableHead className="cls_user_management_users_table_header_is_active">
+                      Active
+                    </TableHead>
+                    <TableHead className="cls_user_management_users_table_header_last_logon">
+                      Last Logon
+                    </TableHead>
+                    <TableHead className="cls_user_management_users_table_header_created_at">
+                      Created At
+                    </TableHead>
+                    <TableHead className="cls_user_management_users_table_header_actions text-right">
+                      Actions
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody className="cls_user_management_users_table_body">
+                  {users.length === 0 ? (
+                    <TableRow className="cls_user_management_users_table_row_empty">
+                      <TableCell colSpan={9} className="text-center text-muted-foreground py-8">
+                        No users found.
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    users.map((user) => (
+                      <TableRow
+                        key={user.id}
+                        className="cls_user_management_users_table_row cursor-pointer hover:bg-muted/50"
+                        onClick={() => {
+                          setSelectedUser(user);
+                          setUserDetailDialogOpen(true);
+                        }}
+                      >
+                        <TableCell className="cls_user_management_users_table_cell_profile_pic">
+                          <Avatar className="cls_user_management_users_table_avatar h-8 w-8">
+                            <AvatarImage
+                              src={user.profile_picture_url || undefined}
+                              alt={user.name ? `Profile picture of ${user.name}` : "Profile picture"}
+                              className="cls_user_management_users_table_avatar_image"
+                            />
+                            <AvatarFallback className="cls_user_management_users_table_avatar_fallback bg-slate-200 text-slate-600 text-xs">
+                              {getUserInitials(user)}
+                            </AvatarFallback>
+                          </Avatar>
+                        </TableCell>
+                        <TableCell className="cls_user_management_users_table_cell_id font-mono text-xs">
+                          {user.id.substring(0, 8)}...
+                        </TableCell>
+                        <TableCell className="cls_user_management_users_table_cell_name">
+                          {user.name || "-"}
+                        </TableCell>
+                        <TableCell className="cls_user_management_users_table_cell_email">
+                          {user.email_address}
+                        </TableCell>
+                        <TableCell className="cls_user_management_users_table_cell_email_verified">
+                          {user.email_verified ? (
+                            <span className="text-green-600">Yes</span>
+                          ) : (
+                            <span className="text-red-600">No</span>
+                          )}
+                        </TableCell>
+                        <TableCell className="cls_user_management_users_table_cell_is_active">
+                          {user.is_active ? (
+                            <span className="text-green-600">Active</span>
+                          ) : (
+                            <span className="text-red-600">Inactive</span>
+                          )}
+                        </TableCell>
+                        <TableCell className="cls_user_management_users_table_cell_last_logon">
+                          {user.last_logon
+                            ? new Date(user.last_logon).toLocaleDateString()
+                            : "-"}
+                        </TableCell>
+                        <TableCell className="cls_user_management_users_table_cell_created_at">
+                          {user.created_at
+                            ? new Date(user.created_at).toLocaleDateString()
+                            : "-"}
+                        </TableCell>
+                        <TableCell className="cls_user_management_users_table_cell_actions text-right">
+                          <TooltipProvider>
+                            <div
+                              className="cls_user_management_users_table_actions flex items-center justify-end gap-2"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <Button
+                                    onClick={() => {
+                                      setSelectedUser(user);
+                                      setAssignRolesDialogOpen(true);
+                                    }}
+                                    variant="outline"
+                                    size="sm"
+                                    className="cls_user_management_users_table_action_assign_roles"
+                                  >
+                                    <UserPlus className="h-4 w-4" />
+                                  </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>Assign Roles</p>
+                                </TooltipContent>
+                              </Tooltip>
+                              {user.is_active && (
+                                <Tooltip>
+                                  <TooltipTrigger asChild>
+                                    <Button
+                                      onClick={() => {
+                                        setSelectedUser(user);
+                                        setDeactivateDialogOpen(true);
+                                      }}
+                                      variant="outline"
+                                      size="sm"
+                                      className="cls_user_management_users_table_action_deactivate"
+                                    >
+                                      <UserX className="h-4 w-4" />
+                                    </Button>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    <p>Deactivate</p>
+                                  </TooltipContent>
+                                </Tooltip>
+                              )}
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <Button
+                                    onClick={() => {
+                                      setSelectedUser(user);
+                                      setResetPasswordDialogOpen(true);
+                                    }}
+                                    variant="outline"
+                                    size="sm"
+                                    className="cls_user_management_users_table_action_reset_password"
+                                  >
+                                    <KeyRound className="h-4 w-4" />
+                                  </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>Reset Password</p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </div>
+                          </TooltipProvider>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+            </TabsContent>
+          )}
+
+          {/* Tab 2: Roles */}
+          {showRolesTab && (
+            <TabsContent value="roles" className="cls_user_management_tab_roles w-full">
+          <RolesMatrix
+            add_button_enabled={true}
+            role_name_selection_enabled={false}
+            onSave={(data) => {
+              // Data is already saved by RolesMatrix component
+              console.log("Roles saved:", data);
+            }}
+          />
+            </TabsContent>
+          )}
+
+          {/* Tab 3: Permissions */}
+          {showPermissionsTab && (
+            <TabsContent value="permissions" className="cls_user_management_tab_permissions w-full">
+          <div className="cls_user_management_permissions_container flex flex-col gap-4 w-full">
+            {/* Header buttons */}
+            <div className="cls_user_management_permissions_header flex items-center justify-between">
+              <div className="cls_user_management_permissions_header_left flex items-center gap-2">
+                <Button
+                  onClick={() => setAddPermissionDialogOpen(true)}
+                  variant="default"
+                  size="sm"
+                  className="cls_user_management_permissions_add_button"
+                >
+                  <Plus className="h-4 w-4 mr-2" />
+                  Add Permission
+                </Button>
+              </div>
+              <div className="cls_user_management_permissions_header_right">
+                <Button
+                  onClick={handleMigratePermissions}
+                  disabled={migrateLoading}
+                  variant="default"
+                  size="sm"
+                  className="cls_user_management_permissions_migrate_button"
+                >
+                  {migrateLoading ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Migrating...
+                    </>
+                  ) : (
+                    "Migrate config to database"
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            {/* Permissions table */}
+            {permissionsLoading ? (
+              <div className="cls_user_management_permissions_loading flex items-center justify-center p-8">
+                <Loader2 className="h-6 w-6 animate-spin text-slate-400" />
+              </div>
+            ) : (
+              <div className="cls_user_management_permissions_table_container border rounded-lg overflow-auto w-full">
+                <Table className="cls_user_management_permissions_table w-full">
+                  <TableHeader className="cls_user_management_permissions_table_header">
+                    <TableRow className="cls_user_management_permissions_table_header_row">
+                      <TableHead className="cls_user_management_permissions_table_header_name">
+                        Permission Name
+                      </TableHead>
+                      <TableHead className="cls_user_management_permissions_table_header_description">
+                        Description
+                      </TableHead>
+                      <TableHead className="cls_user_management_permissions_table_header_source">
+                        Source
+                      </TableHead>
+                      <TableHead className="cls_user_management_permissions_table_header_actions text-right">
+                        Actions
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody className="cls_user_management_permissions_table_body">
+                    {permissions.length === 0 ? (
+                      <TableRow className="cls_user_management_permissions_table_row_empty">
+                        <TableCell colSpan={4} className="text-center text-muted-foreground py-8">
+                          No permissions found.
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      permissions.map((permission) => (
+                        <TableRow
+                          key={`${permission.source}-${permission.id}-${permission.permission_name}`}
+                          className="cls_user_management_permissions_table_row"
+                        >
+                          <TableCell
+                            className={`cls_user_management_permissions_table_cell_name font-medium ${
+                              permission.source === "db" ? "text-blue-600" : "text-purple-600"
+                            }`}
+                          >
+                            {permission.permission_name}
+                          </TableCell>
+                          <TableCell className="cls_user_management_permissions_table_cell_description">
+                            {permission.description || "-"}
+                          </TableCell>
+                          <TableCell className="cls_user_management_permissions_table_cell_source">
+                            <span
+                              className={`px-2 py-1 rounded text-xs font-medium ${
+                                permission.source === "db"
+                                  ? "bg-blue-100 text-blue-700"
+                                  : "bg-purple-100 text-purple-700"
+                              }`}
+                            >
+                              {permission.source === "db" ? "Database" : "Config"}
+                            </span>
+                          </TableCell>
+                          <TableCell className="cls_user_management_permissions_table_cell_actions text-right">
+                            <div className="cls_user_management_permissions_table_actions flex items-center justify-end gap-2">
+                              {permission.source === "db" && (
+                                <>
+                                  <Button
+                                    onClick={() => {
+                                      setEditingPermission(permission);
+                                      setEditDescription(permission.description);
+                                      setEditPermissionDialogOpen(true);
+                                    }}
+                                    variant="outline"
+                                    size="sm"
+                                    className="cls_user_management_permissions_table_action_edit"
+                                  >
+                                    <Edit className="h-4 w-4 mr-1" />
+                                    Edit
+                                  </Button>
+                                  <Button
+                                    onClick={() => handleDeletePermission(permission)}
+                                    disabled={permissionsActionLoading}
+                                    variant="outline"
+                                    size="sm"
+                                    className="cls_user_management_permissions_table_action_delete text-destructive"
+                                  >
+                                    <Trash2 className="h-4 w-4 mr-1" />
+                                    Delete
+                                  </Button>
+                                </>
+                              )}
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </div>
+            </TabsContent>
+          )}
+        </Tabs>
+      )}
+
+      {/* Deactivate User Dialog */}
+      <AlertDialog open={deactivateDialogOpen} onOpenChange={setDeactivateDialogOpen}>
+        <AlertDialogContent className="cls_user_management_deactivate_dialog">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Deactivate User</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to deactivate {selectedUser?.name || selectedUser?.email_address}? They will not be able to log in until reactivated.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="cls_user_management_deactivate_dialog_footer">
+            <AlertDialogAction
+              onClick={handleDeactivateUser}
+              disabled={usersActionLoading}
+              className="cls_user_management_deactivate_dialog_confirm"
+            >
+              {usersActionLoading ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Deactivating...
+                </>
+              ) : (
+                "Deactivate"
+              )}
+            </AlertDialogAction>
+            <AlertDialogCancel
+              onClick={() => {
+                setDeactivateDialogOpen(false);
+                setSelectedUser(null);
+              }}
+              className="cls_user_management_deactivate_dialog_cancel"
+            >
+              Cancel
+            </AlertDialogCancel>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Reset Password Dialog */}
+      <AlertDialog open={resetPasswordDialogOpen} onOpenChange={setResetPasswordDialogOpen}>
+        <AlertDialogContent className="cls_user_management_reset_password_dialog">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Reset Password</AlertDialogTitle>
+            <AlertDialogDescription>
+              Send a password reset email to {selectedUser?.email_address}? They will receive a link to reset their password.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="cls_user_management_reset_password_dialog_footer">
+            <AlertDialogAction
+              onClick={handleResetPassword}
+              disabled={usersActionLoading}
+              className="cls_user_management_reset_password_dialog_confirm"
+            >
+              {usersActionLoading ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Sending...
+                </>
+              ) : (
+                "Send Reset Email"
+              )}
+            </AlertDialogAction>
+            <AlertDialogCancel
+              onClick={() => {
+                setResetPasswordDialogOpen(false);
+                setSelectedUser(null);
+              }}
+              className="cls_user_management_reset_password_dialog_cancel"
+            >
+              Cancel
+            </AlertDialogCancel>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Edit Permission Dialog */}
+      <Dialog open={editPermissionDialogOpen} onOpenChange={setEditPermissionDialogOpen}>
+        <DialogContent className="cls_user_management_edit_permission_dialog">
+          <DialogHeader>
+            <DialogTitle>Edit Permission</DialogTitle>
+            <DialogDescription>
+              Update the description for permission: {editingPermission?.permission_name}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="cls_user_management_edit_permission_dialog_content flex flex-col gap-4 py-4">
+            <div className="cls_user_management_edit_permission_dialog_field flex flex-col gap-2">
+              <Label htmlFor="permission_description" className="cls_user_management_edit_permission_dialog_label">
+                Description
+              </Label>
+              <Input
+                id="permission_description"
+                value={editDescription}
+                onChange={(e) => setEditDescription(e.target.value)}
+                placeholder="Enter permission description"
+                className="cls_user_management_edit_permission_dialog_input"
+              />
+            </div>
+          </div>
+          <DialogFooter className="cls_user_management_edit_permission_dialog_footer">
+            <Button
+              onClick={handleEditPermission}
+              disabled={permissionsActionLoading}
+              variant="default"
+              className="cls_user_management_edit_permission_dialog_save"
+            >
+              {permissionsActionLoading ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Saving...
+                </>
+              ) : (
+                <>
+                  <CircleCheck className="h-4 w-4 mr-2" />
+                  Save
+                </>
+              )}
+            </Button>
+            <Button
+              onClick={() => {
+                setEditPermissionDialogOpen(false);
+                setEditingPermission(null);
+                setEditDescription("");
+              }}
+              variant="outline"
+              className="cls_user_management_edit_permission_dialog_cancel"
+            >
+              <CircleX className="h-4 w-4 mr-2" />
+              Cancel
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Add Permission Dialog */}
+      <Dialog open={addPermissionDialogOpen} onOpenChange={setAddPermissionDialogOpen}>
+        <DialogContent className="cls_user_management_add_permission_dialog">
+          <DialogHeader>
+            <DialogTitle>Add New Permission</DialogTitle>
+            <DialogDescription>
+              Create a new permission that can be assigned to roles.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="cls_user_management_add_permission_dialog_content flex flex-col gap-4 py-4">
+            <div className="cls_user_management_add_permission_dialog_field flex flex-col gap-2">
+              <Label htmlFor="new_permission_name" className="cls_user_management_add_permission_dialog_label">
+                Permission Name *
+              </Label>
+              <Input
+                id="new_permission_name"
+                value={newPermissionName}
+                onChange={(e) => setNewPermissionName(e.target.value)}
+                placeholder="Enter permission name (e.g., READ_USERS)"
+                className="cls_user_management_add_permission_dialog_input"
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    handleAddPermission();
+                  }
+                }}
+              />
+            </div>
+            <div className="cls_user_management_add_permission_dialog_field flex flex-col gap-2">
+              <Label htmlFor="new_permission_description" className="cls_user_management_add_permission_dialog_label">
+                Description
+              </Label>
+              <Input
+                id="new_permission_description"
+                value={newPermissionDescription}
+                onChange={(e) => setNewPermissionDescription(e.target.value)}
+                placeholder="Enter permission description (optional)"
+                className="cls_user_management_add_permission_dialog_input"
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    handleAddPermission();
+                  }
+                }}
+              />
+            </div>
+          </div>
+          <DialogFooter className="cls_user_management_add_permission_dialog_footer">
+            <Button
+              onClick={handleAddPermission}
+              disabled={permissionsActionLoading || !newPermissionName.trim()}
+              variant="default"
+              className="cls_user_management_add_permission_dialog_save"
+            >
+              {permissionsActionLoading ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                <>
+                  <CircleCheck className="h-4 w-4 mr-2" />
+                  Create Permission
+                </>
+              )}
+            </Button>
+            <Button
+              onClick={() => {
+                setAddPermissionDialogOpen(false);
+                setNewPermissionName("");
+                setNewPermissionDescription("");
+              }}
+              variant="outline"
+              className="cls_user_management_add_permission_dialog_cancel"
+            >
+              <CircleX className="h-4 w-4 mr-2" />
+              Cancel
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* User Detail Dialog */}
+      <Dialog open={userDetailDialogOpen} onOpenChange={setUserDetailDialogOpen}>
+        <DialogContent className="cls_user_management_user_detail_dialog max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>User Details</DialogTitle>
+            <DialogDescription>
+              Complete information for {selectedUser?.name || selectedUser?.email_address}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="cls_user_management_user_detail_dialog_content flex flex-col gap-4 py-4">
+            {selectedUser && (
+              <div className="cls_user_management_user_detail_fields grid grid-cols-1 gap-4">
+                {/* Profile Picture */}
+                <div className="cls_user_management_user_detail_field_profile_pic flex flex-col gap-2">
+                  <Label className="cls_user_management_user_detail_label font-semibold">
+                    Profile Picture
+                  </Label>
+                  <div className="cls_user_management_user_detail_profile_pic_container flex items-center gap-4">
+                    <Avatar className="cls_user_management_user_detail_avatar h-16 w-16">
+                      <AvatarImage
+                        src={selectedUser.profile_picture_url || undefined}
+                        alt={selectedUser.name ? `Profile picture of ${selectedUser.name}` : "Profile picture"}
+                        className="cls_user_management_user_detail_avatar_image"
+                      />
+                      <AvatarFallback className="cls_user_management_user_detail_avatar_fallback bg-slate-200 text-slate-600 text-lg">
+                        {getUserInitials(selectedUser)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="cls_user_management_user_detail_profile_pic_info flex flex-col gap-1">
+                      <span className="cls_user_management_user_detail_profile_pic_url text-sm text-muted-foreground">
+                        {selectedUser.profile_picture_url || "No profile picture"}
+                      </span>
+                      <span className="cls_user_management_user_detail_profile_pic_source text-xs text-muted-foreground">
+                        Source: {selectedUser.profile_source || "N/A"}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* User ID */}
+                <div className="cls_user_management_user_detail_field_id flex flex-col gap-2">
+                  <Label className="cls_user_management_user_detail_label font-semibold">
+                    User ID
+                  </Label>
+                  <div className="cls_user_management_user_detail_id_value font-mono text-sm bg-muted p-2 rounded">
+                    {selectedUser.id}
+                  </div>
+                </div>
+
+                {/* Name */}
+                <div className="cls_user_management_user_detail_field_name flex flex-col gap-2">
+                  <Label className="cls_user_management_user_detail_label font-semibold">
+                    Name
+                  </Label>
+                  <div className="cls_user_management_user_detail_name_value text-sm">
+                    {selectedUser.name || "-"}
+                  </div>
+                </div>
+
+                {/* Email */}
+                <div className="cls_user_management_user_detail_field_email flex flex-col gap-2">
+                  <Label className="cls_user_management_user_detail_label font-semibold">
+                    Email Address
+                  </Label>
+                  <div className="cls_user_management_user_detail_email_value text-sm">
+                    {selectedUser.email_address}
+                  </div>
+                </div>
+
+                {/* Email Verified */}
+                <div className="cls_user_management_user_detail_field_email_verified flex flex-col gap-2">
+                  <Label className="cls_user_management_user_detail_label font-semibold">
+                    Email Verified
+                  </Label>
+                  <div className="cls_user_management_user_detail_email_verified_value">
+                    {selectedUser.email_verified ? (
+                      <span className="text-green-600 font-medium">Yes</span>
+                    ) : (
+                      <span className="text-red-600 font-medium">No</span>
+                    )}
+                  </div>
+                </div>
+
+                {/* Active Status */}
+                <div className="cls_user_management_user_detail_field_is_active flex flex-col gap-2">
+                  <Label className="cls_user_management_user_detail_label font-semibold">
+                    Active Status
+                  </Label>
+                  <div className="cls_user_management_user_detail_is_active_value">
+                    {selectedUser.is_active ? (
+                      <span className="text-green-600 font-medium">Active</span>
+                    ) : (
+                      <span className="text-red-600 font-medium">Inactive</span>
+                    )}
+                  </div>
+                </div>
+
+                {/* Last Logon */}
+                <div className="cls_user_management_user_detail_field_last_logon flex flex-col gap-2">
+                  <Label className="cls_user_management_user_detail_label font-semibold">
+                    Last Logon
+                  </Label>
+                  <div className="cls_user_management_user_detail_last_logon_value text-sm">
+                    {selectedUser.last_logon ? (
+                      <span className="font-medium">
+                        {new Date(selectedUser.last_logon).toLocaleString(undefined, {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                          hour: "2-digit",
+                          minute: "2-digit",
+                          second: "2-digit",
+                          timeZoneName: "short",
+                        })}
+                      </span>
+                    ) : (
+                      <span className="text-muted-foreground">Never</span>
+                    )}
+                  </div>
+                </div>
+
+                {/* Created At */}
+                <div className="cls_user_management_user_detail_field_created_at flex flex-col gap-2">
+                  <Label className="cls_user_management_user_detail_label font-semibold">
+                    Created At
+                  </Label>
+                  <div className="cls_user_management_user_detail_created_at_value text-sm">
+                    {selectedUser.created_at ? (
+                      <span className="font-medium">
+                        {new Date(selectedUser.created_at).toLocaleString(undefined, {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                          hour: "2-digit",
+                          minute: "2-digit",
+                          second: "2-digit",
+                          timeZoneName: "short",
+                        })}
+                      </span>
+                    ) : (
+                      <span className="text-muted-foreground">-</span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+          <DialogFooter className="cls_user_management_user_detail_dialog_footer">
+            <Button
+              onClick={() => setUserDetailDialogOpen(false)}
+              variant="outline"
+              className="cls_user_management_user_detail_dialog_close"
+            >
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Assign Roles Dialog */}
+      <Dialog open={assignRolesDialogOpen} onOpenChange={setAssignRolesDialogOpen}>
+        <DialogContent className="cls_user_management_assign_roles_dialog max-w-4xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Assign Roles to User</DialogTitle>
+            <DialogDescription>
+              Select roles to assign to {selectedUser?.name || selectedUser?.email_address}. 
+              Check the roles you want to assign, then click Save.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="cls_user_management_assign_roles_dialog_content py-4">
+            <RolesMatrix
+              add_button_enabled={false}
+              role_name_selection_enabled={true}
+              permissions_read_only={true}
+              show_save_cancel={true}
+              user_id={selectedUser?.id}
+              onSave={(data) => {
+                // Data is already saved by RolesMatrix component
+                console.log("User roles saved:", data);
+                // Refresh users list to show updated roles
+                void loadUsers();
+                setAssignRolesDialogOpen(false);
+                setSelectedUser(null);
+              }}
+              onCancel={() => {
+                setAssignRolesDialogOpen(false);
+                setSelectedUser(null);
+              }}
+              className="cls_user_management_assign_roles_matrix"
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+