toggleComparison

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>