adding list view in advance payment list.

This commit is contained in:
Kartik Sharma 2025-11-19 09:46:41 +05:30
parent 54d89e1429
commit 5b91c13b85
3 changed files with 119 additions and 9 deletions

View File

@ -1,15 +1,108 @@
import React from 'react'
import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
const AdvancePaymentList1 = ({searchString}) => {
const AdvancePaymentList1 = ({ searchString }) => {
const { data, isError, isLoading, error, isFetching } =
useExpenseAllTransactionsList();
return (
<div className="card page-min-h table-responsive px-sm-4">
<div className="card-datatable" id="payment-request-table">
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>
</div>
)
}

View File

@ -166,7 +166,7 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
}
);
};
console.log("Tanish",filteredData)
return (
<>
{IsDeleteModalOpen && (

View File

@ -2,6 +2,7 @@ import React from 'react'
import Breadcrumb from '../../components/common/Breadcrumb'
import AdvancePaymentList1 from '../../components/AdvancePayment/AdvancePaymentList1'
import { useForm } from 'react-hook-form';
import EmployeeSearchInput from '../../components/common/EmployeeSearchInput';
const AdvancePaymentPage1 = () => {
const { control, reset, watch } = useForm({
@ -19,9 +20,25 @@ const AdvancePaymentPage1 = () => {
{ label: "Advance Payment" },
]}
/>
<div className="card px-4 py-2 page-min-h ">
<AdvancePaymentList1 searchString={searchString} />
<div className="card px-4 py-2 page-min-h">
<div className="row py-1">
<div className="col-12 col-md-4 mb-3">
<div className="d-block text-start">
<EmployeeSearchInput
control={control}
name="employeeId"
projectId={null}
forAll={true}
placeholder={"Enter Employee Name"}
/>
</div>
</div>
<AdvancePaymentList1 searchString={searchString} />
</div>
</div>
</div>
)
}