fetch requests and reports routes

src/Dashboard.tsx

@@ -23,6 +23,18 @@ import {
   useReport,
   prepareReport,
 } from "./features/report";
+import { useResourceByName } from "../react-openapi";
+
+function formatSnapshotDate(iso: string) {
+  const d = new Date(iso);
+  return d.toLocaleString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
 
 export default function Dashboard() {
   const [state, setState] = React.useState<DashboardState>({
@@ -42,7 +54,28 @@ export default function Dashboard() {
   const [loadedPayees, setLoadedPayees] = React.useState<string[]>([]);
   const [loadedTags, setLoadedTags] = React.useState<string[]>([]);
 
+  const [selectedSnapshotId, setSelectedSnapshotId] = React.useState<string | null>(null);
+
+  const { data: snapshotsData } = useResourceByName("reports").useList();
+  const snapshotOptions = React.useMemo(() => {
+    const options: { label: string; value: string | null }[] = [
+      { label: "Latest (auto)", value: null },
+    ];
+    if (snapshotsData?.data) {
+      for (const snap of snapshotsData.data) {
+        options.push({
+          label: `Snapshot from ${formatSnapshotDate(snap.created_at)}`,
+          value: snap.snapshot_id,
+        });
+      }
+    }
+    return options;
+  }, [snapshotsData]);
+
+  const selectedSnapshotOption = snapshotOptions.find((o) => o.value === selectedSnapshotId) ?? snapshotOptions[0];
+
   const report = useReport({
+    snapshot_id: selectedSnapshotId ?? undefined,
     periods: ["daily", "weekly", "monthly", "all"],
     flow: state.flow,
     payee: appliedPayees.length > 0 ? appliedPayees : undefined,
@@ -265,6 +298,22 @@ export default function Dashboard() {
               sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
             />
           </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', minWidth: { sm: 220 } }}>
+            <Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
+              Snapshot
+            </Box>
+            <Autocomplete
+              options={snapshotOptions}
+              value={selectedSnapshotOption}
+              onChange={(_, option) => setSelectedSnapshotId(option?.value ?? null)}
+              getOptionLabel={(o) => o.label}
+              isOptionEqualToValue={(o, v) => o.value === v.value}
+              renderInput={(params) => <TextField {...params} placeholder="Select snapshot..." />}
+              sx={{ '& .MuiOutlinedInput-root': { height: 40, py: 0 } }}
+              size="small"
+            />
+          </Box>
+
           <Button
             variant="contained"
             size="large"