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,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 }) => (
+const FilterSidebarButton = ({ active, onClick, ...buttonProps }) => {
-  <Button
+  const location = useLocation()
-    icon={
+  const { pageFilters } = useTableState()
-      active ? (
+  const count = Object.keys(pageFilters[location.pathname] || {}).length
-        <FilterCircleFilledIcon style={{ color: 'var(--color-primary)' }} />
+
-      ) : (
+  return (
-        <FilterCircleIcon />
+    <Badge
-      )
+      count={count}
-    }
+      size='small'
-    onClick={onClick}
+      offset={[-4, 4]}
-    type={'default'}
+      style={{ padding: 0, fontWeight: 600 }}
-    title={active ? 'Hide filter sidebar' : 'Show filter sidebar'}
+    >
-    {...buttonProps}
+      <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,