src/components/master/CreateActivity.jsx

@@ -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 && (
@@ -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

@@ -97,13 +97,16 @@ useEffect(() => {
           {isLoading ? "Please Wait..." : "Submit"}
         </button>
         <button
-          type="reset"
+          type="button"   // ✅ not reset
           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

@@ -97,13 +97,16 @@ useEffect(() => {
           {isLoading ? "Please Wait..." : "Submit"}
         </button>
         <button
-          type="reset"
+          type="button"   // ✅ not reset
           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

@@ -123,13 +123,16 @@ const CreateJobRole = ({onClose}) => {
           {isLoading ? "Please Wait..." : "Submit"}
         </button>
         <button
-          type="reset"
+          type="button"   // ✅ change from reset → button
           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

@@ -77,9 +77,9 @@ useEffect(() => {
 
   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,10 +113,12 @@ useEffect(() => {
           {isLoading ? "Please Wait..." : "Submit"}
         </button>
         <button
-          type="reset"
+          type="button"   // ✅ not reset
           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

@@ -116,10 +116,12 @@ useEffect(() => {
           {isLoading ? "Please Wait..." : "Submit"}
         </button>
         <button
-          type="button"
+          type="button"   // ✅ not reset
           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

@@ -116,10 +116,12 @@ useEffect(() => {
           {isLoading ? "Please Wait..." : "Submit"}
         </button>
         <button
-          type="button"
+          type="button"   // ✅ not reset
           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

@@ -134,13 +134,13 @@ const [descriptionLength, setDescriptionLength] = useState(data?.description?.le
         <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

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

@@ -121,13 +121,13 @@ useEffect(() => {
           {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

@@ -79,14 +79,14 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
           {isPending || Updating ? "Please Wait..." : Updating ? "Update" : "Submit"}
         </button>
         <button
-          type="reset"
+          type="button"
           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>