diff --git a/react-openapi/components/FilterBar.tsx b/react-openapi/components/FilterBar.tsx
index 6dbac35..c5e9318 100644
--- a/react-openapi/components/FilterBar.tsx
+++ b/react-openapi/components/FilterBar.tsx
@@ -13,8 +13,6 @@ import FilterListIcon from "@mui/icons-material/FilterList";
 import { ResourceField, ResourceMode } from "../types/config";
 import { FilterBarComponents, FieldComponents } from "../types/overrides";
 import { getFieldOptions, resolveTemplate } from "../utils/options";
-import DateRangeField from './fields/DateRangeField';
-import NumberRangeField from './fields/NumberRangeField';
 
 export function FilterAutocomplete({
   options,
@@ -167,7 +165,6 @@ function renderFilterInput(
   if (filterType === "number-range") {
     const RangeComponent = fieldComponents?.numberRange;
     if (!RangeComponent) throw new Error(`Number range component not found for field ${fieldName}`);
-
     const rangeVal = (value as { min?: string; max?: string }) || {};
     return <RangeComponent name={fieldName} field={field} value={rangeVal} onChange={(val: any) => onChange("value", val)} />;
   }
@@ -175,7 +172,6 @@ function renderFilterInput(
   if (filterType === "date-range") {
     const RangeComponent = fieldComponents?.dateRange;
     if (!RangeComponent) throw new Error(`Number range component not found for field ${fieldName}`);
-
     const rangeVal = (value as { start?: string; end?: string }) || {};
     return <RangeComponent name={fieldName} field={field} value={rangeVal} onChange={(val: any) => onChange("value", val)} />;
   }
diff --git a/react-openapi/components/fields/DefaultFieldComponents.ts b/react-openapi/components/fields/DefaultFieldComponents.ts
index 46012d2..c124dba 100644
--- a/react-openapi/components/fields/DefaultFieldComponents.ts
+++ b/react-openapi/components/fields/DefaultFieldComponents.ts
@@ -8,6 +8,8 @@ import EnumField from './EnumField';
 import RelationField from './RelationField';
 import ImageUploadField from './ImageUploadField';
 import FallbackField from './FallbackField';
+import DateRangeField from './DateRangeField';
+import NumberRangeField from './NumberRangeField';
 
 const WrappedImageUploadField = (props: FieldComponentProps) =>
   React.createElement(ImageUploadField, {
@@ -33,4 +35,6 @@ export const defaultFieldComponents: FieldComponents = {
   image: WrappedImageUploadField,
   relation: RelationField,
   default: FallbackField,
+  dateRange: DateRangeField,
+  numberRange: NumberRangeField,
 };
diff --git a/src/openapi-config.ts b/src/openapi-config.ts
index 98d7179..41d39df 100644
--- a/src/openapi-config.ts
+++ b/src/openapi-config.ts
@@ -4,7 +4,7 @@ export const configuration: Record<string, ResourceOverride> = {
   expenses: {
     filterOptions: {
       mode: "client",
-      fields: ["account", "payee.name", "tags", "occurred_at", "amount"],
+      fields: ["account", "payee", "tags", "occurred_at", "amount"],
     },
     fields: {
       payee: {