125 lines
4.7 KiB
JavaScript
125 lines
4.7 KiB
JavaScript
import React, { useState } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import { useServiceProject } from "../../hooks/useServiceProject";
|
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
import ManageServiceProject from "./ManageServiceProject";
|
|
import GlobalModel from "../common/GlobalModel";
|
|
|
|
const ServiceProjectProfile = () => {
|
|
const { projectId } = useParams();
|
|
const [IsOpenModal, setIsOpenModal] = useState(false);
|
|
const { data, isLoading, isError, error } = useServiceProject(projectId);
|
|
if (isLoading) {
|
|
return <div className="">Loadng.</div>;
|
|
}
|
|
return (
|
|
<>
|
|
{IsOpenModal && (
|
|
<GlobalModel isOpen={IsOpenModal} closeModal={() => setIsOpenModal(false)}>
|
|
<ManageServiceProject
|
|
serviceProjectId={projectId}
|
|
onClose={() => setIsOpenModal(false)}
|
|
/>
|
|
</GlobalModel>
|
|
)}
|
|
|
|
<div className="row py-2">
|
|
<div className="col-md-6 col-lg-4 order-2 mb-6">
|
|
<div className="card mb-4">
|
|
<div className="card-header text-start">
|
|
<h5 className="card-action-title mb-0 ps-1">
|
|
{" "}
|
|
<i className="fa fa-building rounded-circle text-primary"></i>
|
|
<span className="ms-2 fw-bold">Project Profile</span>
|
|
</h5>
|
|
</div>
|
|
<div className="card-body">
|
|
<ul className="list-unstyled my-3 ps-0 text-start">
|
|
|
|
<li className="d-flex mb-3">
|
|
<div className="d-flex align-items-start" style={{ minWidth: "150px" }}>
|
|
<i className="bx bx-cog"></i>
|
|
<span className="fw-medium mx-2 text-nowrap">Name:</span>
|
|
</div>
|
|
|
|
{/* Content section that wraps nicely */}
|
|
<div className="flex-grow-1 text-start text-wrap">
|
|
{data.name}
|
|
</div>
|
|
</li>
|
|
<li className="d-flex mb-3">
|
|
<div className="d-flex align-items-center" style={{ width: '150px' }}>
|
|
<i className="bx bx-fingerprint"></i>
|
|
<span className="fw-medium mx-2">Nick Name:</span>
|
|
</div>
|
|
<span>{data.shortName}</span>
|
|
</li>
|
|
<li className="d-flex mb-3">
|
|
<div className="d-flex align-items-center" style={{ width: '150px' }}>
|
|
<i className="bx bx-check"></i>
|
|
<span className="fw-medium mx-2">Assign Date:</span>
|
|
</div>
|
|
<span>
|
|
{data.assignedDate ? formatUTCToLocalTime(data.assignedDate) : "NA"}
|
|
</span>
|
|
</li>
|
|
|
|
<li className="d-flex mb-3">
|
|
<div className="d-flex align-items-center" style={{ width: '150px' }}>
|
|
<i className="bx bx-trophy"></i>
|
|
<span className="fw-medium mx-2">Status:</span>
|
|
</div>
|
|
<span>{data?.status.status}</span>
|
|
</li>
|
|
<li className="d-flex mb-3">
|
|
<div className="d-flex align-items-center" style={{ width: '150px' }}>
|
|
<i className="bx bx-user"></i>
|
|
<span className="fw-medium mx-2">Contact:</span>
|
|
</div>
|
|
<span>{data.contactName}</span>
|
|
</li>
|
|
<li className="d-flex mb-3">
|
|
{/* Label section with icon */}
|
|
<div className="d-flex align-items-start" style={{ minWidth: "150px" }}>
|
|
<i className="bx bx-flag mt-1"></i>
|
|
<span className="fw-medium mx-2 text-nowrap">Address:</span>
|
|
</div>
|
|
|
|
{/* Content section that wraps nicely */}
|
|
<div className="flex-grow-1 text-start text-wrap">
|
|
{data.address}
|
|
</div>
|
|
</li>
|
|
|
|
|
|
|
|
<li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
|
|
|
|
<li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
|
|
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm btn-primary"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#edit-project-modal"
|
|
onClick={() => setIsOpenModal(true)}
|
|
>
|
|
Modify Details
|
|
</button>
|
|
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ServiceProjectProfile;
|