feat(reports): render generate-report form from OpenAPI spec

Replace hand-written GenerateReportPanel inputs with a generic loop over
extractFields("ReportQuery") + FormFieldRenderer; submit via
useResource("reports").create with server-side validation only.

react-openapi additions (all additive):
- lift items.enum into FieldConfig.enumValues for array-of-enum props
- extract schema `default` into FieldConfig.defaultValue
- new MultiEnumField renderer dispatched for isArray && enumValues
- FKFieldConfig.value: bind option values to a target property instead
  of the primary key (account names); sanitize-payload skips resolveFk
  when set
- new useFkFieldOptions hook encapsulating FK option loading/prefetch
- export extractFields, useFkFieldOptions, MultiEnumField

Drop now-unused granularityOptions/groupDimOptions helpers.

react-openapi/index.ts

@@ -5,6 +5,10 @@ export { useAppContext } from "./src/context/AppContext";
 export { useResource } from "./src/context/useResource";
 export { ListCellRenderer, DetailFieldRenderer, applyDisplayFormat } from "./src/components/fields";
 export { FormFieldRenderer } from "./src/components/fields/FormFieldRenderer";
+export { MultiEnumField } from "./src/components/fields/renderers/MultiEnumField";
+export { extractFields } from "./src/transformers/field-config";
+export { useFkFieldOptions } from "./src/hooks/useFkFieldOptions";
+export type { FkOption } from "./src/hooks/useFkFieldOptions";
 export { CurrencyField, formatCurrency } from "./src/components/fields/renderers/CurrencyField";
 export { FkMultiSelectField } from "./src/components/fields/renderers/FkMultiSelectField";
 export { SseStreamView } from "./src/components/SseStreamView";

react-openapi/src/components/fields/FormFieldRenderer.tsx

@@ -6,6 +6,7 @@ import { NumberField } from "./renderers/NumberField";
 import { DateField } from "./renderers/DateField";
 import { BooleanField } from "./renderers/BooleanField";
 import { EnumField } from "./renderers/EnumField";
+import { MultiEnumField } from "./renderers/MultiEnumField";
 import { FkSelectField } from "./renderers/FkSelectField";
 import { FkMultiSelectField } from "./renderers/FkMultiSelectField";
 import { FileUploadField } from "./renderers/FileUploadField";
@@ -81,6 +82,17 @@ export function FormFieldRenderer({ field, value, onChange, error, fkOptions, fk
     );
   }
 
+  if (field.isArray && field.enumValues) {
+    return (
+      <MultiEnumField
+        field={field}
+        value={value}
+        onChange={onChange}
+        error={error}
+      />
+    );
+  }
+
   if (field.enumValues) {
     return (
       <EnumField

react-openapi/src/components/fields/index.ts

@@ -3,4 +3,5 @@ export { ListCellRenderer } from "./ListCellRenderer";
 export { DetailFieldRenderer } from "./DetailFieldRenderer";
 export { applyDisplayFormat } from "./utils";
 export { JsonField } from "./renderers/JsonField";
+export { MultiEnumField } from "./renderers/MultiEnumField";
 export { CurrencyField, formatCurrency } from "./renderers/CurrencyField";

react-openapi/src/components/fields/renderers/MultiEnumField.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Autocomplete, TextField, Chip, Box } from "@mui/material";
+import DoneIcon from "@mui/icons-material/Done";
+import type { FieldConfig } from "../../../types";
+
+interface Props {
+  field: FieldConfig;
+  value: any;
+  onChange: (value: any[]) => void;
+  error?: string;
+}
+
+export function MultiEnumField({ field, value, onChange, error }: Props) {
+  const selected: string[] = Array.isArray(value) ? value : [];
+
+  return (
+    <Autocomplete
+      multiple
+      disableCloseOnSelect
+      size="small"
+      options={field.enumValues ?? []}
+      value={selected}
+      onChange={(_, newVal) => onChange(newVal)}
+      renderOption={(props, option, { selected: isSelected }) => {
+        const { key, ...rest } = props as any;
+        return (
+          <li key={key} {...rest}>
+            {isSelected ? (
+              <DoneIcon sx={{ fontSize: 14, mr: 1, color: "primary.main" }} />
+            ) : (
+              <Box sx={{ width: 22, mr: 1 }} />
+            )}
+            {option}
+          </li>
+        );
+      }}
+      renderTags={(tagValue, getTagProps) =>
+        tagValue.map((tag, index) => {
+          const { key, ...tagProps } = getTagProps({ index });
+          return <Chip key={key} {...tagProps} label={tag} size="small" />;
+        })
+      }
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label={field.label}
+          placeholder={field.description || undefined}
+          error={!!error}
+          helperText={error || field.description || undefined}
+          size="small"
+        />
+      )}
+      sx={{
+        "& .MuiAutocomplete-popupIndicator, & .MuiAutocomplete-clearIndicator": { width: 20, height: 20, fontSize: 16 },
+      }}
+      disabled={field.readOnly}
+    />
+  );
+}

react-openapi/src/hooks/useFkFieldOptions.ts

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useState } from "react";
+import type { FieldConfig, FKFieldConfig } from "../types";
+import { useAppContext } from "../context/AppContext";
+import { getApi } from "./useApi";
+
+export interface FkOption {
+  value: any;
+  label: string;
+}
+
+function applyFormat(obj: any, format: string): string {
+  if (!obj || typeof obj !== "object") return String(obj ?? "");
+  return format.replace(/\{(\w+)\}/g, (_, key) => String(obj[key] ?? ""));
+}
+
+/**
+ * Loads select options for FK-annotated fields of a field set.
+ * Option values bind to `fk.value` when set (e.g. account names),
+ * otherwise to the target resource's primary key.
+ */
+export function useFkFieldOptions(fields: FieldConfig[]) {
+  const { resources } = useAppContext();
+  const [fkOptions, setFkOptions] = useState<Record<string, FkOption[]>>({});
+  const [fkLoading, setFkLoading] = useState<Record<string, boolean>>({});
+
+  const loadFkOptions = useCallback(
+    async (fieldName: string, fk: FKFieldConfig) => {
+      setFkLoading((prev) => ({ ...prev, [fieldName]: true }));
+      try {
+        const targetRes = resources.find((r) => r.name === fk.resource);
+        if (!targetRes) return;
+
+        const api = getApi();
+        const params: Record<string, any> = {};
+        if (targetRes.pagination) params.limit = 0;
+        const res = await api.get(targetRes.path, { params });
+
+        let items: any[];
+        if (targetRes.pagination) {
+          if (!res.data || typeof res.data !== "object" || !Array.isArray(res.data.items)) {
+            throw new Error(`Expected paginated response from ${targetRes.path}`);
+          }
+          items = res.data.items;
+        } else {
+          if (!Array.isArray(res.data)) {
+            throw new Error(`Expected array response from ${targetRes.path}`);
+          }
+          items = res.data;
+        }
+
+        const opts: FkOption[] = items.map((item: any) => ({
+          value: item[fk.value ?? targetRes.primaryKey],
+          label: applyFormat(item, targetRes.displayFormat),
+        }));
+        setFkOptions((prev) => ({ ...prev, [fieldName]: opts }));
+      } catch {
+        // leave options empty; the field renders without suggestions
+      } finally {
+        setFkLoading((prev) => ({ ...prev, [fieldName]: false }));
+      }
+    },
+    [resources]
+  );
+
+  useEffect(() => {
+    fields.forEach((f) => {
+      if (f.fk?.prefetch) loadFkOptions(f.name, f.fk);
+    });
+  }, [fields, loadFkOptions]);
+
+  const loadFkOnOpen = useCallback(
+    (fieldName: string) => {
+      const field = fields.find((f) => f.name === fieldName);
+      if (field?.fk && !field.fk.prefetch && !fkOptions[fieldName]) {
+        loadFkOptions(fieldName, field.fk);
+      }
+    },
+    [fields, fkOptions, loadFkOptions]
+  );
+
+  return { fkOptions, fkLoading, loadFkOnOpen };
+}

react-openapi/src/transformers/field-config.ts

@@ -136,7 +136,10 @@ export function extractFields(schemaName: string, schema: any, schemas: Record<s
         sortable: prop["x-sortable"] ?? false,
         readOnly: prop.readOnly ?? false,
         required: requiredFields.includes(name),
-        enumValues: prop.enum,
+        // Lift enum constraints from array items so arrays-of-enum can render
+        // as multi-selects (e.g. ReportQuery.granularities).
+        enumValues: prop.enum ?? (prop.type === "array" ? prop.items?.enum : undefined),
+        defaultValue: prop.default,
         fk: prop["x-fk"],
         uiType: prop["x-ui-type"],
         uploadUrl: prop["x-upload-url"],

react-openapi/src/types.ts

@@ -85,6 +85,8 @@ export interface ResourceConfig {
 export interface FKFieldConfig {
   resource: string;
   prefetch: boolean;
+  /** Target property used as the wire value (defaults to the target's primary key). */
+  value?: string;
 }
 
 export interface OneOfOption {
@@ -106,6 +108,8 @@ export interface FieldConfig {
   readOnly: boolean;
   required: boolean;
   enumValues?: string[];
+  /** Schema-level `default` used to seed create-form state. */
+  defaultValue?: any;
   fk?: FKFieldConfig;
   uiType?: string;
   uploadUrl?: string;

react-openapi/src/utils/sanitize-payload.ts

@@ -29,7 +29,9 @@ export async function sanitizePayload(
 
     const val = result[key];
 
-    if (field.fk) {
+    // FK fields whose wire value is a plain target property (fk.value, e.g.
+    // account names) are already in wire format — no id→object resolution.
+    if (field.fk && !field.fk.value) {
       if (val == null || val === "") {
         result[key] = null;
       } else if (resolveFk) {

src/Reports/GenerateReportPanel.tsx

@@ -1,131 +1,85 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   Box,
   Paper,
   Typography,
-  TextField,
   Button,
-  MenuItem,
-  Select,
-  FormControl,
-  InputLabel,
-  Autocomplete,
-  FormControlLabel,
-  Checkbox,
-  Chip,
+  Grid,
   Alert,
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
-import { useResource, useAppContext, applyDisplayFormat } from "../../react-openapi";
+import {
+  useResource,
+  useAppContext,
+  FormFieldRenderer,
+  extractFields,
+  useFkFieldOptions,
+} from "../../react-openapi";
+import type { FieldConfig } from "../../react-openapi";
 import { useToast } from "../ui/Toast";
-import { isDdmmyyyy } from "../common/utils/dates";
-import { apiErrorMessage, granularityOptions, groupDimOptions, FLOW_OPTIONS } from "./types";
+import { apiErrorMessage } from "./types";
 
 interface GenerateReportPanelProps {
   onGenerated: (report: any) => void;
 }
 
-const ALL_GRANULARITIES = ["weekly", "monthly", "quarterly"];
-
 export function GenerateReportPanel({ onGenerated }: GenerateReportPanelProps) {
-  const { schemas, resources } = useAppContext();
-  const { create } = useResource("reports");
-  const { list: listAccounts } = useResource("accounts");
+  const { schemas } = useAppContext();
+  const { create, loading: submitting } = useResource("reports");
   const { showToast } = useToast();
 
-  const [name, setName] = useState("");
-  const [granularities, setGranularities] = useState<string[]>(ALL_GRANULARITIES);
-  const [groupDims, setGroupDims] = useState<string[]>(["payee", "tag"]);
-  const [flow, setFlow] = useState("both");
-  const [accounts, setAccounts] = useState<string[]>([]);
-  const [ignoreSelf, setIgnoreSelf] = useState(true);
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
-  const [minAmount, setMinAmount] = useState("");
-  const [maxAmount, setMaxAmount] = useState("");
-  const [submitting, setSubmitting] = useState(false);
+  const [formData, setFormData] = useState<Record<string, any>>({});
   const [error, setError] = useState<string | null>(null);
-  const [accountOptions, setAccountOptions] = useState<string[]>([]);
-  const [dateErrors, setDateErrors] = useState<{ start?: string; end?: string }>({});
 
-  const granularityChoices = useMemo(() => {
-    const enums = granularityOptions(schemas);
-    return enums.length ? enums : ALL_GRANULARITIES;
+  const fields: FieldConfig[] = useMemo(() => {
+    const schema = schemas?.ReportQuery;
+    if (!schema) return [];
+    return extractFields("ReportQuery", schema, schemas).sort(
+      (a, b) => a.order - b.order || a.name.localeCompare(b.name)
+    );
   }, [schemas]);
-  const dimChoices = useMemo(() => groupDimOptions(schemas), [schemas]);
-  const accountsRes = resources.find((r) => r.name === "accounts");
-  const accountsFormat = accountsRes?.displayFormat ?? "{name}";
+
+  const { fkOptions, fkLoading, loadFkOnOpen } = useFkFieldOptions(fields);
 
   useEffect(() => {
-    let mounted = true;
-    listAccounts({ limit: 0 }).then((res) => {
-      if (!mounted) return;
-      const names = (res.items ?? [])
-        .map((it: any) => applyDisplayFormat(it, accountsFormat))
-        .filter((n: string) => n);
-      setAccountOptions([...new Set(names)].sort((a, b) => a.localeCompare(b)));
+    setFormData((prev) => {
+      const next = { ...prev };
+      let changed = false;
+      for (const f of fields) {
+        if (next[f.name] === undefined && f.defaultValue !== undefined) {
+          next[f.name] = Array.isArray(f.defaultValue) ? [...f.defaultValue] : f.defaultValue;
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
     });
-    return () => {
-      mounted = false;
-    };
-  }, [listAccounts, accountsFormat]);
+  }, [fields]);
 
-  const toggle = (list: string[], value: string, setter: (v: string[]) => void) =>
-    setter(list.includes(value) ? list.filter((v) => v !== value) : [...list, value]);
-
-  const validateDates = (): boolean => {
-    const errs: { start?: string; end?: string } = {};
-    if (startDate && !isDdmmyyyy(startDate)) errs.start = "Use DD-MM-YYYY";
-    if (endDate && !isDdmmyyyy(endDate)) errs.end = "Use DD-MM-YYYY";
-    setDateErrors(errs);
-    return Object.keys(errs).length === 0;
-  };
-
-  const parseAmount = (value: string): number | null => {
-    const trimmed = value.trim();
-    if (!trimmed) return null;
-    const n = Number(trimmed);
-    return Number.isFinite(n) ? n : null;
-  };
-
-  const handleSubmit = async () => {
-    if (!validateDates()) return;
+  const handleChange = useCallback((name: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
     setError(null);
-    const min = parseAmount(minAmount);
-    const max = parseAmount(maxAmount);
-    if (minAmount.trim() && min === null) {
-      setError("Min amount must be a number");
-      return;
+  }, []);
+
+  const buildPayload = (): Record<string, any> => {
+    const payload: Record<string, any> = {};
+    for (const f of fields) {
+      const v = formData[f.name];
+      if (v === undefined || v === null || v === "") continue;
+      if (Array.isArray(v) && v.length === 0) continue;
+      payload[f.name] = v;
     }
-    if (maxAmount.trim() && max === null) {
-      setError("Max amount must be a number");
-      return;
-    }
-    if (min !== null && max !== null && min > max) {
-      setError("Min amount cannot exceed max amount");
-      return;
-    }
-    const payload: Record<string, any> = {
-      name: name.trim(),
-      granularities,
-      group_dims: groupDims,
-      flow,
-      ignore_self: ignoreSelf,
-    };
-    if (accounts.length) payload.accounts = accounts;
-    if (startDate.trim()) payload.start_date = startDate.trim();
-    if (endDate.trim()) payload.end_date = endDate.trim();
-    if (min !== null) payload.min_amount = min;
-    if (max !== null) payload.max_amount = max;
-    setSubmitting(true);
+    return payload;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
     try {
-      const created = await create(payload);
+      const created = await create(buildPayload());
       showToast(`Generated snapshot ${created?.name ? `“${created.name}”` : ""}`.trim() || "Generated snapshot");
       onGenerated(created);
     } catch (e: any) {
       setError(apiErrorMessage(e));
-    } finally {
-      setSubmitting(false);
     }
   };
 
@@ -145,131 +99,28 @@ export function GenerateReportPanel({ onGenerated }: GenerateReportPanelProps) {
         </Alert>
       )}
 
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-        <TextField
-          size="small"
-          label="Name"
-          placeholder="e.g. Monthly spending"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          sx={{ maxWidth: 420 }}
-        />
-
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
-            Granularities
-          </Typography>
-          <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
-            {granularityChoices.map((g) => (
-              <Chip
-                key={g}
-                label={g}
-                clickable
-                color={granularities.includes(g) ? "primary" : "default"}
-                variant={granularities.includes(g) ? "filled" : "outlined"}
-                onClick={() => toggle(granularities, g, setGranularities)}
+      <Box component="form" onSubmit={handleSubmit}>
+        <Grid container spacing={2}>
+          {fields.map((field) => (
+            <Grid item xs={12} sm={6} md={4} key={field.name}>
+              <FormFieldRenderer
+                field={field}
+                value={formData[field.name]}
+                onChange={(val) => handleChange(field.name, val)}
+                fkOptions={fkOptions[field.name]}
+                fkLoading={fkLoading[field.name]}
+                onFkOpen={loadFkOnOpen}
               />
-            ))}
-          </Box>
+            </Grid>
+          ))}
+        </Grid>
+
+        <Box sx={{ mt: 2, display: "flex", justifyContent: "flex-end" }}>
+          <Button type="submit" variant="contained" startIcon={<AddIcon />} disabled={submitting}>
+            {submitting ? "Generating…" : "Generate"}
+          </Button>
         </Box>
-
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
-            Group dimensions
-          </Typography>
-          <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
-            {dimChoices.map((d) => (
-              <Chip
-                key={d}
-                label={d}
-                clickable
-                color={groupDims.includes(d) ? "primary" : "default"}
-                variant={groupDims.includes(d) ? "filled" : "outlined"}
-                onClick={() => toggle(groupDims, d, setGroupDims)}
-              />
-            ))}
-          </Box>
-        </Box>
-
-        <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", alignItems: "flex-start" }}>
-          <FormControl size="small" sx={{ width: 200 }}>
-            <InputLabel id="flow-label">Flow</InputLabel>
-            <Select labelId="flow-label" label="Flow" value={flow} onChange={(e) => setFlow(e.target.value)}>
-              {FLOW_OPTIONS.map((f) => (
-                <MenuItem key={f} value={f}>
-                  {f}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-          <FormControlLabel
-            control={<Checkbox checked={ignoreSelf} onChange={(e) => setIgnoreSelf(e.target.checked)} />}
-            label="Ignore self-transfers"
-            sx={{ mt: 0.25 }}
-          />
-        </Box>
-
-        <Autocomplete
-          multiple
-          freeSolo
-          size="small"
-          options={accountOptions}
-          value={accounts}
-          onChange={(_, newVal) => setAccounts(newVal)}
-          renderInput={(params) => (
-            <TextField {...params} label="Accounts" placeholder="Restrict to accounts (empty = all)" />
-          )}
-          sx={{ maxWidth: 420 }}
-        />
-
-        <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
-          <TextField
-            size="small"
-            label="Start date"
-            placeholder="DD-MM-YYYY"
-            value={startDate}
-            onChange={(e) => setStartDate(e.target.value)}
-            error={Boolean(dateErrors.start)}
-            helperText={dateErrors.start ?? "Inclusive start (empty = unbounded)"}
-            sx={{ width: 200 }}
-          />
-          <TextField
-            size="small"
-            label="End date"
-            placeholder="DD-MM-YYYY"
-            value={endDate}
-            onChange={(e) => setEndDate(e.target.value)}
-            error={Boolean(dateErrors.end)}
-            helperText={dateErrors.end ?? "Inclusive end (empty = unbounded)"}
-            sx={{ width: 200 }}
-          />
-        </Box>
-
-        <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
-          <TextField
-            size="small"
-            label="Min amount"
-            placeholder="e.g. 500"
-            value={minAmount}
-            onChange={(e) => setMinAmount(e.target.value)}
-            sx={{ width: 200 }}
-          />
-          <TextField
-            size="small"
-            label="Max amount"
-            placeholder="e.g. 5000"
-            value={maxAmount}
-            onChange={(e) => setMaxAmount(e.target.value)}
-            sx={{ width: 200 }}
-          />
-        </Box>
-      </Box>
-
-      <Box sx={{ mt: 2, display: "flex", justifyContent: "flex-end" }}>
-        <Button variant="contained" startIcon={<AddIcon />} onClick={handleSubmit} disabled={submitting}>
-          {submitting ? "Generating…" : "Generate"}
-        </Button>
       </Box>
     </Paper>
   );
-}
+}

src/Reports/types.ts

@@ -51,14 +51,6 @@ export function apiErrorMessage(e: any): string {
   return e?.message ?? "Request failed";
 }
 
-export function granularityOptions(schemas: Record<string, any>): string[] {
-  return schemas?.ReportQuery?.properties?.granularities?.items?.enum ?? [];
-}
-
-export function groupDimOptions(schemas: Record<string, any>): string[] {
-  return schemas?.ReportQuery?.properties?.group_dims?.items?.enum ?? ["payee", "tag"];
-}
-
 export const FLOW_OPTIONS = ["both", "inflows", "outflows"];
 
 export function metricLabels(schemas: Record<string, any>): MetricLabel[] {