fixes for FilterBar.tsx ONLY

react-openapi/components/FilterBar.tsx

@@ -11,7 +11,7 @@ import {
 import DoneIcon from "@mui/icons-material/Done";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import { ResourceField, ResourceMode } from "../types/config";
-import { FilterBarComponents } from "../types/overrides";
+import { FilterBarComponents, FieldComponents } from "../types/overrides";
 import { getFieldOptions, resolveTemplate } from "../utils/options";
 
 export function FilterAutocomplete({
@@ -158,6 +158,7 @@ function renderFilterInput(
   value: any,
   onChange: (key: string, val: any) => void,
   components?: FilterBarComponents,
+  fieldComponents?: FieldComponents,
 ) {
   const CustomInput = components?.filterInputs?.[fieldName];
   if (CustomInput) {
@@ -167,6 +168,16 @@ function renderFilterInput(
   const filterType = field.filterType;
 
   if (filterType === "number-range") {
+    const NumberComponent = fieldComponents?.number;
+    if (NumberComponent) {
+      const rangeVal = (value as { min?: string; max?: string }) || {};
+      return (
+        <Box sx={{ display: "flex", gap: 1 }}>
+          <NumberComponent name={`${fieldName}_min`} field={field} value={rangeVal.min ?? ""} onChange={(val: any) => onChange("min", val === "" ? undefined : val)} />
+          <NumberComponent name={`${fieldName}_max`} field={field} value={rangeVal.max ?? ""} onChange={(val: any) => onChange("max", val === "" ? undefined : val)} />
+        </Box>
+      );
+    }
     const rangeVal = (value as { min?: string; max?: string }) || {};
     return (
       <Box sx={{ display: "flex", gap: 1 }}>
@@ -179,17 +190,35 @@ function renderFilterInput(
   }
 
   if (filterType === "date-range") {
+    const DateComponent = fieldComponents?.date;
+    if (DateComponent) {
+      const rangeVal = (value as { start?: string; end?: string }) || {};
+      const dateField = { ...field, type: 'date' as const };
+      return (
+        <Box sx={{ display: "flex", gap: 1 }}>
+          <DateComponent name={`${fieldName}_start`} field={dateField} value={rangeVal.start ?? ""} onChange={(val: string) => onChange("start", val || undefined)} />
+          <DateComponent name={`${fieldName}_end`} field={dateField} value={rangeVal.end ?? ""} onChange={(val: string) => onChange("end", val || undefined)} />
+        </Box>
+      );
+    }
     const rangeVal = (value as { start?: string; end?: string }) || {};
     return (
       <Box sx={{ display: "flex", gap: 1 }}>
-        <TextField type="datetime-local" placeholder="From" size="small" value={rangeVal.start ?? ""}
+        <TextField type="date" placeholder="From" size="small" value={rangeVal.start ?? ""}
           onChange={(e) => onChange("start", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
-        <TextField type="datetime-local" placeholder="To" size="small" value={rangeVal.end ?? ""}
+        <TextField type="date" placeholder="To" size="small" value={rangeVal.end ?? ""}
           onChange={(e) => onChange("end", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
       </Box>
     );
   }
 
+  const FormFieldComponent = fieldComponents?.FormField;
+  if (FormFieldComponent) {
+    return (
+      <FormFieldComponent name={fieldName} field={field} value={value} onChange={(val: any) => onChange("value", val)} />
+    );
+  }
+
   const selected = Array.isArray(value) ? value : [];
 
   return (
@@ -211,6 +240,7 @@ export interface FilterBarProps {
   onApply: (values: Record<string, any>) => void;
   onClear: () => void;
   components?: FilterBarComponents;
+  fieldComponents?: FieldComponents;
 }
 
 export default function FilterBar({
@@ -221,6 +251,7 @@ export default function FilterBar({
   onApply,
   onClear,
   components: filterComponents,
+  fieldComponents,
 }: FilterBarProps) {
   const [open, setOpen] = React.useState(false);
   const [draft, setDraft] = React.useState<Record<string, any>>(() => ({ ...appliedValues }));
@@ -298,7 +329,7 @@ export default function FilterBar({
                     {field.label}
                   </Box>
                   {renderFilterInput(fieldName, field, options, raw, (key, val) =>
-                    updateDraft(fieldName, key, val), filterComponents
+                    updateDraft(fieldName, key, val), filterComponents, fieldComponents
                   )}
                 </Box>
               );

react-openapi/components/ResourceView.tsx

@@ -184,6 +184,7 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon
               appliedValues={appliedFilters}
               onApply={setAppliedFilters}
               onClear={() => setAppliedFilters({})}
+              fieldComponents={components}
             />
           )}
           <EnhancedTable

react-openapi/types/overrides.ts

@@ -52,6 +52,8 @@ export type FieldComponents = Partial<Record<FieldType, FieldComponent>> & {
   relation?: FieldComponent;
   image?: FieldComponent;
   default?: FieldComponent;
+  FormField?: React.ComponentType<any>;
+  GenericForm?: React.ComponentType<any>;
 };
 
 export interface CellRendererProps {

src/ReportSnapshots.tsx

@@ -4,7 +4,6 @@ import {
   Container,
   Paper,
   Typography,
-  TextField,
   Button,
   IconButton,
   CircularProgress,
@@ -15,8 +14,6 @@ import {
   DialogContent,
   DialogContentText,
   DialogActions,
-  Switch,
-  FormControlLabel,
   Chip,
 } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -125,22 +122,17 @@ export default function ReportSnapshots() {
         </Typography>
 
         <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-          {ignoreSelfField && components?.FormField ? (
+          {ignoreSelfField && components?.FormField && (
             <components.FormField
               name="ignore_self"
               field={ignoreSelfField}
               value={ignoreSelf}
               onChange={(val: boolean) => setIgnoreSelf(val)}
             />
-          ) : (
-            <FormControlLabel
-              control={<Switch checked={ignoreSelf} onChange={(e) => setIgnoreSelf(e.target.checked)} />}
-              label="Ignore self-transfers"
-            />
           )}
 
           <Box sx={{ display: "flex", gap: 2 }}>
-            {startDateField && components?.datetime ? (
+            {startDateField && components?.datetime && (
               <Box sx={{ flex: 1 }}>
                 <components.datetime
                   name="start_date"
@@ -149,18 +141,8 @@ export default function ReportSnapshots() {
                   onChange={(val: string) => setStartDate(val)}
                 />
               </Box>
-            ) : (
-              <TextField
-                label="Start Date"
-                type="datetime-local"
-                value={startDate}
-                onChange={(e) => setStartDate(e.target.value)}
-                size="small"
-                InputLabelProps={{ shrink: true }}
-                sx={{ flex: 1 }}
-              />
             )}
-            {endDateField && components?.datetime ? (
+            {endDateField && components?.datetime && (
               <Box sx={{ flex: 1 }}>
                 <components.datetime
                   name="end_date"
@@ -169,21 +151,11 @@ export default function ReportSnapshots() {
                   onChange={(val: string) => setEndDate(val)}
                 />
               </Box>
-            ) : (
-              <TextField
-                label="End Date"
-                type="datetime-local"
-                value={endDate}
-                onChange={(e) => setEndDate(e.target.value)}
-                size="small"
-                InputLabelProps={{ shrink: true }}
-                sx={{ flex: 1 }}
-              />
             )}
           </Box>
 
           <Box sx={{ display: "flex", gap: 2 }}>
-            {minAmountField && components?.FormField ? (
+            {minAmountField && components?.FormField && (
               <Box sx={{ flex: 1 }}>
                 <components.FormField
                   name="min_amount"
@@ -192,17 +164,8 @@ export default function ReportSnapshots() {
                   onChange={(val: string) => setMinAmount(val)}
                 />
               </Box>
-            ) : (
-              <TextField
-                label="Min Amount"
-                type="number"
-                value={minAmount}
-                onChange={(e) => setMinAmount(e.target.value)}
-                size="small"
-                sx={{ flex: 1 }}
-              />
             )}
-            {maxAmountField && components?.FormField ? (
+            {maxAmountField && components?.FormField && (
               <Box sx={{ flex: 1 }}>
                 <components.FormField
                   name="max_amount"
@@ -211,15 +174,6 @@ export default function ReportSnapshots() {
                   onChange={(val: string) => setMaxAmount(val)}
                 />
               </Box>
-            ) : (
-              <TextField
-                label="Max Amount"
-                type="number"
-                value={maxAmount}
-                onChange={(e) => setMaxAmount(e.target.value)}
-                size="small"
-                sx={{ flex: 1 }}
-              />
             )}
           </Box>
 

src/openapi-config.ts

@@ -4,7 +4,7 @@ export const configuration: Record<string, ResourceOverride> = {
   expenses: {
     filterOptions: {
       mode: "client",
-      fields: ["account", "payee", "tags", "occurred_at", "amount"],
+      fields: ["account", "payee.name", "tags", "occurred_at", "amount"],
     },
     fields: {
       payee: {
@@ -57,12 +57,12 @@ export const configuration: Record<string, ResourceOverride> = {
       format: {
         path: 'source.format',
       },
-      account: {
+      // account: {
-        refers: 'accounts',
+      //   refers: 'accounts',
-      },
+      // },
-      tags: {
+      // tags: {
-        refers: 'tags',
+      //   refers: 'tags',
-      },
+      // },
     },
   },
   accounts: {