chore: add role column to the table users

ui/components/users/table/column-users.tsx

@@ -33,6 +33,14 @@ export const ColumnsUser: ColumnDef<UserProps>[] = [
       return <p className="font-semibold">{email}</p>;
     },
   },
+  {
+    accessorKey: "role",
+    header: () => <div className="text-left">Role</div>,
+    cell: ({ row }) => {
+      const { role } = getUserData(row);
+      return <p className="font-semibold">{role?.name || "No Role"}</p>;
+    },
+  },
   {
     accessorKey: "company_name",
     header: ({ column }) => (
@@ -47,7 +55,6 @@ export const ColumnsUser: ColumnDef<UserProps>[] = [
       return <p className="font-semibold">{company_name}</p>;
     },
   },
-
   {
     accessorKey: "date_joined",
     header: ({ column }) => (
@@ -68,7 +75,8 @@ export const ColumnsUser: ColumnDef<UserProps>[] = [
     header: () => <div className="text-right">Actions</div>,
     id: "actions",
     cell: ({ row }) => {
-      return <DataTableRowActions row={row} />;
+      const roles = row.original.roles;
+      return <DataTableRowActions row={row} roles={roles} />;
     },
   },
 ];

ui/components/users/table/data-table-row-actions.tsx

@@ -21,34 +21,39 @@ import { CustomAlertModal } from "@/components/ui/custom";
 
 import { DeleteForm, EditForm } from "../forms";
 
-interface DataTableRowActionsProps<ProviderProps> {
-  row: Row<ProviderProps>;
+interface DataTableRowActionsProps<UserProps> {
+  row: Row<UserProps>;
+  roles?: { id: string; name: string }[];
 }
 const iconClasses =
   "text-2xl text-default-500 pointer-events-none flex-shrink-0";
 
-export function DataTableRowActions<ProviderProps>({
+export function DataTableRowActions<UserProps>({
   row,
-}: DataTableRowActionsProps<ProviderProps>) {
+  roles,
+}: DataTableRowActionsProps<UserProps>) {
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const userId = (row.original as { id: string }).id;
   const userName = (row.original as any).attributes?.name;
   const userEmail = (row.original as any).attributes?.email;
   const userCompanyName = (row.original as any).attributes?.company_name;
+  const userRole = (row.original as any).attributes?.role?.name;
+
   return (
     <>
       <CustomAlertModal
         isOpen={isEditOpen}
         onOpenChange={setIsEditOpen}
-        title="Edit user"
-        description={"Edit the user details"}
+        title="Edit user details"
       >
         <EditForm
           userId={userId}
           userName={userName}
           userEmail={userEmail}
           userCompanyName={userCompanyName}
+          currentRole={userRole}
+          roles={roles || []}
           setIsOpen={setIsEditOpen}
         />
       </CustomAlertModal>