Correction in logic for ExpenseStatus to Expense.

src/components/Expenses/ExpenseFilterChips.jsx

@@ -1,89 +1,90 @@
 import React, { useMemo } from "react";
 
 const ExpenseFilterChips = ({ filters, filterData, removeFilterChip }) => {
-    // Build chips from filters
+  const filterChips = useMemo(() => {
-    const filterChips = useMemo(() => {
+    if (!filterData?.projects?.length) return []; 
-        const chips = [];
-
-        const buildGroup = (ids, list, label, key) => {
-            if (!ids?.length) return;
-            const items = ids.map((id) => ({
-                id,
-                name: list.find((item) => item.id === id)?.name || id,
-            }));
-            chips.push({ key, label, items });
-        };
-
-        buildGroup(filters.projectIds, filterData.projects, "Project", "projectIds");
-        buildGroup(filters.createdByIds, filterData.createdBy, "Submitted By", "createdByIds");
-        buildGroup(filters.paidById, filterData.paidBy, "Paid By", "paidById");
-        buildGroup(filters.statusIds, filterData.status, "Status", "statusIds");
-        buildGroup(filters.ExpenseTypeIds, filterData.expensesType, "Category", "ExpenseTypeIds");
-
-        if (filters.startDate || filters.endDate) {
-            const start = filters.startDate
-                ? new Date(filters.startDate).toLocaleDateString()
-                : "";
-            const end = filters.endDate
-                ? new Date(filters.endDate).toLocaleDateString()
-                : "";
-            chips.push({
-                key: "dateRange",
-                label: "Date Range",
-                items: [{ id: "dateRange", name: `${start} - ${end}` }],
-            });
-        }
-
-        return chips;
-    }, [filters, filterData]);
-
-    if (!filterChips.length) return null;
-
-    return (
-<div className="row">
-  <div className="col-12">
-    <div className="d-flex flex-wrap align-items-start gap-1 text-start">
-      {filterChips.map((chip) => (
-        <div
-          key={chip.key}
-          className="d-flex align-items-center flex-wrap   px-2 py-1 "
-          style={{ fontSize: "0.9rem", maxWidth: "100%" }}
-        >
-          {/* Chip Label */}
-          <span className="fw-semibold me-2">{chip.label}:</span>
-
-          {/* Chip Items */}
-          <div className="d-flex flex-wrap align-items-center gap-1">
-            {chip.items.map((item) => (
-              <span
-                key={item.id}
-                className="d-flex align-items-center bg-light rounded px-2 py-1 text-xs"
-              >
-                <span>{item.name}</span>
-                <button
-                  type="button"
-                  className="btn-close btn-close-white btn-sm ms-2"
-                  style={{
-                    filter: "invert(1) grayscale(1)",
-                    opacity: 0.7,
-                    fontSize: "0.6rem",
-                  }}
-                  onClick={() => removeFilterChip(chip.key, item.id)}
-                />
-              </span>
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  </div>
-</div>
-
-
 
+    const chips = [];
+    const projectExists = filters.projectIds?.every((pid) =>
+      filterData.projects.some((p) => p.id === pid)
     );
+
+    if (!projectExists) return []; 
+
+    const buildGroup = (ids, list, label, key) => {
+      if (!ids?.length) return;
+      const items = ids.map((id) => ({
+        id,
+        name: list.find((item) => item.id === id)?.name || id,
+      }));
+      chips.push({ key, label, items });
+    };
+
+    buildGroup(filters.projectIds, filterData.projects, "Project", "projectIds");
+    buildGroup(filters.createdByIds, filterData.createdBy, "Submitted By", "createdByIds");
+    buildGroup(filters.paidById, filterData.paidBy, "Paid By", "paidById");
+    buildGroup(filters.statusIds, filterData.status, "Status", "statusIds");
+    buildGroup(filters.ExpenseTypeIds, filterData.expensesType, "Category", "ExpenseTypeIds");
+
+    if (filters.startDate || filters.endDate) {
+      const start = filters.startDate
+        ? new Date(filters.startDate).toLocaleDateString()
+        : "";
+      const end = filters.endDate
+        ? new Date(filters.endDate).toLocaleDateString()
+        : "";
+      chips.push({
+        key: "dateRange",
+        label: "Date Range",
+        items: [{ id: "dateRange", name: `${start} - ${end}` }],
+      });
+    }
+
+    return chips;
+  }, [filters, filterData]);
+
+  if (!filterChips.length) return null;
+
+  return (
+    <div className="row">
+      <div className="col-12">
+        <div className="d-flex flex-wrap align-items-start gap-1 text-start">
+          {filterChips.map((chip) => (
+            <div
+              key={chip.key}
+              className="d-flex align-items-center flex-wrap px-2 py-1"
+              style={{ fontSize: "0.9rem", maxWidth: "100%" }}
+            >
+              <span className="fw-semibold me-2">{chip.label}:</span>
+              <div className="d-flex flex-wrap align-items-center gap-1">
+                {chip.items.map((item) => (
+                  <span
+                    key={item.id}
+                    className="d-flex align-items-center bg-light rounded px-2 py-1 text-xs"
+                  >
+                    <span>{item.name}</span>
+                    <button
+                      type="button"
+                      className="btn-close btn-close-white btn-sm ms-2"
+                      style={{
+                        filter: "invert(1) grayscale(1)",
+                        opacity: 0.7,
+                        fontSize: "0.6rem",
+                      }}
+                      onClick={() => removeFilterChip(chip.key, item.id)}
+                    />
+                  </span>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 };
 
+
 export default ExpenseFilterChips;
 
 

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -119,34 +119,45 @@ const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }
   const [appliedStatusId, setAppliedStatusId] = useState(null);
 
   useEffect(() => {
-    if (!status || !data) return;
+  if (!status || !data) return;
+
+  const projectExists = selectedProjectId 
+    ? data?.projects?.some((p) => p.id === selectedProjectId)
+    : false;
+
+  if (!projectExists) {
+    console.warn("Project not found, skipping ExpenseStatus filter.");
+    return; // stop processing
+  }
+
+  if (status !== appliedStatusId) {
+    const filterWithStatus = {
+      ...dynamicDefaultFilter,
+      projectIds: [selectedProjectId],
+      startDate: dynamicDefaultFilter.startDate
+        ? moment.utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY").toISOString()
+        : undefined,
+      endDate: dynamicDefaultFilter.endDate
+        ? moment.utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY").toISOString()
+        : undefined,
+    };
+
+    onApply(filterWithStatus);
+    handleGroupBy(selectedGroup.id);
+    setAppliedStatusId(status);
+  }
+}, [
+  status,
+  data,
+  dynamicDefaultFilter,
+  onApply,
+  handleGroupBy,
+  selectedGroup.id,
+  appliedStatusId,
+  selectedProjectId,
+]);
 
-    if (status !== appliedStatusId) {
-      const filterWithStatus = {
-        ...dynamicDefaultFilter,
-        projectIds: selectedProjectId ? [selectedProjectId] : dynamicDefaultFilter.projectIds || [],
-        startDate: dynamicDefaultFilter.startDate
-          ? moment.utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY").toISOString()
-          : undefined,
-        endDate: dynamicDefaultFilter.endDate
-          ? moment.utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY").toISOString()
-          : undefined,
-      };
 
-      onApply(filterWithStatus);
-      handleGroupBy(selectedGroup.id);
-      setAppliedStatusId(status);
-    }
-  }, [
-    status,
-    data,
-    dynamicDefaultFilter,
-    onApply,
-    handleGroupBy,
-    selectedGroup.id,
-    appliedStatusId,
-    selectedProjectId, 
-  ]);
 
   if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
   if (isError && isFetched)

src/router/AppRoutes.jsx

@@ -98,9 +98,9 @@ const router = createBrowserRouter(
             { path: "/activities/task", element: <TaskPlannng /> },
             { path: "/activities/reports", element: <Reports /> },
             { path: "/gallary", element: <ComingSoonPage /> },
+            { path: "/expenses", element: <ExpensePage /> },
             { path: "/expenses/:status?/:project?", element: <ExpensePage /> },
             { path: "/collection", element: <CollectionPage /> },
-            { path: "/expenses", element: <ExpensePage /> },
             { path: "/payment-request", element: <PaymentRequestPage /> },
             { path: "/advance-payment", element: <AdvancePaymentPage /> },
             { path: "/recurring-payment", element: <RecurringExpensePage /> },