Merge pull request 'Cancel button not closing All fields popup in masters' (#362) from Kartik_Bug#979 into Issues_Aug_2W

Reviewed-on: #362
Merged

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 {
     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 addChecklistItem = useCallback(() => {
 
     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 onSubmit = (formData) => {
   //       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,8 +123,7 @@ useEffect(() => {
           <input
             type="text"
             {...register("activityName")}
-            className={`form-control form-control-sm ${
+            className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""
-              errors.activityName ? "is-invalid" : ""
               }`}
           />
           {errors.activityName && (
@@ -137,8 +136,7 @@ useEffect(() => {
           <input
             type="text"
             {...register("unitOfMeasurement")}
-            className={`form-control form-control-sm ${
+            className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""
-              errors.unitOfMeasurement ? "is-invalid" : ""
               }`}
           />
           {errors.unitOfMeasurement && (
@@ -147,7 +145,7 @@ 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">
@@ -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>

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 onSubmit = (payload) => {
   //       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,16 +94,19 @@ useEffect(() => {
 
       <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="reset"
+          type="button"   // ✅ not reset
-          className="btn btn-sm btn-label-secondary "
+          className="btn btn-sm btn-label-secondary"
-          data-bs-dismiss="modal"
+          onClick={() => {
-          aria-label="Close"
+            resetForm();   // clear inputs
+            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 onSubmit = (payload) => {
   //       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,16 +94,19 @@ useEffect(() => {
 
       <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="reset"
+          type="button"   // ✅ not reset
-          className="btn btn-sm btn-label-secondary "
+          className="btn btn-sm btn-label-secondary"
-          data-bs-dismiss="modal"
+          onClick={() => {
-          aria-label="Close"
+            resetForm();   // clear inputs
+            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,16 +120,19 @@ 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="reset"
+          type="button"   // ✅ change from reset → button
-          className="btn btn-sm btn-label-secondary "
+          className="btn btn-sm btn-label-secondary"
-          data-bs-dismiss="modal"
+          onClick={() => {
-          aria-label="Close"
+            resetForm();   // optional: clears form
+            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="reset"
+            type="button"
             className="btn btn-sm btn-label-secondary"
-            data-bs-dismiss="modal"
+            onClick={onClose}
-            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 onSubmit = (payload) => {
 
   // };
 
-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,13 +110,15 @@ useEffect(() => {
 
       <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="reset"
+          type="button"   // ✅ not reset
-          className="btn btn-sm btn-label-secondary "
+          className="btn btn-sm btn-label-secondary"
-          data-bs-dismiss="modal"
+          onClick={() => {
-          aria-label="Close"
+            resetForm();   // clear inputs
+            onClose?.();   // close modal from parent
+          }}
         >
           Cancel
         </button>

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"
+          onClick={() => {
-          aria-label="Close"
+            onClose?.(); // properly close modal
+          }}
         >
           Cancel
         </button>
+
       </div>
     </div>
   );

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}
           >

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 onSubmit = (formData) => {
 
   //   };
 
-const resetForm = () => {
+  const resetForm = () => {
     reset({ name: "", description: "" });
     setDescriptionLength(0);
-};
+  };
 
-useEffect(() => {
+  useEffect(() => {
     return () => resetForm();
-}, []);
+  }, []);
 
   return (<>
     <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
@@ -113,13 +113,15 @@ useEffect(() => {
 
       <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="button"   // ✅ not reset
-          className="btn btn-sm btn-label-secondary "
+          className="btn btn-sm btn-label-secondary"
-          data-bs-dismiss="modal"
+          onClick={() => {
-          aria-label="Close"
+            resetForm();   // clear inputs
+            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 onSubmit = (formData) => {
 
   //   };
 
-const resetForm = () => {
+  const resetForm = () => {
     reset({ name: "", description: "" });
     setDescriptionLength(0);
-};
+  };
 
-useEffect(() => {
+  useEffect(() => {
     return () => resetForm();
-}, []);
+  }, []);
 
   return (<>
     <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
@@ -113,13 +113,15 @@ useEffect(() => {
 
       <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="button"   // ✅ not reset
-          className="btn btn-sm btn-label-secondary "
+          className="btn btn-sm btn-label-secondary"
-          data-bs-dismiss="modal"
+          onClick={() => {
-          aria-label="Close"
+            resetForm();   // clear inputs
+            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 [descriptionLength, setDescriptionLength] = useState(data?.description?.le
     },
   });
 
-  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 [descriptionLength, setDescriptionLength] = useState(data?.description?.le
 
       <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"
-          data-bs-dismiss="modal"
+          onClick={onClose}   // 👈 This will now close the popup
-          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"
-          data-bs-dismiss="modal"
+          onClick={onClose}
-          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 onSubmit = (formdata) => {
   //   })
 
   // };
-useEffect(() => {
+  useEffect(() => {
     reset({
       name: data?.name || "",
       description: data?.description || "",
     });
     setDescriptionLength(data?.description?.length || 0);
-}, [data, reset]);
+  }, [data, reset]);
 
 
 
@@ -118,16 +118,16 @@ useEffect(() => {
 
       <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="reset"
+          type="button"
           className="btn btn-sm btn-label-secondary"
-          data-bs-dismiss="modal"
+          onClick={onClose}
-          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="reset"
+          type="button"
-          className="btn btn-sm btn-label-secondary "
+          className="btn btn-sm btn-label-secondary"
-          data-bs-dismiss="modal"
+          onClick={onClose}   // ✅ call onClose here
-          aria-label="Close"
           disabled={isPending || Updating}
         >
           Cancel
         </button>
+
       </div>
     </form>
   );

src/pages/master/MasterPage.jsx

@@ -122,13 +122,16 @@ 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 && <option value="">Loading...</option>}
-                            {(!isLoading && data) && data?.map((item) => (
+                            {!isLoading &&
-
+                              data?.map((item) => (
-                              <option key={item.id} value={item.name}>{item.name}</option>
+                                <option key={item.id} value={item.name}>
+                                  {item.name}
+                                </option>
                               ))}
                           </select>
                         </label>