Can import ZIP

moneymgr_web/src/routes/BackupRoute.tsx

@@ -1,4 +1,4 @@
-import { mdiCash } from "@mdi/js";
+import { mdiCash, mdiFolderZipOutline } from "@mdi/js";
 import Icon from "@mdi/react";
 import DownloadIcon from "@mui/icons-material/Download";
 import UploadIcon from "@mui/icons-material/Upload";
@@ -24,7 +24,23 @@ import { RouterLink } from "../widgets/RouterLink";
 export function BackupRoute(): React.ReactElement {
   return (
     <MoneyMgrWebRouteContainer label={"Backup & Restore"}>
-      <Grid container>
+      <Grid container spacing={2}>
+        {/* ZIP */}
+        <ImportExportModal
+          icon={<Icon path={mdiFolderZipOutline} size={1} />}
+          label="ZIP"
+          description={
+            <>
+              Perform an exhaustive export or import (of accounts, inbox,
+              movements and files).
+            </>
+          }
+          importWarning="Existing data will be COMPLETELY ERASED, before starting import!"
+          exportURL={BackupApi.ZIPExportURL}
+          onImport={BackupApi.ZIPImport}
+          acceptedFiles={"application/zip"}
+        />
+
         {/* FinancesManager */}
         <ImportExportModal
           icon={<Icon path={mdiCash} size={1} />}
@@ -38,7 +54,7 @@ export function BackupRoute(): React.ReactElement {
                 rel="noreferrer"
                 style={{ color: "inherit" }}
               >
-                FinanceManager
+                FinancesManager
               </a>{" "}
               file format (does not support file attachments).
             </>
@@ -59,6 +75,7 @@ function ImportExportModal(p: {
   importWarning?: string;
   exportURL: string;
   onImport?: (file: File) => Promise<void>;
+  acceptedFiles?: string;
 }): React.ReactElement {
   const confirm = useConfirm();
   const alert = useAlert();
@@ -70,6 +87,7 @@ function ImportExportModal(p: {
     try {
       const fileEl = document.createElement("input");
       fileEl.type = "file";
+      if (p.acceptedFiles) fileEl.accept = p.acceptedFiles;
       fileEl.click();
 
       // Wait for a file to be chosen
@@ -108,10 +126,14 @@ function ImportExportModal(p: {
   };
 
   return (
-    <Grid size={{ md: 6 }}>
-      <Card sx={{ maxWidth: 345 }} elevation={3} variant="outlined">
+    <Grid size={{ md: 6, lg: 3 }} style={{ height: "100%" }}>
+      <Card
+        elevation={3}
+        variant="outlined"
+        style={{ height: "100%", display: "flex", flexDirection: "column" }}
+      >
         <CardHeader avatar={p.icon} title={p.label} />
-        <CardContent>
+        <CardContent style={{ flex: 1 }}>
           <Typography style={{ textAlign: "justify" }}>
             {p.description}
           </Typography>