Finalização dos elementos da area medica

src/PagesMedico/Agendamento.jsx

@@ -1,22 +1,18 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from "react";
+import dayjs from "dayjs";
 
-import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
+// Importe os componentes que você está usando
-import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
+import TabelaAgendamentoDia from "../components/AgendarConsulta/TabelaAgendamentoDia";
-import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
+import TabelaAgendamentoSemana from "../components/AgendarConsulta/TabelaAgendamentoSemana";
-import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
+import TabelaAgendamentoMes from "../components/AgendarConsulta/TabelaAgendamentoMes";
+import FormNovaConsulta from "../components/AgendarConsulta/FormNovaConsulta";
 
-import dayjs from 'dayjs';
+// Importe os estilos
-import './styleMedico/Agendamento.css';
+import "./styleMedico/Agendamento.css";
-import './styleMedico/FilaEspera.css';
+import "./styleMedico/FilaEspera.css";
 
-const Agendamento = () => {
+// --- DADOS E FUNÇÕES FORA DO COMPONENTE ---
 
-  const [FiladeEspera, setFiladeEspera] = useState(false)
-  const [tabela, setTabela] = useState('diario')
-  const [PageNovaConsulta, setPageConsulta] = useState(false)
-  const [searchTerm, setSearchTerm] = useState('') // 🔹 Estado da busca
-
-  // 🔹 Dados da fila de espera
 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,64 +24,83 @@ 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
+const ListarDiasdoMes = (ano, mes) => {
-  const filteredFila = filaEsperaData.filter(item =>
+    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
+    ];
+};
+
+
+// --- COMPONENTE PRINCIPAL ---
+
+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]);
-
-  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;
-    else setPageConsulta(true)
+        setPageConsulta(true);
-  }
+    };
 
-  const handleClickCancel = () => setPageConsulta(false)
+    const handleClickCancel = () => setPageConsulta(false);
 
     return (
         <div>
-      <h1>Agendamentos</h1>
+            <h1>Agendar nova consulta</h1>
 
             {!PageNovaConsulta ? (
-
                 <div className='atendimento-eprocura'>
                     
+                    {/* ✅ 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="">
+                            <option value="" disabled >Unidade</option>
+                            <option value="central">Unidade Central</option>
+                            <option value="norte">Unidade Zona Norte</option>
+                            <option value="oeste">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" : ""}`}
+                            className={`btn-agenda ${!FiladeEspera ? "opc-agenda-ativo" : ""}`}
                             onClick={() => setFiladeEspera(false)}
                         >
                             Agenda
                         </button>
-
                         <button
-              className={`btn-fila-espera ${FiladeEspera === true ? "opc-filaespera-ativo" : ""}`}
+                            className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`}
                             onClick={() => setFiladeEspera(true)}
                         >
                             Fila de espera
@@ -93,8 +108,7 @@ const Agendamento = () => {
                     </div>
 
                     <section className='calendario-ou-filaespera'>
-            {FiladeEspera === false ?
+                        {!FiladeEspera ? (
-              (
                             <div className='calendario'>
                                 <div>
                                     <section className='btns-e-legenda-container'>
@@ -103,27 +117,21 @@ const Agendamento = () => {
                                                 className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
                                                 onClick={() => setTabela("diario")}
                                             >
-                          <i className="fa-solid fa-calendar-day"></i>
+                                                <i className="fa-solid fa-calendar-day"></i> Dia
-                          Dia
                                             </button>
-
                                             <button
                                                 className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`}
                                                 onClick={() => setTabela("semanal")}
                                             >
-                          <i className="fa-solid fa-calendar-day"></i>
+                                                <i className="fa-solid fa-calendar-day"></i> Semana
-                          Semana
                                             </button>
-
                                             <button
                                                 className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo' : ''}`}
                                                 onClick={() => setTabela("mensal")}
                                             >
-                          <i className="fa-solid fa-calendar-day"></i>
+                                                <i className="fa-solid fa-calendar-day"></i> Mês
-                          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>
@@ -132,32 +140,28 @@ const Agendamento = () => {
                                         </div>
                                     </section>
 
-                    {/* --- BARRA DE PESQUISA MOVIDA PARA CÁ --- */}
+                                    {/* ✅ BARRA DE BUSCA MOVIDA PARA CÁ */}
                                     <div className='busca-atendimento'>
                                         <div>
-                        <i className="fa-solid fa-search"></i>
+                                            <i className="fa-solid fa-calendar-day"></i>
-                        <input type="text" placeholder="Buscar atendimento por nome, CPF ou outros dados..." />
+                                            <input type="text" placeholder="Buscar atendimento" />
                                         </div>
-
                                         <div>
-                        <select>
+                                            <select defaultValue="" >
-                          <option value="" disabled selected>Agendar</option>
+                                                <option value="" disabled>Agendar</option>
-                          <option value="">Atendimento</option>
+                                                <option value="atendimento">Atendimento</option>
-                          <option value="">Sessões</option>
+                                                <option value="sessoes">Sessões</option>
-                          <option value="">Urgência</option>
+                                                <option value="urgencia">Urgência</option>
                                             </select>
                                         </div>
                                     </div>
-                    {/* --- FIM DA BARRA DE PESQUISA --- */}
 
                                     {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
@@ -167,7 +171,6 @@ const Agendamento = () => {
                                         value={searchTerm}
                                         onChange={(e) => setSearchTerm(e.target.value)}
                                     />
-
                                     <h2 className="fila-titulo">Fila de Espera</h2>
                                 </div>
                                 <table className="fila-tabela">
@@ -193,16 +196,14 @@ const Agendamento = () => {
                                     </tbody>
                                 </table>
                             </div>
-              )
+                        )}
-            }
                     </section>
                 </div>
-
             ) : (
                 <FormNovaConsulta onCancel={handleClickCancel} />
             )}
         </div>
-  )
+    );
-}
+};
 
 export default Agendamento;

src/PagesMedico/Chat.jsx

@@ -0,0 +1,204 @@
+import React, { useState, useRef, useEffect } from 'react';
+import './styleMedico/chat.css'; // Importa o ficheiro de estilos
+
+// --- DADOS MOCK (Simulação de um banco de dados) ---
+const conversationsData = [
+    {
+        id: 1,
+        patientName: 'Ana Costa',
+        avatarUrl: 'https://placehold.co/100x100/E2D9FF/6B46C1?text=AC',
+        lastMessage: 'Ok, doutor. Muito obrigada!',
+        timestamp: '10:45',
+        unread: 2,
+        messages: [
+            { id: 1, sender: 'Ana Costa', text: 'Boa tarde, doutor. Estou sentindo uma dor de cabeça persistente desde ontem.', time: '09:15' },
+            { id: 2, sender: 'Você', text: 'Olá, Ana. Além da dor de cabeça, você tem algum outro sintoma, como febre ou enjoo?', time: '09:17' },
+            { id: 3, sender: 'Ana Costa', text: 'Não, apenas a dor de cabeça mesmo. É uma pressão na parte da frente.', time: '09:20' },
+            { id: 4, sender: 'Você', text: 'Entendido. Por favor, continue monitorando e me avise se piorar. Recomendo repouso e boa hidratação.', time: '09:22' },
+            { id: 5, sender: 'Ana Costa', text: 'Ok, doutor. Muito obrigada!', time: '10:45' },
+        ],
+    },
+    {
+        id: 2,
+        patientName: 'Carlos Andrade',
+        avatarUrl: 'https://placehold.co/100x100/D1E7DD/146C43?text=CA',
+        lastMessage: 'Amanhã, às 14h, está ótimo.',
+        timestamp: 'Ontem',
+        unread: 0,
+        messages: [
+            { id: 1, sender: 'Carlos Andrade', text: 'Doutor, preciso remarcar minha consulta de amanhã.', time: 'Ontem' },
+            { id: 2, sender: 'Você', text: 'Claro, Carlos. Qual seria o melhor horário para você?', time: 'Ontem' },
+            { id: 3, sender: 'Carlos Andrade', text: 'Amanhã, às 14h, está ótimo.', time: 'Ontem' },
+        ],
+    },
+    {
+        id: 3,
+        patientName: 'Juliana Oliveira',
+        avatarUrl: 'https://placehold.co/100x100/F8D7DA/842029?text=JO',
+        lastMessage: 'O resultado do exame ficou pronto.',
+        timestamp: 'Sexta-feira',
+        unread: 0,
+        messages: [
+            { id: 1, sender: 'Juliana Oliveira', text: 'O resultado do exame ficou pronto.', time: 'Sexta-feira' }
+        ],
+    },
+    {
+        id: 4,
+        patientName: 'Ricardo Pereira',
+        avatarUrl: 'https://placehold.co/100x100/FFF3CD/856404?text=RP',
+        lastMessage: 'Estou me sentindo muito melhor, obrigado!',
+        timestamp: 'Quinta-feira',
+        unread: 0,
+        messages: [
+            { id: 1, sender: 'Ricardo Pereira', text: 'Estou me sentindo muito melhor, obrigado!', time: 'Quinta-feira' }
+        ],
+    },
+];
+
+// --- COMPONENTES ---
+
+const ConversationListItem = ({ conversation, isActive, onClick }) => (
+    <div
+        onClick={onClick}
+        className={`conversation-item ${isActive ? 'active' : ''}`}
+    >
+        <img src={conversation.avatarUrl} alt={conversation.patientName} className="avatar" />
+        <div className="conversation-details">
+            <div className="conversation-header">
+                <p className="patient-name">{conversation.patientName}</p>
+                <span className="timestamp">{conversation.timestamp}</span>
+            </div>
+            <div className="conversation-body">
+                <p className="last-message">{conversation.lastMessage}</p>
+                {conversation.unread > 0 && (
+                    <span className="unread-badge">{conversation.unread}</span>
+                )}
+            </div>
+        </div>
+    </div>
+);
+
+const ChatMessage = ({ message, isDoctor }) => (
+    <div className={`message-container ${isDoctor ? 'sent' : 'received'}`}>
+        <div className="message-bubble">
+            <p className="message-text">{message.text}</p>
+            <p className="message-time">{message.time}</p>
+        </div>
+    </div>
+);
+
+const App = () => {
+    const [conversations, setConversations] = useState(conversationsData);
+    const [activeConversationId, setActiveConversationId] = useState(1);
+    const [newMessage, setNewMessage] = useState('');
+    const chatEndRef = useRef(null);
+
+    const activeConversation = conversations.find(c => c.id === activeConversationId);
+
+    useEffect(() => {
+        chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [activeConversation]);
+
+    const handleSendMessage = (e) => {
+        e.preventDefault();
+        if (newMessage.trim() === '') return;
+
+        const messageToSend = {
+            id: Date.now(),
+            sender: 'Você',
+            text: newMessage,
+            time: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }),
+        };
+
+        const updatedConversations = conversations.map(convo => {
+            if (convo.id === activeConversationId) {
+                return {
+                    ...convo,
+                    messages: [...convo.messages, messageToSend],
+                    lastMessage: newMessage,
+                    timestamp: 'Agora'
+                };
+            }
+            return convo;
+        });
+
+        setConversations(updatedConversations);
+        setNewMessage('');
+    };
+
+    const handleConversationClick = (id) => {
+        setActiveConversationId(id);
+        const updatedConversations = conversations.map(convo =>
+            convo.id === id ? { ...convo, unread: 0 } : convo
+        );
+        setConversations(updatedConversations);
+    };
+
+    return (
+        <div className="chat-app-container">
+            {/* Barra Lateral de Conversas */}
+            <aside className="sidebar">
+                <header className="sidebar-header">
+                    <h1>Mensagens</h1>
+                    <div className="search-container">
+                        <input type="text" placeholder="Pesquisar paciente..." className="search-input" />
+                        <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 => (
+                        <ConversationListItem
+                            key={convo.id}
+                            conversation={convo}
+                            isActive={convo.id === activeConversationId}
+                            onClick={() => handleConversationClick(convo.id)}
+                        />
+                    ))}
+                </div>
+            </aside>
+
+            {/* Painel Principal do Chat */}
+            <main className="main-chat">
+                {activeConversation ? (
+                    <>
+                        <header className="chat-header">
+                            <img src={activeConversation.avatarUrl} alt={activeConversation.patientName} className="avatar" />
+                            <div>
+                                <h2 className="chat-patient-name">{activeConversation.patientName}</h2>
+                                <p className="chat-status">Online</p>
+                            </div>
+                        </header>
+                        <div className="messages-body">
+                            {activeConversation.messages.map(msg => (
+                                <ChatMessage key={msg.id} message={msg} isDoctor={msg.sender === 'Você'} />
+                            ))}
+                            <div ref={chatEndRef} />
+                        </div>
+                        <footer className="message-footer">
+                            <form onSubmit={handleSendMessage} className="message-form">
+                                <input
+                                    type="text"
+                                    value={newMessage}
+                                    onChange={(e) => setNewMessage(e.target.value)}
+                                    placeholder="Digite sua mensagem..."
+                                    className="message-input"
+                                    autoComplete="off"
+                                />
+                                <button type="submit" className="send-button">
+                                    <svg className="send-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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
+                                </button>
+                            </form>
+                        </footer>
+                    </>
+                ) : (
+                    <div className="no-conversation-selected">
+                        <p>Selecione uma conversa para começar.</p>
+                    </div>
+                )}
+            </main>
+        </div>
+    );
+};
+
+export default App;
+

src/PagesMedico/styleMedico/Agendamento.css

@@ -1,55 +1,29 @@
-.filtros-container select,
+/* --- Esconde a barra de unidade e profissional --- */
-.filtros-container input {
-  padding: 0.5rem;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-}
-
-.btn-buscar {
-  padding: 0.5rem 1rem;
-  margin-right: 0.5rem;
-  border: none;
-  border-radius: 5px;
-  background-color: #f0f0f0;
-  cursor: pointer;
-}
-
 .unidade-selecionarprofissional {
-  background-color: #fdfdfdde;
+  display: none;
-  padding: 20px 10px;
-  display: flex;
-  border-radius:10px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.unidade-selecionarprofissional input,  
+/* --- Posiciona a barra de busca corretamente --- */
-.unidade-selecionarprofissional select {
-  margin-left: 8px;
-  border-radius: 8px;
-  padding: 5px;
-  width: 20%;
-}
-
-.unidade-selecionarprofissional select{
-  width: 7%;
-}
-
-/* --- BARRA DE PESQUISA DIREITA --- */
 .busca-atendimento {
-  display: flex; /* Mantém itens internos flexíveis */
+  display: flex;
-  justify-content: flex-start;
+  align-items: center; /* Alinha os itens verticalmente */
-  align-items: center;
+  margin-top: 20px; /* Espaço acima da barra de busca */
-  width: 100%;
+  padding: 0 10px; /* Adiciona um padding lateral para alinhar com o resto */
-  margin-top: 20px;
+  gap: 15px;
-  padding: 0 10px;
-  box-sizing: border-box;
 }
 
 .busca-atendimento > div:first-child {
-    width: 400px; /* Define tamanho da barra */
+    width: 400px; /* Define um tamanho para a barra de pesquisa */
     display: flex;
     align-items: center;
-    margin-left: 1rem; /* Espaço entre barra e botão */
+}
+
+.busca-atendimento input {
+  margin-left: 8px;
+  border-radius: 8px;
+  padding: 8px;
+  width: 100%;
+  border: 1px solid #ccc;
 }
 
 .busca-atendimento select {
@@ -61,15 +35,7 @@
   border: none;
 }
 
-.busca-atendimento input{
+/* --- Estilos dos botões de Dia, Semana, Mês --- */
-  margin-left: 8px;
-  border-radius: 8px;
-  padding: 8px;
-  width: 100%;
-  border: 1px solid #ccc;
-}
-/* --- FIM BARRA DE PESQUISA --- */
-
 .btn-selecionar-tabeladia,
 .btn-selecionar-tabelasemana,
 .btn-selecionar-tabelames {
@@ -78,6 +44,7 @@
   font-size: larger;
   font-weight: bold;
   border-style: hidden;
+  cursor: pointer;
 }
 
 .btn-selecionar-tabeladia {
@@ -96,12 +63,19 @@
   font-weight: bolder;
 }
 
+/* --- Container dos botões e legenda --- */
+.btns-e-legenda-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  padding: 0 10px;
+}
+
+/* --- Legendas --- */
 .legenda-tabela {
   display: flex;
-  margin-top: 30px;
-  margin-bottom: 10px;
   gap: 15px;
-  justify-content: flex-start;
 }
 
 #status-card-consulta-realizado, .legenda-item-realizado {
@@ -136,24 +110,15 @@
   border-radius: 10px;
 }
 
-.btns-e-legenda-container{
+/* --- Estrutura Geral --- */
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  margin-top: 10px;
-  width: 100%;
-}
-
 .calendario {
   border-collapse: collapse;
   width: 100%;
   border-radius: 10px;
   overflow: hidden;
-  box-shadow: 0 4px 12px rgb(255, 255, 255);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  border: 10px solid #ffffffc5;
+  border: 1px solid #eee;
-  background-color: rgb(253, 253, 253);
+  background-color: #ffffff;
-  display: flex;
-  flex-direction: column;
 }
 
 .calendario-ou-filaespera {
@@ -168,22 +133,19 @@
   margin-left: 20px;
 }
 
-.btn-fila-espera, .btn-agenda{
+.btn-fila-espera,
+.btn-agenda {
   background-color: transparent;
   border: 0px;
-  border-bottom: 3px solid rgb(253, 253, 253);
+  border-bottom: 3px solid transparent;
   padding: 8px;
   border-radius: 10px 10px 0px 0px;
   font-weight: bold;
+  cursor: pointer;
 }
 
-.opc-filaespera-ativo, .opc-agenda-ativo{
+.opc-filaespera-ativo,
+.opc-agenda-ativo {
   color: white;
   background-color: #5980fd;
 }
-.btn-fila-espera:hover, .btn-agenda:hover{
-  cursor: pointer;
-  background-color: #5980fd;
-  color: white;
-  border-bottom: 3px solid white;
-}

src/PagesMedico/styleMedico/FilaEspera.css

@@ -1,194 +1,3 @@
-/* Zera margens padrão da página */
-html, body {
-  margin: 0;
-  padding: 0;
-}
-
-/* ----- filtros e botões ----- */
-.filtros-container select,
-.filtros-container input {
-  padding: 0.5rem;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-}
-
-.btn-buscar {
-  padding: 0.5rem 1rem;
-  margin-right: 0.5rem;
-  border: none;
-  border-radius: 5px;
-  background-color: #f0f0f0;
-  cursor: pointer;
-}
-
-/* ----- unidade/profissional ----- */
-.unidade-selecionarprofissional {
-  background-color: #fdfdfdde;
-  padding: 20px 10px;
-  display: flex;
-  border-radius: 10px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.unidade-selecionarprofissional input,
-.unidade-selecionarprofissional select {
-  margin-left: 8px;
-  border-radius: 8px;
-  padding: 5px;
-  width: 20%;
-}
-
-.unidade-selecionarprofissional select {
-  width: 7%;
-}
-
-/* ----- busca atendimento ----- */
-.busca-atendimento {
-  display: flex;
-  flex-direction: row;
-  margin: 10px;
-  justify-content: flex-end;
-}
-
-.busca-atendimento select {
-  padding: 5px;
-  border-radius: 8px;
-  margin-left: 15px;
-  background-color: #0078d7;
-  color: white;
-  font-weight: bold;
-}
-
-.busca-atendimento input {
-  margin-left: 8px;
-  border-radius: 8px;
-  padding: 5px;
-  width: 100%;
-}
-
-/* ----- botões de seleção ----- */
-.btn-selecionar-tabeladia,
-.btn-selecionar-tabelasemana,
-.btn-selecionar-tabelames {
-  background-color: rgba(231, 231, 231, 0.808);
-  padding: 8px 10px;
-  font-size: larger;
-  font-weight: bold;
-  border-style: hidden;
-}
-
-.btn-selecionar-tabeladia {
-  border-radius: 10px 0 0 10px;
-}
-
-.btn-selecionar-tabelames {
-  border-radius: 0 10px 10px 0;
-}
-
-.btn-selecionar-tabeladia.ativo,
-.btn-selecionar-tabelasemana.ativo,
-.btn-selecionar-tabelames.ativo {
-  background-color: lightcyan;
-  border-color: darkcyan;
-  font-weight: bolder;
-}
-
-.btns-e-legenda-container {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  margin-top: 10px;
-}
-
-/* ----- legenda ----- */
-.legenda-tabela {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  gap: 15px;
-}
-
-.legenda-item-realizado { background-color: #2c5e37; }
-.legenda-item-confirmado { background-color: #1e90ff; }
-.legenda-item-cancelado  { background-color: #d9534f; }
-.legenda-item-agendado   { background-color: #f0ad4e; }
-
-#status-card-consulta-realizado,
-.legenda-item-realizado {
-  background-color: #b7ffbd;
-  border: 3px solid #91d392;
-  padding: 5px;
-  font-weight: bold;
-  border-radius: 10px;
-}
-
-#status-card-consulta-cancelado,
-.legenda-item-cancelado {
-  background-color: #ffb7cc;
-  border: 3px solid #ff6c84;
-  padding: 5px;
-  font-weight: bold;
-  border-radius: 10px;
-}
-
-#status-card-consulta-confirmado,
-.legenda-item-confirmado {
-  background-color: #eef8fb;
-  border: 3px solid #d8dfe7;
-  padding: 5px;
-  font-weight: bold;
-  border-radius: 10px;
-}
-
-#status-card-consulta-agendado,
-.legenda-item-agendado {
-  background-color: #f7f7c4;
-  border: 3px solid #f3ce67;
-  padding: 5px;
-  font-weight: bold;
-  border-radius: 10px;
-}
-
-/* ----- calendário ----- */
-.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: 0;
-  border-bottom: 3px solid rgb(253, 253, 253);
-  padding: 8px;
-  border-radius: 10px 10px 0 0;
-  font-weight: bold;
-}
-
-.opc-filaespera-ativo,
-.opc-agenda-ativo {
-  color: white;
-  background-color: #5980fd;
-}
-
 /* ===== Fila de Espera ===== */
 .fila-container {
   width: 100%;

src/PagesMedico/styleMedico/chat.css

@@ -0,0 +1,298 @@
+/* --- Variáveis de Estilo Globais --- */
+:root {
+  --cor-fundo-app: #F9FAFB;
+  --cor-fundo-sidebar: #FFFFFF;
+  --cor-fundo-chat: #F9FAFB;
+  --cor-borda: #E5E7EB;
+  --cor-texto-principal: #1F2937;
+  --cor-texto-secundario: #6B7280;
+  --cor-primaria: #3B82F6; /* Azul */
+  --cor-primaria-hover: #2563EB;
+  --cor-destaque: #EF4444; /* Vermelho para notificações */
+  --cor-online: #10B981; /* Verde */
+
+  --font-principal: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* --- Estilo Base e Container Principal --- */
+.chat-app-container {
+  display: flex;
+  height: 100vh;
+  background-color: var(--cor-fundo-app);
+  font-family: var(--font-principal);
+  color: var(--cor-texto-principal);
+}
+
+/* --- Barra Lateral (Sidebar) --- */
+.sidebar {
+  width: 30%;
+  min-width: 320px;
+  max-width: 400px;
+  height: 100%;
+  background-color: var(--cor-fundo-sidebar);
+  border-right: 1px solid var(--cor-borda);
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--cor-borda);
+  position: sticky;
+  top: 0;
+  background-color: var(--cor-fundo-sidebar);
+  z-index: 10;
+}
+
+.sidebar-header h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.search-container {
+  position: relative;
+  margin-top: 1rem;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.5rem 0.5rem 0.5rem 2.5rem; /* Espaço para o ícone */
+  border: 1px solid #D1D5DB;
+  border-radius: 0.5rem;
+  outline: none;
+  transition: box-shadow 0.2s;
+}
+.search-input:focus {
+  box-shadow: 0 0 0 2px var(--cor-primaria);
+}
+
+.search-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--cor-texto-secundario);
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.conversation-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+/* --- Item da Lista de Conversas --- */
+.conversation-item {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.conversation-item:hover {
+  background-color: #F3F4F6;
+}
+
+.conversation-item.active {
+  background-color: var(--cor-primaria);
+  color: white;
+}
+
+.avatar {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 9999px;
+  margin-right: 1rem;
+}
+
+.conversation-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.conversation-header, .conversation-body {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.patient-name {
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.timestamp {
+  font-size: 0.75rem;
+  color: var(--cor-texto-secundario);
+}
+.conversation-item.active .timestamp {
+  color: #D1D5DB;
+}
+
+.last-message {
+  font-size: 0.875rem;
+  color: var(--cor-texto-secundario);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 0.5rem;
+}
+.conversation-item.active .last-message {
+  color: #E5E7EB;
+}
+
+.unread-badge {
+  background-color: var(--cor-destaque);
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 700;
+  border-radius: 9999px;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* --- Janela Principal do Chat --- */
+.main-chat {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid var(--cor-borda);
+  background-color: var(--cor-fundo-sidebar);
+}
+.chat-patient-name {
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+.chat-status {
+  font-size: 0.875rem;
+  color: var(--cor-online);
+}
+
+.messages-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+  background-color: var(--cor-fundo-chat);
+}
+
+.message-footer {
+  padding: 1rem;
+  background-color: var(--cor-fundo-sidebar);
+  border-top: 1px solid var(--cor-borda);
+}
+
+.message-form {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.message-input {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: 1px solid #D1D5DB;
+  border-radius: 9999px;
+  outline: none;
+  transition: box-shadow 0.2s;
+}
+.message-input:focus {
+  box-shadow: 0 0 0 2px var(--cor-primaria);
+}
+
+.send-button {
+  background-color: var(--cor-primaria);
+  color: white;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: background-color 0.2s, transform 0.1s;
+}
+.send-button:hover {
+  background-color: var(--cor-primaria-hover);
+}
+.send-button:active {
+  transform: scale(0.95);
+}
+
+.send-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  transform: rotate(90deg);
+}
+
+/* --- Balões de Mensagem --- */
+.message-container {
+  display: flex;
+  margin: 0.5rem 0;
+}
+.message-container.sent {
+  justify-content: flex-end;
+}
+.message-container.received {
+  justify-content: flex-start;
+}
+
+.message-bubble {
+  max-width: 75%;
+  padding: 0.75rem 1rem;
+  border-radius: 1.25rem;
+}
+.message-text {
+  font-size: 0.875rem;
+}
+.message-time {
+  font-size: 0.75rem;
+  text-align: right;
+  margin-top: 0.25rem;
+  opacity: 0.7;
+}
+
+.message-container.sent .message-bubble {
+  background-color: var(--cor-primaria);
+  color: white;
+  border-bottom-right-radius: 0.25rem;
+}
+
+.message-container.received .message-bubble {
+  background-color: #E5E7EB;
+  color: var(--cor-texto-principal);
+  border-bottom-left-radius: 0.25rem;
+}
+
+/* --- Estado Vazio --- */
+.no-conversation-selected {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--cor-texto-secundario);
+}
+
+/* --- Responsividade --- */
+@media (max-width: 768px) {
+  .main-chat {
+    display: none;
+  }
+  .sidebar {
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+  }
+}

src/PagesMedico/styleMedico/dia.css

@@ -1,81 +0,0 @@
-.tabeladiaria {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 2rem 0;
-  border-radius: 10px;
-  overflow: hidden; /* mantém o arredondado */
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
-}
-
-/* Células da tabela */
-.tabeladiaria th, .tabeladiaria td {
-  padding: 9px;
-  text-align: left;
-  border: 1px solid #e0e0e0;
-}
-
-/* Cabeçalho */
-.tabeladiaria thead th {
-  background-color: #0078d7;
-  color: #ffffff;
-font-weight: 600;
-  border-bottom: 2px solid #005a9e; /* borda inferior mais forte no cabeçalho */
-}
-
-/* Remover bordas laterais do cabeçalho (se quiser) */
-.tabeladiaria thead th:first-child {
-  border-left: none;
-}
-
-.tabeladiaria thead th:last-child {
-  border-right: none;
-}
-
-/* Linhas pares do corpo */
-.tabeladiaria tbody tr:nth-child(even) {
-  background-color: #e7e7e7a6;
-}
-
-/* Hover nas linhas */
-.tabeladiaria tbody tr:hover {
-  background-color: #f1f1f1;
-}
-
-/* Card dentro da tabela */
-.tabeladiaria .cardconsulta {
-  border-radius: 10px;
-  color: black;
-  height: 80px;
-  width: 100%;
-  padding: 8px;
-}
-
-/* Ajuste para a classe calendario, se for usada */
-/*
-.calendario {
-  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);
-}*/
-
-
-.mostrar-horario td, .mostrar-horario th {
-  padding: 4px 6px;
-  height: 30px;
-  border: 1px solid #e0e0e0;
-  text-align: center;
-}
-
-.container-cardconsulta-dia {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  height: 70px;
-}

src/PagesMedico/styleMedico/geral.css

@@ -1,126 +1,189 @@
-.prontuario-container {
+/* --- Estilos Gerais e Reset Básico --- */
-  max-width: 1000px;          /* mais largo para caber as colunas */
+:root {
-  margin: 40px auto;
+  --cor-primaria: #0078d7; /* Azul principal */
-  padding: 24px;
+  --cor-fundo: #f4f7f9;     /* Cinza bem claro para o fundo da página */
-  background: #f7fbff;
+  --cor-card: #ffffff;      /* Branco para os cards */
-  border: 1px solid #dbe9f6;
+  --cor-texto: #333333;      /* Cor principal do texto */
-  border-radius: 12px;
+  --cor-borda: #e1e5e8;    /* Cor suave para bordas */
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  --sombra-card: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra sutil */
-  font-family: Arial, sans-serif;
-  color: #333;
 }
 
-.prontuario-container h1 {
+* {
-  text-align: center;
+  box-sizing: border-box;
-  font-size: 2rem;
-  margin-bottom: 24px;
-  color: #004c7f;
-}
-
-/* ---- AQUI É O TRUQUE ---- */
-.prontuario-sections {
-  display: flex;              /* ativa flexbox */
-  gap: 24px;                  /* espaço entre as colunas */
-  justify-content: space-between;
-}
-
-/* cada seção vira uma “coluna” */
-.prontuario-section {
-  flex: 1;                    /* cada coluna ocupa o mesmo espaço */
-  background: #ffffff;
-  border: 1px solid #dbe9f6;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
-}
-
-.prontuario-section h2 {
-  font-size: 1.3rem;
-  margin-bottom: 12px;
-  color: #0064a3;
-  border-bottom: 1px solid #dbe9f6;
-  padding-bottom: 4px;
-}
-
-.prontuario-section p,
-.prontuario-section li {
-  margin: 6px 0;
-  line-height: 1.4;
-}
-
-.prontuario-section ul {
-  list-style: disc inside;
   margin: 0;
   padding: 0;
 }
 
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background-color: var(--cor-fundo);
+  color: var(--cor-texto);
+}
+
+h1 {
+  color: var(--cor-primaria);
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid var(--cor-borda);
+  font-size: 1.8rem;
+}
+
+h2 {
+  color: var(--cor-texto);
+  margin-bottom: 15px;
+  font-size: 1.3rem;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 8px;
+}
+
+/* --- Estilos da Página de Prontuários --- */
+
+.prontuario-container {
+  background-color: var(--cor-card);
+  border-radius: 10px;
+  box-shadow: var(--sombra-card);
+  margin: 2rem;
+  padding: 2rem;
+  border: 1px solid var(--cor-borda);
+}
+
+.prontuario-sections {
+  display: flex;
+  gap: 2rem;
+  flex-wrap: wrap; /* Permite que as seções quebrem a linha em telas menores */
+}
+
+.prontuario-section {
+  flex: 1; /* Faz com que as seções dividam o espaço igualmente */
+  min-width: 300px; /* Largura mínima antes de quebrar a linha */
+  background-color: #fdfdfd;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+.prontuario-section ul {
+  list-style-type: none; /* Remove os marcadores da lista */
+}
+
+.prontuario-section li {
+  padding: 10px 0;
+  border-bottom: 1px solid #f0f0f0; /* Linha separadora entre os itens */
+}
+
+.prontuario-section li:last-child {
+  border-bottom: none; /* Remove a linha do último item */
+}
+
+.prontuario-section p {
+  line-height: 1.6;
+  margin-bottom: 10px;
+}
+
+.prontuario-section strong {
+  color: #555;
+}
+
+
+/* --- Estilos da Página de Relatórios --- */
 
 .relatorios-container {
-  max-width: 900px;
+  background-color: var(--cor-card);
-  margin: 40px auto;
+  border-radius: 10px;
-  background: #fff;
+  box-shadow: var(--sombra-card);
-  padding: 32px;
+  margin: 2rem;
-  border-radius: 12px;
+  padding: 2rem;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
+  border: 1px solid var(--cor-borda);
 }
 
 .filtros-container {
   display: flex;
-  gap: 24px;
-  margin-bottom: 24px;
   flex-wrap: wrap;
+  gap: 20px;
+  align-items: flex-end; /* Alinha os itens na base, fica ótimo com o botão */
+  background-color: #f8f9fa;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+  border: 1px solid var(--cor-borda);
 }
 
 .filtro-item {
   display: flex;
   flex-direction: column;
+  gap: 5px;
+  flex: 1;
   min-width: 180px;
 }
 
 .filtro-item label {
-  margin-bottom: 6px;
+  font-weight: 600;
-  font-weight: 500;
+  font-size: 0.9em;
+  color: #555;
+}
+
+.filtro-item input[type="date"],
+.filtro-item select {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 1rem;
+  width: 100%;
 }
 
 .btn-gerar {
-  align-self: flex-end;
+  padding: 10px 25px;
-  padding: 8px 20px;
+  background-color: var(--cor-primaria);
-  background: #1976d2;
+  color: white;
-  color: #fff;
   border: none;
-  border-radius: 6px;
+  border-radius: 5px;
-  cursor: pointer;
+  font-size: 1rem;
   font-weight: bold;
-  margin-top: 22px;
+  cursor: pointer;
-  transition: background 0.2s;
+  transition: background-color 0.2s ease;
 }
 
 .btn-gerar:hover {
-  background: #125ea7;
+  background-color: #005a9e; /* Um tom de azul mais escuro */
 }
 
 .resultado-container {
-  margin-top: 32px;
+  margin-top: 2rem;
 }
 
 .info-text {
-  color: #888;
+  text-align: center;
+  padding: 2rem;
+  color: #777;
   font-style: italic;
+  background-color: #f8f9fa;
+  border-radius: 8px;
 }
 
+/* Estilização da Tabela de Resultados */
 table {
   width: 100%;
   border-collapse: collapse;
-  margin-top: 12px;
+  margin-top: 1rem;
 }
 
-th, td {
+thead th {
-  border: 1px solid #e0e0e0;
+  background-color: var(--cor-primaria);
-  padding: 10px 8px;
+  color: white;
+  font-weight: 600;
+  padding: 12px;
   text-align: left;
 }
 
-th {
+tbody tr:nth-child(even) {
-  background: #f5f5f5;
+  background-color: #f8f9fa; /* Linhas zebradas */
-  font-weight: bold;
+}
+
+tbody tr:hover {
+  background-color: #e9ecef; /* Efeito ao passar o mouse */
+}
+
+td {
+  padding: 12px;
+  border-bottom: 1px solid var(--cor-borda);
 }

src/data/sidebar-items-medico.json

@@ -21,6 +21,11 @@
     "icon": "table",
     "url": "/laudo"
   },
+{
+  "name": "Agendamento Médico",
+  "icon": "calendar",
+  "url": "/agendamentoMedico"
+},
 
  {
     "name": "Relatórios",
@@ -28,14 +33,6 @@
     "url": "/relatorios"
   },
 
-  {
-    "name": "Agendamentos",
-    "icon": "calendar-plus-fill",
-    "url": "/agendamento"
-  },
-
- 
-
    {
     "name": " Chat com pacientes",
     "icon": "chat-dots-fill",

src/perfis/Perfil_medico/PerfilMedico.jsx

@@ -2,10 +2,12 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Sidebar from "../../components/Sidebar";
 
 import Inicio from "../../pages/Inicio";
-import Agendamento from "../../pages/Agendamento";
 import LaudoManager from "../../pages/LaudoManager";
 import Prontuario from "../../PagesMedico/prontuario";
 import Relatorio from "../../PagesMedico/relatorio";
+import Agendamento from "../../PagesMedico/Agendamento";
+import Chat from "../../PagesMedico/Chat";
+// ...existing code...
 
 function PerfilMedico() {
   return (
@@ -15,10 +17,11 @@ function PerfilMedico() {
         <div id="main">
           <Routes>
             <Route path="/" element={<Inicio />} />
-            <Route path="/agendamento" element={<Agendamento />} />
             <Route path="/laudo" element={<LaudoManager />} />
             <Route path="/prontuario" element={<Prontuario />} />
             <Route path="/relatorios" element={<Relatorio />} />
+            <Route path="/agendamentoMedico" element={<Agendamento />} />
+            <Route path="/chat" element={<Chat />} /> {/* <-- nova rota */}
           </Routes>
         </div>
       </div>