Added user roles functionality

src/components/Form/Select/Select.tsx

@@ -10,8 +10,6 @@ export const Select = ({ control, name, label, options }: SelectProps) => {
   } = useController({
     name,
     control,
-    rules: { required: true },
-    defaultValue: '',
   });
 
   return (
@@ -25,14 +23,14 @@ export const Select = ({ control, name, label, options }: SelectProps) => {
         id={name}
         onChange={field.onChange} // send value to hook form
         onBlur={field.onBlur} // notify when input is touched/blur
-        value={field.value ? field.value.toString() : ''} // input value
+        value={field.value ? field.value : ''} // input value
         name={name} // send down the input name
         ref={field.ref} // send input ref, so we can focus on input when error appear
         className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
       >
-        {options?.map((value) => (
-          <option key={value} value={value}>
-            {value}
+        {options?.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.name}
           </option>
         ))}
       </select>

src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx

@@ -1,21 +1,21 @@
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { Modal, Banner } from 'src/components';
-import { Input } from 'src/components/Form';
-import { useUsers } from 'src/services/users';
-import { CurrentUser } from 'src/services/auth';
+import { Input, Select } from 'src/components/Form';
+import { User, UserRole, useUsers } from 'src/services/users';
 import { appAccessList } from './consts';
 import { UserModalProps } from './types';
 
 export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
   const { editUserById, userModalLoading } = useUsers();
 
-  const { control, reset, handleSubmit } = useForm<CurrentUser>({
+  const { control, reset, handleSubmit } = useForm<User>({
     defaultValues: {
       name: null,
       email: null,
       id: null,
-      preferredUsername: null,
+      role_id: null,
+      status: null,
     },
   });
 
@@ -70,11 +70,23 @@ export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
               </div>
 
               <div className="sm:col-span-6">
-                <Banner title="Editing user status, roles and app access coming soon." titleSm="Comming soon!" />
+                <Select
+                  control={control}
+                  name="role_id"
+                  label="Role"
+                  options={[
+                    { value: UserRole.Admin, name: 'Admin' },
+                    { value: UserRole.User, name: 'User' },
+                  ]}
+                />
+              </div>
+
+              <div className="sm:col-span-6">
+                <Banner title="Editing user status and app access coming soon." titleSm="Comming soon!" />
               </div>
 
               <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
-                {/* <Select control={control} name="status" label="Status" options={['Active', 'Inactive']} /> */}
+                {/* <Select control={control} name="status" label="Status" options={['Admin', 'Inactive']} /> */}
                 <label htmlFor="status" className="block text-sm font-medium text-gray-700">
                   Status
                 </label>
@@ -90,23 +102,6 @@ export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
                   </select>
                 </div>
               </div>
-
-              <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
-                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
-                  Role
-                </label>
-                <div className="mt-1">
-                  <select
-                    id="status"
-                    name="status"
-                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                  >
-                    <option>User</option>
-                    <option>Admin</option>
-                    <option>Super Admin</option>
-                  </select>
-                </div>
-              </div>
             </div>
           </div>
 

src/components/Header/components/CurrentUserModal/types.ts

@@ -1,7 +1,7 @@
-import { CurrentUser } from 'src/services/auth';
+import { User } from 'src/services/users';
 
 export type UserModalProps = {
   open: boolean;
   onClose: () => void;
-  user: CurrentUser;
+  user: User;
 };