389 lines
14 KiB
HTML
389 lines
14 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;
|
|
}
|
|
|
|
/* Header */
|
|
.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 / filtros */
|
|
.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 / tabela estilo Medicio */
|
|
.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; }
|
|
|
|
.badge{ font-size:12px; padding:6px 10px; border-radius:999px; display:inline-block; border:1px solid transparent; }
|
|
.badge.primary{ background: #eaf8f8; color: #1c7776; border-color:#cdeeea; }
|
|
.badge.ok{ background:#eaf6ea; color:#1f7a33; border-color:#d7eed5; }
|
|
.badge.warn{ background:#fff7e6; color:#8a5b07; border-color:#fde8c3; }
|
|
|
|
.convenios{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
|
|
|
|
.actions .btn{ padding:8px 10px; border-radius:8px; font-size:13px; }
|
|
.page{ padding:8px 12px; border-radius:999px; border:1px solid var(--medicio-border); background:#fff; cursor:pointer; }
|
|
|
|
.empty{ text-align:center; color:var(--medicio-muted); padding:28px 12px; }
|
|
|
|
/* responsivo: compacta colunas pequenas */
|
|
@media (max-width:720px){
|
|
thead.thead th:nth-child(3), /* Telefone */
|
|
thead.thead th:nth-child(4), /* Cidade */
|
|
thead.thead th:nth-child(5), /* Estado */
|
|
thead.thead th:nth-child(6), /* Convênio */
|
|
thead.thead th:nth-child(7), /* VIP */
|
|
thead.thead th:nth-child(10), /* Último atendimento */
|
|
thead.thead th:nth-child(11) /* Próximo atendimento */ { 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(10),
|
|
tbody tr.row td:nth-child(11) { display:none; }
|
|
table{ min-width:700px; }
|
|
}
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="wrap">
|
|
<!-- filtros -->
|
|
<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>
|
|
|
|
<!-- tabela -->
|
|
<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>Convênio</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>
|
|
<tr class="row" data-paciente="1" data-data="2025-09-03 09:30" data-medico="Dr. Almeida" data-cpf="123.456.789-00">
|
|
<td>123.456.789-00</td>
|
|
<td>João da Silva</td>
|
|
<td>(79) 99893-2499</td>
|
|
<td>Aracaju</td>
|
|
<td>Sergipe</td>
|
|
<td>Particular</td>
|
|
<td>-</td>
|
|
<td>Dr. Almeida</td>
|
|
<td>2025-09-03 09:30</td>
|
|
<td>2025-03-11 11:00</td>
|
|
<td>2025-09-19 15:00</td>
|
|
<td>Dor no peito</td>
|
|
<td>Angina estável</td>
|
|
<td>NTG conforme protocolo</td>
|
|
<td>Relatório: observou-se estabilização com medicação.</td>
|
|
</tr>
|
|
|
|
<tr class="row" data-paciente="1" data-data="2025-04-15 11:00" data-medico="Dra. Beatriz" data-cpf="123.456.789-00">
|
|
<td>123.456.789-00</td>
|
|
<td>João da Silva</td>
|
|
<td>(79) 99893-2499</td>
|
|
<td>Aracaju</td>
|
|
<td>Sergipe</td>
|
|
<td>Particular</td>
|
|
<td>-</td>
|
|
<td>Dra. Beatriz</td>
|
|
<td>2025-04-15 11:00</td>
|
|
<td>2024-12-20 09:00</td>
|
|
<td>2025-10-01 15:30</td>
|
|
<td>Consulta de rotina</td>
|
|
<td>Sem alterações</td>
|
|
<td>Recomendação: acompanhamento semestral</td>
|
|
<td>Relatório: sem intercorrências.</td>
|
|
</tr>
|
|
|
|
<tr class="row" data-paciente="2" data-data="2025-07-10 14:00" data-medico="Dr. Almeida" data-cpf="987.654.321-11">
|
|
<td>987.654.321-11</td>
|
|
<td>Maria Ferreira</td>
|
|
<td>(79) 99892-6363</td>
|
|
<td>Aracaju</td>
|
|
<td>Sergipe</td>
|
|
<td>SUS</td>
|
|
<td>-</td>
|
|
<td>Dr. Almeida</td>
|
|
<td>2025-07-10 14:00</td>
|
|
<td>2024-06-26 14:30</td>
|
|
<td>2025-08-19 15:00</td>
|
|
<td>Cansaço frequente</td>
|
|
<td>Anemia leve</td>
|
|
<td>Suplemento de ferro</td>
|
|
<td>Relatório: sugerido retorno em 3 meses.</td>
|
|
</tr>
|
|
|
|
<tr class="row" data-paciente="3" data-data="2025-11-18 10:00" data-medico="Dra. Beatriz" data-cpf="111.222.333-44">
|
|
<td>111.222.333-44</td>
|
|
<td>Carlos Souza</td>
|
|
<td>(79) 99983-0093</td>
|
|
<td>São Cristóvão</td>
|
|
<td>Sergipe</td>
|
|
<td>Unimed</td>
|
|
<td>-</td>
|
|
<td>Dra. Beatriz</td>
|
|
<td>2025-11-18 10:00</td>
|
|
<td>2024-12-30 08:40</td>
|
|
<td>2025-12-05 10:00</td>
|
|
<td>Febre alta</td>
|
|
<td>Infecção viral</td>
|
|
<td>Repouso e hidratação</td>
|
|
<td>Relatório: melhora após 5 dias.</td>
|
|
</tr>
|
|
|
|
<tr class="row" data-paciente="4" data-data="2025-09-22 16:30" data-medico="Dr. Carlos" data-cpf="555.666.777-88">
|
|
<td>555.666.777-88</td>
|
|
<td>Ana Paula</td>
|
|
<td>(79) 99890-9248</td>
|
|
<td>Itabaiana</td>
|
|
<td>Sergipe</td>
|
|
<td>Particular</td>
|
|
<td>-</td>
|
|
<td>Dr. Carlos</td>
|
|
<td>2025-09-22 16:30</td>
|
|
<td>2024-03-14 10:45</td>
|
|
<td>2025-10-10 09:00</td>
|
|
<td>Consulta de rotina</td>
|
|
<td>Hipertensão controlada</td>
|
|
<td>Manter medicação</td>
|
|
<td>Relatório: pressão arterial estável.</td>
|
|
</tr>
|
|
|
|
<tr class="row" data-paciente="5" data-data="2025-10-25 09:00" data-medico="Dr. Almeida" data-cpf="999.888.777-66">
|
|
<td>999.888.777-66</td>
|
|
<td>Lucas Lima</td>
|
|
<td>(79) 99888-7777</td>
|
|
<td>Aracaju</td>
|
|
<td>Sergipe</td>
|
|
<td>SUS</td>
|
|
<td>-</td>
|
|
<td>Dr. Almeida</td>
|
|
<td>2025-10-25 09:00</td>
|
|
<td>2024-09-21 11:50</td>
|
|
<td>2025-11-25 09:30</td>
|
|
<td>Dor de cabeça</td>
|
|
<td>Enxaqueca</td>
|
|
<td>Prescrição de analgésicos</td>
|
|
<td>Relatório: acompanhamento mensal recomendado.</td>
|
|
</tr>
|
|
</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 pacienteSelect = document.getElementById("pacienteSelect");
|
|
const dataSelect = document.getElementById("dataSelect");
|
|
const mesSelect = document.getElementById("mesSelect");
|
|
const linhas = document.querySelectorAll("#Consultas tbody tr");
|
|
const note = document.getElementById('note');
|
|
|
|
function filtrarConsultas() {
|
|
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;
|
|
|
|
// Filtrar por paciente
|
|
if (pacienteId && linhaPaciente !== pacienteId) {
|
|
mostrar = false;
|
|
}
|
|
|
|
// Filtrar por dia (dataSelect)
|
|
if (dataEscolhida) {
|
|
if (dataConsulta !== dataEscolhida) {
|
|
mostrar = false;
|
|
}
|
|
}
|
|
|
|
// Filtrar por mês (mesSelect)
|
|
if (mesEscolhido) {
|
|
if (!dataConsulta.startsWith(mesEscolhido)) {
|
|
mostrar = false;
|
|
}
|
|
}
|
|
|
|
linha.style.display = mostrar ? "" : "none";
|
|
if(mostrar) anyVisible = true;
|
|
});
|
|
|
|
note.style.display = anyVisible ? 'none' : 'block';
|
|
}
|
|
|
|
// Eventos para disparar o filtro (mantendo comportamento original: limpar outros selects)
|
|
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>
|