feat(FE): Show active filter count on Filter button

src/components/input/SelectInputCheckbox.tsx

@@ -47,7 +47,7 @@ const CheckboxOption = <
   );
 };
 
-const SelectInputCheckbox = <T extends OptionType>(
+const SelectInputCheckbox = <T extends OptionType = OptionType>(
   props: SelectInputCheckboxProps<T>
 ) => {
   const {

src/components/pages/report/finance/tab/CustomerPaymentTab.tsx

@@ -116,6 +116,41 @@ const CustomerPaymentTab = () => {
     filterModal.closeModal();
   }, [filterModal]);
 
+  // ===== ACTIVE FILTERS COUNT =====
+  const activeFiltersCount = useMemo(() => {
+    let count = 0;
+
+    // Date filter (start_date + end_date = 1 filter)
+    if (filterStartDate || filterEndDate) {
+      count += 1;
+    }
+
+    // Customer filter
+    if (filterCustomer.length > 0) {
+      count += 1;
+    }
+
+    // Sales filter
+    if (filterSales.length > 0) {
+      count += 1;
+    }
+
+    // Filter by (always count if submitted)
+    if (isSubmitted) {
+      count += 1;
+    }
+
+    return count;
+  }, [
+    filterStartDate,
+    filterEndDate,
+    filterCustomer,
+    filterSales,
+    isSubmitted,
+  ]);
+
+  const hasFilters = activeFiltersCount > 0;
+
   // ===== DATA FETCHING =====
   const { data: customerPayment, isLoading } = useSWR(
     isSubmitted
@@ -533,14 +568,37 @@ const CustomerPaymentTab = () => {
         className={{ wrapper: 'w-full', body: 'p-1!' }}
       >
         <div className='mb-4 flex justify-end gap-2 [&_button]:px-4'>
-          <Button variant='outline' onClick={filterModal.openModal}>
+          <Button
+            variant='outline'
+            onClick={filterModal.openModal}
+            className={
+              hasFilters
+                ? 'bg-linear-to-b from-[#0069E0]/40 to-white text-[#0069E0] rounded-lg'
+                : 'rounded-lg'
+            }
+          >
             <Icon icon='heroicons:funnel' width={18} height={18} />
             Filter
+            {hasFilters && (
+              <Badge
+                variant='default'
+                className={{
+                  badge:
+                    'rounded-lg px-1.5 py-2.5 text-xs font-semibold bg-error text-white',
+                }}
+              >
+                {activeFiltersCount}
+              </Badge>
+            )}
           </Button>
 
           <Dropdown
             trigger={
-              <Button variant='outline' isLoading={isAnyExportLoading}>
+              <Button
+                variant='outline'
+                isLoading={isAnyExportLoading}
+                className='rounded-lg'
+              >
                 <Icon
                   icon='heroicons:cloud-arrow-down'
                   width={18}
@@ -551,7 +609,7 @@ const CustomerPaymentTab = () => {
             }
             align='end'
           >
-            <Menu>
+            <Menu className={'w-full'}>
               <MenuItem title='Excel' onClick={handleExportExcel} />
               <MenuItem title='PDF' onClick={handleExportPdf} />
             </Menu>