Adding Project and Service field in View Organization popup.

src/components/Organization/ViewOrganization.jsx

@@ -22,9 +22,8 @@ const VieworgDataanization = ({ orgId }) => {
           </div>
           <div className="text-end">
             <span
-              className={`badge bg-label-${
+              className={`badge bg-label-${data?.isActive ? "primary" : "secondary"
-                data?.isActive ? "primary" : "secondary"
+                } `}
-              } `}
             >
               {data?.isActive ? "Active" : "In-Active"}{" "}
             </span>
@@ -105,9 +104,101 @@ const VieworgDataanization = ({ orgId }) => {
           <div className="text-muted text-start">{data?.address}</div>
         </div>
       </div>
-      <div className="d-flex text-secondary mb-2">
+      <div className="col-12 mb-3">
-        {" "}
+        <div
-        <i className="bx bx-sm bx-briefcase me-1" /> Projects And Services
+          className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
+          data-bs-toggle="collapse"
+          data-bs-target="#collapse-projects-services"
+          aria-expanded="false"
+        >
+          <div>
+            <i className="bx bx-sm bx-briefcase me-1" /> Projects
+          </div>
+          <i className="bx bx-chevron-down me-2"></i>
+        </div>
+
+        {/* remove "show" from className */}
+        <div id="collapse-projects-services" className="collapse">
+          {data?.projects && data.projects.length > 0 ? (
+            data.projects
+              .reduce((acc, curr) => {
+                const projectId = curr.project.id;
+                if (!acc.find((p) => p.id === projectId)) {
+                  acc.push(curr.project);
+                }
+                return acc;
+              }, [])
+              .map((project) => (
+                <div key={project.id} className="mb-2 rounded p-2">
+                  <div
+                    className="d-flex justify-content-between align-items-center cursor-pointer"
+                    data-bs-toggle="collapse"
+                    data-bs-target={`#collapse-${project.id}`}
+                    aria-expanded="false"
+                  >
+                    <label className="form-label fw-semibold">
+                      <i className="bx bx-buildings me-2"></i>
+                      {project.name}
+                    </label>
+                    <i className="bx bx-chevron-down"></i>
+                  </div>
+
+                  <div id={`collapse-${project.id}`} className="collapse mt-2 ps-5">
+                    {data.projects
+                      .filter((p) => p.project.id === project.id)
+                      .map((p) => (
+                        <div key={p.service.id} className="mb-1 text-muted">
+                          <i className="bx bx-wrench me-2"></i>
+                          {p.service.name}
+                        </div>
+                      ))}
+                  </div>
+                </div>
+              ))
+          ) : (
+            <div className="text-muted fst-italic ps-2">No projects available</div>
+          )}
+        </div>
+      </div>
+
+      {/* Services Section */}
+      <div className="col-12 mb-3">
+        <div
+          className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
+          data-bs-toggle="collapse"
+          data-bs-target="#collapse-services"
+          aria-expanded="false"
+        >
+          <div>
+            <i className="bx bx-sm bx-cog me-1" /> Services
+          </div>
+          <i className="bx bx-chevron-down me-2"></i>
+        </div>
+
+        {/* collapse is closed initially */}
+        <div id="collapse-services" className="collapse">
+          {data?.services && data.services.length > 0 ? (
+            <div className="row">
+              {data.services.map((service) => (
+                <div key={service.id} className="col-md-12 mb-3">
+                  <div className="card h-100 shadow-sm border-0">
+                    <div className="card-body">
+                      <h6 className="fw-semibold mb-1">
+                        <i className="bx bx-wrench me-1"></i>
+                        {service.name}
+                      </h6>
+                      <p className="text-muted small mb-0">
+                        {service.description || "No description available."}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-muted fst-italic ps-2">No services available</div>
+          )}
+        </div>
       </div>
     </div>
   );