From 598601c515169f04d1df0559eda77c2ad3cfc145 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Fri, 14 Nov 2025 10:22:27 +0530 Subject: [PATCH] We are creating filter chips in the Payment Request filter panel. --- .../PaymentRequestFilterChips.jsx | 60 ++++++++++++++ .../PaymentRequestFilterPanel.jsx | 43 ++++++++-- .../PaymentRequest/PaymentRequestList.jsx | 38 +++------ .../PaymentRequest/PaymentRequestPage.jsx | 83 +++++++++++-------- 4 files changed, 156 insertions(+), 68 deletions(-) create mode 100644 src/components/PaymentRequest/PaymentRequestFilterChips.jsx diff --git a/src/components/PaymentRequest/PaymentRequestFilterChips.jsx b/src/components/PaymentRequest/PaymentRequestFilterChips.jsx new file mode 100644 index 00000000..201b75f9 --- /dev/null +++ b/src/components/PaymentRequest/PaymentRequestFilterChips.jsx @@ -0,0 +1,60 @@ +import React, { useMemo } from "react"; + +const PaymentRequestFilterChips = ({ filters, filterData, removeFilterChip, clearFilter }) => { + const data = filterData?.data || filterData || {}; + + const filterChips = useMemo(() => { + const chips = []; + + const addGroup = (ids, list, label, key) => { + if (!ids?.length) return; + const items = ids.map((id) => ({ + id, + name: list?.find((i) => i.id === id)?.name || id, + })); + chips.push({ key, label, items }); + }; + + addGroup(filters.createdByIds, data.createdBy, "Created By", "createdByIds"); + addGroup(filters.currencyIds, data.currency, "Currency", "currencyIds"); + addGroup(filters.expenseCategoryIds, data.expenseCategory, "Expense Category", "expenseCategoryIds"); + addGroup(filters.payees, data.payees, "Payees", "payees"); + addGroup(filters.projectIds, data.projects, "Projects", "projectIds"); + addGroup(filters.statusIds, data.status, "Status", "statusIds"); + + return chips; + }, [filters, filterData]); + + if (!filterChips.length) return null; + + return ( +
+ {filterChips.map((chipGroup) => ( +
+ {chipGroup.label}: + {chipGroup.items.map((item) => ( + + {item.name} +
+ ))} + +
+ ); +}; + +export default PaymentRequestFilterChips; diff --git a/src/components/PaymentRequest/PaymentRequestFilterPanel.jsx b/src/components/PaymentRequest/PaymentRequestFilterPanel.jsx index 65d788e9..9bbd24da 100644 --- a/src/components/PaymentRequest/PaymentRequestFilterPanel.jsx +++ b/src/components/PaymentRequest/PaymentRequestFilterPanel.jsx @@ -1,7 +1,7 @@ -import React, { useEffect, useState, useMemo } from "react"; +import React, { useEffect, useState, useMemo, forwardRef, useImperativeHandle } from "react"; import { FormProvider, useForm, Controller } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; -import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "./PaymentRequestSchema"; +import { defaultPaymentRequestFilter, SearchPaymentRequestSchema } from "./PaymentRequestSchema"; import DateRangePicker, { DateRangePicker1 } from "../common/DateRangePicker"; import SelectMultiple from "../common/SelectMultiple"; @@ -13,7 +13,7 @@ import moment from "moment"; import { usePaymentRequestFilter } from "../../hooks/useExpense"; import { useLocation, useNavigate, useParams } from "react-router-dom"; -const PaymentRequestFilterPanel = ({ onApply, handleGroupBy }) => { +const PaymentRequestFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata, clearFilter }, ref) => { const { status } = useParams(); const navigate = useNavigate(); const selectedProjectId = useSelector( @@ -38,10 +38,23 @@ const PaymentRequestFilterPanel = ({ onApply, handleGroupBy }) => { const [selectedGroup, setSelectedGroup] = useState(groupByList[6]); const [resetKey, setResetKey] = useState(0); + const dynamicDefaultFilter = useMemo(() => { + return { + ...defaultPaymentRequestFilter, + projectIds: defaultPaymentRequestFilter.projectIds || [], + statusIds: status ? [status] : defaultPaymentRequestFilter.statusIds || [], + createdByIds: defaultPaymentRequestFilter.createdByIds || [], + currencyIds: defaultPaymentRequestFilter.currencyIds || [], + expenseCategoryIds: defaultPaymentRequestFilter.expenseCategoryIds || [], + payees: defaultPaymentRequestFilter.payees || [], + startDate: defaultPaymentRequestFilter.startDate, + endDate: defaultPaymentRequestFilter.endDate, + }; + }, [status, selectedProjectId]); const methods = useForm({ resolver: zodResolver(SearchPaymentRequestSchema), - defaultValues: defaultPaymentRequestFilter, + defaultValues: dynamicDefaultFilter, }); const { control, handleSubmit, reset, setValue, watch } = methods; @@ -52,12 +65,28 @@ const PaymentRequestFilterPanel = ({ onApply, handleGroupBy }) => { }; - 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 + })); + + useEffect(() => { + if (data && setFilterdata) { + setFilterdata(data); + } + }, [data, setFilterdata]); const onSubmit = (formData) => { onApply({ @@ -179,7 +208,7 @@ const PaymentRequestFilterPanel = ({ onApply, handleGroupBy }) => { ))} - +