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 = () => {
@@ -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"