[Mobile]: More functionalities

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

@@ -6,16 +6,21 @@ import { useLocation } from 'react-router-dom';
 import { type State } from 'loot-core/src/client/state-types';
 import { type PopModalAction } from 'loot-core/src/client/state-types/modals';
 import { send } from 'loot-core/src/platform/client/fetch';
+import * as monthUtils from 'loot-core/src/shared/months';
 
 import { useActions } from '../hooks/useActions';
 import { useSyncServerStatus } from '../hooks/useSyncServerStatus';
 
-import { CategoryGroupMenu } from './modals/CategoryGroupMenu';
-import { CategoryMenu } from './modals/CategoryMenu';
-import { CloseAccount } from './modals/CloseAccount';
+import { AccountAutocompleteModal } from './modals/AccountAutocompleteModal';
+import { AccountMenuModal } from './modals/AccountMenuModal';
+import { CategoryAutocompleteModal } from './modals/CategoryAutocompleteModal';
+import { CategoryGroupMenuModal } from './modals/CategoryGroupMenuModal';
+import { CategoryMenuModal } from './modals/CategoryMenuModal';
+import { CloseAccountModal } from './modals/CloseAccountModal';
 import { ConfirmCategoryDelete } from './modals/ConfirmCategoryDelete';
 import { ConfirmTransactionEdit } from './modals/ConfirmTransactionEdit';
 import { ConfirmUnlinkAccount } from './modals/ConfirmUnlinkAccount';
+import { CoverModal } from './modals/CoverModal';
 import { CreateAccount } from './modals/CreateAccount';
 import { CreateEncryptionKey } from './modals/CreateEncryptionKey';
 import { CreateLocalAccount } from './modals/CreateLocalAccount';
@@ -24,22 +29,30 @@ import { EditRule } from './modals/EditRule';
 import { FixEncryptionKey } from './modals/FixEncryptionKey';
 import { GoCardlessExternalMsg } from './modals/GoCardlessExternalMsg';
 import { GoCardlessInitialise } from './modals/GoCardlessInitialise';
+import { HoldBufferModal } from './modals/HoldBufferModal';
 import { ImportTransactions } from './modals/ImportTransactions';
 import { LoadBackup } from './modals/LoadBackup';
 import { ManageRulesModal } from './modals/ManageRulesModal';
 import { MergeUnusedPayees } from './modals/MergeUnusedPayees';
 import { Notes } from './modals/Notes';
+import { PayeeAutocompleteModal } from './modals/PayeeAutocompleteModal';
 import { PlaidExternalMsg } from './modals/PlaidExternalMsg';
-import { ReportBudgetSummary } from './modals/ReportBudgetSummary';
-import { RolloverBudgetSummary } from './modals/RolloverBudgetSummary';
+import { ReportBalanceMenuModal } from './modals/ReportBalanceMenuModal';
+import { ReportBudgetSummaryModal } from './modals/ReportBudgetSummaryModal';
+import { RolloverBalanceMenuModal } from './modals/RolloverBalanceMenuModal';
+import { RolloverBudgetSummaryModal } from './modals/RolloverBudgetSummaryModal';
+import { RolloverToBudgetMenuModal } from './modals/RolloverToBudgetMenuModal';
+import { ScheduledTransactionMenuModal } from './modals/ScheduledTransactionMenuModal';
 import { SelectLinkedAccounts } from './modals/SelectLinkedAccounts';
 import { SimpleFinInitialise } from './modals/SimpleFinInitialise';
-import { SingleInput } from './modals/SingleInput';
+import { SingleInputModal } from './modals/SingleInputModal';
 import { SwitchBudgetType } from './modals/SwitchBudgetType';
+import { TransferModal } from './modals/TransferModal';
 import { DiscoverSchedules } from './schedules/DiscoverSchedules';
 import { PostsOfflineNotification } from './schedules/PostsOfflineNotification';
 import { ScheduleDetails } from './schedules/ScheduleDetails';
 import { ScheduleLink } from './schedules/ScheduleLink';
+import { NamespaceContext } from './spreadsheet/NamespaceContext';
 
 export type CommonModalProps = {
   onClose: () => PopModalAction;
@@ -97,12 +110,11 @@ export function Modals() {
 
         case 'close-account':
           return (
-            <CloseAccount
+            <CloseAccountModal
               modalProps={modalProps}
               account={options.account}
               balance={options.balance}
               canDelete={options.canDelete}
-              actions={actions}
             />
           );
 
@@ -255,9 +267,51 @@ export function Modals() {
             />
           );
 
+        case 'category-autocomplete':
+          return (
+            <CategoryAutocompleteModal
+              key={name}
+              modalProps={modalProps}
+              autocompleteProps={{
+                value: null,
+                categoryGroups: options.categoryGroups,
+                onSelect: options.onSelect,
+                showHiddenCategories: options.showHiddenCategories,
+              }}
+              onClose={options.onClose}
+            />
+          );
+
+        case 'account-autocomplete':
+          return (
+            <AccountAutocompleteModal
+              key={name}
+              modalProps={modalProps}
+              autocompleteProps={{
+                value: null,
+                onSelect: options.onSelect,
+                includeClosedAccounts: options.includeClosedAccounts,
+              }}
+              onClose={options.onClose}
+            />
+          );
+
+        case 'payee-autocomplete':
+          return (
+            <PayeeAutocompleteModal
+              key={name}
+              modalProps={modalProps}
+              autocompleteProps={{
+                value: null,
+                onSelect: options.onSelect,
+              }}
+              onClose={options.onClose}
+            />
+          );
+
         case 'new-category':
           return (
-            <SingleInput
+            <SingleInputModal
               modalProps={modalProps}
               title="New Category"
               inputPlaceholder="Category name"
@@ -269,7 +323,7 @@ export function Modals() {
 
         case 'new-category-group':
           return (
-            <SingleInput
+            <SingleInputModal
               modalProps={modalProps}
               title="New Category Group"
               inputPlaceholder="Category group name"
@@ -281,17 +335,22 @@ export function Modals() {
 
         case 'rollover-budget-summary':
           return (
-            <RolloverBudgetSummary
+            <NamespaceContext.Provider
               key={name}
-              modalProps={modalProps}
-              month={options.month}
-              onBudgetAction={options.onBudgetAction}
-            />
+              value={monthUtils.sheetForMonth(options.month)}
+            >
+              <RolloverBudgetSummaryModal
+                key={name}
+                modalProps={modalProps}
+                month={options.month}
+                onBudgetAction={options.onBudgetAction}
+              />
+            </NamespaceContext.Provider>
           );
 
         case 'report-budget-summary':
           return (
-            <ReportBudgetSummary
+            <ReportBudgetSummaryModal
               key={name}
               modalProps={modalProps}
               month={options.month}
@@ -348,9 +407,23 @@ export function Modals() {
             />
           );
 
+        case 'account-menu':
+          return (
+            <AccountMenuModal
+              key={name}
+              modalProps={modalProps}
+              accountId={options.accountId}
+              onSave={options.onSave}
+              onEditNotes={options.onEditNotes}
+              onCloseAccount={options.onCloseAccount}
+              onReopenAccount={options.onReopenAccount}
+              onClose={options.onClose}
+            />
+          );
+
         case 'category-menu':
           return (
-            <CategoryMenu
+            <CategoryMenuModal
               key={name}
               modalProps={modalProps}
               categoryId={options.categoryId}
@@ -363,7 +436,7 @@ export function Modals() {
 
         case 'category-group-menu':
           return (
-            <CategoryGroupMenu
+            <CategoryGroupMenuModal
               key={name}
               modalProps={modalProps}
               groupId={options.groupId}
@@ -387,6 +460,95 @@ export function Modals() {
             />
           );
 
+        case 'rollover-balance-menu':
+          return (
+            <NamespaceContext.Provider
+              key={name}
+              value={monthUtils.sheetForMonth(options.month)}
+            >
+              <RolloverBalanceMenuModal
+                modalProps={modalProps}
+                categoryId={options.categoryId}
+                onCarryover={options.onCarryover}
+                onTransfer={options.onTransfer}
+                onCover={options.onCover}
+              />
+            </NamespaceContext.Provider>
+          );
+
+        case 'rollover-to-budget-menu':
+          return (
+            <NamespaceContext.Provider
+              key={name}
+              value={monthUtils.sheetForMonth(options.month)}
+            >
+              <RolloverToBudgetMenuModal
+                modalProps={modalProps}
+                onTransfer={options.onTransfer}
+                onHoldBuffer={options.onHoldBuffer}
+                onResetHoldBuffer={options.onResetHoldBuffer}
+              />
+            </NamespaceContext.Provider>
+          );
+
+        case 'hold-buffer':
+          return (
+            <NamespaceContext.Provider
+              key={name}
+              value={monthUtils.sheetForMonth(options.month)}
+            >
+              <HoldBufferModal
+                modalProps={modalProps}
+                month={options.month}
+                onSubmit={options.onSubmit}
+              />
+            </NamespaceContext.Provider>
+          );
+
+        case 'report-balance-menu':
+          return (
+            <NamespaceContext.Provider
+              key={name}
+              value={monthUtils.sheetForMonth(options.month)}
+            >
+              <ReportBalanceMenuModal
+                modalProps={modalProps}
+                categoryId={options.categoryId}
+                onCarryover={options.onCarryover}
+              />
+            </NamespaceContext.Provider>
+          );
+
+        case 'transfer':
+          return (
+            <TransferModal
+              modalProps={modalProps}
+              title={options.title}
+              amount={options.amount}
+              onSubmit={options.onSubmit}
+              showToBeBudgeted={options.showToBeBudgeted}
+            />
+          );
+
+        case 'cover':
+          return (
+            <CoverModal
+              modalProps={modalProps}
+              categoryId={options.categoryId}
+              onSubmit={options.onSubmit}
+            />
+          );
+
+        case 'scheduled-transaction-menu':
+          return (
+            <ScheduledTransactionMenuModal
+              modalProps={modalProps}
+              transactionId={options.transactionId}
+              onPost={options.onPost}
+              onSkip={options.onSkip}
+            />
+          );
+
         default:
           console.error('Unknown modal:', name);
           return null;

packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx

@@ -166,6 +166,7 @@ type AccountItemProps = {
   embedded?: boolean;
 };
 
+// eslint-disable-next-line import/no-unused-modules
 export function AccountItem({
   item,
   className,

packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx

@@ -297,6 +297,7 @@ type CategoryItemProps = {
   embedded?: boolean;
 };
 
+// eslint-disable-next-line import/no-unused-modules
 export function CategoryItem({
   item,
   className,

packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx

@@ -398,6 +398,7 @@ type CreatePayeeButtonProps = {
   style?: CSSProperties;
 };
 
+// eslint-disable-next-line import/no-unused-modules
 export function CreatePayeeButton({
   Icon,
   payeeName,
@@ -471,6 +472,7 @@ type PayeeItemProps = {
   embedded?: boolean;
 };
 
+// eslint-disable-next-line import/no-unused-modules
 export function PayeeItem({
   item,
   className,

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

@@ -28,6 +28,7 @@ import { useLocalPref } from '../../hooks/useLocalPref';
 import { useNavigate } from '../../hooks/useNavigate';
 import { styles } from '../../style';
 import { View } from '../common/View';
+import { NamespaceContext } from '../spreadsheet/NamespaceContext';
 import {
   SWITCH_BUDGET_MESSAGE_TYPE,
   TitlebarContext,
@@ -404,7 +405,11 @@ function BudgetInner(props: BudgetInnerProps) {
     );
   }
 
-  return <View style={{ flex: 1 }}>{table}</View>;
+  return (
+    <NamespaceContext.Provider value={monthUtils.sheetForMonth(startMonth)}>
+      <View style={{ flex: 1 }}>{table}</View>
+    </NamespaceContext.Provider>
+  );
 }
 
 const RolloverBudgetSummary = memo<{ month: string }>(props => {

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

@@ -28,7 +28,7 @@ export function BalanceMenu({
             onCarryover?.(!carryover);
             break;
           default:
-            throw new Error(`Unsupported item: ${name}`);
+            throw new Error(`Unrecognized menu option: ${name}`);
         }
       }}
       items={[

packages/desktop-client/src/components/budget/rollover/BalanceMenu.tsx

@@ -39,7 +39,7 @@ export function BalanceMenu({
             onCover?.();
             break;
           default:
-            throw new Error(`Unsupported item: ${name}`);
+            throw new Error(`Unrecognized menu option: ${name}`);
         }
       }}
       items={[

packages/desktop-client/src/components/budget/rollover/RolloverContext.tsx

@@ -9,7 +9,7 @@ type RolloverContextDefinition = {
   currentMonth: string;
 };
 
-const Context = createContext<RolloverContextDefinition>({
+const RolloverContext = createContext<RolloverContextDefinition>({
   summaryCollapsed: false,
   onBudgetAction: () => {
     throw new Error('Unitialised context method called: onBudgetAction');
@@ -34,7 +34,7 @@ export function RolloverProvider({
   const currentMonth = monthUtils.currentMonth();
 
   return (
-    <Context.Provider
+    <RolloverContext.Provider
       value={{
         currentMonth,
         summaryCollapsed,
@@ -43,10 +43,10 @@ export function RolloverProvider({
       }}
     >
       {children}
-    </Context.Provider>
+    </RolloverContext.Provider>
   );
 }
 
 export function useRollover() {
-  return useContext(Context);
+  return useContext(RolloverContext);
 }