From 5571d29b83f1021e0a9712c1ee1a797561fc572d Mon Sep 17 00:00:00 2001
From: rafael <rafaelminaya20@hotmail.com>
Date: Thu, 20 Nov 2025 18:45:17 -0400
Subject: [PATCH] Add scheduled requests feature with navigation, forms, and
 table components

Introduced a new 'Solicitudes Programadas' section with full CRUD functionality using localStorage for persistence. Added navigation to toggle between dashboard and scheduled views. Updated the header, sidebar, and main content to support dynamic titles and active views. Included components for viewing and managing scheduled requests (form and table). Enhanced styles for the new section.
---
 src/App.js                                 |  30 +++--
 src/components/Layout/Header.js            |   8 +-
 src/components/Layout/Sidebar.js           |  27 +++--
 src/components/Scheduled/ScheduledForm.js  | 135 +++++++++++++++++++++
 src/components/Scheduled/ScheduledPage.js  | 130 ++++++++++++++++++++
 src/components/Scheduled/ScheduledTable.js |  84 +++++++++++++
 6 files changed, 392 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Scheduled/ScheduledForm.js
 create mode 100644 src/components/Scheduled/ScheduledPage.js
 create mode 100644 src/components/Scheduled/ScheduledTable.js

diff --git a/src/App.js b/src/App.js
index cba1eaf..f51dcc8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,27 +4,41 @@ import { Sidebar, Header } from './components/Layout';
 import { DashboardCards } from './components/Dashboard';
 import RequestTable from './components/Requests/RequestTable';
 import RequestForm from './components/Requests/RequestForm';
+import ScheduledPage from './components/Scheduled/ScheduledPage';
 
 function App() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [activeView, setActiveView] = useState('dashboard'); // 'dashboard' | 'scheduled'
 
   const handleToggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
+  const handleNavigate = (key) => {
+    setActiveView(key);
+    setIsMobileMenuOpen(false);
+  };
+
+  const headerTitle = activeView === 'scheduled' ? 'Solicitudes Programadas' : 'Dashboard';
 
   return (
     <div className="container">
       <Sidebar 
         isMobileMenuOpen={isMobileMenuOpen} 
         onToggleMobileMenu={handleToggleMobileMenu}
+        activeView={activeView}
+        onNavigate={handleNavigate}
       />
       <main className="main-content">
-        <Header />
-        <section className="content-wrapper">
-          <DashboardCards />
-          <div className="content-grid">
-            <RequestForm />
-            <RequestTable />
-          </div>
-        </section>
+        <Header title={headerTitle} />
+        {activeView === 'scheduled' ? (
+          <ScheduledPage />
+        ) : (
+          <section className="content-wrapper">
+            <DashboardCards />
+            <div className="content-grid">
+              <RequestForm />
+              <RequestTable />
+            </div>
+          </section>
+        )}
       </main>
     </div>
   );
diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
index 1125410..bdc002f 100644
--- a/src/components/Layout/Header.js
+++ b/src/components/Layout/Header.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import '../../styles/components.css';
 
-const Header = () => {
+const Header = ({ title = 'Dashboard' }) => {
   const handleLogout = () => {
     try {
       localStorage.setItem('auth', 'false');
@@ -10,11 +10,13 @@ const Header = () => {
     window.location.reload();
   };
 
+  const iconClass = title === 'Solicitudes Programadas' ? 'fas fa-calendar-alt' : 'fas fa-tachometer-alt';
+
   return (
     <div className="header">
       <div className="page-title">
-        <i className="fas fa-tachometer-alt"></i>
-        <span>Dashboard</span>
+        <i className={iconClass}></i>
+        <span>{title}</span>
       </div>
       <div className="header-actions">
         <div className="search-box">
diff --git a/src/components/Layout/Sidebar.js b/src/components/Layout/Sidebar.js
index d9f46c7..475cb4b 100644
--- a/src/components/Layout/Sidebar.js
+++ b/src/components/Layout/Sidebar.js
@@ -1,16 +1,21 @@
 import React from 'react';
 import '../../styles/components.css';
 
-const Sidebar = ({ isMobileMenuOpen, onToggleMobileMenu }) => {
+const Sidebar = ({ isMobileMenuOpen, onToggleMobileMenu, activeView = 'dashboard', onNavigate }) => {
   const navItems = [
-    { icon: 'fas fa-tachometer-alt', label: 'Dashboard', active: true, badge: null },
-    { icon: 'fas fa-list', label: 'Solicitudes Programadas', active: false, badge: '12' },
-    { icon: 'fas fa-plus-circle', label: 'Crear Solicitud', active: false, badge: null },
-    { icon: 'fas fa-history', label: 'Historial', active: false, badge: null },
-    { icon: 'fas fa-cog', label: 'Configuración', active: false, badge: null },
-    { icon: 'fas fa-question-circle', label: 'Ayuda', active: false, badge: null }
+    { key: 'dashboard', icon: 'fas fa-tachometer-alt', label: 'Dashboard', badge: null },
+    { key: 'scheduled', icon: 'fas fa-list', label: 'Solicitudes Programadas', badge: null },
+    { key: 'create', icon: 'fas fa-plus-circle', label: 'Crear Solicitud', badge: null },
+    { key: 'history', icon: 'fas fa-history', label: 'Historial', badge: null },
+    { key: 'settings', icon: 'fas fa-cog', label: 'Configuración', badge: null },
+    { key: 'help', icon: 'fas fa-question-circle', label: 'Ayuda', badge: null }
   ];
 
+  const handleClick = (e, key) => {
+    e.preventDefault();
+    onNavigate?.(key);
+  };
+
   return (
     <>
       <button 
@@ -33,13 +38,13 @@ const Sidebar = ({ isMobileMenuOpen, onToggleMobileMenu }) => {
         
         <div className="nav-container">
           <ul className="nav-links">
-            {navItems.map((item, index) => (
+            {navItems.map((item) => (
               <li 
-                key={index} 
-                className={item.active ? 'active' : ''}
+                key={item.key}
+                className={activeView === item.key ? 'active' : ''}
                 data-tooltip={item.label}
               >
-                <a href="#">
+                <a href="#" onClick={(e) => handleClick(e, item.key)}>
                   <i className={item.icon}></i>
                   <span>{item.label}</span>
                   {item.badge && <span className="badge">{item.badge}</span>}
diff --git a/src/components/Scheduled/ScheduledForm.js b/src/components/Scheduled/ScheduledForm.js
new file mode 100644
index 0000000..d7d97e1
--- /dev/null
+++ b/src/components/Scheduled/ScheduledForm.js
@@ -0,0 +1,135 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import '../../styles/components.css';
+
+const defaultItem = {
+  id: null,
+  url: '',
+  method: 'GET',
+  headers: '',
+  body: '',
+  scheduleType: 'cron', // 'cron' | 'once'
+  cronExpr: '0 0 * * *',
+  datetime: '',
+  enabled: true,
+};
+
+const ScheduledForm = ({ editing, onSave, onCancel }) => {
+  const [item, setItem] = useState(defaultItem);
+  const isEditing = useMemo(() => Boolean(editing && editing.id), [editing]);
+
+  useEffect(() => {
+    if (editing) {
+      setItem({ ...defaultItem, ...editing });
+    } else {
+      setItem(defaultItem);
+    }
+  }, [editing]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setItem((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // simple validations
+    if (!item.url) return alert('La URL es obligatoria');
+    if (item.scheduleType === 'cron' && !item.cronExpr) return alert('La expresión CRON es obligatoria');
+    if (item.scheduleType === 'once' && !item.datetime) return alert('La fecha y hora son obligatorias');
+
+    const parsedHeaders = safeParseJSON(item.headers);
+    const parsedBody = safeParseJSON(item.body);
+
+    const payload = {
+      ...item,
+      headers: parsedHeaders,
+      body: parsedBody,
+    };
+    onSave?.(payload);
+  };
+
+  const safeParseJSON = (text) => {
+    if (!text) return undefined;
+    try { return JSON.parse(text); } catch (_) { return text; }
+  };
+
+  return (
+    <div className="form-container">
+      <div className="form-header">
+        <h3>
+          <i className="fas fa-calendar-plus"></i>
+          {isEditing ? 'Editar programación' : 'Nueva programación'}
+        </h3>
+        {isEditing && (
+          <button type="button" className="btn btn-outline btn-sm" onClick={() => onCancel?.()}>
+            <i className="fas fa-times"></i> Cancelar edición
+          </button>
+        )}
+      </div>
+      <form onSubmit={handleSubmit} noValidate>
+        <div className="form-group">
+          <label htmlFor="url">URL</label>
+          <input id="url" name="url" type="url" placeholder="https://api.tu-dominio.com/recurso" value={item.url} onChange={handleChange} />
+        </div>
+        <div className="form-row">
+          <div className="form-group">
+            <label htmlFor="method">Método</label>
+            <select id="method" name="method" value={item.method} onChange={handleChange}>
+              <option>GET</option>
+              <option>POST</option>
+              <option>PUT</option>
+              <option>PATCH</option>
+              <option>DELETE</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <label htmlFor="scheduleType">Tipo de programación</label>
+            <select id="scheduleType" name="scheduleType" value={item.scheduleType} onChange={handleChange}>
+              <option value="cron">CRON</option>
+              <option value="once">Única vez</option>
+            </select>
+          </div>
+        </div>
+
+        {item.scheduleType === 'cron' ? (
+          <div className="form-group">
+            <label htmlFor="cronExpr">Expresión CRON</label>
+            <input id="cronExpr" name="cronExpr" type="text" placeholder="* * * * *" value={item.cronExpr} onChange={handleChange} />
+          </div>
+        ) : (
+          <div className="form-group">
+            <label htmlFor="datetime">Fecha y hora (UTC)</label>
+            <input id="datetime" name="datetime" type="datetime-local" value={item.datetime} onChange={handleChange} />
+          </div>
+        )}
+
+        <div className="form-group">
+          <label htmlFor="headers">Headers (JSON opcional)</label>
+          <textarea id="headers" name="headers" placeholder='{"Authorization":"Bearer ..."}' value={item.headers} onChange={handleChange} />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="body">Body (JSON opcional)</label>
+          <textarea id="body" name="body" placeholder='{"campo":"valor"}' value={item.body} onChange={handleChange} />
+        </div>
+
+        <div className="form-row">
+          <div className="form-group">
+            <label htmlFor="enabled">Estado</label>
+            <select id="enabled" name="enabled" value={item.enabled ? 'true' : 'false'} onChange={(e) => setItem((p) => ({ ...p, enabled: e.target.value === 'true' }))}>
+              <option value="true">Activa</option>
+              <option value="false">Pausada</option>
+            </select>
+          </div>
+        </div>
+
+        <button type="submit" className="btn btn-primary">
+          <i className="fas fa-save"></i>
+          {isEditing ? 'Guardar cambios' : 'Crear programación'}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default ScheduledForm;
diff --git a/src/components/Scheduled/ScheduledPage.js b/src/components/Scheduled/ScheduledPage.js
new file mode 100644
index 0000000..53ab77a
--- /dev/null
+++ b/src/components/Scheduled/ScheduledPage.js
@@ -0,0 +1,130 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import '../../styles/components.css';
+import ScheduledForm from './ScheduledForm';
+import ScheduledTable from './ScheduledTable';
+
+const storageKey = 'scheduled.requests.v1';
+
+const nowPlusMinutes = (m) => {
+  const d = new Date(Date.now() + m * 60000);
+  return d.toISOString().slice(0,16).replace('T', ' ');
+};
+
+const loadFromStorage = () => {
+  try {
+    const raw = localStorage.getItem(storageKey);
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch (_e) {
+    return null;
+  }
+};
+
+const saveToStorage = (items) => {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(items));
+  } catch (_e) {}
+};
+
+const seeded = [
+  {
+    id: 1,
+    url: 'https://api.ejemplo.com/reportes/daily',
+    method: 'GET',
+    headers: undefined,
+    body: undefined,
+    scheduleType: 'cron',
+    cronExpr: '0 6 * * *',
+    datetime: '',
+    nextRun: nowPlusMinutes(60 * 12),
+    enabled: true,
+  },
+  {
+    id: 2,
+    url: 'https://api.ejemplo.com/users/sync',
+    method: 'POST',
+    headers: { 'X-Env': 'prod' },
+    body: { force: true },
+    scheduleType: 'once',
+    cronExpr: '',
+    datetime: nowPlusMinutes(120),
+    nextRun: nowPlusMinutes(120),
+    enabled: false,
+  },
+];
+
+const ScheduledPage = () => {
+  const [items, setItems] = useState(() => loadFromStorage() || seeded);
+  const [editing, setEditing] = useState(null);
+
+  useEffect(() => {
+    saveToStorage(items);
+  }, [items]);
+
+  const countEnabled = useMemo(() => items.filter(i => i.enabled).length, [items]);
+
+  const handleSave = (payload) => {
+    if (payload.id) {
+      setItems((prev) => prev.map((it) => (it.id === payload.id ? { ...it, ...payload } : it)));
+      setEditing(null);
+    } else {
+      const nextId = items.length ? Math.max(...items.map(i => i.id)) + 1 : 1;
+      const next = {
+        ...payload,
+        id: nextId,
+        nextRun: payload.scheduleType === 'cron' ? nowPlusMinutes(60 * 24) : (payload.datetime || nowPlusMinutes(5)),
+      };
+      setItems((prev) => [next, ...prev]);
+      setEditing(null);
+    }
+  };
+
+  const handleToggleEnabled = (item) => {
+    setItems((prev) => prev.map((it) => it.id === item.id ? { ...it, enabled: !it.enabled } : it));
+  };
+
+  const handleRunNow = (item) => {
+    alert(`Se ejecutó "${item.method} ${item.url}" (simulado).`);
+  };
+
+  const handleDelete = (item) => {
+    if (window.confirm('¿Eliminar esta programación?')) {
+      setItems((prev) => prev.filter((it) => it.id !== item.id));
+      if (editing && editing.id === item.id) setEditing(null);
+    }
+  };
+
+  return (
+    <section className="content-wrapper">
+      <div className="card" style={{ marginBottom: 24 }}>
+        <div className="form-header">
+          <h3>
+            <i className="fas fa-calendar-alt"></i>
+            Solicitudes Programadas
+          </h3>
+          <div>
+            <span style={{ color: 'var(--gray)' }}>
+              Activas: {countEnabled} / {items.length}
+            </span>
+          </div>
+        </div>
+        <p style={{ color: 'var(--gray)' }}>
+          Administra las ejecuciones automáticas de tus solicitudes HTTP.
+        </p>
+      </div>
+
+      <div className="content-grid">
+        <ScheduledForm editing={editing} onSave={handleSave} onCancel={() => setEditing(null)} />
+        <ScheduledTable 
+          items={items}
+          onToggleEnabled={handleToggleEnabled}
+          onRunNow={handleRunNow}
+          onEdit={setEditing}
+          onDelete={handleDelete}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default ScheduledPage;
diff --git a/src/components/Scheduled/ScheduledTable.js b/src/components/Scheduled/ScheduledTable.js
new file mode 100644
index 0000000..4aeb514
--- /dev/null
+++ b/src/components/Scheduled/ScheduledTable.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import '../../styles/components.css';
+
+const ScheduledTable = ({ items = [], onToggleEnabled, onRunNow, onEdit, onDelete }) => {
+  const getStatusPill = (item) => {
+    const cls = `status ${item.enabled ? 'completed' : 'pending'}`;
+    const icon = item.enabled ? 'fas fa-check' : 'fas fa-pause';
+    return (
+      <span className={cls}>
+        <i className={icon}></i> {item.enabled ? 'Activa' : 'Pausada'}
+      </span>
+    );
+  };
+
+  if (!items.length) {
+    return (
+      <div className="card" role="status">
+        <div className="form-header">
+          <h3>
+            <i className="fas fa-calendar-alt"></i>
+            Programaciones
+          </h3>
+        </div>
+        <p style={{ color: 'var(--gray)' }}>No hay solicitudes programadas todavía. Crea una nueva para comenzar.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="table-container">
+      <div className="table-header">
+        <h3>Solicitudes Programadas</h3>
+        <div className="table-actions">
+          <button className="btn btn-outline btn-sm" onClick={() => window.location.reload()}>
+            <i className="fas fa-sync"></i> Actualizar
+          </button>
+        </div>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>URL</th>
+            <th>Método</th>
+            <th>Tipo</th>
+            <th>Cron / Fecha-Hora</th>
+            <th>Próxima ejecución</th>
+            <th>Estado</th>
+            <th>Acciones</th>
+          </tr>
+        </thead>
+        <tbody>
+          {items.map((item) => (
+            <tr key={item.id}>
+              <td>#{String(item.id).padStart(5, '0')}</td>
+              <td>{item.url}</td>
+              <td>{item.method}</td>
+              <td>{item.scheduleType === 'cron' ? 'CRON' : 'Única'}</td>
+              <td>{item.scheduleType === 'cron' ? item.cronExpr : item.datetime}</td>
+              <td>{item.nextRun || '—'}</td>
+              <td>{getStatusPill(item)}</td>
+              <td className="actions">
+                <button className="view" title="Editar" onClick={() => onEdit?.(item)}>
+                  <i className="fas fa-edit"></i>
+                </button>
+                <button className="execute" title="Ejecutar ahora" onClick={() => onRunNow?.(item)}>
+                  <i className="fas fa-play"></i>
+                </button>
+                <button className="cancel" title={item.enabled ? 'Pausar' : 'Activar'} onClick={() => onToggleEnabled?.(item)}>
+                  <i className={item.enabled ? 'fas fa-pause' : 'fas fa-play'}></i>
+                </button>
+                <button className="cancel" title="Eliminar" onClick={() => onDelete?.(item)}>
+                  <i className="fas fa-trash"></i>
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default ScheduledTable;