From fe22bb10352be140f64454d691b6a26420e3bc99 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Fri, 12 Jun 2026 21:31:17 -0400
Subject: [PATCH] feat: enhance AdvancedFilterBuilder with new filtering
 options and UI improvements

- Introduced new filter options for due dates, points, and chore statuses.
- Refactored condition management to use selections for better state handling.
- Improved UI components for filter conditions, including chips for selection.
- Added a bottom sheet modal for filter creation and editing.
- Enhanced user experience with clear actions and previews for selected filters.
---
 src/components/common/FilterBar.jsx           |  502 +++++++
 src/hooks/useFilter.js                        |   59 +
 src/views/Chores/ArchivedTasks.jsx            |  160 ++-
 src/views/Chores/MyChores.jsx                 |  498 +++----
 .../Modals/Inputs/AdvancedFilterBuilder.jsx   | 1178 +++++++----------
 5 files changed, 1344 insertions(+), 1053 deletions(-)
 create mode 100644 src/components/common/FilterBar.jsx
 create mode 100644 src/hooks/useFilter.js

diff --git a/src/components/common/FilterBar.jsx b/src/components/common/FilterBar.jsx
new file mode 100644
index 0000000..65f49d8
--- /dev/null
+++ b/src/components/common/FilterBar.jsx
@@ -0,0 +1,502 @@
+import { Check, Close, FilterList, Tune } from '@mui/icons-material'
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  Chip,
+  Divider,
+  Input,
+  Typography,
+} from '@mui/joy'
+import { useState } from 'react'
+import BottomSheetModal from './BottomSheetModal'
+
+/**
+ * Reusable filter bar component.
+ *
+ * Props:
+ *   filterDefs   - array of filter definitions:
+ *                  { id, label, type ('multi-select'|'single-select'|'boolean'|'date-range'),
+ *                    icon, options?, defaultValue?, filterFn }
+ *                  options item: { value, label, color?, icon?, avatar? }
+ *                  defaultValue: if the active value equals this, no chip is shown
+ *                  date-range value shape: { preset?, from?: ISO string, to?: ISO string }
+ *   activeFilters - current filter state object { [id]: value }
+ *   onSetFilter  - (filterId, value | null) => void
+ *   onClearAll   - () => void
+ *   resultCount  - optional number shown in "Show N results" button
+ *   totalCount   - optional total for "N of M" label
+ */
+
+// ── Date range presets (no moment dependency — pure Date) ────────────────────
+
+const d = (date, h = 0, m = 0, s = 0, ms = 0) =>
+  new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, m, s, ms)
+
+const DATE_RANGE_PRESETS = [
+  {
+    value: 'today',
+    label: 'Today',
+    getRange: () => {
+      const t = d(new Date())
+      return { from: t.toISOString(), to: d(new Date(), 23, 59, 59, 999).toISOString() }
+    },
+  },
+  {
+    value: 'yesterday',
+    label: 'Yesterday',
+    getRange: () => {
+      const t = d(new Date())
+      const y = new Date(t); y.setDate(t.getDate() - 1)
+      return { from: d(y).toISOString(), to: d(y, 23, 59, 59, 999).toISOString() }
+    },
+  },
+  {
+    value: 'this-week',
+    label: 'This Week',
+    getRange: () => {
+      const t = d(new Date())
+      const start = new Date(t); start.setDate(t.getDate() - t.getDay())
+      const end = new Date(start); end.setDate(start.getDate() + 6)
+      return { from: d(start).toISOString(), to: d(end, 23, 59, 59, 999).toISOString() }
+    },
+  },
+  {
+    value: 'last-7-days',
+    label: 'Last 7 Days',
+    getRange: () => {
+      const t = d(new Date())
+      const start = new Date(t); start.setDate(t.getDate() - 6)
+      return { from: d(start).toISOString(), to: d(new Date(), 23, 59, 59, 999).toISOString() }
+    },
+  },
+  {
+    value: 'this-month',
+    label: 'This Month',
+    getRange: () => {
+      const n = new Date()
+      const start = new Date(n.getFullYear(), n.getMonth(), 1)
+      const end = new Date(n.getFullYear(), n.getMonth() + 1, 0)
+      return { from: start.toISOString(), to: d(end, 23, 59, 59, 999).toISOString() }
+    },
+  },
+  {
+    value: 'last-30-days',
+    label: 'Last 30 Days',
+    getRange: () => {
+      const t = d(new Date())
+      const start = new Date(t); start.setDate(t.getDate() - 29)
+      return { from: d(start).toISOString(), to: d(new Date(), 23, 59, 59, 999).toISOString() }
+    },
+  },
+  {
+    value: 'last-3-months',
+    label: 'Last 3 Months',
+    getRange: () => {
+      const t = d(new Date())
+      const start = new Date(t); start.setMonth(t.getMonth() - 3)
+      return { from: d(start).toISOString(), to: d(new Date(), 23, 59, 59, 999).toISOString() }
+    },
+  },
+]
+
+const toInputDate = iso => (iso ? iso.split('T')[0] : '')
+
+const fmtDisplayDate = iso => {
+  if (!iso) return null
+  const dt = new Date(iso)
+  return dt.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+const FilterBar = ({
+  filterDefs,
+  activeFilters,
+  onSetFilter,
+  onClearAll,
+  resultCount,
+  totalCount,
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  // ── Active count ───────────────────────────────────────────────────────────
+
+  const activeFilterCount = filterDefs.filter(def => {
+    const value = activeFilters[def.id]
+    if (value === undefined || value === null) return false
+    if (def.defaultValue !== undefined && value === def.defaultValue) return false
+    if (Array.isArray(value) && value.length === 0) return false
+    if (def.type === 'date-range') return !!(value?.from || value?.to)
+    return true
+  }).length
+
+  const hasActive = activeFilterCount > 0
+
+  // ── Chip labels for inline bar ─────────────────────────────────────────────
+
+  const getActiveChipLabel = def => {
+    const value = activeFilters[def.id]
+    if (value === undefined || value === null) return null
+
+    if (def.type === 'single-select') {
+      if (def.defaultValue !== undefined && value === def.defaultValue) return null
+      return def.options?.find(o => o.value === value)?.label ?? def.label
+    }
+
+    if (def.type === 'boolean') return def.label
+
+    if (def.type === 'multi-select' && Array.isArray(value) && value.length > 0) {
+      if (value.length === 1) {
+        return def.options?.find(o => o.value === value[0])?.label ?? def.label
+      }
+      return `${def.label} (${value.length})`
+    }
+
+    if (def.type === 'date-range') {
+      if (!value?.from && !value?.to) return null
+      if (value.preset) {
+        return DATE_RANGE_PRESETS.find(p => p.value === value.preset)?.label ?? 'Date Range'
+      }
+      const from = fmtDisplayDate(value.from)
+      const to = fmtDisplayDate(value.to)
+      if (from && to) return `${from} – ${to}`
+      if (from) return `From ${from}`
+      if (to) return `Until ${to}`
+      return null
+    }
+
+    return null
+  }
+
+  // ── Handlers ───────────────────────────────────────────────────────────────
+
+  const handleMultiToggle = (defId, optValue) => {
+    const current = activeFilters[defId] || []
+    const next = current.includes(optValue)
+      ? current.filter(v => v !== optValue)
+      : [...current, optValue]
+    onSetFilter(defId, next.length > 0 ? next : null)
+  }
+
+  const handleSingleToggle = (defId, optValue) => {
+    onSetFilter(defId, activeFilters[defId] === optValue ? null : optValue)
+  }
+
+  const handleBoolToggle = defId => {
+    onSetFilter(defId, activeFilters[defId] ? null : true)
+  }
+
+  const handleDateRangePreset = (defId, presetValue) => {
+    const current = activeFilters[defId] || {}
+    if (current.preset === presetValue) {
+      onSetFilter(defId, null)
+      return
+    }
+    const preset = DATE_RANGE_PRESETS.find(p => p.value === presetValue)
+    onSetFilter(defId, { preset: presetValue, ...preset.getRange() })
+  }
+
+  const handleDateRangeInput = (defId, field, dateStr) => {
+    const current = activeFilters[defId] || {}
+    if (!dateStr) {
+      const next = { ...current, preset: null, [field]: null }
+      onSetFilter(defId, next.from || next.to ? next : null)
+    } else {
+      const iso =
+        field === 'to'
+          ? new Date(dateStr + 'T23:59:59').toISOString()
+          : new Date(dateStr + 'T00:00:00').toISOString()
+      onSetFilter(defId, { ...current, preset: null, [field]: iso })
+    }
+  }
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  return (
+    <>
+      {/* ── Inline bar ─────────────────────────────────────── */}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', mb: 2 }}>
+        <Badge
+          badgeContent={activeFilterCount || null}
+          color='primary'
+          size='sm'
+          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        >
+          <Button
+            size='sm'
+            variant={hasActive ? 'solid' : 'outlined'}
+            color={hasActive ? 'primary' : 'neutral'}
+            startDecorator={<FilterList sx={{ fontSize: 16 }} />}
+            onClick={() => setIsOpen(true)}
+            sx={{ borderRadius: 'xl', gap: 0.5 }}
+          >
+            Filters
+          </Button>
+        </Badge>
+
+        {(() => {
+          const activeChips = filterDefs
+            .map(def => ({ def, label: getActiveChipLabel(def) }))
+            .filter(({ label }) => !!label)
+          const MAX_VISIBLE = 2
+          const visible = activeChips.slice(0, MAX_VISIBLE)
+          const overflow = activeChips.length - MAX_VISIBLE
+
+          return (
+            <>
+              {visible.map(({ def, label }) => (
+                <Chip
+                  key={def.id}
+                  size='md'
+                  variant='soft'
+                  color='primary'
+                  endDecorator={
+                    <Close
+                      sx={{ cursor: 'pointer' }}
+                      onClick={e => {
+                        e.stopPropagation()
+                        onSetFilter(def.id, null)
+                      }}
+                    />
+                  }
+                  onClick={() => setIsOpen(true)}
+                  sx={{ 
+                    py: 0.64,
+                    cursor: 'pointer', transition: 'all 0.15s ease', '&:hover': { opacity: 0.85 } }}
+                >
+                  {label}
+                </Chip>
+              ))}
+
+              {overflow > 0 && (
+                <Chip
+                  size='md'
+                  variant='soft'
+                  color='neutral'
+                  onClick={() => setIsOpen(true)}
+                  sx={{ py: 0.64, cursor: 'pointer', transition: 'all 0.15s ease', '&:hover': { opacity: 0.85 } }}
+                >
+                  +{overflow} more
+                </Chip>
+              )}
+            </>
+          )
+        })()}
+
+        {hasActive && (
+          <Button
+            size='sm'
+            variant='plain'
+            color='neutral'
+            sx={{ px: 0.5, fontSize: '0.75rem', color: 'text.secondary', minHeight: 0 }}
+            onClick={onClearAll}
+          >
+            Clear all
+          </Button>
+        )}
+
+        {hasActive && resultCount !== undefined && totalCount !== undefined && (
+          <Typography level='body-xs' sx={{ color: 'text.tertiary', ml: 'auto', flexShrink: 0 }}>
+            {resultCount} / {totalCount}
+          </Typography>
+        )}
+      </Box>
+
+      {/* ── Bottom sheet ────────────────────────────────────── */}
+      <BottomSheetModal
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        title={
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Tune sx={{ fontSize: 20 }} />
+            Filters
+            {hasActive && (
+              <Chip size='sm' variant='solid' color='primary' sx={{ ml: 0.5 }}>
+                {activeFilterCount}
+              </Chip>
+            )}
+          </Box>
+        }
+        footer={
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
+            <Button
+              variant='plain'
+              color='danger'
+              size='sm'
+              disabled={!hasActive}
+              onClick={onClearAll}
+            >
+              Clear all
+            </Button>
+            <Button onClick={() => setIsOpen(false)} sx={{ minWidth: 140 }}>
+              {resultCount !== undefined
+                ? `Show ${resultCount} result${resultCount !== 1 ? 's' : ''}`
+                : 'Done'}
+            </Button>
+          </Box>
+        }
+      >
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
+          {filterDefs.map((def, idx) => (
+            <Box key={def.id}>
+              {idx > 0 && <Divider sx={{ my: 2.5 }} />}
+
+              {/* Section header */}
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+                {def.icon && (
+                  <Box sx={{ color: 'text.secondary', display: 'flex', alignItems: 'center', '& svg': { fontSize: 18 } }}>
+                    {def.icon}
+                  </Box>
+                )}
+                <Typography level='title-sm' sx={{ fontWeight: 600 }}>
+                  {def.label}
+                </Typography>
+
+                {/* active badge in header */}
+                {def.type === 'multi-select' && (activeFilters[def.id]?.length ?? 0) > 0 && (
+                  <Chip size='sm' variant='solid' color='primary' sx={{ ml: 'auto', fontSize: '0.7rem', height: 20 }}>
+                    {activeFilters[def.id].length} selected
+                  </Chip>
+                )}
+                {def.type === 'single-select' && activeFilters[def.id] != null && (() => {
+                  const opt = def.options?.find(o => o.value === activeFilters[def.id])
+                  return opt ? (
+                    <Chip size='sm' variant='solid' color='primary' sx={{ ml: 'auto', fontSize: '0.7rem', height: 20 }}>
+                      {opt.label}
+                    </Chip>
+                  ) : null
+                })()}
+                {def.type === 'date-range' && getActiveChipLabel(def) && (
+                  <Chip size='sm' variant='solid' color='primary' sx={{ ml: 'auto', fontSize: '0.7rem', height: 20 }}>
+                    {getActiveChipLabel(def)}
+                  </Chip>
+                )}
+              </Box>
+
+              {/* multi-select */}
+              {def.type === 'multi-select' && (
+                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                  {def.options?.map(opt => {
+                    const isSelected = (activeFilters[def.id] || []).includes(opt.value)
+                    return (
+                      <Chip
+                        key={opt.value}
+                        variant={isSelected ? 'solid' : 'soft'}
+                        color={isSelected ? (opt.color ?? 'primary') : 'neutral'}
+                        startDecorator={
+                          opt.avatar ? (
+                            <Avatar src={opt.avatar} alt={opt.label} sx={{ '--Avatar-size': '20px' }} />
+                          ) : isSelected ? (
+                            <Check sx={{ fontSize: 14 }} />
+                          ) : (opt.icon ?? null)
+                        }
+                        onClick={() => handleMultiToggle(def.id, opt.value)}
+                        sx={{ cursor: 'pointer', transition: 'all 0.15s ease', userSelect: 'none', '&:hover': { opacity: 0.85 } }}
+                      >
+                        {opt.label}
+                      </Chip>
+                    )
+                  })}
+                </Box>
+              )}
+
+              {/* single-select */}
+              {def.type === 'single-select' && (
+                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                  {def.options?.map(opt => {
+                    const isSelected = activeFilters[def.id] === opt.value
+                    return (
+                      <Chip
+                        key={opt.value}
+                        variant={isSelected ? 'solid' : 'soft'}
+                        color={isSelected ? (opt.color ?? 'primary') : 'neutral'}
+                        startDecorator={
+                          opt.avatar ? (
+                            <Avatar src={opt.avatar} alt={opt.label} sx={{ '--Avatar-size': '20px' }} />
+                          ) : isSelected ? (
+                            <Check sx={{ fontSize: 14 }} />
+                          ) : (opt.icon ?? null)
+                        }
+                        onClick={() => handleSingleToggle(def.id, opt.value)}
+                        sx={{ cursor: 'pointer', transition: 'all 0.15s ease', userSelect: 'none', '&:hover': { opacity: 0.85 } }}
+                      >
+                        {opt.label}
+                      </Chip>
+                    )
+                  })}
+                </Box>
+              )}
+
+              {/* boolean */}
+              {def.type === 'boolean' && (
+                <Chip
+                  variant={activeFilters[def.id] ? 'solid' : 'soft'}
+                  color={activeFilters[def.id] ? 'primary' : 'neutral'}
+                  startDecorator={activeFilters[def.id] ? <Check sx={{ fontSize: 14 }} /> : null}
+                  onClick={() => handleBoolToggle(def.id)}
+                  sx={{ cursor: 'pointer', transition: 'all 0.15s ease', userSelect: 'none', '&:hover': { opacity: 0.85 } }}
+                >
+                  {def.label}
+                </Chip>
+              )}
+
+              {/* date-range */}
+              {def.type === 'date-range' && (() => {
+                const val = activeFilters[def.id] || {}
+                return (
+                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+                    {/* Preset chips */}
+                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                      {DATE_RANGE_PRESETS.map(preset => {
+                        const isSelected = val.preset === preset.value
+                        return (
+                          <Chip
+                            key={preset.value}
+                            variant={isSelected ? 'solid' : 'soft'}
+                            color={isSelected ? 'primary' : 'neutral'}
+                            startDecorator={isSelected ? <Check sx={{ fontSize: 14 }} /> : null}
+                            onClick={() => handleDateRangePreset(def.id, preset.value)}
+                            sx={{ cursor: 'pointer', transition: 'all 0.15s ease', userSelect: 'none', '&:hover': { opacity: 0.85 } }}
+                          >
+                            {preset.label}
+                          </Chip>
+                        )
+                      })}
+                    </Box>
+
+                    {/* Custom date inputs */}
+                    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+                      <Input
+                        type='date'
+                        size='sm'
+                        value={toInputDate(val.from)}
+                        onChange={e => handleDateRangeInput(def.id, 'from', e.target.value)}
+                        slotProps={{ input: { max: toInputDate(val.to) || undefined } }}
+                        sx={{ flex: 1, fontSize: '0.8rem' }}
+                      />
+                      <Typography level='body-xs' sx={{ color: 'text.tertiary', flexShrink: 0 }}>
+                        –
+                      </Typography>
+                      <Input
+                        type='date'
+                        size='sm'
+                        value={toInputDate(val.to)}
+                        onChange={e => handleDateRangeInput(def.id, 'to', e.target.value)}
+                        slotProps={{ input: { min: toInputDate(val.from) || undefined } }}
+                        sx={{ flex: 1, fontSize: '0.8rem' }}
+                      />
+                    </Box>
+                  </Box>
+                )
+              })()}
+            </Box>
+          ))}
+        </Box>
+      </BottomSheetModal>
+    </>
+  )
+}
+
+export default FilterBar
diff --git a/src/hooks/useFilter.js b/src/hooks/useFilter.js
new file mode 100644
index 0000000..18527de
--- /dev/null
+++ b/src/hooks/useFilter.js
@@ -0,0 +1,59 @@
+import { useMemo, useState } from 'react'
+
+/**
+ * Generic client-side filter hook.
+ *
+ * @param {Array} data - the full list to filter
+ * @param {Array} filterDefs - array of filter definitions (see FilterBar)
+ * @returns {{ filteredData, activeFilters, setFilter, clearAll, activeFilterCount, hasActiveFilters }}
+ *
+ * Each filterDef must include:
+ *   id        - unique string key
+ *   type      - 'multi-select' | 'boolean'
+ *   filterFn  - (item, filterValue) => boolean
+ */
+export const useFilter = (data, filterDefs) => {
+  const [activeFilters, setActiveFilters] = useState({})
+
+  const setFilter = (filterId, value) => {
+    setActiveFilters(prev => {
+      const isEmpty =
+        value === null ||
+        value === undefined ||
+        (Array.isArray(value) && value.length === 0)
+
+      if (isEmpty) {
+        const { [filterId]: _removed, ...rest } = prev
+        return rest
+      }
+      return { ...prev, [filterId]: value }
+    })
+  }
+
+  const clearAll = () => setActiveFilters({})
+
+  const filteredData = useMemo(() => {
+    if (!data) return []
+    if (!Object.keys(activeFilters).length) return data
+
+    return data.filter(item =>
+      filterDefs.every(def => {
+        const value = activeFilters[def.id]
+        if (value === undefined || value === null) return true
+        if (Array.isArray(value) && value.length === 0) return true
+        return def.filterFn(item, value)
+      }),
+    )
+  }, [data, activeFilters, filterDefs])
+
+  const activeFilterCount = Object.keys(activeFilters).length
+
+  return {
+    filteredData,
+    activeFilters,
+    setFilter,
+    clearAll,
+    activeFilterCount,
+    hasActiveFilters: activeFilterCount > 0,
+  }
+}
diff --git a/src/views/Chores/ArchivedTasks.jsx b/src/views/Chores/ArchivedTasks.jsx
index afc12cb..e78794c 100644
--- a/src/views/Chores/ArchivedTasks.jsx
+++ b/src/views/Chores/ArchivedTasks.jsx
@@ -4,6 +4,9 @@ import {
   CheckBoxOutlineBlank,
   Close,
   Delete,
+  Label,
+  Person,
+  PriorityHigh,
   SelectAll,
   Unarchive,
   ViewAgenda,
@@ -21,14 +24,17 @@ import {
   Typography,
 } from '@mui/joy'
 import Fuse from 'fuse.js'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import FilterBar from '../../components/common/FilterBar'
 import KeyboardShortcutHint from '../../components/common/KeyboardShortcutHint'
 import { useImpersonateUser } from '../../contexts/ImpersonateUserContext.jsx'
+import { useFilter } from '../../hooks/useFilter'
 import { useUnArchiveChore } from '../../queries/ChoreQueries'
 import { useCircleMembers, useUserProfile } from '../../queries/UserQueries'
 import { useNotification } from '../../service/NotificationProvider'
 import { DeleteChore, GetArchivedChores } from '../../utils/Fetcher'
+import Priorities from '../../utils/Priorities'
 import LoadingComponent from '../components/Loading'
 import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
 import ChoreCard from './ChoreCard'
@@ -61,6 +67,95 @@ const ArchivedTasks = () => {
 
   const { data: membersData, isLoading: membersLoading } = useCircleMembers()
 
+  // Unique labels present across all archived chores
+  const availableLabels = useMemo(() => {
+    const seen = {}
+    archivedChores.forEach(c => {
+      c.labelsV2?.forEach(l => { seen[l.id] = l })
+    })
+    return Object.values(seen)
+  }, [archivedChores])
+
+  const filterDefs = useMemo(
+    () => [
+      {
+        id: 'assignee',
+        label: 'Assignee',
+        type: 'multi-select',
+        icon: <Person />,
+        options: performers.map(p => ({
+          value: p.userId,
+          label: p.displayName,
+          avatar: p.image,
+        })),
+        filterFn: (item, values) => values.includes(item.assignedTo),
+      },
+      {
+        id: 'priority',
+        label: 'Priority',
+        type: 'multi-select',
+        icon: <PriorityHigh />,
+        options: Priorities.map(p => ({
+          value: p.value,
+          label: p.name,
+          color: p.color || 'neutral',
+          icon: p.icon,
+        })),
+        filterFn: (item, values) => values.includes(item.priority ?? 0),
+      },
+      ...(availableLabels.length > 0
+        ? [
+            {
+              id: 'label',
+              label: 'Labels',
+              type: 'multi-select',
+              icon: <Label />,
+              options: availableLabels.map(l => ({
+                value: l.id,
+                label: l.name,
+                icon: (
+                  <Box
+                    component='span'
+                    sx={{
+                      display: 'inline-block',
+                      width: 10,
+                      height: 10,
+                      borderRadius: '50%',
+                      bgcolor: l.color || '#90a4ae',
+                      flexShrink: 0,
+                    }}
+                  />
+                ),
+              })),
+              filterFn: (item, values) =>
+                item.labelsV2?.some(l => values.includes(l.id)) ?? false,
+            },
+          ]
+        : []),
+      {
+        id: 'archivedAt',
+        label: 'Archived Date',
+        type: 'date-range',
+        icon: <Archive />,
+        filterFn: (item, value) => {
+          const date = new Date(item.updatedAt)
+          if (value.from && date < new Date(value.from)) return false
+          if (value.to && date > new Date(value.to)) return false
+          return true
+        },
+      },
+    ],
+    [performers, availableLabels],
+  )
+
+  const {
+    filteredData: finalChores,
+    activeFilters,
+    setFilter,
+    clearAll,
+    hasActiveFilters,
+  } = useFilter(filteredChores, filterDefs)
+
   useEffect(() => {
     const loadArchivedChores = async () => {
       if (!membersLoading && userProfile) {
@@ -280,11 +375,8 @@ const ArchivedTasks = () => {
   }
 
   const selectAllVisibleChores = () => {
-    const visibleChores =
-      searchTerm?.length > 0 ? filteredChores : archivedChores
-    if (visibleChores.length > 0) {
-      const allIds = new Set(visibleChores.map(chore => chore.id))
-      setSelectedChores(allIds)
+    if (finalChores.length > 0) {
+      setSelectedChores(new Set(finalChores.map(c => c.id)))
     }
   }
 
@@ -605,6 +697,15 @@ const ArchivedTasks = () => {
         </Box>
       </Box>
 
+      <FilterBar
+        filterDefs={filterDefs}
+        activeFilters={activeFilters}
+        onSetFilter={setFilter}
+        onClearAll={clearAll}
+        resultCount={finalChores.length}
+        totalCount={filteredChores.length}
+      />
+
       {/* Multi-select Toolbar */}
       {isMultiSelectMode && (
         <Box
@@ -677,7 +778,7 @@ const ArchivedTasks = () => {
                   variant='outlined'
                   onClick={selectAllVisibleChores}
                   startDecorator={<SelectAll />}
-                  disabled={selectedChores.size === filteredChores.length}
+                  disabled={selectedChores.size === finalChores.length}
                   sx={{
                     minWidth: 'auto',
                     '--Button-paddingInline': '0.75rem',
@@ -808,7 +909,7 @@ const ArchivedTasks = () => {
       )}
 
       {/* Content */}
-      {filteredChores.length === 0 ? (
+      {finalChores.length === 0 ? (
         <Box
           sx={{
             display: 'flex',
@@ -818,42 +919,43 @@ const ArchivedTasks = () => {
             height: '50vh',
           }}
         >
-          <Archive
-            sx={{
-              fontSize: '4rem',
-              mb: 1,
-              color: 'text.tertiary',
-            }}
-          />
+          <Archive sx={{ fontSize: '4rem', mb: 1, color: 'text.tertiary' }} />
           <Typography level='title-md' gutterBottom>
-            {searchTerm ? 'No archived tasks found' : 'No archived tasks'}
+            {searchTerm || hasActiveFilters
+              ? 'No archived tasks found'
+              : 'No archived tasks'}
           </Typography>
           <Typography level='body-sm' color='text.secondary' sx={{ mb: 2 }}>
-            {searchTerm
-              ? 'Try adjusting your search terms'
+            {searchTerm || hasActiveFilters
+              ? 'Try adjusting your search or filters'
               : 'Archived tasks will appear here when you archive them from the main task list'}
           </Typography>
-          {searchTerm && (
-            <Button
-              onClick={handleSearchClose}
-              variant='outlined'
-              color='neutral'
-            >
-              Clear search
-            </Button>
+          {(searchTerm || hasActiveFilters) && (
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              {searchTerm && (
+                <Button onClick={handleSearchClose} variant='outlined' color='neutral'>
+                  Clear search
+                </Button>
+              )}
+              {hasActiveFilters && (
+                <Button onClick={clearAll} variant='outlined' color='neutral'>
+                  Clear filters
+                </Button>
+              )}
+            </Box>
           )}
         </Box>
       ) : (
         <Box>
           <Typography level='body-sm' color='text.secondary' sx={{ mb: 2 }}>
-            {filteredChores.length} archived task
-            {filteredChores.length !== 1 ? 's' : ''}
+            {finalChores.length} archived task
+            {finalChores.length !== 1 ? 's' : ''}
             {searchTerm && ` matching "${searchTerm}"`}
           </Typography>
 
           <List sx={{ gap: viewMode === 'compact' ? 0 : 1 }}>
             <ChoreListView
-              chores={filteredChores}
+              chores={finalChores}
               // viewOnly={true}
               showActions={false}
               viewMode={viewMode}
diff --git a/src/views/Chores/MyChores.jsx b/src/views/Chores/MyChores.jsx
index fe94981..cbb689b 100644
--- a/src/views/Chores/MyChores.jsx
+++ b/src/views/Chores/MyChores.jsx
@@ -2,12 +2,10 @@ import {
   Add,
   Bolt,
   CalendarMonth,
-  CancelRounded,
   CheckBox,
   CheckBoxOutlineBlank,
   EditCalendar,
   ExpandCircleDown,
-  Grain,
   PriorityHigh,
   Sort,
   Style,
@@ -24,9 +22,6 @@ import {
   Container,
   Divider,
   IconButton,
-  List,
-  Menu,
-  MenuItem,
   Typography,
 } from '@mui/joy'
 import Fuse from 'fuse.js'
@@ -42,7 +37,9 @@ import IconButtonWithMenu from './IconButtonWithMenu'
 
 import { useMediaQuery } from '@mui/material'
 import { useQueryClient } from '@tanstack/react-query'
+import FilterBar from '../../components/common/FilterBar'
 import KeyboardShortcutHint from '../../components/common/KeyboardShortcutHint'
+import { useFilter } from '../../hooks/useFilter'
 import { useImpersonateUser } from '../../contexts/ImpersonateUserContext.jsx'
 import { useCircleMembers, useUserProfile } from '../../queries/UserQueries'
 import {
@@ -107,7 +104,6 @@ const MyChores = () => {
   const [chores, setChores] = useState([])
   const [filteredChores, setFilteredChores] = useState([])
   const [choreSections, setChoreSections] = useState([])
-  const [showSearchFilter, setShowSearchFilter] = useState(false)
   const [addTaskModalOpen, setAddTaskModalOpen] = useState(false)
   const [taskInputFocus, setTaskInputFocus] = useState(0)
   const searchInputRef = useRef(null)
@@ -135,15 +131,12 @@ const MyChores = () => {
 
   const {
     searchTerm,
-    searchFilter,
     selectedChoreFilter,
     projectFilteredChores,
     searchFilteredChores,
     nonProjectFilteredChores,
     setSearchTerm,
-    setSearchFilter,
     setSelectedChoreFilterWithCache,
-    clearFilters,
   } = useChoreFilters({
     chores,
     selectedProject,
@@ -193,6 +186,103 @@ const MyChores = () => {
     useState(false)
   const [editingFilter, setEditingFilter] = useState(null)
 
+  const quickFilterDefs = useMemo(
+    () => [
+      {
+        id: 'status',
+        label: 'Due Date',
+        type: 'single-select',
+        icon: <CalendarMonth />,
+        options: [
+          { value: 'Overdue', label: 'Overdue', color: 'danger' },
+          { value: 'Due today', label: 'Due Today', color: 'warning' },
+          { value: 'Due in week', label: 'Due This Week' },
+          { value: 'Due Later', label: 'Due Later' },
+          { value: 'No Due Date', label: 'No Due Date' },
+          { value: 'Pending Approval', label: 'Pending Approval' },
+        ],
+        filterFn: (item, value) => {
+          const now = new Date()
+          const d = item.nextDueDate ? new Date(item.nextDueDate) : null
+          switch (value) {
+            case 'Overdue':
+              return d !== null && d < now
+            case 'Due today':
+              return d !== null && d.toDateString() === now.toDateString()
+            case 'Due in week':
+              return (
+                d !== null &&
+                d < new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000) &&
+                d > now
+              )
+            case 'Due Later':
+              return (
+                d !== null &&
+                d > new Date(now.getTime() + 24 * 60 * 60 * 1000)
+              )
+            case 'No Due Date':
+              return item.nextDueDate === null
+            case 'Pending Approval':
+              return item.status === 3
+            default:
+              return true
+          }
+        },
+      },
+      {
+        id: 'priority',
+        label: 'Priority',
+        type: 'multi-select',
+        icon: <PriorityHigh />,
+        options: Priorities.map(p => ({
+          value: p.value,
+          label: p.name,
+          color: p.color || 'neutral',
+          icon: p.icon,
+        })),
+        filterFn: (item, values) => values.includes(item.priority ?? 0),
+      },
+      ...(userLabels?.length > 0
+        ? [
+            {
+              id: 'label',
+              label: 'Labels',
+              type: 'multi-select',
+              icon: <Style />,
+              options: userLabels.map(l => ({
+                value: l.id,
+                label: l.name,
+                icon: (
+                  <Box
+                    component='span'
+                    sx={{
+                      display: 'inline-block',
+                      width: 10,
+                      height: 10,
+                      borderRadius: '50%',
+                      bgcolor: l.color || '#90a4ae',
+                      flexShrink: 0,
+                    }}
+                  />
+                ),
+              })),
+              filterFn: (item, values) =>
+                item.labelsV2?.some(l => values.includes(l.id)) ?? false,
+            },
+          ]
+        : []),
+    ],
+    [userLabels],
+  )
+
+  const {
+    filteredData: quickFilteredChores,
+    activeFilters: quickFilters,
+    setFilter: setQuickFilter,
+    clearAll: clearQuickFilters,
+    hasActiveFilters: hasQuickFilters,
+  } = useFilter(projectFilteredChores, quickFilterDefs)
+
   const processedChores = useMemo(() => {
     if (!choresData?.res) {
       return []
@@ -222,9 +312,9 @@ const MyChores = () => {
     if (tempFilter || activeFilterId) {
       // Advanced/custom filter active
       choresToGroup = customFilteredChores
-    } else if (searchFilter !== 'All') {
-      // Quick filter active (Overdue, Due today, Label, Priority, etc.)
-      choresToGroup = filteredChores
+    } else if (hasQuickFilters) {
+      // Quick filter active (Due date, Priority, Labels)
+      choresToGroup = quickFilteredChores
     } else if (!selectedProject || selectedProject.id === 'default') {
       // No project selected or default project: only show tasks without a projectId
       choresToGroup = chores.filter(chore => !chore.projectId)
@@ -244,11 +334,11 @@ const MyChores = () => {
     return sections
   }, [
     chores,
-    filteredChores,
+    quickFilteredChores,
     customFilteredChores,
     tempFilter,
     activeFilterId,
-    searchFilter,
+    hasQuickFilters,
     selectedChoreSection,
     selectedChoreFilter,
     selectedProject,
@@ -412,7 +502,7 @@ const MyChores = () => {
     }
 
     // Handle legacy filter parameter (e.g., filter=unplanned)
-    if (oldFilter && searchFilter === 'All' && !activeFilterId) {
+    if (oldFilter && !hasQuickFilters && !activeFilterId) {
       const filterMap = {
         unplanned: 'No Due Date',
         overdue: 'Overdue',
@@ -423,12 +513,8 @@ const MyChores = () => {
       }
 
       const filterName = filterMap[oldFilter.toLowerCase()]
-      if (filterName && FILTERS[filterName]) {
-        const filtered = FILTERS[filterName](
-          selectedProject ? projectFilteredChores : chores,
-        )
-        setFilteredChores(filtered)
-        setSearchFilter(filterName)
+      if (filterName) {
+        setQuickFilter('status', filterName)
         setViewMode('default')
         setSelectedCalendarDate(null)
       }
@@ -436,7 +522,7 @@ const MyChores = () => {
   }, [
     searchParams,
     chores,
-    searchFilter,
+    hasQuickFilters,
     activeFilterId,
     savedFilters,
     applyCustomFilter,
@@ -444,8 +530,7 @@ const MyChores = () => {
     clearActiveFilter,
     selectedProject,
     projectFilteredChores,
-    setSearchFilter,
-    setFilteredChores,
+    setQuickFilter,
     setViewMode,
     setSelectedCalendarDate,
   ])
@@ -510,13 +595,47 @@ const MyChores = () => {
     clearSelection,
   })
 
+  const getFilteredChores = useMemo(() => {
+    if (activeFilterId || tempFilter) {
+      return customFilteredChores
+    }
+
+    const baseChores = hasQuickFilters
+      ? quickFilteredChores
+      : projectFilteredChores
+
+    if (searchTerm?.length > 0) {
+      const searchableChores = baseChores.map(c => ({
+        ...c,
+        raw_label: c.labelsV2?.map(l => l.name).join(' '),
+      }))
+      const fuse = new Fuse(searchableChores, {
+        keys: ['name', 'raw_label'],
+        includeScore: true,
+        isCaseSensitive: false,
+        findAllMatches: true,
+      })
+      return fuse.search(searchTerm).map(result => result.item)
+    }
+
+    return baseChores
+  }, [
+    activeFilterId,
+    tempFilter,
+    customFilteredChores,
+    hasQuickFilters,
+    quickFilteredChores,
+    projectFilteredChores,
+    searchTerm,
+  ])
+
   const { showKeyboardShortcuts } = useKeyboardShortcuts({
     isMultiSelectMode,
     selectedChores,
     addTaskModalOpen,
     searchTerm,
-    searchFilter,
-    filteredChores,
+    searchFilter: hasQuickFilters || searchTerm?.length > 0 ? 'filtered' : 'All',
+    filteredChores: getFilteredChores,
     choreSections,
     openChoreSections,
     handlers: {
@@ -567,25 +686,10 @@ const MyChores = () => {
 
   const handleLabelFiltering = chipClicked => {
     clearActiveFilter()
-
-    const baseChores = selectedProject ? projectFilteredChores : chores
-
     if (chipClicked.label) {
-      const label = chipClicked.label
-      const labelFiltered = baseChores.filter(chore =>
-        chore.labelsV2.some(
-          l => l.id === label.id && l.created_by === label.created_by,
-        ),
-      )
-      setFilteredChores(labelFiltered)
-      setSearchFilter('Label: ' + label.name)
+      setQuickFilter('label', [chipClicked.label.id])
     } else if (chipClicked.priority) {
-      const priority = chipClicked.priority
-      const priorityFiltered = baseChores.filter(
-        chore => chore.priority === priority,
-      )
-      setFilteredChores(priorityFiltered)
-      setSearchFilter('Priority: ' + priority)
+      setQuickFilter('priority', [chipClicked.priority])
     }
     setSelectedCalendarDate(null)
   }
@@ -637,8 +741,8 @@ const MyChores = () => {
 
   const handleSearchChange = e => {
     clearActiveFilter()
-    if (searchFilter !== 'All') {
-      setSearchFilter('All')
+    if (hasQuickFilters) {
+      clearQuickFilters()
     }
     const search = e.target.value
     if (search === '') {
@@ -754,42 +858,6 @@ const MyChores = () => {
   //   )
   // }
 
-  const getFilteredChores = useMemo(() => {
-    if (activeFilterId || tempFilter) {
-      return customFilteredChores
-    }
-
-    let baseChores = projectFilteredChores
-
-    if (searchTerm?.length > 0 || searchFilter !== 'All') {
-      if (searchTerm?.length > 0) {
-        const projectFilteredForSearch = baseChores.map(c => ({
-          ...c,
-          raw_label: c.labelsV2?.map(l => l.name).join(' '),
-        }))
-        const fuse = new Fuse(projectFilteredForSearch, {
-          keys: ['name', 'raw_label'],
-          includeScore: true,
-          isCaseSensitive: false,
-          findAllMatches: true,
-        })
-        return fuse.search(searchTerm).map(result => result.item)
-      } else if (searchFilter !== 'All') {
-        return filteredChores
-      }
-    }
-
-    return baseChores
-  }, [
-    activeFilterId,
-    tempFilter,
-    customFilteredChores,
-    projectFilteredChores,
-    searchTerm,
-    searchFilter,
-    filteredChores,
-  ])
-
   const getChoresForDate = useCallback(
     date => {
       const filteredChoresData = getFilteredChores
@@ -814,7 +882,7 @@ const MyChores = () => {
 
     setChores(newChores)
     setFilteredChores(newChores)
-    setSearchFilter('All')
+    clearQuickFilters()
   }
 
   // Show error state when API is unreachable
@@ -902,7 +970,6 @@ const MyChores = () => {
             value={searchTerm}
             onChange={handleSearchChange}
             onClose={handleSearchClose}
-            onFocus={() => setShowSearchFilter(true)}
             showKeyboardShortcuts={showKeyboardShortcuts}
             inputRef={searchInputRef}
           />
@@ -924,7 +991,7 @@ const MyChores = () => {
             onItemSelect={selected => {
               setSelectedChoreSectionWithCache(selected.value)
               setFilteredChores(chores)
-              setSearchFilter('All')
+              clearQuickFilters()
             }}
             onCreateNewFilter={() => {
               setShowAdvancedFilterBuilder(true)
@@ -1008,163 +1075,22 @@ const MyChores = () => {
           </Box>
         </Box>
 
-        {/* Search Filter with animation */}
-        <Box
-          sx={{
-            overflow: 'hidden',
-            transition: 'all 0.3s ease-in-out',
-            maxHeight: showSearchFilter ? '150px' : '0',
-            opacity: showSearchFilter ? 1 : 0,
-            transform: showSearchFilter ? 'translateY(0)' : 'translateY(-10px)',
-            marginBottom: showSearchFilter ? 1 : 0,
+        {/* Quick Filters */}
+        <FilterBar
+          filterDefs={quickFilterDefs}
+          activeFilters={quickFilters}
+          onSetFilter={(id, value) => {
+            clearActiveFilter()
+            setQuickFilter(id, value)
+            setSelectedCalendarDate(null)
           }}
-        >
-          <div className='flex gap-4'>
-            <div className='grid flex-1 grid-cols-3 gap-4'>
-              <IconButtonWithMenu
-                label={' Priority'}
-                k={'icon-menu-priority-filter'}
-                icon={<PriorityHigh />}
-                options={Priorities}
-                selectedItem={searchFilter}
-                onItemSelect={selected => {
-                  handleLabelFiltering({ priority: selected.value })
-                }}
-                mouseClickHandler={handleMenuOutsideClick}
-                isActive={searchFilter.startsWith('Priority: ')}
-              />
-
-              <IconButtonWithMenu
-                k={'icon-menu-labels-filter'}
-                label={' Labels'}
-                icon={<Style />}
-                options={userLabels}
-                selectedItem={searchFilter}
-                onItemSelect={selected => {
-                  handleLabelFiltering({ label: selected })
-                }}
-                isActive={searchFilter.startsWith('Label: ')}
-                mouseClickHandler={handleMenuOutsideClick}
-                useChips
-              />
-
-              <Button
-                onClick={handleFilterMenuOpen}
-                variant='outlined'
-                startDecorator={<Grain />}
-                color={
-                  searchFilter && FILTERS[searchFilter] && searchFilter != 'All'
-                    ? 'primary'
-                    : 'neutral'
-                }
-                size='sm'
-                sx={{
-                  height: 24,
-                  borderRadius: 24,
-                }}
-              >
-                {' Other'}
-              </Button>
-
-              <List
-                orientation='horizontal'
-                wrap
-                sx={{
-                  mt: 0.2,
-                }}
-              >
-                <Menu
-                  ref={menuRef}
-                  anchorEl={anchorEl}
-                  open={Boolean(anchorEl)}
-                  onClose={handleFilterMenuClose}
-                >
-                  {Object.keys(FILTERS).map((filter, index) => (
-                    <MenuItem
-                      key={`filter-list-${filter}-${index}`}
-                      onClick={() => {
-                        const filterFunction = FILTERS[filter]
-                        const baseChores = selectedProject
-                          ? projectFilteredChores
-                          : chores
-                        const filteredChores =
-                          filterFunction.length === 2
-                            ? filterFunction(baseChores, userProfile?.id)
-                            : filterFunction(baseChores)
-                        setFilteredChores(filteredChores)
-                        setSearchFilter(filter)
-                        handleFilterMenuClose()
-
-                        // Update URL with legacy filter parameter
-                        const filterMap = {
-                          'No Due Date': 'unplanned',
-                          Overdue: 'overdue',
-                          'Due today': 'today',
-                          'Due in week': 'week',
-                          'Due Later': 'later',
-                          'Pending Approval': 'pending',
-                        }
-                        const urlFilter = filterMap[filter]
-                        if (urlFilter) {
-                          updateFilterUrl('filter', urlFilter)
-                        }
-                      }}
-                    >
-                      {filter}
-                      <Chip
-                        color={searchFilter === filter ? 'primary' : 'neutral'}
-                      >
-                        {(() => {
-                          const baseChores = selectedProject
-                            ? projectFilteredChores
-                            : chores
-                          return FILTERS[filter].length === 2
-                            ? FILTERS[filter](baseChores, userProfile?.id)
-                                .length
-                            : FILTERS[filter](baseChores).length
-                        })()}
-                      </Chip>
-                    </MenuItem>
-                  ))}
-
-                  {searchFilter.startsWith('Label: ') ||
-                    (searchFilter.startsWith('Priority: ') && (
-                      <MenuItem
-                        key={`filter-list-cancel-all-filters`}
-                        onClick={() => {
-                          setFilteredChores(
-                            selectedProject ? projectFilteredChores : chores,
-                          )
-                          setSearchFilter('All')
-                          updateFilterUrl(null, null)
-                        }}
-                      >
-                        Cancel All Filters
-                      </MenuItem>
-                    ))}
-                </Menu>
-              </List>
-            </div>
-            <IconButton
-              variant='outlined'
-              color='neutral'
-              size='sm'
-              sx={{
-                height: 24,
-                borderRadius: 24,
-              }}
-              onClick={() => {
-                setShowSearchFilter(false)
-                setSearchTerm('')
-                setFilteredChores(chores)
-                setSearchFilter('All')
-                updateFilterUrl(null, null)
-              }}
-            >
-              <CancelRounded />
-            </IconButton>
-          </div>
-        </Box>
+          onClearAll={() => {
+            clearQuickFilters()
+            updateFilterUrl(null, null)
+          }}
+          resultCount={hasQuickFilters ? getFilteredChores.length : undefined}
+          totalCount={hasQuickFilters ? projectFilteredChores.length : undefined}
+        />
 
         {/* Custom Filters Section */}
         <FilterSection
@@ -1177,7 +1103,7 @@ const MyChores = () => {
               clearActiveFilter()
               updateFilterUrl(null, null)
             } else {
-              setSearchFilter('All')
+              clearQuickFilters()
               setSearchTerm('')
               setFilteredChores([])
 
@@ -1218,41 +1144,15 @@ const MyChores = () => {
           onDelete={handleBulkDelete}
           showKeyboardShortcuts={showKeyboardShortcuts}
           selectAllDisabled={
-            searchTerm?.length > 0 || searchFilter !== 'All'
-              ? selectedChores.size === filteredChores.length
+            searchTerm?.length > 0 || hasQuickFilters
+              ? selectedChores.size === getFilteredChores.length
               : selectedChores.size ===
                 choreSections.flatMap(s => s.content || []).length
           }
         />
 
-        {/* Additional Filters Display */}
-        {searchFilter !== 'All' && (
-          <Chip
-            level='title-md'
-            gutterBottom
-            color='warning'
-            label={searchFilter}
-            onDelete={() => {
-              setFilteredChores(
-                selectedProject ? projectFilteredChores : chores,
-              )
-              setSearchFilter('All')
-              updateFilterUrl(null, null)
-            }}
-            endDecorator={<CancelRounded />}
-            onClick={() => {
-              setFilteredChores(
-                selectedProject ? projectFilteredChores : chores,
-              )
-              setSearchFilter('All')
-              updateFilterUrl(null, null)
-            }}
-          >
-            Additional Filter: {searchFilter}
-          </Chip>
-        )}
         {/* Show "Nothing scheduled" when appropriate based on current view mode */}
-        {(searchTerm?.length > 0 || searchFilter !== 'All' || activeFilterId
+        {(searchTerm?.length > 0 || hasQuickFilters || activeFilterId
           ? getFilteredChores.length === 0
           : projectFilteredChores.length === 0) &&
           // only if not in calendar view:
@@ -1280,10 +1180,9 @@ const MyChores = () => {
                 <>
                   <Button
                     onClick={() => {
-                      setSearchFilter('All')
+                      clearQuickFilters()
                       setSearchTerm('')
                       clearActiveFilter()
-                      // reset project and filters :
                       setSelectedProjectWithCache(null)
                       updateFilterUrl(null, null)
                     }}
@@ -1735,59 +1634,4 @@ const MyChores = () => {
   )
 }
 
-const FILTERS = {
-  All: function (chores) {
-    return chores
-  },
-  Overdue: function (chores) {
-    return chores.filter(chore => {
-      if (chore.nextDueDate === null) return false
-      return new Date(chore.nextDueDate) < new Date()
-    })
-  },
-  'Due today': function (chores) {
-    return chores.filter(chore => {
-      return (
-        new Date(chore.nextDueDate).toDateString() === new Date().toDateString()
-      )
-    })
-  },
-  'Due in week': function (chores) {
-    return chores.filter(chore => {
-      return (
-        new Date(chore.nextDueDate) <
-          new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) &&
-        new Date(chore.nextDueDate) > new Date()
-      )
-    })
-  },
-  'Due Later': function (chores) {
-    return chores.filter(chore => {
-      return (
-        new Date(chore.nextDueDate) > new Date(Date.now() + 24 * 60 * 60 * 1000)
-      )
-    })
-  },
-  'Created By Me': function (chores, userID) {
-    return chores.filter(chore => {
-      return chore.createdBy === userID
-    })
-  },
-  'Assigned To Me': function (chores, userID) {
-    return chores.filter(chore => {
-      return chore.assignedTo === userID
-    })
-  },
-  'No Due Date': function (chores) {
-    return chores.filter(chore => {
-      return chore.nextDueDate === null
-    })
-  },
-  'Pending Approval': function (chores) {
-    return chores.filter(chore => {
-      return chore.status === 3
-    })
-  },
-}
-
 export default MyChores
diff --git a/src/views/Modals/Inputs/AdvancedFilterBuilder.jsx b/src/views/Modals/Inputs/AdvancedFilterBuilder.jsx
index ee3f68d..0973081 100644
--- a/src/views/Modals/Inputs/AdvancedFilterBuilder.jsx
+++ b/src/views/Modals/Inputs/AdvancedFilterBuilder.jsx
@@ -1,24 +1,144 @@
-import { Add, Delete } from '@mui/icons-material'
 import {
+  CalendarMonth,
+  Check,
+  FolderOpen,
+  Label,
+  Person,
+  PriorityHigh,
+  Save,
+  Stars,
+  TaskAlt,
+} from '@mui/icons-material'
+import {
+  Avatar,
   Box,
   Button,
   Chip,
-  IconButton,
+  Divider,
   Input,
-  List,
-  ListItem,
-  Option,
-  Select,
-  Textarea,
   Typography,
 } from '@mui/joy'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
+import { useEffect, useMemo, useState } from 'react'
+import BottomSheetModal from '../../../components/common/BottomSheetModal'
 import { FILTER_COLORS } from '../../../utils/Colors'
 import { applyFilter } from '../../../utils/FilterEngine'
 import Priorities from '../../../utils/Priorities'
 import { useFilters } from '../../Filters/FilterQueries'
 
+const DUE_DATE_OPTIONS = [
+  { value: 'isOverdue', label: 'Overdue', color: 'danger' },
+  { value: 'isDueToday', label: 'Today', color: 'warning' },
+  { value: 'isDueTomorrow', label: 'Tomorrow', color: 'primary' },
+  { value: 'isDueThisWeek', label: 'This Week', color: 'primary' },
+  { value: 'isDueThisMonth', label: 'This Month', color: 'neutral' },
+  { value: 'hasNoDueDate', label: 'No Due Date', color: 'neutral' },
+  { value: 'hasDueDate', label: 'Has Due Date', color: 'neutral' },
+]
+
+const POINTS_OPERATORS = [
+  { value: 'greaterThan', label: '>' },
+  { value: 'greaterThanOrEqual', label: '>=' },
+  { value: 'equals', label: '=' },
+  { value: 'lessThanOrEqual', label: '<=' },
+  { value: 'lessThan', label: '<' },
+]
+
+const CHORE_STATUSES = [
+  { value: 0, label: 'Active' },
+  { value: 1, label: 'Started' },
+  { value: 2, label: 'In Progress' },
+  { value: 3, label: 'Pending Approval' },
+]
+
+const defaultSelections = () => ({
+  assignee: { operator: 'is', values: [] },
+  createdBy: { operator: 'is', values: [] },
+  status: { operator: 'is', values: [] },
+  priority: { operator: 'is', values: [] },
+  label: { operator: 'is', values: [] },
+  project: { operator: 'is', values: [] },
+  dueDate: { operator: null },
+  points: { operator: 'greaterThan', value: 0, active: false },
+})
+
+const conditionsToSelections = conditions => {
+  const sel = defaultSelections()
+  if (!conditions) return sel
+  conditions.forEach(c => {
+    if (c.type === 'dueDate') {
+      sel.dueDate = { operator: c.operator }
+    } else if (c.type === 'points') {
+      sel.points = { operator: c.operator, value: c.value ?? 0, active: true }
+    } else if (c.type in sel) {
+      sel[c.type] = {
+        operator: c.operator ?? 'is',
+        values: Array.isArray(c.value) ? c.value : c.value != null ? [c.value] : [],
+      }
+    }
+  })
+  return sel
+}
+
+const selectionsToConditions = selections => {
+  const conditions = []
+  ;['assignee', 'createdBy', 'status', 'priority', 'label', 'project'].forEach(type => {
+    if (selections[type].values?.length > 0) {
+      conditions.push({
+        type,
+        operator: selections[type].operator,
+        value: selections[type].values,
+      })
+    }
+  })
+  if (selections.dueDate.operator) {
+    conditions.push({ type: 'dueDate', operator: selections.dueDate.operator, value: null })
+  }
+  if (selections.points.active) {
+    conditions.push({
+      type: 'points',
+      operator: selections.points.operator,
+      value: selections.points.value,
+    })
+  }
+  return conditions
+}
+
+const hasAnySelection = selections => selectionsToConditions(selections).length > 0
+
+// ── Sub-components ───────────────────────────────────────────────────────────
+
+const SectionHeader = ({ icon, label, children }) => (
+  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+    <Box sx={{ color: 'text.secondary', display: 'flex', alignItems: 'center', '& svg': { fontSize: 18 } }}>
+      {icon}
+    </Box>
+    <Typography level='title-sm' sx={{ fontWeight: 600 }}>{label}</Typography>
+    {children}
+  </Box>
+)
+
+const IncludeExcludeToggle = ({ value, onChange, labels = ['Include', 'Exclude'] }) => (
+  <Box sx={{ display: 'flex', gap: 0.5, ml: 'auto' }}>
+    {[
+      { op: 'is', label: labels[0] },
+      { op: 'isNot', label: labels[1] },
+    ].map(o => (
+      <Chip
+        key={o.op}
+        size='sm'
+        variant={value === o.op ? 'solid' : 'soft'}
+        color={value === o.op ? (o.op === 'isNot' ? 'danger' : 'primary') : 'neutral'}
+        onClick={() => onChange(o.op)}
+        sx={{ cursor: 'pointer', userSelect: 'none', transition: 'all 0.15s ease' }}
+      >
+        {o.label}
+      </Chip>
+    ))}
+  </Box>
+)
+
+// ── Main Component ───────────────────────────────────────────────────────────
+
 const AdvancedFilterBuilder = ({
   isOpen,
   onClose,
@@ -30,783 +150,447 @@ const AdvancedFilterBuilder = ({
   userProfile = null,
   editingFilter = null,
 }) => {
-  const { ResponsiveModal } = useResponsiveModal()
-  const listContainerRef = useRef(null)
-  const conditionRefs = useRef([])
   const [filterName, setFilterName] = useState('')
-  const [filterDescription, setFilterDescription] = useState('')
   const [filterColor, setFilterColor] = useState(FILTER_COLORS[0].value)
-  const [conditions, setConditions] = useState([
-    { type: 'assignee', operator: 'is', value: [] },
-  ])
+  const [selections, setSelections] = useState(defaultSelections())
   const [error, setError] = useState('')
   const { data: existedFilters = [] } = useFilters()
 
-  const filterNameExists = (name, excludeId = null) => {
-    return existedFilters.some(
-      filter =>
-        filter.name.toLowerCase() === name.toLowerCase() &&
-        filter.id !== excludeId,
+  const filterNameExists = (name, excludeId = null) =>
+    existedFilters.some(
+      f => f.name.toLowerCase() === name.toLowerCase() && f.id !== excludeId,
     )
-  }
 
-  // Initialize refs array when conditions change
-  useEffect(() => {
-    conditionRefs.current = conditionRefs.current.slice(0, conditions.length)
-  }, [conditions.length])
-
-  // Initialize state when editing a filter
   useEffect(() => {
+    if (!isOpen) return
     if (editingFilter) {
       setFilterName(editingFilter.name)
-      setFilterDescription(editingFilter.description || '')
       setFilterColor(editingFilter.color || FILTER_COLORS[0].value)
-      setConditions(editingFilter.conditions || [])
-      setError('')
+      setSelections(conditionsToSelections(editingFilter.conditions))
     } else {
       setFilterName('')
-      setFilterDescription('')
-      // find color no filter has it :
       const potentialColor = FILTER_COLORS.find(
-        color => !existedFilters.some(filter => filter.color === color.value),
+        c => !existedFilters.some(f => f.color === c.value),
       )
-
-      setFilterColor(
-        potentialColor ? potentialColor.value : FILTER_COLORS[0].value,
-      )
-      setConditions([{ type: 'assignee', operator: 'is', value: [] }])
-      setError('')
+      setFilterColor(potentialColor?.value ?? FILTER_COLORS[0].value)
+      setSelections(defaultSelections())
     }
+    setError('')
   }, [editingFilter, isOpen])
 
+  const conditions = useMemo(() => selectionsToConditions(selections), [selections])
+
   const previewChores = useMemo(() => {
-    const validConditions = conditions.filter(c => {
-      if (c.type === 'dueDate' || c.type === 'points') return true
-      return c.value && (Array.isArray(c.value) ? c.value.length > 0 : true)
-    })
-
-    if (validConditions.length === 0) return []
-
-    const result = applyFilter(
+    if (conditions.length === 0) return []
+    return applyFilter(
       allChores,
-      { conditions: validConditions, operator: 'AND' },
-      {
-        userId: userProfile?.id,
-        members,
-        labels,
-        projects,
-      },
+      { conditions, operator: 'AND' },
+      { userId: userProfile?.id, members, labels, projects },
     )
-
-    return result
   }, [conditions, allChores, userProfile, members, labels, projects])
 
   const previewCount = previewChores.length
   const previewOverdueCount = previewChores.filter(
-    chore => chore.nextDueDate && new Date(chore.nextDueDate) < new Date(),
+    c => c.nextDueDate && new Date(c.nextDueDate) < new Date(),
   ).length
 
-  const addCondition = () => {
-    setConditions([
-      ...conditions,
-      { type: 'assignee', operator: 'is', value: [] },
-    ])
+  // ── Mutators ───────────────────────────────────────────────────────────────
 
-    // Scroll to the new condition after it's rendered
-    setTimeout(() => {
-      const newIndex = conditions.length
-      const newConditionElement = conditionRefs.current[newIndex]
-      if (newConditionElement && listContainerRef.current) {
-        newConditionElement.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-        })
-      }
-    }, 100)
+  const toggleValue = (type, value) => {
+    setSelections(prev => {
+      const cur = prev[type].values || []
+      const next = cur.includes(value) ? cur.filter(v => v !== value) : [...cur, value]
+      return { ...prev, [type]: { ...prev[type], values: next } }
+    })
   }
 
-  const removeCondition = index => {
-    setConditions(conditions.filter((_, i) => i !== index))
-  }
+  const setOperator = (type, op) =>
+    setSelections(prev => ({ ...prev, [type]: { ...prev[type], operator: op } }))
 
-  const updateCondition = (index, field, value) => {
-    const updated = [...conditions]
-    updated[index] = { ...updated[index], [field]: value }
+  const toggleDueDate = op =>
+    setSelections(prev => ({
+      ...prev,
+      dueDate: { operator: prev.dueDate.operator === op ? null : op },
+    }))
 
-    if (field === 'type') {
-      updated[index].value = []
-      if (value === 'dueDate') {
-        updated[index].operator = 'isOverdue'
-        updated[index].value = null
-      } else if (value === 'status') {
-        updated[index].value = []
-      } else if (value === 'points') {
-        updated[index].operator = 'greaterThan'
-        updated[index].value = 0
-      }
-    }
+  const setPointsOperator = op =>
+    setSelections(prev => ({ ...prev, points: { ...prev.points, operator: op, active: true } }))
 
-    setConditions(updated)
-  }
+  const setPointsValue = val =>
+    setSelections(prev => ({ ...prev, points: { ...prev.points, value: val, active: val > 0 } }))
+
+  // ── Save ───────────────────────────────────────────────────────────────────
 
   const handleSave = () => {
     if (!filterName.trim()) {
       setError('Please enter a filter name')
       return
     }
-
-    // Check for duplicate name, excluding current filter if editing
     if (filterNameExists(filterName.trim(), editingFilter?.id)) {
       setError('A filter with this name already exists')
       return
     }
-
-    const validConditions = conditions.filter(c => {
-      if (c.type === 'dueDate' || c.type === 'points') return true
-      return c.value && (Array.isArray(c.value) ? c.value.length > 0 : true)
-    })
-
-    if (conditions.length === 0 || validConditions.length === 0) {
-      setError('Please add at least one filter condition')
+    if (conditions.length === 0) {
+      setError('Please configure at least one filter condition')
       return
     }
-
-    const filterData = {
+    onSave({
       name: filterName.trim(),
-      description: filterDescription.trim(),
+      description: editingFilter?.description ?? '',
       color: filterColor,
-      conditions: validConditions,
+      conditions,
       operator: 'AND',
-    }
-
-    // Include ID if editing
-    if (editingFilter) {
-      filterData.id = editingFilter.id
-    }
-
-    onSave(filterData)
+      ...(editingFilter ? { id: editingFilter.id } : {}),
+    })
     onClose()
   }
 
-  const renderValueSelector = (condition, index) => {
-    switch (condition.type) {
-      case 'assignee':
-        return (
-          <Select
-            multiple
-            value={condition.value || []}
-            onChange={(_, newValue) =>
-              updateCondition(index, 'value', newValue)
-            }
-            placeholder='Select assignees'
-            sx={{ width: '100%' }}
-            slotProps={{
-              listbox: {
-                placement: 'bottom-start',
-                disablePortal: false,
-              },
-            }}
-            renderValue={selected => (
-              <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-                {selected.map((selectedElement, idx) => {
-                  const value = selectedElement.value
-                  const member = members.find(
-                    m => String(m.userId) === String(value),
-                  )
-                  return (
-                    <Chip key={`${value}-${idx}`} size='sm'>
-                      {member?.displayName || member?.username || 'Unknown'}
-                    </Chip>
-                  )
-                })}
-              </Box>
-            )}
-          >
-            {members.map((member, idx) => (
-              <Option
-                key={`member-${member.userId}-${idx}`}
-                value={member.userId}
-              >
-                {member.displayName || member.username} ({member.userId})
-              </Option>
-            ))}
-          </Select>
-        )
+  // ── Render helpers ─────────────────────────────────────────────────────────
 
-      case 'createdBy':
-        return (
-          <Select
-            multiple
-            value={condition.value || []}
-            onChange={(_, newValue) =>
-              updateCondition(index, 'value', newValue)
-            }
-            placeholder='Select creators'
-            sx={{ width: '100%' }}
-            slotProps={{
-              listbox: {
-                placement: 'bottom-start',
-                disablePortal: false,
-              },
-            }}
-            renderValue={selected => (
-              <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-                {selected.map((selectedElement, idx) => {
-                  const value = selectedElement.value
-
-                  const member = members.find(
-                    m => String(m.userId) === String(value),
-                  )
-                  return (
-                    <Chip key={`${value}-${idx}`} size='sm'>
-                      {member?.displayName || member?.username || 'Unknown'}
-                    </Chip>
-                  )
-                })}
-              </Box>
-            )}
-          >
-            {members.map((member, idx) => (
-              <Option
-                key={`creator-${member.userId}-${idx}`}
-                value={member.userId}
-              >
-                {member.displayName || member.username}
-              </Option>
-            ))}
-          </Select>
-        )
-
-      case 'priority':
-        return (
-          <Select
-            multiple
-            value={condition.value || []}
-            onChange={(_, newValue) =>
-              updateCondition(index, 'value', newValue)
-            }
-            placeholder='Select priorities'
-            sx={{ width: '100%' }}
-            slotProps={{
-              listbox: {
-                placement: 'bottom-start',
-                disablePortal: false,
-              },
-            }}
-            renderValue={selected => (
-              <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-                {selected.map((selectedElement, idx) => {
-                  const value = selectedElement.value
-                  const priority = Priorities.find(p => p.value === value)
-                  return (
-                    <Chip key={`priority-${value}-${idx}`} size='sm'>
-                      {priority?.name || `Priority ${value}`}
-                    </Chip>
-                  )
-                })}
-              </Box>
-            )}
-          >
-            {Priorities.map((priority, idx) => (
-              <Option
-                key={`priority-opt-${priority.value}-${idx}`}
-                value={priority.value}
-              >
-                {priority.name}
-              </Option>
-            ))}
-          </Select>
-        )
-
-      case 'label':
-        return (
-          <Select
-            multiple
-            value={condition.value || []}
-            onChange={(_, newValue) =>
-              updateCondition(index, 'value', newValue)
-            }
-            placeholder='Select labels'
-            sx={{ width: '100%' }}
-            slotProps={{
-              listbox: {
-                placement: 'bottom-start',
-                disablePortal: false,
-              },
-            }}
-            renderValue={selected => (
-              <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-                {selected.map((selectedElement, idx) => {
-                  const value = selectedElement.value
-
-                  const label = labels.find(l => String(l.id) === String(value))
-                  return (
-                    <Chip key={`label-chip-${value}-${idx}`} size='sm'>
-                      {label?.name || 'Unknown'}
-                    </Chip>
-                  )
-                })}
-              </Box>
-            )}
-          >
-            {labels.map((label, idx) => (
-              <Option key={`label-opt-${label.id}-${idx}`} value={label.id}>
-                {label.name}
-              </Option>
-            ))}
-          </Select>
-        )
-
-      case 'project':
-        return (
-          <Select
-            multiple
-            value={condition.value || []}
-            onChange={(_, newValue) =>
-              updateCondition(index, 'value', newValue)
-            }
-            placeholder='Select projects'
-            sx={{ width: '100%' }}
-            slotProps={{
-              listbox: {
-                placement: 'bottom-start',
-                disablePortal: false,
-              },
-            }}
-            renderValue={selected => (
-              <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-                {selected.map((event, idx) => {
-                  const value = event.value
-                  if (value === 'default')
-                    return (
-                      <Chip key={`default-${idx}`} size='sm'>
-                        Default
-                      </Chip>
-                    )
-                  const project = projects.find(
-                    p => String(p.id) === String(value),
-                  )
-                  return (
-                    <Chip key={`project-chip-${value}-${idx}`} size='sm'>
-                      {project?.name || 'Unknown'}
-                    </Chip>
-                  )
-                })}
-              </Box>
-            )}
-          >
-            <Option value='default'>Default Project</Option>
-            {projects
-              .filter(p => p.id !== 'default')
-              .map((project, idx) => (
-                <Option
-                  key={`project-opt-${project.id}-${idx}`}
-                  value={project.id}
-                >
-                  {project.name}
-                </Option>
-              ))}
-          </Select>
-        )
-
-      case 'status':
-        return (
-          <Select
-            multiple
-            value={condition.value || []}
-            onChange={(_, newValue) =>
-              updateCondition(index, 'value', newValue)
-            }
-            placeholder='Select statuses'
-            sx={{ width: '100%' }}
-            slotProps={{
-              listbox: {
-                placement: 'bottom-start',
-                disablePortal: false,
-              },
-            }}
-            renderValue={selected => (
-              <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-                {selected.map((selectedElement, idx) => {
-                  const value = selectedElement.value
-                  const statusLabels = {
-                    0: 'Active',
-                    1: 'Started',
-                    2: 'In Progress',
-                    3: 'Pending Approval',
-                  }
-                  return (
-                    <Chip key={`status-chip-${value}-${idx}`} size='sm'>
-                      {statusLabels[value] || 'Unknown'}
-                    </Chip>
-                  )
-                })}
-              </Box>
-            )}
-          >
-            <Option value={0}>Active</Option>
-            <Option value={1}>Started</Option>
-            <Option value={2}>In Progress</Option>
-            <Option value={3}>Pending Approval</Option>
-          </Select>
-        )
-
-      case 'dueDate':
-        return (
-          <Select
-            value={condition.operator}
-            onChange={(_, newValue) =>
-              updateCondition(index, 'operator', newValue)
-            }
-            sx={{ width: '100%' }}
-            slotProps={{
-              listbox: {
-                placement: 'bottom-start',
-                disablePortal: false,
-              },
-            }}
-          >
-            <Option value='isOverdue'>Is Overdue</Option>
-            <Option value='isDueToday'>Is Due Today</Option>
-            <Option value='isDueTomorrow'>Is Due Tomorrow</Option>
-            <Option value='isDueThisWeek'>Is Due This Week</Option>
-            <Option value='isDueThisMonth'>Is Due This Month</Option>
-            <Option value='hasNoDueDate'>Has No Due Date</Option>
-            <Option value='hasDueDate'>Has Due Date</Option>
-          </Select>
-        )
-
-      case 'points':
-        return (
-          <Box sx={{ display: 'flex', gap: 1, width: '100%' }}>
-            <Select
-              value={condition.operator}
-              onChange={(_, newValue) =>
-                updateCondition(index, 'operator', newValue)
+  const chipRow = (type, options, getChipProps) => {
+    const selected = selections[type].values || []
+    return (
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+        {options.map(opt => {
+          const isSelected = selected.includes(opt.value)
+          const extra = getChipProps ? getChipProps(opt, isSelected) : {}
+          return (
+            <Chip
+              key={opt.value}
+              variant={isSelected ? 'solid' : 'soft'}
+              color={isSelected ? (extra.color ?? 'primary') : 'neutral'}
+              startDecorator={
+                isSelected ? <Check sx={{ fontSize: 14 }} /> : (extra.startDecorator ?? null)
               }
-              sx={{ flex: 1 }}
-              slotProps={{
-                listbox: {
-                  placement: 'bottom-start',
-                  disablePortal: false,
-                },
-              }}
+              onClick={() => toggleValue(type, opt.value)}
+              sx={{ cursor: 'pointer', userSelect: 'none', transition: 'all 0.15s ease' }}
             >
-              <Option value='equals'>Equals</Option>
-              <Option value='greaterThan'>Greater Than</Option>
-              <Option value='lessThan'>Less Than</Option>
-              <Option value='greaterThanOrEqual'>Greater Than or Equal</Option>
-              <Option value='lessThanOrEqual'>Less Than or Equal</Option>
-            </Select>
-            <Input
-              type='number'
-              value={condition.value ?? 0}
-              onChange={e =>
-                updateCondition(index, 'value', parseInt(e.target.value) || 0)
-              }
-              sx={{ flex: 1 }}
-              slotProps={{
-                input: {
-                  min: 0,
-                },
-              }}
-            />
-          </Box>
-        )
-
-      default:
-        return null
-    }
+              {opt.label}
+            </Chip>
+          )
+        })}
+      </Box>
+    )
   }
 
+  const personChipRow = type => {
+    const selected = selections[type].values || []
+    return (
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+        {members.map(m => {
+          const isSelected = selected.includes(m.userId)
+          return (
+            <Chip
+              key={m.userId}
+              variant={isSelected ? 'solid' : 'soft'}
+              color={isSelected ? 'primary' : 'neutral'}
+              startDecorator={
+                isSelected ? (
+                  <Check sx={{ fontSize: 14 }} />
+                ) : (
+                  <Avatar src={m.image} alt={m.displayName} sx={{ '--Avatar-size': '20px' }} />
+                )
+              }
+              onClick={() => toggleValue(type, m.userId)}
+              sx={{ cursor: 'pointer', userSelect: 'none', transition: 'all 0.15s ease' }}
+            >
+              {m.displayName || m.username}
+            </Chip>
+          )
+        })}
+      </Box>
+    )
+  }
+
+  const activeConditionCount = conditions.length
+
   return (
-    <ResponsiveModal
+    <BottomSheetModal
       open={isOpen}
       onClose={onClose}
-      size='lg'
-      fullWidth={true}
-      title={editingFilter ? 'Edit Filter' : 'Create Advanced Filter'}
+      maxHeight='92vh'
+      title={
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          {editingFilter ? 'Edit Filter' : 'New Filter'}
+          {activeConditionCount > 0 && (
+            <Chip size='sm' variant='solid' color='primary'>
+              {activeConditionCount} condition{activeConditionCount !== 1 ? 's' : ''}
+            </Chip>
+          )}
+        </Box>
+      }
       footer={
-        <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
-          <Button variant='outlined' color='neutral' onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant='solid' color='primary' onClick={handleSave}>
-            Save
-          </Button>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
+          {/* Preview */}
+          <Box sx={{ display: 'flex', gap: 1, flexShrink: 0 }}>
+            {conditions.length > 0 ? (
+              <>
+                <Chip size='sm' variant='soft' color='neutral'>
+                  {previewCount} task{previewCount !== 1 ? 's' : ''}
+                </Chip>
+                {previewOverdueCount > 0 && (
+                  <Chip size='sm' variant='solid' color='danger'>
+                    {previewOverdueCount} overdue
+                  </Chip>
+                )}
+              </>
+            ) : (
+              <Typography level='body-xs' sx={{ color: 'text.tertiary' }}>
+                Add conditions to preview
+              </Typography>
+            )}
+          </Box>
+
+          {/* Actions */}
+          <Box sx={{ display: 'flex', gap: 1 }}>
+            <Button variant='plain' color='neutral' size='sm' onClick={onClose}>
+              Cancel
+            </Button>
+            <Button
+              variant='solid'
+              color='primary'
+              size='sm'
+              startDecorator={<Save sx={{ fontSize: 16 }} />}
+              onClick={handleSave}
+            >
+              Save Filter
+            </Button>
+          </Box>
         </Box>
       }
     >
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 2,
-          height: '100%',
-        }}
-      >
-        <Box>
-          <Typography level='body-sm' sx={{ mb: 1 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
+
+        {/* ── Name ─────────────────────────────────────────────────────────── */}
+        <Box sx={{ mb: 2 }}>
+          <Typography level='body-xs' sx={{ mb: 0.75, color: 'text.secondary', fontWeight: 600 }}>
             Filter Name
           </Typography>
           <Input
-            placeholder='e.g. Important Tasks due soon, Tasks for John, etc.'
+            placeholder='e.g. Overdue tasks for Alice'
             value={filterName}
-            onChange={e => {
-              setFilterName(e.target.value)
-              setError('')
-            }}
+            onChange={e => { setFilterName(e.target.value); setError('') }}
             error={!!error}
             autoFocus
           />
           {error && (
-            <Typography level='body-sm' color='danger' sx={{ mt: 0.5 }}>
-              {error}
-            </Typography>
+            <Typography level='body-xs' color='danger' sx={{ mt: 0.5 }}>{error}</Typography>
           )}
         </Box>
 
-        <Box>
-          <Typography level='body-sm' sx={{ mb: 1 }}>
-            Description (Optional)
-          </Typography>
-          <Textarea
-            placeholder='Optional description for this filter...'
-            value={filterDescription}
-            onChange={e => setFilterDescription(e.target.value)}
-            minRows={2}
-            maxRows={3}
-          />
-        </Box>
-
-        <Box>
-          <Typography level='body-sm' sx={{ mb: 1 }}>
+        {/* ── Color ────────────────────────────────────────────────────────── */}
+        <Box sx={{ mb: 2 }}>
+          <Typography level='body-xs' sx={{ mb: 0.75, color: 'text.secondary', fontWeight: 600 }}>
             Color
           </Typography>
-          <Select
-            value={filterColor}
-            onChange={(_, value) => value && setFilterColor(value)}
-            slotProps={{
-              listbox: {
-                placement: 'bottom-start',
-                disablePortal: false,
-              },
-            }}
-            renderValue={selected => (
-              <Typography
-                startDecorator={
-                  <Box
-                    sx={{
-                      width: 16,
-                      height: 16,
-                      borderRadius: '50%',
-                      background: selected.value,
-                    }}
-                  />
-                }
-              >
-                {selected.label}
-              </Typography>
-            )}
-          >
-            {FILTER_COLORS.map(color => (
-              <Option key={color.value} value={color.value}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Box
-                    sx={{
-                      width: 20,
-                      height: 20,
-                      borderRadius: '50%',
-                      background: color.value,
-                    }}
-                  />
-                  <Typography>{color.name}</Typography>
-                </Box>
-              </Option>
-            ))}
-          </Select>
-        </Box>
-
-        <Box
-          sx={{
-            flex: 1,
-            minHeight: 0,
-            display: 'flex',
-            flexDirection: 'column',
-          }}
-        >
-          <Typography level='body-sm' sx={{ mb: 1 }}>
-            Filter Conditions (All must match)
-          </Typography>
-
-          <List
-            ref={listContainerRef}
-            sx={{
-              gap: 1,
-              overflowY: 'auto',
-              overflowX: 'hidden',
-              maxHeight: { xs: '40vh', sm: '50vh' },
-              pr: 0.5,
-              position: 'relative',
-            }}
-          >
-            {conditions.map((condition, index) => (
-              <ListItem
-                key={index}
-                ref={el => (conditionRefs.current[index] = el)}
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+            {FILTER_COLORS.map(c => (
+              <Box
+                key={c.value}
+                title={c.name}
+                onClick={() => setFilterColor(c.value)}
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 1,
-                  p: 1.5,
-                  bgcolor: 'background.level1',
-                  borderRadius: 'sm',
-                  position: 'relative',
+                  width: 26,
+                  height: 26,
+                  borderRadius: '50%',
+                  background: c.value,
+                  cursor: 'pointer',
+                  outline: filterColor === c.value
+                    ? '3px solid var(--joy-palette-primary-500)'
+                    : '2px solid transparent',
+                  outlineOffset: '2px',
+                  transition: 'all 0.15s ease',
+                  flexShrink: 0,
+                  '&:hover': { transform: 'scale(1.2)' },
                 }}
-              >
-                <Box
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    width: '100%',
-                  }}
-                >
-                  <Typography level='body-xs' color='neutral'>
-                    Condition {index + 1}
-                  </Typography>
-                  <IconButton
-                    size='sm'
-                    color='danger'
-                    variant='plain'
-                    onClick={() => removeCondition(index)}
-                    disabled={conditions.length === 1}
-                  >
-                    <Delete />
-                  </IconButton>
-                </Box>
-
-                <Box sx={{ width: '100%' }}>
-                  <Typography level='body-xs' sx={{ mb: 0.5 }}>
-                    Field
-                  </Typography>
-                  <Select
-                    value={condition.type}
-                    onChange={(_, newValue) =>
-                      updateCondition(index, 'type', newValue)
-                    }
-                    sx={{ width: '100%' }}
-                    slotProps={{
-                      listbox: {
-                        placement: 'bottom-start',
-                        disablePortal: false,
-                      },
-                    }}
-                  >
-                    <Option value='assignee'>Assignee</Option>
-                    <Option value='createdBy'>Created By</Option>
-                    <Option value='priority'>Priority</Option>
-                    <Option value='label'>Label</Option>
-                    <Option value='project'>Project</Option>
-                    <Option value='status'>Status</Option>
-                    <Option value='dueDate'>Due Date</Option>
-                    <Option value='points'>Points</Option>
-                  </Select>
-                </Box>
-
-                <Box sx={{ width: '100%' }}>
-                  <Typography level='body-xs' sx={{ mb: 0.5 }}>
-                    {condition.type === 'dueDate' || condition.type === 'points'
-                      ? 'Condition'
-                      : 'Value'}
-                  </Typography>
-                  {renderValueSelector(condition, index)}
-                </Box>
-              </ListItem>
+              />
             ))}
-          </List>
-
-          <Button
-            size='sm'
-            variant='outlined'
-            startDecorator={<Add />}
-            onClick={addCondition}
-            sx={{ mt: 1 }}
-          >
-            Add Condition
-          </Button>
+          </Box>
         </Box>
 
-        <Box>
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              mb: 1,
-            }}
-          >
-            <Typography level='body-sm'>Preview</Typography>
-            <Box sx={{ display: 'flex', gap: 1 }}>
-              <Chip size='sm' variant='soft' color='neutral'>
-                {previewCount} tasks
-              </Chip>
-              {previewOverdueCount > 0 && (
-                <Chip size='sm' variant='solid' color='danger'>
-                  {previewOverdueCount} overdue
-                </Chip>
-              )}
-            </Box>
-          </Box>
+        <Divider sx={{ mb: 2.5 }} />
 
-          <Box
-            sx={{
-              maxHeight: 150,
-              overflowY: 'auto',
-              overflowX: 'hidden',
-              bgcolor: 'background.level1',
-              p: 1,
-              borderRadius: 'sm',
-              position: 'relative',
-            }}
-          >
-            {previewCount === 0 ? (
-              <Typography
-                level='body-sm'
-                color='neutral'
-                sx={{ textAlign: 'center', py: 2 }}
+        {/* ── Assignee ─────────────────────────────────────────────────────── */}
+        {members.length > 0 && (
+          <>
+            <SectionHeader icon={<Person />} label='Assignee'>
+              <IncludeExcludeToggle
+                value={selections.assignee.operator}
+                onChange={op => setOperator('assignee', op)}
+              />
+            </SectionHeader>
+            {personChipRow('assignee')}
+            <Divider sx={{ my: 2.5 }} />
+          </>
+        )}
+
+        {/* ── Created By ───────────────────────────────────────────────────── */}
+        {members.length > 0 && (
+          <>
+            <SectionHeader icon={<Person />} label='Created By'>
+              <IncludeExcludeToggle
+                value={selections.createdBy.operator}
+                onChange={op => setOperator('createdBy', op)}
+              />
+            </SectionHeader>
+            {personChipRow('createdBy')}
+            <Divider sx={{ my: 2.5 }} />
+          </>
+        )}
+
+        {/* ── Status ───────────────────────────────────────────────────────── */}
+        <SectionHeader icon={<TaskAlt />} label='Status'>
+          <IncludeExcludeToggle
+            value={selections.status.operator}
+            onChange={op => setOperator('status', op)}
+          />
+        </SectionHeader>
+        {chipRow('status', CHORE_STATUSES)}
+        <Divider sx={{ my: 2.5 }} />
+
+        {/* ── Priority ─────────────────────────────────────────────────────── */}
+        <SectionHeader icon={<PriorityHigh />} label='Priority'>
+          <IncludeExcludeToggle
+            value={selections.priority.operator}
+            onChange={op => setOperator('priority', op)}
+          />
+        </SectionHeader>
+        {chipRow('priority', Priorities.map(p => ({ value: p.value, label: p.name })), (opt, isSelected) => ({
+          color: isSelected
+            ? (Priorities.find(p => p.value === opt.value)?.color || 'primary')
+            : 'neutral',
+          startDecorator: !isSelected
+            ? Priorities.find(p => p.value === opt.value)?.icon
+            : null,
+        }))}
+        <Divider sx={{ my: 2.5 }} />
+
+        {/* ── Due Date ─────────────────────────────────────────────────────── */}
+        <SectionHeader icon={<CalendarMonth />} label='Due Date' />
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+          {DUE_DATE_OPTIONS.map(opt => {
+            const isSelected = selections.dueDate.operator === opt.value
+            return (
+              <Chip
+                key={opt.value}
+                variant={isSelected ? 'solid' : 'soft'}
+                color={isSelected ? (opt.color ?? 'primary') : 'neutral'}
+                startDecorator={isSelected ? <Check sx={{ fontSize: 14 }} /> : null}
+                onClick={() => toggleDueDate(opt.value)}
+                sx={{ cursor: 'pointer', userSelect: 'none', transition: 'all 0.15s ease' }}
               >
-                No tasks match these filters
-              </Typography>
-            ) : (
-              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-                {previewChores.slice(0, 3).map(chore => (
-                  <Box
-                    key={chore.id}
+                {opt.label}
+              </Chip>
+            )
+          })}
+        </Box>
+        <Divider sx={{ my: 2.5 }} />
+
+        {/* ── Labels ───────────────────────────────────────────────────────── */}
+        {labels.length > 0 && (
+          <>
+            <SectionHeader icon={<Label />} label='Labels'>
+              <IncludeExcludeToggle
+                value={selections.label.operator}
+                onChange={op => setOperator('label', op)}
+                labels={['Has', "Doesn't Have"]}
+              />
+            </SectionHeader>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+              {labels.map(lbl => {
+                const isSelected = selections.label.values.includes(lbl.id)
+                return (
+                  <Chip
+                    key={lbl.id}
+                    variant={isSelected ? 'solid' : 'soft'}
+                    color='neutral'
+                    startDecorator={
+                      <Box
+                        sx={{
+                          width: 10,
+                          height: 10,
+                          borderRadius: '50%',
+                          bgcolor: lbl.color || '#90a4ae',
+                          flexShrink: 0,
+                        }}
+                      />
+                    }
+                    endDecorator={isSelected ? <Check sx={{ fontSize: 12 }} /> : null}
+                    onClick={() => toggleValue('label', lbl.id)}
                     sx={{
-                      bgcolor: 'background.surface',
-                      p: 1,
-                      borderRadius: 'sm',
+                      cursor: 'pointer',
+                      userSelect: 'none',
+                      transition: 'all 0.15s ease',
+                      ...(isSelected && { outline: '2px solid', outlineColor: 'primary.400' }),
                     }}
                   >
-                    <Typography level='body-sm'>{chore.name}</Typography>
-                  </Box>
-                ))}
-                {previewCount > 3 && (
-                  <Typography
-                    level='body-xs'
-                    color='neutral'
-                    sx={{ textAlign: 'center', mt: 0.5 }}
-                  >
-                    ...and {previewCount - 3} more
-                  </Typography>
-                )}
-              </Box>
+                    {lbl.name}
+                  </Chip>
+                )
+              })}
+            </Box>
+            <Divider sx={{ my: 2.5 }} />
+          </>
+        )}
+
+        {/* ── Projects ─────────────────────────────────────────────────────── */}
+        {projects.length > 0 && (
+          <>
+            <SectionHeader icon={<FolderOpen />} label='Projects'>
+              <IncludeExcludeToggle
+                value={selections.project.operator}
+                onChange={op => setOperator('project', op)}
+              />
+            </SectionHeader>
+            {chipRow(
+              'project',
+              [
+                { value: 'default', label: 'Default Project' },
+                ...projects.filter(p => p.id !== 'default').map(p => ({ value: p.id, label: p.name })),
+              ],
             )}
-          </Box>
+            <Divider sx={{ my: 2.5 }} />
+          </>
+        )}
+
+        {/* ── Points ───────────────────────────────────────────────────────── */}
+        <SectionHeader icon={<Stars />} label='Points' />
+        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
+          {POINTS_OPERATORS.map(op => (
+            <Chip
+              key={op.value}
+              size='sm'
+              variant={selections.points.operator === op.value && selections.points.active ? 'solid' : 'soft'}
+              color={selections.points.operator === op.value && selections.points.active ? 'primary' : 'neutral'}
+              onClick={() => setPointsOperator(op.value)}
+              sx={{ cursor: 'pointer', userSelect: 'none', fontFamily: 'monospace', fontWeight: 600 }}
+            >
+              {op.label}
+            </Chip>
+          ))}
+          <Input
+            type='number'
+            size='sm'
+            value={selections.points.value}
+            onChange={e => setPointsValue(parseInt(e.target.value) || 0)}
+            sx={{ width: 80 }}
+            slotProps={{ input: { min: 0 } }}
+          />
+          {selections.points.active && (
+            <Chip
+              size='sm'
+              variant='soft'
+              color='danger'
+              onClick={() => setSelections(prev => ({ ...prev, points: { ...prev.points, active: false, value: 0 } }))}
+              sx={{ cursor: 'pointer' }}
+            >
+              Clear
+            </Chip>
+          )}
         </Box>
+
       </Box>
-    </ResponsiveModal>
+    </BottomSheetModal>
   )
 }