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);
@@ -122,7 +119,7 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
       status: true,
     }));
 
-    handleAssignEmployee({ payload, actionType: "assign" });
+    handleAssignEmployee({ payload,actionType:"assign"} );
 
     setEmployees((prev) =>
       prev.map((emp) => ({
@@ -135,11 +132,11 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
     );
   };
 
-  if (isLoading) {
-    return (<div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">Loading employees...</p></div>);
-  }
+if (isLoading) {
+  return (   <div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">Loading employees...</p></div>) ;
+}
 
-  if (isError) {
+if (isError) {
   return (
     <div className="page-min-h d-flex justify-content-center align-items-center ">
   {error?.status === 400 ? (
@@ -147,14 +144,14 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
   ) : (
     <p className="m-0 dange-text">Something went wrong. Please try again later.</p>
   )}
-      </div>
+</div>
 
   );
-  }
+}
 
-  if (employees.length === 0) {
-    return (<div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">No available employees to assign.</p></div>);
-  }
+if (employees.length === 0) {
+  return(<div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">No available employees to assign.</p></div>) ;
+}
 
 
   return (
@@ -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 = () => {
@@ -46,9 +46,9 @@ const MasterPage = () => {
     isError: isMasterError,
   } = useMaster();
   const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();
-  const [isDeleletingServiceItem,setDeleletingServiceItem] = useState({isOpen:false,ItemId:null,whichItem:null})
-  const {mutate:DeleteSericeGroup,isPending:deletingGroup}  =useDeleteServiceGroup()
-  const {mutate:DeleteAcivity,isPending:deletingActivity} = useDeleteActivity()
+  const [isDeleletingServiceItem, setDeleletingServiceItem] = useState({ isOpen: false, ItemId: null, whichItem: null })
+  const { mutate: DeleteSericeGroup, isPending: deletingGroup } = useDeleteServiceGroup()
+  const { mutate: DeleteAcivity, isPending: deletingActivity } = useDeleteActivity()
 
   const [modalConfig, setModalConfig] = useState(null);
   const [deleteData, setDeleteData] = useState(null);
@@ -89,13 +89,13 @@ const MasterPage = () => {
   };
 
 
-  const handleDeleteServiceItem =()=>{
-    if(!isDeleletingServiceItem.ItemId) return
+  const handleDeleteServiceItem = () => {
+    if (!isDeleletingServiceItem.ItemId) return
     debugger
-    if(isDeleletingServiceItem.whichItem === "activity"){
-        DeleteAcivity(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
-    }else{
-      DeleteSericeGroup(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
+    if (isDeleletingServiceItem.whichItem === "activity") {
+      DeleteAcivity(isDeleletingServiceItem.ItemId, { onSuccess: () => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null }) })
+    } else {
+      DeleteSericeGroup(isDeleletingServiceItem.ItemId, { onSuccess: () => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null }) })
     }
 
 
@@ -115,7 +115,7 @@ const MasterPage = () => {
     );
 
   return (
-    <MasterContext.Provider value={{setDeleletingServiceItem}}>
+    <MasterContext.Provider value={{ setDeleletingServiceItem }}>
       {modalConfig && (
         <GlobalModel
           size={
@@ -153,7 +153,7 @@ const MasterPage = () => {
         isOpen={!!isDeleletingServiceItem?.isOpen}
         loading={deletingActivity}
         onSubmit={handleDeleteServiceItem}
-        onClose={() => setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})}
+        onClose={() => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null })}
       />
 
       <div className="container-fluid">
@@ -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"