chore: add role column to the table users

ui/components/users/forms/edit-form.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Select, SelectItem } from "@nextui-org/react";
+import { ShieldIcon, UserIcon } from "lucide-react";
 import { Dispatch, SetStateAction } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
 
-import { updateUser } from "@/actions/users/users";
+import { updateUser, updateUserRole } from "@/actions/users/users";
 import { SaveIcon } from "@/components/icons";
 import { useToast } from "@/components/ui";
 import { CustomButton, CustomInput } from "@/components/ui/custom";
@@ -17,12 +19,16 @@ export const EditForm = ({
   userName,
   userEmail,
   userCompanyName,
+  roles = [],
+  currentRole = "",
   setIsOpen,
 }: {
   userId: string;
   userName?: string;
   userEmail?: string;
   userCompanyName?: string;
+  roles: Array<{ id: string; name: string }>;
+  currentRole?: string;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }) => {
   const formSchema = editUserFormSchema();
@@ -34,6 +40,7 @@ export const EditForm = ({
       name: userName,
       email: userEmail,
       company_name: userCompanyName,
+      role: roles.find((role) => role.name === currentRole)?.id || "",
     },
   });
 
@@ -44,7 +51,7 @@ export const EditForm = ({
   const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
     const formData = new FormData();
 
-    // Check if the value is not undefined before appending to FormData
+    // Update basic user data
     if (values.name !== undefined) {
       formData.append("name", values.name);
     }
@@ -58,6 +65,26 @@ export const EditForm = ({
     // Always include userId
     formData.append("userId", userId);
 
+    // Handle role updates separately
+    if (values.role !== roles.find((role) => role.name === currentRole)?.id) {
+      const roleFormData = new FormData();
+      roleFormData.append("userId", userId);
+      roleFormData.append("roleId", values.role || "");
+
+      const roleUpdateResponse = await updateUserRole(roleFormData);
+
+      if (roleUpdateResponse?.errors && roleUpdateResponse.errors.length > 0) {
+        const error = roleUpdateResponse.errors[0];
+        toast({
+          variant: "destructive",
+          title: "Role Update Failed",
+          description: `${error.detail}`,
+        });
+        return;
+      }
+    }
+
+    // Update other user attributes
     const data = await updateUser(formData);
 
     if (data?.errors && data.errors.length > 0) {
@@ -84,22 +111,49 @@ export const EditForm = ({
         onSubmit={form.handleSubmit(onSubmitClient)}
         className="flex flex-col space-y-4"
       >
-        <div className="text-md">
-          Current name: <span className="font-bold">{userName}</span>
+        <div className="flex flex-row justify-center space-x-4 rounded-lg bg-gray-50 p-3">
+          <div className="flex items-center text-small text-gray-600">
+            <UserIcon className="mr-2 h-4 w-4" />
+            <span className="text-gray-500">Name:</span>
+            <span className="ml-2 font-semibold text-gray-900">{userName}</span>
+          </div>
+          <div className="flex items-center text-small text-gray-600">
+            <ShieldIcon className="mr-2 h-4 w-4" />
+            <span className="text-gray-500">Role:</span>
+            <span className="ml-2 font-semibold text-gray-900">
+              {currentRole}
+            </span>
+          </div>
         </div>
-        <div>
-          <CustomInput
-            control={form.control}
-            name="name"
-            type="text"
-            label="Name"
-            labelPlacement="outside"
-            placeholder={userName}
-            variant="bordered"
-            isRequired={false}
-            isInvalid={!!form.formState.errors.name}
-          />
+        <div className="flex flex-row gap-4">
+          <div className="w-1/2">
+            <CustomInput
+              control={form.control}
+              name="name"
+              type="text"
+              label="Name"
+              labelPlacement="outside"
+              placeholder={userName}
+              variant="bordered"
+              isRequired={false}
+              isInvalid={!!form.formState.errors.name}
+            />
+          </div>
+          <div className="w-1/2">
+            <CustomInput
+              control={form.control}
+              name="company_name"
+              type="text"
+              label="Company Name"
+              labelPlacement="outside"
+              placeholder={userCompanyName}
+              variant="bordered"
+              isRequired={false}
+              isInvalid={!!form.formState.errors.company_name}
+            />
+          </div>
         </div>
+
         <div>
           <CustomInput
             control={form.control}
@@ -113,18 +167,36 @@ export const EditForm = ({
             isInvalid={!!form.formState.errors.email}
           />
         </div>
+
         <div>
-          <CustomInput
+          <Controller
+            name="role"
             control={form.control}
-            name="company_name"
-            type="text"
-            label="Company Name"
-            labelPlacement="outside"
-            placeholder={userCompanyName}
-            variant="bordered"
-            isRequired={false}
-            isInvalid={!!form.formState.errors.company_name}
+            render={({ field }) => (
+              <Select
+                {...field}
+                label="Role"
+                labelPlacement="outside"
+                placeholder="Select a role"
+                variant="bordered"
+                selectedKeys={[field.value || ""]}
+                onSelectionChange={(selected) => {
+                  const selectedKey = Array.from(selected).pop();
+                  field.onChange(selectedKey || "");
+                }}
+              >
+                {roles.map((role: { id: string; name: string }) => (
+                  <SelectItem key={role.id}>{role.name}</SelectItem>
+                ))}
+              </Select>
+            )}
           />
+
+          {form.formState.errors.role && (
+            <p className="mt-2 text-sm text-red-600">
+              {form.formState.errors.role.message}
+            </p>
+          )}
         </div>
         <input type="hidden" name="userId" value={userId} />
 

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>