refactor(FE): Replace active filter count logic with ButtonFilter

component

src/components/pages/marketing/MarketingTable.tsx

@@ -30,6 +30,7 @@ import PopoverButton from '@/components/popover/PopoverButton';
 import PopoverContent from '@/components/popover/PopoverContent';
 import StatusBadge from '@/components/helper/StatusBadge';
 import MarketingFilterModal from '@/components/pages/marketing/MarketingFilter';
+import ButtonFilter from '@/components/helper/ButtonFilter';
 
 const RowsOptionsMenu = ({
   props,
@@ -214,32 +215,6 @@ 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();
@@ -588,28 +563,14 @@ const MarketingTable = () => {
             )}
           </div>
           <div className='flex flex-row gap-3'>
-            <Button
-              variant='outline'
-              color='none'
+            <ButtonFilter
+              values={tableFilterState}
+              excludeFields={['page', 'pageSize', 'search']}
               onClick={() => {
                 filterModal.openModal();
               }}
-              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>
+              className='px-3 py-2.5'
+            />
             <Dropdown
               align='end'
               direction='bottom'