Alteração no formulario

src/App.css

@@ -1,38 +1,33 @@
-.App {
+.form-buttons {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
-  flex-direction: column;
+  gap: 10px; /* Espaço entre os botões */
-  align-items: center;
+  justify-content: flex-start; /* Alinha os botões à esquerda */
-  justify-content: center;
+  margin-top: 20px;
-  font-size: calc(10px + 2vmin);
+}
+
+.btn-save {
+  background-color: #28a745;
   color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
 }
 
-.App-link {
+.btn-cancel {
-  color: #61dafb;
+  background-color: #ccc;
+  color: black;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
 }
 
-@keyframes App-logo-spin {
+.btn-back {
-  from {
+  background-color: #007bff;
-    transform: rotate(0deg);
+  color: white;
-  }
+  border: none;
-  to {
+  padding: 8px 16px;
-    transform: rotate(360deg);
+  border-radius: 6px;
-  }
+  cursor: pointer;
 }

src/components/patients/PatientForm.jsx

@@ -1,43 +1,31 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import InputMask from "react-input-mask";
 
 function PatientForm({ onSave, onCancel, PatientDict }) {
 
-
   const FormatTelefones = (valor) => {
-
+    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
-   const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+    return digits
-
+      .replace(/(\d)/, '($1')
-  
+      .replace(/(\d{2})(\d)/, '$1) $2' )
-  return digits
+      .replace(/(\d)(\d{4})/, '$1 $2')
-    .replace(/(\d)/, '($1')   // 123 -> 123.
+      .replace(/(\d{4})(\d{4})/, '$1-$2')
-    .replace(/(\d{2})(\d)/, '$1) $2' )
-    .replace(/(\d)(\d{4})/, '$1 $2')
-    .replace(/(\d{4})(\d{4})/, '$1-$2')
   }
 
-
   const FormatCPF = (valor) => {
-  
+    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
-  const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+    return digits
-
+      .replace(/(\d{3})(\d)/, '$1.$2')
-
+      .replace(/(\d{3})(\d)/, '$1.$2')
-  
+      .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
-  return digits
-    .replace(/(\d{3})(\d)/, '$1.$2')   // 123 -> 123.
-    .replace(/(\d{3})(\d)/, '$1.$2')   // 123.456 -> 123.456.
-    .replace(/(\d{3})(\d{1,2})$/, '$1-$2'); // 123.456.789 -> 123.456.789-01
-    
   }
 
-
   const [formData, setFormData] = useState({
+    foto: null,
     nome: PatientDict.nome,
     nomeSocial: PatientDict.nome_social,
     dataNascimento: PatientDict.data_nascimento,
     genero: PatientDict.sexo,
-    documento: '',
-    numeroDocumento: '',
     cpf: PatientDict.cpf,
     profissao: PatientDict.profissao ,
     nomeMae: PatientDict.nome_mae,
@@ -59,50 +47,82 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
     telefone1: PatientDict.celular,
     telefone2: '',
     telefone3: '',
-    observacoes: ''
+    observacoes: '',
+    rg: '',
+    documentoTipo: '',
+    numeroDocumento: '',
+    etniaRaca: '',
+    naturalidade: '',
+    nacionalidade: '',
+    estadoCivil: '',
+    rnConvenio: false,
+    
+    //  INFORMAÇÕES MÉDICAS
+    tipoSanguineo: '',
+    peso: '',
+    altura: '',
+    imc: '',
+    alergias: '',
+
+    //  INFORMAÇÕES DE CONVÊNIO
+    convenio: '',
+    plano: '',
+    numeroMatricula: '',
+    validadeCarteira: '',
+    validadeIndeterminada: false,
+
+    // ANEXO
+    anexos: null,
   });
 
+  //  armazenar a URL da foto do avatar
+  const [avatarUrl, setAvatarUrl] = useState(null);
+
+  // Lógica para calcular o IMC
+  useEffect(() => {
+    const peso = parseFloat(formData.peso);
+    const altura = parseFloat(formData.altura);
+    if (peso > 0 && altura > 0) {
+      const imcCalculado = peso / (altura * altura);
+      setFormData(prev => ({ ...prev, imc: imcCalculado.toFixed(2) }));
+    } else {
+      setFormData(prev => ({ ...prev, imc: '' }));
+    }
+  }, [formData.peso, formData.altura]);
+
+
   const handleChange = (e) => {
-    const { name, value } = e.target;
+    const { name, value, type, checked, files } = e.target;
-    setFormData({
+    
-      ...formData,
+    if (type === 'checkbox') {
-      [name]: value
+      setFormData({ ...formData, [name]: checked });
-    });
+    } else if (type === 'file') {
+      setFormData({ ...formData, [name]: files[0] });
 
+      // Lógica para pré-visualizar a imagem no avatar
+      if (name === 'foto' && files[0]) {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          setAvatarUrl(reader.result);
+        };
+        reader.readAsDataURL(files[0]);
+      } else if (name === 'foto' && !files[0]) {
+        setAvatarUrl(null); // Limpa o avatar se nenhum arquivo for selecionado
+      }
 
-    if(name.includes('cpf')){
+    } else {
-
+      setFormData({ ...formData, [name]: value });
-      let cpfFormatado = FormatCPF(e.target.value)
-
-      setFormData({...formData,
-      [name]: cpfFormatado,}
-      )}
-
-      else if(name.includes('telefone')){
-      let telefoneFormatado = FormatTelefones(value)
-
-      console.log(telefoneFormatado)
-      
-
-
-      setFormData({...formData,
-        [name]: telefoneFormatado
-      })
     }
 
-   else if(name.includes('cep')){
+    if (name.includes('cpf')) {
-    const digitsCep = String(value).replace(/\D/g, '').slice(0, 8);
+      let cpfFormatado = FormatCPF(value);
-    setFormData({...formData,
+      setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
-    [name]: digitsCep
+    } else if (name.includes('telefone')) {
-      })
+      let telefoneFormatado = FormatTelefones(value);
-     }
+      setFormData(prev => ({ ...prev, [name]: telefoneFormatado }));
-
+    }
-    
+  };
-
-    };
-
  
-  // Função para buscar endereço pelo CEP
   const handleCepBlur = async () => {
     const cep = formData.cep.replace(/\D/g, '');
     if (cep.length === 8) {
@@ -127,59 +147,95 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
   };
 
   const handleSubmit = () => {
-    if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento || !formData.email||!formData.telefone1){
+    if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento){
-      alert('Por favor, preencha: Nome ,CPF, Gênero, Data de nascimento, telefone e Email.');
+      alert('Por favor, preencha Nome ,CPF, Gênero e data de nascimento.');
       return;
     }
 
-    onSave(
+    onSave({
-    {nome: formData.nome,
+      ...formData,
-  nomeSocial: formData.nomeSocial,
+      endereco: {
-  dataNascimento: formData.dataNascimento,
+        cep: formData.cep,
-  genero: formData.genero,
+        cidade: formData.cidade,
-  documento: formData.documento,
+        estado: formData.estado,
-  numeroDocumento: formData.numeroDocumento,
+        bairro: formData.bairro,
-  cpf: formData.cpf,
+        logradouro: formData.rua,
-  profissao: formData.profissao,
+        numero: formData.numero,
-  nomeMae: formData.nomeMae,
+        complemento: formData.complemento,
-  profissaoMae: formData.profissaoMae,
+      },
-  nomePai: formData.nomePai,
+      contato: {
-  profissaoPai: formData.profissaoPai,
+        email: formData.email,
-  nomeResponsavel: formData.nomeResponsavel,
+        telefone1: formData.telefone1,
-  cpfResponsavel: formData.cpfResponsavel,
+        telefone2: formData.telefone2,
-  nomeConjuge: formData.nomeConjuge,
+        telefone3: formData.telefone3,
-  outroId: formData.outroId,
+      },
-  endereco: {
+      infoMedicas: {
-    cep: formData.cep,
+        tipoSanguineo: formData.tipoSanguineo,
-    cidade: formData.cidade,
+        peso: formData.peso,
-    estado: formData.estado,
+        altura: formData.altura,
-    bairro: formData.bairro,
+        imc: formData.imc,
-    logradouro: formData.rua,
+        alergias: formData.alergias,
-    numero: formData.numero,
+      },
-    complemento: formData.complemento,
+      infoConvenio: {
-  },
+        convenio: formData.convenio,
-
+        plano: formData.plano,
-  contato: {
+        numeroMatricula: formData.numeroMatricula,
-    email: formData.email,
+        validadeCarteira: formData.validadeCarteira,
-    telefone1: formData.telefone1,
+        validadeIndeterminada: formData.validadeIndeterminada,
-    telefone2: formData.telefone2,
+      },
-    telefone3: formData.telefone3,
+    });
-  },
-
-  observacoes: formData.observacoes,
-}
-
-      
-    );
   };
 
   return (
     <div className="card p-3">
-      <h3 className="mb-3 text-center">MediConnect</h3>
+      <h3 className="mb-3 text-center">MedicoConnect</h3>
 
-      {/* ------------------ DADOS PESSOAIS ------------------ */}
+      {/*  DADOS PESSOAIS */}
       <h5 className="mb-3">Dados Pessoais</h5>
       <div className="row">
+        {/* AVATAR E INPUT DE FOTO */}
+        <div className="col-md-6 mb-3 d-flex align-items-center">
+          <div className="me-3">
+            {avatarUrl ? (
+              <img 
+                src={avatarUrl} 
+                alt="Avatar do Paciente" 
+                style={{ width: '80px', height: '80px', borderRadius: '50%', objectFit: 'cover' }} 
+              />
+            ) : (
+              <div 
+                style={{ 
+                  width: '80px', 
+                  height: '80px', 
+                  borderRadius: '50%', 
+                  backgroundColor: '#e0e0e0', 
+                  display: 'flex', 
+                  alignItems: 'center', 
+                  justifyContent: 'center',
+                  fontSize: '3rem',
+                  color: '#9e9e9e'
+                }}
+              >
+                {/* Ícone de usuário simples ou suas iniciais */}
+                &#x2624; 
+              </div>
+            )}
+          </div>
+          <div>
+            <label htmlFor="foto-input" className="btn btn-primary">Carregar Foto</label>
+            <input 
+              type="file" 
+              className="form-control d-none" 
+              name="foto" 
+              id="foto-input" 
+              onChange={handleChange} 
+              accept="image/*"
+            />
+            {formData.foto && <span className="ms-2">{formData.foto.name}</span>}
+          </div>
+        </div>
+        {/* CADASTRO */}
+
         <div className="col-md-6 mb-3">
           <label>Nome: *</label>
           <input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} />
@@ -202,21 +258,58 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
           </select>
         </div>
         <div className="col-md-6 mb-3">
-          <label>Outro documento:</label>
+          <label>CPF: *</label>
-          <input type="text" className="form-control" name="documento" value={formData.documento} onChange={handleChange} />
+          <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} />
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>RG:</label>
+          <input type="text" className="form-control" name="rg" value={formData.rg} onChange={handleChange} />
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Outros documentos:</label>
+          <select className="form-control" name="documentoTipo" value={formData.documentoTipo} onChange={handleChange}>
+            <option value="">Selecione</option>
+            <option value="CNH">CNH</option>
+            <option value="Passaporte">Passaporte</option>
+          </select>
         </div>
         <div className="col-md-6 mb-3">
           <label>Número do documento:</label>
           <input type="text" className="form-control" name="numeroDocumento" value={formData.numeroDocumento} onChange={handleChange} />
         </div>
         <div className="col-md-6 mb-3">
-          <label>CPF: *</label>
+          <label>Etnia e Raça:</label>
-          <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} />
+          <select className="form-control" name="etniaRaca" value={formData.etniaRaca} onChange={handleChange}>
+            <option value="">Selecione</option>
+            <option value="Branca">Branca</option>
+            <option value="Preta">Preta</option>
+            <option value="Parda">Parda</option>
+            <option value="Amarela">Amarela</option>
+            <option value="Indígena">Indígena</option>
+          </select>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Naturalidade:</label>
+          <input type="text" className="form-control" name="naturalidade" value={formData.naturalidade} onChange={handleChange} />
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Nacionalidade:</label>
+          <input type="text" className="form-control" name="nacionalidade" value={formData.nacionalidade} onChange={handleChange} />
         </div>
         <div className="col-md-6 mb-3">
           <label>Profissão:</label>
           <input type="text" className="form-control" name="profissao" value={formData.profissao} onChange={handleChange} />
         </div>
+        <div className="col-md-6 mb-3">
+          <label>Estado civil:</label>
+          <select className="form-control" name="estadoCivil" value={formData.estadoCivil} onChange={handleChange}>
+            <option value="">Selecione</option>
+            <option value="Solteiro">Solteiro(a)</option>
+            <option value="Casado">Casado(a)</option>
+            <option value="Divorciado">Divorciado(a)</option>
+            <option value="Viuvo">Viúvo(a)</option>
+          </select>
+        </div>
         <div className="col-md-6 mb-3">
           <label>Nome da Mãe:</label>
           <input type="text" className="form-control" name="nomeMae" value={formData.nomeMae} onChange={handleChange} />
@@ -249,9 +342,87 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
           <label>Identificador de outro sistema:</label>
           <input type="text" className="form-control" name="outroId" value={formData.outroId} onChange={handleChange} />
         </div>
+        <div className="col-md-12 mb-3">
+          <div className="form-check">
+            <input className="form-check-input" type="checkbox" name="rnConvenio" checked={formData.rnConvenio} onChange={handleChange} id="rnConvenio" />
+            <label className="form-check-label" htmlFor="rnConvenio">
+              RN na Guia do convênio
+            </label>
+          </div>
+        </div>
       </div>
 
-      {/* ------------------ ENDEREÇO ------------------ */}
+      {/* INFORMAÇÕES MÉDICAS */}
+      <h5 className="mt-3">Informações Médicas</h5>
+      <div className="row">
+        <div className="col-md-6 mb-3">
+          <label>Tipo Sanguíneo:</label>
+          <select className="form-control" name="tipoSanguineo" value={formData.tipoSanguineo} onChange={handleChange}>
+            <option value="">Selecione</option>
+            <option value="A+">A+</option>
+            <option value="A-">A-</option>
+            <option value="B+">B+</option>
+            <option value="B-">B-</option>
+            <option value="AB+">AB+</option>
+            <option value="AB-">AB-</option>
+            <option value="O+">O+</option>
+            <option value="O-">O-</option>
+          </select>
+        </div>
+        <div className="col-md-2 mb-3">
+          <label>Peso (kg):</label>
+          <input type="number" step="0.1" className="form-control" name="peso" value={formData.peso} onChange={handleChange} />
+        </div>
+        <div className="col-md-2 mb-3">
+          <label>Altura (m):</label>
+          <input type="number" step="0.01" className="form-control" name="altura" value={formData.altura} onChange={handleChange} />
+        </div>
+        <div className="col-md-2 mb-3">
+          <label>IMC (kg/m²):</label>
+          <input type="text" className="form-control" name="imc" value={formData.imc} readOnly disabled />
+        </div>
+        <div className="col-md-12 mb-3">
+          <label>Alergias:</label>
+          <textarea className="form-control" name="alergias" value={formData.alergias} onChange={handleChange} placeholder="Ex: AAS, Dipirona, etc"></textarea>
+        </div>
+      </div>
+
+      {/*  INFORMAÇÕES DE CONVÊNIO  */}
+      <h5 className="mt-3">Informações de convênio</h5>
+      <div className="row">
+        <div className="col-md-6 mb-3">
+          <label>Convênio:</label>
+          <select className="form-control" name="convenio" value={formData.convenio} onChange={handleChange}>
+            <option value="">Selecione</option>
+            <option value="Amil">Amil</option>
+            <option value="Bradesco Saúde">Bradesco Saúde</option>
+            <option value="SulAmérica">SulAmérica</option>
+            <option value="Unimed">Unimed</option>
+          </select>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Plano:</label>
+          <input type="text" className="form-control" name="plano" value={formData.plano} onChange={handleChange} />
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Nº de matrícula:</label>
+          <input type="text" className="form-control" name="numeroMatricula" value={formData.numeroMatricula} onChange={handleChange} />
+        </div>
+        <div className="col-md-4 mb-3">
+          <label>Validade da Carteira:</label>
+          <input type="date" className="form-control" name="validadeCarteira" value={formData.validadeCarteira} onChange={handleChange} disabled={formData.validadeIndeterminada} />
+        </div>
+        <div className="col-md-2 d-flex align-items-end mb-3">
+          <div className="form-check">
+            <input className="form-check-input" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada} onChange={handleChange} id="validadeIndeterminada" />
+            <label className="form-check-label" htmlFor="validadeIndeterminada">
+              Validade indeterminada
+            </label>
+          </div>
+        </div>
+      </div>
+
+      {/* ENDEREÇO  */}
       <h5>Endereço</h5>
       <div className="row">
         <div className="col-md-4 mb-3">
@@ -284,7 +455,7 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
         </div>
       </div>
 
-      {/* ------------------ CONTATO ------------------ */}
+      {/*  CONTATO */}
       <h5>Contato</h5>
       <div className="row">
         <div className="col-md-6 mb-3">
@@ -305,12 +476,20 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
         </div>
       </div>
 
-      {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
+      {/* INFORMAÇÕES ADICIONAIS */}
-      <h5>Informações Adicionais</h5>
+      <h5 className="mt-3">Informações Adicionais</h5>
       <div className="mb-3">
         <label>Observações:</label>
         <textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange}></textarea>
       </div>
+      
+      {/* ANEXOS DO PACIENTE  */}
+      <h5 className="mt-3">Anexos do Paciente</h5>
+      <div className="mb-3">
+        <label htmlFor="anexos-input" className="btn btn-secondary">Escolher arquivo</label>
+        <input type="file" className="form-control d-none" name="anexos" id="anexos-input" onChange={handleChange} />
+        <span className="ms-2">{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
+      </div>
 
       {/* Botões */}
       <div className="mt-3">
@@ -325,4 +504,4 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
   );
 }
 
-export default PatientForm;
+export default PatientForm;

src/pages/EditPage.jsx

@@ -1,52 +1,50 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
-
 import PatientForm from '../components/patients/PatientForm'
 
-import {useEffect, useState} from 'react'
+const EditPage = ({ id }) => {
-
-const EditPage = ( {id}) => {
-
   const [PatientToPUT, setPatientPUT] = useState({})
 
   var requestOptions = {
-   method: 'GET',
+    method: 'GET',
-   redirect: 'follow'
+    redirect: 'follow'
-};
-
-useEffect(() => {
-
-
-fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions)
-  .then(response => response.json())
-  .then(result => result.data)
-  .then(data => console.log(data))
-  .catch(error => console.log('error', error));
-    
-}, [])
-  const HandlePutPatient = () => {
-
-    console.log('paciente atualizado')
-
   }
 
+  useEffect(() => {
+    fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions)
+      .then(response => response.json())
+      .then(result => result.data)
+      .then(data => setPatientPUT(data))
+      .catch(error => console.log('error', error))
+  }, [id])
+
+  const HandlePutPatient = () => {
+    console.log('paciente atualizado')
+  }
+
+  const handleBack = () => {
+    console.log('voltando para lista sem salvar')
+    // aqui você pode usar react-router-dom, ex:
+    // navigate('/lista-pacientes')
+  }
 
   return (
-
     <div>
-    
+      <PatientForm
-    <button>Voltar para lista sem salvar</button>
+        onSave={HandlePutPatient}
-
+        onCancel={() => console.log('Não atualizar')}
-    
+        PatientDict={PatientToPUT}
-
+        extraButton={
-    <PatientForm
+          <button 
-    onSave={HandlePutPatient}
+            type="button" 
-    onCancel={console.log('Não atualizar')}
+            className="btn-back"
-    PatientDict={PatientToPUT}
+            onClick={handleBack}
-    
+          >
-    />
+            Voltar para lista sem salvar
-    
+          </button>
+        }
+      />
     </div>
   )
 }
 
-export default EditPage
+export default EditPage