From 364d168678ce98aa524763ec1b42cd88764b73ac Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 30 Aug 2026 13:10:31 +0100
Subject: [PATCH] Enhance FilterSidebarButton with Badge for Active Filters
 Count

- Updated FilterSidebarButton to include a Badge displaying the count of active filters based on the current location, improving user awareness of applied filters.
- Integrated useTableState and useLocation hooks for dynamic filter management, enhancing the overall functionality of the filter sidebar.
---
 .../Dashboard/common/FilterSidebarButton.jsx  | 47 ++++++++++++-------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/Dashboard/common/FilterSidebarButton.jsx b/src/components/Dashboard/common/FilterSidebarButton.jsx
index 35cb468f..be10ec02 100644
--- a/src/components/Dashboard/common/FilterSidebarButton.jsx
+++ b/src/components/Dashboard/common/FilterSidebarButton.jsx
@@ -1,23 +1,38 @@
 import PropTypes from 'prop-types'
-import { Button } from 'antd'
+import { Badge, Button } from 'antd'
+import { useLocation } from 'react-router-dom'
 import FilterCircleFilledIcon from '../../Icons/FilterCircleFilledIcon'
 import FilterCircleIcon from '../../Icons/FilterCircleIcon'
+import { useTableState } from '../context/TableStateContext'
 
-const FilterSidebarButton = ({ active, onClick, ...buttonProps }) => (
-  <Button
-    icon={
-      active ? (
-        <FilterCircleFilledIcon style={{ color: 'var(--color-primary)' }} />
-      ) : (
-        <FilterCircleIcon />
-      )
-    }
-    onClick={onClick}
-    type={'default'}
-    title={active ? 'Hide filter sidebar' : 'Show filter sidebar'}
-    {...buttonProps}
-  />
-)
+const FilterSidebarButton = ({ active, onClick, ...buttonProps }) => {
+  const location = useLocation()
+  const { pageFilters } = useTableState()
+  const count = Object.keys(pageFilters[location.pathname] || {}).length
+
+  return (
+    <Badge
+      count={count}
+      size='small'
+      offset={[-4, 4]}
+      style={{ padding: 0, fontWeight: 600 }}
+    >
+      <Button
+        icon={
+          active ? (
+            <FilterCircleFilledIcon style={{ color: 'var(--color-primary)' }} />
+          ) : (
+            <FilterCircleIcon />
+          )
+        }
+        onClick={onClick}
+        type={'default'}
+        title={active ? 'Hide filter sidebar' : 'Show filter sidebar'}
+        {...buttonProps}
+      />
+    </Badge>
+  )
+}
 
 FilterSidebarButton.propTypes = {
   active: PropTypes.bool.isRequired,