adjust history table whenever select comment tab
This commit is contained in:
parent
ca88928850
commit
51cca64dd5
@ -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
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user