Mobile report budget summary + reuse desktop components

actualbudget · Nov 17, 2023 · 3b62e67 · 3b62e67
1 parent 05c21a1
commit 3b62e67
Show file tree

Hide file tree

Showing 28 changed files with 1,220 additions and 1,084 deletions.
diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
@@ -9,7 +9,6 @@ import useCategories from '../hooks/useCategories';
 import useSyncServerStatus from '../hooks/useSyncServerStatus';
 import { type CommonModalProps } from '../types/modals';
 
-import BudgetSummary from './modals/BudgetSummary';
 import CloseAccount from './modals/CloseAccount';
 import ConfirmCategoryDelete from './modals/ConfirmCategoryDelete';
 import CreateAccount from './modals/CreateAccount';
@@ -25,6 +24,8 @@ import LoadBackup from './modals/LoadBackup';
 import ManageRulesModal from './modals/ManageRulesModal';
 import MergeUnusedPayees from './modals/MergeUnusedPayees';
 import PlaidExternalMsg from './modals/PlaidExternalMsg';
+import ReportBudgetSummary from './modals/ReportBudgetSummary';
+import RolloverBudgetSummary from './modals/RolloverBudgetSummary';
 import SelectLinkedAccounts from './modals/SelectLinkedAccounts';
 import SingleInput from './modals/SingleInput';
 import SwitchBudgetType from './modals/SwitchBudgetType';
@@ -248,9 +249,19 @@ export default function Modals() {
             />
           );
 
-        case 'budget-summary':
+        case 'rollover-budget-summary':
           return (
-            <BudgetSummary
+            <RolloverBudgetSummary
+              key={name}
+              modalProps={modalProps}
+              month={options.month}
+              onBudgetAction={options.onBudgetAction}
+            />
+          );
+
+        case 'report-budget-summary':
+          return (
+            <ReportBudgetSummary
               key={name}
               modalProps={modalProps}
               month={options.month}

diff --git a/packages/desktop-client/src/components/budget/BudgetSummaries.tsx b/packages/desktop-client/src/components/budget/BudgetSummaries.tsx
@@ -15,8 +15,8 @@ import useResizeObserver from '../../hooks/useResizeObserver';
 import View from '../common/View';
 
 import { MonthsContext } from './MonthsContext';
-import { type BudgetSummary as ReportBudgetSummary } from './report/BudgetSummary';
-import { type BudgetSummary as RolloverBudgetSummary } from './rollover/BudgetSummary';
+import type ReportBudgetSummary from './report/budgetsummary/BudgetSummary';
+import type RolloverBudgetSummary from './rollover/budgetsummary/BudgetSummary';
 
 type BudgetSummariesProps = {
   SummaryComponent: typeof ReportBudgetSummary | typeof RolloverBudgetSummary;

diff --git a/packages/desktop-client/src/components/budget/MobileBudget.js b/packages/desktop-client/src/components/budget/MobileBudget.js
@@ -85,8 +85,17 @@ class Budget extends Component {
     this.cleanup?.();
   }
 
-  onShowBudgetDetails = () => {
-    this.props.pushModal('budget-summary', { month: this.state.currentMonth });
+  onShowBudgetSummary = () => {
+    if (this.props.budgetType === 'report') {
+      this.props.pushModal('report-budget-summary', {
+        month: this.state.currentMonth,
+      });
+    } else {
+      this.props.pushModal('rollover-budget-summary', {
+        month: this.state.currentMonth,
+        onBudgetAction: this.props.applyBudgetAction,
+      });
+    }
   };
 
   onBudgetAction = type => {
@@ -375,7 +384,7 @@ class Budget extends Component {
             //   }
             editMode={editMode}
             onEditMode={flag => this.setState({ editMode: flag })}
-            onShowBudgetDetails={this.onShowBudgetDetails}
+            onShowBudgetSummary={this.onShowBudgetSummary}
             onPrevMonth={this.onPrevMonth}
             onNextMonth={this.onNextMonth}
             onSaveGroup={this.onSaveGroup}

diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -70,7 +70,7 @@ function ToBudget({ toBudget, onClick }) {
   );
 }
 
-function Saved({ projected }) {
+function Saved({ projected, onClick }) {
   let binding = projected
     ? reportBudget.totalBudgetedSaved
     : reportBudget.totalSaved;
@@ -79,21 +79,32 @@ function Saved({ projected }) {
   let isNegative = saved < 0;
 
   return (
-    <View
+    <Button
+      type="bare"
       style={{
         flexDirection: 'column',
         alignItems: 'flex-start',
       }}
+      onClick={onClick}
     >
       {projected ? (
         <Label
           title="PROJECTED SAVINGS"
-          style={{ color: theme.formInputText, textAlign: 'left', fontSize: 9 }}
+          style={{
+            ...styles.underlinedText,
+            color: theme.formInputText,
+            textAlign: 'left',
+            fontSize: 9,
+          }}
         />
       ) : (
         <Label
           title={isNegative ? 'OVERSPENT' : 'SAVED'}
-          style={{ color: theme.formInputText, textAlign: 'left' }}
+          style={{
+            ...styles.underlinedText,
+            color: theme.formInputText,
+            textAlign: 'left',
+          }}
         />
       )}
 
@@ -110,7 +121,7 @@ function Saved({ projected }) {
             : theme.formInputText,
         }}
       />
-    </View>
+    </Button>
   );
 }
 
@@ -1615,7 +1626,7 @@ export function BudgetTable(props) {
     onEditMode,
     onReorderCategory,
     onReorderGroup,
-    onShowBudgetDetails,
+    onShowBudgetSummary,
     // onOpenActionSheet,
     onBudgetAction,
     onRefresh,
@@ -1733,11 +1744,14 @@ export function BudgetTable(props) {
           }}
         >
           {type === 'report' ? (
-            <Saved projected={month >= currentMonth} />
+            <Saved
+              projected={month >= currentMonth}
+              onClick={onShowBudgetSummary}
+            />
           ) : (
             <ToBudget
               toBudget={rolloverBudget.toBudget}
-              onClick={onShowBudgetDetails}
+              onClick={onShowBudgetSummary}
             />
           )}
           <View style={{ flex: 1 }} />

diff --git a/packages/desktop-client/src/components/budget/index.tsx b/packages/desktop-client/src/components/budget/index.tsx
@@ -39,9 +39,9 @@ import View from '../common/View';
 import { TitlebarContext, type TitlebarContextValue } from '../Titlebar';
 
 import DynamicBudgetTable from './DynamicBudgetTable';
-import * as report from './report/components';
+import * as report from './report/ReportComponents';
 import { ReportProvider } from './report/ReportContext';
-import * as rollover from './rollover/rollover-components';
+import * as rollover from './rollover/RolloverComponents';
 import { RolloverContext } from './rollover/RolloverContext';
 import { prewarmAllMonths, prewarmMonth, switchBudgetType } from './util';