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

import React, { useState } from "react";
import { daysLeft, 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) => e?.jobTicketUId || "N/A",
      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) => {
        const statusName = e?.status?.displayName || "N/A";
        const statusColorMap = {
          Assigned: "label-primary",
          Pending: "label-warning",
          Completed: "label-success",
          Cancelled: "label-danger",
        };

        const badgeColor = statusColorMap[statusName] || "label-secondary";

        return (
          <span className={`badge bg-${badgeColor}`} style={{ fontSize: "12px" }}>
            {statusName}
          </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}`} style={{ fontSize: "12px" }}>
            {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
        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}>
                    {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">
                      {/* View always visible */}
                      <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;