From 822ff1a7e4c25f5efa40fc95e1bf133f39b2ee80 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Tue, 25 Nov 2025 11:20:19 +0530
Subject: [PATCH] UI Alignment in Service Card view.

---
 .../ServiceProjectTeam/ServiceProjectCard.jsx |   4 +-
 src/pages/project/ProjectPage.jsx             | 116 ++++++++++++------
 2 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx
index 21f77a4a..2bba2c36 100644
--- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx
+++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx
@@ -57,7 +57,7 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
         DeleteProject(projectId, false);
     };
 
-    
+
 
     return (
         <>
@@ -89,7 +89,7 @@ const ServiceProjectCard = ({ 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>
diff --git a/src/pages/project/ProjectPage.jsx b/src/pages/project/ProjectPage.jsx
index f72b995c..234e3838 100644
--- a/src/pages/project/ProjectPage.jsx
+++ b/src/pages/project/ProjectPage.jsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
+import React, { createContext, useContext, useEffect, useRef, useState } from "react";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import {
   ITEMS_PER_PAGE,
@@ -36,7 +36,7 @@ const ProjectPage = () => {
     isOpen: false,
     project: null,
   });
-
+  const dropdownRef = useRef(null);
   const [projectList, setProjectList] = useState([]);
   const [listView, setListView] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
@@ -46,6 +46,7 @@ const ProjectPage = () => {
   });
   const HasManageProject = useHasUserPermission(MANAGE_PROJECT);
   const [currentPage, setCurrentPage] = useState(1);
+  const [open, setOpen] = useState(false);
 
   const [selectedStatuses, setSelectedStatuses] = useState(
     PROJECT_STATUS.map((s) => s.id)
@@ -70,6 +71,16 @@ const ProjectPage = () => {
     sessionStorage.setItem("whichProjectDisplay", String(value));
   };
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
   return (
     <ProjectContext.Provider value={contextDispatcher}>
       <div className="container-fluid">
@@ -89,9 +100,8 @@ const ProjectPage = () => {
                   {/* Service Project Button */}
                   <button
                     type="button"
-                    className={`btn px-2 py-1 rounded-0 text-tiny ${
-                      !coreProjects ? "btn-primary text-white" : ""
-                    }`}
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${!coreProjects ? "btn-primary text-white" : ""
+                      }`}
                     onClick={() => handleToggleProject(false)}
                   >
                     Service Project
@@ -99,9 +109,8 @@ const ProjectPage = () => {
                   {/* Organization Project Button */}
                   <button
                     type="button"
-                    className={`btn px-2 py-1 rounded-0 text-tiny ${
-                      coreProjects ? "btn-primary text-white" : ""
-                    }`}
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${coreProjects ? "btn-primary text-white" : ""
+                      }`}
                     onClick={() => handleToggleProject(true)}
                   >
                     Infra Project
@@ -129,9 +138,8 @@ const ProjectPage = () => {
                 <div className="d-flex gap-2">
                   <button
                     type="button"
-                    className={`btn btn-sm p-1 ${
-                      !listView ? "btn-primary" : "btn-outline-primary"
-                    }`}
+                    className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"
+                      }`}
                     onClick={() => setListView(false)}
                     title="Card View"
                   >
@@ -140,9 +148,8 @@ const ProjectPage = () => {
 
                   <button
                     type="button"
-                    className={`btn btn-sm p-1 ${
-                      listView ? "btn-primary" : "btn-outline-primary"
-                    }`}
+                    className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"
+                      }`}
                     onClick={() => setListView(true)}
                     title="List View"
                   >
@@ -151,33 +158,62 @@ const ProjectPage = () => {
                 </div>
 
                 {/* Dropdown Filter */}
-                <div className="dropdown me-2">
-                  <a
-                    className="dropdown-toggle hide-arrow cursor-pointer p-1"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                    title="Filter"
+                <div className="dropdown me-2 position-relative">
+                  <div
+                    className="cursor-pointer p-1"
+                    onClick={() => setOpen(!open)}
                   >
-                    <i className="bx bx-slider-alt fs-5"></i>
-                  </a>
+                    <i
+                      className={`bx bx-slider-alt fs-5 ${selectedStatuses.length !== PROJECT_STATUS.length ? "text-primary" : ""
+                        }`}
+                    ></i>
 
-                  <ul className="dropdown-menu p-2 text-capitalize">
-                    {PROJECT_STATUS.map(({ id, label }) => (
-                      <li key={id}>
-                        <div className="form-check">
-                          <input
-                            className="form-check-input"
-                            type="checkbox"
-                            checked={selectedStatuses.includes(id)}
-                            onChange={() => handleStatusChange(id)}
-                          />
-                          <label className="form-check-label">{label}</label>
-                        </div>
-                      </li>
-                    ))}
-                  </ul>
+                    {selectedStatuses.length !== PROJECT_STATUS.length && (
+                      <span className="badge bg-warning text-white rounded-pill position-absolute"
+                        style={{
+                          top: "-4px",
+                          right: "-4px",
+                          fontSize: "0.6rem",
+                          padding: "2px 5px",
+                        }}
+                      >
+                        {PROJECT_STATUS.length - selectedStatuses.length}
+                      </span>
+                    )}
+                  </div>
+
+                  {open && (
+                    <ul
+                      ref={dropdownRef}
+                      className="dropdown-menu show p-2 text-capitalize"
+                      onMouseDown={(e) => e.stopPropagation()}  // IMPORTANT
+                    >
+                      {PROJECT_STATUS.map(({ id, label }) => (
+                        <li key={id}>
+                          <div className="form-check">
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              checked={selectedStatuses.includes(id)}
+                              onClick={(e) => e.stopPropagation()} // IMPORTANT
+                              onChange={() => handleStatusChange(id)}
+                            />
+                            <label
+                              className="form-check-label"
+                              onClick={(e) => e.stopPropagation()}  // OPTIONAL
+                            >
+                              {label}
+                            </label>
+                          </div>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
                 </div>
 
+
+
+
                 {HasManageProject && (
                   <button
                     type="button"
@@ -187,9 +223,9 @@ const ProjectPage = () => {
                         coreProjects
                           ? setMangeProject({ isOpen: true, Project: null }) // Organization Project → Infra
                           : setManageServiceProject({
-                              isOpen: true,
-                              Project: null,
-                            }) // Service Project
+                            isOpen: true,
+                            Project: null,
+                          }) // Service Project
                     }
                   >
                     <i className="bx bx-plus-circle me-2"></i>