Project_Branch_Management : New Feature Service Project - Branch Management #519
@ -15,12 +15,6 @@ const AdvancePaymentList = ({ employeeId, searchString }) => {
|
||||
const { setBalance } = useAdvancePaymentContext();
|
||||
const { data, isError, isLoading, error, isFetching } =
|
||||
useExpenseTransactions(employeeId, { enabled: !!employeeId });
|
||||
|
||||
const { data: getAllData } =
|
||||
useExpenseAllTransactionsList(searchString ?? "");
|
||||
|
||||
console.log("Kartik", getAllData)
|
||||
|
||||
const records = Array.isArray(data) ? data : [];
|
||||
|
||||
let currentBalance = 0;
|
||||
@ -159,8 +153,8 @@ const AdvancePaymentList = ({ employeeId, searchString }) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Array.isArray(getAllData) && getAllData.length > 0 ? (
|
||||
getAllData.map((row) => (
|
||||
{Array.isArray(data) && data.length > 0 ? (
|
||||
data.map((row) => (
|
||||
<tr key={row.id}>
|
||||
{columns.map((col) => (
|
||||
<td key={col.key} className={`${col.align} p-2`}>
|
||||
|
||||
@ -1,127 +1,56 @@
|
||||
// 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 Avatar from "../../components/common/Avatar"; // <-- ADD THIS
|
||||
import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { formatFigure } from '../../utils/appUtils';
|
||||
|
||||
const AdvancePaymentList1 = ({ searchString }) => {
|
||||
|
||||
const { data, isError, isLoading, error } =
|
||||
useExpenseAllTransactionsList(searchString);
|
||||
|
||||
const rows = data;
|
||||
const rows = data || [];
|
||||
const navigate = useNavigate();
|
||||
|
||||
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 },
|
||||
{
|
||||
key: "employee",
|
||||
label: "Employee Name",
|
||||
align: "text-start",
|
||||
customRender: (r) => (
|
||||
<div className="d-flex align-items-center gap-2" onClick={() => navigate(`/advance-payment/${r.id}`)}
|
||||
style={{ cursor: "pointer" }}>
|
||||
<Avatar firstName={r.firstName} lastName={r.lastName} />
|
||||
|
||||
<span className="fw-medium">
|
||||
{r.firstName} {r.lastName}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "jobRoleName",
|
||||
label: "Job Role",
|
||||
align: "text-start",
|
||||
customRender: (r) => (
|
||||
<span className="fw-semibold">
|
||||
{r.jobRoleName}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "balanceAmount",
|
||||
label: "Balance (₹)",
|
||||
align: "text-end",
|
||||
customRender: (r) => (
|
||||
<span className="fw-semibold fs-6">
|
||||
{formatFigure(r.balanceAmount, {
|
||||
// type: "currency",
|
||||
currency: "INR",
|
||||
})}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (isLoading) return <p className="text-center py-4">Loading...</p>;
|
||||
@ -130,7 +59,6 @@ const AdvancePaymentList1 = ({ searchString }) => {
|
||||
return (
|
||||
<div className="card-datatable" id="payment-request-table">
|
||||
<div className="mx-2">
|
||||
|
||||
<table className="table border-top dataTable text-nowrap align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -148,7 +76,9 @@ const AdvancePaymentList1 = ({ searchString }) => {
|
||||
<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)}
|
||||
{col.customRender
|
||||
? col.customRender(row)
|
||||
: col.getValue(row)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
@ -162,11 +92,9 @@ const AdvancePaymentList1 = ({ searchString }) => {
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AdvancePaymentList1;
|
||||
|
||||
|
||||
@ -50,8 +50,11 @@ const Header = () => {
|
||||
const isRecurringExpense = /^\/recurring-payment$/.test(pathname);
|
||||
const isAdvancePayment = /^\/advance-payment$/.test(pathname);
|
||||
const isServiceProjectPage = /^\/service-projects\/[0-9a-fA-F-]{36}$/.test(pathname);
|
||||
const isAdvancePayment1 =
|
||||
/^\/advance-payment(\/[0-9a-fA-F-]{36})?$/.test(pathname);
|
||||
|
||||
return !(isDirectoryPath || isProfilePage || isExpensePage || isPaymentRequest || isRecurringExpense || isAdvancePayment ||isServiceProjectPage);
|
||||
|
||||
return !(isDirectoryPath || isProfilePage || isExpensePage || isPaymentRequest || isRecurringExpense || isAdvancePayment ||isServiceProjectPage || isAdvancePayment1);
|
||||
};
|
||||
const allowedProjectStatusIds = [
|
||||
"603e994b-a27f-4e5d-a251-f3d69b0498ba",
|
||||
|
||||
@ -13,6 +13,8 @@ import Label from "../../components/common/Label";
|
||||
import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentList";
|
||||
import { employee } from "../../data/masters";
|
||||
import { formatFigure } from "../../utils/appUtils";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useExpenseTransactions } from "../../hooks/useExpense";
|
||||
|
||||
export const AdvancePaymentContext = createContext();
|
||||
export const useAdvancePaymentContext = () => {
|
||||
@ -25,15 +27,30 @@ export const useAdvancePaymentContext = () => {
|
||||
return context;
|
||||
};
|
||||
const AdvancePaymentPage = () => {
|
||||
const { employeeId } = useParams();
|
||||
|
||||
const { data: transactionData } = useExpenseTransactions(employeeId, {
|
||||
enabled: !!employeeId
|
||||
});
|
||||
|
||||
const employeeName = useMemo(() => {
|
||||
if (Array.isArray(transactionData) && transactionData.length > 0) {
|
||||
const emp = transactionData[0].employee;
|
||||
if (emp) return `${emp.firstName} ${emp.lastName}`;
|
||||
}
|
||||
return "";
|
||||
}, [transactionData]);
|
||||
|
||||
const [balance, setBalance] = useState(null);
|
||||
const { control, reset, watch } = useForm({
|
||||
defaultValues: {
|
||||
employeeId: "",
|
||||
employeeId: employeeId || "",
|
||||
searchString: "",
|
||||
},
|
||||
});
|
||||
|
||||
const selectedEmployeeId = watch("employeeId");
|
||||
const selectedEmployeeId = employeeId || watch("employeeId");
|
||||
|
||||
const searchString = watch("searchString");
|
||||
|
||||
useEffect(() => {
|
||||
@ -50,22 +67,13 @@ const AdvancePaymentPage = () => {
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Finance", link: "/advance-payment" },
|
||||
{ label: "Advance Payment" },
|
||||
]}
|
||||
{ label: "Advance Payment", link: "/advance-payment" },
|
||||
employeeName && { label: employeeName, link: "" },
|
||||
].filter(Boolean)}
|
||||
/>
|
||||
|
||||
<div className="card px-4 py-2 page-min-h ">
|
||||
<div className="row py-1">
|
||||
<div className="col-12 col-md-4">
|
||||
<div className="d-block text-start">
|
||||
<EmployeeSearchInput
|
||||
control={control}
|
||||
name="employeeId"
|
||||
projectId={null}
|
||||
forAll={true}
|
||||
placeholder={"Enter Employee Name"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row py-1 justify-content-end">
|
||||
<div className="col-md-8 d-flex align-items-center justify-content-end">
|
||||
{balance ? (
|
||||
<>
|
||||
|
||||
@ -11,6 +11,7 @@ const AdvancePaymentPage1 = () => {
|
||||
},
|
||||
});
|
||||
const searchString = watch("searchString");
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
@ -21,23 +22,10 @@ const AdvancePaymentPage1 = () => {
|
||||
]}
|
||||
/>
|
||||
<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>
|
||||
<div className="row py-1">
|
||||
<AdvancePaymentList1 searchString={searchString} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -118,6 +118,7 @@ const router = createBrowserRouter(
|
||||
{ path: "/payment-request", element: <PaymentRequestPage /> },
|
||||
{ path: "/recurring-payment", element: <RecurringExpensePage /> },
|
||||
{ path: "/advance-payment", element: <AdvancePaymentPage1 /> },
|
||||
{ path: "/advance-payment/:employeeId", element: <AdvancePaymentPage /> },
|
||||
{ path: "/collection", element: <CollectionPage /> },
|
||||
{ path: "/masters", element: <MasterPage /> },
|
||||
{ path: "/tenants", element: <TenantPage /> },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user