feat: delete users - not tested

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