Merge branch 'master' into fix-2575

packages/desktop-client/e2e/page-models/mobile-account-page.js

@@ -5,7 +5,7 @@ export class MobileAccountPage {
     this.page = page;
 
     this.heading = page.getByRole('heading');
-    this.balance = page.getByTestId('account-balance');
+    this.balance = page.getByTestId('transactions-balance');
     this.noTransactionsFoundError = page.getByText('No transactions');
     this.searchBox = page.getByPlaceholder(/^Search/);
     this.transactionList = page.getByLabel('transaction list');

packages/desktop-client/src/components/App.tsx

@@ -27,7 +27,7 @@ import { DevelopmentTopBar } from './DevelopmentTopBar';
 import { FatalError } from './FatalError';
 import { FinancesApp } from './FinancesApp';
 import { ManagementApp } from './manager/ManagementApp';
-import { MobileWebMessage } from './MobileWebMessage';
+import { MobileWebMessage } from './mobile/MobileWebMessage';
 import { UpdateNotification } from './UpdateNotification';
 
 type AppInnerProps = {

packages/desktop-client/src/components/FinancesApp.tsx

@@ -30,6 +30,7 @@ import { BudgetMonthCountProvider } from './budget/BudgetMonthCountContext';
 import { View } from './common/View';
 import { GlobalKeys } from './GlobalKeys';
 import { ManageRulesPage } from './ManageRulesPage';
+import { Category } from './mobile/budget/Category';
 import { MobileNavTabs } from './mobile/MobileNavTabs';
 import { TransactionEdit } from './mobile/transactions/TransactionEdit';
 import { Modals } from './Modals';
@@ -210,7 +211,7 @@ function FinancesAppWithoutContext() {
                 />
 
                 <Route
-                  path="/accounts/:id/transactions/:transactionId"
+                  path="/transactions/:transactionId"
                   element={
                     <WideNotSupported>
                       <TransactionEdit />
@@ -219,18 +220,10 @@ function FinancesAppWithoutContext() {
                 />
 
                 <Route
-                  path="/accounts/:id/transactions/new"
+                  path="/categories/:id"
                   element={
                     <WideNotSupported>
-                      <TransactionEdit />
-                    </WideNotSupported>
-                  }
-                />
-                <Route
-                  path="/transactions/new"
-                  element={
-                    <WideNotSupported>
-                      <TransactionEdit />
+                      <Category />
                     </WideNotSupported>
                   }
                 />

packages/desktop-client/src/components/Modals.tsx

@@ -14,7 +14,7 @@ import { useSyncServerStatus } from '../hooks/useSyncServerStatus';
 import { ModalTitle } from './common/Modal';
 import { AccountAutocompleteModal } from './modals/AccountAutocompleteModal';
 import { AccountMenuModal } from './modals/AccountMenuModal';
-import { BudgetMenuModal } from './modals/BudgetMenuModal';
+import { BudgetMonthMenuModal } from './modals/BudgetMonthMenuModal';
 import { CategoryAutocompleteModal } from './modals/CategoryAutocompleteModal';
 import { CategoryGroupMenuModal } from './modals/CategoryGroupMenuModal';
 import { CategoryMenuModal } from './modals/CategoryMenuModal';
@@ -40,8 +40,10 @@ import { Notes } from './modals/Notes';
 import { PayeeAutocompleteModal } from './modals/PayeeAutocompleteModal';
 import { PlaidExternalMsg } from './modals/PlaidExternalMsg';
 import { ReportBalanceMenuModal } from './modals/ReportBalanceMenuModal';
+import { ReportBudgetMenuModal } from './modals/ReportBudgetMenuModal';
 import { ReportBudgetSummaryModal } from './modals/ReportBudgetSummaryModal';
 import { RolloverBalanceMenuModal } from './modals/RolloverBalanceMenuModal';
+import { RolloverBudgetMenuModal } from './modals/RolloverBudgetMenuModal';
 import { RolloverBudgetSummaryModal } from './modals/RolloverBudgetSummaryModal';
 import { RolloverToBudgetMenuModal } from './modals/RolloverToBudgetMenuModal';
 import { ScheduledTransactionMenuModal } from './modals/ScheduledTransactionMenuModal';
@@ -429,14 +431,47 @@ export function Modals() {
               key={name}
               modalProps={modalProps}
               categoryId={options.categoryId}
-              categoryGroup={options.categoryGroup}
               onSave={options.onSave}
               onEditNotes={options.onEditNotes}
               onDelete={options.onDelete}
               onClose={options.onClose}
             />
           );
 
+        case 'rollover-budget-menu':
+          return (
+            <NamespaceContext.Provider
+              key={name}
+              value={monthUtils.sheetForMonth(options.month)}
+            >
+              <RolloverBudgetMenuModal
+                modalProps={modalProps}
+                categoryId={options.categoryId}
+                onUpdateBudget={options.onUpdateBudget}
+                onCopyLastMonthAverage={options.onCopyLastMonthAverage}
+                onSetMonthsAverage={options.onSetMonthsAverage}
+                onApplyBudgetTemplate={options.onApplyBudgetTemplate}
+              />
+            </NamespaceContext.Provider>
+          );
+
+        case 'report-budget-menu':
+          return (
+            <NamespaceContext.Provider
+              key={name}
+              value={monthUtils.sheetForMonth(options.month)}
+            >
+              <ReportBudgetMenuModal
+                modalProps={modalProps}
+                categoryId={options.categoryId}
+                onUpdateBudget={options.onUpdateBudget}
+                onCopyLastMonthAverage={options.onCopyLastMonthAverage}
+                onSetMonthsAverage={options.onSetMonthsAverage}
+                onApplyBudgetTemplate={options.onApplyBudgetTemplate}
+              />
+            </NamespaceContext.Provider>
+          );
+
         case 'category-group-menu':
           return (
             <CategoryGroupMenuModal
@@ -479,7 +514,7 @@ export function Modals() {
             </NamespaceContext.Provider>
           );
 
-        case 'rollover-to-budget-menu':
+        case 'rollover-summary-to-budget-menu':
           return (
             <NamespaceContext.Provider
               key={name}
@@ -552,13 +587,13 @@ export function Modals() {
             />
           );
 
-        case 'budget-menu':
+        case 'budget-month-menu':
           return (
             <NamespaceContext.Provider
               key={name}
               value={monthUtils.sheetForMonth(options.month)}
             >
-              <BudgetMenuModal
+              <BudgetMonthMenuModal
                 modalProps={modalProps}
                 month={options.month}
                 onToggleHiddenCategories={options.onToggleHiddenCategories}

packages/desktop-client/src/components/accounts/Account.jsx

@@ -8,10 +8,7 @@ import { bindActionCreators } from 'redux';
 import { validForTransfer } from 'loot-core/client/transfer';
 import * as actions from 'loot-core/src/client/actions';
 import { useFilters } from 'loot-core/src/client/data-hooks/filters';
-import {
-  SchedulesProvider,
-  useCachedSchedules,
-} from 'loot-core/src/client/data-hooks/schedules';
+import { SchedulesProvider } from 'loot-core/src/client/data-hooks/schedules';
 import * as queries from 'loot-core/src/client/queries';
 import { runQuery, pagedQuery } from 'loot-core/src/client/query-helpers';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
@@ -33,6 +30,7 @@ import { useDateFormat } from '../../hooks/useDateFormat';
 import { useFailedAccounts } from '../../hooks/useFailedAccounts';
 import { useLocalPref } from '../../hooks/useLocalPref';
 import { usePayees } from '../../hooks/usePayees';
+import { usePreviewTransactions } from '../../hooks/usePreviewTransactions';
 import { SelectedProviderWithItems } from '../../hooks/useSelected';
 import {
   SplitsExpandedProvider,
@@ -94,38 +92,14 @@ function AllTransactions({
   filtered,
   children,
 }) {
-  const { id: accountId } = account;
-  const scheduleData = useCachedSchedules();
+  const accountId = account.id;
+  const prependTransactions = usePreviewTransactions().map(trans => ({
+    ...trans,
+    _inverse: accountId ? accountId !== trans.account : false,
+  }));
 
   transactions ??= [];
 
-  const schedules = useMemo(
-    () =>
-      scheduleData
-        ? scheduleData.schedules.filter(
-            s =>
-              !s.completed &&
-              ['due', 'upcoming', 'missed'].includes(
-                scheduleData.statuses.get(s.id),
-              ),
-          )
-        : [],
-    [scheduleData],
-  );
-
-  const prependTransactions = useMemo(() => {
-    return schedules.map(schedule => ({
-      id: `preview/${schedule.id}`,
-      payee: schedule._payee,
-      account: schedule._account,
-      amount: schedule._amount,
-      date: schedule.next_date,
-      notes: scheduleData.statuses.get(schedule.id),
-      schedule: schedule.id,
-      _inverse: accountId ? accountId !== schedule._account : false,
-    }));
-  }, [schedules, accountId]);
-
   let runningBalance = useMemo(() => {
     if (!showBalances) {
       return 0;
@@ -172,7 +146,7 @@ function AllTransactions({
     return balances;
   }, [filtered, prependBalances, balances]);
 
-  if (scheduleData == null) {
+  if (!prependTransactions) {
     return children(transactions, balances);
   }
   return children(allTransactions, allBalances);

packages/desktop-client/src/components/budget/BudgetTable.jsx

@@ -1,7 +1,5 @@
 import React, { useRef, useState } from 'react';
 
-import * as monthUtils from 'loot-core/src/shared/months';
-
 import { useCategories } from '../../hooks/useCategories';
 import { useLocalPref } from '../../hooks/useLocalPref';
 import { theme, styles } from '../../style';
@@ -40,8 +38,8 @@ export function BudgetTable(props) {
   );
   const [editing, setEditing] = useState(null);
 
-  const onEditMonth = (id, monthIndex) => {
-    setEditing(id ? { id, cell: monthIndex } : null);
+  const onEditMonth = (id, month) => {
+    setEditing(id ? { id, cell: month } : null);
   };
 
   const onEditName = id => {
@@ -134,18 +132,6 @@ export function BudgetTable(props) {
     }
   };
 
-  const resolveMonth = monthIndex => {
-    return monthUtils.addMonths(startMonth, monthIndex);
-  };
-
-  const _onShowActivity = (catId, monthIndex) => {
-    onShowActivity(catId, resolveMonth(monthIndex));
-  };
-
-  const _onBudgetAction = (monthIndex, type, args) => {
-    onBudgetAction(resolveMonth(monthIndex), type, args);
-  };
-
   const onCollapse = collapsedIds => {
     setCollapsedPref(collapsedIds);
   };
@@ -244,8 +230,8 @@ export function BudgetTable(props) {
                 onDeleteGroup={onDeleteGroup}
                 onReorderCategory={_onReorderCategory}
                 onReorderGroup={_onReorderGroup}
-                onBudgetAction={_onBudgetAction}
-                onShowActivity={_onShowActivity}
+                onBudgetAction={onBudgetAction}
+                onShowActivity={onShowActivity}
               />
             </View>
           </View>

packages/desktop-client/src/components/budget/ExpenseCategory.tsx

@@ -28,12 +28,12 @@ type ExpenseCategoryProps = {
   dragState: DragState<CategoryEntity>;
   MonthComponent: ComponentProps<typeof RenderMonths>['component'];
   onEditName?: ComponentProps<typeof SidebarCategory>['onEditName'];
-  onEditMonth?: (id: string, monthIndex: number) => void;
+  onEditMonth?: (id: string, month: string) => void;
   onSave?: ComponentProps<typeof SidebarCategory>['onSave'];
   onDelete?: ComponentProps<typeof SidebarCategory>['onDelete'];
   onDragChange: OnDragChangeCallback<CategoryEntity>;
-  onBudgetAction: (idx: number, action: string, arg: unknown) => void;
-  onShowActivity: (id: string, idx: number) => void;
+  onBudgetAction: (month: number, action: string, arg: unknown) => void;
+  onShowActivity: (id: string, month: string) => void;
   onReorder: OnDropCallback;
 };
 
@@ -101,7 +101,7 @@ export function ExpenseCategory({
 
         <RenderMonths
           component={MonthComponent}
-          editingIndex={
+          editingMonth={
             editingCell && editingCell.id === cat.id && editingCell.cell
           }
           args={{

packages/desktop-client/src/components/budget/IncomeCategory.tsx

@@ -21,13 +21,13 @@ type IncomeCategoryProps = {
   editingCell: { id: string; cell: string } | null;
   MonthComponent: ComponentProps<typeof RenderMonths>['component'];
   onEditName: ComponentProps<typeof SidebarCategory>['onEditName'];
-  onEditMonth?: (id: string, monthIndex: number) => void;
+  onEditMonth?: (id: string, month: string) => void;
   onSave: ComponentProps<typeof SidebarCategory>['onSave'];
   onDelete: ComponentProps<typeof SidebarCategory>['onDelete'];
   onDragChange: OnDragChangeCallback<CategoryEntity>;
-  onBudgetAction: (idx: number, action: string, arg: unknown) => void;
+  onBudgetAction: (month: string, action: string, arg: unknown) => void;
   onReorder: OnDropCallback;
-  onShowActivity: (id: string, idx: number) => void;
+  onShowActivity: (id: string, month: string) => void;
 };
 
 export function IncomeCategory({
@@ -76,7 +76,7 @@ export function IncomeCategory({
       />
       <RenderMonths
         component={MonthComponent}
-        editingIndex={
+        editingMonth={
           editingCell && editingCell.id === cat.id && editingCell.cell
         }
         args={{

packages/desktop-client/src/components/budget/RenderMonths.tsx

@@ -14,22 +14,22 @@ import { NamespaceContext } from '../spreadsheet/NamespaceContext';
 import { MonthsContext } from './MonthsContext';
 
 type RenderMonthsProps = {
-  component?: ComponentType<{ monthIndex: number; editing: boolean }>;
-  editingIndex?: string | number;
+  component?: ComponentType<{ month: string; editing: boolean }>;
+  editingMonth?: string;
   args?: object;
   style?: CSSProperties;
 };
 
 export function RenderMonths({
   component: Component,
-  editingIndex,
+  editingMonth,
   args,
   style,
 }: RenderMonthsProps) {
   const { months } = useContext(MonthsContext);
 
   return months.map((month, index) => {
-    const editing = editingIndex === index;
+    const editing = editingMonth === month;
 
     return (
       <NamespaceContext.Provider
@@ -43,7 +43,7 @@ export function RenderMonths({
             ...style,
           }}
         >
-          <Component monthIndex={index} editing={editing} {...args} />
+          <Component month={month} editing={editing} {...args} />
         </View>
       </NamespaceContext.Provider>
     );

packages/desktop-client/src/components/budget/report/BalanceTooltip.tsx

@@ -7,15 +7,15 @@ import { BalanceMenu } from './BalanceMenu';
 type BalanceTooltipProps = {
   categoryId: string;
   tooltip: { close: () => void };
-  monthIndex: number;
-  onBudgetAction: (idx: number, action: string, arg: unknown) => void;
+  month: string;
+  onBudgetAction: (month: string, action: string, arg: unknown) => void;
   onClose?: () => void;
 };
 
 export function BalanceTooltip({
   categoryId,
   tooltip,
-  monthIndex,
+  month,
   onBudgetAction,
   onClose,
   ...tooltipProps
@@ -36,7 +36,7 @@ export function BalanceTooltip({
       <BalanceMenu
         categoryId={categoryId}
         onCarryover={carryover => {
-          onBudgetAction?.(monthIndex, 'carryover', {
+          onBudgetAction?.(month, 'carryover', {
             category: categoryId,
             flag: carryover,
           });