gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 15:55:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Separate applied and modal filter state

Browse Source
This commit is contained in:
rstubryan
2026-02-05 14:39:33 +07:00
parent 92886fe5e2
commit eb95afe9a0
1 changed files with 71 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+71 -30
View File
@@ -48,6 +48,19 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
const [isSubmitted, setIsSubmitted] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false);
// ===== FILTER STATE ===== // ===== 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<typeof customerOptions>( const [filterCustomer, setFilterCustomer] = useState<typeof customerOptions>(
[] []
); );
@@ -124,23 +137,47 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
// ===== FILTER HANDLERS ===== // ===== FILTER HANDLERS =====
const handleFilterModalOpen = useCallback(() => { const handleFilterModalOpen = useCallback(() => {
setFilterCustomer(appliedFilterCustomer);
// setFilterSales(appliedFilterSales);
setFilterByType(appliedFilterByType);
setFilterStartDate(appliedFilterStartDate);
setFilterEndDate(appliedFilterEndDate);
filterModal.openModal(); filterModal.openModal();
}, [filterModal]); }, [
filterModal,
appliedFilterCustomer,
appliedFilterByType,
appliedFilterStartDate,
appliedFilterEndDate,
]);
const handleResetFilters = useCallback(() => { const handleResetFilters = useCallback(() => {
setIsSubmitted(false); setIsSubmitted(false);
setFilterCustomer([]); setFilterCustomer([]);
// setFilterSales([]);
setFilterByType(dataTypeOptions[0]); setFilterByType(dataTypeOptions[0]);
setFilterStartDate(''); setFilterStartDate('');
setFilterEndDate(''); setFilterEndDate('');
setAppliedFilterCustomer([]);
setAppliedFilterByType(dataTypeOptions[0]);
setAppliedFilterStartDate('');
setAppliedFilterEndDate('');
}, [dataTypeOptions]); }, [dataTypeOptions]);
const handleApplyFilters = useCallback(() => { const handleApplyFilters = useCallback(() => {
setAppliedFilterCustomer(filterCustomer);
setAppliedFilterByType(filterByType);
setAppliedFilterStartDate(filterStartDate);
setAppliedFilterEndDate(filterEndDate);
setIsSubmitted(true); setIsSubmitted(true);
setCurrentPage(1); setCurrentPage(1);
filterModal.closeModal(); filterModal.closeModal();
}, [filterModal]); }, [
filterModal,
filterCustomer,
filterByType,
filterStartDate,
filterEndDate,
]);
// ===== ACTIVE FILTERS COUNT ===== // ===== ACTIVE FILTERS COUNT =====
const activeFiltersCount = useMemo(() => { const activeFiltersCount = useMemo(() => {
@@ -163,7 +200,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
// } // }
return count; return count;
}, [filterStartDate, filterEndDate, filterCustomer]); }, [appliedFilterStartDate, appliedFilterEndDate, appliedFilterCustomer]);
const hasFilters = activeFiltersCount > 0; const hasFilters = activeFiltersCount > 0;
@@ -173,17 +210,19 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
? () => { ? () => {
const params = { const params = {
customer_ids: customer_ids:
filterCustomer.length > 0 appliedFilterCustomer.length > 0
? filterCustomer.map((v) => String(v.value)).join(',') ? appliedFilterCustomer.map((v) => String(v.value)).join(',')
: undefined, : undefined,
// TODO: Uncomment when BE is ready // TODO: Uncomment when BE is ready
// sales_id: // sales_id:
// filterSales.length > 0 // appliedFilterSales.length > 0
// ? filterSales.map((v) => String(v.value)).join(',') // ? appliedFilterSales.map((v) => String(v.value)).join(',')
// : undefined, // : undefined,
filter_by: filterByType.value as 'trans_date' | 'realization_date', filter_by: appliedFilterByType.value as
start_date: filterStartDate || undefined, | 'trans_date'
end_date: filterEndDate || undefined, | 'realization_date',
start_date: appliedFilterStartDate || undefined,
end_date: appliedFilterEndDate || undefined,
page: currentPage, page: currentPage,
limit: pageSize, limit: pageSize,
}; };
@@ -216,17 +255,17 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
> => { > => {
const params = { const params = {
customer_ids: customer_ids:
filterCustomer.length > 0 appliedFilterCustomer.length > 0
? filterCustomer.map((v) => String(v.value)).join(',') ? appliedFilterCustomer.map((v) => String(v.value)).join(',')
: undefined, : undefined,
// TODO: Uncomment when BE is ready // TODO: Uncomment when BE is ready
// sales_id: // sales_id:
// filterSales.length > 0 // appliedFilterSales.length > 0
// ? filterSales.map((v) => String(v.value)).join(',') // ? appliedFilterSales.map((v) => String(v.value)).join(',')
// : undefined, // : undefined,
filter_by: filterByType.value as 'trans_date' | 'realization_date', filter_by: appliedFilterByType.value as 'trans_date' | 'realization_date',
start_date: filterStartDate || undefined, start_date: appliedFilterStartDate || undefined,
end_date: filterEndDate || undefined, end_date: appliedFilterEndDate || undefined,
limit: 100, limit: 100,
page: 1, page: 1,
}; };
@@ -244,11 +283,11 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
? (response.data as unknown as CustomerPaymentReport[]) ? (response.data as unknown as CustomerPaymentReport[])
: null; : null;
}, [ }, [
filterCustomer, appliedFilterCustomer,
// filterSales, // appliedFilterSales,
filterStartDate, appliedFilterStartDate,
filterEndDate, appliedFilterEndDate,
filterByType, appliedFilterByType,
]); ]);
// ===== EXPORT HANDLERS ===== // ===== EXPORT HANDLERS =====
@@ -293,17 +332,19 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
data: allDataForExport, data: allDataForExport,
params: { params: {
customer_name: customer_name:
filterCustomer.length > 0 appliedFilterCustomer.length > 0
? filterCustomer.map((c) => c.label).join(', ') ? appliedFilterCustomer.map((c) => c.label).join(', ')
: undefined, : undefined,
// TODO: Uncomment when BE is ready // TODO: Uncomment when BE is ready
// sales: // sales:
// filterSales.length > 0 // appliedFilterSales.length > 0
// ? filterSales.map((s) => s.label).join(', ') // ? appliedFilterSales.map((s) => s.label).join(', ')
// : undefined, // : undefined,
start_date: filterStartDate || undefined, start_date: appliedFilterStartDate || undefined,
end_date: filterEndDate || undefined, end_date: appliedFilterEndDate || undefined,
filter_by: filterByType.value as 'trans_date' | 'realization_date', filter_by: appliedFilterByType.value as
| 'trans_date'
| 'realization_date',
}, },
}); });
toast.success('PDF berhasil dibuat dan diunduh.'); toast.success('PDF berhasil dibuat dan diunduh.');