feat: delete users - not tested

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