marco.pms.web/src/pages/project/ProjectListView.jsx

import React from "react";
import moment from "moment";
import { useProjects } from "../../hooks/useProjects";

const ProjectListView = () => {
  const { projects } = useProjects();

  const getProgress = (planned, completed) => {
    return (completed * 100) / planned + "%";
  };
  const getProgressInNumber = (planned, completed) => {
    return (completed * 100) / planned;
  };

  const getProjectStatusName = (statusId) => {
    switch (statusId) {
      case 1:
        return "Active";
      case 2:
        return "On Hold";
      // case 3:
      //   return "Suspended";
      case 3:
        return "Inactive";
      case 4:
        return "Completed";
    }
  };

  const getProjectStatusColor = (statusId) => {
    switch (statusId) {
      case 1:
        return "bg-label-success";
      case 2:
        return "bg-label-warning";
      case 3:
        return "bg-label-info";
      case 4:
        return "bg-label-secondary";
      case 5:
        return "bg-label-dark";
    }
  };

  return (
    <div className="table-responsive text-nowrap py-2 overflow-auto">
      <table className="table px-2">
        <thead>
          <tr>
            <th className="text-start" colSpan={5}>
              Project Name
            </th>
            <th className="mx-2">Project Manger</th>
            <th className="mx-2">START DATE</th>
            <th className="mx-2">DEADLINE</th>
            <th className="mx-2">Task</th>
            <th className="mx-2">Progress</th>
            <th className="mx-2">
              <div class="dropdown">
                <a
                  class="dropdown-toggle hide-arrow cursor-pointer"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                
                >
                  Status <i class="bx bx-filter"></i>
                </a>
                <ul class="dropdown-menu px-3 py-2">
                  <li>
                    <div class="form-check form-check-success  mb-1">
                      <input
                        name="statusRadio"
                        class="form-check-input"
                        type="radio"
                        value="active"
                        id="statusActive"
                        checked
                      />
                      <label class="form-check-label text-success" for="statusActive">
                        Active
                      </label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check form-check-warning mb-1">
                      <input
                        name="statusRadio"
                        class="form-check-input"
                        type="radio"
                        value="onhold"
                        id="statusOnHold"
                        checked
                      />
                      <label class="form-check-label text-warning" for="statusOnHold">
                        On-Hold
                      </label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check form-check-info mb-1">
                      <input
                        name="statusRadio"
                        class="form-check-input"
                        type="radio"
                        value="inactive"
                        id="statusInactive"
                        checked
                      />
                      <label class="form-check-label text-info" for="statusInactive">
                        Inactive
                      </label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check form-check-secondary mb-1">
                      <input
                       name="customRadioSecondary" class="form-check-input" type="radio" value="" id="customRadioSecondary" checked
                      />
                      <label class="form-check-label text-secondary" for="statusCompleted">
                        Completed
                      </label>
                    </div>
                  </li>
                </ul>
              </div>
            </th>
            <th className="mx-2">Action</th>
          </tr>
        </thead>
        <tbody className="table-border-bottom-0">
          {projects.map((project) => (
            <tr className="py-8">
              <td className="text-start" colSpan={5}>
                <strong className="text-primary"> {project.name}</strong>
              </td>
              <td className="text-start">{project.contactPerson}</td>
              <td className="small text-start">
                <small>
                  {" "}
                  {project.startDate
                    ? moment(project.startDate).format("DD-MMM-YYYY")
                    : "NA"}
                </small>
              </td>
              <td className="mx-2 text-start">
                {project.endDate
                  ? moment(project.endDate).format("DD-MMM-YYYY")
                  : "NA"}
              </td>
              <td className="mx-2 text-start">{project.plannedWork}</td>

              <td className="py-6 mx-2 text-start">
                <div
                  className="progress  rounded align-items-center"
                  style={{ height: "8px" }}
                >
                  <div
                    className="progress-bar rounded"
                    role="progressbar"
                    style={{
                      width: getProgress(
                        project.plannedWork,
                        project.completedWork
                      ),
                    }}
                    aria-valuenow={project.completedWork}
                    aria-valuemin="0"
                    aria-valuemax={project.plannedWork}
                  ></div>
                </div>
              </td>
              <td className="mx-6 ">
                <p className="mb-0">
                  <span
                    className={
                      `badge  ` + getProjectStatusColor(project.projectStatusId)
                    }
                  >
                    {getProjectStatusName(project.projectStatusId)}
                  </span>
                </p>{" "}
              </td>

              <td className="mx-2 ">
                {" "}
                <i className="bx bx-dots-vertical-rounded bx-sm text-muted"></i>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default ProjectListView;