apartado medico 2

healthmanager/src/BuscarPaciente.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 
 const BuscarPaciente = () => {
   const [busqueda, setBusqueda] = useState('');
@@ -19,6 +20,11 @@ const BuscarPaciente = () => {
         className="buscar-paciente-input"
       />
       <button type='submit'>Buscar</button>
+      <p></p>
+      <p></p>
+      <Link to="/">
+        <button className="btnsalir">Regresar al menú principal</button>
+      </Link>
     </div>
 
   );

healthmanager/src/EditarPaciente.css

@@ -21,3 +21,12 @@
     border: none;
     cursor: pointer;
   }
+  .btnsalir {
+    margin-bottom: 20px;
+    padding: 10px 20px;
+    font-size: 18px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }

healthmanager/src/EditarPaciente.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import './EditarPaciente.css';
+import { Link } from 'react-router-dom';
 
 const EditarPaciente = () => {
   const [nombre, setNombre] = useState('');
@@ -43,6 +44,10 @@ const EditarPaciente = () => {
         />
         <button type="submit">Guardar cambios</button>
       </form>
+      <p></p>
+        <Link to="/">
+          <button className="btnsalir">Regresar al menú principal</button>
+        </Link>
     </div>
   );
 };

healthmanager/src/HistorialPacientes.css

@@ -0,0 +1,60 @@
+.historial-paciente {
+    margin: 20px;
+  }
+  
+  .patient-list {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  
+  .patient-list th,
+  .patient-list td {
+    border: 1px solid #ddd;
+    padding: 8px;
+  }
+  
+  .patient-list th {
+    text-align: left;
+    background-color: #f0f0f0;
+  }
+  
+  .patient-list button {
+    padding: 5px 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+  }
+  
+  .patient-details {
+    margin-top: 20px;
+    border: 1px solid #ddd;
+    padding: 20px;
+  }
+  
+  .patient-details h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+  
+  .patient-details p {
+    margin-bottom: 0;
+  }
+  
+  .patient-details ul {
+    list-style: none;
+    padding: 0;
+  }
+  
+  .patient-details li {
+    margin-bottom: 10px;
+  }
+  .btnsalir {
+    margin-bottom: 20px;
+    padding: 10px 20px;
+    font-size: 18px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }

healthmanager/src/HistorialPacientes.jsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import './HistorialPacientes.css';
+import { Link } from 'react-router-dom';
+
+const HistorialPacientes = () => {
+    const [pacientes, setPatientes] = useState([]);
+    const [selecPaciente, setSelecPaciente] = useState(null);
+    const [preinscripcion, setPreinscripcion] = useState([]);
+  
+    useEffect(() => {
+      fetch('/pacientes')
+        .then((response) => response.json())
+        .then((data) => setPatientes(data));
+    }, []);
+  
+    const handleViewPatient = (paciente) => {
+      setSelecPaciente(paciente);
+  
+      fetch(`/preinscripcion/${paciente.id}`)
+        .then((response) => response.json())
+        .then((data) => setSelecPaciente(data));
+    };
+  
+    return (
+      <div className="historial-paciente">
+        <h2>Historial de Pacientes</h2>
+  
+        <table className="lista-pacientes">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Nombre</th>
+              <th>Ver Recetas</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pacientes.map((paciente) => (
+              <tr key={paciente.id}>
+                <td>{paciente.id}</td>
+                <td>{paciente.nombre}</td>
+                <td>
+                  <button onClick={() => handleViewPatient(paciente)}>Ver Recetas</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+  
+        {selecPaciente && (
+          <div className="detatalles-paciente">
+            <h2>Datos del Paciente</h2>
+            <p>ID: {selecPaciente.id}</p>
+            <p>Nombre: {selecPaciente.nombre}</p>
+  
+            <h2>Prescripcion</h2>
+            <table>
+              <thead>
+                <tr>
+                  <th>ID Receta</th>
+                  <th>Fecha</th>
+                  <th>Medicamento</th>
+                  <th>Dosis</th>
+                  <th>Instrucciones</th>
+                  <th>Firma Médico</th>
+                </tr>
+              </thead>
+              <tbody>
+                {preinscripcion.map((preinscripcion) => (
+                  <tr key={preinscripcion.id}>
+                    <td>{preinscripcion.id}</td>
+                    <td>{preinscripcion.fecha}</td>
+                    <td>{preinscripcion.medicamento}</td>
+                    <td>{preinscripcion.dosis}</td>
+                    <td>{preinscripcion.instrucciones}</td>
+                    <td>
+                      {preinscripcion.firmaMedico && (
+                        <img src={preinscripcion.firmaMedico} alt="Firma del Médico" />
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+        <p></p>
+        <Link to="/">
+          <button className="btnsalir">Regresar al menú principal</button>
+        </Link>
+      </div>
+    );
+  };
+  
+export default HistorialPacientes;

healthmanager/src/Paciente.css

@@ -21,3 +21,12 @@
     border: none;
     cursor: pointer;
   }
+  .btnsalir {
+    margin-bottom: 20px;
+    padding: 10px 20px;
+    font-size: 18px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }

healthmanager/src/Paciente.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import './Paciente.css';
+import { Link } from 'react-router-dom';
 
 const Paciente = () => {
   const [nombre, setNombre] = useState('');
@@ -42,6 +43,10 @@ const Paciente = () => {
         />
         <button type="submit">Registrar paciente</button>
       </form>
+      <p></p>
+        <Link to="/">
+          <button className="btnsalir">Regresar al menú principal</button>
+        </Link>
     </div>
   );
 };

healthmanager/src/RecetaMedica.css

@@ -18,3 +18,12 @@
     border: none;
     cursor: pointer;
   }
+  .btnsalir {
+    margin-bottom: 20px;
+    padding: 10px 20px;
+    font-size: 18px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }

healthmanager/src/RecetaMedica.jsx

@@ -1,5 +1,6 @@
 import React, { useId, useState } from 'react';
 import './RecetaMedica.css';
+import { Link } from 'react-router-dom';
 
 const RecetaMedica = () => {
   const [idreceta, setIdReceta] = useId('');
@@ -109,8 +110,15 @@ const RecetaMedica = () => {
           accept="image/*"
           onChange={handleImageUpload}
         />
+        <p></p>
+        <p></p>
         <button type="submit">Emitir receta</button>
       </form>
+      <p></p>
+      <p></p>
+      <Link to="/">
+        <button className="btnsalir">Regresar al menú principal</button>
+      </Link>
     </div>
   );
 };