src/components/master/CreateActivity.jsx

@@ -123,7 +123,8 @@ const CreateActivity = ({ onClose }) => {
           <input
             type="text"
             {...register("activityName")}
-            className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""
+            className={`form-control form-control-sm ${
+              errors.activityName ? "is-invalid" : ""
             }`}
           />
           {errors.activityName && (
@@ -136,7 +137,8 @@ const CreateActivity = ({ onClose }) => {
           <input
             type="text"
             {...register("unitOfMeasurement")}
-            className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""
+            className={`form-control form-control-sm ${
+              errors.unitOfMeasurement ? "is-invalid" : ""
             }`}
           />
           {errors.unitOfMeasurement && (
@@ -224,13 +226,12 @@ const CreateActivity = ({ onClose }) => {
             {isLoading ? "Please Wait" : "Submit"}
           </button>
           <button
-            type="button"   // ✅ change to button
+            type="reset"
             className="btn btn-sm btn-label-secondary"
             onClick={handleClose}
           >
             Cancel
           </button>
-
         </div>
       </div>
     </form>

src/components/master/CreateContactCategory.jsx

@@ -97,16 +97,13 @@ const CreateContactCategory = ({ onClose }) => {
          {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"   // ✅ not reset
+          type="reset"
           className="btn btn-sm btn-label-secondary "
-          onClick={() => {
-            resetForm();   // clear inputs
-            onClose?.();   // close modal from parent
-          }}
+          data-bs-dismiss="modal"
+          aria-label="Close"
         >
           Cancel
         </button>
-
       </div>
      
     </form>

src/components/master/CreateContactTag.jsx

@@ -97,16 +97,13 @@ const CreateContactTag = ({ onClose }) => {
          {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"   // ✅ not reset
+          type="reset"
           className="btn btn-sm btn-label-secondary "
-          onClick={() => {
-            resetForm();   // clear inputs
-            onClose?.();   // close modal from parent
-          }}
+          data-bs-dismiss="modal"
+          aria-label="Close"
         >
           Cancel
         </button>
-
       </div>
      
     </form>

src/components/master/CreateJobRole.jsx

@@ -123,16 +123,13 @@ const CreateJobRole = ({ onClose }) => {
          {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"   // ✅ change from reset → button
+          type="reset"
           className="btn btn-sm btn-label-secondary "
-          onClick={() => {
-            resetForm();   // optional: clears form
-            onClose?.();   // ✅ close modal via parent
-          }}
+          data-bs-dismiss="modal"
+          aria-label="Close"
         >
           Cancel
         </button>
-
       </div>
      
     </form>

src/components/master/CreateRole.jsx

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

src/components/master/CreateWorkCategory.jsx

@@ -77,9 +77,9 @@ const CreateWorkCategory = ({ onClose }) => {
  
   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>
@@ -113,12 +113,10 @@ const CreateWorkCategory = ({ onClose }) => {
          {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"   // ✅ not reset
+          type="reset"
           className="btn btn-sm btn-label-secondary "
-          onClick={() => {
-            resetForm();   // clear inputs
-            onClose?.();   // close modal from parent
-          }}
+          data-bs-dismiss="modal"
+          aria-label="Close"
         >
           Cancel
         </button>

src/components/master/DeleteMaster.jsx

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

src/components/master/EditActivity.jsx

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

src/components/master/EditContactCategory.jsx

@@ -116,12 +116,10 @@ const EditContactCategory = ({ data, onClose }) => {
          {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"   // ✅ not reset
+          type="button"
           className="btn btn-sm btn-label-secondary "
-          onClick={() => {
-            resetForm();   // clear inputs
-            onClose?.();   // close modal from parent
-          }}
+          data-bs-dismiss="modal"
+          aria-label="Close"
         >
           Cancel
         </button>

src/components/master/EditContactTag.jsx

@@ -116,12 +116,10 @@ const EditContactTag = ({ data, onClose }) => {
          {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="button"   // ✅ not reset
+          type="button"
           className="btn btn-sm btn-label-secondary "
-          onClick={() => {
-            resetForm();   // clear inputs
-            onClose?.();   // close modal from parent
-          }}
+          data-bs-dismiss="modal"
+          aria-label="Close"
         >
           Cancel
         </button>

src/components/master/EditJobRole.jsx

@@ -134,13 +134,13 @@ const EditJobRole = ({ data, onClose }) => {
         <button
           type="button"
           className="btn btn-sm btn-label-secondary"
-          onClick={onClose}   // 👈 This will now close the popup
+          data-bs-dismiss="modal"
+          aria-label="Close"
         >
           Cancel
         </button>
       </div>
      
-
     </form>
  
     </>

src/components/master/EditRole.jsx

@@ -280,11 +280,11 @@ const EditMaster = ({ master, onClose }) => {
         <button
           type="button"
           className="btn btn-sm btn-label-secondary"
-          onClick={onClose}
+          data-bs-dismiss="modal"
+          aria-label="Close"
         >
           Cancel
         </button>
-
       </div>
 
     </form>

src/components/master/EditWorkCategory.jsx

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

src/components/master/ManagePaymentMode.jsx

@@ -79,14 +79,14 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
           {isPending || Updating? "Please Wait..." : Updating ? "Update" : "Submit"}
         </button>
         <button
-          type="button"
+          type="reset"
           className="btn btn-sm btn-label-secondary "
-          onClick={onClose}   // ✅ call onClose here
+          data-bs-dismiss="modal"
+          aria-label="Close"
           disabled={isPending || Updating}
         >
           Cancel
         </button>
-
       </div>
     </form>
   );

src/pages/master/MasterPage.jsx

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