From 833cb98dd31ca0e407419010b9c34fe33ccedd62 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Wed, 26 Nov 2025 16:51:01 +0530 Subject: [PATCH] Change the Name of AdvancePayment Component. --- .../AdvancePayment/AdvancePaymentList.jsx | 313 +++++------------- .../AdvancePayment/AdvancePaymentList1.jsx | 100 ------ .../AdvancePaymentListDetails.jsx | 233 +++++++++++++ .../AdvancePayment/AdvancePaymentPage.jsx | 130 ++------ .../AdvancePayment/AdvancePaymentPage1.jsx | 34 -- .../AdvancePaymentPageDetails.jsx | 108 ++++++ src/router/AppRoutes.jsx | 13 +- 7 files changed, 467 insertions(+), 464 deletions(-) delete mode 100644 src/components/AdvancePayment/AdvancePaymentList1.jsx create mode 100644 src/components/AdvancePayment/AdvancePaymentListDetails.jsx delete mode 100644 src/pages/AdvancePayment/AdvancePaymentPage1.jsx create mode 100644 src/pages/AdvancePayment/AdvancePaymentPageDetails.jsx diff --git a/src/components/AdvancePayment/AdvancePaymentList.jsx b/src/components/AdvancePayment/AdvancePaymentList.jsx index c6e9d004..39cf5d46 100644 --- a/src/components/AdvancePayment/AdvancePaymentList.jsx +++ b/src/components/AdvancePayment/AdvancePaymentList.jsx @@ -1,233 +1,100 @@ +import React from 'react' +import Avatar from "../common/Avatar"; // <-- ADD THIS +import { useExpenseAllTransactionsList } from '../../hooks/useExpense'; +import { useNavigate } from 'react-router-dom'; +import { formatFigure } from '../../utils/appUtils'; -import React, { useEffect, useMemo } from "react"; -import { useExpenseAllTransactionsList, useExpenseTransactions } from "../../hooks/useExpense"; -import Error from "../common/Error"; -import { formatUTCToLocalTime } from "../../utils/dateUtils"; -import Loader, { SpinnerLoader } from "../common/Loader"; -import { useForm, useFormContext } from "react-hook-form"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { z } from "zod"; -import { employee } from "../../data/masters"; -import { useAdvancePaymentContext } from "../../pages/AdvancePayment/AdvancePaymentPage"; -import { formatFigure } from "../../utils/appUtils"; +const AdvancePaymentList = ({ searchString }) => { -const AdvancePaymentList = ({ employeeId, searchString }) => { - const { setBalance } = useAdvancePaymentContext(); - const { data, isError, isLoading, error, isFetching } = - useExpenseTransactions(employeeId, { enabled: !!employeeId }); - const records = Array.isArray(data) ? data : []; + const { data, isError, isLoading, error } = + useExpenseAllTransactionsList(searchString); - let currentBalance = 0; - const rowsWithBalance = records.map((r) => { - const isCredit = r.amount > 0; - const credit = isCredit ? r.amount : 0; - const debit = !isCredit ? Math.abs(r.amount) : 0; - currentBalance += credit - debit; - return { - id: r.id, - description: r.title || "-", - projectName: r.project?.name || "-", - createdAt: r.createdAt, - credit, - debit, - financeUId: r.financeUId, - balance: currentBalance, - }; - }); + const rows = data || []; + const navigate = useNavigate(); - useEffect(() => { - if (!employeeId) { - setBalance(null); - return; - } + const columns = [ + { + key: "employee", + label: "Employee Name", + align: "text-start", + customRender: (r) => ( +
navigate(`/advance-payment/${r.id}`)} + style={{ cursor: "pointer" }}> + - if (rowsWithBalance.length > 0) { - setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance); - } else { - setBalance(0); - } - }, [employeeId, data, setBalance]); + + {r.firstName} {r.lastName} + +
+ ), + }, + { + key: "jobRoleName", + label: "Job Role", + align: "text-start", + customRender: (r) => ( + + {r.jobRoleName} + + ), + }, + { + key: "balanceAmount", + label: "Balance (₹)", + align: "text-end", + customRender: (r) => ( + + {formatFigure(r.balanceAmount, { + // type: "currency", + currency: "INR", + })} + + ), + }, + ]; + + if (isLoading) return

Loading...

; + if (isError) return

{error.message}

; - if (!employeeId) { return ( -
-

Please select an employee

-
- ); - } +
+
+ + + + {columns.map((col) => ( + + ))} + + - if (isLoading || isFetching) { - return ( -
- -
- ); - } - - if (isError) { - return ( -
- {error?.status === 404 - ? "No advance payment transactions found." - : } -
- ); - } - const columns = [ - { - key: "date", - label: ( - <> - Date - - ), - align: "text-start", - }, - { key: "description", label: "Description", align: "text-start" }, - - { - key: "credit", - label: ( - <> - Credit - - ), - align: "text-end", - }, - { - key: "debit", - label: ( - <> - Debit - - ), - align: "text-end", - }, - - { - key: "balance", - label: ( - <> - Balance - - ), - align: "text-end fw-bold", - }, - ]; - - // Handle empty records - if (rowsWithBalance.length === 0) { - return ( -
- No advance payment records found. -
- ); - } - const DecideCreditOrDebit = ({ financeUId }) => { - if (!financeUId) return null; - - const prefix = financeUId?.substring(0, 2).toUpperCase(); - - if (prefix === "PR") return +; - if (prefix === "EX") return -; - - return null; - }; - - return ( -
-
+ {col.label} +
- - - {columns.map((col) => ( - - ))} - - - - {Array.isArray(data) && data.length > 0 ? ( - data.map((row) => ( - - {columns.map((col) => ( - - ))} - - )) - ) : ( - - - - )} - - - - - - - - -
- {col.label} -
- {col.key === "credit" ? ( - row.amount > 0 ? ( - {row.amount.toLocaleString("en-IN")} - ) : ( - "-" - ) - ) : col.key === "debit" ? ( - row.amount < 0 ? ( - - {Math.abs(row.amount).toLocaleString("en-IN")} - - ) : ( - "-" - ) - ) : col.key === "balance" ? ( -
- {/* */} - - {formatFigure(row.currentBalance)} - -
- ) : col.key === "date" ? ( - - {formatUTCToLocalTime(row.paidAt)} - - ) : ( -
- - {row.project?.name || "-"} - - {row.title || "-"} -
- )} -
- No advance payment records found. -
- {" "} -
- Final Balance -
- 		-
- {currentBalance.toLocaleString("en-IN", { - style: "currency", - currency: "INR", - })} -
-
-
- ); -}; + + {rows.length > 0 ? ( + rows.map((row) => ( + + {columns.map((col) => ( + + {col.customRender + ? col.customRender(row) + : col.getValue(row)} + + ))} + + )) + ) : ( + + + No Employees Found + + + )} + + +
+ + ) +} export default AdvancePaymentList; diff --git a/src/components/AdvancePayment/AdvancePaymentList1.jsx b/src/components/AdvancePayment/AdvancePaymentList1.jsx deleted file mode 100644 index e17cd1b1..00000000 --- a/src/components/AdvancePayment/AdvancePaymentList1.jsx +++ /dev/null @@ -1,100 +0,0 @@ -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 navigate = useNavigate(); - - const columns = [ - { - key: "employee", - label: "Employee Name", - align: "text-start", - customRender: (r) => ( -
navigate(`/advance-payment/${r.id}`)} - style={{ cursor: "pointer" }}> - - - - {r.firstName} {r.lastName} - -
- ), - }, - { - key: "jobRoleName", - label: "Job Role", - align: "text-start", - customRender: (r) => ( - - {r.jobRoleName} - - ), - }, - { - key: "balanceAmount", - label: "Balance (₹)", - align: "text-end", - customRender: (r) => ( - - {formatFigure(r.balanceAmount, { - // type: "currency", - currency: "INR", - })} - - ), - }, - ]; - - if (isLoading) return

Loading...

; - if (isError) return

{error.message}

; - - return ( -
-
- - - - {columns.map((col) => ( - - ))} - - - - - {rows.length > 0 ? ( - rows.map((row) => ( - - {columns.map((col) => ( - - ))} - - )) - ) : ( - - - - )} - -
- {col.label} -
- {col.customRender - ? col.customRender(row) - : col.getValue(row)} -
- No Employees Found -
-
-
- ) -} - -export default AdvancePaymentList1; diff --git a/src/components/AdvancePayment/AdvancePaymentListDetails.jsx b/src/components/AdvancePayment/AdvancePaymentListDetails.jsx new file mode 100644 index 00000000..f6af63f7 --- /dev/null +++ b/src/components/AdvancePayment/AdvancePaymentListDetails.jsx @@ -0,0 +1,233 @@ + +import React, { useEffect, useMemo } from "react"; +import { useExpenseAllTransactionsList, useExpenseTransactions } from "../../hooks/useExpense"; +import Error from "../common/Error"; +import { formatUTCToLocalTime } from "../../utils/dateUtils"; +import Loader, { SpinnerLoader } from "../common/Loader"; +import { useForm, useFormContext } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { z } from "zod"; +import { employee } from "../../data/masters"; +import { useAdvancePaymentContext } from "../../pages/AdvancePayment/AdvancePaymentPageDetails"; // All data +import { formatFigure } from "../../utils/appUtils"; + +const AdvancePaymentListDetails = ({ employeeId, searchString }) => { + const { setBalance } = useAdvancePaymentContext(); + const { data, isError, isLoading, error, isFetching } = + useExpenseTransactions(employeeId, { enabled: !!employeeId }); + const records = Array.isArray(data) ? data : []; + + let currentBalance = 0; + const rowsWithBalance = records.map((r) => { + const isCredit = r.amount > 0; + const credit = isCredit ? r.amount : 0; + const debit = !isCredit ? Math.abs(r.amount) : 0; + currentBalance += credit - debit; + return { + id: r.id, + description: r.title || "-", + projectName: r.project?.name || "-", + createdAt: r.createdAt, + credit, + debit, + financeUId: r.financeUId, + balance: currentBalance, + }; + }); + + useEffect(() => { + if (!employeeId) { + setBalance(null); + return; + } + + if (rowsWithBalance.length > 0) { + setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance); + } else { + setBalance(0); + } + }, [employeeId, data, setBalance]); + + if (!employeeId) { + return ( +
+

Please select an employee

+
+ ); + } + + if (isLoading || isFetching) { + return ( +
+ +
+ ); + } + + if (isError) { + return ( +
+ {error?.status === 404 + ? "No advance payment transactions found." + : } +
+ ); + } + const columns = [ + { + key: "date", + label: ( + <> + Date + + ), + align: "text-start", + }, + { key: "description", label: "Description", align: "text-start" }, + + { + key: "credit", + label: ( + <> + Credit + + ), + align: "text-end", + }, + { + key: "debit", + label: ( + <> + Debit + + ), + align: "text-end", + }, + + { + key: "balance", + label: ( + <> + Balance + + ), + align: "text-end fw-bold", + }, + ]; + + // Handle empty records + if (rowsWithBalance.length === 0) { + return ( +
+ No advance payment records found. +
+ ); + } + const DecideCreditOrDebit = ({ financeUId }) => { + if (!financeUId) return null; + + const prefix = financeUId?.substring(0, 2).toUpperCase(); + + if (prefix === "PR") return +; + if (prefix === "EX") return -; + + return null; + }; + + return ( +
+ + + + {columns.map((col) => ( + + ))} + + + + {Array.isArray(data) && data.length > 0 ? ( + data.map((row) => ( + + {columns.map((col) => ( + + ))} + + )) + ) : ( + + + + )} + + + + + + + + +
+ {col.label} +
+ {col.key === "credit" ? ( + row.amount > 0 ? ( + {row.amount.toLocaleString("en-IN")} + ) : ( + "-" + ) + ) : col.key === "debit" ? ( + row.amount < 0 ? ( + + {Math.abs(row.amount).toLocaleString("en-IN")} + + ) : ( + "-" + ) + ) : col.key === "balance" ? ( +
+ {/* */} + + {formatFigure(row.currentBalance)} + +
+ ) : col.key === "date" ? ( + + {formatUTCToLocalTime(row.paidAt)} + + ) : ( +
+ + {row.project?.name || "-"} + + {row.title || "-"} +
+ )} +
+ No advance payment records found. +
+ {" "} +
+ Final Balance +
+ 		+
+ {currentBalance.toLocaleString("en-IN", { + style: "currency", + currency: "INR", + })} +
+
+
+ ); +}; + +export default AdvancePaymentListDetails; diff --git a/src/pages/AdvancePayment/AdvancePaymentPage.jsx b/src/pages/AdvancePayment/AdvancePaymentPage.jsx index f95f199a..c634dca5 100644 --- a/src/pages/AdvancePayment/AdvancePaymentPage.jsx +++ b/src/pages/AdvancePayment/AdvancePaymentPage.jsx @@ -1,108 +1,34 @@ -import React, { - createContext, - useContext, - useEffect, - useMemo, - useState, -} from "react"; -import Breadcrumb from "../../components/common/Breadcrumb"; -import { useEmployee } from "../../hooks/useEmployees"; -import EmployeeSearchInput from "../../components/common/EmployeeSearchInput"; -import { useForm } from "react-hook-form"; -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"; +import React from 'react' +import Breadcrumb from '../../components/common/Breadcrumb' +import AdvancePaymentList1 from '../../components/AdvancePayment/AdvancePaymentList' +import { useForm } from 'react-hook-form'; +import EmployeeSearchInput from '../../components/common/EmployeeSearchInput'; -export const AdvancePaymentContext = createContext(); -export const useAdvancePaymentContext = () => { - const context = useContext(AdvancePaymentContext); - if (!context) { - throw new Error( - "useAdvancePaymentContext must be used within an AdvancePaymentProvider" - ); - } - 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 || "", - searchString: "", - }, - }); - - const selectedEmployeeId = employeeId || watch("employeeId"); - - const searchString = watch("searchString"); - - useEffect(() => { - const selectedEmpoyee = sessionStorage.getItem("transaction-empId"); - reset({ - employeeId: selectedEmpoyee || "", + const { control, reset, watch } = useForm({ + defaultValues: { + searchString: "", + }, }); - }, [reset]); + const searchString = watch("searchString"); + + return ( +
+ +
+
+ +
+
- return ( - -
- - -
-
-
- {balance ? ( - <> - - 0 ? "text-success" : "text-danger" - } fs-5 fw-bold ms-1`} - > - {balance > 0 ? ( - - ) : ( - - )}{" "} - {formatFigure(balance, { - type: "currency", - currency: "INR", - })} - - - ) : ( - <> - )} -
-
-
-
- - ); -}; + ) +} -export default AdvancePaymentPage; +export default AdvancePaymentPage diff --git a/src/pages/AdvancePayment/AdvancePaymentPage1.jsx b/src/pages/AdvancePayment/AdvancePaymentPage1.jsx deleted file mode 100644 index 4ba3721b..00000000 --- a/src/pages/AdvancePayment/AdvancePaymentPage1.jsx +++ /dev/null @@ -1,34 +0,0 @@ -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({ - defaultValues: { - searchString: "", - }, - }); - const searchString = watch("searchString"); - - return ( -
- -
-
- -
-
- -
- ) -} - -export default AdvancePaymentPage1 diff --git a/src/pages/AdvancePayment/AdvancePaymentPageDetails.jsx b/src/pages/AdvancePayment/AdvancePaymentPageDetails.jsx new file mode 100644 index 00000000..e1fa3cac --- /dev/null +++ b/src/pages/AdvancePayment/AdvancePaymentPageDetails.jsx @@ -0,0 +1,108 @@ +import React, { + createContext, + useContext, + useEffect, + useMemo, + useState, +} from "react"; +import Breadcrumb from "../../components/common/Breadcrumb"; +import { useEmployee } from "../../hooks/useEmployees"; +import EmployeeSearchInput from "../../components/common/EmployeeSearchInput"; +import { useForm } from "react-hook-form"; +import Label from "../../components/common/Label"; +import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentListDetails"; +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 = () => { + const context = useContext(AdvancePaymentContext); + if (!context) { + throw new Error( + "useAdvancePaymentContext must be used within an AdvancePaymentProvider" + ); + } + return context; +}; +const AdvancePaymentPageDetails = () => { + 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 || "", + searchString: "", + }, + }); + + const selectedEmployeeId = employeeId || watch("employeeId"); + + const searchString = watch("searchString"); + + useEffect(() => { + const selectedEmpoyee = sessionStorage.getItem("transaction-empId"); + reset({ + employeeId: selectedEmpoyee || "", + }); + }, [reset]); + + return ( + +
+ + +
+
+
+ {balance ? ( + <> + + 0 ? "text-success" : "text-danger" + } fs-5 fw-bold ms-1`} + > + {balance > 0 ? ( + + ) : ( + + )}{" "} + {formatFigure(balance, { + type: "currency", + currency: "INR", + })} + + + ) : ( + <> + )} +
+
+ +
+
+ + ); +}; + +export default AdvancePaymentPageDetails; diff --git a/src/router/AppRoutes.jsx b/src/router/AppRoutes.jsx index dc556a6e..704eee01 100644 --- a/src/router/AppRoutes.jsx +++ b/src/router/AppRoutes.jsx @@ -58,10 +58,10 @@ import SubscriptionSummary from "../pages/Home/SubscriptionSummary"; import MakeSubscription from "../pages/Home/MakeSubscription"; import PaymentRequestPage from "../pages/PaymentRequest/PaymentRequestPage"; import RecurringExpensePage from "../pages/RecurringExpense/RecurringExpensePage"; -import AdvancePaymentPage from "../pages/AdvancePayment/AdvancePaymentPage"; import ServiceProjectDetail from "../pages/ServiceProject/ServiceProjectDetail"; import ManageJob from "../components/ServiceProject/ServiceProjectJob/ManageJob"; -import AdvancePaymentPage1 from "../pages/AdvancePayment/AdvancePaymentPage1"; +import AdvancePaymentPageDetails from "../pages/AdvancePayment/AdvancePaymentPageDetails"; +import AdvancePaymentPage from "../pages/AdvancePayment/AdvancePaymentPage"; const router = createBrowserRouter( [ { @@ -97,7 +97,7 @@ const router = createBrowserRouter( { path: "/projects/details", element: }, { path: "/project/manage/:projectId", element: }, { path: "/service-projects/:projectId", element: }, - {path:"/service/job",element:}, + { path: "/service/job", element: }, { path: "/employees", element: }, { path: "/employee/:employeeId", element: }, @@ -117,8 +117,11 @@ const router = createBrowserRouter( { path: "/expenses", element: }, { path: "/payment-request", element: }, { path: "/recurring-payment", element: }, - { path: "/advance-payment", element: }, - { path: "/advance-payment/:employeeId", element: }, + // { path: "/advance-payment", element: }, + // { path: "/advance-payment/:employeeId", element: }, + + { path: "/advance-payment", element: }, + { path: "/advance-payment/:employeeId", element: }, { path: "/collection", element: }, { path: "/masters", element: }, { path: "/tenants", element: },