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

import React, { useEffect } from "react";
import { useServiceProjectJobDetails } from "../../hooks/useServiceProject";
import { SpinnerLoader } from "../common/Loader";
import Error from "../common/Error";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Avatar from "../common/Avatar";
import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
import JobStatusLog from "./JobStatusLog";
import JobComments from "./JobComments";
import { daysLeft } from "../../utils/appUtils";

const ManageJobTicket = ({ Job }) => {
  const { data, isLoading, isError, error } = useServiceProjectJobDetails(
    Job?.job
  );

  const tabsData = [
    {
      id: "comment",
      title: "Comments",
      icon: "bx bx-comment me-2",
      active: true,
      content: <JobComments data={data} />,
    },
    {
      id: "history",
      title: "History",
      icon: "bx bx-time me-2",
      active: false,
      content: <JobStatusLog data={data?.updateLogs} />,
    },
  ];


  if (isLoading) return <SpinnerLoader />;
  if (isError)
    return (
      <div>
        <Error error={error} />
      </div>
    );
  return (
    <div className="row text-start">
      <div className="col-12">
        <div className="d-flex justify-content-between align-items-center mb-3">
          <span className="badge bg-label-primary">{data?.status?.name}</span>
          {data?.dueDate && (() => {
            const { days, color } = daysLeft(data?.startDate, data?.dueDate);
            return (
              <span style={{ fontSize: "12px" }}>
                <span className="fw-medium me-1">Days Left :</span>
                <span className={`badge bg-${color}`}>
                  {days !== null ? `${days} days` : "N/A"}
                </span>
              </span>
            );
          })()}

        </div>
        <h6 className="fs-5 fw-semibold">{data?.title}</h6>

        <div className="d-flex flex-wrap">
          <p>
            <span className="fw-medium me-1">Description :</span>
            {data?.description || "N/A"}
          </p>
        </div>


        <div className="d-flex justify-content-between mb-4">
          <div className="d-flex flex-row gap-1 fw-medium">
            <i className="bx bx-calendar"></i>{" "}
            <span>Created Date : {formatUTCToLocalTime(data?.createdAt, true)}</span>
          </div>
        </div>

        <div>
          <div className="d-flex flex-row gap-5">
            <span className="fw-medium">
              <i className="bx bx-calendar"></i>  Start Date : {formatUTCToLocalTime(data?.startDate)}
            </span>{" "}
            <i className="bx bx-right-arrow-alt"></i>{" "}
            <span className="fw-medium">
              <i className="bx bx-calendar"></i>  Due on : {formatUTCToLocalTime(data?.startDate)}
            </span>
          </div>
        </div>
        <div className="d-block mt-4 mb-3">
          <div className="d-flex align-items-center mb-2">
            <span className="fs-6 fw-medium me-5">
              Created By
            </span>{" "}
            <Avatar
              size="xs"
              firstName={data?.createdBy?.firstName}
              lastName={data?.createdBy?.lastName}
            />{" "}
            <div className="d-flex flex-row align-items-center">
              <p className="m-0">{`${data?.createdBy?.firstName} ${data?.createdBy?.lastName}`}</p>
              <small className="text-secondary ms-1">({data?.createdBy?.jobRoleName})</small>
            </div>
          </div>
          <div className="d-flex align-items-center">
            <small className="fs-6 fw-medium me-3">
              Assigned By
            </small>
            <div className="d-flex flex-row gap-3">
              {data?.assignees?.map((emp) => (
                <div className="d-flex flex-row ">
                  <Avatar size="xs" firstName={emp.firstName} lastName={emp.lastName} />
                  <div className="d-flex flex-row align-items-center">
                    <p className="m-0">{`${emp.firstName} ${emp.lastName}`}</p>
                    <small className="text-secondary ms-1">({emp.jobRoleName})</small>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="nav-align-top nav-tabs-shadow p-0 shadow-none">
        <ul className="nav nav-tabs" role="tablist">
          {tabsData.map((tab) => (
            <li className="nav-item" key={tab.id}>
              <button
                type="button"
                className={`nav-link ${tab.active ? "active" : ""}`}
                data-bs-toggle="tab"
                data-bs-target={`#tab-${tab.id}`}
                role="tab"
              >
                <i className={tab.icon} /> {tab.title}
              </button>
            </li>
          ))}
        </ul>

        <div className="tab-content p-1 px-sm-3">
          {tabsData.map((tab) => (
            <div
              key={tab.id}
              className={`tab-pane fade ${tab.active ? "show active" : ""}`}
              id={`tab-${tab.id}`}
              role="tabpanel"
            >
              {tab.content}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ManageJobTicket;