ui fixes for snapshot report

src/Dashboard.tsx

@@ -11,13 +11,21 @@ import {
 } from "@mui/material";
 
 import ConfigurableDashboard from "./components/Dashboard";
+import { DashboardState } from "./components/Dashboard/Dashboard.models";
 import { configuration } from "./dashboard-config";
 import {
   useReport,
   prepareReport,
 } from "./features/report";
 
+/** Map the internal UI mode to the API flow param */
+function modeToFlow(mode: "expense" | "income"): "outflows" | "inflows" {
+  return mode === "expense" ? "outflows" : "inflows";
+}
+
 export default function Dashboard() {
+  const [mode, setMode] = React.useState<"expense" | "income">("expense");
+
   const [appliedPayees, setAppliedPayees] = React.useState<string[]>([]);
   const [appliedTags, setAppliedTags] = React.useState<string[]>([]);
 
@@ -28,10 +36,8 @@ export default function Dashboard() {
   const [loadedTags, setLoadedTags] = React.useState<string[]>([]);
 
   const report = useReport({
-    periods: ["weekly", "monthly", "full"],
-    rolling: true,
-    include_transactions: true,
-    group_by: ["tags"],
+    periods: ["weekly", "monthly", "all"],
+    flow: modeToFlow(mode),
     payee: appliedPayees.length > 0 ? appliedPayees : undefined,
     tags: appliedTags.length > 0 ? appliedTags : undefined,
   });
@@ -43,10 +49,7 @@ export default function Dashboard() {
         report.data.data.buckets.forEach((b: any) => {
           Object.values(b.periods).forEach((periodArray: any) => {
             periodArray?.forEach((p: any) => {
-              p.expenses?.transactions?.forEach((t: any) => {
-                if (t.payee?.name) pSet.add(t.payee.name);
-              });
-              p.incomes?.transactions?.forEach((t: any) => {
+              p.metric?.transactions?.forEach((t: any) => {
                 if (t.payee?.name) pSet.add(t.payee.name);
               });
             });
@@ -60,10 +63,7 @@ export default function Dashboard() {
         report.data.data.buckets.forEach((b: any) => {
           Object.values(b.periods).forEach((periodArray: any) => {
             periodArray?.forEach((p: any) => {
-              p.expenses?.transactions?.forEach((t: any) => {
-                t.tags?.forEach((tag: any) => tSet.add(tag.name || tag));
-              });
-              p.incomes?.transactions?.forEach((t: any) => {
+              p.metric?.transactions?.forEach((t: any) => {
                 t.tags?.forEach((tag: any) => tSet.add(tag.name || tag));
               });
             });
@@ -77,6 +77,10 @@ export default function Dashboard() {
   const isLoading = report.isLoading;
   const error = report.error;
 
+  /** Callback for the ConfigurableDashboard's mode toggle */
+  const handleModeChange = React.useCallback((newState: DashboardState) => {
+    setMode(newState.mode);
+  }, []);
 
   if (isLoading && !report.data) {
     return (
@@ -152,7 +156,7 @@ export default function Dashboard() {
               setAppliedTags(tagsInput);
             }}
             disabled={isLoading}
-            sx={{ height: 40, borderRadius: 2 }} // Changed from 56 to 40 to match minHeight of inputs
+            sx={{ height: 40, borderRadius: 2 }}
           >
             Apply
           </Button>
@@ -161,6 +165,7 @@ export default function Dashboard() {
       <ConfigurableDashboard
         config={configuration}
         data={data}
+        onModeChange={handleModeChange}
       />
     </Box>
   );