From 0b1d04b7e62eceeebe740de1c5980028a908e0e0 Mon Sep 17 00:00:00 2001 From: RafaelMTA13 Date: Fri, 26 Sep 2025 19:12:16 -0300 Subject: [PATCH] prototipo de interface medica --- src/App.js | 5 +- src/PagesMedico/Agendamento.jsx | 208 +++++++++++++ src/PagesMedico/InicioMedico.jsx | 139 +++++++++ src/PagesMedico/prontuario.jsx | 123 ++++++++ src/PagesMedico/relatorio.jsx | 115 +++++++ src/PagesMedico/styleMedico/Agendamento.css | 189 ++++++++++++ src/PagesMedico/styleMedico/FilaEspera.css | 288 ++++++++++++++++++ src/PagesMedico/styleMedico/dia.css | 81 +++++ src/PagesMedico/styleMedico/geral.css | 126 ++++++++ src/components/Sidebar.jsx | 2 +- src/data/sidebar-items-medico.json | 48 +++ ...ems.json => sidebar-items-secretaria.json} | 95 +++--- src/pages/style/Agendamento.css | 2 +- src/perfis/Perfil_medico/PerfilMedico.jsx | 29 ++ .../perfil_secretaria/PerfilSecretaria.jsx | 3 +- 15 files changed, 1400 insertions(+), 53 deletions(-) create mode 100644 src/PagesMedico/Agendamento.jsx create mode 100644 src/PagesMedico/InicioMedico.jsx create mode 100644 src/PagesMedico/prontuario.jsx create mode 100644 src/PagesMedico/relatorio.jsx create mode 100644 src/PagesMedico/styleMedico/Agendamento.css create mode 100644 src/PagesMedico/styleMedico/FilaEspera.css create mode 100644 src/PagesMedico/styleMedico/dia.css create mode 100644 src/PagesMedico/styleMedico/geral.css create mode 100644 src/data/sidebar-items-medico.json rename src/data/{sidebar-items.json => sidebar-items-secretaria.json} (93%) create mode 100644 src/perfis/Perfil_medico/PerfilMedico.jsx diff --git a/src/App.js b/src/App.js index f6a3fe9..d232aea 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,11 @@ -import PerfilSecretaria from "./perfis/perfil_secretaria/PerfilSecretaria"; +import PerfilMedico from "./perfis/Perfil_medico/PerfilMedico"; //Mude para (import PerfilMedico from "./perfis/perfil_secretaria/PerfilSecretaria";) para ve a secretaria + function App() { return ( <> - + ); } diff --git a/src/PagesMedico/Agendamento.jsx b/src/PagesMedico/Agendamento.jsx new file mode 100644 index 0000000..3120a4b --- /dev/null +++ b/src/PagesMedico/Agendamento.jsx @@ -0,0 +1,208 @@ +import React, { useState } 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'; +import './styleMedico/Agendamento.css'; +import './styleMedico/FilaEspera.css'; + +const Agendamento = () => { + + 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' }, + { nome: 'Lucas Martins', email: 'lucas.martins@gmail.com', cpf: '777.666.555-33', telefone: '(79) 99654-3210', entrada: '25/09/2025 às 09:00' }, + { nome: 'João Souza', email: 'joao.souza@gmail.com', cpf: '987.654.321-00', telefone: '(79) 98888-2222', entrada: '25/09/2025 às 14:00' }, + { nome: 'Maria Silva', email: 'maria.silva@gmail.com', cpf: '123.456.789-00', telefone: '(79) 99999-1111', entrada: '25/09/2025 às 14:30' }, + { 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) => { + 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 + else setPageConsulta(true) + } + + const handleClickCancel = () => setPageConsulta(false) + + return ( +
+

Agendamentos

+ + {!PageNovaConsulta ? ( + +
+ + {/* Botões para alternar Agenda / Fila de Espera */} +
+ + + +
+ +
+ {FiladeEspera === false ? + ( +
+
+
+
+ + + + + +
+ +
+
Realizado
+
Confirmado
+
Agendado
+
Cancelado
+
+
+ + {/* --- BARRA DE PESQUISA MOVIDA PARA CÁ --- */} +
+
+ + +
+ +
+ +
+
+ {/* --- FIM DA BARRA DE PESQUISA --- */} + + {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/InicioMedico.jsx b/src/PagesMedico/InicioMedico.jsx new file mode 100644 index 0000000..dc47fae --- /dev/null +++ b/src/PagesMedico/InicioMedico.jsx @@ -0,0 +1,139 @@ +import React, { useState, useEffect } from 'react'; +import { FaUser, FaUserPlus, FaCalendarAlt, FaCalendarCheck } from 'react-icons/fa'; +import './style/Inicio.css'; + +function Inicio({ setCurrentPage }) { + const [pacientes, setPacientes] = useState([]); + const [agendamentos, setAgendamentos] = useState([]); + + useEffect(() => { + const fetchPacientes = async () => { + try { + const res = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes"); + const data = await res.json(); + console.log(data) + //setPacientes(data.data); + } catch (error) { + console.error("Erro ao buscar pacientes:", error); + } + }; + + const fetchAgendamentos = async () => { + return; // <===serve para que nao cause erro + // try { + // const res = await fetch(); + // const data = await res.json(); + // setAgendamentos(data.data); + // } catch (error) { + // console.error("Erro ao buscar agendamentos:", error); + // } + }; + + fetchPacientes(); + fetchAgendamentos(); + }, []); + + const totalPacientes = pacientes.length; + const novosEsseMes = pacientes.filter(p => p.createdAt && new Date(p.createdAt).getMonth() === new Date().getMonth()).length; + + const hoje = new Date(); + const agendamentosDoDia = agendamentos.filter( + a => a.data && new Date(a.data).getDate() === hoje.getDate() + ); + const agendamentosHoje = agendamentosDoDia.length; + + return ( +
+
+ +

Bem-vindo ao MediConnect



+ +
+ +
+
+
+ TOTAL DE PACIENTES + {totalPacientes} +
+
+
+ +
+
+ NOVOS ESTE MÊS + {novosEsseMes} +
+
+
+ +
+
+ AGENDAMENTOS HOJE + {agendamentosHoje} +
+
+
+ +
+
+ PENDÊNCIAS + 0 +
+
+
+
+ +
+

Ações Rápidas

+
+
setCurrentPage('form-layout')}> + +
+ Novo Paciente + Cadastrar um novo paciente +
+
+
setCurrentPage('table')}> + +
+ Lista de Pacientes + Ver todos os pacientes +
+
+
setCurrentPage('agendamento')}> + +
+ Agendamentos + Gerenciar consultas +
+
+
+
+ +
+

Próximos Agendamentos

+ {agendamentosHoje > 0 ? ( +
+ {agendamentosDoDia.map(agendamento => ( +
+

{agendamento.nomePaciente}

+

{new Date(agendamento.data).toLocaleTimeString()}

+
+ ))} +
+ ) : ( +
+ +

Nenhum agendamento para hoje

+ +
+ )} +
+
+ ); +} + +export default Inicio; \ No newline at end of file diff --git a/src/PagesMedico/prontuario.jsx b/src/PagesMedico/prontuario.jsx new file mode 100644 index 0000000..38ce873 --- /dev/null +++ b/src/PagesMedico/prontuario.jsx @@ -0,0 +1,123 @@ +import React from "react"; +import "./styleMedico/geral.css"; + +const pacientes = [ + { + id: 1, + nome: "Maria Oliveira", + idade: 45, + sexo: "Feminino", + alergias: "Penicilina", + historico: [ + { data: "2025-09-15", descricao: "Consulta de acompanhamento de hipertensão. Pressão arterial controlada." }, + { data: "2025-07-20", descricao: "Relatou dores de cabeça frequentes." }, + ], + medicamentos: [ + { nome: "Losartana 50mg", uso: "1x ao dia pela manhã" }, + { nome: "Dipirona 500mg", uso: "Em caso de dor" }, + ], + }, + { + id: 2, + nome: "Carlos Souza", + idade: 62, + sexo: "Masculino", + alergias: "Nenhuma conhecida", + historico: [ + { data: "2025-09-01", descricao: "Check-up anual. Glicemia de jejum elevada." }, + { data: "2025-03-12", descricao: "Queixa de dor no joelho direito após esforço." }, + ], + medicamentos: [ + { nome: "Metformina 850mg", uso: "2x ao dia, após as refeições" }, + ], + }, + { + id: 3, + nome: "Ana Costa", + idade: 28, + sexo: "Feminino", + alergias: "Pólen e poeira", + historico: [ + { data: "2025-08-22", descricao: "Crise de rinite alérgica. Prescrito novo anti-histamínico." }, + { data: "2025-01-30", descricao: "Consulta de rotina ginecológica." }, + ], + medicamentos: [ + { nome: "Loratadina 10mg", uso: "1x ao dia durante crises alérgicas" }, + ], + }, + { + id: 4, + nome: "João da Silva", + idade: 35, + sexo: "Masculino", + alergias: "Nenhuma conhecida", + historico: [ + { data: "2025-09-10", descricao: "Consulta de rotina – tudo normal" }, + { data: "2025-08-05", descricao: "Exame de sangue – colesterol levemente alto" }, + ], + medicamentos: [ + { nome: "Atorvastatina 10mg", uso: "1x ao dia" }, + ], + }, + { + id: 5, + nome: "Pedro Rocha", + idade: 55, + sexo: "Masculino", + alergias: "Frutos do mar", + historico: [ + { data: "2025-09-18", descricao: "Relatou dor e inchaço no tornozelo esquerdo." }, + { data: "2025-04-11", descricao: "Exames de rotina, sem alterações significativas." }, + ], + medicamentos: [ + { nome: "Nimesulida 100mg", uso: "2x ao dia por 5 dias" }, + ], + }, +]; + +function Prontuario() { + return ( + <> + {pacientes.map((paciente) => ( +
+

Prontuário Médico de {paciente.nome}

+ + {/* ---- Agrupe as seções em um container flex ---- */} +
+
+

Dados do Paciente

+

Nome: {paciente.nome}

+

Idade: {paciente.idade}

+

Sexo: {paciente.sexo}

+

Alergias: {paciente.alergias}

+
+ +
+

Histórico de Consultas

+
    + {paciente.historico.map((item, i) => ( +
  • + {item.data}: {item.descricao} +
    • + ))} +
+
+ +
+

Medicamentos em Uso

+
    + {paciente.medicamentos.map((med, i) => ( +
  • + {med.nome} – {med.uso} +
    • + ))} +
+
+
+
+ ))} + + ); +} + +export default Prontuario; diff --git a/src/PagesMedico/relatorio.jsx b/src/PagesMedico/relatorio.jsx new file mode 100644 index 0000000..bd90bb5 --- /dev/null +++ b/src/PagesMedico/relatorio.jsx @@ -0,0 +1,115 @@ +import React, { useState } from 'react'; +import './styleMedico/geral.css'; + +const mockData = { + atendimentos: [ + { id: 1, paciente: 'Carlos Andrade', data: '2025-09-25', motivo: 'Consulta de rotina', medico: 'Dr. House' }, + { id: 2, paciente: 'Beatriz Costa', data: '2025-09-24', motivo: 'Retorno', medico: 'Dr. Wilson' }, + { id: 3, paciente: 'Juliana Ferreira', data: '2025-09-23', motivo: 'Exames de sangue', medico: 'Dr. House' }, + { id: 4, paciente: 'Marcos Souza', data: '2025-09-22', motivo: 'Consulta de rotina', medico: 'Dr. Cuddy' }, + ], + pacientes: [ + { id: 1, nome: 'Carlos Andrade', idade: 45, cadastro: '2024-03-10' }, + { id: 2, nome: 'Beatriz Costa', idade: 29, cadastro: '2023-11-20' }, + { id: 3, nome: 'Juliana Ferreira', idade: 34, cadastro: '2025-01-15' }, + { id: 4, nome: 'Marcos Souza', idade: 52, cadastro: '2022-07-01' }, + { id: 5, nome: 'Fernanda Lima', idade: 25, cadastro: '2025-08-05' }, + ], +}; + +function Relatorio() { + // ...restante do código igual... + const [tipoRelatorio, setTipoRelatorio] = useState(''); + const [dados, setDados] = useState(null); + const [dataInicio, setDataInicio] = useState(''); + const [dataFim, setDataFim] = useState(''); + + const handleGerarRelatorio = () => { + if (!tipoRelatorio) { + alert('Por favor, selecione um tipo de relatório.'); + return; + } + setDados(mockData[tipoRelatorio] || []); + }; + + const renderizarTabela = () => { + if (!dados) { + return

Selecione os filtros e clique em "Gerar Relatório" para começar.

; + } + + if (dados.length === 0) { + return

Nenhum dado encontrado para os filtros selecionados.

; + } + + const headers = Object.keys(dados[0]); + + return ( + + + + {headers.map(header => )} + + + + {dados.map(item => ( + + {headers.map(header => )} + + ))} + +
{header.toUpperCase()}
{item[header]}
+ ); + }; + + return ( +
+

Página de Relatórios

+ +
+
+ + +
+ +
+ + setDataInicio(e.target.value)} + /> +
+ +
+ + setDataFim(e.target.value)} + /> +
+ + +
+ +
+

Resultado

+ {renderizarTabela()} +
+
+ ); +} + +export default Relatorio; \ No newline at end of file diff --git a/src/PagesMedico/styleMedico/Agendamento.css b/src/PagesMedico/styleMedico/Agendamento.css new file mode 100644 index 0000000..3d30577 --- /dev/null +++ b/src/PagesMedico/styleMedico/Agendamento.css @@ -0,0 +1,189 @@ +.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-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 --- */ +.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; +} + +.busca-atendimento > div:first-child { + width: 400px; /* Define tamanho da barra */ + display: flex; + align-items: center; + margin-left: 1rem; /* Espaço entre barra e botão */ +} + +.busca-atendimento select{ + padding: 8px; + border-radius: 8px; + background-color: #0078d7; + color: white; + font-weight: bold; + 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, +.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 0px 0px 10px; +} + +.btn-selecionar-tabelames{ + border-radius: 0px 10px 10px 0px; +} + +.btn-selecionar-tabeladia.ativo, +.btn-selecionar-tabelasemana.ativo, +.btn-selecionar-tabelames.ativo{ + background-color: lightcyan; + border-color: darkcyan; + font-weight: bolder; +} + +.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; + 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; +} + +.btns-e-legenda-container{ + 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); + border: 10px solid #ffffffc5; + background-color: rgb(253, 253, 253); + display: flex; + flex-direction: column; +} + +.calendario-ou-filaespera{ + margin-top: 0; +} + +.container-btns-agenda-fila_esepera{ + margin-top: 30px; + display: flex; + flex-direction: row; + gap: 20px; + margin-left:20px; +} + +.btn-fila-espera, .btn-agenda{ + background-color: transparent; + border: 0px ; + border-bottom: 3px solid rgb(253, 253, 253); + padding: 8px; + border-radius: 10px 10px 0px 0px; + font-weight: bold; +} + +.opc-filaespera-ativo, .opc-agenda-ativo{ + color: white; + background-color: #5980fd; +} +.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 new file mode 100644 index 0000000..3cdc41a --- /dev/null +++ b/src/PagesMedico/styleMedico/FilaEspera.css @@ -0,0 +1,288 @@ +/* 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%; + max-width: none; + margin: 0; /* >>> sem espaço para encostar no topo <<< */ + background: #ffffff; + border-radius: 12px; + padding: 24px; + box-shadow: 0 4px 12px rgba(0,0,0,0.08); + border: 10px solid #ffffff; + box-sizing: border-box; +} + +.fila-titulo { + text-align: center; + font-size: 1.8rem; + font-weight: bold; + margin-bottom: 20px; + color: #333; + border-bottom: 2px solid #e0e0e0; + padding-bottom: 10px; +} + +.fila-tabela { + width: 100%; + border-collapse: collapse; + font-size: 1rem; +} + +.fila-tabela thead { + background-color: #f7fbff; +} + +.fila-tabela th, +.fila-tabela td { + padding: 12px 16px; + text-align: left; + border-bottom: 1px solid #e0e0e0; +} + +.fila-tabela th { + font-weight: bold; + color: #444; + background-color: #f1f1f1 +} + +/* --- Linhas alternadas cinza/branco --- */ +.fila-tabela tbody tr:nth-child(even) { + background-color: #f9f9f9; /* cinza clarinho */ +} +.fila-tabela tbody tr:nth-child(odd) { + background-color: #ffffff; /* branco */ +} + +.fila-tabela tbody tr:hover { + background-color: #f1f6fa; /* hover sutil */ +} + +@media (max-width: 768px) { + .fila-tabela th, .fila-tabela td { + padding: 8px; + font-size: 0.9rem; + } + .fila-titulo { + font-size: 1.5rem; + } +} +.fila-header { + position: relative; + display: flex; + align-items: center; + justify-content: center; /* centraliza o título */ + margin-bottom: 16px; + height: 40px; /* altura da linha */ +} + +.busca-fila-espera { + position: absolute; + left: 0; /* barra na esquerda */ + padding: 6px 12px; + border: 1px solid #ccc; + border-radius: 6px; + font-size: 1rem; + width: 350px; + outline: none; + transition: border-color 0.2s; +} + +.busca-fila-espera:focus { + border-color: #888; +} + +.fila-header h2 { + margin: 0; + font-size: 1.5rem; + text-align: center; +} diff --git a/src/PagesMedico/styleMedico/dia.css b/src/PagesMedico/styleMedico/dia.css new file mode 100644 index 0000000..a242ba0 --- /dev/null +++ b/src/PagesMedico/styleMedico/dia.css @@ -0,0 +1,81 @@ +.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 new file mode 100644 index 0000000..a908af2 --- /dev/null +++ b/src/PagesMedico/styleMedico/geral.css @@ -0,0 +1,126 @@ +.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; +} + +.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; + margin: 0; + padding: 0; +} + + +.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); +} + +.filtros-container { + display: flex; + gap: 24px; + margin-bottom: 24px; + flex-wrap: wrap; +} + +.filtro-item { + display: flex; + flex-direction: column; + min-width: 180px; +} + +.filtro-item label { + margin-bottom: 6px; + font-weight: 500; +} + +.btn-gerar { + align-self: flex-end; + padding: 8px 20px; + background: #1976d2; + color: #fff; + border: none; + border-radius: 6px; + cursor: pointer; + font-weight: bold; + margin-top: 22px; + transition: background 0.2s; +} + +.btn-gerar:hover { + background: #125ea7; +} + +.resultado-container { + margin-top: 32px; +} + +.info-text { + color: #888; + font-style: italic; +} + +table { + width: 100%; + border-collapse: collapse; + margin-top: 12px; +} + +th, td { + border: 1px solid #e0e0e0; + padding: 10px 8px; + text-align: left; +} + +th { + background: #f5f5f5; + font-weight: bold; +} \ No newline at end of file diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index 0820c1c..67fdde0 100644 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { Link } from "react-router-dom"; -import menuItems from "../data/sidebar-items.json"; +import menuItems from "../data/sidebar-items-medico.json"; // Use "sidebar-items-secretaria.json" para secretaria function Sidebar() { const [isActive, setIsActive] = useState(true); diff --git a/src/data/sidebar-items-medico.json b/src/data/sidebar-items-medico.json new file mode 100644 index 0000000..5971667 --- /dev/null +++ b/src/data/sidebar-items-medico.json @@ -0,0 +1,48 @@ +[ + { + "name": "Menu", + "isTitle": true + }, + + { + "name":"Início", + "url": "/", + "icon": "house" + }, + + { + "name": "Prontuário", + "icon": "calendar-plus-fill", + "url": "/prontuario" + }, + + { + "name": "Laudo do Paciente", + "icon": "table", + "url": "/laudo" + }, + + { + "name": "Relatórios", + "icon": "file-earmark-text-fill", + "url": "/relatorios" + }, + + { + "name": "Agendamentos", + "icon": "calendar-plus-fill", + "url": "/agendamento" + }, + + + + { + "name": " Chat com pacientes", + "icon": "chat-dots-fill", + "url": "/chat" + } + + + + +] diff --git a/src/data/sidebar-items.json b/src/data/sidebar-items-secretaria.json similarity index 93% rename from src/data/sidebar-items.json rename to src/data/sidebar-items-secretaria.json index 81762b6..407c1f2 100644 --- a/src/data/sidebar-items.json +++ b/src/data/sidebar-items-secretaria.json @@ -1,48 +1,49 @@ -[ - { - "name": "Menu", - "isTitle": true - }, - - { - "name":"Início", - "url": "/", - "icon": "house" - }, - - { - "name": "Cadastro de Pacientes", - "url": "/pacientes/cadastro", - "icon": "heart-pulse-fill" - }, - - { - "name": "Cadastro do Médico", - "url": "/medicos/cadastro", - "icon": "capsule" - }, - - { - "name": "Lista de Pacientes", - "icon": "clipboard-heart-fill", - "url": "/pacientes" - }, - - { - "name": "Lista de Médico", - "icon": "hospital-fill", - "url": "/medicos" - }, - { - "name": "Agendar consulta", - "icon": "calendar-plus-fill", - "url": "/agendamento" - }, - - { - "name": "Laudo do Paciente", - "icon": "table", - "url": "/laudo" - } - +[ + { + "name": "Menu", + "isTitle": true + }, + + { + "name":"Início", + "url": "/", + "icon": "house" + }, + + { + "name": "Cadastro de Pacientes", + "url": "/pacientes/cadastro", + "icon": "heart-pulse-fill" + }, + + { + "name": "Cadastro do Médico", + "url": "/medicos/cadastro", + "icon": "capsule" + }, + + { + "name": "Lista de Pacientes", + "icon": "clipboard-heart-fill", + "url": "/pacientes" + }, + + { + "name": "Lista de Médico", + "icon": "hospital-fill", + "url": "/medicos" + }, + { + "name": "Agendar consulta", + "icon": "calendar-plus-fill", + "url": "/agendamento" + }, + + + { + "name": "Laudo do Paciente", + "icon": "table", + "url": "/laudo" + } + ] \ No newline at end of file diff --git a/src/pages/style/Agendamento.css b/src/pages/style/Agendamento.css index 3bb469a..e5d4de4 100644 --- a/src/pages/style/Agendamento.css +++ b/src/pages/style/Agendamento.css @@ -39,7 +39,7 @@ display: flex; flex-direction: row; margin:10px; - justify-content: flex-end; + justify-content: flex-start; } .busca-atendimento select{ diff --git a/src/perfis/Perfil_medico/PerfilMedico.jsx b/src/perfis/Perfil_medico/PerfilMedico.jsx new file mode 100644 index 0000000..1e539cc --- /dev/null +++ b/src/perfis/Perfil_medico/PerfilMedico.jsx @@ -0,0 +1,29 @@ +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"; + +function PerfilMedico() { + return ( + +
+ +
+ + } /> + } /> + } /> + } /> + } /> + +
+
+ + ); +} + +export default PerfilMedico; \ No newline at end of file diff --git a/src/perfis/perfil_secretaria/PerfilSecretaria.jsx b/src/perfis/perfil_secretaria/PerfilSecretaria.jsx index 89aaa33..aebf91e 100644 --- a/src/perfis/perfil_secretaria/PerfilSecretaria.jsx +++ b/src/perfis/perfil_secretaria/PerfilSecretaria.jsx @@ -1,5 +1,4 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; - import Sidebar from "../../components/Sidebar"; import Inicio from "../../pages/Inicio"; import TablePaciente from "../../pages/TablePaciente"; @@ -14,7 +13,7 @@ import DoctorDetails from "../../pages/DoctorDetails"; import DoctorEditPage from "../../pages/DoctorEditPage"; function PerfilSecretaria() { - return ( + return (