removed expense and income vs outflow and inflow

src/components/Dashboard/Dashboard.view.tsx

@@ -14,7 +14,7 @@ import { DashboardProps, DashboardState } from "./Dashboard.models";
 interface ViewProps extends DashboardProps {
   state: DashboardState;
   setState: React.Dispatch<React.SetStateAction<DashboardState>>;
-  toggleMode: (event: React.MouseEvent<HTMLElement>, newMode: "expense" | "income" | null) => void;
+  toggleFlow: (event: React.MouseEvent<HTMLElement>, newFlow: "outflows" | "inflows" | null) => void;
   togglePeriodType: () => void;
   setSelectedPeriodId: (id: string | null) => void;
   setSelectedGroupKey: (groupKey: GroupKey | null) => void;
@@ -26,7 +26,7 @@ export default function DashboardView({
   data,
   state,
   setState,
-  toggleMode,
+  toggleFlow,
   togglePeriodType,
   toggleComparison,
   setSelectedPeriodId,
@@ -34,11 +34,11 @@ export default function DashboardView({
 }: ViewProps) {
   const theme = useTheme();
   const themeMode = theme.palette.mode;
-  const { mode, periodType, comparison, selectedPeriodId, selectedGroupKey } = state;
+  const { flow, periodType, comparison, selectedPeriodId, selectedGroupKey } = state;
 
   // Resolve colors with fallbacks
   const colors = React.useMemo(() => {
-    const palette = config.style?.palette?.[mode];
+    const palette = config.style?.palette?.[flow];
     const modeColors = palette ? palette[themeMode] : null;
 
     if (modeColors) {
@@ -50,13 +50,13 @@ export default function DashboardView({
     }
 
     // Fallback to standard theme colors
-    const themeColor = mode === 'expense' ? theme.palette.error : theme.palette.success;
+    const themeColor = flow === 'outflows' ? theme.palette.error : theme.palette.success;
     return {
       primary: themeColor.main,
       light: alpha(themeColor.main, themeMode === 'light' ? 0.08 : 0.15),
       text: themeColor.main
     };
-  }, [config.style?.palette, mode, themeMode, theme.palette]);
+  }, [config.style?.palette, flow, themeMode, theme.palette]);
 
   return (
     <Container
@@ -71,9 +71,9 @@ export default function DashboardView({
     >
       <Box sx={{ display: "flex", justifyContent: "center", mb: 3 }}>
         <ToggleButtonGroup
-          value={mode}
+          value={flow}
           exclusive
-          onChange={toggleMode}
+          onChange={toggleFlow}
           sx={{
             borderRadius: 3,
             overflow: "hidden",
@@ -89,8 +89,8 @@ export default function DashboardView({
             },
           }}
         >
-          <ToggleButton value="expense">Expenses</ToggleButton>
-          <ToggleButton value="income">Income</ToggleButton>
+          <ToggleButton value="outflows">Outflows</ToggleButton>
+          <ToggleButton value="inflows">Inflows</ToggleButton>
         </ToggleButtonGroup>
       </Box>
 
@@ -118,7 +118,7 @@ export default function DashboardView({
                 colorScheme={colors}
 
                 // State management
-                mode={mode}
+                flow={flow}
 
                 periodType={periodType}
                 comparison={comparison}