From e39355c6fd229704d7a8242764b71f4ce721622c Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Fri, 5 Sep 2025 12:00:26 +0530
Subject: [PATCH] Changes in UI for Masters component.

---
 src/components/master/CreateActivity.jsx      |  5 ++++-
 .../master/CreateContactCategory.jsx          | 22 +++++++++----------
 src/components/master/CreateContactTag.jsx    | 11 +++++-----
 src/components/master/CreateJobRole.jsx       | 11 +++++-----
 src/components/master/CreateRole.jsx          | 11 +++++-----
 src/components/master/CreateWorkCategory.jsx  |  8 +++----
 src/components/master/EditActivity.jsx        |  2 +-
 src/components/master/EditContactCategory.jsx |  8 +++----
 src/components/master/EditContactTag.jsx      |  8 +++----
 src/components/master/EditJobRole.jsx         |  8 +++----
 src/components/master/EditRole.jsx            |  7 ++++--
 src/components/master/EditWorkCategory.jsx    | 11 +++++-----
 src/components/master/ManagePaymentMode.jsx   | 22 +++++--------------
 src/pages/master/MasterPage.jsx               |  2 +-
 14 files changed, 63 insertions(+), 73 deletions(-)

diff --git a/src/components/master/CreateActivity.jsx b/src/components/master/CreateActivity.jsx
index 85a78725..11f60369 100644
--- a/src/components/master/CreateActivity.jsx
+++ b/src/components/master/CreateActivity.jsx
@@ -223,11 +223,14 @@ const CreateActivity = ({ onClose }) => {
         <div className="col-12 text-end mt-3">
           <button
             type="button"   // ✅ change to button
-            className="btn btn-sm btn-label-secondary"
+            className="btn btn-sm btn-label-secondary me-3"
             onClick={handleClose}
           >
             Cancel
           </button>
+          <button type="submit" className="btn btn-sm btn-primary">
+            {isLoading ? "Please Wait" : "Submit"}
+          </button>
 
         </div>
       </div>
diff --git a/src/components/master/CreateContactCategory.jsx b/src/components/master/CreateContactCategory.jsx
index 797e5dd2..3b206736 100644
--- a/src/components/master/CreateContactCategory.jsx
+++ b/src/components/master/CreateContactCategory.jsx
@@ -6,7 +6,7 @@ import { MasterRespository } from '../../repositories/MastersRepository';
 import { clearApiCacheKey } from '../../slices/apiCacheSlice';
 import { getCachedData, cacheData } from '../../slices/apiDataManager';
 import showToast from '../../services/toastService';
-import {useCreateContactCategory} from '../../hooks/masterHook/useMaster';
+import { useCreateContactCategory } from '../../hooks/masterHook/useMaster';
 import Label from '../common/Label';
 
 
@@ -66,16 +66,16 @@ const CreateContactCategory = ({ onClose }) => {
 
   return (<>
     <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 col-md-12">
-        <label className="form-label">Category Name</label>
+      <div className="col-12 col-md-12 text-start">
+        <Label className="form-label" required>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 text-start">
+        <Label className="form-label" htmlFor="description" required>Description</Label>
         <textarea
           rows="3"
           {...register("description")}
@@ -93,13 +93,11 @@ const CreateContactCategory = ({ onClose }) => {
         )}
       </div>
 
-      <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">
-          {isLoading ? "Please Wait..." : "Submit"}
-        </button>
+      <div className="col-12 text-end mt-3">
+
         <button
           type="button"   // ✅ not reset
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary me-3"
           onClick={() => {
             resetForm();   // clear inputs
             onClose?.();   // close modal from parent
@@ -107,7 +105,9 @@ const CreateContactCategory = ({ onClose }) => {
         >
           Cancel
         </button>
-
+        <button type="submit" className="btn btn-sm btn-primary">
+          {isLoading ? "Please Wait..." : "Submit"}
+        </button>
       </div>
 
     </form>
diff --git a/src/components/master/CreateContactTag.jsx b/src/components/master/CreateContactTag.jsx
index c499f3a2..fa3fd300 100644
--- a/src/components/master/CreateContactTag.jsx
+++ b/src/components/master/CreateContactTag.jsx
@@ -93,13 +93,11 @@ const CreateContactTag = ({ onClose }) => {
         )}
       </div>
 
-      <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">
-          {isLoading ? "Please Wait..." : "Submit"}
-        </button>
+      <div className="col-12 text-end mt-3">
+        
         <button
           type="button"   // ✅ not reset
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary me-3"
           onClick={() => {
             resetForm();   // clear inputs
             onClose?.();   // close modal from parent
@@ -107,6 +105,9 @@ const CreateContactTag = ({ onClose }) => {
         >
           Cancel
         </button>
+        <button type="submit" className="btn btn-sm btn-primary">
+          {isLoading ? "Please Wait..." : "Submit"}
+        </button>
 
       </div>
 
diff --git a/src/components/master/CreateJobRole.jsx b/src/components/master/CreateJobRole.jsx
index 0b242a4a..bb947ed6 100644
--- a/src/components/master/CreateJobRole.jsx
+++ b/src/components/master/CreateJobRole.jsx
@@ -119,13 +119,11 @@ const CreateJobRole = ({ onClose }) => {
         )}
       </div>
 
-      <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">
-          {isLoading ? "Please Wait..." : "Submit"}
-        </button>
+      <div className="col-12 text-end mt-3">
+       
         <button
           type="button"   // ✅ change from reset → button
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary me-3"
           onClick={() => {
             resetForm();   // optional: clears form
             onClose?.();   // ✅ close modal via parent
@@ -133,6 +131,9 @@ const CreateJobRole = ({ onClose }) => {
         >
           Cancel
         </button>
+         <button type="submit" className="btn btn-sm btn-primary">
+          {isLoading ? "Please Wait..." : "Submit"}
+        </button>
 
       </div>
 
diff --git a/src/components/master/CreateRole.jsx b/src/components/master/CreateRole.jsx
index 100ce2b8..d3e5f9f6 100644
--- a/src/components/master/CreateRole.jsx
+++ b/src/components/master/CreateRole.jsx
@@ -229,17 +229,18 @@ const CreateRole = ({ modalType, onClose }) => {
 
 
       {masterFeatures && (
-        <div className="col-12 text-center">
-          <button type="submit" className="btn btn-sm btn-primary me-3">
-            {isLoading ? "Please Wait..." : "Submit"}
-          </button>
+        <div className="col-12 text-end mt-3">
+         
           <button
             type="button"
-            className="btn btn-sm btn-label-secondary"
+            className="btn btn-sm btn-label-secondary me-3"
             onClick={onClose}
           >
             Cancel
           </button>
+           <button type="submit" className="btn btn-sm btn-primary">
+            {isLoading ? "Please Wait..." : "Submit"}
+          </button>
 
         </div>
       )}
diff --git a/src/components/master/CreateWorkCategory.jsx b/src/components/master/CreateWorkCategory.jsx
index bec0cac8..3743038d 100644
--- a/src/components/master/CreateWorkCategory.jsx
+++ b/src/components/master/CreateWorkCategory.jsx
@@ -109,13 +109,11 @@ const CreateWorkCategory = ({ onClose }) => {
         )}
       </div>
 
-      <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">
-          {isLoading ? "Please Wait..." : "Submit"}
-        </button>
+      <div className="col-12 text-end mt-3">
+       
         <button
           type="button"   // ✅ not reset
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary me-3"
           onClick={() => {
             resetForm();   // clear inputs
             onClose?.();   // close modal from parent
diff --git a/src/components/master/EditActivity.jsx b/src/components/master/EditActivity.jsx
index 55eaa3e1..797152ef 100644
--- a/src/components/master/EditActivity.jsx
+++ b/src/components/master/EditActivity.jsx
@@ -240,7 +240,7 @@ const UpdateActivity = ({ activityData, onClose }) => {
         <div className="col-12 text-end mt-3">
           <button
             type="button"   // ✅ change to button
-            className="btn btn-sm btn-label-secondary"
+            className="btn btn-sm btn-label-secondary me-3"
             onClick={onClose}
           >
             Cancel
diff --git a/src/components/master/EditContactCategory.jsx b/src/components/master/EditContactCategory.jsx
index 28c20a32..91b1d4c1 100644
--- a/src/components/master/EditContactCategory.jsx
+++ b/src/components/master/EditContactCategory.jsx
@@ -112,13 +112,11 @@ const EditContactCategory = ({ data, onClose }) => {
         )}
       </div>
 
-      <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">
-          {isLoading ? "Please Wait..." : "Submit"}
-        </button>
+      <div className="col-12 text-end mt-3">
+        
         <button
           type="button"   // ✅ not reset
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary me-3"
           onClick={() => {
             resetForm();   // clear inputs
             onClose?.();   // close modal from parent
diff --git a/src/components/master/EditContactTag.jsx b/src/components/master/EditContactTag.jsx
index d61d6511..59071deb 100644
--- a/src/components/master/EditContactTag.jsx
+++ b/src/components/master/EditContactTag.jsx
@@ -112,13 +112,11 @@ const EditContactTag = ({ data, onClose }) => {
         )}
       </div>
 
-      <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">
-          {isLoading ? "Please Wait..." : "Submit"}
-        </button>
+      <div className="col-12 text-end mt-3">
+       
         <button
           type="button"   // ✅ not reset
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary me-3"
           onClick={() => {
             resetForm();   // clear inputs
             onClose?.();   // close modal from parent
diff --git a/src/components/master/EditJobRole.jsx b/src/components/master/EditJobRole.jsx
index 1b88c091..f9f84cd0 100644
--- a/src/components/master/EditJobRole.jsx
+++ b/src/components/master/EditJobRole.jsx
@@ -128,13 +128,11 @@ const EditJobRole = ({ data, onClose }) => {
 
       </div>
 
-      <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">
-          {isLoading ? "Please Wait..." : "Submit"}
-        </button>
+      <div className="col-12 text-end mt-3">
+        
         <button
           type="button"
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary me-3"
           onClick={onClose}   // 👈 This will now close the popup
         >
           Cancel
diff --git a/src/components/master/EditRole.jsx b/src/components/master/EditRole.jsx
index f16841bf..714a33b3 100644
--- a/src/components/master/EditRole.jsx
+++ b/src/components/master/EditRole.jsx
@@ -276,14 +276,17 @@ const EditMaster = ({ master, onClose }) => {
 
 
 
-      <div className="col-12 text-end">
+      <div className="col-12 text-end mt-3">
         <button
           type="button"
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary me-3"
+          data-bs-dismiss="modal"
+          aria-label="Close"
           onClick={onClose}
         >
           Cancel
         </button>
+        <button type="submit" className="btn btn-sm btn-primary"> {isLoading ? "Please Wait..." : "Submit"}</button>
 
       </div>
 
diff --git a/src/components/master/EditWorkCategory.jsx b/src/components/master/EditWorkCategory.jsx
index 8a4c4072..a2cbd41c 100644
--- a/src/components/master/EditWorkCategory.jsx
+++ b/src/components/master/EditWorkCategory.jsx
@@ -116,17 +116,18 @@ const EditWorkCategory = ({ data, onClose }) => {
 
       </div>
 
-      <div className="col-12 text-center">
-        <button type="submit" className="btn btn-sm btn-primary me-3">
-          {isLoading ? "Please Wait..." : "Submit"}
-        </button>
+      <div className="col-12 text-center mt-3">
+        
         <button
           type="button"
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary me-3"
           onClick={onClose}
         >
           Cancel
         </button>
+        <button type="submit" className="btn btn-sm btn-primary">
+          {isLoading ? "Please Wait..." : "Submit"}
+        </button>
 
       </div>
 
diff --git a/src/components/master/ManagePaymentMode.jsx b/src/components/master/ManagePaymentMode.jsx
index cdb2c89d..b974e3b3 100644
--- a/src/components/master/ManagePaymentMode.jsx
+++ b/src/components/master/ManagePaymentMode.jsx
@@ -71,35 +71,23 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
         )}
       </div>
 
-      <div className="col-12 text-center">
-        <button
-          type="submit"
-          className="btn btn-sm btn-primary me-3"
-          disabled={isPending || Updating}
-        >
-          {isPending || Updating ? "Please Wait..." : Updating ? "Update" : "Submit"}
-        </button>
-      <div className="col-12 text-end">
+      <div className="col-12 text-end mt-3">
+      
         <button
           type="button"
-          className="btn btn-sm btn-label-secondary"
-          onClick={onClose}   // ✅ call onClose here
-          type="reset"
           className="btn btn-sm btn-label-secondary me-3"
-          data-bs-dismiss="modal"
-          aria-label="Close"
+          onClick={onClose}   // ✅ call onClose here
           disabled={isPending || Updating}
         >
           Cancel
         </button>
-        <button
+          <button
           type="submit"
           className="btn btn-sm btn-primary"
           disabled={isPending || Updating}
         >
-          {isPending || Updating? "Please Wait..." : Updating ? "Update" : "Submit"}
+          {isPending || Updating ? "Please Wait..." : Updating ? "Update" : "Submit"}
         </button>
-        
       </div>
     </form>
   );
diff --git a/src/pages/master/MasterPage.jsx b/src/pages/master/MasterPage.jsx
index 564fc036..d61c3133 100644
--- a/src/pages/master/MasterPage.jsx
+++ b/src/pages/master/MasterPage.jsx
@@ -123,7 +123,7 @@ const MasterPage = () => {
                             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" }}
+                            style={{ fontSize: "0.875rem", height: "32px", width: "170px" }}
                             value={selectedMaster}
                           >
                             {isLoading && <option value="">Loading...</option>}