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

2025-12-10 09:24:43 +05:30 · 2025-12-10 09:24:43 +05:30 · 240d904993
commit 240d904993
parent 386cfa28e9 b4d115dbee
7 changed files with 533 additions and 171 deletions
--- a/public/assets/css/core-extend.css
+++ b/public/assets/css/core-extend.css
--- a/src/components/Directory/ManageContact.jsx
+++ b/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">
+            <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",
+              }}
+            >
              {bucketsLoaging && <p>Loading...</p>}
-              {buckets?.map((item) => (
-                <li
+
+              {buckets?.map((item, index) => (
+                <div
                  key={item.id}
-                  className="list-inline-item flex-shrink-0 me-6 mb-1"
+                  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">
+
+                  <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>
--- a/src/components/Layout/Header.jsx
+++ b/src/components/Layout/Header.jsx
@ -26,15 +26,15 @@ const Header = () => {
  const dispatch = useDispatch();
  const { data, loading } = useMaster();
  const navigate = useNavigate();
-  const {onOpen} = useAuthModal()
-  const { onOpen:changePass } = useModal("ChangePassword");
+  const { onOpen } = useAuthModal()
+  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);
  const isProjectPath = /^\/projects$/.test(location.pathname);
-    const isCollectionPath =
+  const isCollectionPath =
    /^\/collection$/.test(location.pathname) || /^\/$/.test(location.pathname);

  const showProjectDropdown = (pathname) => {
@ -51,10 +51,10 @@ const Header = () => {
    const isAdvancePayment = /^\/advance-payment$/.test(pathname);
    const isServiceProjectPage = /^\/service-projects\/[0-9a-fA-F-]{36}$/.test(pathname);
    const isAdvancePayment1 =
-  /^\/advance-payment(\/[0-9a-fA-F-]{36})?$/.test(pathname);
+      /^\/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",
@ -66,7 +66,7 @@ const Header = () => {
    if (!Array.isArray(roles)) return "User";
    let role = roles.find((role) => role.id === joRoleId);
    return role ? role.name : "User";
-  };  
+  };

  const handleProfilePage = () => {
    navigate(`/employee/${profile?.employeeInfo?.id}`);
@ -79,8 +79,8 @@ const Header = () => {
  const projectsForDropdown = isDashboardPath
    ? projectNames
    : projectNames?.filter((project) =>
-        allowedProjectStatusIds.includes(project.projectStatusId)
-      );
+      allowedProjectStatusIds.includes(project.projectStatusId)
+    );

  let currentProjectDisplayName;
  if (projectLoading) {
@ -196,63 +196,63 @@ const Header = () => {
      >
        <div className="d-flex align-items-center">
          {showProjectDropdown(location.pathname) && (
-          <div className="align-items-center">
-            <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
-            <div className="btn-group">
-              {shouldShowDropdown ? (
-                <button
-                  className={`btn btn-sm-sm btn-xl dropdown-toggle px-1`}
-                  type="button"
-                  data-bs-toggle="dropdown"
-                  aria-expanded="false"
-                >
-                  {currentProjectDisplayName}
-                </button>
-              ) : (
-                <span className="btn btn-sm-sm btn-xl px-1">
-                  {currentProjectDisplayName}
-                </span>
-              )}
-
-              {shouldShowDropdown &&
-                projectsForDropdown &&
-                projectsForDropdown.length > 0 && (
-                  <ul
-                    className="dropdown-menu"
-                    style={{ overflow: "auto", maxHeight: "300px" }}
+            <div className="align-items-center">
+              <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
+              <div className="btn-group">
+                {shouldShowDropdown ? (
+                  <button
+                    className={`btn btn-sm-sm btn-xl dropdown-toggle px-1`}
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
                  >
-                    {(isDashboardPath|| isCollectionPath) &&(
-                      <li>
-                        <button
-                          className="dropdown-item"
-                          onClick={() => handleProjectChange(null)}
-                        >
-                          All Projects
-                        </button>
-                      </li>
-                    )}
-                    {[...projectsForDropdown]
-                      .sort((a, b) => a?.name?.localeCompare(b.name))
-                      .map((project) => (
-                        <li key={project?.id}>
+                    {currentProjectDisplayName}
+                  </button>
+                ) : (
+                  <span className="btn btn-sm-sm btn-xl px-1">
+                    {currentProjectDisplayName}
+                  </span>
+                )}
+
+                {shouldShowDropdown &&
+                  projectsForDropdown &&
+                  projectsForDropdown.length > 0 && (
+                    <ul
+                      className="dropdown-menu custom-scrollbar"
+                      style={{ overflow: "auto", maxHeight: "300px" }}
+                    >
+                      {(isDashboardPath || isCollectionPath) && (
+                        <li>
                          <button
                            className="dropdown-item"
-                            onClick={() => handleProjectChange(project?.id)}
+                            onClick={() => handleProjectChange(null)}
                          >
-                            {project?.name}
-                            {project?.shortName && (
-                              <span className="text-primary fw-semibold ms-1">
-                                ({project?.shortName})
-                              </span>
-                            )}
+                            All Projects
                          </button>
                        </li>
-                      ))}
-                  </ul>
-                )}
+                      )}
+                      {[...projectsForDropdown]
+                        .sort((a, b) => a?.name?.localeCompare(b.name))
+                        .map((project) => (
+                          <li key={project?.id}>
+                            <button
+                              className="dropdown-item"
+                              onClick={() => handleProjectChange(project?.id)}
+                            >
+                              {project?.name}
+                              {project?.shortName && (
+                                <span className="text-primary fw-semibold ms-1">
+                                  ({project?.shortName})
+                                </span>
+                              )}
+                            </button>
+                          </li>
+                        ))}
+                    </ul>
+                  )}
+              </div>
            </div>
-          </div>
-        )}
+          )}
        </div>

        <ul className="navbar-nav flex-row align-items-center ms-md-auto">
@ -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"
@ -440,7 +440,7 @@ const Header = () => {
                </a>
              </li>

-             
+
              <li>
                <div className="dropdown-divider"></div>
              </li>
@ -448,10 +448,10 @@ 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>
-                  <span className="align-middle">SignOut</span></>}
+                  {logouting ? "Please Wait" : <> <i className="bx bx-log-out me-2"></i>
+                    <span className="align-middle">SignOut</span></>}
                </a>
              </li>
            </ul>
--- a/src/components/Project/ProjectCard.jsx
+++ b/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>
--- a/src/components/ServiceProject/ManageServiceProject.jsx
+++ b/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 });
--- a/src/pages/DailyProgressReport/DailyProgrssReport.jsx
+++ b/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
--- a/src/utils/constants.jsx
+++ b/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",
+];