common fields
This commit is contained in:
@@ -6,12 +6,6 @@ import {
|
||||
Typography,
|
||||
TextField,
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
IconButton,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
@@ -29,12 +23,22 @@ import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import AddCircleIcon from "@mui/icons-material/AddCircle";
|
||||
import RefreshIcon from "@mui/icons-material/Refresh";
|
||||
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
|
||||
import {
|
||||
useReportSnapshotsList,
|
||||
useCreateSnapshot,
|
||||
useDeleteSnapshot,
|
||||
} from "./features/report-snapshots";
|
||||
import type { ReportSnapshot } from "./features/report-snapshots";
|
||||
import { useResourceByName, useConfig, defaultFieldComponents } from "../react-openapi";
|
||||
import type { ResourceField } from "../react-openapi";
|
||||
|
||||
interface ReportSnapshotQuery {
|
||||
accounts?: string[];
|
||||
ignore_self?: boolean;
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
}
|
||||
|
||||
interface ReportSnapshot {
|
||||
id: string;
|
||||
snapshot_id: string;
|
||||
created_at: string;
|
||||
query?: ReportSnapshotQuery;
|
||||
}
|
||||
|
||||
function formatDate(iso: string) {
|
||||
const d = new Date(iso);
|
||||
@@ -51,21 +55,32 @@ export default function ReportSnapshots() {
|
||||
const [deleteTarget, setDeleteTarget] = React.useState<ReportSnapshot | null>(null);
|
||||
const [createdSnapshotId, setCreatedSnapshotId] = React.useState<string | null>(null);
|
||||
|
||||
const { data: listData, isLoading, isFetching, refetch } = useReportSnapshotsList();
|
||||
const createMutation = useCreateSnapshot();
|
||||
const deleteMutation = useDeleteSnapshot();
|
||||
const { useList, useCreate, useDelete, components } = useResourceByName("reports", { fieldComponents: defaultFieldComponents });
|
||||
|
||||
const snapshots = listData?.data ?? [];
|
||||
const { data: listData, isLoading, isFetching, refetch } = useList();
|
||||
const createMutation = useCreate();
|
||||
const deleteMutation = useDelete();
|
||||
|
||||
const config = useConfig();
|
||||
const reportsRes = config?.resources.find((r: any) => r.name === "reports");
|
||||
const ignoreSelfField: ResourceField | undefined = reportsRes?.fields?.ignore_self;
|
||||
const startDateField: ResourceField | undefined = reportsRes?.fields?.start_date;
|
||||
const endDateField: ResourceField | undefined = reportsRes?.fields?.end_date;
|
||||
const minAmountField: ResourceField | undefined = reportsRes?.fields?.min_amount;
|
||||
const maxAmountField: ResourceField | undefined = reportsRes?.fields?.max_amount;
|
||||
|
||||
const snapshots: ReportSnapshot[] = listData?.data ?? [];
|
||||
|
||||
const handleCreate = async () => {
|
||||
try {
|
||||
const result = await createMutation.mutateAsync({
|
||||
ignore_self: ignoreSelf || null,
|
||||
start_date: startDate ? new Date(startDate).toISOString() : null,
|
||||
end_date: endDate ? new Date(endDate).toISOString() : null,
|
||||
min_amount: minAmount ? parseFloat(minAmount) : null,
|
||||
max_amount: maxAmount ? parseFloat(maxAmount) : null,
|
||||
});
|
||||
const payload: Record<string, any> = {};
|
||||
if (ignoreSelf) payload.ignore_self = true;
|
||||
if (startDate) payload.start_date = new Date(startDate).toISOString();
|
||||
if (endDate) payload.end_date = new Date(endDate).toISOString();
|
||||
if (minAmount) payload.min_amount = parseFloat(minAmount);
|
||||
if (maxAmount) payload.max_amount = parseFloat(maxAmount);
|
||||
|
||||
const result = await createMutation.mutateAsync(payload);
|
||||
const snapshotId = (result as any)?.snapshot_id;
|
||||
if (snapshotId) {
|
||||
setCreatedSnapshotId(snapshotId);
|
||||
@@ -80,7 +95,7 @@ export default function ReportSnapshots() {
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setIgnoreSelf(false);
|
||||
setIgnoreSelf(true);
|
||||
setStartDate("");
|
||||
setEndDate("");
|
||||
setMinAmount("");
|
||||
@@ -110,49 +125,102 @@ export default function ReportSnapshots() {
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
<FormControlLabel
|
||||
control={<Switch checked={ignoreSelf} onChange={(e) => setIgnoreSelf(e.target.checked)} />}
|
||||
label="Ignore self-transfers"
|
||||
/>
|
||||
{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 }}>
|
||||
<TextField
|
||||
label="Start Date"
|
||||
type="datetime-local"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
size="small"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<TextField
|
||||
label="End Date"
|
||||
type="datetime-local"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
size="small"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
{startDateField && components?.DateField ? (
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<components.DateField
|
||||
name="start_date"
|
||||
field={startDateField}
|
||||
value={startDate}
|
||||
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?.DateField ? (
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<components.DateField
|
||||
name="end_date"
|
||||
field={endDateField}
|
||||
value={endDate}
|
||||
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 }}>
|
||||
<TextField
|
||||
label="Min Amount"
|
||||
type="number"
|
||||
value={minAmount}
|
||||
onChange={(e) => setMinAmount(e.target.value)}
|
||||
size="small"
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<TextField
|
||||
label="Max Amount"
|
||||
type="number"
|
||||
value={maxAmount}
|
||||
onChange={(e) => setMaxAmount(e.target.value)}
|
||||
size="small"
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
{minAmountField && components?.FormField ? (
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<components.FormField
|
||||
name="min_amount"
|
||||
field={minAmountField}
|
||||
value={minAmount}
|
||||
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 ? (
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<components.FormField
|
||||
name="max_amount"
|
||||
field={maxAmountField}
|
||||
value={maxAmount}
|
||||
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>
|
||||
|
||||
<Button
|
||||
@@ -191,20 +259,29 @@ export default function ReportSnapshots() {
|
||||
No snapshots yet
|
||||
</Box>
|
||||
) : (
|
||||
<TableContainer>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Snapshot ID</TableCell>
|
||||
<TableCell>Created</TableCell>
|
||||
<TableCell>Query</TableCell>
|
||||
<TableCell align="right">Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<Box sx={{ overflowX: "auto" }}>
|
||||
<Box component="table" sx={{ width: "100%", borderCollapse: "collapse" }}>
|
||||
<Box component="thead">
|
||||
<Box component="tr" sx={{ borderBottom: 1, borderColor: "divider" }}>
|
||||
{["Snapshot ID", "Created", "Query", "Actions"].map((h) => (
|
||||
<Box
|
||||
key={h}
|
||||
component="th"
|
||||
sx={{ px: 2, py: 1.5, textAlign: h === "Actions" ? "right" : "left", fontWeight: 600, fontSize: "0.8rem", color: "text.secondary", whiteSpace: "nowrap" }}
|
||||
>
|
||||
{h}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box component="tbody">
|
||||
{snapshots.map((snap: ReportSnapshot) => (
|
||||
<TableRow key={snap.id}>
|
||||
<TableCell sx={{ fontFamily: "monospace", fontSize: "0.8rem" }}>
|
||||
<Box
|
||||
key={snap.id}
|
||||
component="tr"
|
||||
sx={{ borderBottom: 1, borderColor: "divider", "&:last-child": { borderBottom: 0 }, "&:hover": { bgcolor: "action.hover" } }}
|
||||
>
|
||||
<Box component="td" sx={{ px: 2, py: 1.5, fontFamily: "monospace", fontSize: "0.8rem" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
|
||||
{snap.snapshot_id}
|
||||
<IconButton
|
||||
@@ -218,9 +295,11 @@ export default function ReportSnapshots() {
|
||||
<ContentCopyIcon sx={{ fontSize: 14 }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>{formatDate(snap.created_at)}</TableCell>
|
||||
<TableCell>
|
||||
</Box>
|
||||
<Box component="td" sx={{ px: 2, py: 1.5, fontSize: "0.875rem" }}>
|
||||
{formatDate(snap.created_at)}
|
||||
</Box>
|
||||
<Box component="td" sx={{ px: 2, py: 1.5 }}>
|
||||
{snap.query ? (
|
||||
<Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
|
||||
{snap.query.accounts && <Chip label={`${snap.query.accounts.length} account(s)`} size="small" variant="outlined" />}
|
||||
@@ -229,19 +308,21 @@ export default function ReportSnapshots() {
|
||||
{snap.query.end_date && <Chip label="end" size="small" variant="outlined" />}
|
||||
</Box>
|
||||
) : (
|
||||
<Typography variant="body2" color="text.secondary">—</Typography>
|
||||
<Typography variant="body2" color="text.secondary">\u2014</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton size="small" onClick={() => setDeleteTarget(snap)}>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</Box>
|
||||
<Box component="td" sx={{ px: 2, py: 1.5 }}>
|
||||
<Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
|
||||
<IconButton size="small" onClick={() => setDeleteTarget(snap)}>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user