Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into Adding_New_Dropdown

src/components/Organization/OrgPicker.css

@@ -22,3 +22,35 @@
 .scrollable-tbody:hover::-webkit-scrollbar-track {
   background: transparent;
 }
+
+/* For Master Page */
+
+/* Thin scrollbar for the dropdown */
+.thin-scroll::-webkit-scrollbar {
+  width: 5px; /* width of vertical scrollbar */
+}
+
+.thin-scroll::-webkit-scrollbar-track {
+  background: transparent; /* track color */
+  margin-bottom: 4px;
+
+}
+
+.thin-scroll::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.3); /* scrollbar thumb color */
+  border-radius: 10px; /* rounded edges */
+  
+}
+
+.thin-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5); /* hover effect */
+}
+
+.full-highlight {
+  border: 1px solid rgba(0, 0, 0, 0.15); /* subtle border all sides */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* shadow all around */
+  border-radius: 0.5rem; /* rounded corners for modern look */
+  background-color: #fff; /* ensure background is visible */
+  padding: 0.25rem 0; /* optional: spacing inside dropdown */
+}
+

src/pages/master/MasterPage.jsx

@@ -15,7 +15,7 @@ import { changeMaster } from "../../slices/localVariablesSlice";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_MASTER } from "../../utils/constants";
 import GlobalModel from "../../components/common/GlobalModel";
-
+import "../../components/Organization/OrgPicker.css";
 
 export const MasterContext = createContext();
 export const useMasterContext = () => {
@@ -168,26 +168,51 @@ const MasterPage = () => {
               style={{ overflow: "hidden" }}
             >
               <div className="row mb-2">
-                <div className="col-12 col-md-3">
-                  <select
-                    className="form-select py-1 px-2"
-                   
-                    value={selectedMaster}
-                    onChange={(e) => dispatch(changeMaster(e.target.value))}
-                  >
+                <div className="col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
+                  <div className="btn-group w-100">
                     {menuLoading ? (
-                      <option value="">Loading...</option>
+                      <span className="btn btn-sm w-100 border d-flex justify-content-start">
+                        Loading...
+                      </span>
                     ) : (
-                      menuData?.map((item) => (
-                        <option key={item.id} value={item.name}>
+                      <>
+                        <button
+                          className="btn btn-sm w-100 border fs-6 dropdown-toggle d-flex justify-content-between align-items-center"
+                          type="button"
+                          data-bs-toggle="dropdown"
+                          aria-expanded="false"
+                        >
+                          <span className="text-start">{selectedMaster || "Select Master"}</span>
+                        </button>
+
+                        <ul
+                          className="dropdown-menu w-100 thin-scroll full-highlight"
+                          style={{ maxHeight: "250px", overflowY: "auto" }}
+                        >
+                          {menuData?.map((item) => (
+                            <li key={item.id}>
+                              <button
+                                className="dropdown-item text-start"
+                                onClick={() => dispatch(changeMaster(item.name))}
+                              >
                                 {item.name}
-                        </option>
-                      ))
+                              </button>
+                            </li>
+                          ))}
+                        </ul>
+
+                      </>
                     )}
-                  </select>
                   </div>
-                <div className="col-12 col-md-9  d-flex justify-content-between justify-content-md-end align-items-center gap-2 mt-2 mt-md-0">
-                  <div className="col-8 col-md-3">
+                </div>
+
+
+
+
+
+
+                <div className="col-md-9 col-sm-6 d-flex justify-content-end align-items-center gap-2">
+                  <div className="w-25">
                     <input
                       type="search"
                       className="form-control form-control-sm"