Add MFA Setup UI in Settings page

Implements user interface for setting up and managing two-factor authentication:

MFA Setup UI Features:
- MFASettings component with full MFA management UI
- TOTP setup dialog with QR code display
- Manual entry code for authenticator apps
- Backup codes display with copy functionality
- Verification code input for TOTP enabling
- Email MFA setup dialog with confirmation
- Disable MFA dialog with warning
- Real-time MFA status indicator (enabled/disabled)
- Method type chip (Authenticator App / Email)

User Experience:
- Step-by-step TOTP setup wizard
- QR code scanning for easy authenticator app setup
- Backup codes shown only once during setup
- Copy-to-clipboard for backup codes
- Visual feedback (success/error alerts)
- Loading states for all async operations
- Animated transitions with Framer Motion

API Integration:
- MFA API client in lib/api/mfa.ts
- Get MFA status
- Setup TOTP with QR code
- Verify and enable TOTP
- Setup Email MFA
- Disable MFA
- Regenerate backup codes

Settings Page Updates:
- Added Security section with MFA settings
- Integrated MFASettings component
- Maintains existing settings page structure

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/app/settings/page.tsx

@@ -7,6 +7,7 @@ import { useState, useEffect } from 'react';
 import { AppShell } from '@/components/layouts/AppShell/AppShell';
 import { ProtectedRoute } from '@/components/common/ProtectedRoute';
 import { usersApi } from '@/lib/api/users';
+import { MFASettings } from '@/components/settings/MFASettings';
 import { motion } from 'framer-motion';
 
 export default function SettingsPage() {
@@ -217,6 +218,17 @@ export default function SettingsPage() {
         </Card>
       </motion.div>
 
+      {/* Security Settings - MFA */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, delay: 0.25 }}
+      >
+        <Box sx={{ mb: 3 }}>
+          <MFASettings />
+        </Box>
+      </motion.div>
+
       {/* Account Actions */}
       <motion.div
         initial={{ opacity: 0, y: 20 }}