diff --git a/src/Router.jsx b/src/Router.jsx index 5d8a440..8bad33a 100644 --- a/src/Router.jsx +++ b/src/Router.jsx @@ -11,6 +11,7 @@ import Favoritos from './pages/users/favoritos.jsx'; import Notification from './pages/users/notificaciones.jsx'; import NewMapa from './pages/newMapa.jsx'; import Calendario from './pages/calendario.jsx'; +import GestionSolicitudes from './pages/GestionSolicitudes.jsx'; function Router() { @@ -30,6 +31,7 @@ function Router() { } /> } /> } /> + } /> diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 521eb29..f809b7e 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -32,6 +32,8 @@ function NavBar() { Mis Publicaciones Mis Favoritos Enviar notificaciones a usuarios + Gestión de Solicitudes + )} diff --git a/src/pages/GestionSolicitudes.jsx b/src/pages/GestionSolicitudes.jsx new file mode 100644 index 0000000..5bb20f2 --- /dev/null +++ b/src/pages/GestionSolicitudes.jsx @@ -0,0 +1,99 @@ +// GestionSolicitudes.jsx +import React, { useState } from 'react'; +import '../styles/gestionSolicitudes.css'; +import Navbar from '../components/Navbar'; +import Footer from '../components/Footer'; + +const GestionSolicitudes = () => { + const [solicitudes, setSolicitudes] = useState([ + { id: 1, tipo: 'Evento', descripcion: 'Concierto en el parque', estado: 'Pendiente', comentario: '', fecha: '2024-11-01' }, + { id: 2, tipo: 'Publicación', descripcion: 'Casa en la playa', estado: 'Pendiente', comentario: '', fecha: '2024-11-02' }, + { id: 3, tipo: 'Notificación', descripcion: 'Nuevo mensaje', estado: 'Pendiente', comentario: '', fecha: '2024-11-03' }, + // Añadir más solicitudes de diferentes tipos y fechas + ]); + + const [filtroFecha, setFiltroFecha] = useState(''); + const [filtroTipo, setFiltroTipo] = useState(''); + + const handleAction = (id, action) => { + setSolicitudes(prevSolicitudes => + prevSolicitudes.map(solicitud => + solicitud.id === id ? { ...solicitud, estado: action } : solicitud + ) + ); + }; + + const handleComentarioChange = (id, comentario) => { + setSolicitudes(prevSolicitudes => + prevSolicitudes.map(solicitud => + solicitud.id === id ? { ...solicitud, comentario } : solicitud + ) + ); + }; + + const solicitudesFiltradas = solicitudes.filter(solicitud => { + const coincideFecha = filtroFecha ? solicitud.fecha === filtroFecha : true; + const coincideTipo = filtroTipo ? solicitud.tipo === filtroTipo : true; + return coincideFecha && coincideTipo; + }); + + return ( +
+ +
+

Gestión de Solicitudes

+
+ {/* Filtros */} +
+

Filtros

+ + setFiltroFecha(e.target.value)} + /> + + +
+ + {/* Lista de solicitudes */} +
+ {solicitudesFiltradas.map(solicitud => ( +
+

{solicitud.tipo}

+

{solicitud.descripcion}

+

Fecha solicitud: {solicitud.fecha}

+

Estado: {solicitud.estado}

+