front_presentacion

healthmanager/src/BuscarPaciente.jsx

@@ -23,7 +23,7 @@ function BuscarPaciente(props){
       <button type='submit'>Buscar</button>
       <p></p>
       <p></p>
-      <Link to="/">
+      <Link to="/MedicoPrincipal">
         <button className="btnsalir">Regresar al menú principal</button>
       </Link>
     </div>

healthmanager/src/DescargaRecetas.jsx

@@ -61,8 +61,8 @@ function DescargaRecetas(props) {
             setCargando(false);
         }
     }
-
+    /*
-    /*const generarPdf= (idReceta,nombreMedico,contactoMedico,fecha) =>{
+    const generarPdf= (idReceta,nombreMedico,contactoMedico,fecha) =>{
         var doc = new jsPDF();
         const docWidth = doc.internal.pageSize.getWidth();
         doc.text(10, 10,'Receta No.'+ idReceta);
@@ -71,15 +71,14 @@ function DescargaRecetas(props) {
         doc.text(10, 30,'Contacto: '+contactoMedico)
         doc.text(10, 40,'Fecha: '+fecha)
         doc.save('Receta '+ fecha + ' .pdf');
-    }*/
+    }
-
+    */
-    //nuevo
     const generarPdf = (idReceta, nombreMedico, contactoMedico, fecha) => {
         const doc = new jsPDF();
         const docWidth = doc.internal.pageSize.getWidth();
       
       //por su usamos imagen como la que viene en la imagen que me pasast
-        const imgData = 'datos/de/la/imagen/';
+        const imgData = './simboloReceta.JPG';
         doc.addImage(imgData, 'PNG', 10, 10, 50, 15);
       
         doc.setFontSize(18);

healthmanager/src/EditarPaciente.css

@@ -1,10 +1,12 @@
 .editar-paciente-container {
     margin-bottom: 20px;
+    margin-top: 20px;
   }
   
   .editar-paciente-form {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+      padding: 20px;
+      align-items: center;
   }
   
   .editar-paciente-form input {

healthmanager/src/EditarPaciente.jsx

@@ -2,8 +2,12 @@
 import React, { useState } from 'react';
 import './EditarPaciente.css';
 import { Link } from 'react-router-dom';
+import axios from "axios";
+import { Button, Box, TextField ,DialogContentText, Divider} from "@mui/material"
+import { useNavigate } from 'react-router-dom'
 
 function EditarPaciente(props) {
+  const navigate = useNavigate();
   const [nombre, setNombre] = useState('');
   const [edad, setEdad] = useState('');
   const [peso, setPeso] = useState('');
@@ -15,41 +19,54 @@ function EditarPaciente(props) {
     
   };
 
+  const regresarPrincipal = () => {
+    navigate('/MedicoPrincipal');
+}
+
+const cerrarSesion = () => {
+    navigate('/');
+}
+
   return (
-    <div className="editar-paciente-container">
+    <><h1 id="headerFacultad">Health Manager - Editar Paciente</h1><div id="division" /><nav id="divPublicaciones">
-      <h2>Editar Paciente</h2>
+      <h1 id="headerPublicaciones">Mis pacientes</h1>
+      <div id="divBotonesRecetas">
+        <Box id="box1" m={0}>
+          <Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
+        </Box>
+        <Box id="box2" m={0}>
+          <Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
+        </Box>
+      </div>
+    </nav><div id="division" /><div id="divLeyenda">
+        <p id="leyendaPublicacion">Edita los datos de un paciente.</p>
+        <div id="division" />
+      </div><div className="editar-paciente-container">
         <form onSubmit={handleSubmit} className="editar-paciente-form">
           <input
             type="text"
             placeholder="Nombre"
             value={nombre}
-          onChange={(e) => setNombre(e.target.value)}
+            onChange={(e) => setNombre(e.target.value)} />
-        />
           <input
             type="number"
             placeholder="Edad"
             value={edad}
-          onChange={(e) => setEdad(e.target.value)}
+            onChange={(e) => setEdad(e.target.value)} />
-        />
           <input
             type="text"
             placeholder="Peso"
             value={peso}
-          onChange={(e) => setPeso(e.target.value)}
+            onChange={(e) => setPeso(e.target.value)} />
-        />
           <input
             type="text"
             placeholder="Contacto"
             value={contacto}
-          onChange={(e) => setContacto(e.target.value)}
+            onChange={(e) => setContacto(e.target.value)} />
-        />
           <button type="submit">Guardar cambios</button>
         </form>
         <p></p>
-        <Link to="/">
+      </div></>
-          <button className="btnsalir">Regresar al menú principal</button>
-        </Link>
-    </div>
   );
 }
 

healthmanager/src/EliminarPacientes.css

@@ -0,0 +1,71 @@
+#headerFacultad{
+    margin-left: 50px;
+    text-align: left;
+    font-family: Arial, Helvetica, sans-serif;
+}
+#box1{
+    padding-top: 15px;
+    margin-right: 20px;
+}
+#box2{
+    padding-top: 15px;
+}
+#headerPublicaciones{
+    margin-left: 50px;
+    font-family: Arial, Helvetica, sans-serif;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+    font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
+}
+#divPublicaciones{
+    display: flex;
+    padding: auto;
+}
+#divsPublicaciones2{
+    width: 600px;
+    text-align:justify;
+    font-family:Georgia, 'Times New Roman', Times, serif;
+    padding-top: 15px;
+  }
+#boxCerrar{
+    margin-left: auto;
+    margin-right: 100px;
+    padding: auto;
+}
+#division2{
+    margin-top: 20px;
+    height: 2px;
+}
+#botonEliminar{
+    margin: 0 auto;
+}
+#listaEliminar{
+    display: flex;
+
+}
+#divLista2{
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-weight: bolder;
+    background-color: aliceblue;
+    width: 600px;
+    display: grid;
+    margin: 0 auto;
+    margin-top: 20px;
+    padding: 20px;
+}
+#btnDescargar{
+    margin-left: 480px;
+    background-color: black;
+}
+#divBotonesRecetas{
+    display: flex;
+    margin-left: auto;
+    margin-right: 100px;
+}
+#leyendaPublicacion{
+    margin-right: auto;
+    margin-left: 50px;
+}

healthmanager/src/EliminarPacientes.jsx

@@ -0,0 +1,90 @@
+/* eslint-disable no-unused-vars */
+import { Button, Box, TextField ,DialogContentText, Divider} from "@mui/material"
+import axios from "axios"
+import {useEffect,useState } from "react"
+import './DescargaRecetas.css'
+import { useNavigate } from 'react-router-dom'
+import jsPDF from "jspdf"
+
+
+// eslint-disable-next-line no-unused-vars
+function DescargaRecetas(props) {
+    const navigate = useNavigate();
+    const [publicacionesData, setPublicacionesData] = useState([]);
+    const [Cargando, setCargando] = useState (false)
+    const [datosID, setDatosID] = useState( {idPublicacion:''} )
+    const nombreUsuario = window.localStorage.getItem("IDUsuario");
+
+    const cambiosID = (evento) => {
+        const {name, value} = evento.target
+        setDatosID( { ...datosID, [name] : value })
+    }
+
+    const regresarPrincipal = () => {
+        navigate('/MedicoPrincipal');
+    }
+
+    const cerrarSesion = () => {
+        navigate('/');
+    }
+
+    const obtenerListaMisPublicaciones = async () => {
+        try {
+            const response = await axios.get("http://localhost:4567/MisPacientes", { params: { idUsuario: nombreUsuario } });
+            console.log(response.data)
+            console.log(nombreUsuario)
+            setPublicacionesData(response.data);
+        } catch (error) {
+            console.error('Error al obtener el id del usuario:', error);
+        }
+    };
+    obtenerListaMisPublicaciones()
+
+    const peticionEliminar=async()=>{
+        try {
+            const respuesta= await axios.post("https://back-endproyectofinal8-production-a397.up.railway.app/eliminarPublicacion",{params:{idPublicacion:window.localStorage.getItem("idePublicacion")}});
+            return respuesta;
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    const procesarEliminacion=async()=>{
+        setCargando(true);
+        try {
+            const respuesta=await peticionEliminar();
+            console.log("Respuesta de publicacion a eliminar", respuesta.data);
+            alert("Publicacion eliminada",respuesta.data);
+            setCargando(false);
+        } catch (error) {
+            console.log(error);
+            setCargando(false);
+        }
+    }
+      
+    return (
+        <>
+            <h1 id="headerFacultad">Health Manager - Mis recetas</h1>
+            <div id="division" />
+            <nav id="divPublicaciones">
+                <h1 id="headerPublicaciones">Mis publicaciones</h1>
+                <div id="divBotonesRecetas">
+                <Box id="box1" m={0}>
+                <Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
+                </Box>
+                <Box id="box2" m={0}>
+                <Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
+                </Box>
+                </div>
+            </nav>
+            <div id="division" />
+            <div id="divLeyenda">
+                <p id="leyendaPublicacion">Elimina tus pacientes.</p>
+                <div id="division" />
+            </div>
+    
+        </>
+    )
+}
+
+export default DescargaRecetas

healthmanager/src/HistorialPacientes.jsx

@@ -86,7 +86,7 @@ function HistorialPacientes(props) {
           </div>
         )}
         <p></p>
-        <Link to="/">
+        <Link to="/MedicoPrincipal">
           <button className="btnsalir">Regresar al menú principal</button>
         </Link>
       </div>

healthmanager/src/Login.jsx

@@ -29,6 +29,11 @@ function Login(props) {
     }
 
     const procesarLogin = async (evento) => {
+        const correoInput = document.getElementById("correoInput");
+        const contraseñaInput = document.getElementById("contraseñaInput");
+        if(correoInput.value === '' || contraseñaInput.value === ''){
+            alert("Faltan campos por llenar.")
+        }else{
         evento.preventDefault()
         console.log("datos recuperados en el form: ", datosLogin)
         setCargando(true)
@@ -41,7 +46,7 @@ function Login(props) {
                     window.localStorage.setItem('Usuario',datosLogin.correo);
                     window.localStorage.setItem('Contraseña',datosLogin.contraseña)
                 }else{
-                navigate('/Principal');
+                navigate('/MedicoPrincipal');
                 window.localStorage.setItem('Usuario',datosLogin.correo);
                 window.localStorage.setItem('Contraseña',datosLogin.contraseña)
                 }
@@ -54,6 +59,7 @@ function Login(props) {
             setCargando(false)
         }
     }
+    }
 
     return (
         <>  
@@ -63,10 +69,10 @@ function Login(props) {
             <form id="formLogin" onSubmit={ procesarLogin }>
                 <h1 className="h1login" id="headerForm">Inicia sesion para continuar</h1>
                 <Box m={5}>
-                    <TextField label="Correo" variant="standard" fullWidth onChange={cambiosLogin} name="correo" value={datosLogin.correo}></TextField>
+                    <TextField id="correoInput" label="Correo" variant="standard" fullWidth onChange={cambiosLogin} name="correo" value={datosLogin.correo}></TextField>
                 </Box>
                 <Box m={5}>
-                    <TextField label="Contraseña" variant="standard" fullWidth onChange={cambiosLogin} name="contraseña" value={datosLogin.contraseña}></TextField>
+                    <TextField id="contraseñaInput" label="Contraseña" variant="standard" fullWidth onChange={cambiosLogin} name="contraseña" value={datosLogin.contraseña}></TextField>
                 </Box>
                     <Button id="botonEnviar" variant="contained" type="submit" color="primary"  disabled={Cargando}>Iniciar Sesión</Button>
 

healthmanager/src/MedicoPrincipal .jsx

@@ -13,6 +13,7 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import "./MedicoPrincipal.css";
 import { useNavigate } from "react-router-dom";
+import HistorialPacientes from "./HistorialPacientes";
 function MedicoPrincipal(props) {
   const navigate = useNavigate();
   const [publicacionesData, setPublicacionesData] = useState([]);
@@ -23,7 +24,7 @@ function MedicoPrincipal(props) {
   const datosUsuario = async () => {
     try {
       const respuesta = await axios.get(
-        "http://localhost:4567/datosUsuario",
+        "http://localhost:4567/datosUsuarioMedico",
         { params: { correo: correoUsuario }}
       );
       console.log("Entrando")
@@ -36,19 +37,19 @@ function MedicoPrincipal(props) {
   const UsuarioData = async () => {
     try {
       const respuesta = await datosUsuario();
-      const nombreUsuarioSesion = respuesta.nombre;
+      const nombreUsuarioSesion = respuesta.nombreMed;
-      const edadUsuarioSesion = respuesta.edad;
+      const idMedicoUsuarioSesion = respuesta.idMed;
-      const pesoUsuarioSesion = respuesta.peso;
+      const cedProfUsuarioSesion = respuesta.cedProf;
-      const idUsuarioSesion = respuesta.idUsuario;
+      const contactoUsuarioSesion = respuesta.contacto;
       
       window.localStorage.setItem("ID", nombreUsuarioSesion);
-      window.localStorage.setItem("Edad", edadUsuarioSesion);
+      window.localStorage.setItem("IdMed", idMedicoUsuarioSesion);
-      window.localStorage.setItem("Peso", pesoUsuarioSesion);
+      window.localStorage.setItem("CedProf", cedProfUsuarioSesion);
-      window.localStorage.setItem("IDUsuario",idUsuarioSesion)
+      window.localStorage.setItem("Contacto",contactoUsuarioSesion);
 
-      console.log(idUsuarioSesion)
+      console.log(idMedicoUsuarioSesion)
     } catch (error) {
-      console.log("holaa");
+      console.log("Error en datos del usuario");
       console.log(error);
     }
   };
@@ -59,12 +60,28 @@ function MedicoPrincipal(props) {
     navigate("/");
   };
 
-  const misRecetas = () => {
+  const crearReceta = () => {
-    navigate("/DescargaRecetas");
+    navigate("/RecetaMedica");
+  };
+
+  const misPacientes = () => {
+    navigate("/MisPacientes");
+  };
+
+  const historialPacientes = () => {
+    navigate("/HistorialPacientes");
+  };
+
+  const registrarPacientes = () => {
+    navigate("/RegistrarPaciente");
+  };
+
+  const editarPaciente = () => {
+    navigate("/EditarPaciente");
   };
 
   const miPerfil = () => {
-    navigate("/MiPerfil");
+    navigate("/MiPerfilMedico");
   };
 
 
@@ -113,13 +130,6 @@ function MedicoPrincipal(props) {
     };
 
     const image7 =
-    {
-      url: "https://th.bing.com/th/id/OIP.euKNS7ep6s3C7PD9QXum7AHaHa?rs=1&pid=ImgDetMain",
-      title: "Eliminar pacientes",
-      width: "23%",
-    };
-
-    const image8 =
     {
       url: "https://image.freepik.com/vector-gratis/hombre-saliendo-puerta_1133-32.jpg",
       title: "Cerrar sesion",
@@ -200,7 +210,7 @@ function MedicoPrincipal(props) {
         </div>
         <div id="division" />
         <div id="divBotones">
-          <ImageButton id="img1" focusRipple key={image1.title} style={{width:image1.width,}} onClick={misRecetas}>
+          <ImageButton id="img1" focusRipple key={image1.title} style={{width:image1.width,}} onClick={crearReceta}>
           <ImageSrc style={{ backgroundImage: `url(${image1.url})` }} />
                 <ImageBackdrop className="MuiImageBackdrop-root" />
                 <Image>
@@ -220,7 +230,7 @@ function MedicoPrincipal(props) {
                   </Typography>
                 </Image>
           </ImageButton>
-          <ImageButton  id="img2" focusRipple key={image2.title} style={{width:image2.width,}} onClick={miPerfil}>
+          <ImageButton  id="img2" focusRipple key={image2.title} style={{width:image2.width,}} onClick={misPacientes}>
           <ImageSrc style={{ backgroundImage: `url(${image2.url})` }} />
                 <ImageBackdrop className="MuiImageBackdrop-root" />
                 <Image>
@@ -240,7 +250,7 @@ function MedicoPrincipal(props) {
                   </Typography>
                 </Image>
           </ImageButton>
-          <ImageButton id="img3" focusRipple key={image3.title} style={{width:image3.width,}} onClick={cerrarSesion}>
+          <ImageButton id="img3" focusRipple key={image3.title} style={{width:image3.width,}} onClick={miPerfil}>
           <ImageSrc style={{ backgroundImage: `url(${image3.url})` }} />
                 <ImageBackdrop className="MuiImageBackdrop-root" />
                 <Image>
@@ -260,7 +270,7 @@ function MedicoPrincipal(props) {
                   </Typography>
                 </Image>
           </ImageButton>
-          <ImageButton id="img4" focusRipple key={image4.title} style={{width:image4.width,}} onClick={misRecetas}>
+          <ImageButton id="img4" focusRipple key={image4.title} style={{width:image4.width,}} onClick={historialPacientes}>
           <ImageSrc style={{ backgroundImage: `url(${image4.url})` }} />
                 <ImageBackdrop className="MuiImageBackdrop-root" />
                 <Image>
@@ -280,7 +290,7 @@ function MedicoPrincipal(props) {
                   </Typography>
                 </Image>
           </ImageButton>
-          <ImageButton id="img5" focusRipple key={image5.title} style={{width:image5.width,}} onClick={misRecetas}>
+          <ImageButton id="img5" focusRipple key={image5.title} style={{width:image5.width,}} onClick={registrarPacientes}>
           <ImageSrc style={{ backgroundImage: `url(${image5.url})` }} />
                 <ImageBackdrop className="MuiImageBackdrop-root" />
                 <Image>
@@ -300,7 +310,7 @@ function MedicoPrincipal(props) {
                   </Typography>
                 </Image>
           </ImageButton>
-          <ImageButton id="img6" focusRipple key={image6.title} style={{width:image6.width,}} onClick={misRecetas}>
+          <ImageButton id="img6" focusRipple key={image6.title} style={{width:image6.width,}} onClick={editarPaciente}>
           <ImageSrc style={{ backgroundImage: `url(${image6.url})` }} />
                 <ImageBackdrop className="MuiImageBackdrop-root" />
                 <Image>
@@ -320,7 +330,7 @@ function MedicoPrincipal(props) {
                   </Typography>
                 </Image>
           </ImageButton>
-          <ImageButton id="img7" focusRipple key={image7.title} style={{width:image7.width,}} onClick={misRecetas}>
+          <ImageButton id="img7" focusRipple key={image7.title} style={{width:image7.width,}} onClick={cerrarSesion}>
           <ImageSrc style={{ backgroundImage: `url(${image7.url})` }} />
                 <ImageBackdrop className="MuiImageBackdrop-root" />
                 <Image>
@@ -340,26 +350,7 @@ function MedicoPrincipal(props) {
                   </Typography>
                 </Image>
           </ImageButton>
-          <ImageButton id="img" focusRipple key={image8.title} style={{width:image8.width,}} onClick={misRecetas}>
+          
-          <ImageSrc style={{ backgroundImage: `url(${image8.url})` }} />
-                <ImageBackdrop className="MuiImageBackdrop-root" />
-                <Image>
-                  <Typography
-                    component="span"
-                    variant="subtitle1"
-                    color="inherit"
-                    sx={{
-                      position: "relative",
-                      p: 4,
-                      pt: 2,
-                      pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
-                    }}
-                  >
-                    {image8.title}
-                    <ImageMarked className="MuiImageMarked-root" />
-                  </Typography>
-                </Image>
-          </ImageButton>
         </div>
       </div>
     </>

healthmanager/src/MiPerfilMedico.css

@@ -0,0 +1,89 @@
+#headerFacultad{
+    margin-left: 50px;
+    text-align: left;
+    font-family: Arial, Helvetica, sans-serif;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+    font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
+}
+#headerMiPerfil{
+    margin-left: 50px;
+    margin-bottom: 0px;
+    margin-top: 12px;
+}
+#divMiPerfil{
+    display: flex;
+    height: max-content;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+    font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
+}
+#regresarMenu{
+    background-color: black;
+}
+#cerrarSesion{
+    background-color: black;
+}
+#divLista{
+    display: flex;
+    align-items: center;
+    height: max-content;
+    margin-left: 100px;
+    width: 900px;
+    display:grid;
+    padding-top: 20px;
+    background-color: aliceblue;
+}
+#dialogUsuario{
+    padding-bottom: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+#dialogEdad{
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+#dialogPeso{
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+#dialogCorreo{
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+#dialogContraseña{
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+#leyendas{
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+#divBotonesPerfil{
+    display: flex;
+    margin-left: auto;
+    margin-right: 100px;
+}
+#leyendaPublicacion{
+    margin-right: auto;
+    margin-left: 50px;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+    font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
+}
+#divider{
+    height: 2px;
+}

healthmanager/src/MiPerfilMedico.jsx

@@ -0,0 +1,68 @@
+import { Button, Box,DialogContentText, Divider} from "@mui/material"
+// eslint-disable-next-line no-unused-vars
+import axios from "axios"
+// eslint-disable-next-line no-unused-vars
+import {useEffect,useState } from "react"
+import './MiPerfilMedico.css'
+import { useNavigate } from 'react-router-dom'
+
+// eslint-disable-next-line no-unused-vars
+function MiPerfil(props) {
+    const navigate = useNavigate();
+    // eslint-disable-next-line no-unused-vars
+    const [Cargando, setCargando] = useState (false)
+
+    //const [miPerfilData, setMiPerfilData] = useState({idUsuario:window.localStorage.getItem("ID"),correo:window.localStorage.getItem("Usuario"),contraseña:window.localStorage.getItem("Contraseña")});
+
+    const regresarPrincipal = () => {
+        navigate('/MedicoPrincipal');
+    }
+
+    const cerrarSesion = () => {
+        navigate('/');
+    }
+
+    return (
+        <>
+            <h1 id="headerFacultad">HealthManager - Mi perfil</h1>
+            <div id="division" />
+            <nav id="divMiPerfil">
+                <h1 id="headerMiPerfil">Mi perfil</h1>
+                <div id="divBotonesPerfil">
+                <Box m={1}>
+                <Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
+                </Box>
+                <Box m={1}>
+                <Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
+                </Box>
+                </div>
+            </nav>
+            <div id="division" />
+            <div id="divLeyenda">
+                <p id="leyendaPublicacion">Visualiza tus datos como Usuario, Correo y Contraseña.</p>
+            </div>
+            <div id="divLista">
+                <leyend id="leyendas">Nombre</leyend>
+                <DialogContentText id="dialogUsuario" variant="contained" className='contenidoText'>{window.localStorage.getItem("ID")}</DialogContentText>
+                <Divider id="divider" color="black"/>
+                <leyend id="leyendas">Contacto</leyend>
+                <DialogContentText id="dialogEdad" variant="contained" className='contenidoText'>{window.localStorage.getItem("Contacto")}</DialogContentText>
+                <Divider id="divider" color="black"/>
+                <leyend id="leyendas">No. de medico sistema</leyend>
+                <DialogContentText id="dialogPeso" variant="contained" className='contenidoText'>{window.localStorage.getItem("IdMed")}</DialogContentText>
+                <Divider id="divider" color="black"/>
+                <leyend id="leyendas">Cedula profesional</leyend>
+                <DialogContentText id="dialogPeso" variant="contained" className='contenidoText'>{window.localStorage.getItem("CedProf")}</DialogContentText>
+                <Divider id="divider" color="black"/>
+                <leyend id="leyendas">Correo</leyend>
+                <DialogContentText id="dialogCorreo" variant="contained" className='contenidoText'>{window.localStorage.getItem("Usuario")}</DialogContentText>
+                <Divider id="divider" color="black"/>
+                <leyend id="leyendas">Contraseña</leyend>
+                <DialogContentText id="dialogContraseña" variant="contained" className='contenidoText'>{window.localStorage.getItem("Contraseña")}</DialogContentText>
+                <Divider id="divider" color="black"/>
+            </div>
+        </>
+    )
+}
+
+export default MiPerfil

healthmanager/src/MisPacientes.css

@@ -0,0 +1,71 @@
+#headerFacultad{
+    margin-left: 50px;
+    text-align: left;
+    font-family: Arial, Helvetica, sans-serif;
+}
+#box1{
+    padding-top: 15px;
+    margin-right: 20px;
+}
+#box2{
+    padding-top: 15px;
+}
+#headerPublicaciones{
+    margin-left: 50px;
+    font-family: Arial, Helvetica, sans-serif;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+    font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
+}
+#divPublicaciones{
+    display: flex;
+    padding: auto;
+}
+#divsPublicaciones2{
+    width: 600px;
+    text-align:justify;
+    font-family:Georgia, 'Times New Roman', Times, serif;
+    padding-top: 15px;
+  }
+#boxCerrar{
+    margin-left: auto;
+    margin-right: 100px;
+    padding: auto;
+}
+#division2{
+    margin-top: 20px;
+    height: 2px;
+}
+#botonEliminar{
+    margin: 0 auto;
+}
+#listaEliminar{
+    display: flex;
+
+}
+#divLista2{
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-weight: bolder;
+    background-color: aliceblue;
+    width: 600px;
+    display: grid;
+    margin: 0 auto;
+    margin-top: 20px;
+    padding: 20px;
+}
+#btnDescargar{
+    margin-left: 480px;
+    background-color: black;
+}
+#divBotonesRecetas{
+    display: flex;
+    margin-left: auto;
+    margin-right: 100px;
+}
+#leyendaPublicacion{
+    margin-right: auto;
+    margin-left: 50px;
+}

healthmanager/src/MisPacientes.jsx

@@ -0,0 +1,110 @@
+/* eslint-disable no-unused-vars */
+import { Button, Box, TextField ,DialogContentText, Divider} from "@mui/material"
+import axios from "axios"
+import {useEffect,useState } from "react"
+import './MisPacientes.css'
+import { useNavigate } from 'react-router-dom'
+import jsPDF from "jspdf"
+
+
+// eslint-disable-next-line no-unused-vars
+function MisPacientes(props) {
+    const navigate = useNavigate();
+    const [publicacionesData, setPublicacionesData] = useState([]);
+    const [Cargando, setCargando] = useState (false)
+    const [datosID, setDatosID] = useState( {idPublicacion:''} )
+    const nombreUsuario = window.localStorage.getItem("IDUsuario");
+
+    const cambiosID = (evento) => {
+        const {name, value} = evento.target
+        setDatosID( { ...datosID, [name] : value })
+    }
+
+    const regresarPrincipal = () => {
+        navigate('/MedicoPrincipal');
+    }
+
+    const cerrarSesion = () => {
+        navigate('/');
+    }
+
+    const obtenerListaMisPublicaciones = async () => {
+        try {
+            const response = await axios.get("http://localhost:4567/MisPacientes", { params: { idUsuario: nombreUsuario } });
+            console.log(response.data)
+            console.log(nombreUsuario)
+            setPublicacionesData(response.data);
+        } catch (error) {
+            console.error('Error al obtener el id del usuario:', error);
+        }
+    };
+    obtenerListaMisPublicaciones()
+
+    const peticionEliminar=async(idPac)=>{
+        try {
+            const respuesta= await axios.get("http://localhost:4567/eliminarPaciente",{params:{idPac}});
+            return respuesta;
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    const procesarEliminacion=async(idPac)=>{
+        setCargando(true);
+        try {
+            const respuesta=await peticionEliminar(idPac);
+            console.log("Respuesta de paciente a eliminar", respuesta.data);
+            alert("Paciente eliminado",respuesta.data);
+            setCargando(false);
+        } catch (error) {
+            console.log(error);
+            alert("Paciente no eliminado");
+            setCargando(false);
+        }
+    }
+
+      
+    return (
+        <>
+            <h1 id="headerFacultad">Health Manager - Mis recetas</h1>
+            <div id="division" />
+            <nav id="divPublicaciones">
+                <h1 id="headerPublicaciones">Mis pacientes</h1>
+                <div id="divBotonesRecetas">
+                <Box id="box1" m={0}>
+                <Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
+                </Box>
+                <Box id="box2" m={0}>
+                <Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
+                </Box>
+                </div>
+            </nav>
+            <div id="division" />
+            <div id="divLeyenda">
+                <p id="leyendaPublicacion">Visualiza tus pacientes.</p>
+                <div id="division" />
+            </div>
+            <div id="listaEliminar">
+            <div id="divLista2">
+                {publicacionesData.map((elemento) => (
+                            <div id="divsPublicaciones2" key={elemento.idPac}>
+                            <div className='informacionPublicacion'>
+                                        <p id="parrafoNum">Paciente No. ({elemento.idPac})</p>
+                                        <Divider id="division2" color="gray"/>
+                                        <p id="parrafoMed">Nombre del Paciente: {elemento.nombre}</p>
+                                        <p id="parrafoCon">Contacto del Paciente: {elemento.contacto}</p>
+                                        <p id="parrafoEdad">Edad del Paciente: {elemento.edad} años</p>
+                                        <p id="parrafoCon">Peso del Paciente: {elemento.peso} kg</p>
+                                        <p id="parrafoCon">No. de Usuario del Paciente: {elemento.idUsuario}</p>
+                                    <Button id="btnDescargar" variant="contained" type="submit" color="warning" onClick={()=>procesarEliminacion(elemento.idPac)}>Eliminar Paciente</Button>
+                                    <Divider id="division2" color="gray"/>
+                        </div>
+                        </div>
+                ))}
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default MisPacientes

healthmanager/src/Paciente.css

@@ -1,32 +0,0 @@
-.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;
-  }
-  .btnsalir {
-    margin-bottom: 20px;
-    padding: 10px 20px;
-    font-size: 18px;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    cursor: pointer;
-  }

healthmanager/src/RecetaMedica.css

@@ -1,22 +1,23 @@
 .receta-medica-container {
+    margin-top: 20px;
     margin-bottom: 20px;
   }
+  .receta-medica-form{
+    display: grid;
+    padding: 20px;
+    align-items: center;
+  }
   
   .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;
   }
   .btnsalir {
     margin-bottom: 20px;
@@ -24,6 +25,10 @@
     font-size: 18px;
     background-color: #007bff;
     color: #fff;
-    border: none;
+  }
-    cursor: pointer;
+  #textArea{
+    resize: none;
+    height: 100px;
+    width: 400px;
+    align-items: center;
   }

healthmanager/src/RecetaMedica.jsx

@@ -1,126 +1,176 @@
+/* eslint-disable no-useless-catch */
 /* eslint-disable no-unused-vars */
 import React, { useId, useState } from 'react';
 import './RecetaMedica.css';
+import { Button, Box, TextField ,DialogContentText, Divider} from "@mui/material"
 import { Link } from 'react-router-dom';
+import axios from "axios";
+import { useNavigate } from 'react-router-dom'
+import jsPDF from "jspdf"
 
 function RecetaMedica(props){
-  const [idreceta, setIdReceta] = useId('');
+  const fechaActual = new Date();
-  const [idPaciente, setIdPaciente] = useId('');
+  const navigate = useNavigate();
-  const [idMedico, setIdMedico] = useId('');
+  const mes = fechaActual.getMonth()+1;
-  const [contactoMedico, setContactoMedico] = useState ('');
+  const nombreMed = window.localStorage.getItem("ID");
-  const [pesoPaciente, setPesoPaciente] = useState ('');
+  const contactoMed = window.localStorage.getItem("Usuario");
-  const [edadPaciente, setEdadPaciente] = useState ('');
+  const idMed = window.localStorage.getItem("IdMed");
-  const [presionArt, setPresionArt] = useState();
+  const firmaMed = "nohayfirma"
-  const [fecha, setFecha] = useState('');
+  const [datosReceta, setdatosReceta] = useState( {
-  const [tempPaciente, setTempPaciente] = useState('');
+    nombreMed:nombreMed,
-  const [prescripcion, setPrescripcion] = useState('');
+    firmaMed:firmaMed,
-  const [firmaMedico, setFirmaMedico] = useState(null);
+    contactoMed:contactoMed,
+    pesoPac:'',
+    edadPac:'',
+    fecha:fechaActual.getFullYear()+"/"+mes+"/"+fechaActual.getDate(),
+    presArt:'',
+    tempPac:'',
+    contenido:'',
+    idPaciente:'',
+    idMedico:idMed,
+    })
+  const [Cargando, setCargando] = useState (false)
 
-
+    const hacerPeticion=async()=>{
-  const handleImageUpload = (e) => {
+        try{
-    const file = e.target.files[0];
+            const respuesta= await axios.post("http://localhost:4567/realizarReceta",datosReceta);
-    if (file) {
+            console.log(respuesta.data);
-      setFirmaMedico(file);
+            return respuesta.data;
+        }catch(error){
+            throw error;
         }
+    }
+
+    const procesarFormulario= async (evento)=>{
+        evento.preventDefault();
+        console.log("Datos recuperados del evento: ", datosReceta);
+        setCargando(true);
+        try{
+            const respuesta=await hacerPeticion();
+            setCargando(false);
+            if(respuesta==='Receta creada'){
+                generarPdf(nombreMed,contactoMed,fechaActual.getFullYear()+"/"+mes+"/"+fechaActual.getDate());
+                document.getElementById('idPaciente').value = ''
+                document.getElementById('pesoPac').value = ''
+                document.getElementById('edadPac').value = ''
+                document.getElementById('presArt').value = ''
+                document.getElementById('tempPac').value = ''
+                document.getElementById('textArea').value = ''
+                alert("Se realizo la receta :)");
+            }else{
+                alert("La receta no se realizo :(");
+                console.log("La receta no se realizo");
+            }
+        }catch(error){
+            setCargando(false);
+        }
+    }
+
+    const cambiosFormulario=(evento)=>{
+        const {name,value} =evento.target;
+        setdatosReceta({
+            ...datosReceta,  
+            [name]: value 
+        })
+    }
+
+    const generarPdf = (nombreMedico, contactoMedico, fecha) => {
+      const doc = new jsPDF();
+      const docWidth = doc.internal.pageSize.getWidth();
+    
+    //por su usamos imagen como la que viene en la imagen que me pasast
+      //const imgData = 'http://roianalytics.agency/wp-content/uploads/2020/09/Perfil-de-usuario.png';
+      //doc.addImage(imgData, 'PNG', 10, 10, 50, 15);
+    
+      doc.setFontSize(18);
+      doc.setFont('helvetica', 'bold');
+      const tituloX = 70;
+      const tituloY = 15;
+      doc.text(`Receta No. 0`, tituloX, tituloY);
+    
+      const lineaY = tituloY + 6;
+      doc.line(tituloX - 5, lineaY, docWidth - 10, lineaY);
+    
+      doc.setFontSize(12);
+      doc.setFont('helvetica', 'normal');
+      const contenidoX = tituloX;
+      const contenidoY = lineaY + 10;
+      const separacionLineas = 8;
+    
+      doc.text(`Medico: ${nombreMedico}`, contenidoX, contenidoY);
+      doc.text(`Contacto: ${contactoMedico}`, contenidoX, contenidoY + separacionLineas);
+      doc.text(`Fecha: ${fecha}`, contenidoX, contenidoY + separacionLineas * 2);
+    
+      const camposY = contenidoY + separacionLineas * 4;
+      doc.setFontSize(10);
+      doc.text('Paciente:', 10, camposY);
+      doc.text('Edad:', 60, camposY);
+      doc.text('Diagnostico:', 10, camposY + 10);
+      doc.text('Fecha:', 60, camposY + 10);
+    
+      doc.save(`Receta_${fecha}.pdf`);
     };
 
-  const handleSubmit = (e) => {
+    const regresarPrincipal = () => {
-    e.preventDefault();
+      navigate('/MedicoPrincipal');
+  }
 
-    console.log({
+  const cerrarSesion = () => {
-        idreceta,
+      navigate('/');
-        idPaciente,
+  }
-        idMedico,
-        contactoMedico,
-        pesoPaciente,
-        edadPaciente,
-        presionArt,
-        fecha,
-        tempPaciente,
-        prescripcion,
-        firmaMedico
-    });
-    
-  };
 
   return (
-    <div className="receta-medica-container">
+    <><h1 id="headerFacultad">Health Manager - Receta Medica</h1><div id="division" /><nav id="divPublicaciones">
-      <h2>Emitir receta médica</h2>
+      <h1 id="headerPublicaciones">Receta medica</h1>
-      <form onSubmit={handleSubmit} className="receta-medica-form">
+      <div id="divBotonesRecetas">
+        <Box id="box1" m={0}>
+          <Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
+        </Box>
+        <Box id="box2" m={0}>
+          <Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
+        </Box>
+      </div>
+    </nav><div id="division" /><div className="receta-medica-container">
+        <form onSubmit={procesarFormulario} className="receta-medica-form">
+          <p>Datos de la Receta</p>
           <input
+            id="idPaciente"
             type="text"
-            placeholder='id de receta'
+            placeholder='ID del paciente'
-            value={idreceta}
+            name="idPaciente"
-            disabled
+            onChange={cambiosFormulario} />
-        />
-        <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
+            id="pesoPac"
             type="text"
             placeholder='Peso'
-            value={pesoPaciente}
+            name="pesoPac"
-            onChange={(e) => setPesoPaciente(e.target.value)}
+            onChange={cambiosFormulario} />
-        />
           <input
+            id="edadPac"
             type="text"
             placeholder='Edad'
-            value={edadPaciente}
+            name="edadPac"
-            onChange={(e) => setEdadPaciente(e.target.value)}
+            onChange={cambiosFormulario} />
-        />
           <input
+            id="presArt"
             type="text"
             placeholder='Presion arterial'
-            value={presionArt}
+            name="presArt"
-            onChange={(e) => setPresionArt(e.target.value)}
+            onChange={cambiosFormulario} />
-        />
-        <input
-            type="text"
-            placeholder='Fecha'
-            value={fecha}
-            onChange={(e) => setFecha(e.target.value)}
-        />
           <input
+            id="tempPac"
             type="text"
             placeholder='Temperatura'
-            value={tempPaciente}
+            name="tempPac"
-            onChange={(e) => setTempPaciente(e.target.value)}
+            onChange={cambiosFormulario} />
-        />
           <textarea
+            id="textArea"
             placeholder="Escriba la prescripción médica"
-          value={prescripcion}
+            name="contenido"
-          onChange={(e) => setPrescripcion(e.target.value)}
+            onChange={cambiosFormulario} />
-        />
-        <input
-          type="file"
-          accept="image/*"
-          onChange={handleImageUpload}
-        />
-        <p></p>
-        <p></p>
           <button type="submit">Emitir receta</button>
         </form>
-      <p></p>
+      </div></>
-      <p></p>
-      <Link to="/">
-        <button className="btnsalir">Regresar al menú principal</button>
-      </Link>
-    </div>
   );
 }
 

healthmanager/src/RegistrarPaciente.jsx

@@ -1,54 +1,104 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-useless-catch */
 /* eslint-disable no-unused-vars */
 import React, { useState } from 'react';
-import './Paciente.css';
+import { Button, Box, TextField ,DialogContentText, Divider} from "@mui/material"
+import './RegistrarPaciente.css';
+import axios from "axios";
+import { useNavigate } from 'react-router-dom'
 import { Link } from 'react-router-dom';
 
 function RegistrarPaciente(props){
-  const [nombre, setNombre] = useState('');
+  const esMedico = false;
-  const [edad, setEdad] = useState('');
+  const navigate = useNavigate();
-  const [peso, setPeso] = useState('');
-  const [contacto, setContacto] = useState('');
 
-  const handleSubmit = (e) => {
+  const [datosUsuario,setDatosUsuario] = useState({
-    e.preventDefault();
+    correo:'',
+    contraseña:'',
+    esMedico:esMedico,
+  })
 
-  };
+  const [Cargando, setCargando] = useState (false)
 
+
+  const hacerPeticion=async()=>{
+    try{
+        const respuesta= await axios.post("http://localhost:4567/AgregarUsuario",datosUsuario);
+        console.log(respuesta.data);
+        return respuesta.data;
+    }catch(error){
+        throw error;
+    }
+}
+
+const procesarFormulario= async (evento)=>{
+    evento.preventDefault();
+    console.log("Datos recuperados del evento: ", datosUsuario);
+    setCargando(true);
+    try{
+        console.log("Entrando try");
+        const respuesta=await hacerPeticion();
+        setCargando(false);
+        if(respuesta==='Usuario agregado'){
+            document.getElementById('correoI').value = ''
+            document.getElementById('contraseñaI').value = ''
+            alert("Se registro paciente");
+        }else{
+            alert("El registro no se realizo :(");
+            console.log("El registro no se realizo");
+        }
+    }catch(error){
+        setCargando(false);
+    }
+}
+
+const cambiosFormulario=(evento)=>{
+    const {name,value} =evento.target;
+    setDatosUsuario({
+        ...datosUsuario,  
+        [name]: value 
+    })
+}
+
+const regresarPrincipal = () => {
+  navigate('/MedicoPrincipal');
+}
+
+const cerrarSesion = () => {
+  navigate('/');
+}
   return (
-    <div className="paciente-container">
+    <><h1 id="headerFacultad">Health Manager - Registrar Paciente</h1><div id="division" /><nav id="divPublicaciones">
-      <h2>Registrar paciente</h2>
+      <h1 id="headerPublicaciones">Registrar Paciente</h1>
-      <form onSubmit={handleSubmit} className="paciente-form">
+      <div id="divBotonesRecetas">
+        <Box id="box1" m={0}>
+          <Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
+        </Box>
+        <Box id="box2" m={0}>
+          <Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
+        </Box>
+      </div>
+    </nav><div id="division" /><div id="divLeyenda">
+        <div id="division" />
+      </div><div className="paciente-container">
+        <form onSubmit={procesarFormulario} className="paciente-form">
+          <p>Datos del Paciente</p>
           <input
+            id="correoI"
             type="text"
-          placeholder="Nombre"
+            name="correo"
-          value={nombre}
+            placeholder="Correo electronico"
-          onChange={(e) => setNombre(e.target.value)}
+            onChange={cambiosFormulario} />
-        />
-        <input
-          type="number"
-          placeholder="Edad"
-          value={edad}
-          onChange={(e) => setEdad(e.target.value)}
-        />
           <input
+            id="contraseñaI"
             type="text"
-          placeholder="Peso"
+            name="contraseña"
-          value={peso}
+            placeholder="Contraseña"
-          onChange={(e) => setPeso(e.target.value)}
+            onChange={cambiosFormulario} />
-        />
-        <input
-          type="text"
-          placeholder="Contacto"
-          value={contacto}
-          onChange={(e) => setContacto(e.target.value)}
-        />
           <button type="submit">Registrar paciente</button>
         </form>
         <p></p>
-        <Link to="/">
+      </div></>
-          <button className="btnsalir">Regresar al menú principal</button>
-        </Link>
-    </div>
   );
 }
 

healthmanager/src/main.jsx

@@ -6,11 +6,14 @@ import Principal from './Principal.jsx'
 import DescargaRecetas from './DescargaRecetas.jsx'
 import MiPerfil from './MiPerfil.jsx'
 import MedicoPrincipal from './MedicoPrincipal .jsx'
-import Paciente from './RegistrarPaciente.jsx';
+import RegistrarPaciente from './RegistrarPaciente.jsx';
 import EditarPaciente from './EditarPaciente';
 import RecetaMedica from './RecetaMedica';
 import BuscarPaciente from './BuscarPaciente';
 import HistorialPacientes from './HistorialPacientes'
+import MiPerfilMedico from './MiPerfilMedico.jsx'
+import MisPacientes from './MisPacientes.jsx'
+import EliminarPacientes from './EliminarPacientes.jsx'
 
 
   const router = createHashRouter([
@@ -32,8 +35,8 @@ import HistorialPacientes from './HistorialPacientes'
     }
     ,
     {
-      path: "/Paciente",
+      path: "/RegistrarPaciente",
-      element:<Paciente/>
+      element:<RegistrarPaciente/>
     },
     {
       path: "/EditarPaciente",
@@ -55,6 +58,19 @@ import HistorialPacientes from './HistorialPacientes'
     {
       path: "/MiPerfil",
       element:<MiPerfil/>
+    },
+    {
+      path: "MisPacientes",
+      element:<MisPacientes/>
+    }
+    ,
+    {
+      path: "/MiPerfilMedico",
+      element:<MiPerfilMedico/>
+    },
+    {
+      path: "/EliminarPacientes",
+      element:<EliminarPacientes/>
     }
   ])
 

healthmanager/src/registrarPaciente.css

@@ -1,55 +1,35 @@
-*{
+.paciente-container {
-    font-family:'Times New Roman', Times, serif;
+    margin-bottom: 20px;
-    box-sizing: border-box;
-}
-.formulario{
-    align-items: center;
-    justify-content:center;
-    margin: 0 auto;
-    background-color: #afc0f5;
-    height: fit-content;
-    width: 400px;
-    border-radius: 20px;   
-    padding-top: 10px;
-    gap: 25px;
-    flex: 1 1 300px;
-    margin-bottom: 25px;
-    overflow: hidden;
-}
-
-label{
-    margin-left: 30px;
-    margin-bottom: 30px;
-}
-
-input[type="number"]{
-    width: 45px;
-}
-
-input{
-    border-radius: 10%;
-    border: 1px grey;
-    margin-bottom: 10px;
-}
-
-button{
-    background-color: rgb(123, 123, 248);
-    border-radius: 10%;
-    font-size: 18px;
-    border: 1px grey;
-    color:white;
-    margin-left: 30px;
     margin-top: 20px;
-    margin-bottom: 30px;
+  }
-    padding: 5px 10px;
-}
   
-.btnCancelar{
+  .paciente-form {
-    background-color: red;
+      display: grid;
-    margin-left: 160px;
+      padding: 20px;
-}
+      align-items: center;
+  }
   
-h2 {
+  
-    margin-bottom: 30px;
+  .paciente-form input {
-    text-align: center;
+    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;
+  }
+  .btnsalir {
+    margin-bottom: 20px;
+    padding: 10px 20px;
+    font-size: 18px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+  }

healthmanager/src/registrarPaciente.html

@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Registrar Paciente</title>
-    <link rel="stylesheet" href="registrarPaciente.css">
-</head>
-<body>
-    <div class="formulario">
-        <h2>Registrar Paciente</h2>
-        <form action= "" id="registrarPaciente">
-            <label for="nombre" class="campoTexto">Nombre:</label>
-            <input type="text" name="nombre" id="nombre">
-
-            <div>
-                <label for="edad" class="edad">Edad:</label>
-                <input type="number" name="edad" id="edad">
-
-                <label for="peso" class="peso">Peso:</label>
-                <input type="number" name="peso" id="peso">
-
-                <label for="altura" class="altura">Altura:</label>
-                <input type="number" name="altura" id="altura">
-            </div>
-
-            <div>
-                <label for="presionArterial" class="presion">Presión Arterial:</label>
-                <input type="number" name="presionArterial" id="presionArterial">
-
-                <label for="temperatura" class="temperatura">Temperatura:</label>
-                <input type="number" name="temperatura" id="temperatura">
-            </div>
-
-            <label for="alergias" class="campoTexto">Alergias:</label>
-            <input type="text" name="alergias" id="alergias">
-
-            <div>
-                <button type="submit" class="btnRegistar">Registrar</button>
-                <button class="btnCancelar">Cancelar</button>
-            </div>
-        </form>
-    </div>
-</body>
-</html>