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
// >([]);
const [appliedFilterByType, setAppliedFilterByType] = useState<
(typeof dataTypeOptions)[0]
>({ value: 'trans_date', label: 'Tanggal Jual/Bayar' });
(typeof dataTypeOptions)[0] | null
>(null);
const [appliedFilterStartDate, setAppliedFilterStartDate] = useState('');
const [appliedFilterEndDate, setAppliedFilterEndDate] = useState('');
@@ -79,9 +79,9 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
[]
);
const [filterByType, setFilterByType] = useState<(typeof dataTypeOptions)[0]>(
dataTypeOptions[0]
);
const [filterByType, setFilterByType] = useState<
(typeof dataTypeOptions)[0] | null
>(null);
const {
options: customerOptions,
@@ -154,14 +154,14 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
const handleResetFilters = useCallback(() => {
setIsSubmitted(false);
setFilterCustomer([]);
setFilterByType(dataTypeOptions[0]);
setFilterByType(null);
setFilterStartDate('');
setFilterEndDate('');
setAppliedFilterCustomer([]);
setAppliedFilterByType(dataTypeOptions[0]);
setAppliedFilterByType(null);
setAppliedFilterStartDate('');
setAppliedFilterEndDate('');
}, [dataTypeOptions]);
}, []);
const handleApplyFilters = useCallback(() => {
setAppliedFilterCustomer(filterCustomer);
@@ -184,23 +184,33 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
let count = 0;
// Date filter (start_date + end_date = 1 filter)
if (filterStartDate || filterEndDate) {
if (appliedFilterStartDate || appliedFilterEndDate) {
count += 1;
}
// 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;
}
// TODO: Uncomment when BE is ready
// // Sales filter
// if (filterSales.length > 0) {
// if (appliedFilterSales.length > 0) {
// count += 1;
// }
return count;
}, [appliedFilterStartDate, appliedFilterEndDate, appliedFilterCustomer]);
}, [
appliedFilterStartDate,
appliedFilterEndDate,
appliedFilterCustomer,
appliedFilterByType,
]);
const hasFilters = activeFiltersCount > 0;
@@ -218,9 +228,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
// appliedFilterSales.length > 0
// ? appliedFilterSales.map((v) => String(v.value)).join(',')
// : undefined,
filter_by: appliedFilterByType.value as
filter_by: appliedFilterByType?.value as
| 'trans_date'
| 'realization_date',
| 'realization_date'
| undefined,
start_date: appliedFilterStartDate || undefined,
end_date: appliedFilterEndDate || undefined,
page: currentPage,
@@ -263,7 +274,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
// appliedFilterSales.length > 0
// ? appliedFilterSales.map((v) => String(v.value)).join(',')
// : undefined,
filter_by: appliedFilterByType.value as 'trans_date' | 'realization_date',
filter_by: appliedFilterByType?.value as
| 'trans_date'
| 'realization_date'
| undefined,
start_date: appliedFilterStartDate || undefined,
end_date: appliedFilterEndDate || undefined,
limit: 100,
@@ -342,9 +356,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
// : undefined,
start_date: appliedFilterStartDate || undefined,
end_date: appliedFilterEndDate || undefined,
filter_by: appliedFilterByType.value as
filter_by: appliedFilterByType?.value as
| 'trans_date'
| 'realization_date',
| 'realization_date'
| undefined,
},
});
toast.success('PDF berhasil dibuat dan diunduh.');