143 lines
6.4 KiB
JavaScript
143 lines
6.4 KiB
JavaScript
import React from "react";
|
|
import { useBranchDetails } from "../../../hooks/useServiceProject";
|
|
import Avatar from "../../common/Avatar";
|
|
import { formatUTCToLocalTime } from "../../../utils/dateUtils";
|
|
|
|
const ViewBranchDetails = ({ BranchToEdit }) => {
|
|
const { data, isLoading, isError, error: requestError } = useBranchDetails(BranchToEdit);
|
|
|
|
console.log("branch details:", data);
|
|
|
|
if (isLoading) return <p>Loading...</p>;
|
|
if (isError) return <p>Error: {requestError?.message}</p>;
|
|
|
|
return (
|
|
<form className="container px-3">
|
|
<div className="col-12 mb-1">
|
|
<h5 className="fw-semibold m-0">Branch Details</h5>
|
|
</div>
|
|
<div className="row mb-1 mt-5">
|
|
<div className="col-md-12 mb-4">
|
|
<div className="d-flex">
|
|
<label
|
|
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
style={{ minWidth: "130px" }}
|
|
>
|
|
Branch Name:
|
|
</label>
|
|
<div className="text-muted">{data?.branchName || "N/A"}</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-12 mb-4">
|
|
<div className="d-flex">
|
|
<label
|
|
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
style={{ minWidth: "130px" }}
|
|
>
|
|
Branch Type:
|
|
</label>
|
|
<div className="text-muted">{data?.branchName || "N/A"}</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-12 mb-4">
|
|
<div className="d-flex">
|
|
<label
|
|
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
style={{ minWidth: "130px" }}
|
|
>
|
|
Project:
|
|
</label>
|
|
<div className="text-muted text-start">{data?.project?.name || "N/A"}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-md-12 text-start mb-2">
|
|
<div className="d-flex align-items-center">
|
|
<label
|
|
className="form-label me-2 mb-0 fw-semibold"
|
|
style={{ minWidth: "125px" }}
|
|
>
|
|
Updated By :
|
|
</label>
|
|
<>
|
|
<Avatar
|
|
size="xs"
|
|
classAvatar="m-0 me-1"
|
|
firstName={data.updatedBy.firstName}
|
|
lastName={data.updatedBy.lastName}
|
|
/>
|
|
<span className="text-muted">
|
|
{`${data.updatedBy.firstName ?? ""} ${data.updatedBy.lastName ?? ""
|
|
}`.trim() || "N/A"}
|
|
</span>
|
|
</>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-12 text-start mb-3">
|
|
<div className="d-flex align-items-center">
|
|
<label
|
|
className="form-label me-2 mb-0 fw-semibold"
|
|
style={{ minWidth: "125px" }}
|
|
>
|
|
Created By :
|
|
</label>
|
|
<Avatar
|
|
size="xs"
|
|
classAvatar="m-0 me-1"
|
|
firstName={data?.createdBy?.firstName}
|
|
lastName={data?.createdBy?.lastName}
|
|
/>
|
|
<span className="text-muted">
|
|
{`${data?.createdBy?.firstName ?? ""} ${data?.createdBy?.lastName ?? ""
|
|
}`.trim() || "N/A"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-12 mb-3">
|
|
<div className="d-flex">
|
|
<label
|
|
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
style={{ minWidth: "130px" }}
|
|
>
|
|
Created At :
|
|
</label>
|
|
<div className="text-muted">
|
|
{data?.createdAt
|
|
? formatUTCToLocalTime(data.createdAt, true)
|
|
: "N/A"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 mb-3 text-start">
|
|
<label className="form-label mb-2 fw-semibold">Contact Information:</label>
|
|
<div className="text-muted">
|
|
{data?.contactInformation ? (
|
|
JSON.parse(data.contactInformation).map((contact, index) => (
|
|
<div key={index} className="mb-3">
|
|
<div className="fw-semibold mb-1">Person {index + 1}:-</div>
|
|
<div>
|
|
<label className="fw-semibold mb-1">Person Name:</label> {contact.contactPerson || "N/A"}
|
|
</div>
|
|
<div>
|
|
<label className="fw-semibold mb-1">Designation:</label> {contact.designation || "N/A"}
|
|
</div>
|
|
<div>
|
|
<label className="fw-semibold mb-1">Emails:</label> {contact.contactEmails?.join(", ") || "N/A"}
|
|
</div>
|
|
<div>
|
|
<label className="fw-semibold mb-1">Numbers:</label> {contact.contactNumbers?.join(", ") || "N/A"}
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
"N/A"
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default ViewBranchDetails;
|