prototipo de interface medica
This commit is contained in:
RafaelMTA13
parent
f96f6a7598
commit
0b1d04b7e6
@ -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 (
|
||||
<>
|
||||
<PerfilSecretaria/>
|
||||
<PerfilMedico/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
208
src/PagesMedico/Agendamento.jsx
Normal file
208
src/PagesMedico/Agendamento.jsx
Normal file
@ -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 (
|
||||
<div>
|
||||
<h1>Agendamentos</h1>
|
||||
|
||||
{!PageNovaConsulta ? (
|
||||
|
||||
<div className='atendimento-eprocura'>
|
||||
|
||||
{/* Botões para alternar Agenda / Fila de Espera */}
|
||||
<div className='container-btns-agenda-fila_esepera'>
|
||||
<button
|
||||
className={`btn-agenda ${FiladeEspera === false ? "opc-agenda-ativo" : ""}`}
|
||||
onClick={() => setFiladeEspera(false)}
|
||||
>
|
||||
Agenda
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn-fila-espera ${FiladeEspera === true ? "opc-filaespera-ativo" : ""}`}
|
||||
onClick={() => setFiladeEspera(true)}
|
||||
>
|
||||
Fila de espera
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section className='calendario-ou-filaespera'>
|
||||
{FiladeEspera === false ?
|
||||
(
|
||||
<div className='calendario'>
|
||||
<div>
|
||||
<section className='btns-e-legenda-container'>
|
||||
<div>
|
||||
<button
|
||||
className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
|
||||
onClick={() => setTabela("diario")}
|
||||
>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
Dia
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`}
|
||||
onClick={() => setTabela("semanal")}
|
||||
>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
Semana
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo' : ''}`}
|
||||
onClick={() => setTabela("mensal")}
|
||||
>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
Mês
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='legenda-tabela'>
|
||||
<div className='legenda-item-realizado'><span>Realizado</span></div>
|
||||
<div className='legenda-item-confirmado'><span>Confirmado</span></div>
|
||||
<div className='legenda-item-agendado'><span>Agendado</span></div>
|
||||
<div className='legenda-item-cancelado'><span>Cancelado</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* --- BARRA DE PESQUISA MOVIDA PARA CÁ --- */}
|
||||
<div className='busca-atendimento'>
|
||||
<div>
|
||||
<i className="fa-solid fa-search"></i>
|
||||
<input type="text" placeholder="Buscar atendimento por nome, CPF ou outros dados..." />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<select>
|
||||
<option value="" disabled selected>Agendar</option>
|
||||
<option value="">Atendimento</option>
|
||||
<option value="">Sessões</option>
|
||||
<option value="">Urgência</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{/* --- 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
|
||||
type="text"
|
||||
placeholder="Pesquisar..."
|
||||
className="busca-fila-espera"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
<h2 className="fila-titulo">Fila de Espera</h2>
|
||||
</div>
|
||||
<table className="fila-tabela">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>Email</th>
|
||||
<th>CPF</th>
|
||||
<th>Telefone</th>
|
||||
<th>Entrou na fila de espera</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredFila.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td>{item.nome}</td>
|
||||
<td>{item.email}</td>
|
||||
<td>{item.cpf}</td>
|
||||
<td>{item.telefone}</td>
|
||||
<td>{item.entrada}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
) : (
|
||||
<FormNovaConsulta onCancel={handleClickCancel} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Agendamento;
|
||||
139
src/PagesMedico/InicioMedico.jsx
Normal file
139
src/PagesMedico/InicioMedico.jsx
Normal file
@ -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 (
|
||||
<div className="dashboard-container">
|
||||
<div className="dashboard-header">
|
||||
|
||||
<h1>Bem-vindo ao MediConnect</h1><br></br>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="stats-grid">
|
||||
<div className="stat-card">
|
||||
<div className="stat-info">
|
||||
<span className="stat-label">TOTAL DE PACIENTES</span>
|
||||
<span className="stat-value">{totalPacientes}</span>
|
||||
</div>
|
||||
<div className="stat-icon-wrapper blue"><FaUser className="stat-icon" /></div>
|
||||
</div>
|
||||
|
||||
<div className="stat-card">
|
||||
<div className="stat-info">
|
||||
<span className="stat-label">NOVOS ESTE MÊS</span>
|
||||
<span className="stat-value">{novosEsseMes}</span>
|
||||
</div>
|
||||
<div className="stat-icon-wrapper green"><FaUserPlus className="stat-icon" /></div>
|
||||
</div>
|
||||
|
||||
<div className="stat-card">
|
||||
<div className="stat-info">
|
||||
<span className="stat-label">AGENDAMENTOS HOJE</span>
|
||||
<span className="stat-value">{agendamentosHoje}</span>
|
||||
</div>
|
||||
<div className="stat-icon-wrapper purple"><FaCalendarCheck className="stat-icon" /></div>
|
||||
</div>
|
||||
|
||||
<div className="stat-card">
|
||||
<div className="stat-info">
|
||||
<span className="stat-label">PENDÊNCIAS</span>
|
||||
<span className="stat-value">0</span>
|
||||
</div>
|
||||
<div className="stat-icon-wrapper orange"><FaCalendarAlt className="stat-icon" /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="quick-actions">
|
||||
<h2>Ações Rápidas</h2>
|
||||
<div className="actions-grid">
|
||||
<div className="action-button" onClick={() => setCurrentPage('form-layout')}>
|
||||
<FaUserPlus className="action-icon" />
|
||||
<div className="action-info">
|
||||
<span className="action-title">Novo Paciente</span>
|
||||
<span className="action-desc">Cadastrar um novo paciente</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="action-button" onClick={() => setCurrentPage('table')}>
|
||||
<FaUser className="action-icon" />
|
||||
<div className="action-info">
|
||||
<span className="action-title">Lista de Pacientes</span>
|
||||
<span className="action-desc">Ver todos os pacientes</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="action-button" onClick={() => setCurrentPage('agendamento')}>
|
||||
<FaCalendarCheck className="action-icon" />
|
||||
<div className="action-info">
|
||||
<span className="action-title">Agendamentos</span>
|
||||
<span className="action-desc">Gerenciar consultas</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="appointments-section">
|
||||
<h2>Próximos Agendamentos</h2>
|
||||
{agendamentosHoje > 0 ? (
|
||||
<div>
|
||||
{agendamentosDoDia.map(agendamento => (
|
||||
<div key={agendamento.id} className="agendamento-item">
|
||||
<p>{agendamento.nomePaciente}</p>
|
||||
<p>{new Date(agendamento.data).toLocaleTimeString()}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="no-appointments-content">
|
||||
<FaCalendarCheck className="no-appointments-icon" />
|
||||
<p>Nenhum agendamento para hoje</p>
|
||||
<button className="manage-button" onClick={() => setCurrentPage('agendamento')}>
|
||||
Gerenciar Agendamentos
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Inicio;
|
||||
123
src/PagesMedico/prontuario.jsx
Normal file
123
src/PagesMedico/prontuario.jsx
Normal file
@ -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) => (
|
||||
<div key={paciente.id} className="prontuario-container">
|
||||
<h1>Prontuário Médico de {paciente.nome}</h1>
|
||||
|
||||
{/* ---- Agrupe as seções em um container flex ---- */}
|
||||
<div className="prontuario-sections">
|
||||
<section className="prontuario-section">
|
||||
<h2>Dados do Paciente</h2>
|
||||
<p><strong>Nome:</strong> {paciente.nome}</p>
|
||||
<p><strong>Idade:</strong> {paciente.idade}</p>
|
||||
<p><strong>Sexo:</strong> {paciente.sexo}</p>
|
||||
<p><strong>Alergias:</strong> {paciente.alergias}</p>
|
||||
</section>
|
||||
|
||||
<section className="prontuario-section">
|
||||
<h2>Histórico de Consultas</h2>
|
||||
<ul>
|
||||
{paciente.historico.map((item, i) => (
|
||||
<li key={i}>
|
||||
<strong>{item.data}:</strong> {item.descricao}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="prontuario-section">
|
||||
<h2>Medicamentos em Uso</h2>
|
||||
<ul>
|
||||
{paciente.medicamentos.map((med, i) => (
|
||||
<li key={i}>
|
||||
<strong>{med.nome}</strong> – {med.uso}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Prontuario;
|
||||
115
src/PagesMedico/relatorio.jsx
Normal file
115
src/PagesMedico/relatorio.jsx
Normal file
@ -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 <p className="info-text">Selecione os filtros e clique em "Gerar Relatório" para começar.</p>;
|
||||
}
|
||||
|
||||
if (dados.length === 0) {
|
||||
return <p className="info-text">Nenhum dado encontrado para os filtros selecionados.</p>;
|
||||
}
|
||||
|
||||
const headers = Object.keys(dados[0]);
|
||||
|
||||
return (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{headers.map(header => <th key={header}>{header.toUpperCase()}</th>)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dados.map(item => (
|
||||
<tr key={item.id}>
|
||||
{headers.map(header => <td key={`${item.id}-${header}`}>{item[header]}</td>)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relatorios-container">
|
||||
<h1>Página de Relatórios</h1>
|
||||
|
||||
<div className="filtros-container">
|
||||
<div className="filtro-item">
|
||||
<label htmlFor="tipoRelatorio">Tipo de Relatório</label>
|
||||
<select
|
||||
id="tipoRelatorio"
|
||||
value={tipoRelatorio}
|
||||
onChange={(e) => setTipoRelatorio(e.target.value)}
|
||||
>
|
||||
<option value="">Selecione...</option>
|
||||
<option value="atendimentos">Relatório de Atendimentos</option>
|
||||
<option value="pacientes">Relatório de Pacientes</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="filtro-item">
|
||||
<label htmlFor="dataInicio">Data de Início</label>
|
||||
<input
|
||||
type="date"
|
||||
id="dataInicio"
|
||||
value={dataInicio}
|
||||
onChange={(e) => setDataInicio(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="filtro-item">
|
||||
<label htmlFor="dataFim">Data Final</label>
|
||||
<input
|
||||
type="date"
|
||||
id="dataFim"
|
||||
value={dataFim}
|
||||
onChange={(e) => setDataFim(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button onClick={handleGerarRelatorio} className="btn-gerar">
|
||||
Gerar Relatório
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="resultado-container">
|
||||
<h2>Resultado</h2>
|
||||
{renderizarTabela()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Relatorio;
|
||||
189
src/PagesMedico/styleMedico/Agendamento.css
Normal file
189
src/PagesMedico/styleMedico/Agendamento.css
Normal file
@ -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;
|
||||
}
|
||||
288
src/PagesMedico/styleMedico/FilaEspera.css
Normal file
288
src/PagesMedico/styleMedico/FilaEspera.css
Normal file
@ -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;
|
||||
}
|
||||
81
src/PagesMedico/styleMedico/dia.css
Normal file
81
src/PagesMedico/styleMedico/dia.css
Normal file
@ -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;
|
||||
}
|
||||
126
src/PagesMedico/styleMedico/geral.css
Normal file
126
src/PagesMedico/styleMedico/geral.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
|
||||
48
src/data/sidebar-items-medico.json
Normal file
48
src/data/sidebar-items-medico.json
Normal file
@ -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"
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
]
|
||||
@ -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"
|
||||
}
|
||||
|
||||
]
|
||||
@ -39,7 +39,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin:10px;
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.busca-atendimento select{
|
||||
|
||||
29
src/perfis/Perfil_medico/PerfilMedico.jsx
Normal file
29
src/perfis/Perfil_medico/PerfilMedico.jsx
Normal file
@ -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 (
|
||||
<Router>
|
||||
<div id="app" className="active">
|
||||
<Sidebar />
|
||||
<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 />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default PerfilMedico;
|
||||
@ -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 (
|
||||
<Router>
|
||||
<div id="app" className="active">
|
||||
<Sidebar />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user