Funcionamento das barras de pesquisa

src/PagesMedico/Agendamento.jsx

@@ -1,19 +1,27 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo } from 'react';
-import dayjs from "dayjs";
 
-// Importe os componentes que você está usando
+import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
-import TabelaAgendamentoDia from "../components/AgendarConsulta/TabelaAgendamentoDia";
+import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
-import TabelaAgendamentoSemana from "../components/AgendarConsulta/TabelaAgendamentoSemana";
+import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
-import TabelaAgendamentoMes from "../components/AgendarConsulta/TabelaAgendamentoMes";
+import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
-import FormNovaConsulta from "../components/AgendarConsulta/FormNovaConsulta";
 
+// ✨ NOVO: Caminho de importação corrigido com base na sua estrutura de pastas
+import AgendamentosMes from '../components/AgendarConsulta/DadosConsultasMock.js';
+
+import dayjs from 'dayjs';
 // Importe os estilos
 import "./styleMedico/Agendamento.css";
 import "./styleMedico/FilaEspera.css";
 
-// --- DADOS E FUNÇÕES FORA DO COMPONENTE ---
+const Agendamento = () => {
 
-const filaEsperaData = [
+  const [FiladeEspera, setFiladeEspera] = useState(false);
+  const [tabela, setTabela] = useState('diario');
+  const [PageNovaConsulta, setPageConsulta] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  // Dados da fila de espera (sem alteração)
+  const filaEsperaData = [
     { nome: 'Ricardo Pereira', email: 'ricardo.pereira@gmail.com', cpf: '444.777.666-55', telefone: '(79) 99123-4567', entrada: '25/09/2025 às 08:00' },
     { nome: 'Ana Costa', email: 'ana.costa@gmail.com', cpf: '321.654.987-00', telefone: '(79) 97777-3333', entrada: '25/09/2025 às 08:30' },
     { nome: 'Lucas Martins', email: 'lucas.martins@gmail.com', cpf: '777.666.555-33', telefone: '(79) 99654-3210', entrada: '25/09/2025 às 09:00' },
@@ -22,52 +30,63 @@ const filaEsperaData = [
     { nome: 'Fernanda Lima', email: 'fernanda.lima@gmail.com', cpf: '888.999.000-22', telefone: '(79) 98877-6655', entrada: '26/09/2025 às 09:30' },
     { nome: 'Carlos Andrade', email: 'carlos.andrade@gmail.com', cpf: '222.555.888-11', telefone: '(79) 99876-5432', entrada: '26/09/2025 às 10:00' },
     { nome: 'Juliana Oliveira', email: 'juliana.o@gmail.com', cpf: '111.222.333-44', telefone: '(79) 98765-1234', entrada: '26/09/2025 às 11:30' },
-];
-
-const ListarDiasdoMes = (ano, mes) => {
-    const diasDaSemana = [[], [], [], [], [], [], []]; // 0: Domingo, 1: Segunda, ...
-    const base = dayjs(`${ano}-${mes}-01`);
-    const diasNoMes = base.daysInMonth();
-
-    for (let d = 1; d <= diasNoMes; d++) {
-        const data = dayjs(`${ano}-${mes}-${d}`);
-        const diaDaSemana = data.day(); // Retorna um número de 0 (Dom) a 6 (Sáb)
-        diasDaSemana[diaDaSemana].push(d);
-    }
-
-    // Retornando apenas os dias úteis (Segunda a Sexta)
-    return [
-        diasDaSemana[1], // Segundas
-        diasDaSemana[2], // Terças
-        diasDaSemana[3], // Quartas
-        diasDaSemana[4], // Quintas
-        diasDaSemana[5], // Sextas
   ];
-};
 
-
+  // Filtro da fila de espera (sem alteração)
-// --- COMPONENTE PRINCIPAL ---
+  const filteredFila = filaEsperaData.filter(item =>
-
-const Agendamento = () => {
-    const [FiladeEspera, setFiladeEspera] = useState(false);
-    const [tabela, setTabela] = useState('diario');
-    const [PageNovaConsulta, setPageConsulta] = useState(false);
-    const [searchTerm, setSearchTerm] = useState('');
-
-    const filteredFila = useMemo(() =>
-        filaEsperaData.filter(item =>
     item.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
     item.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
     item.cpf.includes(searchTerm) ||
     item.telefone.includes(searchTerm)
-        ), [searchTerm]);
+  );
+
+  // Lógica para filtrar os dados da AGENDA (AgendamentosMes)
+  const filteredAgendamentos = useMemo(() => {
+    if (!searchTerm.trim()) {
+      return AgendamentosMes;
+    }
+
+    const lowerCaseSearchTerm = searchTerm.toLowerCase();
+    const filteredData = {};
+
+    for (const semana in AgendamentosMes) {
+      filteredData[semana] = {};
+      for (const dia in AgendamentosMes[semana]) {
+        filteredData[semana][dia] = AgendamentosMes[semana][dia].filter(agendamento =>
+          agendamento.status === 'vazio' ||
+          (agendamento.paciente && agendamento.paciente.toLowerCase().includes(lowerCaseSearchTerm))
+        );
+      }
+    }
+    return filteredData;
+  }, [searchTerm]);
+
+  const ListarDiasdoMes = (ano, mes) => {
+    let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
+    const base = dayjs(`${ano}-${mes}-01`)
+    const DiasnoMes = base.daysInMonth()
+    for (let d = 1; d <= DiasnoMes; d++) {
+      const data = dayjs(`${ano}-${mes}-${d}`)
+      const dia = data.format('dddd')
+      switch (dia) {
+        case 'Monday': segundas.push(d); break
+        case 'Tuesday': tercas.push(d); break
+        case 'Wednesday': quartas.push(d); break
+        case 'Thursday': quintas.push(d); break
+        case 'Friday': sextas.push(d); break
+        default: break
+      }
+    }
+    let ListaDiasDatas = [segundas, tercas, quartas, quintas, sextas]
+    return ListaDiasDatas
+  }
 
   const handleClickAgendamento = (agendamento) => {
-        if (agendamento.status !== 'vazio') return;
+    if (agendamento.status !== 'vazio') return
-        setPageConsulta(true);
+    else setPageConsulta(true)
-    };
+  }
 
-    const handleClickCancel = () => setPageConsulta(false);
+  const handleClickCancel = () => setPageConsulta(false)
 
   return (
     <div>
@@ -75,60 +94,71 @@ const Agendamento = () => {
 
       {!PageNovaConsulta ? (
         <div className='atendimento-eprocura'>
+          <div className='busca-atendimento'>
+            <div>
+              <i className="fa-solid fa-calendar-day"></i>
+              <input
+                type="text"
+                placeholder="Buscar atendimento por paciente..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+            <div>
+              <select>
+                <option value="" disabled selected>Agendar</option>
+                <option value="">Atendimento</option>
+                <option value="">Sessões</option>
+                <option value="">Urgência</option>
+              </select>
+            </div>
+          </div>
 
-                    {/* ✅ BARRA DE BUSCA E FILTRO FOI MOVIDA PARA DENTRO DO CALENDÁRIO */}
-
-                    {/* ✅ BARRA DE UNIDADE E PROFISSIONAL REMOVIDA (COMENTADA) */}
-                    {/*
           <div className='unidade-selecionarprofissional'>
-                        <select defaultValue="">
+            <select>
-                            <option value="" disabled >Unidade</option>
+              <option value="" disabled selected >Unidade</option>
-                            <option value="central">Unidade Central</option>
+              <option value="">Unidade Central</option>
-                            <option value="norte">Unidade Zona Norte</option>
+              <option value="">Unidade Zona Norte</option>
-                            <option value="oeste">Unidade Zona Oeste</option>
+              <option value="">Unidade Zona Oeste</option>
             </select>
             <input type="text" placeholder='Selecionar profissional' />
           </div>
-                    */}
 
-                    {/* Botões para alternar Agenda / Fila de Espera */}
           <div className='container-btns-agenda-fila_esepera'>
             <button
-                            className={`btn-agenda ${!FiladeEspera ? "opc-agenda-ativo" : ""}`}
+              className={`btn-agenda ${FiladeEspera === false ? "opc-agenda-ativo" : ""}`}
-                            onClick={() => setFiladeEspera(false)}
+              onClick={() => {
+                setFiladeEspera(false);
+                setSearchTerm('');
+              }}
             >
               Agenda
             </button>
             <button
-                            className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`}
+              className={`btn-fila-espera ${FiladeEspera === true ? "opc-filaespera-ativo" : ""}`}
-                            onClick={() => setFiladeEspera(true)}
+              onClick={() => {
+                setFiladeEspera(true);
+                setSearchTerm('');
+              }}
             >
               Fila de espera
             </button>
           </div>
 
           <section className='calendario-ou-filaespera'>
-                        {!FiladeEspera ? (
+            {FiladeEspera === false ?
+              (
                 <div className='calendario'>
                   <div>
                     <section className='btns-e-legenda-container'>
                       <div>
-                                            <button
+                        <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`} onClick={() => setTabela("diario")}>
-                                                className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
-                                                onClick={() => setTabela("diario")}
-                                            >
                           <i className="fa-solid fa-calendar-day"></i> Dia
                         </button>
-                                            <button
+                        <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`} onClick={() => setTabela("semanal")}>
-                                                className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`}
-                                                onClick={() => setTabela("semanal")}
-                                            >
                           <i className="fa-solid fa-calendar-day"></i> Semana
                         </button>
-                                            <button
+                        <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo' : ''}`} onClick={() => setTabela("mensal")}>
-                                                className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo' : ''}`}
-                                                onClick={() => setTabela("mensal")}
-                                            >
                           <i className="fa-solid fa-calendar-day"></i> Mês
                         </button>
                       </div>
@@ -140,33 +170,19 @@ const Agendamento = () => {
                       </div>
                     </section>
                     
-                                    {/* ✅ BARRA DE BUSCA MOVIDA PARA CÁ */}
+                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={filteredAgendamentos} />}
-                                    <div className='busca-atendimento'>
+                    {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={filteredAgendamentos} />}
-                                        <div>
+                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={filteredAgendamentos} />}
-                                            <i className="fa-solid fa-calendar-day"></i>
-                                            <input type="text" placeholder="Buscar atendimento" />
-                                        </div>
-                                        <div>
-                                            <select defaultValue="" >
-                                                <option value="" disabled>Agendar</option>
-                                                <option value="atendimento">Atendimento</option>
-                                                <option value="sessoes">Sessões</option>
-                                                <option value="urgencia">Urgência</option>
-                                            </select>
                   </div>
                 </div>
-
+              )
-                                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} />}
+              :
-                                    {tabela === 'semanal' && <TabelaAgendamentoSemana />}
+              (
-                                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} />}
-                                </div>
-                            </div>
-                        ) : (
                 <div className="fila-container">
                   <div className="fila-header">
                     <input
                       type="text"
-                                        placeholder="Pesquisar..."
+                      placeholder="Pesquisar na fila de espera..."
                       className="busca-fila-espera"
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
@@ -196,14 +212,15 @@ const Agendamento = () => {
                     </tbody>
                   </table>
                 </div>
-                        )}
+              )
+            }
           </section>
         </div>
       ) : (
         <FormNovaConsulta onCancel={handleClickCancel} />
       )}
     </div>
-    );
+  )
-};
+}
 
 export default Agendamento;

src/PagesMedico/Chat.jsx

@@ -91,6 +91,7 @@ const App = () => {
     const [conversations, setConversations] = useState(conversationsData);
     const [activeConversationId, setActiveConversationId] = useState(1);
     const [newMessage, setNewMessage] = useState('');
+    const [searchTerm, setSearchTerm] = useState(''); // ✅ 1. Estado para a busca
     const chatEndRef = useRef(null);
 
     const activeConversation = conversations.find(c => c.id === activeConversationId);
@@ -134,6 +135,11 @@ const App = () => {
         setConversations(updatedConversations);
     };
 
+    // ✅ 2. Lógica para filtrar as conversas
+    const filteredConversations = conversations.filter(conversation =>
+        conversation.patientName.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
     return (
         <div className="chat-app-container">
             {/* Barra Lateral de Conversas */}
@@ -141,12 +147,20 @@ const App = () => {
                 <header className="sidebar-header">
                     <h1>Mensagens</h1>
                     <div className="search-container">
-                        <input type="text" placeholder="Pesquisar paciente..." className="search-input" />
+                        {/* ✅ 3. Conecta o input ao estado e à função de atualização */}
+                        <input
+                            type="text"
+                            placeholder="Pesquisar paciente..."
+                            className="search-input"
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                        />
                         <svg className="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                     </div>
                 </header>
                 <div className="conversation-list">
-                    {conversations.map(convo => (
+                    {/* ✅ 4. Usa a lista filtrada para renderizar os itens */}
+                    {filteredConversations.map(convo => (
                         <ConversationListItem
                             key={convo.id}
                             conversation={convo}
@@ -192,7 +206,12 @@ const App = () => {
                     </>
                 ) : (
                     <div className="no-conversation-selected">
+                        {/* Adicionado uma verificação para quando a busca não encontra resultados */}
+                        {searchTerm && filteredConversations.length === 0 ? (
+                             <p>Nenhum paciente encontrado com o nome "{searchTerm}".</p>
+                        ) : (
                             <p>Selecione uma conversa para começar.</p>
+                        )}
                     </div>
                 )}
             </main>
@@ -201,4 +220,3 @@ const App = () => {
 };
 
 export default App;
-

src/components/AgendarConsulta/TabelaAgendamentoDia.jsx

@@ -1,48 +1,37 @@
-import React from 'react'
+import React from 'react';
-import CardConsulta from './CardConsulta'
+import CardConsulta from './CardConsulta';
-import AgendamentosMes from './DadosConsultasMock'
 import "./style/styleTabelas/tabeladia.css";
 
-const TabelaAgendamentoDia = ({handleClickAgendamento}) => {
 
-  let agendamentosDessaSemana = AgendamentosMes.semana1
+const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos }) => {
-
+  const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
-  let agendamentos = agendamentosDessaSemana.segunda
+  const nomeMedico = agendamentosDoDia.find(item => item.medico)?.medico || 'Profissional';
-
-  console.log(agendamentos)
 
   return (
     <div>
       <table className='tabeladiaria'>
         <thead>
           <tr>
-        <th></th>
+            <th>Horário</th>
-        <th>{agendamentos.medico}</th>
+            <th>{}</th>
           </tr>
         </thead>
 
         <tbody>
-
+          {agendamentosDoDia.map((agendamento, index) => (
-    {agendamentos.map((agendamento) => (
+            <tr key={index}>
-      <tr key={agendamento.id} border='2' >
+              <td><p>{agendamento.horario}</p></td>
-        <td ><p>{agendamento.horario}</p></td>
               <td className='mostrar-horario'>
-          
+                <div onClick={() => handleClickAgendamento(agendamento)}>
-          <div onClick={() => handleClickAgendamento(agendamento)} >
                   <CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} />
                 </div>
-
               </td>
             </tr>
-
           ))}
-
-
         </tbody>
       </table>
-</div>
+    </div>
-
+  );
-  )
 }
 
-export default TabelaAgendamentoDia
+export default TabelaAgendamentoDia;

src/components/AgendarConsulta/TabelaAgendamentoMes.jsx

@@ -1,29 +1,29 @@
-import React from 'react'
+import React from 'react';
-import AgendamentosMes from './DadosConsultasMock'
+// ✏️ REMOVIDO: A importação do mock não é mais necessária aqui.
-import dayjs from "dayjs"
+// import AgendamentosMes from './DadosConsultasMock'; 
-import CardConsulta from './CardConsulta'
+import dayjs from "dayjs";
+import CardConsulta from './CardConsulta';
 import "./style/styleTabelas/tabelames.css";
 
-const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
+// ✨ MODIFICADO: Recebe 'agendamentos' como prop, além de 'ListarDiasdoMes'
+const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
 
+  const dataHoje = dayjs();
+  const AnoAtual = dataHoje.year();
+  const mes = dataHoje.month() + 1;
 
-  const dataHoje = dayjs()
+  let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes);
-  const AnoAtual = dataHoje.year()
-  const mes = dataHoje.month() + 1
-
-  let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes)
 
   let segundas = ListaDiasDatas[0];
   let tercas = ListaDiasDatas[1];
   let quartas = ListaDiasDatas[2];
   let quintas = ListaDiasDatas[3];
-  let sextas = ListaDiasDatas[4]
+  let sextas = ListaDiasDatas[4];
-
-  console.log(AnoAtual, 'ano', mes, 'mes')
 
   return (
     <div>
       <table className='tabelamensal'>
+        <thead>
           <tr>
             <th>Seg</th>
             <th>Ter</th>
@@ -31,14 +31,18 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
             <th>Qui</th>
             <th>Sex</th>
           </tr>
-
+        </thead>
-        {Object.entries(AgendamentosMes).map(([semanas, dias], index) => (
+        <tbody>
+          {/* ✨ MODIFICADO: Itera sobre a prop 'agendamentos' em vez do mock importado.
+              O 'agendamentos &&' garante que o código não quebre se a prop ainda não chegou. */}
+          {agendamentos && Object.entries(agendamentos).map(([semana, dias], index) => (
             <tr key={index}>
+              {/* Coluna de Segunda-feira */}
               <td>
                 <div>
                   <p>{segundas[index]}</p>
                   <div>
-                  {dias.segunda.slice(0,4).map((consulta, idx) => (
+                    {(dias.segunda || []).slice(0, 3).map((consulta, idx) => (
                       <CardConsulta
                         key={idx}
                         DadosConsulta={consulta}
@@ -46,17 +50,18 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                       />
                     ))}
                   </div>
-                {dias.segunda.length > 3 ? 
+                  {(dias.segunda || []).length > 3 ?
-                  <div><p className='cards-que-faltam'>+ {dias.segunda.length - 3}</p></div> 
+                    <div><p className='cards-que-faltam'>+ {(dias.segunda || []).length - 3}</p></div>
                     : null}
                 </div>
               </td>
 
+              {/* Coluna de Terça-feira */}
               <td>
                 <div>
-                {tercas[index]}
+                  <p>{tercas[index]}</p>
                   <div>
-                  {dias.terca.slice(0,4).map((consulta, idx) => (
+                    {(dias.terca || []).slice(0, 3).map((consulta, idx) => (
                       <CardConsulta
                         key={idx}
                         DadosConsulta={consulta}
@@ -64,17 +69,18 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                       />
                     ))}
                   </div>
-                {dias.terca.length > 3 ? 
+                  {(dias.terca || []).length > 3 ?
-                  <div><p className='cards-que-faltam'>+ {dias.terca.length - 3}</p></div> 
+                    <div><p className='cards-que-faltam'>+ {(dias.terca || []).length - 3}</p></div>
                     : null}
                 </div>
               </td>
 
+              {/* Coluna de Quarta-feira */}
               <td>
                 <div>
-                {quartas[index]}
+                  <p>{quartas[index]}</p>
                   <div>
-                  {dias.quarta.slice(0,4).map((consulta, idx) => (
+                    {(dias.quarta || []).slice(0, 3).map((consulta, idx) => (
                       <CardConsulta
                         key={idx}
                         DadosConsulta={consulta}
@@ -82,17 +88,18 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                       />
                     ))}
                   </div>
-                {dias.quarta.length > 3 ? 
+                  {(dias.quarta || []).length > 3 ?
-                  <div><p className='cards-que-faltam'>+ {dias.quarta.length - 3}</p></div> 
+                    <div><p className='cards-que-faltam'>+ {(dias.quarta || []).length - 3}</p></div>
                     : null}
                 </div>
               </td>
 
+              {/* Coluna de Quinta-feira */}
               <td>
                 <div>
-                {quintas[index]}
+                  <p>{quintas[index]}</p>
                   <div>
-                  {dias.quinta.slice(0,4).map((consulta, idx) => (
+                    {(dias.quinta || []).slice(0, 3).map((consulta, idx) => (
                       <CardConsulta
                         key={idx}
                         DadosConsulta={consulta}
@@ -100,17 +107,18 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                       />
                     ))}
                   </div>
-                {dias.quinta.length > 3 ? 
+                  {(dias.quinta || []).length > 3 ?
-                  <div><p className='cards-que-faltam'>+ {dias.quinta.length - 3}</p></div> 
+                    <div><p className='cards-que-faltam'>+ {(dias.quinta || []).length - 3}</p></div>
                     : null}
                 </div>
               </td>
 
+              {/* Coluna de Sexta-feira */}
               <td>
                 <div>
-                {sextas[index]}
+                  <p>{sextas[index]}</p>
                   <div>
-                  {dias.sexta.slice(0,4).map((consulta, idx) => (
+                    {(dias.sexta || []).slice(0, 3).map((consulta, idx) => (
                       <CardConsulta
                         key={idx}
                         DadosConsulta={consulta}
@@ -118,16 +126,17 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
                       />
                     ))}
                   </div>
-                {dias.sexta.length > 3 ? 
+                  {(dias.sexta || []).length > 3 ?
-                  <div><p className='cards-que-faltam'>+ {dias.sexta.length - 3}</p></div> 
+                    <div><p className='cards-que-faltam'>+ {(dias.sexta || []).length - 3}</p></div>
                     : null}
                 </div>
               </td>
             </tr>
           ))}
+        </tbody>
       </table>
     </div>
   )
 }
 
-export default TabelaAgendamentoMes
+export default TabelaAgendamentoMes;

src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx

@@ -1,54 +1,75 @@
-import React from 'react'
+import React from 'react';
-
+// ✏️ REMOVIDO: A importação do mock foi removida.
-import AgendamentosMes from './DadosConsultasMock'
+// import AgendamentosMes from './DadosConsultasMock'; 
-import CardConsulta from './CardConsulta'
+import CardConsulta from './CardConsulta';
 import "./style/styleTabelas/tabelasemana.css";
 
-const TabelaAgendamentoSemana = () => {
+// ✨ MODIFICADO: Recebe 'agendamentos' como prop
+const TabelaAgendamentoSemana = ({ agendamentos }) => {
 
-  let AgendamentosDesseMes = AgendamentosMes
+  // ✨ MODIFICADO: Usa os dados da prop, com fallback para um objeto vazio para evitar erros.
+  // Continua usando a 'semana1' como no seu código original.
+  const agendamentoSemana = agendamentos?.semana1 || {};
 
-  let AgendamentoSemana = AgendamentosDesseMes.semana1
+  // Pega os agendamentos de cada dia, com fallback para um array vazio.
-
+  const agendamentosDeSegunda = agendamentoSemana.segunda || [];
-
+  const agendamentosDeTerca = agendamentoSemana.terca || [];
-  let AgendamentosdeSegunda = AgendamentoSemana.segunda
+  const agendamentosDeQuarta = agendamentoSemana.quarta || [];
-  let AgendamentosdeTerca = AgendamentoSemana.terca
+  const agendamentosDeQuinta = agendamentoSemana.quinta || [];
-  let AgendamentosdeQuarta = AgendamentoSemana.quarta
+  const agendamentosDeSexta = agendamentoSemana.sexta || [];
-  let AgendamentosdeQuinta = AgendamentoSemana.quinta
-  let AgendamentosdeSexta = AgendamentoSemana.sexta
 
+  // ✨ LÓGICA MELHORADA: Calcula o número de linhas com base no dia com mais horários.
+  // Isso evita que a tabela quebre se um dia tiver mais horários que outro após a busca.
+  const numLinhas = Math.max(
+    agendamentosDeSegunda.length,
+    agendamentosDeTerca.length,
+    agendamentosDeQuarta.length,
+    agendamentosDeQuinta.length,
+    agendamentosDeSexta.length
+  );
 
   return (
-    <div >
+    <div>
-
       <table className='tabelasemanal'>
+        <thead>
           <tr>
-        <th></th>
+            <th>Horário</th>
             <th>Segunda</th>
             <th>Terça</th>
             <th>Quarta</th>
             <th>Quinta</th>
             <th>Sexta</th>
           </tr>
+        </thead>
+        <tbody>
+          {/* ✨ MODIFICADO: Itera com base no número de linhas calculado. */}
+          {Array.from({ length: numLinhas }).map((_, index) => {
+            // Pega a consulta de cada dia para a linha atual (índice)
+            const consultaSeg = agendamentosDeSegunda[index];
+            const consultaTer = agendamentosDeTerca[index];
+            const consultaQua = agendamentosDeQuarta[index];
+            const consultaQui = agendamentosDeQuinta[index];
+            const consultaSex = agendamentosDeSexta[index];
 
+            // Pega o horário da primeira consulta que existir na linha
+            const horarioDaLinha = consultaSeg?.horario || consultaTer?.horario || consultaQua?.horario || consultaQui?.horario || consultaSex?.horario;
 
-      {AgendamentosdeSegunda.map((consulta, index) => (
+            return (
-
               <tr key={index}>
-          <td>{consulta.horario}</td>
+                <td>{horarioDaLinha}</td>
-          <td className='coluna-tipo1'> <CardConsulta DadosConsulta={AgendamentosdeSegunda[index]} /> </td>
+                {/* Renderiza o Card apenas se a consulta existir para aquele dia/horário */}
-          <td> <CardConsulta DadosConsulta={AgendamentosdeTerca[index]} />   </td>
+                <td>{consultaSeg && <CardConsulta DadosConsulta={consultaSeg} />}</td>
-          <td> <CardConsulta DadosConsulta={AgendamentosdeQuarta[index]} /> </td>
+                <td>{consultaTer && <CardConsulta DadosConsulta={consultaTer} />}</td>
-          <td><CardConsulta DadosConsulta={AgendamentosdeQuinta[index]} /></td>
+                <td>{consultaQua && <CardConsulta DadosConsulta={consultaQua} />}</td>
-          <td><CardConsulta DadosConsulta={AgendamentosdeSexta[index]} /></td>
+                <td>{consultaQui && <CardConsulta DadosConsulta={consultaQui} />}</td>
+                <td>{consultaSex && <CardConsulta DadosConsulta={consultaSex} />}</td>
               </tr>
-      ))}
+            );
-
+          })}
-
+        </tbody>
       </table>
-
     </div>
-  )
+  );
 }
 
-export default TabelaAgendamentoSemana
+export default TabelaAgendamentoSemana;

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

@@ -15,13 +15,11 @@
   border: 1px solid #e0e0e0;
 }
 
-/* Cabeçalho da semanal */
+/* Estilo aplicado APENAS às células do cabeçalho da tabela */
 .tabelasemanal thead th,
-.tabelasemanal thead td,
+.tabelasemanal thead td {
-.tabelasemanal tr:first-child th,
+  background-color: #0078d7;
-.tabelasemanal tr:first-child td {
+  color: #ffffff;
-  background-color: #0078d7 !important;
-  color: #ffffff !important;
   font-weight: 600;
   text-align: center;
   border-bottom: 2px solid #005a9e;

src/components/doctors/DoctorForm.jsx

@@ -1,49 +1,37 @@
 import React, { useState } from 'react';
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom';
 
 function DoctorForm({ onSave, onCancel, formData, setFormData }) {
 
   const FormatTelefones = (valor) => {
-
     const digits = String(valor).replace(/\D/g, '').slice(0, 11);
-
-  
     return digits
-    .replace(/(\d)/, '($1')   // 123 -> 123.
+      .replace(/(\d)/, '($1')
-    .replace(/(\d{2})(\d)/, '$1) $2' )
+      .replace(/(\d{2})(\d)/, '$1) $2')
       .replace(/(\d)(\d{4})/, '$1 $2')
-    .replace(/(\d{4})(\d{4})/, '$1-$2')
+      .replace(/(\d{4})(\d{4})/, '$1-$2');
-  }
+  };
-
 
   const FormatCPF = (valor) => {
-  
     const digits = String(valor).replace(/\D/g, '').slice(0, 11);
-
-
-  
     return digits
-    .replace(/(\d{3})(\d)/, '$1.$2')   // 123 -> 123.
+      .replace(/(\d{3})(\d)/, '$1.$2')
-    .replace(/(\d{3})(\d)/, '$1.$2')   // 123.456 -> 123.456.
+      .replace(/(\d{3})(\d)/, '$1.$2')
-    .replace(/(\d{3})(\d{1,2})$/, '$1-$2'); // 123.456.789 -> 123.456.789-01
+      .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
-    
+  };
-  }
-
-
 
   // Estado para armazenar a URL da foto do avatar
   const [avatarUrl, setAvatarUrl] = useState(null);
 
-  // Estado para controlar quais seções estão colapsadas
+  // Estado para controlar seções abertas/fechadas
   const [collapsedSections, setCollapsedSections] = useState({
-    dadosPessoais: true, // Alterado para true para a seção ficar aberta por padrão
+    dadosPessoais: true,
     infoMedicas: false,
     infoConvenio: false,
     endereco: false,
     contato: false,
   });
 
-  // Função para alternar o estado de colapso de uma seção
   const handleToggleCollapse = (section) => {
     setCollapsedSections(prevState => ({
       ...prevState,
@@ -54,14 +42,11 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
   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') {
       setFormData({ ...formData, [name]: files[0] });
 
-      // Lógica para pré-visualizar a imagem no avatar
       if (name === 'foto' && files[0]) {
         const reader = new FileReader();
         reader.onloadend = () => {
@@ -69,26 +54,25 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
         };
         reader.readAsDataURL(files[0]);
       } else if (name === 'foto' && !files[0]) {
-        setAvatarUrl(null); // Limpa o avatar se nenhum arquivo for selecionado
+        setAvatarUrl(null);
       }
 
-    } 
+    } else if (name.includes('cpf')) {
-
-    if (name.includes('cpf')) {
       let cpfFormatado = FormatCPF(value);
       setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
     } else if (name.includes('telefone')) {
       let telefoneFormatado = FormatTelefones(value);
       setFormData(prev => ({ ...prev, [name]: telefoneFormatado }));
-    }else {
+    } else {
       setFormData({ ...formData, [name]: value });
     }
   };
 
-  // Função para buscar endereço pelo CEP
+  // Modal
   const [showModal, setShowModal] = useState(false);
   const [modalMsg, setModalMsg] = useState('');
 
+  // Buscar endereço via CEP
   const handleCepBlur = async () => {
     const cep = formData.cep.replace(/\D/g, '');
     if (cep.length === 8) {
@@ -114,51 +98,123 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
     }
   };
 
+  // Salvar médico
   const handleSubmit = () => {
-    if (!formData.full_name || !formData.cpf || !formData.birth_date ) {
+    if (!formData.full_name || !formData.cpf || !formData.birth_date) {
-      setModalMsg('Por favor, preencha: Nome, CPF, Data de Nascimento.');
+      setModalMsg("Por favor, preencha:\n- Nome\n- CPF\n- Data de Nascimento");
       setShowModal(true);
-     
+      return; // impede que continue
-      
     }
 
-    onSave(
+    onSave({ ...formData });
-      {
-      ...formData
-      }
 
-    );
+    setModalMsg("Médico salvo com sucesso!");
-    setModalMsg('Médico salvo com sucesso!');
     setShowModal(true);
   };
-
   return (
     <>
-      {/* Modal de feedback */}
+      {/* Modal */}
       {showModal && (
-        <div className="modal fade show" style={{ display: 'block', alignItems: 'flex-start', justifyContent: 'center' }} tabIndex="-1">
+  <div
-          <div className="modal-dialog" style={{ marginTop: '32px' }}>
+    style={{
-            <div className="modal-content">
+      position: "fixed",
-              <div className="modal-header" style={{ backgroundColor: '#  ' }}>
+      top: 0,
-                <h5 className="modal-title text-black">Atenção</h5>
+      left: 0,
-                <button type="button" className="btn-close" style={{ filter: 'invert(0)' }} onClick={() => setShowModal(false)}></button>
+      width: "100%",
+      height: "100%",
+      backgroundColor: "rgba(0,0,0,0.5)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 9999
+    }}
+  >
+    <div
+      style={{
+        background: "#fff",
+        borderRadius: "10px",
+        width: "400px",
+        maxWidth: "90%",
+        boxShadow: "0 6px 20px rgba(0,0,0,0.2)",
+        overflow: "hidden"
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          background: "#1e3a8a",
+          padding: "12px 16px",
+          borderBottom: "1px solid #dee2e6",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        }}
+      >
+        <h5 style={{ margin: 0, fontSize: "1.2rem", fontWeight: 600, color: "#ffffffff" }}>Atenção</h5>
+        <button
+          onClick={() => setShowModal(false)}
+          style={{
+            background: "transparent",
+            border: "none",
+            fontSize: "1.2rem",
+            cursor: "pointer"
+          }}
+        >
+          ×
+        </button>
       </div>
-              <div className="modal-body text-black">
+
-                <p style={{ fontSize: '1.3rem', fontWeight: 500 }}>{modalMsg}</p>
+      {/* Body */}
+      <div style={{ padding: "16px", color: "#000" }}>
+        <p 
+          style={{ 
+            fontSize: "1.1rem", 
+            fontWeight: 500, 
+            whiteSpace: "pre-line"  // <-- garante quebra de linha no texto
+          }}
+        >
+          {modalMsg}
+        </p>
       </div>
-              <div className="modal-footer">
+
-                <button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
+      {/* Footer */}
+      <div
+        style={{
+          padding: "12px 16px",
+          borderTop: "1px solid #dee2e6",
+          display: "flex",
+          justifyContent: "flex-end"
+        }}
+      >
+        <button
+          onClick={() => setShowModal(false)}
+          style={{
+            background: "#0d6efd",
+            border: "none",
+            padding: "8px 16px",
+            borderRadius: "6px",
+            color: "#fff",
+            fontSize: "1rem",
+            cursor: "pointer"
+          }}
+        >
+          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>
 
         {/* DADOS PESSOAIS */}
         <div className="mb-5 p-4 border rounded shadow-sm">
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('dadosPessoais')} style={{ fontSize: '1.8rem' }}>
+          <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
+            onClick={() => handleToggleCollapse('dadosPessoais')}
+            style={{ fontSize: '1.8rem' }}>
             Dados Pessoais
             <span className="fs-5">
               {collapsedSections.dadosPessoais ? '▲' : '▼'}
@@ -166,7 +222,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
           </h4>
           <div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
             <div className="row mt-3">
-            {/* AVATAR E INPUT DE FOTO */}
+              {/* Avatar */}
               <div className="col-md-6 mb-3 d-flex align-items-center">
                 <div className="me-3">
                   {avatarUrl ? (
@@ -206,24 +262,25 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
                   {formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
                 </div>
               </div>
-            {/* CADASTRO */}
+
+              {/* Inputs */}
               <div className="col-md-6 mb-3">
                 <label style={{ fontSize: '1.1rem' }}>Nome: *</label>
-              <input type="text" className="form-control" name="full_name" value={formData.full_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+                <input type="text" className="form-control" name="full_name" value={formData.full_name} onChange={handleChange} />
               </div>
               <div className="col-md-6 mb-3">
                 <label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
-              <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" />
+                <input type="date" className="form-control" name="birth_date" value={formData.birth_date} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
               </div>
               <div className="col-md-6 mb-3">
                 <label style={{ fontSize: '1.1rem' }}>CPF: *</label>
-              <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} style={{ fontSize: '1.1rem' }} />
+                <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={handleChange} />
               </div>
 
               <div className="col-md-6 mb-3">
                 <label style={{ fontSize: '1.1rem' }}>Estado do CRM:</label>
-              <select className="form-control" name="crm_uf" value={formData.crm_uf} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+                <select className="form-control" name="crm_uf" value={formData.crm_uf} onChange={handleChange}>
-                <option value="" disabled selected>Selecione</option>
+                  <option value="">Selecione</option>
                   <option value="AP">AP</option>
                   <option value="AL">AL</option>
                   <option value="AM">AM</option>
@@ -255,36 +312,37 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
 
               <div className="col-md-6 mb-3">
                 <label style={{ fontSize: '1.1rem' }}>CRM:</label>
-              <input type="text" className="form-control" name="crm" value={formData.crm} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+                <input type="text" className="form-control" name="crm" value={formData.crm} onChange={handleChange} />
               </div>
 
               <div className="col-md-6 mb-3">
                 <label style={{ fontSize: '1.1rem' }}>Especialização:</label>
-              <select className="form-control" name="specialty" value={formData.specialty} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+                <select className="form-control" name="specialty" value={formData.specialty} onChange={handleChange}>
                   <option value="">Selecione</option>
-                <option value="Cardiologia">Clínica médica (clínico geral)</option>
+                  <option value="Clínica Geral">Clínica médica (clínico geral)</option>
-                <option value="Dermatologia">Pediatria</option>
+                  <option value="Pediatria">Pediatria</option>
                   <option value="Ginecologia">Ginecologia e obstetrícia</option>
-                <option value="Pediatria">Cardiologia</option>
+                  <option value="Cardiologia">Cardiologia</option>
                   <option value="Ortopedia">Ortopedia e traumatologia</option>
                   <option value="Oftalmologia">Oftalmologia</option>
-                <option value="Neurologia">Otorrinolaringologia</option>
+                  <option value="Otorrinolaringologia">Otorrinolaringologia</option>
-                <option value="Psiquiatria">Dermatologia</option>
+                  <option value="Dermatologia">Dermatologia</option>
-                <option value="Endocrinologia">Neurologia</option>
+                  <option value="Neurologia">Neurologia</option>
-                <option value="Oncologia">Psiquiatria</option>
+                  <option value="Psiquiatria">Psiquiatria</option>
-                <option value="Oncologia">Endocrinologia</option>
+                  <option value="Endocrinologia">Endocrinologia</option>
-                <option value="Oncologia">Gastroenterologia</option>
+                  <option value="Gastroenterologia">Gastroenterologia</option>
-                <option value="Oncologia">Urologia</option>    
+                  <option value="Urologia">Urologia</option>
                 </select>
               </div>
-
             </div>
           </div>
         </div>
 
         {/* ENDEREÇO */}
         <div className="mb-5 p-4 border rounded shadow-sm">
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('endereco')} style={{ fontSize: '1.8rem' }}>
+          <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
+            onClick={() => handleToggleCollapse('endereco')}
+            style={{ fontSize: '1.8rem' }}>
             Endereço
             <span className="fs-5">
               {collapsedSections.endereco ? '▲' : '▼'}
@@ -293,32 +351,32 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
           <div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
             <div className="row mt-3">
               <div className="col-md-4 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>CEP:</label>
+                <label>CEP:</label>
-              <input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} style={{ fontSize: '1.1rem' }} />
+                <input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} />
               </div>
               <div className="col-md-8 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Rua:</label>
+                <label>Rua:</label>
-              <input type="text" className="form-control" name="street" value={formData.street} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+                <input type="text" className="form-control" name="street" value={formData.street} onChange={handleChange} />
               </div>
               <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Bairro:</label>
+                <label>Bairro:</label>
-              <input type="text" className="form-control" name="neighborhood" value={formData.neighborhood} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+                <input type="text" className="form-control" name="neighborhood" value={formData.neighborhood} onChange={handleChange} />
               </div>
               <div className="col-md-4 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Cidade:</label>
+                <label>Cidade:</label>
-              <input type="text" className="form-control" name="city" value={formData.city} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+                <input type="text" className="form-control" name="city" value={formData.city} onChange={handleChange} />
               </div>
               <div className="col-md-2 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Estado:</label>
+                <label>Estado:</label>
-              <input type="text" className="form-control" name="state" value={formData.state} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+                <input type="text" className="form-control" name="state" value={formData.state} onChange={handleChange} />
               </div>
               <div className="col-md-4 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Número:</label>
+                <label>Número:</label>
-              <input type="text" className="form-control" name="number" value={formData.number} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+                <input type="text" className="form-control" name="number" value={formData.number} onChange={handleChange} />
               </div>
               <div className="col-md-8 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Complemento:</label>
+                <label>Complemento:</label>
-              <input type="text" className="form-control" name="complement" value={formData.complement} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+                <input type="text" className="form-control" name="complement" value={formData.complement} onChange={handleChange} />
               </div>
             </div>
           </div>
@@ -326,7 +384,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
 
         {/* CONTATO */}
         <div className="mb-5 p-4 border rounded shadow-sm">
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('contato')} style={{ fontSize: '1.8rem' }}>
+          <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
+            onClick={() => handleToggleCollapse('contato')}
+            style={{ fontSize: '1.8rem' }}>
             Contato
             <span className="fs-5">
               {collapsedSections.contato ? '▲' : '▼'}
@@ -335,26 +395,29 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
           <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>Email:</label>
-              <input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+                <input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} />
               </div>
               <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Telefone: </label>
+                <label>Telefone:</label>
-              <input type="text" className="form-control" name="phone_mobile" value={formData.phone_mobile} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+                <input type="text" className="form-control" name="phone_mobile" value={formData.phone_mobile} onChange={handleChange} />
               </div>
               <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
+                <label>Telefone 2:</label>
-              <input type="text" className="form-control" name="phone2" value={formData.phone2} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+                <input type="text" className="form-control" name="phone2" value={formData.phone2} onChange={handleChange} />
               </div>
-            
             </div>
           </div>
         </div>
 
-      {/* Botões */}
+        {/* BOTÕES */}
         <div className="mt-3 text-center">
-        <button className="btn btn-success me-3" onClick={handleSubmit} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
+          <button
-          Salvar Paciente
+            className="btn btn-success me-3"
+            onClick={handleSubmit}
+            style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
+          >
+            Salvar Médico
           </button>
           <Link to={'/medicos'}>
             <button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
@@ -362,7 +425,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
             </button>
           </Link>
         </div>
-
       </div>
     </>
   );

src/components/patients/PatientForm.jsx

@@ -508,28 +508,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
         </div>
       )}
 
-      {showModal404 && (
-        <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
-          <div className="modal-dialog">
-            <div className="modal-content">
-              <div className="modal-header" style={{ backgroundColor: '#f2fa0dff' }}>
-                <h5 className="modal-title"><span className="text-dark">Atenção</span></h5>
-                <button type="button" className="btn-close btn-close-black" onClick={() => setShowModal404(false)}></button>
-              </div>
-              <div className="modal-body">
-                <p style={{ color: '#111', fontSize: '1.4rem' }}>{errorModalMsg || '(Erro 404).Por favor, tente novamente mais tarde'}</p>
-              </div>
-              <div className="modal-footer">
 
-                
-                <button type="button" className="btn btn-primary" onClick={() => setShowModal404(false)}>
-                  Fechar
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }

src/pages/Agendamento.jsx

@@ -1,22 +1,25 @@
-import React, { useState } from 'react'
+import React, { useState, useMemo } from 'react';
 
 import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
 import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
 import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
 import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
 
-import dayjs from 'dayjs'
+// ✨ NOVO: Caminho de importação corrigido com base na sua estrutura de pastas
+import AgendamentosMes from '../components/AgendarConsulta/DadosConsultasMock.js';
+
+import dayjs from 'dayjs';
 import "./style/Agendamento.css";
 import './style/FilaEspera.css';
 
 const Agendamento = () => {
 
-  const [FiladeEspera, setFiladeEspera] = useState(false)
+  const [FiladeEspera, setFiladeEspera] = useState(false);
-  const [tabela, setTabela] = useState('diario')
+  const [tabela, setTabela] = useState('diario');
-  const [PageNovaConsulta, setPageConsulta] = useState(false)
+  const [PageNovaConsulta, setPageConsulta] = useState(false);
-  const [searchTerm, setSearchTerm] = useState('') // 🔹 Estado da busca
+  const [searchTerm, setSearchTerm] = useState('');
 
-  // 🔹 Dados da fila de espera
+  // Dados da fila de espera (sem alteração)
   const filaEsperaData = [
     { nome: 'Ricardo Pereira', email: 'ricardo.pereira@gmail.com', cpf: '444.777.666-55', telefone: '(79) 99123-4567', entrada: '25/09/2025 às 08:00' },
     { nome: 'Ana Costa', email: 'ana.costa@gmail.com', cpf: '321.654.987-00', telefone: '(79) 97777-3333', entrada: '25/09/2025 às 08:30' },
@@ -28,7 +31,7 @@ const Agendamento = () => {
     { nome: 'Juliana Oliveira', email: 'juliana.o@gmail.com', cpf: '111.222.333-44', telefone: '(79) 98765-1234', entrada: '26/09/2025 às 11:30' },
   ];
 
-  // 🔹 Filtra a fila de espera com base no searchTerm
+  // Filtro da fila de espera (sem alteração)
   const filteredFila = filaEsperaData.filter(item =>
     item.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
     item.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -36,16 +39,34 @@ const Agendamento = () => {
     item.telefone.includes(searchTerm)
   );
 
+  // Lógica para filtrar os dados da AGENDA (AgendamentosMes)
+  const filteredAgendamentos = useMemo(() => {
+    if (!searchTerm.trim()) {
+      return AgendamentosMes;
+    }
+
+    const lowerCaseSearchTerm = searchTerm.toLowerCase();
+    const filteredData = {};
+
+    for (const semana in AgendamentosMes) {
+      filteredData[semana] = {};
+      for (const dia in AgendamentosMes[semana]) {
+        filteredData[semana][dia] = AgendamentosMes[semana][dia].filter(agendamento =>
+          agendamento.status === 'vazio' ||
+          (agendamento.paciente && agendamento.paciente.toLowerCase().includes(lowerCaseSearchTerm))
+        );
+      }
+    }
+    return filteredData;
+  }, [searchTerm]);
+
   const ListarDiasdoMes = (ano, mes) => {
     let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
-
     const base = dayjs(`${ano}-${mes}-01`)
     const DiasnoMes = base.daysInMonth()
-
     for (let d = 1; d <= DiasnoMes; d++) {
       const data = dayjs(`${ano}-${mes}-${d}`)
       const dia = data.format('dddd')
-
       switch (dia) {
         case 'Monday': segundas.push(d); break
         case 'Tuesday': tercas.push(d); break
@@ -55,7 +76,6 @@ const Agendamento = () => {
         default: break
       }
     }
-
     let ListaDiasDatas = [segundas, tercas, quartas, quintas, sextas]
     return ListaDiasDatas
   }
@@ -72,16 +92,17 @@ const Agendamento = () => {
       <h1>Agendar nova consulta</h1>
 
       {!PageNovaConsulta ? (
-
         <div className='atendimento-eprocura'>
-
-          {/* 🔍 Busca e filtro */}
           <div className='busca-atendimento'>
             <div>
               <i className="fa-solid fa-calendar-day"></i>
-              <input type="text" placeholder="Buscar atendimento" />
+              <input
+                type="text"
+                placeholder="Buscar atendimento por paciente..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
             </div>
-
             <div>
               <select>
                 <option value="" disabled selected>Agendar</option>
@@ -92,7 +113,6 @@ const Agendamento = () => {
             </div>
           </div>
 
-          {/* 🏥 Unidade e profissional */}
           <div className='unidade-selecionarprofissional'>
             <select>
               <option value="" disabled selected >Unidade</option>
@@ -100,22 +120,25 @@ const Agendamento = () => {
               <option value="">Unidade Zona Norte</option>
               <option value="">Unidade Zona Oeste</option>
             </select>
-
             <input type="text" placeholder='Selecionar profissional' />
           </div>
 
-          {/* Botões para alternar Agenda / Fila de Espera */}
           <div className='container-btns-agenda-fila_esepera'>
             <button
               className={`btn-agenda ${FiladeEspera === false ? "opc-agenda-ativo" : ""}`}
-              onClick={() => setFiladeEspera(false)}
+              onClick={() => {
+                setFiladeEspera(false);
+                setSearchTerm('');
+              }}
             >
               Agenda
             </button>
-
             <button
               className={`btn-fila-espera ${FiladeEspera === true ? "opc-filaespera-ativo" : ""}`}
-              onClick={() => setFiladeEspera(true)}
+              onClick={() => {
+                setFiladeEspera(true);
+                setSearchTerm('');
+              }}
             >
               Fila de espera
             </button>
@@ -128,43 +151,27 @@ const Agendamento = () => {
                   <div>
                     <section className='btns-e-legenda-container'>
                       <div>
-                        <button
+                        <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`} onClick={() => setTabela("diario")}>
-                          className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
+                          <i className="fa-solid fa-calendar-day"></i> Dia
-                          onClick={() => setTabela("diario")}
-                        >
-                          <i className="fa-solid fa-calendar-day"></i>
-                          Dia
                         </button>
-
+                        <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`} onClick={() => setTabela("semanal")}>
-                        <button
+                          <i className="fa-solid fa-calendar-day"></i> Semana
-                          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")}>
-                        <button
+                          <i className="fa-solid fa-calendar-day"></i> Mês
-                          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></div>
                         <div className='legenda-item-confirmado'><span>Confirmado</span></div>
                         <div className='legenda-item-agendado'><span>Agendado</span></div>
                         <div className='legenda-item-cancelado'><span>Cancelado</span></div>
                       </div>
-
                     </section>
                     
-                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} />}
+                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={filteredAgendamentos} />}
-                    {tabela === 'semanal' && <TabelaAgendamentoSemana />}
+                    {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={filteredAgendamentos} />}
-                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} />}
+                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={filteredAgendamentos} />}
                   </div>
                 </div>
               )
@@ -174,17 +181,13 @@ const Agendamento = () => {
                   <div className="fila-header">
                     <input
                       type="text"
-    placeholder="Pesquisar..."
+                      placeholder="Pesquisar na fila de espera..."
                       className="busca-fila-espera"
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
                     />
-
                     <h2 className="fila-titulo">Fila de Espera</h2>
-</div>
+                  </div>
-
-
-
                   <table className="fila-tabela">
                     <thead>
                       <tr>
@@ -212,7 +215,6 @@ const Agendamento = () => {
             }
           </section>
         </div>
-
       ) : (
         <FormNovaConsulta onCancel={handleClickCancel} />
       )}
@@ -220,4 +222,4 @@ const Agendamento = () => {
   )
 }
 
-export default Agendamento
+export default Agendamento;

src/pages/DoctorCadastroManager.jsx

@@ -55,24 +55,7 @@ function DoctorCadastroManager( ) {
   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>

src/pages/DoctorTable.jsx

@@ -75,6 +75,8 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
     .catch(error => console.log('error', error));
   }, []);
 
+    
+  
   // Filtrar médicos pelo campo de pesquisa e aniversariantes
   const medicosFiltrados = medicos.filter(
     (medico) =>
@@ -163,7 +165,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                             <td>
                               <div className="d-flex gap-2">
                                 {/* Ver Detalhes */}
-                                <Link to={`/medicos/${medico.id}`}>
+                                <Link to={`${medico.id}`}>
                                   <button
                                     className="btn btn-sm"
                                     style={{
@@ -181,7 +183,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                                 </Link>
 
                                 {/*  Editar */}
-                                <Link to={`/medicos/${medico.id}/edit`}>
+                                <Link to={`${medico.id}/edit`}>
                                     <button
                                       className="btn btn-sm"
                                       style={{

src/pages/TablePaciente.jsx

@@ -131,19 +131,18 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
     );
   };
 
-  const pacientesFiltrados = pacientes.filter((paciente) => {
+const pacientesFiltrados = pacientes.filter((paciente) => {
-    const texto = `${paciente.nome}`.toLowerCase();
+  const textoCompletoPaciente = `${paciente.nome} ${paciente.cpf} ${paciente.email} ${paciente.telefone}`.toLowerCase();
-
+  const passaBusca = textoCompletoPaciente.includes(search.toLowerCase());
-    const passaBusca = texto.includes(search.toLowerCase());
   const passaVIP = filtroVIP ? paciente.vip === true : true;
-    const passaConvenio =
+  const passaConvenio = filtroConvenio === "Todos" || paciente.convenio === filtroConvenio;
-      filtroConvenio === "Todos" || paciente.convenio === filtroConvenio;
   const passaAniversario = filtroAniversariante
     ? ehAniversariante(paciente.data_nascimento)
     : true;
 
   return passaBusca && passaVIP && passaConvenio && passaAniversario;
-  });
+});
+
  
   return (
     <>