apartado medico 2
This commit is contained in:
parent
5d64ff90a0
commit
2c036fa354
|
@ -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>
|
||||
|
||||
);
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue