POST de pacientes e inicio de Detalhes com nova API

src/App.js

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

src/components/patients/PatientForm.jsx

@@ -26,22 +26,18 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
     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
   }
   
@@ -126,7 +122,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
   };
 
   // Lógica para calcular o IMC
-  useEffect(() => {
+ /* useEffect(() => {
     const peso = parseFloat(formData.peso);
     const altura = parseFloat(formData.altura);
     if (peso > 0 && altura > 0) {
@@ -136,7 +132,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
       setFormData(prev => ({ ...prev, imc: '' }));
     }
   }, [formData.peso, formData.altura]);
-
+*/
 
   const [enderecoData, setEnderecoData] = useState({})
   useEffect(() => {setEnderecoData(formData.endereco || {}); console.log(enderecoData)}, [formData.endereco])
@@ -173,8 +169,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
     } 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{
@@ -206,49 +200,19 @@ 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){
       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;
+      
     }
 
     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, 
-      },
     });
     setShowSuccessModal(true);
   };
@@ -310,7 +274,7 @@ 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>
@@ -318,11 +282,11 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
-              <input type="date" className="form-control" name="data_nascimento" value={formData.data_nascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }}  />
+              <input type="date" className="form-control" name="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>
@@ -551,31 +515,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="city" value={formData.city} 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="bairro" value={formData.bairro} 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="cidade" value={formData.cidade} 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="estado" value={formData.estado} 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="numero" value={formData.numero} 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="complemento" value={formData.complemento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
           </div>
         </div>
@@ -593,11 +557,11 @@ 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>

src/components/utils/AuthProvider.js

@@ -0,0 +1,59 @@
+import React, { createContext, useContext, useState } from 'react';
+
+// 1. Criação do Contexto
+const AuthContext = createContext();
+
+// Função que será usada para envolver a aplicação
+export function AuthProvider({ children }) {
+  // 2. Estado para armazenar o token e o tipo de token
+  const [accessToken, setAccessToken] = useState(null);
+  const [tokenType, setTokenType] = useState(null);
+
+  // Função para salvar o token recebido após o login/refresh
+  const setAuthTokens = (tokenResponse) => {
+    // Certifique-se de que a resposta contém os tokens
+    if (tokenResponse && tokenResponse.access_token && tokenResponse.token_type) {
+      setAccessToken(tokenResponse.access_token);
+      setTokenType(tokenResponse.token_type);
+      
+      // OPCIONAL: Salvar no localStorage para persistência entre recargas de página
+      localStorage.setItem('access_token', tokenResponse.access_token);
+      localStorage.setItem('token_type', tokenResponse.token_type);
+    }
+  };
+
+  // Função para remover o token no logout
+  const clearAuthTokens = () => {
+    setAccessToken(null);
+    setTokenType(null);
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('token_type');
+  };
+
+  // 3. O valor que será fornecido a todos os componentes
+  const contextValue = {
+    // O valor do token para usar em requisições
+    accessToken,
+    tokenType,
+    // A função para salvar o token após o login/refresh
+    setAuthTokens, 
+    // A função de logout
+    clearAuthTokens,
+    // Um helper para saber se está logado
+    isAuthenticated: !!accessToken,
+    // Helper para montar o cabeçalho 'Authorization'
+    getAuthorizationHeader: () => 
+      accessToken && tokenType ? `${tokenType} ${accessToken}` : ''
+  };
+
+  return (
+    <AuthContext.Provider value={contextValue}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+// 4. Hook customizado para facilitar o uso nos componentes
+export function useAuth() {
+  return useContext(AuthContext);
+}

src/components/utils/apiKeys.js

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

src/pages/Details.jsx

@@ -1,18 +1,24 @@
 import React, { useEffect, useState } from "react";
 import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
+import { useParams } from "react-router-dom";
+
+const Details = () => {
+  const parametros = useParams();
 
-const Details = ({ patientID, setCurrentPage }) => {
   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')
     fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
       .then(res => res.json())
 
-      .then(result => {setPaciente(result.data)})
+      .then(result => {console.log(result.data)})
       .catch(err => console.error("Erro ao buscar paciente:", err));
 
     fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`)

src/pages/DoctorTable.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-
+import API_KEY from "../components/utils/apiKeys";
 function TableDoctor({ setCurrentPage, setPatientID }) {
   const [medicos, setMedicos] = useState([]);
   const [search, setSearch] = useState("");
@@ -40,12 +40,20 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
 
   // Buscar médicos da API
   useEffect(() => {
-    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
+      var myHeaders = new Headers();
-      .then((response) => response.json())
+  myHeaders.append("apikey", API_KEY);
-      .then((result) => console.log('nada'))
+  
-      .catch((error) =>
+
-        console.log("Erro para encontrar médicos no banco de dados", error)
+  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

src/pages/Inicio.jsx

@@ -1,13 +1,47 @@
 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';
 
 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 => console.log(result.access_token))
+       .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 +64,7 @@ function Inicio({ setCurrentPage }) {
     };
 
     fetchPacientes();
-    fetchAgendamentos();
+    fetchAgendamentos();*/
   }, []);
 
   const totalPacientes = pacientes.length;

src/pages/PatientCadastroManager.jsx

@@ -1,38 +1,39 @@
 import {useState} from 'react';
 import PatientForm from '../components/patients/PatientForm';
-
+import API_KEY from '../components/utils/apiKeys';
 function PatientCadastroManager( {setCurrentPage} ) {
  
 
   const [formData, setFormData] = useState({})
   var myHeaders = new Headers();
   myHeaders.append("Content-Type", "application/json");
+  myHeaders.append("apikey", API_KEY)
+  myHeaders.append("Authorization", `Bearer eyJhbGciOiJIUzI1NiIsImtpZCI6ImJGVUlxQzNzazNjUms5RlMiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3l1YW5xZnN3aGJlcmtvZXZ0bWZyLnN1cGFiYXNlLmNvL2F1dGgvdjEiLCJzdWIiOiJjN2ZjZDcwMi05YTZlLTRiN2MtYWJkMy05NTZiMjVhZjQwN2QiLCJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNzU4OTczMTkxLCJpYXQiOjE3NTg5Njk1OTEsImVtYWlsIjoicmlzZXVwQHBvcGNvZGUuY29tLmJyIiwicGhvbmUiOiIiLCJhcHBfbWV0YWRhdGEiOnsicHJvdmlkZXIiOiJlbWFpbCIsInByb3ZpZGVycyI6WyJlbWFpbCJdfSwidXNlcl9tZXRhZGF0YSI6eyJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiZnVsbF9uYW1lIjoiUmlzZVVwIFBvcGNvZGUifSwicm9sZSI6ImF1dGhlbnRpY2F0ZWQiLCJhYWwiOiJhYWwxIiwiYW1yIjpbeyJtZXRob2QiOiJwYXNzd29yZCIsInRpbWVzdGFtcCI6MTc1ODk2OTU5MX1dLCJzZXNzaW9uX2lkIjoiNzc1ZTA4NGYtM2RhNi00NjE5LWE5MmUtMDUwY2ZmMWU4NTg4IiwiaXNfYW5vbnltb3VzIjpmYWxzZX0.80loeCsbb7zsS5FYYh-KwhYi3frbBeZogXHF0rHZfLE`)
 
   // Função que será chamada para "salvar" o paciente
   const handleSavePatient = async (patientData) => {
-  console.log('Salvando paciente:', patientData);
+    console.log('Salvando paciente:', patientData);
 
-  var raw = JSON.stringify(patientData);
+    var raw = JSON.stringify(patientData);
+    console.log(patientData, 'aqui')
 
-  var requestOptions = {
+    var requestOptions = {
-    method: 'POST',
+      method: 'POST',
-    headers: {
+      headers: myHeaders,
-      "Content-Type": "application/json"
+      body: raw,
-    },
+      redirect: 'follow'
-    body: raw,
+    };
-    redirect: 'follow'
-  };
 
-  try {
+    try {
-    const response = await fetch("https://mock.apidog.com/m1/1053378-0-dault/pacientes", requestOptions);
+      const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions);
-    const result = await response.json();   
+      const result = await response.json();   
-    console.log("Paciente salvo no backend:", result);
+      console.log("Paciente salvo no backend:", result);
       
-    return result;
+      return result;
-  } catch (error) {
+    } catch (error) {
-    console.error("Erro ao salvar paciente:", error);
+      console.error("Erro ao salvar paciente:", error);
-    throw error; 
+      throw error; 
-  }
+    }
 };
 
 

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);
 
+  console.log(getAuthorizationHeader(), 'aqui' )
+
   const GetAnexos = async (id) => {
     var myHeaders = new Headers();
     myHeaders.append("Authorization", "Bearer <token>");
@@ -64,16 +73,21 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
 
   // função de exclusão atualizada
   const deletePatient = async (id) => {
-    await DeleteAnexo(id);
+    console.log(id)
+    var myHeaders = new Headers();
+    myHeaders.append('apikey', API_KEY);
+    myHeaders.append("Authorization", `Bearer eyJhbGciOiJIUzI1NiIsImtpZCI6ImJGVUlxQzNzazNjUms5RlMiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3l1YW5xZnN3aGJlcmtvZXZ0bWZyLnN1cGFiYXNlLmNvL2F1dGgvdjEiLCJzdWIiOiJjN2ZjZDcwMi05YTZlLTRiN2MtYWJkMy05NTZiMjVhZjQwN2QiLCJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNzU4OTc3NTg5LCJpYXQiOjE3NTg5NzM5ODksImVtYWlsIjoicmlzZXVwQHBvcGNvZGUuY29tLmJyIiwicGhvbmUiOiIiLCJhcHBfbWV0YWRhdGEiOnsicHJvdmlkZXIiOiJlbWFpbCIsInByb3ZpZGVycyI6WyJlbWFpbCJdfSwidXNlcl9tZXRhZGF0YSI6eyJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiZnVsbF9uYW1lIjoiUmlzZVVwIFBvcGNvZGUifSwicm9sZSI6ImF1dGhlbnRpY2F0ZWQiLCJhYWwiOiJhYWwxIiwiYW1yIjpbeyJtZXRob2QiOiJwYXNzd29yZCIsInRpbWVzdGFtcCI6MTc1ODk3Mzk4OX1dLCJzZXNzaW9uX2lkIjoiNGI2NzY4YTEtMmE5Yi00NjhkLWJlYjItZjhhMDQ0NjU5MGFjIiwiaXNfYW5vbnltb3VzIjpmYWxzZX0.9lV7msK_taipCOrSxeRud2a8aEo8N6wR9Wc5xFjci2A`)
+     myHeaders.append("Prefer", "return=minimal")
     
-    const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
+    var requestOptions = { method: "DELETE", redirect: "follow", headers:myHeaders };
 
     try {
-      await fetch(
+      const result = await fetch(
-        `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
+        `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients/?id=eq.${id}`,
-        requestOptionsDelete
+        requestOptions
       );
-      setPacientes((prev) => prev.filter((p) => p.id !== id));
+      //setPacientes((prev) => prev.filter((p) => p.id !== id));
+      console.log(result)
     } catch (error) {
       console.log("Deu problema", error);
     } finally {
@@ -83,13 +97,20 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
 
   // Requisição inicial para buscar pacientes
   useEffect(() => {
-    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
+   var myHeaders = new Headers();
-      .then((response) => response.json())
+  myHeaders.append("apikey", API_KEY);
-      .then((result) => console.log(result["data"]))
+  myHeaders.append("Authorization", `Bearer eyJhbGciOiJIUzI1NiIsImtpZCI6ImJGVUlxQzNzazNjUms5RlMiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3l1YW5xZnN3aGJlcmtvZXZ0bWZyLnN1cGFiYXNlLmNvL2F1dGgvdjEiLCJzdWIiOiJjN2ZjZDcwMi05YTZlLTRiN2MtYWJkMy05NTZiMjVhZjQwN2QiLCJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNzU4OTc3NTg5LCJpYXQiOjE3NTg5NzM5ODksImVtYWlsIjoicmlzZXVwQHBvcGNvZGUuY29tLmJyIiwicGhvbmUiOiIiLCJhcHBfbWV0YWRhdGEiOnsicHJvdmlkZXIiOiJlbWFpbCIsInByb3ZpZGVycyI6WyJlbWFpbCJdfSwidXNlcl9tZXRhZGF0YSI6eyJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiZnVsbF9uYW1lIjoiUmlzZVVwIFBvcGNvZGUifSwicm9sZSI6ImF1dGhlbnRpY2F0ZWQiLCJhYWwiOiJhYWwxIiwiYW1yIjpbeyJtZXRob2QiOiJwYXNzd29yZCIsInRpbWVzdGFtcCI6MTc1ODk3Mzk4OX1dLCJzZXNzaW9uX2lkIjoiNGI2NzY4YTEtMmE5Yi00NjhkLWJlYjItZjhhMDQ0NjU5MGFjIiwiaXNfYW5vbnltb3VzIjpmYWxzZX0.9lV7msK_taipCOrSxeRud2a8aEo8N6wR9Wc5xFjci2A`);
-      .catch((error) =>
+  var requestOptions = {
-        console.log("Erro para encontrar pacientes no banco de dados", error)
+    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 +242,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,19 +259,21 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
                             </td>
                             <td>
                               <div className="d-flex gap-2">
-                                <button
+                                <Link to={`/pacientes/${paciente.id}`}>
-                                  className="btn btn-sm"
+                                  <button
-                                  style={{
+                                    className="btn btn-sm"
-                                    backgroundColor: "#E6F2FF",
+                                    style={{
-                                    color: "#004085",
+                                      backgroundColor: "#E6F2FF",
-                                  }}
+                                      color: "#004085",
-                                  onClick={() => {
+                                    }}
-                                    setCurrentPage("details-page-paciente");
+                                    onClick={() => {
-                                    setPatientID(paciente.id);
+                                      
-                                  }}
+                                      console.log(paciente.id);
-                                >
+                                    }}
-                                  <i className="bi bi-eye me-1"></i> Ver Detalhes
+                                  >
-                                </button>
+                                    <i className="bi bi-eye me-1"></i> Ver Detalhes
+                                  </button>
+                                </Link>
 
                                 <button
                                   className="btn btn-sm"
@@ -258,9 +281,9 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
                                     backgroundColor: "#FFF3CD",
                                     color: "#856404",
                                   }}
-                                  onClick={() => {
+                                  onClick={() => {console.log(paciente.id)
-                                    setCurrentPage("edit-page-paciente");
+                                    
-                                    setPatientID(paciente.id);
+                                    
                                   }}
                                 >
                                   <i className="bi bi-pencil me-1"></i> Editar