marco.pms.web/src/components/Project/ProjectListView.jsx

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 ProjectListView = ({ 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 ProjectListView;