Atualizando
This commit is contained in:
Eduarda-SS
parent
5d1716923e
commit
b306e2ad5d
@ -1,3 +1,5 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
.filtros-container select,
|
||||
.filtros-container input {
|
||||
padding: 0.5rem;
|
||||
@ -14,667 +16,255 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.unidade-selecionarprofissional{
|
||||
background-color: #fdfdfdde;
|
||||
padding: 20px 10px;
|
||||
.unidade-selecionarprofissional {
|
||||
background-color: #ffffff;
|
||||
padding: 20px 20px;
|
||||
display: flex;
|
||||
border-radius:10px ;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.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;
|
||||
.busca-atendimento input {
|
||||
border: 2px solid #000000;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
padding: 10px 15px;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.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-end;
|
||||
}
|
||||
|
||||
.legenda-item-realizado{
|
||||
background-color: #2c5e37;
|
||||
}
|
||||
|
||||
.legenda-item-confirmed{
|
||||
background-color: #1e90ff;
|
||||
}
|
||||
.legenda-item-cancelado{
|
||||
background-color: #d9534f;
|
||||
}
|
||||
|
||||
.legenda-item-agendado{
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
#status-card-consulta-completed, .legenda-item-realizado {
|
||||
background-color: #b7ffbd;
|
||||
border:3px solid #91d392;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#status-card-consulta-cancelled, .legenda-item-cancelado {
|
||||
background-color: #ffb7cc;
|
||||
border:3px solid #ff6c84;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#status-card-consulta-confirmed, .legenda-item-confirmed {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
.container-btns-agenda-fila_esepera {
|
||||
margin-top: 20px;
|
||||
margin-left: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
margin-left:20px ;
|
||||
gap: 0;
|
||||
border-bottom: 2px solid #E2E8F0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-fila-espera, .btn-agenda{
|
||||
.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;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] {
|
||||
body {
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.calendario {
|
||||
background-color: #1e1e1e;
|
||||
border: 10px solid #333;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.unidade-selecionarprofissional {
|
||||
background-color: #1e1e1e;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
.busca-atendimento input {
|
||||
background-color: #2c2c2c;
|
||||
color: #e0e0e0;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.btn-buscar,
|
||||
.btn-selecionar-tabeladia,
|
||||
.btn-selecionar-tabelasemana,
|
||||
.btn-selecionar-tabelames {
|
||||
background-color: #2c2c2c;
|
||||
color: #e0e0e0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-selecionar-tabeladia.ativo,
|
||||
.btn-selecionar-tabelasemana.ativo,
|
||||
.btn-selecionar-tabelames.ativo {
|
||||
background-color: #005a9e;
|
||||
border-color: #004578;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.legenda-item-realizado {
|
||||
background-color: #14532d;
|
||||
border-color: #166534;
|
||||
}
|
||||
|
||||
.legenda-item-confirmado {
|
||||
background-color: #1e3a8a;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.legenda-item-cancelado {
|
||||
background-color: #7f1d1d;
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
.legenda-item-agendado {
|
||||
background-color: #78350f;
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
#status-card-consulta-realizado,
|
||||
.legenda-item-realizado {
|
||||
background-color: #14532d;
|
||||
border: 3px solid #166534;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
#status-card-consulta-cancelado,
|
||||
.legenda-item-cancelado {
|
||||
background-color: #7f1d1d;
|
||||
border: 3px solid #dc2626;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
#status-card-consulta-confirmado,
|
||||
.legenda-item-confirmado {
|
||||
background-color: #1e3a8a;
|
||||
border: 3px solid #2563eb;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
#status-card-consulta-agendado,
|
||||
.legenda-item-agendado {
|
||||
background-color: #78350f;
|
||||
border: 3px solid #f59e0b;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.btns-e-legenda-container {
|
||||
background-color: #181818;
|
||||
}
|
||||
|
||||
.container-btns-agenda-fila_esepera {
|
||||
background-color: #181818;
|
||||
}
|
||||
|
||||
.btn-fila-espera,
|
||||
.btn-agenda {
|
||||
background-color: #2c2c2c;
|
||||
color: #e0e0e0;
|
||||
border-bottom: 3px solid #333;
|
||||
}
|
||||
|
||||
.opc-filaespera-ativo,
|
||||
.opc-agenda-ativo {
|
||||
color: #fff;
|
||||
background-color: #005a9e;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilo para o botão de Editar */
|
||||
.btn-edit-custom {
|
||||
background-color: #FFF3CD;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
/* Estilo para o botão de Excluir (Deletar) */
|
||||
.btn-delete-custom {
|
||||
background-color: #F8D7DA;
|
||||
color: #721C24;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.cardconsulta{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.container-botons{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#tabela-seletor-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#tabela-seletor-container p {
|
||||
margin: 0;
|
||||
font-size: 23px;
|
||||
font-weight: 500;
|
||||
color: #4085f6;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#tabela-seletor-container button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #555;
|
||||
font-size: 20px;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
padding: 12px 24px;
|
||||
border-radius: 0;
|
||||
font-weight: 600;
|
||||
color: #718096;
|
||||
cursor: pointer;
|
||||
padding: 4px 6px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
margin-bottom: -2px;
|
||||
transition: color 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
#tabela-seletor-container button:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: #000;
|
||||
.btn-fila-espera:hover, .btn-agenda:hover {
|
||||
color: #2B6CB0;
|
||||
}
|
||||
|
||||
#tabela-seletor-container i {
|
||||
pointer-events: none;
|
||||
.opc-filaespera-ativo, .opc-agenda-ativo {
|
||||
color: #4299E1;
|
||||
background-color: transparent;
|
||||
border-bottom: 2px solid #4299E1;
|
||||
}
|
||||
|
||||
|
||||
.input-e-dropdown-wrapper {
|
||||
position: relative;
|
||||
width: 350px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.busca-atendimento > div {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.busca-atendimento input {
|
||||
/* Garante que o input preencha a largura disponível dentro do seu contêiner */
|
||||
width: calc(100% - 40px); /* Exemplo: 100% menos a largura do ícone (aprox. 40px) */
|
||||
/* ... outros estilos de borda, padding, etc. do seu input ... */
|
||||
}
|
||||
|
||||
|
||||
/* 3. O Dropdown: Posicionamento e Estilização */
|
||||
.dropdown-medicos {
|
||||
/* POSICIONAMENTO: Faz o dropdown flutuar */
|
||||
position: absolute;
|
||||
|
||||
/* POSICIONAMENTO: Coloca o topo do dropdown logo abaixo do input */
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
||||
/* LARGURA: Essencial. Ocupa 100% do .input-e-dropdown-wrapper, limitando-se a ele. */
|
||||
width: 100%;
|
||||
|
||||
/* SOBREPOSIÇÃO: Garante que fique acima de outros elementos (como a Fila de Espera) */
|
||||
z-index: 1000;
|
||||
|
||||
/* ESTILIZAÇÃO: Aparência */
|
||||
background-color: #ffffff; /* Fundo branco para não vazar */
|
||||
border: 1px solid #ccc; /* Borda leve */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para profundidade */
|
||||
border-top: none; /* Deixa o visual mais integrado ao input */
|
||||
|
||||
/* COMPORTAMENTO: Limite de altura e scroll */
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-top: none;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.dropdown-item { padding: 10px 15px; cursor: pointer; }
|
||||
.dropdown-item:hover { background-color: #f0f0f0; }
|
||||
|
||||
/* 4. Estilização de cada item do dropdown */
|
||||
.dropdown-item {
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
.calendar-wrapper {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
font-family: 'Inter', sans-serif;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.calendar-info-panel { flex: 0 0 300px; border-right: 1px solid #E2E8F0; padding-right: 24px; display: flex; flex-direction: column; }
|
||||
.info-date-display { background-color: #EDF2F7; border-radius: 8px; padding: 12px; text-align: center; margin-bottom: 16px; }
|
||||
.info-date-display span { font-weight: 600; color: #718096; text-transform: uppercase; font-size: 0.9rem; }
|
||||
.info-date-display strong { display: block; font-size: 2.5rem; font-weight: 700; color: #2D3748; }
|
||||
.info-details { text-align: center; margin-bottom: 24px; }
|
||||
.info-details h3 { font-size: 1.25rem; font-weight: 600; color: #2D3748; margin: 0; text-transform: capitalize; }
|
||||
.info-details p { color: #718096; margin: 0; }
|
||||
.appointments-list { flex-grow: 1; overflow-y: auto; }
|
||||
.appointments-list h4 { font-size: 1rem; font-weight: 600; color: #4A5568; margin-bottom: 12px; position: sticky; top: 0; background-color: #fff; padding-bottom: 8px; }
|
||||
.appointment-item { display: flex; gap: 12px; padding: 10px; border-radius: 6px; border-left: 4px solid; margin-bottom: 8px; background-color: #F7FAFC; }
|
||||
.item-time { font-weight: 600; color: #2B6CB0; }
|
||||
.item-details { display: flex; flex-direction: column; }
|
||||
.item-details span { font-weight: 500; color: #2D3748; }
|
||||
.item-details small { color: #718096; }
|
||||
.no-appointments-info { text-align: center; padding: 20px; color: #A0AEC0; }
|
||||
.appointment-item[data-status="confirmed"] { border-color: #4299E1; }
|
||||
.appointment-item[data-status="completed"] { border-color: #48BB78; }
|
||||
.appointment-item[data-status="cancelled"] { border-color: #F56565; }
|
||||
.appointment-item[data-status="agendado"],
|
||||
.appointment-item[data-status="requested"] { border-color: #ED8936; }
|
||||
.calendar-main { flex-grow: 1; }
|
||||
.calendar-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||||
.date-indicator h2 { font-size: 1.5rem; font-weight: 600; color: #2D3748; margin: 0; text-transform: capitalize; }
|
||||
.nav-buttons { display: flex; gap: 8px; }
|
||||
.nav-buttons button { padding: 8px 12px; border-radius: 6px; border: 1px solid #CBD5E0; background-color: #fff; font-weight: 600; cursor: pointer; transition: all 0.2s; }
|
||||
.nav-buttons button:hover { background-color: #EDF2F7; }
|
||||
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
|
||||
.day-header { font-weight: 600; color: #718096; text-align: center; padding: 8px 0; font-size: 0.875rem; }
|
||||
.day-cell { min-height: 110px; border-radius: 8px; border: 1px solid #E2E8F0; padding: 8px; transition: background-color 0.2s, border-color 0.2s; cursor: pointer; position: relative; }
|
||||
.day-cell span { font-weight: 600; color: #4A5568; }
|
||||
.day-cell:hover { background-color: #EDF2F7; border-color: #BEE3F8; }
|
||||
.day-cell.other-month { background-color: #F7FAFC; }
|
||||
.day-cell.other-month span { color: #A0AEC0; }
|
||||
.day-cell.today span { background-color: #4299E1; color: #fff; border-radius: 50%; padding: 2px 6px; display: inline-block; }
|
||||
.day-cell.selected { background-color: #BEE3F8; border-color: #4299E1; }
|
||||
.appointments-indicator { background-color: #4299E1; color: white; font-size: 0.7rem; font-weight: bold; border-radius: 50%; width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 8px; right: 8px; }
|
||||
|
||||
.calendar-legend {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
/* Evita que nomes muito longos quebrem ou saiam da caixa */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: #f0f0f0; /* Cor ao passar o mouse */
|
||||
color: #007bff;
|
||||
.legend-item[data-status="completed"] {
|
||||
background-color: #C6F6D5;
|
||||
border: 1px solid #9AE6B4;
|
||||
color: #2F855A;
|
||||
}
|
||||
.legend-item[data-status="confirmed"] {
|
||||
background-color: #EBF8FF;
|
||||
border: 1px solid #BEE3F8;
|
||||
color: #3182CE;
|
||||
}
|
||||
.legend-item[data-status="agendado"] {
|
||||
background-color: #FEFCBF;
|
||||
border: 1px solid #F6E05E;
|
||||
color: #B7791F;
|
||||
}
|
||||
.legend-item[data-status="cancelled"] {
|
||||
background-color: #FED7D7;
|
||||
border: 1px solid #FEB2B2;
|
||||
color: #C53030;
|
||||
}
|
||||
|
||||
|
||||
.input-modal{
|
||||
width: 80%;
|
||||
.appointment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Estilo para o botão Excluir nos modais de Agendamento - vermelho escuro */
|
||||
.modal-footer .btn-danger,
|
||||
button.btn.btn-danger {
|
||||
background-color: #c82333 !important;
|
||||
border-color: #bd2130 !important;
|
||||
color: #ffffff !important;
|
||||
.item-details {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.modal-footer .btn-danger:hover,
|
||||
.modal-footer .btn-danger:focus,
|
||||
.modal-footer .btn-danger:active,
|
||||
button.btn.btn-danger:hover,
|
||||
button.btn.btn-danger:focus,
|
||||
button.btn.btn-danger:active {
|
||||
background-color: #a71d2a !important;
|
||||
border-color: #9c1c28 !important;
|
||||
color: #ffffff !important;
|
||||
.appointment-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ===== ESTILOS REUTILIZADOS DA TABELA DE PACIENTES ===== */
|
||||
|
||||
/* Containers e Cards */
|
||||
.table-paciente-container {
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.table-paciente-card {
|
||||
border: none;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.table-paciente-card .card-header {
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
/* Filtros */
|
||||
.table-paciente-filters {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.table-paciente-filters h5 {
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Tabela */
|
||||
.table-paciente-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-paciente-table th {
|
||||
background-color: #f8f9fa;
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
padding: 15px 8px;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table-paciente-table td {
|
||||
padding: 15px 8px;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.table-paciente-table tbody tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.025);
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
/* Badges e Contador */
|
||||
.contador-pacientes {
|
||||
background-color: #1e3a8a;
|
||||
color: white;
|
||||
padding: 0.5em 0.75em;
|
||||
font-size: 0.875em;
|
||||
font-weight: 500;
|
||||
border-radius: 0.375rem;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.filters-active .badge {
|
||||
font-size: 0.75em;
|
||||
padding: 0.4em 0.65em;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* Botões */
|
||||
.btn-view {
|
||||
background-color: #E6F2FF !important;
|
||||
color: #004085 !important;
|
||||
border: 1px solid #B8D4F0;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-view:hover {
|
||||
background-color: #D1E7FF !important;
|
||||
border-color: #9EC5FE;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background-color: #FFF3CD !important;
|
||||
color: #856404 !important;
|
||||
border: 1px solid #FFEAA7;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: #FFEEBA !important;
|
||||
border-color: #FFE087;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #F8D7DA !important;
|
||||
color: #721C24 !important;
|
||||
border: 1px solid #F5C6CB;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #F1B0B7 !important;
|
||||
border-color: #ED969E;
|
||||
}
|
||||
|
||||
/* Selects compactos */
|
||||
.compact-select {
|
||||
font-size: 1.0rem;
|
||||
padding: 0.45rem 0.5rem;
|
||||
}
|
||||
|
||||
.compact-select option {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Paginação */
|
||||
.pagination {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
color: #495057;
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.page-link:hover {
|
||||
color: #1e3a8a;
|
||||
background-color: #e9ecef;
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
|
||||
.page-item.active .page-link {
|
||||
background-color: #1e3a8a;
|
||||
border-color: #1e3a8a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.page-item.disabled .page-link {
|
||||
color: #6c757d;
|
||||
background-color: #f8f9fa;
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
|
||||
.d-flex.justify-content-between.align-items-center {
|
||||
border-top: 1px solid #dee2e6;
|
||||
padding-top: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.text-center.py-4 .text-muted {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.text-center.py-4 .bi-inbox {
|
||||
font-size: 3rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.text-center.py-4 p {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.text-center.py-4 td {
|
||||
border-bottom: none;
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
/* Responsividade */
|
||||
@media (max-width: 768px) {
|
||||
.table-paciente-table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.table-paciente-table th,
|
||||
.table-paciente-table td {
|
||||
padding: 10px 6px;
|
||||
}
|
||||
|
||||
.btn-view,
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.table-paciente-filters .d-flex {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.table-paciente-filters .form-select {
|
||||
min-width: 100% !important;
|
||||
}
|
||||
|
||||
.d-flex.justify-content-between.align-items-center {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
.d-flex.justify-content-between.align-items-center > div {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
flex-wrap: wrap;
|
||||
.btn-action {
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.me-3.text-muted {
|
||||
text-align: center;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.contador-pacientes {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.4em 0.6em;
|
||||
}
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-action.btn-edit {
|
||||
background-color: #FEFCBF;
|
||||
color: #B7791F;
|
||||
}
|
||||
.btn-action.btn-edit:hover {
|
||||
background-color: #F6E05E;
|
||||
}
|
||||
|
||||
.btn-action.btn-delete {
|
||||
background-color: #E53E3E;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-action.btn-delete:hover {
|
||||
background-color: #C53030;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.unidade-selecionarprofissional { flex-direction: column; align-items: stretch; gap: 12px; }
|
||||
.calendar-wrapper { flex-direction: column; padding: 16px; }
|
||||
.calendar-info-panel { flex: 0 0 auto; border-right: none; border-bottom: 1px solid #E2E8F0; padding-right: 0; padding-bottom: 16px; }
|
||||
.calendar-grid { grid-template-columns: repeat(4, 1fr); }
|
||||
.calendar-controls { flex-direction: column; align-items: flex-start; gap: 8px; }
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.calendar-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.date-indicator h2 { font-size: 1.25rem; }
|
||||
.legend-item { font-size: 0.75rem; padding: 4px 8px; }
|
||||
.appointment-item { flex-direction: column; align-items: stretch; gap: 8px; }
|
||||
.appointment-actions { width: 100%; }
|
||||
.btn-action { width: 100%; }
|
||||
}
|
||||
.btn-adicionar-consulta {
|
||||
background-color: #2a67e2;
|
||||
color: #fff;
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-adicionar-consulta:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
.btn-adicionar-consulta i {
|
||||
font-size: 1.2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn-adicionar-consulta i {
|
||||
font-size: 1.2em;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
394
src/_assets/css/style/DisponibilidadesDoctorPage.css
Normal file
394
src/_assets/css/style/DisponibilidadesDoctorPage.css
Normal file
@ -0,0 +1,394 @@
|
||||
.disponibilidades-container {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.disponibilidades-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin: 10px 0 25px 0;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
border: 1px solid #e1e8ed;
|
||||
}
|
||||
|
||||
.search-input-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
border: 1px solid #dce1e6;
|
||||
border-radius: 6px;
|
||||
padding: 10px 40px 10px 12px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
|
||||
}
|
||||
|
||||
.clear-search-btn {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
color: #7f8c8d;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.clear-search-btn:hover {
|
||||
background-color: #f8f9fa;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.suggestions-dropdown {
|
||||
border: 1px solid #e1e8ed;
|
||||
border-radius: 6px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
width: calc(100% - 30px);
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin-top: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f8f9fa;
|
||||
transition: background-color 0.2s;
|
||||
font-size: 14px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.suggestion-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.suggestion-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Collapsible Styles */
|
||||
.doctor-group {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e1e8ed;
|
||||
}
|
||||
|
||||
.doctor-header {
|
||||
padding: 16px 20px;
|
||||
background-color: #f1f3f5;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background-color 0.2s;
|
||||
border-bottom: 1px solid #e1e8ed;
|
||||
}
|
||||
|
||||
.doctor-header:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
.doctor-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.doctor-hours {
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
color: #7f8c8d;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
font-size: 1rem;
|
||||
color: #7f8c8d;
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.expand-icon.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.doctor-content {
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.doctor-group.expanded .doctor-content {
|
||||
max-height: 5000px;
|
||||
}
|
||||
|
||||
/* Table Styles */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
.disponibilidades-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.875rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.disponibilidades-table thead {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.disponibilidades-table thead th {
|
||||
padding: 6px 16px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
border-bottom: 1px solid #e1e8ed;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.disponibilidades-table tbody tr {
|
||||
transition: background-color 0.2s;
|
||||
border-bottom: 1px solid #f1f3f5;
|
||||
}
|
||||
|
||||
.disponibilidades-table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.disponibilidades-table tbody tr:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.disponibilidades-table td {
|
||||
padding: 12px 16px;
|
||||
color: #495057;
|
||||
border-bottom: 1px solid #f1f3f5;
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.status-badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.disponibilidades-container { padding: 12px; }
|
||||
.disponibilidades-title { font-size: 1.25rem; }
|
||||
.search-container { padding: 12px; }
|
||||
.doctor-header { padding: 12px; }
|
||||
.doctor-name { font-size: 1rem; }
|
||||
.doctor-hours { display: none; }
|
||||
.expand-icon { font-size: 0.9rem; }
|
||||
.table-container { padding: 0 6px 6px 6px; }
|
||||
.disponibilidades-table thead th { padding: 6px 8px; }
|
||||
.disponibilidades-table td { padding: 10px 8px; font-size: 0.8125rem; }
|
||||
.disponibilidades-table thead th:nth-child(4),
|
||||
.disponibilidades-table thead th:nth-child(5),
|
||||
.disponibilidades-table thead th:nth-child(7),
|
||||
.disponibilidades-table tbody td:nth-child(4),
|
||||
.disponibilidades-table tbody td:nth-child(5),
|
||||
.disponibilidades-table tbody td:nth-child(7) {
|
||||
display: none;
|
||||
}
|
||||
.disp-buttons-container { flex-direction: column; gap: 10px; }
|
||||
.disp-btn-primary, .disp-btn-danger { width: 100%; }
|
||||
.suggestions-dropdown { width: calc(100% - 30px); left: 15px; right: 15px; }
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
|
||||
.status-not-configured {
|
||||
background-color: #7f8c8d;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.edit-btn-container {
|
||||
padding: 8px 10px 0px 10px;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.disp-btn-edit {
|
||||
background-color: #ffe8a1;
|
||||
color: #2c3e50;
|
||||
border: 1px solid #f0d860;
|
||||
border-radius: 6px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.disp-btn-edit:hover {
|
||||
background-color: #ffcc00;
|
||||
border-color: #e6b800;
|
||||
}
|
||||
|
||||
.disp-btn-delete {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.disp-btn-delete:hover {
|
||||
background-color: #f1b0b7;
|
||||
border-color: #e89ca6;
|
||||
}
|
||||
|
||||
/* Edit Mode Styles */
|
||||
.edit-container {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #e1e8ed;
|
||||
}
|
||||
|
||||
.disp-buttons-container {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.disp-btn-primary {
|
||||
padding: 10px 20px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.disp-btn-primary:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
.disp-btn-danger {
|
||||
padding: 10px 20px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
background-color: #fa273c;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.disp-btn-danger:hover {
|
||||
background-color: #f41936;
|
||||
}
|
||||
|
||||
/* Section Titles */
|
||||
.section-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e1e8ed;
|
||||
}
|
||||
|
||||
/* Loading and Empty States */
|
||||
.loading-text, .no-results {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #7f8c8d;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.disponibilidades-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.disponibilidades-table {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.disponibilidades-table th,
|
||||
.disponibilidades-table td {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.doctor-header {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.disp-buttons-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.disp-btn-primary,
|
||||
.disp-btn-danger {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -256,6 +256,15 @@ html, body {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.unidade-selecionarprofissional { flex-direction: column; gap: 10px; }
|
||||
.unidade-selecionarprofissional input,
|
||||
.unidade-selecionarprofissional select { width: 100%; margin-left: 0; }
|
||||
.busca-fila-espera { position: static; width: 100%; margin-bottom: 8px; }
|
||||
.fila-header { height: auto; flex-direction: column; gap: 8px; }
|
||||
.btns-e-legenda-container { flex-direction: column; gap: 10px; }
|
||||
.legenda-tabela { justify-content: center; flex-wrap: wrap; }
|
||||
}
|
||||
.fila-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@ -229,3 +229,191 @@ html[data-bs-theme="dark"] .manage-button {
|
||||
html[data-bs-theme="dark"] .manage-button:hover {
|
||||
background-color: #2323b0;
|
||||
}
|
||||
|
||||
/* Lista de Agendamentos */
|
||||
.agendamentos-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.agendamento-item {
|
||||
background-color: #f9fafb;
|
||||
border-left: 4px solid #5d5dff;
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.25rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.agendamento-item:hover {
|
||||
background-color: #f0f2f5;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.agendamento-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.agendamento-time-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.agendamento-hora {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #5d5dff;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.agendamento-data {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #888;
|
||||
margin: 0;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.agendamento-detalhes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.agendamento-paciente,
|
||||
.agendamento-medico {
|
||||
font-size: 0.95rem;
|
||||
color: #444;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.agendamento-paciente strong,
|
||||
.agendamento-medico strong {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.agendamento-status {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.agendamento-status.status-scheduled {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.agendamento-status.status-completed {
|
||||
background-color: #e8f5e9;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
.agendamento-status.status-pending {
|
||||
background-color: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
.agendamento-status.status-cancelled {
|
||||
background-color: #ffebee;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.agendamento-status.status-requested {
|
||||
background-color: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
.view-all-button {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
background-color: #f0f2f5;
|
||||
color: #5d5dff;
|
||||
border: 2px solid #5d5dff;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.view-all-button:hover {
|
||||
background-color: #5d5dff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Dark Mode - Agendamentos */
|
||||
html[data-bs-theme="dark"] .agendamento-item {
|
||||
background-color: #2a2a2a;
|
||||
border-left-color: #6c6cff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-item:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-hora {
|
||||
color: #8888ff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-data {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-paciente,
|
||||
html[data-bs-theme="dark"] .agendamento-medico {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-paciente strong,
|
||||
html[data-bs-theme="dark"] .agendamento-medico strong {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-status.status-scheduled {
|
||||
background-color: #1a3a52;
|
||||
color: #64b5f6;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-status.status-completed {
|
||||
background-color: #1b3a1f;
|
||||
color: #81c784;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-status.status-pending {
|
||||
background-color: #3d2817;
|
||||
color: #ffb74d;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-status.status-cancelled {
|
||||
background-color: #3d1f1f;
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-status.status-requested {
|
||||
background-color: #2d1f3d;
|
||||
color: #ba68c8;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .view-all-button {
|
||||
background-color: #2a2a2a;
|
||||
color: #8888ff;
|
||||
border-color: #6c6cff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .view-all-button:hover {
|
||||
background-color: #6c6cff;
|
||||
color: #fff;
|
||||
}
|
||||
@ -2,6 +2,11 @@
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.table-doctor-card {
|
||||
border: none;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.table-doctor-card .card-header {
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
@ -155,6 +160,17 @@
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.table-doctor-card .card-header { padding: 0.75rem 1rem; }
|
||||
.table-doctor-table th, .table-doctor-table td { padding: 8px 6px; }
|
||||
.table-doctor-table thead th:nth-child(2),
|
||||
.table-doctor-table thead th:nth-child(4),
|
||||
.table-doctor-table tbody td:nth-child(2),
|
||||
.table-doctor-table tbody td:nth-child(4) { display: none; }
|
||||
.filter-buttons-container { width: 100%; }
|
||||
.filter-btn { width: 100%; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.table-doctor-table {
|
||||
font-size: 0.875rem;
|
||||
|
||||
@ -2,6 +2,11 @@
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.table-paciente-card {
|
||||
border: none;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.table-paciente-card .card-header {
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
@ -333,3 +338,13 @@
|
||||
padding: 0.4em 0.65em;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.table-paciente-card .card-header { padding: 0.75rem 1rem; }
|
||||
.table-paciente-table th, .table-paciente-table td { padding: 8px 6px; }
|
||||
.table-paciente-table thead th:nth-child(2),
|
||||
.table-paciente-table thead th:nth-child(4),
|
||||
.table-paciente-table tbody td:nth-child(2),
|
||||
.table-paciente-table tbody td:nth-child(4) { display: none; }
|
||||
.table-paciente-filters .btn-sm { width: 100%; }
|
||||
}
|
||||
454
src/_assets/css/style/inicioPaciente.css
Normal file
454
src/_assets/css/style/inicioPaciente.css
Normal file
@ -0,0 +1,454 @@
|
||||
.dashboard-paciente-container {
|
||||
padding: 2rem;
|
||||
background-color: #f7f9fc;
|
||||
flex-grow: 1;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Header - Paciente */
|
||||
.dashboard-paciente-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.dashboard-paciente-header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dashboard-paciente-header p {
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Estatísticas - Paciente */
|
||||
.stats-paciente-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.stat-paciente-card {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.stat-paciente-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-paciente-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-paciente-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stat-paciente-value {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.stat-paciente-icon-wrapper {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-paciente-icon {
|
||||
font-size: 1.4rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Cores dos ícones - Paciente */
|
||||
.stat-paciente-icon-wrapper.blue { background-color: #5d5dff; }
|
||||
.stat-paciente-icon-wrapper.green { background-color: #30d158; }
|
||||
.stat-paciente-icon-wrapper.purple { background-color: #a272ff; }
|
||||
.stat-paciente-icon-wrapper.orange { background-color: #f1952e; }
|
||||
|
||||
/* Ações Rápidas - Paciente */
|
||||
.quick-actions-paciente h2 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.actions-paciente-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.action-paciente-button {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.action-paciente-button:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.action-paciente-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-right: 1.2rem;
|
||||
color: #5d5dff;
|
||||
}
|
||||
|
||||
.action-paciente-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.action-paciente-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: #444;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.action-paciente-desc {
|
||||
font-size: 0.85rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Próximas Consultas - Paciente */
|
||||
.proximas-consultas-section {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.proximas-consultas-section h2 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Lista de Consultas - Paciente */
|
||||
.consultas-paciente-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.consulta-paciente-item {
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
|
||||
border-left: 5px solid #5d5dff;
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.consulta-paciente-item:hover {
|
||||
background: linear-gradient(135deg, #f0f2f5 0%, #fafbfc 100%);
|
||||
transform: translateX(8px);
|
||||
box-shadow: 0 4px 12px rgba(93, 93, 255, 0.15);
|
||||
}
|
||||
|
||||
.consulta-paciente-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.consulta-paciente-time-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 90px;
|
||||
padding: 0.5rem;
|
||||
background-color: #f0f2ff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.consulta-paciente-hora {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #5d5dff;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.consulta-paciente-data {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #7777aa;
|
||||
margin: 0;
|
||||
margin-top: 0.25rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.consulta-paciente-detalhes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.consulta-paciente-medico {
|
||||
font-size: 1rem;
|
||||
color: #444;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.consulta-icon {
|
||||
color: #5d5dff;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.consulta-paciente-medico strong {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.consulta-paciente-especialidade {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
margin-left: 1.6rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.consulta-paciente-status {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.consulta-paciente-status.status-scheduled {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.consulta-paciente-status.status-pending {
|
||||
background-color: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
.consulta-paciente-status.status-requested {
|
||||
background-color: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
/* Sem Consultas */
|
||||
.no-consultas-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
.no-consultas-icon {
|
||||
font-size: 4rem;
|
||||
color: #bbb;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.no-consultas-content p {
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.agendar-paciente-button,
|
||||
.view-all-paciente-button {
|
||||
background-color: #5d5dff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.875rem 2rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.agendar-paciente-button:hover,
|
||||
.view-all-paciente-button:hover {
|
||||
background-color: #4444ff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(93, 93, 255, 0.3);
|
||||
}
|
||||
|
||||
.view-all-paciente-button {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
background-color: #f0f2f5;
|
||||
color: #5d5dff;
|
||||
border: 2px solid #5d5dff;
|
||||
}
|
||||
|
||||
.view-all-paciente-button:hover {
|
||||
background-color: #5d5dff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Dark Mode - Paciente */
|
||||
html[data-bs-theme="dark"] .dashboard-paciente-container {
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .dashboard-paciente-header h1,
|
||||
html[data-bs-theme="dark"] .dashboard-paciente-header p,
|
||||
html[data-bs-theme="dark"] .quick-actions-paciente h2,
|
||||
html[data-bs-theme="dark"] .proximas-consultas-section h2,
|
||||
html[data-bs-theme="dark"] .action-paciente-title,
|
||||
html[data-bs-theme="dark"] .stat-paciente-value {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .stat-paciente-card,
|
||||
html[data-bs-theme="dark"] .action-paciente-button,
|
||||
html[data-bs-theme="dark"] .proximas-consultas-section {
|
||||
background-color: #1e1e1e;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .stat-paciente-label,
|
||||
html[data-bs-theme="dark"] .action-paciente-desc,
|
||||
html[data-bs-theme="dark"] .no-consultas-content p {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-item {
|
||||
background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
|
||||
border-left-color: #6c6cff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-item:hover {
|
||||
background: linear-gradient(135deg, #333 0%, #252525 100%);
|
||||
box-shadow: 0 4px 12px rgba(108, 108, 255, 0.2);
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-time-date {
|
||||
background-color: #2a2a3a;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-hora {
|
||||
color: #8888ff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-data {
|
||||
color: #9999cc;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-medico,
|
||||
html[data-bs-theme="dark"] .consulta-paciente-especialidade {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-medico strong {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-icon,
|
||||
html[data-bs-theme="dark"] .action-paciente-icon {
|
||||
color: #8888ff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-status.status-scheduled {
|
||||
background-color: #1a3a52;
|
||||
color: #64b5f6;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-status.status-pending {
|
||||
background-color: #3d2817;
|
||||
color: #ffb74d;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-status.status-requested {
|
||||
background-color: #2d1f3d;
|
||||
color: #ba68c8;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .no-consultas-icon {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendar-paciente-button {
|
||||
background-color: #6c6cff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendar-paciente-button:hover {
|
||||
background-color: #5555dd;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .view-all-paciente-button {
|
||||
background-color: #2a2a2a;
|
||||
color: #8888ff;
|
||||
border-color: #6c6cff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .view-all-paciente-button:hover {
|
||||
background-color: #6c6cff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Responsivo */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-paciente-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stats-paciente-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.actions-paciente-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.consulta-paciente-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.consulta-paciente-time-date {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
@ -1,113 +1,132 @@
|
||||
//Nesta página falta: ajustar caminho do CSS
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import CardConsulta from './CardConsulta';
|
||||
import Spinner from '../Spinner';
|
||||
import { ChevronLeft, ChevronRight, Edit, Trash2, User, Stethoscope } from 'lucide-react';
|
||||
|
||||
//import "./style/styleTabelas/tabeladia.css";
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/pt-br';
|
||||
dayjs.locale('pt-br');
|
||||
|
||||
|
||||
const TabelaAgendamentoDia = ({ agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, coresConsultas, setListaConsultaID, listaConsultasID }) => {
|
||||
const [indiceAcesso, setIndiceAcesso] = useState(null)
|
||||
const [Dia, setDia] = useState()
|
||||
const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
|
||||
const nomeMedico = agendamentosDoDia.find(item => item.medico)?.medico || 'Profissional';
|
||||
const TabelaAgendamentoDia = ({
|
||||
agendamentos,
|
||||
setDictInfo,
|
||||
setShowDeleteModal,
|
||||
setSelectedId,
|
||||
setShowConfirmModal,
|
||||
listaConsultasID,
|
||||
coresConsultas
|
||||
}) => {
|
||||
const [currentDate, setCurrentDate] = useState(dayjs());
|
||||
const [appointmentsForDay, setAppointmentsForDay] = useState([]);
|
||||
|
||||
let ListaDiasComAgendamentos = Object.keys(agendamentos)
|
||||
|
||||
const [showSpinner, setShowSpinner] = useState(true);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!agendamentos) return;
|
||||
|
||||
const dias = Object.keys(agendamentos);
|
||||
if (dias.length > 0) {
|
||||
setIndiceAcesso(0); // começa no primeiro dia disponível
|
||||
setDia(dias[0]); // seta o Dia inicial
|
||||
|
||||
setShowSpinner(false)
|
||||
}
|
||||
}, [agendamentos]);
|
||||
|
||||
|
||||
//console.log(Dia, "hshdhshhsdhs")
|
||||
|
||||
useEffect(() => {
|
||||
setDia(ListaDiasComAgendamentos[indiceAcesso])
|
||||
}, [indiceAcesso])
|
||||
const formattedDate = currentDate.format('YYYY-MM-DD');
|
||||
const dailyAppointments = agendamentos[formattedDate] || [];
|
||||
|
||||
const formatarDataComDia = (dataISO) => {
|
||||
if (!dataISO) return '';
|
||||
|
||||
const data = new Date(dataISO); // converte para objeto Date
|
||||
const appointmentsComStatusAtualizado = dailyAppointments.map(app => {
|
||||
const index = listaConsultasID.indexOf(app.id);
|
||||
if (index > -1) {
|
||||
return { ...app, status: coresConsultas[index] };
|
||||
}
|
||||
return app;
|
||||
});
|
||||
|
||||
// nomes dos dias da semana
|
||||
const dias = [
|
||||
'Segunda-feira',
|
||||
'Terça-feira',
|
||||
'Quarta-feira',
|
||||
'Quinta-feira',
|
||||
'Sexta-feira',
|
||||
'Sábado'
|
||||
];
|
||||
const diaSemana = dias[data.getDay()]; // 0 = Domingo, 1 = Segunda, etc.
|
||||
|
||||
const dia = dataISO.split('-')[2];
|
||||
const mes = dataISO.split('-')[1];
|
||||
const ano = dataISO.split('-')[0];
|
||||
setAppointmentsForDay(appointmentsComStatusAtualizado);
|
||||
}, [currentDate, agendamentos, listaConsultasID, coresConsultas]);
|
||||
|
||||
|
||||
const handlePrevDay = () => {
|
||||
setCurrentDate(currentDate.subtract(1, 'day'));
|
||||
};
|
||||
|
||||
|
||||
const handleNextDay = () => {
|
||||
setCurrentDate(currentDate.add(1, 'day'));
|
||||
};
|
||||
|
||||
|
||||
const handleEdit = (agendamento) => {
|
||||
// Adapte para a sua lógica de edição, talvez abrindo um modal
|
||||
console.log("Editar:", agendamento);
|
||||
setDictInfo(agendamento);
|
||||
};
|
||||
|
||||
|
||||
const handleDelete = (id) => {
|
||||
setSelectedId(id);
|
||||
setShowDeleteModal(true);
|
||||
};
|
||||
|
||||
|
||||
// Gera os horários do dia (ex: 08:00 às 18:00)
|
||||
const renderTimeSlots = () => {
|
||||
const slots = [];
|
||||
for (let i = 8; i <= 18; i++) {
|
||||
const time = `${i.toString().padStart(2, '0')}:00`;
|
||||
const hourlyAppointments = appointmentsForDay.filter(app =>
|
||||
dayjs(app.scheduled_at).format('HH:mm') === time
|
||||
);
|
||||
|
||||
|
||||
slots.push(
|
||||
<div className="time-slot" key={time}>
|
||||
<div className="time-marker">{time}</div>
|
||||
<div className="appointments-container">
|
||||
{hourlyAppointments.length > 0 ? (
|
||||
hourlyAppointments.map(app => (
|
||||
<div key={app.id} className="appointment-card" data-status={app.status}>
|
||||
<div className="card-content">
|
||||
<div className="card-line">
|
||||
<Stethoscope size={16} className="card-icon" />
|
||||
<strong>Dr(a):</strong> {app.medico_nome}
|
||||
</div>
|
||||
<div className="card-line">
|
||||
<User size={16} className="card-icon" />
|
||||
<strong>Paciente:</strong> {app.paciente_nome}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-actions">
|
||||
<button className="btn-card-action" onClick={() => handleEdit(app)}>
|
||||
<Edit size={16} />
|
||||
</button>
|
||||
<button className="btn-card-action btn-delete" onClick={() => handleDelete(app.id)}>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="no-appointment-placeholder"></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return slots;
|
||||
};
|
||||
|
||||
return `${diaSemana}, ${dia}/${mes}/${ano}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<div id='tabela-seletor-container'>
|
||||
<button onClick={() => {if(indiceAcesso === 0)return; else(setIndiceAcesso(indiceAcesso - 1))}}> <i className="bi bi-chevron-compact-left"></i></button>
|
||||
|
||||
|
||||
<p>{Dia ? formatarDataComDia(Dia) : ''}</p>
|
||||
|
||||
<button onClick={() => {if(ListaDiasComAgendamentos.length - 1 === indiceAcesso)return; else(setIndiceAcesso(indiceAcesso + 1))}}> <i className="bi bi-chevron-compact-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<table className='tabeladiaria'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='cabecalho-horario'>Horário</th>
|
||||
<th>{}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{agendamentos[Dia]?.map((agendamento, index) => {
|
||||
|
||||
let Data =agendamento.scheduled_at.split("T")
|
||||
let horario = Data[1].split(':')
|
||||
return(
|
||||
<tr key={index}>
|
||||
|
||||
<td className='coluna-horario'><p className='horario-texto'>{`${horario[0]}:${horario[1]}`}</p></td>
|
||||
<td className='mostrar-horario'>
|
||||
<div>
|
||||
<CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId} selectedID={selectedID} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)})}
|
||||
{showSpinner &&
|
||||
<tr>
|
||||
<td colspan='2'>
|
||||
<Spinner/>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="modern-daily-view">
|
||||
<div className="calendar-header">
|
||||
<button onClick={handlePrevDay} className="btn-nav">
|
||||
<ChevronLeft size={24} />
|
||||
</button>
|
||||
<h2>{currentDate.format('dddd, D [de] MMMM [de] YYYY')}</h2>
|
||||
<button onClick={handleNextDay} className="btn-nav">
|
||||
<ChevronRight size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="timeline">
|
||||
{renderTimeSlots()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
export default TabelaAgendamentoDia;
|
||||
142
src/pages/medico/AgendamentoMedico.jsx
Normal file
142
src/pages/medico/AgendamentoMedico.jsx
Normal file
@ -0,0 +1,142 @@
|
||||
// MedicoAgendamento.jsx
|
||||
|
||||
import { useState, useMemo, useEffect } from 'react';
|
||||
import { useAuth } from '../../_assets/utils/AuthProvider.js';
|
||||
|
||||
import CalendarComponent from '../../components/agendamento/Calendario.jsx';
|
||||
import TabelaAgendamentoDia from '../../components/agendamento/TabelaAgendamentoDia';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
dayjs.locale('pt-br');
|
||||
|
||||
const MedicoAgendamento = () => {
|
||||
const { getAuthorizationHeader, user } = useAuth();
|
||||
const [currentDate, setCurrentDate] = useState(dayjs());
|
||||
const [selectedDay, setSelectedDay] = useState(dayjs());
|
||||
const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState({});
|
||||
const [showSpinner, setShowSpinner] = useState(true);
|
||||
const [modoVisualizacao, setModoVisualizacao] = useState('Dia');
|
||||
|
||||
|
||||
const [quickJump, setQuickJump] = useState({
|
||||
month: currentDate.month(),
|
||||
year: currentDate.year()
|
||||
});
|
||||
|
||||
const handleQuickJumpChange = (type, value) => {
|
||||
setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
|
||||
};
|
||||
|
||||
const applyQuickJump = () => {
|
||||
let newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
|
||||
setCurrentDate(newDate);
|
||||
setSelectedDay(newDate);
|
||||
};
|
||||
|
||||
|
||||
const [selectedID, setSelectedId] = useState('0');
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false); t
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const mockAgendamentos = {
|
||||
[dayjs().format('YYYY-MM-DD')]: [
|
||||
{ id: 1, scheduled_at: dayjs().set('hour', 10).set('minute', 0).toISOString(), paciente_nome: "Paciente Teste 1", medico_nome: "Dr. Mock", status: "agendado" },
|
||||
{ id: 2, scheduled_at: dayjs().set('hour', 11).set('minute', 30).toISOString(), paciente_nome: "Paciente Teste 2", medico_nome: "Dr. Mock", status: "confirmed" },
|
||||
],
|
||||
|
||||
'2025-10-27': [
|
||||
{ id: 3, scheduled_at: '2025-10-27T19:30:00Z', paciente_nome: 'Davi Andrade', medico_nome: 'Dr. João', status: 'agendado' },
|
||||
{ id: 4, scheduled_at: '2025-10-27T20:00:00Z', paciente_nome: 'Davi Andrade', medico_nome: 'Dr. João', status: 'agendado' },
|
||||
{ id: 5, scheduled_at: '2025-10-27T21:30:00Z', paciente_nome: 'Davi Andrade', medico_nome: 'Dr. João', status: 'agendado' },
|
||||
]
|
||||
};
|
||||
|
||||
const today = dayjs();
|
||||
const startOfMonth = today.startOf('month');
|
||||
const nov11 = startOfMonth.add(10, 'day').format('YYYY-MM-DD');
|
||||
|
||||
|
||||
mockAgendamentos[nov11] = [
|
||||
{ id: 6, scheduled_at: `${nov11}T10:30:00Z`, paciente_nome: 'Paciente C', medico_nome: 'Isaac Kauã', status: 'agendado' },
|
||||
{ id: 7, scheduled_at: `${nov11}T11:00:00Z`, paciente_nome: 'João Gustavo', medico_nome: 'João Gustavo', status: 'agendado' },
|
||||
{ id: 8, scheduled_at: `${nov11}T12:30:00Z`, paciente_nome: 'João Gustavo', medico_nome: 'João Gustavo', status: 'agendado' },
|
||||
{ id: 9, scheduled_at: `${nov11}T15:00:00Z`, paciente_nome: 'Pedro Abravanel', medico_nome: 'Fernando Prichowski', status: 'agendado' },
|
||||
];
|
||||
|
||||
|
||||
setAgendamentosOrganizados(mockAgendamentos);
|
||||
setShowSpinner(false);
|
||||
}, []);
|
||||
|
||||
|
||||
const handleSelectSlot = (timeSlot, doctorId) => {
|
||||
alert(`Abrir tela de Nova Consulta para o dia ${selectedDay.format('DD/MM/YYYY')} às ${timeSlot} com o Médico ID: ${doctorId}`);
|
||||
|
||||
};
|
||||
|
||||
const isMedico = true;
|
||||
const medicoLogadoID = user?.doctor_id || "ID_MEDICO_DEFAULT";
|
||||
|
||||
return (
|
||||
<div className='agendamento-medico-container'>
|
||||
<h1>Agenda do Médico: {user?.full_name || "Nome do Médico"}</h1>
|
||||
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
||||
<button className='manage-button btn' onClick={() => {}}><i className="bi bi-gear-fill me-1"></i> Mudar Disponibilidade</button>
|
||||
<button className="btn btn-primary" onClick={() => {}}><i className="bi bi-person-plus-fill"></i> Adicionar Paciente</button>
|
||||
</div>
|
||||
|
||||
<div className="tab-buttons" style={{ marginBottom: '20px' }}>
|
||||
<button className={`btn ${modoVisualizacao === 'Dia' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => setModoVisualizacao('Dia')}>Dia</button>
|
||||
<button className={`btn ${modoVisualizacao === 'Semana' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => setModoVisualizacao('Semana')}>Semana</button>
|
||||
<button className={`btn ${modoVisualizacao === 'Mês' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => setModoVisualizacao('Mês')}>Mês</button>
|
||||
</div>
|
||||
|
||||
<div className='agenda-e-calendario-wrapper'>
|
||||
{}
|
||||
<div className='medico-calendar-column' style={{ flex: 1 }}>
|
||||
<CalendarComponent
|
||||
currentDate={currentDate}
|
||||
setCurrentDate={setCurrentDate}
|
||||
selectedDay={selectedDay}
|
||||
setSelectedDay={setSelectedDay}
|
||||
DictAgendamentosOrganizados={DictAgendamentosOrganizados}
|
||||
showSpinner={showSpinner}
|
||||
T
|
||||
setSelectedId={setSelectedId}
|
||||
setShowDeleteModal={setShowDeleteModal}
|
||||
setShowConfirmModal={setShowConfirmModal}
|
||||
quickJump={quickJump}
|
||||
handleQuickJumpChange={handleQuickJumpChange}
|
||||
applyQuickJump={applyQuickJump}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{}
|
||||
<div className='medico-schedule-column' style={{ flex: 2 }}>
|
||||
{modoVisualizacao === 'Dia' && (
|
||||
<TabelaAgendamentoDia
|
||||
selectedDay={selectedDay}
|
||||
agendamentosDoDia={DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')] || []}
|
||||
onSelectSlot={handleSelectSlot}
|
||||
isMedicoView={isMedico}
|
||||
medicoID={medicoLogadoID}
|
||||
horariosDeTrabalho={[
|
||||
{ hora: '19:30', medicoId: '123' },
|
||||
{ hora: '20:00', medicoId: '123' },
|
||||
{ hora: '21:30', medicoId: '123' }
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
{}
|
||||
{}
|
||||
{}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MedicoAgendamento;
|
||||
277
src/pages/paciente/DashboardPaciente.jsx
Normal file
277
src/pages/paciente/DashboardPaciente.jsx
Normal file
@ -0,0 +1,277 @@
|
||||
//inicioPaciente.jsx
|
||||
//Nesta página falta: ajustar caminho do CSS
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { FaCalendarAlt, FaCalendarCheck, FaFileAlt, FaUserMd, FaClock } from 'react-icons/fa';
|
||||
import { useAuth } from '../../_assets/utils/AuthProvider';
|
||||
import API_KEY from '../../_assets/utils/apiKeys';
|
||||
|
||||
// import './style/inicioPaciente.css';
|
||||
|
||||
function InicioPaciente() {
|
||||
const navigate = useNavigate();
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
const [agendamentos, setAgendamentos] = useState([]);
|
||||
const [medicos, setMedicos] = useState([]);
|
||||
const [agendamentosComMedicos, setAgendamentosComMedicos] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [pacienteId, setPacienteId] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const userId = localStorage.getItem('user_id') || localStorage.getItem('patient_id');
|
||||
setPacienteId(userId);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchMedicos = async () => {
|
||||
try {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
|
||||
const requestOptions = {
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setMedicos(data);
|
||||
console.log(' Médicos carregados:', data.length);
|
||||
} else {
|
||||
console.error(' Erro ao buscar médicos:', response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(' Erro ao buscar médicos:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAgendamentos = async () => {
|
||||
try {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
|
||||
const requestOptions = {
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
// Buscar todos os agendamentos (depois filtraremos pelo paciente)
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setAgendamentos(data);
|
||||
console.log(' Agendamentos carregados:', data.length);
|
||||
} else {
|
||||
console.error(' Erro ao buscar agendamentos:', response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(' Erro ao buscar agendamentos:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isAuthenticated) {
|
||||
fetchMedicos();
|
||||
fetchAgendamentos();
|
||||
}
|
||||
}, [isAuthenticated, getAuthorizationHeader]);
|
||||
|
||||
useEffect(() => {
|
||||
if (agendamentos.length > 0 && medicos.length > 0) {
|
||||
const agendamentosComNomes = agendamentos.map(agendamento => {
|
||||
const medico = medicos.find(m => m.id === agendamento.doctor_id);
|
||||
return {
|
||||
...agendamento,
|
||||
nomeMedico: medico?.full_name || 'Médico não encontrado',
|
||||
especialidadeMedico: medico?.specialty || ''
|
||||
};
|
||||
});
|
||||
setAgendamentosComMedicos(agendamentosComNomes);
|
||||
}
|
||||
}, [agendamentos, medicos]);
|
||||
|
||||
const meusAgendamentos = agendamentosComMedicos.filter(a =>
|
||||
pacienteId ? a.patient_id === pacienteId : true
|
||||
);
|
||||
|
||||
const hoje = new Date();
|
||||
hoje.setHours(0, 0, 0, 0);
|
||||
|
||||
const agendamentosFuturos = meusAgendamentos.filter(a => {
|
||||
if (!a.scheduled_at) return false;
|
||||
const dataAgendamento = new Date(a.scheduled_at);
|
||||
return dataAgendamento >= hoje && a.status !== 'cancelled' && a.status !== 'completed';
|
||||
}).sort((a, b) => new Date(a.scheduled_at) - new Date(b.scheduled_at));
|
||||
|
||||
const proximasConsultas = agendamentosFuturos.length;
|
||||
const consultasHoje = agendamentosFuturos.filter(a => {
|
||||
const dataAgendamento = new Date(a.scheduled_at);
|
||||
dataAgendamento.setHours(0, 0, 0, 0);
|
||||
return dataAgendamento.getTime() === hoje.getTime();
|
||||
}).length;
|
||||
|
||||
const consultasPendentes = meusAgendamentos.filter(a =>
|
||||
a.status === 'pending' || a.status === 'requested'
|
||||
).length;
|
||||
|
||||
const historicoConsultas = meusAgendamentos.filter(a =>
|
||||
a.status === 'completed'
|
||||
).length;
|
||||
|
||||
return (
|
||||
<div className="dashboard-paciente-container">
|
||||
<div className="dashboard-paciente-header">
|
||||
<h1>Bem-vindo ao MediConnect</h1>
|
||||
<p>Gerencie suas consultas e acompanhe seu histórico médico</p>
|
||||
</div>
|
||||
|
||||
<div className="stats-paciente-grid">
|
||||
<div className="stat-paciente-card">
|
||||
<div className="stat-paciente-info">
|
||||
<span className="stat-paciente-label">Próximas Consultas</span>
|
||||
<span className="stat-paciente-value">{proximasConsultas}</span>
|
||||
</div>
|
||||
<div className="stat-paciente-icon-wrapper blue">
|
||||
<FaCalendarAlt className="stat-paciente-icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stat-paciente-card">
|
||||
<div className="stat-paciente-info">
|
||||
<span className="stat-paciente-label">Consultas Hoje</span>
|
||||
<span className="stat-paciente-value">{consultasHoje}</span>
|
||||
</div>
|
||||
<div className="stat-paciente-icon-wrapper green">
|
||||
<FaCalendarCheck className="stat-paciente-icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stat-paciente-card">
|
||||
<div className="stat-paciente-info">
|
||||
<span className="stat-paciente-label">Aguardando</span>
|
||||
<span className="stat-paciente-value">{loading ? '...' : consultasPendentes}</span>
|
||||
</div>
|
||||
<div className="stat-paciente-icon-wrapper purple">
|
||||
<FaClock className="stat-paciente-icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stat-paciente-card">
|
||||
<div className="stat-paciente-info">
|
||||
<span className="stat-paciente-label">Realizadas</span>
|
||||
<span className="stat-paciente-value">{historicoConsultas}</span>
|
||||
</div>
|
||||
<div className="stat-paciente-icon-wrapper orange">
|
||||
<FaFileAlt className="stat-paciente-icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="quick-actions-paciente">
|
||||
<h2>Acesso Rápido</h2>
|
||||
<div className="actions-paciente-grid">
|
||||
<div className="action-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
|
||||
<FaCalendarCheck className="action-paciente-icon" />
|
||||
<div className="action-paciente-info">
|
||||
<span className="action-paciente-title">Minhas Consultas</span>
|
||||
<span className="action-paciente-desc">Ver todos os agendamentos</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="action-paciente-button" onClick={() => navigate('/paciente/laudo')}>
|
||||
<FaFileAlt className="action-paciente-icon" />
|
||||
<div className="action-paciente-info">
|
||||
<span className="action-paciente-title">Meus Laudos</span>
|
||||
<span className="action-paciente-desc">Acessar documentos médicos</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="action-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
|
||||
<FaUserMd className="action-paciente-icon" />
|
||||
<div className="action-paciente-info">
|
||||
<span className="action-paciente-title">Meus Médicos</span>
|
||||
<span className="action-paciente-desc">Ver histórico de atendimentos</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="proximas-consultas-section">
|
||||
<h2>Próximas Consultas</h2>
|
||||
{loading ? (
|
||||
<div className="no-consultas-content">
|
||||
<p>Carregando suas consultas...</p>
|
||||
</div>
|
||||
) : agendamentosFuturos.length > 0 ? (
|
||||
<div className="consultas-paciente-list">
|
||||
{agendamentosFuturos.slice(0, 3).map(agendamento => (
|
||||
<div key={agendamento.id} className="consulta-paciente-item">
|
||||
<div className="consulta-paciente-info">
|
||||
<div className="consulta-paciente-time-date">
|
||||
<p className="consulta-paciente-hora">
|
||||
{new Date(agendamento.scheduled_at).toLocaleTimeString('pt-BR', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</p>
|
||||
<p className="consulta-paciente-data">
|
||||
{new Date(agendamento.scheduled_at).toLocaleDateString('pt-BR', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<div className="consulta-paciente-detalhes">
|
||||
<p className="consulta-paciente-medico">
|
||||
<FaUserMd className="consulta-icon" />
|
||||
<strong>Dr(a):</strong> {agendamento.nomeMedico}
|
||||
</p>
|
||||
{agendamento.especialidadeMedico && (
|
||||
<p className="consulta-paciente-especialidade">
|
||||
{agendamento.especialidadeMedico}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span className={`consulta-paciente-status status-${agendamento.status}`}>
|
||||
{agendamento.status === 'scheduled' ? 'Confirmado' :
|
||||
agendamento.status === 'pending' ? 'Aguardando' :
|
||||
agendamento.status === 'requested' ? 'Solicitado' : agendamento.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{agendamentosFuturos.length > 3 && (
|
||||
<button className="view-all-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
|
||||
Ver todas as consultas
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="no-consultas-content">
|
||||
<FaCalendarCheck className="no-consultas-icon" />
|
||||
<p>Você não tem consultas agendadas</p>
|
||||
<button className="agendar-paciente-button" onClick={() => navigate('/paciente/agendamento/criar')}>
|
||||
Agendar Consulta
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default InicioPaciente;
|
||||
@ -3,6 +3,7 @@
|
||||
|
||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import { useState } from "react";
|
||||
|
||||
//Components
|
||||
import Sidebar from "../../components/Sidebar/Sidebar";
|
||||
|
||||
@ -23,9 +24,11 @@ import PainelAdministrativo from '../../pages/admin/PainelAdmin';
|
||||
//Data
|
||||
import admItems from "../../data/sidebar-items-adm.json";
|
||||
|
||||
function PerfilAdmin() {
|
||||
function Perfiladm() {
|
||||
|
||||
const [DictInfo, setDictInfo] = useState({})
|
||||
return (
|
||||
|
||||
return (
|
||||
|
||||
<div id="app" className="active">
|
||||
<Sidebar menuItems={admItems} />
|
||||
@ -34,12 +37,12 @@ function PerfilAdmin() {
|
||||
<Route path="/" element={<UserDashboard />} />
|
||||
<Route path="/pacientes/cadastro" element={<PatientCadastroManager />} />
|
||||
<Route path="/medicos/cadastro" element={<DoctorCadastroManager />} />
|
||||
<Route path="/pacientes" element={<TablePaciente setDictInfo={setDictInfo} />} />
|
||||
<Route path="/medicos" element={<DoctorTable />} />
|
||||
<Route path="/pacientes/:id" element={<Details DictInfo={DictInfo} />} />
|
||||
<Route path="/pacientes/:id/edit" element={<EditPage DictInfo={DictInfo} />} />
|
||||
<Route path="/medicos/:id" element={<DoctorDetails />} />
|
||||
<Route path="/medicos/:id/edit" element={<DoctorEditPage />} />
|
||||
<Route path="/pacientes" element={<TablePaciente setDictInfo={setDictInfo}/>} />
|
||||
<Route path="/medicos" element={<DoctorTable setDictInfo={setDictInfo} />} />
|
||||
<Route path="/pacientes/details" element={<Details DictInfo={DictInfo} />} />
|
||||
<Route path="/pacientes/edit" element={<EditPage DictInfo={DictInfo} />} />
|
||||
<Route path="/medicos/details" element={<DoctorDetails DictInfo={DictInfo}/>} />
|
||||
<Route path="/medicos/edit" element={<DoctorEditPage DictInfo={DictInfo}/>} />
|
||||
<Route path="/agendamento" element={<Agendamento />} />
|
||||
<Route path="/laudo" element={<LaudoManager />} />
|
||||
|
||||
@ -53,4 +56,4 @@ function PerfilAdmin() {
|
||||
);
|
||||
}
|
||||
|
||||
export default PerfilAdmin;
|
||||
export default Perfiladm;
|
||||
@ -8,6 +8,7 @@ import { useState } from "react";
|
||||
import Sidebar from "../../components/Sidebar/Sidebar";
|
||||
|
||||
//Pages
|
||||
import InicioPaciente from "../../pages/paciente/DashboardPaciente";
|
||||
import LaudoManager from "../../pages/secretaria/CadastroLaudos";
|
||||
import ConsultaCadastroManager from "../../pages/paciente/CadastroConsulta";
|
||||
import ConsultasPaciente from "../../pages/paciente/ListaConsulta";
|
||||
@ -26,7 +27,7 @@ const [dadosConsulta, setConsulta] = useState({})
|
||||
|
||||
<div id="main">
|
||||
<Routes>
|
||||
<Route path="/" element={<LaudoManager />} />
|
||||
<Route path="/" element={<InicioPaciente />} />
|
||||
<Route path="agendamento" element={<ConsultasPaciente setConsulta={setConsulta}/>} />
|
||||
<Route path="agendamento/criar" element={<ConsultaCadastroManager />} />
|
||||
<Route path="agendamento/edit" element={<ConsultaEditPage dadosConsulta={dadosConsulta} />} />
|
||||
|
||||
@ -31,18 +31,18 @@ function PerfilSecretaria({ onLogout }) {
|
||||
return (
|
||||
// <Router>
|
||||
<div id="app" className="active">
|
||||
<Sidebar onLogout={onLogout} menuItems={SecretariaItems}/>
|
||||
<Sidebar onLogout={onLogout} menuItems={SecretariaItems} />
|
||||
<div id="main">
|
||||
<Routes>
|
||||
<Route path="/" element={<Inicio/>}/>
|
||||
<Route path="pacientes/cadastro" element={<PatientCadastroManager />} />
|
||||
<Route path="medicos/cadastro" element={<DoctorCadastroManager />} />
|
||||
<Route path="pacientes" element={<TablePaciente setDictInfo={setDictInfo}/>} />
|
||||
<Route path="medicos" element={<DoctorTable />} />
|
||||
<Route path="medicos" element={<DoctorTable setDictInfo={setDictInfo} />} />
|
||||
<Route path="pacientes/details" element={<Details DictInfo={DictInfo}/>} />
|
||||
<Route path="pacientes/edit" element={<EditPage DictInfo={DictInfo}/>} />
|
||||
<Route path="medicos/:id" element={<DoctorDetails />} />
|
||||
<Route path="medicos/:id/edit" element={<DoctorEditPage />} />
|
||||
<Route path="medicos/details/:id" element={<DoctorDetails doctor={DictInfo} />} />
|
||||
<Route path="medicos/edit/:id" element={<DoctorEditPage DictInfo={DictInfo} />} />
|
||||
<Route path="agendamento" element={<Agendamento setDictInfo={setDictInfo}/>} />
|
||||
<Route path="agendamento/edit" element={<AgendamentoEditPage setDictInfo={setDictInfo} DictInfo={DictInfo}/>} />
|
||||
<Route path="laudo" element={<LaudoManager />} />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user