helpwave · DasProffi · Mar 14, 2026 · Mar 14, 2026
diff --git a/web/components/patients/PatientDataEditor.tsx b/web/components/patients/PatientDataEditor.tsx
@@ -344,9 +344,7 @@ export const PatientDataEditor = ({
                 {...interactionStates}
               >
                 {sexOptions.map(option => (
-                  <SelectOption key={option.value} value={option.value}>
-                    {option.label}
-                  </SelectOption>
+                  <SelectOption key={option.value} value={option.value} label={option.label} />
                 ))}
               </Select>
             )}

diff --git a/web/components/properties/PropertyDetailView.tsx b/web/components/properties/PropertyDetailView.tsx
@@ -249,9 +249,7 @@ export const PropertyDetailView = ({
                 }}
               >
                 {propertySubjectTypeList.map(v => (
-                  <SelectOption key={v} value={v}>
-                    {translation('sPropertySubjectType', { subject: v })}
-                  </SelectOption>
+                  <SelectOption key={v} value={v} label={translation('sPropertySubjectType', { subject: v })} />
                 ))}
               </Select>
             )}
@@ -276,9 +274,7 @@ export const PropertyDetailView = ({
                 }}
               >
                 {propertyFieldTypeList.map(v => (
-                  <SelectOption key={v} value={v}>
-                    {translation('sPropertyType', { type: v })}
-                  </SelectOption>
+                  <SelectOption key={v} value={v} label={translation('sPropertyType', { type: v })} />
                 ))}
               </Select>
             )}

diff --git a/web/components/properties/PropertyEntry.tsx b/web/components/properties/PropertyEntry.tsx
@@ -108,11 +108,8 @@ export const PropertyEntry = ({
         onEditComplete={singleSelectValue => onEditComplete({ ...value, singleSelectValue })}
       >
         {selectData?.options.map(option => (
-          <SelectOption key={option.id} value={option.id}>
-            {option.name}
-          </SelectOption>
-        ))
-        }
+          <SelectOption key={option.id} value={option.id} label={option.name} />
+        ))}
       </SingleSelectProperty>
     )
   case 'multiSelect':
@@ -124,11 +121,8 @@ export const PropertyEntry = ({
         onEditComplete={multiSelectValue => onEditComplete({ ...value, multiSelectValue })}
       >
         {selectData?.options.map(option => (
-          <SelectOption key={option.id} value={option.id}>
-            {option.name}
-          </SelectOption>
-        ))
-        }
+          <SelectOption key={option.id} value={option.id} label={option.name} />
+        ))}
       </MultiSelectProperty>
     )
   case 'user':

diff --git a/web/components/tables/PatientList.tsx b/web/components/tables/PatientList.tsx
@@ -1,7 +1,9 @@
 import { useMemo, useState, forwardRef, useImperativeHandle, useEffect, useCallback, useRef } from 'react'
-import { Chip, FillerCell, HelpwaveLogo, LoadingContainer, SearchBar, ProgressIndicator, Tooltip, Drawer, TableProvider, TableDisplay, TableColumnSwitcher, TablePagination, IconButton, useLocale } from '@helpwave/hightide'
+import type { IdentifierFilterValue, FilterListItem, FilterListPopUpBuilderProps } from '@helpwave/hightide'
+import { Chip, FillerCell, HelpwaveLogo, LoadingContainer, SearchBar, ProgressIndicator, Tooltip, Drawer, TableProvider, TableDisplay, TableColumnSwitcher, TablePagination, IconButton, useLocale, FilterList } from '@helpwave/hightide'
 import { PlusIcon } from 'lucide-react'
-import { Sex, PatientState, type GetPatientsQuery, type TaskType, PropertyEntity, type FullTextSearchInput, type LocationType } from '@/api/gql/generated'
+import type { LocationType } from '@/api/gql/generated'
+import { Sex, PatientState, type GetPatientsQuery, type TaskType, PropertyEntity, type FullTextSearchInput, FieldType } from '@/api/gql/generated'
 import { usePropertyDefinitions, usePatientsPaginated, useRefreshingEntityIds } from '@/data'
 import { PatientDetailView } from '@/components/patients/PatientDetailView'
 import { LocationChips } from '@/components/locations/LocationChips'
@@ -15,6 +17,8 @@ import { getPropertyColumnsForEntity } from '@/utils/propertyColumn'
 import { useStorageSyncedTableState } from '@/hooks/useTableState'
 import { usePropertyColumnVisibility } from '@/hooks/usePropertyColumnVisibility'
 import { columnFiltersToFilterInput, paginationStateToPaginationInput, sortingStateToSortInput } from '@/utils/tableStateToApi'
+import { getPropertyFilterFn as getPropertyDatatype } from '@/utils/propertyFilterMapping'
+import { UserSelectFilterPopUp } from './UserSelectFilterPopUp'
 
 export type PatientViewModel = {
   id: string,
@@ -190,7 +194,7 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
   }
 
   const patientPropertyColumns = useMemo<ColumnDef<PatientViewModel>[]>(
-    () => getPropertyColumnsForEntity<PatientViewModel>(propertyDefinitionsData, PropertyEntity.Patient),
+    () => getPropertyColumnsForEntity<PatientViewModel>(propertyDefinitionsData, PropertyEntity.Patient, false),
     [propertyDefinitionsData]
   )
 
@@ -211,7 +215,6 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
       minSize: 200,
       size: 250,
       maxSize: 300,
-      filterFn: 'text',
     },
     {
       id: 'state',
@@ -229,7 +232,6 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
       minSize: 120,
       size: 144,
       maxSize: 180,
-      filterFn: 'singleTag',
       meta: {
         filterData: {
           tags: allPatientStates.map(state => ({ label: translation('patientState', { state: state as string }), tag: state })),
@@ -272,7 +274,6 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
       minSize: 160,
       size: 160,
       maxSize: 200,
-      filterFn: 'singleTag',
       meta: {
         filterData: {
           tags: [
@@ -299,7 +300,6 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
       minSize: 200,
       size: 260,
       maxSize: 320,
-      filterFn: 'text' as const,
     },
     ...(['CLINIC', 'WARD', 'ROOM', 'BED'] as const).map((kind): ColumnDef<PatientViewModel> => ({
       id: `location-${kind}`,
@@ -322,7 +322,6 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
       minSize: 160,
       size: 220,
       maxSize: 300,
-      filterFn: 'text' as const,
     })),
     {
       id: 'birthdate',
@@ -351,7 +350,6 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
       minSize: 200,
       size: 200,
       maxSize: 200,
-      filterFn: 'date' as const,
     },
     {
       id: 'tasks',
@@ -395,6 +393,62 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
     })),
   ], [translation, allPatientStates, patientPropertyColumns, refreshingPatientIds, rowLoadingCell, dateFormat])
 
+  const availableFilters: FilterListItem[] = useMemo(() => [
+    {
+      id: 'name',
+      label: translation('name'),
+      dataType: 'text',
+      tags: [],
+    },
+    {
+      id: 'state',
+      label: translation('status'),
+      dataType: 'singleTag',
+      tags: allPatientStates.map(state => ({ label: translation('patientState', { state: state as string }), tag: state })),
+    },
+    {
+      id: 'sex',
+      label: translation('sex'),
+      dataType: 'singleTag',
+      tags: [
+        { label: translation('male'), tag: Sex.Male },
+        { label: translation('female'), tag: Sex.Female },
+        { label: translation('diverse'), tag: Sex.Unknown },
+      ],
+    },
+    ...(['CLINIC', 'WARD', 'ROOM', 'BED'] as const).map((kind): FilterListItem => ({
+      id: `location-${kind}`,
+      label: translation(LOCATION_KIND_HEADERS[kind] as 'locationClinic' | 'locationWard' | 'locationRoom' | 'locationBed'),
+      dataType: 'text',
+      tags: [],
+    })),
+    {
+      id: 'birthdate',
+      label: translation('birthdate'),
+      dataType: 'date',
+      tags: [],
+    },
+    {
+      id: 'tasks',
+      label: translation('tasks'),
+      dataType: 'number',
+      tags: [],
+    },
+    ...propertyDefinitionsData?.propertyDefinitions.map(def => {
+      const dataType = getPropertyDatatype(def.fieldType)
+      return {
+        id:  `property_${def.id}`,
+        label: def.name,
+        dataType,
+        tags: def.options.map((opt, idx) => ({
+          label: opt,
+          tag: `${def.id}-opt-${idx}`,
+        })),
+        popUpBuilder: def.fieldType === FieldType.FieldTypeUser ? (props: FilterListPopUpBuilderProps) => (<UserSelectFilterPopUp {...props}/>) : undefined,
+      }
+    }) ?? [],
+  ], [allPatientStates, propertyDefinitionsData?.propertyDefinitions, translation])
+
   const onRowClick = useCallback((row: Row<PatientViewModel>) => handleEdit(row.original), [handleEdit])
   const fillerRowCell = useCallback(() => (<FillerCell className="min-h-8" />), [])
 
@@ -431,6 +485,14 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               onSearch={() => null}
+              containerProps={{ className: 'max-w-80' }}
+            />
+            <FilterList
+              value={filters as IdentifierFilterValue[]}
+              onValueChange={value => {
+                setFilters(value)
+              }}
+              availableItems={availableFilters}
             />
             <TableColumnSwitcher />
           </div>

diff --git a/web/components/tables/TaskList.tsx b/web/components/tables/TaskList.tsx
@@ -586,9 +586,9 @@ export const TaskList = forwardRef<TaskListRef, TaskListProps>(({ tasks: initial
               buttonProps={{ className: 'min-w-32' }}
               contentPanelProps={{ className: 'min-w-32' }}
             >
-              <SelectOption value="all">{translation('filterAll') || 'All'}</SelectOption>
-              <SelectOption value="undone">{translation('filterUndone') || 'Undone'}</SelectOption>
-              <SelectOption value="done">{translation('done')}</SelectOption>
+              <SelectOption value="all" label={translation('filterAll') || 'All'} />
+              <SelectOption value="undone" label={translation('filterUndone') || 'Undone'} />
+              <SelectOption value="done" label={translation('done')} />
             </Select>
             {headerActions}
             {canHandover && (

diff --git a/web/components/tables/UserSelectFilterPopUp.tsx b/web/components/tables/UserSelectFilterPopUp.tsx
@@ -0,0 +1,49 @@
+import { useTasksTranslation } from '@/i18n/useTasksTranslation'
+import { FilterBasePopUp, FilterOperatorUtils, Visibility, type FilterListPopUpBuilderProps } from '@helpwave/hightide'
+import { useId, useMemo } from 'react'
+import { AssigneeSelect } from '../tasks/AssigneeSelect'
+
+
+export const UserSelectFilterPopUp = ({ value, onValueChange, onRemove, name }: FilterListPopUpBuilderProps) => {
+  const translation = useTasksTranslation()
+  const id = useId()
+  const ids = {
+    select: `user-select-filter-${id}`,
+  }
+
+  const operator = useMemo(() => {
+    const suggestion = value?.operator ?? 'contains'
+    if (!FilterOperatorUtils.typeCheck.tagsSingle(suggestion)) {
+      return 'contains'
+    }
+    return suggestion
+  }, [value])
+
+  const parameter = value?.parameter ?? {}
+
+  const needsParameterInput = operator !== 'isUndefined' && operator !== 'isNotUndefined'
+
+  return (
+    <FilterBasePopUp
+      name={name}
+      operator={operator}
+      onOperatorChange={(newOperator) => onValueChange({ dataType: 'singleTag', parameter, operator: newOperator })}
+      onRemove={onRemove}
+      allowedOperators={FilterOperatorUtils.operatorsByCategory.singleTag}
+      hasValue={!!value}
+      noParameterRequired={!needsParameterInput}
+    >
+      <Visibility isVisible={needsParameterInput}>
+        <div className="flex-col-1">
+          <label htmlFor={ids.select} className="typography-label-md">{translation('user')}</label>
+          <AssigneeSelect
+            value={parameter.singleOptionSearch as string ?? ''}
+            onValueChanged={(newUserValue) => onValueChange({ ...value, parameter: { ...parameter, singleOptionSearch: newUserValue } })}
+            onDialogClose={(newUserValue) => onValueChange({ ...value, parameter: { ...parameter, singleOptionSearch: newUserValue } })}
+            onValueClear={() => onValueChange({ ...value, parameter: { ...parameter, singleOptionSearch: undefined } })}
+          />
+        </div>
+      </Visibility>
+    </FilterBasePopUp>
+  )
+}
diff --git a/web/components/tasks/TaskDataEditor.tsx b/web/components/tasks/TaskDataEditor.tsx
@@ -273,9 +273,7 @@ export const TaskDataEditor = ({
                   >
                     {patients.map(patient => {
                       return (
-                        <SelectOption key={patient.id} value={patient.id}>
-                          {patient.name}
-                        </SelectOption>
+                        <SelectOption key={patient.id} value={patient.id} label={patient.name} />
                       )
                     })}
                   </Select>
@@ -362,9 +360,9 @@ export const TaskDataEditor = ({
                       dataProps.onEditComplete?.(priority)
                     }}
                   >
-                    <SelectOption value="none" iconAppearance="right">{translation('priorityNone')}</SelectOption>
+                    <SelectOption value="none" iconAppearance="right" label={translation('priorityNone')} />
                     {priorities.map(({ value, label }) => (
-                      <SelectOption key={value} value={value} iconAppearance="right">
+                      <SelectOption key={value} value={value} iconAppearance="right" label={label}>
                         <div className="flex items-center gap-2">
                           <span className={`w-2 h-2 rounded-full ${PriorityUtils.toBackgroundColor(value as TaskPriority | null | undefined)}`} />
                           <span>{label}</span>

diff --git a/web/hooks/useTableState.ts b/web/hooks/useTableState.ts
@@ -1,11 +1,12 @@
 import type {
+  ColumnFilter,
   ColumnFiltersState,
   PaginationState,
   SortingState,
   VisibilityState
 } from '@tanstack/react-table'
 import type { Dispatch, SetStateAction } from 'react'
-import type { DateFilterParameter, DatetimeFilterParameter, TableFilterValue } from '@helpwave/hightide'
+import type { DataType, FilterOperator, FilterParameter, FilterValue } from '@helpwave/hightide'
 import { useStorage } from '@/hooks/useStorage'
 
 const defaultPagination: PaginationState = {
@@ -59,24 +60,13 @@ export function useStorageSyncedTableState(
     defaultValue: initialFilters,
     serialize: (value) => {
       const mappedColumnFilter = value.map((filter) => {
-        const tableFilterValue = filter.value as TableFilterValue
-        let parameter: Record<string, unknown> = tableFilterValue.parameter
-        if(tableFilterValue.operator.startsWith('dateTime')) {
-          const dateTimeParameter: DatetimeFilterParameter = parameter as DatetimeFilterParameter
-          parameter = {
-            ...parameter,
-            compareDatetime: dateTimeParameter.compareDatetime ? dateTimeParameter.compareDatetime.toISOString() : undefined,
-            min: dateTimeParameter.min ? dateTimeParameter.min.toISOString() : undefined,
-            max: dateTimeParameter.max ? dateTimeParameter.max.toISOString() : undefined,
-          }
-        } else if(tableFilterValue.operator.startsWith('date')) {
-          const dateParameter: DateFilterParameter = parameter as DateFilterParameter
-          parameter = {
-            ...parameter,
-            compareDate: dateParameter.compareDate ? dateParameter.compareDate.toISOString() : undefined,
-            min: dateParameter.min ? dateParameter.min.toISOString() : undefined,
-            max: dateParameter.max ? dateParameter.max.toISOString() : undefined,
-          }
+        const tableFilterValue = filter.value as FilterValue
+        const filterParameter = tableFilterValue.parameter
+        const parameter: Record<string, unknown> = {
+          ...filterParameter,
+          compareDate: filterParameter.compareDate ? filterParameter.compareDate.toISOString() : undefined,
+          minDate: filterParameter.minDate ? filterParameter.minDate.toISOString() : undefined,
+          maxDate: filterParameter.maxDate ? filterParameter.maxDate.toISOString() : undefined,
         }
         return {
           ...filter,
@@ -91,34 +81,25 @@ export function useStorageSyncedTableState(
     },
     deserialize: (value) => {
       const mappedColumnFilter = JSON.parse(value) as Record<string, unknown>[]
-      return mappedColumnFilter.map((filter) => {
-        const filterValue = filter['value'] as Record<string, unknown>
-        const operator: string = filterValue['operator'] as string
-        let parameter: Record<string, unknown> = filterValue['parameter'] as Record<string, unknown>
-        if(operator.startsWith('dateTime')) {
-          parameter = {
-            ...parameter,
-            compareDatetime: parameter['compareDatetime'] ? new Date(parameter['compareDatetime'] as string) : undefined,
-            min: parameter['min'] ? new Date(parameter['min'] as string) : undefined,
-            max: parameter['max'] ? new Date(parameter['max'] as string) : undefined,
-          }
+      return mappedColumnFilter.map((filter): ColumnFilter => {
+        const value = filter['value'] as Record<string, unknown>
+        const parameter: Record<string, unknown> = value['parameter'] as Record<string, unknown>
+        const filterParameter: FilterParameter = {
+          ...parameter,
+          compareDate: parameter['compareDate'] ? new Date(parameter['compareDate'] as string) : undefined,
+          minDate: parameter['minDate'] ? new Date(parameter['minDate'] as string) : undefined,
+          maxDate: parameter['maxDate'] ? new Date(parameter['maxDate'] as string) : undefined,
         }
-        else if(operator.startsWith('date')) {
-          parameter = {
-            ...parameter,
-            compareDate: parameter['compareDate'] ? new Date(parameter['compareDate'] as string) : undefined,
-            min: parameter['min'] ? new Date(parameter['min'] as string) : undefined,
-            max: parameter['max'] ? new Date(parameter['max'] as string) : undefined,
-          }
+        const mappedValue: FilterValue = {
+          operator: value['operator'] as FilterOperator,
+          dataType: value['dataType'] as DataType,
+          parameter: filterParameter,
         }
         return {
           ...filter,
-          value: {
-            ...filterValue,
-            parameter,
-          },
-        }
-      }) as unknown as ColumnFiltersState
+          value: mappedValue,
+        } as ColumnFilter
+      })
     },
   })
   const { value: columnVisibility, setValue: setColumnVisibility } = useStorage<VisibilityState>({