refactor(FE): Replace ButtonFilter with custom Filter button

src/components/pages/marketing/MarketingTable.tsx

@@ -25,7 +25,6 @@ import { useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 import RequirePermission from '@/components/helper/RequirePermission';
-import ButtonFilter from '@/components/helper/ButtonFilter';
 import Dropdown from '@/components/Dropdown';
 import PopoverButton from '@/components/popover/PopoverButton';
 import PopoverContent from '@/components/popover/PopoverContent';
@@ -215,6 +214,28 @@ const MarketingTable = () => {
     updateFilter('customer_id', '');
   };
 
+  // ===== ACTIVE FILTERS COUNT =====
+  const activeFiltersCount = useMemo(() => {
+    let count = 0;
+
+    // Product filter
+    if (tableFilterState.product_ids) {
+      count += 1;
+    }
+
+    // Status filter
+    if (tableFilterState.status) {
+      count += 1;
+    }
+
+    // Customer filter
+    if (tableFilterState.customer_id) {
+      count += 1;
+    }
+
+    return count;
+  }, [tableFilterState.product_ids, tableFilterState.status, tableFilterState.customer_id]);
+
   const approveClickHandler = () => {
     setApproveAction('APPROVED');
     confirmationModal.openModal();
@@ -563,16 +584,27 @@ const MarketingTable = () => {
             )}
           </div>
           <div className='flex flex-row gap-3'>
-            <ButtonFilter
+            <Button
-              values={(() => {
+              variant='outline'
-                const { ...rest } = tableFilterState;
+              color='none'
-                return rest;
-              })()}
               onClick={() => {
                 filterModal.openModal();
               }}
-              className='rounded-lg px-3 py-2.5'
+              className={cn(
-            />
+                'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
+                {
+                  'border-primary-gradient text-primary': activeFiltersCount > 0,
+                }
+              )}
+            >
+              <Icon icon='heroicons:funnel' width={20} height={20} />
+              Filter
+              {activeFiltersCount > 0 && (
+                <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
+                  {activeFiltersCount}
+                </span>
+              )}
+            </Button>
             <Dropdown
               align='end'
               direction='bottom'