feat: delete users - not tested

frontend/src/features/settings/mobile/MobileSettingsScreen.tsx

@@ -6,6 +6,8 @@ import { useSettings } from '../hooks/useSettings';
 import { useProfile, useUpdateProfile } from '../hooks/useProfile';
 import { useAdminAccess } from '../../../core/auth/useAdminAccess';
 import { useNavigationStore } from '../../../core/store';
+import { DeleteAccountModal } from './DeleteAccountModal';
+import { PendingDeletionBanner } from './PendingDeletionBanner';
 
 interface ToggleSwitchProps {
   enabled: boolean;
@@ -105,11 +107,6 @@ export const MobileSettingsScreen: React.FC = () => {
     setShowDataExport(false);
   };
 
-  const handleDeleteAccount = () => {
-    // TODO: Implement account deletion
-    console.log('Deleting account...');
-    setShowDeleteConfirm(false);
-  };
 
   const handleEditProfile = () => {
     setIsEditingProfile(true);
@@ -190,6 +187,9 @@ export const MobileSettingsScreen: React.FC = () => {
           <p className="text-slate-500 mt-2">Manage your account and preferences</p>
         </div>
 
+        {/* Pending Deletion Banner */}
+        <PendingDeletionBanner />
+
         {/* Profile Section */}
         <GlassCard padding="md">
           <div>
@@ -488,30 +488,11 @@ export const MobileSettingsScreen: React.FC = () => {
           </div>
         </Modal>
 
-        {/* Delete Account Confirmation */}
-        <Modal
+        {/* Delete Account Modal */}
+        <DeleteAccountModal
           isOpen={showDeleteConfirm}
           onClose={() => setShowDeleteConfirm(false)}
-          title="Delete Account"
-        >
-          <p className="text-slate-600 mb-4">
-            This action cannot be undone. All your data will be permanently deleted.
-          </p>
-          <div className="flex space-x-3">
-            <button
-              onClick={() => setShowDeleteConfirm(false)}
-              className="flex-1 py-2 px-4 bg-gray-200 text-gray-700 rounded-lg font-medium"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleDeleteAccount}
-              className="flex-1 py-2 px-4 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition-colors"
-            >
-              Delete
-            </button>
-          </div>
-        </Modal>
+        />
       </div>
     </MobileContainer>
   );