Spaces:
Sleeping
Sleeping
| /** | |
| * Settings & Maintenance Panel Component | |
| * | |
| * System settings management with: | |
| * - Maintenance mode toggle | |
| * - System configuration | |
| * - API rate limits | |
| */ | |
| import React, { useState, useEffect, useCallback } from 'react'; | |
| import { | |
| Settings, RefreshCw, Save, Wrench, AlertTriangle, Check, | |
| Clock, Shield, Zap, Power, MessageSquare, Edit3, | |
| XCircle, ChevronRight | |
| } from 'lucide-react'; | |
| import { getToken } from '../../services/api'; | |
| const API_BASE = import.meta.env.VITE_API_URL || ''; | |
| // Setting input component | |
| const SettingInput = ({ setting, onUpdate }) => { | |
| const [value, setValue] = useState(setting.value); | |
| const [editing, setEditing] = useState(false); | |
| const [saving, setSaving] = useState(false); | |
| const handleSave = async () => { | |
| setSaving(true); | |
| try { | |
| await onUpdate(setting.key, value); | |
| setEditing(false); | |
| } catch (err) { | |
| console.error('Error saving setting:', err); | |
| } finally { | |
| setSaving(false); | |
| } | |
| }; | |
| return ( | |
| <div className="setting-item"> | |
| <div className="setting-info"> | |
| <label>{setting.key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</label> | |
| {setting.description && <p className="setting-description">{setting.description}</p>} | |
| </div> | |
| <div className="setting-control"> | |
| {editing ? ( | |
| <div className="edit-controls"> | |
| <input | |
| type="text" | |
| value={value} | |
| onChange={(e) => setValue(e.target.value)} | |
| className="setting-input" | |
| /> | |
| <button className="save-btn" onClick={handleSave} disabled={saving}> | |
| {saving ? <RefreshCw size={14} className="spinning" /> : <Check size={14} />} | |
| </button> | |
| <button className="cancel-btn" onClick={() => { setEditing(false); setValue(setting.value); }}> | |
| <XCircle size={14} /> | |
| </button> | |
| </div> | |
| ) : ( | |
| <div className="display-controls"> | |
| <span className="setting-value"> | |
| {setting.is_sensitive ? '••••••••' : setting.value} | |
| </span> | |
| <button className="edit-btn" onClick={() => setEditing(true)}> | |
| <Edit3 size={14} /> | |
| </button> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| function SettingsMaintenancePanel() { | |
| const [settings, setSettings] = useState({}); | |
| const [maintenance, setMaintenance] = useState({ enabled: false, message: '' }); | |
| const [apiLimits, setApiLimits] = useState({}); | |
| const [loading, setLoading] = useState(true); | |
| const [error, setError] = useState(null); | |
| const [saving, setSaving] = useState(false); | |
| const [maintenanceMessage, setMaintenanceMessage] = useState(''); | |
| // Fetch settings | |
| const fetchSettings = useCallback(async () => { | |
| setLoading(true); | |
| setError(null); | |
| try { | |
| const token = getToken(); | |
| // Fetch settings | |
| const settingsRes = await fetch(`${API_BASE}/api/admin/settings`, { | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (settingsRes.ok) { | |
| const data = await settingsRes.json(); | |
| if (data.success) { | |
| setSettings(data.settings); | |
| } | |
| } | |
| // Fetch maintenance status | |
| const maintenanceRes = await fetch(`${API_BASE}/api/admin/maintenance`, { | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (maintenanceRes.ok) { | |
| const data = await maintenanceRes.json(); | |
| if (data.success) { | |
| setMaintenance({ | |
| enabled: data.maintenance_mode, | |
| message: data.message || '' | |
| }); | |
| setMaintenanceMessage(data.message || ''); | |
| } | |
| } | |
| // Fetch API limits | |
| const limitsRes = await fetch(`${API_BASE}/api/admin/api-limits`, { | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (limitsRes.ok) { | |
| const data = await limitsRes.json(); | |
| if (data.success) { | |
| setApiLimits(data.limits); | |
| } | |
| } | |
| } catch (err) { | |
| setError(err.message); | |
| } finally { | |
| setLoading(false); | |
| } | |
| }, []); | |
| // Toggle maintenance mode | |
| const toggleMaintenance = async () => { | |
| setSaving(true); | |
| setError(null); | |
| try { | |
| const token = getToken(); | |
| if (!token) { | |
| setError('Not authenticated. Please log in again.'); | |
| return; | |
| } | |
| const response = await fetch(`${API_BASE}/api/admin/maintenance/toggle`, { | |
| method: 'POST', | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| if (data.success) { | |
| setMaintenance(prev => ({ ...prev, enabled: data.maintenance_mode })); | |
| } else { | |
| setError(data.detail || 'Failed to toggle maintenance mode'); | |
| } | |
| } else { | |
| const errorData = await response.json().catch(() => ({})); | |
| setError(errorData.detail || `Failed to toggle maintenance mode (${response.status})`); | |
| } | |
| } catch (err) { | |
| console.error('Error toggling maintenance:', err); | |
| setError('Network error: Could not connect to server'); | |
| } finally { | |
| setSaving(false); | |
| } | |
| }; | |
| // Update maintenance message | |
| const updateMaintenanceMessage = async () => { | |
| setSaving(true); | |
| try { | |
| const token = getToken(); | |
| const response = await fetch(`${API_BASE}/api/admin/maintenance/message`, { | |
| method: 'PUT', | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ message: maintenanceMessage }) | |
| }); | |
| if (response.ok) { | |
| setMaintenance(prev => ({ ...prev, message: maintenanceMessage })); | |
| } | |
| } catch (err) { | |
| console.error('Error updating message:', err); | |
| } finally { | |
| setSaving(false); | |
| } | |
| }; | |
| // Update a setting | |
| const updateSetting = async (key, value) => { | |
| const token = getToken(); | |
| const response = await fetch(`${API_BASE}/api/admin/settings/${key}`, { | |
| method: 'PUT', | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ value }) | |
| }); | |
| if (response.ok) { | |
| fetchSettings(); // Refresh settings | |
| } else { | |
| throw new Error('Failed to update setting'); | |
| } | |
| }; | |
| // Update API limits | |
| const updateApiLimits = async () => { | |
| setSaving(true); | |
| try { | |
| const token = getToken(); | |
| const response = await fetch(`${API_BASE}/api/admin/api-limits`, { | |
| method: 'PUT', | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify(apiLimits) | |
| }); | |
| if (response.ok) { | |
| console.log('API limits updated'); | |
| } | |
| } catch (err) { | |
| console.error('Error updating limits:', err); | |
| } finally { | |
| setSaving(false); | |
| } | |
| }; | |
| // Initial fetch | |
| useEffect(() => { | |
| fetchSettings(); | |
| }, [fetchSettings]); | |
| if (loading) { | |
| return ( | |
| <div className="admin-loading"> | |
| <RefreshCw className="spinning" size={40} /> | |
| <p>Loading settings...</p> | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div className="settings-maintenance-panel" style={{ padding: '0' }}> | |
| {/* Error Display */} | |
| {error && ( | |
| <div style={{ | |
| padding: '1rem', | |
| marginBottom: '1rem', | |
| backgroundColor: 'rgba(239, 68, 68, 0.1)', | |
| border: '1px solid rgba(239, 68, 68, 0.3)', | |
| borderRadius: '8px', | |
| color: '#ef4444', | |
| display: 'flex', | |
| alignItems: 'center', | |
| justifyContent: 'space-between' | |
| }}> | |
| <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}> | |
| <AlertTriangle size={18} /> | |
| <span>{error}</span> | |
| </div> | |
| <button | |
| onClick={() => setError(null)} | |
| style={{ | |
| background: 'transparent', | |
| border: 'none', | |
| color: '#ef4444', | |
| cursor: 'pointer', | |
| padding: '4px' | |
| }} | |
| > | |
| <XCircle size={18} /> | |
| </button> | |
| </div> | |
| )} | |
| {/* Header */} | |
| <div style={{ | |
| display: 'flex', | |
| justifyContent: 'space-between', | |
| alignItems: 'center', | |
| marginBottom: '1.5rem' | |
| }}> | |
| <div> | |
| <h2 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '0.5rem', color: '#f3f4f6' }}> | |
| <Wrench size={24} /> | |
| Maintenance & Settings | |
| </h2> | |
| <p style={{ margin: '0.5rem 0 0', color: '#9ca3af', fontSize: '0.9rem' }}> | |
| Control system maintenance mode and API rate limits | |
| </p> | |
| </div> | |
| <button onClick={fetchSettings} style={{ | |
| display: 'flex', | |
| alignItems: 'center', | |
| gap: '0.5rem', | |
| padding: '0.5rem 1rem', | |
| background: 'rgba(255, 255, 255, 0.1)', | |
| color: 'white', | |
| border: '1px solid rgba(255, 255, 255, 0.2)', | |
| borderRadius: '8px', | |
| cursor: 'pointer', | |
| transition: 'all 0.2s' | |
| }}> | |
| <RefreshCw size={16} /> | |
| Refresh | |
| </button> | |
| </div> | |
| {/* Maintenance Mode Card */} | |
| <div className="admin-stat-card" style={{ | |
| marginBottom: '1.5rem', | |
| padding: '1.5rem', | |
| backgroundColor: maintenance.enabled ? 'rgba(245, 158, 11, 0.1)' : 'rgba(16, 185, 129, 0.05)', | |
| border: `1px solid ${maintenance.enabled ? 'rgba(245, 158, 11, 0.3)' : 'rgba(16, 185, 129, 0.2)'}` | |
| }}> | |
| <div style={{ | |
| display: 'flex', | |
| justifyContent: 'space-between', | |
| alignItems: 'center', | |
| marginBottom: '1.5rem' | |
| }}> | |
| <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}> | |
| <div style={{ | |
| width: '60px', | |
| height: '60px', | |
| borderRadius: '12px', | |
| display: 'flex', | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| backgroundColor: maintenance.enabled ? 'rgba(245, 158, 11, 0.2)' : 'rgba(16, 185, 129, 0.2)' | |
| }}> | |
| <Power size={28} style={{ color: maintenance.enabled ? '#f59e0b' : '#10b981' }} /> | |
| </div> | |
| <div> | |
| <h3 style={{ | |
| margin: 0, | |
| fontSize: '1.25rem', | |
| color: maintenance.enabled ? '#f59e0b' : '#10b981' | |
| }}> | |
| {maintenance.enabled ? 'Maintenance Mode Active' : 'System Online'} | |
| </h3> | |
| <p style={{ margin: '0.25rem 0 0', color: '#9ca3af', fontSize: '0.9rem' }}> | |
| {maintenance.enabled | |
| ? 'Users will see a maintenance message when accessing the site.' | |
| : 'All users can access the system normally.'} | |
| </p> | |
| </div> | |
| </div> | |
| <button | |
| onClick={toggleMaintenance} | |
| disabled={saving} | |
| style={{ | |
| padding: '0.75rem 1.5rem', | |
| borderRadius: '10px', | |
| border: 'none', | |
| fontWeight: '600', | |
| cursor: saving ? 'not-allowed' : 'pointer', | |
| background: maintenance.enabled | |
| ? 'linear-gradient(135deg, #10b981 0%, #059669 100%)' | |
| : 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)', | |
| color: 'white', | |
| display: 'flex', | |
| alignItems: 'center', | |
| gap: '0.5rem', | |
| opacity: saving ? 0.7 : 1 | |
| }} | |
| > | |
| {saving ? ( | |
| <RefreshCw size={16} className="spin" /> | |
| ) : maintenance.enabled ? ( | |
| <>Disable Maintenance</> | |
| ) : ( | |
| <>Enable Maintenance</> | |
| )} | |
| </button> | |
| </div> | |
| {/* Maintenance Message Editor */} | |
| <div style={{ marginTop: '1rem' }}> | |
| <label style={{ | |
| display: 'flex', | |
| alignItems: 'center', | |
| gap: '0.5rem', | |
| marginBottom: '0.5rem', | |
| fontSize: '0.9rem', | |
| color: '#9ca3af' | |
| }}> | |
| <MessageSquare size={16} /> | |
| Maintenance Message (shown to users) | |
| </label> | |
| <textarea | |
| value={maintenanceMessage} | |
| onChange={(e) => setMaintenanceMessage(e.target.value)} | |
| placeholder="Enter a message to display to users during maintenance..." | |
| rows={3} | |
| style={{ | |
| width: '100%', | |
| padding: '0.75rem', | |
| borderRadius: '8px', | |
| border: '1px solid rgba(255,255,255,0.1)', | |
| backgroundColor: 'rgba(0,0,0,0.3)', | |
| color: 'white', | |
| fontSize: '1rem', | |
| resize: 'vertical', | |
| marginBottom: '0.75rem' | |
| }} | |
| /> | |
| <button | |
| onClick={updateMaintenanceMessage} | |
| disabled={saving || maintenanceMessage === maintenance.message} | |
| style={{ | |
| display: 'flex', | |
| alignItems: 'center', | |
| gap: '0.5rem', | |
| padding: '0.625rem 1.25rem', | |
| background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', | |
| border: 'none', | |
| borderRadius: '8px', | |
| color: 'white', | |
| fontWeight: '600', | |
| cursor: (saving || maintenanceMessage === maintenance.message) ? 'not-allowed' : 'pointer', | |
| opacity: (saving || maintenanceMessage === maintenance.message) ? 0.5 : 1 | |
| }} | |
| > | |
| <Save size={16} /> | |
| Save Message | |
| </button> | |
| </div> | |
| </div> | |
| {/* API Rate Limits Card */} | |
| <div className="admin-stat-card" style={{ padding: '1.5rem' }}> | |
| <h3 style={{ margin: '0 0 1rem', display: 'flex', alignItems: 'center', gap: '0.5rem', color: '#f3f4f6' }}> | |
| <Zap size={18} /> | |
| API Rate Limits | |
| </h3> | |
| <div style={{ | |
| display: 'grid', | |
| gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', | |
| gap: '1rem', | |
| marginBottom: '1rem' | |
| }}> | |
| <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}> | |
| <label style={{ fontSize: '0.9rem', color: '#9ca3af' }}>Requests per Minute</label> | |
| <input | |
| type="number" | |
| value={apiLimits.requests_per_minute || 60} | |
| onChange={(e) => setApiLimits(prev => ({ ...prev, requests_per_minute: parseInt(e.target.value) }))} | |
| style={{ | |
| padding: '0.75rem', | |
| borderRadius: '8px', | |
| border: '1px solid rgba(255,255,255,0.1)', | |
| backgroundColor: 'rgba(0,0,0,0.3)', | |
| color: 'white', | |
| fontSize: '1rem' | |
| }} | |
| /> | |
| </div> | |
| <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}> | |
| <label style={{ fontSize: '0.9rem', color: '#9ca3af' }}>Interviews per Day</label> | |
| <input | |
| type="number" | |
| value={apiLimits.interviews_per_day || 10} | |
| onChange={(e) => setApiLimits(prev => ({ ...prev, interviews_per_day: parseInt(e.target.value) }))} | |
| style={{ | |
| padding: '0.75rem', | |
| borderRadius: '8px', | |
| border: '1px solid rgba(255,255,255,0.1)', | |
| backgroundColor: 'rgba(0,0,0,0.3)', | |
| color: 'white', | |
| fontSize: '1rem' | |
| }} | |
| /> | |
| </div> | |
| <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}> | |
| <label style={{ fontSize: '0.9rem', color: '#9ca3af' }}>AI Calls per Hour</label> | |
| <input | |
| type="number" | |
| value={apiLimits.ai_calls_per_hour || 100} | |
| onChange={(e) => setApiLimits(prev => ({ ...prev, ai_calls_per_hour: parseInt(e.target.value) }))} | |
| style={{ | |
| padding: '0.75rem', | |
| borderRadius: '8px', | |
| border: '1px solid rgba(255,255,255,0.1)', | |
| backgroundColor: 'rgba(0,0,0,0.3)', | |
| color: 'white', | |
| fontSize: '1rem' | |
| }} | |
| /> | |
| </div> | |
| </div> | |
| <button | |
| onClick={updateApiLimits} | |
| disabled={saving} | |
| style={{ | |
| display: 'flex', | |
| alignItems: 'center', | |
| gap: '0.5rem', | |
| padding: '0.625rem 1.25rem', | |
| background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', | |
| border: 'none', | |
| borderRadius: '8px', | |
| color: 'white', | |
| fontWeight: '600', | |
| cursor: saving ? 'not-allowed' : 'pointer', | |
| opacity: saving ? 0.7 : 1 | |
| }} | |
| > | |
| <Save size={16} /> | |
| Save Rate Limits | |
| </button> | |
| </div> | |
| <style>{` | |
| .settings-maintenance-panel .spin { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| `}</style> | |
| </div> | |
| ); | |
| } | |
| export default SettingsMaintenancePanel; | |