removed unused pages
This commit is contained in:
@@ -1,303 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Container,
|
|
||||||
Paper,
|
|
||||||
Typography,
|
|
||||||
Button,
|
|
||||||
IconButton,
|
|
||||||
CircularProgress,
|
|
||||||
Alert,
|
|
||||||
Snackbar,
|
|
||||||
Dialog,
|
|
||||||
DialogTitle,
|
|
||||||
DialogContent,
|
|
||||||
DialogContentText,
|
|
||||||
DialogActions,
|
|
||||||
Chip,
|
|
||||||
TextField,
|
|
||||||
} from "@mui/material";
|
|
||||||
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 { useResource } from "../react-openapi";
|
|
||||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
||||||
|
|
||||||
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);
|
|
||||||
return d.toLocaleString();
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ReportSnapshots() {
|
|
||||||
const [ignoreSelf, setIgnoreSelf] = React.useState(true);
|
|
||||||
const [startDate, setStartDate] = React.useState("");
|
|
||||||
const [endDate, setEndDate] = React.useState("");
|
|
||||||
const [minAmount, setMinAmount] = React.useState("");
|
|
||||||
const [maxAmount, setMaxAmount] = React.useState("");
|
|
||||||
const [snackbar, setSnackbar] = React.useState<{ message: string; severity: "success" | "error" } | null>(null);
|
|
||||||
const [deleteTarget, setDeleteTarget] = React.useState<ReportSnapshot | null>(null);
|
|
||||||
const [createdSnapshotId, setCreatedSnapshotId] = React.useState<string | null>(null);
|
|
||||||
|
|
||||||
const { list, create, remove } = useResource("reports");
|
|
||||||
|
|
||||||
const { data: listData, isLoading, isFetching, refetch } = useQuery({
|
|
||||||
queryKey: ["reports", "list"],
|
|
||||||
queryFn: () => list(),
|
|
||||||
});
|
|
||||||
const createMutation = useMutation({
|
|
||||||
mutationFn: (data: any) => create(data),
|
|
||||||
});
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const deleteMutation = useMutation({
|
|
||||||
mutationFn: (id: string) => remove(id),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["reports", "list"] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const snapshots: ReportSnapshot[] = listData?.items ?? [];
|
|
||||||
|
|
||||||
const handleCreate = async () => {
|
|
||||||
try {
|
|
||||||
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);
|
|
||||||
setSnackbar({ message: `Snapshot created: ${snapshotId}`, severity: "success" });
|
|
||||||
} else {
|
|
||||||
setSnackbar({ message: "Snapshot created", severity: "success" });
|
|
||||||
}
|
|
||||||
resetForm();
|
|
||||||
} catch (err: any) {
|
|
||||||
setSnackbar({ message: err?.response?.data?.detail || "Failed to create snapshot", severity: "error" });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetForm = () => {
|
|
||||||
setIgnoreSelf(true);
|
|
||||||
setStartDate("");
|
|
||||||
setEndDate("");
|
|
||||||
setMinAmount("");
|
|
||||||
setMaxAmount("");
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async () => {
|
|
||||||
if (!deleteTarget) return;
|
|
||||||
try {
|
|
||||||
await deleteMutation.mutateAsync(deleteTarget.snapshot_id);
|
|
||||||
setSnackbar({ message: "Snapshot deleted", severity: "success" });
|
|
||||||
} catch {
|
|
||||||
setSnackbar({ message: "Failed to delete snapshot", severity: "error" });
|
|
||||||
}
|
|
||||||
setDeleteTarget(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Container sx={{ mt: 4, mb: 4 }}>
|
|
||||||
<Typography variant="h5" fontWeight="bold" gutterBottom>
|
|
||||||
Report Snapshots
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Paper sx={{ p: 3, mb: 4, borderRadius: 4 }} variant="outlined">
|
|
||||||
<Typography variant="subtitle1" fontWeight={600} gutterBottom>
|
|
||||||
Generate New Snapshot
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
|
||||||
<Box sx={{ display: "flex", gap: 2 }}>
|
|
||||||
<Box sx={{ flex: 1 }}>
|
|
||||||
<TextField
|
|
||||||
label="Start Date"
|
|
||||||
type="date"
|
|
||||||
value={startDate}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setStartDate(e.target.value)}
|
|
||||||
size="small"
|
|
||||||
InputLabelProps={{ shrink: true }}
|
|
||||||
inputProps={{ max: new Date().toISOString().split("T")[0] }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ flex: 1 }}>
|
|
||||||
<TextField
|
|
||||||
label="End Date"
|
|
||||||
type="date"
|
|
||||||
value={endDate}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEndDate(e.target.value)}
|
|
||||||
size="small"
|
|
||||||
InputLabelProps={{ shrink: true }}
|
|
||||||
inputProps={{ max: new Date().toISOString().split("T")[0] }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ display: "flex", gap: 2 }}>
|
|
||||||
<Box sx={{ flex: 1 }}>
|
|
||||||
<TextField
|
|
||||||
label="Min Amount"
|
|
||||||
type="number"
|
|
||||||
value={minAmount}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMinAmount(e.target.value)}
|
|
||||||
size="small"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ flex: 1 }}>
|
|
||||||
<TextField
|
|
||||||
label="Max Amount"
|
|
||||||
type="number"
|
|
||||||
value={maxAmount}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMaxAmount(e.target.value)}
|
|
||||||
size="small"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
startIcon={<AddCircleIcon />}
|
|
||||||
onClick={handleCreate}
|
|
||||||
disabled={createMutation.isPending}
|
|
||||||
>
|
|
||||||
{createMutation.isPending ? "Generating..." : "Generate Snapshot"}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{createdSnapshotId && (
|
|
||||||
<Alert severity="success" onClose={() => setCreatedSnapshotId(null)}>
|
|
||||||
Snapshot created: <strong>{createdSnapshotId}</strong>. Use it in the Dashboard snapshot selector.
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
</Paper>
|
|
||||||
|
|
||||||
<Paper sx={{ borderRadius: 4 }} variant="outlined">
|
|
||||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, pb: 0 }}>
|
|
||||||
<Typography variant="subtitle1" fontWeight={600}>
|
|
||||||
Existing Snapshots
|
|
||||||
</Typography>
|
|
||||||
<IconButton onClick={() => refetch()} disabled={isFetching}>
|
|
||||||
<RefreshIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{isLoading ? (
|
|
||||||
<Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
|
|
||||||
<CircularProgress />
|
|
||||||
</Box>
|
|
||||||
) : snapshots.length === 0 ? (
|
|
||||||
<Box sx={{ p: 4, textAlign: "center", color: "text.secondary" }}>
|
|
||||||
No snapshots yet
|
|
||||||
</Box>
|
|
||||||
) : (
|
|
||||||
<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) => (
|
|
||||||
<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
|
|
||||||
size="small"
|
|
||||||
onClick={() => {
|
|
||||||
navigator.clipboard.writeText(snap.snapshot_id);
|
|
||||||
setSnackbar({ message: "Copied!", severity: "success" });
|
|
||||||
}}
|
|
||||||
sx={{ opacity: 0.5, '&:hover': { opacity: 1 } }}
|
|
||||||
>
|
|
||||||
<ContentCopyIcon sx={{ fontSize: 14 }} />
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
</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" />}
|
|
||||||
{snap.query.ignore_self && <Chip label="ignore_self" size="small" variant="outlined" />}
|
|
||||||
{snap.query.start_date && <Chip label="start" size="small" variant="outlined" />}
|
|
||||||
{snap.query.end_date && <Chip label="end" size="small" variant="outlined" />}
|
|
||||||
</Box>
|
|
||||||
) : (
|
|
||||||
<Typography variant="body2" color="text.secondary">\u2014</Typography>
|
|
||||||
)}
|
|
||||||
</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>
|
|
||||||
))}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</Paper>
|
|
||||||
|
|
||||||
<Snackbar
|
|
||||||
open={!!snackbar}
|
|
||||||
autoHideDuration={4000}
|
|
||||||
onClose={() => setSnackbar(null)}
|
|
||||||
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
|
|
||||||
>
|
|
||||||
{snackbar ? <Alert severity={snackbar.severity} onClose={() => setSnackbar(null)}>{snackbar.message}</Alert> : undefined}
|
|
||||||
</Snackbar>
|
|
||||||
|
|
||||||
<Dialog open={!!deleteTarget} onClose={() => setDeleteTarget(null)}>
|
|
||||||
<DialogTitle>Delete Snapshot?</DialogTitle>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogContentText>
|
|
||||||
This will permanently delete the report snapshot.
|
|
||||||
</DialogContentText>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={() => setDeleteTarget(null)}>Cancel</Button>
|
|
||||||
<Button onClick={handleDelete} color="error" disabled={deleteMutation.isPending}>
|
|
||||||
{deleteMutation.isPending ? "Deleting..." : "Delete"}
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
</Container>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user