marco.pms.web/src/components/collections/PmGridCollection.jsx

124 lines
2.9 KiB
JavaScript

import React from "react";
import { PmsGrid } from "../../services/pmsGrid";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { formatFigure } from "../../utils/appUtils";
import { CollectionRepository } from "../../repositories/ColllectionRepository";
const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
const columns = [
{
key: "invoiceNumber",
title: "Invoice Number",
className: "text-start",
groupable: true,
},
{ key: "title", title: "Title", sortable: true, className: "text-start" },
{
key: "clientSubmitedDate",
title: "Submission Date",
className: "text-start",
groupable: true,
},
{
key: "exceptedPaymentDate",
title: "Expected Payment Date",
className: "text-start",
},
{ key: "totalAmount", title: "Total Amount" },
{ key: "balanceAmount", title: "Balance" },
{ key: "isActive", title: "Status" },
];
const fetcher = async ({ page, pageSize, search, filter }) => {
const response = await CollectionRepository.getCollections(
selectedProject,
search || "",
fromDate,
toDate,
pageSize,
page,
true, // isActive
isPending,
filter
);
const api = response.data;
return {
rows: api.data.map((item) => ({
id: item.id,
invoiceNumber: item.invoiceNumber,
title: item.title,
clientSubmitedDate: formatUTCToLocalTime(item.clientSubmitedDate),
exceptedPaymentDate: formatUTCToLocalTime(item.exceptedPaymentDate),
totalAmount: formatFigure(item.basicAmount + item.taxAmount, {
type: "currency",
currency: "INR",
}),
balanceAmount: formatFigure(item.balanceAmount, {
type: "currency",
currency: "INR",
}),
isActive: item.isActive ? (
<span className="badge bg-label-primary">
<span className="badge badge-dot bg-primary me-1"></span>
Active
</span>
) : (
<span className="badge bg-label-danger">
<span className="badge badge-dot bg-danger me-1"></span>
In-Active
</span>
),
})),
total: api.totalEntities,
};
};
return (
<PmsGrid
columns={columns}
serverMode
fetcher={fetcher}
rowKey="id"
features={{
search: true,
pagination: true,
pinning: true,
resizing: true,
selection: false,
reorder: true,
columnVisibility: true,
pageSizeSelector: true,
grouping: true,
groupByKey: "clientSubmitedDate",
aggregation: true,
IsNumbering: true,
actions: [
{
label: "Edit",
icon: "bx-edit ",
onClick: (row) => console.log("Edit", row),
},
{
label: "Delete",
icon: "bx-trash text-danger",
onClick: (row) => console.log("Delete", row),
},
],
}}
/>
);
};
export default PmGridCollection;