From ae5988997e38c688cb0e0d6bd9a3d90f9e457d48 Mon Sep 17 00:00:00 2001
From: Caio Miguel Lima Nunes <miiguell.nuness02@gmail.com>
Date: Wed, 24 Sep 2025 18:57:18 -0300
Subject: [PATCH] Adicionado o modal no codigo

---
 src/components/doctors/DoctorForm.jsx   | 173 +++++-------------------
 src/components/patients/PatientForm.jsx |  51 +++++--
 src/pages/DoctorCadastroManager.jsx     |  42 ++++--
 src/pages/PatientCadastroManager.jsx    |   3 +-
 4 files changed, 110 insertions(+), 159 deletions(-)

diff --git a/src/components/doctors/DoctorForm.jsx b/src/components/doctors/DoctorForm.jsx
index 7255942..c7e8242 100644
--- a/src/components/doctors/DoctorForm.jsx
+++ b/src/components/doctors/DoctorForm.jsx
@@ -124,6 +124,9 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
   };
 
   // Função para buscar endereço pelo CEP
+  const [showModal, setShowModal] = useState(false);
+  const [modalMsg, setModalMsg] = useState('');
+
   const handleCepBlur = async () => {
     const cep = formData.cep.replace(/\D/g, '');
     if (cep.length === 8) {
@@ -139,17 +142,20 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
             estado: data.uf || ''
           }));
         } else {
-          alert('CEP não encontrado!');
+          setModalMsg('CEP não encontrado!');
+          setShowModal(true);
         }
       } catch (error) {
-        alert('Erro ao buscar o CEP.');
+        setModalMsg('Erro ao buscar o CEP.');
+        setShowModal(true);
       }
     }
   };
 
   const handleSubmit = () => {
-    if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento || !formData.email) {
-      alert('Por favor, preencha: Nome ,CPF, Gênero, Data de Nascimento e Email.');
+    if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento ) {
+      setModalMsg('Por favor, preencha: Nome, CPF, Gênero, Data de Nascimento.');
+      setShowModal(true);
       return;
     }
 
@@ -180,9 +186,31 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
       }
       }
     );
+    setModalMsg('Médico salvo com sucesso!');
+    setShowModal(true);
   };
 
   return (
+    <>
+      {/* Modal de feedback */}
+      {showModal && (
+        <div className="modal fade show" style={{ display: 'block' }} tabIndex="-1">
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title">Atenção</h5>
+                <button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
+              </div>
+              <div className="modal-body">
+                <p style={{ color: '#23336f', fontSize: '1.3rem', fontWeight: 500 }}>{modalMsg}</p>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       <div className="card p-3 shadow-sm">
       <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
 
@@ -247,7 +275,7 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
-              <input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }}  min="1900-01-01" max="2025-09-24" />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
@@ -406,11 +434,11 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
         <div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
           <div className="row mt-3">
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Email: *</label>
+              <label style={{ fontSize: '1.1rem' }}>Email: </label>
               <input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
+              <label style={{ fontSize: '1.1rem' }}>Telefone: </label>
               <input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
@@ -434,137 +462,10 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
           Cancelar
         </button>
       </div>
+
     </div>
-  //   <div className="card p-3">
-  //     <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
-
-  //     {/* ------------------ DADOS PESSOAIS ------------------ */}
-  //     <h5 className="mb-3">Dados Pessoais</h5>
-  //     <div className="row">
-  //       <div className="col-md-6 mb-3">
-  //         <label>Nome: *</label>
-  //         <input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Nome social:</label>
-  //         <input type="text" className="form-control" name="nomeSocial" value={formData.nomeSocial} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Data de nascimento:</label>
-  //         <input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Gênero: *</label>
-  //         <select className="form-control" name="genero" value={formData.genero} onChange={handleChange}>
-  //           <option value="">Selecione</option>
-  //           <option value="Masculino">Masculino</option>
-  //           <option value="Feminino">Feminino</option>
-  //           <option value="Outro">Outro</option>
-  //         </select>
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>CPF: *</label>
-  //         <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Especialização:</label>
-  //         <select
-  //           className="form-control"
-  //           name="profissao"
-  //           value={formData.profissao}
-  //           onChange={handleChange}
-  //         >
-  //           <option value="">Selecione uma especialização</option>
-  //           <option value="Cardiologia">Clínica médica (clínico geral)</option>
-  //           <option value="Dermatologia">Pediatria</option>
-  //           <option value="Ginecologia">Ginecologia e obstetrícia</option>
-  //           <option value="Pediatria">Cardiologia</option>
-  //           <option value="Ortopedia">Ortopedia e traumatologia</option>
-  //           <option value="Oftalmologia">Oftalmologia</option>
-  //           <option value="Neurologia">Otorrinolaringologia</option>
-  //           <option value="Psiquiatria">Dermatologia</option>
-  //           <option value="Endocrinologia">Neurologia</option>
-  //           <option value="Oncologia">Psiquiatria</option>
-  //           <option value="Oncologia">Endocrinologia</option>
-  //           <option value="Oncologia">Gastroenterologia</option>
-  //           <option value="Oncologia">Urologia</option>    
-  //         </select>
-  //       </div>
-  //     </div>
-
-  //     {/* ------------------ ENDEREÇO ------------------ */}
-  //     <h5>Endereço</h5>
-  //     <div className="row">
-  //       <div className="col-md-4 mb-3">
-  //         <label>CEP:</label>
-  //         <input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} />
-  //       </div>
-  //       <div className="col-md-8 mb-3">
-  //         <label>Rua:</label>
-  //         <input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Bairro:</label>
-  //         <input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-4 mb-3">
-  //         <label>Cidade:</label>
-  //         <input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-2 mb-3">
-  //         <label>Estado:</label>
-  //         <input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-4 mb-3">
-  //         <label>Número:</label>
-  //         <input type="text" className="form-control" name="numero" value={formData.numero} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-8 mb-3">
-  //         <label>Complemento:</label>
-  //         <input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} />
-  //       </div>
-  //     </div>
-
-  //     {/* ------------------ CONTATO ------------------ */}
-  //     <h5>Contato</h5>
-  //     <div className="row">
-  //       <div className="col-md-6 mb-3">
-  //         <label>E-mail: *</label>
-  //         <input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Telefone: *</label>
-  //         <input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Telefone 2:</label>
-  //         <input type="text" className="form-control" name="telefone2" value={formData.telefone2} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Telefone 3:</label>
-  //         <input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} />
-  //       </div>
-  //     </div>
-
-  //     {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
-  //     <h5>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>
-
-  //     {/* Botões */}
-  //     <div className="mt-3">
-  //       <button className="btn btn-success me-2" onClick={handleSubmit}>
-  //         Salvar Paciente
-  //       </button>
-  //       <button className="btn btn-light" onClick={onCancel}>
-  //         Cancelar
-  //       </button>
-  //     </div>
-  //   </div>
+    </>
   );
 }
 
-
 export default DoctorForm;
diff --git a/src/components/patients/PatientForm.jsx b/src/components/patients/PatientForm.jsx
index 673a405..58352a8 100644
--- a/src/components/patients/PatientForm.jsx
+++ b/src/components/patients/PatientForm.jsx
@@ -2,6 +2,10 @@ import React, { useState, useEffect } from 'react';
 
 
 function PatientForm({ onSave, onCancel,formData, setFormData }) {
+  // Estado para controlar modal de feedback
+  const [showMessage, setShowMessage] = useState(false);
+  const [message, setMessage] = useState('');
+  const [messageType, setMessageType] = useState('success'); // 'success' ou 'danger'
 
   const FormatTelefones = (valor) => {
     const digits = String(valor).replace(/\D/g, '').slice(0, 11);
@@ -169,18 +173,20 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
 
   const handleSubmit = async () => {
     if (!formData.nome || !formData.cpf || !formData.sexo || !formData.data_nascimento){
-      alert('Por favor, preencha Nome ,CPF, Gênero e data de nascimento.'); 
+      setMessage('Por favor, preencha: Nome, CPF, Gênero, Data de Nascimento .');
+      setMessageType('danger');
+      setShowMessage(true);
       return;
     }
 
-     const CPFinvalido = await ValidarCPF(formData.cpf)
-    console.log(CPFinvalido)
+    const CPFinvalido = await ValidarCPF(formData.cpf);
     if(CPFinvalido[0] === true){
-      alert(CPFinvalido[1])
-      return
+      setMessage(CPFinvalido[1]);
+      setMessageType('danger');
+      setShowMessage(true);
+      return;
     }
 
-
     onSave({
       ...formData,
       endereco: {
@@ -214,10 +220,39 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
         pacienteVip: formData.pacienteVip, 
       },
     });
+    setMessage('Paciente salvo com sucesso!');
+    setMessageType('success');
+    setShowMessage(true);
   };
   
   return (
-    <div className="card p-3">
+    <div className="card p-3" style={{ position: 'relative' }}>
+      {/* Modal de feedback */}
+      {showMessage && (
+        <div className="modal-backdrop" style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', background: 'rgba(0,0,0,0.15)', zIndex: 1050 }}></div>
+      )}
+      {showMessage && (
+        <div className="modal d-block" tabIndex="-1" role="dialog" style={{ zIndex: 1100 }}>
+          <div className="modal-dialog modal-dialog-centered" role="document">
+            <div className="modal-content" style={{ borderRadius: '12px', boxShadow: '0 4px 24px rgba(0,0,0,0.10)' }}>
+              <div className="modal-header" style={{ borderBottom: '2px solid #23336f1a' }}>
+                <h5 className="modal-title" style={{ fontWeight: 700, color: '#23336f' }}>
+                  {messageType === 'danger' ? 'Atenção' : 'Sucesso'}
+                </h5>
+                <button type="button" className="btn-close" aria-label="Close" onClick={() => setShowMessage(false)}></button>
+              </div>
+              <div className="modal-body" style={{ fontSize: '1.3rem', color: '#23336f' }}>
+                {message}
+              </div>
+              <div className="modal-footer" style={{ borderTop: '2px solid #23336f1a', justifyContent: 'flex-end' }}>
+                <button type="button" className="btn btn-primary" style={{ minWidth: 100 }} onClick={() => setShowMessage(false)}>
+                  Fechar
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
 
       {/* DADOS PESSOAIS */}
@@ -281,7 +316,7 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
-              <input type="date" className="form-control" name="data_nascimento" value={formData.data_nascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="date" className="form-control" name="data_nascimento" value={formData.data_nascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }}  min="1900-01-01" max="2025-09-24"s/>
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
diff --git a/src/pages/DoctorCadastroManager.jsx b/src/pages/DoctorCadastroManager.jsx
index 3a928c4..3976e53 100644
--- a/src/pages/DoctorCadastroManager.jsx
+++ b/src/pages/DoctorCadastroManager.jsx
@@ -12,6 +12,10 @@ function DoctorCadastroManager( ) {
   var myHeaders = new Headers();
   myHeaders.append("Content-Type", "application/json");
 
+  // Estado do modal de sucesso
+  const [showModal, setShowModal] = useState(false);
+  const [modalMsg, setModalMsg] = useState('');
+
   // Função que será chamada para "salvar" o paciente
   const handleSavePatient = (patientData) => {
     console.log('Salvando médico:', patientData);
@@ -23,32 +27,45 @@ function DoctorCadastroManager( ) {
       header: myHeaders,
       body:raw,
       redirect:'follow'
-
     }
 
+    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions)
+      .then(response => response.text())
+      .then(result => console.log(result))
+      .catch(error => console.log('error', error));
 
-  fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions)
-    .then(response => response.text())
-    .then(result => console.log(result))
-    .catch(error => console.log('error', error));
-      
-    alert(`Médico "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend
-    // Após salvar, voltamos para a tela de lista
+    setModalMsg(`Médico "${patientData.nome}" salvo com sucesso!`);
+    setShowModal(true);
     setView('list');
   };
 
   return (
     <>
+      {/* Modal de feedback */}
+      {showModal && (
+        <div className="modal fade show" style={{ display: 'block' }} tabIndex="-1">
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title">Sucesso</h5>
+                <button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
+              </div>
+              <div className="modal-body">
+                <p>{modalMsg}</p>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       <div className="page-heading">
         <h3>Cadastro de Médicos</h3>
       </div>
       <div className="page-content">
         <section className="row">
           <div className="col-12">
-            {/* Aqui está a lógica principal: */}
-            {/* Se a view for 'list', mostramos a lista com o botão. */}
-            {/* Se for 'form', mostramos o formulário de cadastro. */}
-
             {view === 'list' ? (
               <DoctorList onAddPatient={() => setView('form')} />
             ) : (
@@ -56,7 +73,6 @@ function DoctorCadastroManager( ) {
                 onSave={handleSavePatient}
                 onCancel={() => setView('list')}
                 PatientDict={{}}
-               
               />
             )}
           </div>
diff --git a/src/pages/PatientCadastroManager.jsx b/src/pages/PatientCadastroManager.jsx
index 7653975..832eb93 100644
--- a/src/pages/PatientCadastroManager.jsx
+++ b/src/pages/PatientCadastroManager.jsx
@@ -30,8 +30,7 @@ function PatientCadastroManager( {setCurrentPage} ) {
     .then(response => response.text())
     .then(result => console.log(result))
     .catch(error => console.log('error', error));
-      
-    alert(`Paciente "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend
+      ; //altere isso para integração com backend
     // Após salvar, voltamos para a tela de lista
    
   };