From eb95afe9a04c89a9c099920a898539a771f36667 Mon Sep 17 00:00:00 2001 From: rstubryan Date: Thu, 5 Feb 2026 14:39:33 +0700 Subject: [PATCH] refactor(FE): Separate applied and modal filter state --- .../report/finance/tab/CustomerPaymentTab.tsx | 101 ++++++++++++------ 1 file changed, 71 insertions(+), 30 deletions(-) diff --git a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx index 05aa36c0..7160a273 100644 --- a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx +++ b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx @@ -48,6 +48,19 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => { const [isSubmitted, setIsSubmitted] = useState(false); // ===== FILTER STATE ===== + const [appliedFilterCustomer, setAppliedFilterCustomer] = useState< + typeof customerOptions + >([]); + // TODO: Uncomment when BE is ready + // const [appliedFilterSales, setAppliedFilterSales] = useState< + // typeof salesOptions + // >([]); + const [appliedFilterByType, setAppliedFilterByType] = useState< + (typeof dataTypeOptions)[0] + >({ value: 'trans_date', label: 'Tanggal Jual/Bayar' }); + const [appliedFilterStartDate, setAppliedFilterStartDate] = useState(''); + const [appliedFilterEndDate, setAppliedFilterEndDate] = useState(''); + const [filterCustomer, setFilterCustomer] = useState( [] ); @@ -124,23 +137,47 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => { // ===== FILTER HANDLERS ===== const handleFilterModalOpen = useCallback(() => { + setFilterCustomer(appliedFilterCustomer); + // setFilterSales(appliedFilterSales); + setFilterByType(appliedFilterByType); + setFilterStartDate(appliedFilterStartDate); + setFilterEndDate(appliedFilterEndDate); filterModal.openModal(); - }, [filterModal]); + }, [ + filterModal, + appliedFilterCustomer, + appliedFilterByType, + appliedFilterStartDate, + appliedFilterEndDate, + ]); const handleResetFilters = useCallback(() => { setIsSubmitted(false); setFilterCustomer([]); - // setFilterSales([]); setFilterByType(dataTypeOptions[0]); setFilterStartDate(''); setFilterEndDate(''); + setAppliedFilterCustomer([]); + setAppliedFilterByType(dataTypeOptions[0]); + setAppliedFilterStartDate(''); + setAppliedFilterEndDate(''); }, [dataTypeOptions]); const handleApplyFilters = useCallback(() => { + setAppliedFilterCustomer(filterCustomer); + setAppliedFilterByType(filterByType); + setAppliedFilterStartDate(filterStartDate); + setAppliedFilterEndDate(filterEndDate); setIsSubmitted(true); setCurrentPage(1); filterModal.closeModal(); - }, [filterModal]); + }, [ + filterModal, + filterCustomer, + filterByType, + filterStartDate, + filterEndDate, + ]); // ===== ACTIVE FILTERS COUNT ===== const activeFiltersCount = useMemo(() => { @@ -163,7 +200,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => { // } return count; - }, [filterStartDate, filterEndDate, filterCustomer]); + }, [appliedFilterStartDate, appliedFilterEndDate, appliedFilterCustomer]); const hasFilters = activeFiltersCount > 0; @@ -173,17 +210,19 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => { ? () => { const params = { customer_ids: - filterCustomer.length > 0 - ? filterCustomer.map((v) => String(v.value)).join(',') + appliedFilterCustomer.length > 0 + ? appliedFilterCustomer.map((v) => String(v.value)).join(',') : undefined, // TODO: Uncomment when BE is ready // sales_id: - // filterSales.length > 0 - // ? filterSales.map((v) => String(v.value)).join(',') + // appliedFilterSales.length > 0 + // ? appliedFilterSales.map((v) => String(v.value)).join(',') // : undefined, - filter_by: filterByType.value as 'trans_date' | 'realization_date', - start_date: filterStartDate || undefined, - end_date: filterEndDate || undefined, + filter_by: appliedFilterByType.value as + | 'trans_date' + | 'realization_date', + start_date: appliedFilterStartDate || undefined, + end_date: appliedFilterEndDate || undefined, page: currentPage, limit: pageSize, }; @@ -216,17 +255,17 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => { > => { const params = { customer_ids: - filterCustomer.length > 0 - ? filterCustomer.map((v) => String(v.value)).join(',') + appliedFilterCustomer.length > 0 + ? appliedFilterCustomer.map((v) => String(v.value)).join(',') : undefined, // TODO: Uncomment when BE is ready // sales_id: - // filterSales.length > 0 - // ? filterSales.map((v) => String(v.value)).join(',') + // appliedFilterSales.length > 0 + // ? appliedFilterSales.map((v) => String(v.value)).join(',') // : undefined, - filter_by: filterByType.value as 'trans_date' | 'realization_date', - start_date: filterStartDate || undefined, - end_date: filterEndDate || undefined, + filter_by: appliedFilterByType.value as 'trans_date' | 'realization_date', + start_date: appliedFilterStartDate || undefined, + end_date: appliedFilterEndDate || undefined, limit: 100, page: 1, }; @@ -244,11 +283,11 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => { ? (response.data as unknown as CustomerPaymentReport[]) : null; }, [ - filterCustomer, - // filterSales, - filterStartDate, - filterEndDate, - filterByType, + appliedFilterCustomer, + // appliedFilterSales, + appliedFilterStartDate, + appliedFilterEndDate, + appliedFilterByType, ]); // ===== EXPORT HANDLERS ===== @@ -293,17 +332,19 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => { data: allDataForExport, params: { customer_name: - filterCustomer.length > 0 - ? filterCustomer.map((c) => c.label).join(', ') + appliedFilterCustomer.length > 0 + ? appliedFilterCustomer.map((c) => c.label).join(', ') : undefined, // TODO: Uncomment when BE is ready // sales: - // filterSales.length > 0 - // ? filterSales.map((s) => s.label).join(', ') + // appliedFilterSales.length > 0 + // ? appliedFilterSales.map((s) => s.label).join(', ') // : undefined, - start_date: filterStartDate || undefined, - end_date: filterEndDate || undefined, - filter_by: filterByType.value as 'trans_date' | 'realization_date', + start_date: appliedFilterStartDate || undefined, + end_date: appliedFilterEndDate || undefined, + filter_by: appliedFilterByType.value as + | 'trans_date' + | 'realization_date', }, }); toast.success('PDF berhasil dibuat dan diunduh.');