adjust history table whenever select comment tab

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

View File

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

View File

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