Adding list view in Advance payment list.
This commit is contained in:
parent
5b91c13b85
commit
10e54637d5
@ -1,109 +1,172 @@
|
|||||||
|
// 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 React from 'react'
|
||||||
import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
|
import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
|
||||||
|
|
||||||
const AdvancePaymentList1 = ({ searchString }) => {
|
const AdvancePaymentList1 = ({ searchString }) => {
|
||||||
const { data, isError, isLoading, error, isFetching } =
|
|
||||||
|
const { data, isError, isLoading, error } =
|
||||||
useExpenseAllTransactionsList(searchString);
|
useExpenseAllTransactionsList(searchString);
|
||||||
console.log("Kartik", data)
|
|
||||||
|
|
||||||
const recurringExpenseColumns = [
|
const rows = data;
|
||||||
{
|
|
||||||
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 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 },
|
||||||
];
|
];
|
||||||
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>
|
if (isLoading) return <p className="text-center py-4">Loading...</p>;
|
||||||
{data?.length > 0 ? (
|
if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;
|
||||||
data?.map((recurringExpense) => (
|
|
||||||
<tr
|
return (
|
||||||
key={recurringExpense.id}
|
<div className="card-datatable" id="payment-request-table">
|
||||||
className="align-middle"
|
<div className="mx-2">
|
||||||
style={{ height: "40px" }}
|
|
||||||
>
|
<table className="table border-top dataTable text-nowrap align-middle">
|
||||||
{recurringExpenseColumns.map((col) => (
|
<thead>
|
||||||
<td
|
<tr>
|
||||||
key={col.key}
|
{columns.map((col) => (
|
||||||
className={`d-table-cell ${col.align ?? ""} py-3`}
|
<th key={col.key} className={`sorting ${col.align}`}>
|
||||||
>
|
{col.label}
|
||||||
{col?.customRender
|
</th>
|
||||||
? col?.customRender(recurringExpense)
|
))}
|
||||||
: col?.getValue(recurringExpense)}
|
</tr>
|
||||||
</td>
|
</thead>
|
||||||
))}
|
|
||||||
|
<tbody>
|
||||||
</tr>
|
{rows.length > 0 ? (
|
||||||
))
|
rows.map((row) => (
|
||||||
) : (
|
<tr key={row.id} className="align-middle" style={{ height: "40px" }}>
|
||||||
<tr>
|
{columns.map((col) => (
|
||||||
<td
|
<td key={col.key} className={`d-table-cell ${col.align} py-3`}>
|
||||||
colSpan={recurringExpenseColumns?.length + 1}
|
{col.getValue(row)}
|
||||||
className="text-center border-0 py-8"
|
</td>
|
||||||
></td>
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
))
|
||||||
</tbody>
|
) : (
|
||||||
</table>
|
<tr>
|
||||||
{/* )} */}
|
<td colSpan={columns.length} className="text-center border-0 py-3">
|
||||||
{/* {!data ||
|
No Employees Found
|
||||||
data.length === 0
|
</td>
|
||||||
&& (
|
</tr>
|
||||||
<div className="d-flex justify-content-center align-items-center h-64">
|
)}
|
||||||
{isError ? (<p>{error.message}</p>) : (<p>No Recurring Expense Found</p>)}
|
</tbody>
|
||||||
</div>
|
</table>
|
||||||
)} */}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default AdvancePaymentList1
|
export default AdvancePaymentList1;
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user