diff --git a/src/App.js b/src/App.js index 8b96799..b19c42b 100644 --- a/src/App.js +++ b/src/App.js @@ -7,6 +7,7 @@ import RequestForm from './components/Requests/RequestForm'; import ScheduledPage from './components/Scheduled/ScheduledPage'; import NewRequestPage from './components/Requests/NewRequestPage'; import HistoryPage from './components/History/HistoryPage'; +import SettingsPage from './components/Settings/SettingsPage'; function App() { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); @@ -24,6 +25,8 @@ function App() { ? 'Nueva Solicitud' : activeView === 'history' ? 'Historial' + : activeView === 'settings' + ? 'Configuración' : 'Dashboard'; return ( @@ -42,6 +45,8 @@ function App() { ) : activeView === 'history' ? ( + ) : activeView === 'settings' ? ( + ) : ( diff --git a/src/components/Settings/SettingsPage.js b/src/components/Settings/SettingsPage.js new file mode 100644 index 0000000..26b8072 --- /dev/null +++ b/src/components/Settings/SettingsPage.js @@ -0,0 +1,151 @@ +import React, { useEffect, useState } from 'react'; +import '../../styles/components.css'; + +// Simple settings persisted in localStorage +const DEFAULT_SETTINGS = { + timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC', + theme: 'light', + notifications: true, + apiBaseUrl: '' +}; + +const loadSettings = () => { + try { + const raw = localStorage.getItem('app_settings'); + if (!raw) return DEFAULT_SETTINGS; + const parsed = JSON.parse(raw); + return { ...DEFAULT_SETTINGS, ...parsed }; + } catch { + return DEFAULT_SETTINGS; + } +}; + +const saveSettings = (settings) => { + localStorage.setItem('app_settings', JSON.stringify(settings)); +}; + +const SettingsPage = () => { + const [settings, setSettings] = useState(loadSettings); + const [saved, setSaved] = useState(false); + + useEffect(() => { + if (!saved) return; + const t = setTimeout(() => setSaved(false), 2000); + return () => clearTimeout(t); + }, [saved]); + + const handleChange = (e) => { + const { name, value, type, checked } = e.target; + setSettings((s) => ({ + ...s, + [name]: type === 'checkbox' ? checked : value + })); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + saveSettings(settings); + setSaved(true); + }; + + const handleReset = () => { + setSettings(DEFAULT_SETTINGS); + saveSettings(DEFAULT_SETTINGS); + }; + + return ( + + + + + + Configuración + + + + Ajusta las preferencias de la aplicación. Estos valores se guardan en este navegador. + + + + + + + + + Preferencias + + + + + + Zona horaria + + + + + Tema + + Claro + Oscuro + Sistema + + + + + + + Habilitar notificaciones + + + + + API Base URL + + + Base para las solicitudes HTTP; si se deja vacío, se usará la URL por defecto del sistema. + + + + + + + + Guardar cambios + + + Restablecer + + {saved && ( + + + Guardado + + )} + + + + + + ); +}; + +export default SettingsPage;
+ Ajusta las preferencias de la aplicación. Estos valores se guardan en este navegador. +