Erro 404 e a verfificação do cpf

src/App.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Sidebar from './components/Sidebar';
 //import Header from './components/Header';
-import Table from "./pages/Table"; 
+import TablePaciente from "./pages/TablePaciente"; 
 
 import Inicio from './pages/Inicio';
 import PatientCadastroManager from './pages/PatientCadastroManager';
@@ -34,7 +34,7 @@ function App() {
       case 'doctor-form-layout':
         return <DoctorCadastroManager />;
       case 'table':
-        return <Table setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
+        return <TablePaciente setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
       case 'doctor-table':
         return <DoctorTable setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
       case 'details-page-paciente':
@@ -42,7 +42,7 @@ function App() {
       case 'details-page-doctor':
         return <DoctorDetails patientID={patientID} setCurrentPage={setCurrentPage} />;
       case 'edit-page-paciente':
-        return <EditPage id={patientID} />;
+        return <EditPage id={patientID} setCurrentPage={setCurrentPage}/>;
       case 'edit-page-doctor':
         return <DoctorEditPage id={patientID} />;
       case 'laudo-manager':

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -1,12 +1,18 @@
-import React, { useState, useEffect } from "react";
+
 import InputMask from "react-input-mask";
-import "./style/styleagendamentos.css";
+import "./style/formagendamentos.css";
+import { useState, useEffect } from "react";
+
 
 const FormNovaConsulta = ({ onCancel, patientID }) => {
+  
   const [selectedFile, setSelectedFile] = useState(null);
   const [anexos, setAnexos] = useState([]);
   const [loadingAnexos, setLoadingAnexos] = useState(false);
-  useEffect(() => {
+  const [paciente, setPaciente] = useState({})
+  const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false })
+
+    useEffect(() => {
     if (!patientID) return;
 
     const fetchAnexos = async () => {
@@ -48,6 +54,102 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
     }
   }; 
 
+
+  const handleclickAcessibilidade = (id) => {
+    let resultado = acessibilidade[id]
+
+    if(resultado === false){ setAcessibilidade({...acessibilidade, [id]:true}); console.log('mudou')}
+
+    else if(resultado === true){ setAcessibilidade({...acessibilidade, [id]:false})}
+    console.log(id)
+  }
+
+  
+  const FormatCPF = (valor) => {
+    console.log(valor)
+
+    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+    BuscarPacienteExistentePeloCPF(valor)
+    
+    return digits
+      .replace(/(\d{3})(\d)/, '$1.$2')
+      .replace(/(\d{3})(\d)/, '$1.$2')
+      .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
+  }
+
+
+  const BuscarCPFnoBancodeDados = 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);
+  const result = await response.json();
+  return result
+
+  
+  }
+
+  const BuscarPacienteExistentePeloCPF = async (value) => {
+   
+   if(isNaN(value[13]) === false && value.length === 14)try {
+      const result = await BuscarCPFnoBancodeDados(value);
+      console.log("Resultado:", result);
+      
+      if (result.data.existe === true){
+
+      var myHeaders = new Headers();
+    myHeaders.append("Authorization", "Bearer <token>");
+
+    var requestOptions = {
+      method: 'GET',
+      headers: myHeaders,
+      redirect: 'follow'
+    };
+
+    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/", requestOptions)
+      .then(response => response.json())
+      .then(result => setPaciente(result.data))
+      .catch(error => console.log('error', error));
+    }
+      
+
+
+    } catch (error) {
+      console.log("error", error);
+    }
+    //BuscarCPFnoBancodeDados(value)
+  }
+
+  const handleChange = (e) => {
+
+    const {value, name} = e.target;
+
+    console.log(value, name)
+
+    if(name === 'email'){
+      setPaciente({...paciente, contato:{
+        ...paciente.contato,
+        email:value
+      }})
+
+    }else{
+    setPaciente({...paciente,[name]:value})
+    }
+  }
+
   const handleSubmit = (e) => {
     e.preventDefault();
     alert("Agendamento salvo!");
@@ -60,43 +162,63 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
       <form className="form-agendamento" onSubmit={handleSubmit}>
         <h2 className="section-title">Informações do paciente</h2>
 
-      <div id="informacoes-paciente-primeiralinha">
+      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
-          <label>Nome *</label>
+          <div className="campo-de-input">
-          <input type="text" name="nome" placeholder="Insira o nome do paciente" required />
+            <label>Nome *</label>
+            <input type="text" name="nome" value={paciente.nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
+          </div>
 
-          <label>CPF do paciente</label>
+          <div className="campo-de-input">
-          <InputMask mask="999.999.999-99" placeholder="000.000.000-00">
+            <label>CPF do paciente</label>
-            {(inputProps) => <input {...inputProps} type="text" name="cpf" />}
+            
-          </InputMask>
+               <input  type="text" name="cpf"  placeholder="000.000.000-00" onChange={(e) => e.target.value = FormatCPF(e.target.value)}  />
+           
+          </div>
 
-          <label>RG</label>
+          <div className="campo-de-input">
-          <input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
+            <label>RG</label>
+            <input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
+          </div>
       </div>
 
-        <label>Data de nascimento *</label>
+      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-dois">
-        <input type="date" name="data_nascimento" required />
+          <div className="campo-de-input">
+            <label>Data de nascimento *</label>
+            <input type="date" name="data_nascimento" value={paciente.data_nascimento} required onChange={handleChange}/>
+          </div>
 
-        <label>Telefone</label>
+          <div className="campo-de-input">
-        <InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
+            <label>Telefone</label>
-          {(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
+            <InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
-        </InputMask>
+              {(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
+            </InputMask>
+          </div>
 
-        <label>E-mail</label>
+          <div className="campo-de-input">
-        <input type="email" name="email" placeholder="Email" />
+            <label>E-mail</label>
-
+            <input type="email" name="email" placeholder="Email" value={paciente.contato?.email} onChange={handleChange} />
-        <label>Convênio</label>
+          </div>
-        <select name="convenio">
+      </div>
-          <option value="particular">Particular</option>
-          <option value="publico">Público</option>
-        </select>
-
-        <label>Matrícula</label>
-        <input type="text" name="matricula" placeholder="000000000" />
 
+      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
+       
+        <div className="campo-de-input">
+          <label>Convênio</label>
+          <select name="convenio">
+            <option value="particular">Particular</option>
+            <option value="publico">Público</option>
+          </select>
+        </div>
+        <div className="campo-de-input">
+          <label>Matrícula</label>
+          <input type="text" name="matricula" placeholder="000000000" />
+        </div>
+    
+        <div className="campo-de-input">
         <label>Validade</label>
-        <InputMask mask="99/99/9999" placeholder="00/00/0000">
+          <input type="date" name="validade" />
-          {(inputProps) => <input {...inputProps} type="text" name="validade" />}
+        </div>
-        </InputMask>
+      </div>
 
         <h3 className="section-subtitle">Informações adicionais</h3>
         <button type="button" className="btn-secondary">Documentos e anexos</button>
@@ -124,59 +246,107 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
           )}
         </div>
         <h2 className="section-title">Informações do atendimento</h2>
+       
+      
+          <div className="icons-container">
+        
+            <div  className={`icons-div ${ acessibilidade.cadeirante === true ? 'acessibilidade-ativado' : ''} `} id='cadeirante' onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
+              
+              <span className="material-symbols-outlined icon">accessible</span>
+            </div>
 
-        <label>Nome do profissional *</label>
+            <div className={`icons-div ${acessibilidade.idoso === true ? 'acessibilidade-ativado' : ''}`} id="idoso" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
-        <input type="text" name="profissional" required />
+              <span className="material-symbols-outlined icon">elderly</span> 
+            </div>
+          
+            <div className={`icons-div ${acessibilidade.gravida === true ? 'acessibilidade-ativado' : ''}`} id="gravida" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
+              <span className="material-symbols-outlined icon">pregnant_woman</span> 
+            </div>
+            
+            <div className={`icons-div ${acessibilidade.bebe === true ? 'acessibilidade-ativado' : ''}`} id="bebe" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-baby-icon lucide-baby"><path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5"/><path d="M15 12h.01"/><path d="M19.38 6.813A9 9 0 0 1 20.8 10.2a2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1"/><path d="M9 12h.01"/></svg>
 
-        <label>Tipo de atendimento *</label>
+            </div>
-        <input type="text" name="tipoAtendimento" required />
 
-        <label>Unidade *</label>
+            <div className={`icons-div ${acessibilidade.autista === true ? 'acessibilidade-ativado' : ''}`} id="autista" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
-        <select name="unidade">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
-          <option value="centro">Núcleo de Especialidades Integradas</option>
+            </div>
-          <option value="leste">Unidade Leste</option>
+        
-        </select>
+          </div>
 
-        <label>Data *</label>
+        <div className="campo-informacoes-atendimento">
-        <input type="date" name="dataAtendimento" required />
+            
+            <div className="campo-de-input">
+              <label>Nome do profissional *</label>
+              <input type="text" name="profissional" required />
+            </div>
+          
 
-        <label>Início *</label>
+          <div className="campo-de-input">
-        <input type="time" name="inicio" required />
+            <label>Tipo de atendimento *</label>
-
+            <input type="text" name="tipoAtendimento" required />
-        <label>Término *</label>
+          </div>
-        <input type="time" name="termino" required />
-
-        <label>Profissional solicitante</label>
-        <select name="solicitante">
-          <option value="">Selecione o solicitante</option>
-          <option value="secretaria">Secretária</option>
-          <option value="medico">Médico</option>
-        </select>
-
-        <label>Observações</label>
-        <textarea name="observacoes"></textarea>
-
-        <label>
-          <input type="checkbox" name="reembolso" /> Pagamento via Reembolso
-        </label>
-
-        <label>
-          <input type="checkbox" name="imprimirEtiqueta" /> Imprimir na Etiqueta / Pulseira
-        </label>
-
-        <h3 className="section-subtitle">Acessibilidade</h3>
-        <div className="btn-group">
-          <button type="button"></button>
-          <button type="button"></button>
-          <button type="button"></button>
-          <button type="button"></button>
         </div>
 
-        <div className="form-actions">
+        <section id="informacoes-atendimento-segunda-linha">
-          <button type="submit" className="btn-primary">Salvar agendamento</button>
+          <section id="informacoes-atendimento-segunda-linha-esquerda">
+        
+          <div className="campo-informacoes-atendimento">
+            <div className='campo-de-input'>
+              <label>Unidade *</label>
+              <select name="unidade">
+                <option value="" disabled invisible selected>Selecione a unidade</option>
+                <option value="centro">Núcleo de Especialidades Integradas</option>
+                <option value="leste">Unidade Leste</option>
+              </select>
+            </div>
+          
+
+          
+            <div className="campo-de-input">
+              <label>Data *</label>
+              <input type="date" name="dataAtendimento" required />
+            </div>
+          </div>
+
+          <div className="campo-informacoes-atendimento">
+            <div className="campo-de-input">
+              <label>Início *</label>
+              <input type="time" name="inicio" required />
+            </div>
+
+            <div className="campo-de-input">
+              <label>Término *</label>
+              <input type="time" name="termino" required />
+            </div>
+          
+            <div className="campo-de-input">
+              <label>Profissional solicitante</label>
+              <select name="solicitante">
+                <option value="" disabled invisible selected>Selecione o solicitante</option>
+                <option value="secretaria">Secretária</option>
+                <option value="medico">Médico</option>
+              </select>
+            </div>
+          </div>
+      </section>
+
+      <section className="informacoes-atendimento-segunda-linha-direita"> 
+     
+
+        <div className="campo-de-input">
+          <label>Observações</label>
+          <textarea name="observacoes" rows="4" cols="1"></textarea>
+        </div>
+      </section>
+    </section>
+
+      <div className="form-actions">
+        <button type="submit" className="btn-primary">Salvar agendamento</button>
           <button type="button" className="btn-cancel" onClick={onCancel}>Cancelar</button>
         </div>
       </form>
+      
     </div>
   );
 };

src/components/AgendarConsulta/TabelaAgendamentoMes.jsx

@@ -47,7 +47,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                   ))}
                 </div> 
                 {dias.segunda.length > 3 ? 
-                  <div><p>+ {dias.segunda.length - 3}</p></div> 
+                  <div><p className='cards-que-faltam'>+ {dias.segunda.length - 3}</p></div> 
                 : null}
               </div>
             </td>
@@ -65,7 +65,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                   ))}
                 </div> 
                 {dias.terca.length > 3 ? 
-                  <div><p>+ {dias.terca.length - 3}</p></div> 
+                  <div><p className='cards-que-faltam'>+ {dias.terca.length - 3}</p></div> 
                 : null}
               </div>
             </td>
@@ -83,7 +83,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                   ))}
                 </div> 
                 {dias.quarta.length > 3 ? 
-                  <div><p>+ {dias.quarta.length - 3}</p></div> 
+                  <div><p className='cards-que-faltam'>+ {dias.quarta.length - 3}</p></div> 
                 : null}
               </div>
             </td>
@@ -101,7 +101,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                   ))}
                 </div> 
                 {dias.quinta.length > 3 ? 
-                  <div><p>+ {dias.quinta.length - 3}</p></div> 
+                  <div><p className='cards-que-faltam'>+ {dias.quinta.length - 3}</p></div> 
                 : null}
               </div>
             </td>
@@ -119,7 +119,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                   ))}
                 </div> 
                 {dias.sexta.length > 3 ? 
-                  <div><p>+ {dias.sexta.length - 3}</p></div> 
+                  <div><p className='cards-que-faltam'>+ {dias.sexta.length - 3}</p></div> 
                 : null}
               </div>
             </td>

src/components/AgendarConsulta/style/formagendamentos.css

@@ -0,0 +1,210 @@
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
+
+.icons-container {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-bottom: -7px;
+}
+
+.acessibilidade-ativado{
+  background-color: #1e3a8a;
+  border: none;
+}
+.acessibilidade-ativado svg, .acessibilidade-ativado .icon{
+  color: white;
+}
+
+
+.icons-div{
+  border: 1px solid #607080;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.icons-div:hover{
+  background-color: #1e3a8a; 
+  }
+ .icons-div:hover svg, .icons-div:hover .icon{
+  color:white;
+ }
+
+svg{
+  color:black;
+ 
+}
+.icon {
+  font-family: 'Material Symbols Outlined';
+  font-size: 20px;
+  color:black  
+  
+  
+}
+
+.form-container {
+  /*max-width: 800px;*/
+  margin: 20px auto;
+  padding: 25px;
+  background: #f5f8ff;
+  border-radius: 12px;
+  font-family: Arial, sans-serif;
+}
+
+.form-title {
+  font-size: 26px;
+  font-weight: bold;
+  color: #1e3a8a;
+  margin-bottom: 20px;
+}
+
+.form-agendamento label {
+  display: block;
+  margin-top: 12px;
+  font-weight: bold;
+  color: #333;
+}
+
+.form-agendamento input,
+.form-agendamento select,
+.form-agendamento textarea {
+  width: 100%;
+  padding: 8px;
+  margin-top: 6px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.section-title {
+  font-size: 20px;
+  margin-top: 25px;
+  color: #1e40af;
+}
+
+.section-subtitle {
+  font-size: 16px;
+  margin-top: 20px;
+  color: #374151;
+}
+
+.btn-group button {
+  margin-right: 8px;
+  padding: 8px 12px;
+  border: 1px solid #1e3a8a;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.btn-group button:hover {
+  background: #e0e7ff;
+}
+
+.form-actions {
+  margin-top: 25px;
+  display: flex;
+  gap: 12px;
+}
+
+.btn-primary {
+  background: #1e3a8a;
+  color: white;
+  border: none;
+  padding: 10px 18px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  background: #172554;
+}
+
+.btn-cancel {
+  background: #e5e7eb;
+  border: none;
+  padding: 10px 18px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn-cancel:hover {
+  background: #d1d5db;
+}
+
+.btn-secondary {
+  margin: 10px 0;
+  background: #f3f4f6;
+  padding: 8px 14px;
+  border: 1px solid #9ca3af;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn-secondary:hover {
+  background: #e5e7eb;
+}
+
+
+.cardconsulta-infosecundaria{
+  font-size: small;
+}
+
+.campos-informacoes-paciente,.campo-informacoes-atendimento{
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+}
+
+.campo-de-input{
+  display: flex;
+  flex-direction: column;
+  
+}
+
+
+#informacoes-atendimento-segunda-linha{
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  gap: 4rem;
+}
+
+textarea{
+  width: 30px;
+  resize: both;
+}
+
+.campos-informacoes-paciente,
+.campo-informacoes-atendimento {
+  display: flex;
+  gap: 16px;              /* espaço entre campos */
+}
+
+.campo-de-input {
+  flex: 1;                /* todos os filhos ocupam mesmo espaço */
+  display: flex;
+  flex-direction: column; /* mantém label em cima do input */
+}
+
+#informacoes-atendimento-segunda-linha-esquerda select[name="unidade"]{
+  width: 300px;
+}
+
+input[type="time"]{
+  width: 150px;
+}
+
+select[name=solicitante]{
+  width: 190px;
+}
+
+.campo-de-input{
+  width:120%
+}

src/components/AgendarConsulta/style/styleTabelas/tabeladia.css

@@ -51,8 +51,9 @@ font-weight: 600;
   padding: 8px;
 }
 
-/* Ajuste para a classe .diadia, se for usada */
+/* Ajuste para a classe calendario, se for usada */
-.diadia {
+/*
+.calendario {
   margin-top: 20px;
   border-collapse: collapse;
   width: 100%;
@@ -61,7 +62,7 @@ font-weight: 600;
   box-shadow: 0 4px 12px rgb(255, 255, 255);
   border: 10px solid #ffffffc5;
   background-color: rgb(253, 253, 253);
-}
+}*/
 
 
 .mostrar-horario td, .mostrar-horario th {

src/components/AgendarConsulta/style/styleTabelas/tabelames.css

@@ -147,4 +147,10 @@
   padding: 4px 8px;
   margin-bottom: 5px;
   border-radius: 4px;
+}
+
+.cards-que-faltam{
+  color: #005a9e;
+  font-weight: bold;
+  font-size: larger;
 }

src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css

@@ -56,17 +56,7 @@
   padding: 12px;
 }
 
-/* Ajuste para a classe .diadia, se for usada */
+/* Ajuste para a classe .calendario, se for usada */
-.diadia {
-  margin-top: 20px;
-  border-collapse: collapse;
-  width: 100%;
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: 0 4px 12px rgb(255, 255, 255);
-  border: 10px solid #ffffffc5;
-  background-color: rgb(253, 253, 253);
-}
 
 .tabelasemanal tr:nth-child(even) {
   background-color: #e7e7e7a6 !important;
@@ -80,3 +70,7 @@
 .tabelasemanal tr:hover {
   background-color: #f1f1f1 !important;
 }
+
+tr{
+  width: 1000px;
+}

src/components/AgendarConsulta/style/styleagendamentos.css

@@ -1,108 +0,0 @@
-.form-container {
-  max-width: 800px;
-  margin: 20px auto;
-  padding: 25px;
-  background: #f5f8ff;
-  border-radius: 12px;
-  font-family: Arial, sans-serif;
-}
-
-.form-title {
-  font-size: 26px;
-  font-weight: bold;
-  color: #1e3a8a;
-  margin-bottom: 20px;
-}
-
-.form-agendamento label {
-  display: block;
-  margin-top: 12px;
-  font-weight: bold;
-  color: #333;
-}
-
-.form-agendamento input,
-.form-agendamento select,
-.form-agendamento textarea {
-  width: 100%;
-  padding: 8px;
-  margin-top: 6px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  font-size: 14px;
-}
-
-.section-title {
-  font-size: 20px;
-  margin-top: 25px;
-  color: #1e40af;
-}
-
-.section-subtitle {
-  font-size: 16px;
-  margin-top: 20px;
-  color: #374151;
-}
-
-.btn-group button {
-  margin-right: 8px;
-  padding: 8px 12px;
-  border: 1px solid #1e3a8a;
-  border-radius: 6px;
-  background: #fff;
-  cursor: pointer;
-}
-
-.btn-group button:hover {
-  background: #e0e7ff;
-}
-
-.form-actions {
-  margin-top: 25px;
-  display: flex;
-  gap: 12px;
-}
-
-.btn-primary {
-  background: #1e3a8a;
-  color: white;
-  border: none;
-  padding: 10px 18px;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.btn-primary:hover {
-  background: #172554;
-}
-
-.btn-cancel {
-  background: #e5e7eb;
-  border: none;
-  padding: 10px 18px;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.btn-cancel:hover {
-  background: #d1d5db;
-}
-
-.btn-secondary {
-  margin: 10px 0;
-  background: #f3f4f6;
-  padding: 8px 14px;
-  border: 1px solid #9ca3af;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.btn-secondary:hover {
-  background: #e5e7eb;
-}
-
-
-.cardconsulta-infosecundaria{
-  font-size: small;
-}
-

src/components/ProfileCard.js

@@ -1,4 +1,4 @@
-import React from 'react';
+/*import React from 'react';
 
 function ProfileCard() {
   return (
@@ -18,4 +18,4 @@ function ProfileCard() {
   );
 }
 
-export default ProfileCard;
+export default ProfileCard;*/

src/components/doctors/DoctorForm.jsx

@@ -124,6 +124,9 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
   };
 
   // Função para buscar endereço pelo CEP
+  const [showModal, setShowModal] = useState(false);
+  const [modalMsg, setModalMsg] = useState('');
+
   const handleCepBlur = async () => {
     const cep = formData.cep.replace(/\D/g, '');
     if (cep.length === 8) {
@@ -139,17 +142,20 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
             estado: data.uf || ''
           }));
         } else {
-          alert('CEP não encontrado!');
+          setModalMsg('CEP não encontrado!');
+          setShowModal(true);
         }
       } catch (error) {
-        alert('Erro ao buscar o CEP.');
+        setModalMsg('Erro ao buscar o CEP.');
+        setShowModal(true);
       }
     }
   };
 
   const handleSubmit = () => {
-    if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento || !formData.email) {
+    if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento ) {
-      alert('Por favor, preencha: Nome ,CPF, Gênero, Data de Nascimento e Email.');
+      setModalMsg('Por favor, preencha: Nome, CPF, Gênero, Data de Nascimento.');
+      setShowModal(true);
       return;
     }
 
@@ -180,9 +186,31 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
       }
       }
     );
+    setModalMsg('Médico salvo com sucesso!');
+    setShowModal(true);
   };
 
   return (
+    <>
+      {/* Modal de feedback */}
+      {showModal && (
+        <div className="modal fade show" style={{ display: 'block' }} tabIndex="-1">
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title">Atenção</h5>
+                <button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
+              </div>
+              <div className="modal-body">
+                <p style={{ color: '#23336f', fontSize: '1.3rem', fontWeight: 500 }}>{modalMsg}</p>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       <div className="card p-3 shadow-sm">
       <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
 
@@ -247,7 +275,7 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
-              <input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }}  min="1900-01-01" max="2025-09-24" />
             </div>
             <div className="col-md-6 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
@@ -406,11 +434,11 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
         <div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
           <div className="row mt-3">
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Email: *</label>
+              <label style={{ fontSize: '1.1rem' }}>Email: </label>
               <input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
+              <label style={{ fontSize: '1.1rem' }}>Telefone: </label>
               <input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
             </div>
             <div className="col-md-6 mb-3">
@@ -434,137 +462,10 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
           Cancelar
         </button>
       </div>
+
     </div>
-  //   <div className="card p-3">
+    </>
-  //     <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
-
-  //     {/* ------------------ DADOS PESSOAIS ------------------ */}
-  //     <h5 className="mb-3">Dados Pessoais</h5>
-  //     <div className="row">
-  //       <div className="col-md-6 mb-3">
-  //         <label>Nome: *</label>
-  //         <input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Nome social:</label>
-  //         <input type="text" className="form-control" name="nomeSocial" value={formData.nomeSocial} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Data de nascimento:</label>
-  //         <input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Gênero: *</label>
-  //         <select className="form-control" name="genero" value={formData.genero} onChange={handleChange}>
-  //           <option value="">Selecione</option>
-  //           <option value="Masculino">Masculino</option>
-  //           <option value="Feminino">Feminino</option>
-  //           <option value="Outro">Outro</option>
-  //         </select>
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>CPF: *</label>
-  //         <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Especialização:</label>
-  //         <select
-  //           className="form-control"
-  //           name="profissao"
-  //           value={formData.profissao}
-  //           onChange={handleChange}
-  //         >
-  //           <option value="">Selecione uma especialização</option>
-  //           <option value="Cardiologia">Clínica médica (clínico geral)</option>
-  //           <option value="Dermatologia">Pediatria</option>
-  //           <option value="Ginecologia">Ginecologia e obstetrícia</option>
-  //           <option value="Pediatria">Cardiologia</option>
-  //           <option value="Ortopedia">Ortopedia e traumatologia</option>
-  //           <option value="Oftalmologia">Oftalmologia</option>
-  //           <option value="Neurologia">Otorrinolaringologia</option>
-  //           <option value="Psiquiatria">Dermatologia</option>
-  //           <option value="Endocrinologia">Neurologia</option>
-  //           <option value="Oncologia">Psiquiatria</option>
-  //           <option value="Oncologia">Endocrinologia</option>
-  //           <option value="Oncologia">Gastroenterologia</option>
-  //           <option value="Oncologia">Urologia</option>    
-  //         </select>
-  //       </div>
-  //     </div>
-
-  //     {/* ------------------ ENDEREÇO ------------------ */}
-  //     <h5>Endereço</h5>
-  //     <div className="row">
-  //       <div className="col-md-4 mb-3">
-  //         <label>CEP:</label>
-  //         <input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} />
-  //       </div>
-  //       <div className="col-md-8 mb-3">
-  //         <label>Rua:</label>
-  //         <input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Bairro:</label>
-  //         <input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-4 mb-3">
-  //         <label>Cidade:</label>
-  //         <input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-2 mb-3">
-  //         <label>Estado:</label>
-  //         <input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-4 mb-3">
-  //         <label>Número:</label>
-  //         <input type="text" className="form-control" name="numero" value={formData.numero} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-8 mb-3">
-  //         <label>Complemento:</label>
-  //         <input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} />
-  //       </div>
-  //     </div>
-
-  //     {/* ------------------ CONTATO ------------------ */}
-  //     <h5>Contato</h5>
-  //     <div className="row">
-  //       <div className="col-md-6 mb-3">
-  //         <label>E-mail: *</label>
-  //         <input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Telefone: *</label>
-  //         <input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Telefone 2:</label>
-  //         <input type="text" className="form-control" name="telefone2" value={formData.telefone2} onChange={handleChange} />
-  //       </div>
-  //       <div className="col-md-6 mb-3">
-  //         <label>Telefone 3:</label>
-  //         <input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} />
-  //       </div>
-  //     </div>
-
-  //     {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
-  //     <h5>Informações Adicionais</h5>
-  //     <div className="mb-3">
-  //       <label>Observações:</label>
-  //       <textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange}></textarea>
-  //     </div>
-
-  //     {/* Botões */}
-  //     <div className="mt-3">
-  //       <button className="btn btn-success me-2" onClick={handleSubmit}>
-  //         Salvar Paciente
-  //       </button>
-  //       <button className="btn btn-light" onClick={onCancel}>
-  //         Cancelar
-  //       </button>
-  //     </div>
-  //   </div>
   );
 }
 
-
 export default DoctorForm;

src/components/doctors/DoctorList.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-// Este componente recebe uma função 'onAddDoctor' para avisar que o botão foi clicado
-function DoctorList({ onAddPatient }) {
-  return (
-    <div className="card">
-      <div className="card-header">
-        <h4 className="card-title">Médicos</h4>
-      </div>
-      <div className="card-body">
-        <p>Gerencie os médicos cadastrados no sistema.</p>
-        <button className="btn btn-primary" onClick={onAddPatient}>
-          <i className="bi bi-plus-circle"></i> Adicionar Médico
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default DoctorList;

src/components/patients/PatientForm.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
 function PatientForm({ onSave, onCancel, formData, setFormData }) {
+  // Estado para controlar a exibição do modal e os dados do paciente existente
   const [showModal, setShowModal] = useState(false);
   const [showModal404, setShowModal404] = useState(false);
   const [pacienteExistente, setPacienteExistente] = useState(null);
@@ -41,7 +42,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
     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>");
@@ -106,7 +107,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
 
   // Estado para controlar quais seções estão colapsadas
   const [collapsedSections, setCollapsedSections] = useState({
-    dadosPessoais: true, 
+    dadosPessoais: true, // Alterado para true para a seção ficar aberta por padrão
     infoMedicas: false,
     infoConvenio: false,
     endereco: false,
@@ -426,7 +427,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
             <div className="col-md-12 mb-3">
               <label style={{ fontSize: '1.1rem' }}>Anexos do Paciente:</label>
               <div>
-                 <label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem', background: '#9ca3af' }}>Escolher arquivo</label>
+                <label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem' }}>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>
@@ -664,20 +665,20 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
         </div>
       )}
 
-      {/*  Erro 404 */}
+      {/* Erro 404 */}
       {showModal404 && (
         <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
           <div className="modal-dialog">
             <div className="modal-content">
               <div className="modal-header bg-danger text-white">
-                <h5 className="modal-title">Erro de Validação</h5>
+                <h5 className="modal-title">Erro de validação</h5>
                 <button type="button" className="btn-close btn-close-white" onClick={() => setShowModal404(false)}></button>
               </div>
               <div className="modal-body">
-                <p style={{ fontSize: '1.4rem' }}>(Erro 404).Por favor,tente novamente mais tarde.</p>
+                <p style={{ fontSize: '1.4rem' }}>(Erro 404).Por favor,tente novamente mais tarde</p>
-               </div>
+              </div>
               <div className="modal-footer">
-                <button type="button" className="btn btn-primary" onClick={() => setShowModal404(false)}>
+                <button type="button" className="btn btn-secondary" onClick={() => setShowModal404(false)}>
                   Fechar
                 </button>
               </div>

src/components/patients/PatientList.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-// Este componente recebe uma função 'onAddPatient' para avisar que o botão foi clicado
-function PatientList({ onAddPatient }) {
-  return (
-    <div className="card">
-      <div className="card-header">
-        <h4 className="card-title">Pacientes</h4>
-      </div>
-      <div className="card-body">
-        <p>Gerencie os pacientes cadastrados no sistema.</p>
-        <button className="btn btn-primary" onClick={onAddPatient}>
-          <i className="bi bi-plus-circle"></i> Adicionar Paciente
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default PatientList;

src/pages/Agendamento.jsx

@@ -10,6 +10,11 @@ import "./style/Agendamento.css";
 
 const Agendamento = () => {
 
+  const [FiladeEspera, setFiladeEspera] = useState(false)
+  const [tabela, setTabela] = useState('diario')
+  const [PageNovaConsulta, setPageConsulta] = useState(false)
+
+
   
     const ListarDiasdoMes = (ano, mes) => {
       let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
@@ -54,8 +59,6 @@ const Agendamento = () => {
       return ListaDiasDatas
       }
 
-  const [tabela, setTabela] = useState('diario')
-  const [PageNovaConsulta, setPageConsulta] = useState(false)
 
   const handleClickAgendamento = (agendamento) => {
   
@@ -76,6 +79,7 @@ const Agendamento = () => {
   <div>
     <h1>Agendar nova consulta</h1>
 
+
   {!PageNovaConsulta? (
     
     <div className='atendimento-eprocura'>
@@ -106,27 +110,41 @@ const Agendamento = () => {
         </select>
 
         <input type="text" placeholder='Selecionar profissional' />
-
       </div>
 
-    <div className='diadia'>
+    <div className='container-btns-agenda-fila_esepera'>
-      <div>
+      <button className={`btn-agenda ${ FiladeEspera === false ? "opc-agenda-ativo": "" }`} onClick={ () => setFiladeEspera(false)}>Agenda</button>
-        <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
+      <button className={`btn-fila-espera ${ FiladeEspera === true ? "opc-filaespera-ativo": "" }`} onClick={ () => setFiladeEspera(true)}>Fila de espera</button>
-        
+    </div>
-        onClick={() => setTabela("diario")}>
-          <i className="fa-solid fa-calendar-day"></i>
-          Dia
-        </button>
-        <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
-          <i className="fa-solid fa-calendar-day"></i>
-          Semana
-        </button>
-        <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
-          <i className="fa-solid fa-calendar-day"></i>
-          Mês
-        </button>
 
-        <div className='legenda-tabela'>
+    <section className='calendario-ou-filaespera'>
+    {FiladeEspera ===false ? 
+ 
+    <div className='calendario'>
+      
+      
+      
+      <div>
+        <section className='btns-e-legenda-container'>
+       
+        <div>
+          <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
+          
+          onClick={() => setTabela("diario")}>
+            <i className="fa-solid fa-calendar-day"></i>
+            Dia
+          </button>
+          <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
+            <i className="fa-solid fa-calendar-day"></i>
+            Semana
+          </button>
+          <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
+            <i className="fa-solid fa-calendar-day"></i>
+            Mês
+          </button>
+        </div>
+
+         <div className='legenda-tabela'>
           <div className='legenda-item-realizado'>
      
             <span>Realizado</span>
@@ -142,6 +160,12 @@ const Agendamento = () => {
             <span>Cancelado</span>
           </div>
         </div>
+         
+        </section>
+
+       
+      
+
 
         {tabela === "diario" && (
           <TabelaAgendamentoDia
@@ -162,7 +186,15 @@ const Agendamento = () => {
         )}
 
       </div>
+       </div>: 
+       
+       <div> 
+        <div className='container-fila-espera'></div>
+
        </div>
+       
+       }
+    </section>
     </div>
   ) : (
 

src/pages/DoctorCadastroManager.jsx

@@ -1,17 +1,21 @@
 import React, { useState } from 'react';
 
 // Importamos os dois novos componentes que criamos
-import DoctorList from '../components/doctors/DoctorList';
+
 import DoctorForm from '../components/doctors/DoctorForm';
 
 function DoctorCadastroManager( ) {
   // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
-  const [view, setView] = useState('form');
+ 
 
   
   var myHeaders = new Headers();
   myHeaders.append("Content-Type", "application/json");
 
+  // Estado do modal de sucesso
+  const [showModal, setShowModal] = useState(false);
+  const [modalMsg, setModalMsg] = useState('');
+
   // Função que será chamada para "salvar" o paciente
   const handleSavePatient = (patientData) => {
     console.log('Salvando médico:', patientData);
@@ -23,42 +27,52 @@ function DoctorCadastroManager( ) {
       header: myHeaders,
       body:raw,
       redirect:'follow'
-
     }
 
+    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions)
+      .then(response => response.text())
+      .then(result => console.log(result))
+      .catch(error => console.log('error', error));
 
-  fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions)
+    setModalMsg(`Médico "${patientData.nome}" salvo com sucesso!`);
-    .then(response => response.text())
+    setShowModal(true);
-    .then(result => console.log(result))
+   
-    .catch(error => console.log('error', error));
-      
-    alert(`Médico "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend
-    // Após salvar, voltamos para a tela de lista
-    setView('list');
   };
 
   return (
     <>
+      {/* Modal de feedback */}
+      {showModal && (
+        <div className="modal fade show" style={{ display: 'block' }} tabIndex="-1">
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title">Sucesso</h5>
+                <button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
+              </div>
+              <div className="modal-body">
+                <p>{modalMsg}</p>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       <div className="page-heading">
         <h3>Cadastro de Médicos</h3>
       </div>
       <div className="page-content">
         <section className="row">
           <div className="col-12">
-            {/* Aqui está a lógica principal: */}
+           
-            {/* Se a view for 'list', mostramos a lista com o botão. */}
-            {/* Se for 'form', mostramos o formulário de cadastro. */}
-
-            {view === 'list' ? (
-              <DoctorList onAddPatient={() => setView('form')} />
-            ) : (
               <DoctorForm
                 onSave={handleSavePatient}
-                onCancel={() => setView('list')}
+                onCancel={console.log('hsh')}
                 PatientDict={{}}
-               
               />
-            )}
+            
           </div>
         </section>
       </div>

src/pages/DoctorDetails.jsx

@@ -111,7 +111,7 @@ const Details = ({ patientID, setCurrentPage }) => {
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Anexos do Médico:</label>
-          <p>{paciente.anexos || "-"}</p>
+          <p>{ "-"}</p>
         </div>
       </div>
       </div>

src/pages/DoctorTable.jsx

@@ -5,19 +5,25 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
   const [search, setSearch] = useState("");
   const [filtroAniversariante, setFiltroAniversariante] = useState(false);
 
+  //  estados do modal
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedDoctorId, setSelectedDoctorId] = useState(null);
+
   // Função para excluir médicos
   const deleteDoctor = async (id) => {
     const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
 
-    if (!window.confirm("Tem certeza que deseja excluir este médico?")) return;
+    try {
-
+      await fetch(
-    await fetch(
+        `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
-      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
+        requestOptionsDelete
-      requestOptionsDelete
+      );
-    )
+      setMedicos((prev) => prev.filter((m) => m.id !== id));
-      .then((response) => response.text())
+    } catch (error) {
-      .then((mensage) => console.log(mensage))
+      console.log("Deu problema", error);
-      .catch((error) => console.log("Deu problema", error));
+    } finally {
+      setShowDeleteModal(false);
+    }
   };
 
   // Função para verificar se hoje é aniversário
@@ -60,7 +66,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
         <section className="row">
           <div className="col-12">
             <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
@@ -72,7 +77,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
               </div>
 
               <div className="card-body">
-
                 <div className="d-flex gap-2 mb-3">
                   <input
                     type="text"
@@ -95,7 +99,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                   </button>
                 </div>
 
-
                 <div className="table-responsive">
                   <table className="table table-striped table-hover">
                     <thead>
@@ -105,7 +108,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                         <th>Email</th>
                         <th>Telefone</th>
                         <th></th>
-                        <th></th>
+                        <th>Ações</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -130,7 +133,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
 
                             <td>
                               <div className="d-flex gap-2">
-
+                                {/* Ver Detalhes */}
                                 <button
                                   className="btn btn-sm"
                                   style={{
@@ -146,6 +149,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                                   Detalhes
                                 </button>
 
+                                {/*  Editar */}
                                 <button
                                   className="btn btn-sm"
                                   style={{
@@ -160,13 +164,17 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                                   <i className="bi bi-pencil me-1"></i> Editar
                                 </button>
 
+                                
                                 <button
                                   className="btn btn-sm"
                                   style={{
                                     backgroundColor: "#F8D7DA",
                                     color: "#721C24",
                                   }}
-                                  onClick={() => deleteDoctor(medico.id)}
+                                  onClick={() => {
+                                    setSelectedDoctorId(medico.id);
+                                    setShowDeleteModal(true);
+                                  }}
                                 >
                                   <i className="bi bi-trash me-1"></i> Excluir
                                 </button>
@@ -189,6 +197,55 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
           </div>
         </section>
       </div>
+
+      {/*  Modal de confirmação de exclusão */}
+      {showDeleteModal && (
+        <div
+          className="modal fade show"
+          style={{
+            display: "block",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+          }}
+          tabIndex="-1"
+          onClick={(e) =>
+            e.target.classList.contains("modal") && setShowDeleteModal(false)
+          }
+        >
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header bg-danger bg-opacity-25">
+                <h5 className="modal-title text-danger"> Confirmação de Exclusão</h5>
+                <button
+                  type="button"
+                  className="btn-close"
+                  onClick={() => setShowDeleteModal(false)}
+                ></button>
+              </div>
+              <div className="modal-body">
+                <p className="mb-0 fs-5">
+                  Tem certeza que deseja excluir este médico?
+                </p>
+              </div>
+              <div className="modal-footer">
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={() => setShowDeleteModal(false)}
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-danger"
+                  onClick={() => deleteDoctor(selectedDoctorId)}
+                >
+                  <i className="bi bi-trash me-1"></i> Excluir
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 }

src/pages/EditPage.jsx

@@ -4,7 +4,7 @@ import PatientForm from '../components/patients/PatientForm'
 
 import {useEffect, useState} from 'react'
 
-const EditPage = ( {id}) => {
+const EditPage = ( {id, setCurrentPage}) => {
 
   const [PatientToPUT, setPatientPUT] = useState({})
 
@@ -22,43 +22,52 @@ fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOpt
   .then(data => setPatientPUT(data))
   .catch(error => console.log('error', error));
     
-}, [])
+}, [id,requestOptions])
 
-const HandlePutPatient = () => { 
+const HandlePutPatient = async () => { 
-  alert(`Atualizando paciente "${PatientToPUT.nome}" com sucesso`)
+  
-    var myHeaders = new Headers();
-myHeaders.append("Authorization", "Bearer <token>");
-myHeaders.append("Content-Type", "application/json");
 
-var raw = JSON.stringify(PatientToPUT)
+  var myHeaders = new Headers();
+  myHeaders.append("Authorization", "Bearer <token>");
+  myHeaders.append("Content-Type", "application/json");
 
-console.log(PatientToPUT)
+  var raw = JSON.stringify(PatientToPUT);
 
-var requestOptions = {
+  console.log("Enviando paciente para atualização:", PatientToPUT);
-   method: 'PUT',
-   headers: myHeaders,
-   body: raw,
-   redirect: 'follow'
-};
 
-fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/", requestOptions)
+  var requestOptions = {
-   .then(response => response.text())
+    method: 'PUT',
-   .then(result => console.log('ATUALIZADO COM SUCESSO',result))
+    headers: myHeaders,
-   .catch(error => console.log('error', error));
+    body: raw,
+    redirect: 'follow'
+  };
 
+  try {
+    const response = await fetch(
+      "https://mock.apidog.com/m1/1053378-0-default/pacientes/" + PatientToPUT.id, 
+      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>
 
-    
-
     <PatientForm
     onSave={HandlePutPatient}
-    onCancel={console.log('Não atualizar')}
+    onCancel={() => {setCurrentPage('table')}}
-   
+   setCurrentPage={setCurrentPage}
     formData={PatientToPUT}
     setFormData={setPatientPUT}
     />

src/pages/PatientCadastroManager.jsx

@@ -1,11 +1,7 @@
-import React, { useState } from 'react';
+import {useState} from 'react';
-
-// Importamos os dois novos componentes que criamos
-
 import PatientForm from '../components/patients/PatientForm';
 
 function PatientCadastroManager( {setCurrentPage} ) {
-  // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
  
 
   const [formData, setFormData] = useState({})
@@ -13,29 +9,33 @@ function PatientCadastroManager( {setCurrentPage} ) {
   myHeaders.append("Content-Type", "application/json");
 
   // Função que será chamada para "salvar" o paciente
-  const handleSavePatient = (patientData) => {
+  const handleSavePatient = async (patientData) => {
-    console.log('Salvando paciente:', patientData);
+  console.log('Salvando paciente:', patientData);
 
-    var raw = JSON.stringify(patientData)
+  var raw = JSON.stringify(patientData);
 
-    var requestOptions = {
+  var requestOptions = {
-      method:'POST',
+    method: 'POST',
-      header: myHeaders,
+    headers: {
-      body:raw,
+      "Content-Type": "application/json"
-      redirect:'follow'
+    },
-    }
+    body: raw,
-
+    redirect: 'follow'
-
-  fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions)
-    .then(response => response.text())
-    .then(result => console.log(result))
-    .catch(error => console.log('error', error));
-      
-    alert(`Paciente "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend
-    // Após salvar, voltamos para a tela de lista
-   
   };
 
+  try {
+    const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions);
+    const result = await response.json();   
+    console.log("Paciente salvo no backend:", result);
+    setCurrentPage('table')
+    return result;
+  } catch (error) {
+    console.error("Erro ao salvar paciente:", error);
+    throw error; 
+  }
+};
+
+
   return (
     <>
       <div className="page-heading">

src/pages/style/Agendamento.css

@@ -89,10 +89,11 @@
 
 .legenda-tabela{
   display: flex;
-  justify-content: flex-end;
+  
-  margin-top: 10px;
+  margin-top: 30px;
   margin-bottom: 10px;
   gap: 15px;
+  justify-content: flex-end;
 }
 
 .legenda-item-realizado{
@@ -141,4 +142,55 @@
   padding: 5px;
   font-weight: bold;
   border-radius: 10px;
+}
+
+.btns-e-legenda-container{
+  
+  display: flex;
+
+  justify-content: space-between;
+  flex-direction: row;
+  margin-top: 10px;
+}
+
+
+.calendario {
+  
+  border-collapse: collapse;
+  width: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgb(255, 255, 255);
+  border: 10px solid #ffffffc5;
+  background-color: rgb(253, 253, 253);
+}
+
+
+
+.calendario-ou-filaespera{
+  margin-top: 0;
+}
+
+.container-btns-agenda-fila_esepera{
+  margin-top: 30px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  margin-left:20px ;
+  
+}
+
+.btn-fila-espera, .btn-agenda{
+  background-color: transparent;
+  border: 0px ;
+  border-bottom: 3px solid rgb(253, 253, 253);
+  padding: 8px;
+  border-radius: 10px 10px 0px 0px;
+  font-weight: bold;
+  
+}
+
+.opc-filaespera-ativo, .opc-agenda-ativo{
+  color: white;
+  background-color: #5980fd;
 }