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.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>
           );