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