src/Dashboard.tsx

@@ -161,6 +161,7 @@ export default function Dashboard() {
         config={configuration}
         data={data}
         isFetching={report.isFetching}
+        onFlowChange={handleFlowChange}
       />
     </Box>
   );

src/components/Dashboard/Dashboard.models.ts

@@ -54,6 +54,7 @@ export interface DashboardProps {
   config: DashboardConfig;
   data: ReportData;
   isFetching: boolean;
+  onFlowChange?: (state: DashboardState) => void;
 }
 
 

src/components/Dashboard/Dashboard.tsx

@@ -8,12 +8,13 @@ import {
   Button
 } from "@mui/material";
 import { useTheme, alpha } from "@mui/material/styles";
-import { DashboardProps, DashboardState, DashboardStateSetters } from "./Dashboard.models";
+import { DashboardProps, DashboardState, DashboardStateSetters, DashboardFlow } from "./Dashboard.models";
 
 export default function Dashboard({
   config,
   data,
   isFetching,
+  onFlowChange,
 }: DashboardProps) {
   const theme = useTheme();
   const themeMode = theme.palette.mode;
@@ -27,10 +28,35 @@ export default function Dashboard({
   });
 
   const toggleFlow = () => {
-    setState(prev => ({
+    setState(prev => {
+      const nextFlow: DashboardFlow = prev.flow === "outflows" ? "inflows" : "outflows";
+      const nextState: DashboardState = {
         ...prev,
-      flow: prev.flow === "outflows" ? "inflows" : "outflows",
+        flow: nextFlow,
-    }));
+        selectedGroupKey: null,
+        selectedPeriodId: null,
+      };
+      onFlowChange?.(nextState);
+      return nextState;
+    });
+  };
+
+  const handleFlowChange = (
+    _event: React.MouseEvent<HTMLElement>,
+    newFlow: DashboardFlow | null
+  ) => {
+    if (newFlow !== null && newFlow !== state.flow) {
+      setState(prev => {
+        const nextState: DashboardState = {
+          ...prev,
+          flow: newFlow,
+          selectedGroupKey: null,
+          selectedPeriodId: null,
+        };
+        onFlowChange?.(nextState);
+        return nextState;
+      });
+    }
   };
 
   const togglePeriodType = () => {
@@ -119,7 +145,7 @@ export default function Dashboard({
         <ToggleButtonGroup
           value={flow}
           exclusive
-          onChange={toggleFlow}
+          onChange={handleFlowChange}
           sx={{
             borderRadius: 3,
             overflow: "hidden",

src/components/LatestItems/LatestItems.props.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from "../Dashboard";
+import { LatestItem } from "./LatestItems.models";
+
+export interface LatestItemsProps extends ComponentProps {}
+
+export interface LatestItemsViewProps extends LatestItemsProps {
+  items: LatestItem[];
+  canExpand: boolean;
+  onExpand: () => void;
+}

src/components/ProgressCard/ProgressCard.models.ts

@@ -1,11 +0,0 @@
-export interface ProgressCardProps {
-  header: string;
-  summary?: string;
-  progressAmount: number;
-  totalAmount: number;
-  colorTheme?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
-  compact?: boolean;
-  selected?: boolean;
-  onClick?: () => void;
-  isFetching?: boolean;
-}

src/components/ProgressCard/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./ProgressCard";
+export { default } from "./ProgressCard.view";
-export * from "./ProgressCard.models";
+export * from "./ProgressCard.props";