70 lines
2.7 KiB
JavaScript
70 lines
2.7 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import moment from "moment";
|
|
import { getProjectStatusName } from "../../utils/projectStatus";
|
|
import {useProjectDetails} from "../../hooks/useProjects";
|
|
import {useParams} from "react-router-dom";
|
|
const AboutProject = () => {
|
|
const {projectId} = useParams();
|
|
const {projects_Details,isLoading,error} = useProjectDetails(projectId)
|
|
return (
|
|
<>
|
|
{projects_Details && (
|
|
<div className="card mb-6">
|
|
<div className="card-body">
|
|
<small className="card-text text-uppercase text-muted small">
|
|
Profile
|
|
</small>
|
|
<ul className="list-unstyled my-3">
|
|
<li className="d-flex align-items-center mb-4">
|
|
<i className="bx bx-check"></i>
|
|
<span className="fw-medium mx-2">Start Date:</span>{" "}
|
|
<span>
|
|
{projects_Details.startDate
|
|
? moment(projects_Details.startDate).format("DD-MMM-YYYY")
|
|
: "N/A"}
|
|
</span>
|
|
</li>
|
|
<li className="d-flex align-items-center mb-4">
|
|
<i className="bx bx-stop-circle"></i>{" "}
|
|
<span className="fw-medium mx-2">End Date:</span>{" "}
|
|
<span>
|
|
{projects_Details.endDate
|
|
? moment(projects_Details.endDate).format("DD-MMM-YYYY")
|
|
: "N/A"}
|
|
</span>
|
|
</li>
|
|
<li className="d-flex align-items-center mb-2">
|
|
<i className="bx bx-trophy"></i>
|
|
<span className="fw-medium mx-2">Status:</span>{" "}
|
|
<span>{projects_Details?.projectStatus?.status
|
|
}</span>
|
|
</li>
|
|
<li className="d-flex align-items-center mb-4">
|
|
<i className="bx bx-user"></i>
|
|
<span className="fw-medium mx-2">Contact:</span>{" "}
|
|
<span>{projects_Details.contactPerson}</span>
|
|
</li>
|
|
<li className="d-flex flex-column align-items-start mb-4">
|
|
<div className="d-flex align-items-center">
|
|
<i className="bx bx-flag"></i>
|
|
<span className="fw-medium mx-2">Address:</span>
|
|
{projects_Details.projectAddress?.length <= 20 && (
|
|
<span>{projects_Details.projectAddress}</span>
|
|
)}
|
|
</div>
|
|
{projects_Details.projectAddress?.length > 20 && (
|
|
<div className="ms-4 text-start">{projects_Details.projectAddress}</div>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{isLoading && <span>loading...</span>}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AboutProject;
|