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

src/components/Layout/Sidebar.jsx

@@ -25,7 +25,9 @@ const Sidebar = () => {
             />
           </span> */}
 
-          <small className="app-brand-link fw-bold navbar-brand text-green fs-6">
+          <small
+            className="app-brand-link fw-bold navbar-brand text-green fs-6"
+          >
             <span className="app-brand-logo demo">
               <img src="/img/brand/marco.png" width="50" />
             </span>
@@ -36,6 +38,7 @@ const Sidebar = () => {
         </Link>
 
        <small className="layout-menu-toggle menu-link text-large ms-auto">
+
           <i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
         </small>
       </div>
@@ -58,7 +61,7 @@ const Sidebar = () => {
           </>
         )}
         {data &&
-          data?.data?.map((section) => (
+          data?.data.map((section) => (
             <React.Fragment
               key={section.id || section.header || section.items[0]?.id}
             >

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/components/Project/Team/TeamEmployeeList.jsx

@@ -10,13 +10,11 @@ import {
 import useMaster, { useServices } from "../../../hooks/masterHook/useMaster";
 import showToast from "../../../services/toastService";
 import { useOrganizationEmployees } from "../../../hooks/useOrganization";
-import { useDispatch } from "react-redux";
-import { changeMaster } from "../../../slices/localVariablesSlice";
 
 const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
   const selectedProject = useSelectedProject();
   const debounceSearchTerm = useDebounce(searchTerm, 500);
-  const dispatch = useDispatch();
+
   const {
     data: employeesData = [],
     isLoading,
@@ -47,7 +45,6 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
     });
 
   useEffect(() => {
-    dispatch(changeMaster("Job Role"));
     if (employeesData?.data?.length > 0) {
       const available = employeesData.data.filter((emp) => {
         const projEmp = projectEmployees.find((pe) => pe.employeeId === emp.id);
@@ -186,7 +183,8 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
                   onChange={(e) =>
                     handleSelectChange(index, "serviceId", e.target.value)
                   }
-                  className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${emp.errors.serviceId ? "is-invalid" : ""
+                  className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
+                    emp.errors.serviceId ? "is-invalid" : ""
                   }`}
                 >
                   <option value="">Select Service</option>
@@ -207,7 +205,8 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
                   onChange={(e) =>
                     handleSelectChange(index, "jobRole", e.target.value)
                   }
-                  className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${emp.errors.jobRole ? "is-invalid" : ""
+                  className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
+                    emp.errors.jobRole ? "is-invalid" : ""
                   }`}
                 >
                   <option value="">Select Job Role</option>

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"