src/components/Employee/ManageEmployee.jsx

@@ -23,8 +23,10 @@ const ManageEmployee = () => {
     employee,
     error,
     loading: empLoading,
-  } = useEmployeeProfile(employeeId);
-  dispatch(changeMaster("Job Role"));
+  } = useEmployeeProfile( employeeId );
+  
+  dispatch( changeMaster( "Job Role" ) );
+  
   const [disabledEmail, setDisabledEmail] = useState(false);
   const { data: job_role, loading } = useMaster();
   const [isloading, setLoading] = useState(false);
@@ -39,7 +41,7 @@ const ManageEmployee = () => {
     MiddleName: z.string().optional(),
     LastName: z.string().min(1, { message: "Last Name is required" }),
     Email: z
-      .string()
+      .string().max(80,"Email cannot exceed 80 characters")
       .optional()
       .refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
         message: "Invalid email format",
@@ -59,7 +61,7 @@ const ManageEmployee = () => {
     CurrentAddress: z
       .string()
       .min(1, { message: "Current Address is required" })
-      .max(500, { message: "Address cannot exceed 250 characters" }),
+      .max(500, { message: "Address cannot exceed 500 characters" }),
     BirthDate: z
       .string()
       .min(1, { message: "Birth Date is required" })
@@ -111,7 +113,7 @@ const ManageEmployee = () => {
     PermanentAddress: z
       .string()
       .min(1, { message: "Permanent Address is required" })
-      .max(500, { message: "Address cannot exceed 250 characters" }),
+      .max(500, { message: "Address cannot exceed 500 characters" }),
     PhoneNumber: z
       .string()
       .min(1, { message: "Phone Number is required" })
@@ -150,7 +152,8 @@ const ManageEmployee = () => {
     mode: "onChange",
   });
 
-  const AadharNumberValue = watch("AadharNumber") || "";
+  const AadharNumberValue = watch( "AadharNumber" ) || "";
+  
 
   const onSubmit = (data) => {
     setLoading(true);
@@ -181,8 +184,11 @@ const ManageEmployee = () => {
       .then((response) => {
         showToast("Employee details updated successfully.", "success");
         clearCacheKey("employeeListByProject");
-        clearCacheKey("allEmployeeList");
-        setLoading(false);
+        clearCacheKey( "allEmployeeList" );
+        clearCacheKey("employeeProfile")
+
+        setLoading( false );
+        reset()
         navigation("/employees");
       })
       .catch((error) => {
@@ -251,7 +257,7 @@ const ManageEmployee = () => {
               </span>
             </div>
             <div className="card-body">
-              {!currentEmployee && empLoading && (
+              {(!currentEmployee && empLoading) && (
                 <p>Loading Employee Data...</p>
               )}
 
@@ -324,7 +330,7 @@ const ManageEmployee = () => {
                       {...register("Email")}
                       className="form-control form-control-sm"
                       placeholder="example@domain.com"
-                      aria-label=""
+                      maxLength={80}
                       aria-describedby="Email"
                       disabled={!!currentEmployee?.email}
                     />
@@ -438,15 +444,16 @@ const ManageEmployee = () => {
                       placeholder="Current Address"
                       aria-label="Current Address"
                       aria-describedby="basic-icon-default-message2"
-                      {...register("CurrentAddress")}
+                      {...register( "CurrentAddress" )}
+                      maxLength={500}
                       onChange={(e) => {
                         setCurrentAddressLength(e.target.value.length);
                         // let react-hook-form still handle it
                         register("CurrentAddress").onChange(e);
                       }}
                     ></textarea>
-                    <div className="text-end small">
-                      {500 - currentAddressLength} characters left
+                    <div className="text-end muted">
+                     <small> {500 - currentAddressLength} characters left</small>
                     </div>
                     {errors.CurrentAddress && (
                       <div
@@ -468,14 +475,15 @@ const ManageEmployee = () => {
                       placeholder="Permanent Address"
                       aria-label="Permanent Address"
                       aria-describedby="basic-icon-default-message2"
-                      {...register("PermanentAddress")}
+                      {...register( "PermanentAddress" )}
+                      maxLength={500}
                       onChange={(e) => {
                         setPermanentAddressLength(e.target.value.length);
                         register("PermanentAddress").onChange(e);
                       }}
                     ></textarea>
-                    <div className="text-end small">
-                      {500 - permanentAddressLength} characters left
+                    <div className="text-end muted">
+                      <small>{500 - permanentAddressLength} characters left</small>
                     </div>
                     {errors.PermanentAddress && (
                       <div

src/components/Employee/ManageRole.jsx

@@ -30,7 +30,7 @@ const ManageRole = ({ employeeId, onClosed }) => {
   const buildDefaultRoles = () => {
     const defaults = {};
     data.forEach((role) => {
-      const isRoleEnabled = employeeRoles?.data?.some(
+      const isRoleEnabled = employeeRoles?.some(
         (empRole) => empRole.roleId === role.id
       );
       defaults[role.id] = isRoleEnabled;

src/hooks/useEmployees.js

@@ -97,8 +97,8 @@ export const useEmployeeRoles = (employeeId)=>{
     try {
       RolesRepository.getEmployeeRoles(employeeid)
         .then((response) => {
-          setEmployeeRoles(response);
-          cacheData("employeelist", response);
+          setEmployeeRoles(response.data);
+          cacheData("employeelist", response.data);
         })
         .catch((error) => {
           setError("Failed to fetch data.");

src/pages/employee/EmployeeList.jsx

@@ -458,30 +458,30 @@ const EmployeeList = () => {
                                     onClick={() =>
                                       navigate(`/employee/${item.id}`)
                                     }
-                                    className="dropdown-item"
+                                    className="dropdown-item py-1"
                                   >
-                                    View
+                                    <i className="bx bx-detail bx-sm"></i>  View
                                   </button>
                                   <Link
                                     to={`/employee/manage/${item.id}`}
-                                    className="dropdown-item"
+                                    className="dropdown-item py-1"
                                   >
-                                    Edit
+                                  <i class='bx bx-edit bx-sm'></i>  Edit
                                   </Link>
                                   <button
-                                    className="dropdown-item"
+                                    className="dropdown-item py-1"
                                     onClick={handleShow}
                                   >
-                                    Suspend
+                                  <i class='bx bx-task-x bx-sm'></i>  Suspend
                                   </button>
                                   <button
-                                    className="dropdown-item"
+                                    className="dropdown-item py-1"
                                     type="button"
                                     data-bs-toggle="modal"
                                     data-bs-target="#managerole-modal"
                                     onClick={() => handleConfigData(item.id)}
                                   >
-                                    Manage Role
+                                  <i class='bx bx-cog bx-sm'></i>  Manage Role
                                   </button>
                                 </div>
                               </div>