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

Adding list view in Advance payment list.

Browse Source
This commit is contained in:
Kartik Sharma 2025-11-19 10:47:11 +05:30
parent 5b91c13b85
commit 10e54637d5
1 changed files with 159 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
src/components/AdvancePayment/AdvancePaymentList1.jsx
View File

@ -1,60 +1,140 @@
// import React from 'react'
// import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
// const AdvancePaymentList1 = ({ searchString }) => {
// const { data, isError, isLoading, error, isFetching } =
// useExpenseAllTransactionsList(searchString);
// console.log("Kartik", data)
// const recurringExpenseColumns = [
// {
// key: "date",
// label: (
// <>
// Date
// </>
// ),
// align: "text-start",
// },
// { key: "description", label: "Description", align: "text-start" },
// {
// key: "credit",
// label: (
// <>
// Credit <i className="bx bx-rupee text-success"></i>
// </>
// ),
// align: "text-end",
// },
// {
// key: "debit",
// label: (
// <>
// Debit <i className="bx bx-rupee text-danger"></i>
// </>
// ),
// align: "text-end",
// },
// {
// key: "balance",
// label: (
// <>
// Balance <i className="bi bi-currency-rupee text-primary"></i>
// </>
// ),
// align: "text-end fw-bold",
// },
// ];
// return (
// <div className="card-datatable" id="payment-request-table">
// <div className="mx-2">
// {/* {Array.isArray(data) && data.length > 0 && ( */}
// <table className="table border-top dataTable text-nowrap align-middle">
// <thead>
// <tr>
// {recurringExpenseColumns.map((col) => (
// <th key={col.key} className={`sorting ${col.align}`}>
// {col.label}
// </th>
// ))}
// </tr>
// </thead>
// <tbody>
// {data?.length > 0 ? (
// data?.map((recurringExpense) => (
// <tr
// key={recurringExpense.id}
// className="align-middle"
// style={{ height: "40px" }}
// >
// {recurringExpenseColumns.map((col) => (
// <td
// key={col.key}
// className={`d-table-cell ${col.align ?? ""} py-3`}
// >
// {col?.customRender
// ? col?.customRender(recurringExpense)
// : col?.getValue(recurringExpense)}
// </td>
// ))}
// </tr>
// ))
// ) : (
// <tr>
// <td
// colSpan={recurringExpenseColumns?.length + 1}
// className="text-center border-0 py-8"
// ></td>
// </tr>
// )}
// </tbody>
// </table>
// {/* )} */}
// {/* {!data ||
// data.length === 0
// && (
// <div className="d-flex justify-content-center align-items-center h-64">
// {isError ? (<p>{error.message}</p>) : (<p>No Recurring Expense Found</p>)}
// </div>
// )} */}
// </div>
// </div>
// )
// }
// export default AdvancePaymentList1
import React from 'react'
import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
const AdvancePaymentList1 = ({ searchString }) => {
const { data, isError, isLoading, error, isFetching } =
const { data, isError, isLoading, error } =
useExpenseAllTransactionsList(searchString);
console.log("Kartik", data)
const recurringExpenseColumns = [
{
key: "date",
label: (
<>
Date
</>
),
align: "text-start",
},
{ key: "description", label: "Description", align: "text-start" },
{
key: "credit",
label: (
<>
Credit <i className="bx bx-rupee text-success"></i>
</>
),
align: "text-end",
},
{
key: "debit",
label: (
<>
Debit <i className="bx bx-rupee text-danger"></i>
</>
),
align: "text-end",
},
{
key: "balance",
label: (
<>
Balance <i className="bi bi-currency-rupee text-primary"></i>
</>
),
align: "text-end fw-bold",
},
const rows = data;
const columns = [
{ key: "employee", label: "Employee Name", align: "text-start", getValue: (r) => r.firstName + " " + r.lastName },
{ key: "jobRoleName", label: "Job Role", align: "text-start", getValue: (r) => r.jobRoleName },
{ key: "balanceAmount", label: "Balance (₹)", align: "text-end", getValue: (r) => r.balanceAmount },
];
if (isLoading) return <p className="text-center py-4">Loading...</p>;
if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;
return (
<div className="card-datatable" id="payment-request-table">
<div className="mx-2">
{/* {Array.isArray(data) && data.length > 0 && ( */}
<table className="table border-top dataTable text-nowrap align-middle">
<thead>
<tr>
{recurringExpenseColumns.map((col) => (
{columns.map((col) => (
<th key={col.key} className={`sorting ${col.align}`}>
{col.label}
</th>
@ -63,47 +143,30 @@ const AdvancePaymentList1 = ({ searchString }) => {
</thead>
<tbody>
{data?.length > 0 ? (
data?.map((recurringExpense) => (
<tr
key={recurringExpense.id}
className="align-middle"
style={{ height: "40px" }}
>
{recurringExpenseColumns.map((col) => (
<td
key={col.key}
className={`d-table-cell ${col.align ?? ""} py-3`}
>
{col?.customRender
? col?.customRender(recurringExpense)
: col?.getValue(recurringExpense)}
{rows.length > 0 ? (
rows.map((row) => (
<tr key={row.id} className="align-middle" style={{ height: "40px" }}>
{columns.map((col) => (
<td key={col.key} className={`d-table-cell ${col.align} py-3`}>
{col.getValue(row)}
</td>
))}
</tr>
))
) : (
<tr>
<td
colSpan={recurringExpenseColumns?.length + 1}
className="text-center border-0 py-8"
></td>
<td colSpan={columns.length} className="text-center border-0 py-3">
No Employees Found
</td>
</tr>
)}
</tbody>
</table>
{/* )} */}
{/* {!data ||
data.length === 0
&& (
<div className="d-flex justify-content-center align-items-center h-64">
{isError ? (<p>{error.message}</p>) : (<p>No Recurring Expense Found</p>)}
</div>
)} */}
</div>
</div>
)
}
export default AdvancePaymentList1
export default AdvancePaymentList1;