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} />