359 lines
11 KiB
HTML
359 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Histórico de Pacientes • HealthOne</title>
|
|
<style>
|
|
:root{
|
|
--medicio-teal: #3fbbc0;
|
|
--medicio-teal-600: #34a3a8;
|
|
--medicio-muted: #6b7280;
|
|
--medicio-border: #e5e7eb;
|
|
--medicio-white: #ffffff;
|
|
--text-dark: #2a2d34;
|
|
--bg: #f8fafb;
|
|
--radius: 12px;
|
|
--shadow: 0 8px 24px rgba(0,0,0,.06);
|
|
}
|
|
*{box-sizing:border-box}
|
|
body{
|
|
margin:0;
|
|
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
|
|
background: var(--bg);
|
|
color: var(--text-dark);
|
|
-webkit-font-smoothing:antialiased;
|
|
-moz-osx-font-smoothing:grayscale;
|
|
}
|
|
.appbar{
|
|
background: var(--medicio-white);
|
|
border-bottom: 1px solid var(--medicio-border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
}
|
|
.appbar-inner{
|
|
max-width:1200px; margin:0 auto; padding:14px 20px;
|
|
display:flex; align-items:center; justify-content:space-between; gap:12px;
|
|
}
|
|
.brand{ display:flex; align-items:center; gap:12px; }
|
|
.logo{
|
|
width:44px; height:44px; border-radius:50%;
|
|
box-shadow: 0 0 20px rgba(63,187,192,0.12), 0 0 40px rgba(63,187,192,0.06);
|
|
background: linear-gradient(135deg, var(--medicio-teal), var(--medicio-teal-600));
|
|
}
|
|
.brand h1{ margin:0; font-size:16px; letter-spacing:.2px; }
|
|
.brand small{ display:block; color:var(--medicio-muted); font-size:12px; margin-top:2px; }
|
|
.wrap{ max-width:1200px; margin:20px auto; padding:0 20px 80px; }
|
|
.toolbar{
|
|
display:grid;
|
|
grid-template-columns: 1fr 220px 180px 120px auto;
|
|
gap:12px; margin-bottom:18px;
|
|
align-items:center;
|
|
}
|
|
@media (max-width:980px){ .toolbar{ grid-template-columns: 1fr 1fr; } }
|
|
.field{
|
|
display:flex; align-items:center; gap:10px;
|
|
background: var(--medicio-white); border:1px solid var(--medicio-border);
|
|
padding:10px 12px; border-radius:10px;
|
|
}
|
|
.field input, .field select{
|
|
width:100%; border:0; outline:0; background:transparent; color:var(--text-dark); font-size:14px;
|
|
}
|
|
label{ font-weight:600; color:var(--medicio-muted); font-size:13px; margin-right:6px; }
|
|
.btn{
|
|
padding:10px 14px; border-radius:10px; font-weight:700; border:0; cursor:pointer;
|
|
background:var(--medicio-teal); color:#fff; box-shadow:0 6px 16px rgba(63,187,192,.16);
|
|
}
|
|
.btn.secondary{
|
|
background:#fff; color:var(--text-dark); border:1px solid var(--medicio-border); box-shadow:none;
|
|
}
|
|
|
|
.card{ background:#fff; border:1px solid var(--medicio-border); border-radius:12px; box-shadow:var(--shadow); }
|
|
.card-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px 18px; border-bottom:1px solid var(--medicio-border); }
|
|
.card-content{ padding:12px 18px 18px 18px; }
|
|
.table-wrap{ overflow-x:auto; }
|
|
table{ width:100%; border-collapse:separate; border-spacing:0 10px; min-width:1000px; }
|
|
thead.thead th{ text-align:left; font-size:12px; color:var(--medicio-muted); padding:8px 12px; text-transform:uppercase; letter-spacing:.6px; }
|
|
tbody tr.row{ background:#fff; border:1px solid var(--medicio-border); border-radius:10px; }
|
|
tbody tr.row td{ padding:12px; vertical-align:middle; border-bottom:0; font-size:14px; color:var(--text-dark); }
|
|
tbody tr.row td.actions{ text-align:right; }
|
|
.empty{ text-align:center; color:var(--medicio-muted); padding:28px 12px; }
|
|
@media (max-width:720px){
|
|
thead.thead th:nth-child(3),
|
|
thead.thead th:nth-child(4),
|
|
thead.thead th:nth-child(5),
|
|
thead.thead th:nth-child(6),
|
|
thead.thead th:nth-child(7),
|
|
thead.thead th:nth-child(9),
|
|
thead.thead th:nth-child(10) { display:none; }
|
|
tbody tr.row td:nth-child(3),
|
|
tbody tr.row td:nth-child(4),
|
|
tbody tr.row td:nth-child(5),
|
|
tbody tr.row td:nth-child(6),
|
|
tbody tr.row td:nth-child(7),
|
|
tbody tr.row td:nth-child(9),
|
|
tbody tr.row td:nth-child(10) { display:none; }
|
|
table{ min-width:700px; }
|
|
}
|
|
.banana {
|
|
margin-left: 730px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 15px 20px;
|
|
|
|
gap: 20px;
|
|
}
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: #555;
|
|
font-weight: 500;
|
|
padding: 10px 18px;
|
|
border-radius: 20px;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.nav-links a.active {
|
|
background: #26bdbd;
|
|
color: white;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
font-weight: bold;
|
|
}
|
|
.btn-header {
|
|
background: none;
|
|
color: #555;
|
|
border: none;
|
|
padding: 10px 18px;
|
|
border-radius: 20px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.btn-header:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="appbar">
|
|
<div class="appbar-inner">
|
|
<div class="brand">
|
|
<div class="logo" aria-hidden="true"></div>
|
|
<div>
|
|
<h1>HealthOne</h1>
|
|
<small>Histórico de Pacientes</small>
|
|
|
|
</div>
|
|
<div class="banana">
|
|
<div class="nav-links">
|
|
<a href="dash-secretaria.html" class="btn-header">Inicio</a>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="#" class="btn-header , active">Gerenciamento de Paciente</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="wrap">
|
|
<div class="toolbar">
|
|
<div class="field" style="min-width:220px;">
|
|
<label for="pacienteSelect" style="min-width:90px">Paciente</label>
|
|
<select id="pacienteSelect">
|
|
<option value="">-- Escolha --</option>
|
|
<option value="1">João da Silva</option>
|
|
<option value="2">Maria Ferreira</option>
|
|
<option value="3">Carlos Souza</option>
|
|
<option value="4">Ana Paula</option>
|
|
<option value="5">Lucas Lima</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="dataSelect">Dia</label>
|
|
<input type="date" id="dataSelect" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="mesSelect">Mês</label>
|
|
<input type="month" id="mesSelect" />
|
|
</div>
|
|
|
|
<div style="display:flex; gap:8px; justify-content:flex-end;">
|
|
<button id="limparFiltros" class="btn secondary">Limpar filtros</button>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="card" aria-label="Histórico de consultas">
|
|
<div class="card-header">
|
|
<h2>Histórico de Consultas</h2>
|
|
<div style="color:var(--medicio-muted); font-size:13px">Use os filtros acima para refinar.</div>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
<div class="table-wrap">
|
|
<table id="Consultas" aria-describedby="Tabela de histórico">
|
|
<thead class="thead">
|
|
<tr>
|
|
<th>CPF</th>
|
|
<th>Paciente</th>
|
|
<th>Telefone</th>
|
|
<th>Cidade</th>
|
|
<th>Estado</th>
|
|
<th>VIP</th>
|
|
<th>Médico</th>
|
|
<th>Data da Consulta</th>
|
|
<th>Último atendimento</th>
|
|
<th>Próximo atendimento</th>
|
|
<th>Motivo da Consulta</th>
|
|
<th>Diagnóstico</th>
|
|
<th>Tratamento</th>
|
|
<th>Relatório</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="consultasBody"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="empty note" id="note">Selecione um paciente, um dia ou um mês para filtrar o histórico de consultas.</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
const consultasBody = document.getElementById('consultasBody');
|
|
const note = document.getElementById('note');
|
|
|
|
function carregarConsultas() {
|
|
const consultas = JSON.parse(localStorage.getItem('healthone_consultas') || '[]');
|
|
|
|
if (consultas.length === 0) {
|
|
consultasBody.innerHTML = '';
|
|
note.textContent = 'Nenhuma consulta agendada.';
|
|
note.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
const note = document.getElementById('note');
|
|
|
|
note.style.display = 'none';
|
|
|
|
consultasBody.innerHTML = consultas.map(c => {
|
|
// Dados fictícios para paciente, você pode adaptar conforme sua base
|
|
const pacienteNome = "Paciente não informado";
|
|
const cpf = "-";
|
|
const telefone = "-";
|
|
const cidade = "-";
|
|
const estado = "-";
|
|
const vip = "-";
|
|
const motivo = "-";
|
|
const diagnostico = "-";
|
|
const tratamento = "-";
|
|
const relatorio = "-";
|
|
|
|
return `
|
|
<tr class="row" data-paciente="" data-data="${c.dataHora}" data-medico="${c.medicoNome}" data-cpf="${cpf}">
|
|
<td>${cpf}</td>
|
|
<td>${pacienteNome}</td>
|
|
<td>${telefone}</td>
|
|
<td>${cidade}</td>
|
|
<td>${estado}</td>
|
|
<td>${vip}</td>
|
|
<td>${c.medicoNome}</td>
|
|
<td>${c.dataHora}</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>${motivo}</td>
|
|
<td>${diagnostico}</td>
|
|
<td>${tratamento}</td>
|
|
<td>${relatorio}</td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
carregarConsultas();
|
|
|
|
window.addEventListener('storage', (event) => {
|
|
if(event.key === 'healthone_consultas'){
|
|
carregarConsultas();
|
|
}
|
|
});
|
|
|
|
const pacienteSelect = document.getElementById("pacienteSelect");
|
|
const dataSelect = document.getElementById("dataSelect");
|
|
const mesSelect = document.getElementById("mesSelect");
|
|
|
|
function filtrarConsultas() {
|
|
const linhas = document.querySelectorAll("#Consultas tbody tr");
|
|
const pacienteId = pacienteSelect.value;
|
|
const dataEscolhida = dataSelect.value; // yyyy-mm-dd
|
|
const mesEscolhido = mesSelect.value; // yyyy-mm
|
|
|
|
let anyVisible = false;
|
|
|
|
linhas.forEach(linha => {
|
|
const linhaPaciente = linha.getAttribute("data-paciente");
|
|
const dataConsulta = linha.getAttribute("data-data").slice(0, 10); // yyyy-mm-dd
|
|
|
|
let mostrar = true;
|
|
|
|
if (pacienteId && linhaPaciente !== pacienteId) {
|
|
mostrar = false;
|
|
}
|
|
|
|
if (dataEscolhida && dataConsulta !== dataEscolhida) {
|
|
mostrar = false;
|
|
}
|
|
|
|
if (mesEscolhido && !dataConsulta.startsWith(mesEscolhido)) {
|
|
mostrar = false;
|
|
}
|
|
|
|
linha.style.display = mostrar ? "" : "none";
|
|
if(mostrar) anyVisible = true;
|
|
});
|
|
|
|
note.style.display = anyVisible ? 'none' : 'block';
|
|
}
|
|
|
|
pacienteSelect.addEventListener("change", () => {
|
|
dataSelect.value = "";
|
|
mesSelect.value = "";
|
|
filtrarConsultas();
|
|
});
|
|
|
|
dataSelect.addEventListener("change", () => {
|
|
pacienteSelect.value = "";
|
|
mesSelect.value = "";
|
|
filtrarConsultas();
|
|
});
|
|
|
|
mesSelect.addEventListener("change", () => {
|
|
pacienteSelect.value = "";
|
|
dataSelect.value = "";
|
|
filtrarConsultas();
|
|
});
|
|
|
|
document.getElementById('limparFiltros').addEventListener('click', () => {
|
|
pacienteSelect.value = "";
|
|
dataSelect.value = "";
|
|
mesSelect.value = "";
|
|
filtrarConsultas();
|
|
});
|
|
|
|
// iniciar com todos visíveis
|
|
filtrarConsultas();
|
|
</script>
|
|
</body>
|
|
</html>
|