refactor(FE): Make filter type nullable and use applied filters

This commit is contained in:
rstubryan
2026-02-05 14:55:27 +07:00
parent eb95afe9a0
commit b4353cf834
@@ -56,8 +56,8 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
// typeof salesOptions // typeof salesOptions
// >([]); // >([]);
const [appliedFilterByType, setAppliedFilterByType] = useState< const [appliedFilterByType, setAppliedFilterByType] = useState<
(typeof dataTypeOptions)[0] (typeof dataTypeOptions)[0] | null
>({ value: 'trans_date', label: 'Tanggal Jual/Bayar' }); >(null);
const [appliedFilterStartDate, setAppliedFilterStartDate] = useState(''); const [appliedFilterStartDate, setAppliedFilterStartDate] = useState('');
const [appliedFilterEndDate, setAppliedFilterEndDate] = useState(''); const [appliedFilterEndDate, setAppliedFilterEndDate] = useState('');
@@ -79,9 +79,9 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
[] []
); );
const [filterByType, setFilterByType] = useState<(typeof dataTypeOptions)[0]>( const [filterByType, setFilterByType] = useState<
dataTypeOptions[0] (typeof dataTypeOptions)[0] | null
); >(null);
const { const {
options: customerOptions, options: customerOptions,
@@ -154,14 +154,14 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
const handleResetFilters = useCallback(() => { const handleResetFilters = useCallback(() => {
setIsSubmitted(false); setIsSubmitted(false);
setFilterCustomer([]); setFilterCustomer([]);
setFilterByType(dataTypeOptions[0]); setFilterByType(null);
setFilterStartDate(''); setFilterStartDate('');
setFilterEndDate(''); setFilterEndDate('');
setAppliedFilterCustomer([]); setAppliedFilterCustomer([]);
setAppliedFilterByType(dataTypeOptions[0]); setAppliedFilterByType(null);
setAppliedFilterStartDate(''); setAppliedFilterStartDate('');
setAppliedFilterEndDate(''); setAppliedFilterEndDate('');
}, [dataTypeOptions]); }, []);
const handleApplyFilters = useCallback(() => { const handleApplyFilters = useCallback(() => {
setAppliedFilterCustomer(filterCustomer); setAppliedFilterCustomer(filterCustomer);
@@ -184,23 +184,33 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
let count = 0; let count = 0;
// Date filter (start_date + end_date = 1 filter) // Date filter (start_date + end_date = 1 filter)
if (filterStartDate || filterEndDate) { if (appliedFilterStartDate || appliedFilterEndDate) {
count += 1; count += 1;
} }
// Customer filter // Customer filter
if (filterCustomer.length > 0) { if (appliedFilterCustomer.length > 0) {
count += 1;
}
// Filter by type filter (hanya dihitung jika ada nilai yang dipilih)
if (appliedFilterByType) {
count += 1; count += 1;
} }
// TODO: Uncomment when BE is ready // TODO: Uncomment when BE is ready
// // Sales filter // // Sales filter
// if (filterSales.length > 0) { // if (appliedFilterSales.length > 0) {
// count += 1; // count += 1;
// } // }
return count; return count;
}, [appliedFilterStartDate, appliedFilterEndDate, appliedFilterCustomer]); }, [
appliedFilterStartDate,
appliedFilterEndDate,
appliedFilterCustomer,
appliedFilterByType,
]);
const hasFilters = activeFiltersCount > 0; const hasFilters = activeFiltersCount > 0;
@@ -218,9 +228,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
// appliedFilterSales.length > 0 // appliedFilterSales.length > 0
// ? appliedFilterSales.map((v) => String(v.value)).join(',') // ? appliedFilterSales.map((v) => String(v.value)).join(',')
// : undefined, // : undefined,
filter_by: appliedFilterByType.value as filter_by: appliedFilterByType?.value as
| 'trans_date' | 'trans_date'
| 'realization_date', | 'realization_date'
| undefined,
start_date: appliedFilterStartDate || undefined, start_date: appliedFilterStartDate || undefined,
end_date: appliedFilterEndDate || undefined, end_date: appliedFilterEndDate || undefined,
page: currentPage, page: currentPage,
@@ -263,7 +274,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
// appliedFilterSales.length > 0 // appliedFilterSales.length > 0
// ? appliedFilterSales.map((v) => String(v.value)).join(',') // ? appliedFilterSales.map((v) => String(v.value)).join(',')
// : undefined, // : undefined,
filter_by: appliedFilterByType.value as 'trans_date' | 'realization_date', filter_by: appliedFilterByType?.value as
| 'trans_date'
| 'realization_date'
| undefined,
start_date: appliedFilterStartDate || undefined, start_date: appliedFilterStartDate || undefined,
end_date: appliedFilterEndDate || undefined, end_date: appliedFilterEndDate || undefined,
limit: 100, limit: 100,
@@ -342,9 +356,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
// : undefined, // : undefined,
start_date: appliedFilterStartDate || undefined, start_date: appliedFilterStartDate || undefined,
end_date: appliedFilterEndDate || undefined, end_date: appliedFilterEndDate || undefined,
filter_by: appliedFilterByType.value as filter_by: appliedFilterByType?.value as
| 'trans_date' | 'trans_date'
| 'realization_date', | 'realization_date'
| undefined,
}, },
}); });
toast.success('PDF berhasil dibuat dan diunduh.'); toast.success('PDF berhasil dibuat dan diunduh.');