From edd8fe80895377f3bcd875f454b1ca17593d21bf Mon Sep 17 00:00:00 2001
From: Yashwin <yashwin.shankar@tech4biz.io>
Date: Fri, 19 Jun 2026 16:46:01 +0530
Subject: [PATCH] refactor: centralize platform resources and improve
 role-based access control with standardized parsing and updated permission
 hooks

---
 src/components/layout/Header.tsx              |   15 +-
 src/components/layout/Sidebar.tsx             |  102 +-
 src/components/shared/FailedEmailsTable.tsx   |   64 +-
 .../superadmin/PlatformRolesTable.tsx         | 1220 +++++++++++++++++
 .../superadmin/PlatformUsersTable.tsx         | 1035 ++++++++++++++
 src/components/superadmin/RolesTable.tsx      |   96 +-
 src/constants/platformResources.ts            |   34 +
 src/hooks/usePermissions.ts                   |   28 +-
 src/pages/Login.tsx                           |   17 +-
 src/pages/ProtectedRoute.tsx                  |    9 +-
 src/pages/superadmin/AIFallbackHistory.tsx    |   41 +-
 src/pages/superadmin/Modules.tsx              |   54 +-
 src/pages/superadmin/NotificationMaster.tsx   |  170 ++-
 .../superadmin/NotificationTemplateMaster.tsx |   66 +-
 src/pages/superadmin/Roles.tsx                |  458 +------
 src/pages/superadmin/SmtpConfig.tsx           |   10 +-
 src/pages/superadmin/Tenants.tsx              |   44 +-
 src/pages/superadmin/Users.tsx                |  491 +------
 src/pages/tenant/TenantProtectedRoute.tsx     |    9 +-
 src/routes/super-admin-routes.tsx             |   10 +
 src/services/role-service.ts                  |    6 +-
 src/services/user-service.ts                  |   11 +-
 src/types/user.ts                             |    8 +-
 23 files changed, 2783 insertions(+), 1215 deletions(-)
 create mode 100644 src/components/superadmin/PlatformRolesTable.tsx
 create mode 100644 src/components/superadmin/PlatformUsersTable.tsx
 create mode 100644 src/constants/platformResources.ts

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 80da0d8..580e6c3 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -17,7 +17,7 @@ interface HeaderProps {
 export const Header = ({ breadcrumbs, currentPage, onMenuClick }: HeaderProps): ReactElement => {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
-  const { user, isLoading,roles } = useAppSelector((state) => state.auth);
+  const { user, isLoading, roles, tenantId } = useAppSelector((state) => state.auth);
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -61,6 +61,8 @@ export const Header = ({ breadcrumbs, currentPage, onMenuClick }: HeaderProps):
     };
   }, [isDropdownOpen]);
 
+  const isPlatformUser = roles.includes('super_admin') || tenantId === '00000000-0000-0000-0000-000000000001';
+
   // Handle logout
   const handleLogout = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
     e.preventDefault();
@@ -72,10 +74,9 @@ export const Header = ({ breadcrumbs, currentPage, onMenuClick }: HeaderProps):
     // Check if user is on a tenant route to determine redirect path
     // Note: use /tenant/ instead of /tenant to avoid matching /tenants
     const isTenantRoute = window.location.pathname.startsWith('/tenant/') || window.location.pathname === '/tenant';
-    const isSuperAdmin = roles.includes('super_admin');
     
-    // Super admins always go to root login, tenant users go to /tenant/login if on a tenant route
-    const redirectPath = isSuperAdmin ? '/' : (isTenantRoute ? '/tenant/login' : '/');
+    // Platform users always go to root login, tenant users go to /tenant/login if on a tenant route
+    const redirectPath = isPlatformUser ? '/' : (isTenantRoute ? '/tenant/login' : '/');
     
     try {
       // Call logout API with Bearer token
@@ -110,7 +111,7 @@ export const Header = ({ breadcrumbs, currentPage, onMenuClick }: HeaderProps):
         >
           <Menu className="w-5 h-5 text-[#0f1724]" />
         </button>
-
+ 
         {/* Breadcrumbs */}
         <nav className="flex items-center gap-1.5 md:gap-2">
           {breadcrumbs && breadcrumbs.length > 0 ? (
@@ -118,7 +119,7 @@ export const Header = ({ breadcrumbs, currentPage, onMenuClick }: HeaderProps):
               {breadcrumbs[0].label !== 'QAssure' && (
                 <>
                   <button
-                    onClick={() => navigate(roles.includes('super_admin') ? '/dashboard' : '/tenant')}
+                    onClick={() => navigate(isPlatformUser ? '/dashboard' : '/tenant')}
                     className="text-xs md:text-[13px] font-normal text-[#6b7280] hover:text-[#0f1724] transition-colors cursor-pointer"
                   >
                     QAssure
@@ -149,7 +150,7 @@ export const Header = ({ breadcrumbs, currentPage, onMenuClick }: HeaderProps):
           ) : (
             <>
               <button
-                onClick={() => navigate(roles.includes('super_admin') ? '/dashboard' : '/tenant')}
+                onClick={() => navigate(isPlatformUser ? '/dashboard' : '/tenant')}
                 className="text-xs md:text-[13px] font-normal text-[#6b7280] hover:text-[#0f1724] transition-colors cursor-pointer"
               >
                 QAssure
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 5e7be4b..14c1cd9 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -52,10 +52,29 @@ interface SidebarProps {
 // Super Admin menu items
 const superAdminPlatformMenu: MenuItem[] = [
   { icon: LayoutDashboard, label: "Dashboard", path: "/dashboard" },
-  { icon: Building2, label: "Tenants", path: "/tenants" },
-  // { icon: Users, label: 'User Management', path: '/users' },
-  // { icon: Shield, label: 'Roles', path: '/roles' },
-  { icon: Package, label: "Modules", path: "/modules" },
+  {
+    icon: Building2,
+    label: "Tenants",
+    path: "/tenants",
+    requiredPermission: { resource: "tenants", action: "read" },
+  },
+  // Platform Users & Roles — no requiredPermission: super_admin always sees it;
+  // platform users do NOT see it (cannot manage other platform users)
+  {
+    icon: Users,
+    label: "Platform Users",
+    isGroup: true,
+    children: [
+      { label: "Users",               path: "/platform-users" },
+      { label: "Roles & Permissions", path: "/platform-roles" },
+    ],
+  },
+  {
+    icon: Package,
+    label: "Modules",
+    path: "/modules",
+    requiredPermission: { resource: "modules", action: "read" },
+  },
 ];
 
 const superAdminSystemMenu: MenuItem[] = [
@@ -65,21 +84,33 @@ const superAdminSystemMenu: MenuItem[] = [
     isGroup: true,
     children: [
       { label: "Notifications List", path: "/notifications" },
-      { label: "Master Management", path: "/notification-master" },
-      { label: "Global Templates", path: "/notification-templates" },
+      { label: "Master Management",  path: "/notification-master" },
+      { label: "Global Templates",   path: "/notification-templates" },
     ],
+    requiredPermission: { resource: "notifications", action: "read" },
+  },
+  {
+    icon: FileText,
+    label: "Audit Logs",
+    path: "/audit-logs",
+    requiredPermission: { resource: "audit_logs", action: "read" },
+  },
+  {
+    icon: Shield,
+    label: "Audit Resources",
+    path: "/audit-resource-types",
+    requiredPermission: { resource: "audit_resources", action: "read" },
   },
-  { icon: FileText, label: "Audit Logs", path: "/audit-logs" },
-  { icon: Shield, label: "Audit Resources", path: "/audit-resource-types" },
   {
     icon: Settings,
     label: "Settings",
     isGroup: true,
     children: [
-      { label: "SMTP Config", path: "/settings/smtp" },
-      { label: "Failed Emails", path: "/settings/failed-emails" },
-      { label: "AI Fallback Monitoring", path: "/settings/ai-fallbacks" },
+      { label: "SMTP Config",           path: "/settings/smtp" },
+      { label: "Failed Emails",         path: "/settings/failed-emails" },
+      { label: "AI Fallback Monitoring",path: "/settings/ai-fallbacks" },
     ],
+    requiredPermission: { resource: "settings", action: "read" },
   },
 ];
 
@@ -426,7 +457,7 @@ const GroupMenuItem = ({
 export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
   const { primaryColor, secondaryColor, accentColor, logoUrl } = useAppTheme();
   const location = useLocation();
-  const { roles, permissions } = useAppSelector((state) => state.auth);
+  const { roles, permissions, tenantId } = useAppSelector((state) => state.auth);
 
   // Fetch theme for tenant admin
   const isSuperAdminCheck = () => {
@@ -445,11 +476,50 @@ export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
 
   const isSuperAdmin = isSuperAdminCheck();
 
+  /**
+   * Is this user a platform user (non-super-admin with a platform-scoped role)?
+   * Platform users see a filtered super-admin sidebar — only the tabs they have
+   * permission for. The sidebar check re-uses the existing hasPermission() +
+   * filterMenuItems() logic that already works for tenant users.
+   */
+  const isPlatformUser = !isSuperAdmin && (
+    tenantId === "00000000-0000-0000-0000-000000000001" ||
+    (() => {
+      let rolesArray: string[] = [];
+      if (Array.isArray(roles)) {
+        rolesArray = roles;
+      } else if (typeof roles === "string") {
+        try { rolesArray = JSON.parse(roles); } catch { rolesArray = []; }
+      }
+      // A platform user is NOT super_admin and NOT a tenant_admin / viewer / etc.
+      // The server already embeds platform-scoped roles in the JWT.
+      // We detect it by: the user has no tenantId but has roles (or has any role
+      // that is not one of the known tenant roles). Simplest: if not super_admin
+      // and the user ended up on the super-admin layout, treat them as platform user.
+      const knownTenantRoles = ["tenant_admin", "quality_manager", "viewer"];
+      return rolesArray.some(r => !knownTenantRoles.includes(r) && r !== "super_admin");
+    })()
+  );
+
   // Get role name for display
   const getRoleName = (): string => {
     if (isSuperAdmin) {
       return "Super Admin";
     }
+    if (isPlatformUser) {
+      // Format the platform role name nicely
+      let rolesArray: string[] = [];
+      if (Array.isArray(roles)) rolesArray = roles;
+      else if (typeof roles === "string") {
+        try { rolesArray = JSON.parse(roles); } catch { rolesArray = []; }
+      }
+      if (rolesArray.length > 0) {
+        return rolesArray[0]
+          .split("_")
+          .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+          .join(" ");
+      }
+    }
     let rolesArray: string[] = [];
     if (Array.isArray(roles)) {
       rolesArray = roles;
@@ -546,14 +616,16 @@ export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
   };
 
   // Select and filter menu items based on role and permissions
+  // Platform users reuse the super-admin menu arrays but filterMenuItems() hides
+  // tabs they don't have permission for (same as tenant sidebar logic).
   const platformMenu = filterMenuItems(
-    isSuperAdmin ? superAdminPlatformMenu : tenantAdminPlatformMenu,
+    isSuperAdmin || isPlatformUser ? superAdminPlatformMenu : tenantAdminPlatformMenu,
   );
   const platformServiceMenu = filterMenuItems(
-    isSuperAdmin ? [] : tenantAdminPlatformServiceMenu,
+    isSuperAdmin || isPlatformUser ? [] : tenantAdminPlatformServiceMenu,
   );
   const systemMenu = filterMenuItems(
-    isSuperAdmin ? superAdminSystemMenu : tenantAdminSystemMenu,
+    isSuperAdmin || isPlatformUser ? superAdminSystemMenu : tenantAdminSystemMenu,
   );
 
   const MenuSection = ({
diff --git a/src/components/shared/FailedEmailsTable.tsx b/src/components/shared/FailedEmailsTable.tsx
index 769e27c..2de8629 100644
--- a/src/components/shared/FailedEmailsTable.tsx
+++ b/src/components/shared/FailedEmailsTable.tsx
@@ -13,12 +13,14 @@ import { toast } from "sonner";
 import { Pagination } from "./Pagination";
 import { ActionDropdown } from "./ActionDropdown";
 import { PrimaryButton } from "./PrimaryButton";
+import { usePermissions } from "@/hooks/usePermissions";
 
 interface FailedEmailsTableProps {
   onRegisterResendAll?: (node: React.ReactNode) => void;
 }
 
 export const FailedEmailsTable: React.FC<FailedEmailsTableProps> = ({ onRegisterResendAll }) => {
+  const { canUpdate, canDelete } = usePermissions();
   const [emails, setEmails] = useState<FailedEmail[]>([]);
   const [loading, setLoading] = useState(true);
   const [total, setTotal] = useState(0);
@@ -86,22 +88,24 @@ export const FailedEmailsTable: React.FC<FailedEmailsTableProps> = ({ onRegister
   useEffect(() => {
     if (onRegisterResendAll) {
       onRegisterResendAll(
-        <PrimaryButton
-          onClick={handleResendAll}
-          disabled={
-            isResendingAll ||
-            emails.filter((e) => e.status === "failed").length === 0
-          }
-        >
-          {isResendingAll ? (
-            <>
-              <Loader2 className="mr-2 w-3.5 h-3.5 animate-spin" />
-              Resending...
-            </>
-          ) : (
-            "Resend All Failed"
-          )}
-        </PrimaryButton>
+        canUpdate("settings") ? (
+          <PrimaryButton
+            onClick={handleResendAll}
+            disabled={
+              isResendingAll ||
+              emails.filter((e) => e.status === "failed").length === 0
+            }
+          >
+            {isResendingAll ? (
+              <>
+                <Loader2 className="mr-2 w-3.5 h-3.5 animate-spin" />
+                Resending...
+              </>
+            ) : (
+              "Resend All Failed"
+            )}
+          </PrimaryButton>
+        ) : null
       );
     }
     return () => {
@@ -109,7 +113,7 @@ export const FailedEmailsTable: React.FC<FailedEmailsTableProps> = ({ onRegister
         onRegisterResendAll(null);
       }
     };
-  }, [isResendingAll, emails, onRegisterResendAll]);
+  }, [isResendingAll, emails, onRegisterResendAll, canUpdate]);
 
   const handleDelete = async (id: string) => {
     try {
@@ -167,7 +171,7 @@ export const FailedEmailsTable: React.FC<FailedEmailsTableProps> = ({ onRegister
                 onClick: () => showEmailDetails(record),
                 icon: <Eye className="w-3.5 h-3.5 text-gray-500" />,
               },
-              ...(record.status === "failed"
+              ...(record.status === "failed" && canUpdate("settings")
                 ? [
                     {
                       label:
@@ -184,12 +188,16 @@ export const FailedEmailsTable: React.FC<FailedEmailsTableProps> = ({ onRegister
                     },
                   ]
                 : []),
-              {
-                label: "Delete Email",
-                onClick: () => handleDelete(record.id),
-                icon: <Trash2 className="w-3.5 h-3.5 text-red-600" />,
-                variant: "danger",
-              },
+              ...(canDelete("settings")
+                ? [
+                    {
+                      label: "Delete Email",
+                      onClick: () => handleDelete(record.id),
+                      icon: <Trash2 className="w-3.5 h-3.5 text-red-600" />,
+                      variant: "danger" as const,
+                    },
+                  ]
+                : []),
             ]}
           />
         </div>
@@ -200,13 +208,8 @@ export const FailedEmailsTable: React.FC<FailedEmailsTableProps> = ({ onRegister
   return (
     <div className="overflow-hidden">
       {/* Toolbar / Actions Header */}
-      {!onRegisterResendAll && (
+      {!onRegisterResendAll && canUpdate("settings") && (
         <div className="pb-2 flex justify-end">
-          {/* <div className="flex items-center gap-2 w-full sm:w-auto justify-end"> */}
-          {/* <Button variant="outline" onClick={() => fetchEmails(currentPage)}>
-              <RefreshCw className="mr-2 w-3.5 h-3.5" />
-              Refresh
-            </Button> */}
           <PrimaryButton
             onClick={handleResendAll}
             disabled={
@@ -223,7 +226,6 @@ export const FailedEmailsTable: React.FC<FailedEmailsTableProps> = ({ onRegister
               "Resend All Failed"
             )}
           </PrimaryButton>
-          {/* </div> */}
         </div>
       )}
 
diff --git a/src/components/superadmin/PlatformRolesTable.tsx b/src/components/superadmin/PlatformRolesTable.tsx
new file mode 100644
index 0000000..7339a3c
--- /dev/null
+++ b/src/components/superadmin/PlatformRolesTable.tsx
@@ -0,0 +1,1220 @@
+import {
+  useState,
+  useEffect,
+  type ReactElement,
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Plus, ArrowUpDown, Loader2 } from "lucide-react";
+import {
+  PrimaryButton,
+  SecondaryButton,
+  ActionDropdown,
+  DataTable,
+  Pagination,
+  FilterDropdown,
+  SearchBox,
+  Modal,
+  FormField,
+  FormTextArea,
+  // DeleteConfirmationModal,
+  type Column,
+} from "@/components/shared";
+import { roleService } from "@/services/role-service";
+import type { Role, CreateRoleRequest, UpdateRoleRequest } from "@/types/role";
+import { showToast } from "@/utils/toast";
+import { formatDate } from "@/utils/format-date";
+import { useAppSelector } from "@/hooks/redux-hooks";
+import CodeBadge from "@/components/shared/CodeBadge";
+import { usePermissions } from "@/hooks/usePermissions";
+
+// Utility function to generate code from name
+const generateCodeFromName = (name: string): string => {
+  return name
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9\s]/g, "") // Remove special characters except spaces
+    .replace(/\s+/g, "_") // Replace spaces with underscores
+    .replace(/_+/g, "_") // Replace multiple underscores with single underscore
+    .replace(/^_|_$/g, ""); // Remove leading/trailing underscores
+};
+
+// All available resources
+const ALL_RESOURCES = [
+  "users",
+  "roles",
+  "tenants",
+  "modules",
+  // "permissions",
+  // "projects",
+  "document",
+  // "audit",
+  "security",
+  "workflow",
+  // "training",
+  // "capa",
+  "supplier",
+  // "reports",
+  "notifications",
+  "files",
+  "settings",
+  "audit_logs",
+  "audit_resources",
+  // "qms_connections",
+  // "qms_sync_jobs",
+  // "qms_sync_conflicts",
+  // "qms_entity_mappings",
+  "ai",
+  // "qms",
+];
+
+// All available actions
+const ALL_ACTIONS = ["create", "read", "update", "delete"];
+
+// Resources that should not be visible or managed on the platform roles UI
+const EXCLUDED_RESOURCES = new Set([
+  "usage",
+  "licenses",
+  "pricing_plans",
+  "pricing-plans",
+  "pricing plans",
+  "invoices",
+  "billing",
+  "payments",
+]);
+
+// Validation schema for creation
+const newPlatformRoleSchema = z.object({
+  name: z.string().min(1, "Role name is required"),
+  code: z
+    .string()
+    .min(1, "Code is required")
+    .regex(
+      /^[a-z]+(_[a-z]+)*$/,
+      "Code must be lowercase and use '_' for separation (e.g. abc_def)",
+    ),
+  description: z.string().min(1, "Description is required"),
+  permissions: z
+    .array(
+      z.object({
+        resource: z.string(),
+        action: z.string(),
+      }),
+    )
+    .optional()
+    .nullable(),
+});
+
+type NewPlatformRoleFormData = z.infer<typeof newPlatformRoleSchema>;
+
+// Validation schema for update
+const editPlatformRoleSchema = z.object({
+  name: z.string().min(1, "Role name is required"),
+  code: z
+    .string()
+    .min(1, "Code is required")
+    .regex(
+      /^[a-z]+(_[a-z]+)*$/,
+      "Code must be lowercase and use '_' for separation (e.g. abc_def)",
+    ),
+  description: z.string().min(1, "Description is required"),
+  permissions: z
+    .array(
+      z.object({
+        resource: z.string(),
+        action: z.string(),
+      }),
+    )
+    .optional()
+    .nullable(),
+});
+
+type EditPlatformRoleFormData = z.infer<typeof editPlatformRoleSchema>;
+
+// Dedicated Creation Modal
+interface NewPlatformRoleModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: CreateRoleRequest) => Promise<void>;
+  isLoading: boolean;
+}
+
+const NewPlatformRoleModal = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  isLoading = false,
+}: NewPlatformRoleModalProps): ReactElement | null => {
+  const permissions = useAppSelector((state) => state.auth.permissions);
+  const [selectedPermissions, setSelectedPermissions] = useState<
+    Array<{ resource: string; action: string }>
+  >([]);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    reset,
+    setError,
+    clearErrors,
+    formState: { errors },
+  } = useForm<NewPlatformRoleFormData>({
+    resolver: zodResolver(newPlatformRoleSchema),
+    defaultValues: {
+      code: undefined,
+      permissions: [],
+    },
+  });
+
+  const nameValue = watch("name");
+
+  // Auto-generate code from name
+  useEffect(() => {
+    if (nameValue) {
+      const generatedCode = generateCodeFromName(nameValue);
+      setValue("code", generatedCode, { shouldValidate: true });
+    }
+  }, [nameValue, setValue]);
+
+  // Reset form when modal closes
+  useEffect(() => {
+    if (!isOpen) {
+      reset({
+        name: "",
+        code: undefined,
+        description: "",
+        permissions: [],
+      });
+      setSelectedPermissions([]);
+      clearErrors();
+    }
+  }, [isOpen, reset, clearErrors]);
+
+  // Build available resources and actions based on user permissions
+  const availableResourcesAndActions = useMemo(() => {
+    const resourceMap = new Map<string, Set<string>>();
+
+    permissions.forEach((perm) => {
+      const { resource, action } = perm;
+      if (EXCLUDED_RESOURCES.has(resource)) return;
+
+      if (resource === "*") {
+        ALL_RESOURCES.forEach((res) => {
+          if (EXCLUDED_RESOURCES.has(res)) return;
+          if (!resourceMap.has(res)) {
+            resourceMap.set(res, new Set());
+          }
+          const actions = resourceMap.get(res)!;
+          if (action === "*") {
+            ALL_ACTIONS.forEach((act) => actions.add(act));
+          } else {
+            actions.add(action);
+          }
+        });
+      } else {
+        if (!resourceMap.has(resource)) {
+          resourceMap.set(resource, new Set());
+        }
+        const actions = resourceMap.get(resource)!;
+        if (action === "*") {
+          ALL_ACTIONS.forEach((act) => actions.add(act));
+        } else {
+          actions.add(action);
+        }
+      }
+    });
+
+    return resourceMap;
+  }, [permissions]);
+
+  // Handle permission checkbox change
+  const handlePermissionChange = (
+    resource: string,
+    action: string,
+    checked: boolean,
+  ) => {
+    setSelectedPermissions((prev) => {
+      const newPerms = [...prev];
+      if (checked) {
+        if (
+          !newPerms.some((p) => p.resource === resource && p.action === action)
+        ) {
+          newPerms.push({ resource, action });
+        }
+      } else {
+        return newPerms.filter(
+          (p) => !(p.resource === resource && p.action === action),
+        );
+      }
+      return newPerms;
+    });
+  };
+
+  useEffect(() => {
+    setValue(
+      "permissions",
+      selectedPermissions.length > 0 ? selectedPermissions : [],
+    );
+  }, [selectedPermissions, setValue]);
+
+  const handleFormSubmit = async (
+    data: NewPlatformRoleFormData,
+  ): Promise<void> => {
+    clearErrors();
+    try {
+      await onSubmit(data as CreateRoleRequest);
+    } catch (error: any) {
+      if (
+        error?.response?.data?.details &&
+        Array.isArray(error.response.data.details)
+      ) {
+        const validationErrors = error.response.data.details;
+        validationErrors.forEach(
+          (detail: { path: string; message: string }) => {
+            if (
+              detail.path === "name" ||
+              detail.path === "code" ||
+              detail.path === "description" ||
+              detail.path === "permissions"
+            ) {
+              setError(detail.path as keyof NewPlatformRoleFormData, {
+                type: "server",
+                message: detail.message,
+              });
+            }
+          },
+        );
+      } else {
+        const errorObj = error?.response?.data?.error;
+        const errorMessage =
+          (typeof errorObj === "object" &&
+          errorObj !== null &&
+          "message" in errorObj
+            ? errorObj.message
+            : null) ||
+          (typeof errorObj === "string" ? errorObj : null) ||
+          error?.response?.data?.message ||
+          error?.message ||
+          "Failed to create platform role. Please try again.";
+        setError("root", {
+          type: "server",
+          message:
+            typeof errorMessage === "string"
+              ? errorMessage
+              : "Failed to create platform role. Please try again.",
+        });
+      }
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Create Platform Role"
+      description="Define a new platform-level role and its allowed permissions."
+      maxWidth="lg"
+      footer={
+        <>
+          <SecondaryButton
+            type="button"
+            onClick={onClose}
+            disabled={isLoading}
+            className="px-4 py-2.5 text-sm"
+          >
+            Cancel
+          </SecondaryButton>
+          <PrimaryButton
+            type="button"
+            onClick={handleSubmit(handleFormSubmit)}
+            disabled={isLoading}
+            size="default"
+            className="px-4 py-2.5 text-sm"
+          >
+            {isLoading ? "Creating..." : "Create Role"}
+          </PrimaryButton>
+        </>
+      }
+    >
+      <form
+        onSubmit={handleSubmit(handleFormSubmit)}
+        className="flex flex-col gap-0"
+      >
+        {errors.root && (
+          <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
+            <p className="text-sm text-[#ef4444]">{errors.root.message}</p>
+          </div>
+        )}
+
+        <div className="grid grid-cols-2 gap-5 pb-4">
+          <FormField
+            label="Role Name"
+            required
+            placeholder="Enter Role Name"
+            error={errors.name?.message}
+            {...register("name")}
+          />
+
+          <FormField
+            label="Role Code"
+            required
+            placeholder="Auto-generated from name"
+            error={errors.code?.message}
+            {...register("code")}
+            disabled
+            className="bg-[#f3f4f6] cursor-not-allowed"
+          />
+        </div>
+
+        <FormTextArea
+          label="Description"
+          required
+          placeholder="Enter Role Description"
+          error={errors.description?.message}
+          {...register("description")}
+          rows={4}
+        />
+
+        <div className="pb-4">
+          <div className="flex flex-col items-start gap-3 self-stretch p-4 rounded-[8px] border border-[#D1D5DB] bg-white">
+            <div className="flex flex-col items-start self-stretch">
+              <h3 className="text-[13px] font-semibold text-[#111827]">
+                Permissions
+              </h3>
+              <p className="text-[11px] text-[#6B7280]">
+                Select allowed actions for this role by platform service.
+              </p>
+            </div>
+
+            {errors.permissions && (
+              <p className="text-sm text-[#ef4444]">
+                {errors.permissions.message}
+              </p>
+            )}
+
+            <div className="w-full overflow-x-auto border border-[#E5E7EB] rounded-[8px]">
+              <table className="w-full border-collapse">
+                <thead>
+                  <tr>
+                    <th className="w-[204px] h-[53px] px-3 py-[10px] text-left text-[11px] font-medium uppercase text-[#6B7280] border-b border-[#D1D5DB] bg-[#F9F9F9]">
+                      Platform Services
+                    </th>
+                    {["View", "Create", "Edit", "Delete"].map((action) => (
+                      <th
+                        key={action}
+                        className="w-[120px] px-3 py-[10px] text-center text-[11px] font-medium text-[#6B7280] border-b border-[#D1D5DB] bg-[#F9F9F9]"
+                      >
+                        {action}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+
+                <tbody>
+                  {Array.from(availableResourcesAndActions.entries()).map(
+                    ([resource, actions]) => (
+                      <tr key={resource}>
+                        <td className="w-[204px] h-[53px] px-3 py-[19px] border-b border-[#E5E7EB] text-[14px] text-[#111827] bg-white capitalize">
+                          {resource.replace(/_/g, " ")}
+                        </td>
+
+                        {["read", "create", "update", "delete"].map(
+                          (action) => {
+                            const isChecked = selectedPermissions.some((p) => {
+                              if (
+                                p.resource === resource &&
+                                p.action === action
+                              )
+                                return true;
+                              if (p.resource === "*" && p.action === action)
+                                return true;
+                              if (p.resource === resource && p.action === "*")
+                                return true;
+                              if (p.resource === "*" && p.action === "*")
+                                return true;
+                              return false;
+                            });
+
+                            const isAvailable = actions.has(action);
+
+                            return (
+                              <td
+                                key={`${resource}-${action}`}
+                                className="w-[120px] px-3 py-[10px] text-center border-b border-[#E5E7EB] bg-white"
+                              >
+                                <div className="flex justify-center items-center">
+                                  <input
+                                    type="checkbox"
+                                    disabled={!isAvailable}
+                                    checked={isAvailable ? isChecked : false}
+                                    onChange={(e) =>
+                                      handlePermissionChange(
+                                        resource,
+                                        action,
+                                        e.target.checked,
+                                      )
+                                    }
+                                    className="w-4 h-4 rounded border-[#D1D5DB] text-[#0F3CC9] focus:ring-[#0F3CC9] disabled:opacity-30 disabled:cursor-not-allowed"
+                                  />
+                                </div>
+                              </td>
+                            );
+                          },
+                        )}
+                      </tr>
+                    ),
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+// Dedicated Edit Modal
+interface EditPlatformRoleModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  roleId: string | null;
+  onLoadRole: (id: string) => Promise<Role>;
+  onSubmit: (id: string, data: UpdateRoleRequest) => Promise<void>;
+  isLoading: boolean;
+}
+
+const EditPlatformRoleModal = ({
+  isOpen,
+  onClose,
+  roleId,
+  onLoadRole,
+  onSubmit,
+  isLoading = false,
+}: EditPlatformRoleModalProps): ReactElement | null => {
+  const [isLoadingRole, setIsLoadingRole] = useState<boolean>(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const loadedRoleIdRef = useRef<string | null>(null);
+  const permissions = useAppSelector((state) => state.auth.permissions);
+  const [selectedPermissions, setSelectedPermissions] = useState<
+    Array<{ resource: string; action: string }>
+  >([]);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    reset,
+    setError,
+    clearErrors,
+    formState: { errors },
+  } = useForm<EditPlatformRoleFormData>({
+    resolver: zodResolver(editPlatformRoleSchema),
+    defaultValues: {
+      permissions: [],
+    },
+  });
+
+  // Build available resources and actions based on user permissions
+  const availableResourcesAndActions = useMemo(() => {
+    const resourceMap = new Map<string, Set<string>>();
+
+    permissions.forEach((perm) => {
+      const { resource, action } = perm;
+      if (EXCLUDED_RESOURCES.has(resource)) return;
+
+      if (resource === "*") {
+        ALL_RESOURCES.forEach((res) => {
+          if (EXCLUDED_RESOURCES.has(res)) return;
+          if (!resourceMap.has(res)) {
+            resourceMap.set(res, new Set());
+          }
+          const actions = resourceMap.get(res)!;
+          if (action === "*") {
+            ALL_ACTIONS.forEach((act) => actions.add(act));
+          } else {
+            actions.add(action);
+          }
+        });
+      } else {
+        if (!resourceMap.has(resource)) {
+          resourceMap.set(resource, new Set());
+        }
+        const actions = resourceMap.get(resource)!;
+        if (action === "*") {
+          ALL_ACTIONS.forEach((act) => actions.add(act));
+        } else {
+          actions.add(action);
+        }
+      }
+    });
+
+    return resourceMap;
+  }, [permissions]);
+
+  // Handle permission checkbox change
+  const handlePermissionChange = (
+    resource: string,
+    action: string,
+    checked: boolean,
+  ) => {
+    setSelectedPermissions((prev) => {
+      const newPerms = [...prev];
+      if (checked) {
+        if (
+          !newPerms.some((p) => p.resource === resource && p.action === action)
+        ) {
+          newPerms.push({ resource, action });
+        }
+      } else {
+        return newPerms.filter(
+          (p) => !(p.resource === resource && p.action === action),
+        );
+      }
+      return newPerms;
+    });
+  };
+
+  useEffect(() => {
+    setValue(
+      "permissions",
+      selectedPermissions.length > 0 ? selectedPermissions : [],
+    );
+  }, [selectedPermissions, setValue]);
+
+  // Load role details
+  useEffect(() => {
+    if (isOpen && roleId) {
+      if (loadedRoleIdRef.current !== roleId) {
+        const loadRoleData = async () => {
+          try {
+            setIsLoadingRole(true);
+            setLoadError(null);
+            clearErrors();
+            const role = await onLoadRole(roleId);
+            loadedRoleIdRef.current = roleId;
+
+            const rolePermissions = role.permissions || [];
+            setSelectedPermissions(rolePermissions);
+            setValue("permissions", rolePermissions);
+
+            reset({
+              name: role.name,
+              code: role.code,
+              description: role.description || "",
+              permissions: rolePermissions,
+            });
+          } catch (err: any) {
+            setLoadError(
+              err?.response?.data?.error?.message ||
+                "Failed to load role details",
+            );
+          } finally {
+            setIsLoadingRole(false);
+          }
+        };
+        loadRoleData();
+      }
+    } else if (!isOpen) {
+      loadedRoleIdRef.current = null;
+      setSelectedPermissions([]);
+      reset({
+        name: "",
+        code: "",
+        description: "",
+        permissions: [],
+      });
+      setLoadError(null);
+      clearErrors();
+    }
+  }, [isOpen, roleId, onLoadRole, reset, clearErrors, setValue]);
+
+  const handleFormSubmit = async (
+    data: EditPlatformRoleFormData,
+  ): Promise<void> => {
+    if (!roleId) return;
+    clearErrors();
+    try {
+      const { code, ...rest } = data;
+      await onSubmit(roleId, rest as UpdateRoleRequest);
+    } catch (error: any) {
+      if (
+        error?.response?.data?.details &&
+        Array.isArray(error.response.data.details)
+      ) {
+        const validationErrors = error.response.data.details;
+        validationErrors.forEach(
+          (detail: { path: string; message: string }) => {
+            if (
+              detail.path === "name" ||
+              detail.path === "code" ||
+              detail.path === "description" ||
+              detail.path === "permissions"
+            ) {
+              setError(detail.path as keyof EditPlatformRoleFormData, {
+                type: "server",
+                message: detail.message,
+              });
+            }
+          },
+        );
+      } else {
+        const errorObj = error?.response?.data?.error;
+        const errorMessage =
+          (typeof errorObj === "object" &&
+          errorObj !== null &&
+          "message" in errorObj
+            ? errorObj.message
+            : null) ||
+          (typeof errorObj === "string" ? errorObj : null) ||
+          error?.response?.data?.message ||
+          error?.message ||
+          "Failed to update role. Please try again.";
+        setError("root", {
+          type: "server",
+          message:
+            typeof errorMessage === "string"
+              ? errorMessage
+              : "Failed to update role. Please try again.",
+        });
+      }
+      throw error;
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Edit Platform Role"
+      description="Update platform role name, description, and permissions."
+      maxWidth="lg"
+      footer={
+        <>
+          <SecondaryButton
+            type="button"
+            onClick={onClose}
+            disabled={isLoading || isLoadingRole}
+            className="px-4 py-2.5 text-sm"
+          >
+            Cancel
+          </SecondaryButton>
+          <PrimaryButton
+            type="button"
+            onClick={handleSubmit(handleFormSubmit)}
+            disabled={isLoading || isLoadingRole}
+            size="default"
+            className="px-4 py-2.5 text-sm"
+          >
+            {isLoading ? "Updating..." : "Update Role"}
+          </PrimaryButton>
+        </>
+      }
+    >
+      {isLoadingRole && (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-6 h-6 text-[#112868] animate-spin" />
+        </div>
+      )}
+
+      {errors.root && (
+        <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4 mx-5 mt-5">
+          <p className="text-sm text-[#ef4444]">{errors.root.message}</p>
+        </div>
+      )}
+
+      {loadError && (
+        <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4 mx-5">
+          <p className="text-sm text-[#ef4444]">{loadError}</p>
+        </div>
+      )}
+
+      {!isLoadingRole && (
+        <form
+          onSubmit={handleSubmit(handleFormSubmit)}
+          className="flex flex-col gap-0"
+        >
+          <div className="grid grid-cols-2 gap-5 pb-4">
+            <FormField
+              label="Role Name"
+              required
+              placeholder="Enter Role Name"
+              error={errors.name?.message}
+              {...register("name")}
+            />
+
+            <FormField
+              label="Role Code"
+              required
+              placeholder="Auto-generated from name"
+              error={errors.code?.message}
+              {...register("code")}
+              disabled
+              className="bg-[#f3f4f6] cursor-not-allowed"
+            />
+          </div>
+
+          <FormTextArea
+            label="Description"
+            required
+            placeholder="Enter Role Description"
+            error={errors.description?.message}
+            {...register("description")}
+            rows={4}
+          />
+
+          <div className="pb-4">
+            <div className="flex flex-col items-start gap-3 self-stretch p-4 rounded-[8px] border border-[#D1D5DB] bg-white">
+              <div className="flex flex-col items-start self-stretch">
+                <h3 className="text-[13px] font-semibold text-[#111827]">
+                  Permissions
+                </h3>
+                <p className="text-[11px] text-[#6B7280]">
+                  Select allowed actions for this role by platform service.
+                </p>
+              </div>
+
+              {errors.permissions && (
+                <p className="text-sm text-[#ef4444]">
+                  {errors.permissions.message}
+                </p>
+              )}
+
+              <div className="w-full overflow-x-auto border border-[#E5E7EB] rounded-[8px]">
+                <table className="w-full border-collapse">
+                  <thead>
+                    <tr>
+                      <th className="w-[204px] h-[53px] px-3 py-[19px] text-left text-[11px] font-medium uppercase text-[#6B7280] border-b border-[#D1D5DB] bg-[#F9F9F9]">
+                        Platform Services
+                      </th>
+                      {["View", "Create", "Edit", "Delete"].map((action) => (
+                        <th
+                          key={action}
+                          className="w-[120px] px-3 py-[10px] text-center text-[11px] font-medium text-[#6B7280] border-b border-[#D1D5DB] bg-[#F9F9F9]"
+                        >
+                          {action}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {Array.from(availableResourcesAndActions.entries()).map(
+                      ([resource, actions]) => (
+                        <tr key={resource}>
+                          <td className="w-[204px] h-[53px] px-3 py-[19px] border-b border-[#E5E7EB] text-[14px] text-[#111827] bg-white capitalize">
+                            {resource.replace(/_/g, " ")}
+                          </td>
+
+                          {["read", "create", "update", "delete"].map(
+                            (action) => {
+                              const isChecked = selectedPermissions.some(
+                                (p) => {
+                                  if (
+                                    p.resource === resource &&
+                                    p.action === action
+                                  )
+                                    return true;
+                                  if (p.resource === "*" && p.action === action)
+                                    return true;
+                                  if (
+                                    p.resource === resource &&
+                                    p.action === "*"
+                                  )
+                                    return true;
+                                  if (p.resource === "*" && p.action === "*")
+                                    return true;
+                                  return false;
+                                },
+                              );
+
+                              const isAvailable = actions.has(action);
+
+                              return (
+                                <td
+                                  key={`${resource}-${action}`}
+                                  className="w-[120px] px-3 py-[10px] text-center border-b border-[#E5E7EB] bg-white"
+                                >
+                                  <div className="flex justify-center items-center">
+                                    <input
+                                      type="checkbox"
+                                      disabled={!isAvailable}
+                                      checked={isAvailable ? isChecked : false}
+                                      onChange={(e) =>
+                                        handlePermissionChange(
+                                          resource,
+                                          action,
+                                          e.target.checked,
+                                        )
+                                      }
+                                      className="w-4 h-4 rounded border-[#D1D5DB] text-[#0F3CC9] focus:ring-[#0F3CC9] disabled:opacity-30 disabled:cursor-not-allowed"
+                                    />
+                                  </div>
+                                </td>
+                              );
+                            },
+                          )}
+                        </tr>
+                      ),
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </form>
+      )}
+    </Modal>
+  );
+};
+
+export interface PlatformRolesTableRef {
+  openNewModal: () => void;
+  refresh: () => void;
+}
+
+export const PlatformRolesTable = forwardRef<PlatformRolesTableRef, {}>(
+  (_, ref): ReactElement => {
+    const tenantIdFromAuth = useAppSelector((state) => state.auth.tenantId);
+    const { canCreate, canUpdate } = usePermissions();
+
+    const [roles, setRoles] = useState<Role[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+    const [isCreateOpen, setIsCreateOpen] = useState<boolean>(false);
+    const [isCreating, setIsCreating] = useState<boolean>(false);
+
+    // Pagination state
+    const [currentPage, setCurrentPage] = useState<number>(1);
+    const [limit, setLimit] = useState<number>(10);
+    const [pagination, setPagination] = useState<{
+      page: number;
+      limit: number;
+      total: number;
+      totalPages: number;
+      hasMore: boolean;
+    }>({
+      page: 1,
+      limit: 10,
+      total: 0,
+      totalPages: 1,
+      hasMore: false,
+    });
+
+    // Filter and Search state
+    const [orderBy, setOrderBy] = useState<string[] | null>(null);
+    const [search, setSearch] = useState<string>("");
+    const [debouncedSearch, setDebouncedSearch] = useState<string>("");
+
+    // Modal state
+    const [editModalOpen, setEditModalOpen] = useState<boolean>(false);
+    // const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
+    const [selectedRoleId, setSelectedRoleId] = useState<string | null>(null);
+    // const [selectedRoleName, setSelectedRoleName] = useState<string>("");
+    const [isUpdating, setIsUpdating] = useState<boolean>(false);
+    // const [isDeleting, setIsDeleting] = useState<boolean>(false);
+
+    // Expose methods to parent
+    useImperativeHandle(ref, () => ({
+      openNewModal: () => setIsCreateOpen(true),
+      refresh: () =>
+        fetchPlatformRoles(currentPage, limit, orderBy, debouncedSearch),
+    }));
+
+    const fetchPlatformRoles = async (
+      page: number,
+      itemsPerPage: number,
+      sortBy: string[] | null = null,
+      searchQuery: string | null = null,
+    ) => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        // Load roles filtered by scope=platform
+        const response = await roleService.getAll(
+          page,
+          itemsPerPage,
+          sortBy,
+          searchQuery,
+          "platform",
+        );
+        if (response.success) {
+          setRoles(response.data);
+          setPagination(response.pagination);
+        } else {
+          setError("Failed to load platform roles");
+        }
+      } catch (err: any) {
+        setError(
+          err?.response?.data?.error?.message ||
+            "Failed to load platform roles",
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    // Debounce search
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        setDebouncedSearch(search);
+        if (search) setCurrentPage(1);
+      }, 500);
+      return () => clearTimeout(timer);
+    }, [search]);
+
+    useEffect(() => {
+      fetchPlatformRoles(currentPage, limit, orderBy, debouncedSearch);
+    }, [currentPage, limit, orderBy, debouncedSearch]);
+
+    const handleCreateRole = async (data: CreateRoleRequest) => {
+      try {
+        setIsCreating(true);
+        const payload = {
+          ...data,
+          scope: "platform",
+          tenant_id: tenantIdFromAuth || "00000000-0000-0000-0000-000000000001",
+        };
+        const response = await roleService.create(payload);
+        showToast.success(
+          response.message || "Platform role created successfully",
+        );
+        setIsCreateOpen(false);
+        fetchPlatformRoles(currentPage, limit, orderBy, debouncedSearch);
+      } catch (err: any) {
+        throw err;
+      } finally {
+        setIsCreating(false);
+      }
+    };
+
+    const handleUpdateRole = async (id: string, data: UpdateRoleRequest) => {
+      try {
+        setIsUpdating(true);
+        const payload = {
+          ...data,
+          scope: "platform",
+          tenant_id: tenantIdFromAuth || "00000000-0000-0000-0000-000000000001",
+        };
+        const response = await roleService.update(id, payload);
+        showToast.success(
+          response.message || "Platform role updated successfully",
+        );
+        setEditModalOpen(false);
+        setSelectedRoleId(null);
+        fetchPlatformRoles(currentPage, limit, orderBy, debouncedSearch);
+      } catch (err: any) {
+        throw err;
+      } finally {
+        setIsUpdating(false);
+      }
+    };
+
+    // const handleConfirmDelete = async () => {
+    //   if (!selectedRoleId) return;
+    //   try {
+    //     setIsDeleting(true);
+    //     await roleService.delete(selectedRoleId);
+    //     showToast.success("Platform role deleted successfully");
+    //     // setDeleteModalOpen(false);
+    //     setSelectedRoleId(null);
+    //     setSelectedRoleName("");
+    //     fetchPlatformRoles(currentPage, limit, orderBy, debouncedSearch);
+    //   } catch (err: any) {
+    //     showToast.error(
+    //       err?.response?.data?.error?.message ||
+    //         "Failed to delete platform role",
+    //     );
+    //   } finally {
+    //     setIsDeleting(false);
+    //   }
+    // };
+
+    const loadRole = async (id: string): Promise<Role> => {
+      const response = await roleService.getById(id);
+      return response.data;
+    };
+
+    // Columns config
+    const columns: Column<Role>[] = [
+      {
+        key: "name",
+        label: "Role Name",
+        render: (role) => (
+          <span className="font-medium text-[#0f1724]">{role.name}</span>
+        ),
+      },
+      {
+        key: "code",
+        label: "Role Code",
+        render: (role) => <CodeBadge label={role.code} />,
+      },
+      {
+        key: "description",
+        label: "Description",
+        render: (role) => (
+          <span className="text-sm text-[#4b5563] line-clamp-1 max-w-[400px]">
+            {role.description || "N/A"}
+          </span>
+        ),
+      },
+      {
+        key: "user_count",
+        label: "Assigned Users",
+        render: (role) => (
+          <span className="text-sm text-[#0f1724]">{role.user_count || 0}</span>
+        ),
+      },
+      {
+        key: "created_at",
+        label: "Created Date",
+        render: (role) => (
+          <span className="text-sm text-[#6b7280]">
+            {formatDate(role.created_at)}
+          </span>
+        ),
+      },
+      {
+        key: "actions",
+        label: "Actions",
+        align: "right",
+        render: (role) => (
+          <div className="flex justify-end">
+            <ActionDropdown
+              onEdit={
+                canUpdate("roles")
+                  ? () => {
+                      setSelectedRoleId(role.id);
+                      setEditModalOpen(true);
+                    }
+                  : undefined
+              }
+              // onDelete={
+              //   canDelete("roles")
+              //     ? () => {
+              //         setSelectedRoleId(role.id);
+              //         setSelectedRoleName(role.name);
+              //         setDeleteModalOpen(true);
+              //       }
+              //     : undefined
+              // }
+            />
+          </div>
+        ),
+      },
+    ];
+
+    return (
+      <>
+        <div className="pb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+          <div className="flex flex-wrap items-center gap-3">
+            <SearchBox
+              value={search}
+              onChange={setSearch}
+              placeholder="Search platform roles..."
+            />
+
+            <FilterDropdown
+              label="Sort by"
+              options={[
+                { value: ["name", "asc"], label: "Name (A-Z)" },
+                { value: ["name", "desc"], label: "Name (Z-A)" },
+                { value: ["code", "asc"], label: "Code (A-Z)" },
+                { value: ["code", "desc"], label: "Code (Z-A)" },
+                { value: ["created_at", "asc"], label: "Created (Oldest)" },
+                { value: ["created_at", "desc"], label: "Created (Newest)" },
+              ]}
+              value={orderBy}
+              onChange={(value) => {
+                setOrderBy(value as string[] | null);
+                setCurrentPage(1);
+              }}
+              placeholder="Default"
+              showIcon
+              icon={<ArrowUpDown className="w-3.5 h-3.5 text-[#475569]" />}
+            />
+          </div>
+
+          <div className="flex items-center gap-2">
+            {canCreate("roles") && (
+              <PrimaryButton
+                size="default"
+                className="flex items-center gap-2"
+                onClick={() => setIsCreateOpen(true)}
+              >
+                <Plus className="w-3.5 h-3.5" />
+                <span className="text-xs">New Platform Role</span>
+              </PrimaryButton>
+            )}
+          </div>
+        </div>
+
+        <DataTable
+          data={roles}
+          columns={columns}
+          keyExtractor={(role) => role.id}
+          emptyMessage="No platform roles found"
+          isLoading={isLoading}
+          error={error}
+        />
+
+        {pagination.total > 0 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={pagination.totalPages}
+            totalItems={pagination.total}
+            limit={limit}
+            onPageChange={(page: number) => {
+              setCurrentPage(page);
+            }}
+            onLimitChange={(newLimit: number) => {
+              setLimit(newLimit);
+              setCurrentPage(1);
+            }}
+          />
+        )}
+
+        <NewPlatformRoleModal
+          isOpen={isCreateOpen}
+          onClose={() => setIsCreateOpen(false)}
+          onSubmit={handleCreateRole}
+          isLoading={isCreating}
+        />
+
+        <EditPlatformRoleModal
+          isOpen={editModalOpen}
+          onClose={() => {
+            setEditModalOpen(false);
+            setSelectedRoleId(null);
+          }}
+          roleId={selectedRoleId}
+          onLoadRole={loadRole}
+          onSubmit={handleUpdateRole}
+          isLoading={isUpdating}
+        />
+
+        {/* <DeleteConfirmationModal
+          isOpen={deleteModalOpen}
+          onClose={() => {
+            setDeleteModalOpen(false);
+            setSelectedRoleId(null);
+            setSelectedRoleName("");
+          }}
+          onConfirm={handleConfirmDelete}
+          title="Delete Platform Role"
+          message="Are you sure you want to delete this platform role? This action cannot be undone."
+          itemName={selectedRoleName}
+          isLoading={isDeleting}
+        /> */}
+      </>
+    );
+  },
+);
+
+PlatformRolesTable.displayName = "PlatformRolesTable";
diff --git a/src/components/superadmin/PlatformUsersTable.tsx b/src/components/superadmin/PlatformUsersTable.tsx
new file mode 100644
index 0000000..c8a70fb
--- /dev/null
+++ b/src/components/superadmin/PlatformUsersTable.tsx
@@ -0,0 +1,1035 @@
+import {
+  useState,
+  useEffect,
+  type ReactElement,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Plus, ArrowUpDown, Loader2 } from "lucide-react";
+import {
+  PrimaryButton,
+  SecondaryButton,
+  StatusBadge,
+  ActionDropdown,
+  DataTable,
+  Pagination,
+  FilterDropdown,
+  SearchBox,
+  Modal,
+  FormField,
+  FormSelect,
+  type Column,
+} from "@/components/shared";
+import { userService } from "@/services/user-service";
+import { roleService } from "@/services/role-service";
+import type { Role } from "@/types/role";
+import type { User } from "@/types/user";
+import { showToast } from "@/utils/toast";
+import { formatDate } from "@/utils/format-date";
+import { usePermissions } from "@/hooks/usePermissions";
+
+// Helper function to get user initials
+const getUserInitials = (firstName: string, lastName: string): string => {
+  return `${firstName[0] || ""}${lastName[0] || ""}`.toUpperCase();
+};
+
+// Helper function to get status badge variant
+const getStatusVariant = (
+  status: string,
+): "success" | "failure" | "process" => {
+  switch (status?.toLowerCase()) {
+    case "active":
+      return "success";
+    case "deleted":
+      return "failure";
+    case "suspended":
+      return "process";
+    default:
+      return "success";
+  }
+};
+
+// Zod schemas for validation
+const newPlatformUserSchema = z.object({
+  email: z.string().email({ message: "Please enter a valid email address" }),
+  first_name: z
+    .string()
+    .min(1, "First name is required")
+    .max(255, "Maximum 255 characters allowed"),
+  last_name: z
+    .string()
+    .min(1, "Last name is required")
+    .max(255, "Maximum 255 characters allowed"),
+  status: z.enum(["active", "suspended", "deleted"], {
+    message: "Status is required",
+  }),
+  role_id: z.string().min(1, "Role is required"),
+});
+
+type NewPlatformUserFormData = z.infer<typeof newPlatformUserSchema>;
+
+const editPlatformUserSchema = z.object({
+  email: z.string().email({ message: "Please enter a valid email address" }),
+  first_name: z
+    .string()
+    .min(1, "First name is required")
+    .max(255, "Maximum 255 characters allowed"),
+  last_name: z
+    .string()
+    .min(1, "Last name is required")
+    .max(255, "Maximum 255 characters allowed"),
+  status: z.enum(["active", "suspended", "deleted"], {
+    message: "Status is required",
+  }),
+  role_id: z.string().min(1, "Role is required"),
+});
+
+type EditPlatformUserFormData = z.infer<typeof editPlatformUserSchema>;
+
+// Dedicated Creation Modal
+interface NewPlatformUserModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: NewPlatformUserFormData) => Promise<void>;
+  isLoading: boolean;
+  roles: Role[];
+}
+
+const NewPlatformUserModal = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  isLoading,
+  roles,
+}: NewPlatformUserModalProps): ReactElement | null => {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    reset,
+    setError,
+    formState: { errors },
+  } = useForm<NewPlatformUserFormData>({
+    resolver: zodResolver(newPlatformUserSchema),
+    defaultValues: {
+      status: "active",
+      role_id: "",
+    },
+  });
+
+  const statusValue = watch("status");
+  const roleIdValue = watch("role_id");
+
+  useEffect(() => {
+    if (!isOpen) {
+      reset({
+        email: "",
+        first_name: "",
+        last_name: "",
+        status: "active",
+        role_id: "",
+      });
+    }
+  }, [isOpen, reset]);
+
+  const handleFormSubmit = async (data: NewPlatformUserFormData) => {
+    try {
+      await onSubmit(data);
+    } catch (error: any) {
+      if (
+        error?.response?.data?.details &&
+        Array.isArray(error.response.data.details)
+      ) {
+        const first = error.response.data.details[0];
+        setError("root", {
+          type: "server",
+          message: first?.message || "Validation failed",
+        });
+        return;
+      }
+      const message =
+        error?.response?.data?.error?.message ||
+        error?.response?.data?.message ||
+        error?.message ||
+        "Failed to create platform user. Please try again.";
+      setError("root", { type: "server", message });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Create New Platform User"
+      description="Register a new platform-scoped administrator"
+      maxWidth="md"
+      footer={
+        <>
+          <SecondaryButton
+            type="button"
+            onClick={onClose}
+            disabled={isLoading}
+            className="px-4 py-2.5 text-sm"
+          >
+            Cancel
+          </SecondaryButton>
+          <PrimaryButton
+            type="button"
+            onClick={handleSubmit(handleFormSubmit)}
+            disabled={isLoading}
+            size="default"
+            className="px-4 py-2.5 text-sm"
+          >
+            {isLoading ? "Creating..." : "Create User"}
+          </PrimaryButton>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit(handleFormSubmit)}>
+        {errors.root && (
+          <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
+            <p className="text-sm text-[#ef4444]">{errors.root.message}</p>
+          </div>
+        )}
+
+        <FormField
+          label="Email"
+          type="email"
+          required
+          placeholder="Enter email address"
+          error={errors.email?.message}
+          {...register("email")}
+        />
+        <div className="grid grid-cols-2 gap-5 pb-4">
+          <FormField
+            label="First Name"
+            required
+            placeholder="Enter first name"
+            error={errors.first_name?.message}
+            {...register("first_name")}
+          />
+          <FormField
+            label="Last Name"
+            required
+            placeholder="Enter last name"
+            error={errors.last_name?.message}
+            {...register("last_name")}
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-5 pb-4">
+          <FormSelect
+            label="Role"
+            required
+            placeholder="Select Role"
+            options={roles.map((r) => ({ value: r.id, label: r.name }))}
+            value={roleIdValue || ""}
+            onValueChange={(value) =>
+              setValue("role_id", value, { shouldValidate: true })
+            }
+            error={errors.role_id?.message}
+          />
+          <FormSelect
+            label="Status"
+            required
+            placeholder="Select Status"
+            options={[
+              { value: "active", label: "Active" },
+              { value: "suspended", label: "Suspended" },
+              { value: "deleted", label: "Deleted" },
+            ]}
+            value={statusValue || "active"}
+            onValueChange={(value) =>
+              setValue("status", value as "active" | "suspended" | "deleted", {
+                shouldValidate: true,
+              })
+            }
+            error={errors.status?.message}
+          />
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+// Dedicated Edit Modal
+interface EditPlatformUserModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  userId: string | null;
+  onSubmit: (id: string, data: EditPlatformUserFormData) => Promise<void>;
+  isLoading: boolean;
+  roles: Role[];
+}
+
+const EditPlatformUserModal = ({
+  isOpen,
+  onClose,
+  userId,
+  onSubmit,
+  isLoading,
+  roles,
+}: EditPlatformUserModalProps): ReactElement | null => {
+  const [loadingData, setLoadingData] = useState(false);
+  const [loadedUser, setLoadedUser] = useState<any>(null);
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    reset,
+    setError,
+    formState: { errors },
+  } = useForm<EditPlatformUserFormData>({
+    resolver: zodResolver(editPlatformUserSchema),
+  });
+
+  const statusValue = watch("status");
+  const roleIdValue = watch("role_id");
+
+  const selectedRole = roles.find((r) => r.id === roleIdValue);
+  const primaryRoleName = loadedUser?.role_module_combinations?.[0]?.role_name || "";
+  const primaryRoleCode = loadedUser?.role_module_combinations?.[0]?.role_code || "";
+  const isSuperAdminUser =
+    primaryRoleName === "Super Admin" ||
+    primaryRoleName === "super_admin" ||
+    primaryRoleCode === "super_admin" ||
+    selectedRole?.name === "Super Admin" ||
+    selectedRole?.code === "super_admin";
+
+  useEffect(() => {
+    if (isOpen && userId) {
+      setLoadingData(true);
+      userService
+        .getById(userId)
+        .then((response) => {
+          if (response.success && response.data) {
+            const user = response.data;
+            setLoadedUser(user);
+            const primaryRole =
+              user.role_module_combinations?.[0]?.role_id || "";
+            reset({
+              email: user.email || "",
+              first_name: user.first_name || "",
+              last_name: user.last_name || "",
+              status: user.status || "active",
+              role_id: primaryRole,
+            });
+          }
+        })
+        .catch((err) => {
+          console.error("Failed to load platform user details", err);
+          showToast.error("Failed to load user details");
+          onClose();
+        })
+        .finally(() => {
+          setLoadingData(false);
+        });
+    } else if (!isOpen) {
+      setLoadedUser(null);
+    }
+  }, [isOpen, userId, reset, onClose]);
+
+  const handleFormSubmit = async (data: EditPlatformUserFormData) => {
+    if (!userId) return;
+    try {
+      await onSubmit(userId, data);
+    } catch (error: any) {
+      if (
+        error?.response?.data?.details &&
+        Array.isArray(error.response.data.details)
+      ) {
+        const first = error.response.data.details[0];
+        setError("root", {
+          type: "server",
+          message: first?.message || "Validation failed",
+        });
+        return;
+      }
+      const message =
+        error?.response?.data?.error?.message ||
+        error?.response?.data?.message ||
+        error?.message ||
+        "Failed to update platform user. Please try again.";
+      setError("root", { type: "server", message });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Edit Platform User"
+      description="Update platform user settings and role"
+      maxWidth="md"
+      footer={
+        <>
+          <SecondaryButton
+            type="button"
+            onClick={onClose}
+            disabled={isLoading || loadingData}
+            className="px-4 py-2.5 text-sm"
+          >
+            Cancel
+          </SecondaryButton>
+          <PrimaryButton
+            type="button"
+            onClick={handleSubmit(handleFormSubmit)}
+            disabled={isLoading || loadingData}
+            size="default"
+            className="px-4 py-2.5 text-sm"
+          >
+            {isLoading ? "Saving..." : "Save Changes"}
+          </PrimaryButton>
+        </>
+      }
+    >
+      {loadingData ? (
+        <div className="flex flex-col items-center justify-center py-12">
+          <Loader2 className="w-8 h-8 text-[#2563eb] animate-spin" />
+          <p className="text-sm text-[#4b5563] mt-2">Loading user details...</p>
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit(handleFormSubmit)}>
+          {errors.root && (
+            <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
+              <p className="text-sm text-[#ef4444]">{errors.root.message}</p>
+            </div>
+          )}
+
+          <FormField
+            label="Email"
+            type="email"
+            required
+            placeholder="Enter email address"
+            error={errors.email?.message}
+            {...register("email")}
+          />
+          <div className="grid grid-cols-2 gap-5 pb-4">
+            <FormField
+              label="First Name"
+              required
+              placeholder="Enter first name"
+              error={errors.first_name?.message}
+              {...register("first_name")}
+            />
+            <FormField
+              label="Last Name"
+              required
+              placeholder="Enter last name"
+              error={errors.last_name?.message}
+              {...register("last_name")}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-5 pb-4">
+            {!isSuperAdminUser && (
+              <>
+                <FormSelect
+                  label="Role"
+                  required
+                  placeholder="Select Role"
+                  options={roles.map((r) => ({ value: r.id, label: r.name }))}
+                  value={roleIdValue || ""}
+                  onValueChange={(value) =>
+                    setValue("role_id", value, { shouldValidate: true })
+                  }
+                  error={errors.role_id?.message}
+                />
+                <FormSelect
+                  label="Status"
+                  required
+                  placeholder="Select Status"
+                  options={[
+                    { value: "active", label: "Active" },
+                    { value: "suspended", label: "Suspended" },
+                    { value: "deleted", label: "Deleted" },
+                  ]}
+                  value={statusValue || "active"}
+                  onValueChange={(value) =>
+                    setValue(
+                      "status",
+                      value as "active" | "suspended" | "deleted",
+                      { shouldValidate: true },
+                    )
+                  }
+                  error={errors.status?.message}
+                />
+              </>
+            )}
+          </div>
+        </form>
+      )}
+    </Modal>
+  );
+};
+
+// Dedicated View Modal
+interface ViewPlatformUserModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  userId: string | null;
+}
+
+const ViewPlatformUserModal = ({
+  isOpen,
+  onClose,
+  userId,
+}: ViewPlatformUserModalProps): ReactElement | null => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && userId) {
+      setLoading(true);
+      userService
+        .getById(userId)
+        .then((response) => {
+          if (response.success && response.data) {
+            setUser(response.data);
+          }
+        })
+        .catch((err) => {
+          console.error("Failed to fetch user details", err);
+          showToast.error("Failed to load user details");
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  }, [isOpen, userId]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Platform User Details"
+      description="View full configuration details"
+      maxWidth="md"
+      footer={
+        <PrimaryButton type="button" onClick={onClose} className="px-4 py-2">
+          Close
+        </PrimaryButton>
+      }
+    >
+      {loading ? (
+        <div className="flex flex-col items-center justify-center py-12">
+          <Loader2 className="w-8 h-8 text-[#2563eb] animate-spin" />
+          <p className="text-sm text-[#4b5563] mt-2">Loading details...</p>
+        </div>
+      ) : user ? (
+        <div className="space-y-6">
+          <div className="flex items-center gap-4 p-4 bg-[#f8fafc] border border-[rgba(0,0,0,0.05)] rounded-xl">
+            <div className="w-12 h-12 bg-white border border-[rgba(0,0,0,0.08)] rounded-xl flex items-center justify-center shadow-sm">
+              <span className="text-lg font-semibold text-[#1e293b]">
+                {getUserInitials(user.first_name, user.last_name)}
+              </span>
+            </div>
+            <div>
+              <h3 className="text-base font-semibold text-[#0f172a]">
+                {user.first_name} {user.last_name}
+              </h3>
+              <p className="text-sm text-[#475569]">{user.email}</p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-x-6 gap-y-4 text-sm">
+            <div>
+              <span className="text-xs font-semibold text-[#64748b] uppercase tracking-wider block mb-1">
+                Status
+              </span>
+              <StatusBadge variant={getStatusVariant(user.status)}>
+                {user.status}
+              </StatusBadge>
+            </div>
+            <div>
+              <span className="text-xs font-semibold text-[#64748b] uppercase tracking-wider block mb-1">
+                Role
+              </span>
+              <p className="text-[#0f172a] font-medium">
+                {user.role_module_combinations?.[0]?.role_name ||
+                  "Platform User"}
+              </p>
+            </div>
+            <div>
+              <span className="text-xs font-semibold text-[#64748b] uppercase tracking-wider block mb-1">
+                Joined Date
+              </span>
+              <p className="text-[#334155]">{formatDate(user.created_at)}</p>
+            </div>
+            <div>
+              <span className="text-xs font-semibold text-[#64748b] uppercase tracking-wider block mb-1">
+                Last Updated
+              </span>
+              <p className="text-[#334155]">{formatDate(user.updated_at)}</p>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="py-8 text-center text-sm text-[#64748b]">
+          No user data available.
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+export interface PlatformUsersTableRef {
+  openNewModal: () => void;
+  refresh: () => void;
+}
+
+export const PlatformUsersTable = forwardRef<PlatformUsersTableRef>(
+  (_, ref): ReactElement => {
+    const { canCreate, canUpdate } = usePermissions();
+    const [users, setUsers] = useState<User[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+    const [isCreateOpen, setIsCreateOpen] = useState<boolean>(false);
+    const [isCreating, setIsCreating] = useState<boolean>(false);
+    const [isEditOpen, setIsEditOpen] = useState<boolean>(false);
+    const [isUpdating, setIsUpdating] = useState<boolean>(false);
+    const [isViewOpen, setIsViewOpen] = useState<boolean>(false);
+    const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
+
+    // Filter states
+    const [search, setSearch] = useState<string>("");
+    const [debouncedSearch, setDebouncedSearch] = useState<string>("");
+    const [statusFilter, setStatusFilter] = useState<string | null>(null);
+    const [roleFilter, setRoleFilter] = useState<string | null>(null);
+    const [orderBy, setOrderBy] = useState<string[] | null>(null);
+
+    // Pagination states
+    const [currentPage, setCurrentPage] = useState<number>(1);
+    const [limit, setLimit] = useState<number>(10);
+    const [pagination, setPagination] = useState({
+      page: 1,
+      limit: 10,
+      total: 0,
+      totalPages: 1,
+      hasMore: false,
+    });
+
+    const [roles, setRoles] = useState<Role[]>([]);
+
+    // Expose methods
+    useImperativeHandle(ref, () => ({
+      openNewModal: () => setIsCreateOpen(true),
+      refresh: () => fetchPlatformUsers(),
+    }));
+
+    // Debounce search
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        setDebouncedSearch(search);
+        setCurrentPage(1);
+      }, 300);
+      return () => clearTimeout(timer);
+    }, [search]);
+
+    const fetchPlatformUsers = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        // Call backend with scope="platform"
+        const response = await userService.getAll(
+          currentPage,
+          limit,
+          statusFilter,
+          orderBy,
+          debouncedSearch,
+          roleFilter,
+          "platform",
+        );
+        if (response.success) {
+          setUsers(response.data);
+          setPagination(response.pagination);
+        } else {
+          setError("Failed to fetch platform users");
+        }
+      } catch (err: any) {
+        setError(
+          err?.response?.data?.error?.message ||
+            "Failed to load platform users",
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    // Fetch users when parameters change
+    useEffect(() => {
+      fetchPlatformUsers();
+    }, [
+      currentPage,
+      limit,
+      statusFilter,
+      roleFilter,
+      orderBy,
+      debouncedSearch,
+    ]);
+
+    // Fetch platform roles
+    useEffect(() => {
+      const fetchPlatformRoles = async () => {
+        try {
+          const response = await roleService.getAll(
+            1,
+            100,
+            null,
+            null,
+            "platform",
+          );
+          if (response.success) {
+            setRoles(response.data);
+          }
+        } catch (err: any) {
+          console.error("Failed to load platform roles", err);
+        }
+      };
+      fetchPlatformRoles();
+    }, []);
+
+    const handleCreateUser = async (data: NewPlatformUserFormData) => {
+      try {
+        setIsCreating(true);
+        const payload = {
+          email: data.email,
+          first_name: data.first_name,
+          last_name: data.last_name,
+          status: data.status,
+          auth_provider: "local" as const,
+          tenant_id: "00000000-0000-0000-0000-000000000001",
+          role_module_combinations: [
+            { role_id: data.role_id, module_id: null },
+          ],
+          department_id: null,
+          designation_id: null,
+          category: "tenant_user" as const,
+        };
+        const response = await userService.create(payload);
+        showToast.success(
+          response.message || "Platform user created successfully",
+        );
+        setIsCreateOpen(false);
+        fetchPlatformUsers();
+      } catch (err: any) {
+        throw err;
+      } finally {
+        setIsCreating(false);
+      }
+    };
+
+    const handleUpdateUser = async (
+      id: string,
+      data: EditPlatformUserFormData,
+    ) => {
+      try {
+        setIsUpdating(true);
+        const payload = {
+          email: data.email,
+          first_name: data.first_name,
+          last_name: data.last_name,
+          status: data.status,
+          tenant_id: "00000000-0000-0000-0000-000000000001",
+          role_module_combinations: [
+            { role_id: data.role_id, module_id: null },
+          ],
+          department_id: null,
+          designation_id: null,
+        };
+        const response = await userService.update(id, payload);
+        showToast.success(
+          response.message || "Platform user updated successfully",
+        );
+        setIsEditOpen(false);
+        fetchPlatformUsers();
+      } catch (err: any) {
+        throw err;
+      } finally {
+        setIsUpdating(false);
+      }
+    };
+
+    const columns: Column<User>[] = [
+      {
+        key: "name",
+        label: "Name",
+        render: (user) => (
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 bg-[#f1f5f9] border border-[rgba(0,0,0,0.08)] rounded-lg flex items-center justify-center shrink-0">
+              <span className="text-xs font-semibold text-[#475569]">
+                {getUserInitials(user.first_name, user.last_name)}
+              </span>
+            </div>
+            <span className="font-medium text-[#0f172a]">
+              {user.first_name} {user.last_name}
+            </span>
+          </div>
+        ),
+      },
+      {
+        key: "email",
+        label: "Email",
+        render: (user) => <span className="text-[#334155]">{user.email}</span>,
+      },
+      {
+        key: "role",
+        label: "Role",
+        render: (user) => (
+          <span className="text-[#334155] font-medium">
+            {user.role_module_combinations?.[0]?.role_name || "Platform User"}
+          </span>
+        ),
+      },
+      {
+        key: "status",
+        label: "Status",
+        render: (user) => (
+          <StatusBadge variant={getStatusVariant(user.status)}>
+            {user.status}
+          </StatusBadge>
+        ),
+      },
+      {
+        key: "created_at",
+        label: "Joined Date",
+        render: (user) => (
+          <span className="text-[#64748b]">{formatDate(user.created_at)}</span>
+        ),
+        mobileLabel: "Joined",
+      },
+      {
+        key: "actions",
+        label: "Actions",
+        align: "right",
+        render: (user) => (
+          <div className="flex justify-end">
+            <ActionDropdown
+              onView={() => {
+                setSelectedUserId(user.id);
+                setIsViewOpen(true);
+              }}
+              onEdit={
+                canUpdate("users")
+                  ? () => {
+                      setSelectedUserId(user.id);
+                      setIsEditOpen(true);
+                    }
+                  : undefined
+              }
+            />
+          </div>
+        ),
+      },
+    ];
+
+    const mobileCardRenderer = (user: User) => (
+      <div className="p-4 border-b border-[rgba(0,0,0,0.05)]">
+        <div className="flex items-start justify-between gap-3 mb-3">
+          <div className="flex items-center gap-3 flex-1 min-w-0">
+            <div className="w-8 h-8 bg-[#f1f5f9] border border-[rgba(0,0,0,0.08)] rounded-lg flex items-center justify-center shrink-0">
+              <span className="text-xs font-semibold text-[#475569]">
+                {getUserInitials(user.first_name, user.last_name)}
+              </span>
+            </div>
+            <div className="flex-1 min-w-0">
+              <h3 className="text-sm font-medium text-[#0f1724] truncate">
+                {user.first_name} {user.last_name}
+              </h3>
+              <p className="text-xs text-[#64748b] mt-0.5 truncate">
+                {user.email}
+              </p>
+            </div>
+          </div>
+          <ActionDropdown
+            onView={() => {
+              setSelectedUserId(user.id);
+              setIsViewOpen(true);
+            }}
+            onEdit={
+              canUpdate("users")
+                ? () => {
+                    setSelectedUserId(user.id);
+                    setIsEditOpen(true);
+                  }
+                : undefined
+            }
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-3 text-xs">
+          <div>
+            <span className="text-[#94a3b8] block">Role</span>
+            <span className="text-[#0f172a] font-medium mt-0.5 block">
+              {user.role_module_combinations?.[0]?.role_name || "Platform User"}
+            </span>
+          </div>
+          <div>
+            <span className="text-[#94a3b8] block">Status</span>
+            <div className="mt-1">
+              <StatusBadge variant={getStatusVariant(user.status)}>
+                {user.status}
+              </StatusBadge>
+            </div>
+          </div>
+          <div>
+            <span className="text-[#94a3b8] block">Joined</span>
+            <span className="text-[#64748b] mt-0.5 block">
+              {formatDate(user.created_at)}
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+
+    const handleClearFilters = () => {
+      setSearch("");
+      setStatusFilter(null);
+      setRoleFilter(null);
+      setOrderBy(null);
+      setCurrentPage(1);
+    };
+
+    return (
+      <>
+        <div className="overflow-hidden">
+          <div className="pb-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+            <div className="flex flex-wrap items-center gap-3">
+              <SearchBox
+                value={search}
+                onChange={setSearch}
+                placeholder="Search platform users..."
+              />
+              <FilterDropdown
+                label="Status"
+                options={[
+                  { value: "active", label: "Active" },
+                  { value: "suspended", label: "Suspended" },
+                  { value: "deleted", label: "Deleted" },
+                ]}
+                value={statusFilter}
+                onChange={(value) => {
+                  setStatusFilter(value as string | null);
+                  setCurrentPage(1);
+                }}
+                placeholder="All Status"
+              />
+              <FilterDropdown
+                label="Role"
+                options={roles.map((r) => ({ value: r.id, label: r.name }))}
+                value={roleFilter}
+                onChange={(value) => {
+                  setRoleFilter(value as string | null);
+                  setCurrentPage(1);
+                }}
+                placeholder="All Roles"
+              />
+              <FilterDropdown
+                label="Sort by"
+                options={[
+                  { value: ["first_name", "asc"], label: "First Name (A-Z)" },
+                  { value: ["first_name", "desc"], label: "First Name (Z-A)" },
+                  { value: ["email", "asc"], label: "Email (A-Z)" },
+                  { value: ["email", "desc"], label: "Email (Z-A)" },
+                  { value: ["created_at", "asc"], label: "Joined (Oldest)" },
+                  { value: ["created_at", "desc"], label: "Joined (Newest)" },
+                ]}
+                value={orderBy}
+                onChange={(value) => {
+                  setOrderBy(value as string[] | null);
+                  setCurrentPage(1);
+                }}
+                placeholder="Default Sort"
+                showIcon
+                icon={<ArrowUpDown className="w-3.5 h-3.5 text-[#475569]" />}
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              {canCreate("users") && (
+                <PrimaryButton
+                  size="default"
+                  className="flex items-center gap-2"
+                  onClick={() => setIsCreateOpen(true)}
+                >
+                  <Plus className="w-3.5 h-3.5" />
+                  <span className="text-xs">New Platform User</span>
+                </PrimaryButton>
+              )}
+              {(!!search ||
+                statusFilter !== null ||
+                roleFilter !== null ||
+                orderBy !== null) && (
+                <button
+                  onClick={handleClearFilters}
+                  className="text-sm font-medium text-[#64748b] hover:text-[#0f172a] transition-colors cursor-pointer"
+                >
+                  Clear filters
+                </button>
+              )}
+            </div>
+          </div>
+
+          <DataTable
+            data={users}
+            columns={columns}
+            keyExtractor={(user) => user.id}
+            mobileCardRenderer={mobileCardRenderer}
+            emptyMessage="No platform users found"
+            isLoading={isLoading}
+            error={error}
+          />
+
+          {pagination.totalPages > 0 && (
+            <Pagination
+              currentPage={currentPage}
+              totalPages={pagination.totalPages}
+              totalItems={pagination.total}
+              limit={limit}
+              onPageChange={(page: number) => {
+                setCurrentPage(page);
+              }}
+              onLimitChange={(newLimit: number) => {
+                setLimit(newLimit);
+                setCurrentPage(1);
+              }}
+            />
+          )}
+        </div>
+
+        {/* Modal Declarations */}
+        <NewPlatformUserModal
+          isOpen={isCreateOpen}
+          onClose={() => setIsCreateOpen(false)}
+          onSubmit={handleCreateUser}
+          isLoading={isCreating}
+          roles={roles}
+        />
+
+        <EditPlatformUserModal
+          isOpen={isEditOpen}
+          onClose={() => {
+            setIsEditOpen(false);
+            setSelectedUserId(null);
+          }}
+          userId={selectedUserId}
+          onSubmit={handleUpdateUser}
+          isLoading={isUpdating}
+          roles={roles}
+        />
+
+        <ViewPlatformUserModal
+          isOpen={isViewOpen}
+          onClose={() => {
+            setIsViewOpen(false);
+            setSelectedUserId(null);
+          }}
+          userId={selectedUserId}
+        />
+      </>
+    );
+  },
+);
+
+PlatformUsersTable.displayName = "PlatformUsersTable";
diff --git a/src/components/superadmin/RolesTable.tsx b/src/components/superadmin/RolesTable.tsx
index 76729ec..1361269 100644
--- a/src/components/superadmin/RolesTable.tsx
+++ b/src/components/superadmin/RolesTable.tsx
@@ -12,7 +12,7 @@ import {
   NewRoleModal,
   ViewRoleModal,
   EditRoleModal,
-  DeleteConfirmationModal,
+  // DeleteConfirmationModal,
   DataTable,
   Pagination,
   FilterDropdown,
@@ -97,11 +97,11 @@ export const RolesTable = forwardRef<RolesTableRef, RolesTableProps>(
     // View, Edit, Delete modals
     const [viewModalOpen, setViewModalOpen] = useState<boolean>(false);
     const [editModalOpen, setEditModalOpen] = useState<boolean>(false);
-    const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
+    // const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
     const [selectedRoleId, setSelectedRoleId] = useState<string | null>(null);
-    const [selectedRoleName, setSelectedRoleName] = useState<string>("");
+    // const [selectedRoleName, setSelectedRoleName] = useState<string>("");
     const [isUpdating, setIsUpdating] = useState<boolean>(false);
-    const [isDeleting, setIsDeleting] = useState<boolean>(false);
+    // const [isDeleting, setIsDeleting] = useState<boolean>(false);
 
     const fetchRoles = async (
       page: number,
@@ -173,9 +173,11 @@ export const RolesTable = forwardRef<RolesTableRef, RolesTableProps>(
     };
 
     // Edit role handler
-    const handleEditRole = (roleId: string, roleName: string): void => {
+    const handleEditRole = (roleId: string
+      // , roleName: string
+    ): void => {
       setSelectedRoleId(roleId);
-      setSelectedRoleName(roleName);
+      // setSelectedRoleName(roleName);
       setEditModalOpen(true);
     };
 
@@ -194,7 +196,7 @@ export const RolesTable = forwardRef<RolesTableRef, RolesTableProps>(
         showToast.success(message, description);
         setEditModalOpen(false);
         setSelectedRoleId(null);
-        setSelectedRoleName("");
+        // setSelectedRoleName("");
         await fetchRoles(currentPage, limit, orderBy);
       } catch (err: any) {
         throw err;
@@ -204,29 +206,29 @@ export const RolesTable = forwardRef<RolesTableRef, RolesTableProps>(
     };
 
     // Delete role handler
-    const handleDeleteRole = (roleId: string, roleName: string): void => {
-      setSelectedRoleId(roleId);
-      setSelectedRoleName(roleName);
-      setDeleteModalOpen(true);
-    };
+    // const handleDeleteRole = (roleId: string, roleName: string): void => {
+    //   setSelectedRoleId(roleId);
+    //   setSelectedRoleName(roleName);
+    //   setDeleteModalOpen(true);
+    // };
 
     // Confirm delete handler
-    const handleConfirmDelete = async (): Promise<void> => {
-      if (!selectedRoleId) return;
+    // const handleConfirmDelete = async (): Promise<void> => {
+    //   if (!selectedRoleId) return;
 
-      try {
-        setIsDeleting(true);
-        await roleService.delete(selectedRoleId);
-        setDeleteModalOpen(false);
-        setSelectedRoleId(null);
-        setSelectedRoleName("");
-        await fetchRoles(currentPage, limit, orderBy);
-      } catch (err: any) {
-        throw err; // Let the modal handle the error display
-      } finally {
-        setIsDeleting(false);
-      }
-    };
+    //   try {
+    //     setIsDeleting(true);
+    //     await roleService.delete(selectedRoleId);
+    //     setDeleteModalOpen(false);
+    //     setSelectedRoleId(null);
+    //     setSelectedRoleName("");
+    //     await fetchRoles(currentPage, limit, orderBy);
+    //   } catch (err: any) {
+    //     throw err; // Let the modal handle the error display
+    //   } finally {
+    //     setIsDeleting(false);
+    //   }
+    // };
 
     // Load role for view/edit
     const loadRole = async (id: string): Promise<Role> => {
@@ -302,14 +304,16 @@ export const RolesTable = forwardRef<RolesTableRef, RolesTableProps>(
               onView={() => handleViewRole(role.id)}
               onEdit={
                 isTenantAdmin
-                  ? () => handleEditRole(role.id, role.name)
-                  : undefined
-              }
-              onDelete={
-                isTenantAdmin
-                  ? () => handleDeleteRole(role.id, role.name)
+                  ? () => handleEditRole(role.id
+                    // , role.name
+                  )
                   : undefined
               }
+              // onDelete={
+              //   isTenantAdmin
+              //     ? () => handleDeleteRole(role.id, role.name)
+              //     : undefined
+              // }
             />
           </div>
         ),
@@ -332,14 +336,16 @@ export const RolesTable = forwardRef<RolesTableRef, RolesTableProps>(
             onView={() => handleViewRole(role.id)}
             onEdit={
               isTenantAdmin
-                ? () => handleEditRole(role.id, role.name)
-                : undefined
-            }
-            onDelete={
-              isTenantAdmin
-                ? () => handleDeleteRole(role.id, role.name)
+                ? () => handleEditRole(role.id
+                  // , role.name
+                )
                 : undefined
             }
+            // onDelete={
+            //   isTenantAdmin
+            //     ? () => handleDeleteRole(role.id, role.name)
+            //     : undefined
+            // }
           />
         </div>
         <div className="grid grid-cols-2 gap-3 text-xs">
@@ -450,7 +456,7 @@ export const RolesTable = forwardRef<RolesTableRef, RolesTableProps>(
             onClose={() => {
               setEditModalOpen(false);
               setSelectedRoleId(null);
-              setSelectedRoleName("");
+              // setSelectedRoleName("");
             }}
             roleId={selectedRoleId}
             onLoadRole={loadRole}
@@ -459,7 +465,7 @@ export const RolesTable = forwardRef<RolesTableRef, RolesTableProps>(
             defaultTenantId={tenantId || undefined}
           />
 
-          <DeleteConfirmationModal
+          {/* <DeleteConfirmationModal
             isOpen={deleteModalOpen}
             onClose={() => {
               setDeleteModalOpen(false);
@@ -471,7 +477,7 @@ export const RolesTable = forwardRef<RolesTableRef, RolesTableProps>(
             message={`Are you sure you want to delete this role`}
             itemName={selectedRoleName}
             isLoading={isDeleting}
-          />
+          /> */}
         </>
       );
     }
@@ -593,7 +599,7 @@ export const RolesTable = forwardRef<RolesTableRef, RolesTableProps>(
           onClose={() => {
             setEditModalOpen(false);
             setSelectedRoleId(null);
-            setSelectedRoleName("");
+            // setSelectedRoleName("");
           }}
           roleId={selectedRoleId}
           onLoadRole={loadRole}
@@ -602,7 +608,7 @@ export const RolesTable = forwardRef<RolesTableRef, RolesTableProps>(
           defaultTenantId={tenantId || undefined}
         />
 
-        <DeleteConfirmationModal
+        {/* <DeleteConfirmationModal
           isOpen={deleteModalOpen}
           onClose={() => {
             setDeleteModalOpen(false);
@@ -614,7 +620,7 @@ export const RolesTable = forwardRef<RolesTableRef, RolesTableProps>(
           message={`Are you sure you want to delete this role`}
           itemName={selectedRoleName}
           isLoading={isDeleting}
-        />
+        /> */}
       </>
     );
   },
diff --git a/src/constants/platformResources.ts b/src/constants/platformResources.ts
new file mode 100644
index 0000000..078f8b6
--- /dev/null
+++ b/src/constants/platformResources.ts
@@ -0,0 +1,34 @@
+/**
+ * Platform Resources — QAssure Platform
+ * Canonical list of resources that platform roles can be granted permissions on.
+ * Derived from seed.js permissions list (lines 48–81).
+ *
+ * Used by:
+ *  - Platform Role create/edit permission matrix (checklist)
+ *  - Sidebar menu item filtering for platform users
+ */
+
+export interface PlatformResource {
+  resource: string;
+  label: string;
+  actions: string[];
+}
+
+export const PLATFORM_RESOURCES: PlatformResource[] = [
+  { resource: 'tenants',         label: 'Tenants',           actions: ['read', 'create', 'update', 'delete'] },
+  { resource: 'users',           label: 'Users',             actions: ['read', 'create', 'update', 'delete'] },
+  { resource: 'roles',           label: 'Roles',             actions: ['read', 'create', 'update', 'delete'] },
+  { resource: 'permissions',     label: 'Permissions',       actions: ['read', 'create', 'update', 'delete'] },
+  { resource: 'modules',         label: 'Modules',           actions: ['read', 'create', 'update', 'delete'] },
+  { resource: 'audit_logs',      label: 'Audit Logs',        actions: ['read'] },
+  { resource: 'audit_resources', label: 'Audit Resources',   actions: ['read', 'create', 'update', 'delete'] },
+  { resource: 'notifications',   label: 'Notifications',     actions: ['read', 'create', 'update', 'delete'] },
+  { resource: 'smtp_config',     label: 'SMTP Config',       actions: ['read', 'update'] },
+  { resource: 'api_keys',        label: 'API Keys',          actions: ['read', 'create', 'update', 'delete'] },
+  { resource: 'settings',        label: 'Settings',          actions: ['read', 'update'] },
+  { resource: 'security',        label: 'Security',          actions: ['read', 'update'] },
+  { resource: 'ai_completions',  label: 'AI Completions',    actions: ['read'] },
+];
+
+/** Convenience: all distinct action names */
+export const ALL_ACTIONS = ['read', 'create', 'update', 'delete'];
diff --git a/src/hooks/usePermissions.ts b/src/hooks/usePermissions.ts
index b3ebd2d..6806bc5 100644
--- a/src/hooks/usePermissions.ts
+++ b/src/hooks/usePermissions.ts
@@ -8,11 +8,28 @@ import { useAppSelector } from './redux-hooks';
 export const usePermissions = () => {
   const { roles, permissions } = useAppSelector((state) => state.auth);
 
-  const isSuperAdmin = useMemo(() => {
-    const rolesArray = Array.isArray(roles) ? roles : [];
-    return rolesArray.includes('super_admin');
+  const parsedRoles = useMemo((): string[] => {
+    if (Array.isArray(roles)) {
+      return roles;
+    }
+    if (typeof roles === 'string') {
+      try {
+        const parsed = JSON.parse(roles);
+        if (Array.isArray(parsed)) {
+          return parsed;
+        }
+        return [roles];
+      } catch {
+        return [roles];
+      }
+    }
+    return [];
   }, [roles]);
 
+  const isSuperAdmin = useMemo(() => {
+    return parsedRoles.includes('super_admin');
+  }, [parsedRoles]);
+
   /**
    * Check if user has permission for a specific resource and action
    * @param resource - The resource name (e.g., 'roles', 'users', 'audit_logs')
@@ -81,9 +98,8 @@ export const usePermissions = () => {
   );
 
   const isTenantAdmin = useMemo(() => {
-    const rolesArray = Array.isArray(roles) ? roles : [];
-    return rolesArray.includes('tenant_admin') || rolesArray.includes('super_admin');
-  }, [roles]);
+    return parsedRoles.includes('tenant_admin') || parsedRoles.includes('super_admin');
+  }, [parsedRoles]);
 
   return {
     hasPermission,
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index b4fcb52..9c6c7e5 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -29,7 +29,7 @@ type LoginFormData = z.infer<typeof loginSchema>;
 const Login = (): ReactElement => {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
-  const { isLoading, error, isAuthenticated, roles } = useAppSelector(
+  const { isLoading, error, isAuthenticated, roles, tenantId } = useAppSelector(
     (state) => state.auth,
   );
 
@@ -49,7 +49,7 @@ const Login = (): ReactElement => {
   // Redirect if already authenticated
   useEffect(() => {
     if (isAuthenticated) {
-      // Check if user is super_admin, redirect to super admin dashboard
+      // Check if user is super_admin or a platform user, redirect to super admin dashboard
       // Handle both array and JSON string formats
       let rolesArray: string[] = [];
       if (Array.isArray(roles)) {
@@ -61,14 +61,17 @@ const Login = (): ReactElement => {
           rolesArray = [];
         }
       }
-      if (rolesArray.includes("super_admin")) {
+      const isPlatformUser =
+        rolesArray.includes("super_admin") ||
+        tenantId === "00000000-0000-0000-0000-000000000001";
+      if (isPlatformUser) {
         navigate("/dashboard");
       } else {
         // Tenant admin - redirect to tenant landing page (workspace selector)
         navigate("/tenant/landing");
       }
     }
-  }, [isAuthenticated, roles, navigate]);
+  }, [isAuthenticated, roles, tenantId, navigate]);
 
   // Clear errors only on component mount, not on every auth state change
   useEffect(() => {
@@ -104,7 +107,11 @@ const Login = (): ReactElement => {
 
         // Check roles after login to redirect appropriately
         const userRoles = result.data.roles || [];
-        if (userRoles.includes("super_admin")) {
+        const userTenantId = result.data.tenant_id;
+        const isPlatformUser =
+          userRoles.includes("super_admin") ||
+          userTenantId === "00000000-0000-0000-0000-000000000001";
+        if (isPlatformUser) {
           navigate("/dashboard");
         } else {
           navigate("/tenant/landing");
diff --git a/src/pages/ProtectedRoute.tsx b/src/pages/ProtectedRoute.tsx
index d19c6c5..e0ccee5 100644
--- a/src/pages/ProtectedRoute.tsx
+++ b/src/pages/ProtectedRoute.tsx
@@ -7,13 +7,13 @@ interface ProtectedRouteProps {
 }
 
 const ProtectedRoute = ({ children }: ProtectedRouteProps): ReactElement => {
-  const { isAuthenticated, roles } = useAppSelector((state) => state.auth);
+  const { isAuthenticated, roles, tenantId } = useAppSelector((state) => state.auth);
 
   if (!isAuthenticated) {
     return <Navigate to="/" replace />;
   }
 
-  // Check if user has super_admin role
+  // Check if user has super_admin role or is a platform user
   // Handle both array and JSON string formats
   let rolesArray: string[] = [];
   if (Array.isArray(roles)) {
@@ -26,9 +26,10 @@ const ProtectedRoute = ({ children }: ProtectedRouteProps): ReactElement => {
     }
   }
   const hasSuperAdminRole = rolesArray && rolesArray.length > 0 && rolesArray.includes('super_admin');
+  const isPlatformUser = hasSuperAdminRole || tenantId === '00000000-0000-0000-0000-000000000001';
   
-  if (!hasSuperAdminRole) {
-    // If not super_admin, redirect to tenant login
+  if (!isPlatformUser) {
+    // If not a platform user, redirect to tenant login
     return <Navigate to="/tenant/login" replace />;
   }
 
diff --git a/src/pages/superadmin/AIFallbackHistory.tsx b/src/pages/superadmin/AIFallbackHistory.tsx
index c65bb12..3b4d451 100644
--- a/src/pages/superadmin/AIFallbackHistory.tsx
+++ b/src/pages/superadmin/AIFallbackHistory.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { Layout } from "@/components/layout/Layout";
+import { usePermissions } from "@/hooks/usePermissions";
 import {
   DataTable,
   Pagination,
@@ -49,6 +50,7 @@ const BUILT_IN_PROVIDERS = [
 const NONE_OPTION = { value: "__none__", label: "— No fallback —" };
 
 export const AIFallbackHistory = () => {
+  const { canUpdate } = usePermissions();
   const [fallbacks, setFallbacks] = useState<FallbackEvent[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [selectedEvent, setSelectedEvent] = useState<FallbackEvent | null>(null);
@@ -432,7 +434,8 @@ export const AIFallbackHistory = () => {
                             <select
                               value={currentFallback}
                               onChange={(e) => handleMappingChange(provider.name, e.target.value)}
-                              className="w-full h-9 px-3 text-sm border border-slate-200 rounded-lg bg-white text-slate-800 focus:outline-none focus:ring-2 focus:ring-[#112868]/20 focus:border-[#112868] transition-all cursor-pointer"
+                              disabled={!canUpdate("settings")}
+                              className="w-full h-9 px-3 text-sm border border-slate-200 rounded-lg bg-white text-slate-800 focus:outline-none focus:ring-2 focus:ring-[#112868]/20 focus:border-[#112868] transition-all cursor-pointer disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed"
                             >
                               {options.map((opt) => (
                                 <option key={opt.value} value={opt.value}>
@@ -464,23 +467,25 @@ export const AIFallbackHistory = () => {
                       {availableProviders.length} provider{availableProviders.length !== 1 ? "s" : ""} configured.
                       Add more via the <span className="font-semibold text-slate-500">Dynamic Fallback Models & API Keys</span> tab.
                     </p>
-                    <PrimaryButton
-                      onClick={handleSaveMapping}
-                      disabled={isSavingMapping}
-                      className="h-9 px-5 text-xs flex items-center gap-1.5 rounded-lg"
-                    >
-                      {isSavingMapping ? (
-                        <>
-                          <Loader2 className="w-3.5 h-3.5 animate-spin" />
-                          Saving...
-                        </>
-                      ) : (
-                        <>
-                          <Save className="w-3.5 h-3.5" />
-                          Save Fallback Mapping
-                        </>
-                      )}
-                    </PrimaryButton>
+                    {canUpdate("settings") && (
+                      <PrimaryButton
+                        onClick={handleSaveMapping}
+                        disabled={isSavingMapping}
+                        className="h-9 px-5 text-xs flex items-center gap-1.5 rounded-lg"
+                      >
+                        {isSavingMapping ? (
+                          <>
+                            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                            Saving...
+                          </>
+                        ) : (
+                          <>
+                            <Save className="w-3.5 h-3.5" />
+                            Save Fallback Mapping
+                          </>
+                        )}
+                      </PrimaryButton>
+                    )}
                   </div>
                 </>
               )}
diff --git a/src/pages/superadmin/Modules.tsx b/src/pages/superadmin/Modules.tsx
index 7b90599..42446f2 100644
--- a/src/pages/superadmin/Modules.tsx
+++ b/src/pages/superadmin/Modules.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import type { ReactElement } from "react";
 import { Layout } from "@/components/layout/Layout";
+import { usePermissions } from "@/hooks/usePermissions";
 import {
   StatusBadge,
   PrimaryButton,
@@ -53,6 +54,7 @@ const getStatusVariant = (
 };
 
 const Modules = (): ReactElement => {
+  const { canCreate, canUpdate } = usePermissions();
   const [modules, setModules] = useState<Module[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
@@ -291,21 +293,25 @@ const Modules = (): ReactElement => {
                 label: "View",
                 onClick: () => handleViewModule(module.id),
               },
-              {
-                icon: <Edit className="w-3.5 h-3.5 shrink-0" />,
-                label: "Edit",
-                onClick: () => handleEditModule(module),
-              },
-              {
-                icon: <Key className="w-3.5 h-3.5 shrink-0" />,
-                label: "Reissue API Key",
-                onClick: () => handleOpenReissueApiKey(module.id),
-              },
-              {
-                icon: <CloudSync className="w-3.5 h-3.5 shrink-0" />,
-                label: "Webhook Sync",
-                onClick: () => handleOpenWebhookSync(module.id),
-              },
+              ...(canUpdate("modules")
+                ? [
+                    {
+                      icon: <Edit className="w-3.5 h-3.5 shrink-0" />,
+                      label: "Edit",
+                      onClick: () => handleEditModule(module),
+                    },
+                    {
+                      icon: <Key className="w-3.5 h-3.5 shrink-0" />,
+                      label: "Reissue API Key",
+                      onClick: () => handleOpenReissueApiKey(module.id),
+                    },
+                    {
+                      icon: <CloudSync className="w-3.5 h-3.5 shrink-0" />,
+                      label: "Webhook Sync",
+                      onClick: () => handleOpenWebhookSync(module.id),
+                    },
+                  ]
+                : []),
             ]}
           />
         </div>
@@ -482,14 +488,16 @@ const Modules = (): ReactElement => {
             </button> */}
 
             {/* New Module Button */}
-            <PrimaryButton
-              size="default"
-              className="flex items-center gap-2"
-              onClick={() => setIsModalOpen(true)}
-            >
-              <Plus className="w-3.5 h-3.5" />
-              <span className="text-xs">New Module</span>
-            </PrimaryButton>
+            {canCreate("modules") && (
+              <PrimaryButton
+                size="default"
+                className="flex items-center gap-2"
+                onClick={() => setIsModalOpen(true)}
+              >
+                <Plus className="w-3.5 h-3.5" />
+                <span className="text-xs">New Module</span>
+              </PrimaryButton>
+            )}
           </div>
         </div>
 
diff --git a/src/pages/superadmin/NotificationMaster.tsx b/src/pages/superadmin/NotificationMaster.tsx
index 645301e..16c932e 100644
--- a/src/pages/superadmin/NotificationMaster.tsx
+++ b/src/pages/superadmin/NotificationMaster.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, type KeyboardEvent } from "react";
 import type { ReactElement } from "react";
 import { useLocation } from "react-router-dom";
 import { Layout } from "@/components/layout/Layout";
+import { usePermissions } from "@/hooks/usePermissions";
 import {
   PrimaryButton,
   DataTable,
@@ -132,6 +133,7 @@ const VariableTagInput = ({
 };
 
 const NotificationMaster = (): ReactElement => {
+  const { canCreate, canUpdate, canDelete } = usePermissions();
   const location = useLocation();
   const [categories, setCategories] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -408,20 +410,28 @@ const NotificationMaster = (): ReactElement => {
             Codes ({c.code_count || 0})
           </button>
           <ActionDropdown
-            onEdit={() => {
-              setEditingCategory(c);
-              resetCategory({
-                name: c.name,
-                code: c.code,
-                description: c.description || "",
-                module_id: c.module_id || "",
-              });
-              setCategoryModalOpen(true);
-            }}
-            onDelete={() => {
-              setDeleteTarget({ id: c.id, name: c.name, type: "category" });
-              setDeleteModalOpen(true);
-            }}
+            onEdit={
+              canUpdate("notifications")
+                ? () => {
+                    setEditingCategory(c);
+                    resetCategory({
+                      name: c.name,
+                      code: c.code,
+                      description: c.description || "",
+                      module_id: c.module_id || "",
+                    });
+                    setCategoryModalOpen(true);
+                  }
+                : undefined
+            }
+            onDelete={
+              canDelete("notifications")
+                ? () => {
+                    setDeleteTarget({ id: c.id, name: c.name, type: "category" });
+                    setDeleteModalOpen(true);
+                  }
+                : undefined
+            }
           />
         </div>
       ),
@@ -471,36 +481,40 @@ const NotificationMaster = (): ReactElement => {
       align: "right",
       render: (c) => (
         <div className="flex justify-end gap-3 whitespace-nowrap">
-          <button
-            onClick={() => {
-              setEditingCode(c);
-              setCodeVariables(Array.isArray(c.variables) ? c.variables : []);
-              resetCode({
-                code: c.code,
-                name: c.name,
-                description: c.description || "",
-                default_channels: c.default_channels,
-                default_priority: c.default_priority,
-              });
-              setCodeFormModalOpen(true);
-            }}
-            className="text-blue-600 hover:text-blue-800 font-bold text-[11px] uppercase"
-          >
-            Edit
-          </button>
-          <button
-            onClick={() => {
-              setDeleteTarget({
-                id: c.id,
-                name: c.code,
-                type: "code",
-              });
-              setDeleteModalOpen(true);
-            }}
-            className="text-red-500 hover:text-red-700 font-bold text-[11px] uppercase"
-          >
-            Delete
-          </button>
+          {canUpdate("notifications") && (
+            <button
+              onClick={() => {
+                setEditingCode(c);
+                setCodeVariables(Array.isArray(c.variables) ? c.variables : []);
+                resetCode({
+                  code: c.code,
+                  name: c.name,
+                  description: c.description || "",
+                  default_channels: c.default_channels,
+                  default_priority: c.default_priority,
+                });
+                setCodeFormModalOpen(true);
+              }}
+              className="text-blue-600 hover:text-blue-800 font-bold text-[11px] uppercase"
+            >
+              Edit
+            </button>
+          )}
+          {canDelete("notifications") && (
+            <button
+              onClick={() => {
+                setDeleteTarget({
+                  id: c.id,
+                  name: c.code,
+                  type: "code",
+                });
+                setDeleteModalOpen(true);
+              }}
+              className="text-red-500 hover:text-red-700 font-bold text-[11px] uppercase"
+            >
+              Delete
+            </button>
+          )}
         </div>
       ),
     },
@@ -536,23 +550,25 @@ const NotificationMaster = (): ReactElement => {
               >
                 ← Back to Categories
               </button>
-              <PrimaryButton
-                onClick={() => {
-                  setEditingCode(null);
-                  setCodeVariables([]);
-                  resetCode({
-                    code: "",
-                    name: "",
-                    description: "",
-                    default_channels: ["in_app", "email"],
-                    default_priority: "normal",
-                  });
-                  setCodeFormModalOpen(true);
-                }}
-                className="flex gap-2"
-              >
-                <Plus className="w-4 h-4" /> New Code
-              </PrimaryButton>
+              {canCreate("notifications") && (
+                <PrimaryButton
+                  onClick={() => {
+                    setEditingCode(null);
+                    setCodeVariables([]);
+                    resetCode({
+                      code: "",
+                      name: "",
+                      description: "",
+                      default_channels: ["in_app", "email"],
+                      default_priority: "normal",
+                    });
+                    setCodeFormModalOpen(true);
+                  }}
+                  className="flex gap-2"
+                >
+                  <Plus className="w-4 h-4" /> New Code
+                </PrimaryButton>
+              )}
             </div>
           ) : undefined,
       }}
@@ -583,21 +599,23 @@ const NotificationMaster = (): ReactElement => {
                 isSearchable
               />
             </div>
-            <PrimaryButton
-              onClick={() => {
-                setEditingCategory(null);
-                resetCategory({
-                  name: "",
-                  code: "",
-                  description: "",
-                  module_id: "",
-                });
-                setCategoryModalOpen(true);
-              }}
-              className="flex gap-2"
-            >
-              <Plus className="w-4 h-4" /> New Category
-            </PrimaryButton>
+            {canCreate("notifications") && (
+              <PrimaryButton
+                onClick={() => {
+                  setEditingCategory(null);
+                  resetCategory({
+                    name: "",
+                    code: "",
+                    description: "",
+                    module_id: "",
+                  });
+                  setCategoryModalOpen(true);
+                }}
+                className="flex gap-2"
+              >
+                <Plus className="w-4 h-4" /> New Category
+              </PrimaryButton>
+            )}
           </div>
 
           {/* <div className="flex-1"> */}
diff --git a/src/pages/superadmin/NotificationTemplateMaster.tsx b/src/pages/superadmin/NotificationTemplateMaster.tsx
index 545d579..8642913 100644
--- a/src/pages/superadmin/NotificationTemplateMaster.tsx
+++ b/src/pages/superadmin/NotificationTemplateMaster.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import type { ReactElement } from "react";
 import { Layout } from "@/components/layout/Layout";
+import { usePermissions } from "@/hooks/usePermissions";
 import {
   PrimaryButton,
   DataTable,
@@ -91,6 +92,7 @@ const VariableChips = ({
 };
 
 const NotificationTemplateMaster = (): ReactElement => {
+  const { canCreate, canUpdate } = usePermissions();
   const [templates, setTemplates] = useState<any[]>([]);
   const [modules, setModules] = useState<any[]>([]);
   const [selectedModule, setSelectedModule] = useState<string | null>(null);
@@ -330,12 +332,14 @@ const NotificationTemplateMaster = (): ReactElement => {
       label: "Actions",
       align: "right",
       render: (t) => (
-        <button
-          onClick={() => openEditModal(t)}
-          className="text-xs text-blue-600 hover:underline font-semibold"
-        >
-          Edit
-        </button>
+        canUpdate("notifications") ? (
+          <button
+            onClick={() => openEditModal(t)}
+            className="text-xs text-blue-600 hover:underline font-semibold"
+          >
+            Edit
+          </button>
+        ) : null
       ),
     },
   ];
@@ -377,30 +381,32 @@ const NotificationTemplateMaster = (): ReactElement => {
               </div>
             </div>
           </div>
-          <PrimaryButton
-            onClick={() => {
-              setEditingId(null);
-              setTemplateVariables([]);
-              setEmailBodyHtml("");
-              reset({
-                code: "",
-                name: "",
-                description: "",
-                category: "",
-                title_template: "",
-                message_template: "",
-                email_subject_template: "",
-                email_body_template: "",
-                default_priority: "normal",
-                channels: ["in_app", "email"],
-                is_active: true,
-              });
-              setModalOpen(true);
-            }}
-            className="flex gap-2"
-          >
-            <Plus className="w-4 h-4" /> New Template
-          </PrimaryButton>
+          {canCreate("notifications") && (
+            <PrimaryButton
+              onClick={() => {
+                setEditingId(null);
+                setTemplateVariables([]);
+                setEmailBodyHtml("");
+                reset({
+                  code: "",
+                  name: "",
+                  description: "",
+                  category: "",
+                  title_template: "",
+                  message_template: "",
+                  email_subject_template: "",
+                  email_body_template: "",
+                  default_priority: "normal",
+                  channels: ["in_app", "email"],
+                  is_active: true,
+                });
+                setModalOpen(true);
+              }}
+              className="flex gap-2"
+            >
+              <Plus className="w-4 h-4" /> New Template
+            </PrimaryButton>
+          )}
         </div>
 
         <div className="flex-1">
diff --git a/src/pages/superadmin/Roles.tsx b/src/pages/superadmin/Roles.tsx
index 4c78d9b..ae15fe4 100644
--- a/src/pages/superadmin/Roles.tsx
+++ b/src/pages/superadmin/Roles.tsx
@@ -1,443 +1,19 @@
-// import { useState, useEffect } from 'react';
-// import type { ReactElement } from 'react';
-// import { Layout } from '@/components/layout/Layout';
-// import {
-//   PrimaryButton,
-//   StatusBadge,
-//   ActionDropdown,
-//   NewRoleModal,
-//   ViewRoleModal,
-//   EditRoleModal,
-//   DeleteConfirmationModal,
-//   DataTable,
-//   Pagination,
-//   FilterDropdown,
-//   type Column,
-// } from '@/components/shared';
-// import { Plus, Download, ArrowUpDown } from 'lucide-react';
-// import { roleService } from '@/services/role-service';
-// import type { Role, CreateRoleRequest, UpdateRoleRequest } from '@/types/role';
-// import { showToast } from '@/utils/toast';
+import type { ReactElement } from "react";
+import { Layout } from "@/components/layout/Layout";
+import { PlatformRolesTable } from "@/components/superadmin/PlatformRolesTable";
 
-// // Helper function to format date
-// const formatDate = (dateString: string): string => {
-//   const date = new Date(dateString);
-//   return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
-// };
+const Roles = (): ReactElement => {
+  return (
+    <Layout
+      currentPage="Roles"
+      pageHeader={{
+        title: "Platform Roles",
+        description: "Manage system-wide administrative roles and permissions.",
+      }}
+    >
+      <PlatformRolesTable />
+    </Layout>
+  );
+};
 
-// // Helper function to get scope badge variant
-// const getScopeVariant = (scope: string): 'success' | 'failure' | 'process' => {
-//   switch (scope.toLowerCase()) {
-//     case 'platform':
-//       return 'success';
-//     case 'tenant':
-//       return 'process';
-//     case 'module':
-//       return 'failure';
-//     default:
-//       return 'success';
-//   }
-// };
-
-// const Roles = (): ReactElement => {
-//   const [roles, setRoles] = useState<Role[]>([]);
-//   const [isLoading, setIsLoading] = useState<boolean>(true);
-//   const [error, setError] = useState<string | null>(null);
-//   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-//   const [isCreating, setIsCreating] = useState<boolean>(false);
-
-//   // Pagination state
-//   const [currentPage, setCurrentPage] = useState<number>(1);
-//   const [limit, setLimit] = useState<number>(5);
-//   const [pagination, setPagination] = useState<{
-//     page: number;
-//     limit: number;
-//     total: number;
-//     totalPages: number;
-//     hasMore: boolean;
-//   }>({
-//     page: 1,
-//     limit: 5,
-//     total: 0,
-//     totalPages: 1,
-//     hasMore: false,
-//   });
-
-//   // Filter state
-//   const [scopeFilter, setScopeFilter] = useState<string | null>(null);
-//   const [orderBy, setOrderBy] = useState<string[] | null>(null);
-
-//   // View, Edit, Delete modals
-//   const [viewModalOpen, setViewModalOpen] = useState<boolean>(false);
-//   const [editModalOpen, setEditModalOpen] = useState<boolean>(false);
-//   const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
-//   const [selectedRoleId, setSelectedRoleId] = useState<string | null>(null);
-//   const [selectedRoleName, setSelectedRoleName] = useState<string>('');
-//   const [isUpdating, setIsUpdating] = useState<boolean>(false);
-//   const [isDeleting, setIsDeleting] = useState<boolean>(false);
-
-//   const fetchRoles = async (
-//     page: number,
-//     itemsPerPage: number,
-//     scope: string | null = null,
-//     sortBy: string[] | null = null
-//   ): Promise<void> => {
-//     try {
-//       setIsLoading(true);
-//       setError(null);
-//       const response = await roleService.getAll(page, itemsPerPage, scope, sortBy);
-//       if (response.success) {
-//         setRoles(response.data);
-//         setPagination(response.pagination);
-//       } else {
-//         setError('Failed to load roles');
-//       }
-//     } catch (err: any) {
-//       setError(err?.response?.data?.error?.message || 'Failed to load roles');
-//     } finally {
-//       setIsLoading(false);
-//     }
-//   };
-
-//   useEffect(() => {
-//     fetchRoles(currentPage, limit, scopeFilter, orderBy);
-//   }, [currentPage, limit, scopeFilter, orderBy]);
-
-//   const handleCreateRole = async (data: CreateRoleRequest): Promise<void> => {
-//     try {
-//       setIsCreating(true);
-//       const response = await roleService.create(data);
-//       const message = response.message || `Role created successfully`;
-//       const description = response.message ? undefined : `${data.name} has been added`;
-//       showToast.success(message, description);
-//       setIsModalOpen(false);
-//       await fetchRoles(currentPage, limit, scopeFilter, orderBy);
-//     } catch (err: any) {
-//       throw err;
-//     } finally {
-//       setIsCreating(false);
-//     }
-//   };
-
-//   // View role handler
-//   const handleViewRole = (roleId: string): void => {
-//     setSelectedRoleId(roleId);
-//     setViewModalOpen(true);
-//   };
-
-//   // Edit role handler
-//   const handleEditRole = (roleId: string, roleName: string): void => {
-//     setSelectedRoleId(roleId);
-//     setSelectedRoleName(roleName);
-//     setEditModalOpen(true);
-//   };
-
-//   // Update role handler
-//   const handleUpdateRole = async (
-//     id: string,
-//     data: UpdateRoleRequest
-//   ): Promise<void> => {
-//     try {
-//       setIsUpdating(true);
-//       const response = await roleService.update(id, data);
-//       const message = response.message || `Role updated successfully`;
-//       const description = response.message ? undefined : `${data.name} has been updated`;
-//       showToast.success(message, description);
-//       setEditModalOpen(false);
-//       setSelectedRoleId(null);
-//       await fetchRoles(currentPage, limit, scopeFilter, orderBy);
-//     } catch (err: any) {
-//       throw err;
-//     } finally {
-//       setIsUpdating(false);
-//     }
-//   };
-
-//   // Delete role handler
-//   const handleDeleteRole = (roleId: string, roleName: string): void => {
-//     setSelectedRoleId(roleId);
-//     setSelectedRoleName(roleName);
-//     setDeleteModalOpen(true);
-//   };
-
-//   // Confirm delete handler
-//   const handleConfirmDelete = async (): Promise<void> => {
-//     if (!selectedRoleId) return;
-
-//     try {
-//       setIsDeleting(true);
-//       await roleService.delete(selectedRoleId);
-//       setDeleteModalOpen(false);
-//       setSelectedRoleId(null);
-//       setSelectedRoleName('');
-//       await fetchRoles(currentPage, limit, scopeFilter, orderBy);
-//     } catch (err: any) {
-//       throw err;
-//     } finally {
-//       setIsDeleting(false);
-//     }
-//   };
-
-//   // Load role for view/edit
-//   const loadRole = async (id: string): Promise<Role> => {
-//     const response = await roleService.getById(id);
-//     return response.data;
-//   };
-
-//   // Table columns
-//   const columns: Column<Role>[] = [
-//     {
-//       key: 'name',
-//       label: 'Name',
-//       render: (role) => (
-//         <span className="text-sm font-normal text-[#0f1724]">{role.name}</span>
-//       ),
-//     },
-//     {
-//       key: 'code',
-//       label: 'Code',
-//       render: (role) => (
-//         <span className="text-sm font-normal text-[#0f1724] font-mono">{role.code}</span>
-//       ),
-//     },
-//     {
-//       key: 'scope',
-//       label: 'Scope',
-//       render: (role) => (
-//         <StatusBadge variant={getScopeVariant(role.scope)}>{role.scope}</StatusBadge>
-//       ),
-//     },
-//     {
-//       key: 'description',
-//       label: 'Description',
-//       render: (role) => (
-//         <span className="text-sm font-normal text-[#6b7280]">
-//           {role.description || 'N/A'}
-//         </span>
-//       ),
-//     },
-//     {
-//       key: 'is_system',
-//       label: 'System Role',
-//       render: (role) => (
-//         <span className="text-sm font-normal text-[#0f1724]">
-//           {role.is_system ? 'Yes' : 'No'}
-//         </span>
-//       ),
-//     },
-//     {
-//       key: 'created_at',
-//       label: 'Created Date',
-//       render: (role) => (
-//         <span className="text-sm font-normal text-[#6b7280]">{formatDate(role.created_at)}</span>
-//       ),
-//     },
-//     {
-//       key: 'actions',
-//       label: 'Actions',
-//       align: 'right',
-//       render: (role) => (
-//         <div className="flex justify-end">
-//           <ActionDropdown
-//             onView={() => handleViewRole(role.id)}
-//             onEdit={() => handleEditRole(role.id, role.name)}
-//             onDelete={() => handleDeleteRole(role.id, role.name)}
-//           />
-//         </div>
-//       ),
-//     },
-//   ];
-
-//   // Mobile card renderer
-//   const mobileCardRenderer = (role: Role) => (
-//     <div className="p-4">
-//       <div className="flex items-start justify-between gap-3 mb-3">
-//         <div className="flex-1 min-w-0">
-//           <h3 className="text-sm font-medium text-[#0f1724] truncate">{role.name}</h3>
-//           <p className="text-xs text-[#6b7280] mt-0.5 font-mono">{role.code}</p>
-//         </div>
-//         <ActionDropdown
-//           onView={() => handleViewRole(role.id)}
-//           onEdit={() => handleEditRole(role.id, role.name)}
-//           onDelete={() => handleDeleteRole(role.id, role.name)}
-//         />
-//       </div>
-//       <div className="grid grid-cols-2 gap-3 text-xs">
-//         <div>
-//           <span className="text-[#9aa6b2]">Scope:</span>
-//           <div className="mt-1">
-//             <StatusBadge variant={getScopeVariant(role.scope)}>{role.scope}</StatusBadge>
-//           </div>
-//         </div>
-//         <div>
-//           <span className="text-[#9aa6b2]">Created:</span>
-//           <p className="text-[#0f1724] font-normal mt-1">{formatDate(role.created_at)}</p>
-//         </div>
-//         {role.description && (
-//           <div className="col-span-2">
-//             <span className="text-[#9aa6b2]">Description:</span>
-//             <p className="text-[#0f1724] font-normal mt-1">{role.description}</p>
-//           </div>
-//         )}
-//       </div>
-//     </div>
-//   );
-
-//   return (
-//     <Layout
-//       currentPage="Roles"
-//       pageHeader={{
-//         title: 'Role List',
-//         description: 'Define and manage roles to control user access based on job responsibilities',
-//       }}
-//     >
-//       {/* Table Container */}
-//       <div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-lg shadow-[0px_4px_24px_0px_rgba(0,0,0,0.02)] overflow-hidden">
-//         {/* Table Header with Filters */}
-//         <div className="border-b border-[rgba(0,0,0,0.08)] px-4 md:px-5 py-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
-//           {/* Filters */}
-//           <div className="flex flex-wrap items-center gap-3">
-//             {/* Scope Filter */}
-//             <FilterDropdown
-//               label="Scope"
-//               options={[
-//                 { value: 'platform', label: 'Platform' },
-//                 { value: 'tenant', label: 'Tenant' },
-//                 { value: 'module', label: 'Module' },
-//               ]}
-//               value={scopeFilter}
-//               onChange={(value) => {
-//                 setScopeFilter(value as string | null);
-//                 setCurrentPage(1);
-//               }}
-//               placeholder="All"
-//             />
-
-//             {/* Sort Filter */}
-//             <FilterDropdown
-//               label="Sort by"
-//               options={[
-//                 { value: ['name', 'asc'], label: 'Name (A-Z)' },
-//                 { value: ['name', 'desc'], label: 'Name (Z-A)' },
-//                 { value: ['code', 'asc'], label: 'Code (A-Z)' },
-//                 { value: ['code', 'desc'], label: 'Code (Z-A)' },
-//                 { value: ['created_at', 'asc'], label: 'Created (Oldest)' },
-//                 { value: ['created_at', 'desc'], label: 'Created (Newest)' },
-//                 { value: ['updated_at', 'asc'], label: 'Updated (Oldest)' },
-//                 { value: ['updated_at', 'desc'], label: 'Updated (Newest)' },
-//               ]}
-//               value={orderBy}
-//               onChange={(value) => {
-//                 setOrderBy(value as string[] | null);
-//                 setCurrentPage(1);
-//               }}
-//               placeholder="Default"
-//               showIcon
-//               icon={<ArrowUpDown className="w-3.5 h-3.5 text-[#475569]" />}
-//             />
-//           </div>
-
-//           {/* Actions */}
-//           <div className="flex items-center gap-2">
-//             {/* Export Button */}
-//             <button
-//               type="button"
-//               className="flex items-center gap-1.5 px-3 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-xs text-[#0f1724] hover:bg-gray-50 transition-colors cursor-pointer"
-//             >
-//               <Download className="w-3.5 h-3.5" />
-//               <span>Export</span>
-//             </button>
-
-//             {/* New Role Button */}
-//             <PrimaryButton
-//               size="default"
-//               className="flex items-center gap-2"
-//               onClick={() => setIsModalOpen(true)}
-//             >
-//               <Plus className="w-3.5 h-3.5" />
-//               <span className="text-xs">New Role</span>
-//             </PrimaryButton>
-//           </div>
-//         </div>
-
-//         {/* Table */}
-//         <DataTable
-//           data={roles}
-//           columns={columns}
-//           keyExtractor={(role) => role.id}
-//           mobileCardRenderer={mobileCardRenderer}
-//           emptyMessage="No roles found"
-//           isLoading={isLoading}
-//           error={error}
-//         />
-
-//         {/* Table Footer with Pagination */}
-//         {pagination.total > 0 && (
-//           <Pagination
-//             currentPage={currentPage}
-//             totalPages={pagination.totalPages}
-//             totalItems={pagination.total}
-//             limit={limit}
-//             onPageChange={(page: number) => {
-//               setCurrentPage(page);
-//             }}
-//             onLimitChange={(newLimit: number) => {
-//               setLimit(newLimit);
-//               setCurrentPage(1);
-//             }}
-//           />
-//         )}
-//       </div>
-
-//       {/* New Role Modal */}
-//       <NewRoleModal
-//         isOpen={isModalOpen}
-//         onClose={() => setIsModalOpen(false)}
-//         onSubmit={handleCreateRole}
-//         isLoading={isCreating}
-//       />
-
-//       {/* View Role Modal */}
-//       <ViewRoleModal
-//         isOpen={viewModalOpen}
-//         onClose={() => {
-//           setViewModalOpen(false);
-//           setSelectedRoleId(null);
-//         }}
-//         roleId={selectedRoleId}
-//         onLoadRole={loadRole}
-//       />
-
-//       {/* Edit Role Modal */}
-//       <EditRoleModal
-//         isOpen={editModalOpen}
-//         onClose={() => {
-//           setEditModalOpen(false);
-//           setSelectedRoleId(null);
-//           setSelectedRoleName('');
-//         }}
-//         roleId={selectedRoleId}
-//         onLoadRole={loadRole}
-//         onSubmit={handleUpdateRole}
-//         isLoading={isUpdating}
-//       />
-
-//       {/* Delete Confirmation Modal */}
-//       <DeleteConfirmationModal
-//         isOpen={deleteModalOpen}
-//         onClose={() => {
-//           setDeleteModalOpen(false);
-//           setSelectedRoleId(null);
-//           setSelectedRoleName('');
-//         }}
-//         onConfirm={handleConfirmDelete}
-//         title="Delete Role"
-//         message={`Are you sure you want to delete this role`}
-//         itemName={selectedRoleName}
-//         isLoading={isDeleting}
-//       />
-//     </Layout>
-//   );
-// };
-
-// export default Roles;
+export default Roles;
diff --git a/src/pages/superadmin/SmtpConfig.tsx b/src/pages/superadmin/SmtpConfig.tsx
index 5cc3725..1b3a517 100644
--- a/src/pages/superadmin/SmtpConfig.tsx
+++ b/src/pages/superadmin/SmtpConfig.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { Layout } from "@/components/layout/Layout";
+import { usePermissions } from "@/hooks/usePermissions";
 import {
   DataTable,
   Pagination,
@@ -18,6 +19,7 @@ import { SmtpConfigModal } from "@/components/superadmin/SmtpConfigModal";
 import { showToast } from "@/utils/toast";
 
 const SmtpConfigPage = () => {
+  const { canCreate, canUpdate, canDelete } = usePermissions();
   const [configs, setConfigs] = useState<SmtpConfig[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -139,8 +141,8 @@ const SmtpConfigPage = () => {
       align: "right",
       render: (config) => (
         <ActionDropdown
-          onEdit={() => handleEdit(config)}
-          onDelete={() => handleDelete(config)}
+          onEdit={canUpdate("settings") ? () => handleEdit(config) : undefined}
+          onDelete={canDelete("settings") ? () => handleDelete(config) : undefined}
         />
       ),
     },
@@ -153,7 +155,7 @@ const SmtpConfigPage = () => {
         title: "SMTP Configurations",
         description:
           "Manage email delivery settings for the entire platform and individual tenants.",
-        action: (
+        action: canCreate("settings") ? (
           <PrimaryButton
             onClick={() => {
               setSelectedConfig(null);
@@ -163,7 +165,7 @@ const SmtpConfigPage = () => {
             <Plus className="w-4 h-4 mr-2" />
             Add Configuration
           </PrimaryButton>
-        ),
+        ) : undefined,
       }}
     >
       <div className="overflow-hidden">
diff --git a/src/pages/superadmin/Tenants.tsx b/src/pages/superadmin/Tenants.tsx
index 7a6adea..0b6e8e2 100644
--- a/src/pages/superadmin/Tenants.tsx
+++ b/src/pages/superadmin/Tenants.tsx
@@ -17,6 +17,7 @@ import { Plus, ArrowUpDown } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { tenantService } from "@/services/tenant-service";
 import type { Tenant } from "@/types/tenant";
+import { usePermissions } from "@/hooks/usePermissions";
 // Helper function to get tenant initials
 const getTenantInitials = (name: string): string => {
   const words = name.trim().split(/\s+/);
@@ -60,6 +61,7 @@ const formatSubscriptionTier = (tier: string | null): string => {
 
 const Tenants = (): ReactElement => {
   const navigate = useNavigate();
+  const { canCreate, canUpdate } = usePermissions();
   const [tenants, setTenants] = useState<Tenant[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
@@ -211,7 +213,7 @@ const Tenants = (): ReactElement => {
       key: "name",
       label: "Tenant Name",
       render: (tenant) => (
-        <div 
+        <div
           className="flex items-center gap-3 cursor-pointer hover:opacity-80 transition-opacity"
           onClick={() => navigate(`/tenants/${tenant.id}`)}
         >
@@ -254,11 +256,7 @@ const Tenants = (): ReactElement => {
     {
       key: "user_count",
       label: "Users",
-      render: (tenant) => (
-        <span className="">
-          {tenant.user_count ?? 0}
-        </span>
-      ),
+      render: (tenant) => <span className="">{tenant.user_count ?? 0}</span>,
     },
     {
       key: "subscription_tier",
@@ -272,19 +270,13 @@ const Tenants = (): ReactElement => {
     {
       key: "module_count",
       label: "Modules",
-      render: (tenant) => (
-        <span className="">
-          {tenant.module_count ?? 0}
-        </span>
-      ),
+      render: (tenant) => <span className="">{tenant.module_count ?? 0}</span>,
     },
     {
       key: "created_at",
       label: "Joined Date",
       render: (tenant) => (
-        <span className="">
-          {formatDate(tenant.created_at)}
-        </span>
+        <span className="">{formatDate(tenant.created_at)}</span>
       ),
       mobileLabel: "Joined",
     },
@@ -296,7 +288,9 @@ const Tenants = (): ReactElement => {
         <div className="flex justify-end">
           <ActionDropdown
             onView={() => handleViewTenant(tenant.id)}
-            onEdit={() => handleEditTenant(tenant.id)}
+            onEdit={
+              canUpdate("users") ? () => handleEditTenant(tenant.id) : undefined
+            }
             // onDelete={() => handleDeleteTenant(tenant.id, tenant.name)}
           />
         </div>
@@ -308,7 +302,7 @@ const Tenants = (): ReactElement => {
   const mobileCardRenderer = (tenant: Tenant) => (
     <div className="p-4">
       <div className="flex items-start justify-between gap-3 mb-3">
-        <div 
+        <div
           className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity"
           onClick={() => navigate(`/tenants/${tenant.id}`)}
         >
@@ -445,14 +439,16 @@ const Tenants = (): ReactElement => {
             </PrimaryButton> */}
 
             {/* Add Tenant Button (New Wizard) */}
-            <PrimaryButton
-              size="default"
-              className="flex items-center gap-2"
-              onClick={() => navigate("/tenants/create-wizard")}
-            >
-              <Plus className="w-3.5 h-3.5" />
-              <span className="text-xs">Add Tenant</span>
-            </PrimaryButton>
+            {canCreate("tenants") && (
+              <PrimaryButton
+                size="default"
+                className="flex items-center gap-2"
+                onClick={() => navigate("/tenants/create-wizard")}
+              >
+                <Plus className="w-3.5 h-3.5" />
+                <span className="text-xs">Add Tenant</span>
+              </PrimaryButton>
+            )}
           </div>
         </div>
 
diff --git a/src/pages/superadmin/Users.tsx b/src/pages/superadmin/Users.tsx
index fca4079..b137d37 100644
--- a/src/pages/superadmin/Users.tsx
+++ b/src/pages/superadmin/Users.tsx
@@ -1,476 +1,19 @@
-// import { useState, useEffect } from 'react';
-// import type { ReactElement } from 'react';
-// import { Layout } from '@/components/layout/Layout';
-// import {
-//   PrimaryButton,
-//   StatusBadge,
-//   ActionDropdown,
-//   NewUserModal,
-//   ViewUserModal,
-//   EditUserModal,
-//   DeleteConfirmationModal,
-//   DataTable,
-//   Pagination,
-//   FilterDropdown,
-//   type Column,
-// } from '@/components/shared';
-// import { Plus, Download, ArrowUpDown } from 'lucide-react';
-// import { userService } from '@/services/user-service';
-// import type { User } from '@/types/user';
-// import { showToast } from '@/utils/toast';
+import type { ReactElement } from "react";
+import { Layout } from "@/components/layout/Layout";
+import { PlatformUsersTable } from "@/components/superadmin/PlatformUsersTable";
 
-// // Helper function to get user initials
-// const getUserInitials = (firstName: string, lastName: string): string => {
-//   return `${firstName[0]}${lastName[0]}`.toUpperCase();
-// };
+const Users = (): ReactElement => {
+  return (
+    <Layout
+      currentPage="Users"
+      pageHeader={{
+        title: "Platform Users",
+        description: "Manage system-wide administrative personnel and platform users.",
+      }}
+    >
+      <PlatformUsersTable />
+    </Layout>
+  );
+};
 
-// // Helper function to format date
-// const formatDate = (dateString: string): string => {
-//   const date = new Date(dateString);
-//   return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
-// };
-
-// // Helper function to get status badge variant
-// const getStatusVariant = (status: string): 'success' | 'failure' | 'process' => {
-//   switch (status.toLowerCase()) {
-//     case 'active':
-//       return 'success';
-//     case 'pending_verification':
-//       return 'process';
-//     case 'inactive':
-//       return 'failure';
-//     case 'deleted':
-//       return 'failure';
-//     case 'suspended':
-//       return 'process';
-//     default:
-//       return 'success';
-//   }
-// };
-
-// const Users = (): ReactElement => {
-//   const [users, setUsers] = useState<User[]>([]);
-//   const [isLoading, setIsLoading] = useState<boolean>(true);
-//   const [error, setError] = useState<string | null>(null);
-//   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-//   const [isCreating, setIsCreating] = useState<boolean>(false);
-
-//   // Pagination state
-//   const [currentPage, setCurrentPage] = useState<number>(1);
-//   const [limit, setLimit] = useState<number>(5);
-//   const [pagination, setPagination] = useState<{
-//     page: number;
-//     limit: number;
-//     total: number;
-//     totalPages: number;
-//     hasMore: boolean;
-//   }>({
-//     page: 1,
-//     limit: 5,
-//     total: 0,
-//     totalPages: 1,
-//     hasMore: false,
-//   });
-
-//   // Filter state
-//   const [statusFilter, setStatusFilter] = useState<string | null>(null);
-//   const [orderBy, setOrderBy] = useState<string[] | null>(null);
-
-//   // View, Edit, Delete modals
-//   const [viewModalOpen, setViewModalOpen] = useState<boolean>(false);
-//   const [editModalOpen, setEditModalOpen] = useState<boolean>(false);
-//   const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
-//   const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
-//   const [selectedUserName, setSelectedUserName] = useState<string>('');
-//   const [isUpdating, setIsUpdating] = useState<boolean>(false);
-//   const [isDeleting, setIsDeleting] = useState<boolean>(false);
-
-//   const fetchUsers = async (
-//     page: number,
-//     itemsPerPage: number,
-//     status: string | null = null,
-//     sortBy: string[] | null = null
-//   ): Promise<void> => {
-//     try {
-//       setIsLoading(true);
-//       setError(null);
-//       const response = await userService.getAll(page, itemsPerPage, status, sortBy);
-//       if (response.success) {
-//         setUsers(response.data);
-//         setPagination(response.pagination);
-//       } else {
-//         setError('Failed to load users');
-//       }
-//     } catch (err: any) {
-//       setError(err?.response?.data?.error?.message || 'Failed to load users');
-//     } finally {
-//       setIsLoading(false);
-//     }
-//   };
-
-//   useEffect(() => {
-//     fetchUsers(currentPage, limit, statusFilter, orderBy);
-//   }, [currentPage, limit, statusFilter, orderBy]);
-
-//   const handleCreateUser = async (data: {
-//     email: string;
-//     password: string;
-//     first_name: string;
-//     last_name: string;
-//     status: 'active' | 'suspended' | 'deleted';
-//     auth_provider: 'local';
-//     role_id: string;
-//   }): Promise<void> => {
-//     try {
-//       setIsCreating(true);
-//       const response = await userService.create(data);
-//       const message = response.message || `User created successfully`;
-//       const description = response.message ? undefined : `${data.first_name} ${data.last_name} has been added`;
-//       showToast.success(message, description);
-//       setIsModalOpen(false);
-//       await fetchUsers(currentPage, limit, statusFilter, orderBy);
-//     } catch (err: any) {
-//       throw err;
-//     } finally {
-//       setIsCreating(false);
-//     }
-//   };
-
-//   // View user handler
-//   const handleViewUser = (userId: string): void => {
-//     setSelectedUserId(userId);
-//     setViewModalOpen(true);
-//   };
-
-//   // Edit user handler
-//   const handleEditUser = (userId: string, userName: string): void => {
-//     setSelectedUserId(userId);
-//     setSelectedUserName(userName);
-//     setEditModalOpen(true);
-//   };
-
-//   // Update user handler
-//   const handleUpdateUser = async (
-//     id: string,
-//     data: {
-//       email: string;
-//       first_name: string;
-//       last_name: string;
-//       status: 'active' | 'suspended' | 'deleted';
-//       tenant_id: string;
-//       role_id: string;
-//     }
-//   ): Promise<void> => {
-//     try {
-//       setIsUpdating(true);
-//       const response = await userService.update(id, data);
-//       const message = response.message || `User updated successfully`;
-//       const description = response.message ? undefined : `${data.first_name} ${data.last_name} has been updated`;
-//       showToast.success(message, description);
-//       setEditModalOpen(false);
-//       setSelectedUserId(null);
-//       await fetchUsers(currentPage, limit, statusFilter, orderBy);
-//     } catch (err: any) {
-//       throw err;
-//     } finally {
-//       setIsUpdating(false);
-//     }
-//   };
-
-//   // Delete user handler
-//   const handleDeleteUser = (userId: string, userName: string): void => {
-//     setSelectedUserId(userId);
-//     setSelectedUserName(userName);
-//     setDeleteModalOpen(true);
-//   };
-
-//   // Confirm delete handler
-//   const handleConfirmDelete = async (): Promise<void> => {
-//     if (!selectedUserId) return;
-
-//     try {
-//       setIsDeleting(true);
-//       await userService.delete(selectedUserId);
-//       setDeleteModalOpen(false);
-//       setSelectedUserId(null);
-//       setSelectedUserName('');
-//       await fetchUsers(currentPage, limit, statusFilter, orderBy);
-//     } catch (err: any) {
-//       throw err;
-//     } finally {
-//       setIsDeleting(false);
-//     }
-//   };
-
-//   // Load user for view/edit
-//   const loadUser = async (id: string): Promise<User> => {
-//     const response = await userService.getById(id);
-//     return response.data;
-//   };
-
-//   // Define table columns
-//   const columns: Column<User>[] = [
-//     {
-//       key: 'name',
-//       label: 'User Name',
-//       render: (user) => (
-//         <div className="flex items-center gap-3">
-//           <div className="w-8 h-8 bg-[#f5f7fa] border border-[rgba(0,0,0,0.08)] rounded-lg flex items-center justify-center shrink-0">
-//             <span className="text-xs font-normal text-[#9aa6b2]">
-//               {getUserInitials(user.first_name, user.last_name)}
-//             </span>
-//           </div>
-//           <span className="text-sm font-normal text-[#0f1724]">
-//             {user.first_name} {user.last_name}
-//           </span>
-//         </div>
-//       ),
-//       mobileLabel: 'Name',
-//     },
-//     {
-//       key: 'email',
-//       label: 'Email',
-//       render: (user) => <span className="text-sm font-normal text-[#0f1724]">{user.email}</span>,
-//     },
-//     {
-//       key: 'status',
-//       label: 'Status',
-//       render: (user) => (
-//         <StatusBadge variant={getStatusVariant(user.status)}>{user.status}</StatusBadge>
-//       ),
-//     },
-//     {
-//       key: 'auth_provider',
-//       label: 'Auth Provider',
-//       render: (user) => (
-//         <span className="text-sm font-normal text-[#0f1724]">{user.auth_provider}</span>
-//       ),
-//     },
-//     {
-//       key: 'created_at',
-//       label: 'Joined Date',
-//       render: (user) => (
-//         <span className="text-sm font-normal text-[#6b7280]">{formatDate(user.created_at)}</span>
-//       ),
-//       mobileLabel: 'Joined',
-//     },
-//     {
-//       key: 'actions',
-//       label: 'Actions',
-//       align: 'right',
-//       render: (user) => (
-//         <div className="flex justify-end">
-//           <ActionDropdown
-//             onView={() => handleViewUser(user.id)}
-//             onEdit={() => handleEditUser(user.id, `${user.first_name} ${user.last_name}`)}
-//             onDelete={() => handleDeleteUser(user.id, `${user.first_name} ${user.last_name}`)}
-//           />
-//         </div>
-//       ),
-//     },
-//   ];
-
-//   // Mobile card renderer
-//   const mobileCardRenderer = (user: User) => (
-//     <div className="p-4">
-//       <div className="flex items-start justify-between gap-3 mb-3">
-//         <div className="flex items-center gap-3 flex-1 min-w-0">
-//           <div className="w-8 h-8 bg-[#f5f7fa] border border-[rgba(0,0,0,0.08)] rounded-lg flex items-center justify-center shrink-0">
-//             <span className="text-xs font-normal text-[#9aa6b2]">
-//               {getUserInitials(user.first_name, user.last_name)}
-//             </span>
-//           </div>
-//           <div className="flex-1 min-w-0">
-//             <h3 className="text-sm font-medium text-[#0f1724] truncate">
-//               {user.first_name} {user.last_name}
-//             </h3>
-//             <p className="text-xs text-[#6b7280] mt-0.5 truncate">{user.email}</p>
-//           </div>
-//         </div>
-//         <ActionDropdown
-//           onView={() => handleViewUser(user.id)}
-//           onEdit={() => handleEditUser(user.id, `${user.first_name} ${user.last_name}`)}
-//           onDelete={() => handleDeleteUser(user.id, `${user.first_name} ${user.last_name}`)}
-//         />
-//       </div>
-//       <div className="grid grid-cols-2 gap-3 text-xs">
-//         <div>
-//           <span className="text-[#9aa6b2]">Status:</span>
-//           <div className="mt-1">
-//             <StatusBadge variant={getStatusVariant(user.status)}>{user.status}</StatusBadge>
-//           </div>
-//         </div>
-//         <div>
-//           <span className="text-[#9aa6b2]">Auth Provider:</span>
-//           <p className="text-[#0f1724] font-normal mt-1">{user.auth_provider}</p>
-//         </div>
-//         <div>
-//           <span className="text-[#9aa6b2]">Joined:</span>
-//           <p className="text-[#6b7280] font-normal mt-1">{formatDate(user.created_at)}</p>
-//         </div>
-//       </div>
-//     </div>
-//   );
-
-//   return (
-//     <Layout
-//       currentPage="Users"
-//       pageHeader={{
-//         title: 'User List',
-//         description: 'View and manage all users in your QAssure platform from a single place.',
-//       }}
-//     >
-//       {/* Table Container */}
-//       <div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-lg shadow-[0px_4px_24px_0px_rgba(0,0,0,0.02)] overflow-hidden">
-//         {/* Table Header with Filters */}
-//         <div className="border-b border-[rgba(0,0,0,0.08)] px-4 md:px-5 py-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
-//           {/* Filters */}
-//           <div className="flex flex-wrap items-center gap-3">
-//             {/* Status Filter */}
-//             <FilterDropdown
-//               label="Status"
-//               options={[
-//                 { value: 'active', label: 'Active' },
-//                 { value: 'pending_verification', label: 'Pending Verification' },
-//                 { value: 'inactive', label: 'Inactive' },
-//                 { value: 'suspended', label: 'Suspended' },
-//                 { value: 'deleted', label: 'Deleted' },
-//               ]}
-//               value={statusFilter}
-//               onChange={(value) => {
-//                 setStatusFilter(value as string | null);
-//                 setCurrentPage(1); // Reset to first page when filter changes
-//               }}
-//               placeholder="All"
-//             />
-
-//             {/* Sort Filter */}
-//             <FilterDropdown
-//               label="Sort by"
-//               options={[
-//                 { value: ['first_name', 'asc'], label: 'First Name (A-Z)' },
-//                 { value: ['first_name', 'desc'], label: 'First Name (Z-A)' },
-//                 { value: ['last_name', 'asc'], label: 'Last Name (A-Z)' },
-//                 { value: ['last_name', 'desc'], label: 'Last Name (Z-A)' },
-//                 { value: ['email', 'asc'], label: 'Email (A-Z)' },
-//                 { value: ['email', 'desc'], label: 'Email (Z-A)' },
-//                 { value: ['created_at', 'asc'], label: 'Created (Oldest)' },
-//                 { value: ['created_at', 'desc'], label: 'Created (Newest)' },
-//                 { value: ['updated_at', 'asc'], label: 'Updated (Oldest)' },
-//                 { value: ['updated_at', 'desc'], label: 'Updated (Newest)' },
-//               ]}
-//               value={orderBy}
-//               onChange={(value) => {
-//                 setOrderBy(value as string[] | null);
-//                 setCurrentPage(1); // Reset to first page when sort changes
-//               }}
-//               placeholder="Default"
-//               showIcon
-//               icon={<ArrowUpDown className="w-3.5 h-3.5 text-[#475569]" />}
-//             />
-//           </div>
-
-//           {/* Actions */}
-//           <div className="flex items-center gap-2">
-//             {/* Export Button */}
-//             <button
-//               type="button"
-//               className="flex items-center gap-1.5 px-3 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-xs text-[#0f1724] hover:bg-gray-50 transition-colors cursor-pointer"
-//             >
-//               <Download className="w-3.5 h-3.5" />
-//               <span>Export</span>
-//             </button>
-
-//             {/* New User Button */}
-//             <PrimaryButton
-//               size="default"
-//               className="flex items-center gap-2"
-//               onClick={() => setIsModalOpen(true)}
-//             >
-//               <Plus className="w-3.5 h-3.5" />
-//               <span className="text-xs">New User</span>
-//             </PrimaryButton>
-//           </div>
-//         </div>
-
-//         {/* Data Table */}
-//         <DataTable
-//           data={users}
-//           columns={columns}
-//           keyExtractor={(user) => user.id}
-//           mobileCardRenderer={mobileCardRenderer}
-//           emptyMessage="No users found"
-//           isLoading={isLoading}
-//           error={error}
-//         />
-
-//         {/* Table Footer with Pagination */}
-//         {pagination.total > 0 && (
-//           <Pagination
-//             currentPage={currentPage}
-//             totalPages={pagination.totalPages}
-//             totalItems={pagination.total}
-//             limit={limit}
-//             onPageChange={(page: number) => {
-//               setCurrentPage(page);
-//             }}
-//             onLimitChange={(newLimit: number) => {
-//               setLimit(newLimit);
-//               setCurrentPage(1); // Reset to first page when limit changes
-//             }}
-//           />
-//         )}
-//       </div>
-
-//       {/* New User Modal */}
-//       <NewUserModal
-//         isOpen={isModalOpen}
-//         onClose={() => setIsModalOpen(false)}
-//         onSubmit={handleCreateUser}
-//         isLoading={isCreating}
-//       />
-
-//       {/* View User Modal */}
-//       <ViewUserModal
-//         isOpen={viewModalOpen}
-//         onClose={() => {
-//           setViewModalOpen(false);
-//           setSelectedUserId(null);
-//         }}
-//         userId={selectedUserId}
-//         onLoadUser={loadUser}
-//       />
-
-//       {/* Edit User Modal */}
-//       <EditUserModal
-//         isOpen={editModalOpen}
-//         onClose={() => {
-//           setEditModalOpen(false);
-//           setSelectedUserId(null);
-//           setSelectedUserName('');
-//         }}
-//         userId={selectedUserId}
-//         onLoadUser={loadUser}
-//         onSubmit={handleUpdateUser}
-//         isLoading={isUpdating}
-//       />
-
-//       {/* Delete Confirmation Modal */}
-//       <DeleteConfirmationModal
-//         isOpen={deleteModalOpen}
-//         onClose={() => {
-//           setDeleteModalOpen(false);
-//           setSelectedUserId(null);
-//           setSelectedUserName('');
-//         }}
-//         onConfirm={handleConfirmDelete}
-//         title="Delete User"
-//         message="Are you sure you want to delete this user"
-//         itemName={selectedUserName}
-//         isLoading={isDeleting}
-//       />
-//     </Layout>
-//   );
-// };
-
-// export default Users;
+export default Users;
diff --git a/src/pages/tenant/TenantProtectedRoute.tsx b/src/pages/tenant/TenantProtectedRoute.tsx
index b921075..7c2fcd2 100644
--- a/src/pages/tenant/TenantProtectedRoute.tsx
+++ b/src/pages/tenant/TenantProtectedRoute.tsx
@@ -8,7 +8,7 @@ interface TenantProtectedRouteProps {
 }
 
 const TenantProtectedRoute = ({ children }: TenantProtectedRouteProps): ReactElement => {
-  const { isAuthenticated, roles } = useAppSelector((state) => state.auth);
+  const { isAuthenticated, roles, tenantId } = useAppSelector((state) => state.auth);
   
   // Fetch and apply tenant theme
   useTenantTheme();
@@ -17,7 +17,7 @@ const TenantProtectedRoute = ({ children }: TenantProtectedRouteProps): ReactEle
     return <Navigate to="/tenant/login" replace />;
   }
 
-  // Check if user has super_admin role - if yes, redirect to super admin dashboard
+  // Check if user has super_admin role or is a platform user - if yes, redirect to super admin dashboard
   // Handle both array and JSON string formats
   let rolesArray: string[] = [];
   if (Array.isArray(roles)) {
@@ -30,9 +30,10 @@ const TenantProtectedRoute = ({ children }: TenantProtectedRouteProps): ReactEle
     }
   }
   const hasSuperAdminRole = rolesArray.includes('super_admin');
+  const isPlatformUser = hasSuperAdminRole || tenantId === '00000000-0000-0000-0000-000000000001';
   
-  if (hasSuperAdminRole) {
-    // If super_admin, redirect to super admin dashboard
+  if (isPlatformUser) {
+    // If platform user or super_admin, redirect to super admin dashboard
     return <Navigate to="/dashboard" replace />;
   }
 
diff --git a/src/routes/super-admin-routes.tsx b/src/routes/super-admin-routes.tsx
index 5fb9b2c..37495b6 100644
--- a/src/routes/super-admin-routes.tsx
+++ b/src/routes/super-admin-routes.tsx
@@ -20,6 +20,8 @@ const NotificationTemplateMaster = lazy(() => import("@/pages/superadmin/Notific
 const SmtpConfig = lazy(() => import("@/pages/superadmin/SmtpConfig"));
 const FailedEmails = lazy(() => import("@/pages/superadmin/FailedEmails"));
 const AIFallbackHistory = lazy(() => import("@/pages/superadmin/AIFallbackHistory"));
+const PlatformUsers = lazy(() => import("@/pages/superadmin/Users"));
+const PlatformRoles = lazy(() => import("@/pages/superadmin/Roles"));
 
 // Loading fallback component
 const RouteLoader = (): ReactElement => (
@@ -50,6 +52,14 @@ export const superAdminRoutes: RouteConfig[] = [
     path: "/dashboard",
     element: <LazyRoute component={Dashboard} />,
   },
+  {
+    path: "/platform-users",
+    element: <LazyRoute component={PlatformUsers} />,
+  },
+  {
+    path: "/platform-roles",
+    element: <LazyRoute component={PlatformRoles} />,
+  },
   {
     path: "/tenants",
     element: <LazyRoute component={Tenants} />,
diff --git a/src/services/role-service.ts b/src/services/role-service.ts
index 415ad4d..6fb4fe7 100644
--- a/src/services/role-service.ts
+++ b/src/services/role-service.ts
@@ -14,7 +14,8 @@ export const roleService = {
     page: number = 1,
     limit: number = 20,
     orderBy?: string[] | null,
-    search?: string | null
+    search?: string | null,
+    scope?: string | null
   ): Promise<RolesResponse> => {
     const params = new URLSearchParams();
     params.append('page', String(page));
@@ -22,6 +23,9 @@ export const roleService = {
     if (search) {
       params.append('search', search);
     }
+    if (scope) {
+      params.append('scope', scope);
+    }
     if (orderBy && Array.isArray(orderBy) && orderBy.length === 2) {
       params.append('orderBy[]', orderBy[0]);
       params.append('orderBy[]', orderBy[1]);
diff --git a/src/services/user-service.ts b/src/services/user-service.ts
index 9ade88c..dfe141b 100644
--- a/src/services/user-service.ts
+++ b/src/services/user-service.ts
@@ -16,7 +16,8 @@ const getAllUsers = async (
   orderBy?: string[] | null,
   tenantId?: string | null,
   search?: string | null,
-  roleId?: string | null
+  roleId?: string | null,
+  scope?: string | null
 ): Promise<UsersResponse> => {
   const params = new URLSearchParams();
   params.append('page', String(page));
@@ -33,6 +34,9 @@ const getAllUsers = async (
   if (roleId) {
     params.append('role_id', roleId);
   }
+  if (scope) {
+    params.append('scope', scope);
+  }
   if (orderBy && Array.isArray(orderBy) && orderBy.length === 2) {
     // Send array as orderBy[]=field&orderBy[]=direction
     params.append('orderBy[]', orderBy[0]);
@@ -49,8 +53,9 @@ export const userService = {
     status?: string | null,
     orderBy?: string[] | null,
     search?: string | null,
-    roleId?: string | null
-  ) => getAllUsers(page, limit, status, orderBy, null, search, roleId),
+    roleId?: string | null,
+    scope?: string | null
+  ) => getAllUsers(page, limit, status, orderBy, null, search, roleId, scope),
   
   create: async (data: CreateUserRequest): Promise<CreateUserResponse> => {
     const response = await apiClient.post<CreateUserResponse>('/users', data);
diff --git a/src/types/user.ts b/src/types/user.ts
index 530a6eb..f30d78b 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -77,8 +77,8 @@ export interface CreateUserRequest {
   role_id?: string;
   role_ids?: string[];
   role_module_combinations?: RoleModuleCombination[];
-  department_id?: string;
-  designation_id?: string;
+  department_id?: string | null;
+  designation_id?: string | null;
   module_ids?: string[];
   category?: 'tenant_user' | 'supplier_user';
   supplier_id?: string | null;
@@ -105,8 +105,8 @@ export interface UpdateUserRequest {
   role_id?: string;
   role_ids?: string[];
   role_module_combinations?: RoleModuleCombination[];
-  department_id?: string;
-  designation_id?: string;
+  department_id?: string | null;
+  designation_id?: string | null;
   module_ids?: string[];
   category?: 'tenant_user' | 'supplier_user';
   supplier_id?: string | null;