From 5648f4c3d029dc74f3121251a8f64cd8d50d9687 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Sun, 11 Jan 2026 20:16:42 -0600
Subject: [PATCH] fix: add import UI to desktop settings page (refs #26)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 frontend/src/pages/SettingsPage.tsx | 30 +++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
index 6f57d09..c91addb 100644
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -14,6 +14,8 @@ import { useVehicles } from '../features/vehicles/hooks/useVehicles';
 import { useTheme } from '../shared-minimal/theme/ThemeContext';
 import { DeleteAccountDialog } from '../features/settings/components/DeleteAccountDialog';
 import { PendingDeletionBanner } from '../features/settings/components/PendingDeletionBanner';
+import { ImportButton } from '../features/settings/components/ImportButton';
+import { ImportDialog } from '../features/settings/components/ImportDialog';
 import {
   Box,
   Typography,
@@ -64,6 +66,8 @@ export const SettingsPage: React.FC = () => {
   const [editedDisplayName, setEditedDisplayName] = useState('');
   const [editedNotificationEmail, setEditedNotificationEmail] = useState('');
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const exportMutation = useExportUserData();
 
   // Initialize edit form when profile loads or edit mode starts
@@ -112,6 +116,16 @@ export const SettingsPage: React.FC = () => {
     }
   };
 
+  const handleImportFileSelected = (file: File) => {
+    setSelectedFile(file);
+    setImportDialogOpen(true);
+  };
+
+  const handleImportClose = () => {
+    setImportDialogOpen(false);
+    setSelectedFile(null);
+  };
+
   return (
     <Box sx={{ py: 2 }}>
       <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary', mb: 4 }}>
@@ -444,9 +458,20 @@ export const SettingsPage: React.FC = () => {
               <ListItemIcon>
                 <StorageIcon />
               </ListItemIcon>
+              <ListItemText
+                primary="Import Data"
+                secondary="Upload and restore your vehicle data from a backup"
+              />
+              <ListItemSecondaryAction>
+                <ImportButton onFileSelected={handleImportFileSelected} />
+              </ListItemSecondaryAction>
+            </ListItem>
+            <Divider />
+            <ListItem>
               <ListItemText
                 primary="Export Data"
                 secondary="Download your vehicle and fuel log data"
+                sx={{ pl: 7 }}
               />
               <ListItemSecondaryAction>
                 <MuiButton
@@ -636,6 +661,11 @@ export const SettingsPage: React.FC = () => {
       </Box>
 
       <DeleteAccountDialog open={deleteDialogOpen} onClose={() => setDeleteDialogOpen(false)} />
+      <ImportDialog
+        isOpen={importDialogOpen}
+        onClose={handleImportClose}
+        file={selectedFile}
+      />
     </Box>
   );
 };
\ No newline at end of file