Creating a list view for Services.

src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx

@@ -26,13 +26,6 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
     const ManageProject = useHasUserPermission(MANAGE_PROJECT);
     const { setMangeProject, setManageServiceProject } = useProjectContext();
 
-    const getProgress = (planned, completed) => {
-        return (completed * 100) / planned + "%";
-    };
-    const getProgressInNumber = (planned, completed) => {
-        return (completed * 100) / planned;
-    };
-
     const handleClose = () => setShowModal(false);
 
     const handleViewProject = () => {
@@ -43,10 +36,6 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
             navigate(`/service-projects/${project.id}`);
         }
     };
-    const handleViewActivities = () => {
-        dispatch(setProjectId(project.id));
-        navigate(`/activities/records?project=${project.id}`);
-    };
     const handleManage = () => {
         if (isCore) {
             setMangeProject({
@@ -68,6 +57,8 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
         DeleteProject(projectId, false);
     };
 
+    
+
     return (
         <>
             <ConfirmModal
@@ -138,14 +129,6 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
                                                 <span className="align-left">Modify</span>
                                             </a>
                                         </li>
-                                        {isCore && (
-                                            <li onClick={handleViewActivities}>
-                                                <a className="dropdown-item">
-                                                    <i className="bx bx-task me-2"></i>
-                                                    <span className="align-left">Activities</span>
-                                                </a>
-                                            </li>
-                                        )}
                                         {!isCore && (
                                             <li
                                                 onClick={() =>

src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx

@@ -12,11 +12,11 @@ import { useProjectContext } from "../../../pages/project/ProjectPage";
 import usePagination from "../../../hooks/usePagination";
 import Pagination from "../../common/Pagination";
 
-const ServiceProjectList = ({ data, currentPage, totalPages, paginate }) => {
+const ServiceProjectList = ({ data, currentPage, totalPages, paginate, isCore = true }) => {
     const dispatch = useDispatch();
     const navigate = useNavigate();
-  const { setMangeProject } = useProjectContext();
+    const { setMangeProject, setManageServiceProject } = useProjectContext();
-  // const { data, isLoading, isError, error } = useProjects();
+    const handleClose = () => setShowModal(false);
 
     //   check Permissions
     const canManageProject = useHasUserPermission(MANAGE_PROJECT);
@@ -31,7 +31,7 @@ const ServiceProjectList = ({ data, currentPage, totalPages, paginate }) => {
                     className="text-primary cursor-pointer fw-bold py-3"
                     onClick={() => {
                         dispatch(setProjectId(p.id));
-            navigate(`/projects/details`);
+                        navigate(`/service-projects/${p.id}`);
                     }}
                 >
                     {p.shortName ? `${p.name} (${p.shortName})` : p.name}
@@ -39,88 +39,53 @@ const ServiceProjectList = ({ data, currentPage, totalPages, paginate }) => {
             ),
         },
         {
-      key: "contactPerson",
+            key: "client.contactPerson",
             label: "Contact Person",
             className: "text-start small",
-      getValue: (p) => `${p?.contactPerson ?? ""}`.trim() || "N/A",
+            getValue: (p) => p.client?.contactPerson || "N/A",
         },
         {
-      key: "startDate",
+            key: "assignedDate",
-      label: "Start Date",
+            label: "Assign Date",
             className: "text-center small",
-      getValue: (p) => formatUTCToLocalTime(p?.startDate) || "N/A",
+            getValue: (p) => formatUTCToLocalTime(p.assignedDate),
-    },
-    {
-      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)}`}>
+                <span className={`badge ${getProjectStatusColor(p.status?.id)}`}>
-          {getProjectStatusName(p.projectStatusId)}
+                    {p.status?.status}
                 </span>
             ),
         },
     ];
 
-  const handleViewActivities = (project) => {
+    const handleViewProject = (p) => {
-    dispatch(setProjectId(project));
+        if (isCore) {
-    navigate(`/activities/records?project=${project}`);
+            dispatch(setProjectId(p.id));
+            navigate(`/projects/details`);
+        } else {
+            navigate(`/service-projects/${p.id}`);
+        }
     };
 
+    const handleManage = (p) => {
+        if (isCore) {
+            setMangeProject({
+                isOpen: true,
+                Project: p.id,
+            });
+        } else {
+            setManageServiceProject({
+                isOpen: true,
+                project: p.id,
+            });
+        }
+    };
+
+
     return (
         <div className="card page-min-h py-4 px-6 shadow-sm">
             <div className="table-responsive text-nowrap page-min-h">
@@ -155,8 +120,7 @@ const ServiceProjectList = ({ data, currentPage, totalPages, paginate }) => {
                                     </td>
                                 ))}
                                 <td
-                  className={`mx-2 ${
+                                    className={`mx-2 ${canManageProject ? "d-sm-table-cell" : "d-none"
-                    canManageProject ? "d-sm-table-cell" : "d-none"
                                         }`}
                                 >
                                     <div className="dropdown z-2">
@@ -179,7 +143,9 @@ const ServiceProjectList = ({ data, currentPage, totalPages, paginate }) => {
                                             <li>
                                                 <a
                                                     aria-label="click to  View details"
-                          className="dropdown-item cursor-pointer"
+                                                    className="dropdown-item"
+                                                    onClick={() => handleViewProject(project)}
+
                                                 >
                                                     <i className="bx bx-detail me-2"></i>
                                                     <span className="align-left">View details</span>
@@ -187,25 +153,12 @@ const ServiceProjectList = ({ data, currentPage, totalPages, paginate }) => {
                                             </li>
 
                                             <li>
-                        <a
+                                                <a className="dropdown-item" onClick={() => handleManage(project)}
-                          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>

src/pages/ServiceProject/ServiceProjectDisplay.jsx

@@ -50,15 +50,20 @@ const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
   return (
     <div className="row">
       {listView ? (
-        // <p>List</p>
+        <ServiceProjectList
-         <ServiceProjectList projects={filteredProjects} />
+          data={filteredProjects}
+          currentPage={currentPage}
+          totalPages={data?.totalPages}
+          paginate={paginate}
+          isCore={false}
+        />
       ) : (
         filteredProjects?.map((project) => (
           <ServiceProjectCard key={project.id} project={project} isCore={false} />
         ))
-
       )}
 
+
       <div className="col-12 d-flex justify-content-start mt-3">
         <Pagination
           currentPage={currentPage}