feat: delete users - not tested

frontend/src/pages/HomePage.tsx

@@ -19,6 +19,10 @@ export const HomePage = () => {
     loginWithRedirect({ appState: { returnTo: '/garage' } });
   };
 
+  const handleSignup = () => {
+    navigate('/signup');
+  };
+
   return (
     <div className="min-h-screen bg-white">
       {/* Navigation Bar */}
@@ -44,6 +48,12 @@ export const HomePage = () => {
               <a href="#about" className="text-gray-700 hover:text-primary-500 transition-colors">
                 About
               </a>
+              <button
+                onClick={handleSignup}
+                className="border-2 border-primary-500 text-primary-500 hover:bg-primary-50 font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
+              >
+                Sign Up
+              </button>
               <button
                 onClick={handleAuthAction}
                 className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
@@ -103,6 +113,12 @@ export const HomePage = () => {
               >
                 About
               </a>
+              <button
+                onClick={handleSignup}
+                className="w-full border-2 border-primary-500 text-primary-500 hover:bg-primary-50 font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
+              >
+                Sign Up
+              </button>
               <button
                 onClick={handleAuthAction}
                 className="w-full bg-primary-500 hover:bg-primary-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300"

frontend/src/pages/SettingsPage.tsx

@@ -8,6 +8,8 @@ import { useNavigate } from 'react-router-dom';
 import { useUnits } from '../core/units/UnitsContext';
 import { useAdminAccess } from '../core/auth/useAdminAccess';
 import { useProfile, useUpdateProfile } from '../features/settings/hooks/useProfile';
+import { DeleteAccountDialog } from '../features/settings/components/DeleteAccountDialog';
+import { PendingDeletionBanner } from '../features/settings/components/PendingDeletionBanner';
 import {
   Box,
   Typography,
@@ -52,6 +54,7 @@ export const SettingsPage: React.FC = () => {
   const [isEditingProfile, setIsEditingProfile] = useState(false);
   const [editedDisplayName, setEditedDisplayName] = useState('');
   const [editedNotificationEmail, setEditedNotificationEmail] = useState('');
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   // Initialize edit form when profile loads or edit mode starts
   React.useEffect(() => {
@@ -105,6 +108,8 @@ export const SettingsPage: React.FC = () => {
         Settings
       </Typography>
 
+      <PendingDeletionBanner />
+
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
         {/* Profile Section */}
         <Card>
@@ -477,9 +482,10 @@ export const SettingsPage: React.FC = () => {
             >
               Sign Out
             </MuiButton>
-            <MuiButton 
-              variant="outlined" 
+            <MuiButton
+              variant="outlined"
               color="error"
+              onClick={() => setDeleteDialogOpen(true)}
               sx={{ borderRadius: '999px' }}
             >
               Delete Account
@@ -487,6 +493,8 @@ export const SettingsPage: React.FC = () => {
           </Box>
         </Card>
       </Box>
+
+      <DeleteAccountDialog open={deleteDialogOpen} onClose={() => setDeleteDialogOpen(false)} />
     </Box>
   );
 };

frontend/src/pages/admin/AdminUsersPage.tsx

@@ -43,6 +43,7 @@ import {
   PersonAdd,
   Edit,
   Security,
+  DeleteForever,
 } from '@mui/icons-material';
 import { useAdminAccess } from '../../core/auth/useAdminAccess';
 import {
@@ -52,6 +53,7 @@ import {
   useReactivateUser,
   useUpdateUserProfile,
   usePromoteToAdmin,
+  useHardDeleteUser,
 } from '../../features/admin/hooks/useUsers';
 import {
   ManagedUser,
@@ -84,6 +86,7 @@ export const AdminUsersPage: React.FC = () => {
   const reactivateMutation = useReactivateUser();
   const updateProfileMutation = useUpdateUserProfile();
   const promoteToAdminMutation = usePromoteToAdmin();
+  const hardDeleteMutation = useHardDeleteUser();
 
   // Action menu state
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -102,6 +105,11 @@ export const AdminUsersPage: React.FC = () => {
   const [promoteDialogOpen, setPromoteDialogOpen] = useState(false);
   const [promoteRole, setPromoteRole] = useState<'admin' | 'super_admin'>('admin');
 
+  // Hard delete dialog state
+  const [hardDeleteDialogOpen, setHardDeleteDialogOpen] = useState(false);
+  const [hardDeleteReason, setHardDeleteReason] = useState('');
+  const [hardDeleteConfirmText, setHardDeleteConfirmText] = useState('');
+
   // Handlers
   const handleSearch = useCallback(() => {
     setParams(prev => ({ ...prev, search: searchInput || undefined, page: 1 }));
@@ -262,6 +270,34 @@ export const AdminUsersPage: React.FC = () => {
     setSelectedUser(null);
   }, []);
 
+  const handleHardDeleteClick = useCallback(() => {
+    setHardDeleteDialogOpen(true);
+    setAnchorEl(null);
+  }, []);
+
+  const handleHardDeleteConfirm = useCallback(() => {
+    if (selectedUser && hardDeleteConfirmText === 'DELETE') {
+      hardDeleteMutation.mutate(
+        { auth0Sub: selectedUser.auth0Sub, reason: hardDeleteReason || undefined },
+        {
+          onSuccess: () => {
+            setHardDeleteDialogOpen(false);
+            setHardDeleteReason('');
+            setHardDeleteConfirmText('');
+            setSelectedUser(null);
+          },
+        }
+      );
+    }
+  }, [selectedUser, hardDeleteReason, hardDeleteConfirmText, hardDeleteMutation]);
+
+  const handleHardDeleteCancel = useCallback(() => {
+    setHardDeleteDialogOpen(false);
+    setHardDeleteReason('');
+    setHardDeleteConfirmText('');
+    setSelectedUser(null);
+  }, []);
+
   // Loading state
   if (adminLoading) {
     return (
@@ -485,6 +521,12 @@ export const AdminUsersPage: React.FC = () => {
             Deactivate User
           </MenuItem>
         )}
+        {!selectedUser?.isAdmin && (
+          <MenuItem onClick={handleHardDeleteClick} sx={{ color: 'error.main' }}>
+            <DeleteForever sx={{ mr: 1 }} fontSize="small" />
+            Delete Permanently
+          </MenuItem>
+        )}
       </Menu>
 
       {/* Deactivate Confirmation Dialog */}
@@ -624,6 +666,81 @@ export const AdminUsersPage: React.FC = () => {
           </Button>
         </DialogActions>
       </Dialog>
+
+      {/* Hard Delete Confirmation Dialog */}
+      <Dialog
+        open={hardDeleteDialogOpen}
+        onClose={() => !hardDeleteMutation.isPending && handleHardDeleteCancel()}
+        maxWidth="sm"
+        fullWidth
+      >
+        <DialogTitle sx={{ color: 'error.main' }}>
+          Permanently Delete User
+        </DialogTitle>
+        <DialogContent>
+          <Box sx={{ bgcolor: 'error.light', color: 'error.contrastText', p: 2, borderRadius: 1, mb: 3 }}>
+            <Typography variant="body2" sx={{ fontWeight: 600 }}>
+              Warning: This action cannot be undone!
+            </Typography>
+            <Typography variant="body2" sx={{ mt: 1 }}>
+              All user data will be permanently deleted, including vehicles, fuel logs,
+              maintenance records, and documents. The user's Auth0 account will also be deleted.
+            </Typography>
+          </Box>
+
+          <Typography sx={{ mb: 2 }}>
+            Are you sure you want to permanently delete{' '}
+            <strong>{selectedUser?.email}</strong>?
+          </Typography>
+
+          <TextField
+            label="Reason for deletion"
+            value={hardDeleteReason}
+            onChange={(e) => setHardDeleteReason(e.target.value)}
+            fullWidth
+            multiline
+            rows={2}
+            placeholder="GDPR request, user request, etc..."
+            sx={{ mb: 3 }}
+          />
+
+          <Box>
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+              Type <strong>DELETE</strong> to confirm:
+            </Typography>
+            <TextField
+              value={hardDeleteConfirmText}
+              onChange={(e) => setHardDeleteConfirmText(e.target.value.toUpperCase())}
+              fullWidth
+              placeholder="Type DELETE"
+              error={hardDeleteConfirmText.length > 0 && hardDeleteConfirmText !== 'DELETE'}
+              helperText={
+                hardDeleteConfirmText.length > 0 && hardDeleteConfirmText !== 'DELETE'
+                  ? 'Please type DELETE exactly'
+                  : ''
+              }
+            />
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={handleHardDeleteCancel}
+            disabled={hardDeleteMutation.isPending}
+            sx={{ textTransform: 'none' }}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleHardDeleteConfirm}
+            disabled={hardDeleteMutation.isPending || hardDeleteConfirmText !== 'DELETE'}
+            color="error"
+            variant="contained"
+            sx={{ textTransform: 'none' }}
+          >
+            {hardDeleteMutation.isPending ? <CircularProgress size={20} /> : 'Delete Permanently'}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 };