diff --git a/src/components/Expenses/ExpenseFilterPanel.jsx b/src/components/Expenses/ExpenseFilterPanel.jsx
index 61583902..88dc7ccd 100644
--- a/src/components/Expenses/ExpenseFilterPanel.jsx
+++ b/src/components/Expenses/ExpenseFilterPanel.jsx
@@ -1,4 +1,10 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useState, useMemo } from "react";
+import React, {
+ forwardRef,
+ useEffect,
+ useImperativeHandle,
+ useState,
+ useMemo,
+} from "react";
import { FormProvider, useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { defaultFilter, SearchSchema } from "./ExpenseSchema";
@@ -15,282 +21,291 @@ import { useExpenseFilter } from "../../hooks/useExpense";
import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
import { useLocation, useNavigate, useParams } from "react-router-dom";
-const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }, ref) => {
- const { status } = useParams();
- const navigate = useNavigate();
- const selectedProjectId = useSelector(
- (store) => store.localVariables.projectId
- );
- const { data, isLoading, isError, error, isFetching, isFetched } =
- useExpenseFilter();
+const ExpenseFilterPanel = forwardRef(
+ ({ onApply, handleGroupBy, setFilterdata }, ref) => {
+ const { status } = useParams();
+ const navigate = useNavigate();
+ const selectedProjectId = useSelector(
+ (store) => store.localVariables.projectId
+ );
+ const { data, isLoading, isError, error, isFetching, isFetched } =
+ useExpenseFilter();
- const groupByList = useMemo(() => {
- return [
- { id: "transactionDate", name: "Transaction Date" },
- { id: "status", name: "Status" },
- { id: "submittedBy", name: "Submitted By" },
- { id: "project", name: "Project" },
- { id: "paymentMode", name: "Payment Mode" },
- { id: "expenseCategory", name: "Expense Category" },
- { id: "createdAt", name: "Submitted Date" },
- ].sort((a, b) => a.name.localeCompare(b.name));
- }, []);
+ const groupByList = useMemo(() => {
+ return [
+ { id: "none", name: "None" },
+ { id: "transactionDate", name: "Transaction Date" },
+ { id: "status", name: "Status" },
+ { id: "submittedBy", name: "Submitted By" },
+ { id: "project", name: "Project" },
+ { id: "paymentMode", name: "Payment Mode" },
+ { id: "expenseCategory", name: "Expense Category" },
+ { id: "createdAt", name: "Submitted Date" },
+ ].sort((a, b) => a.name.localeCompare(b.name));
+ }, []);
- const [selectedGroup, setSelectedGroup] = useState(groupByList[6]);
- const [resetKey, setResetKey] = useState(0);
+ const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
+ const [resetKey, setResetKey] = useState(0);
- const dynamicDefaultFilter = useMemo(() => {
- return {
- ...defaultFilter,
- statusIds: status ? [status] : defaultFilter.statusIds || [],
- projectIds: defaultFilter.projectIds || [],
- createdByIds: defaultFilter.createdByIds || [],
- paidById: defaultFilter.paidById || [],
- expenseCategoryIds: defaultFilter.expenseCategoryIds || [],
- isTransactionDate: defaultFilter.isTransactionDate ?? true,
- startDate: defaultFilter.startDate,
- endDate: defaultFilter.endDate,
- };
- }, [status, selectedProjectId]);
-
- const methods = useForm({
- resolver: zodResolver(SearchSchema),
- defaultValues: dynamicDefaultFilter,
- });
-
- const { control, handleSubmit, reset, setValue, watch } = methods;
- const isTransactionDate = watch("isTransactionDate");
-
- const closePanel = () => {
- document.querySelector(".offcanvas.show .btn-close")?.click();
- };
-
- // Change here
- useEffect(() => {
- if (data && setFilterdata) {
- setFilterdata(data);
- }
- }, [data, setFilterdata]);
-
- const handleGroupChange = (e) => {
- const group = groupByList.find((g) => g.id === e.target.value);
- if (group) setSelectedGroup(group);
- };
-
- useImperativeHandle(ref, () => ({
- resetFieldValue: (name, value) => {
- // Reset specific field
- if (value !== undefined) {
- setValue(name, value);
- } else {
- reset({ ...methods.getValues(), [name]: defaultFilter[name] });
- }
- },
- getValues: methods.getValues, // optional, to read current filter state
- }));
-
- const onSubmit = (formData) => {
- onApply({
- ...formData,
- startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
- endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
- });
- handleGroupBy(selectedGroup.id);
- // closePanel();
- };
-
- const onClear = () => {
- reset(defaultFilter);
- setResetKey((prev) => prev + 1);
- setSelectedGroup(groupByList[0]);
- onApply(defaultFilter);
- handleGroupBy(groupByList[0].id);
- // closePanel();
- if (status) {
- navigate("/expenses", { replace: true });
- }
- };
-
- const location = useLocation();
- useEffect(() => {
- closePanel();
- }, [location]);
-
- const [appliedStatusId, setAppliedStatusId] = useState(null);
-
- useEffect(() => {
- if (!status || !data) return;
-
- 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,
+ const dynamicDefaultFilter = useMemo(() => {
+ return {
+ ...defaultFilter,
+ statusIds: status ? [status] : defaultFilter.statusIds || [],
+ projectIds: defaultFilter.projectIds || [],
+ createdByIds: defaultFilter.createdByIds || [],
+ paidById: defaultFilter.paidById || [],
+ expenseCategoryIds: defaultFilter.expenseCategoryIds || [],
+ isTransactionDate: defaultFilter.isTransactionDate ?? true,
+ startDate: defaultFilter.startDate,
+ endDate: defaultFilter.endDate,
};
+ }, [status, selectedProjectId]);
- onApply(filterWithStatus);
+ const methods = useForm({
+ resolver: zodResolver(SearchSchema),
+ defaultValues: dynamicDefaultFilter,
+ });
+
+ const { control, handleSubmit, reset, setValue, watch } = methods;
+ const isTransactionDate = watch("isTransactionDate");
+
+ const closePanel = () => {
+ document.querySelector(".offcanvas.show .btn-close")?.click();
+ };
+
+ // Change here
+ useEffect(() => {
+ if (data && setFilterdata) {
+ setFilterdata(data);
+ }
+ }, [data, setFilterdata]);
+
+ const handleGroupChange = (e) => {
+ const group = groupByList.find((g) => g.id === e.target.value);
+ if (group) setSelectedGroup(group);
+ };
+
+ useImperativeHandle(ref, () => ({
+ resetFieldValue: (name, value) => {
+ // Reset specific field
+ if (value !== undefined) {
+ setValue(name, value);
+ } else {
+ reset({ ...methods.getValues(), [name]: defaultFilter[name] });
+ }
+ },
+ getValues: methods.getValues, // optional, to read current filter state
+ }));
+
+ const onSubmit = (formData) => {
+ onApply({
+ ...formData,
+ startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
+ endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
+ });
handleGroupBy(selectedGroup.id);
- setAppliedStatusId(status);
- }
- }, [
- status,
- data,
- dynamicDefaultFilter,
- onApply,
- handleGroupBy,
- selectedGroup.id,
- appliedStatusId,
- selectedProjectId,
- ]);
+ // closePanel();
+ };
- if (isLoading || isFetching) return
;
- if (isError && isFetched)
- return
Something went wrong Here- {error.message}
;
+ const onClear = () => {
+ reset(defaultFilter);
+ setResetKey((prev) => prev + 1);
+ setSelectedGroup(groupByList[0]);
+ onApply(defaultFilter);
+ handleGroupBy(groupByList[0].id);
+ // closePanel();
+ if (status) {
+ navigate("/expenses", { replace: true });
+ }
+ };
+ const location = useLocation();
+ useEffect(() => {
+ closePanel();
+ }, [location]);
+ const [appliedStatusId, setAppliedStatusId] = useState(null);
- return (
- <>
-
-