src/components/Dashboard/Dashboard.models.ts

@@ -16,7 +16,7 @@ export interface DashboardSection {
   title?: string;
   summary?: string;
   component: React.ComponentType<any>;
-  dataKey?: string;
+  dataKey: string;
   settings?: Record<string, any>;
   isList?: boolean;
   style?: {
@@ -49,4 +49,5 @@ export interface DashboardProps {
   toggleMode: () => void;
   togglePeriodType: () => void;
   setSelectedPeriodId: (id: string | null) => void;
+  toggleComparison: () => void;
 }

src/components/Dashboard/Dashboard.tsx

@@ -24,6 +24,13 @@ export default function Dashboard(props: DashboardProps) {
     }));
   };
 
+  const toggleComparison = () => {
+    setState(prev => ({
+      ...prev,
+      comparison: !prev.comparison,
+    }));
+  };
+
   const setSelectedPeriodId = (selectedPeriodId: typeof state.selectedPeriodId) => {
     setState(prev => ({ ...prev, selectedPeriodId }));
   };
@@ -35,6 +42,7 @@ export default function Dashboard(props: DashboardProps) {
       setState={setState}
       toggleMode={toggleMode}
       togglePeriodType={togglePeriodType}
+      toggleComparison={toggleComparison}
       setSelectedPeriodId={setSelectedPeriodId}
     />
   );

src/components/Dashboard/Dashboard.view.tsx

@@ -22,11 +22,12 @@ export default function DashboardView({
   setState,
   toggleMode,
   togglePeriodType,
+  toggleComparison,
   setSelectedPeriodId,
 }: ViewProps) {
   const theme = useTheme();
   const themeMode = theme.palette.mode;
-  const { mode, periodType, selectedPeriodId, comparison } = state;
+  const { mode, periodType, comparison, selectedPeriodId } = state;
 
   // Resolve colors with fallbacks
   const colors = React.useMemo(() => {
@@ -117,7 +118,19 @@ export default function DashboardView({
                           header={item.payeeName || item.name}
                           progressAmount={item.amount}
                           totalAmount={data.totalAmount}
-                          colorTheme={mode === "expense" ? "error" : "success"}
+                          accentColor={colors.primary}
+                          colorScheme={colors}
+
+                          // State management
+                          mode={mode}
+
+                          periodType={periodType}
+                          comparison={comparison}
+                          selectedPeriodId={selectedPeriodId}
+
+                          togglePeriodType={togglePeriodType}
+                          toggleComparison={toggleComparison}
+                          setSelectedPeriodId={setSelectedPeriodId}
                         />
                       </Grid>
                     ))}
@@ -128,16 +141,21 @@ export default function DashboardView({
                   {...section.settings}
                   header={section.title}
                   summary={section.summary}
-                  data={section.dataKey ? data[section.dataKey] : data.chartData}
+                  data={data[mode][section.dataKey]}
                   title={section.title}
                   accentColor={colors.primary}
                   colorScheme={colors}
+
+                  // State management
+                  mode={mode}
+
                   periodType={periodType}
-                  onPeriodTypeChange={(p: any) => setState(prev => ({ ...prev, periodType: p }))}
                   comparison={comparison}
-                  setComparison={(c: any) => setState(prev => ({ ...prev, comparison: c }))}
                   selectedPeriodId={selectedPeriodId}
-                  onSelectPeriodId={setSelectedPeriodId}
+
+                  togglePeriodType={togglePeriodType}
+                  toggleComparison={toggleComparison}
+                  setSelectedPeriodId={setSelectedPeriodId}
                 />
               )}
             </Grid>