apartado medico 2

This commit is contained in:
03jossellin-herrera-rodriguez 2024-05-19 13:13:54 -06:00
parent 5d64ff90a0
commit 2c036fa354
9 changed files with 205 additions and 0 deletions

View File

@ -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>
);

View File

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

View File

@ -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>
);
};

View File

@ -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;
}

View File

@ -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;

View File

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

View File

@ -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>
);
};

View File

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

View File

@ -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>
);
};