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.

src/components/Dashboard/common/FilterSidebarButton.jsx

@@ -1,9 +1,22 @@
 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 }) => (
+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 ? (
@@ -17,7 +30,9 @@ const FilterSidebarButton = ({ active, onClick, ...buttonProps }) => (
         title={active ? 'Hide filter sidebar' : 'Show filter sidebar'}
         {...buttonProps}
       />
-)
+    </Badge>
+  )
+}
 
 FilterSidebarButton.propTypes = {
   active: PropTypes.bool.isRequired,