diff --git a/src/FetchRequest/FetchRequestCreate.tsx b/src/FetchRequest/FetchRequestCreate.tsx
index b6d7154..c2aa37c 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";
@@ -15,6 +16,33 @@ import { useToast } from "../ui/Toast";
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();
const { list, remove, resource } = useResource("fetch-requests");
@@ -88,13 +116,18 @@ 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}`)}
>
@@ -207,59 +240,90 @@ export default function FetchRequestCreate() {
);
}
+ const renderPaneFields = (names: string[]) =>
+ 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
+
+
+
+
);
}