Atualização no codigo

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -1,4 +1,3 @@
-
 import InputMask from "react-input-mask";
 import "./style/formagendamentos.css";
 import { useState, useEffect } from "react";
@@ -77,6 +76,16 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
       .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
   }
 
+  
+  const FormatTelefones = (valor) => {
+    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+    return digits
+      .replace(/(\d)/, '($1')
+      .replace(/(\d{2})(\d)/, '$1) $2' )
+      .replace(/(\d)(\d{4})/, '$1 $2')
+      .replace(/(\d{4})(\d{4})/, '$1-$2')
+  }
+
 
   const BuscarCPFnoBancodeDados = async (cpf) => {
 
@@ -145,7 +154,13 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
         email:value
       }})
 
-    }else{
+    } else if(name === 'telefone'){
+      setPaciente({...paciente, contato:{
+        ...paciente.contato,
+        telefone1:FormatTelefones(value)
+      }})
+    }
+    else{
     setPaciente({...paciente,[name]:value})
     }
   }
@@ -189,9 +204,7 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
 
           <div className="campo-de-input">
             <label>Telefone</label>
-            <InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
+            <input type="tel" name="telefone" placeholder="(99) 99999-9999" value={paciente.contato?.telefone1} onChange={handleChange} />
-              {(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
-            </InputMask>
           </div>
 
           <div className="campo-de-input">
@@ -221,7 +234,7 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
       </div>
 
         <h3 className="section-subtitle">Informações adicionais</h3>
-        <button type="button" className="btn-secondary">Documentos e anexos</button>
+      
           <label htmlFor="anexo-input" className="btn btn-secondary">Adicionar Anexo</label>
           <input
             type="file"
@@ -351,4 +364,4 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
   );
 };
 
-export default FormNovaConsulta;
+export default FormNovaConsulta;

src/components/AgendarConsulta/style/formagendamentos.css

@@ -140,11 +140,12 @@ svg{
 
 .btn-secondary {
   margin: 10px 0;
-  background: #f3f4f6;
+  background: #4d78cd;
   padding: 8px 14px;
-  border: 1px solid #9ca3af;
+  border: 1px solid #5d739a;
   border-radius: 6px;
   cursor: pointer;
+  max-width: 200px;
 }
 
 .btn-secondary:hover {
@@ -208,3 +209,15 @@ select[name=solicitante]{
 .campo-de-input{
   width:120%
 }
+
+.form-container {
+  width: 100%;
+  max-width: none;
+  margin: 0;                  /* >>> sem espaço para encostar no topo <<< */
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  border: 10px solid #ffffff;
+  box-sizing: border-box;
+}

src/components/doctors/DoctorForm.jsx

@@ -194,15 +194,15 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
     <>
       {/* Modal de feedback */}
       {showModal && (
-        <div className="modal fade show" style={{ display: 'block' }} tabIndex="-1">
+        <div className="modal fade show" style={{ display: 'block', alignItems: 'flex-start', justifyContent: 'center' }} tabIndex="-1">
-          <div className="modal-dialog modal-dialog-centered">
+          <div className="modal-dialog" style={{ marginTop: '32px' }}>
             <div className="modal-content">
-              <div className="modal-header">
+              <div className="modal-header" style={{ backgroundColor: '#  ' }}>
-                <h5 className="modal-title">Atenção</h5>
+                <h5 className="modal-title text-black">Atenção</h5>
-                <button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
+                <button type="button" className="btn-close" style={{ filter: 'invert(0)' }} onClick={() => setShowModal(false)}></button>
               </div>
-              <div className="modal-body">
+              <div className="modal-body text-black">
-                <p style={{ color: '#23336f', fontSize: '1.3rem', fontWeight: 500 }}>{modalMsg}</p>
+                <p style={{ fontSize: '1.3rem', fontWeight: 500 }}>{modalMsg}</p>
               </div>
               <div className="modal-footer">
                 <button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>

src/components/patients/PatientForm.jsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
 
 function PatientForm({ onSave, onCancel, formData, setFormData }) {
+  const [errorModalMsg, setErrorModalMsg] = useState("");
   // Estado para controlar a exibição do modal e os dados do paciente existente
   const [showModal, setShowModal] = useState(false);
   const [showModal404, setShowModal404] = useState(false);
   const [pacienteExistente, setPacienteExistente] = useState(null);
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
 
   const FormatTelefones = (valor) => {
     const digits = String(valor).replace(/\D/g, '').slice(0, 11);
@@ -204,7 +206,8 @@ 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.'); 
+      setErrorModalMsg('Por favor, preencha Nome, CPF, Gênero e data de nascimento.');
+      setShowModal404(true);
       return;
     }
 
@@ -246,6 +249,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
         pacienteVip: formData.pacienteVip, 
       },
     });
+    setShowSuccessModal(true);
   };
   
   return (
@@ -313,7 +317,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' }}  />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
@@ -665,20 +669,41 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
         </div>
       )}
 
-      {/* Erro 404 */}
+      {/* Modal de sucesso ao salvar paciente */}
+      {showSuccessModal && (
+        <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
+          <div className="modal-dialog">
+            <div className="modal-content">
+              <div className="modal-header" style={{ backgroundColor: '#f2fa0dff' }}>
+                <h5 className="modal-title">Paciente salvo com sucesso!</h5>
+                <button type="button" className="btn-close btn-close-white" onClick={() => setShowSuccessModal(false)}></button>
+              </div>
+              <div className="modal-body">
+                <p style={{ color: '#111', fontSize: '1.4rem' }}>O cadastro do paciente foi realizado com sucesso.</p>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn" style={{ backgroundColor: '#1e3a8a', color: '#fff' }} onClick={() => setShowSuccessModal(false)}>
+                  Fechar
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       {showModal404 && (
         <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
           <div className="modal-dialog">
             <div className="modal-content">
-              <div className="modal-header bg-danger text-white">
+              <div className="modal-header" style={{ backgroundColor: '#f2fa0dff' }}>
-                <h5 className="modal-title">Erro de validação</h5>
+                <h5 className="modal-title"><span className="text-dark">Atenção</span></h5>
-                <button type="button" className="btn-close btn-close-white" onClick={() => setShowModal404(false)}></button>
+                <button type="button" className="btn-close btn-close-black" onClick={() => setShowModal404(false)}></button>
               </div>
               <div className="modal-body">
-                <p style={{ fontSize: '1.4rem' }}>(Erro 404).Por favor,tente novamente mais tarde</p>
+                <p style={{ color: '#111', fontSize: '1.4rem' }}>{errorModalMsg || '(Erro 404).Por favor, tente novamente mais tarde'}</p>
               </div>
               <div className="modal-footer">
-                <button type="button" className="btn btn-secondary" onClick={() => setShowModal404(false)}>
+                <button type="button" className="btn btn-primary" onClick={() => setShowModal404(false)}>
                   Fechar
                 </button>
               </div>

src/pages/DoctorTable.jsx

@@ -213,8 +213,8 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
         >
           <div className="modal-dialog modal-dialog-centered">
             <div className="modal-content">
-              <div className="modal-header bg-danger bg-opacity-25">
+              <div className="modal-header" style={{ backgroundColor: '#b91c1c' }}>
-                <h5 className="modal-title text-danger"> Confirmação de Exclusão</h5>
+                <h5 className="modal-title text-dark"> Confirmação de Exclusão</h5>
                 <button
                   type="button"
                   className="btn-close"
@@ -222,7 +222,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                 ></button>
               </div>
               <div className="modal-body">
-                <p className="mb-0 fs-5">
+                <p className="mb-0 fs-5" style={{ color: '#111' }}>
                   Tem certeza que deseja excluir este médico?
                 </p>
               </div>

src/pages/PatientCadastroManager.jsx

@@ -24,10 +24,10 @@ function PatientCadastroManager( {setCurrentPage} ) {
   };
 
   try {
-    const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions);
+    const response = await fetch("https://mock.apidog.com/m1/1053378-0-dault/pacientes", requestOptions);
     const result = await response.json();   
     console.log("Paciente salvo no backend:", result);
-    setCurrentPage('table')
+    
     return result;
   } catch (error) {
     console.error("Erro ao salvar paciente:", error);

src/pages/Table.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from "react";
 
 function TablePaciente({ setCurrentPage, setPatientID }) {
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [deleteId, setDeleteId] = useState(null);
   const [pacientes, setPacientes] = useState([]);
   const [search, setSearch] = useState("");
   const [filtroConvenio, setFiltroConvenio] = useState("Todos");
@@ -62,24 +64,31 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
     }
   }
 
-  const deletePatient = async (id) => {
+  const handleDeleteClick = (id) => {
-    DeleteAnexo(id);
+    setDeleteId(id);
+    setShowDeleteModal(true);
+  };
+
+  const confirmDeletePatient = async () => {
+    if (!deleteId) return;
+    await DeleteAnexo(deleteId);
     const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
-    if (!window.confirm("Tem certeza que deseja excluir este paciente?")) return;
     await fetch(
-      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
+      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${deleteId}`,
       requestOptionsDelete
     )
       .then((response) => {
         if (!response.ok) {
           setShowError404(true);
-          setTimeout(() => setShowError404(false), 5000); // Esconde a mensagem após 5 segundos
+          setTimeout(() => setShowError404(false), 5000);
           throw new Error('Erro 404');
         }
         return response.text();
       })
       .then((mensage) => console.log(mensage))
       .catch((error) => console.log("Deu problema", error));
+    setShowDeleteModal(false);
+    setDeleteId(null);
   };
 
   const toggleVIP = async (id, atual) => {
@@ -108,33 +117,9 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
       .catch((error) => console.log("Erro ao atualizar VIP:", error));
   };
 
-  const updateConvenio = async (id, convenio) => {
+ 
-    await fetch(
-      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
-      {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ convenio }),
-      }
-    )
-      .then((response) => {
-        if (!response.ok) {
-          setShowError404(true);
-          setTimeout(() => setShowError404(false), 5000);
-          throw new Error('Erro 404');
-        }
-        return response.json();
-      })
-      .then(() => {
-        setPacientes((prev) =>
-          prev.map((p) => (p.id === id ? { ...p, convenio } : p))
-        );
-      })
-      .catch((error) => console.log("Erro ao atualizar convênio:", error));
-  };
-
   useEffect(() => {
-    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
+    fetch("https://mock.apidog.com/m1053378-0-det/pacientes")
       .then((response) => {
         if (!response.ok) {
           setShowError404(true);
@@ -173,6 +158,28 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
 
   return (
     <>
+      {/* Modal de confirmação de exclusão */}
+      {showDeleteModal && (
+        <div className="modal fade show d-flex align-items-center justify-content-center" style={{ display: 'flex', backgroundColor: 'rgba(0,0,0,0.5)', position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', zIndex: 1050 }} tabIndex="-1">
+          <div className="modal-dialog">
+            <div className="modal-content">
+              <div className="modal-header" style={{ backgroundColor: '#b91c1c' }}>
+                <h5 className="modal-title text-dark">Confirmação de Exclusão</h5>
+                <button type="button" className="btn-close" onClick={() => setShowDeleteModal(false)}></button>
+              </div>
+              <div className="modal-body">
+                <p className="mb-0 fs-5" style={{ color: '#111' }}>
+                  Tem certeza que deseja excluir este paciente?
+                </p>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn" style={{ backgroundColor: '#1e3a8a', color: '#fff' }} onClick={() => setShowDeleteModal(false)}>Cancelar</button>
+                <button type="button" className="btn btn-danger" onClick={confirmDeletePatient}>Excluir</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       <div className="page-heading">
         <h3>Lista de Pacientes</h3>
       </div>
@@ -261,7 +268,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
                         <th>CPF</th>
                         <th>Email</th>
                         <th>Telefone</th>
-                        <th>Status</th>
                         <th>Ações</th>
                       </tr>
                     </thead>
@@ -317,7 +323,7 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
                                     backgroundColor: "#F8D7DA",
                                     color: "#721C24",
                                   }}
-                                  onClick={() => deletePatient(paciente.id)}
+                                  onClick={() => handleDeleteClick(paciente.id)}
                                 >
                                   <i className="bi bi-trash me-1"></i> Excluir
                                 </button>