diff --git a/src/components/Employee/ManageRole.jsx b/src/components/Employee/ManageRole.jsx
index 40970076..94a5cf87 100644
--- a/src/components/Employee/ManageRole.jsx
+++ b/src/components/Employee/ManageRole.jsx
@@ -1,162 +1,172 @@
-import React,{useEffect, useState} from 'react'
-import useMaster from '../../hooks/masterHook/useMaster'
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { RolesRepository } from '../../repositories/MastersRepository';
-import { useEmployeeRoles } from '../../hooks/useEmployees';
-import {useDispatch} from 'react-redux';
-import {changeMaster} from '../../slices/localVariablesSlice';
-import showToast from '../../services/toastService';
-
+import React, { useEffect, useState } from "react";
+import useMaster from "../../hooks/masterHook/useMaster";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { RolesRepository } from "../../repositories/MastersRepository";
+import { useEmployeeRoles } from "../../hooks/useEmployees";
+import { useDispatch } from "react-redux";
+import { changeMaster } from "../../slices/localVariablesSlice";
+import showToast from "../../services/toastService";
 
 const formSchema = z.object({
-  selectedRole: z.record(z.boolean()).refine((data) => {
-    return Object.values(data).some(value => value === true); 
-  }, {
-    message: "At least one checkbox must be selected.",
-  }),
+  selectedRole: z.record(z.boolean()).refine(
+    (data) => {
+      return Object.values(data).some((value) => value === true);
+    },
+    {
+      message: "At least one checkbox must be selected.",
+    }
+  ),
 });
 
+const ManageRole = ({ employeeId, onClosed }) => {
+  const disptach = useDispatch();
+  disptach(changeMaster("Application Role"));
+  const [isLoading, setIsLoading] = useState(false);
+  const { employeeRoles, loading } = useEmployeeRoles(employeeId);
+  const { data, loading: roleLoading } = useMaster();
 
-const ManageRole = ({employeeId,onClosed}) => {
- 
-    const disptach = useDispatch()
-    disptach(changeMaster("Role"))
-    const [isLoading, setIsLoading] = useState(false);
-    const { employeeRoles,loading } = useEmployeeRoles(employeeId);
-    const {data,loading:roleLoading} = useMaster();
-  
-    const buildDefaultRoles = () => {
-      const defaults = {};
-      data.forEach((role) => {
-        const isRoleEnabled = employeeRoles?.data?.some((empRole) => empRole.roleId === role.id);
-        defaults[role.id] = isRoleEnabled;
-      });
-  
-      return defaults;
-    };
-  
-    const [initialRoles, setInitialRoles] = useState({});
-  
-    useEffect(() => {
-      if (employeeRoles && data) {
-        const updatedRoles = buildDefaultRoles();
-        setInitialRoles(updatedRoles); 
-      }
-    }, [employeeRoles, data]);
-  
-    const { register, handleSubmit, formState: { errors }, reset } = useForm({
-      resolver: zodResolver(formSchema),
-      defaultValues: {
-        selectedRole: initialRoles, 
-      },
+  const buildDefaultRoles = () => {
+    const defaults = {};
+    data.forEach((role) => {
+      const isRoleEnabled = employeeRoles?.data?.some(
+        (empRole) => empRole.roleId === role.id
+      );
+      defaults[role.id] = isRoleEnabled;
     });
-  
-    
-  useEffect( () =>
-  {
-      if (Object.keys(initialRoles).length > 0) {
-        reset({
-          selectedRole: initialRoles, 
+
+    return defaults;
+  };
+
+  const [initialRoles, setInitialRoles] = useState({});
+
+  useEffect(() => {
+    if (employeeRoles && data) {
+      const updatedRoles = buildDefaultRoles();
+      setInitialRoles(updatedRoles);
+    }
+  }, [employeeRoles, data]);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      selectedRole: initialRoles,
+    },
+  });
+
+  useEffect(() => {
+    if (Object.keys(initialRoles).length > 0) {
+      reset({
+        selectedRole: initialRoles,
+      });
+    }
+  }, [initialRoles, reset]);
+
+  const onSubmit = (formdata) => {
+    setIsLoading(true);
+    const result = [];
+    for (const [roleId, isEnabled] of Object.entries(formdata.selectedRole)) {
+      if (isEnabled) {
+        result.push({
+          employeeId: employeeId,
+          isEnabled: true,
+          roleId: roleId,
         });
       }
-    }, [initialRoles, reset]);
-  
-    const onSubmit = (formdata) => {
-        setIsLoading(true)
-      const result = [];
-      for (const [roleId, isEnabled] of Object.entries(formdata.selectedRole)) {
-        if (isEnabled) {
-          result.push({
-            employeeId: employeeId,
-            isEnabled: true,
-            roleId: roleId,
-          });
-        }
-      }
-      RolesRepository.createEmployeeRoles( result ).then( ( resp ) =>
-      {   
-        showToast( "Role assigned successfully", "success" )
-        setIsLoading(false)
-        onClosed()
-      }).catch((err)=>{
-        console.log( err )
-        setIsLoading(false)
-
-        showToast(err.message,"error")
+    }
+    RolesRepository.createEmployeeRoles(result)
+      .then((resp) => {
+        showToast("Role assigned successfully", "success");
+        setIsLoading(false);
+        onClosed();
       })
-      setIsLoading(false)
+      .catch((err) => {
+        console.log(err);
+        setIsLoading(false);
+
+        showToast(err.message, "error");
+      });
+    setIsLoading(false);
   };
-  
+  console.log(data)
+
   return (
-
-    <div className={`modal fade `} id="managerole-modal" tabIndex="-1" aria-hidden="true" >
-    <div className="modal-dialog  modal-simple modal-md d-flex align-items-center justify-content-center" >
-    <div className="modal-content " >
-      <div className="modal-body"  >
-        <button
-          type="button"
-          className="btn-close"
-          data-bs-dismiss="modal"
-          aria-label="Close"
-          
-        ></button>    
-       <form onSubmit={handleSubmit(onSubmit)} >
-                <div className='text-start my-0'>
-                <p className='lead'>Select Roles</p>
-       </div>
-      
-
-              <div className='d-flex flex-wrap justify-content-between align-items-center pb-5 ' style={{maxHeight: "70vh", overflowY: "scroll"}} >
-                
-                {(loading || roleLoading)  && <p>Loading...</p>}
-        {data && data.map((item) => (
-        
-            
-            <div className="col-md-6 col-lg-4 mb-4" key={item.id}>
-              <div className="form-check ms-2 text-start">
-                <input
-                  className="form-check-input"
-                  type="checkbox"
-                  id={item.id}
-                  {...register(`selectedRole.${item.id}`, { 
-                    value: initialRoles[item.id] || false 
-                  })}
-              
-                />
-                <label className="form-check-label text-bold" htmlFor={item.id}><small>{item.role || "--"}</small></label>
+    <div
+      className={`modal fade `}
+      id="managerole-modal"
+      tabIndex="-1"
+      aria-hidden="true"
+    >
+      <div className="modal-dialog  modal-simple modal-md d-flex align-items-center justify-content-center">
+        <div className="modal-content ">
+          <div className="modal-body">
+            <button
+              type="button"
+              className="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <div className="text-start my-0">
+                <p className="lead">Select Roles</p>
               </div>
-            </div>
-            
-          
-        ))}
 
-    </div>
-        {errors.selected && <div className="text-center">{errors.selected.message}</div>}
-         
-        
-        <div className="col-12 text-center">
-        <button type="submit" className="btn btn-primary me-3">           
-         { isLoading ? "Please Wait":"Submit"}       
-        </button>
-         <button
-          type="reset"
-          className="btn btn-label-secondary"
-          data-bs-dismiss="modal"
-          aria-label="Close"
-         >
-          Cancel
-        </button>
-      </div>
-      </form>    
+              <div
+                className="d-flex flex-wrap justify-content-between align-items-center pb-5 "
+                style={{ maxHeight: "70vh", overflowY: "scroll" }}
+              >
+                {(loading || roleLoading) && <p>Loading...</p>}
+                {data &&
+                  data.map((item) => (
+                    <div className="col-md-6 col-lg-4 mb-4" key={item.id}>
+                      <div className="form-check ms-2 text-start">
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          id={item.id}
+                          {...register(`selectedRole.${item.id}`, {
+                            value: initialRoles[item.id] || false,
+                          })}
+                        />
+                        <label
+                          className="form-check-label text-bold"
+                          htmlFor={item.id}
+                        >
+                          <small>{item.role || "--"}</small>
+                        </label>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+              {errors.selected && (
+                <div className="text-center">{errors.selected.message}</div>
+              )}
+
+              <div className="col-12 text-center">
+                <button type="submit" className="btn btn-sm btn-primary me-3">
+                  {isLoading ? "Please Wait" : "Submit"}
+                </button>
+                <button
+                  type="reset"
+                  className="btn btn-sm btn-label-secondary"
+                  data-bs-dismiss="modal"
+                  aria-label="Close"
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-  </div>
-  )
-}
+  );
+};
 
 export default ManageRole;
-
-