added skeleton for payment history at add payment form

src/components/collections/AddPayment.jsx

@@ -7,7 +7,10 @@ import DatePicker from "../common/DatePicker";
 import { formatDate } from "date-fns";
 import { useCollectionContext } from "../../pages/collections/CollectionPage";
 import { useAddPayment, useCollection } from "../../hooks/useCollections";
-import { localToUtc } from "../../utils/appUtils";
+import { formatFigure, localToUtc } from "../../utils/appUtils";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Avatar from "../common/Avatar";
+import { PaymentHistorySkeleton } from "./CollectionSkeleton";
 
 const AddPayment = ({ onClose }) => {
   const { addPayment } = useCollectionContext();
@@ -34,7 +37,7 @@ const AddPayment = ({ onClose }) => {
       paymentReceivedDate: localToUtc(formData.paymentReceivedDate),
       invoiceId: addPayment.invoiceId,
     };
-    debugger;
+
     AddPayment(payload);
   };
   const handleClose = (formData) => {
@@ -116,6 +119,59 @@ const AddPayment = ({ onClose }) => {
         </form>
       </FormProvider>
 
+      {isLoading ? (
+        <PaymentHistorySkeleton />
+      ) : (
+        data?.receivedInvoicePayments?.length > 0 && (
+          <div className="mt-1 text-start">
+            <div className="mb-2 text-secondry fs-6">
+              <i className="bx bx-history bx-sm me-1"></i>History
+            </div>
+
+            <div className="row text-start">
+              {data.receivedInvoicePayments.map((payment, index) => (
+                <div className="col-12 mb-2" key={payment.id}>
+                  <div className=" p-2 border-start border-warning">
+                    <div className="d-flex justify-content-between">
+                      <p className="mb-1">
+                        <strong>Date:</strong>{" "}
+                        {formatUTCToLocalTime(payment.paymentReceivedDate)}
+                      </p>{" "}
+                      <span className="text-secondary ">
+                        {formatFigure(payment.amount, {
+                          type: "currency",
+                          currency: "INR",
+                        })}
+                      </span>
+                    </div>
+
+                    <div className="row">
+                      <div className="col-12 col-md-6">
+                        <p className="mb-1">
+                          <small className="fw-semibold">Transaction ID:</small>{" "}
+                          {payment.transactionId}
+                        </p>
+                      </div>
+                      <div className="col-12 col-md-6">
+                        <div className="mb-0 d-flex align-items-center">
+                          <small className="fw-semibold">Received By:</small>{" "}
+                          <Avatar
+                            size="xs"
+                            firstName={payment?.createdBy?.firstName}
+                            lastName={payment?.createdBy?.lastName}
+                          />{" "}
+                          {payment?.createdBy?.firstName}{" "}
+                          {payment.createdBy?.lastName}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )
+      )}
     </div>
   );
 };

src/components/collections/CollectionSkeleton.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
+  <div
+    className={`skeleton mb-2 ${className}`}
+    style={{
+      height,
+      width,
+    }}
+  ></div>
+);
+
+export const PaymentHistorySkeleton = ({ count = 2 }) => {
+  return (
+    <div className="row text-start">
+      {[...Array(count)].map((_, idx) => (
+        <div className="col-12 mb-2" key={idx}>
+          <div className="p-2 border-start border-warning">
+            {/* Top Row: Date + Amount */}
+            <div className="d-flex justify-content-between align-items-center">
+              <SkeletonLine width="150px" height={18} /> {/* Date */}
+              <SkeletonLine width="100px" height={18} /> {/* Amount */}
+            </div>
+
+            <div className="row mt-1">
+              {/* Transaction ID */}
+              <div className="col-12 col-md-6">
+                <SkeletonLine width="80%" height={16} />
+              </div>
+
+              {/* Received By (Avatar + Name) */}
+              <div className="col-12 col-md-6 d-flex align-items-center gap-2">
+                <SkeletonLine width="30px" height={30} className="rounded-circle" /> {/* Avatar */}
+                <SkeletonLine width="120px" height={16} /> {/* Name */}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+