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

added skeleton for payment history at add payment form

Browse Source
This commit is contained in:
pramod.mahajan 2025-10-14 14:23:48 +05:30
parent f91c7d6da1
commit a26e4d1dc2
2 changed files with 101 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/collections/AddPayment.jsx
View File

@ -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>
);
};

43
src/components/collections/CollectionSkeleton.jsx Normal file
View File

@ -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>
);
};