96 lines
3.7 KiB
JavaScript
96 lines
3.7 KiB
JavaScript
import React from 'react'
|
|
import { formatUTCToLocalTime } from '../../utils/dateUtils'
|
|
|
|
const ServiceProfile = ({data,setIsOpenModal}) => {
|
|
return (
|
|
<div className="card mb-4 h-100">
|
|
<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>
|
|
|
|
<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">
|
|
|
|
<a className="d-flex justify-content-center mt-4">
|
|
<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>
|
|
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ServiceProfile
|