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>
   );
 };