fitlers fixes

frontend/src/templates/TablePageTemplate.tsx

@@ -648,16 +648,46 @@ export default function TablePageTemplate({
               </div>
             )}
             
-            {/* Filter Toggle Button */}
+            {/* Filter Toggle Button - with active filter count badge */}
             {(renderFilters || filters.length > 0) && (
-              <Button
-                variant="secondary"
-                size="sm"
-                onClick={() => setShowFilters(!showFilters)}
-                startIcon={<FunnelIcon className="w-3.5 h-3.5" />}
-              >
-                {showFilters ? 'Hide Filters' : 'Show Filters'}
-              </Button>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => setShowFilters(!showFilters)}
+                  startIcon={<FunnelIcon className="w-3.5 h-3.5" />}
+                >
+                  {showFilters ? 'Hide Filters' : 'Show Filters'}
+                </Button>
+                {hasActiveFilters && (
+                  <>
+                    <div className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gradient-to-r from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/20 border border-brand-200 dark:border-brand-700/50 rounded-md">
+                      <div className="w-1.5 h-1.5 rounded-full bg-brand-500 animate-pulse"></div>
+                      <span className="text-xs font-semibold text-brand-700 dark:text-brand-300">
+                        {Object.values(filterValues).filter(value => {
+                          if (value === '' || value === null || value === undefined) return false;
+                          if (typeof value === 'object' && ('min' in value || 'max' in value)) {
+                            return value.min !== '' && value.min !== null && value.min !== undefined || 
+                                   value.max !== '' && value.max !== null && value.max !== undefined;
+                          }
+                          return true;
+                        }).length} active
+                      </span>
+                    </div>
+                    {onFilterReset && (
+                      <Button
+                        variant="primary"
+                        tone="danger"
+                        size="xs"
+                        onClick={onFilterReset}
+                        className="shadow-sm hover:shadow-md transition-shadow"
+                      >
+                        Clear
+                      </Button>
+                    )}
+                  </>
+                )}
+              </div>
             )}
           </div>
         
@@ -777,15 +807,6 @@ export default function TablePageTemplate({
                       }
                       return null;
                     })}
-                    {hasActiveFilters && onFilterReset && (
-                      <Button
-                        variant="secondary"
-                        size="sm"
-                        onClick={onFilterReset}
-                      >
-                        Clear Filters
-                      </Button>
-                    )}
                   </>
                 )}
               </div>