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

adjust history table whenever select comment tab

Browse Source
This commit is contained in:
pramod.mahajan 2025-10-15 12:55:07 +05:30
parent ca88928850
commit 51cca64dd5
2 changed files with 29 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/collections/Comment.jsx
View File

@ -27,7 +27,7 @@ const Comment = ({ invoice }) => {
AddComment(payload); AddComment(payload);
}; };
return ( return (
<div className="row pt-1"> <div className="row pt-1 px-2">
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="col-12"> <div className="col-12">
<textarea <textarea

58
src/components/collections/ViewCollection.jsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useState } from "react";
import { useCollectionContext } from "../../pages/collections/CollectionPage"; import { useCollectionContext } from "../../pages/collections/CollectionPage";
import { useCollection } from "../../hooks/useCollections"; import { useCollection } from "../../hooks/useCollections";
import { formatUTCToLocalTime } from "../../utils/dateUtils"; import { formatUTCToLocalTime } from "../../utils/dateUtils";
@ -9,6 +9,7 @@ import Comment from "./Comment";
import { CollectionDetailsSkeleton } from "./CollectionSkeleton"; import { CollectionDetailsSkeleton } from "./CollectionSkeleton";
const ViewCollection = ({ onClose }) => { const ViewCollection = ({ onClose }) => {
const [activeTab, setActiveTab] = useState("payments");
const { viewCollection, setCollection, setDocumentView } = const { viewCollection, setCollection, setDocumentView } =
useCollectionContext(); useCollectionContext();
const { data, isLoading, isError, error } = useCollection(viewCollection); const { data, isLoading, isError, error } = useCollection(viewCollection);
@ -157,16 +158,12 @@ const ViewCollection = ({ onClose }) => {
</div> </div>
{/* Description */} {/* Description */}
<div className="col-12 my-1 mb-2"> <div className="col-12 my-1 mb-2">
<div className=" me-2 mb-0 fw-semibold"> <div className=" me-2 mb-0 fw-semibold">Description :</div>
Description :
</div>
<div className="text-muted">{data?.description}</div> <div className="text-muted">{data?.description}</div>
</div> </div>
<div className="col-12 text-start"> <div className="col-12 text-start">
<label className=" me-2 mb-2 fw-semibold"> <label className=" me-2 mb-2 fw-semibold">Attachment :</label>
Attachment :
</label>
<div className="d-flex flex-wrap gap-2"> <div className="d-flex flex-wrap gap-2">
{data?.attachments?.map((doc) => { {data?.attachments?.map((doc) => {
@ -205,30 +202,27 @@ const ViewCollection = ({ onClose }) => {
</div> </div>
</div> </div>
<div className="container px-1">
<div className="container px-1 ">
{/* Tabs Navigation */} {/* Tabs Navigation */}
<ul className="nav nav-tabs" role="tablist"> <ul className="nav nav-tabs" role="tablist">
<li className="nav-item active"> <li className="nav-item">
<button <button
className="nav-link" className={`nav-link ${
id="payments-tab" activeTab === "payments" ? "active" : ""
data-bs-toggle="tab" }`}
data-bs-target="#payments" onClick={() => setActiveTab("payments")}
type="button" type="button"
role="tab"
> >
<i className="bx bx-history bx-sm me-1"></i> Payments History <i className="bx bx-history bx-sm me-1"></i> Payments History
</button> </button>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<button <button
className="nav-link " className={`nav-link ${
id="details-tab" activeTab === "details" ? "active" : ""
data-bs-toggle="tab" }`}
data-bs-target="#details" onClick={() => setActiveTab("details")}
type="button" type="button"
role="tab"
> >
<i className="bx bx-message-dots bx-sm me-2"></i> Comments ( <i className="bx bx-message-dots bx-sm me-2"></i> Comments (
{data?.comments?.length ?? "0"}) {data?.comments?.length ?? "0"})
@ -236,21 +230,19 @@ const ViewCollection = ({ onClose }) => {
</li> </li>
</ul> </ul>
<div className="tab-content px-1 py-0 border-top-0 "> {/* Tab Content */}
<div className="tab-pane fade " id="details" role="tabpanel"> <div className="tab-content px-1 py-0 border-top-0">
<Comment invoice={data} /> {activeTab === "payments" && (
</div> <div className="tab-pane fade show active">
{/* Payments History Tab Content */}
<div
className="tab-pane fade show active"
id="payments"
role="tabpanel"
>
<div className="row text-start">
<PaymentHistoryTable data={data} /> <PaymentHistoryTable data={data} />
</div> </div>
</div> )}
{activeTab === "details" && (
<div className="tab-pane fade show active">
<Comment invoice={data} />
</div>
)}
</div> </div>
</div> </div>
</div> </div>