src/components/master/CreateActivity.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect,useCallback } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -7,7 +7,7 @@ import { MasterRespository } from "../../repositories/MastersRepository";
 import { clearApiCacheKey } from "../../slices/apiCacheSlice";
 import { getCachedData, cacheData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
-import { useCreateActivity } from "../../hooks/masterHook/useMaster";
+import {useCreateActivity} from "../../hooks/masterHook/useMaster";
 
 const schema = z.object({
   activityName: z.string().min(1, { message: "Activity Name is required" }),
@@ -24,10 +24,10 @@ const schema = z.object({
 });
 
 const CreateActivity = ({ onClose }) => {
-  const maxDescriptionLength = 255;
+const maxDescriptionLength = 255;
-  const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
+const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
 
-  const {
+const {
   register,
   handleSubmit,
   control,
@@ -37,25 +37,25 @@ const CreateActivity = ({ onClose }) => {
   getValues,
   reset,
   formState: { errors },
-  } = useForm({
+} = useForm({
   resolver: zodResolver(schema),
   defaultValues: {
     activityName: "",
     unitOfMeasurement: "",
     checkList: [],
   },
-  });
+});
 
-  const {
+const {
   fields: checkListItems,
   append,
   remove,
-  } = useFieldArray({
+} = useFieldArray({
   control,
   name: "checkList",
-  });
+});
 
-  const addChecklistItem = useCallback(() => {
+const addChecklistItem = useCallback(() => {
   const values = getValues("checkList");
   const lastIndex = checkListItems.length - 1;
 
@@ -72,19 +72,19 @@ const CreateActivity = ({ onClose }) => {
 
   clearErrors(`checkList.${lastIndex}.description`);
   append({ id: null, description: "", isMandatory: false });
-  }, [checkListItems, getValues, append, setError, clearErrors]);
+}, [checkListItems, getValues, append, setError, clearErrors]);
 
-  const removeChecklistItem = useCallback((index) => {
+const removeChecklistItem = useCallback((index) => {
   remove(index);
-  }, [remove]);
+}, [remove]);
 
-  const handleChecklistChange = useCallback((index, value) => {
+const handleChecklistChange = useCallback((index, value) => {
   setValue(`checkList.${index}`, value);
-  }, [setValue]);
+}, [setValue]);
 
-  const onSubmit = (formData) => {
+const onSubmit = (formData) => {
   createActivity(formData);
-  };
+};
   // const onSubmit = (data) => {
   //   setIsLoading(true);
 
@@ -104,15 +104,15 @@ const CreateActivity = ({ onClose }) => {
   //       setIsLoading(false);
   //     });
   // };
-  const handleClose = useCallback(() => {
+const handleClose = useCallback(() => {
   reset();
   onClose();
-  }, [reset, onClose]);
+}, [reset, onClose]);
 
-  useEffect(() => {
+useEffect(() => {
   const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
   tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
-  }, []);
+}, []);
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -123,7 +123,8 @@ const CreateActivity = ({ onClose }) => {
           <input
             type="text"
             {...register("activityName")}
-            className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""
+            className={`form-control form-control-sm ${
+              errors.activityName ? "is-invalid" : ""
             }`}
           />
           {errors.activityName && (
@@ -136,7 +137,8 @@ const CreateActivity = ({ onClose }) => {
           <input
             type="text"
             {...register("unitOfMeasurement")}
-            className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""
+            className={`form-control form-control-sm ${
+              errors.unitOfMeasurement ? "is-invalid" : ""
             }`}
           />
           {errors.unitOfMeasurement && (
@@ -145,7 +147,7 @@ const CreateActivity = ({ onClose }) => {
         </div>
 
         <div className="col-md-12 text-start mt-1">
-          <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
+          <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List" }</p>
           {checkListItems.length > 0 && (
           <table className="table mt-1  border-0">
             <thead className="py-0 my-0 table-border-top-0">
@@ -224,13 +226,12 @@ const CreateActivity = ({ onClose }) => {
             {isLoading ? "Please Wait" : "Submit"}
           </button>
           <button
-            type="button"   // ✅ change to button
+            type="reset"
             className="btn btn-sm btn-label-secondary"
             onClick={handleClose}
           >
             Cancel
           </button>
-
         </div>
       </div>
     </form>

src/components/master/CreateContactCategory.jsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect,useState } from 'react'
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { MasterRespository } from '../../repositories/MastersRepository';
 import { clearApiCacheKey } from '../../slices/apiCacheSlice';
-import { getCachedData, cacheData } from '../../slices/apiDataManager';
+import { getCachedData,cacheData } from '../../slices/apiDataManager';
 import showToast from '../../services/toastService';
-import { useCreateContactCategory } from '../../hooks/masterHook/useMaster';
+import {useCreateContactCategory} from '../../hooks/masterHook/useMaster';
 
 
 const schema = z.object({
@@ -15,29 +15,29 @@ const schema = z.object({
   .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
-const CreateContactCategory = ({ onClose }) => {
+const CreateContactCategory = ({onClose}) => {
 
-  const {
+const {
   register,
   handleSubmit,
   formState: { errors },
   reset,
-  } = useForm({
+} = useForm({
   resolver: zodResolver(schema),
   defaultValues: {
     name: "",
     description: "",
   },
-  });
+});
 
-  const [descriptionLength, setDescriptionLength] = useState(0);
+const [descriptionLength, setDescriptionLength] = useState(0);
-  const maxDescriptionLength = 255;
+const maxDescriptionLength = 255;
 
-  const { mutate: createContactCategory, isPending: isLoading } = useCreateContactCategory(() => onClose?.());
+const { mutate: createContactCategory, isPending: isLoading } = useCreateContactCategory(() => onClose?.());
 
-  const onSubmit = (payload) => {
+const onSubmit = (payload) => {
   createContactCategory(payload);
-  };
+};
   //  const onSubmit = (data) => {
   //     setIsLoading(true)    
   //     MasterRespository.createContactCategory(data).then((resp)=>{ 
@@ -54,14 +54,14 @@ const CreateContactCategory = ({ onClose }) => {
   //       setIsLoading(false)
   //     })
   //   };
-  const resetForm = () => {
+const resetForm = () => {
   reset({ name: "", description: "" });
   setDescriptionLength(0);
-  };
+};
 
-  useEffect(() => {
+useEffect(() => {
   return () => resetForm();
-  }, []);
+}, []);
  
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
@@ -94,19 +94,16 @@ const CreateContactCategory = ({ onClose }) => {
 
         <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3">           
-          {isLoading ? "Please Wait..." : "Submit"}
+         {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"   // ✅ not reset
+          type="reset"
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary "
-          onClick={() => {
+          data-bs-dismiss="modal"
-            resetForm();   // clear inputs
+          aria-label="Close"
-            onClose?.();   // close modal from parent
-          }}
         >
           Cancel
         </button>
-
       </div>
      
     </form>

src/components/master/CreateContactTag.jsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect,useState } from 'react'
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { MasterRespository } from '../../repositories/MastersRepository';
 import { clearApiCacheKey } from '../../slices/apiCacheSlice';
-import { getCachedData, cacheData } from '../../slices/apiDataManager';
+import { getCachedData,cacheData } from '../../slices/apiDataManager';
 import showToast from '../../services/toastService';
-import { useCreateContactTag } from '../../hooks/masterHook/useMaster';
+import {useCreateContactTag} from '../../hooks/masterHook/useMaster';
 
 
 const schema = z.object({
@@ -15,28 +15,28 @@ const schema = z.object({
   .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
-const CreateContactTag = ({ onClose }) => {
+const CreateContactTag = ({onClose}) => {
-  const {
+const {
   register,
   handleSubmit,
   formState: { errors },
   reset,
-  } = useForm({
+} = useForm({
   resolver: zodResolver(schema),
   defaultValues: {
     name: "",
     description: "",
   },
-  });
+});
 
-  const [descriptionLength, setDescriptionLength] = useState(0);
+const [descriptionLength, setDescriptionLength] = useState(0);
-  const maxDescriptionLength = 255;
+const maxDescriptionLength = 255;
 
-  const { mutate: createContactTag, isPending: isLoading } = useCreateContactTag(() => onClose?.());
+const { mutate: createContactTag, isPending: isLoading } = useCreateContactTag(() => onClose?.());
 
-  const onSubmit = (payload) => {
+const onSubmit = (payload) => {
   createContactTag(payload);
-  };
+};
   //  const onSubmit = (data) => {
   //     setIsLoading(true)    
   //     MasterRespository.createContactTag(data).then((resp)=>{ 
@@ -54,14 +54,14 @@ const CreateContactTag = ({ onClose }) => {
   //       setIsLoading(false)
   //     })
   //   };
-  const resetForm = () => {
+const resetForm = () => {
   reset({ name: "", description: "" });
   setDescriptionLength(0);
-  };
+};
 
-  useEffect(() => {
+useEffect(() => {
   return () => resetForm();
-  }, []);
+}, []);
   
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
@@ -94,19 +94,16 @@ const CreateContactTag = ({ onClose }) => {
 
         <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3">           
-          {isLoading ? "Please Wait..." : "Submit"}
+         {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"   // ✅ not reset
+          type="reset"
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary "
-          onClick={() => {
+          data-bs-dismiss="modal"
-            resetForm();   // clear inputs
+          aria-label="Close"
-            onClose?.();   // close modal from parent
-          }}
         >
           Cancel
         </button>
-
       </div>
      
     </form>

src/components/master/CreateJobRole.jsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect,useState } from 'react'
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { MasterRespository } from '../../repositories/MastersRepository';
 import { clearApiCacheKey } from '../../slices/apiCacheSlice';
-import { getCachedData, cacheData } from '../../slices/apiDataManager';
+import { getCachedData,cacheData } from '../../slices/apiDataManager';
 import showToast from '../../services/toastService';
-import { useCreateJobRole } from '../../hooks/masterHook/useMaster';
+import {useCreateJobRole} from '../../hooks/masterHook/useMaster';
 
 
 const schema = z.object({
@@ -15,7 +15,7 @@ const schema = z.object({
   .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
-const CreateJobRole = ({ onClose }) => {
+const CreateJobRole = ({onClose}) => {
 
   const maxDescriptionLength = 255;
   const [descriptionLength, setDescriptionLength] = useState(0);
@@ -39,9 +39,9 @@ const CreateJobRole = ({ onClose }) => {
     setDescriptionLength(0);
   };
 
-  const { mutate: createJobRole, isPending: isLoading } = useCreateJobRole(() => {
+  const { mutate: createJobRole, isPending:isLoading } = useCreateJobRole(() => {
     onClose?.();
-  });
+  } );
 
 
    // const onSubmit = (data) => {
@@ -120,19 +120,16 @@ const CreateJobRole = ({ onClose }) => {
 
         <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3">           
-          {isLoading ? "Please Wait..." : "Submit"}
+         {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"   // ✅ change from reset → button
+          type="reset"
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary "
-          onClick={() => {
+          data-bs-dismiss="modal"
-            resetForm();   // optional: clears form
+          aria-label="Close"
-            onClose?.();   // ✅ close modal via parent
-          }}
         >
           Cancel
         </button>
-
       </div>
      
     </form>

src/components/master/CreateRole.jsx

@@ -233,13 +233,13 @@ const CreateRole = ({ modalType, onClose }) => {
             {isLoading ? "Please Wait..." : "Submit"}
           </button>
           <button
-            type="button"
+            type="reset"
             className="btn btn-sm btn-label-secondary"
-            onClick={onClose}
+            data-bs-dismiss="modal"
+            aria-label="Close"
           >
             Cancel
           </button>
-
         </div>
       )}
     </form>

src/components/master/CreateWorkCategory.jsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect,useState } from 'react'
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { MasterRespository } from '../../repositories/MastersRepository';
 import { clearApiCacheKey } from '../../slices/apiCacheSlice';
-import { getCachedData, cacheData } from '../../slices/apiDataManager';
+import { getCachedData,cacheData } from '../../slices/apiDataManager';
 import showToast from '../../services/toastService';
-import { useCreateWorkCategory } from '../../hooks/masterHook/useMaster';
+import {useCreateWorkCategory} from '../../hooks/masterHook/useMaster';
 
 
 const schema = z.object({
@@ -15,30 +15,30 @@ const schema = z.object({
   .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
-const CreateWorkCategory = ({ onClose }) => {
+const CreateWorkCategory = ({onClose}) => {
 
  const {
   register,
   handleSubmit,
   formState: { errors },
   reset,
-  } = useForm({
+} = useForm({
   resolver: zodResolver(schema),
   defaultValues: {
     name: "",
     description: "",
   },
-  });
+});
 
-  const [descriptionLength, setDescriptionLength] = useState(0);
+const [descriptionLength, setDescriptionLength] = useState(0);
-  const maxDescriptionLength = 255;
+const maxDescriptionLength = 255;
 
-  const { mutate: createWorkCategory, isPending: isLoading } = useCreateWorkCategory(() => {
+const { mutate: createWorkCategory, isPending: isLoading } = useCreateWorkCategory(() => {
   resetForm();
   onClose?.();
-  });
+});
 
-  const onSubmit = (payload) => {
+const onSubmit = (payload) => {
  createWorkCategory(payload)
   };
   
@@ -63,23 +63,23 @@ const CreateWorkCategory = ({ onClose }) => {
      
     // };
 
-  const resetForm = () => {
+const resetForm = () => {
   reset({
     name: "",
     description: "",
   });
   setDescriptionLength(0);
-  };
+};
 
-  useEffect(() => {
+useEffect(() => {
   return () => resetForm(); 
-  }, []);
+}, []);
  
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-      {/* <div className="col-12 col-md-12">
+      <div className="col-12 col-md-12">
         <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Work Category</label>        
-      </div> */}
+      </div>
       
         <div className="col-12 col-md-12">
           <label className="form-label">Category Name</label>
@@ -110,15 +110,13 @@ const CreateWorkCategory = ({ onClose }) => {
 
         <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3">           
-          {isLoading ? "Please Wait..." : "Submit"}
+         {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"   // ✅ not reset
+          type="reset"
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary "
-          onClick={() => {
+          data-bs-dismiss="modal"
-            resetForm();   // clear inputs
+          aria-label="Close"
-            onClose?.();   // close modal from parent
-          }}
         >
           Cancel
         </button>

src/components/master/DeleteMaster.jsx

@@ -34,15 +34,13 @@ const DeleteMaster = ({ master, onClose }) => {
           )}
         </button>
         <button
-          type="button"   // ✅ not reset
+          type="reset"
           className="btn btn-label-secondary"
-          onClick={() => {
+          data-bs-dismiss="modal"
-            onClose?.(); // properly close modal
+          aria-label="Close"
-          }}
         >
           Cancel
         </button>
-
       </div>
     </div>
   );

src/components/master/EditActivity.jsx

@@ -241,7 +241,7 @@ useEffect(() => {
             {isLoading ? "Please Wait" : "Submit"}
           </button>
           <button
-            type="button"   // ✅ change to button
+            type="button"
             className="btn btn-sm btn-label-secondary"
             onClick={onClose}
           >

src/components/master/EditContactCategory.jsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect,useState } from 'react'
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { MasterRespository } from '../../repositories/MastersRepository';
 import { clearApiCacheKey } from '../../slices/apiCacheSlice';
-import { getCachedData, cacheData } from '../../slices/apiDataManager';
+import { getCachedData,cacheData } from '../../slices/apiDataManager';
 import showToast from '../../services/toastService';
-import { useUpdateContactCategory } from '../../hooks/masterHook/useMaster';
+import {useUpdateContactCategory} from '../../hooks/masterHook/useMaster';
 
 
 const schema = z.object({
@@ -15,33 +15,33 @@ const schema = z.object({
   .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
-const EditContactCategory = ({ data, onClose }) => {
+const EditContactCategory= ({data,onClose}) => {
-  const {
+const {
   register,
   handleSubmit,
   formState: { errors },
   reset,
-  } = useForm({
+} = useForm({
   resolver: zodResolver(schema),
   defaultValues: {
     name: data?.name || "",
     description: data?.description || "",
   },
-  });
+});
 
-  const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
+const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
-  const maxDescriptionLength = 255;
+const maxDescriptionLength = 255;
 
-  const { mutate: updateContactCategory, isPending: isLoading } = useUpdateContactCategory(() => onClose?.());
+const { mutate: updateContactCategory, isPending: isLoading } = useUpdateContactCategory(() => onClose?.());
 
-  const onSubmit = (formData) => {
+const onSubmit = (formData) => {
   const payload = {
     id: data?.id,
     name: formData.name,
     description: formData.description,
   };
 
-    updateContactCategory({ id: data?.id, payload });
+  updateContactCategory({id:data?.id,payload});
   };
     // const onSubmit = (formdata) => {
   //     setIsLoading(true)
@@ -73,14 +73,14 @@ const EditContactCategory = ({ data, onClose }) => {
      
   //   };
 
-  const resetForm = () => {
+const resetForm = () => {
   reset({ name: "", description: "" });
   setDescriptionLength(0);
-  };
+};
 
-  useEffect(() => {
+useEffect(() => {
   return () => resetForm();
-  }, []);
+}, []);
    
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
@@ -113,15 +113,13 @@ const EditContactCategory = ({ data, onClose }) => {
 
         <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3">           
-          {isLoading ? "Please Wait..." : "Submit"}
+         {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"   // ✅ not reset
+          type="button"
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary "
-          onClick={() => {
+          data-bs-dismiss="modal"
-            resetForm();   // clear inputs
+          aria-label="Close"
-            onClose?.();   // close modal from parent
-          }}
         >
           Cancel
         </button>

src/components/master/EditContactTag.jsx

@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react'
+import React,{useState,useEffect} from 'react'
-import { useForm } from 'react-hook-form';
+import {useForm} from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { MasterRespository } from '../../repositories/MastersRepository';
 import { clearApiCacheKey } from '../../slices/apiCacheSlice';
-import { getCachedData, cacheData } from '../../slices/apiDataManager';
+import { getCachedData,cacheData } from '../../slices/apiDataManager';
 import showToast from '../../services/toastService';
-import { useUpdateContactTag } from '../../hooks/masterHook/useMaster';
+import {useUpdateContactTag} from '../../hooks/masterHook/useMaster';
 
 
 const schema = z.object({
@@ -15,33 +15,33 @@ const schema = z.object({
   .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
-const EditContactTag = ({ data, onClose }) => {
+const EditContactTag= ({data,onClose}) => {
-  const {
+const {
   register,
   handleSubmit,
   formState: { errors },
   reset
-  } = useForm({
+} = useForm({
   resolver: zodResolver(schema),
   defaultValues: {
     name: data?.name || "",
     description: data?.description || "",
   },
-  });
+});
 
-  const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
+const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
-  const maxDescriptionLength = 255;
+const maxDescriptionLength = 255;
 
-  const { mutate: updateContactTag, isPending: isLoading } = useUpdateContactTag(() => onClose?.());
+const { mutate: updateContactTag, isPending: isLoading } = useUpdateContactTag(() => onClose?.());
 
-  const onSubmit = (formData) => {
+const onSubmit = (formData) => {
   const payload = {
     id: data?.id,
     name: formData.name,
     description: formData.description,
   };
   debugger
-    updateContactTag({ id: data?.id, payload });
+  updateContactTag({ id: data?.id, payload} );
   }
     // const onSubmit = (formdata) => {
   //     setIsLoading(true)
@@ -73,14 +73,14 @@ const EditContactTag = ({ data, onClose }) => {
      
   //   };
 
-  const resetForm = () => {
+const resetForm = () => {
   reset({ name: "", description: "" });
   setDescriptionLength(0);
-  };
+};
 
-  useEffect(() => {
+useEffect(() => {
   return () => resetForm();
-  }, []);
+}, []);
    
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
@@ -113,15 +113,13 @@ const EditContactTag = ({ data, onClose }) => {
 
         <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3">           
-          {isLoading ? "Please Wait..." : "Submit"}
+         {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"   // ✅ not reset
+          type="button"
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary "
-          onClick={() => {
+          data-bs-dismiss="modal"
-            resetForm();   // clear inputs
+          aria-label="Close"
-            onClose?.();   // close modal from parent
-          }}
         >
           Cancel
         </button>

src/components/master/EditJobRole.jsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect,useState } from 'react'
-import { useForm, Controller } from 'react-hook-form';
+import { useForm ,Controller} from 'react-hook-form';
 import { set, z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { MasterRespository } from '../../repositories/MastersRepository';
-import { cacheData, getCachedData } from '../../slices/apiDataManager';
+import { cacheData,getCachedData } from '../../slices/apiDataManager';
 import showToast from '../../services/toastService';
-import { useUpdateJobRole } from '../../hooks/masterHook/useMaster';
+import {useUpdateJobRole} from '../../hooks/masterHook/useMaster';
 
 
 
@@ -17,8 +17,8 @@ const schema = z.object({
 
 
 
-const EditJobRole = ({ data, onClose }) => {
+const EditJobRole = ({data,onClose}) => {
-  const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
+const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
   const maxDescriptionLength = 255;
 
   const {
@@ -35,10 +35,10 @@ const EditJobRole = ({ data, onClose }) => {
     },
   });
 
-  const { mutate: updateJobRole, isPendin: isLoading } = useUpdateJobRole(() => {
+  const { mutate: updateJobRole, isPendin:isLoading } = useUpdateJobRole(() => {
     onClose?.();
   });
-  // const onSubmit = (formdata) => {
+// const onSubmit = (formdata) => {
     //   setIsLoading(true)
     //   const result = {
     //     id:data?.id,
@@ -129,18 +129,18 @@ const EditJobRole = ({ data, onClose }) => {
 
         <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3">           
-          {isLoading ? "Please Wait..." : "Submit"}
+         {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
           type="button"
           className="btn btn-sm btn-label-secondary"
-          onClick={onClose}   // 👈 This will now close the popup
+          data-bs-dismiss="modal"
+          aria-label="Close"
         >
           Cancel
         </button>
       </div>
      
-
     </form>
  
     </>

src/components/master/EditRole.jsx

@@ -270,7 +270,7 @@ const EditMaster = ({ master, onClose }) => {
   {errors.permissions && (
     <p className="text-danger">{errors.permissions.message}</p>
   )}
-      </div>
+</div>
 
 
 
@@ -280,11 +280,11 @@ const EditMaster = ({ master, onClose }) => {
         <button
           type="button"
           className="btn btn-sm btn-label-secondary"
-          onClick={onClose}
+          data-bs-dismiss="modal"
+          aria-label="Close"
         >
           Cancel
         </button>
-
       </div>
 
     </form>

src/components/master/EditWorkCategory.jsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect,useState } from 'react'
-import { useForm, Controller } from 'react-hook-form';
+import { useForm ,Controller} from 'react-hook-form';
 import { set, z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { MasterRespository } from '../../repositories/MastersRepository';
-import { cacheData, getCachedData } from '../../slices/apiDataManager';
+import { cacheData,getCachedData } from '../../slices/apiDataManager';
 import showToast from '../../services/toastService';
-import { useUpdateWorkCategory } from '../../hooks/masterHook/useMaster';
+import {useUpdateWorkCategory} from '../../hooks/masterHook/useMaster';
 
 
 
@@ -17,35 +17,35 @@ const schema = z.object({
 
 
 
-const EditWorkCategory = ({ data, onClose }) => {
+const EditWorkCategory = ({data,onClose}) => {
    
-  const {
+const {
   register,
   handleSubmit,
   formState: { errors },
   reset,
-  } = useForm({
+} = useForm({
   resolver: zodResolver(schema),
   defaultValues: {
     name: data?.name || "",
     description: data?.description || "",
   },
-  });
+});
 
-  const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
+const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
-  const maxDescriptionLength = 255;
+const maxDescriptionLength = 255;
 
-  const { mutate: updateWorkCategory, isPending: isLoading } = useUpdateWorkCategory(() => onClose?.());
+const { mutate: updateWorkCategory, isPending: isLoading } = useUpdateWorkCategory(() => onClose?.());
 
-  const onSubmit = (formdata) => {
+const onSubmit = (formdata) => {
   const payload = {
     id: data?.id,
     name: formdata.name,
     description: formdata.description,
   };
 
-    updateWorkCategory({ id: data?.id, payload });
+  updateWorkCategory({id:data?.id,payload});
-  };
+};
 
     //  const onSubmit = (formdata) => {
     //   setIsLoading(true)
@@ -76,13 +76,13 @@ const EditWorkCategory = ({ data, onClose }) => {
     //   })
      
     // };
-  useEffect(() => {
+useEffect(() => {
   reset({
     name: data?.name || "",
     description: data?.description || "",
   });
   setDescriptionLength(data?.description?.length || 0);
-  }, [data, reset]);
+}, [data, reset]);
 
 
      
@@ -118,16 +118,16 @@ const EditWorkCategory = ({ data, onClose }) => {
 
         <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3">           
-          {isLoading ? "Please Wait..." : "Submit"}
+         {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"
+          type="reset"
           className="btn btn-sm btn-label-secondary"
-          onClick={onClose}
+          data-bs-dismiss="modal"
+          aria-label="Close"
         >
           Cancel
         </button>
-
       </div>
      
     </form>

src/components/master/ManagePaymentMode.jsx

@@ -23,25 +23,25 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
   const { mutate: CreatePaymentMode, isPending } = useCreatePaymentMode(() =>
     onClose?.()
   );
-  const { mutate: UpdatePaymentMode, isPending: Updating } = useUpdatePaymentMode(() => onClose?.())
+  const {mutate:UpdatePaymentMode,isPending:Updating} = useUpdatePaymentMode(()=>onClose?.())
 
   const onSubmit = (payload) => {
-    if (data) {
+    if(data){
-      UpdatePaymentMode({ id: data.id, payload: { ...payload, id: data.id } })
+        UpdatePaymentMode({id:data.id,payload:{...payload,id:data.id}})
-    } else (
+    }else(
         CreatePaymentMode(payload)
     )
     
   };
 
-  useEffect(() => {
+  useEffect(()=>{
-    if (data) {
+    if(data){ 
       reset({
-        name: data.name ?? "",
+        name:data.name ?? "",
-        description: data.description ?? ""
+        description:data.description ?? ""
       })
     }
-  }, [data])
+  },[data])
 
 
   return (
@@ -76,17 +76,17 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
           className="btn btn-sm btn-primary me-3"
           disabled={isPending || Updating}
         >
-          {isPending || Updating ? "Please Wait..." : Updating ? "Update" : "Submit"}
+          {isPending || Updating? "Please Wait..." : Updating ? "Update" : "Submit"}
         </button>
         <button
-          type="button"
+          type="reset"
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary "
-          onClick={onClose}   // ✅ call onClose here
+          data-bs-dismiss="modal"
+          aria-label="Close"
           disabled={isPending || Updating}
         >
           Cancel
         </button>
-
       </div>
     </form>
   );

src/pages/master/MasterPage.jsx

@@ -122,16 +122,13 @@ const MasterPage = () => {
                             onChange={(e) => dispatch(changeMaster(e.target.value))}
                             name="DataTables_Table_0_length"
                             aria-controls="DataTables_Table_0"
-                            className="form-select py-1 px-2"
+                            className="form-select form-select-sm"
-                            style={{ fontSize: "0.875rem", height: "32px", width: "150px" }}
                             value={selectedMaster}
                           >
-                            {isLoading && <option value="">Loading...</option>}
+                            {isLoading && (<option  value={null}>Loading...</option>)}
-                            {!isLoading &&
+                            {(!isLoading && data) && data?.map((item) => (
-                              data?.map((item) => (
+
-                                <option key={item.id} value={item.name}>
+                              <option key={item.id} value={item.name}>{item.name}</option>
-                                  {item.name}
-                                </option>
                             ))}
                           </select>
                         </label>