diff --git a/src/components/master/CreateActivity.jsx b/src/components/master/CreateActivity.jsx
index bb366c9c..79f8ec3b 100644
--- a/src/components/master/CreateActivity.jsx
+++ b/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,74 +24,74 @@ const schema = z.object({
 });
 
 const CreateActivity = ({ onClose }) => {
-const maxDescriptionLength = 255;
-const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
+  const maxDescriptionLength = 255;
+  const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
 
-const {
-  register,
-  handleSubmit,
-  control,
-  setValue,
-  clearErrors,
-  setError,
-  getValues,
-  reset,
-  formState: { errors },
-} = useForm({
-  resolver: zodResolver(schema),
-  defaultValues: {
-    activityName: "",
-    unitOfMeasurement: "",
-    checkList: [],
-  },
-});
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    clearErrors,
+    setError,
+    getValues,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      activityName: "",
+      unitOfMeasurement: "",
+      checkList: [],
+    },
+  });
 
-const {
-  fields: checkListItems,
-  append,
-  remove,
-} = useFieldArray({
-  control,
-  name: "checkList",
-});
+  const {
+    fields: checkListItems,
+    append,
+    remove,
+  } = useFieldArray({
+    control,
+    name: "checkList",
+  });
 
-const addChecklistItem = useCallback(() => {
-  const values = getValues("checkList");
-  const lastIndex = checkListItems.length - 1;
+  const addChecklistItem = useCallback(() => {
+    const values = getValues("checkList");
+    const lastIndex = checkListItems.length - 1;
 
-  if (
-    checkListItems.length > 0 &&
-    (!values?.[lastIndex] || values[lastIndex].description.trim() === "")
-  ) {
-    setError(`checkList.${lastIndex}.description`, {
-      type: "manual",
-      message: "Please fill this checklist item before adding another.",
-    });
-    return;
-  }
+    if (
+      checkListItems.length > 0 &&
+      (!values?.[lastIndex] || values[lastIndex].description.trim() === "")
+    ) {
+      setError(`checkList.${lastIndex}.description`, {
+        type: "manual",
+        message: "Please fill this checklist item before adding another.",
+      });
+      return;
+    }
 
-  clearErrors(`checkList.${lastIndex}.description`);
-  append({ id: null, description: "", isMandatory: false });
-}, [checkListItems, getValues, append, setError, clearErrors]);
+    clearErrors(`checkList.${lastIndex}.description`);
+    append({ id: null, description: "", isMandatory: false });
+  }, [checkListItems, getValues, append, setError, clearErrors]);
 
-const removeChecklistItem = useCallback((index) => {
-  remove(index);
-}, [remove]);
+  const removeChecklistItem = useCallback((index) => {
+    remove(index);
+  }, [remove]);
 
-const handleChecklistChange = useCallback((index, value) => {
-  setValue(`checkList.${index}`, value);
-}, [setValue]);
+  const handleChecklistChange = useCallback((index, value) => {
+    setValue(`checkList.${index}`, value);
+  }, [setValue]);
 
-const onSubmit = (formData) => {
-  createActivity(formData);
-};
+  const onSubmit = (formData) => {
+    createActivity(formData);
+  };
   // const onSubmit = (data) => {
   //   setIsLoading(true);
 
   //   MasterRespository.createActivity(data)
   //     .then( ( resp ) =>
   //     {
-        
+
   //       const cachedData = getCachedData("Activity");
   //       const updatedData = [ ...cachedData, resp?.data ];
   //       cacheData("Activity", updatedData);
@@ -104,15 +104,15 @@ const onSubmit = (formData) => {
   //       setIsLoading(false);
   //     });
   // };
-const handleClose = useCallback(() => {
-  reset();
-  onClose();
-}, [reset, onClose]);
+  const handleClose = useCallback(() => {
+    reset();
+    onClose();
+  }, [reset, onClose]);
 
-useEffect(() => {
-  const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-  tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
-}, []);
+  useEffect(() => {
+    const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
+  }, []);
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -123,9 +123,8 @@ useEffect(() => {
           <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 && (
             <p className="danger-text">{errors.activityName.message}</p>
@@ -137,9 +136,8 @@ useEffect(() => {
           <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 && (
             <p className="danger-text">{errors.unitOfMeasurement.message}</p>
@@ -147,68 +145,68 @@ useEffect(() => {
         </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">
-              <tr className="py-1">
-                <th colSpan={2} className="py-1">
-                  <small>Name</small>
-                </th>
-                <th colSpan={2} className="py-1 text-center">
-                  <small>Is Mandatory</small>
-                </th>
-                <th className="text-center py-1">Action</th>
-              </tr>
-            </thead>
-            <tbody className="table-border-bottom-0 ">
-              {checkListItems.map((item, index) => (
-                <tr key={index} className="border-top-0">
-                  <td colSpan={2} className="border-top-0 border-0">
-                    <input
-                      className="d-none"
-                      {...register(`checkList.${index}.id`)}
-                    ></input>
-                    <input
-                      {...register(`checkList.${index}.description`)}
-                      className="form-control form-control-sm"
-                      placeholder={`Checklist item ${index + 1}`}
-                      onChange={(e) =>
-                        handleChecklistChange(index, e.target.value)
-                      }
-                    />
-                    {errors.checkList?.[index]?.description && (
-                      <small
-                        style={{ fontSize: "10px" }}
-                        className="danger-text"
-                      >
-                        {errors.checkList[index]?.description?.message}
-                      </small>
-                    )}
-                  </td>
-                  <td colSpan={2} className="text-center border-0">
-                    <input
-                      className="form-check-input"
-                      type="checkbox"
-                      {...register(`checkList.${index}.isMandatory`)}
-                      defaultChecked={item.isMandatory}
-                    />
-                  </td>
-                  <td className="text-center border-0">
-                    <button
-                      type="button"
-                      onClick={() => removeChecklistItem(index)}
-                      className="btn btn-xs btn-icon btn-text-secondary"
-                    >
-                      <i className="bx bxs-minus-circle text-danger"  data-bs-toggle="tooltip"
-                title="Remove Check"
-                data-bs-original-title="Remove check"></i>
-                    </button>
-                  </td>
+            <table className="table mt-1  border-0">
+              <thead className="py-0 my-0 table-border-top-0">
+                <tr className="py-1">
+                  <th colSpan={2} className="py-1">
+                    <small>Name</small>
+                  </th>
+                  <th colSpan={2} className="py-1 text-center">
+                    <small>Is Mandatory</small>
+                  </th>
+                  <th className="text-center py-1">Action</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody className="table-border-bottom-0 ">
+                {checkListItems.map((item, index) => (
+                  <tr key={index} className="border-top-0">
+                    <td colSpan={2} className="border-top-0 border-0">
+                      <input
+                        className="d-none"
+                        {...register(`checkList.${index}.id`)}
+                      ></input>
+                      <input
+                        {...register(`checkList.${index}.description`)}
+                        className="form-control form-control-sm"
+                        placeholder={`Checklist item ${index + 1}`}
+                        onChange={(e) =>
+                          handleChecklistChange(index, e.target.value)
+                        }
+                      />
+                      {errors.checkList?.[index]?.description && (
+                        <small
+                          style={{ fontSize: "10px" }}
+                          className="danger-text"
+                        >
+                          {errors.checkList[index]?.description?.message}
+                        </small>
+                      )}
+                    </td>
+                    <td colSpan={2} className="text-center border-0">
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        {...register(`checkList.${index}.isMandatory`)}
+                        defaultChecked={item.isMandatory}
+                      />
+                    </td>
+                    <td className="text-center border-0">
+                      <button
+                        type="button"
+                        onClick={() => removeChecklistItem(index)}
+                        className="btn btn-xs btn-icon btn-text-secondary"
+                      >
+                        <i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
+                          title="Remove Check"
+                          data-bs-original-title="Remove check"></i>
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           )}
           <button
             type="button"
@@ -216,8 +214,8 @@ useEffect(() => {
             onClick={addChecklistItem}
           >
             <i className="bx bx-plus-circle" data-bs-toggle="tooltip"
-                title="Add Check"
-                data-bs-original-title="Add check" ></i>
+              title="Add Check"
+              data-bs-original-title="Add check" ></i>
           </button>
         </div>
 
@@ -226,12 +224,13 @@ useEffect(() => {
             {isLoading ? "Please Wait" : "Submit"}
           </button>
           <button
-            type="reset"
+            type="button"   // ✅ change to button
             className="btn btn-sm btn-label-secondary"
             onClick={handleClose}
           >
             Cancel
           </button>
+
         </div>
       </div>
     </form>
diff --git a/src/components/master/CreateContactCategory.jsx b/src/components/master/CreateContactCategory.jsx
index e5923c91..14707a76 100644
--- a/src/components/master/CreateContactCategory.jsx
+++ b/src/components/master/CreateContactCategory.jsx
@@ -1,43 +1,43 @@
-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({
   name: z.string().min(1, { message: "Category name is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
-const CreateContactCategory = ({onClose}) => {
+const CreateContactCategory = ({ onClose }) => {
 
-const {
-  register,
-  handleSubmit,
-  formState: { errors },
-  reset,
-} = useForm({
-  resolver: zodResolver(schema),
-  defaultValues: {
-    name: "",
-    description: "",
-  },
-});
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: "",
+      description: "",
+    },
+  });
 
-const [descriptionLength, setDescriptionLength] = useState(0);
-const maxDescriptionLength = 255;
+  const [descriptionLength, setDescriptionLength] = useState(0);
+  const maxDescriptionLength = 255;
 
-const { mutate: createContactCategory, isPending: isLoading } = useCreateContactCategory(() => onClose?.());
+  const { mutate: createContactCategory, isPending: isLoading } = useCreateContactCategory(() => onClose?.());
 
-const onSubmit = (payload) => {
-  createContactCategory(payload);
-};
+  const onSubmit = (payload) => {
+    createContactCategory(payload);
+  };
   //  const onSubmit = (data) => {
   //     setIsLoading(true)    
   //     MasterRespository.createContactCategory(data).then((resp)=>{ 
@@ -54,27 +54,27 @@ const onSubmit = (payload) => {
   //       setIsLoading(false)
   //     })
   //   };
-const resetForm = () => {
-  reset({ name: "", description: "" });
-  setDescriptionLength(0);
-};
+  const resetForm = () => {
+    reset({ name: "", description: "" });
+    setDescriptionLength(0);
+  };
+
+  useEffect(() => {
+    return () => resetForm();
+  }, []);
 
-useEffect(() => {
-  return () => resetForm();
-}, []);
- 
   return (<>
-    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-        <div className="col-12 col-md-12">
-          <label className="form-label">Category Name</label>
-          <input type="text" 
-           {...register("name")} 
-             className={`form-control ${errors.name ? 'is-invalids' : ''}`}
-          />
-          {errors.name && <p className="text-danger">{errors.name.message}</p>}
-        </div> 
-        <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+      <div className="col-12 col-md-12">
+        <label className="form-label">Category Name</label>
+        <input type="text"
+          {...register("name")}
+          className={`form-control ${errors.name ? 'is-invalids' : ''}`}
+        />
+        {errors.name && <p className="text-danger">{errors.name.message}</p>}
+      </div>
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -87,28 +87,31 @@ useEffect(() => {
         <div className="text-end small text-muted">
           {maxDescriptionLength - descriptionLength} characters left
         </div>
-          {errors.description && (
-            <p className="text-danger">{errors.description.message}</p>
-          )}
-        </div>
+        {errors.description && (
+          <p className="text-danger">{errors.description.message}</p>
+        )}
+      </div>
 
-        <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">           
-         {isLoading? "Please Wait...":"Submit"}       
+      <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"
+          type="button"   // ✅ not reset
+          className="btn btn-sm btn-label-secondary"
+          onClick={() => {
+            resetForm();   // clear inputs
+            onClose?.();   // close modal from parent
+          }}
         >
           Cancel
         </button>
+
       </div>
-     
+
     </form>
- 
-    </>
+
+  </>
   )
 }
 
diff --git a/src/components/master/CreateContactTag.jsx b/src/components/master/CreateContactTag.jsx
index 28fe9ab3..20a53399 100644
--- a/src/components/master/CreateContactTag.jsx
+++ b/src/components/master/CreateContactTag.jsx
@@ -1,42 +1,42 @@
-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({
   name: z.string().min(1, { message: "Tag name is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
-const CreateContactTag = ({onClose}) => {
-const {
-  register,
-  handleSubmit,
-  formState: { errors },
-  reset,
-} = useForm({
-  resolver: zodResolver(schema),
-  defaultValues: {
-    name: "",
-    description: "",
-  },
-});
+const CreateContactTag = ({ onClose }) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: "",
+      description: "",
+    },
+  });
 
-const [descriptionLength, setDescriptionLength] = useState(0);
-const maxDescriptionLength = 255;
+  const [descriptionLength, setDescriptionLength] = useState(0);
+  const maxDescriptionLength = 255;
 
-const { mutate: createContactTag, isPending: isLoading } = useCreateContactTag(() => onClose?.());
+  const { mutate: createContactTag, isPending: isLoading } = useCreateContactTag(() => onClose?.());
 
-const onSubmit = (payload) => {
-  createContactTag(payload);
-};
+  const onSubmit = (payload) => {
+    createContactTag(payload);
+  };
   //  const onSubmit = (data) => {
   //     setIsLoading(true)    
   //     MasterRespository.createContactTag(data).then((resp)=>{ 
@@ -54,27 +54,27 @@ const onSubmit = (payload) => {
   //       setIsLoading(false)
   //     })
   //   };
-const resetForm = () => {
-  reset({ name: "", description: "" });
-  setDescriptionLength(0);
-};
+  const resetForm = () => {
+    reset({ name: "", description: "" });
+    setDescriptionLength(0);
+  };
+
+  useEffect(() => {
+    return () => resetForm();
+  }, []);
 
-useEffect(() => {
-  return () => resetForm();
-}, []);
-  
   return (<>
-    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-        <div className="col-12 col-md-12">
-          <label className="form-label">Tag Name</label>
-          <input type="text" 
-           {...register("name")} 
-             className={`form-control ${errors.name ? 'is-invalids' : ''}`}
-          />
-          {errors.name && <p className="text-danger">{errors.name.message}</p>}
-        </div> 
-        <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+      <div className="col-12 col-md-12">
+        <label className="form-label">Tag Name</label>
+        <input type="text"
+          {...register("name")}
+          className={`form-control ${errors.name ? 'is-invalids' : ''}`}
+        />
+        {errors.name && <p className="text-danger">{errors.name.message}</p>}
+      </div>
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -87,28 +87,31 @@ useEffect(() => {
         <div className="text-end small text-muted">
           {maxDescriptionLength - descriptionLength} characters left
         </div>
-          {errors.description && (
-            <p className="text-danger">{errors.description.message}</p>
-          )}
-        </div>
+        {errors.description && (
+          <p className="text-danger">{errors.description.message}</p>
+        )}
+      </div>
 
-        <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">           
-         {isLoading? "Please Wait...":"Submit"}       
+      <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"
+          type="button"   // ✅ not reset
+          className="btn btn-sm btn-label-secondary"
+          onClick={() => {
+            resetForm();   // clear inputs
+            onClose?.();   // close modal from parent
+          }}
         >
           Cancel
         </button>
+
       </div>
-     
+
     </form>
- 
-    </>
+
+  </>
   )
 }
 
diff --git a/src/components/master/CreateJobRole.jsx b/src/components/master/CreateJobRole.jsx
index 97f22ee2..8a907458 100644
--- a/src/components/master/CreateJobRole.jsx
+++ b/src/components/master/CreateJobRole.jsx
@@ -1,21 +1,21 @@
-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({
   role: z.string().min(1, { message: "Role is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
-const CreateJobRole = ({onClose}) => {
+const CreateJobRole = ({ onClose }) => {
 
   const maxDescriptionLength = 255;
   const [descriptionLength, setDescriptionLength] = useState(0);
@@ -39,34 +39,34 @@ const CreateJobRole = ({onClose}) => {
     setDescriptionLength(0);
   };
 
-  const { mutate: createJobRole, isPending:isLoading } = useCreateJobRole(() => {
+  const { mutate: createJobRole, isPending: isLoading } = useCreateJobRole(() => {
     onClose?.();
-  } );
+  });
 
 
-   // const onSubmit = (data) => {
-    //   setIsLoading(true)
-    //   const result = {
-    //     name: data.role,
-    //     description: data.description,
-    //   };
-    
-    //   MasterRespository.createJobRole(result).then((resp)=>{ 
-    //     setIsLoading(false)
-    //     resetForm()
-    //     const cachedData = getCachedData("Job Role"); 
-    //     const updatedData = [...cachedData, resp?.data]; 
-    //     cacheData("Job Role", updatedData); 
-    //     showToast("JobRole Added successfully.", "success");
+  // const onSubmit = (data) => {
+  //   setIsLoading(true)
+  //   const result = {
+  //     name: data.role,
+  //     description: data.description,
+  //   };
 
-    //     onClose()
-    //   }).catch((error)=>{
-    //     showToast(error.message, "error");
-    //     setIsLoading(false)
-    //   })
-   
-     
-    // };
+  //   MasterRespository.createJobRole(result).then((resp)=>{ 
+  //     setIsLoading(false)
+  //     resetForm()
+  //     const cachedData = getCachedData("Job Role"); 
+  //     const updatedData = [...cachedData, resp?.data]; 
+  //     cacheData("Job Role", updatedData); 
+  //     showToast("JobRole Added successfully.", "success");
+
+  //     onClose()
+  //   }).catch((error)=>{
+  //     showToast(error.message, "error");
+  //     setIsLoading(false)
+  //   })
+
+
+  // };
   const onSubmit = (data) => {
     const payload = {
       name: data.role,
@@ -87,20 +87,20 @@ const CreateJobRole = ({onClose}) => {
   }, []);
 
   return (<>
-    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
       {/* <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 Job Role</label>
       </div> */}
-        <div className="col-12 col-md-12">
-          <label className="form-label">Role</label>
-          <input type="text" 
-           {...register("role")} 
-             className={`form-control ${errors.role ? 'is-invalids' : ''}`}
-          />
-          {errors.role && <p className="text-danger">{errors.role.message}</p>}
-        </div> 
-        <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
+      <div className="col-12 col-md-12">
+        <label className="form-label">Role</label>
+        <input type="text"
+          {...register("role")}
+          className={`form-control ${errors.role ? 'is-invalids' : ''}`}
+        />
+        {errors.role && <p className="text-danger">{errors.role.message}</p>}
+      </div>
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -113,28 +113,31 @@ const CreateJobRole = ({onClose}) => {
         <div className="text-end small text-muted">
           {maxDescriptionLength - descriptionLength} characters left
         </div>
-          {errors.description && (
-            <p className="text-danger">{errors.description.message}</p>
-          )}
-        </div>
+        {errors.description && (
+          <p className="text-danger">{errors.description.message}</p>
+        )}
+      </div>
 
-        <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">           
-         {isLoading? "Please Wait...":"Submit"}       
+      <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"
+          type="button"   // ✅ change from reset → button
+          className="btn btn-sm btn-label-secondary"
+          onClick={() => {
+            resetForm();   // optional: clears form
+            onClose?.();   // ✅ close modal via parent
+          }}
         >
           Cancel
         </button>
+
       </div>
-     
+
     </form>
- 
-    </>
+
+  </>
   )
 }
 
diff --git a/src/components/master/CreateRole.jsx b/src/components/master/CreateRole.jsx
index 14ca6c15..5469e179 100644
--- a/src/components/master/CreateRole.jsx
+++ b/src/components/master/CreateRole.jsx
@@ -233,13 +233,13 @@ const CreateRole = ({ modalType, onClose }) => {
             {isLoading ? "Please Wait..." : "Submit"}
           </button>
           <button
-            type="reset"
+            type="button"
             className="btn btn-sm btn-label-secondary"
-            data-bs-dismiss="modal"
-            aria-label="Close"
+            onClick={onClose}
           >
             Cancel
           </button>
+
         </div>
       )}
     </form>
diff --git a/src/components/master/CreateWorkCategory.jsx b/src/components/master/CreateWorkCategory.jsx
index 81b2eab9..2be01a42 100644
--- a/src/components/master/CreateWorkCategory.jsx
+++ b/src/components/master/CreateWorkCategory.jsx
@@ -1,96 +1,96 @@
-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({
   name: z.string().min(1, { message: "Category name is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
-const CreateWorkCategory = ({onClose}) => {
+const CreateWorkCategory = ({ onClose }) => {
 
- const {
-  register,
-  handleSubmit,
-  formState: { errors },
-  reset,
-} = useForm({
-  resolver: zodResolver(schema),
-  defaultValues: {
-    name: "",
-    description: "",
-  },
-});
-
-const [descriptionLength, setDescriptionLength] = useState(0);
-const maxDescriptionLength = 255;
-
-const { mutate: createWorkCategory, isPending: isLoading } = useCreateWorkCategory(() => {
-  resetForm();
-  onClose?.();
-});
-
-const onSubmit = (payload) => {
- createWorkCategory(payload)
-  };
-  
-     // const onSubmit = (data) => {
-    //   setIsLoading(true)
- 
-    
-    //   MasterRespository.createWorkCategory(data).then((resp)=>{ 
-    //     setIsLoading(false)
-    //     resetForm()
-    //     const cachedData = getCachedData("Work Category"); 
-    //     const updatedData = [...cachedData, resp?.data]; 
-    //     cacheData("Work Category", updatedData); 
-    //     showToast("Work Category Added successfully.", "success");
-
-    //     onClose()
-    //   }).catch((error)=>{
-    //     showToast(error?.response?.data?.message, "error");
-    //     setIsLoading(false)
-    //   })
-   
-     
-    // };
-
-const resetForm = () => {
-  reset({
-    name: "",
-    description: "",
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: "",
+      description: "",
+    },
   });
-  setDescriptionLength(0);
-};
 
-useEffect(() => {
-  return () => resetForm(); 
-}, []);
- 
+  const [descriptionLength, setDescriptionLength] = useState(0);
+  const maxDescriptionLength = 255;
+
+  const { mutate: createWorkCategory, isPending: isLoading } = useCreateWorkCategory(() => {
+    resetForm();
+    onClose?.();
+  });
+
+  const onSubmit = (payload) => {
+    createWorkCategory(payload)
+  };
+
+  // const onSubmit = (data) => {
+  //   setIsLoading(true)
+
+
+  //   MasterRespository.createWorkCategory(data).then((resp)=>{ 
+  //     setIsLoading(false)
+  //     resetForm()
+  //     const cachedData = getCachedData("Work Category"); 
+  //     const updatedData = [...cachedData, resp?.data]; 
+  //     cacheData("Work Category", updatedData); 
+  //     showToast("Work Category Added successfully.", "success");
+
+  //     onClose()
+  //   }).catch((error)=>{
+  //     showToast(error?.response?.data?.message, "error");
+  //     setIsLoading(false)
+  //   })
+
+
+  // };
+
+  const resetForm = () => {
+    reset({
+      name: "",
+      description: "",
+    });
+    setDescriptionLength(0);
+  };
+
+  useEffect(() => {
+    return () => resetForm();
+  }, []);
+
   return (<>
-    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+      {/* <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 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>        
+        <label className="form-label">Category Name</label>
+        <input type="text"
+          {...register("name")}
+          className={`form-control ${errors.name ? 'is-invalids' : ''}`}
+        />
+        {errors.name && <p className="text-danger">{errors.name.message}</p>}
       </div>
-      
-        <div className="col-12 col-md-12">
-          <label className="form-label">Category Name</label>
-          <input type="text" 
-           {...register("name")} 
-             className={`form-control ${errors.name ? 'is-invalids' : ''}`}
-          />
-          {errors.name && <p className="text-danger">{errors.name.message}</p>}
-        </div> 
-        <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -103,28 +103,30 @@ useEffect(() => {
         <div className="text-end small text-muted">
           {maxDescriptionLength - descriptionLength} characters left
         </div>
-          {errors.description && (
-            <p className="text-danger">{errors.description.message}</p>
-          )}
-        </div>
+        {errors.description && (
+          <p className="text-danger">{errors.description.message}</p>
+        )}
+      </div>
 
-        <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">           
-         {isLoading? "Please Wait...":"Submit"}       
+      <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"
+          type="button"   // ✅ not reset
+          className="btn btn-sm btn-label-secondary"
+          onClick={() => {
+            resetForm();   // clear inputs
+            onClose?.();   // close modal from parent
+          }}
         >
           Cancel
         </button>
       </div>
-     
+
     </form>
- 
-    </>
+
+  </>
   )
 }
 
diff --git a/src/components/master/DeleteMaster.jsx b/src/components/master/DeleteMaster.jsx
index ca9998be..f6c877ec 100644
--- a/src/components/master/DeleteMaster.jsx
+++ b/src/components/master/DeleteMaster.jsx
@@ -34,13 +34,15 @@ const DeleteMaster = ({ master, onClose }) => {
           )}
         </button>
         <button
-          type="reset"
+          type="button"   // ✅ not reset
           className="btn btn-label-secondary"
-          data-bs-dismiss="modal"
-          aria-label="Close"
+          onClick={() => {
+            onClose?.(); // properly close modal
+          }}
         >
           Cancel
         </button>
+
       </div>
     </div>
   );
diff --git a/src/components/master/EditActivity.jsx b/src/components/master/EditActivity.jsx
index 61fcccf0..372c6377 100644
--- a/src/components/master/EditActivity.jsx
+++ b/src/components/master/EditActivity.jsx
@@ -241,7 +241,7 @@ useEffect(() => {
             {isLoading ? "Please Wait" : "Submit"}
           </button>
           <button
-            type="button"
+            type="button"   // ✅ change to button
             className="btn btn-sm btn-label-secondary"
             onClick={onClose}
           >
diff --git a/src/components/master/EditContactCategory.jsx b/src/components/master/EditContactCategory.jsx
index 5723eede..40e5b325 100644
--- a/src/components/master/EditContactCategory.jsx
+++ b/src/components/master/EditContactCategory.jsx
@@ -1,49 +1,49 @@
-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({
   name: z.string().min(1, { message: "Category name is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
-const EditContactCategory= ({data,onClose}) => {
-const {
-  register,
-  handleSubmit,
-  formState: { errors },
-  reset,
-} = useForm({
-  resolver: zodResolver(schema),
-  defaultValues: {
-    name: data?.name || "",
-    description: data?.description || "",
-  },
-});
+const EditContactCategory = ({ data, onClose }) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: data?.name || "",
+      description: data?.description || "",
+    },
+  });
 
-const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
-const maxDescriptionLength = 255;
+  const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
+  const maxDescriptionLength = 255;
 
-const { mutate: updateContactCategory, isPending: isLoading } = useUpdateContactCategory(() => onClose?.());
+  const { mutate: updateContactCategory, isPending: isLoading } = useUpdateContactCategory(() => onClose?.());
 
-const onSubmit = (formData) => {
-  const payload = {
-    id: data?.id,
-    name: formData.name,
-    description: formData.description,
+  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) => {
+  // const onSubmit = (formdata) => {
   //     setIsLoading(true)
   //     const result = {
   //       id:data?.id,
@@ -51,8 +51,8 @@ const onSubmit = (formData) => {
   //       description: formdata.description,  
   //     };
 
-     
-    
+
+
   //     MasterRespository.updateContactCategory(data?.id,result).then((resp)=>{
   //       setIsLoading(false) 
   //       showToast("Contact Category Updated successfully.", "success");
@@ -70,30 +70,30 @@ const onSubmit = (formData) => {
   //        showToast(error?.response?.data?.message, "error")
   //       setIsLoading(false)
   //     })
-     
+
   //   };
 
-const resetForm = () => {
-  reset({ name: "", description: "" });
-  setDescriptionLength(0);
-};
+  const resetForm = () => {
+    reset({ name: "", description: "" });
+    setDescriptionLength(0);
+  };
+
+  useEffect(() => {
+    return () => resetForm();
+  }, []);
 
-useEffect(() => {
-  return () => resetForm();
-}, []);
-   
   return (<>
-    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-        <div className="col-12 col-md-12">
-          <label className="form-label">Category Name</label>
-          <input type="text" 
-           {...register("name")} 
-             className={`form-control ${errors.name ? 'is-invalids' : ''}`}
-          />
-          {errors.name && <p className="text-danger">{errors.name.message}</p>}
-        </div> 
-        <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+      <div className="col-12 col-md-12">
+        <label className="form-label">Category Name</label>
+        <input type="text"
+          {...register("name")}
+          className={`form-control ${errors.name ? 'is-invalids' : ''}`}
+        />
+        {errors.name && <p className="text-danger">{errors.name.message}</p>}
+      </div>
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -106,28 +106,30 @@ useEffect(() => {
         <div className="text-end small text-muted">
           {maxDescriptionLength - descriptionLength} characters left
         </div>
-          {errors.description && (
-            <p className="text-danger">{errors.description.message}</p>
-          )}
-        </div>
+        {errors.description && (
+          <p className="text-danger">{errors.description.message}</p>
+        )}
+      </div>
 
-        <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">           
-         {isLoading? "Please Wait...":"Submit"}       
+      <div className="col-12 text-center">
+        <button type="submit" className="btn btn-sm btn-primary me-3">
+          {isLoading ? "Please Wait..." : "Submit"}
         </button>
         <button
-          type="button"
-          className="btn btn-sm btn-label-secondary "
-          data-bs-dismiss="modal"
-          aria-label="Close"
+          type="button"   // ✅ not reset
+          className="btn btn-sm btn-label-secondary"
+          onClick={() => {
+            resetForm();   // clear inputs
+            onClose?.();   // close modal from parent
+          }}
         >
           Cancel
         </button>
       </div>
-     
+
     </form>
- 
-    </>
+
+  </>
   )
 }
 
diff --git a/src/components/master/EditContactTag.jsx b/src/components/master/EditContactTag.jsx
index 9b3783ba..2eca508f 100644
--- a/src/components/master/EditContactTag.jsx
+++ b/src/components/master/EditContactTag.jsx
@@ -1,49 +1,49 @@
-import React,{useState,useEffect} from 'react'
-import {useForm} from 'react-hook-form';
+import React, { useState, useEffect } 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 {useUpdateContactTag} from '../../hooks/masterHook/useMaster';
+import { useUpdateContactTag } from '../../hooks/masterHook/useMaster';
 
 
 const schema = z.object({
   name: z.string().min(1, { message: "Tag name is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
-const EditContactTag= ({data,onClose}) => {
-const {
-  register,
-  handleSubmit,
-  formState: { errors },
-  reset
-} = useForm({
-  resolver: zodResolver(schema),
-  defaultValues: {
-    name: data?.name || "",
-    description: data?.description || "",
-  },
-});
+const EditContactTag = ({ data, onClose }) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: data?.name || "",
+      description: data?.description || "",
+    },
+  });
 
-const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
-const maxDescriptionLength = 255;
+  const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
+  const maxDescriptionLength = 255;
 
-const { mutate: updateContactTag, isPending: isLoading } = useUpdateContactTag(() => onClose?.());
+  const { mutate: updateContactTag, isPending: isLoading } = useUpdateContactTag(() => onClose?.());
 
-const onSubmit = (formData) => {
-  const payload = {
-    id: data?.id,
-    name: formData.name,
-    description: formData.description,
-  };
-  debugger
-  updateContactTag({ id: data?.id, payload} );
+  const onSubmit = (formData) => {
+    const payload = {
+      id: data?.id,
+      name: formData.name,
+      description: formData.description,
+    };
+    debugger
+    updateContactTag({ id: data?.id, payload });
   }
-    // const onSubmit = (formdata) => {
+  // const onSubmit = (formdata) => {
   //     setIsLoading(true)
   //     const result = {
   //       id:data?.id,
@@ -51,8 +51,8 @@ const onSubmit = (formData) => {
   //       description: formdata.description,  
   //     };
 
-     
-    
+
+
   //     MasterRespository.updateContactTag(data?.id,result).then((resp)=>{
   //       setIsLoading(false) 
   //       showToast("Contact Tag Updated successfully.", "success");
@@ -70,30 +70,30 @@ const onSubmit = (formData) => {
   //        showToast(error?.response?.data?.message, "error")
   //       setIsLoading(false)
   //     })
-     
+
   //   };
 
-const resetForm = () => {
-  reset({ name: "", description: "" });
-  setDescriptionLength(0);
-};
+  const resetForm = () => {
+    reset({ name: "", description: "" });
+    setDescriptionLength(0);
+  };
+
+  useEffect(() => {
+    return () => resetForm();
+  }, []);
 
-useEffect(() => {
-  return () => resetForm();
-}, []);
-   
   return (<>
-    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-        <div className="col-12 col-md-12">
-          <label className="form-label">Tag Name</label>
-          <input type="text" 
-           {...register("name")} 
-             className={`form-control ${errors.name ? 'is-invalids' : ''}`}
-          />
-          {errors.name && <p className="text-danger">{errors.name.message}</p>}
-        </div> 
-        <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+      <div className="col-12 col-md-12">
+        <label className="form-label">Tag Name</label>
+        <input type="text"
+          {...register("name")}
+          className={`form-control ${errors.name ? 'is-invalids' : ''}`}
+        />
+        {errors.name && <p className="text-danger">{errors.name.message}</p>}
+      </div>
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -106,28 +106,30 @@ useEffect(() => {
         <div className="text-end small text-muted">
           {maxDescriptionLength - descriptionLength} characters left
         </div>
-          {errors.description && (
-            <p className="text-danger">{errors.description.message}</p>
-          )}
-        </div>
+        {errors.description && (
+          <p className="text-danger">{errors.description.message}</p>
+        )}
+      </div>
 
-        <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">           
-         {isLoading? "Please Wait...":"Submit"}       
+      <div className="col-12 text-center">
+        <button type="submit" className="btn btn-sm btn-primary me-3">
+          {isLoading ? "Please Wait..." : "Submit"}
         </button>
         <button
-          type="button"
-          className="btn btn-sm btn-label-secondary "
-          data-bs-dismiss="modal"
-          aria-label="Close"
+          type="button"   // ✅ not reset
+          className="btn btn-sm btn-label-secondary"
+          onClick={() => {
+            resetForm();   // clear inputs
+            onClose?.();   // close modal from parent
+          }}
         >
           Cancel
         </button>
       </div>
-     
+
     </form>
- 
-    </>
+
+  </>
   )
 }
 
diff --git a/src/components/master/EditJobRole.jsx b/src/components/master/EditJobRole.jsx
index 63c3a7c6..2d4eba69 100644
--- a/src/components/master/EditJobRole.jsx
+++ b/src/components/master/EditJobRole.jsx
@@ -1,24 +1,24 @@
-import React, { useEffect,useState } from 'react'
-import { useForm ,Controller} from 'react-hook-form';
+import React, { useEffect, useState } from 'react'
+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';
 
 
 
 const schema = z.object({
   role: z.string().min(1, { message: "Role is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
 
 
-const EditJobRole = ({data,onClose}) => {
-const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
+const EditJobRole = ({ data, onClose }) => {
+  const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
   const maxDescriptionLength = 255;
 
   const {
@@ -35,38 +35,38 @@ const [descriptionLength, setDescriptionLength] = useState(data?.description?.le
     },
   });
 
-  const { mutate: updateJobRole, isPendin:isLoading } = useUpdateJobRole(() => {
+  const { mutate: updateJobRole, isPendin: isLoading } = useUpdateJobRole(() => {
     onClose?.();
   });
-// const onSubmit = (formdata) => {
-    //   setIsLoading(true)
-    //   const result = {
-    //     id:data?.id,
-    //     name: formdata?.role,
-    //     description: formdata.description,  
-    //   };
+  // const onSubmit = (formdata) => {
+  //   setIsLoading(true)
+  //   const result = {
+  //     id:data?.id,
+  //     name: formdata?.role,
+  //     description: formdata.description,  
+  //   };
 
-     
-    
-    //   MasterRespository.updateJobRole(data?.id,result).then((resp)=>{
-    //     setIsLoading(false) 
-    //     showToast("JobRole Update successfully.", "success");
-    //     const cachedData = getCachedData("Job Role");
-    //     if (cachedData) {
 
-    //       const updatedData = cachedData.map((role) =>
-    //         role.id === data?.id ? { ...role, ...resp.data } : role
-    //       );
-    //       cacheData("Job Role", updatedData);
-    //     }
 
-    //     onClose()
-    //   }).catch((error)=>{
-    //      showToast(error.message, "error")
-    //     setIsLoading(false)
-    //   })
-     
-    // };
+  //   MasterRespository.updateJobRole(data?.id,result).then((resp)=>{
+  //     setIsLoading(false) 
+  //     showToast("JobRole Update successfully.", "success");
+  //     const cachedData = getCachedData("Job Role");
+  //     if (cachedData) {
+
+  //       const updatedData = cachedData.map((role) =>
+  //         role.id === data?.id ? { ...role, ...resp.data } : role
+  //       );
+  //       cacheData("Job Role", updatedData);
+  //     }
+
+  //     onClose()
+  //   }).catch((error)=>{
+  //      showToast(error.message, "error")
+  //     setIsLoading(false)
+  //   })
+
+  // };
 
   const onSubmit = (formData) => {
     updateJobRole({
@@ -93,22 +93,22 @@ const [descriptionLength, setDescriptionLength] = useState(data?.description?.le
     });
     return () => sub.unsubscribe();
   }, [watch]);
-     
+
   return (<>
-    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
       {/* <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">Edit Job Role</label>        
       </div> */}
-        <div className="col-12 col-md-12">
-          <label className="form-label">Role</label>
-          <input type="text" 
-           {...register("role")} 
-             className={`form-control ${errors.role ? 'is-invalids' : ''}`}
-          />
-          {errors.role && <p className="text-danger">{errors.role.message}</p>}
-        </div> 
-        <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
+      <div className="col-12 col-md-12">
+        <label className="form-label">Role</label>
+        <input type="text"
+          {...register("role")}
+          className={`form-control ${errors.role ? 'is-invalids' : ''}`}
+        />
+        {errors.role && <p className="text-danger">{errors.role.message}</p>}
+      </div>
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -125,25 +125,25 @@ const [descriptionLength, setDescriptionLength] = useState(data?.description?.le
           <p className="text-danger">{errors.description.message}</p>
         )}
 
-        </div>
+      </div>
 
-        <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">           
-         {isLoading? "Please Wait...":"Submit"}       
+      <div className="col-12 text-center">
+        <button type="submit" className="btn btn-sm btn-primary me-3">
+          {isLoading ? "Please Wait..." : "Submit"}
         </button>
         <button
           type="button"
           className="btn btn-sm btn-label-secondary"
-          data-bs-dismiss="modal"
-          aria-label="Close"
+          onClick={onClose}   // 👈 This will now close the popup
         >
           Cancel
         </button>
       </div>
-     
+
+
     </form>
- 
-    </>
+
+  </>
   )
 }
 
diff --git a/src/components/master/EditRole.jsx b/src/components/master/EditRole.jsx
index 9d40a10c..04511399 100644
--- a/src/components/master/EditRole.jsx
+++ b/src/components/master/EditRole.jsx
@@ -190,87 +190,87 @@ const EditMaster = ({ master, onClose }) => {
         )}
       </div>
 
-     <div className="col-12 text-start">
-  {/* Scrollable Container with Border */}
-  <div
-    className="border rounded p-3"
-    style={{
-      maxHeight: "350px",
-      overflowY: "auto",
-      overflowX: "hidden", // Prevent horizontal scrollbar
-      paddingRight: "10px",
-    }}
-  >
-    {masterFeatures.map((feature, featureIndex) => (
-      <div key={feature.id} className="mb-3">
-        {/* Feature Group Title */}
-        <div className="fw-semibold mb-2">{feature.name}</div>
+      <div className="col-12 text-start">
+        {/* Scrollable Container with Border */}
+        <div
+          className="border rounded p-3"
+          style={{
+            maxHeight: "350px",
+            overflowY: "auto",
+            overflowX: "hidden", // Prevent horizontal scrollbar
+            paddingRight: "10px",
+          }}
+        >
+          {masterFeatures.map((feature, featureIndex) => (
+            <div key={feature.id} className="mb-3">
+              {/* Feature Group Title */}
+              <div className="fw-semibold mb-2">{feature.name}</div>
 
-        {/* Permissions Grid */}
-        <div className="row">
-          {feature.featurePermissions.map((perm, permIndex) => {
-            const refIndex = featureIndex * 10 + permIndex;
-            return (
-              <div
-                key={perm.id}
-                className="col-12 col-sm-6 col-md-4 mb-3 d-flex align-items-start"
-              >
-                <label
-                  className="form-check-label d-flex align-items-center"
-                  htmlFor={perm.id}
-                >
-                  <input
-                    type="checkbox"
-                    className="form-check-input me-2"
-                    id={perm.id}
-                    {...register(`permissions.${perm.id}`, {
-                      value: initialPermissions[perm.id] || false,
-                    })}
-                  />
-                  {perm.name}
-                </label>
-
-                {/* Info Icon */}
-                <div style={{ display: "flex", alignItems: "center" }}>
-                  <div
-                    ref={(el) => (popoverRefs.current[refIndex] = el)}
-                    tabIndex="0"
-                    className="d-flex align-items-center justify-content-center"
-                    data-bs-toggle="popover"
-                    data-bs-trigger="focus"
-                    data-bs-placement="right"
-                    data-bs-html="true"
-                    data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
-                  >
-                    &nbsp;
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="13"
-                      height="13"
-                      fill="currentColor"
-                      className="bi bi-info-circle"
-                      viewBox="0 0 16 16"
+              {/* Permissions Grid */}
+              <div className="row">
+                {feature.featurePermissions.map((perm, permIndex) => {
+                  const refIndex = featureIndex * 10 + permIndex;
+                  return (
+                    <div
+                      key={perm.id}
+                      className="col-12 col-sm-6 col-md-4 mb-3 d-flex align-items-start"
                     >
-                      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-                      <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
-                    </svg>
-                  </div>
-                </div>
+                      <label
+                        className="form-check-label d-flex align-items-center"
+                        htmlFor={perm.id}
+                      >
+                        <input
+                          type="checkbox"
+                          className="form-check-input me-2"
+                          id={perm.id}
+                          {...register(`permissions.${perm.id}`, {
+                            value: initialPermissions[perm.id] || false,
+                          })}
+                        />
+                        {perm.name}
+                      </label>
+
+                      {/* Info Icon */}
+                      <div style={{ display: "flex", alignItems: "center" }}>
+                        <div
+                          ref={(el) => (popoverRefs.current[refIndex] = el)}
+                          tabIndex="0"
+                          className="d-flex align-items-center justify-content-center"
+                          data-bs-toggle="popover"
+                          data-bs-trigger="focus"
+                          data-bs-placement="right"
+                          data-bs-html="true"
+                          data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
+                        >
+                          &nbsp;
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="13"
+                            height="13"
+                            fill="currentColor"
+                            className="bi bi-info-circle"
+                            viewBox="0 0 16 16"
+                          >
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
               </div>
-            );
-          })}
+
+              <hr className="my-2" />
+            </div>
+          ))}
         </div>
 
-        <hr className="my-2" />
+        {/* Error Display */}
+        {errors.permissions && (
+          <p className="text-danger">{errors.permissions.message}</p>
+        )}
       </div>
-    ))}
-  </div>
-
-  {/* Error Display */}
-  {errors.permissions && (
-    <p className="text-danger">{errors.permissions.message}</p>
-  )}
-</div>
 
 
 
@@ -280,11 +280,11 @@ const EditMaster = ({ master, onClose }) => {
         <button
           type="button"
           className="btn btn-sm btn-label-secondary"
-          data-bs-dismiss="modal"
-          aria-label="Close"
+          onClick={onClose}
         >
           Cancel
         </button>
+
       </div>
 
     </form>
diff --git a/src/components/master/EditWorkCategory.jsx b/src/components/master/EditWorkCategory.jsx
index 723e5f24..8a4c4072 100644
--- a/src/components/master/EditWorkCategory.jsx
+++ b/src/components/master/EditWorkCategory.jsx
@@ -1,103 +1,103 @@
-import React, { useEffect,useState } from 'react'
-import { useForm ,Controller} from 'react-hook-form';
+import React, { useEffect, useState } from 'react'
+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';
 
 
 
 const schema = z.object({
   name: z.string().min(1, { message: "Work Category is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
 });
 
 
 
-const EditWorkCategory = ({data,onClose}) => {
-   
-const {
-  register,
-  handleSubmit,
-  formState: { errors },
-  reset,
-} = useForm({
-  resolver: zodResolver(schema),
-  defaultValues: {
-    name: data?.name || "",
-    description: data?.description || "",
-  },
-});
+const EditWorkCategory = ({ data, onClose }) => {
 
-const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
-const maxDescriptionLength = 255;
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: data?.name || "",
+      description: data?.description || "",
+    },
+  });
 
-const { mutate: updateWorkCategory, isPending: isLoading } = useUpdateWorkCategory(() => onClose?.());
+  const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
+  const maxDescriptionLength = 255;
 
-const onSubmit = (formdata) => {
-  const payload = {
-    id: data?.id,
-    name: formdata.name,
-    description: formdata.description,
+  const { mutate: updateWorkCategory, isPending: isLoading } = useUpdateWorkCategory(() => onClose?.());
+
+  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)
-    //   const result = {
-    //     id:data?.id,
-    //     name: formdata?.name,
-    //     description: formdata.description,  
-    //   };
-
-     
-    
-    //   MasterRespository.updateWorkCategory(data?.id,result).then((resp)=>{
-    //     setIsLoading(false) 
-    //     showToast("Work Category Update successfully.", "success");
-    //     const cachedData = getCachedData("Work Category");
-    //     if (cachedData) {
-
-    //       const updatedData = cachedData.map((category) =>
-    //         category.id === data?.id ? { ...category, ...resp.data } : category
-    //       );
-    //       cacheData("Work Category", updatedData);
-    //     }
-
-    //     onClose()
-    //   }).catch((error)=>{
-    //      showToast(error?.response?.data?.message, "error")
-    //     setIsLoading(false)
-    //   })
-     
-    // };
-useEffect(() => {
-  reset({
-    name: data?.name || "",
-    description: data?.description || "",
-  });
-  setDescriptionLength(data?.description?.length || 0);
-}, [data, reset]);
+  //  const onSubmit = (formdata) => {
+  //   setIsLoading(true)
+  //   const result = {
+  //     id:data?.id,
+  //     name: formdata?.name,
+  //     description: formdata.description,  
+  //   };
+
+
+
+  //   MasterRespository.updateWorkCategory(data?.id,result).then((resp)=>{
+  //     setIsLoading(false) 
+  //     showToast("Work Category Update successfully.", "success");
+  //     const cachedData = getCachedData("Work Category");
+  //     if (cachedData) {
+
+  //       const updatedData = cachedData.map((category) =>
+  //         category.id === data?.id ? { ...category, ...resp.data } : category
+  //       );
+  //       cacheData("Work Category", updatedData);
+  //     }
+
+  //     onClose()
+  //   }).catch((error)=>{
+  //      showToast(error?.response?.data?.message, "error")
+  //     setIsLoading(false)
+  //   })
+
+  // };
+  useEffect(() => {
+    reset({
+      name: data?.name || "",
+      description: data?.description || "",
+    });
+    setDescriptionLength(data?.description?.length || 0);
+  }, [data, reset]);
+
 
 
-     
   return (<>
-    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-        <div className="col-12 col-md-12">
-          <label className="form-label">Category Name</label>
-          <input type="text" 
-           {...register("name")} 
-             className={`form-control ${errors.name ? 'is-invalids' : ''}`}
-          />
-          {errors.name && <p className="text-danger">{errors.name.message}</p>}
-        </div> 
-        <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+      <div className="col-12 col-md-12">
+        <label className="form-label">Category Name</label>
+        <input type="text"
+          {...register("name")}
+          className={`form-control ${errors.name ? 'is-invalids' : ''}`}
+        />
+        {errors.name && <p className="text-danger">{errors.name.message}</p>}
+      </div>
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -114,25 +114,25 @@ useEffect(() => {
           <p className="text-danger">{errors.description.message}</p>
         )}
 
-        </div>
+      </div>
 
-        <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">           
-         {isLoading? "Please Wait...":"Submit"}       
+      <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"
+          type="button"
           className="btn btn-sm btn-label-secondary"
-          data-bs-dismiss="modal"
-          aria-label="Close"
+          onClick={onClose}
         >
           Cancel
         </button>
+
       </div>
-     
+
     </form>
- 
-    </>
+
+  </>
   )
 }
 
diff --git a/src/components/master/ManagePaymentMode.jsx b/src/components/master/ManagePaymentMode.jsx
index b05856db..761711d0 100644
--- a/src/components/master/ManagePaymentMode.jsx
+++ b/src/components/master/ManagePaymentMode.jsx
@@ -17,31 +17,31 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
     formState: { errors },
   } = useForm({
     resolver: zodResolver(ExpnseSchema),
-    defaultValues: { name: "",  description: "" },
+    defaultValues: { name: "", description: "" },
   });
 
   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){
-        UpdatePaymentMode({id:data.id,payload:{...payload,id:data.id}})
-    }else(
-        CreatePaymentMode(payload)
+    if (data) {
+      UpdatePaymentMode({ id: data.id, payload: { ...payload, id: data.id } })
+    } else (
+      CreatePaymentMode(payload)
     )
-    
+
   };
 
-  useEffect(()=>{
-    if(data){ 
+  useEffect(() => {
+    if (data) {
       reset({
-        name:data.name ?? "",
-        description:data.description ?? ""
+        name: data.name ?? "",
+        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="reset"
-          className="btn btn-sm btn-label-secondary "
-          data-bs-dismiss="modal"
-          aria-label="Close"
+          type="button"
+          className="btn btn-sm btn-label-secondary"
+          onClick={onClose}   // ✅ call onClose here
           disabled={isPending || Updating}
         >
           Cancel
         </button>
+
       </div>
     </form>
   );
diff --git a/src/pages/master/MasterPage.jsx b/src/pages/master/MasterPage.jsx
index 72710679..564fc036 100644
--- a/src/pages/master/MasterPage.jsx
+++ b/src/pages/master/MasterPage.jsx
@@ -122,14 +122,17 @@ const MasterPage = () => {
                             onChange={(e) => dispatch(changeMaster(e.target.value))}
                             name="DataTables_Table_0_length"
                             aria-controls="DataTables_Table_0"
-                            className="form-select form-select-sm"
+                            className="form-select py-1 px-2"
+                            style={{ fontSize: "0.875rem", height: "32px", width: "150px" }}
                             value={selectedMaster}
                           >
-                            {isLoading && (<option  value={null}>Loading...</option>)}
-                            {(!isLoading && data) && data?.map((item) => (
-
-                              <option key={item.id} value={item.name}>{item.name}</option>
-                            ))}
+                            {isLoading && <option value="">Loading...</option>}
+                            {!isLoading &&
+                              data?.map((item) => (
+                                <option key={item.id} value={item.name}>
+                                  {item.name}
+                                </option>
+                              ))}
                           </select>
                         </label>
                       </div>