Updated and Fix UserRole and User Forms

application/src/components/settings/user-management/form-fields/AddUserForm.tsx

@@ -4,9 +4,10 @@ import { Form } from "@/components/ui/form";
 import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
 import { UseFormReturn } from "react-hook-form";
-import UserProfilePictureField from "./UserProfilePictureField";
+import { UserProfilePictureField } from "./";
-import UserTextField from "./UserTextField";
+import { UserTextField } from "./";
-import UserToggleField from "./UserToggleField";
+import { UserToggleField } from "./";
+import { UserRoleField } from "./";
 import { DialogFooter } from "@/components/ui/dialog";
 
 interface AddUserFormProps {
@@ -44,11 +45,10 @@ const AddUserForm = ({ form, onSubmit, isSubmitting }: AddUserFormProps) => {
             placeholder="Enter username"
           />
           
-          <UserTextField
+          <UserRoleField
             control={form.control}
             name="role"
             label="Role"
-            placeholder="Enter role (e.g. admin, user)"
           />
           
           <UserTextField

application/src/components/settings/user-management/form-fields/UserRoleField.tsx

@@ -0,0 +1,47 @@
+
+import React from "react";
+import { Control } from "react-hook-form";
+import { FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { userRoles } from "../userForms";
+
+interface UserRoleFieldProps {
+  control: Control<any>;
+  name: string;
+  label: string;
+  disabled?: boolean;
+}
+
+const UserRoleField = ({ control, name, label, disabled = false }: UserRoleFieldProps) => {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <Select 
+              value={field.value} 
+              onValueChange={field.onChange}
+              disabled={disabled}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select role" />
+              </SelectTrigger>
+              <SelectContent>
+                {userRoles.map(role => (
+                  <SelectItem key={role.value} value={role.value}>
+                    {role.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </FormControl>
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export default UserRoleField;

application/src/components/settings/user-management/form-fields/index.ts

@@ -1,5 +1,5 @@
 
-export { default as UserProfilePictureField } from './UserProfilePictureField';
+export { default as UserTextField } from "./UserTextField";
-export { default as UserTextField } from './UserTextField';
+export { default as UserToggleField } from "./UserToggleField";
-export { default as UserToggleField } from './UserToggleField';
+export { default as UserProfilePictureField } from "./UserProfilePictureField";
-export { default as AddUserForm } from './AddUserForm';
+export { default as UserRoleField } from "./UserRoleField";

application/src/components/settings/user-management/userForms.ts

@@ -1,6 +1,12 @@
 
 import * as z from "zod";
 
+// Define the available roles
+export const userRoles = [
+  { label: "Admin", value: "admin" },
+  { label: "Super Admin", value: "superadmin" }
+];
+
 export const userFormSchema = z.object({
   full_name: z.string().min(2, {
     message: "Name must be at least 2 characters.",
@@ -12,7 +18,9 @@ export const userFormSchema = z.object({
     message: "Username must be at least 3 characters.",
   }),
   isActive: z.boolean().optional(),
-  role: z.string().optional(),
+  role: z.string().min(1, {
+    message: "Please select a role",
+  }),
   avatar: z.string().optional(),
 });