From 7a0671e1ac02c27eeb415eedf422796b515163b2 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 24 Nov 2025 11:02:24 +0530
Subject: [PATCH] Adding lIst view.

---
 .../ServiceProjectTeam/ServiceProjectList.jsx | 227 ++++++++++++++++++
 .../ServiceProject/ServiceProjectDisplay.jsx  |   4 +-
 2 files changed, 230 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx

diff --git a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx
new file mode 100644
index 00000000..e79750f0
--- /dev/null
+++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx
@@ -0,0 +1,227 @@
+import React, { useState } from "react";
+import { MANAGE_PROJECT,PROJECT_STATUS } from "../../../utils/constants";
+import { useProjects } from "../../../hooks/useProjects";
+import { formatNumber,formatUTCToLocalTime } from "../../../utils/dateUtils";
+import ProgressBar from "../../common/ProgressBar";
+import { getProjectStatusColor,getProjectStatusName } from "../../../utils/projectStatus";
+import { useDispatch } from "react-redux";
+import { setProjectId } from "../../../slices/localVariablesSlice";
+import { useNavigate } from "react-router-dom";
+import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
+import { useProjectContext } from "../../../pages/project/ProjectPage";
+import usePagination from "../../../hooks/usePagination";
+import Pagination from "../../common/Pagination";
+
+const ServiceProjectList = ({ data, currentPage, totalPages, paginate }) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { setMangeProject } = useProjectContext();
+  // const { data, isLoading, isError, error } = useProjects();
+
+  //   check Permissions
+  const canManageProject = useHasUserPermission(MANAGE_PROJECT);
+
+  const projectColumns = [
+    {
+      key: "projectName",
+      label: "Project Name",
+      className: "text-start py-3",
+      getValue: (p) => (
+        <div
+          className="text-primary cursor-pointer fw-bold py-3"
+          onClick={() => {
+            dispatch(setProjectId(p.id));
+            navigate(`/projects/details`);
+          }}
+        >
+          {p.shortName ? `${p.name} (${p.shortName})` : p.name}
+        </div>
+      ),
+    },
+    {
+      key: "contactPerson",
+      label: "Contact Person",
+      className: "text-start small",
+      getValue: (p) => `${p?.contactPerson ?? ""}`.trim() || "N/A",
+    },
+    {
+      key: "startDate",
+      label: "Start Date",
+      className: "text-center small",
+      getValue: (p) => formatUTCToLocalTime(p?.startDate) || "N/A",
+    },
+    {
+      key: "deadline",
+      label: "Deadline",
+      className: "text-center small",
+      getValue: (p) => formatUTCToLocalTime(p?.endDate) || "N/A",
+    },
+    {
+      key: "task",
+      label: "Task",
+      colSpan: 2,
+      className: "text-center small",
+      getValue: (p) => formatNumber(p?.plannedWork) || "0",
+    },
+    {
+      key: "progress",
+      label: "Progress",
+      className: "text-start small",
+
+      getValue: (p) => (
+        <ProgressBar
+          plannedWork={p.plannedWork}
+          completedWork={p.completedWork}
+          className="mb-0"
+          height="6px"
+        />
+      ),
+    },
+    {
+      key: "status",
+      label: "Status",
+      className: "text-center small",
+      isFilter: true,
+      customRender: (_, selectedStatuses, handleStatusChange) => (
+        <div className="dropdown">
+          <a
+            className="dropdown-toggle hide-arrow cursor-pointer"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+          >
+            Status <i className="bx bx-filter bx-sm"></i>
+          </a>
+          <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>
+        </div>
+      ),
+      getValue: (p) => (
+        <span className={`badge ${getProjectStatusColor(p.projectStatusId)}`}>
+          {getProjectStatusName(p.projectStatusId)}
+        </span>
+      ),
+    },
+  ];
+
+  const handleViewActivities = (project) => {
+    dispatch(setProjectId(project));
+    navigate(`/activities/records?project=${project}`);
+  };
+
+  return (
+    <div className="card page-min-h py-4 px-6 shadow-sm">
+      <div className="table-responsive text-nowrap page-min-h">
+        <table className="table  table-hover align-middle m-0">
+          <thead className="border-bottom ">
+            <tr>
+              {projectColumns.map((col) => (
+                <th
+                  key={col.key}
+                  colSpan={col.colSpan}
+                  className={`${col.className} table_header_border`}
+                >
+                  {col.label}
+                </th>
+              ))}
+              <th className="text-center py-3">Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data?.map((project) => (
+              <tr key={project.id}>
+                {projectColumns.map((col) => (
+                  <td
+                    key={col.key}
+                    colSpan={col.colSpan}
+                    className={`${col.className} py-5`}
+                    style={{ paddingTop: "20px", paddingBottom: "20px" }}
+                  >
+                    {col.getValue
+                      ? col.getValue(project)
+                      : project[col.key] || "N/A"}
+                  </td>
+                ))}
+                <td
+                  className={`mx-2 ${
+                    canManageProject ? "d-sm-table-cell" : "d-none"
+                  }`}
+                >
+                  <div className="dropdown z-2">
+                    <button
+                      type="button"
+                      className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                      data-bs-toggle="dropdown"
+                      aria-expanded="false"
+                    >
+                      <i
+                        className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                        data-bs-toggle="tooltip"
+                        data-bs-offset="0,8"
+                        data-bs-placement="top"
+                        data-bs-custom-class="tooltip-dark"
+                        title="More Action"
+                      ></i>
+                    </button>
+                    <ul className="dropdown-menu dropdown-menu-end">
+                      <li>
+                        <a
+                          aria-label="click to  View details"
+                          className="dropdown-item cursor-pointer"
+                        >
+                          <i className="bx bx-detail me-2"></i>
+                          <span className="align-left">View details</span>
+                        </a>
+                      </li>
+
+                      <li>
+                        <a
+                          className="dropdown-item cursor-pointer"
+                          onClick={() =>
+                            setMangeProject({
+                              isOpen: true,
+                              Project: project.id,
+                            })
+                          }
+                        >
+                          <i className="bx bx-pencil me-2"></i>
+                          <span className="align-left">Modify</span>
+                        </a>
+                      </li>
+                      <li onClick={() => handleViewActivities(project.id)}>
+                        <a className="dropdown-item cursor-pointer">
+                          <i className="bx bx-task me-2"></i>
+                          <span className="align-left">Activities</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        paginate={paginate}
+      />
+    </div>
+  );
+};
+
+export default ServiceProjectList;
diff --git a/src/pages/ServiceProject/ServiceProjectDisplay.jsx b/src/pages/ServiceProject/ServiceProjectDisplay.jsx
index 1d59f1f2..528a0683 100644
--- a/src/pages/ServiceProject/ServiceProjectDisplay.jsx
+++ b/src/pages/ServiceProject/ServiceProjectDisplay.jsx
@@ -11,6 +11,7 @@ import GlobalModel from "../../components/common/GlobalModel";
 import ManageServiceProject from "../../components/ServiceProject/ManageServiceProject";
 import { SpinnerLoader } from "../../components/common/Loader";
 import ServiceProjectCard from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectCard";
+import ServiceProjectList from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectList";
 
 const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -49,7 +50,8 @@ const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
   return (
     <div className="row">
       {listView ? (
-        <p>List</p>
+        // <p>List</p>
+         <ServiceProjectList projects={filteredProjects} />
       ) : (
         filteredProjects?.map((project) => (
           <ServiceProjectCard key={project.id} project={project} isCore={false} />