Add Crossover Report

packages/desktop-client/src/components/reports/Overview.tsx

@@ -25,6 +25,7 @@ import { NON_DRAGGABLE_AREA_CLASS_NAME } from './constants';
 import { LoadingIndicator } from './LoadingIndicator';
 import { CalendarCard } from './reports/CalendarCard';
 import { CashFlowCard } from './reports/CashFlowCard';
+import { CrossoverCard } from './reports/CrossoverCard';
 import { CustomReportListCards } from './reports/CustomReportListCards';
 import { FormulaCard } from './reports/FormulaCard';
 import { MarkdownCard } from './reports/MarkdownCard';
@@ -63,6 +64,7 @@ export function Overview() {
   const dispatch = useDispatch();
   const [_firstDayOfWeekIdx] = useSyncedPref('firstDayOfWeekIdx');
   const firstDayOfWeekIdx = _firstDayOfWeekIdx || '0';
+  const crossoverReportEnabled = useFeatureFlag('crossoverReport');
 
   const formulaMode = useFeatureFlag('formulaMode');
 
@@ -420,6 +422,14 @@ export function Overview() {
                               name: 'net-worth-card' as const,
                               text: t('Net worth graph'),
                             },
+                            ...(crossoverReportEnabled
+                              ? [
+                                  {
+                                    name: 'crossover-card' as const,
+                                    text: t('Crossover point'),
+                                  },
+                                ]
+                              : []),
                             {
                               name: 'spending-card' as const,
                               text: t('Spending analysis'),
@@ -564,6 +574,16 @@ export function Overview() {
                       onMetaChange={newMeta => onMetaChange(item, newMeta)}
                       onRemove={() => onRemoveWidget(item.i)}
                     />
+                  ) : item.type === 'crossover-card' &&
+                    crossoverReportEnabled ? (
+                    <CrossoverCard
+                      widgetId={item.i}
+                      isEditing={isEditing}
+                      accounts={accounts}
+                      meta={item.meta}
+                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                      onRemove={() => onRemoveWidget(item.i)}
+                    />
                   ) : item.type === 'cash-flow-card' ? (
                     <CashFlowCard
                       widgetId={item.i}

packages/desktop-client/src/components/reports/ReportRouter.tsx

@@ -4,18 +4,29 @@ import { Route, Routes } from 'react-router';
 import { Overview } from './Overview';
 import { Calendar } from './reports/Calendar';
 import { CashFlow } from './reports/CashFlow';
+import { Crossover } from './reports/Crossover';
 import { CustomReport } from './reports/CustomReport';
 import { Formula } from './reports/Formula';
 import { NetWorth } from './reports/NetWorth';
 import { Spending } from './reports/Spending';
 import { Summary } from './reports/Summary';
 
+import { useFeatureFlag } from '@desktop-client/hooks/useFeatureFlag';
+
 export function ReportRouter() {
+  const crossoverReportEnabled = useFeatureFlag('crossoverReport');
+
   return (
     <Routes>
       <Route path="/" element={<Overview />} />
       <Route path="/net-worth" element={<NetWorth />} />
       <Route path="/net-worth/:id" element={<NetWorth />} />
+      {crossoverReportEnabled && (
+        <>
+          <Route path="/crossover" element={<Crossover />} />
+          <Route path="/crossover/:id" element={<Crossover />} />
+        </>
+      )}
       <Route path="/cash-flow" element={<CashFlow />} />
       <Route path="/cash-flow/:id" element={<CashFlow />} />
       <Route path="/custom" element={<CustomReport />} />

packages/desktop-client/src/components/reports/graphs/CrossoverGraph.tsx

@@ -0,0 +1,195 @@
+import { Trans, useTranslation } from 'react-i18next';
+
+import { type CSSProperties } from '@actual-app/components/styles';
+import { theme } from '@actual-app/components/theme';
+import { View } from '@actual-app/components/view';
+import { css } from '@emotion/css';
+import {
+  LineChart,
+  Line,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  ReferenceLine,
+} from 'recharts';
+
+import { Container } from '@desktop-client/components/reports/Container';
+import { useFormat } from '@desktop-client/hooks/useFormat';
+import { usePrivacyMode } from '@desktop-client/hooks/usePrivacyMode';
+
+type CrossoverGraphProps = {
+  style?: CSSProperties;
+  graphData: {
+    data: Array<{
+      x: string;
+      investmentIncome: number;
+      expenses: number;
+      isProjection?: boolean;
+    }>;
+    start: string;
+    end: string;
+    crossoverXLabel?: string | null;
+  };
+  compact?: boolean;
+  showTooltip?: boolean;
+};
+
+export function CrossoverGraph({
+  style,
+  graphData,
+  compact = false,
+  showTooltip = true,
+}: CrossoverGraphProps) {
+  const { t } = useTranslation();
+  const privacyMode = usePrivacyMode();
+  const format = useFormat();
+
+  const tickFormatter = (tick: number) => {
+    if (privacyMode) {
+      return '...';
+    }
+    return `${format(Math.round(tick), 'financial-no-decimals')}`;
+  };
+
+  type PayloadItem = {
+    payload: {
+      x: string;
+      investmentIncome: number | string;
+      expenses: number | string;
+      isProjection?: boolean;
+    };
+  };
+
+  type CustomTooltipProps = {
+    active?: boolean;
+    payload?: PayloadItem[];
+  };
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
+    if (active && payload && payload.length) {
+      return (
+        <div
+          className={css({
+            zIndex: 1000,
+            pointerEvents: 'none',
+            borderRadius: 2,
+            boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
+            backgroundColor: theme.menuBackground,
+            color: theme.menuItemText,
+            padding: 10,
+          })}
+        >
+          <div>
+            <div style={{ marginBottom: 10 }}>
+              <strong>{payload[0].payload.x}</strong>
+              {payload[0].payload.isProjection ? (
+                <span style={{ marginLeft: 8, opacity: 0.7 }}>
+                  {t('(projected)')}
+                </span>
+              ) : null}
+            </div>
+            <div style={{ lineHeight: 1.5 }}>
+              <View
+                className={css({
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                })}
+              >
+                <div>
+                  <Trans>Monthly investment income:</Trans>
+                </div>
+                <div>
+                  {format(payload[0].payload.investmentIncome, 'financial')}
+                </div>
+              </View>
+              <View
+                className={css({
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                })}
+              >
+                <div>
+                  <Trans>Monthly expenses:</Trans>
+                </div>
+                <div>{format(payload[0].payload.expenses, 'financial')}</div>
+              </View>
+            </div>
+          </div>
+        </div>
+      );
+    }
+  };
+
+  return (
+    <Container
+      style={{
+        ...style,
+        ...(compact && { height: 'auto' }),
+      }}
+    >
+      {(width, height) => (
+        <ResponsiveContainer>
+          <div style={{ ...(!compact && { marginTop: '15px' }) }}>
+            <LineChart
+              width={width}
+              height={height}
+              data={graphData.data}
+              margin={{
+                top: 0,
+                right: 0,
+                left: compact ? 0 : 20,
+                bottom: compact ? 0 : 10,
+              }}
+            >
+              {!compact && <CartesianGrid strokeDasharray="3 3" />}
+              <XAxis
+                dataKey="x"
+                hide={compact}
+                tick={{ fill: theme.pageText }}
+                tickLine={{ stroke: theme.pageText }}
+              />
+              <YAxis
+                hide={compact}
+                tickFormatter={tickFormatter}
+                tick={{ fill: theme.pageText }}
+                tickLine={{ stroke: theme.pageText }}
+              />
+              {showTooltip && (
+                <Tooltip
+                  content={<CustomTooltip />}
+                  isAnimationActive={false}
+                />
+              )}
+              {graphData.crossoverXLabel && (
+                <ReferenceLine
+                  x={graphData.crossoverXLabel}
+                  stroke={theme.noticeText}
+                  strokeDasharray="4 4"
+                />
+              )}
+              <Line
+                type="monotone"
+                dataKey="investmentIncome"
+                dot={false}
+                stroke={theme.reportsBlue}
+                strokeWidth={2}
+                animationDuration={0}
+              />
+              <Line
+                type="monotone"
+                dataKey="expenses"
+                dot={false}
+                stroke={theme.reportsRed}
+                strokeWidth={2}
+                animationDuration={0}
+              />
+            </LineChart>
+          </div>
+        </ResponsiveContainer>
+      )}
+    </Container>
+  );
+}