admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Showing details view in Branches.

Browse Source
This commit is contained in:
Kartik Sharma 2025-12-05 13:07:27 +05:30
parent 7930876b7d
commit da53a2fc62
2 changed files with 216 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
View File

@ -8,6 +8,7 @@ import { useParams } from "react-router-dom";
import Pagination from "../../common/Pagination";
import ConfirmModal from "../../common/ConfirmModal";
import { SpinnerLoader } from "../../common/Loader";
import ViewBranchDetails from "./ViewBranchDetails";
const ServiceBranch = () => {
const { projectId } = useParams();
@ -19,6 +20,7 @@ const ServiceBranch = () => {
});
const { mutate: DeleteBranch, isPending } = useDeleteBranch();
const [deletingId, setDeletingId] = useState(null);
const [ViewRequest, setViewRequest] = useState({ requestId: null, view: false });
const [search, setSearch] = useState("");
const [currentPage, setCurrentPage] = useState(1);
@ -84,7 +86,7 @@ const ServiceBranch = () => {
<div className="col-md-4 col-sm-12 ms-n3 text-start ">
<h5 className="mb-0">
<i className="bx bx-buildings text-primary"></i>
<span className="ms-2 fw-bold">Branchs</span>
<span className="ms-2 fw-bold">Branches</span>
</h5>
</div>
@ -171,13 +173,30 @@ const ServiceBranch = () => {
!isError &&
data?.data?.length > 0 &&
data.data.map((branch) => (
<tr key={branch.id} style={{ height: "35px" }}>
<tr
key={branch.id}
style={{ height: "35px", cursor: "pointer" }}
onClick={(e) => {
if (!e.target.closest(".dropdown") && !e.target.closest(".bx-show")) {
setViewRequest({ branchId: branch.id, view: true });
}
}}
>
{columns.map((col) => (
<td key={col.key} className={`${col.align} py-3`}>
{col.getValue(branch)}
</td>
))}
<td className="text-center">
<div className="d-flex justify-content-center align-items-center gap-2">
{/* View Icon */}
<i
className="bx bx-show text-primary cursor-pointer"
onClick={() =>
setViewRequest({ branchId: branch.id, view: true })
}
></i>
<div className="dropdown z-2">
<button
type="button"
@ -229,6 +248,7 @@ const ServiceBranch = () => {
)}
</ul>
</div>
</div>
</td>
</tr>
))}
@ -277,6 +297,17 @@ const ServiceBranch = () => {
/>
</GlobalModel>
)}
{ViewRequest.view && (
<GlobalModel
isOpen
size="md"
modalType="top"
closeModal={() => setViewRequest({ branchId: null, view: false })}
>
<ViewBranchDetails BranchToEdit={ViewRequest.branchId} />
</GlobalModel>
)}
</div>
</div>
</>

142
src/components/ServiceProject/ServiceProjectBranch/ViewBranchDetails.jsx Normal file
View File

@ -0,0 +1,142 @@
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;