marco.pms.web/src/components/Dashboard/ServiceJobs.jsx

import React from "react";
import { useParams } from "react-router-dom";
import { useJobsProgression } from "../../hooks/useDashboard_Data";
import { SpinnerLoader } from "../common/Loader";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { useServiceProject } from "../../hooks/useServiceProject";

const ServiceJobs = () => {
  const { projectId } = useParams();
  const { data, isLoading, isError } = useJobsProgression(projectId);

  const jobs = data || {};
  const { data: projectData, isLoading: projectLoading } = useServiceProject(projectId);
  const tabMapping = [
    { id: "tab-new", label: "My Jobs", key: "allJobs" },
    { id: "tab-preparing", label: "Assigned", key: "assignedJobs" },
    { id: "tab-shipping", label: "In Progress", key: "inProgressJobs" },
  ];

  return (
    <div className="">
      <div className="card page-min-h">
        <div className="card-header d-flex justify-content-between">
          <div className="card-title mb-0 text-start">
            <h5 className="mb-1 fw-bold">Service Jobs</h5>
            <p className="card-subtitle">
              {projectLoading ? "Loading..." : projectData?.name || "All Projects"}
            </p>
          </div>
        </div>

        <div className="card-body p-0">
          <div className="nav-align-top">

            {/* ---------------- Tabs ---------------- */}
            <ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
              {tabMapping.map((t, index) => (
                <li className="nav-item" key={t.id}>
                  <button
                    className={`nav-link ${index === 0 ? "active" : ""}`}
                    data-bs-toggle="tab"
                    data-bs-target={`#${t.id}`}
                  >
                    {t.label}
                  </button>
                </li>
              ))}
            </ul>

            {/* ---------------- Tab Content ---------------- */}
            <div className="tab-content border-0 mx-1 text-start">

              {isLoading && (
                <div className="text-center" style={{ height: "250px", display: "flex", justifyContent: "center", alignItems: "center" }}>
                  <SpinnerLoader />
                </div>
              )}


              {isError && (
                <p
                  className="text-center"
                  style={{
                    height: "250px",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    margin: 0,
                  }}
                >
                  No data found
                </p>

              )}

              {!isLoading &&
                !isError &&
                tabMapping.map((t, index) => {
                  const list = jobs[t.key] || [];

                  return (
                    <div
                      key={t.id}
                      className={`tab-pane fade ${index === 0 ? "show active" : ""}`}
                      id={t.id}
                    >
                      {list.length === 0 ? (
                        <p
                          className="text-center"
                          style={{
                            height: "250px",
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "center",
                            margin: 0,
                          }}
                        >
                          No jobs found
                        </p>

                      ) : (
                        <div className="job-scroll-wrapper">
                          {list.map((job, i) => (
                            <React.Fragment key={i}>
                              <ul className="timeline mb-0">

                                {/* Assigned By */}
                                <li className="timeline-item ps-6 border-left-dashed">
                                  <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
                                    <i className="bx bx-check-circle"></i>
                                  </span>
                                  <div className="timeline-event ps-1">
                                    <div className="timeline-header">
                                      <small className="text-success text-uppercase">
                                        Assigned By
                                      </small>
                                    </div>
                                    <h6 className="my-50">{job.assignedBy}</h6>
                                    <p className="text-body mb-0">
                                      {formatUTCToLocalTime(job.assignedAt)}
                                    </p>
                                  </div>
                                </li>

                                {/* Project */}
                                <li className="timeline-item ps-6 border-transparent">
                                  <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
                                    <i className="bx bx-map"></i>
                                  </span>
                                  <div className="timeline-event ps-1">
                                    <div className="timeline-header">
                                      <small className="text-primary text-uppercase">Project</small>
                                    </div>
                                    <h6 className="my-50">{job.project}</h6>
                                    <p className="text-body mb-0">{job.title}</p>
                                  </div>
                                </li>
                              </ul>

                              {/* Divider */}
                              {i < list.length - 1 && (
                                <div className="border-1 border-light border-top border-dashed my-4"></div>
                              )}
                            </React.Fragment>
                          ))}
                        </div>
                      )}
                    </div>
                  );
                })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ServiceJobs;