Alteração modal CPF

src/App.js

@@ -1,11 +1,13 @@
-
+import { useState } from "react";
 import PerfilSecretaria from "./perfis/perfil_secretaria/PerfilSecretaria";
 
+
 function App() {
+
   return (
-    <>
+    <div>
       <PerfilSecretaria/>
-    </>
+    </div>
   );
 }
 

src/components/doctors/DoctorForm.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import {Link} from 'react-router-dom'
 
-function DoctorForm({ onSave, onCancel, PatientDict }) {
+function DoctorForm({ onSave, onCancel, formData, setFormData }) {
 
   const FormatTelefones = (valor) => {
 
@@ -30,46 +30,6 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
   }
 
 
-  const [formData, setFormData] = useState({
-      foto: null,
-      nome: PatientDict.nome,
-      nomeSocial: PatientDict.nome_social,
-      dataNascimento: PatientDict.data_nascimento,
-      genero: PatientDict.sexo,
-      cpf: PatientDict.cpf,
-      profissao: PatientDict.profissao ,
-      nomeConjuge: '',
-      outroId: '',
-      cep: '',
-      cidade: PatientDict.cidade,
-      estado: PatientDict.estado,
-      bairro: PatientDict.bairro,
-      rua: PatientDict.logradouro,
-      numero: '',
-      complemento: '',
-      email: PatientDict.email,
-      telefone1: PatientDict.celular,
-      telefone2: '',
-      telefone3: '',
-      observacoes: '',
-      rg: '',
-      documentoTipo: '',
-      numeroDocumento: '',
-      etniaRaca: '',
-      naturalidade: '',
-      nacionalidade: '',
-      estadoCivil: '',
-      
-      // INFORMAÇÕES MÉDICAS
-      tipoSanguineo: '',
-      peso: '',
-      altura: '',
-      imc: '',
-      alergias: '',
-      
-      // ANEXO
-      anexos: null,
-    });
   
   // Estado para armazenar a URL da foto do avatar
   const [avatarUrl, setAvatarUrl] = useState(null);
@@ -94,6 +54,8 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
   const handleChange = (e) => {
     const { name, value, type, checked, files } = e.target;
     
+    console.log(name, value)
+
     if (type === 'checkbox') {
       setFormData({ ...formData, [name]: checked });
     } else if (type === 'file') {
@@ -110,8 +72,6 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
         setAvatarUrl(null); // Limpa o avatar se nenhum arquivo for selecionado
       }
 
-    } else {
-      setFormData({ ...formData, [name]: value });
     } 
 
     if (name.includes('cpf')) {
@@ -120,6 +80,8 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
     } else if (name.includes('telefone')) {
       let telefoneFormatado = FormatTelefones(value);
       setFormData(prev => ({ ...prev, [name]: telefoneFormatado }));
+    }else {
+      setFormData({ ...formData, [name]: value });
     }
   };
 
@@ -136,10 +98,10 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
         if (!data.erro) {
           setFormData((prev) => ({
             ...prev,
-            rua: data.logradouro || '',
-            bairro: data.bairro || '',
-            cidade: data.localidade || '',
-            estado: data.uf || ''
+            street: data.logradouro || '',
+            neighborhood: data.bairro || '',
+            city: data.localidade || '',
+            state: data.uf || ''
           }));
         } else {
           setModalMsg('CEP não encontrado!');
@@ -153,38 +115,18 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
   };
 
   const handleSubmit = () => {
-    if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento ) {
-      setModalMsg('Por favor, preencha: Nome, CPF, Gênero, Data de Nascimento.');
+    if (!formData.full_name || !formData.cpf || !formData.birth_date ) {
+      setModalMsg('Por favor, preencha: Nome, CPF, Data de Nascimento.');
       setShowModal(true);
-      return;
+     
+      
     }
 
     onSave(
       {
-      ...formData,
-      endereco: {
-        cep: formData.cep,
-        cidade: formData.cidade,
-        estado: formData.estado,
-        bairro: formData.bairro,
-        logradouro: formData.rua,
-        numero: formData.numero,
-        complemento: formData.complemento,
-      },
-      contato: {
-        email: formData.email,
-        telefone1: formData.telefone1,
-        telefone2: formData.telefone2,
-        telefone3: formData.telefone3,
-      },
-      infoMedicas: {
-        tipoSanguineo: formData.tipoSanguineo,
-        peso: formData.peso,
-        altura: formData.altura,
-        imc: formData.imc,
-        alergias: formData.alergias,
-      }
+      ...formData
       }
+      
     );
     setModalMsg('Médico salvo com sucesso!');
     setShowModal(true);
@@ -267,71 +209,58 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
             {/* CADASTRO */}
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Nome: *</label>
-              <input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
-            </div>
-            <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nome social:</label>
-              <input type="text" className="form-control" name="nomeSocial" value={formData.nomeSocial} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="full_name" value={formData.full_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </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' }}  min="1900-01-01" max="2025-09-24" />
+              <input type="date" className="form-control" name="birth_date" value={formData.birth_date} 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>
-              <select className="form-control" name="genero" value={formData.genero} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
-                <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 style={{ fontSize: '1.1rem' }}>Identificador de outro sistema:</label>
-              <input type="text" className="form-control" name="outroId" value={formData.outroId} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
-            </div>
-            <div className="col-md-6 mb-3">
+              <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>CPF: *</label>
               <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} style={{ fontSize: '1.1rem' }} />
             </div>        
-            <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>RG:</label>
-              <input type="text" className="form-control" name="rg" value={formData.rg} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
-            </div>
-            <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Outros documentos:</label>
-              <select className="form-control" name="documentoTipo" value={formData.documentoTipo} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
-                <option value="">Selecione</option>
-                <option value="CNH">CNH</option>
-                <option value="Passaporte">Passaporte</option>
+
+             <div className="col-md-6 mb-3">
+              <label style={{ fontSize: '1.1rem' }}>Estado do CRM:</label>
+              <select className="form-control" name="crm_uf" value={formData.crm_uf} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+                <option value="" disabled selected>Selecione</option>
+                <option value="AP">AP</option>
+                <option value="AL">AL</option>
+                <option value="AM">AM</option>
+                <option value="BA">BA</option>
+                <option value="CE">CE</option>
+                <option value="DF">DF</option>
+                <option value="ES">ES</option>
+                <option value="GO">GO</option>
+                <option value="MA">MA</option>
+                <option value="MT">MT</option>
+                <option value="MS">MS</option>
+                <option value="MG">MG</option>
+                <option value="PA">PA</option>
+                <option value="PB">PB</option>
+                <option value="PR">PR</option>
+                <option value="PE">PE</option>
+                <option value="PI">PI</option>
+                <option value="RJ">RJ</option>
+                <option value="RN">RN</option>
+                <option value="RS">RS</option>
+                <option value="RO">RO</option>
+                <option value="RR">RR</option>
+                <option value="SC">SC</option>
+                <option value="SP">SP</option>
+                <option value="SE">SE</option>
+                <option value="TO">TO</option>
               </select>
             </div>
+
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Número do documento:</label>
-              <input type="text" className="form-control" name="numeroDocumento" value={formData.numeroDocumento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
-            </div>
-            <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Etnia e Raça:</label>
-              <select className="form-control" name="etniaRaca" value={formData.etniaRaca} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
-                <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 style={{ fontSize: '1.1rem' }}>Naturalidade:</label>
-              <input type="text" className="form-control" name="naturalidade" value={formData.naturalidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
-            </div>
-            <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nacionalidade:</label>
-              <input type="text" className="form-control" name="nacionalidade" value={formData.nacionalidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label style={{ fontSize: '1.1rem' }}>CRM:</label>
+              <input type="text" className="form-control" name="crm" value={formData.crm} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
+              
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Especialização:</label>
-              <select className="form-control" name="profissao" value={formData.profissao} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <select className="form-control" name="specialty" value={formData.specialty} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
                 <option value="">Selecione</option>
                 <option value="Cardiologia">Clínica médica (clínico geral)</option>
                 <option value="Dermatologia">Pediatria</option>
@@ -348,34 +277,6 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
                 <option value="Oncologia">Urologia</option>    
               </select>
             </div>
-            <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Estado civil:</label>
-              <select className="form-control" name="estadoCivil" value={formData.estadoCivil} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
-                <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 style={{ fontSize: '1.1rem' }}>Nome do esposo(a):</label>
-              <input type="text" className="form-control" name="nomeConjuge" value={formData.nomeConjuge} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
-            </div>
-
-            {/* CAMPOS MOVIDOS */}
-            <div className="col-md-12 mb-3 mt-3">
-              <label style={{ fontSize: '1.1rem' }}>Observações:</label>
-              <textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange} style={{ fontSize: '1.1rem' }}></textarea>
-            </div>
-            <div className="col-md-12 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Anexos do Médico:</label>
-              <div>
-                <label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem', background: '#9ca3af' }}>Escolher arquivo</label>
-                <input type="file" className="form-control d-none" name="anexos" id="anexos-input" onChange={handleChange} />
-                <span className="ms-2" style={{ fontSize: '1.1rem' }}>{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
-              </div>
-            </div>
 
           </div>
         </div>
@@ -397,27 +298,27 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
             </div>
             <div className="col-md-8 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Rua:</label>
-              <input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="street" value={formData.street} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Bairro:</label>
-              <input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="neighborhood" value={formData.neighborhood} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-4 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Cidade:</label>
-              <input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="city" value={formData.city} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-2 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Estado:</label>
-              <input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="state" value={formData.state} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-4 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Número:</label>
-              <input type="text" className="form-control" name="numero" value={formData.numero} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="number" value={formData.number} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-8 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Complemento:</label>
-              <input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="complement" value={formData.complement} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
           </div>
         </div>
@@ -439,16 +340,13 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Telefone: </label>
-              <input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="phone_mobile" value={formData.phone_mobile} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
-              <input type="text" className="form-control" name="telefone2" value={formData.telefone2} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
-            </div>
-            <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Celular:</label>
-              <input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="phone2" value={formData.phone2} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
+            
           </div>
         </div>
       </div>

src/components/patients/PatientForm.jsx

@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import {Link} from 'react-router-dom'
+// formatar número 
+// formatar CPF
+import { FormatTelefones,FormatPeso, FormatCPF } from '../utils/Formatar/Format';
 
 function PatientForm({ onSave, onCancel, formData, setFormData }) {
   const [errorModalMsg, setErrorModalMsg] = useState("");
@@ -9,100 +12,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
   const [pacienteExistente, setPacienteExistente] = useState(null);
   const [showSuccessModal, setShowSuccessModal] = useState(false);
 
-  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 ReceberRespostaAPIdoCPF = async (cpf) =>{
-    var myHeaders = new Headers();
-    myHeaders.append("Authorization", "Bearer <token>");
-    myHeaders.append("Content-Type", "application/json");
-
-    var raw = JSON.stringify({
-      "cpf": cpf
-    });
-
-    var requestOptions = {
-      method: 'POST',
-      headers: myHeaders,
-      body: raw,
-      redirect: 'follow'
-    };
-
-    const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions)
-    
-    if (!response.ok) {
-        throw new Error('Erro na API de validação de CPF. Status: ' + response.status);
-    }
-    
-    const result = await response.json()
-    
-    return result.data
-  }
-  
-  // Função para buscar os dados completos do paciente pelo ID
-  const BuscarPacientePorId = async (id) => {
-    var myHeaders = new Headers();
-    myHeaders.append("Authorization", "Bearer <token>");
-
-    var requestOptions = {
-      method: 'GET',
-      headers: myHeaders,
-      redirect: 'follow'
-    };
-    
-    try {
-      const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions);
-      const result = await response.json();
-      return result.data;
-    } catch (error) {
-      console.error("Erro ao buscar paciente por ID:", error);
-      return null;
-    }
-  };
-
-  const ValidarCPF = async (cpf) => {
-    let aviso 
-    let Erro = false
-
-    try {
-      const resultadoAPI = await ReceberRespostaAPIdoCPF(cpf)
-      const valido = resultadoAPI.valido
-      const ExisteNoBancoDeDados = resultadoAPI.existe
-      const idPaciente = resultadoAPI.id_paciente
-
-      if(valido === false){
-        aviso = 'CPF inválido'
-        Erro = true
-      }
-      else if(ExisteNoBancoDeDados ===  true){
-        const paciente = await BuscarPacientePorId(idPaciente);
-        if (paciente) {
-          setPacienteExistente(paciente);
-          setShowModal(true);
-        }
-        Erro = true  
-      }
-    } catch (error) {
-        console.error("Erro na validação do CPF:", error);
-        setShowModal404(true);
-        Erro = true;
-    }
-    return [Erro,aviso]
-  }
-
-  const FormatCPF = (valor) => {
-    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');
-  }
 
 
   // Estado para armazenar a URL da foto do avatar
@@ -128,36 +37,25 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
   // Lógica para calcular o IMC
   useEffect(() => {
     const peso = parseFloat(formData.peso);
-    const altura = parseFloat(formData.altura);
+    const altura = parseFloat(formData.height_m);
     if (peso > 0 && altura > 0) {
       const imcCalculado = peso / (altura * altura);
-      setFormData(prev => ({ ...prev, imc: imcCalculado.toFixed(2) }));
+      setFormData(prev => ({ ...prev, bmi: imcCalculado.toFixed(2) }));
     } else {
-      setFormData(prev => ({ ...prev, imc: '' }));
+      setFormData(prev => ({ ...prev, bmi: '' }));
     }
   }, [formData.peso, formData.altura]);
 
-
-  const [enderecoData, setEnderecoData] = useState({})
-  useEffect(() => {setEnderecoData(formData.endereco || {}); console.log(enderecoData)}, [formData.endereco])
-
-  const [contato, setContato] = useState({})
-
-  useEffect(() => {setContato(formData.contato || {})}, [formData.contato])
-
-
   const handleChange = (e) => {
     const { name, value, type, checked, files } = e.target;
 
-    console.log(formData, name)
+    console.log(formData, name, checked)
 
-    if (type === 'checkbox') {
-      setFormData({ ...formData, [name]: checked });
-    } else if (type === 'file') {
+    if (type === 'file') {
       setFormData({ ...formData, [name]: files[0] });
 
       // Lógica para pré-visualizar a imagem no avatar
-      if (name === 'foto' && files[0]) {
+     if (name === 'foto' && files[0]) {
         const reader = new FileReader();
         reader.onloadend = () => {
           setAvatarUrl(reader.result);
@@ -168,16 +66,16 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
       }}
       
 
-    if (name.includes('cpf')) {
+    else if (name.includes('cpf')) {
       setFormData({...formData, cpf:FormatCPF(value) });
-    } else if (name.includes('telefone')) {
-      let telefoneFormatado = FormatTelefones(value);
-      setContato(prev => ({ ...prev, [name]: telefoneFormatado }));
-    }else if (name === 'email') {
-      setContato(prev => ({ ...prev, email: value }));
-    }else if(name.includes('endereco')) {
-      setEnderecoData(prev => ({ ...prev, [name.split('.')[1]]: value }));
-    }else{
+    } else if (name.includes('phone')) {
+      setFormData({ ...formData, [name]: FormatTelefones(value) });      
+    }else if(name.includes('weight') || name.includes('bmi') || name.includes('height')){
+      setFormData({...formData,[name]: FormatPeso(value) })
+    }else if(name.includes('rn') || name.includes('vip')){
+      setFormData({ ...formData, [name]: checked });
+    }
+    else{
       setFormData({ ...formData, [name]: value });
     }
   };
@@ -191,10 +89,10 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
         if (!data.erro) {
           setFormData((prev) => ({
             ...prev,
-            rua: data.logradouro || '',
-            bairro: data.bairro || '',
-            cidade: data.localidade || '',
-            estado: data.uf || ''
+            street: data.logradouro || '',
+            neighborhood: data.bairro || '',
+            city: data.localidade || '',
+            state: data.uf || ''
           }));
         } else {
           alert('CEP não encontrado!');
@@ -206,53 +104,18 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
   };
 
   const handleSubmit = async () => {
-    if (!formData.nome || !formData.cpf || !formData.sexo || !formData.data_nascimento){
+    if (!formData.full_name || !formData.cpf || !formData.sex || !formData.birth_date){
+      console.log(formData.full_name, formData.cpf, formData.sex, formData.birth_date)
       setErrorModalMsg('Por favor, preencha Nome, CPF, Gênero e data de nascimento.');
       setShowModal404(true); 
-      return;
-    }
-
-    const [CPFinvalido] = await ValidarCPF(formData.cpf);
-    if(CPFinvalido === true){
-      return;
+      return
     }
    
     onSave({
-      ...formData,
-      endereco: {
-        cep: enderecoData.cep,
-        cidade: enderecoData.cidade,
-        estado: enderecoData.estado,
-        bairro: enderecoData.bairro,
-        logradouro: enderecoData.logradouro,
-        numero: enderecoData.numero,
-        complemento: enderecoData.complemento,
-      },
-      contato: {
-        email: contato.email,
-        telefone1: contato.telefone1,
-        telefone2: contato.telefone2,
-        telefone3: contato.telefone3,
-      },
-      infoMedicas: {
-        tipoSanguineo: formData.tipoSanguineo,
-        peso: formData.peso,
-        altura: formData.altura,
-        imc: formData.imc,
-        alergias: formData.alergias,
-      },
-      infoConvenio: {
-        convenio: formData.convenio,
-        plano: formData.plano,
-        numeroMatricula: formData.numeroMatricula,
-        validadeCarteira: formData.validadeCarteira,
-        validadeIndeterminada: formData.validadeIndeterminada,
-        pacienteVip: formData.pacienteVip, 
-      },
+      ...formData,bmi:12.0
     });
-    setShowSuccessModal(true);
-  };
   
+  };
   return (
     <div className="card p-3">
       <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
@@ -310,19 +173,19 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
             {/* CADASTRO */}
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Nome: *</label>
-              <input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="full_name" value={formData.full_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Nome social:</label>
-              <input type="text" className="form-control" name="nome_social" value={formData.nome_social} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="social_name" value={formData.social_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </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="birth_date" value={formData.birth_date} onChange={handleChange} style={{ fontSize: '1.1rem' }}  />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
-              <select className="form-control" name="sexo" value={formData.sexo} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <select className="form-control" name="sex" value={formData.sex} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
                 <option value="">Selecione</option>
                 <option value="Masculino">Masculino</option>
                 <option value="Feminino">Feminino</option>
@@ -339,7 +202,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Outros documentos:</label>
-              <select className="form-control" name="documentoTipo" value={formData.documentoTipo} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <select className="form-control" name="document_type" value={formData.document_type} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
                 <option value="">Selecione</option>
                 <option value="CNH">CNH</option>
                 <option value="Passaporte">Passaporte</option>
@@ -348,11 +211,11 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Número do documento:</label>
-              <input type="text" className="form-control" name="numero_documento" value={formData.numero_documento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="document_number" value={formData.document_number} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Etnia e Raça:</label>
-              <select className="form-control" name="etniaRaca" value={formData.etniaRaca} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <select className="form-control" name="race" value={formData.race} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
                 <option value="">Selecione</option>
                 <option value="Branca">Branca</option>
                 <option value="Preta">Preta</option>
@@ -363,20 +226,20 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Naturalidade:</label>
-              <input type="text" className="form-control" name="naturalidade" value={formData.naturalidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="naturality" value={formData.naturalidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Nacionalidade:</label>
-              <input type="text" className="form-control" name="nacionalidade" value={formData.nacionalidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="nationality" value={formData.nationality} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Profissão:</label>
-              <input type="text" className="form-control" name="profissao" value={formData.profissao} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="profession" value={formData.profession} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Estado civil:</label>
-              <select className="form-control" name="estado_civil" value={formData.estado_civil} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
-                <option value="">Selecione</option>
+              <select className="form-control" name="marital_status" value={formData.marital_status} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+                <option value="" selected disabled invisible>Selecione</option>
                 <option value="Solteiro">Solteiro(a)</option>
                 <option value="Casado">Casado(a)</option>
                 <option value="Divorciado">Divorciado(a)</option>
@@ -385,40 +248,36 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Nome da Mãe:</label>
-              <input type="text" className="form-control" name="nomeMae" value={formData.nome_mae} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="mother_name" value={formData.mother_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Profissão da mãe:</label>
-              <input type="text" className="form-control" name="profissaoMae" value={formData.profissao_mae} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="mother_profession" value={formData.mother_profession} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Nome do Pai:</label>
-              <input type="text" className="form-control" name="nomePai" value={formData.nome_pai} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="father_name" value={formData.father_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Profissão do pai:</label>
-              <input type="text" className="form-control" name="profissaoPai" value={formData.profissao_pai} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="father_profession" value={formData.father_profession} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Nome do responsável:</label>
-              <input type="text" className="form-control" name="nomeResponsavel" value={formData.nome_responsavel} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="guardian_name" value={formData.guardian_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>CPF do responsável:</label>
-              <input type="text" className="form-control" name="cpfResponsavel" value={formData.cpf_responsavel} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
-            </div>
-            <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nome do esposo(a):</label>
-              <input type="text" className="form-control" name="nomeConjuge" value={formData.nome_conjuge} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="guardian_cpf" value={formData.guardian_cpf} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Identificador de outro sistema:</label>
-              <input type="text" className="form-control" name="outroId" value={formData.outroId} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="legacy_code" value={formData.legacy_code} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </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" style={{ transform: 'scale(1.2)' }} />
-                <label className="form-check-label ms-2" htmlFor="rnConvenio" style={{ fontSize: '1.1rem' }}>
+                <input className="form-check-input" type="checkbox" name="rn_in_insurance" checked={formData.rn_in_insurance} onChange={handleChange} id="rn_in_insurance" style={{ transform: 'scale(1.2)' }} />
+                <label className="form-check-label ms-2" htmlFor="rn_in_insurance" style={{ fontSize: '1.1rem' }}>
                   RN na Guia do convênio
                 </label>
               </div>
@@ -427,7 +286,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
             {/* CAMPOS MOVIDOS */}
             <div className="col-md-12 mb-3 mt-3">
               <label style={{ fontSize: '1.1rem' }}>Observações:</label>
-              <textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange} style={{ fontSize: '1.1rem' }}></textarea>
+              <textarea className="form-control" name="notes" value={formData.notes} onChange={handleChange} style={{ fontSize: '1.1rem' }} placeholder='alergias, doenças crônicas, informações sobre porteses ou marca-passo, etc'></textarea>
             </div>
             <div className="col-md-12 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Anexos do Paciente:</label>
@@ -454,7 +313,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
           <div className="row mt-3">
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Tipo Sanguíneo:</label>
-              <select className="form-control" name="tipoSanguineo" value={formData.tipoSanguineo} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <select className="form-control" name="blood_type" value={formData.blood_type} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
                 <option value="">Selecione</option>
                 <option value="A+">A+</option>
                 <option value="A-">A-</option>
@@ -468,20 +327,17 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
             </div>
             <div className="col-md-2 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Peso (kg):</label>
-              <input type="number" step="0.1" className="form-control" name="peso" value={formData.peso} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" step="0.1" className="form-control" name="weight_kg" value={formData.weight_kg} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-2 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Altura (m):</label>
-              <input type="number" step="0.01" className="form-control" name="altura" value={formData.altura} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" step="0.01" className="form-control" name="height_m" value={formData.height_m} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-2 mb-3">
               <label style={{ fontSize: '1.1rem' }}>IMC (kg/m²):</label>
-              <input type="text" className="form-control" name="imc" value={formData.imc} readOnly disabled style={{ fontSize: '1.1rem' }} />
-            </div>
-            <div className="col-md-12 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Alergias:</label>
-              <textarea className="form-control" name="alergias" value={formData.alergias} onChange={handleChange} placeholder="Ex: AAS, Dipirona, etc" style={{ fontSize: '1.1rem' }}></textarea>
+              <input type="text" className="form-control" name="bmi" value={formData.bmi} readOnly disabled style={{ fontSize: '1.1rem' }} />
             </div>
+           
           </div>
         </div>
       </div>
@@ -529,8 +385,8 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
             {/* PACIENTE VIP */}
             <div className="col-md-12 mb-3 mt-3">
               <div className="form-check">
-                <input className="form-check-input" type="checkbox" name="pacienteVip" checked={formData.pacienteVip} onChange={handleChange} id="pacienteVip" style={{ transform: 'scale(1.2)' }} />
-                <label className="form-check-label ms-2" htmlFor="pacienteVip" style={{ fontSize: '1.1rem' }}>
+                <input className="form-check-input" type="checkbox" name="vip" checked={formData.vip} onChange={handleChange} id="vip" style={{ transform: 'scale(1.2)' }} />
+                <label className="form-check-label ms-2" htmlFor="vip" style={{ fontSize: '1.1rem' }}>
                   Paciente VIP
                 </label>
               </div>
@@ -551,31 +407,31 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
           <div className="row mt-3">
             <div className="col-md-4 mb-3">
               <label style={{ fontSize: '1.1rem' }}>CEP:</label>
-              <input type="text" className="form-control" name="endereco.cep" value={enderecoData.cep} onChange={handleChange} onBlur={handleCepBlur} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-8 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Rua:</label>
-              <input type="text" className="form-control" name="endereco.logradouro" value={enderecoData.logradouro} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="street" value={formData.street} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Bairro:</label>
-              <input type="text" className="form-control" name="endereco.bairro" value={enderecoData.bairro} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="neighborhood" value={formData.neighborhood} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-4 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Cidade:</label>
-              <input type="text" className="form-control" name="endereco.cidade" value={enderecoData.cidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="city" value={formData.city} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-2 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Estado:</label>
-              <input type="text" className="form-control" name="endereco.estado" value={enderecoData.estado} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="state" value={formData.state} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-4 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Número:</label>
-              <input type="text" className="form-control" name="endereco.numero" value={enderecoData.numero} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="number" value={formData.number} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-8 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Complemento:</label>
-              <input type="text" className="form-control" name="endereco.complemento" value={enderecoData.complemento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="complement" value={formData.complement} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
           </div>
         </div>
@@ -593,19 +449,19 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
           <div className="row mt-3">
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Email:</label>
-              <input type="email" className="form-control" name="email" value={contato.email || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <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>
-              <input type="text" className="form-control" name="telefone1" value={contato.telefone1 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="phone_mobile" value={formData.phone_mobile} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
-              <input type="text" className="form-control" name="telefone2" value={contato.telefone2 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="phone1" value={formData.phone1} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Telefone 3:</label>
-              <input type="text" className="form-control" name="telefone3" value={contato.telefone3 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="text" className="form-control" name="phone2" value={formData.phone2} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
           </div>
         </div>
@@ -617,7 +473,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
           Salvar Paciente
         </button>
        
-       <Link to='/'>
+       <Link to='/pacientes'>
           <button className="btn btn-light"  style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
             Cancelar
           </button>
@@ -627,51 +483,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
 
       {/* Modal para paciente existente */}
       {showModal && pacienteExistente && (
-        <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">
-                <h5 className="modal-title">Ops! Este CPF já está cadastrado</h5>
-                <button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
-              </div>
-              <div className="modal-body">
-                <div className="text-center mb-3">
-                  <img 
-                    src={pacienteExistente.foto || 'https://via.placeholder.com/100'} 
-                    alt="Foto do Paciente" 
-                    className="rounded-circle" 
-                    style={{ width: '100px', height: '100px', objectFit: 'cover' }} 
-                  />
-                </div>
-                <p><strong>ID do Paciente:</strong> {pacienteExistente.id}</p>
-                <p><strong>Nome Completo:</strong> {pacienteExistente.nome}</p>
-                <p><strong>CPF:</strong> {pacienteExistente.cpf}</p>
-                <p><strong>Data de Nascimento:</strong> {pacienteExistente.data_nascimento}</p>
-                <p><strong>Telefone:</strong> {pacienteExistente.contato.telefone1}</p>
-              </div>
-              <div className="modal-footer">
-                <button 
-                  type="button" 
-                  className="btn btn-primary" 
-                  onClick={() => setShowModal(false)}
-                >
-                  Fechar e Continuar no Cadastro
-                </button>
-                <button 
-                  type="button" 
-                  className="btn btn-primary" 
-                  onClick={() => {
-                    
-                    alert(`Navegando para os detalhes do paciente ID: ${pacienteExistente.id}`);
-                    setShowModal(false);
-                  }}
-                >
-                  Visualizar Paciente Existente
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
+        <div></div>
       )}
 
       {/* Modal de sucesso ao salvar paciente */}

src/components/utils/AuthProvider.js

@@ -0,0 +1,95 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+// 1. Criação do Contexto
+const AuthContext = createContext(null);
+
+// Hook customizado para facilitar o uso nos componentes
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    // Isso é crucial para evitar o erro "useAuth() is undefined"
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}
+
+// O Provedor Principal
+export function AuthProvider({ children }) {
+  const [accessToken, setAccessToken] = useState(null);
+  const [tokenType, setTokenType] = useState(null);
+  const [refreshToken, setRefreshToken] = useState(null);
+
+  // 🔑 Carrega o token do localStorage na inicialização
+  useEffect(() => {
+    // Essa lógica garante que o token permanece após o refresh da página
+    const storedToken = localStorage.getItem('access_token');
+    const storedTokenType = localStorage.getItem('token_type');
+    const storedRefreshToken = localStorage.getItem('refresh_token');
+
+    if (storedToken && storedTokenType) {
+      setAccessToken(storedToken);
+      setTokenType(storedTokenType);
+      // O refreshToken é essencial para a renovação futura
+      setRefreshToken(storedRefreshToken); 
+    }
+  }, []); 
+
+  // --- FUNÇÕES DE MUDANÇA (SET/CLEAR) ---
+
+  /**
+   * Função para salvar os tokens após um login ou renovação (refresh).
+   * @param {Object} tokenResponse O objeto completo retornado pelo Supabase Auth.
+   */
+  const setAuthTokens = (tokenResponse) => {
+    if (tokenResponse && tokenResponse.access_token && tokenResponse.token_type) {
+      // 1. Atualiza o estado do React
+      setAccessToken(tokenResponse.access_token);
+      setTokenType(tokenResponse.token_type);
+      setRefreshToken(tokenResponse.refresh_token);
+
+      // 2. Persiste no localStorage (para não perder ao recarregar a página)
+      localStorage.setItem('access_token', tokenResponse.access_token);
+      localStorage.setItem('token_type', tokenResponse.token_type);
+      localStorage.setItem('refresh_token', tokenResponse.refresh_token);
+    }
+  };
+
+  /**
+   * Função para remover todos os tokens (Logout).
+   */
+  const clearAuthTokens = () => {
+    setAccessToken(null);
+    setTokenType(null);
+    setRefreshToken(null);
+    // Remove do localStorage
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('token_type');
+    localStorage.removeItem('refresh_token');
+  };
+
+  // --- FUNÇÕES DE USO (GET) ---
+
+  /**
+   * Retorna a string completa para o cabeçalho Authorization (ex: "Bearer <token>").
+   */
+  const getAuthorizationHeader = () => 
+    accessToken && tokenType ? `${tokenType} ${accessToken}` : '';
+  
+  // --- VALOR DO CONTEXTO ---
+
+  const contextValue = {
+    accessToken,
+    tokenType,
+    refreshToken,
+    isAuthenticated: !!accessToken,
+    setAuthTokens, // Usado para CRIAR/MUDAR (Login/Refresh)
+    clearAuthTokens, // Usado para MUDAR (Logout)
+    getAuthorizationHeader, // Usado para PEGAR (Endpoints)
+  };
+
+  return (
+    <AuthContext.Provider value={contextValue}>
+      {children}
+    </AuthContext.Provider>
+  );
+}

src/components/utils/Formatar/Format.js

@@ -0,0 +1,31 @@
+
+const FormatPeso = (valor) => {
+      if (valor == null) return 0;
+  const str = String(valor).replace(',', '.');
+
+  const clean = str.replace(/[^0-9.]/g, '');
+  console.log(parseFloat(clean))
+  return parseFloat(clean);
+}
+
+
+
+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 FormatCPF = (valor) => {
+      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');
+    }
+
+  export {FormatTelefones, FormatPeso, FormatCPF}

src/components/utils/Functions-Endpoints/Doctor.js

@@ -0,0 +1,26 @@
+import API_KEY from "../apiKeys";
+
+
+
+const GetDoctorByID = async (ID,authHeader) => {
+
+  console.log(authHeader, 'mostrando autorização dentro da função')
+
+  var myHeaders = new Headers();
+  myHeaders.append('apikey', API_KEY)
+  myHeaders.append('Authorization', authHeader)
+
+  var requestOptions = {
+   method: 'GET',
+   redirect: 'follow',
+   headers:myHeaders
+};
+
+
+const result = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${ID}`, requestOptions)
+const DictMedico = await result.json()    
+return DictMedico
+
+}
+
+export {GetDoctorByID}

src/components/utils/Functions-Endpoints/Patient.js

@@ -0,0 +1,25 @@
+import API_KEY from "../apiKeys";
+
+
+
+const GetByID = async (ID,authHeader) => {
+
+  console.log(authHeader, 'mostrando autorização dentro da função')
+
+  var myHeaders = new Headers();
+  myHeaders.append('apikey', API_KEY)
+  myHeaders.append('Authorization', authHeader)
+
+  var requestOptions = {
+   method: 'GET',
+   redirect: 'follow',
+   headers:myHeaders
+};
+
+
+const result = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${ID}`, requestOptions)
+const DictPaciente = await result.json()    
+return DictPaciente
+}
+
+export {GetByID}

src/components/utils/apiKeys.js

@@ -0,0 +1,3 @@
+const API_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ"
+
+export default API_KEY

src/data/sidebar-items.json

@@ -10,18 +10,6 @@
     "icon": "house"
   },
 
-  {
-    "name": "Cadastro de Pacientes",
-    "url": "/pacientes/cadastro",
-    "icon": "heart-pulse-fill"
-  },
-
-  {
-    "name": "Cadastro do Médico",
-    "url": "/medicos/cadastro",
-    "icon": "capsule"
-  },
-
   {
     "name": "Lista de Pacientes",
     "icon": "clipboard-heart-fill",

src/index.js

@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './assets/scss/bootstrap.scss';
 import './assets/scss/app.scss';
 import App from './App';
+import { AuthProvider } from "./components/utils/AuthProvider";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <AuthProvider>
+      <App />
+    </AuthProvider>
   </React.StrictMode>,
 
 );

src/pages/Details.jsx

@@ -1,25 +1,40 @@
 import React, { useEffect, useState } from "react";
 import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
+import { useParams } from "react-router-dom";
+import API_KEY from "../components/utils/apiKeys";
+import {GetByID} from "../components/utils/Functions-Endpoints/Patient"
+import { Link } from "react-router-dom";
+import { useAuth } from "../components/utils/AuthProvider";
 
-const Details = ({ patientID, setCurrentPage }) => {
+
+
+const Details = () => {
+  const parametros = useParams();
+  const {getAuthorizationHeader, isAuthenticated} = useAuth();
   const [paciente, setPaciente] = useState({});
   const [anexos, setAnexos] = useState([]);
   const [selectedFile, setSelectedFile] = useState(null);
 
+  const patientID = parametros.id
+  
+
   useEffect(() => {
     if (!patientID) return;
+    console.log(patientID, 'teu id')
+    const authHeader = getAuthorizationHeader()
 
-    fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
-      .then(res => res.json())
+    GetByID(patientID, authHeader)
+      .then((data) => {
+        console.log(data, "paciente vindo da API");
+        setPaciente(data[0]); // supabase retorna array
+      })
+      .catch((err) => console.error("Erro ao buscar paciente:", err));
 
-      .then(result => {setPaciente(result.data)})
-      .catch(err => console.error("Erro ao buscar paciente:", err));
-
-    fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`)
+    /*fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`)
       .then(res => res.json())
       .then(data => setAnexos(data.data || []))
       .catch(err => console.error("Erro ao buscar anexos:", err));
-
+*/
   }, [patientID]);
 
   const handleUpload = async () => {
@@ -74,17 +89,30 @@ const Details = ({ patientID, setCurrentPage }) => {
       <h3 className="mb-3 text-center">MediConnect</h3>
       <hr />
       <div className="d-flex justify-content-between align-items-center mb-3">
+          <Link to={'/pacientes'}>
+          <button className="btn btn-success me-2" >
+            <i className="bi bi-chevron-left"></i> Voltar
+          </button>
+        </Link>
         
         <div className="d-flex mb-3">
           <div className="avatar avatar-xl">
             <img src={avatarPlaceholder} alt="" />
           </div>
+
+
           <div className="media-body ms-3 font-extrabold">
-            <span>{paciente.nome || "Nome Completo"}</span>
+            <span>{paciente.full_name || "Nome Completo"}</span>
             <p>{paciente.cpf || "CPF"}</p>
           </div>
         </div>
 
+         <Link to={`/pacientes/${paciente.id}/edit`}>
+            <button className="btn btn-light"  >
+              <i className="bi bi-pencil-square"></i> Editar
+            </button>
+          </Link>
+      
       </div>
     </div>
 
@@ -95,19 +123,19 @@ const Details = ({ patientID, setCurrentPage }) => {
       <div className="row">
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Nome:</label>
-          <p>{paciente.nome || "-"}</p>
+          <p>{paciente.full_name || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Nome social:</label>
-          <p>{paciente.nome_social || "-"}</p>
+          <p>{paciente.social_name || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Data de nascimento:</label>
-          <p>{paciente.data_nascimento || "-"}</p>
+          <p>{paciente.birth_date || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Gênero:</label>
-          <p>{paciente.sexo || "-"}</p>
+          <p>{paciente.sex || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">CPF:</label>
@@ -119,55 +147,55 @@ const Details = ({ patientID, setCurrentPage }) => {
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Outro documento:</label>
-          <p>{paciente.outros_documentos?.tipo || "-"}</p>
+          <p>{paciente.document_type || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Número do documento:</label>
-          <p>{paciente.outros_documentos?.numero || "-"}</p>
+          <p>{paciente.document_number || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Etnia:</label>
-          <p>{paciente.etnia || "-"}</p>
+          <p>{paciente.ethnicity || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Raça:</label>
-          <p>{paciente.raca || "-"}</p>
+          <p>{paciente.race || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Naturalidade:</label>
-          <p>{paciente.etniaRaca || "-"}</p>
+          <p>{paciente.naturality || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Profissão:</label>
-          <p>{paciente.profissao || "-"}</p>
+          <p>{paciente.profession || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Nome da Mãe:</label>
-          <p>{paciente.nome_mae || "-"}</p>
+          <p>{paciente.mother_name || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Profissão da mãe:</label>
-          <p>{paciente.profissao_mae || "-"}</p>
+          <p>{paciente.mother_profession || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Nome do Pai:</label>
-          <p>{paciente.nome_pai || "-"}</p>
+          <p>{paciente.father_name || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Profissão do pai:</label>
-          <p>{paciente.profissao_pai || "-"}</p>
+          <p>{paciente.father_profession || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Nome do responsável:</label>
-          <p>{paciente.nome_responsavel || "-"}</p>
+          <p>{paciente.guardian_name || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">CPF do responsável:</label>
-          <p>{paciente.cpf_responsavel || "-"}</p>
+          <p>{paciente.guardian_cpf || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Estado civil:</label>
-          <p>{paciente.estado_civil || "-"}</p>
+          <p>{paciente.marital_status || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Nome do esposo(a):</label>
@@ -175,17 +203,17 @@ const Details = ({ patientID, setCurrentPage }) => {
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Identificador de outro sistema:</label>
-          <p>{paciente.outro_id || "-"}</p>
+          <p>{paciente.legacy_code || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <div className="form-check">
-            <input className="form-check-input" type="checkbox" checked={paciente.rnConvenio} disabled/>
+            <input className="form-check-input" type="checkbox" checked={paciente.rn_in_insurance} disabled/>
             <label className="font-extrabold">RN na Guia do convênio:</label>
           </div>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Observações:</label>
-          <p>{paciente.observacoes || "-"}</p>
+          <p>{paciente.notes || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Anexos do Paciente:</label>
@@ -204,15 +232,7 @@ const Details = ({ patientID, setCurrentPage }) => {
             <p>-</p>
           )}
         </div>
-        <div className="col-md-6 mb-3">
-          <label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>
-            Carregar Um Novo Anexo
-          </label>
-          <input 
-            type="file" className="form-control d-none" name="foto"  id="foto-input" onChange={(e) => setSelectedFile(e.target.files[0])} accept="image/*"/>
-          {selectedFile && <span className="ms-2" style={{ fontSize: '1rem' }}>{selectedFile.name}</span>}
-          <button onClick={handleUpload} className="btn btn-success ms-2">Enviar</button>
-        </div>
+      
       </div>
       </div>
 
@@ -223,23 +243,19 @@ const Details = ({ patientID, setCurrentPage }) => {
       <div className="row">
         <div className="col-md-3 mb-3">
           <label className="font-extrabold">Tipo Sanguíneo:</label>
-          <p>{paciente.tipoSanguineo || "-"}</p>
+          <p>{paciente.blood_type || "-"}</p>
         </div>
         <div className="col-md-3 mb-3">
           <label className="font-extrabold">Peso (kg):</label>
-          <p>{paciente.peso || "-"}</p>
+          <p>{paciente.weight_kg || "-"}</p>
         </div>
         <div className="col-md-3 mb-3">
           <label className="font-extrabold">Altura (m):</label>
-          <p>{paciente.altura || "-"}</p>
+          <p>{paciente.height_m || "-"}</p>
         </div>
         <div className="col-md-3 mb-3">
           <label className="font-extrabold">IMC (kg/m²):</label>
-          <p>{paciente.imc || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Alergias:</label>
-          <p>{paciente.alergias || "-"}</p>
+          <p>{paciente.bmi || "-"}</p>
         </div>
       </div>
       </div>
@@ -273,7 +289,7 @@ const Details = ({ patientID, setCurrentPage }) => {
         </div>
         <div className="col-md-2 d-flex align-items-end mb-3">
           <div className="form-check">
-            <input className="form-check-input" type="checkbox" checked={paciente.pacienteVip} disabled/>
+            <input className="form-check-input" type="checkbox" checked={paciente.vip} disabled/>
             <label className="font-extrabold">Paciente VIP: </label>
           </div>
         </div>
@@ -287,31 +303,31 @@ const Details = ({ patientID, setCurrentPage }) => {
       <div className="row">
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">CEP:</label>
-          <p>{paciente.endereco?.cep || "-"}</p>
+          <p>{paciente.cep || "-"}</p>
         </div>
         <div className="col-md-8 mb-3">
           <label className="font-extrabold">Rua:</label>
-          <p>{paciente.endereco?.logradouro || "-"}</p>
+          <p>{paciente.street || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">Bairro:</label>
-          <p>{paciente.endereco?.bairro || "-"}</p>
+          <p>{paciente.neighborhood || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">Cidade:</label>
-          <p>{paciente.endereco?.cidade || "-"}</p>
+          <p>{paciente.city || "-"}</p>
         </div>
         <div className="col-md-2 mb-3">
           <label className="font-extrabold">Estado:</label>
-          <p>{paciente.endereco?.estado || "-"}</p>
+          <p>{paciente.state || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">Número:</label>
-          <p>{paciente.endereco?.numero || "-"}</p>
+          <p>{paciente.number || "-"}</p>
         </div>
         <div className="col-md-8 mb-3">
           <label className="font-extrabold">Complemento:</label>
-          <p>{paciente.endereco?.complemento || "-"}</p>
+          <p>{paciente.complement || "-"}</p>
         </div>
       </div>
       </div>
@@ -323,19 +339,19 @@ const Details = ({ patientID, setCurrentPage }) => {
       <div className="row">
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Email:</label>
-          <p>{paciente.contato?.email || "-"}</p>
+          <p>{paciente.email || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Telefone:</label>
-          <p>{paciente.contato?.celular || "-"}</p>
+          <p>{paciente.phone_mobile || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Telefone 2:</label>
-          <p>{paciente.contato?.telefone2 || "-"}</p>
+          <p>{paciente.phone1 || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Telefone 3:</label>
-          <p>{paciente.contato?.telefone3 || "-"}</p>
+          <p>{paciente.phone2 || "-"}</p>
         </div>
       </div>
       </div>

src/pages/DoctorCadastroManager.jsx

@@ -1,43 +1,56 @@
 import React, { useState } from 'react';
 
 // Importamos os dois novos componentes que criamos
-
+import { useAuth } from '../components/utils/AuthProvider';
 import DoctorForm from '../components/doctors/DoctorForm';
+import API_KEY from '../components/utils/apiKeys';
+import { Navigate, useNavigate } from 'react-router-dom';
+
 
 function DoctorCadastroManager( ) {
-  // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
+  const [DoctorDict, setDoctorDict] = useState({})
+  const navigate = useNavigate();
 
-
-  
-  var myHeaders = new Headers();
-  myHeaders.append("Content-Type", "application/json");
+   const { getAuthorizationHeader, isAuthenticated } = useAuth();
   
   // 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);
+  // Função que será chamada para salvar o médico no banco de dados
+  const handleSaveDoctor = async (doctorData) => {
+    const authHeader = getAuthorizationHeader();
 
-    var raw = JSON.stringify(patientData)
+
+    var myHeaders = new Headers();
+      myHeaders.append("Content-Type", "application/json");
+      myHeaders.append("apikey", API_KEY)
+      myHeaders.append("Authorization", authHeader)
+
+
+    console.log('Salvando paciente:', doctorData);
+
+    var raw = JSON.stringify(doctorData);
+    console.log(doctorData, 'aqui')
 
     var requestOptions = {
-      method:'POST',
-      header: myHeaders,
-      body:raw,
-      redirect:'follow'
+      method: 'POST',
+      headers: myHeaders,
+      body: raw,
+      redirect: 'follow'
+    };
+
+    try {
+      const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1//doctors", requestOptions);
+       
+      console.log("Médico salvo no backend:", response);
+
+      return response;
+    } catch (error) {
+      console.error("Erro ao salvar Médico:", error);
+      throw 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));
-
-    setModalMsg(`Médico "${patientData.nome}" salvo com sucesso!`);
-    setShowModal(true);
-   
-  };
+};
 
   return (
     <>
@@ -68,9 +81,10 @@ function DoctorCadastroManager( ) {
           <div className="col-12">
            
               <DoctorForm
-                onSave={handleSavePatient}
-                onCancel={console.log('hsh')}
-                PatientDict={{}}
+                onSave={handleSaveDoctor}
+                onCancel={() => {navigate('/medicos')}}
+                formData={DoctorDict}
+                setFormData={setDoctorDict}
               />
             
           </div>

src/pages/DoctorDetails.jsx

@@ -1,19 +1,32 @@
 import React, { useEffect, useState } from "react";
 import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
+import { useParams,Link } from "react-router-dom";
+import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
+import { useAuth } from "../components/utils/AuthProvider";
 
-const Details = ({ patientID, setCurrentPage }) => {
-  const [paciente, setPaciente] = useState({});
+const Details = ({setCurrentPage }) => {
+  const {getAuthorizationHeader, isAuthenticated} = useAuth(); 
+  const [doctor, setDoctor] = useState({});
+  const Parametros = useParams()
 
+  const doctorID = Parametros.id
   useEffect(() => {
-    if (!patientID) return;
+    if (!doctorID) return;
 
-    fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
-      .then(res => res.json())
-      .then(data => setPaciente(data))
-      .catch(err => console.error("Erro ao buscar médico:", err));
-  }, [patientID]);
+    const authHeader = getAuthorizationHeader()
 
-  //if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
+    GetDoctorByID(doctorID, authHeader)
+      .then((data) => {
+        console.log(data, "médico vindo da API");
+        setDoctor(data[0])
+        ; // supabase retorna array
+      })
+      .catch((err) => console.error("Erro ao buscar paciente:", err));
+
+
+  }, [doctorID]);
+
+  //if (!doctor) return <p style={{ textAlign: "center" }}>Carregando...</p>;
 
   return (
     <>
@@ -21,21 +34,25 @@ const Details = ({ patientID, setCurrentPage }) => {
       <h3 className="mb-3 text-center">MediConnect</h3>
       <hr />
       <div className="d-flex justify-content-between align-items-center mb-3">
-        <button className="btn btn-success me-2" onClick={() => setCurrentPage("table")}>
-          <i className="bi bi-chevron-left"></i> Voltar
-        </button>
+        <Link to={'/medicos'}>
+          <button className="btn btn-success me-2" >
+            <i className="bi bi-chevron-left"></i> Voltar
+          </button>
+        </Link>
         <div className="d-flex mb-3">
           <div className="avatar avatar-xl">
             <img src={avatarPlaceholder} alt="" />
           </div>
           <div className="media-body ms-3 font-extrabold">
-            <span>{paciente.nome || "Nome Completo"}</span>
-            <p>{paciente.cpf || "CPF"}</p>
+            <span>{doctor.nome || "Nome Completo"}</span>
+            <p>{doctor.cpf || "CPF"}</p>
           </div>
         </div>
-        <button className="btn btn-light" onClick={() => setCurrentPage("edit-page-doctor")}>
-          <i className="bi bi-pencil-square"></i> Editar
-        </button>
+        <Link to={`/medicos/${doctor.id}/edit`}>
+          <button className="btn btn-light" onClick={() => {console.log(doctor.id)}} >
+            <i className="bi bi-pencil-square"></i> Editar
+          </button>
+        </Link>
       </div>
     </div>
       
@@ -46,72 +63,29 @@ const Details = ({ patientID, setCurrentPage }) => {
       <div className="row">
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Nome:</label>
-          <p>{paciente.nome || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Nome social:</label>
-          <p>{paciente.nomeSocial || "-"}</p>
+          <p>{doctor.full_name || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Data de nascimento:</label>
-          <p>{paciente.dataNascimento || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Gênero:</label>
-          <p>{paciente.sexo || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">CPF:</label>
-          <p>{paciente.cpf || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">CRM:</label>
-          <p>{paciente.rg || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Outro documento:</label>
-          <p>{paciente.documento || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Número do documento:</label>
-          <p>{paciente.numeroDocumento || "-"}</p>
+          <p>{doctor.birth_date || "-"}</p>
         </div>
         
         <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Etnia e Raça:</label>
-          <p>{paciente.etniaRaca || "-"}</p>
+          <label className="font-extrabold">CPF:</label>
+          <p>{doctor.cpf || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Nacionalidade:</label>
-          <p>{paciente.etniaRaca || "-"}</p>
+          <label className="font-extrabold">CRM:</label>
+          <p>{doctor.crm || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Naturalidade:</label>
-          <p>{paciente.etniaRaca || "-"}</p>
+          <label className="font-extrabold">Estado do CRM:</label>
+          <p>{doctor.crm_uf || "-"}</p>
         </div>
+        
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Especialização:</label>
-          <p>{paciente.profissao || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Estado civil:</label>
-          <p>{paciente.estadoCivil || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Nome do esposo(a):</label>
-          <p>{paciente.nomeConjuge || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Identificador de outro sistema:</label>
-          <p>{paciente.outroId || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Observações:</label>
-          <p>{paciente.observacoes || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Anexos do Médico:</label>
-          <p>{ "-"}</p>
+          <p>{doctor.specialty || "-"}</p>
         </div>
       </div>
       </div>
@@ -123,31 +97,31 @@ const Details = ({ patientID, setCurrentPage }) => {
       <div className="row">
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">CEP:</label>
-          <p>{paciente.cep || "-"}</p>
+          <p>{doctor.cep || "-"}</p>
         </div>
         <div className="col-md-8 mb-3">
           <label className="font-extrabold">Rua:</label>
-          <p>{paciente.rua || "-"}</p>
+          <p>{doctor.street || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">Bairro:</label>
-          <p>{paciente.bairro || "-"}</p>
+          <p>{doctor.neighborhood || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">Cidade:</label>
-          <p>{paciente.cidade || "-"}</p>
+          <p>{doctor.city || "-"}</p>
         </div>
         <div className="col-md-2 mb-3">
           <label className="font-extrabold">Estado:</label>
-          <p>{paciente.estado || "-"}</p>
+          <p>{doctor.state || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">Número:</label>
-          <p>{paciente.numero || "-"}</p>
+          <p>{doctor.number || "-"}</p>
         </div>
         <div className="col-md-8 mb-3">
           <label className="font-extrabold">Complemento:</label>
-          <p>{paciente.complemento || "-"}</p>
+          <p>{doctor.complement || "-"}</p>
         </div>
       </div>
       </div>
@@ -159,20 +133,17 @@ const Details = ({ patientID, setCurrentPage }) => {
       <div className="row">
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Email:</label>
-          <p>{paciente.email || "-"}</p>
+          <p>{doctor.email || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Telefone:</label>
-          <p>{paciente.telefone1 || "-"}</p>
+          <p>{doctor.phone_mobile || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Telefone 2:</label>
-          <p>{paciente.telefone2 || "-"}</p>
-        </div>
-        <div className="col-md-6 mb-3">
-          <label className="font-extrabold">Celular:</label>
-          <p>{paciente.telefone3 || "-"}</p>
+          <p>{doctor.phone2 || "-"}</p>
         </div>
+        
       </div>
       </div>
     </>

src/pages/DoctorEditPage.jsx

@@ -1,46 +1,76 @@
 import React from 'react'
-
+import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor'
 import DoctorForm from '../components/doctors/DoctorForm'
-
+import { useAuth } from '../components/utils/AuthProvider'
 import {useEffect, useState} from 'react'
+import { useParams } from 'react-router-dom'
+import API_KEY from '../components/utils/apiKeys'
+const DoctorEditPage = ( {id, setCurrentPage}) => {
+  const {getAuthorizationHeader, isAuthenticated} = useAuth();
+  const [DoctorToPUT, setDoctorPUT] = useState({})
   
-const DoctorEditPage = ( {id}) => {
+  const Parametros = useParams()
 
-  const [PatientToPUT, setPatientPUT] = useState({})
-
-  var requestOptions = {
-   method: 'GET',
-   redirect: 'follow'
-};
+  const DoctorID = Parametros.id
 
 useEffect(() => {
     
+  const authHeader = getAuthorizationHeader()
+
+ GetDoctorByID(DoctorID, authHeader)
+      .then((data) => {
+        console.log(data, "médico vindo da API");
+        setDoctorPUT(data[0])
+        ; // supabase retorna array
+      })
+      .catch((err) => console.error("Erro ao buscar paciente:", err));
 
-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 = () => {
+  const HandlePutDoctor = async () => {
+const authHeader = getAuthorizationHeader()
   
-    console.log('médico atualizado')
+
+  var myHeaders = new Headers();
+  myHeaders.append('apikey', API_KEY)
+  myHeaders.append("Authorization", authHeader);
+  myHeaders.append("Content-Type", "application/json");
+
+  var raw = JSON.stringify(DoctorToPUT);
+
+  console.log("Enviando médico para atualização:", DoctorToPUT);
+
+  var requestOptions = {
+    method: 'PUT',
+    headers: myHeaders,
+    body: raw,
+    redirect: 'follow'
+  };
+
+  try {
+    const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DoctorID}`,requestOptions);
+
+    // se o backend retorna JSON
+    const result = await response.json(); 
+    console.log("ATUALIZADO COM SUCESSO", result);
+    
+    return result; 
+  } catch (error) {
+    console.error("Erro ao atualizar paciente:", error);
+    throw error;
+  }
 
   }
 
 
   return (
-
     <div>
 
-
-    
-
     <DoctorForm
-    onSave={HandlePutPatient}
+    onSave={HandlePutDoctor}
     onCancel={console.log('Não atualizar')}
-    PatientDict={PatientToPUT}
+    formData={DoctorToPUT}
+    setFormData={setDoctorPUT}
     
     />
     

src/pages/DoctorTable.jsx

@@ -1,6 +1,11 @@
 import React, { useState, useEffect } from "react";
+import API_KEY from "../components/utils/apiKeys";
+import { useAuth } from "../components/utils/AuthProvider";
+import { Link } from "react-router-dom";
 
 function TableDoctor({ setCurrentPage, setPatientID }) {
+  const {getAuthorizationHeader, isAuthenticated} = useAuth(); 
+
   const [medicos, setMedicos] = useState([]);
   const [search, setSearch] = useState("");
   const [filtroAniversariante, setFiltroAniversariante] = useState(false);
@@ -11,14 +16,24 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
 
   // Função para excluir médicos
   const deleteDoctor = async (id) => {
-    const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
+     
+    const authHeader = getAuthorizationHeader()
+    console.log(id, 'teu id')
+    
+    var myHeaders = new Headers();
+      myHeaders.append('apikey', API_KEY);
+      myHeaders.append("Authorization", authHeader)
+    
+    
+    var requestOptions = { method: "DELETE", redirect: "follow", headers:myHeaders };
 
     try {
-      await fetch(
-        `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
-        requestOptionsDelete
+      const result = await fetch(
+        `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${id}`,
+        requestOptions
       );
-      setMedicos((prev) => prev.filter((m) => m.id !== id));
+      setMedicos((prev) => prev.filter((p) => p.id !== id));
+      console.log(result)
     } catch (error) {
       console.log("Deu problema", error);
     } finally {
@@ -40,12 +55,24 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
 
   // Buscar médicos da API
   useEffect(() => {
-    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
-      .then((response) => response.json())
-      .then((result) => console.log('nada'))
-      .catch((error) =>
-        console.log("Erro para encontrar médicos no banco de dados", error)
-      );
+
+     const authHeader = getAuthorizationHeader()
+
+     console.log(authHeader, 'aqui autorização')
+
+   var myHeaders = new Headers();
+  myHeaders.append("apikey", API_KEY);
+  myHeaders.append("Authorization", `${authHeader}`);
+  var requestOptions = {
+    method: 'GET',
+    headers: myHeaders,
+    redirect: 'follow'
+  };
+
+  fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions)
+    .then(response => response.json())
+    .then(result => setMedicos(result))
+    .catch(error => console.log('error', error));
   }, []);
 
   // Filtrar médicos pelo campo de pesquisa e aniversariantes
@@ -68,12 +95,14 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
             <div className="card">
               <div className="card-header d-flex justify-content-between align-items-center">
                 <h4 className="card-title mb-0">Médicos Cadastrados</h4>
-                <button
-                  className="btn btn-primary"
-                  onClick={() => setCurrentPage("form-layout")}
-                >
-                  <i className="bi bi-plus-circle"></i> Adicionar Médico
-                </button>
+               <Link to={'/medicos/cadastro'}>
+                  <button
+                    className="btn btn-primary"
+                    
+                  >
+                    <i className="bi bi-plus-circle"></i> Adicionar Médico
+                  </button>
+                </Link>
               </div>
 
               <div className="card-body">
@@ -115,7 +144,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                       {medicosFiltrados.length > 0 ? (
                         medicosFiltrados.map((medico) => (
                           <tr key={medico.id}>
-                            <td>{medico.nome}</td>
+                            <td>{medico.full_name}</td>
                             <td>{medico.cpf}</td>
                             <td>{medico.email}</td>
                             <td>{medico.telefone}</td>
@@ -134,35 +163,39 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                             <td>
                               <div className="d-flex gap-2">
                                 {/* Ver Detalhes */}
-                                <button
-                                  className="btn btn-sm"
-                                  style={{
-                                    backgroundColor: "#E6F2FF",
-                                    color: "#004085",
-                                  }}
-                                  onClick={() => {
-                                    setCurrentPage("details-page-paciente");
-                                    setPatientID(medico.id);
-                                  }}
-                                >
-                                  <i className="bi bi-eye me-1"></i> Ver
-                                  Detalhes
-                                </button>
+                                <Link to={`/medicos/${medico.id}`}>
+                                  <button
+                                    className="btn btn-sm"
+                                    style={{
+                                      backgroundColor: "#E6F2FF",
+                                      color: "#004085",
+                                    }}
+                                    onClick={() => {
+                                    console.log('editar')
+                                      
+                                    }}
+                                  >
+                                    <i className="bi bi-eye me-1"></i> Ver
+                                    Detalhes
+                                  </button>
+                                </Link>
 
                                 {/*  Editar */}
-                                <button
-                                  className="btn btn-sm"
-                                  style={{
-                                    backgroundColor: "#FFF3CD",
-                                    color: "#856404",
-                                  }}
-                                  onClick={() => {
-                                    setCurrentPage("edit-page-paciente");
-                                    setPatientID(medico.id);
-                                  }}
-                                >
-                                  <i className="bi bi-pencil me-1"></i> Editar
-                                </button>
+                                <Link to={`/medicos/${medico.id}/edit`}>
+                                    <button
+                                      className="btn btn-sm"
+                                      style={{
+                                        backgroundColor: "#FFF3CD",
+                                        color: "#856404",
+                                      }}
+                                      onClick={() => {
+                                        
+                                        console.log('Editar')
+                                      }}
+                                    >
+                                      <i className="bi bi-pencil me-1"></i> Editar
+                                    </button>
+                                </Link>
 
                                 
                                 <button

src/pages/EditPage.jsx

@@ -3,32 +3,40 @@ import React from 'react'
 import PatientForm from '../components/patients/PatientForm'
 
 import {useEffect, useState} from 'react'
-
+import { GetByID } from '../components/utils/Functions-Endpoints/Patient'
+import API_KEY from '../components/utils/apiKeys'
+import {useNavigate, useParams } from 'react-router-dom'
+import { useAuth } from '../components/utils/AuthProvider'
 const EditPage = ( {id, setCurrentPage}) => {
-
+  const navigate = useNavigate()
+  const Parametros = useParams()
   const [PatientToPUT, setPatientPUT] = useState({})
 
-  var requestOptions = {
-   method: 'GET',
-   redirect: 'follow'
-};
+   const { getAuthorizationHeader, isAuthenticated } = useAuth();
+
+const PatientID = Parametros.id
 
 useEffect(() => {
+   const authHeader = getAuthorizationHeader()
+
+   GetByID(PatientID, authHeader)
+  .then((data) => {
+        console.log(data[0], "paciente vindo da API");
+        setPatientPUT(data[0]); // supabase retorna array
+      })
+      .catch((err) => console.error("Erro ao buscar paciente:", err));
 
 
-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,requestOptions])
+}, [PatientID])
 
 const HandlePutPatient = async () => { 
+  const authHeader = getAuthorizationHeader()
   
 
   var myHeaders = new Headers();
-  myHeaders.append("Authorization", "Bearer <token>");
+  myHeaders.append('apikey', API_KEY)
+  myHeaders.append("Authorization", authHeader);
   myHeaders.append("Content-Type", "application/json");
 
   var raw = JSON.stringify(PatientToPUT);
@@ -43,16 +51,21 @@ const HandlePutPatient = async () => {
   };
 
   try {
-    const response = await fetch(
-      "https://mock.apidog.com/m1/1053378-0-default/pacientes/" + PatientToPUT.id, 
-      requestOptions
-    );
+    const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${PatientID}`,requestOptions);
 
     // se o backend retorna JSON
-    const result = await response.json(); 
-    console.log("ATUALIZADO COM SUCESSO", result);
+    console.log("Resposta do servidor:", response.ok);
+    if(response.ok === false){
+      const errorText = await response.text();
+      console.error("Erro ao atualizar paciente:", errorText);
+    }
+    else{
       
-    return result; 
+      console.log("ATUALIZADO COM SUCESSO");
+      navigate('/pacientes')
+    }
+
+    return response;
   } catch (error) {
     console.error("Erro ao atualizar paciente:", error);
     throw error;

src/pages/Inicio.jsx

@@ -1,13 +1,46 @@
 import React, { useState, useEffect } from 'react';
 import { FaUser, FaUserPlus, FaCalendarAlt, FaCalendarCheck } from 'react-icons/fa';
 import './style/Inicio.css';
+import { useAuth } from '../components/utils/AuthProvider';
+import { Link } from 'react-router-dom';
 
 function Inicio({ setCurrentPage }) {
+  const {setAuthTokens} = useAuth()
   const [pacientes, setPacientes] = useState([]);
   const [agendamentos, setAgendamentos] = useState([]);
 
   useEffect(() => {
-    const fetchPacientes = async () => {
+
+    
+      var myHeaders = new Headers();
+    myHeaders.append("apikey", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ");
+    myHeaders.append("Content-Type", "application/json");
+    
+    var raw = JSON.stringify({
+       "email": "riseup@popcode.com.br",
+       "password": "riseup"
+       
+    });
+    
+    var requestOptions = {
+       method: 'POST',
+       headers: myHeaders,
+       body: raw,
+      
+       redirect: 'follow'
+    };
+    
+    fetch("https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password", requestOptions)
+       .then(response => response.json())
+       .then(result => {setAuthTokens(result); console.log(result)})
+       .catch(error => console.log('error', error));
+    
+
+
+
+
+
+    /*const fetchPacientes = async () => {
       try {
         const res = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes");
         const data = await res.json();
@@ -30,7 +63,7 @@ function Inicio({ setCurrentPage }) {
     };
 
     fetchPacientes();
-    fetchAgendamentos();
+    fetchAgendamentos();*/
   }, []);
 
   const totalPacientes = pacientes.length;

src/pages/PatientCadastroManager.jsx

@@ -1,56 +1,103 @@
 import {useState} from 'react';
 import PatientForm from '../components/patients/PatientForm';
+import API_KEY from '../components/utils/apiKeys';
+import { useAuth } from '../components/utils/AuthProvider';
+import { useNavigate } from 'react-router-dom';
 
 function PatientCadastroManager( {setCurrentPage} ) {
+  const navigate = useNavigate()
+  const [showModal, setShowModal] = useState(false);
+  const [infosModal, setInfosModal] = useState({title:'', message:''});
 
-
+  const { getAuthorizationHeader, isAuthenticated } = useAuth();
   const [formData, setFormData] = useState({})
-  var myHeaders = new Headers();
-  myHeaders.append("Content-Type", "application/json");
  
   // Função que será chamada para "salvar" o paciente
   const handleSavePatient = async (patientData) => {
-  console.log('Salvando paciente:', patientData);
+    const authHeader = getAuthorizationHeader();
 
-  var raw = JSON.stringify(patientData);
+    var myHeaders = new Headers();
+      myHeaders.append("Content-Type", "application/json");
+      myHeaders.append("apikey", API_KEY)
+      myHeaders.append("Authorization", authHeader)
 
-  var requestOptions = {
-    method: 'POST',
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: raw,
-    redirect: 'follow'
-  };
 
-  try {
-    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);
+    console.log('Salvando paciente:', patientData);
 
-    return result;
+    var raw = JSON.stringify(patientData);
+    console.log(patientData, 'aqui')
+
+    var requestOptions = {
+      method: 'POST',
+      headers: myHeaders,
+      body: raw,
+      redirect: 'follow'
+    };
+
+
+    // 23505 - cpf duplicadoo
+    // 23514 - cpf invalido
+    try {
+      const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions);
+      console.log(response.ok, 'aqui')
+    
+    if(response.ok === false){
+      const data = await response.json();
+      console.log("Erro ao salvar paciente:", data);
+      if (data.code === "23505") {
+        setShowModal(true);
+        setInfosModal({
+          title: 'Erro ao salvar paciente',
+          message: 'CPF já cadastrado. Por favor, verifique o CPF informado.'
+        });
+      }
+    }
+    else{
+      console.log("ATUALIZADO COM SUCESSO");
+      navigate('/pacientes')
+    }
   } catch (error) {
     console.error("Erro ao salvar paciente:", error);
     throw error;
   }
 };
 
-
   return (
     <>
       <div className="page-heading">
+          {showModal &&(
+          <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">
+                <h5 className="modal-title">{infosModal.title}</h5>
+                <button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
+              </div>
+              <div className="modal-body">
+                <p>{infosModal.message}</p>
+              </div>
+              <div className="modal-footer">
+                <button 
+                  type="button" 
+                  className="btn btn-primary" 
+                  onClick={() => setShowModal(false)}
+                >
+                  Fechar e Continuar no Cadastro
+                </button>
+               
+              </div>
+            </div>
+          </div>
+        </div>)}
+
         <h3>Cadastro de Pacientes</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. */}
-
               <PatientForm
                 onSave={handleSavePatient}
-                onCancel={() => {setCurrentPage('table')}}
+                onCancel={() => {navigate('/pacientes')}}
                 formData={formData}
                 setFormData={setFormData}
               />

src/pages/TablePaciente.jsx

@@ -1,7 +1,14 @@
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
+import API_KEY from "../components/utils/apiKeys";
+import { useAuth } from "../components/utils/AuthProvider";
+
+
 
 function TablePaciente({ setCurrentPage, setPatientID }) {
+  
+  const {getAuthorizationHeader, isAuthenticated} = useAuth();
+
   const [pacientes, setPacientes] = useState([]);
   const [search, setSearch] = useState("");
   const [filtroConvenio, setFiltroConvenio] = useState("Todos");
@@ -12,6 +19,8 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedPatientId, setSelectedPatientId] = useState(null);
 
+  
+
   const GetAnexos = async (id) => {
     var myHeaders = new Headers();
     myHeaders.append("Authorization", "Bearer <token>");
@@ -64,16 +73,23 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
 
   // função de exclusão atualizada
   const deletePatient = async (id) => {
-    await DeleteAnexo(id);
     
-    const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
+    const authHeader = getAuthorizationHeader()
+    console.log(id)
+    var myHeaders = new Headers();
+    myHeaders.append('apikey', API_KEY);
+    myHeaders.append("Authorization", authHeader)
+    
+    
+    var requestOptions = { method: "DELETE", redirect: "follow", headers:myHeaders };
 
     try {
-      await fetch(
-        `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
-        requestOptionsDelete
+      const result = await fetch(
+        `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${id}`,
+        requestOptions
       );
       setPacientes((prev) => prev.filter((p) => p.id !== id));
+      console.log(result)
     } catch (error) {
       console.log("Deu problema", error);
     } finally {
@@ -83,13 +99,25 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
 
   // Requisição inicial para buscar pacientes
   useEffect(() => {
-    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
-      .then((response) => response.json())
-      .then((result) => console.log(result["data"]))
-      .catch((error) =>
-        console.log("Erro para encontrar pacientes no banco de dados", error)
-      );
-  }, []);
+
+     const authHeader = getAuthorizationHeader()
+
+     console.log(authHeader, 'aqui autorização')
+
+   var myHeaders = new Headers();
+  myHeaders.append("apikey", API_KEY);
+  myHeaders.append("Authorization", `${authHeader}`);
+  var requestOptions = {
+    method: 'GET',
+    headers: myHeaders,
+    redirect: 'follow'
+  };
+
+  fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions)
+    .then(response => response.json())
+    .then(result => setPacientes(result))
+    .catch(error => console.log('error', error));
+  }, [isAuthenticated, getAuthorizationHeader]);
 
   // Função para verificar se hoje é aniversário do paciente
   const ehAniversariante = (dataNascimento) => {
@@ -221,7 +249,7 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
                       {pacientesFiltrados.length > 0 ? (
                         pacientesFiltrados.map((paciente) => (
                           <tr key={paciente.id}>
-                            <td>{paciente.nome}</td>
+                            <td>{paciente.full_name}</td>
                             <td>{paciente.cpf}</td>
                             <td>{paciente.email}</td>
                             <td>{paciente.telefone}</td>
@@ -238,33 +266,37 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
                             </td>
                             <td>
                               <div className="d-flex gap-2">
-                                <button
-                                  className="btn btn-sm"
-                                  style={{
-                                    backgroundColor: "#E6F2FF",
-                                    color: "#004085",
-                                  }}
-                                  onClick={() => {
-                                    setCurrentPage("details-page-paciente");
-                                    setPatientID(paciente.id);
-                                  }}
-                                >
-                                  <i className="bi bi-eye me-1"></i> Ver Detalhes
-                                </button>
+                                <Link to={`/pacientes/${paciente.id}`}>
+                                  <button
+                                    className="btn btn-sm"
+                                    style={{
+                                      backgroundColor: "#E6F2FF",
+                                      color: "#004085",
+                                    }}
+                                    onClick={() => {
                                       
-                                <button
-                                  className="btn btn-sm"
-                                  style={{
-                                    backgroundColor: "#FFF3CD",
-                                    color: "#856404",
-                                  }}
-                                  onClick={() => {
-                                    setCurrentPage("edit-page-paciente");
-                                    setPatientID(paciente.id);
-                                  }}
-                                >
-                                  <i className="bi bi-pencil me-1"></i> Editar
-                                </button>
+                                      console.log(paciente.id);
+                                    }}
+                                  >
+                                    <i className="bi bi-eye me-1"></i> Ver Detalhes
+                                  </button>
+                                </Link>
+
+                                <Link to={`/pacientes/${paciente.id}/edit`}>
+                                  <button
+                                    className="btn btn-sm"
+                                    style={{
+                                      backgroundColor: "#FFF3CD",
+                                      color: "#856404",
+                                    }}
+                                    onClick={() => {console.log(paciente.id)
+                                      
+                                      
+                                    }}
+                                  >
+                                    <i className="bi bi-pencil me-1"></i> Editar
+                                  </button>
+                                </Link>
 
                                 {/* Botão que abre o modal */}
                                 <button