marco.pms.web/src/components/ServiceProject/JobList.jsx

import React, { useState } from "react";
import {
  daysLeft,
  getJobStatusBadge,
  getNextBadgeColor,
} from "../../utils/appUtils";
import { useServiceProjectJobs } from "../../hooks/useServiceProject";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { SpinnerLoader } from "../common/Loader";
import { useParams } from "react-router-dom";
import ProjectPage from "../../pages/project/ProjectPage";
import { useServiceProjectJobContext } from "./Jobs";

const JobList = () => {
  const { setSelectedJob, setManageJob } = useServiceProjectJobContext();
  const { projectId } = useParams();
  const { data, isLoading, isError, error } = useServiceProjectJobs(
    ITEMS_PER_PAGE,
    1,
    true,
    projectId
  );

  const jobGrid = [
    {
      key: "jobTicketUId",
      label: "Job Id",
      getValue: (e) => <span>{e?.jobTicketUId || "N/A"}</span>,
      align: "text-start",
    },
    {
      key: "title",
      label: "Title",
      getValue: (e) => (
        <span
          className="fw-semibold text-truncate d-inline-block cursor-pointer"
          style={{
            maxWidth: "100%",
            width: "210px",
          }}
          onClick={() => setSelectedJob({ showCanvas: true, job: e?.id })}
        >
          {e?.title}
        </span>
      ),
      isAlwaysVisible: true,
      className: "text-start",
    },

    {
      key: "dueDate",
      label: "Due On",
      getValue: (e) => formatUTCToLocalTime(e.startDate),
      isAlwaysVisible: true,
      className: "text-start d-none d-sm-table-cell",
    },
    {
      key: "status",
      label: "Status",
      getValue: (e) => {
        return (
          <span className={`badge ${getJobStatusBadge(e?.status?.id)}`}>
            {e?.status?.displayName}
          </span>
        );
      },
      isAlwaysVisible: true,
      className: "text-start d-none d-sm-table-cell",
    },
    {
      key: "daysLeft",
      label: "Days Left",
      getValue: (e) => {
        const { days, color } = daysLeft(e.startDate, e.dueDate);

        return (
          <span className={`badge bg-${color}`}>
            {days !== null ? `${days} days` : "N/A"}
          </span>
        );
      },
      isAlwaysVisible: true,
      className: "text-start d-none d-sm-table-cell",
    },
  ];

  return (
    <div className="dataTables_wrapper dt-bootstrap5 no-footer table-responsive">
      <table
        className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap table-responsive"
        aria-describedby="DataTables_Table_0_info"
      >
        <thead>
          <tr>
            {jobGrid.map((col) => (
              <th
                key={col.key}
                className={`${col.align || "text-center"} ${
                  col.className || ""
                }`}
                scope="col"
              >
                <div className={col.className}>{col.label}</div>
              </th>
            ))}
            <th className="sorting_disabled text-center" aria-label="Actions">
              Actions
            </th>
          </tr>
        </thead>

        <tbody>
          {Array.isArray(data?.data) && data.data.length > 0 ? (
            data.data.map((row, i) => (
              <tr key={i} className="text-start">
                {jobGrid.map((col) => (
                  <td
                    key={col.key}
                    className={col.className}
                    onClick={() =>
                      setSelectedJob({ showCanvas: true, job: row?.id })
                    }
                  >
                    {col.getValue(row)}
                  </td>
                ))}
                <td>
                  <div className="dropdown text-center">
                    <button
                      className="btn btn-icon dropdown-toggle hide-arrow"
                      data-bs-toggle="dropdown"
                    >
                      <i className="bx bx-dots-vertical-rounded bx-md"></i>
                    </button>
                    <div className="dropdown-menu dropdown-menu-end">
                      <button
                        className="dropdown-item py-1"
                        onClick={() =>
                          setSelectedJob({ showCanvas: true, job: row?.id })
                        }
                      >
                        <i className="bx bx-detail bx-sm"></i> View
                      </button>

                      <>
                        <button
                          className="dropdown-item py-1"
                          onClick={() =>
                            setManageJob({ isOpen: true, jobId: row?.id })
                          }
                        >
                          <i className="bx bx-edit bx-sm"></i> Edit
                        </button>
                      </>
                    </div>
                  </div>
                </td>
              </tr>
            ))
          ) : (
            <tr style={{ height: "200px" }}>
              <td
                colSpan={jobGrid.length + 1}
                className="text-center border-0 align-middle"
              >
                {isLoading ? <SpinnerLoader /> : "Not Found Jobs."}
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
};

export default JobList;