items-by-period (#2)

Reviewed-on: #2
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

src/components/Dashboard/Dashboard.models.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import {
-  ReportData
+  ReportData,
+  GroupKey,
 } from "../../features/report";
 
 export type DashboardMode = "expense" | "income";
@@ -11,6 +12,7 @@ export interface DashboardState {
   mode: DashboardMode;
   periodType: DashboardPeriodType;
   selectedPeriodId: DashboardSelectedPeriodId;
+  selectedGroupKey: GroupKey | null;
   comparison: boolean;
 }
 

src/components/Dashboard/Dashboard.tsx

@@ -7,6 +7,7 @@ export default function Dashboard(props: DashboardProps) {
     mode: "expense",
     periodType: "rolling",
     selectedPeriodId: null,
+    selectedGroupKey: null,
     comparison: false,
   });
 
@@ -35,6 +36,10 @@ export default function Dashboard(props: DashboardProps) {
     setState(prev => ({ ...prev, selectedPeriodId }));
   };
 
+  const setSelectedGroupKey = (groupKey: typeof state.selectedGroupKey) => {
+    setState(prev => ({ ...prev, selectedGroupKey: groupKey }));
+  };
+
   return (
     <DashboardView
       {...props}
@@ -44,6 +49,7 @@ export default function Dashboard(props: DashboardProps) {
       togglePeriodType={togglePeriodType}
       toggleComparison={toggleComparison}
       setSelectedPeriodId={setSelectedPeriodId}
+      setSelectedGroupKey={setSelectedGroupKey}
     />
   );
 }

src/components/Dashboard/Dashboard.view.tsx

@@ -8,6 +8,7 @@ import {
   ToggleButtonGroup
 } from "@mui/material";
 import { useTheme, alpha } from "@mui/material/styles";
+import { GroupKey } from "../../features/report";
 import { DashboardProps, DashboardState } from "./Dashboard.models";
 
 interface ViewProps extends DashboardProps {
@@ -16,6 +17,7 @@ interface ViewProps extends DashboardProps {
   toggleMode: () => void;
   togglePeriodType: () => void;
   setSelectedPeriodId: (id: string | null) => void;
+  setSelectedGroupKey: (groupKey: GroupKey | null) => void;
   toggleComparison: () => void;
 }
 
@@ -28,10 +30,11 @@ export default function DashboardView({
   togglePeriodType,
   toggleComparison,
   setSelectedPeriodId,
+  setSelectedGroupKey,
 }: ViewProps) {
   const theme = useTheme();
   const themeMode = theme.palette.mode;
-  const { mode, periodType, comparison, selectedPeriodId } = state;
+  const { mode, periodType, comparison, selectedPeriodId, selectedGroupKey } = state;
 
   // Resolve colors with fallbacks
   const colors = React.useMemo(() => {
@@ -120,10 +123,12 @@ export default function DashboardView({
                 periodType={periodType}
                 comparison={comparison}
                 selectedPeriodId={selectedPeriodId}
+                selectedGroupKey={selectedGroupKey}
 
                 togglePeriodType={togglePeriodType}
                 toggleComparison={toggleComparison}
                 setSelectedPeriodId={setSelectedPeriodId}
+                setSelectedGroupKey={setSelectedGroupKey}
               />
             </Grid>
           );