Avance 1-Medico

healthmanager/Menu/BuscarPacienteBtn.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const BuscarPacienteButton = () => {
+  return (
+    <Link to="/buscar-paciente">
+      <button>Buscar paciente</button>
+    </Link>
+  );
+};
+
+export default BuscarPacienteButton;

healthmanager/Menu/EditarPacienteBtn.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const EditarPacienteButton = () => {
+  return (
+    <Link to="/editar-paciente">
+      <button>Editar paciente</button>
+    </Link>
+  );
+};
+
+export default EditarPacienteButton;

healthmanager/Menu/EmitirRecetaBtn.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const EmitirRecetaButton = () => {
+  return (
+    <Link to="/receta-medica">
+      <button>Emitir receta médica</button>
+    </Link>
+  );
+};
+
+export default EmitirRecetaButton;

healthmanager/Menu/registrarPacienteBtn.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const RegistrarPacienteButton = () => {
+  return (
+    <Link to="/registrar-paciente">
+      <button>Registrar paciente</button>
+    </Link>
+  );
+};
+
+export default RegistrarPacienteButton;

healthmanager/src/BuscarPaciente.jsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+
+const BuscarPaciente = () => {
+  const [busqueda, setBusqueda] = useState('');
+
+  const handleBusqueda = (e) => {
+    setBusqueda(e.target.value);
+    
+  };
+
+  return (
+    <div className="buscar-paciente-container">
+      <h2>Buscar Paciente</h2>
+      <input
+        type="text"
+        placeholder="Buscar paciente"
+        value={busqueda}
+        onChange={handleBusqueda}
+        className="buscar-paciente-input"
+      />
+      <button type='submit'>Buscar</button>
+    </div>
+
+  );
+};
+
+export default BuscarPaciente;

healthmanager/src/EditarPaciente.css

@@ -0,0 +1,23 @@
+.editar-paciente-container {
+    margin-bottom: 20px;
+  }
+  
+  .editar-paciente-form {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .editar-paciente-form input {
+    margin-bottom: 10px;
+    padding: 10px;
+    font-size: 16px;
+  }
+  
+  .editar-paciente-form button {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #28a745;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }

healthmanager/src/EditarPaciente.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import './EditarPaciente.css';
+
+const EditarPaciente = () => {
+  const [nombre, setNombre] = useState('');
+  const [edad, setEdad] = useState('');
+  const [peso, setPeso] = useState('');
+  const [contacto, setContacto] = useState('');
+
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    
+  };
+
+  return (
+    <div className="editar-paciente-container">
+      <h2>Editar Paciente</h2>
+      <form onSubmit={handleSubmit} className="editar-paciente-form">
+        <input
+          type="text"
+          placeholder="Nombre"
+          value={nombre}
+          onChange={(e) => setNombre(e.target.value)}
+        />
+        <input
+          type="number"
+          placeholder="Edad"
+          value={edad}
+          onChange={(e) => setEdad(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="Peso"
+          value={peso}
+          onChange={(e) => setPeso(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="Contacto"
+          value={contacto}
+          onChange={(e) => setContacto(e.target.value)}
+        />
+        <button type="submit">Guardar cambios</button>
+      </form>
+    </div>
+  );
+};
+
+export default EditarPaciente;

healthmanager/src/Paciente.css

@@ -0,0 +1,23 @@
+.paciente-container {
+    margin-bottom: 20px;
+  }
+  
+  .paciente-form {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .paciente-form input {
+    margin-bottom: 10px;
+    padding: 10px;
+    font-size: 16px;
+  }
+  
+  .paciente-form button {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #28a745;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }

healthmanager/src/Paciente.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import './Paciente.css';
+
+const Paciente = () => {
+  const [nombre, setNombre] = useState('');
+  const [edad, setEdad] = useState('');
+  const [peso, setPeso] = useState('');
+  const [contacto, setContacto] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    
+  };
+
+  return (
+    <div className="paciente-container">
+      <h2>Registrar paciente</h2>
+      <form onSubmit={handleSubmit} className="paciente-form">
+        <input
+          type="text"
+          placeholder="Nombre"
+          value={nombre}
+          onChange={(e) => setNombre(e.target.value)}
+        />
+        <input
+          type="number"
+          placeholder="Edad"
+          value={edad}
+          onChange={(e) => setEdad(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="Peso"
+          value={peso}
+          onChange={(e) => setPeso(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="Contacto"
+          value={contacto}
+          onChange={(e) => setContacto(e.target.value)}
+        />
+        <button type="submit">Registrar paciente</button>
+      </form>
+    </div>
+  );
+};
+
+export default Paciente;

healthmanager/src/RecetaMedica.css

@@ -0,0 +1,20 @@
+.receta-medica-container {
+    margin-bottom: 20px;
+  }
+  
+  .receta-medica-form textarea {
+    width: 100%;
+    height: 150px;
+    padding: 10px;
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
+  
+  .receta-medica-form button {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #28a745;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }

healthmanager/src/RecetaMedica.jsx

@@ -0,0 +1,118 @@
+import React, { useId, useState } from 'react';
+import './RecetaMedica.css';
+
+const RecetaMedica = () => {
+  const [idreceta, setIdReceta] = useId('');
+  const [idPaciente, setIdPaciente] = useId('');
+  const [idMedico, setIdMedico] = useId('');
+  const [contactoMedico, setContactoMedico] = useState ('');
+  const [pesoPaciente, setPesoPaciente] = useState ('');
+  const [edadPaciente, setEdadPaciente] = useState ('');
+  const [presionArt, setPresionArt] = useState();
+  const [fecha, setFecha] = useState('');
+  const [tempPaciente, setTempPaciente] = useState('');
+  const [prescripcion, setPrescripcion] = useState('');
+  const [firmaMedico, setFirmaMedico] = useState(null);
+
+
+  const handleImageUpload = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setFirmaMedico(file);
+    }
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    console.log({
+        idreceta,
+        idPaciente,
+        idMedico,
+        contactoMedico,
+        pesoPaciente,
+        edadPaciente,
+        presionArt,
+        fecha,
+        tempPaciente,
+        prescripcion,
+        firmaMedico
+    });
+    
+  };
+
+  return (
+    <div className="receta-medica-container">
+      <h2>Emitir receta médica</h2>
+      <form onSubmit={handleSubmit} className="receta-medica-form">
+        <input
+            type="text"
+            placeholder='id de receta'
+            value={idreceta}
+            disabled
+        />
+        <input
+            type="text"
+            placeholder='id de paciente'
+            value={idPaciente}
+            disabled
+        />
+        <input
+            type="text"
+            placeholder='id de medico'
+            value={idMedico}
+            disabled
+        />
+        <input
+            type="text"
+            placeholder='Contacto'
+            value={contactoMedico}
+            onChange={(e) => setContactoMedico(e.target.value)}
+        />
+        <input
+            type="text"
+            placeholder='Peso'
+            value={pesoPaciente}
+            onChange={(e) => setPesoPaciente(e.target.value)}
+        />
+        <input
+            type="text"
+            placeholder='Edad'
+            value={edadPaciente}
+            onChange={(e) => setEdadPaciente(e.target.value)}
+        />
+        <input
+            type="text"
+            placeholder='Presion arterial'
+            value={presionArt}
+            onChange={(e) => setPresionArt(e.target.value)}
+        />
+        <input
+            type="text"
+            placeholder='Fecha'
+            value={fecha}
+            onChange={(e) => setFecha(e.target.value)}
+        />
+        <input
+            type="text"
+            placeholder='Temperatura'
+            value={tempPaciente}
+            onChange={(e) => setTempPaciente(e.target.value)}
+        />
+        <textarea
+          placeholder="Escriba la prescripción médica"
+          value={prescripcion}
+          onChange={(e) => setPrescripcion(e.target.value)}
+        />
+        <input
+          type="file"
+          accept="image/*"
+          onChange={handleImageUpload}
+        />
+        <button type="submit">Emitir receta</button>
+      </form>
+    </div>
+  );
+};
+
+export default RecetaMedica;