adjust history table whenever select comment tab

src/components/collections/Comment.jsx

@@ -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

src/components/collections/ViewCollection.jsx

@@ -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);
@@ -70,7 +71,7 @@ const ViewCollection = ({ onClose }) => {
             <div className="col-8">{data?.eInvoiceNumber}</div>
           </div>
         </div>
-     
+
         {/* Row 3: Invoice Date + Client Submitted Date */}
         <div className="col-md-6">
           <div className="row mb-4 align-items-end">
@@ -97,7 +98,7 @@ const ViewCollection = ({ onClose }) => {
             </div>
           </div>
         </div>
-    
+
         {/* Row 5: Basic Amount + Tax Amount */}
         <div className="col-md-6">
           <div className="row mb-4 align-items-end">
@@ -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">
+          <div className=" me-2 mb-0 fw-semibold">Description :</div>
-            Description :
-          </div>
           <div className="text-muted">{data?.description}</div>
         </div>
-        
+
         <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">
             {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"
+                className={`nav-link ${
-                id="payments-tab"
+                  activeTab === "payments" ? "active" : ""
-                data-bs-toggle="tab"
+                }`}
-                data-bs-target="#payments"
+                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 "
+                className={`nav-link ${
-                id="details-tab"
+                  activeTab === "details" ? "active" : ""
-                data-bs-toggle="tab"
+                }`}
-                data-bs-target="#details"
+                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 ">
+          {/* 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} />
               </div>
-            </div>
+            )}
+
+            {activeTab === "details" && (
+              <div className="tab-pane fade show active">
+                <Comment invoice={data} />
+              </div>
+            )}
           </div>
         </div>
       </div>