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

src/components/Directory/ManageContact.jsx

@@ -21,6 +21,7 @@ import InputSuggestions from "../common/InputSuggestion";
 import Label from "../common/Label";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
+import { BUCKET_BG_CLASSES } from "../../utils/constants";
 
 const ManageContact = ({ contactId, closeModal }) => {
   // fetch master data
@@ -180,6 +181,7 @@ const ManageContact = ({ contactId, closeModal }) => {
   };
 
   const isPending = updating || creating;
+
   return (
     <FormProvider {...methods}>
       <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
@@ -456,15 +458,25 @@ const ManageContact = ({ contactId, closeModal }) => {
         {/* Buckets */}
         <div className="row">
           <div className="col-md-12 mt-3 text-start">
-            <label className="form-label mb-2">Select Bucket</label>
-            <ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
-              {bucketsLoaging && <p>Loading...</p>}
-              {buckets?.map((item) => (
-                <li
-                  key={item.id}
-                  className="list-inline-item flex-shrink-0 me-6 mb-1"
+            <Label className="form-label mb-2" required>Select Bucket</Label>
+
+            <div
+              className="d-flex flex-wrap gap-3 p-1"
+              style={{
+                maxHeight: "200px",
+                overflowY: "auto",
+              }}
             >
-                  <div className="form-check">
+              {bucketsLoaging && <p>Loading...</p>}
+
+              {buckets?.map((item, index) => (
+                <div
+                  key={item.id}
+                  className={`card p-2 shadow-sm flex-shrink-0 ${BUCKET_BG_CLASSES  [index % BUCKET_BG_CLASSES.length]}`}
+                  onClick={() => handleCheckboxChange(item.id)}
+                >
+
+                  <div className="form-check m-0">
                     <input
                       type="checkbox"
                       className="form-check-input"
@@ -472,22 +484,24 @@ const ManageContact = ({ contactId, closeModal }) => {
                       checked={watchBucketIds.includes(item.id)}
                       onChange={() => handleCheckboxChange(item.id)}
                     />
-                    <label
-                      className="form-check-label"
-                      htmlFor={`item-${item.id}`}
-                    >
+                    <label className="form-check-label ms-0" htmlFor={`item-${item.id}`}>
                       {item.name}
                     </label>
                   </div>
-                </li>
+                </div>
               ))}
-            </ul>
+
+            </div>
+
+          </div>
+          <div className="text-start mt-3 mb-3">
             {errors.bucketIds && (
               <small className="danger-text">{errors.bucketIds.message}</small>
             )}
           </div>
         </div>
 
+
         {/* Address + Description */}
         <div className="col-12 text-start">
           <label className="form-label">Address</label>

src/components/Layout/Header.jsx

@@ -218,7 +218,7 @@ const Header = () => {
                   projectsForDropdown &&
                   projectsForDropdown.length > 0 && (
                     <ul
-                    className="dropdown-menu"
+                      className="dropdown-menu custom-scrollbar"
                       style={{ overflow: "auto", maxHeight: "300px" }}
                     >
                       {(isDashboardPath || isCollectionPath) && (

src/components/Project/ProjectCard.jsx

@@ -105,7 +105,7 @@ const ProjectCard = ({ project, isCore = true }) => {
                   >
                     {project?.shortName ? project?.shortName : project?.name}
                   </h5>
-                  <div className="client-info text-body">
+                  <div className="client-info text-body text-start">
                     <span>{project?.shortName ? project?.name : ""}</span>
                   </div>
                 </div>

src/components/ServiceProject/ManageServiceProject.jsx

@@ -147,7 +147,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               </div>
 
               <i
-                className="bx bx-plus-circle bx-xs cursor-pointer text-primary "
+                className="bx bx-plus-circle bx-xs cursor-pointer text-primary mb-3"
                 onClick={() => {
                   onClose();
                   openOrgModal({ startStep: 2 });

src/pages/DailyProgressReport/DailyProgrssReport.jsx

@@ -97,7 +97,7 @@ const DailyProgrssReport = () => {
           ]}
         />
 
-        <div className="card card-fullscreen p-5">
+        <div className="card page-min-h p-5">
           {data?.length > 0 && (
             <div className="col-sm-4 col-md-3 col-12 text-start">
               <AppFormController

src/utils/constants.jsx

@@ -258,3 +258,16 @@ export const JOBS_STATUS_IDS = [
     label: "On Hold",
   },
 ];
+
+export const BUCKET_BG_CLASSES = [
+  "bg-label-primary bg-opacity-10",
+  "bg-label-secondary bg-opacity-10",
+  "bg-label-success bg-opacity-10",
+  "bg-label-info bg-opacity-10",
+  "bg-label-warning bg-opacity-10",
+  "bg-label-danger bg-opacity-10",
+  "bg-label-dark bg-opacity-10",
+  "bg-label-primary bg-opacity-25",
+  "bg-label-success bg-opacity-25",
+  "bg-label-info bg-opacity-25",
+];