Add "Nueva Solicitud" page and update navigation to support new view

Introduced the `NewRequestPage` component for creating and saving HTTP requests. Updated navigation and dynamic header title logic to include the new "create" view. Adjusted `App.js` to handle the new view state and display `NewRequestPage`.
This commit is contained in:
2025-11-20 20:06:02 -04:00
parent d9a2377572
commit 6ec99a729f
2 changed files with 36 additions and 2 deletions

View File

@@ -5,10 +5,11 @@ import { DashboardCards } from './components/Dashboard';
import RequestTable from './components/Requests/RequestTable';
import RequestForm from './components/Requests/RequestForm';
import ScheduledPage from './components/Scheduled/ScheduledPage';
import NewRequestPage from './components/Requests/NewRequestPage';
function App() {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [activeView, setActiveView] = useState('dashboard'); // 'dashboard' | 'scheduled'
const [activeView, setActiveView] = useState('dashboard'); // 'dashboard' | 'scheduled' | 'create'
const handleToggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
const handleNavigate = (key) => {
@@ -16,7 +17,11 @@ function App() {
setIsMobileMenuOpen(false);
};
const headerTitle = activeView === 'scheduled' ? 'Solicitudes Programadas' : 'Dashboard';
const headerTitle = activeView === 'scheduled'
? 'Solicitudes Programadas'
: activeView === 'create'
? 'Nueva Solicitud'
: 'Dashboard';
return (
<div className="container">
@@ -30,6 +35,8 @@ function App() {
<Header title={headerTitle} />
{activeView === 'scheduled' ? (
<ScheduledPage />
) : activeView === 'create' ? (
<NewRequestPage />
) : (
<section className="content-wrapper">
<DashboardCards />

View File

@@ -0,0 +1,27 @@
import React from 'react';
import '../../styles/components.css';
import RequestForm from './RequestForm';
const NewRequestPage = () => {
return (
<section className="content-wrapper">
<div className="card" style={{ marginBottom: 24 }}>
<div className="form-header">
<h3>
<i className="fas fa-paper-plane"></i>
Nueva Solicitud
</h3>
</div>
<p style={{ color: 'var(--gray)' }}>
Crea y guarda una nueva solicitud HTTP para ejecutar ahora o más tarde.
</p>
</div>
<div className="content-grid">
<RequestForm />
</div>
</section>
);
};
export default NewRequestPage;