From 18ac8e11bd00e08c4fdfc88c8e7159a8a186139f Mon Sep 17 00:00:00 2001 From: "pramod.mahajan" Date: Sat, 4 Oct 2025 10:50:14 +0530 Subject: [PATCH] added expense filte at api url level --- src/components/Dashboard/Dashboard.jsx | 13 +++---------- src/components/Dashboard/ExpenseAnalysis.jsx | 18 +++++++++++++----- src/components/Dashboard/ExpenseStatus.jsx | 10 +++++++++- src/components/Expenses/ExpenseFilterPanel.jsx | 7 ++++--- src/hooks/useDashboard_Data.jsx | 5 ++++- src/router/AppRoutes.jsx | 2 +- src/utils/appUtils.js | 2 +- 7 files changed, 35 insertions(+), 22 deletions(-) diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index 750e68be..931ad8a9 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -30,16 +30,6 @@ const Dashboard = () => { return (
- {/*
- -
- - {!isAllProjectsSelected && ( -
- -
- )} */} -
@@ -53,6 +43,9 @@ const Dashboard = () => {
+ {isAllProjectsSelected && (
+ +
)}
); }; diff --git a/src/components/Dashboard/ExpenseAnalysis.jsx b/src/components/Dashboard/ExpenseAnalysis.jsx index f1ce888a..fb61c29f 100644 --- a/src/components/Dashboard/ExpenseAnalysis.jsx +++ b/src/components/Dashboard/ExpenseAnalysis.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import Chart from "react-apexcharts"; import { useExpenseAnalysis } from "../../hooks/useDashboard_Data"; import { useSelectedProject } from "../../slices/apiDataManager"; @@ -18,21 +18,29 @@ const ExpenseAnalysis = () => { const { watch } = methods; + const [startDate, endDate] = watch(["startDate", "endDate"]); const { data, isLoading, isError, error, isFetching } = useExpenseAnalysis( - projectId, - localToUtc(startDate), - localToUtc(endDate) + projectId, + startDate ? localToUtc(startDate) : null, + endDate ? localToUtc(endDate) : null ); if (isError) return
{error.message}
; - const report = data?.report || []; + + + const report = data?.report ?? []; + +const { labels, series, total } = useMemo(() => { const labels = report.map((item) => item.projectName); const series = report.map((item) => item.totalApprovedAmount || 0); const total = formatCurrency(data?.totalAmount || 0); + return { labels, series, total }; +}, [report, data?.totalAmount]); + const donutOptions = { chart: { type: "donut" }, labels, diff --git a/src/components/Dashboard/ExpenseStatus.jsx b/src/components/Dashboard/ExpenseStatus.jsx index 3fdddf51..ee2b2161 100644 --- a/src/components/Dashboard/ExpenseStatus.jsx +++ b/src/components/Dashboard/ExpenseStatus.jsx @@ -22,6 +22,14 @@ const ExpenseStatus = () => { setProjectName("All Project"); } }, [projectNames, selectedProject]); + + const handleNavigate = (status) => { + if (selectedProject) { + navigate(`/expenses/${status}/${selectedProject}`); + } else { + navigate(`/expenses/${status}`); + } + }; return ( <>
@@ -79,7 +87,7 @@ const ExpenseStatus = () => {
navigate(`/expenses/${item.status}`)} + onClick={()=>handleNavigate(item.status)} >
diff --git a/src/components/Expenses/ExpenseFilterPanel.jsx b/src/components/Expenses/ExpenseFilterPanel.jsx index c3e2db23..7a47ec6d 100644 --- a/src/components/Expenses/ExpenseFilterPanel.jsx +++ b/src/components/Expenses/ExpenseFilterPanel.jsx @@ -16,7 +16,7 @@ import { ExpenseFilterSkeleton } from "./ExpenseSkeleton"; import { useLocation, useNavigate, useParams } from "react-router-dom"; const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => { - const { status } = useParams(); + const { status, project } = useParams(); const navigate = useNavigate(); const selectedProjectId = useSelector( (store) => store.localVariables.projectId @@ -43,7 +43,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => { return { ...defaultFilter, statusIds: status ? [status] : defaultFilter.statusIds || [], - projectIds: defaultFilter.projectIds || [], + projectIds: project ? [project] : defaultFilter.projectIds || [], createdByIds: defaultFilter.createdByIds || [], paidById: defaultFilter.paidById || [], isTransactionDate: defaultFilter.isTransactionDate ?? true, @@ -99,7 +99,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => { const [appliedStatusId, setAppliedStatusId] = useState(null); useEffect(() => { - if (!status) return; + if (!status && !project) return; if (status !== appliedStatusId && data) { const filterWithStatus = { @@ -121,6 +121,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => { } }, [ status, + project, data, dynamicDefaultFilter, onApply, diff --git a/src/hooks/useDashboard_Data.jsx b/src/hooks/useDashboard_Data.jsx index 5d11705a..747d2f5b 100644 --- a/src/hooks/useDashboard_Data.jsx +++ b/src/hooks/useDashboard_Data.jsx @@ -268,7 +268,10 @@ export const useExpenseAnalysis = (projectId, startDate, endDate) => { const resp = await GlobalRepository.getExpenseData(projectId, startDate, endDate); return resp.data; }, - enabled:shouldFetch + enabled:shouldFetch, + refetchOnWindowFocus: true, // refetch when you come back + refetchOnMount: "always", // always refetch on remount + staleTime: 0, }); }; export const useExpenseStatus = (projectId)=>{ diff --git a/src/router/AppRoutes.jsx b/src/router/AppRoutes.jsx index 78574732..24e98921 100644 --- a/src/router/AppRoutes.jsx +++ b/src/router/AppRoutes.jsx @@ -94,7 +94,7 @@ const router = createBrowserRouter( { path: "/activities/task", element: }, { path: "/activities/reports", element: }, { path: "/gallary", element: }, - { path: "/expenses/:status?", element: }, + { path: "/expenses/:status?/:project?", element: }, { path: "/masters", element: }, { path: "/tenants", element: }, { path: "/tenants/new-tenant", element: }, diff --git a/src/utils/appUtils.js b/src/utils/appUtils.js index 775ac756..bbfd3636 100644 --- a/src/utils/appUtils.js +++ b/src/utils/appUtils.js @@ -97,7 +97,7 @@ export const formatCurrency = (amount, currency = "INR", locale = "en-US") => { return new Intl.NumberFormat(locale, { style: "currency", currency: currency, - minimumFractionDigits: 2, + minimumFractionDigits: 0, maximumFractionDigits: 2, }).format(amount); };