diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx index 215a350..ffcf1e9 100644 --- a/src/Dashboard.tsx +++ b/src/Dashboard.tsx @@ -161,6 +161,7 @@ export default function Dashboard() { config={configuration} data={data} isFetching={report.isFetching} + onFlowChange={handleFlowChange} /> ); diff --git a/src/components/Dashboard/Dashboard.models.ts b/src/components/Dashboard/Dashboard.models.ts index 87fe839..5ec4cf3 100644 --- a/src/components/Dashboard/Dashboard.models.ts +++ b/src/components/Dashboard/Dashboard.models.ts @@ -54,6 +54,7 @@ export interface DashboardProps { config: DashboardConfig; data: ReportData; isFetching: boolean; + onFlowChange?: (state: DashboardState) => void; } diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx index 0c5ff56..8ca2035 100644 --- a/src/components/Dashboard/Dashboard.tsx +++ b/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 => ({ - ...prev, - flow: prev.flow === "outflows" ? "inflows" : "outflows", - })); + setState(prev => { + const nextFlow: DashboardFlow = prev.flow === "outflows" ? "inflows" : "outflows"; + const nextState: DashboardState = { + ...prev, + flow: nextFlow, + selectedGroupKey: null, + selectedPeriodId: null, + }; + onFlowChange?.(nextState); + return nextState; + }); + }; + + const handleFlowChange = ( + _event: React.MouseEvent, + 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({ void; +} diff --git a/src/components/ProgressCard/ProgressCard.models.ts b/src/components/ProgressCard/ProgressCard.models.ts deleted file mode 100644 index a4f91f3..0000000 --- a/src/components/ProgressCard/ProgressCard.models.ts +++ /dev/null @@ -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; -} diff --git a/src/components/ProgressCard/index.ts b/src/components/ProgressCard/index.ts index f242754..c2d6d76 100644 --- a/src/components/ProgressCard/index.ts +++ b/src/components/ProgressCard/index.ts @@ -1,2 +1,2 @@ -export { default } from "./ProgressCard"; -export * from "./ProgressCard.models"; +export { default } from "./ProgressCard.view"; +export * from "./ProgressCard.props";