Endpoints conectados

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 });
     }
   };
 
@@ -156,35 +118,14 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
     if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento ) {
       setModalMsg('Por favor, preencha: Nome, CPF, Gênero, Data de Nascimento.');
       setShowModal(true);
-      return;
+      
     }
 
     onSave(
       {
-      ...formData,
+      ...formData, crm_uf:'SE',crm:'1234'
-      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,
-      }
       }
+      
     );
     setModalMsg('Médico salvo com sucesso!');
     setShowModal(true);
@@ -267,7 +208,7 @@ 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' }} />
+              <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>
@@ -275,11 +216,11 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
-              <input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }}  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' }}>
+              <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>
@@ -331,7 +272,7 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
             </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="speciality" value={formData.speciality} 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>

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/pages/DoctorCadastroManager.jsx

@@ -7,13 +7,10 @@ import API_KEY from '../components/utils/apiKeys';
 
 
 function DoctorCadastroManager( ) {
-  // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
+  const [DoctorDict, setDoctorDict] = useState({})
   
    const { getAuthorizationHeader, isAuthenticated } = useAuth();
   
-  var myHeaders = new Headers();
-  myHeaders.append("Content-Type", "application/json");
-
   // Estado do modal de sucesso
   const [showModal, setShowModal] = useState(false);
   const [modalMsg, setModalMsg] = useState('');
@@ -84,7 +81,8 @@ function DoctorCadastroManager( ) {
               <DoctorForm
                 onSave={handleSaveDoctor}
                 onCancel={console.log('hsh')}
-                PatientDict={{}}
+                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 } from "react-router-dom";
+import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
+import { useAuth } from "../components/utils/AuthProvider";
 
-const Details = ({ patientID, setCurrentPage }) => {
+const Details = ({setCurrentPage }) => {
-  const [paciente, setPaciente] = useState({});
+  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}`)
+    const authHeader = getAuthorizationHeader()
-      .then(res => res.json())
-      .then(data => setPaciente(data))
-      .catch(err => console.error("Erro ao buscar médico:", err));
-  }, [patientID]);
 
-  //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 (
     <>
@@ -29,8 +42,8 @@ const Details = ({ patientID, setCurrentPage }) => {
             <img src={avatarPlaceholder} alt="" />
           </div>
           <div className="media-body ms-3 font-extrabold">
-            <span>{paciente.nome || "Nome Completo"}</span>
+            <span>{doctor.nome || "Nome Completo"}</span>
-            <p>{paciente.cpf || "CPF"}</p>
+            <p>{doctor.cpf || "CPF"}</p>
           </div>
         </div>
         <button className="btn btn-light" onClick={() => setCurrentPage("edit-page-doctor")}>
@@ -46,68 +59,68 @@ 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>{doctor.full_name || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Nome social:</label>
-          <p>{paciente.nomeSocial || "-"}</p>
+          <p>{doctor.nomeSocial || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Data de nascimento:</label>
-          <p>{paciente.dataNascimento || "-"}</p>
+          <p>{doctor.birth_date || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Gênero:</label>
-          <p>{paciente.sexo || "-"}</p>
+          <p>{doctor.sexo || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">CPF:</label>
-          <p>{paciente.cpf || "-"}</p>
+          <p>{doctor.cpf || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">CRM:</label>
-          <p>{paciente.rg || "-"}</p>
+          <p>{doctor.rg || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Outro documento:</label>
-          <p>{paciente.documento || "-"}</p>
+          <p>{doctor.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.numeroDocumento || "-"}</p>
         </div>
 
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Etnia e Raça:</label>
-          <p>{paciente.etniaRaca || "-"}</p>
+          <p>{doctor.etniaRaca || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Nacionalidade:</label>
-          <p>{paciente.etniaRaca || "-"}</p>
+          <p>{doctor.etniaRaca || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Naturalidade:</label>
-          <p>{paciente.etniaRaca || "-"}</p>
+          <p>{doctor.etniaRaca || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Especialização:</label>
-          <p>{paciente.profissao || "-"}</p>
+          <p>{doctor.profissao || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Estado civil:</label>
-          <p>{paciente.estadoCivil || "-"}</p>
+          <p>{doctor.estadoCivil || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Nome do esposo(a):</label>
-          <p>{paciente.nomeConjuge || "-"}</p>
+          <p>{doctor.nomeConjuge || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Identificador de outro sistema:</label>
-          <p>{paciente.outroId || "-"}</p>
+          <p>{doctor.outroId || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Observações:</label>
-          <p>{paciente.observacoes || "-"}</p>
+          <p>{doctor.observacoes || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Anexos do Médico:</label>
@@ -123,31 +136,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.rua || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">Bairro:</label>
-          <p>{paciente.bairro || "-"}</p>
+          <p>{doctor.bairro || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">Cidade:</label>
-          <p>{paciente.cidade || "-"}</p>
+          <p>{doctor.cidade || "-"}</p>
         </div>
         <div className="col-md-2 mb-3">
           <label className="font-extrabold">Estado:</label>
-          <p>{paciente.estado || "-"}</p>
+          <p>{doctor.estado || "-"}</p>
         </div>
         <div className="col-md-4 mb-3">
           <label className="font-extrabold">Número:</label>
-          <p>{paciente.numero || "-"}</p>
+          <p>{doctor.numero || "-"}</p>
         </div>
         <div className="col-md-8 mb-3">
           <label className="font-extrabold">Complemento:</label>
-          <p>{paciente.complemento || "-"}</p>
+          <p>{doctor.complemento || "-"}</p>
         </div>
       </div>
       </div>
@@ -159,19 +172,19 @@ 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.telefone1 || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Telefone 2:</label>
-          <p>{paciente.telefone2 || "-"}</p>
+          <p>{doctor.telefone2 || "-"}</p>
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Celular:</label>
-          <p>{paciente.telefone3 || "-"}</p>
+          <p>{doctor.telefone3 || "-"}</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({})
+  const DoctorID = Parametros.id
-
-  var requestOptions = {
-   method: 'GET',
-   redirect: 'follow'
-};
 
 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,7 +1,7 @@
 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();
@@ -16,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(
+      const result = await fetch(
-        `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
+        `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${id}`,
-        requestOptionsDelete
+        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 {
@@ -132,7 +142,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>
@@ -151,6 +161,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                             <td>
                               <div className="d-flex gap-2">
                                 {/* Ver Detalhes */}
+                                <Link to={`/medicos/${medico.id}`}>
                                   <button
                                     className="btn btn-sm"
                                     style={{
@@ -158,15 +169,17 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                                       color: "#004085",
                                     }}
                                     onClick={() => {
-                                    setCurrentPage("details-page-paciente");
+                                    console.log('editar')
-                                    setPatientID(medico.id);
+                                      
                                     }}
                                   >
                                     <i className="bi bi-eye me-1"></i> Ver
                                     Detalhes
                                   </button>
+                                </Link>
 
                                 {/*  Editar */}
+                                <Link to={`/medicos/${medico.id}/edit`}>
                                     <button
                                       className="btn btn-sm"
                                       style={{
@@ -174,12 +187,13 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                                         color: "#856404",
                                       }}
                                       onClick={() => {
-                                    setCurrentPage("edit-page-paciente");
+                                        
-                                    setPatientID(medico.id);
+                                        console.log('Editar')
                                       }}
                                     >
                                       <i className="bi bi-pencil me-1"></i> Editar
                                     </button>
+                                </Link>
 
                                 
                                 <button