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>
+            <Label className="form-label mb-2" required>Select Bucket</Label>
-            <ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
+
-              {bucketsLoaging && <p>Loading...</p>}
+            <div
-              {buckets?.map((item) => (
+              className="d-flex flex-wrap gap-3 p-1"
-                <li
+              style={{
-                  key={item.id}
+                maxHeight: "200px",
-                  className="list-inline-item flex-shrink-0 me-6 mb-1"
+                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
+                    <label className="form-check-label ms-0" htmlFor={`item-${item.id}`}>
-                      className="form-check-label"
-                      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

@@ -26,10 +26,10 @@ const Header = () => {
   const dispatch = useDispatch();
   const { data, loading } = useMaster();
   const navigate = useNavigate();
-  const {onOpen} = useAuthModal()
+  const { onOpen } = useAuthModal()
-  const { onOpen:changePass } = useModal("ChangePassword");
+  const { onOpen: changePass } = useModal("ChangePassword");
   const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
-  const { mutate : logout,isPending:logouting} = useLogout()
+  const { mutate: logout, isPending: logouting } = useLogout()
 
   const isDashboardPath =
     /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
@@ -54,7 +54,7 @@ const Header = () => {
       /^\/advance-payment(\/[0-9a-fA-F-]{36})?$/.test(pathname);
 
 
-    return !(isDirectoryPath || isProfilePage || isExpensePage || isPaymentRequest || isRecurringExpense || isAdvancePayment ||isServiceProjectPage || isAdvancePayment1);
+    return !(isDirectoryPath || isProfilePage || isExpensePage || isPaymentRequest || isRecurringExpense || isAdvancePayment || isServiceProjectPage || isAdvancePayment1);
   };
   const allowedProjectStatusIds = [
     "603e994b-a27f-4e5d-a251-f3d69b0498ba",
@@ -218,10 +218,10 @@ const Header = () => {
                   projectsForDropdown &&
                   projectsForDropdown.length > 0 && (
                     <ul
-                    className="dropdown-menu"
+                      className="dropdown-menu custom-scrollbar"
                       style={{ overflow: "auto", maxHeight: "300px" }}
                     >
-                    {(isDashboardPath|| isCollectionPath) &&(
+                      {(isDashboardPath || isCollectionPath) && (
                         <li>
                           <button
                             className="dropdown-item"
@@ -402,7 +402,7 @@ const Header = () => {
               <li>
                 <div className="dropdown-divider"></div>
               </li>
-               <li onClick={()=>onOpen()}>
+              <li onClick={() => onOpen()}>
                 {" "}
                 <a
                   className="dropdown-item cusor-pointer"
@@ -448,9 +448,9 @@ const Header = () => {
                 <a
                   aria-label="click to log out"
                   className="dropdown-item cusor-pointer"
-                  onClick={()=>logout()}
+                  onClick={() => logout()}
                 >
-                 {logouting ? "Please Wait":<> <i className="bx bx-log-out me-2"></i>
+                  {logouting ? "Please Wait" : <> <i className="bx bx-log-out me-2"></i>
                     <span className="align-middle">SignOut</span></>}
                 </a>
               </li>

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",
+];