added expense filte at api url level

src/components/Dashboard/Dashboard.jsx

@@ -30,16 +30,6 @@ const Dashboard = () => {
 
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
-      {/* <div className="col-xxl-6 col-lg-6">
-    
-        </div>
-
-        {!isAllProjectsSelected && (
-          <div className="col-xxl-6 col-lg-6">
-            <AttendanceOverview /> 
-          </div>
-        )} */}
-
       <div class="row mb-6 g-6">
         <div class="col-12 col-xl-8">
           <div class="card h-100">
@@ -53,6 +43,9 @@ const Dashboard = () => {
           </div>
         </div>
       </div>
+    {isAllProjectsSelected && (<div className="co-12">
+        <AttendanceOverview />
+      </div>)}  
     </div>
   );
 };

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,
+  projectId,
-    localToUtc(startDate),
+  startDate ? localToUtc(startDate) : null,
-    localToUtc(endDate)
+  endDate ? localToUtc(endDate) : null
   );
 
   if (isError) return <div>{error.message}</div>;
 
-  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,

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 (
     <>
       <div className="card-header d-flex justify-content-between text-start">
@@ -79,7 +87,7 @@ const ExpenseStatus = () => {
             <div
               key={idx}
               className="report-list-item rounded-2 mb-4  bg-lighter px-2 py-3 cursor-pointer"
-              onClick={() => navigate(`/expenses/${item.status}`)}
+              onClick={()=>handleNavigate(item.status)}
             >
               <div className="d-flex align-items-center">
                 <div className="report-list-icon shadow-xs me-4">

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,

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)=>{

src/router/AppRoutes.jsx

@@ -94,7 +94,7 @@ const router = createBrowserRouter(
             { path: "/activities/task", element: <TaskPlannng /> },
             { path: "/activities/reports", element: <Reports /> },
             { path: "/gallary", element: <ComingSoonPage /> },
-            { path: "/expenses/:status?", element: <ExpensePage /> },
+            { path: "/expenses/:status?/:project?", element: <ExpensePage /> },
             { path: "/masters", element: <MasterPage /> },
             { path: "/tenants", element: <TenantPage /> },
             { path: "/tenants/new-tenant", element: <CreateTenant /> },

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);
 };