From c346e1ad53f4fd71b9ae6bc74f7415d4648e4a5a Mon Sep 17 00:00:00 2001 From: rafael Date: Sat, 22 Nov 2025 22:22:20 -0400 Subject: [PATCH] Add "Ayuda" page and update navigation to support new view Introduced the `HelpPage` component to provide user guidance, troubleshooting tips, and quick-start instructions. Updated navigation and dynamic header title logic to include the new "help" view. Adjusted `App.js` to handle the new view state and display `HelpPage`. --- src/App.js | 5 ++ src/components/Help/HelpPage.js | 95 +++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+) create mode 100644 src/components/Help/HelpPage.js diff --git a/src/App.js b/src/App.js index 7c5c707..593486a 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import ScheduledPage from './components/Scheduled/ScheduledPage'; import NewRequestPage from './components/Requests/NewRequestPage'; import HistoryPage from './components/History/HistoryPage'; import SettingsPage from './components/Settings/SettingsPage'; +import HelpPage from './components/Help/HelpPage'; function App() { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); @@ -60,6 +61,8 @@ function App() { ? 'Historial' : activeView === 'settings' ? 'Configuración' + : activeView === 'help' + ? 'Ayuda' : 'Dashboard'; return ( @@ -80,6 +83,8 @@ function App() { ) : activeView === 'settings' ? ( + ) : activeView === 'help' ? ( + ) : (
diff --git a/src/components/Help/HelpPage.js b/src/components/Help/HelpPage.js new file mode 100644 index 0000000..805a19c --- /dev/null +++ b/src/components/Help/HelpPage.js @@ -0,0 +1,95 @@ +import React from 'react'; +import '../../styles/components.css'; + +const HelpSection = ({ icon, title, children }) => ( +
+
+

+ + {title} +

+
+
{children}
+
+); + +const HelpPage = () => { + return ( +
+
+
+

+ + Centro de ayuda +

+
+

+ Aquí encontrarás una guía rápida para usar Request Scheduler, ejemplos y respuestas a preguntas frecuentes. +

+
+ +
+ +
    +
  1. Ve a Crear Solicitud e ingresa la URL del servicio que deseas invocar.
    2. +
  2. Selecciona el método HTTP y, si aplica, agrega cuerpo y headers (JSON).
    3. +
  3. Haz clic en Enviar ahora para probar o usa Programar para ejecutar más tarde.
    4. +
  4. Consulta el resultado en Historial o edita tus tareas en Solicitudes Programadas.
    5. +
+ + + +

+ Puedes programar ejecuciones únicas o periódicas. El sistema admite intervalos simples (por ejemplo, + cada 15 minutos) y fechas específicas. En la tabla de programadas usa el botón Editar para modificar + frecuencia, payload y headers. +

+
    +
  • Zona horaria: configurable en Configuración.
    • +
  • Headers: usa JSON válido, por ejemplo: {'{"Authorization":"Bearer "}'}.
    • +
  • Prueba antes de programar para verificar que el endpoint responda como esperas.
    • +
+ + + +

+ Los créditos representan tu cuota disponible de ejecuciones. Desde el encabezado puedes + recargarlos manualmente para fines de prueba ( Recargar créditos). + El valor se guarda en este navegador. +

+ + + +
    +
  • + Error 4xx/5xx: revisa la URL, método y autenticación. Verifica los headers y el cuerpo enviado. +
    • +
  • + JSON inválido: en headers/cuerpo debes usar JSON válido. Puedes validar con + JSONLint. +
    • +
  • + No veo mis cambios: intenta refrescar la página o limpiar el almacenamiento local del navegador. +
    • +
+ + + +
    +
  • Ctrl/Cmd + Enter: enviar formulario (cuando un formulario está enfocado).
    • +
  • Ctrl/Cmd + K: abrir búsqueda del navegador para filtrar (temporal).
    • +
+ + + +

+ ¿Necesitas ayuda adicional? Envía los detalles de tu solicitud (URL, método, headers y respuesta) al + administrador del sistema o a tu equipo de soporte interno. +

+ +
+
+ ); +}; + +export default HelpPage;