diff --git a/src/PagesMedico/Agendamento.jsx b/src/PagesMedico/Agendamento.jsx index 3120a4b..e0afc24 100644 --- a/src/PagesMedico/Agendamento.jsx +++ b/src/PagesMedico/Agendamento.jsx @@ -1,23 +1,19 @@ -import React, { useState } from 'react'; +import React, { useState, useMemo } from "react"; +import dayjs from "dayjs"; -import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia'; -import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana'; -import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes'; -import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta'; +// Importe os componentes que você está usando +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'; -import './styleMedico/Agendamento.css'; -import './styleMedico/FilaEspera.css'; +// Importe os estilos +import "./styleMedico/Agendamento.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 = [ +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' }, @@ -26,183 +22,188 @@ const Agendamento = () => { { 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' }, - ]; +]; - // 🔹 Filtra a fila de espera com base no searchTerm - const filteredFila = filaEsperaData.filter(item => - item.nome.toLowerCase().includes(searchTerm.toLowerCase()) || - item.email.toLowerCase().includes(searchTerm.toLowerCase()) || - item.cpf.includes(searchTerm) || - item.telefone.includes(searchTerm) - ); +const ListarDiasdoMes = (ano, mes) => { + const diasDaSemana = [[], [], [], [], [], [], []]; // 0: Domingo, 1: Segunda, ... + const base = dayjs(`${ano}-${mes}-01`); + const diasNoMes = base.daysInMonth(); - 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 - } + 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); } - let ListaDiasDatas = [segundas, tercas, quartas, quintas, sextas] - return ListaDiasDatas - } + // 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 + ]; +}; - const handleClickAgendamento = (agendamento) => { - if (agendamento.status !== 'vazio') return - else setPageConsulta(true) - } - const handleClickCancel = () => setPageConsulta(false) +// --- COMPONENTE PRINCIPAL --- - return ( -
-

Agendamentos

+const Agendamento = () => { + const [FiladeEspera, setFiladeEspera] = useState(false); + const [tabela, setTabela] = useState('diario'); + const [PageNovaConsulta, setPageConsulta] = useState(false); + const [searchTerm, setSearchTerm] = useState(''); - {!PageNovaConsulta ? ( + 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]); -
- - {/* Botões para alternar Agenda / Fila de Espera */} -
- + const handleClickAgendamento = (agendamento) => { + if (agendamento.status !== 'vazio') return; + setPageConsulta(true); + }; - -
+ const handleClickCancel = () => setPageConsulta(false); -
- {FiladeEspera === false ? - ( -
-
-
-
- + return ( +
+

Agendar nova consulta

- - - -
- -
-
Realizado
-
Confirmado
-
Agendado
-
Cancelado
-
-
+ {!PageNovaConsulta ? ( +
- {/* --- BARRA DE PESQUISA MOVIDA PARA CÁ --- */} -
-
- - -
+ {/* ✅ BARRA DE BUSCA E FILTRO FOI MOVIDA PARA DENTRO DO CALENDÁRIO */} -
- + + + + -
+
- {/* --- FIM DA BARRA DE PESQUISA --- */} + */} - {tabela === "diario" && } - {tabela === 'semanal' && } - {tabela === 'mensal' && } -
-
- ) - : - ( -
-
- setSearchTerm(e.target.value)} - /> + {/* Botões para alternar Agenda / Fila de Espera */} +
+ + +
-

Fila de Espera

-
- - - - - - - - - - - - {filteredFila.map((item, index) => ( - - - - - - - - ))} - -
NomeEmailCPFTelefoneEntrou na fila de espera
{item.nome}{item.email}{item.cpf}{item.telefone}{item.entrada}
+
+ {!FiladeEspera ? ( +
+
+
+
+ + + +
+
+
Realizado
+
Confirmado
+
Agendado
+
Cancelado
+
+
+ + {/* ✅ BARRA DE BUSCA MOVIDA PARA CÁ */} +
+
+ + +
+
+ +
+
+ + {tabela === "diario" && } + {tabela === 'semanal' && } + {tabela === 'mensal' && } +
+
+ ) : ( +
+
+ setSearchTerm(e.target.value)} + /> +

Fila de Espera

+
+ + + + + + + + + + + + {filteredFila.map((item, index) => ( + + + + + + + + ))} + +
NomeEmailCPFTelefoneEntrou na fila de espera
{item.nome}{item.email}{item.cpf}{item.telefone}{item.entrada}
+
+ )} +
- ) - } -
+ ) : ( + + )}
- - ) : ( - - )} -
- ) -} + ); +}; export default Agendamento; \ No newline at end of file diff --git a/src/PagesMedico/Chat.jsx b/src/PagesMedico/Chat.jsx new file mode 100644 index 0000000..7ba817b --- /dev/null +++ b/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 }) => ( +
+ {conversation.patientName} +
+
+

{conversation.patientName}

+ {conversation.timestamp} +
+
+

{conversation.lastMessage}

+ {conversation.unread > 0 && ( + {conversation.unread} + )} +
+
+
+); + +const ChatMessage = ({ message, isDoctor }) => ( +
+
+

{message.text}

+

{message.time}

+
+
+); + +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 ( +
+ {/* Barra Lateral de Conversas */} + + + {/* Painel Principal do Chat */} +
+ {activeConversation ? ( + <> +
+ {activeConversation.patientName} +
+

{activeConversation.patientName}

+

Online

+
+
+
+ {activeConversation.messages.map(msg => ( + + ))} +
+
+
+
+ setNewMessage(e.target.value)} + placeholder="Digite sua mensagem..." + className="message-input" + autoComplete="off" + /> + +
+
+ + ) : ( +
+

Selecione uma conversa para começar.

+
+ )} +
+
+ ); +}; + +export default App; + diff --git a/src/PagesMedico/styleMedico/Agendamento.css b/src/PagesMedico/styleMedico/Agendamento.css index 3d30577..6b887ab 100644 --- a/src/PagesMedico/styleMedico/Agendamento.css +++ b/src/PagesMedico/styleMedico/Agendamento.css @@ -1,58 +1,32 @@ -.filtros-container select, -.filtros-container input { - padding: 0.5rem; - border-radius: 5px; - border: 1px solid #ccc; +/* --- Esconde a barra de unidade e profissional --- */ +.unidade-selecionarprofissional { + display: none; } -.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; - 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%; -} - -/* --- BARRA DE PESQUISA DIREITA --- */ +/* --- Posiciona a barra de busca corretamente --- */ .busca-atendimento { - display: flex; /* Mantém itens internos flexíveis */ - justify-content: flex-start; - align-items: center; - width: 100%; - margin-top: 20px; - padding: 0 10px; - box-sizing: border-box; + display: flex; + align-items: center; /* Alinha os itens verticalmente */ + margin-top: 20px; /* Espaço acima da barra de busca */ + padding: 0 10px; /* Adiciona um padding lateral para alinhar com o resto */ + gap: 15px; } .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 select{ +.busca-atendimento input { + margin-left: 8px; + border-radius: 8px; + padding: 8px; + width: 100%; + border: 1px solid #ccc; +} + +.busca-atendimento select { padding: 8px; border-radius: 8px; background-color: #0078d7; @@ -61,52 +35,52 @@ border: none; } -.busca-atendimento input{ - margin-left: 8px; - border-radius: 8px; - padding: 8px; - width: 100%; - border: 1px solid #ccc; -} -/* --- FIM BARRA DE PESQUISA --- */ - -.btn-selecionar-tabeladia, -.btn-selecionar-tabelasemana, +/* --- Estilos dos botões de Dia, Semana, Mês --- */ +.btn-selecionar-tabeladia, +.btn-selecionar-tabelasemana, .btn-selecionar-tabelames { background-color: rgba(231, 231, 231, 0.808); - padding:8px 10px; + padding: 8px 10px; font-size: larger; font-weight: bold; border-style: hidden; + cursor: pointer; } -.btn-selecionar-tabeladia{ +.btn-selecionar-tabeladia { border-radius: 10px 0px 0px 10px; } -.btn-selecionar-tabelames{ +.btn-selecionar-tabelames { border-radius: 0px 10px 10px 0px; } -.btn-selecionar-tabeladia.ativo, -.btn-selecionar-tabelasemana.ativo, -.btn-selecionar-tabelames.ativo{ +.btn-selecionar-tabeladia.ativo, +.btn-selecionar-tabelasemana.ativo, +.btn-selecionar-tabelames.ativo { background-color: lightcyan; border-color: darkcyan; font-weight: bolder; } -.legenda-tabela{ +/* --- 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 { background-color: #b7ffbd; - border:3px solid #91d392; + border: 3px solid #91d392; padding: 5px; font-weight: bold; border-radius: 10px; @@ -114,7 +88,7 @@ #status-card-consulta-cancelado, .legenda-item-cancelado { background-color: #ffb7cc; - border:3px solid #ff6c84; + border: 3px solid #ff6c84; padding: 5px; font-weight: bold; border-radius: 10px; @@ -122,7 +96,7 @@ #status-card-consulta-confirmado, .legenda-item-confirmado { background-color: #eef8fb; - border:3px solid #d8dfe7; + border: 3px solid #d8dfe7; padding: 5px; font-weight: bold; border-radius: 10px; @@ -130,60 +104,48 @@ #status-card-consulta-agendado, .legenda-item-agendado { background-color: #f7f7c4; - border:3px solid #f3ce67; + border: 3px solid #f3ce67; padding: 5px; font-weight: bold; border-radius: 10px; } -.btns-e-legenda-container{ - display: flex; - justify-content: space-between; - flex-direction: row; - margin-top: 10px; - width: 100%; -} - +/* --- Estrutura Geral --- */ .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); - display: flex; - flex-direction: column; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + border: 1px solid #eee; + background-color: #ffffff; } -.calendario-ou-filaespera{ +.calendario-ou-filaespera { margin-top: 0; } -.container-btns-agenda-fila_esepera{ +.container-btns-agenda-fila_esepera { margin-top: 30px; display: flex; flex-direction: row; gap: 20px; - margin-left:20px; + 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: 0px; + 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; } \ No newline at end of file diff --git a/src/PagesMedico/styleMedico/FilaEspera.css b/src/PagesMedico/styleMedico/FilaEspera.css index 3cdc41a..e27086b 100644 --- a/src/PagesMedico/styleMedico/FilaEspera.css +++ b/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%; diff --git a/src/PagesMedico/styleMedico/chat.css b/src/PagesMedico/styleMedico/chat.css new file mode 100644 index 0000000..3f6042c --- /dev/null +++ b/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%; + } +} diff --git a/src/PagesMedico/styleMedico/dia.css b/src/PagesMedico/styleMedico/dia.css deleted file mode 100644 index a242ba0..0000000 --- a/src/PagesMedico/styleMedico/dia.css +++ /dev/null @@ -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; -} diff --git a/src/PagesMedico/styleMedico/geral.css b/src/PagesMedico/styleMedico/geral.css index a908af2..94918bd 100644 --- a/src/PagesMedico/styleMedico/geral.css +++ b/src/PagesMedico/styleMedico/geral.css @@ -1,126 +1,189 @@ -.prontuario-container { - max-width: 1000px; /* mais largo para caber as colunas */ - margin: 40px auto; - padding: 24px; - background: #f7fbff; - border: 1px solid #dbe9f6; - border-radius: 12px; - box-shadow: 0 4px 12px rgba(0,0,0,0.08); - font-family: Arial, sans-serif; - color: #333; +/* --- Estilos Gerais e Reset Básico --- */ +:root { + --cor-primaria: #0078d7; /* Azul principal */ + --cor-fundo: #f4f7f9; /* Cinza bem claro para o fundo da página */ + --cor-card: #ffffff; /* Branco para os cards */ + --cor-texto: #333333; /* Cor principal do texto */ + --cor-borda: #e1e5e8; /* Cor suave para bordas */ + --sombra-card: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra sutil */ } -.prontuario-container h1 { - text-align: center; - 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; +* { + box-sizing: border-box; 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; - margin: 40px auto; - background: #fff; - padding: 32px; - border-radius: 12px; - box-shadow: 0 2px 12px rgba(0,0,0,0.07); + background-color: var(--cor-card); + border-radius: 10px; + box-shadow: var(--sombra-card); + margin: 2rem; + padding: 2rem; + 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: 500; + font-weight: 600; + 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: 8px 20px; - background: #1976d2; - color: #fff; + padding: 10px 25px; + background-color: var(--cor-primaria); + color: white; border: none; - border-radius: 6px; - cursor: pointer; + border-radius: 5px; + font-size: 1rem; font-weight: bold; - margin-top: 22px; - transition: background 0.2s; + cursor: pointer; + 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 { - border: 1px solid #e0e0e0; - padding: 10px 8px; +thead th { + background-color: var(--cor-primaria); + color: white; + font-weight: 600; + padding: 12px; text-align: left; } -th { - background: #f5f5f5; - font-weight: bold; +tbody tr:nth-child(even) { + background-color: #f8f9fa; /* Linhas zebradas */ +} + +tbody tr:hover { + background-color: #e9ecef; /* Efeito ao passar o mouse */ +} + +td { + padding: 12px; + border-bottom: 1px solid var(--cor-borda); } \ No newline at end of file diff --git a/src/data/sidebar-items-medico.json b/src/data/sidebar-items-medico.json index 5971667..d2ce2a7 100644 --- a/src/data/sidebar-items-medico.json +++ b/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", diff --git a/src/perfis/Perfil_medico/PerfilMedico.jsx b/src/perfis/Perfil_medico/PerfilMedico.jsx index 1e539cc..6defe53 100644 --- a/src/perfis/Perfil_medico/PerfilMedico.jsx +++ b/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() {
} /> - } /> } /> } /> } /> + } /> + } /> {/* <-- nova rota */}