diff --git a/react-openapi/index.ts b/react-openapi/index.ts index 0dd032d..5852ac9 100644 --- a/react-openapi/index.ts +++ b/react-openapi/index.ts @@ -17,5 +17,6 @@ export { getApi } from "./src/hooks/useApi"; export { useItemSse } from "./src/hooks/useItemSse"; export { sanitizePayload } from "./src/utils/sanitize-payload"; export type { FkResolver } from "./src/utils/sanitize-payload"; +export { formatDate, formatDateTime } from "./src/utils/datetime"; export type { FilterComponentProps } from "./src/context/useResource"; export type { SpecConfiguration, ResourceConfig, FieldConfig, FKFieldConfig, ResourceRelationship, ProfileOperation, ProfileComponents, AuthConfig } from "./src/types"; diff --git a/react-openapi/src/components/fields/ListCellRenderer.tsx b/react-openapi/src/components/fields/ListCellRenderer.tsx index 598dd16..9d6e235 100644 --- a/react-openapi/src/components/fields/ListCellRenderer.tsx +++ b/react-openapi/src/components/fields/ListCellRenderer.tsx @@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom"; import { Box, Typography, Chip, Avatar, Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid } from "@mui/material"; import type { FieldConfig } from "../../types"; import { applyDisplayFormat, resolveMediaUrl } from "./utils"; +import { formatByFieldFormat } from "../../utils/datetime"; import { InlineRefField } from "./renderers/InlineRefField"; import { CurrencyField } from "./renderers/CurrencyField"; import { extractFields } from "../../transformers/field-config"; @@ -57,7 +58,7 @@ export function ListCellRenderer({ field, value, displayFormat, basePath }: List {sf.label} - {fv == null ? "—" : typeof fv === "object" ? (sf.inlineDisplayFormat ? applyDisplayFormat(fv, sf.inlineDisplayFormat) : JSON.stringify(fv)) : String(fv)} + {fv == null ? "—" : typeof fv === "object" ? (sf.inlineDisplayFormat ? applyDisplayFormat(fv, sf.inlineDisplayFormat) : JSON.stringify(fv)) : formatByFieldFormat(fv, sf.format)} @@ -153,5 +154,5 @@ export function ListCellRenderer({ field, value, displayFormat, basePath }: List return {applyDisplayFormat(value, displayFormat ?? "")}; } - return {String(value)}; + return {formatByFieldFormat(value, field.format)}; } diff --git a/react-openapi/src/components/fields/renderers/DateField.tsx b/react-openapi/src/components/fields/renderers/DateField.tsx index 8540006..5f335e7 100644 --- a/react-openapi/src/components/fields/renderers/DateField.tsx +++ b/react-openapi/src/components/fields/renderers/DateField.tsx @@ -10,11 +10,26 @@ interface Props { } export function DateField({ field, value, onChange, error }: Props) { - const inputType = field.format === "date" ? "date" : "datetime-local"; + // `x-edit-as: date` renders a date-time field as a plain date picker; + // the picked day is submitted as midnight so the stored type is intact. + const editAsDate = field.format === "date" || field.editAs === "date"; - const normalized = field.format === "date-time" && typeof value === "string" - ? value.replace(/\.\d+Z$/, "").replace(/Z$/, "") - : value; + const inputType = editAsDate ? "date" : "datetime-local"; + + const normalized = (() => { + if (field.format !== "date-time" || typeof value !== "string") return value; + if (editAsDate) return value.slice(0, 10); + return value.replace(/\.\d+Z$/, "").replace(/Z$/, ""); + })(); + + const handleChange = (e: React.ChangeEvent) => { + const v = e.target.value; + if (editAsDate && field.format === "date-time" && /^\d{4}-\d{2}-\d{2}$/.test(v)) { + onChange(`${v}T00:00:00`); + } else { + onChange(v); + } + }; return ( onChange(e.target.value)} + onChange={handleChange} error={!!error} helperText={error || field.description || undefined} placeholder={field.description || undefined} diff --git a/react-openapi/src/components/fields/renderers/InlineRefField.tsx b/react-openapi/src/components/fields/renderers/InlineRefField.tsx index 5a4adc6..d28a77e 100644 --- a/react-openapi/src/components/fields/renderers/InlineRefField.tsx +++ b/react-openapi/src/components/fields/renderers/InlineRefField.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { Box, Typography, Chip, Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid } from "@mui/material"; import type { FieldConfig } from "../../../types"; import { applyDisplayFormat } from "../utils"; +import { formatByFieldFormat } from "../../../utils/datetime"; import { extractFields } from "../../../transformers/field-config"; import { useAppContext } from "../../../context/AppContext"; @@ -68,7 +69,7 @@ export function InlineRefField({ field, value }: Props) { {sf.label} - {value?.[sf.name] == null ? "—" : typeof value[sf.name] === "object" ? (sf.inlineDisplayFormat ? applyDisplayFormat(value[sf.name], sf.inlineDisplayFormat) : JSON.stringify(value[sf.name])) : String(value[sf.name])} + {value?.[sf.name] == null ? "—" : typeof value[sf.name] === "object" ? (sf.inlineDisplayFormat ? applyDisplayFormat(value[sf.name], sf.inlineDisplayFormat) : JSON.stringify(value[sf.name])) : formatByFieldFormat(value[sf.name], sf.format)} ))} diff --git a/react-openapi/src/components/fields/utils.ts b/react-openapi/src/components/fields/utils.ts index 66407a5..a6ed871 100644 --- a/react-openapi/src/components/fields/utils.ts +++ b/react-openapi/src/components/fields/utils.ts @@ -1,3 +1,5 @@ +import { formatIsoLike } from "../../utils/datetime"; + function getNested(obj: any, path: string): any { return path.split(".").reduce((o, k) => o?.[k], obj); } @@ -6,7 +8,7 @@ export function applyDisplayFormat(item: any, format: string): string { if (!item || typeof item !== "object") return String(item ?? ""); return format.replace(/\{([\w.]+)\}/g, (_, key) => { const val = getNested(item, key); - return val != null ? String(val) : ""; + return val != null ? formatIsoLike(val) : ""; }); } diff --git a/react-openapi/src/transformers/field-config.ts b/react-openapi/src/transformers/field-config.ts index cbdb793..526e8b0 100644 --- a/react-openapi/src/transformers/field-config.ts +++ b/react-openapi/src/transformers/field-config.ts @@ -64,6 +64,7 @@ function extractOneOfOptions(schema: any, schemas: Record, discrimi description: prop["x-description"] ?? "", type: prop.type ?? "string", format: prop.format, + editAs: prop["x-edit-as"], order: prop["x-order"] ?? Infinity, hidden: prop["x-hidden"] ?? {}, filterable: prop["x-filterable"] ?? false, @@ -130,6 +131,7 @@ export function extractFields(schemaName: string, schema: any, schemas: Record "24 Aug 2026"; non-ISO values pass through. */ +export function formatDate(value: any): string { + const d = parseIso(value); + return d ? DATE_FMT.format(d) : fallback(value); +} + +/** "2026-08-24T09:07:25" -> "24 Aug 2026, 09:07"; non-ISO values pass through. */ +export function formatDateTime(value: any): string { + const d = parseIso(value); + return d ? DATETIME_FMT.format(d) : fallback(value); +} + +/** Route by OpenAPI field format ("date" | "date-time"); other formats render plainly. */ +export function formatByFieldFormat(value: any, format?: string): string { + if (format === "date") return formatDate(value); + if (format === "date-time") return formatDateTime(value); + return fallback(value); +} + +/** + * Metadata-free variant for display-format templates ({key} interpolation): + * reformats a scalar only when it happens to be ISO-shaped. + */ +export function formatIsoLike(value: any): string { + if (typeof value === "string") { + if (ISO_DATETIME.test(value)) return formatDateTime(value); + if (ISO_DATE.test(value)) return formatDate(value); + } + return fallback(value); +} diff --git a/src/FetchRequest/FetchRequestCreate.tsx b/src/FetchRequest/FetchRequestCreate.tsx index 5b19e7b..2a944b6 100644 --- a/src/FetchRequest/FetchRequestCreate.tsx +++ b/src/FetchRequest/FetchRequestCreate.tsx @@ -6,6 +6,7 @@ import { import { useNavigate } from "react-router-dom"; import ReceiptLongIcon from "@mui/icons-material/ReceiptLong"; import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; +import { alpha } from "@mui/material/styles"; import { useAppContext, useResource, ListCellRenderer, FormFieldRenderer, getApi, applyDisplayFormat } from "../../react-openapi"; import type { FieldConfig } from "../../react-openapi"; import { PageHeader } from "../ui/PageHeader"; @@ -13,7 +14,34 @@ import { EmptyState } from "../ui/EmptyState"; import { formatApiError } from "../features/fetch-requests"; import { useToast } from "../ui/Toast"; -const CREATE_FIELDS = ["account", "bank", "pipeline", "start_date", "end_date", "source"]; +const CREATE_FIELDS = ["account", "bank", "pipeline", "trust_fallback", "start_date", "end_date", "source"]; + +// Two-pane form partition — explicit names, spec order is unreliable. +// Grid stretch keeps both panes equal-height regardless of which source +// variant is active (email adds From/Subject under the type select). +const SOURCE_PANE_FIELDS = ["account", "bank"]; +const POLICY_PANE_FIELDS = ["start_date", "end_date", "pipeline", "trust_fallback"]; + +const glassSx = (theme: any) => ({ + backgroundColor: alpha(theme.palette.background.default, 0.72), + backdropFilter: "blur(8px)", + borderColor: "divider", + boxShadow: 1, +}); + +function GlassPanel({ title, children }: { title: string; children: React.ReactNode }) { + return ( + ({ p: 3, borderRadius: 3, ...glassSx(theme) })}> + + {title} + + {children} + + ); +} function FetchRequestList() { const navigate = useNavigate(); @@ -88,31 +116,52 @@ function FetchRequestList() { ({ p: 2, cursor: "pointer", - borderRadius: 2, - transition: "border-color 160ms ease, box-shadow 160ms ease", - "&:hover": { borderColor: "primary.main", boxShadow: 1 }, - }} + borderRadius: 3, + transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease", + "&:hover": { + borderColor: "primary.main", + boxShadow: 1, + backgroundColor: alpha(theme.palette.background.default, 0.9), + }, + ...glassSx(theme), + })} onClick={() => navigate(`/fetch-requests/${row.id}`)} > - - {columns.map((col) => ( - - - {col.label} - - r.name === col.fk!.resource)?.displayFormat ?? displayFormat) - : displayFormat} - /> - - ))} - + + + {columns + .filter((col) => col.name !== "created_at") + .map((col) => ( + + + {col.label} + + r.name === col.fk!.resource)?.displayFormat ?? displayFormat) + : displayFormat} + /> + + ))} + + {(() => { + const dateCol = columns.find((col) => col.name === "created_at"); + if (!dateCol) return null; + return ( + + + {dateCol.label} + + + + ); + })()} + + names.map((name) => { + const field = formFields.find((f) => f.name === name); + if (!field) return null; + return ( + handleChange(field.name, val)} + fkOptions={fkOptions[field.name]} + /> + ); + }); + return ( - - + {/* Decorative gradient backdrop — gives the frosted panes something to blur. */} + + [ + `radial-gradient(640px circle at 12% 8%, ${alpha(theme.palette.primary.main, 0.14)}, transparent 70%)`, + `radial-gradient(900px circle at 88% 92%, ${alpha(theme.palette.primary.main, 0.09)}, transparent 70%)`, + `radial-gradient(520px circle at 78% 22%, ${alpha(theme.palette.primary.light, 0.07)}, transparent 70%)`, + ].join(", "), + }} /> + + - - - New Fetch Request - - - Choose an account, pipeline, and a file or email source to kick off an import. - + + + New Fetch Request + + + Choose an account, pipeline, and a file or email source to kick off an import. + - - {formFields.map((field) => ( - handleChange(field.name, val)} - fkOptions={fkOptions[field.name]} - /> - ))} + + + {renderPaneFields(SOURCE_PANE_FIELDS)} + {renderPaneFields(["source"])} + + {renderPaneFields(POLICY_PANE_FIELDS)} + + + + + + + + {result && ( + setResult(null)}> + {result.message} + + )} - - - - - - {result && ( - setResult(null)}> - {result.message} - - )} - - - - Recent Fetch Requests - - - + + Recent Fetch Requests + + + + ); } diff --git a/src/Reports/ReportList.tsx b/src/Reports/ReportList.tsx index ad264cf..44751ca 100644 --- a/src/Reports/ReportList.tsx +++ b/src/Reports/ReportList.tsx @@ -51,7 +51,7 @@ export function ReportList({ reports, loading, fields, selectedId, onView, onReg "&:hover": { borderColor: "primary.light" }, }} > - + {report.name || report.id} @@ -81,14 +81,15 @@ export function ReportList({ reports, loading, fields, selectedId, onView, onReg {amounts} )} - {fields && ( - - - - )} + {fields && ( + + + + )} +