apartado medico 2
This commit is contained in:
parent
5d64ff90a0
commit
2c036fa354
|
@ -1,4 +1,5 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
const BuscarPaciente = () => {
|
const BuscarPaciente = () => {
|
||||||
const [busqueda, setBusqueda] = useState('');
|
const [busqueda, setBusqueda] = useState('');
|
||||||
|
@ -19,6 +20,11 @@ const BuscarPaciente = () => {
|
||||||
className="buscar-paciente-input"
|
className="buscar-paciente-input"
|
||||||
/>
|
/>
|
||||||
<button type='submit'>Buscar</button>
|
<button type='submit'>Buscar</button>
|
||||||
|
<p></p>
|
||||||
|
<p></p>
|
||||||
|
<Link to="/">
|
||||||
|
<button className="btnsalir">Regresar al menú principal</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -21,3 +21,12 @@
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
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 React, { useState } from 'react';
|
||||||
import './EditarPaciente.css';
|
import './EditarPaciente.css';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
const EditarPaciente = () => {
|
const EditarPaciente = () => {
|
||||||
const [nombre, setNombre] = useState('');
|
const [nombre, setNombre] = useState('');
|
||||||
|
@ -43,6 +44,10 @@ const EditarPaciente = () => {
|
||||||
/>
|
/>
|
||||||
<button type="submit">Guardar cambios</button>
|
<button type="submit">Guardar cambios</button>
|
||||||
</form>
|
</form>
|
||||||
|
<p></p>
|
||||||
|
<Link to="/">
|
||||||
|
<button className="btnsalir">Regresar al menú principal</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</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;
|
|
@ -21,3 +21,12 @@
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
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 React, { useState } from 'react';
|
||||||
import './Paciente.css';
|
import './Paciente.css';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
const Paciente = () => {
|
const Paciente = () => {
|
||||||
const [nombre, setNombre] = useState('');
|
const [nombre, setNombre] = useState('');
|
||||||
|
@ -42,6 +43,10 @@ const Paciente = () => {
|
||||||
/>
|
/>
|
||||||
<button type="submit">Registrar paciente</button>
|
<button type="submit">Registrar paciente</button>
|
||||||
</form>
|
</form>
|
||||||
|
<p></p>
|
||||||
|
<Link to="/">
|
||||||
|
<button className="btnsalir">Regresar al menú principal</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -18,3 +18,12 @@
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
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 React, { useId, useState } from 'react';
|
||||||
import './RecetaMedica.css';
|
import './RecetaMedica.css';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
const RecetaMedica = () => {
|
const RecetaMedica = () => {
|
||||||
const [idreceta, setIdReceta] = useId('');
|
const [idreceta, setIdReceta] = useId('');
|
||||||
|
@ -109,8 +110,15 @@ const RecetaMedica = () => {
|
||||||
accept="image/*"
|
accept="image/*"
|
||||||
onChange={handleImageUpload}
|
onChange={handleImageUpload}
|
||||||
/>
|
/>
|
||||||
|
<p></p>
|
||||||
|
<p></p>
|
||||||
<button type="submit">Emitir receta</button>
|
<button type="submit">Emitir receta</button>
|
||||||
</form>
|
</form>
|
||||||
|
<p></p>
|
||||||
|
<p></p>
|
||||||
|
<Link to="/">
|
||||||
|
<button className="btnsalir">Regresar al menú principal</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue