Complete Settings page and fix TypeScript issues

- Create comprehensive SettingsPage with General, Storage, and Security tabs
- Add formatBytes method to settings service
- Update AdminSidebar to show real storage usage from backend
- Fix TypeScript errors with react-query v5 (isPending instead of isLoading)
- Remove unused imports and fix type imports
- Add Settings route to App.tsx
- Implement real-time storage monitoring in sidebar

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

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

frontend/src/App.tsx

@@ -17,7 +17,8 @@ import {
   EmailConfigPage,
   ArchivesPage,
   AnalyticsPage,
-  BrandingPage
+  BrandingPage,
+  SettingsPage
 } from './pages/admin';
 import { AdminLayout } from './components/admin';
 import { PageErrorBoundary, ErrorBoundary, OfflineIndicator, SkipLink } from './components/common';
@@ -76,6 +77,7 @@ function App() {
                     <Route path="email" element={<EmailConfigPage />} />
                     <Route path="analytics" element={<AnalyticsPage />} />
                     <Route path="branding" element={<BrandingPage />} />
+                    <Route path="settings" element={<SettingsPage />} />
                     <Route path="/" element={<Navigate to="/admin/dashboard" replace />} />
                   </Route>
                 </Routes>

frontend/src/components/admin/AdminSidebar.tsx

@@ -11,6 +11,8 @@ import {
   X,
   Palette
 } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { settingsService } from '../../services/settings.service';
 
 interface AdminSidebarProps {
   isOpen: boolean;
@@ -84,22 +86,51 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({ isOpen, onClose }) =
         </nav>
 
         {/* Storage Info */}
-        <div className="p-4 border-t border-neutral-200">
+        <StorageInfo />
-          <div className="bg-neutral-100 rounded-lg p-3">
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-neutral-700">Storage Used</span>
-              <span className="font-medium text-neutral-900">2.4 GB</span>
-            </div>
-            <div className="mt-2 w-full bg-neutral-200 rounded-full h-2">
-              <div 
-                className="bg-primary-600 h-2 rounded-full transition-all duration-300"
-                style={{ width: '24%' }}
-              />
-            </div>
-            <p className="text-xs text-neutral-600 mt-1">24% of 10 GB</p>
-          </div>
         </div>
       </div>
     </div>
   );
 };
+
+const StorageInfo: React.FC = () => {
+  const { data: storageInfo } = useQuery({
+    queryKey: ['storage-info'],
+    queryFn: () => settingsService.getStorageInfo(),
+    refetchInterval: 60000 // Refresh every minute
+  });
+
+  if (!storageInfo) {
+    return (
+      <div className="p-4 border-t border-neutral-200">
+        <div className="bg-neutral-100 rounded-lg p-3">
+          <div className="h-12 animate-pulse bg-neutral-200 rounded" />
+        </div>
+      </div>
+    );
+  }
+
+  const usagePercent = Math.round((storageInfo.total_used / storageInfo.storage_limit) * 100);
+
+  return (
+    <div className="p-4 border-t border-neutral-200">
+      <div className="bg-neutral-100 rounded-lg p-3">
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-neutral-700">Storage Used</span>
+          <span className="font-medium text-neutral-900">
+            {settingsService.formatBytes(storageInfo.total_used)}
+          </span>
+        </div>
+        <div className="mt-2 w-full bg-neutral-200 rounded-full h-2">
+          <div 
+            className="bg-primary-600 h-2 rounded-full transition-all duration-300"
+            style={{ width: `${Math.min(usagePercent, 100)}%` }}
+          />
+        </div>
+        <p className="text-xs text-neutral-600 mt-1">
+          {usagePercent}% of {settingsService.formatBytes(storageInfo.storage_limit)}
+        </p>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/AnalyticsPage.tsx

@@ -5,14 +5,13 @@ import {
   Users, 
   Eye,
   Download,
-  Globe,
   Smartphone,
   Monitor,
   Activity,
   RefreshCw,
   Tablet
 } from 'lucide-react';
-import { format, subDays, parseISO } from 'date-fns';
+import { format, parseISO } from 'date-fns';
 
 import { Button, Card, Loading } from '../../components/common';
 import { useQuery } from '@tanstack/react-query';

frontend/src/pages/admin/EmailConfigPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { 
   Mail, 
   Save, 
@@ -10,13 +10,12 @@ import {
   CheckCircle,
   Eye,
   EyeOff,
-  RefreshCw
 } from 'lucide-react';
 import { toast } from 'react-toastify';
 
 import { Button, Input, Card, Loading } from '../../components/common';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { emailService, EmailConfig, EmailTemplate } from '../../services/email.service';
+import { emailService, type EmailConfig, type EmailTemplate } from '../../services/email.service';
 
 const defaultTemplateKeys = [
   {
@@ -102,12 +101,9 @@ export const EmailConfigPage: React.FC = () => {
   });
 
   // Fetch SMTP config
-  const { data: fetchedConfig, isLoading: configLoading } = useQuery({
+  const { isLoading: configLoading } = useQuery({
     queryKey: ['email-config'],
     queryFn: () => emailService.getConfig(),
-    onSuccess: (data) => {
-      setSmtpConfig(data);
-    }
   });
 
   // Fetch email templates
@@ -121,11 +117,27 @@ export const EmailConfigPage: React.FC = () => {
     queryKey: ['email-template', selectedTemplateKey],
     queryFn: () => emailService.getTemplate(selectedTemplateKey),
     enabled: !!selectedTemplateKey && activeTab === 'templates',
-    onSuccess: (data) => {
-      setEditedTemplate(data);
-    }
   });
 
+  // Update local state when data is fetched
+  React.useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const config = await emailService.getConfig();
+        setSmtpConfig(config);
+      } catch (error) {
+        // Config might not exist yet
+      }
+    };
+    fetchConfig();
+  }, []);
+
+  React.useEffect(() => {
+    if (selectedTemplate) {
+      setEditedTemplate(selectedTemplate);
+    }
+  }, [selectedTemplate]);
+
   // Mutations
   const saveConfigMutation = useMutation({
     mutationFn: (config: EmailConfig) => emailService.updateConfig(config),

frontend/src/pages/admin/SettingsPage.tsx

@@ -0,0 +1,531 @@
+import React, { useState } from 'react';
+import { 
+  Save, 
+  Shield, 
+  HardDrive, 
+  Bell,
+  Database,
+  Globe,
+  Key,
+  AlertCircle,
+  CheckCircle
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+
+import { Button, Card, Input, Loading } from '../../components/common';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { settingsService, type BrandingSettings, type ThemeSettings, type StorageInfo } from '../../services/settings.service';
+
+export const SettingsPage: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'general' | 'storage' | 'security'>('general');
+  const queryClient = useQueryClient();
+
+  // Fetch settings
+  const { data: settings, isLoading } = useQuery({
+    queryKey: ['admin-settings'],
+    queryFn: () => settingsService.getAllSettings(),
+  });
+
+  // Fetch storage info
+  const { data: storageInfo } = useQuery({
+    queryKey: ['admin-storage-info'],
+    queryFn: () => settingsService.getStorageInfo(),
+    enabled: activeTab === 'storage'
+  });
+
+  // General settings state
+  const [generalSettings, setGeneralSettings] = useState({
+    site_url: '',
+    default_expiration_days: 30,
+    max_file_size_mb: 50,
+    allowed_file_types: 'jpg,jpeg,png,gif,webp',
+    enable_watermark: false,
+    enable_analytics: true,
+    enable_registration: false,
+    maintenance_mode: false
+  });
+
+  // Security settings state
+  const [securitySettings, setSecuritySettings] = useState({
+    require_password: true,
+    password_min_length: 8,
+    enable_2fa: false,
+    session_timeout_minutes: 60,
+    max_login_attempts: 5,
+    enable_recaptcha: false,
+    recaptcha_site_key: '',
+    recaptcha_secret_key: ''
+  });
+
+  React.useEffect(() => {
+    if (settings) {
+      // Extract general settings
+      setGeneralSettings({
+        site_url: settings.general_site_url || '',
+        default_expiration_days: settings.general_default_expiration_days || 30,
+        max_file_size_mb: settings.general_max_file_size_mb || 50,
+        allowed_file_types: settings.general_allowed_file_types || 'jpg,jpeg,png,gif,webp',
+        enable_watermark: settings.general_enable_watermark || false,
+        enable_analytics: settings.general_enable_analytics || true,
+        enable_registration: settings.general_enable_registration || false,
+        maintenance_mode: settings.general_maintenance_mode || false
+      });
+
+      // Extract security settings
+      setSecuritySettings({
+        require_password: settings.security_require_password || true,
+        password_min_length: settings.security_password_min_length || 8,
+        enable_2fa: settings.security_enable_2fa || false,
+        session_timeout_minutes: settings.security_session_timeout_minutes || 60,
+        max_login_attempts: settings.security_max_login_attempts || 5,
+        enable_recaptcha: settings.security_enable_recaptcha || false,
+        recaptcha_site_key: settings.security_recaptcha_site_key || '',
+        recaptcha_secret_key: settings.security_recaptcha_secret_key || ''
+      });
+    }
+  }, [settings]);
+
+  // Save mutations
+  const saveGeneralMutation = useMutation({
+    mutationFn: async () => {
+      // Save each setting
+      const promises = Object.entries(generalSettings).map(([key, value]) => 
+        fetch('/api/admin/settings/general', {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
+          },
+          body: JSON.stringify({ [`general_${key}`]: value })
+        })
+      );
+      await Promise.all(promises);
+    },
+    onSuccess: () => {
+      toast.success('General settings saved successfully');
+      queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
+    },
+    onError: () => {
+      toast.error('Failed to save general settings');
+    }
+  });
+
+  const saveSecurityMutation = useMutation({
+    mutationFn: async () => {
+      // Save each setting
+      const promises = Object.entries(securitySettings).map(([key, value]) => 
+        fetch('/api/admin/settings/security', {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
+          },
+          body: JSON.stringify({ [`security_${key}`]: value })
+        })
+      );
+      await Promise.all(promises);
+    },
+    onSuccess: () => {
+      toast.success('Security settings saved successfully');
+      queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
+    },
+    onError: () => {
+      toast.error('Failed to save security settings');
+    }
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <Loading size="lg" text="Loading settings..." />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-neutral-900">System Settings</h1>
+        <p className="text-neutral-600 mt-1">Configure system-wide settings and preferences</p>
+      </div>
+
+      {/* Tab Navigation */}
+      <div className="border-b border-neutral-200 mb-6">
+        <nav className="-mb-px flex gap-6">
+          <button
+            onClick={() => setActiveTab('general')}
+            className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
+              activeTab === 'general'
+                ? 'border-primary-600 text-primary-600'
+                : 'border-transparent text-neutral-500 hover:text-neutral-700'
+            }`}
+          >
+            General
+          </button>
+          <button
+            onClick={() => setActiveTab('storage')}
+            className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
+              activeTab === 'storage'
+                ? 'border-primary-600 text-primary-600'
+                : 'border-transparent text-neutral-500 hover:text-neutral-700'
+            }`}
+          >
+            Storage
+          </button>
+          <button
+            onClick={() => setActiveTab('security')}
+            className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
+              activeTab === 'security'
+                ? 'border-primary-600 text-primary-600'
+                : 'border-transparent text-neutral-500 hover:text-neutral-700'
+            }`}
+          >
+            Security
+          </button>
+        </nav>
+      </div>
+
+      {/* General Settings Tab */}
+      {activeTab === 'general' && (
+        <div className="space-y-6">
+          <Card className="p-6">
+            <h2 className="text-lg font-semibold text-neutral-900 mb-4">Site Configuration</h2>
+            
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-neutral-700 mb-1">
+                  Site URL
+                </label>
+                <Input
+                  type="url"
+                  value={generalSettings.site_url}
+                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, site_url: e.target.value }))}
+                  placeholder="https://yourdomain.com"
+                  leftIcon={<Globe className="w-5 h-5 text-neutral-400" />}
+                />
+                <p className="text-xs text-neutral-500 mt-1">
+                  Used for generating gallery links in emails
+                </p>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-neutral-700 mb-1">
+                    Default Expiration (days)
+                  </label>
+                  <Input
+                    type="number"
+                    value={generalSettings.default_expiration_days}
+                    onChange={(e) => setGeneralSettings(prev => ({ ...prev, default_expiration_days: parseInt(e.target.value) || 30 }))}
+                    min="1"
+                    max="365"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-neutral-700 mb-1">
+                    Max File Size (MB)
+                  </label>
+                  <Input
+                    type="number"
+                    value={generalSettings.max_file_size_mb}
+                    onChange={(e) => setGeneralSettings(prev => ({ ...prev, max_file_size_mb: parseInt(e.target.value) || 50 }))}
+                    min="1"
+                    max="500"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-neutral-700 mb-1">
+                  Allowed File Types
+                </label>
+                <Input
+                  type="text"
+                  value={generalSettings.allowed_file_types}
+                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, allowed_file_types: e.target.value }))}
+                  placeholder="jpg,jpeg,png,gif"
+                />
+                <p className="text-xs text-neutral-500 mt-1">
+                  Comma-separated list of file extensions
+                </p>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <h2 className="text-lg font-semibold text-neutral-900 mb-4">Feature Toggles</h2>
+            
+            <div className="space-y-3">
+              <label className="flex items-center">
+                <input
+                  type="checkbox"
+                  checked={generalSettings.enable_watermark}
+                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, enable_watermark: e.target.checked }))}
+                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
+                />
+                <span className="ml-2 text-sm text-neutral-700">Enable watermark on photos</span>
+              </label>
+
+              <label className="flex items-center">
+                <input
+                  type="checkbox"
+                  checked={generalSettings.enable_analytics}
+                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, enable_analytics: e.target.checked }))}
+                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
+                />
+                <span className="ml-2 text-sm text-neutral-700">Enable analytics tracking</span>
+              </label>
+
+              <label className="flex items-center">
+                <input
+                  type="checkbox"
+                  checked={generalSettings.enable_registration}
+                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, enable_registration: e.target.checked }))}
+                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
+                />
+                <span className="ml-2 text-sm text-neutral-700">Allow self-registration for admins</span>
+              </label>
+
+              <label className="flex items-center">
+                <input
+                  type="checkbox"
+                  checked={generalSettings.maintenance_mode}
+                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, maintenance_mode: e.target.checked }))}
+                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
+                />
+                <span className="ml-2 text-sm text-neutral-700">Enable maintenance mode</span>
+              </label>
+            </div>
+
+            <div className="mt-6">
+              <Button
+                variant="primary"
+                onClick={() => saveGeneralMutation.mutate()}
+                isLoading={saveGeneralMutation.isPending}
+                leftIcon={<Save className="w-5 h-5" />}
+              >
+                Save General Settings
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {/* Storage Tab */}
+      {activeTab === 'storage' && storageInfo && (
+        <div className="space-y-6">
+          <Card className="p-6">
+            <h2 className="text-lg font-semibold text-neutral-900 mb-4">Storage Overview</h2>
+            
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+              <div className="bg-neutral-50 rounded-lg p-4">
+                <p className="text-sm text-neutral-600">Total Used</p>
+                <p className="text-2xl font-bold text-neutral-900">
+                  {settingsService.formatBytes(storageInfo.total_used)}
+                </p>
+              </div>
+              <div className="bg-neutral-50 rounded-lg p-4">
+                <p className="text-sm text-neutral-600">Archive Storage</p>
+                <p className="text-2xl font-bold text-neutral-900">
+                  {settingsService.formatBytes(storageInfo.archive_storage)}
+                </p>
+              </div>
+              <div className="bg-neutral-50 rounded-lg p-4">
+                <p className="text-sm text-neutral-600">Storage Limit</p>
+                <p className="text-2xl font-bold text-neutral-900">
+                  {settingsService.formatBytes(storageInfo.storage_limit)}
+                </p>
+              </div>
+            </div>
+
+            <div className="mb-4">
+              <div className="flex justify-between text-sm mb-1">
+                <span className="text-neutral-600">Storage Usage</span>
+                <span className="font-medium">
+                  {Math.round((storageInfo.total_used / storageInfo.storage_limit) * 100)}%
+                </span>
+              </div>
+              <div className="w-full bg-neutral-200 rounded-full h-3">
+                <div
+                  className="bg-primary-600 h-3 rounded-full transition-all"
+                  style={{ 
+                    width: `${Math.min((storageInfo.total_used / storageInfo.storage_limit) * 100, 100)}%` 
+                  }}
+                />
+              </div>
+            </div>
+
+            <div className="mt-6">
+              <h3 className="text-sm font-semibold text-neutral-900 mb-3">Storage by Event</h3>
+              <div className="space-y-2">
+                {storageInfo.storage_by_event.slice(0, 10).map((event) => (
+                  <div key={event.id} className="flex items-center justify-between py-2 border-b border-neutral-100">
+                    <span className="text-sm text-neutral-700">{event.event_name}</span>
+                    <span className="text-sm font-medium text-neutral-900">
+                      {settingsService.formatBytes(event.size)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-start gap-3">
+              <Database className="w-5 h-5 text-amber-600 flex-shrink-0" />
+              <div>
+                <h3 className="text-sm font-semibold text-amber-900">Storage Management</h3>
+                <p className="text-sm text-amber-700 mt-1">
+                  Consider archiving or deleting old events to free up storage space. 
+                  Archived events are compressed and use less storage than active galleries.
+                </p>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {/* Security Tab */}
+      {activeTab === 'security' && (
+        <div className="space-y-6">
+          <Card className="p-6">
+            <h2 className="text-lg font-semibold text-neutral-900 mb-4">Password Settings</h2>
+            
+            <div className="space-y-4">
+              <label className="flex items-center">
+                <input
+                  type="checkbox"
+                  checked={securitySettings.require_password}
+                  onChange={(e) => setSecuritySettings(prev => ({ ...prev, require_password: e.target.checked }))}
+                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
+                />
+                <span className="ml-2 text-sm text-neutral-700">Require password for all galleries</span>
+              </label>
+
+              <div>
+                <label className="block text-sm font-medium text-neutral-700 mb-1">
+                  Minimum Password Length
+                </label>
+                <Input
+                  type="number"
+                  value={securitySettings.password_min_length}
+                  onChange={(e) => setSecuritySettings(prev => ({ ...prev, password_min_length: parseInt(e.target.value) || 8 }))}
+                  min="4"
+                  max="32"
+                />
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <h2 className="text-lg font-semibold text-neutral-900 mb-4">Session & Authentication</h2>
+            
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-neutral-700 mb-1">
+                    Session Timeout (minutes)
+                  </label>
+                  <Input
+                    type="number"
+                    value={securitySettings.session_timeout_minutes}
+                    onChange={(e) => setSecuritySettings(prev => ({ ...prev, session_timeout_minutes: parseInt(e.target.value) || 60 }))}
+                    min="5"
+                    max="1440"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-neutral-700 mb-1">
+                    Max Login Attempts
+                  </label>
+                  <Input
+                    type="number"
+                    value={securitySettings.max_login_attempts}
+                    onChange={(e) => setSecuritySettings(prev => ({ ...prev, max_login_attempts: parseInt(e.target.value) || 5 }))}
+                    min="3"
+                    max="10"
+                  />
+                </div>
+              </div>
+
+              <label className="flex items-center">
+                <input
+                  type="checkbox"
+                  checked={securitySettings.enable_2fa}
+                  onChange={(e) => setSecuritySettings(prev => ({ ...prev, enable_2fa: e.target.checked }))}
+                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
+                />
+                <span className="ml-2 text-sm text-neutral-700">Enable two-factor authentication for admins</span>
+              </label>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <h2 className="text-lg font-semibold text-neutral-900 mb-4">reCAPTCHA Settings</h2>
+            
+            <div className="space-y-4">
+              <label className="flex items-center">
+                <input
+                  type="checkbox"
+                  checked={securitySettings.enable_recaptcha}
+                  onChange={(e) => setSecuritySettings(prev => ({ ...prev, enable_recaptcha: e.target.checked }))}
+                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
+                />
+                <span className="ml-2 text-sm text-neutral-700">Enable reCAPTCHA for login forms</span>
+              </label>
+
+              {securitySettings.enable_recaptcha && (
+                <>
+                  <div>
+                    <label className="block text-sm font-medium text-neutral-700 mb-1">
+                      Site Key
+                    </label>
+                    <Input
+                      type="text"
+                      value={securitySettings.recaptcha_site_key}
+                      onChange={(e) => setSecuritySettings(prev => ({ ...prev, recaptcha_site_key: e.target.value }))}
+                      placeholder="Your reCAPTCHA site key"
+                      leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-neutral-700 mb-1">
+                      Secret Key
+                    </label>
+                    <Input
+                      type="password"
+                      value={securitySettings.recaptcha_secret_key}
+                      onChange={(e) => setSecuritySettings(prev => ({ ...prev, recaptcha_secret_key: e.target.value }))}
+                      placeholder="Your reCAPTCHA secret key"
+                      leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
+                    />
+                  </div>
+                </>
+              )}
+
+              <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
+                <div className="flex items-start gap-3">
+                  <AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0" />
+                  <div className="text-sm text-blue-800">
+                    <p>Get your reCAPTCHA keys from <a href="https://www.google.com/recaptcha/admin" target="_blank" rel="noopener noreferrer" className="underline">Google reCAPTCHA Admin</a></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-6">
+              <Button
+                variant="primary"
+                onClick={() => saveSecurityMutation.mutate()}
+                isLoading={saveSecurityMutation.isPending}
+                leftIcon={<Save className="w-5 h-5" />}
+              >
+                Save Security Settings
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/pages/admin/index.ts

@@ -7,3 +7,4 @@ export { EmailConfigPage } from './EmailConfigPage';
 export { ArchivesPage } from './ArchivesPage';
 export { AnalyticsPage } from './AnalyticsPage';
 export { BrandingPage } from './BrandingPage';
+export { SettingsPage } from './SettingsPage';

frontend/src/services/settings.service.ts

@@ -93,5 +93,14 @@ export const settingsService = {
   // Format theme settings from raw data
   formatThemeSettings(rawSettings: Record<string, any>): ThemeSettings {
     return rawSettings.theme_config || {};
+  },
+
+  // Format bytes to human readable
+  formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
   }
 };