Duplicating Budget and Budget Snapshots

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

@@ -44,6 +44,7 @@ import { KeyboardShortcutModal } from './modals/KeyboardShortcutModal';
 import { LoadBackupModal } from './modals/LoadBackupModal';
 import { ConfirmChangeDocumentDirModal } from './modals/manager/ConfirmChangeDocumentDir';
 import { DeleteFileModal } from './modals/manager/DeleteFileModal';
+import { DuplicateFileModal } from './modals/manager/DuplicateFileModal';
 import { FilesSettingsModal } from './modals/manager/FilesSettingsModal';
 import { ImportActualModal } from './modals/manager/ImportActualModal';
 import { ImportModal } from './modals/manager/ImportModal';
@@ -578,6 +579,16 @@ export function Modals() {
           return <BudgetListModal key={name} />;
         case 'delete-budget':
           return <DeleteFileModal key={name} file={options.file} />;
+        case 'duplicate-budget':
+          return (
+            <DuplicateFileModal
+              key={name}
+              file={options.file}
+              managePage={options?.managePage}
+              loadBudget={options?.loadBudget}
+              onComplete={options?.onComplete}
+            />
+          );
         case 'import':
           return <ImportModal key={name} />;
         case 'files-settings':

packages/desktop-client/src/components/manager/BudgetList.tsx

@@ -64,9 +64,11 @@ function getFileDescription(file: File, t: (key: string) => string) {
 function FileMenu({
   onDelete,
   onClose,
+  onDuplicate,
 }: {
   onDelete: () => void;
   onClose: () => void;
+  onDuplicate?: () => void;
 }) {
   function onMenuSelect(type: string) {
     onClose();
@@ -75,18 +77,30 @@ function FileMenu({
       case 'delete':
         onDelete();
         break;
+      case 'duplicate':
+        if (onDuplicate) onDuplicate();
+        break;
       default:
     }
   }
 
   const { t } = useTranslation();
 
-  const items = [{ name: 'delete', text: t('Delete') }];
+  const items = [
+    ...(onDuplicate ? [{ name: 'duplicate', text: t('Duplicate') }] : []),
+    { name: 'delete', text: t('Delete') },
+  ];
 
   return <Menu onMenuSelect={onMenuSelect} items={items} />;
 }
 
-function FileMenuButton({ onDelete }: { onDelete: () => void }) {
+function FileMenuButton({
+  onDelete,
+  onDuplicate,
+}: {
+  onDelete: () => void;
+  onDuplicate?: () => void;
+}) {
   const triggerRef = useRef(null);
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -108,7 +122,11 @@ function FileMenuButton({ onDelete }: { onDelete: () => void }) {
         isOpen={menuOpen}
         onOpenChange={() => setMenuOpen(false)}
       >
-        <FileMenu onDelete={onDelete} onClose={() => setMenuOpen(false)} />
+        <FileMenu
+          onDelete={onDelete}
+          onClose={() => setMenuOpen(false)}
+          onDuplicate={onDuplicate}
+        />
       </Popover>
     </View>
   );
@@ -169,11 +187,13 @@ function FileItem({
   quickSwitchMode,
   onSelect,
   onDelete,
+  onDuplicate,
 }: {
   file: File;
   quickSwitchMode: boolean;
   onSelect: (file: File) => void;
   onDelete: (file: File) => void;
+  onDuplicate: (file: File) => void;
 }) {
   const { t } = useTranslation();
 
@@ -239,7 +259,10 @@ function FileItem({
           )}
 
           {!quickSwitchMode && (
-            <FileMenuButton onDelete={() => onDelete(file)} />
+            <FileMenuButton
+              onDelete={() => onDelete(file)}
+              onDuplicate={'id' in file ? () => onDuplicate(file) : undefined}
+            />
           )}
         </View>
       </View>
@@ -252,11 +275,13 @@ function BudgetFiles({
   quickSwitchMode,
   onSelect,
   onDelete,
+  onDuplicate,
 }: {
   files: File[];
   quickSwitchMode: boolean;
   onSelect: (file: File) => void;
   onDelete: (file: File) => void;
+  onDuplicate: (file: File) => void;
 }) {
   function isLocalFile(file: File): file is LocalFile {
     return file.state === 'local';
@@ -292,6 +317,7 @@ function BudgetFiles({
             quickSwitchMode={quickSwitchMode}
             onSelect={onSelect}
             onDelete={onDelete}
+            onDuplicate={onDuplicate}
           />
         ))
       )}
@@ -467,7 +493,16 @@ export function BudgetList({ showHeader = true, quickSwitchMode = false }) {
         files={files}
         quickSwitchMode={quickSwitchMode}
         onSelect={onSelect}
-        onDelete={file => dispatch(pushModal('delete-budget', { file }))}
+        onDelete={(file: File) =>
+          dispatch(pushModal('delete-budget', { file }))
+        }
+        onDuplicate={(file: File) => {
+          if (file && 'id' in file) {
+            dispatch(pushModal('duplicate-budget', { file, managePage: true }));
+          } else {
+            console.error('Attempted to duplicate an invalid file:', file);
+          }
+        }}
       />
       {!quickSwitchMode && (
         <View

packages/desktop-client/src/components/modals/LoadBackupModal.tsx

@@ -1,14 +1,21 @@
 import React, { useState, useEffect } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
-import { loadBackup, makeBackup } from 'loot-core/client/actions';
+import * as dateFns from 'date-fns';
+
+import {
+  addNotification,
+  loadBackup,
+  makeBackup,
+} from 'loot-core/client/actions';
 import { type Backup } from 'loot-core/server/backups';
 import { send, listen, unlisten } from 'loot-core/src/platform/client/fetch';
 
 import { useMetadataPref } from '../../hooks/useMetadataPref';
 import { theme } from '../../style';
 import { Block } from '../common/Block';
-import { Button } from '../common/Button2';
+import { ButtonWithLoading } from '../common/Button2';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
@@ -20,6 +27,7 @@ type BackupTableProps = {
 };
 
 function BackupTable({ backups, onSelect }: BackupTableProps) {
+  const { t } = useTranslation();
   return (
     <View style={{ flex: 1, maxHeight: 200, overflow: 'auto' }}>
       {backups.map((backup, idx) => (
@@ -31,7 +39,11 @@ function BackupTable({ backups, onSelect }: BackupTableProps) {
         >
           <Cell
             width="flex"
-            value={backup.date ? backup.date : 'Revert to Latest'}
+            value={
+              backup.date
+                ? dateFns.format(backup.date, 'yyyy-MM-dd H:mm')
+                : t('Revert to Latest')
+            }
             valueStyle={{ paddingLeft: 20 }}
           />
         </Row>
@@ -51,8 +63,10 @@ export function LoadBackupModal({
   watchUpdates,
   backupDisabled,
 }: LoadBackupModalProps) {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const [backups, setBackups] = useState<Backup[]>([]);
+  const [loading, setLoading] = useState<'revert' | 'backup' | null>(null);
   const [prefsBudgetId] = useMetadataPref('id');
   const budgetIdToLoad = budgetId ?? prefsBudgetId;
 
@@ -79,7 +93,7 @@ export function LoadBackupModal({
       {({ state: { close } }) => (
         <>
           <ModalHeader
-            title="Load Backup"
+            title={t('Load Backup')}
             rightContent={<ModalCloseButton onPress={close} />}
           />
           <View style={{ marginBottom: 30 }}>
@@ -95,49 +109,113 @@ export function LoadBackupModal({
                 <Block>
                   <Block style={{ marginBottom: 10 }}>
                     <Text style={{ fontWeight: 600 }}>
-                      You are currently working from a backup.
+                      <Trans>You are currently working from a backup.</Trans>
                     </Text>{' '}
-                    You can load a different backup or revert to the original
-                    version below.
+                    <Trans>
+                      You can load a different backup or revert to the original
+                      version below.
+                    </Trans>
                   </Block>
-                  <Button
+                  <ButtonWithLoading
                     variant="primary"
-                    onPress={() =>
-                      dispatch(loadBackup(budgetIdToLoad, latestBackup.id))
-                    }
+                    isDisabled={loading != null}
+                    isLoading={loading === 'revert'}
+                    onPress={async () => {
+                      setLoading('revert');
+                      try {
+                        await dispatch(
+                          loadBackup(budgetIdToLoad, latestBackup.id),
+                        );
+                        dispatch(
+                          addNotification({
+                            type: 'message',
+                            message: t(
+                              'Budget reverted from backup to original version.',
+                            ),
+                          }),
+                        );
+                      } catch (error) {
+                        console.error('Failed to revert backup:', error);
+                        dispatch(
+                          addNotification({
+                            type: 'error',
+                            message: t('Failed to revert to original version.'),
+                          }),
+                        );
+                      } finally {
+                        setLoading(null);
+                      }
+                    }}
                   >
-                    Revert to original version
-                  </Button>
+                    <Trans>Revert to original version</Trans>
+                  </ButtonWithLoading>
                 </Block>
               ) : (
                 <View style={{ alignItems: 'flex-start' }}>
                   <Block style={{ marginBottom: 10 }}>
-                    Select a backup to load. After loading a backup, you will
-                    have a chance to revert to the current version in this
-                    screen.{' '}
+                    <Trans>
+                      Select a backup to load. After loading a backup, you will
+                      have a chance to revert to the current version in this
+                      screen.
+                    </Trans>{' '}
                     <Text style={{ fontWeight: 600 }}>
-                      If you use a backup, you will have to setup all your
-                      devices to sync from the new budget.
+                      <Trans>
+                        If you use a backup, you will have to setup all your
+                        devices to sync from the new budget.
+                      </Trans>
                     </Text>
                   </Block>
-                  <Button
+                  <ButtonWithLoading
                     variant="primary"
-                    isDisabled={backupDisabled}
-                    onPress={() => dispatch(makeBackup())}
+                    isDisabled={backupDisabled || loading != null}
+                    isLoading={loading === 'backup'}
+                    onPress={async () => {
+                      setLoading('backup');
+                      try {
+                        await dispatch(makeBackup());
+                        dispatch(
+                          addNotification({
+                            type: 'message',
+                            message: t('Backup Created'),
+                          }),
+                        );
+                      } catch (error) {
+                        console.error('Failed to create backup:', error);
+                        dispatch(
+                          addNotification({
+                            type: 'error',
+                            message: t('Failed to create backup.'),
+                          }),
+                        );
+                      } finally {
+                        setLoading(null);
+                      }
+                    }}
                   >
-                    Backup now
-                  </Button>
+                    <Trans>Backup now</Trans>
+                  </ButtonWithLoading>
                 </View>
               )}
             </View>
             {previousBackups.length === 0 ? (
               <Block style={{ color: theme.tableTextLight, marginLeft: 20 }}>
-                No backups available
+                <Trans>No backups available</Trans>
               </Block>
             ) : (
               <BackupTable
                 backups={previousBackups}
-                onSelect={id => dispatch(loadBackup(budgetIdToLoad, id))}
+                onSelect={id => {
+                  try {
+                    dispatch(loadBackup(budgetIdToLoad, id));
+                  } catch (error) {
+                    dispatch(
+                      addNotification({
+                        type: 'error',
+                        message: t('Unable to load backup.'),
+                      }),
+                    );
+                  }
+                }}
               />
             )}
           </View>