Merge branch 'ajuste-nas-tabelas'
This commit is contained in:
commit
3b8e73535b
537
package-lock.json
generated
537
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,26 @@
|
|||||||
|
:root {
|
||||||
|
--primary-blue: #1e3a8a;
|
||||||
|
--light-blue: #E6F2FF;
|
||||||
|
--medium-blue: #D1E7FF;
|
||||||
|
--border-blue: #B8D4F0;
|
||||||
|
--warning-light: #FFF3CD;
|
||||||
|
--warning-dark: #856404;
|
||||||
|
--warning-border: #FFEAA7;
|
||||||
|
--danger-light: #F8D7DA;
|
||||||
|
--danger-dark: #721C24;
|
||||||
|
--danger-border: #F5C6CB;
|
||||||
|
--bg-light: #f8f9fa;
|
||||||
|
--border-light: #dee2e6;
|
||||||
|
--text-muted: #6c757d;
|
||||||
|
--text-dark: #495057;
|
||||||
|
--spacing-xs: 0.25rem;
|
||||||
|
--spacing-sm: 0.5rem;
|
||||||
|
--spacing-md: 1rem;
|
||||||
|
--spacing-lg: 1.5rem;
|
||||||
|
--border-radius: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== ESTILOS EXISTENTES DO DASHBOARD ===== */
|
||||||
.dashboard-container {
|
.dashboard-container {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
font-family: 'Arial', sans-serif;
|
font-family: 'Arial', sans-serif;
|
||||||
@ -44,68 +67,6 @@
|
|||||||
box-shadow: 0 4px 12px rgba(30, 58, 138, 0.4);
|
box-shadow: 0 4px 12px rgba(30, 58, 138, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-container {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 1.2rem;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-subtitle {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-content {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.8rem;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-input {
|
|
||||||
flex: 1;
|
|
||||||
padding: 0.5rem 0.8rem;
|
|
||||||
border: 1px solid #d1d5db;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: #333;
|
|
||||||
min-width: 200px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-input:focus {
|
|
||||||
border-color: #1e3a8a;
|
|
||||||
box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-select {
|
|
||||||
padding: 0.5rem 0.8rem;
|
|
||||||
border: 1px solid #d1d5db;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
background: #fff;
|
|
||||||
color: #333;
|
|
||||||
cursor: pointer;
|
|
||||||
min-width: 140px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-select:focus {
|
|
||||||
border-color: #1e3a8a;
|
|
||||||
box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cards-container {
|
.cards-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
@ -156,283 +117,396 @@
|
|||||||
.user-table-container {
|
.user-table-container {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 1.2rem;
|
padding: 1.5rem;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
margin-top: 2rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-table-container h2 {
|
/* ===== ESTILOS DA TABELA AVANÇADA ===== */
|
||||||
font-size: 18px;
|
.table-paciente-filters {
|
||||||
font-weight: bold;
|
background-color: var(--bg-light);
|
||||||
margin-bottom: 0.3rem;
|
border: 1px solid var(--border-light);
|
||||||
color: #333;
|
border-radius: var(--border-radius);
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-table-container p {
|
.table-paciente-filters h5 {
|
||||||
font-size: 0.9rem;
|
color: var(--text-dark);
|
||||||
color: #666;
|
font-weight: 600;
|
||||||
margin-bottom: 1rem;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-table {
|
.table-paciente-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-table th,
|
.table-paciente-table th {
|
||||||
.user-table td {
|
background-color: var(--bg-light);
|
||||||
padding: 10px 12px;
|
color: var(--text-dark);
|
||||||
text-align: left;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-table th {
|
|
||||||
background-color: #f3f4f6;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
padding: 12px 8px;
|
||||||
|
border-bottom: 2px solid var(--border-light);
|
||||||
|
vertical-align: middle;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-table tr {
|
.table-paciente-table td {
|
||||||
transition: background-color 0.2s ease;
|
padding: 12px 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-bottom: 1px solid var(--border-light);
|
||||||
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-table tr:hover {
|
.table-paciente-table tbody tr:hover {
|
||||||
background-color: #f0f4ff;
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-badge {
|
.insurance-badge {
|
||||||
background-color: #1e3a8a;
|
background-color: transparent !important;
|
||||||
color: white;
|
color: var(--text-dark) !important;
|
||||||
padding: 4px 10px;
|
padding: 0.35em 0.65em;
|
||||||
border-radius: 6px;
|
font-size: 0.75em;
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
display: inline-block;
|
border: 1px solid var(--border-light);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-badge {
|
.status-badge {
|
||||||
padding: 4px 10px;
|
padding: 0.35em 0.65em;
|
||||||
border-radius: 6px;
|
font-size: 0.75em;
|
||||||
font-size: 0.8rem;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-badge.ativo {
|
.status-badge.ativo {
|
||||||
background-color: #1e3a8a;
|
background-color: var(--primary-blue);
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-badge.inativo {
|
.status-badge.inativo {
|
||||||
background-color: #6c757d;
|
background-color: var(--text-muted);
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.anniversary-badge {
|
||||||
display: flex;
|
background-color: #ffc107;
|
||||||
gap: 8px;
|
color: #000;
|
||||||
flex-wrap: wrap;
|
padding: 0.35em 0.65em;
|
||||||
|
font-size: 0.75em;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn {
|
.btn-view {
|
||||||
border: none;
|
background-color: var(--light-blue) !important;
|
||||||
padding: 6px 12px;
|
color: #004085 !important;
|
||||||
|
border: 1px solid var(--border-blue);
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-view:hover {
|
||||||
|
background-color: var(--medium-blue) !important;
|
||||||
|
border-color: #9EC5FE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-edit {
|
||||||
|
background-color: var(--warning-light) !important;
|
||||||
|
color: var(--warning-dark) !important;
|
||||||
|
border: 1px solid var(--warning-border);
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-edit:hover {
|
||||||
|
background-color: #FFEEBA !important;
|
||||||
|
border-color: #FFE087;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-delete {
|
||||||
|
background-color: var(--danger-light) !important;
|
||||||
|
color: var(--danger-dark) !important;
|
||||||
|
border: 1px solid var(--danger-border);
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-delete:hover {
|
||||||
|
background-color: #F1B0B7 !important;
|
||||||
|
border-color: #ED969E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advanced-filters {
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advanced-filters h6 {
|
||||||
|
color: var(--text-dark);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label.fw-bold {
|
||||||
|
color: var(--text-dark);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-modal .modal-header {
|
||||||
|
background-color: rgba(220, 53, 69, 0.1);
|
||||||
|
border-bottom: 1px solid rgba(220, 53, 69, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-modal .modal-title {
|
||||||
|
color: #dc3545;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contador-pacientes {
|
||||||
|
background-color: var(--primary-blue);
|
||||||
|
color: white;
|
||||||
|
padding: 0.5em 0.75em;
|
||||||
|
font-size: 0.875em;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Paginação */
|
||||||
|
.pagination {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-link {
|
||||||
|
color: var(--text-dark);
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-link:hover {
|
||||||
|
color: var(--primary-blue);
|
||||||
|
background-color: #e9ecef;
|
||||||
|
border-color: var(--border-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item.active .page-link {
|
||||||
|
background-color: var(--primary-blue);
|
||||||
|
border-color: var(--primary-blue);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item.disabled .page-link {
|
||||||
|
color: var(--text-muted);
|
||||||
|
background-color: var(--bg-light);
|
||||||
|
border-color: var(--border-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== AJUSTES ESPECÍFICOS PARA OS FILTROS ===== */
|
||||||
|
.table-paciente-filters .form-select-sm {
|
||||||
|
font-size: 0.825rem;
|
||||||
|
padding: 0.35rem 0.5rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-paciente-filters .form-label.small {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
color: #6c757d;
|
||||||
transition: all 0.2s ease;
|
min-width: auto;
|
||||||
border-radius: 4px;
|
white-space: nowrap;
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn.detalhes {
|
/* Alinhamento dos grupos de filtro */
|
||||||
background-color: #e6f2ff;
|
.table-paciente-filters .d-flex.align-items-center.gap-2 {
|
||||||
color: #004085;
|
flex-wrap: nowrap;
|
||||||
border: 1px solid #b8d4ff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn.detalhes:hover {
|
/* Ajuste do contador */
|
||||||
background-color: #cce4ff;
|
.contador-pacientes {
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.editar {
|
|
||||||
background-color: #fff3cd;
|
|
||||||
color: #856405;
|
|
||||||
border: 1px solid #ffeaa7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.editar:hover {
|
|
||||||
background-color: #ffeaa7;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.excluir {
|
|
||||||
background-color: #f8d7da;
|
|
||||||
color: #721c24;
|
|
||||||
border: 1px solid #f1b0b7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.excluir:hover {
|
|
||||||
background-color: #f1b0b7;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-btn {
|
|
||||||
background-color: #1e3a8a;
|
background-color: #1e3a8a;
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
padding: 0.4rem 0.8rem;
|
||||||
padding: 8px 16px;
|
font-size: 0.8rem;
|
||||||
border-radius: 6px;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
border-radius: 0.375rem;
|
||||||
transition: all 0.3s ease;
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.save-btn:hover {
|
/* Botão de filtros avançados */
|
||||||
background-color: #162d6b;
|
.btn-link {
|
||||||
transform: translateY(-1px);
|
color: #1e3a8a !important;
|
||||||
box-shadow: 0 4px 8px rgba(30, 58, 138, 0.3);
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-btn {
|
.btn-link:hover {
|
||||||
background-color: #fff3cd;
|
color: #162d6b !important;
|
||||||
color: #856405;
|
|
||||||
border: 1px solid #ffeaa7;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-btn:hover {
|
|
||||||
background-color: #ffeaa7;
|
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .dashboard-container {
|
/* Ajustes responsivos para mobile */
|
||||||
background-color: #121212;
|
@media (max-width: 768px) {
|
||||||
color: #e0e0e0;
|
.dashboard-container {
|
||||||
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .dashboard-header,
|
.dashboard-header {
|
||||||
html[data-bs-theme="dark"] .dashboard-title,
|
flex-direction: column;
|
||||||
html[data-bs-theme="dark"] .dashboard-subtitle {
|
gap: 1rem;
|
||||||
color: #e0e0e0;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .new-user-btn {
|
.table-paciente-filters .d-flex.flex-wrap.align-items-center.gap-3 {
|
||||||
background-color: #1e3a8a;
|
gap: 1rem !important;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .new-user-btn:hover {
|
.table-paciente-filters .d-flex.align-items-center.gap-2 {
|
||||||
background-color: #162d6b;
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .filters-container,
|
.table-paciente-filters .form-select-sm.compact-select {
|
||||||
html[data-bs-theme="dark"] .user-table-container {
|
min-width: 100% !important;
|
||||||
background: #1a1a1a;
|
margin-top: 0.25rem;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .filters-title,
|
.vr.d-none.d-md-block {
|
||||||
html[data-bs-theme="dark"] .user-table-container h2 {
|
display: none !important;
|
||||||
color: #e0e0e0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .filters-subtitle,
|
.table-paciente-table {
|
||||||
html[data-bs-theme="dark"] .user-table-container p {
|
font-size: 0.875rem;
|
||||||
color: #bdbdbd;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .filters-input,
|
.table-paciente-table th,
|
||||||
html[data-bs-theme="dark"] .filters-select {
|
.table-paciente-table td {
|
||||||
background: #232323;
|
padding: 10px 6px;
|
||||||
color: #e0e0e0;
|
|
||||||
border-color: #333;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .filters-input:focus,
|
.btn-view,
|
||||||
html[data-bs-theme="dark"] .filters-select:focus {
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-name-container {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start !important;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-flex.justify-content-between.align-items-center {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: stretch !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-paciente-table thead th:nth-child(6),
|
||||||
|
.table-paciente-table tbody td:nth-child(6) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilo para os selects quando estão ativos */
|
||||||
|
.form-select-sm:focus {
|
||||||
border-color: #1e3a8a;
|
border-color: #1e3a8a;
|
||||||
box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
|
box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .cards-container .card {
|
/* Ajuste do botão limpar filtros */
|
||||||
background-color: #181818;
|
.btn-outline-secondary.btn-sm {
|
||||||
color: #e0e0e0;
|
border-color: #6c757d;
|
||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
|
color: #6c757d;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0.35rem 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .highlight:hover {
|
.btn-outline-secondary.btn-sm:hover {
|
||||||
background: #1a1f2e;
|
background-color: #6c757d;
|
||||||
border: 1px solid #1e3a8a33;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .card-label {
|
/* Melhoria na aparência dos filtros avançados */
|
||||||
color: #888;
|
.advanced-filters {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border: 1px solid #dee2e6 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .card-value {
|
.advanced-filters .form-control-sm {
|
||||||
color: #e0e0e0;
|
font-size: 0.825rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .card-extra {
|
.advanced-filters h6 {
|
||||||
color: #bdbdbd;
|
color: #495057;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .card-extra.positive {
|
.compact-select {
|
||||||
color: #1e3a8a;
|
font-size: 0.9rem;
|
||||||
|
padding: 0.45rem 0.5rem;
|
||||||
|
min-width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .user-table th {
|
/* Badge de Perfil */
|
||||||
background-color: #232323;
|
.badge-medico {
|
||||||
color: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .user-table td {
|
|
||||||
color: #e0e0e0;
|
|
||||||
border-bottom: 1px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .user-table tr:hover {
|
|
||||||
background-color: #1a1f2e;
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .profile-badge {
|
|
||||||
background-color: #1e3a8a;
|
background-color: #1e3a8a;
|
||||||
|
color: white;
|
||||||
|
padding: 0.35rem 0.75rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .action-btn.detalhes {
|
.badge-paciente {
|
||||||
background-color: #e6f2ff;
|
background-color: #1e3a8a;
|
||||||
color: #004085;
|
color: white;
|
||||||
border: 1px solid #b8d4ff;
|
padding: 0.35rem 0.75rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .action-btn.detalhes:hover {
|
@media (max-width: 576px) {
|
||||||
background-color: #cce4ff;
|
.cards-container {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .action-btn.editar {
|
.table-paciente-table thead th:nth-child(3),
|
||||||
background-color: #fff3cd;
|
.table-paciente-table thead th:nth-child(4),
|
||||||
color: #856405;
|
.table-paciente-table tbody td:nth-child(3),
|
||||||
border: 1px solid #ffeaa7;
|
.table-paciente-table tbody td:nth-child(4) {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .action-btn.editar:hover {
|
.user-table-container {
|
||||||
background-color: #ffeaa7;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .action-btn.excluir {
|
|
||||||
background-color: #f8d7da;
|
|
||||||
color: #721c24;
|
|
||||||
border: 1px solid #f1b0b7;
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .action-btn.excluir:hover {
|
|
||||||
background-color: #f1b0b7;
|
|
||||||
}
|
}
|
||||||
@ -1,9 +1,186 @@
|
|||||||
import React from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import "./gestao.css";
|
import "./gestao.css";
|
||||||
|
import { GetAllDoctors } from "../components/utils/Functions-Endpoints/Doctor";
|
||||||
|
import { GetAllPatients } from "../components/utils/Functions-Endpoints/Patient";
|
||||||
|
import API_KEY from "../components/utils/apiKeys";
|
||||||
|
|
||||||
function UserDashboard() {
|
function UserDashboard() {
|
||||||
|
// Estados principais
|
||||||
|
const [usuarios, setUsuarios] = useState([]);
|
||||||
|
const [busca, setBusca] = useState("");
|
||||||
|
const [filtroPerfil, setFiltroPerfil] = useState("Todos");
|
||||||
|
const [filtroStatus, setFiltroStatus] = useState("Todos");
|
||||||
|
const [filtroDepartamento, setFiltroDepartamento] = useState("Todos");
|
||||||
|
const [showFiltrosAvancados, setShowFiltrosAvancados] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
// Estados de paginação
|
||||||
|
const [paginaAtual, setPaginaAtual] = useState(1);
|
||||||
|
const [itensPorPagina, setItensPorPagina] = useState(10);
|
||||||
|
|
||||||
|
// Estados de ordenação
|
||||||
|
const [sortKey, setSortKey] = useState(null);
|
||||||
|
const [sortDir, setSortDir] = useState('asc');
|
||||||
|
|
||||||
|
// Estados para modais
|
||||||
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
|
const [selectedUserId, setSelectedUserId] = useState(null);
|
||||||
|
|
||||||
|
// Buscar dados reais da API
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchUsuarios = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const access_token = localStorage.getItem("access_token");
|
||||||
|
const authHeader = access_token ? `Bearer ${access_token}` : null;
|
||||||
|
|
||||||
|
// Buscar médicos e pacientes em paralelo
|
||||||
|
const [medicos, pacientes] = await Promise.all([
|
||||||
|
GetAllDoctors(authHeader),
|
||||||
|
GetAllPatients(authHeader)
|
||||||
|
]);
|
||||||
|
|
||||||
|
console.log("Médicos:", medicos);
|
||||||
|
console.log("Pacientes:", pacientes);
|
||||||
|
|
||||||
|
// Transformar médicos
|
||||||
|
const usuariosMedicos = medicos.map(medico => ({
|
||||||
|
id: `doctor-${medico.id}`,
|
||||||
|
nome: medico.full_name || "Nome não informado",
|
||||||
|
email: medico.email || "Email não informado",
|
||||||
|
perfil: "Médico",
|
||||||
|
departamento: medico.specialization || "Não informado",
|
||||||
|
status: "ativo",
|
||||||
|
ultimoAcesso: medico.updated_at || medico.created_at || new Date().toISOString(),
|
||||||
|
dataCadastro: medico.created_at || new Date().toISOString(),
|
||||||
|
telefone: medico.phone || "Não informado",
|
||||||
|
crm: medico.crm
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Transformar pacientes
|
||||||
|
const usuariosPacientes = pacientes.map(paciente => ({
|
||||||
|
id: `patient-${paciente.id}`,
|
||||||
|
nome: paciente.full_name || "Nome não informado",
|
||||||
|
email: paciente.email || "Email não informado",
|
||||||
|
perfil: "Paciente",
|
||||||
|
departamento: "Pacientes",
|
||||||
|
status: "ativo",
|
||||||
|
ultimoAcesso: paciente.updated_at || paciente.created_at || new Date().toISOString(),
|
||||||
|
dataCadastro: paciente.created_at || new Date().toISOString(),
|
||||||
|
telefone: paciente.phone || "Não informado",
|
||||||
|
cpf: paciente.cpf
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Combinar todos os usuários
|
||||||
|
const todosUsuarios = [...usuariosMedicos, ...usuariosPacientes];
|
||||||
|
setUsuarios(todosUsuarios);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erro ao buscar usuários:", error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchUsuarios();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Funções auxiliares
|
||||||
|
const formatarData = (dataString) => {
|
||||||
|
const data = new Date(dataString);
|
||||||
|
return data.toLocaleDateString('pt-BR', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
year: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const calcularDiasDesdeUltimoAcesso = (dataString) => {
|
||||||
|
const ultimoAcesso = new Date(dataString);
|
||||||
|
const hoje = new Date();
|
||||||
|
const diffTime = Math.abs(hoje - ultimoAcesso);
|
||||||
|
return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Filtragem
|
||||||
|
const usuariosFiltrados = usuarios.filter(usuario => {
|
||||||
|
const passaBusca = busca === "" ||
|
||||||
|
usuario.nome.toLowerCase().includes(busca.toLowerCase()) ||
|
||||||
|
usuario.email.toLowerCase().includes(busca.toLowerCase());
|
||||||
|
|
||||||
|
const passaPerfil = filtroPerfil === "Todos" || usuario.perfil === filtroPerfil;
|
||||||
|
const passaStatus = filtroStatus === "Todos" || usuario.status === filtroStatus;
|
||||||
|
const passaDepartamento = filtroDepartamento === "Todos" || usuario.departamento === filtroDepartamento;
|
||||||
|
|
||||||
|
return passaBusca && passaPerfil && passaStatus && passaDepartamento;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ordenação
|
||||||
|
const aplicarOrdenacao = (arr) => {
|
||||||
|
if (!sortKey) return arr;
|
||||||
|
|
||||||
|
const copia = [...arr];
|
||||||
|
copia.sort((a, b) => {
|
||||||
|
if (sortKey === 'nome') {
|
||||||
|
return a.nome.localeCompare(b.nome);
|
||||||
|
} else if (sortKey === 'dataCadastro') {
|
||||||
|
return new Date(a.dataCadastro) - new Date(b.dataCadastro);
|
||||||
|
} else if (sortKey === 'ultimoAcesso') {
|
||||||
|
return new Date(a.ultimoAcesso) - new Date(b.ultimoAcesso);
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
return sortDir === 'desc' ? copia.reverse() : copia;
|
||||||
|
};
|
||||||
|
|
||||||
|
const usuariosOrdenados = aplicarOrdenacao(usuariosFiltrados);
|
||||||
|
|
||||||
|
// Paginação
|
||||||
|
const totalPaginas = Math.ceil(usuariosFiltrados.length / itensPorPagina);
|
||||||
|
const indiceInicial = (paginaAtual - 1) * itensPorPagina;
|
||||||
|
const indiceFinal = indiceInicial + itensPorPagina;
|
||||||
|
const usuariosPaginados = usuariosOrdenados.slice(indiceInicial, indiceFinal);
|
||||||
|
|
||||||
|
// Navegação de páginas
|
||||||
|
const irParaPagina = (pagina) => setPaginaAtual(pagina);
|
||||||
|
const avancarPagina = () => paginaAtual < totalPaginas && setPaginaAtual(p => p + 1);
|
||||||
|
const voltarPagina = () => paginaAtual > 1 && setPaginaAtual(p => p - 1);
|
||||||
|
|
||||||
|
const gerarNumerosPaginas = () => {
|
||||||
|
const paginas = [];
|
||||||
|
const paginasParaMostrar = 5;
|
||||||
|
let inicio = Math.max(1, paginaAtual - Math.floor(paginasParaMostrar / 2));
|
||||||
|
let fim = Math.min(totalPaginas, inicio + paginasParaMostrar - 1);
|
||||||
|
inicio = Math.max(1, fim - paginasParaMostrar + 1);
|
||||||
|
|
||||||
|
for (let i = inicio; i <= fim; i++) paginas.push(i);
|
||||||
|
return paginas;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Funções de ação
|
||||||
|
const limparFiltros = () => {
|
||||||
|
setBusca("");
|
||||||
|
setFiltroPerfil("Todos");
|
||||||
|
setFiltroStatus("Todos");
|
||||||
|
setFiltroDepartamento("Todos");
|
||||||
|
setPaginaAtual(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const excluirUsuario = (id) => {
|
||||||
|
setUsuarios(prev => prev.filter(u => u.id !== id));
|
||||||
|
setShowDeleteModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Resetar paginação quando filtros mudarem
|
||||||
|
useEffect(() => {
|
||||||
|
setPaginaAtual(1);
|
||||||
|
}, [busca, filtroPerfil, filtroStatus, filtroDepartamento, sortKey, sortDir]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="dashboard-container">
|
<div className="dashboard-container">
|
||||||
|
{/* Header */}
|
||||||
<div className="dashboard-header">
|
<div className="dashboard-header">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="dashboard-title">Gestão de Usuários</h1>
|
<h1 className="dashboard-title">Gestão de Usuários</h1>
|
||||||
@ -14,125 +191,363 @@ function UserDashboard() {
|
|||||||
<button className="new-user-btn">+ Novo Usuário</button>
|
<button className="new-user-btn">+ Novo Usuário</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Cards de Estatísticas */}
|
||||||
<div className="cards-container">
|
<div className="cards-container">
|
||||||
<div className="card highlight">
|
<div className="card highlight">
|
||||||
<p className="card-label">Total de Usuários</p>
|
<p className="card-label">Total de Usuários</p>
|
||||||
<p className="card-value">15</p>
|
<p className="card-value">{loading ? "..." : usuarios.length}</p>
|
||||||
<p className="card-extra positive">+3 este mês</p>
|
<p className="card-extra positive">Médicos e Pacientes</p>
|
||||||
|
</div>
|
||||||
|
<div className="card highlight">
|
||||||
|
<p className="card-label">Médicos</p>
|
||||||
|
<p className="card-value">{loading ? "..." : usuarios.filter(u => u.perfil === 'Médico').length}</p>
|
||||||
|
<p className="card-extra">Profissionais cadastrados</p>
|
||||||
|
</div>
|
||||||
|
<div className="card highlight">
|
||||||
|
<p className="card-label">Pacientes</p>
|
||||||
|
<p className="card-value">{loading ? "..." : usuarios.filter(u => u.perfil === 'Paciente').length}</p>
|
||||||
|
<p className="card-extra">Pacientes cadastrados</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="card highlight">
|
<div className="card highlight">
|
||||||
<p className="card-label">Usuários Ativos</p>
|
<p className="card-label">Usuários Ativos</p>
|
||||||
<p className="card-value">12</p>
|
<p className="card-value">{loading ? "..." : usuarios.filter(u => u.status === 'ativo').length}</p>
|
||||||
<p className="card-extra">80.0% do total</p>
|
<p className="card-extra">{usuarios.length > 0 ? ((usuarios.filter(u => u.status === 'ativo').length / usuarios.length) * 100).toFixed(1) : 0}% do total</p>
|
||||||
</div>
|
|
||||||
<div className="card highlight">
|
|
||||||
<p className="card-label">Tempo Médio Sessão</p>
|
|
||||||
<p className="card-value">2h 30min</p>
|
|
||||||
<p className="card-extra">Última semana</p>
|
|
||||||
</div>
|
|
||||||
<div className="card highlight">
|
|
||||||
<p className="card-label">Usuários Hoje</p>
|
|
||||||
<p className="card-value">10</p>
|
|
||||||
<p className="card-extra positive">+2 desde ontem</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="filters-container">
|
{/* Container Principal da Tabela */}
|
||||||
<p className="filters-title">Filtros</p>
|
<div className="user-table-container">
|
||||||
<p className="filters-subtitle">
|
|
||||||
Use os filtros abaixo para encontrar usuários específicos
|
{/* Filtros Avançados - FORMATADO */}
|
||||||
</p>
|
<div className="table-paciente-filters">
|
||||||
<div className="filters-content">
|
<h5 className="mb-3">
|
||||||
|
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
||||||
|
</h5>
|
||||||
|
|
||||||
|
{/* Busca */}
|
||||||
|
<div className="mb-3">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="filters-input"
|
className="form-control"
|
||||||
placeholder="Buscar por nome ou email..."
|
placeholder="Buscar por nome ou email..."
|
||||||
|
value={busca}
|
||||||
|
onChange={(e) => setBusca(e.target.value)}
|
||||||
/>
|
/>
|
||||||
<select className="filters-select">
|
</div>
|
||||||
<option>Todos os perfis</option>
|
|
||||||
<option>Médico</option>
|
{/* Linha de Filtros Básicos */}
|
||||||
<option>Secretaria</option>
|
<div className="d-flex flex-wrap align-items-center gap-3 mb-3">
|
||||||
<option>Gestão</option>
|
{/* Perfil */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Perfil:</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm compact-select"
|
||||||
|
value={filtroPerfil}
|
||||||
|
onChange={(e) => setFiltroPerfil(e.target.value)}
|
||||||
|
style={{ minWidth: "160px" }}
|
||||||
|
>
|
||||||
|
<option value="Todos">Todos os Perfis</option>
|
||||||
|
<option value="Médico">Médico</option>
|
||||||
|
<option value="Paciente">Paciente</option>
|
||||||
</select>
|
</select>
|
||||||
<select className="filters-select">
|
</div>
|
||||||
<option>Todos</option>
|
|
||||||
<option>Ativos</option>
|
{/* Status */}
|
||||||
<option>Inativos</option>
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Status:</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm compact-select"
|
||||||
|
value={filtroStatus}
|
||||||
|
onChange={(e) => setFiltroStatus(e.target.value)}
|
||||||
|
style={{ minWidth: "140px" }}
|
||||||
|
>
|
||||||
|
<option value="Todos">Todos os Status</option>
|
||||||
|
<option value="ativo">Ativos</option>
|
||||||
|
<option value="inativo">Inativos</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Departamento */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Especialização:</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
placeholder="Filtrar por especialização..."
|
||||||
|
value={filtroDepartamento === 'Todos' ? '' : filtroDepartamento}
|
||||||
|
onChange={(e) => setFiltroDepartamento(e.target.value || 'Todos')}
|
||||||
|
style={{ minWidth: "180px" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Separador */}
|
||||||
|
<div className="vr d-none d-md-block" style={{ height: "30px" }} />
|
||||||
|
|
||||||
|
{/* Ordenação */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Ordenar por:</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm compact-select sort-select"
|
||||||
|
value={sortKey ? `${sortKey}-${sortDir}` : ''}
|
||||||
|
onChange={(e) => {
|
||||||
|
const v = e.target.value;
|
||||||
|
if (!v) { setSortKey(null); setSortDir('asc'); return; }
|
||||||
|
const [k, d] = v.split('-');
|
||||||
|
setSortKey(k);
|
||||||
|
setSortDir(d);
|
||||||
|
}}
|
||||||
|
style={{ minWidth: "160px" }}
|
||||||
|
>
|
||||||
|
<option value="">Sem ordenação</option>
|
||||||
|
<option value="nome-asc">Nome (A-Z)</option>
|
||||||
|
<option value="nome-desc">Nome (Z-A)</option>
|
||||||
|
<option value="dataCadastro-asc">Data Cadastro (mais antigo)</option>
|
||||||
|
<option value="dataCadastro-desc">Data Cadastro (mais recente)</option>
|
||||||
|
<option value="ultimoAcesso-asc">Último Acesso (mais antigo)</option>
|
||||||
|
<option value="ultimoAcesso-desc">Último Acesso (mais recente)</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="user-table-container">
|
{/* Linha de Ações */}
|
||||||
<h2>Usuários do Sistema</h2>
|
<div className="d-flex justify-content-between align-items-center">
|
||||||
<p>Lista completa de usuários e suas permissões</p>
|
<button
|
||||||
<table className="user-table">
|
className="btn btn-link p-0 text-decoration-none d-flex align-items-center"
|
||||||
|
onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
|
||||||
|
style={{ fontSize: "0.9rem" }}
|
||||||
|
>
|
||||||
|
<i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
|
||||||
|
Filtros Avançados
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary btn-sm d-flex align-items-center"
|
||||||
|
onClick={limparFiltros}
|
||||||
|
>
|
||||||
|
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filtros Avançados (Ocultos por padrão) */}
|
||||||
|
{showFiltrosAvancados && (
|
||||||
|
<div className="mt-3 p-3 border rounded advanced-filters">
|
||||||
|
<h6 className="mb-3">Filtros Avançados</h6>
|
||||||
|
<div className="row g-3">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<label className="form-label fw-bold">Departamento</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
placeholder="Digite o departamento..."
|
||||||
|
value={filtroDepartamento === 'Todos' ? '' : filtroDepartamento}
|
||||||
|
onChange={(e) => setFiltroDepartamento(e.target.value || 'Todos')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<label className="form-label fw-bold">Perfil</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
placeholder="Digite o perfil..."
|
||||||
|
value={filtroPerfil === 'Todos' ? '' : filtroPerfil}
|
||||||
|
onChange={(e) => setFiltroPerfil(e.target.value || 'Todos')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Contador */}
|
||||||
|
<div className="mt-3">
|
||||||
|
<div className="contador-pacientes">
|
||||||
|
{usuariosFiltrados.length} DE {usuarios.length} USUÁRIOS ENCONTRADOS
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabela de Usuários */}
|
||||||
|
<div className="table-responsive mt-4">
|
||||||
|
{loading ? (
|
||||||
|
<div className="text-center py-5">
|
||||||
|
<div className="spinner-border text-primary" role="status">
|
||||||
|
<span className="visually-hidden">Carregando...</span>
|
||||||
|
</div>
|
||||||
|
<p className="mt-3 text-muted">Carregando usuários...</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<table className="table table-striped table-hover table-paciente-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Nome</th>
|
<th>Nome</th>
|
||||||
<th>Email</th>
|
<th>Email</th>
|
||||||
<th>Perfil</th>
|
<th>Perfil</th>
|
||||||
<th>Departamento</th>
|
<th>Especialização/Categoria</th>
|
||||||
<th>Status</th>
|
|
||||||
<th>Último Acesso</th>
|
|
||||||
<th>Ações</th>
|
<th>Ações</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
{usuariosPaginados.length > 0 ? (
|
||||||
<td>Ana Silva</td>
|
usuariosPaginados.map((usuario) => (
|
||||||
<td>ana.silva@mediconnect.com</td>
|
<tr key={usuario.id}>
|
||||||
<td><span className="profile-badge">Gestão / Coordenação</span></td>
|
<td>
|
||||||
<td>Administração</td>
|
<div className="d-flex align-items-center patient-name-container">
|
||||||
<td><span className="status-badge ativo">Ativo</span></td>
|
{usuario.nome}
|
||||||
<td>20/12/2024, 08:30</td>
|
</div>
|
||||||
<td className="actions">
|
</td>
|
||||||
<button className="action-btn detalhes">Ver Detalhes</button>
|
<td>{usuario.email}</td>
|
||||||
<button className="action-btn editar">Editar</button>
|
<td>
|
||||||
<button className="action-btn excluir">Excluir</button>
|
<span className={usuario.perfil === 'Médico' ? 'badge-medico' : 'badge-paciente'}>
|
||||||
|
{usuario.perfil}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>{usuario.departamento}</td>
|
||||||
|
<td>
|
||||||
|
<div className="d-flex gap-2">
|
||||||
|
<button className="btn btn-sm btn-view" title="Ver detalhes">
|
||||||
|
<i className="bi bi-eye"></i>
|
||||||
|
</button>
|
||||||
|
<button className="btn btn-sm btn-edit" title="Editar">
|
||||||
|
<i className="bi bi-pencil"></i>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-delete"
|
||||||
|
title="Excluir"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedUserId(usuario.id);
|
||||||
|
setShowDeleteModal(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className="bi bi-trash"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
<tr>
|
<tr>
|
||||||
<td>Dr. Carlos Santos</td>
|
<td colSpan="5" className="text-center py-4">
|
||||||
<td>carlos.santos@mediconnect.com</td>
|
<div className="text-muted">
|
||||||
<td><span className="profile-badge">Médico</span></td>
|
<i className="bi bi-search display-4"></i>
|
||||||
<td>Cardiologia</td>
|
<p className="mt-2">Nenhum usuário encontrado com os filtros aplicados.</p>
|
||||||
<td><span className="status-badge ativo">Ativo</span></td>
|
{(busca || filtroPerfil !== "Todos" || filtroStatus !== "Todos" || filtroDepartamento !== "Todos") && (
|
||||||
<td>19/12/2024, 14:20</td>
|
<button className="btn btn-outline-primary btn-sm mt-2" onClick={limparFiltros}>
|
||||||
<td className="actions">
|
Limpar filtros
|
||||||
<button className="action-btn detalhes">Ver Detalhes</button>
|
</button>
|
||||||
<button className="action-btn editar">Editar</button>
|
)}
|
||||||
<button className="action-btn excluir">Excluir</button>
|
</div>
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Maria Oliveira</td>
|
|
||||||
<td>maria.oliveira@mediconnect.com</td>
|
|
||||||
<td><span className="profile-badge">Secretária</span></td>
|
|
||||||
<td>Recepção</td>
|
|
||||||
<td><span className="status-badge ativo">Ativo</span></td>
|
|
||||||
<td>20/12/2024, 07:45</td>
|
|
||||||
<td className="actions">
|
|
||||||
<button className="action-btn detalhes">Ver Detalhes</button>
|
|
||||||
<button className="action-btn editar">Editar</button>
|
|
||||||
<button className="action-btn excluir">Excluir</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Dr. João Pereira</td>
|
|
||||||
<td>joao.pereira@mediconnect.com</td>
|
|
||||||
<td><span className="profile-badge">Médico</span></td>
|
|
||||||
<td>Ortopedia</td>
|
|
||||||
<td><span className="status-badge inativo">Inativo</span></td>
|
|
||||||
<td>15/12/2024, 16:30</td>
|
|
||||||
<td className="actions">
|
|
||||||
<button className="action-btn detalhes">Ver Detalhes</button>
|
|
||||||
<button className="action-btn editar">Editar</button>
|
|
||||||
<button className="action-btn excluir">Excluir</button>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Paginação */}
|
||||||
|
{usuariosFiltrados.length > 0 && (
|
||||||
|
<div className="d-flex justify-content-between align-items-center mt-3">
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<span className="me-2 text-muted">Itens por página:</span>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm w-auto"
|
||||||
|
value={itensPorPagina}
|
||||||
|
onChange={(e) => {
|
||||||
|
setItensPorPagina(Number(e.target.value));
|
||||||
|
setPaginaAtual(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value={5}>5</option>
|
||||||
|
<option value={10}>10</option>
|
||||||
|
<option value={25}>25</option>
|
||||||
|
<option value={50}>50</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<span className="me-3 text-muted">
|
||||||
|
Página {paginaAtual} de {totalPaginas} •
|
||||||
|
Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, usuariosFiltrados.length)} de {usuariosFiltrados.length} usuários
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul className="pagination pagination-sm mb-0">
|
||||||
|
<li className={`page-item ${paginaAtual === 1 ? 'disabled' : ''}`}>
|
||||||
|
<button className="page-link" onClick={voltarPagina}>
|
||||||
|
<i className="bi bi-chevron-left"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{gerarNumerosPaginas().map(pagina => (
|
||||||
|
<li key={pagina} className={`page-item ${pagina === paginaAtual ? 'active' : ''}`}>
|
||||||
|
<button className="page-link" onClick={() => irParaPagina(pagina)}>
|
||||||
|
{pagina}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<li className={`page-item ${paginaAtual === totalPaginas ? 'disabled' : ''}`}>
|
||||||
|
<button className="page-link" onClick={avancarPagina}>
|
||||||
|
<i className="bi bi-chevron-right"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal de Confirmação de Exclusão */}
|
||||||
|
{showDeleteModal && (
|
||||||
|
<div
|
||||||
|
className="modal fade show delete-modal"
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||||
|
}}
|
||||||
|
tabIndex="-1"
|
||||||
|
onClick={(e) =>
|
||||||
|
e.target.classList.contains("modal") && setShowDeleteModal(false)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
||||||
|
<h5 className="modal-title">
|
||||||
|
Confirmação de Exclusão
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-body">
|
||||||
|
<p className="mb-0 fs-5">
|
||||||
|
Tem certeza que deseja excluir este usuário?
|
||||||
|
</p>
|
||||||
|
<p className="text-muted mt-2">
|
||||||
|
Esta ação não pode ser desfeita.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={() => setShowDeleteModal(false)}
|
||||||
|
>
|
||||||
|
Cancelar
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-danger"
|
||||||
|
onClick={() => excluirUsuario(selectedUserId)}
|
||||||
|
>
|
||||||
|
<i className="bi bi-trash me-1"></i> Excluir
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,6 +20,7 @@ import {
|
|||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import "../pages/style/Agendamento.css";
|
import "../pages/style/Agendamento.css";
|
||||||
import "../pages/style/FilaEspera.css";
|
import "../pages/style/FilaEspera.css";
|
||||||
|
import "../pages/style/TableDoctor.css";
|
||||||
import Spinner from "../components/Spinner.jsx";
|
import Spinner from "../components/Spinner.jsx";
|
||||||
|
|
||||||
dayjs.locale("pt-br");
|
dayjs.locale("pt-br");
|
||||||
@ -463,89 +464,17 @@ const Agendamento = () => {
|
|||||||
<h1>Agendar nova consulta</h1>
|
<h1>Agendar nova consulta</h1>
|
||||||
{!PageNovaConsulta ? (
|
{!PageNovaConsulta ? (
|
||||||
<div className="atendimento-eprocura">
|
<div className="atendimento-eprocura">
|
||||||
{user?.role !== "doctor" && (
|
|
||||||
<div className="card p-3 mb-3 table-paciente-filters">
|
|
||||||
<h5 className="mb-3">
|
|
||||||
<i className="bi bi-funnel-fill me-2 text-primary"></i>
|
|
||||||
Filtrar por Médico
|
|
||||||
</h5>
|
|
||||||
<div className="position-relative">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
placeholder="Digite o nome do médico..."
|
|
||||||
value={searchTermDoctor}
|
|
||||||
onChange={(e) => handleSearchMedicos(e.target.value)}
|
|
||||||
/>
|
|
||||||
<small className="text-muted">
|
|
||||||
Buscar médico para filtrar consultas
|
|
||||||
</small>
|
|
||||||
|
|
||||||
{searchTermDoctor && FiltredTodosMedicos.length > 0 && (
|
|
||||||
<div
|
|
||||||
className="list-group position-absolute w-100"
|
|
||||||
style={{
|
|
||||||
zIndex: 1000,
|
|
||||||
maxHeight: "200px",
|
|
||||||
overflowY: "auto",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{FiltredTodosMedicos.map((medico) => (
|
|
||||||
<button
|
|
||||||
key={medico.idMedico}
|
|
||||||
type="button"
|
|
||||||
className="list-group-item list-group-item-action"
|
|
||||||
onClick={() => {
|
|
||||||
setSearchTermDoctor(medico.nomeMedico);
|
|
||||||
setFiltredTodosMedicos([]);
|
|
||||||
setMedicoFiltrado({ id: medico.idMedico });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{medico.nomeMedico}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{MedicoFiltrado.id !== "vazio" && (
|
|
||||||
<div className="mt-3">
|
|
||||||
<span className="badge bg-primary me-2">
|
|
||||||
<i className="bi bi-person-check me-1"></i>
|
|
||||||
{searchTermDoctor}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn-close btn-close-white ms-2"
|
|
||||||
style={{ fontSize: "0.6rem" }}
|
|
||||||
onClick={() => {
|
|
||||||
setMedicoFiltrado({ id: "vazio" });
|
|
||||||
setSearchTermDoctor("");
|
|
||||||
}}
|
|
||||||
></button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="container-btns-agenda-fila_esepera">
|
<div className="container-btns-agenda-fila_esepera">
|
||||||
<div className="tabs-agenda-fila">
|
<div className="tabs-agenda-fila">
|
||||||
<button
|
<button
|
||||||
className={`btn-agenda ${
|
className={`btn-agenda ${!FiladeEspera ? "opc-agenda-ativo" : ""}`}
|
||||||
!FiladeEspera ? "opc-agenda-ativo" : ""
|
onClick={() => setFiladeEspera(false)}
|
||||||
}`}
|
|
||||||
onClick={() => {
|
|
||||||
setFiladeEspera(false);
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Agenda
|
Agenda
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn-fila-espera ${
|
className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`}
|
||||||
FiladeEspera ? "opc-filaespera-ativo" : ""
|
onClick={() => setFiladeEspera(true)}
|
||||||
}`}
|
|
||||||
onClick={() => {
|
|
||||||
setFiladeEspera(true);
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Fila de espera
|
Fila de espera
|
||||||
</button>
|
</button>
|
||||||
@ -555,7 +484,7 @@ const Agendamento = () => {
|
|||||||
style={{ display: "flex", gap: "10px", marginBottom: "20px" }}
|
style={{ display: "flex", gap: "10px", marginBottom: "20px" }}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="btn btn-primary"
|
className="manage-button btn"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setAgendamentoParaEdicao(null);
|
setAgendamentoParaEdicao(null);
|
||||||
setPageConsulta(true);
|
setPageConsulta(true);
|
||||||
@ -594,16 +523,13 @@ const Agendamento = () => {
|
|||||||
<h4>Consultas para {selectedDay.format("DD/MM")}</h4>
|
<h4>Consultas para {selectedDay.format("DD/MM")}</h4>
|
||||||
{showSpinner ? (
|
{showSpinner ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : DictAgendamentosOrganizados[
|
) : DictAgendamentosOrganizados[selectedDay.format("YYYY-MM-DD")]
|
||||||
selectedDay.format("YYYY-MM-DD")
|
?.filter(
|
||||||
]?.filter(
|
|
||||||
(app) =>
|
(app) =>
|
||||||
MedicoFiltrado.id === "vazio" ||
|
MedicoFiltrado.id === "vazio" ||
|
||||||
app.doctor_id === MedicoFiltrado.id
|
app.doctor_id === MedicoFiltrado.id
|
||||||
).length > 0 ? (
|
).length > 0 ? (
|
||||||
DictAgendamentosOrganizados[
|
DictAgendamentosOrganizados[selectedDay.format("YYYY-MM-DD")]
|
||||||
selectedDay.format("YYYY-MM-DD")
|
|
||||||
]
|
|
||||||
.filter(
|
.filter(
|
||||||
(app) =>
|
(app) =>
|
||||||
MedicoFiltrado.id === "vazio" ||
|
MedicoFiltrado.id === "vazio" ||
|
||||||
@ -631,10 +557,7 @@ const Agendamento = () => {
|
|||||||
confirmConsulta(app.id);
|
confirmConsulta(app.id);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CheckCircle
|
<CheckCircle size={16} title="Reverter Cancelamento" />
|
||||||
size={16}
|
|
||||||
title="Reverter Cancelamento"
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<button
|
<button
|
||||||
@ -681,35 +604,21 @@ const Agendamento = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="calendar-main">
|
<div className="calendar-main">
|
||||||
<div className="calendar-legend">
|
<div className="calendar-legend">
|
||||||
<div className="legend-item" data-status="completed">
|
<div className="legend-item" data-status="completed">Realizado</div>
|
||||||
Realizado
|
<div className="legend-item" data-status="confirmed">Confirmado</div>
|
||||||
</div>
|
<div className="legend-item" data-status="agendado">Agendado</div>
|
||||||
<div className="legend-item" data-status="confirmed">
|
<div className="legend-item" data-status="cancelled">Cancelado</div>
|
||||||
Confirmado
|
|
||||||
</div>
|
|
||||||
<div className="legend-item" data-status="agendado">
|
|
||||||
Agendado
|
|
||||||
</div>
|
|
||||||
<div className="legend-item" data-status="cancelled">
|
|
||||||
Cancelado
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="calendar-controls">
|
<div className="calendar-controls">
|
||||||
<div className="date-indicator">
|
<div className="date-indicator">
|
||||||
<h2>{currentDate.format("MMMM [de] YYYY")}</h2>
|
<h2>{currentDate.format("MMMM [de] YYYY")}</h2>
|
||||||
<div
|
<div
|
||||||
className="quick-jump-controls"
|
className="quick-jump-controls"
|
||||||
style={{
|
style={{ display: "flex", gap: "5px", marginTop: "10px" }}
|
||||||
display: "flex",
|
|
||||||
gap: "5px",
|
|
||||||
marginTop: "10px",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<select
|
<select
|
||||||
value={quickJump.month}
|
value={quickJump.month}
|
||||||
onChange={(e) =>
|
onChange={(e) => handleQuickJumpChange("month", e.target.value)}
|
||||||
handleQuickJumpChange("month", e.target.value)
|
|
||||||
}
|
|
||||||
className="form-select form-select-sm w-auto"
|
className="form-select form-select-sm w-auto"
|
||||||
>
|
>
|
||||||
{dayjs.months().map((month, index) => (
|
{dayjs.months().map((month, index) => (
|
||||||
@ -720,19 +629,16 @@ const Agendamento = () => {
|
|||||||
</select>
|
</select>
|
||||||
<select
|
<select
|
||||||
value={quickJump.year}
|
value={quickJump.year}
|
||||||
onChange={(e) =>
|
onChange={(e) => handleQuickJumpChange("year", e.target.value)}
|
||||||
handleQuickJumpChange("year", e.target.value)
|
|
||||||
}
|
|
||||||
className="form-select form-select-sm w-auto"
|
className="form-select form-select-sm w-auto"
|
||||||
>
|
>
|
||||||
{Array.from(
|
{Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(
|
||||||
{ length: 11 },
|
(year) => (
|
||||||
(_, i) => dayjs().year() - 5 + i
|
|
||||||
).map((year) => (
|
|
||||||
<option key={year} value={year}>
|
<option key={year} value={year}>
|
||||||
{year}
|
{year}
|
||||||
</option>
|
</option>
|
||||||
))}
|
)
|
||||||
|
)}
|
||||||
</select>
|
</select>
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-outline-primary"
|
className="btn btn-sm btn-outline-primary"
|
||||||
@ -781,17 +687,14 @@ const Agendamento = () => {
|
|||||||
))}
|
))}
|
||||||
{dateGrid.map((day, index) => {
|
{dateGrid.map((day, index) => {
|
||||||
const dayString = day.format("YYYY-MM-DD");
|
const dayString = day.format("YYYY-MM-DD");
|
||||||
const appointmentsOnDay =
|
const appointmentsOnDay = DictAgendamentosOrganizados[dayString] || [];
|
||||||
DictAgendamentosOrganizados[dayString] || [];
|
|
||||||
const filteredAppointments = appointmentsOnDay.filter(
|
const filteredAppointments = appointmentsOnDay.filter(
|
||||||
(app) =>
|
(app) =>
|
||||||
MedicoFiltrado.id === "vazio" ||
|
MedicoFiltrado.id === "vazio" ||
|
||||||
app.doctor_id === MedicoFiltrado.id
|
app.doctor_id === MedicoFiltrado.id
|
||||||
);
|
);
|
||||||
const cellClasses = `day-cell ${
|
const cellClasses = `day-cell ${
|
||||||
day.isSame(currentDate, "month")
|
day.isSame(currentDate, "month") ? "current-month" : "other-month"
|
||||||
? "current-month"
|
|
||||||
: "other-month"
|
|
||||||
} ${day.isSame(dayjs(), "day") ? "today" : ""} ${
|
} ${day.isSame(dayjs(), "day") ? "today" : ""} ${
|
||||||
day.isSame(selectedDay, "day") ? "selected" : ""
|
day.isSame(selectedDay, "day") ? "selected" : ""
|
||||||
}`;
|
}`;
|
||||||
@ -814,45 +717,37 @@ const Agendamento = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="page-content table-paciente-container">
|
<div className="page-content table-doctor-container">
|
||||||
<section className="row">
|
<div className="table-doctor-card">
|
||||||
<div className="col-12">
|
|
||||||
<div className="card table-paciente-card">
|
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<h4 className="card-title mb-0">Fila de Espera</h4>
|
<h4 className="card-title mb-0">Fila de Espera</h4>
|
||||||
</div>
|
</div>
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<div className="card p-3 mb-3 table-paciente-filters">
|
<div className="table-doctor-filters">
|
||||||
<h5 className="mb-3">
|
<h5 className="mb-3">
|
||||||
<i className="bi bi-funnel-fill me-2 text-primary"></i>{" "}
|
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
||||||
Filtros
|
|
||||||
</h5>
|
</h5>
|
||||||
|
|
||||||
|
{/* Busca */}
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
placeholder="Buscar por paciente, CPF ou médico..."
|
placeholder="Buscar por paciente, CPF ou médico..."
|
||||||
value={waitlistSearch}
|
value={waitlistSearch}
|
||||||
onChange={(e) =>
|
onChange={(e) => setWaitlistSearch(e.target.value)}
|
||||||
setWaitlistSearch(e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
<small className="text-muted">
|
|
||||||
Digite o nome do paciente, CPF ou nome do médico
|
|
||||||
</small>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex flex-wrap align-items-center gap-2 mb-3">
|
|
||||||
|
{/* Linha de Filtros Básicos */}
|
||||||
|
<div className="d-flex flex-wrap align-items-center gap-3 mb-3">
|
||||||
|
{/* Ordenação */}
|
||||||
<div className="d-flex align-items-center gap-2">
|
<div className="d-flex align-items-center gap-2">
|
||||||
<span className="me-2 text-muted small">
|
<label className="form-label mb-0 text-muted small">Ordenar por:</label>
|
||||||
Ordenar por:
|
|
||||||
</span>
|
|
||||||
<select
|
<select
|
||||||
className="form-select compact-select sort-select w-auto"
|
className="form-select form-select-sm compact-select sort-select"
|
||||||
value={
|
style={{ minWidth: "180px" }}
|
||||||
waitSortKey
|
value={waitSortKey ? `${waitSortKey}-${waitSortDir}` : ""}
|
||||||
? `${waitSortKey}-${waitSortDir}`
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const v = e.target.value;
|
const v = e.target.value;
|
||||||
if (!v) {
|
if (!v) {
|
||||||
@ -866,34 +761,27 @@ const Agendamento = () => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<option value="">Sem ordenação</option>
|
<option value="">Sem ordenação</option>
|
||||||
<option value="paciente-asc">
|
<option value="paciente-asc">Paciente (A-Z)</option>
|
||||||
Paciente (A-Z)
|
<option value="paciente-desc">Paciente (Z-A)</option>
|
||||||
</option>
|
|
||||||
<option value="paciente-desc">
|
|
||||||
Paciente (Z-A)
|
|
||||||
</option>
|
|
||||||
<option value="medico-asc">Médico (A-Z)</option>
|
<option value="medico-asc">Médico (A-Z)</option>
|
||||||
<option value="medico-desc">
|
<option value="medico-desc">Médico (Z-A)</option>
|
||||||
Médico (Z-A)
|
<option value="data-asc">Data (mais antiga)</option>
|
||||||
</option>
|
<option value="data-desc">Data (mais recente)</option>
|
||||||
<option value="data-asc">
|
|
||||||
Data (mais antiga)
|
|
||||||
</option>
|
|
||||||
<option value="data-desc">
|
|
||||||
Data (mais recente)
|
|
||||||
</option>
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Contador */}
|
||||||
<div className="mt-3">
|
<div className="mt-3">
|
||||||
<div className="contador-pacientes">
|
<div className="contador-medicos">
|
||||||
{filaEsperaFiltrada.length} DE{" "}
|
{filaEsperaFiltrada.length} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
|
||||||
{filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="table-responsive">
|
|
||||||
<table className="table table-striped table-hover table-paciente-table">
|
{/* ===== TABELA SIMPLIFICADA ===== */}
|
||||||
|
<div className="table-responsive mt-4">
|
||||||
|
<table className="table table-striped table-hover table-doctor-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Nome do Paciente</th>
|
<th>Nome do Paciente</th>
|
||||||
@ -911,9 +799,7 @@ const Agendamento = () => {
|
|||||||
<td>{item?.Infos?.paciente_cpf}</td>
|
<td>{item?.Infos?.paciente_cpf}</td>
|
||||||
<td>{item?.Infos?.medico_nome}</td>
|
<td>{item?.Infos?.medico_nome}</td>
|
||||||
<td>
|
<td>
|
||||||
{dayjs(
|
{dayjs(item.agendamento.scheduled_at).format("DD/MM/YYYY")}
|
||||||
item.agendamento.scheduled_at
|
|
||||||
).format("DD/MM/YYYY")}
|
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<button
|
<button
|
||||||
@ -923,8 +809,7 @@ const Agendamento = () => {
|
|||||||
setShowDeleteModal(true);
|
setShowDeleteModal(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<i className="bi bi-trash me-1"></i>{" "}
|
<i className="bi bi-trash me-1"></i> Excluir
|
||||||
Excluir
|
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -937,10 +822,8 @@ const Agendamento = () => {
|
|||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<i className="bi bi-inbox display-4"></i>
|
<i className="bi bi-search display-4"></i>
|
||||||
<p className="mt-2">
|
<p className="mt-2">Nenhuma solicitação encontrada.</p>
|
||||||
Nenhuma solicitação encontrada.
|
|
||||||
</p>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -949,12 +832,12 @@ const Agendamento = () => {
|
|||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
{/* ===== PAGINAÇÃO ===== */}
|
||||||
{filaEsperaFiltrada.length > 0 && (
|
{filaEsperaFiltrada.length > 0 && (
|
||||||
<div className="d-flex justify-content-between align-items-center mt-3">
|
<div className="d-flex justify-content-between align-items-center mt-3">
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
<span className="me-2 text-muted">
|
<span className="me-2 text-muted">Itens por página:</span>
|
||||||
Itens por página:
|
|
||||||
</span>
|
|
||||||
<select
|
<select
|
||||||
className="form-select form-select-sm w-auto"
|
className="form-select form-select-sm w-auto"
|
||||||
value={waitPerPage}
|
value={waitPerPage}
|
||||||
@ -971,26 +854,15 @@ const Agendamento = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
<span className="me-3 text-muted">
|
<span className="me-3 text-muted">
|
||||||
Página {waitPage} de {waitTotalPages} •
|
Página {waitPage} de {waitTotalPages} • Mostrando {waitIndiceInicial + 1}-
|
||||||
Mostrando {waitIndiceInicial + 1}-
|
{Math.min(waitIndiceFinal, filaEsperaFiltrada.length)} de {filaEsperaFiltrada.length}
|
||||||
{Math.min(
|
|
||||||
waitIndiceFinal,
|
|
||||||
filaEsperaFiltrada.length
|
|
||||||
)}{" "}
|
|
||||||
de {filaEsperaFiltrada.length}
|
|
||||||
</span>
|
</span>
|
||||||
<nav>
|
<nav>
|
||||||
<ul className="pagination pagination-sm mb-0">
|
<ul className="pagination pagination-sm mb-0">
|
||||||
<li
|
<li className={`page-item ${waitPage === 1 ? "disabled" : ""}`}>
|
||||||
className={`page-item ${
|
|
||||||
waitPage === 1 ? "disabled" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
className="page-link"
|
className="page-link"
|
||||||
onClick={() =>
|
onClick={() => setWaitPage((p) => Math.max(1, p - 1))}
|
||||||
setWaitPage((p) => Math.max(1, p - 1))
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<i className="bi bi-chevron-left"></i>
|
<i className="bi bi-chevron-left"></i>
|
||||||
</button>
|
</button>
|
||||||
@ -998,9 +870,7 @@ const Agendamento = () => {
|
|||||||
{gerarNumerosWaitPages().map((pagina) => (
|
{gerarNumerosWaitPages().map((pagina) => (
|
||||||
<li
|
<li
|
||||||
key={pagina}
|
key={pagina}
|
||||||
className={`page-item ${
|
className={`page-item ${pagina === waitPage ? "active" : ""}`}
|
||||||
pagina === waitPage ? "active" : ""
|
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="page-link"
|
className="page-link"
|
||||||
@ -1010,20 +880,10 @@ const Agendamento = () => {
|
|||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
<li
|
<li className={`page-item ${waitPage === waitTotalPages ? "disabled" : ""}`}>
|
||||||
className={`page-item ${
|
|
||||||
waitPage === waitTotalPages
|
|
||||||
? "disabled"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
className="page-link"
|
className="page-link"
|
||||||
onClick={() =>
|
onClick={() => setWaitPage((p) => Math.min(waitTotalPages, p + 1))}
|
||||||
setWaitPage((p) =>
|
|
||||||
Math.min(waitTotalPages, p + 1)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<i className="bi bi-chevron-right"></i>
|
<i className="bi bi-chevron-right"></i>
|
||||||
</button>
|
</button>
|
||||||
@ -1037,8 +897,6 @@ const Agendamento = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import { useNavigate } from 'react-router-dom';
|
|||||||
import html2pdf from 'html2pdf.js';
|
import html2pdf from 'html2pdf.js';
|
||||||
import TiptapViewer from './TiptapViewer';
|
import TiptapViewer from './TiptapViewer';
|
||||||
import './styleMedico/DoctorRelatorioManager.css';
|
import './styleMedico/DoctorRelatorioManager.css';
|
||||||
|
import '../pages/style/TableDoctor.css';
|
||||||
|
|
||||||
const DoctorRelatorioManager = () => {
|
const DoctorRelatorioManager = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@ -25,12 +26,15 @@ const DoctorRelatorioManager = () => {
|
|||||||
const [relatorioModal, setRelatorioModal] = useState(null);
|
const [relatorioModal, setRelatorioModal] = useState(null);
|
||||||
const [termoPesquisa, setTermoPesquisa] = useState('');
|
const [termoPesquisa, setTermoPesquisa] = useState('');
|
||||||
const [filtroExame, setFiltroExame] = useState('');
|
const [filtroExame, setFiltroExame] = useState('');
|
||||||
const [examesDisponiveis, setExamesDisponiveis] = useState([]);
|
|
||||||
const [modalIndex, setModalIndex] = useState(0);
|
const [modalIndex, setModalIndex] = useState(0);
|
||||||
|
const [loadingPacientes, setLoadingPacientes] = useState(false);
|
||||||
|
|
||||||
const [paginaAtual, setPaginaAtual] = useState(1);
|
const [paginaAtual, setPaginaAtual] = useState(1);
|
||||||
const [itensPorPagina, setItensPorPagina] = useState(10);
|
const [itensPorPagina, setItensPorPagina] = useState(10);
|
||||||
|
|
||||||
|
const [sortKey, setSortKey] = useState('');
|
||||||
|
const [sortDir, setSortDir] = useState('asc');
|
||||||
|
|
||||||
const totalPaginas = Math.max(1, Math.ceil(relatoriosFinais.length / itensPorPagina));
|
const totalPaginas = Math.max(1, Math.ceil(relatoriosFinais.length / itensPorPagina));
|
||||||
const indiceInicial = (paginaAtual - 1) * itensPorPagina;
|
const indiceInicial = (paginaAtual - 1) * itensPorPagina;
|
||||||
const indiceFinal = indiceInicial + itensPorPagina;
|
const indiceFinal = indiceInicial + itensPorPagina;
|
||||||
@ -46,7 +50,6 @@ const DoctorRelatorioManager = () => {
|
|||||||
if (authHeader) myHeaders.append('Authorization', authHeader);
|
if (authHeader) myHeaders.append('Authorization', authHeader);
|
||||||
const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
|
const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
|
||||||
|
|
||||||
|
|
||||||
let userId = null;
|
let userId = null;
|
||||||
let userFullName = null;
|
let userFullName = null;
|
||||||
try {
|
try {
|
||||||
@ -60,12 +63,10 @@ const DoctorRelatorioManager = () => {
|
|||||||
console.warn('Não foi possível obter UserInfos (pode não estar logado):', err);
|
console.warn('Não foi possível obter UserInfos (pode não estar logado):', err);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const baseUrl = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*";
|
const baseUrl = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*";
|
||||||
let data = [];
|
let data = [];
|
||||||
|
|
||||||
if (userId) {
|
if (userId) {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`${baseUrl}&doctor_id=eq.${userId}`, requestOptions);
|
const res = await fetch(`${baseUrl}&doctor_id=eq.${userId}`, requestOptions);
|
||||||
data = await res.json();
|
data = await res.json();
|
||||||
@ -74,7 +75,6 @@ const DoctorRelatorioManager = () => {
|
|||||||
data = [];
|
data = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if ((!Array.isArray(data) || data.length === 0) && userId) {
|
if ((!Array.isArray(data) || data.length === 0) && userId) {
|
||||||
try {
|
try {
|
||||||
const res2 = await fetch(`${baseUrl}&created_by=eq.${userId}`, requestOptions);
|
const res2 = await fetch(`${baseUrl}&created_by=eq.${userId}`, requestOptions);
|
||||||
@ -87,7 +87,6 @@ const DoctorRelatorioManager = () => {
|
|||||||
|
|
||||||
if ((!Array.isArray(data) || data.length === 0) && userFullName) {
|
if ((!Array.isArray(data) || data.length === 0) && userFullName) {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
const encodedName = encodeURIComponent(userFullName);
|
const encodedName = encodeURIComponent(userFullName);
|
||||||
const res3 = await fetch(`${baseUrl}&requested_by=eq.${encodedName}`, requestOptions);
|
const res3 = await fetch(`${baseUrl}&requested_by=eq.${encodedName}`, requestOptions);
|
||||||
data = await res3.json();
|
data = await res3.json();
|
||||||
@ -108,7 +107,6 @@ const DoctorRelatorioManager = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const uniqueMap = new Map();
|
const uniqueMap = new Map();
|
||||||
(Array.isArray(data) ? data : []).forEach(r => {
|
(Array.isArray(data) ? data : []).forEach(r => {
|
||||||
if (r && r.id) uniqueMap.set(r.id, r);
|
if (r && r.id) uniqueMap.set(r.id, r);
|
||||||
@ -142,13 +140,13 @@ const DoctorRelatorioManager = () => {
|
|||||||
};
|
};
|
||||||
}, [authHeader]);
|
}, [authHeader]);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchRelData = async () => {
|
const fetchRelData = async () => {
|
||||||
|
setLoadingPacientes(true);
|
||||||
const pacientes = [];
|
const pacientes = [];
|
||||||
const medicos = [];
|
const medicos = [];
|
||||||
for (let i = 0; i < relatoriosFinais.length; i++) {
|
for (let i = 0; i < relatoriosOriginais.length; i++) {
|
||||||
const rel = relatoriosFinais[i];
|
const rel = relatoriosOriginais[i];
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const pacienteRes = await GetPatientByID(rel.patient_id, authHeader);
|
const pacienteRes = await GetPatientByID(rel.patient_id, authHeader);
|
||||||
@ -162,7 +160,6 @@ const DoctorRelatorioManager = () => {
|
|||||||
const docRes = await GetDoctorByID(rel.doctor_id, authHeader);
|
const docRes = await GetDoctorByID(rel.doctor_id, authHeader);
|
||||||
medicos.push(Array.isArray(docRes) ? docRes[0] : docRes);
|
medicos.push(Array.isArray(docRes) ? docRes[0] : docRes);
|
||||||
} else if (rel.created_by) {
|
} else if (rel.created_by) {
|
||||||
|
|
||||||
const docRes = await GetDoctorByID(rel.created_by, authHeader);
|
const docRes = await GetDoctorByID(rel.created_by, authHeader);
|
||||||
medicos.push(Array.isArray(docRes) ? docRes[0] : docRes);
|
medicos.push(Array.isArray(docRes) ? docRes[0] : docRes);
|
||||||
} else if (rel.requested_by) {
|
} else if (rel.requested_by) {
|
||||||
@ -176,14 +173,82 @@ const DoctorRelatorioManager = () => {
|
|||||||
}
|
}
|
||||||
setPacientesComRelatorios(pacientes);
|
setPacientesComRelatorios(pacientes);
|
||||||
setMedicosComRelatorios(medicos);
|
setMedicosComRelatorios(medicos);
|
||||||
|
setLoadingPacientes(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (relatoriosFinais.length > 0) fetchRelData();
|
if (relatoriosOriginais.length > 0) fetchRelData();
|
||||||
else {
|
else {
|
||||||
setPacientesComRelatorios([]);
|
setPacientesComRelatorios([]);
|
||||||
setMedicosComRelatorios([]);
|
setMedicosComRelatorios([]);
|
||||||
|
setLoadingPacientes(false);
|
||||||
}
|
}
|
||||||
}, [relatoriosFinais, authHeader]);
|
}, [relatoriosOriginais, authHeader]);
|
||||||
|
|
||||||
|
// Filtragem e Ordenação
|
||||||
|
useEffect(() => {
|
||||||
|
// Aguardar o carregamento dos pacientes antes de filtrar
|
||||||
|
if (loadingPacientes) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const q = (termoPesquisa || '').toLowerCase().trim();
|
||||||
|
const ex = (filtroExame || '').toLowerCase().trim();
|
||||||
|
|
||||||
|
let items = relatoriosOriginais || [];
|
||||||
|
|
||||||
|
// Aplicar filtros
|
||||||
|
if (q || ex) {
|
||||||
|
items = items.filter((r, idx) => {
|
||||||
|
let passaBusca = true;
|
||||||
|
let passaExame = true;
|
||||||
|
|
||||||
|
if (q) {
|
||||||
|
const paciente = pacientesComRelatorios[idx];
|
||||||
|
const patientName = (paciente?.full_name || r.patient_name || r.patient_fullname || '').toString().toLowerCase();
|
||||||
|
const patientCPF = (paciente?.cpf || '').toString().toLowerCase();
|
||||||
|
const pedido = (r.id || r.request_id || r.request || '').toString().toLowerCase();
|
||||||
|
passaBusca = patientName.includes(q) || patientCPF.includes(q) || pedido.includes(q) || (r.patient_id && r.patient_id.toString().includes(q));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ex) {
|
||||||
|
passaExame = (r.exam || r.exame || '').toLowerCase().includes(ex);
|
||||||
|
}
|
||||||
|
|
||||||
|
return passaBusca && passaExame;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Aplicar ordenação
|
||||||
|
if (sortKey) {
|
||||||
|
items = [...items].sort((a, b) => {
|
||||||
|
let aValue = '';
|
||||||
|
let bValue = '';
|
||||||
|
|
||||||
|
if (sortKey === 'paciente') {
|
||||||
|
const aIdx = relatoriosOriginais.findIndex(r => r.id === a.id);
|
||||||
|
const bIdx = relatoriosOriginais.findIndex(r => r.id === b.id);
|
||||||
|
const aPaciente = pacientesComRelatorios[aIdx];
|
||||||
|
const bPaciente = pacientesComRelatorios[bIdx];
|
||||||
|
aValue = (aPaciente?.full_name || a.patient_name || a.patient_fullname || '').toLowerCase();
|
||||||
|
bValue = (bPaciente?.full_name || b.patient_name || b.patient_fullname || '').toLowerCase();
|
||||||
|
} else if (sortKey === 'exame') {
|
||||||
|
aValue = (a.exam || a.exame || '').toLowerCase();
|
||||||
|
bValue = (b.exam || b.exame || '').toLowerCase();
|
||||||
|
} else if (sortKey === 'data') {
|
||||||
|
aValue = new Date(a.due_at || a.date || a.created_at || 0);
|
||||||
|
bValue = new Date(b.due_at || b.date || b.created_at || 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (aValue < bValue) return sortDir === 'asc' ? -1 : 1;
|
||||||
|
if (aValue > bValue) return sortDir === 'asc' ? 1 : -1;
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setRelatoriosFiltrados(items);
|
||||||
|
setRelatoriosFinais(items);
|
||||||
|
setPaginaAtual(1);
|
||||||
|
}, [termoPesquisa, filtroExame, relatoriosOriginais, sortKey, sortDir, pacientesComRelatorios, loadingPacientes]);
|
||||||
|
|
||||||
const abrirModal = (relatorio, pageIndex) => {
|
const abrirModal = (relatorio, pageIndex) => {
|
||||||
const globalIndex = relatoriosFinais.findIndex(r => r.id === relatorio.id);
|
const globalIndex = relatoriosFinais.findIndex(r => r.id === relatorio.id);
|
||||||
@ -193,10 +258,11 @@ const DoctorRelatorioManager = () => {
|
|||||||
setShowModal(true);
|
setShowModal(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const limparFiltros = () => {
|
const limparFiltros = () => {
|
||||||
setTermoPesquisa('');
|
setTermoPesquisa('');
|
||||||
setFiltroExame('');
|
setFiltroExame('');
|
||||||
|
setSortKey('');
|
||||||
|
setSortDir('asc');
|
||||||
setRelatoriosFinais(relatoriosOriginais);
|
setRelatoriosFinais(relatoriosOriginais);
|
||||||
setPaginaAtual(1);
|
setPaginaAtual(1);
|
||||||
};
|
};
|
||||||
@ -216,41 +282,257 @@ const DoctorRelatorioManager = () => {
|
|||||||
html2pdf().set(opt).from(elemento).save();
|
html2pdf().set(opt).from(elemento).save();
|
||||||
};
|
};
|
||||||
|
|
||||||
const irParaPagina = (pagina) => {
|
const irParaPagina = (pagina) => setPaginaAtual(pagina);
|
||||||
setPaginaAtual(pagina);
|
const avancarPagina = () => paginaAtual < totalPaginas && setPaginaAtual(p => p + 1);
|
||||||
};
|
const voltarPagina = () => paginaAtual > 1 && setPaginaAtual(p => p - 1);
|
||||||
|
|
||||||
const avancarPagina = () => {
|
|
||||||
if (paginaAtual < totalPaginas) {
|
|
||||||
setPaginaAtual(paginaAtual + 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const voltarPagina = () => {
|
|
||||||
if (paginaAtual > 1) {
|
|
||||||
setPaginaAtual(paginaAtual - 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const gerarNumerosPaginas = () => {
|
const gerarNumerosPaginas = () => {
|
||||||
const paginas = [];
|
const paginas = [];
|
||||||
const paginasParaMostrar = 5;
|
const paginasParaMostrar = 5;
|
||||||
|
|
||||||
let inicio = Math.max(1, paginaAtual - Math.floor(paginasParaMostrar / 2));
|
let inicio = Math.max(1, paginaAtual - Math.floor(paginasParaMostrar / 2));
|
||||||
let fim = Math.min(totalPaginas, inicio + paginasParaMostrar - 1);
|
let fim = Math.min(totalPaginas, inicio + paginasParaMostrar - 1);
|
||||||
|
|
||||||
inicio = Math.max(1, fim - paginasParaMostrar + 1);
|
inicio = Math.max(1, fim - paginasParaMostrar + 1);
|
||||||
|
for (let i = inicio; i <= fim; i++) paginas.push(i);
|
||||||
for (let i = inicio; i <= fim; i++) {
|
|
||||||
paginas.push(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
return paginas;
|
return paginas;
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{showModal && (
|
<div className="page-heading">
|
||||||
|
<h3>Lista de Relatórios</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="page-content table-doctor-container">
|
||||||
|
<div className="table-doctor-card">
|
||||||
|
<div className="card-header d-flex justify-content-between align-items-center">
|
||||||
|
<h4 className="card-title mb-0">Relatórios Cadastrados</h4>
|
||||||
|
<Link to={'criar'}>
|
||||||
|
<button className="btn btn-primary">
|
||||||
|
<i className="bi bi-plus-circle"></i> Adicionar Relatório
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card-body">
|
||||||
|
{/* ===== FILTROS PADRONIZADOS ===== */}
|
||||||
|
<div className="table-doctor-filters">
|
||||||
|
<h5 className="mb-3">
|
||||||
|
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
||||||
|
</h5>
|
||||||
|
|
||||||
|
{/* Busca */}
|
||||||
|
<div className="mb-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Buscar por nome ou CPF do paciente..."
|
||||||
|
value={termoPesquisa}
|
||||||
|
onChange={(e) => setTermoPesquisa(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Linha de Filtros Básicos - TUDO EM UMA LINHA SÓ */}
|
||||||
|
<div className="d-flex flex-wrap align-items-center gap-3 mb-3">
|
||||||
|
{/* Filtro Exame */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Tipo de Exame:</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm compact-select"
|
||||||
|
placeholder="Digite o exame..."
|
||||||
|
value={filtroExame}
|
||||||
|
onChange={(e) => setFiltroExame(e.target.value)}
|
||||||
|
style={{ minWidth: "180px" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Separador */}
|
||||||
|
<div className="vr d-none d-md-block" style={{ height: "30px" }} />
|
||||||
|
|
||||||
|
{/* Ordenação */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Ordenar por:</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm compact-select sort-select"
|
||||||
|
value={sortKey ? `${sortKey}-${sortDir}` : ''}
|
||||||
|
onChange={e => {
|
||||||
|
const v = e.target.value;
|
||||||
|
if (!v) {
|
||||||
|
setSortKey('');
|
||||||
|
setSortDir('asc');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const [k, d] = v.split('-');
|
||||||
|
setSortKey(k);
|
||||||
|
setSortDir(d);
|
||||||
|
}}
|
||||||
|
style={{ minWidth: "180px" }}
|
||||||
|
>
|
||||||
|
<option value="">Sem ordenação</option>
|
||||||
|
<option value="paciente-asc">Paciente (A-Z)</option>
|
||||||
|
<option value="paciente-desc">Paciente (Z-A)</option>
|
||||||
|
<option value="exame-asc">Exame (A-Z)</option>
|
||||||
|
<option value="exame-desc">Exame (Z-A)</option>
|
||||||
|
<option value="data-asc">Data (mais antiga)</option>
|
||||||
|
<option value="data-desc">Data (mais recente)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Linha de Ações */}
|
||||||
|
<div className="d-flex justify-content-between align-items-center">
|
||||||
|
<div></div> {/* Espaço vazio para alinhamento */}
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary btn-sm d-flex align-items-center"
|
||||||
|
onClick={limparFiltros}
|
||||||
|
>
|
||||||
|
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contador */}
|
||||||
|
<div className="mt-3">
|
||||||
|
<div className="contador-medicos">
|
||||||
|
{relatoriosFinais.length} DE {relatoriosOriginais.length} RELATÓRIOS ENCONTRADOS
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ===== TABELA SIMPLIFICADA ===== */}
|
||||||
|
<div className="table-responsive mt-4">
|
||||||
|
<table className="table table-striped table-hover table-paciente-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Paciente</th>
|
||||||
|
<th>CPF</th>
|
||||||
|
<th>Exame</th>
|
||||||
|
<th>Data</th>
|
||||||
|
<th>Ações</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{relatoriosPaginados.length > 0 ? (
|
||||||
|
relatoriosPaginados.map((relatorio, index) => {
|
||||||
|
const globalIndex = relatoriosFinais.findIndex(r => r.id === relatorio.id);
|
||||||
|
const paciente = pacientesComRelatorios[globalIndex];
|
||||||
|
const dataRelatorio = relatorio.due_at || relatorio.date || relatorio.created_at;
|
||||||
|
const dataFormatada = dataRelatorio ? new Date(dataRelatorio).toLocaleDateString('pt-BR') : '—';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr key={relatorio.id}>
|
||||||
|
<td>
|
||||||
|
<div className="d-flex align-items-center patient-name-container">
|
||||||
|
{paciente?.full_name || 'Carregando...'}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>{paciente?.cpf || 'Carregando...'}</td>
|
||||||
|
<td>
|
||||||
|
<span className="badge specialty-badge">
|
||||||
|
{relatorio.exam || '—'}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span className="text-muted small">
|
||||||
|
{dataFormatada}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="d-flex gap-2">
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-view"
|
||||||
|
onClick={() => abrirModal(relatorio, index)}
|
||||||
|
>
|
||||||
|
<i className="bi bi-eye me-1"></i> Ver
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-edit"
|
||||||
|
onClick={() => navigate(`/medico/relatorios/${relatorio.id}/edit`)}
|
||||||
|
>
|
||||||
|
<i className="bi bi-pencil me-1"></i> Editar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<tr>
|
||||||
|
<td colSpan="5" className="text-center py-4">
|
||||||
|
<div className="text-muted">
|
||||||
|
<i className="bi bi-search display-4"></i>
|
||||||
|
<p className="mt-2">Nenhum relatório encontrado com os filtros aplicados.</p>
|
||||||
|
{(termoPesquisa || filtroExame) && (
|
||||||
|
<button className="btn btn-outline-primary btn-sm mt-2" onClick={limparFiltros}>
|
||||||
|
Limpar filtros
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{/* ===== PAGINAÇÃO ===== */}
|
||||||
|
{relatoriosFinais.length > 0 && (
|
||||||
|
<div className="d-flex justify-content-between align-items-center mt-3">
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<span className="me-2 text-muted">Itens por página:</span>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm w-auto"
|
||||||
|
value={itensPorPagina}
|
||||||
|
onChange={(e) => {
|
||||||
|
setItensPorPagina(Number(e.target.value));
|
||||||
|
setPaginaAtual(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value={5}>5</option>
|
||||||
|
<option value={10}>10</option>
|
||||||
|
<option value={25}>25</option>
|
||||||
|
<option value={50}>50</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<span className="me-3 text-muted">
|
||||||
|
Página {paginaAtual} de {totalPaginas} •
|
||||||
|
Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, relatoriosFinais.length)} de {relatoriosFinais.length} relatórios
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul className="pagination pagination-sm mb-0">
|
||||||
|
<li className={`page-item ${paginaAtual === 1 ? 'disabled' : ''}`}>
|
||||||
|
<button className="page-link" onClick={voltarPagina}>
|
||||||
|
<i className="bi bi-chevron-left"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{gerarNumerosPaginas().map(pagina => (
|
||||||
|
<li key={pagina} className={`page-item ${pagina === paginaAtual ? 'active' : ''}`}>
|
||||||
|
<button className="page-link" onClick={() => irParaPagina(pagina)}>
|
||||||
|
{pagina}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<li className={`page-item ${paginaAtual === totalPaginas ? 'disabled' : ''}`}>
|
||||||
|
<button className="page-link" onClick={avancarPagina}>
|
||||||
|
<i className="bi bi-chevron-right"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ===== MODAL DE DETALHES ===== */}
|
||||||
|
{showModal && relatorioModal && (
|
||||||
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }} tabIndex="-1">
|
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }} tabIndex="-1">
|
||||||
<div className="modal-dialog modal-dialog-centered modal-lg">
|
<div className="modal-dialog modal-dialog-centered modal-lg">
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
@ -296,159 +578,6 @@ const DoctorRelatorioManager = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="page-heading"><h3>Lista de Relatórios</h3></div>
|
|
||||||
<div className="page-content">
|
|
||||||
<section className="row">
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<div className="card-header d-flex justify-content-between align-items-center">
|
|
||||||
<h4 className="card-title mb-0">Relatórios Cadastrados</h4>
|
|
||||||
<Link to={'criar'}>
|
|
||||||
<button className="btn btn-primary">
|
|
||||||
<i className="bi bi-plus-circle"></i> Adicionar Relatório
|
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<div className="card p-3 mb-3">
|
|
||||||
<h5 className="mb-3">
|
|
||||||
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
|
||||||
</h5>
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-md-5">
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Buscar por nome ou CPF do paciente</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
placeholder="Digite nome ou CPF do paciente..."
|
|
||||||
value={termoPesquisa}
|
|
||||||
onChange={(e) => setTermoPesquisa(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-5">
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Filtrar por tipo de exame</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
placeholder="Digite o tipo de exame..."
|
|
||||||
value={filtroExame}
|
|
||||||
onChange={(e) => setFiltroExame(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-2 d-flex align-items-end">
|
|
||||||
<button className="btn btn-outline-secondary w-100" onClick={limparFiltros}>
|
|
||||||
<i className="bi bi-arrow-clockwise"></i> Limpar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-2">
|
|
||||||
<div className="contador-relatorios">
|
|
||||||
{relatoriosFinais.length} DE {relatoriosOriginais.length} RELATÓRIOS ENCONTRADOS
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="table-responsive">
|
|
||||||
<table className="table table-striped table-hover">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Paciente</th>
|
|
||||||
<th>CPF</th>
|
|
||||||
<th>Exame</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{relatoriosPaginados.length > 0 ? (
|
|
||||||
relatoriosPaginados.map((relatorio, index) => {
|
|
||||||
const globalIndex = relatoriosFinais.findIndex(r => r.id === relatorio.id);
|
|
||||||
const paciente = pacientesComRelatorios[globalIndex];
|
|
||||||
return (
|
|
||||||
<tr key={relatorio.id}>
|
|
||||||
<td>{paciente?.full_name || 'Carregando...'}</td>
|
|
||||||
<td>{paciente?.cpf || 'Carregando...'}</td>
|
|
||||||
<td>{relatorio.exam}</td>
|
|
||||||
<td>
|
|
||||||
<div className="d-flex gap-2">
|
|
||||||
<button className="btn btn-sm btn-ver-detalhes" onClick={() => abrirModal(relatorio, index)}>
|
|
||||||
<i className="bi bi-eye me-1"></i> Ver Detalhes
|
|
||||||
</button>
|
|
||||||
<button className="btn btn-sm btn-editar" onClick={() => navigate(`/medico/relatorios/${relatorio.id}/edit`)}>
|
|
||||||
<i className="bi bi-pencil me-1"></i> Editar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<tr><td colSpan="4" className="text-center">Nenhum relatório encontrado.</td></tr>
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
{relatoriosFinais.length > 0 && (
|
|
||||||
<div className="d-flex justify-content-between align-items-center mt-3">
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
<span className="me-2 text-muted">Itens por página:</span>
|
|
||||||
<select
|
|
||||||
className="form-select form-select-sm w-auto"
|
|
||||||
value={itensPorPagina}
|
|
||||||
onChange={(e) => {
|
|
||||||
setItensPorPagina(Number(e.target.value));
|
|
||||||
setPaginaAtual(1);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value={5}>5</option>
|
|
||||||
<option value={10}>10</option>
|
|
||||||
<option value={25}>25</option>
|
|
||||||
<option value={50}>50</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
<span className="me-3 text-muted">
|
|
||||||
Página {paginaAtual} de {totalPaginas} •
|
|
||||||
Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, relatoriosFinais.length)} de {relatoriosFinais.length} itens
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<ul className="pagination pagination-sm mb-0">
|
|
||||||
<li className={`page-item ${paginaAtual === 1 ? 'disabled' : ''}`}>
|
|
||||||
<button className="page-link" onClick={voltarPagina}>
|
|
||||||
<i className="bi bi-chevron-left"></i>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
{gerarNumerosPaginas().map(pagina => (
|
|
||||||
<li key={pagina} className={`page-item ${pagina === paginaAtual ? 'active' : ''}`}>
|
|
||||||
<button className="page-link" onClick={() => irParaPagina(pagina)}>
|
|
||||||
{pagina}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<li className={`page-item ${paginaAtual === totalPaginas ? 'disabled' : ''}`}>
|
|
||||||
<button className="page-link" onClick={avancarPagina}>
|
|
||||||
<i className="bi bi-chevron-right"></i>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import localeData from 'dayjs/plugin/localeData';
|
|||||||
import { ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react';
|
import { ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react';
|
||||||
import "../pages/style/Agendamento.css";
|
import "../pages/style/Agendamento.css";
|
||||||
import '../pages/style/FilaEspera.css';
|
import '../pages/style/FilaEspera.css';
|
||||||
|
import '../pages/style/TableDoctor.css';
|
||||||
import Spinner from '../components/Spinner.jsx';
|
import Spinner from '../components/Spinner.jsx';
|
||||||
|
|
||||||
dayjs.locale('pt-br');
|
dayjs.locale('pt-br');
|
||||||
@ -37,6 +38,13 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
const [appointmentToCancel, setAppointmentToCancel] = useState(null);
|
const [appointmentToCancel, setAppointmentToCancel] = useState(null);
|
||||||
const [cancellationReason, setCancellationReason] = useState('');
|
const [cancellationReason, setCancellationReason] = useState('');
|
||||||
|
|
||||||
|
// Estados para filtro, ordenação e paginação da fila de espera
|
||||||
|
const [waitlistSearch, setWaitlistSearch] = useState('');
|
||||||
|
const [waitSortKey, setWaitSortKey] = useState(null);
|
||||||
|
const [waitSortDir, setWaitSortDir] = useState('asc');
|
||||||
|
const [waitPage, setWaitPage] = useState(1);
|
||||||
|
const [waitPerPage, setWaitPerPage] = useState(10);
|
||||||
|
|
||||||
const authHeader = useMemo(() => getAuthorizationHeader(), [getAuthorizationHeader]);
|
const authHeader = useMemo(() => getAuthorizationHeader(), [getAuthorizationHeader]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -171,6 +179,51 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
|
const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
|
||||||
const handleDateClick = (day) => setSelectedDay(day);
|
const handleDateClick = (day) => setSelectedDay(day);
|
||||||
|
|
||||||
|
// Filtro e ordenação da fila de espera
|
||||||
|
const filaEsperaFiltrada = useMemo(() => {
|
||||||
|
if (!waitlistSearch.trim()) return filaEsperaData;
|
||||||
|
const term = waitlistSearch.toLowerCase();
|
||||||
|
return filaEsperaData.filter(
|
||||||
|
(item) =>
|
||||||
|
(item?.Infos?.medico_nome?.toLowerCase() || '').includes(term)
|
||||||
|
);
|
||||||
|
}, [waitlistSearch, filaEsperaData]);
|
||||||
|
|
||||||
|
const applySortingWaitlist = (arr) => {
|
||||||
|
if (!Array.isArray(arr) || !waitSortKey) return arr;
|
||||||
|
const copy = [...arr];
|
||||||
|
if (waitSortKey === 'medico') {
|
||||||
|
copy.sort((a, b) => (a?.Infos?.medico_nome || '').localeCompare(b?.Infos?.medico_nome || ''));
|
||||||
|
} else if (waitSortKey === 'data') {
|
||||||
|
copy.sort((a, b) =>
|
||||||
|
new Date(a?.agendamento?.created_at || 0) - new Date(b?.agendamento?.created_at || 0)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (waitSortDir === 'desc') copy.reverse();
|
||||||
|
return copy;
|
||||||
|
};
|
||||||
|
|
||||||
|
const filaEsperaOrdenada = applySortingWaitlist(filaEsperaFiltrada);
|
||||||
|
const waitTotalPages = Math.ceil(filaEsperaOrdenada.length / waitPerPage) || 1;
|
||||||
|
const waitIndiceInicial = (waitPage - 1) * waitPerPage;
|
||||||
|
const waitIndiceFinal = waitIndiceInicial + waitPerPage;
|
||||||
|
const filaEsperaPaginada = filaEsperaOrdenada.slice(waitIndiceInicial, waitIndiceFinal);
|
||||||
|
|
||||||
|
const gerarNumerosWaitPages = () => {
|
||||||
|
const paginas = [];
|
||||||
|
const paginasParaMostrar = 5;
|
||||||
|
let inicio = Math.max(1, waitPage - Math.floor(paginasParaMostrar / 2));
|
||||||
|
let fim = Math.min(waitTotalPages, inicio + paginasParaMostrar - 1);
|
||||||
|
inicio = Math.max(1, fim - paginasParaMostrar + 1);
|
||||||
|
for (let i = inicio; i <= fim; i++) paginas.push(i);
|
||||||
|
return paginas;
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setWaitPage(1);
|
||||||
|
}, [waitlistSearch, waitSortKey, waitSortDir]);
|
||||||
|
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
<div className="form-container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
|
<div className="form-container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
|
||||||
@ -280,14 +333,70 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="page-content table-paciente-container">
|
<div className="page-content table-doctor-container">
|
||||||
<section className="row">
|
<div className="table-doctor-card">
|
||||||
<div className="col-12">
|
<div className="card-header">
|
||||||
<div className="card table-paciente-card">
|
<h4 className="card-title mb-0">Minhas Solicitações em Fila de Espera</h4>
|
||||||
<div className="card-header"><h4 className="card-title mb-0">Minhas Solicitações em Fila de Espera</h4></div>
|
</div>
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<div className="table-responsive">
|
{/* ===== FILTROS PADRONIZADOS ===== */}
|
||||||
<table className="table table-striped table-hover">
|
<div className="table-doctor-filters">
|
||||||
|
<h5 className="mb-3">
|
||||||
|
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
||||||
|
</h5>
|
||||||
|
|
||||||
|
{/* Busca */}
|
||||||
|
<div className="mb-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Buscar por médico..."
|
||||||
|
value={waitlistSearch}
|
||||||
|
onChange={(e) => setWaitlistSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Linha de Filtros Básicos */}
|
||||||
|
<div className="d-flex flex-wrap align-items-center gap-3 mb-3">
|
||||||
|
{/* Ordenação */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Ordenar por:</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm compact-select sort-select"
|
||||||
|
style={{ minWidth: "180px" }}
|
||||||
|
value={waitSortKey ? `${waitSortKey}-${waitSortDir}` : ''}
|
||||||
|
onChange={(e) => {
|
||||||
|
const v = e.target.value;
|
||||||
|
if (!v) {
|
||||||
|
setWaitSortKey(null);
|
||||||
|
setWaitSortDir('asc');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const [k, d] = v.split('-');
|
||||||
|
setWaitSortKey(k);
|
||||||
|
setWaitSortDir(d);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="">Sem ordenação</option>
|
||||||
|
<option value="medico-asc">Médico (A-Z)</option>
|
||||||
|
<option value="medico-desc">Médico (Z-A)</option>
|
||||||
|
<option value="data-asc">Data (mais antiga)</option>
|
||||||
|
<option value="data-desc">Data (mais recente)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contador */}
|
||||||
|
<div className="mt-3">
|
||||||
|
<div className="contador-medicos">
|
||||||
|
{filaEsperaFiltrada.length} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ===== TABELA SIMPLIFICADA ===== */}
|
||||||
|
<div className="table-responsive mt-4">
|
||||||
|
<table className="table table-striped table-hover table-doctor-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Médico Solicitado</th>
|
<th>Médico Solicitado</th>
|
||||||
@ -296,31 +405,102 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{filaEsperaData.length > 0 ? (filaEsperaData.map((item) => (
|
{filaEsperaPaginada.length > 0 ? (
|
||||||
|
filaEsperaPaginada.map((item) => (
|
||||||
<tr key={item.agendamento.id}>
|
<tr key={item.agendamento.id}>
|
||||||
<td>Dr(a). {item.Infos?.medico_nome}</td>
|
<td>Dr(a). {item.Infos?.medico_nome}</td>
|
||||||
<td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
|
<td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
|
||||||
<td>
|
<td>
|
||||||
<button className="btn btn-sm btn-danger" onClick={() => handleCancelClick(item.agendamento.id)}>
|
<button
|
||||||
|
className="btn btn-sm btn-delete"
|
||||||
|
onClick={() => handleCancelClick(item.agendamento.id)}
|
||||||
|
>
|
||||||
<i className="bi bi-trash me-1"></i> Cancelar
|
<i className="bi bi-trash me-1"></i> Cancelar
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))) : (
|
))
|
||||||
|
) : (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan="3" className="text-center py-4">
|
<td colSpan="3" className="text-center py-4">
|
||||||
<div className="text-muted">Nenhuma solicitação na fila de espera.</div>
|
<div className="text-muted">
|
||||||
|
<i className="bi bi-search display-4"></i>
|
||||||
|
<p className="mt-2">Nenhuma solicitação na fila de espera.</p>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
{/* ===== PAGINAÇÃO ===== */}
|
||||||
|
{filaEsperaFiltrada.length > 0 && (
|
||||||
|
<div className="d-flex justify-content-between align-items-center mt-3">
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<span className="me-2 text-muted">Itens por página:</span>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm w-auto"
|
||||||
|
value={waitPerPage}
|
||||||
|
onChange={(e) => {
|
||||||
|
setWaitPerPage(Number(e.target.value));
|
||||||
|
setWaitPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value={5}>5</option>
|
||||||
|
<option value={10}>10</option>
|
||||||
|
<option value={25}>25</option>
|
||||||
|
<option value={50}>50</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<span className="me-3 text-muted">
|
||||||
|
Página {waitPage} de {waitTotalPages} •
|
||||||
|
Mostrando {waitIndiceInicial + 1}-{Math.min(waitIndiceFinal, filaEsperaFiltrada.length)} de {filaEsperaFiltrada.length} solicitações
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul className="pagination pagination-sm mb-0">
|
||||||
|
<li className={`page-item ${waitPage === 1 ? 'disabled' : ''}`}>
|
||||||
|
<button
|
||||||
|
className="page-link"
|
||||||
|
onClick={() => setWaitPage(p => Math.max(1, p - 1))}
|
||||||
|
>
|
||||||
|
<i className="bi bi-chevron-left"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{gerarNumerosWaitPages().map(pagina => (
|
||||||
|
<li
|
||||||
|
key={pagina}
|
||||||
|
className={`page-item ${pagina === waitPage ? 'active' : ''}`}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="page-link"
|
||||||
|
onClick={() => setWaitPage(pagina)}
|
||||||
|
>
|
||||||
|
{pagina}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<li className={`page-item ${waitPage === waitTotalPages ? 'disabled' : ''}`}>
|
||||||
|
<button
|
||||||
|
className="page-link"
|
||||||
|
onClick={() => setWaitPage(p => Math.min(waitTotalPages, p + 1))}
|
||||||
|
>
|
||||||
|
<i className="bi bi-chevron-right"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@ -328,41 +508,55 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
|
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* ===== MODAL DE CANCELAMENTO ===== */}
|
||||||
{isCancelModalOpen && (
|
{isCancelModalOpen && (
|
||||||
<div className="modal-overlay">
|
<div
|
||||||
<div className="modal-content" style={{ maxWidth: '400px' }}>
|
className="modal fade show delete-modal"
|
||||||
<div className="modal-header" style={{ backgroundColor: '#fee2e2', borderBottom: '1px solid #fca5a5', padding: '15px', borderRadius: '8px 8px 0 0' }}>
|
style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }}
|
||||||
<h4 style={{ margin: 0, color: '#dc2626' }}>Confirmação de Cancelamento</h4>
|
tabIndex="-1"
|
||||||
<button className="close-button" onClick={() => setIsCancelModalOpen(false)} style={{ background: 'none', border: 'none', fontSize: '1.5rem', cursor: 'pointer' }}>×</button>
|
onClick={(e) => e.target.classList.contains("modal") && setIsCancelModalOpen(false)}
|
||||||
|
>
|
||||||
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
||||||
|
<h5 className="modal-title">Confirmação de Cancelamento</h5>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-body" style={{ padding: '20px' }}>
|
|
||||||
<p>Qual o motivo do cancelamento?</p>
|
<div className="modal-body">
|
||||||
|
<p className="mb-3 fs-5">Deseja realmente cancelar esta consulta?</p>
|
||||||
|
<p className="text-muted small mb-2">Esta ação não pode ser desfeita.</p>
|
||||||
|
|
||||||
|
<label className="form-label fw-bold mt-3">Motivo do cancelamento (opcional):</label>
|
||||||
<textarea
|
<textarea
|
||||||
|
className="form-control"
|
||||||
value={cancellationReason}
|
value={cancellationReason}
|
||||||
onChange={(e) => setCancellationReason(e.target.value)}
|
onChange={(e) => setCancellationReason(e.target.value)}
|
||||||
placeholder="Ex: Precisei viajar, motivo pessoal, etc."
|
placeholder="Ex: Precisei viajar, motivo pessoal, etc."
|
||||||
rows="4"
|
rows="4"
|
||||||
style={{ width: '100%', padding: '10px', resize: 'none', border: '1px solid #ccc', borderRadius: '4px' }}
|
style={{ resize: 'none' }}
|
||||||
></textarea>
|
></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-footer" style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', padding: '15px', borderTop: '1px solid #eee' }}>
|
|
||||||
|
<div className="modal-footer">
|
||||||
<button
|
<button
|
||||||
className="btn btn-secondary"
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
onClick={() => setIsCancelModalOpen(false)}
|
onClick={() => setIsCancelModalOpen(false)}
|
||||||
style={{ backgroundColor: '#6c757d', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
|
|
||||||
>
|
>
|
||||||
Cancelar
|
Voltar
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
className="btn btn-danger"
|
className="btn btn-danger"
|
||||||
onClick={executeCancellation}
|
onClick={executeCancellation}
|
||||||
style={{ backgroundColor: '#dc3545', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
|
|
||||||
>
|
>
|
||||||
<Trash2 size={16} style={{ marginRight: '5px' }} /> Excluir
|
<i className="bi bi-trash me-1"></i> Cancelar Consulta
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -259,6 +259,18 @@
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Estilo para o item Início para ficar com borda semelhante aos blocos */
|
||||||
|
.inicio-item .sidebar-link {
|
||||||
|
border: 1px solid var(--toggle-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--toggle-bg);
|
||||||
|
padding: 10px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inicio-item .sidebar-link:hover {
|
||||||
|
background-color: var(--toggle-hover);
|
||||||
|
}
|
||||||
|
|
||||||
.logout-button {
|
.logout-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@ -525,3 +525,31 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Avatar Styles */
|
||||||
|
.profile-avatar-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-placeholder-loading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justifyContent: center;
|
||||||
|
fontSize: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-placeholder-initials {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #6c63ff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|||||||
@ -2,10 +2,11 @@
|
|||||||
import React, { useState, useRef, useEffect } from 'react';
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
import { createPortal } from 'react-dom';
|
import { createPortal } from 'react-dom';
|
||||||
import { useNavigate, useLocation } from 'react-router-dom';
|
import { useNavigate, useLocation } from 'react-router-dom';
|
||||||
|
import API_KEY from '../utils/apiKeys';
|
||||||
|
import { UserInfos } from '../utils/Functions-Endpoints/General';
|
||||||
import './Header.css';
|
import './Header.css';
|
||||||
|
|
||||||
const Header = () => {
|
const Header = () => {
|
||||||
// --- hooks (sempre na mesma ordem) ---
|
|
||||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||||
const [isSuporteCardOpen, setIsSuporteCardOpen] = useState(false);
|
const [isSuporteCardOpen, setIsSuporteCardOpen] = useState(false);
|
||||||
const [isChatOpen, setIsChatOpen] = useState(false);
|
const [isChatOpen, setIsChatOpen] = useState(false);
|
||||||
@ -13,40 +14,89 @@ const Header = () => {
|
|||||||
const [mensagens, setMensagens] = useState([]);
|
const [mensagens, setMensagens] = useState([]);
|
||||||
const [showLogoutModal, setShowLogoutModal] = useState(false);
|
const [showLogoutModal, setShowLogoutModal] = useState(false);
|
||||||
const [avatarUrl, setAvatarUrl] = useState(null);
|
const [avatarUrl, setAvatarUrl] = useState(null);
|
||||||
|
const [uploadingAvatar, setUploadingAvatar] = useState(false);
|
||||||
|
const [userName, setUserName] = useState('');
|
||||||
|
const [userId, setUserId] = useState(null);
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
const fileInputRef = useRef(null);
|
||||||
|
|
||||||
const chatInputRef = useRef(null);
|
const chatInputRef = useRef(null);
|
||||||
const mensagensContainerRef = useRef(null);
|
const mensagensContainerRef = useRef(null);
|
||||||
|
|
||||||
// foco quando abre chat
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isChatOpen && chatInputRef.current) {
|
if (isChatOpen && chatInputRef.current) {
|
||||||
chatInputRef.current.focus();
|
chatInputRef.current.focus();
|
||||||
}
|
}
|
||||||
}, [isChatOpen]);
|
}, [isChatOpen]);
|
||||||
|
|
||||||
// scroll automático quando nova mensagem
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (mensagensContainerRef.current) {
|
if (mensagensContainerRef.current) {
|
||||||
mensagensContainerRef.current.scrollTop = mensagensContainerRef.current.scrollHeight;
|
mensagensContainerRef.current.scrollTop = mensagensContainerRef.current.scrollHeight;
|
||||||
}
|
}
|
||||||
}, [mensagens]);
|
}, [mensagens]);
|
||||||
|
|
||||||
// carrega avatar se existir
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadAvatar = () => {
|
const loadUserAndAvatar = async () => {
|
||||||
const localAvatar = localStorage.getItem('user_avatar');
|
try {
|
||||||
if (localAvatar) setAvatarUrl(localAvatar);
|
const token = localStorage.getItem('access_token') || localStorage.getItem('token') || localStorage.getItem('authToken') || sessionStorage.getItem('token');
|
||||||
|
|
||||||
|
if (!token) return;
|
||||||
|
|
||||||
|
const userInfo = await UserInfos(`Bearer ${token}`);
|
||||||
|
|
||||||
|
const userIdFromInfo = userInfo?.id || userInfo?.user?.id || userInfo?.sub;
|
||||||
|
|
||||||
|
const userFullName =
|
||||||
|
userInfo?.full_name ||
|
||||||
|
userInfo?.user?.full_name ||
|
||||||
|
userInfo?.profile?.full_name ||
|
||||||
|
userInfo?.user?.user_metadata?.full_name ||
|
||||||
|
userInfo?.user?.email ||
|
||||||
|
userInfo?.email ||
|
||||||
|
'Usuário';
|
||||||
|
|
||||||
|
setUserId(userIdFromInfo);
|
||||||
|
setUserName(userFullName);
|
||||||
|
|
||||||
|
if (!userIdFromInfo) return;
|
||||||
|
|
||||||
|
const avatarPath = `${userIdFromInfo}/avatar.jpg`;
|
||||||
|
|
||||||
|
const myHeaders = new Headers();
|
||||||
|
myHeaders.append('apikey', API_KEY);
|
||||||
|
myHeaders.append('Authorization', `Bearer ${token}`);
|
||||||
|
|
||||||
|
const response = await fetch(
|
||||||
|
`https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/public/avatars/${avatarPath}`,
|
||||||
|
{ method: 'GET', headers: myHeaders, redirect: 'follow' }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const blob = await response.blob();
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
setAvatarUrl(url);
|
||||||
|
} else {
|
||||||
|
const authResponse = await fetch(
|
||||||
|
`https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/avatars/${avatarPath}`,
|
||||||
|
{ method: 'GET', headers: myHeaders, redirect: 'follow' }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (authResponse.ok) {
|
||||||
|
const blob = await authResponse.blob();
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
setAvatarUrl(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('Erro ao carregar usuário/avatar:', err);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
loadAvatar();
|
|
||||||
const onStorage = () => loadAvatar();
|
loadUserAndAvatar();
|
||||||
window.addEventListener('storage', onStorage);
|
|
||||||
return () => window.removeEventListener('storage', onStorage);
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// ESC fecha qualquer overlay/portal aberto (logout / suporte / chat)
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const onKey = (e) => {
|
const onKey = (e) => {
|
||||||
if (e.key === 'Escape') {
|
if (e.key === 'Escape') {
|
||||||
@ -59,7 +109,6 @@ const Header = () => {
|
|||||||
return () => window.removeEventListener('keydown', onKey);
|
return () => window.removeEventListener('keydown', onKey);
|
||||||
}, [showLogoutModal, isSuporteCardOpen, isChatOpen]);
|
}, [showLogoutModal, isSuporteCardOpen, isChatOpen]);
|
||||||
|
|
||||||
// --- handlers logout (mantive comportamento) ---
|
|
||||||
const handleLogoutClick = () => {
|
const handleLogoutClick = () => {
|
||||||
setShowLogoutModal(true);
|
setShowLogoutModal(true);
|
||||||
setIsDropdownOpen(false);
|
setIsDropdownOpen(false);
|
||||||
@ -99,7 +148,6 @@ const Header = () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
// ignora erro de rede / endpoint — prossegue para limpar local
|
|
||||||
console.warn('logout endpoint error (ignored):', err);
|
console.warn('logout endpoint error (ignored):', err);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -117,7 +165,6 @@ const Header = () => {
|
|||||||
|
|
||||||
const handleLogoutCancel = () => setShowLogoutModal(false);
|
const handleLogoutCancel = () => setShowLogoutModal(false);
|
||||||
|
|
||||||
// --- profile / suporte / chat handlers ---
|
|
||||||
const handleProfileClick = () => {
|
const handleProfileClick = () => {
|
||||||
setIsDropdownOpen(!isDropdownOpen);
|
setIsDropdownOpen(!isDropdownOpen);
|
||||||
if (isSuporteCardOpen) setIsSuporteCardOpen(false);
|
if (isSuporteCardOpen) setIsSuporteCardOpen(false);
|
||||||
@ -129,6 +176,75 @@ const Header = () => {
|
|||||||
setIsDropdownOpen(false);
|
setIsDropdownOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleAvatarClick = () => {
|
||||||
|
if (fileInputRef.current) {
|
||||||
|
fileInputRef.current.click();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAvatarUpload = async (event) => {
|
||||||
|
const file = event.target.files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
|
// Validar tipo de arquivo
|
||||||
|
if (!file.type.startsWith('image/')) {
|
||||||
|
alert('Por favor, selecione um arquivo de imagem válido.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validar tamanho (máximo 5MB)
|
||||||
|
if (file.size > 5 * 1024 * 1024) {
|
||||||
|
alert('A imagem deve ter no máximo 5MB.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setUploadingAvatar(true);
|
||||||
|
|
||||||
|
if (!userId) {
|
||||||
|
alert('Usuário não identificado. Faça login novamente.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const avatarPath = `${userId}/avatar.jpg`;
|
||||||
|
const token = localStorage.getItem('access_token') || localStorage.getItem('token') || localStorage.getItem('authToken') || sessionStorage.getItem('token');
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', file);
|
||||||
|
|
||||||
|
const myHeaders = new Headers();
|
||||||
|
myHeaders.append('apikey', API_KEY);
|
||||||
|
if (token) myHeaders.append('Authorization', `Bearer ${token}`);
|
||||||
|
|
||||||
|
const response = await fetch(
|
||||||
|
`https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/avatars/${avatarPath}`,
|
||||||
|
{
|
||||||
|
method: 'POST',
|
||||||
|
headers: myHeaders,
|
||||||
|
body: formData,
|
||||||
|
redirect: 'follow'
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
// Recarregar avatar
|
||||||
|
const url = URL.createObjectURL(file);
|
||||||
|
setAvatarUrl(url);
|
||||||
|
alert('Avatar atualizado com sucesso!');
|
||||||
|
} else {
|
||||||
|
const errorText = await response.text();
|
||||||
|
console.error('Erro ao fazer upload:', errorText);
|
||||||
|
alert('Erro ao fazer upload do avatar. Tente novamente.');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Erro no upload:', err);
|
||||||
|
alert('Erro ao fazer upload do avatar. Tente novamente.');
|
||||||
|
} finally {
|
||||||
|
setUploadingAvatar(false);
|
||||||
|
if (fileInputRef.current) fileInputRef.current.value = '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleSuporteClick = () => {
|
const handleSuporteClick = () => {
|
||||||
setIsSuporteCardOpen((s) => !s);
|
setIsSuporteCardOpen((s) => !s);
|
||||||
setIsDropdownOpen(false);
|
setIsDropdownOpen(false);
|
||||||
@ -191,7 +307,6 @@ const Header = () => {
|
|||||||
}, 900);
|
}, 900);
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- subcomponentes (UI) ---
|
|
||||||
const SuporteCardContent = ({ onOpenChat }) => (
|
const SuporteCardContent = ({ onOpenChat }) => (
|
||||||
<div className="suporte-card">
|
<div className="suporte-card">
|
||||||
<h2 className="suporte-titulo">Suporte</h2>
|
<h2 className="suporte-titulo">Suporte</h2>
|
||||||
@ -359,12 +474,10 @@ const Header = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- evita render na rota de login (mantendo hooks invocados) ---
|
|
||||||
if (location.pathname === '/login') {
|
if (location.pathname === '/login') {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- JSX principal (header visual) ---
|
|
||||||
return (
|
return (
|
||||||
<div className="header-container" style={{ pointerEvents: 'auto' }}>
|
<div className="header-container" style={{ pointerEvents: 'auto' }}>
|
||||||
<div className="right-corner-elements">
|
<div className="right-corner-elements">
|
||||||
@ -379,12 +492,54 @@ const Header = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="profile-section" style={{ pointerEvents: 'auto' }}>
|
<div className="profile-section" style={{ pointerEvents: 'auto' }}>
|
||||||
<div className="profile-picture-container" onClick={handleProfileClick} role="button" tabIndex={0}>
|
<input
|
||||||
|
ref={fileInputRef}
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={handleAvatarUpload}
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="profile-picture-container"
|
||||||
|
onClick={handleProfileClick}
|
||||||
|
onDoubleClick={handleAvatarClick}
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
title="Clique para abrir menu"
|
||||||
|
>
|
||||||
|
{uploadingAvatar ? (
|
||||||
|
<div className="profile-placeholder profile-placeholder-loading">
|
||||||
|
<span>⏳</span>
|
||||||
|
</div>
|
||||||
|
) : avatarUrl ? (
|
||||||
|
<img
|
||||||
|
src={avatarUrl}
|
||||||
|
alt="Avatar"
|
||||||
|
className="profile-avatar-image"
|
||||||
|
/>
|
||||||
|
) : userName ? (
|
||||||
|
<div className="profile-placeholder profile-placeholder-initials">
|
||||||
|
{(() => {
|
||||||
|
const words = userName.trim().split(/\s+/).filter(w => w.length > 0);
|
||||||
|
if (words.length >= 2) {
|
||||||
|
return words.slice(0, 2).map(w => w[0]).join('');
|
||||||
|
} else if (words.length === 1 && words[0].length >= 2) {
|
||||||
|
return words[0].substring(0, 2);
|
||||||
|
} else {
|
||||||
|
return words[0]?.[0] || 'U';
|
||||||
|
}
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
<div className="profile-placeholder"></div>
|
<div className="profile-placeholder"></div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isDropdownOpen && (
|
{isDropdownOpen && (
|
||||||
<div className="profile-dropdown" onClick={(e) => e.stopPropagation()}>
|
<div className="profile-dropdown" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<button type="button" onClick={handleAvatarClick} className="dropdown-button">
|
||||||
|
<i className="bi bi-camera me-2"></i>Alterar Foto
|
||||||
|
</button>
|
||||||
<button type="button" onClick={handleViewProfile} className="dropdown-button">Ver Perfil</button>
|
<button type="button" onClick={handleViewProfile} className="dropdown-button">Ver Perfil</button>
|
||||||
<button type="button" onClick={handleLogoutClick} className="dropdown-button logout-button">Sair (Logout)</button>
|
<button type="button" onClick={handleLogoutClick} className="dropdown-button logout-button">Sair (Logout)</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -243,6 +243,14 @@ function Sidebar({ menuItems }) {
|
|||||||
<div className="sidebar-menu">
|
<div className="sidebar-menu">
|
||||||
<ul className="menu">
|
<ul className="menu">
|
||||||
|
|
||||||
|
{/* Botão Início fixo */}
|
||||||
|
<li className="sidebar-item inicio-item" style={{ marginBottom: "15px" }}>
|
||||||
|
<Link to={roleUser.includes("admin") ? "/secretaria/" : roleUser.includes("secretaria") ? "/secretaria/" : roleUser.includes("medico") ? "/medico/" : roleUser.includes("paciente") ? "/paciente/" : "/"} className="sidebar-link">
|
||||||
|
<i className="bi bi-house"></i>
|
||||||
|
<span>Início</span>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
|
||||||
{roleUser.includes("admin") &&
|
{roleUser.includes("admin") &&
|
||||||
<ToggleSidebar perfil={"administrador"} items={admItems} defaultOpen={pathname.includes("admin") } />
|
<ToggleSidebar perfil={"administrador"} items={admItems} defaultOpen={pathname.includes("admin") } />
|
||||||
}
|
}
|
||||||
|
|||||||
@ -338,41 +338,7 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
|
|
||||||
{!PageNovaConsulta ? (
|
{!PageNovaConsulta ? (
|
||||||
<div className='atendimento-eprocura'>
|
<div className='atendimento-eprocura'>
|
||||||
<div className='unidade-selecionarprofissional'>
|
|
||||||
<div className='busca-atendimento-container'>
|
|
||||||
<div className='input-e-dropdown-wrapper'>
|
|
||||||
<div className='busca-atendimento'>
|
|
||||||
<div className='mb-5'>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Filtrar atendimento do medico..."
|
|
||||||
value={searchTermDoctor}
|
|
||||||
onChange={(e) => handleSearchMedicos(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{searchTermDoctor && FiltredTodosMedicos.length > 0 && (
|
|
||||||
<div className='dropdown-medicos'>
|
|
||||||
{FiltredTodosMedicos.map((medico) => (
|
|
||||||
<div
|
|
||||||
key={medico.idMedico}
|
|
||||||
className='dropdown-item'
|
|
||||||
onClick={() => {
|
|
||||||
setSearchTermDoctor(medico.nomeMedico);
|
|
||||||
setFiltredTodosMedicos([]);
|
|
||||||
setMedicoFiltrado(medico);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p>{medico.nomeMedico}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ABA + BOTÕES NA MESMA BARRA */}
|
|
||||||
<div className='container-btns-agenda-fila_esepera'>
|
<div className='container-btns-agenda-fila_esepera'>
|
||||||
<div className="tabs-agenda-fila">
|
<div className="tabs-agenda-fila">
|
||||||
<button
|
<button
|
||||||
@ -391,7 +357,7 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
|
|
||||||
<div className="btns-gerenciamento-e-consulta">
|
<div className="btns-gerenciamento-e-consulta">
|
||||||
<button
|
<button
|
||||||
className="btn btn-primary"
|
className="manage-button btn"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setPageConsulta(true);
|
setPageConsulta(true);
|
||||||
setEditingAppointmentId(null);
|
setEditingAppointmentId(null);
|
||||||
@ -565,12 +531,11 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
<div className="page-content table-paciente-container">
|
<div className="page-content table-paciente-container">
|
||||||
<section className="row">
|
<section className="row">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<div className="card table-paciente-card">
|
<div className="table-paciente-card">
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<h4 className="card-title mb-0">Fila de Espera</h4>
|
<h4 className="card-title mb-0">Fila de Espera</h4>
|
||||||
</div>
|
</div>
|
||||||
<div className="card-body">
|
<div className="table-paciente-filters p-3 mb-3">
|
||||||
<div className="card p-3 mb-3 table-paciente-filters">
|
|
||||||
<h5 className="mb-3">
|
<h5 className="mb-3">
|
||||||
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
||||||
</h5>
|
</h5>
|
||||||
@ -735,7 +700,6 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -1,17 +1,17 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import API_KEY from "../components/utils/apiKeys";
|
import API_KEY from "../components/utils/apiKeys";
|
||||||
import { useAuth } from "../components/utils/AuthProvider";
|
import { useAuth } from "../components/utils/AuthProvider";
|
||||||
import { Link } from "react-router-dom";
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
import "./style/TableDoctor.css";
|
import "./style/TableDoctor.css";
|
||||||
|
|
||||||
function TableDoctor({ setDictInfo }) {
|
function TableDoctor({ setDictInfo }) {
|
||||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const [medicos, setMedicos] = useState([]);
|
const [medicos, setMedicos] = useState([]);
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
const [filtroEspecialidade, setFiltroEspecialidade] = useState("Todos");
|
const [filtroEspecialidade, setFiltroEspecialidade] = useState("Todos");
|
||||||
const [filtroAniversariante, setFiltroAniversariante] = useState(false);
|
const [filtroAniversariante, setFiltroAniversariante] = useState(false);
|
||||||
|
|
||||||
const [showFiltrosAvancados, setShowFiltrosAvancados] = useState(false);
|
const [showFiltrosAvancados, setShowFiltrosAvancados] = useState(false);
|
||||||
const [filtroCidade, setFiltroCidade] = useState("");
|
const [filtroCidade, setFiltroCidade] = useState("");
|
||||||
const [filtroEstado, setFiltroEstado] = useState("");
|
const [filtroEstado, setFiltroEstado] = useState("");
|
||||||
@ -20,6 +20,8 @@ function TableDoctor({setDictInfo}) {
|
|||||||
const [dataInicial, setDataInicial] = useState("");
|
const [dataInicial, setDataInicial] = useState("");
|
||||||
const [dataFinal, setDataFinal] = useState("");
|
const [dataFinal, setDataFinal] = useState("");
|
||||||
|
|
||||||
|
const [sortKey, setSortKey] = useState(null);
|
||||||
|
const [sortDir, setSortDir] = useState('asc');
|
||||||
|
|
||||||
const [paginaAtual, setPaginaAtual] = useState(1);
|
const [paginaAtual, setPaginaAtual] = useState(1);
|
||||||
const [itensPorPagina, setItensPorPagina] = useState(10);
|
const [itensPorPagina, setItensPorPagina] = useState(10);
|
||||||
@ -27,52 +29,11 @@ function TableDoctor({setDictInfo}) {
|
|||||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
const [selectedDoctorId, setSelectedDoctorId] = useState(null);
|
const [selectedDoctorId, setSelectedDoctorId] = useState(null);
|
||||||
|
|
||||||
const [sortKey, setSortKey] = useState(null);
|
// ===== FUNÇÕES AUXILIARES =====
|
||||||
const [sortDir, setSortDir] = useState('asc');
|
|
||||||
|
|
||||||
const limparFiltros = () => {
|
|
||||||
setSearch("");
|
|
||||||
setFiltroEspecialidade("Todos");
|
|
||||||
setFiltroAniversariante(false);
|
|
||||||
setShowFiltrosAvancados(false);
|
|
||||||
setFiltroCidade("");
|
|
||||||
setFiltroEstado("");
|
|
||||||
setIdadeMinima("");
|
|
||||||
setIdadeMaxima("");
|
|
||||||
setDataInicial("");
|
|
||||||
setDataFinal("");
|
|
||||||
setPaginaAtual(1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteDoctor = async (id) => {
|
|
||||||
const authHeader = getAuthorizationHeader()
|
|
||||||
console.log(id, 'teu id')
|
|
||||||
|
|
||||||
var myHeaders = new Headers();
|
|
||||||
myHeaders.append('apikey', API_KEY);
|
|
||||||
myHeaders.append("Authorization", authHeader)
|
|
||||||
|
|
||||||
var requestOptions = { method: "DELETE", redirect: "follow", headers: myHeaders };
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await fetch(
|
|
||||||
`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${id}`,
|
|
||||||
requestOptions
|
|
||||||
);
|
|
||||||
setMedicos((prev) => prev.filter((p) => p.id !== id));
|
|
||||||
console.log(result)
|
|
||||||
} catch (error) {
|
|
||||||
console.log("Deu problema", error);
|
|
||||||
} finally {
|
|
||||||
setShowDeleteModal(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const ehAniversariante = (dataNascimento) => {
|
const ehAniversariante = (dataNascimento) => {
|
||||||
if (!dataNascimento) return false;
|
if (!dataNascimento) return false;
|
||||||
const hoje = new Date();
|
const hoje = new Date();
|
||||||
const nascimento = new Date(dataNascimento);
|
const nascimento = new Date(dataNascimento);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
hoje.getDate() === nascimento.getDate() &&
|
hoje.getDate() === nascimento.getDate() &&
|
||||||
hoje.getMonth() === nascimento.getMonth()
|
hoje.getMonth() === nascimento.getMonth()
|
||||||
@ -85,17 +46,44 @@ function TableDoctor({setDictInfo}) {
|
|||||||
const nascimento = new Date(dataNascimento);
|
const nascimento = new Date(dataNascimento);
|
||||||
let idade = hoje.getFullYear() - nascimento.getFullYear();
|
let idade = hoje.getFullYear() - nascimento.getFullYear();
|
||||||
const mes = hoje.getMonth() - nascimento.getMonth();
|
const mes = hoje.getMonth() - nascimento.getMonth();
|
||||||
|
|
||||||
if (mes < 0 || (mes === 0 && hoje.getDate() < nascimento.getDate())) {
|
if (mes < 0 || (mes === 0 && hoje.getDate() < nascimento.getDate())) {
|
||||||
idade--;
|
idade--;
|
||||||
}
|
}
|
||||||
return idade;
|
return idade;
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
// ===== FUNÇÕES DE API =====
|
||||||
const authHeader = getAuthorizationHeader()
|
const deleteDoctor = async (id) => {
|
||||||
console.log(authHeader, 'aqui autorização')
|
const authHeader = getAuthorizationHeader();
|
||||||
|
var myHeaders = new Headers();
|
||||||
|
myHeaders.append('apikey', API_KEY);
|
||||||
|
myHeaders.append("Authorization", authHeader);
|
||||||
|
var requestOptions = {
|
||||||
|
method: "DELETE",
|
||||||
|
redirect: "follow",
|
||||||
|
headers: myHeaders
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${id}`,
|
||||||
|
requestOptions
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Erro ${response.status}: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
setMedicos((prev) => prev.filter((p) => p.id !== id));
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erro ao excluir médico:", error);
|
||||||
|
} finally {
|
||||||
|
setShowDeleteModal(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const authHeader = getAuthorizationHeader();
|
||||||
var myHeaders = new Headers();
|
var myHeaders = new Headers();
|
||||||
myHeaders.append("apikey", API_KEY);
|
myHeaders.append("apikey", API_KEY);
|
||||||
myHeaders.append("Authorization", `${authHeader}`);
|
myHeaders.append("Authorization", `${authHeader}`);
|
||||||
@ -111,6 +99,20 @@ function TableDoctor({setDictInfo}) {
|
|||||||
.catch(error => console.log('error', error));
|
.catch(error => console.log('error', error));
|
||||||
}, [isAuthenticated, getAuthorizationHeader]);
|
}, [isAuthenticated, getAuthorizationHeader]);
|
||||||
|
|
||||||
|
// ===== FILTRAGEM =====
|
||||||
|
const limparFiltros = () => {
|
||||||
|
setSearch("");
|
||||||
|
setFiltroEspecialidade("Todos");
|
||||||
|
setFiltroAniversariante(false);
|
||||||
|
setFiltroCidade("");
|
||||||
|
setFiltroEstado("");
|
||||||
|
setIdadeMinima("");
|
||||||
|
setIdadeMaxima("");
|
||||||
|
setDataInicial("");
|
||||||
|
setDataFinal("");
|
||||||
|
setPaginaAtual(1);
|
||||||
|
};
|
||||||
|
|
||||||
const medicosFiltrados = Array.isArray(medicos) ? medicos.filter((medico) => {
|
const medicosFiltrados = Array.isArray(medicos) ? medicos.filter((medico) => {
|
||||||
const buscaNome = medico.full_name?.toLowerCase().includes(search.toLowerCase());
|
const buscaNome = medico.full_name?.toLowerCase().includes(search.toLowerCase());
|
||||||
const buscaCPF = medico.cpf?.toLowerCase().includes(search.toLowerCase());
|
const buscaCPF = medico.cpf?.toLowerCase().includes(search.toLowerCase());
|
||||||
@ -118,35 +120,24 @@ function TableDoctor({setDictInfo}) {
|
|||||||
const passaBusca = search === "" || buscaNome || buscaCPF || buscaEmail;
|
const passaBusca = search === "" || buscaNome || buscaCPF || buscaEmail;
|
||||||
|
|
||||||
const passaEspecialidade = filtroEspecialidade === "Todos" || medico.specialty === filtroEspecialidade;
|
const passaEspecialidade = filtroEspecialidade === "Todos" || medico.specialty === filtroEspecialidade;
|
||||||
|
const passaAniversario = filtroAniversariante ? ehAniversariante(medico.birth_date) : true;
|
||||||
const passaAniversario = filtroAniversariante
|
const passaCidade = filtroCidade ? medico.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;
|
||||||
? ehAniversariante(medico.birth_date)
|
const passaEstado = filtroEstado ? medico.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;
|
||||||
: true;
|
|
||||||
|
|
||||||
const passaCidade = filtroCidade ?
|
|
||||||
medico.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;
|
|
||||||
|
|
||||||
const passaEstado = filtroEstado ?
|
|
||||||
medico.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;
|
|
||||||
|
|
||||||
const idade = calcularIdade(medico.birth_date);
|
const idade = calcularIdade(medico.birth_date);
|
||||||
const passaIdadeMinima = idadeMinima ? idade >= parseInt(idadeMinima) : true;
|
const passaIdadeMinima = idadeMinima ? idade >= parseInt(idadeMinima) : true;
|
||||||
const passaIdadeMaxima = idadeMaxima ? idade <= parseInt(idadeMaxima) : true;
|
const passaIdadeMaxima = idadeMaxima ? idade <= parseInt(idadeMaxima) : true;
|
||||||
|
|
||||||
const passaDataInicial = dataInicial ?
|
const passaDataInicial = dataInicial ? medico.created_at && new Date(medico.created_at) >= new Date(dataInicial) : true;
|
||||||
medico.created_at && new Date(medico.created_at) >= new Date(dataInicial) : true;
|
const passaDataFinal = dataFinal ? medico.created_at && new Date(medico.created_at) <= new Date(dataFinal) : true;
|
||||||
|
|
||||||
const passaDataFinal = dataFinal ?
|
return passaBusca && passaEspecialidade && passaAniversario &&
|
||||||
medico.created_at && new Date(medico.created_at) <= new Date(dataFinal) : true;
|
|
||||||
|
|
||||||
const resultado = passaBusca && passaEspecialidade && passaAniversario &&
|
|
||||||
passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
|
passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
|
||||||
passaDataInicial && passaDataFinal;
|
passaDataInicial && passaDataFinal;
|
||||||
|
|
||||||
return resultado;
|
|
||||||
}) : [];
|
}) : [];
|
||||||
|
|
||||||
const applySorting = (arr) => {
|
// ===== ORDENAÇÃO =====
|
||||||
|
const aplicarOrdenacao = (arr) => {
|
||||||
if (!Array.isArray(arr) || !sortKey) return arr;
|
if (!Array.isArray(arr) || !sortKey) return arr;
|
||||||
const copy = [...arr];
|
const copy = [...arr];
|
||||||
if (sortKey === 'nome') {
|
if (sortKey === 'nome') {
|
||||||
@ -158,44 +149,25 @@ function TableDoctor({setDictInfo}) {
|
|||||||
return copy;
|
return copy;
|
||||||
};
|
};
|
||||||
|
|
||||||
const medicosOrdenados = applySorting(medicosFiltrados);
|
const medicosOrdenados = aplicarOrdenacao(medicosFiltrados);
|
||||||
|
|
||||||
|
// ===== PAGINAÇÃO =====
|
||||||
const totalPaginas = Math.ceil(medicosFiltrados.length / itensPorPagina);
|
const totalPaginas = Math.ceil(medicosFiltrados.length / itensPorPagina);
|
||||||
const indiceInicial = (paginaAtual - 1) * itensPorPagina;
|
const indiceInicial = (paginaAtual - 1) * itensPorPagina;
|
||||||
const indiceFinal = indiceInicial + itensPorPagina;
|
const indiceFinal = indiceInicial + itensPorPagina;
|
||||||
const medicosPaginados = medicosOrdenados.slice(indiceInicial, indiceFinal);
|
const medicosPaginados = medicosOrdenados.slice(indiceInicial, indiceFinal);
|
||||||
|
|
||||||
|
const irParaPagina = (pagina) => setPaginaAtual(pagina);
|
||||||
const irParaPagina = (pagina) => {
|
const avancarPagina = () => paginaAtual < totalPaginas && setPaginaAtual(p => p + 1);
|
||||||
setPaginaAtual(pagina);
|
const voltarPagina = () => paginaAtual > 1 && setPaginaAtual(p => p - 1);
|
||||||
};
|
|
||||||
|
|
||||||
const avancarPagina = () => {
|
|
||||||
if (paginaAtual < totalPaginas) {
|
|
||||||
setPaginaAtual(paginaAtual + 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const voltarPagina = () => {
|
|
||||||
if (paginaAtual > 1) {
|
|
||||||
setPaginaAtual(paginaAtual - 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const gerarNumerosPaginas = () => {
|
const gerarNumerosPaginas = () => {
|
||||||
const paginas = [];
|
const paginas = [];
|
||||||
const paginasParaMostrar = 5;
|
const paginasParaMostrar = 5;
|
||||||
|
|
||||||
let inicio = Math.max(1, paginaAtual - Math.floor(paginasParaMostrar / 2));
|
let inicio = Math.max(1, paginaAtual - Math.floor(paginasParaMostrar / 2));
|
||||||
let fim = Math.min(totalPaginas, inicio + paginasParaMostrar - 1);
|
let fim = Math.min(totalPaginas, inicio + paginasParaMostrar - 1);
|
||||||
|
|
||||||
inicio = Math.max(1, fim - paginasParaMostrar + 1);
|
inicio = Math.max(1, fim - paginasParaMostrar + 1);
|
||||||
|
for (let i = inicio; i <= fim; i++) paginas.push(i);
|
||||||
for (let i = inicio; i <= fim; i++) {
|
|
||||||
paginas.push(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
return paginas;
|
return paginas;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -208,11 +180,10 @@ function TableDoctor({setDictInfo}) {
|
|||||||
<div className="page-heading">
|
<div className="page-heading">
|
||||||
<h3>Lista de Médicos</h3>
|
<h3>Lista de Médicos</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="page-content table-doctor-container">
|
<div className="page-content table-doctor-container">
|
||||||
<section className="row">
|
<div className="table-doctor-card">
|
||||||
<div className="col-12">
|
<div className="card-header d-flex justify-content-between align-items-center">
|
||||||
<div className="card table-doctor-card">
|
|
||||||
<div className="card-header">
|
|
||||||
<h4 className="card-title mb-0">Médicos Cadastrados</h4>
|
<h4 className="card-title mb-0">Médicos Cadastrados</h4>
|
||||||
<Link to={'cadastro'}>
|
<Link to={'cadastro'}>
|
||||||
<button className="btn btn-primary">
|
<button className="btn btn-primary">
|
||||||
@ -222,12 +193,13 @@ function TableDoctor({setDictInfo}) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<div className="card p-3 mb-3 table-doctor-filters">
|
{/* ===== FILTROS PADRONIZADOS ===== */}
|
||||||
|
<div className="table-doctor-filters">
|
||||||
<h5 className="mb-3">
|
<h5 className="mb-3">
|
||||||
<i className="bi bi-funnel-fill me-2 text-primary"></i>{" "}
|
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
||||||
Filtros
|
|
||||||
</h5>
|
</h5>
|
||||||
|
|
||||||
|
{/* Busca */}
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@ -236,23 +208,25 @@ function TableDoctor({setDictInfo}) {
|
|||||||
value={search}
|
value={search}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
/>
|
/>
|
||||||
<small className="text-muted">
|
|
||||||
Digite o nome completo, CPF ou email
|
|
||||||
</small>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="filtros-basicos">
|
{/* Linha de Filtros Básicos - MESMO PADRÃO DA TABLE PACIENTE */}
|
||||||
|
<div className="d-flex flex-wrap align-items-center gap-3 mb-3">
|
||||||
|
{/* Especialidade */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Especialidade:</label>
|
||||||
<select
|
<select
|
||||||
className="form-select filter-especialidade"
|
className="form-select form-select-sm compact-select"
|
||||||
value={filtroEspecialidade}
|
value={filtroEspecialidade}
|
||||||
onChange={(e) => setFiltroEspecialidade(e.target.value)}
|
onChange={(e) => setFiltroEspecialidade(e.target.value)}
|
||||||
|
style={{ minWidth: "180px" }}
|
||||||
>
|
>
|
||||||
<option value="Todos">Todas as Especialidades</option>
|
<option value="Todos">Todas as Especialidades</option>
|
||||||
<option value="Clínica Geral">Clínica médica (clínico geral)</option>
|
<option value="Clínica Geral">Clínica Geral</option>
|
||||||
<option value="Pediatria">Pediatria</option>
|
<option value="Pediatria">Pediatria</option>
|
||||||
<option value="Ginecologia">Ginecologia e obstetrícia</option>
|
<option value="Ginecologia">Ginecologia</option>
|
||||||
<option value="Cardiologia">Cardiologia</option>
|
<option value="Cardiologia">Cardiologia</option>
|
||||||
<option value="Ortopedia">Ortopedia e traumatologia</option>
|
<option value="Ortopedia">Ortopedia</option>
|
||||||
<option value="Oftalmologia">Oftalmologia</option>
|
<option value="Oftalmologia">Oftalmologia</option>
|
||||||
<option value="Otorrinolaringologia">Otorrinolaringologia</option>
|
<option value="Otorrinolaringologia">Otorrinolaringologia</option>
|
||||||
<option value="Dermatologia">Dermatologia</option>
|
<option value="Dermatologia">Dermatologia</option>
|
||||||
@ -262,29 +236,31 @@ function TableDoctor({setDictInfo}) {
|
|||||||
<option value="Gastroenterologia">Gastroenterologia</option>
|
<option value="Gastroenterologia">Gastroenterologia</option>
|
||||||
<option value="Urologia">Urologia</option>
|
<option value="Urologia">Urologia</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<div className="filter-buttons-container">
|
|
||||||
<button
|
|
||||||
className={`btn filter-btn ${filtroAniversariante
|
|
||||||
? "btn-primary"
|
|
||||||
: "btn-outline-primary"
|
|
||||||
}`}
|
|
||||||
onClick={() => setFiltroAniversariante(!filtroAniversariante)}
|
|
||||||
>
|
|
||||||
<i className="bi bi-calendar me-1"></i> Aniversariantes
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Aniversariantes */}
|
||||||
<div className="vr mx-2 d-none d-md-block" />
|
|
||||||
<div className="d-flex align-items-center gap-2">
|
<div className="d-flex align-items-center gap-2">
|
||||||
<span className="text-muted small">Ordenar por:</span>
|
<label className="form-label mb-0 text-muted small">Aniversário:</label>
|
||||||
{(() => {
|
|
||||||
const sortValue = sortKey ? `${sortKey}-${sortDir}` : '';
|
|
||||||
return (
|
|
||||||
<select
|
<select
|
||||||
className="form-select compact-select sort-select w-auto"
|
className="form-select form-select-sm compact-select"
|
||||||
value={sortValue}
|
value={filtroAniversariante ? "hoje" : "todos"}
|
||||||
|
onChange={(e) => setFiltroAniversariante(e.target.value === "hoje")}
|
||||||
|
style={{ minWidth: "140px" }}
|
||||||
|
>
|
||||||
|
<option value="todos">Todos</option>
|
||||||
|
<option value="hoje">Aniversariantes</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Separador */}
|
||||||
|
<div className="vr d-none d-md-block" style={{ height: "30px" }} />
|
||||||
|
|
||||||
|
{/* Ordenação */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Ordenar por:</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm compact-select sort-select"
|
||||||
|
value={sortKey ? `${sortKey}-${sortDir}` : ''}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const v = e.target.value;
|
const v = e.target.value;
|
||||||
if (!v) { setSortKey(null); setSortDir('asc'); return; }
|
if (!v) { setSortKey(null); setSortDir('asc'); return; }
|
||||||
@ -292,6 +268,7 @@ function TableDoctor({setDictInfo}) {
|
|||||||
setSortKey(k);
|
setSortKey(k);
|
||||||
setSortDir(d);
|
setSortDir(d);
|
||||||
}}
|
}}
|
||||||
|
style={{ minWidth: "180px" }}
|
||||||
>
|
>
|
||||||
<option value="">Sem ordenação</option>
|
<option value="">Sem ordenação</option>
|
||||||
<option value="nome-asc">Nome (A-Z)</option>
|
<option value="nome-asc">Nome (A-Z)</option>
|
||||||
@ -299,38 +276,38 @@ function TableDoctor({setDictInfo}) {
|
|||||||
<option value="idade-asc">Idade (crescente)</option>
|
<option value="idade-asc">Idade (crescente)</option>
|
||||||
<option value="idade-desc">Idade (decrescente)</option>
|
<option value="idade-desc">Idade (decrescente)</option>
|
||||||
</select>
|
</select>
|
||||||
);
|
|
||||||
})()}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="d-flex justify-content-between align-items-center mt-3">
|
{/* Linha de Ações */}
|
||||||
|
<div className="d-flex justify-content-between align-items-center">
|
||||||
<button
|
<button
|
||||||
className="btn btn-link p-0 text-decoration-none"
|
className="btn btn-link p-0 text-decoration-none d-flex align-items-center"
|
||||||
onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
|
onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
|
||||||
|
style={{ fontSize: "0.9rem" }}
|
||||||
>
|
>
|
||||||
<i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
|
<i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
|
||||||
Filtros Avançados
|
Filtros Avançados
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
className="btn btn-outline-secondary btn-sm"
|
className="btn btn-outline-secondary btn-sm d-flex align-items-center"
|
||||||
onClick={limparFiltros}
|
onClick={limparFiltros}
|
||||||
>
|
>
|
||||||
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Filtros Avançados */}
|
||||||
{showFiltrosAvancados && (
|
{showFiltrosAvancados && (
|
||||||
<div className="mt-3 p-3 border rounded advanced-filters">
|
<div className="mt-3 p-3 border rounded advanced-filters">
|
||||||
<h6 className="mb-3">Filtros Avançados</h6>
|
<h6 className="mb-3">Filtros Avançados</h6>
|
||||||
|
|
||||||
<div className="row g-3">
|
<div className="row g-3">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<label className="form-label fw-bold">Cidade</label>
|
<label className="form-label fw-bold">Cidade</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
placeholder="Digite a cidade..."
|
placeholder="Digite a cidade..."
|
||||||
value={filtroCidade}
|
value={filtroCidade}
|
||||||
onChange={(e) => setFiltroCidade(e.target.value)}
|
onChange={(e) => setFiltroCidade(e.target.value)}
|
||||||
@ -340,18 +317,17 @@ function TableDoctor({setDictInfo}) {
|
|||||||
<label className="form-label fw-bold">Estado</label>
|
<label className="form-label fw-bold">Estado</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
placeholder="Ex: Minas Gerais"
|
placeholder="Ex: Minas Gerais"
|
||||||
value={filtroEstado}
|
value={filtroEstado}
|
||||||
onChange={(e) => setFiltroEstado(e.target.value)}
|
onChange={(e) => setFiltroEstado(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<label className="form-label fw-bold">Idade mínima</label>
|
<label className="form-label fw-bold">Idade mínima</label>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
placeholder="Ex: 25"
|
placeholder="Ex: 25"
|
||||||
value={idadeMinima}
|
value={idadeMinima}
|
||||||
onChange={(e) => setIdadeMinima(e.target.value)}
|
onChange={(e) => setIdadeMinima(e.target.value)}
|
||||||
@ -363,7 +339,7 @@ function TableDoctor({setDictInfo}) {
|
|||||||
<label className="form-label fw-bold">Idade máxima</label>
|
<label className="form-label fw-bold">Idade máxima</label>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
placeholder="Ex: 70"
|
placeholder="Ex: 70"
|
||||||
value={idadeMaxima}
|
value={idadeMaxima}
|
||||||
onChange={(e) => setIdadeMaxima(e.target.value)}
|
onChange={(e) => setIdadeMaxima(e.target.value)}
|
||||||
@ -371,12 +347,11 @@ function TableDoctor({setDictInfo}) {
|
|||||||
max="150"
|
max="150"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<label className="form-label fw-bold">Data inicial</label>
|
<label className="form-label fw-bold">Data inicial</label>
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
value={dataInicial}
|
value={dataInicial}
|
||||||
onChange={(e) => setDataInicial(e.target.value)}
|
onChange={(e) => setDataInicial(e.target.value)}
|
||||||
/>
|
/>
|
||||||
@ -385,7 +360,7 @@ function TableDoctor({setDictInfo}) {
|
|||||||
<label className="form-label fw-bold">Data final</label>
|
<label className="form-label fw-bold">Data final</label>
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
value={dataFinal}
|
value={dataFinal}
|
||||||
onChange={(e) => setDataFinal(e.target.value)}
|
onChange={(e) => setDataFinal(e.target.value)}
|
||||||
/>
|
/>
|
||||||
@ -394,6 +369,7 @@ function TableDoctor({setDictInfo}) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Contador */}
|
||||||
<div className="mt-3">
|
<div className="mt-3">
|
||||||
<div className="contador-medicos">
|
<div className="contador-medicos">
|
||||||
{medicosFiltrados.length} DE {medicos.length} MÉDICOS ENCONTRADOS
|
{medicosFiltrados.length} DE {medicos.length} MÉDICOS ENCONTRADOS
|
||||||
@ -401,7 +377,8 @@ function TableDoctor({setDictInfo}) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="table-responsive">
|
{/* ===== TABELA SIMPLIFICADA ===== */}
|
||||||
|
<div className="table-responsive mt-4">
|
||||||
<table className="table table-striped table-hover table-doctor-table">
|
<table className="table table-striped table-hover table-doctor-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -417,14 +394,16 @@ function TableDoctor({setDictInfo}) {
|
|||||||
medicosPaginados.map((medico) => (
|
medicosPaginados.map((medico) => (
|
||||||
<tr key={medico.id}>
|
<tr key={medico.id}>
|
||||||
<td>
|
<td>
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center patient-name-container">
|
||||||
{medico.full_name}
|
{medico.full_name}
|
||||||
|
<div className="d-flex patient-badges ms-2">
|
||||||
{ehAniversariante(medico.birth_date) && (
|
{ehAniversariante(medico.birth_date) && (
|
||||||
<span className="badge anniversary-badge ms-2" title="Aniversariante do dia">
|
<span className="badge anniversary-badge ms-1" title="Aniversariante do dia">
|
||||||
<i className="bi bi-gift"></i>
|
<i className="bi bi-gift me-1"></i>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>{medico.cpf}</td>
|
<td>{medico.cpf}</td>
|
||||||
<td>
|
<td>
|
||||||
@ -435,18 +414,24 @@ function TableDoctor({setDictInfo}) {
|
|||||||
<td>{medico.email || 'Não informado'}</td>
|
<td>{medico.email || 'Não informado'}</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="d-flex gap-2">
|
<div className="d-flex gap-2">
|
||||||
<Link to={`details/${medico.id}`}>
|
<button
|
||||||
<button className="btn btn-sm btn-view" onClick={() => setDictInfo({...medico})}>
|
className="btn btn-sm btn-view"
|
||||||
<i className="bi bi-eye me-1"></i> Ver Detalhes
|
onClick={() => {
|
||||||
|
setDictInfo(medico);
|
||||||
|
navigate('details');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className="bi bi-eye me-1"></i> Ver
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
<button
|
||||||
|
className="btn btn-sm btn-edit"
|
||||||
<Link to={`edit/${medico.id}`}>
|
onClick={() => {
|
||||||
<button className="btn btn-sm btn-edit" onClick={() => setDictInfo({...medico})}>
|
setDictInfo(medico);
|
||||||
|
navigate('edit');
|
||||||
|
}}
|
||||||
|
>
|
||||||
<i className="bi bi-pencil me-1"></i> Editar
|
<i className="bi bi-pencil me-1"></i> Editar
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-delete"
|
className="btn btn-sm btn-delete"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@ -479,6 +464,7 @@ function TableDoctor({setDictInfo}) {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
{/* ===== PAGINAÇÃO ===== */}
|
||||||
{medicosFiltrados.length > 0 && (
|
{medicosFiltrados.length > 0 && (
|
||||||
<div className="d-flex justify-content-between align-items-center mt-3">
|
<div className="d-flex justify-content-between align-items-center mt-3">
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
@ -534,33 +520,24 @@ function TableDoctor({setDictInfo}) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
{/* ===== MODAL DE EXCLUSÃO ===== */}
|
||||||
{showDeleteModal && (
|
{showDeleteModal && (
|
||||||
<div
|
<div
|
||||||
className="modal fade show delete-modal"
|
className="modal fade show delete-modal"
|
||||||
style={{
|
style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }}
|
||||||
display: "block",
|
|
||||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
||||||
}}
|
|
||||||
tabIndex="-1"
|
tabIndex="-1"
|
||||||
onClick={(e) =>
|
onClick={(e) => e.target.classList.contains("modal") && setShowDeleteModal(false)}
|
||||||
e.target.classList.contains("modal") && setShowDeleteModal(false)
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<div className="modal-dialog modal-dialog-centered">
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
||||||
<h5 className="modal-title">
|
<h5 className="modal-title">Confirmação de Exclusão</h5>
|
||||||
Confirmação de Exclusão
|
|
||||||
</h5>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<p className="mb-0 fs-5">
|
<p className="mb-0 fs-5">Tem certeza que deseja excluir este médico?</p>
|
||||||
Tem certeza que deseja excluir este médico?
|
<p className="text-muted mt-2">Esta ação não pode ser desfeita.</p>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-footer">
|
<div className="modal-footer">
|
||||||
|
|||||||
@ -9,6 +9,7 @@ import { useNavigate } from 'react-router-dom';
|
|||||||
import html2pdf from 'html2pdf.js';
|
import html2pdf from 'html2pdf.js';
|
||||||
import TiptapViewer from '../PagesMedico/TiptapViewer'
|
import TiptapViewer from '../PagesMedico/TiptapViewer'
|
||||||
import '../PagesMedico/styleMedico/DoctorRelatorioManager.css';
|
import '../PagesMedico/styleMedico/DoctorRelatorioManager.css';
|
||||||
|
import './style/TableDoctor.css';
|
||||||
|
|
||||||
const LaudoManager = () => {
|
const LaudoManager = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@ -31,6 +32,8 @@ const LaudoManager = () => {
|
|||||||
|
|
||||||
const [paginaAtual, setPaginaAtual] = useState(1);
|
const [paginaAtual, setPaginaAtual] = useState(1);
|
||||||
const [itensPorPagina, setItensPorPagina] = useState(10);
|
const [itensPorPagina, setItensPorPagina] = useState(10);
|
||||||
|
const [sortKey, setSortKey] = useState(null);
|
||||||
|
const [sortDir, setSortDir] = useState('asc');
|
||||||
|
|
||||||
const [noPermissionText, setNoPermissionText] = useState(null);
|
const [noPermissionText, setNoPermissionText] = useState(null);
|
||||||
|
|
||||||
@ -128,9 +131,25 @@ const LaudoManager = () => {
|
|||||||
const limparFiltros = () => {
|
const limparFiltros = () => {
|
||||||
setTermoPesquisa('');
|
setTermoPesquisa('');
|
||||||
setFiltroExame('');
|
setFiltroExame('');
|
||||||
|
setSortKey(null);
|
||||||
|
setSortDir('asc');
|
||||||
setRelatoriosFinais(relatoriosOriginais);
|
setRelatoriosFinais(relatoriosOriginais);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const applySorting = (arr) => {
|
||||||
|
if (!Array.isArray(arr) || !sortKey) return arr;
|
||||||
|
const copy = [...arr];
|
||||||
|
if (sortKey === 'paciente') {
|
||||||
|
copy.sort((a, b) => (a.patient_name || '').localeCompare(b.patient_name || ''));
|
||||||
|
} else if (sortKey === 'exame') {
|
||||||
|
copy.sort((a, b) => (a.exam || a.exame || '').localeCompare(b.exam || b.exame || ''));
|
||||||
|
} else if (sortKey === 'data') {
|
||||||
|
copy.sort((a, b) => new Date(a.created_at || 0) - new Date(b.created_at || 0));
|
||||||
|
}
|
||||||
|
if (sortDir === 'desc') copy.reverse();
|
||||||
|
return copy;
|
||||||
|
};
|
||||||
|
|
||||||
const BaixarPDFdoRelatorio = (nome_paciente, idx) => {
|
const BaixarPDFdoRelatorio = (nome_paciente, idx) => {
|
||||||
const elemento = document.getElementById(`folhaA4-${idx}`);
|
const elemento = document.getElementById(`folhaA4-${idx}`);
|
||||||
if (!elemento) {
|
if (!elemento) {
|
||||||
@ -215,10 +234,11 @@ const LaudoManager = () => {
|
|||||||
}
|
}
|
||||||
if (ex) items = items.filter(r => (r.exam || r.exame || '').toLowerCase().includes(ex));
|
if (ex) items = items.filter(r => (r.exam || r.exame || '').toLowerCase().includes(ex));
|
||||||
|
|
||||||
setRelatoriosFiltrados(items);
|
const itemsOrdenados = applySorting(items);
|
||||||
setRelatoriosFinais(items);
|
setRelatoriosFiltrados(itemsOrdenados);
|
||||||
|
setRelatoriosFinais(itemsOrdenados);
|
||||||
setPaginaAtual(1);
|
setPaginaAtual(1);
|
||||||
}, [termoPesquisa, filtroExame, relatoriosOriginais]);
|
}, [termoPesquisa, filtroExame, relatoriosOriginais, sortKey, sortDir]);
|
||||||
|
|
||||||
const irParaPagina = (pagina) => setPaginaAtual(pagina);
|
const irParaPagina = (pagina) => setPaginaAtual(pagina);
|
||||||
const avancarPagina = () => { if (paginaAtual < totalPaginas) setPaginaAtual(paginaAtual + 1); };
|
const avancarPagina = () => { if (paginaAtual < totalPaginas) setPaginaAtual(paginaAtual + 1); };
|
||||||
@ -236,13 +256,11 @@ const LaudoManager = () => {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="page-heading"><h3>Lista de Relatórios</h3></div>
|
<div className="page-heading"><h3>Lista de Relatórios</h3></div>
|
||||||
<div className="page-content">
|
|
||||||
<section className="row">
|
<div className="page-content table-doctor-container">
|
||||||
<div className="col-12">
|
<div className="table-doctor-card">
|
||||||
<div className="card">
|
|
||||||
<div className="card-header d-flex justify-content-between align-items-center">
|
<div className="card-header d-flex justify-content-between align-items-center">
|
||||||
<h4 className="card-title mb-0">Relatórios Cadastrados</h4>
|
<h4 className="card-title mb-0">Relatórios Cadastrados</h4>
|
||||||
<div>
|
|
||||||
<button
|
<button
|
||||||
className="btn btn-primary"
|
className="btn btn-primary"
|
||||||
onClick={() => setNoPermissionText('Sem permissão para editar/criar laudo.')}
|
onClick={() => setNoPermissionText('Sem permissão para editar/criar laudo.')}
|
||||||
@ -251,59 +269,103 @@ const LaudoManager = () => {
|
|||||||
<i className="bi bi-plus-circle"></i> Adicionar Relatório
|
<i className="bi bi-plus-circle"></i> Adicionar Relatório
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<div className="card p-3 mb-3">
|
{/* ===== FILTROS PADRONIZADOS ===== */}
|
||||||
|
<div className="table-doctor-filters">
|
||||||
<h5 className="mb-3">
|
<h5 className="mb-3">
|
||||||
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
||||||
</h5>
|
</h5>
|
||||||
<div className="row">
|
|
||||||
<div className="col-md-5">
|
{/* Busca */}
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<label className="form-label">Buscar por nome ou CPF do paciente</label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
placeholder="Digite nome ou CPF do paciente..."
|
placeholder="Buscar por nome ou CPF do paciente..."
|
||||||
value={termoPesquisa}
|
value={termoPesquisa}
|
||||||
onChange={(e) => setTermoPesquisa(e.target.value)}
|
onChange={(e) => setTermoPesquisa(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div className="col-md-5">
|
{/* Linha de Filtros Básicos */}
|
||||||
<div className="mb-3">
|
<div className="d-flex flex-wrap align-items-center gap-3 mb-3">
|
||||||
<label className="form-label">Filtrar por tipo de exame</label>
|
{/* Tipo de Exame */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Tipo de Exame:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control form-control-sm compact-select"
|
||||||
placeholder="Digite o tipo de exame..."
|
placeholder="Filtrar por exame..."
|
||||||
value={filtroExame}
|
value={filtroExame}
|
||||||
onChange={(e) => setFiltroExame(e.target.value)}
|
onChange={(e) => setFiltroExame(e.target.value)}
|
||||||
|
style={{ minWidth: "180px" }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Separador */}
|
||||||
|
<div className="vr d-none d-md-block" style={{ height: "30px" }} />
|
||||||
|
|
||||||
|
{/* Ordenação */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Ordenar por:</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm compact-select sort-select"
|
||||||
|
value={sortKey ? `${sortKey}-${sortDir}` : ''}
|
||||||
|
onChange={(e) => {
|
||||||
|
const v = e.target.value;
|
||||||
|
if (!v) {
|
||||||
|
setSortKey(null);
|
||||||
|
setSortDir('asc');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const [k, d] = v.split('-');
|
||||||
|
setSortKey(k);
|
||||||
|
setSortDir(d);
|
||||||
|
}}
|
||||||
|
style={{ minWidth: "180px" }}
|
||||||
|
>
|
||||||
|
<option value="">Sem ordenação</option>
|
||||||
|
<option value="paciente-asc">Paciente (A-Z)</option>
|
||||||
|
<option value="paciente-desc">Paciente (Z-A)</option>
|
||||||
|
<option value="exame-asc">Exame (A-Z)</option>
|
||||||
|
<option value="exame-desc">Exame (Z-A)</option>
|
||||||
|
<option value="data-asc">Data (mais antiga)</option>
|
||||||
|
<option value="data-desc">Data (mais recente)</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-2 d-flex align-items-end">
|
</div>
|
||||||
<button className="btn btn-outline-secondary w-100" onClick={limparFiltros}>
|
|
||||||
<i className="bi bi-arrow-clockwise"></i> Limpar
|
{/* Linha de Ações */}
|
||||||
|
<div className="d-flex justify-content-end align-items-center">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary btn-sm d-flex align-items-center"
|
||||||
|
onClick={limparFiltros}
|
||||||
|
>
|
||||||
|
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div className="mt-2">
|
{/* Contador */}
|
||||||
<div className="contador-relatorios">
|
<div className="mt-3">
|
||||||
|
<div className="contador-medicos">
|
||||||
{relatoriosFinais.length} DE {relatoriosOriginais.length} RELATÓRIOS ENCONTRADOS
|
{relatoriosFinais.length} DE {relatoriosOriginais.length} RELATÓRIOS ENCONTRADOS
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="table-responsive">
|
{/* ===== TABELA SIMPLIFICADA ===== */}
|
||||||
<table className="table table-striped table-hover">
|
<div className="table-responsive mt-4">
|
||||||
|
|
||||||
|
{/* ===== TABELA SIMPLIFICADA ===== */}
|
||||||
|
<div className="table-responsive mt-4">
|
||||||
|
<table className="table table-striped table-hover table-doctor-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Paciente</th>
|
<th>Paciente</th>
|
||||||
<th>CPF</th>
|
<th>CPF</th>
|
||||||
<th>Exame</th>
|
<th>Exame</th>
|
||||||
<th></th>
|
<th>Ações</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -325,8 +387,6 @@ const LaudoManager = () => {
|
|||||||
<i className="bi bi-pencil me-1"></i> Editar
|
<i className="bi bi-pencil me-1"></i> Editar
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<button className="btn btn-sm btn-protocolo" onClick={() => handleOpenProtocol(relatorio, index)}>
|
<button className="btn btn-sm btn-protocolo" onClick={() => handleOpenProtocol(relatorio, index)}>
|
||||||
<i className="bi bi-send me-1"></i> Protocolo
|
<i className="bi bi-send me-1"></i> Protocolo
|
||||||
</button>
|
</button>
|
||||||
@ -340,11 +400,19 @@ const LaudoManager = () => {
|
|||||||
);
|
);
|
||||||
})
|
})
|
||||||
) : (
|
) : (
|
||||||
<tr><td colSpan="4" className="text-center">Nenhum relatório encontrado.</td></tr>
|
<tr>
|
||||||
|
<td colSpan="4" className="text-center py-4">
|
||||||
|
<div className="text-muted">
|
||||||
|
<i className="bi bi-search display-4"></i>
|
||||||
|
<p className="mt-2">Nenhum relatório encontrado.</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
{/* ===== PAGINAÇÃO ===== */}
|
||||||
{relatoriosFinais.length > 0 && (
|
{relatoriosFinais.length > 0 && (
|
||||||
<div className="d-flex justify-content-between align-items-center mt-3">
|
<div className="d-flex justify-content-between align-items-center mt-3">
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
@ -367,7 +435,7 @@ const LaudoManager = () => {
|
|||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
<span className="me-3 text-muted">
|
<span className="me-3 text-muted">
|
||||||
Página {paginaAtual} de {totalPaginas} •
|
Página {paginaAtual} de {totalPaginas} •
|
||||||
Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, relatoriosFinais.length)} de {relatoriosFinais.length} itens
|
Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, relatoriosFinais.length)} de {relatoriosFinais.length} relatórios
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
@ -400,7 +468,6 @@ const LaudoManager = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,7 @@
|
|||||||
import React, { useState, useEffect, useCallback } from "react";
|
import React, { useState, useEffect, useCallback, useRef } from "react";
|
||||||
import { useLocation, useNavigate } from "react-router-dom";
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
|
import API_KEY from "../components/utils/apiKeys";
|
||||||
|
import { UserInfos } from "../components/utils/Functions-Endpoints/General";
|
||||||
import "./style/ProfilePage.css";
|
import "./style/ProfilePage.css";
|
||||||
|
|
||||||
const ROLES = {
|
const ROLES = {
|
||||||
@ -29,6 +31,9 @@ const ProfilePage = () => {
|
|||||||
const [avatarUrl, setAvatarUrl] = useState(null);
|
const [avatarUrl, setAvatarUrl] = useState(null);
|
||||||
const [isEditingName, setIsEditingName] = useState(false);
|
const [isEditingName, setIsEditingName] = useState(false);
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
|
const [userId, setUserId] = useState(null);
|
||||||
|
const [uploadingAvatar, setUploadingAvatar] = useState(false);
|
||||||
|
const fileInputRef = useRef(null);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -42,22 +47,62 @@ const ProfilePage = () => {
|
|||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadProfileData = () => {
|
const loadProfileData = async () => {
|
||||||
const localAvatar = localStorage.getItem('user_avatar');
|
try {
|
||||||
if (localAvatar) {
|
const token = localStorage.getItem('access_token') || localStorage.getItem('token') || localStorage.getItem('authToken') || sessionStorage.getItem('token');
|
||||||
setAvatarUrl(localAvatar);
|
|
||||||
|
if (!token) return;
|
||||||
|
|
||||||
|
const userInfo = await UserInfos(`Bearer ${token}`);
|
||||||
|
|
||||||
|
const userIdFromInfo = userInfo?.id || userInfo?.user?.id || userInfo?.sub;
|
||||||
|
const userFullName =
|
||||||
|
userInfo?.full_name ||
|
||||||
|
userInfo?.user?.full_name ||
|
||||||
|
userInfo?.profile?.full_name ||
|
||||||
|
userInfo?.user?.user_metadata?.full_name ||
|
||||||
|
'Usuário';
|
||||||
|
const email = userInfo?.user?.email || userInfo?.email || 'email@example.com';
|
||||||
|
|
||||||
|
setUserId(userIdFromInfo);
|
||||||
|
setUserName(userFullName);
|
||||||
|
setUserEmail(email);
|
||||||
|
|
||||||
|
if (!userIdFromInfo) return;
|
||||||
|
|
||||||
|
const avatarPath = `${userIdFromInfo}/avatar.jpg`;
|
||||||
|
|
||||||
|
const myHeaders = new Headers();
|
||||||
|
myHeaders.append('apikey', API_KEY);
|
||||||
|
myHeaders.append('Authorization', `Bearer ${token}`);
|
||||||
|
|
||||||
|
const response = await fetch(
|
||||||
|
`https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/public/avatars/${avatarPath}`,
|
||||||
|
{ method: 'GET', headers: myHeaders, redirect: 'follow' }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const blob = await response.blob();
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
setAvatarUrl(url);
|
||||||
|
} else {
|
||||||
|
const authResponse = await fetch(
|
||||||
|
`https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/avatars/${avatarPath}`,
|
||||||
|
{ method: 'GET', headers: myHeaders, redirect: 'follow' }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (authResponse.ok) {
|
||||||
|
const blob = await authResponse.blob();
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
setAvatarUrl(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('Erro ao carregar perfil:', err);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
loadProfileData();
|
loadProfileData();
|
||||||
|
|
||||||
|
|
||||||
const handleStorageChange = () => {
|
|
||||||
loadProfileData();
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('storage', handleStorageChange);
|
|
||||||
return () => window.removeEventListener('storage', handleStorageChange);
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleNameSave = () => {
|
const handleNameSave = () => {
|
||||||
@ -81,6 +126,73 @@ const ProfilePage = () => {
|
|||||||
|
|
||||||
const handleClose = () => navigate(-1);
|
const handleClose = () => navigate(-1);
|
||||||
|
|
||||||
|
const handleAvatarClick = () => {
|
||||||
|
if (fileInputRef.current) {
|
||||||
|
fileInputRef.current.click();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAvatarUpload = async (event) => {
|
||||||
|
const file = event.target.files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
|
if (!file.type.startsWith('image/')) {
|
||||||
|
alert('Por favor, selecione um arquivo de imagem válido.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (file.size > 5 * 1024 * 1024) {
|
||||||
|
alert('A imagem deve ter no máximo 5MB.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setUploadingAvatar(true);
|
||||||
|
|
||||||
|
if (!userId) {
|
||||||
|
alert('Usuário não identificado. Faça login novamente.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const avatarPath = `${userId}/avatar.jpg`;
|
||||||
|
const token = localStorage.getItem('access_token') || localStorage.getItem('token') || localStorage.getItem('authToken') || sessionStorage.getItem('token');
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', file);
|
||||||
|
|
||||||
|
const myHeaders = new Headers();
|
||||||
|
myHeaders.append('apikey', API_KEY);
|
||||||
|
if (token) myHeaders.append('Authorization', `Bearer ${token}`);
|
||||||
|
|
||||||
|
const response = await fetch(
|
||||||
|
`https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/avatars/${avatarPath}`,
|
||||||
|
{
|
||||||
|
method: 'POST',
|
||||||
|
headers: myHeaders,
|
||||||
|
body: formData,
|
||||||
|
redirect: 'follow'
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const url = URL.createObjectURL(file);
|
||||||
|
setAvatarUrl(url);
|
||||||
|
alert('Avatar atualizado com sucesso!');
|
||||||
|
window.dispatchEvent(new Event('storage'));
|
||||||
|
} else {
|
||||||
|
const errorText = await response.text();
|
||||||
|
console.error('Erro ao fazer upload:', errorText);
|
||||||
|
alert('Erro ao fazer upload do avatar. Tente novamente.');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Erro no upload:', err);
|
||||||
|
alert('Erro ao fazer upload do avatar. Tente novamente.');
|
||||||
|
} finally {
|
||||||
|
setUploadingAvatar(false);
|
||||||
|
if (fileInputRef.current) fileInputRef.current.value = '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="profile-overlay" role="dialog" aria-modal="true">
|
<div className="profile-overlay" role="dialog" aria-modal="true">
|
||||||
<div className="profile-modal">
|
<div className="profile-modal">
|
||||||
@ -94,33 +206,53 @@ const ProfilePage = () => {
|
|||||||
|
|
||||||
<div className="profile-content">
|
<div className="profile-content">
|
||||||
<div className="profile-left">
|
<div className="profile-left">
|
||||||
|
<input
|
||||||
|
ref={fileInputRef}
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={handleAvatarUpload}
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
/>
|
||||||
<div className="avatar-wrapper">
|
<div className="avatar-wrapper">
|
||||||
<div className="avatar-square">
|
<div className="avatar-square">
|
||||||
{avatarUrl ? (
|
{uploadingAvatar ? (
|
||||||
|
<div className="avatar-placeholder" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '24px' }}>
|
||||||
|
<span>⏳</span>
|
||||||
|
</div>
|
||||||
|
) : avatarUrl ? (
|
||||||
<img
|
<img
|
||||||
src={avatarUrl}
|
src={avatarUrl}
|
||||||
alt="Avatar do usuário"
|
alt="Avatar do usuário"
|
||||||
className="avatar-img"
|
className="avatar-img"
|
||||||
onError={() => {
|
onError={() => {
|
||||||
setAvatarUrl(null);
|
setAvatarUrl(null);
|
||||||
localStorage.removeItem('user_avatar');
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="avatar-placeholder">
|
<div className="avatar-placeholder">
|
||||||
{userName.split(' ').map(n => n[0]).join('').toUpperCase()}
|
{(() => {
|
||||||
|
const words = userName.trim().split(/\s+/).filter(w => w.length > 0);
|
||||||
|
if (words.length >= 2) {
|
||||||
|
return words.slice(0, 2).map(w => w[0]).join('');
|
||||||
|
} else if (words.length === 1 && words[0].length >= 2) {
|
||||||
|
return words[0].substring(0, 2);
|
||||||
|
} else {
|
||||||
|
return words[0]?.[0] || 'U';
|
||||||
|
}
|
||||||
|
})()}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p style={{
|
<button
|
||||||
textAlign: 'center',
|
onClick={handleAvatarClick}
|
||||||
marginTop: '10px',
|
className="btn btn-primary mt-3"
|
||||||
fontSize: '0.85rem',
|
style={{ width: '100%' }}
|
||||||
color: '#666'
|
disabled={uploadingAvatar}
|
||||||
}}>
|
>
|
||||||
Gerencie seu avatar no menu do perfil acima
|
<i className="bi bi-camera me-2"></i>
|
||||||
</p>
|
{uploadingAvatar ? 'Enviando...' : 'Alterar Foto'}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,6 @@ import ModalErro from "../components/utils/fetchErros/ModalErro";
|
|||||||
import manager from "../components/utils/fetchErros/ManagerFunction";
|
import manager from "../components/utils/fetchErros/ManagerFunction";
|
||||||
|
|
||||||
function TablePaciente({ setCurrentPage, setPatientID, setDictInfo }) {
|
function TablePaciente({ setCurrentPage, setPatientID, setDictInfo }) {
|
||||||
|
|
||||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
@ -24,11 +23,9 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
const [dataInicial, setDataInicial] = useState("");
|
const [dataInicial, setDataInicial] = useState("");
|
||||||
const [dataFinal, setDataFinal] = useState("");
|
const [dataFinal, setDataFinal] = useState("");
|
||||||
|
|
||||||
|
|
||||||
const [sortKey, setSortKey] = useState(null);
|
const [sortKey, setSortKey] = useState(null);
|
||||||
const [sortDir, setSortDir] = useState('asc');
|
const [sortDir, setSortDir] = useState('asc');
|
||||||
|
|
||||||
|
|
||||||
const [paginaAtual, setPaginaAtual] = useState(1);
|
const [paginaAtual, setPaginaAtual] = useState(1);
|
||||||
const [itensPorPagina, setItensPorPagina] = useState(10);
|
const [itensPorPagina, setItensPorPagina] = useState(10);
|
||||||
|
|
||||||
@ -36,147 +33,13 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
const [selectedPatientId, setSelectedPatientId] = useState(null);
|
const [selectedPatientId, setSelectedPatientId] = useState(null);
|
||||||
|
|
||||||
const [showModalError, setShowModalError] = useState("");
|
const [showModalError, setShowModalError] = useState("");
|
||||||
|
const [ErrorInfo, setErrorInfo] = useState({});
|
||||||
|
|
||||||
const [ErrorInfo, setErrorInfo] = useState({})
|
// Funções auxiliares
|
||||||
|
|
||||||
const GetAnexos = async (id) => {
|
|
||||||
var myHeaders = new Headers();
|
|
||||||
myHeaders.append("Authorization", "Bearer <token>");
|
|
||||||
|
|
||||||
var requestOptions = {
|
|
||||||
method: "GET",
|
|
||||||
headers: myHeaders,
|
|
||||||
redirect: "follow",
|
|
||||||
};
|
|
||||||
try {
|
|
||||||
const response = await fetch(
|
|
||||||
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}/anexos`,
|
|
||||||
requestOptions
|
|
||||||
);
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
return result.data;
|
|
||||||
} catch (error) {
|
|
||||||
console.log("error", error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const DeleteAnexo = async (patientID) => {
|
|
||||||
const RespostaGetAnexos = await GetAnexos(patientID);
|
|
||||||
|
|
||||||
for (let i = 0; i < RespostaGetAnexos.length; i++) {
|
|
||||||
const idAnexo = RespostaGetAnexos[i].id;
|
|
||||||
|
|
||||||
console.log("anexos", RespostaGetAnexos);
|
|
||||||
|
|
||||||
var myHeaders = new Headers();
|
|
||||||
myHeaders.append("Authorization", "Bearer <token>");
|
|
||||||
|
|
||||||
var requestOptions = {
|
|
||||||
method: "DELETE",
|
|
||||||
headers: myHeaders,
|
|
||||||
redirect: "follow",
|
|
||||||
};
|
|
||||||
|
|
||||||
fetch(
|
|
||||||
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos/${idAnexo}`,
|
|
||||||
requestOptions
|
|
||||||
)
|
|
||||||
.then((response) => response.text())
|
|
||||||
.then((result) => console.log("anexo excluido com sucesso", result))
|
|
||||||
.catch((error) => console.log("error", error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const deletePatient = async (id) => {
|
|
||||||
|
|
||||||
const authHeader = getAuthorizationHeader()
|
|
||||||
console.log(id)
|
|
||||||
var myHeaders = new Headers();
|
|
||||||
myHeaders.append('apikey', API_KEY);
|
|
||||||
myHeaders.append("Authorization", authHeader)
|
|
||||||
|
|
||||||
|
|
||||||
var requestOptions = { method: "DELETE", redirect: "follow", headers: myHeaders };
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await fetch(
|
|
||||||
`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${id}`,
|
|
||||||
requestOptions
|
|
||||||
);
|
|
||||||
setPacientes((prev) => prev.filter((p) => p.id !== id));
|
|
||||||
console.log(result)
|
|
||||||
} catch (error) {
|
|
||||||
console.log("Deu problema", error);
|
|
||||||
} finally {
|
|
||||||
setShowDeleteModal(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const RefreshingToken = () => {
|
|
||||||
console.log("Refreshing token...");
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
|
|
||||||
const authHeader = getAuthorizationHeader()
|
|
||||||
|
|
||||||
console.log(authHeader, 'aqui autorização')
|
|
||||||
|
|
||||||
var myHeaders = new Headers();
|
|
||||||
myHeaders.append("apikey", API_KEY);
|
|
||||||
myHeaders.append("Authorization", `${authHeader}`);
|
|
||||||
var requestOptions = {
|
|
||||||
method: 'GET',
|
|
||||||
headers: myHeaders,
|
|
||||||
redirect: 'follow'
|
|
||||||
};
|
|
||||||
|
|
||||||
fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions)
|
|
||||||
.then(response => {
|
|
||||||
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
|
|
||||||
return response.json().then(errorData => {
|
|
||||||
|
|
||||||
const errorObject = {
|
|
||||||
httpStatus: response.status,
|
|
||||||
apiCode: errorData.code,
|
|
||||||
message: errorData.message || response.statusText,
|
|
||||||
details: errorData.details,
|
|
||||||
hint: errorData.hint
|
|
||||||
};
|
|
||||||
|
|
||||||
console.error("ERRO DETALHADO:", errorObject);
|
|
||||||
throw errorObject;
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return response.json();
|
|
||||||
})
|
|
||||||
.then(result => {
|
|
||||||
|
|
||||||
setPacientes(result);
|
|
||||||
console.log("Sucesso:", result);
|
|
||||||
|
|
||||||
setShowModalError(false);
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error(error, "deu erro")
|
|
||||||
manager(setShowModalError, RefreshingToken, setErrorInfo, error)
|
|
||||||
|
|
||||||
});
|
|
||||||
}, [isAuthenticated, getAuthorizationHeader]);
|
|
||||||
|
|
||||||
const ehAniversariante = (dataNascimento) => {
|
const ehAniversariante = (dataNascimento) => {
|
||||||
if (!dataNascimento) return false;
|
if (!dataNascimento) return false;
|
||||||
const hoje = new Date();
|
const hoje = new Date();
|
||||||
const nascimento = new Date(dataNascimento);
|
const nascimento = new Date(dataNascimento);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
hoje.getDate() === nascimento.getDate() &&
|
hoje.getDate() === nascimento.getDate() &&
|
||||||
hoje.getMonth() === nascimento.getMonth()
|
hoje.getMonth() === nascimento.getMonth()
|
||||||
@ -189,13 +52,118 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
const nascimento = new Date(dataNascimento);
|
const nascimento = new Date(dataNascimento);
|
||||||
let idade = hoje.getFullYear() - nascimento.getFullYear();
|
let idade = hoje.getFullYear() - nascimento.getFullYear();
|
||||||
const mes = hoje.getMonth() - nascimento.getMonth();
|
const mes = hoje.getMonth() - nascimento.getMonth();
|
||||||
|
|
||||||
if (mes < 0 || (mes === 0 && hoje.getDate() < nascimento.getDate())) {
|
if (mes < 0 || (mes === 0 && hoje.getDate() < nascimento.getDate())) {
|
||||||
idade--;
|
idade--;
|
||||||
}
|
}
|
||||||
return idade;
|
return idade;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const formatarData = (dataString) => {
|
||||||
|
if (!dataString) return 'Nunca';
|
||||||
|
const data = new Date(dataString);
|
||||||
|
return data.toLocaleDateString('pt-BR', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
year: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Funções de API (mantidas do seu código original)
|
||||||
|
const GetAnexos = async (id) => {
|
||||||
|
var myHeaders = new Headers();
|
||||||
|
myHeaders.append("Authorization", "Bearer <token>");
|
||||||
|
var requestOptions = { method: "GET", headers: myHeaders, redirect: "follow" };
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}/anexos`,
|
||||||
|
requestOptions
|
||||||
|
);
|
||||||
|
const result = await response.json();
|
||||||
|
return result.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.log("error", error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const DeleteAnexo = async (patientID) => {
|
||||||
|
const RespostaGetAnexos = await GetAnexos(patientID);
|
||||||
|
for (let i = 0; i < RespostaGetAnexos.length; i++) {
|
||||||
|
const idAnexo = RespostaGetAnexos[i].id;
|
||||||
|
var myHeaders = new Headers();
|
||||||
|
myHeaders.append("Authorization", "Bearer <token>");
|
||||||
|
var requestOptions = { method: "DELETE", headers: myHeaders, redirect: "follow" };
|
||||||
|
|
||||||
|
fetch(
|
||||||
|
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos/${idAnexo}`,
|
||||||
|
requestOptions
|
||||||
|
)
|
||||||
|
.then((response) => response.text())
|
||||||
|
.then((result) => console.log("anexo excluido com sucesso", result))
|
||||||
|
.catch((error) => console.log("error", error));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const deletePatient = async (id) => {
|
||||||
|
const authHeader = getAuthorizationHeader();
|
||||||
|
var myHeaders = new Headers();
|
||||||
|
myHeaders.append('apikey', API_KEY);
|
||||||
|
myHeaders.append("Authorization", authHeader);
|
||||||
|
var requestOptions = { method: "DELETE", redirect: "follow", headers: myHeaders };
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await fetch(
|
||||||
|
`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${id}`,
|
||||||
|
requestOptions
|
||||||
|
);
|
||||||
|
setPacientes((prev) => prev.filter((p) => p.id !== id));
|
||||||
|
} catch (error) {
|
||||||
|
console.log("Deu problema", error);
|
||||||
|
} finally {
|
||||||
|
setShowDeleteModal(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const RefreshingToken = () => {
|
||||||
|
console.log("Refreshing token...");
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const authHeader = getAuthorizationHeader();
|
||||||
|
var myHeaders = new Headers();
|
||||||
|
myHeaders.append("apikey", API_KEY);
|
||||||
|
myHeaders.append("Authorization", `${authHeader}`);
|
||||||
|
var requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
|
||||||
|
|
||||||
|
fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions)
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
return response.json().then(errorData => {
|
||||||
|
const errorObject = {
|
||||||
|
httpStatus: response.status,
|
||||||
|
apiCode: errorData.code,
|
||||||
|
message: errorData.message || response.statusText,
|
||||||
|
details: errorData.details,
|
||||||
|
hint: errorData.hint
|
||||||
|
};
|
||||||
|
throw errorObject;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(result => {
|
||||||
|
setPacientes(result);
|
||||||
|
setShowModalError(false);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
manager(setShowModalError, RefreshingToken, setErrorInfo, error);
|
||||||
|
});
|
||||||
|
}, [isAuthenticated, getAuthorizationHeader]);
|
||||||
|
|
||||||
|
// Filtragem
|
||||||
const limparFiltros = () => {
|
const limparFiltros = () => {
|
||||||
setSearch("");
|
setSearch("");
|
||||||
setFiltroConvenio("Todos");
|
setFiltroConvenio("Todos");
|
||||||
@ -211,48 +179,31 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente) => {
|
const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente) => {
|
||||||
|
|
||||||
const buscaNome = paciente.full_name?.toLowerCase().includes(search.toLowerCase());
|
const buscaNome = paciente.full_name?.toLowerCase().includes(search.toLowerCase());
|
||||||
const buscaCPF = paciente.cpf?.toLowerCase().includes(search.toLowerCase());
|
const buscaCPF = paciente.cpf?.toLowerCase().includes(search.toLowerCase());
|
||||||
const passaBusca = search === "" || buscaNome || buscaCPF;
|
const buscaEmail = paciente.email?.toLowerCase().includes(search.toLowerCase());
|
||||||
|
const passaBusca = search === "" || buscaNome || buscaCPF || buscaEmail;
|
||||||
|
|
||||||
const passaConvenio = filtroConvenio === "Todos" || paciente.insurance_plan === filtroConvenio;
|
const passaConvenio = filtroConvenio === "Todos" || paciente.insurance_plan === filtroConvenio;
|
||||||
|
|
||||||
const passaVIP = filtroVIP ? paciente.vip === true : true;
|
const passaVIP = filtroVIP ? paciente.vip === true : true;
|
||||||
const passaAniversario = filtroAniversariante
|
const passaAniversario = filtroAniversariante ? ehAniversariante(paciente.birth_date) : true;
|
||||||
? ehAniversariante(paciente.birth_date)
|
const passaCidade = filtroCidade ? paciente.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;
|
||||||
: true;
|
const passaEstado = filtroEstado ? paciente.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;
|
||||||
|
|
||||||
|
|
||||||
const passaCidade = filtroCidade ?
|
|
||||||
paciente.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;
|
|
||||||
|
|
||||||
const passaEstado = filtroEstado ?
|
|
||||||
paciente.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;
|
|
||||||
|
|
||||||
|
|
||||||
const idade = calcularIdade(paciente.birth_date);
|
const idade = calcularIdade(paciente.birth_date);
|
||||||
const passaIdadeMinima = idadeMinima ? idade >= parseInt(idadeMinima) : true;
|
const passaIdadeMinima = idadeMinima ? idade >= parseInt(idadeMinima) : true;
|
||||||
const passaIdadeMaxima = idadeMaxima ? idade <= parseInt(idadeMaxima) : true;
|
const passaIdadeMaxima = idadeMaxima ? idade <= parseInt(idadeMaxima) : true;
|
||||||
|
|
||||||
|
const passaDataInicial = dataInicial ? paciente.last_appointment && new Date(paciente.last_appointment) >= new Date(dataInicial) : true;
|
||||||
|
const passaDataFinal = dataFinal ? paciente.last_appointment && new Date(paciente.last_appointment) <= new Date(dataFinal) : true;
|
||||||
|
|
||||||
const passaDataInicial = dataInicial ?
|
return passaBusca && passaConvenio && passaVIP && passaAniversario &&
|
||||||
paciente.last_appointment && new Date(paciente.last_appointment) >= new Date(dataInicial) : true;
|
|
||||||
|
|
||||||
const passaDataFinal = dataFinal ?
|
|
||||||
paciente.last_appointment && new Date(paciente.last_appointment) <= new Date(dataFinal) : true;
|
|
||||||
|
|
||||||
|
|
||||||
const resultado = passaBusca && passaConvenio && passaVIP && passaAniversario &&
|
|
||||||
passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
|
passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
|
||||||
passaDataInicial && passaDataFinal;
|
passaDataInicial && passaDataFinal;
|
||||||
|
|
||||||
return resultado;
|
|
||||||
}) : [];
|
}) : [];
|
||||||
|
|
||||||
|
// Ordenação
|
||||||
const applySorting = (arr) => {
|
const aplicarOrdenacao = (arr) => {
|
||||||
if (!Array.isArray(arr) || !sortKey) return arr;
|
if (!Array.isArray(arr) || !sortKey) return arr;
|
||||||
const copy = [...arr];
|
const copy = [...arr];
|
||||||
if (sortKey === 'nome') {
|
if (sortKey === 'nome') {
|
||||||
@ -264,48 +215,28 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
return copy;
|
return copy;
|
||||||
};
|
};
|
||||||
|
|
||||||
const pacientesOrdenados = applySorting(pacientesFiltrados);
|
const pacientesOrdenados = aplicarOrdenacao(pacientesFiltrados);
|
||||||
|
|
||||||
|
// Paginação
|
||||||
const totalPaginas = Math.ceil(pacientesFiltrados.length / itensPorPagina);
|
const totalPaginas = Math.ceil(pacientesFiltrados.length / itensPorPagina);
|
||||||
const indiceInicial = (paginaAtual - 1) * itensPorPagina;
|
const indiceInicial = (paginaAtual - 1) * itensPorPagina;
|
||||||
const indiceFinal = indiceInicial + itensPorPagina;
|
const indiceFinal = indiceInicial + itensPorPagina;
|
||||||
const pacientesPaginados = pacientesOrdenados.slice(indiceInicial, indiceFinal);
|
const pacientesPaginados = pacientesOrdenados.slice(indiceInicial, indiceFinal);
|
||||||
|
|
||||||
|
const irParaPagina = (pagina) => setPaginaAtual(pagina);
|
||||||
const irParaPagina = (pagina) => {
|
const avancarPagina = () => paginaAtual < totalPaginas && setPaginaAtual(p => p + 1);
|
||||||
setPaginaAtual(pagina);
|
const voltarPagina = () => paginaAtual > 1 && setPaginaAtual(p => p - 1);
|
||||||
};
|
|
||||||
|
|
||||||
const avancarPagina = () => {
|
|
||||||
if (paginaAtual < totalPaginas) {
|
|
||||||
setPaginaAtual(paginaAtual + 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const voltarPagina = () => {
|
|
||||||
if (paginaAtual > 1) {
|
|
||||||
setPaginaAtual(paginaAtual - 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const gerarNumerosPaginas = () => {
|
const gerarNumerosPaginas = () => {
|
||||||
const paginas = [];
|
const paginas = [];
|
||||||
const paginasParaMostrar = 5;
|
const paginasParaMostrar = 5;
|
||||||
|
|
||||||
let inicio = Math.max(1, paginaAtual - Math.floor(paginasParaMostrar / 2));
|
let inicio = Math.max(1, paginaAtual - Math.floor(paginasParaMostrar / 2));
|
||||||
let fim = Math.min(totalPaginas, inicio + paginasParaMostrar - 1);
|
let fim = Math.min(totalPaginas, inicio + paginasParaMostrar - 1);
|
||||||
|
|
||||||
inicio = Math.max(1, fim - paginasParaMostrar + 1);
|
inicio = Math.max(1, fim - paginasParaMostrar + 1);
|
||||||
|
for (let i = inicio; i <= fim; i++) paginas.push(i);
|
||||||
for (let i = inicio; i <= fim; i++) {
|
|
||||||
paginas.push(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
return paginas;
|
return paginas;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setPaginaAtual(1);
|
setPaginaAtual(1);
|
||||||
}, [search, filtroConvenio, filtroVIP, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal, sortKey, sortDir]);
|
}, [search, filtroConvenio, filtroVIP, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal, sortKey, sortDir]);
|
||||||
@ -315,11 +246,10 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
<div className="page-heading">
|
<div className="page-heading">
|
||||||
<h3>Lista de Pacientes</h3>
|
<h3>Lista de Pacientes</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="page-content table-paciente-container">
|
<div className="page-content table-paciente-container">
|
||||||
<section className="row">
|
<div className="table-paciente-card">
|
||||||
<div className="col-12">
|
<div className="card-header d-flex justify-content-between align-items-center">
|
||||||
<div className="card table-paciente-card">
|
|
||||||
<div className="card-header">
|
|
||||||
<h4 className="card-title mb-0">Pacientes Cadastrados</h4>
|
<h4 className="card-title mb-0">Pacientes Cadastrados</h4>
|
||||||
<Link to={'cadastro'}>
|
<Link to={'cadastro'}>
|
||||||
<button className="btn btn-primary">
|
<button className="btn btn-primary">
|
||||||
@ -329,64 +259,78 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<div className="card p-3 mb-3 table-paciente-filters">
|
{/* ===== FILTROS PADRONIZADOS ===== */}
|
||||||
|
<div className="table-paciente-filters">
|
||||||
<h5 className="mb-3">
|
<h5 className="mb-3">
|
||||||
<i className="bi bi-funnel-fill me-2 text-primary"></i>{" "}
|
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
|
||||||
Filtros
|
|
||||||
</h5>
|
</h5>
|
||||||
|
|
||||||
|
{/* Busca */}
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
placeholder="Buscar por nome ou CPF..."
|
placeholder="Buscar por nome, CPF ou email..."
|
||||||
value={search}
|
value={search}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
/>
|
/>
|
||||||
<small className="text-muted">
|
|
||||||
Digite o nome completo ou número do CPF
|
|
||||||
</small>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="d-flex flex-wrap align-items-center gap-2 mb-3">
|
{/* Linha de Filtros Básicos - TUDO EM UMA LINHA SÓ */}
|
||||||
|
<div className="d-flex flex-wrap align-items-center gap-3 mb-3">
|
||||||
|
{/* Convênio */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Convênio:</label>
|
||||||
<select
|
<select
|
||||||
className="form-select compact-select"
|
className="form-select form-select-sm compact-select"
|
||||||
value={filtroConvenio}
|
value={filtroConvenio}
|
||||||
onChange={(e) => setFiltroConvenio(e.target.value)}
|
onChange={(e) => setFiltroConvenio(e.target.value)}
|
||||||
style={{ minWidth: "150px", maxWidth: "200px" }}
|
style={{ minWidth: "160px" }}
|
||||||
>
|
>
|
||||||
<option value="Todos">Todos os Convênios</option>
|
<option value="Todos">Todos os Convênios</option>
|
||||||
<option value="Bradesco Saúde">Bradesco Saúde</option>
|
<option value="Bradesco Saúde">Bradesco Saúde</option>
|
||||||
<option value="Hapvida">Hapvida</option>
|
<option value="Hapvida">Hapvida</option>
|
||||||
<option value="Unimed">Unimed</option>
|
<option value="Unimed">Unimed</option>
|
||||||
</select>
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button
|
{/* Status VIP */}
|
||||||
className={`btn btn-sm ${filtroVIP ? "btn-primary" : "btn-outline-primary"}`}
|
|
||||||
onClick={() => setFiltroVIP(!filtroVIP)}
|
|
||||||
style={{ padding: "0.25rem 0.5rem" }}
|
|
||||||
>
|
|
||||||
<i className="bi bi-award me-1"></i> VIP
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
className={`btn btn-sm ${filtroAniversariante ? "btn-primary" : "btn-outline-primary"
|
|
||||||
}`}
|
|
||||||
onClick={() => setFiltroAniversariante(!filtroAniversariante)}
|
|
||||||
style={{ padding: "0.25rem 0.5rem" }}
|
|
||||||
>
|
|
||||||
<i className="bi bi-calendar me-1"></i> Aniversariantes
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="vr mx-2 d-none d-md-block" />
|
|
||||||
<div className="d-flex align-items-center gap-2">
|
<div className="d-flex align-items-center gap-2">
|
||||||
<span className="text-muted small">Ordenar por:</span>
|
<label className="form-label mb-0 text-muted small">VIP:</label>
|
||||||
{(() => {
|
|
||||||
const sortValue = sortKey ? `${sortKey}-${sortDir}` : '';
|
|
||||||
return (
|
|
||||||
<select
|
<select
|
||||||
className="form-select compact-select sort-select w-auto"
|
className="form-select form-select-sm compact-select"
|
||||||
value={sortValue}
|
value={filtroVIP ? "vip" : "todos"}
|
||||||
|
onChange={(e) => setFiltroVIP(e.target.value === "vip")}
|
||||||
|
style={{ minWidth: "120px" }}
|
||||||
|
>
|
||||||
|
<option value="todos">Todos</option>
|
||||||
|
<option value="vip">Apenas VIP</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Aniversariantes */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Aniversário:</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm compact-select"
|
||||||
|
value={filtroAniversariante ? "hoje" : "todos"}
|
||||||
|
onChange={(e) => setFiltroAniversariante(e.target.value === "hoje")}
|
||||||
|
style={{ minWidth: "140px" }}
|
||||||
|
>
|
||||||
|
<option value="todos">Todos</option>
|
||||||
|
<option value="hoje">Aniversariantes</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Separador */}
|
||||||
|
<div className="vr d-none d-md-block" style={{ height: "30px" }} />
|
||||||
|
|
||||||
|
{/* Ordenação */}
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<label className="form-label mb-0 text-muted small">Ordenar por:</label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm compact-select sort-select"
|
||||||
|
value={sortKey ? `${sortKey}-${sortDir}` : ''}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const v = e.target.value;
|
const v = e.target.value;
|
||||||
if (!v) { setSortKey(null); setSortDir('asc'); return; }
|
if (!v) { setSortKey(null); setSortDir('asc'); return; }
|
||||||
@ -394,6 +338,7 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
setSortKey(k);
|
setSortKey(k);
|
||||||
setSortDir(d);
|
setSortDir(d);
|
||||||
}}
|
}}
|
||||||
|
style={{ minWidth: "180px" }}
|
||||||
>
|
>
|
||||||
<option value="">Sem ordenação</option>
|
<option value="">Sem ordenação</option>
|
||||||
<option value="nome-asc">Nome (A-Z)</option>
|
<option value="nome-asc">Nome (A-Z)</option>
|
||||||
@ -401,38 +346,38 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
<option value="idade-asc">Idade (crescente)</option>
|
<option value="idade-asc">Idade (crescente)</option>
|
||||||
<option value="idade-desc">Idade (decrescente)</option>
|
<option value="idade-desc">Idade (decrescente)</option>
|
||||||
</select>
|
</select>
|
||||||
);
|
|
||||||
})()}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Linha de Ações */}
|
||||||
<div className="d-flex justify-content-between align-items-center">
|
<div className="d-flex justify-content-between align-items-center">
|
||||||
<button
|
<button
|
||||||
className="btn btn-link p-0 text-decoration-none"
|
className="btn btn-link p-0 text-decoration-none d-flex align-items-center"
|
||||||
onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
|
onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
|
||||||
|
style={{ fontSize: "0.9rem" }}
|
||||||
>
|
>
|
||||||
<i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
|
<i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
|
||||||
Filtros Avançados
|
Filtros Avançados
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
className="btn btn-outline-secondary btn-sm"
|
className="btn btn-outline-secondary btn-sm d-flex align-items-center"
|
||||||
onClick={limparFiltros}
|
onClick={limparFiltros}
|
||||||
>
|
>
|
||||||
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Filtros Avançados */}
|
||||||
{showFiltrosAvancados && (
|
{showFiltrosAvancados && (
|
||||||
<div className="mt-3 p-3 border rounded advanced-filters">
|
<div className="mt-3 p-3 border rounded advanced-filters">
|
||||||
<h6 className="mb-3">Filtros Avançados</h6>
|
<h6 className="mb-3">Filtros Avançados</h6>
|
||||||
|
|
||||||
<div className="row g-3">
|
<div className="row g-3">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<label className="form-label fw-bold">Cidade</label>
|
<label className="form-label fw-bold">Cidade</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
placeholder="Digite a cidade..."
|
placeholder="Digite a cidade..."
|
||||||
value={filtroCidade}
|
value={filtroCidade}
|
||||||
onChange={(e) => setFiltroCidade(e.target.value)}
|
onChange={(e) => setFiltroCidade(e.target.value)}
|
||||||
@ -442,18 +387,17 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
<label className="form-label fw-bold">Estado</label>
|
<label className="form-label fw-bold">Estado</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
placeholder="Ex: Minas Gerais"
|
placeholder="Ex: Minas Gerais"
|
||||||
value={filtroEstado}
|
value={filtroEstado}
|
||||||
onChange={(e) => setFiltroEstado(e.target.value)}
|
onChange={(e) => setFiltroEstado(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<label className="form-label fw-bold">Idade mínima</label>
|
<label className="form-label fw-bold">Idade mínima</label>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
placeholder="Ex: 18"
|
placeholder="Ex: 18"
|
||||||
value={idadeMinima}
|
value={idadeMinima}
|
||||||
onChange={(e) => setIdadeMinima(e.target.value)}
|
onChange={(e) => setIdadeMinima(e.target.value)}
|
||||||
@ -465,7 +409,7 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
<label className="form-label fw-bold">Idade máxima</label>
|
<label className="form-label fw-bold">Idade máxima</label>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
placeholder="Ex: 65"
|
placeholder="Ex: 65"
|
||||||
value={idadeMaxima}
|
value={idadeMaxima}
|
||||||
onChange={(e) => setIdadeMaxima(e.target.value)}
|
onChange={(e) => setIdadeMaxima(e.target.value)}
|
||||||
@ -473,12 +417,11 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
max="150"
|
max="150"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<label className="form-label fw-bold">Data inicial</label>
|
<label className="form-label fw-bold">Data inicial</label>
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
value={dataInicial}
|
value={dataInicial}
|
||||||
onChange={(e) => setDataInicial(e.target.value)}
|
onChange={(e) => setDataInicial(e.target.value)}
|
||||||
/>
|
/>
|
||||||
@ -487,7 +430,7 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
<label className="form-label fw-bold">Data final</label>
|
<label className="form-label fw-bold">Data final</label>
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
value={dataFinal}
|
value={dataFinal}
|
||||||
onChange={(e) => setDataFinal(e.target.value)}
|
onChange={(e) => setDataFinal(e.target.value)}
|
||||||
/>
|
/>
|
||||||
@ -496,6 +439,7 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Contador */}
|
||||||
<div className="mt-3">
|
<div className="mt-3">
|
||||||
<div className="contador-pacientes">
|
<div className="contador-pacientes">
|
||||||
{pacientesFiltrados.length} DE {pacientes.length} PACIENTES ENCONTRADOS
|
{pacientesFiltrados.length} DE {pacientes.length} PACIENTES ENCONTRADOS
|
||||||
@ -503,7 +447,8 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="table-responsive">
|
{/* ===== TABELA SIMPLIFICADA ===== */}
|
||||||
|
<div className="table-responsive mt-4">
|
||||||
<table className="table table-striped table-hover table-paciente-table">
|
<table className="table table-striped table-hover table-paciente-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -521,14 +466,14 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
<td>
|
<td>
|
||||||
<div className="d-flex align-items-center patient-name-container">
|
<div className="d-flex align-items-center patient-name-container">
|
||||||
{paciente.full_name}
|
{paciente.full_name}
|
||||||
<div className="d-flex patient-badges">
|
<div className="d-flex patient-badges ms-2">
|
||||||
{ehAniversariante(paciente.birth_date) && (
|
{ehAniversariante(paciente.birth_date) && (
|
||||||
<span className="badge anniversary-badge ms-2" title="Aniversariante do dia">
|
<span className="badge anniversary-badge ms-1" title="Aniversariante do dia">
|
||||||
<i className="bi bi-gift"></i>
|
<i className="bi bi-gift me-1"></i>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{paciente.vip && (
|
{paciente.vip && (
|
||||||
<span className="badge vip-badge ms-2" title="Paciente VIP">
|
<span className="badge vip-badge ms-1" title="Paciente VIP">
|
||||||
VIP
|
VIP
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
@ -538,18 +483,20 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
<td>{paciente.cpf}</td>
|
<td>{paciente.cpf}</td>
|
||||||
<td>
|
<td>
|
||||||
<span className="badge insurance-badge">
|
<span className="badge insurance-badge">
|
||||||
{paciente.insurance_plan || 'Não informado'}
|
{paciente.insurance_plan || '-'}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>{paciente.email || 'Não informado'}</td>
|
<td>{paciente.email || 'Não informado'}</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="d-flex gap-2">
|
<div className="d-flex gap-2">
|
||||||
<Link to={"details"}>
|
<Link to={"details"}>
|
||||||
<button className="btn btn-sm btn-view" onClick={() => setDictInfo(paciente)}>
|
<button
|
||||||
<i className="bi bi-eye me-1"></i> Ver Detalhes
|
className="btn btn-sm btn-view"
|
||||||
|
onClick={() => setDictInfo(paciente)}
|
||||||
|
>
|
||||||
|
<i className="bi bi-eye me-1"></i> Ver
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-edit"
|
className="btn btn-sm btn-edit"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@ -559,7 +506,6 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
>
|
>
|
||||||
<i className="bi bi-pencil me-1"></i> Editar
|
<i className="bi bi-pencil me-1"></i> Editar
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-delete"
|
className="btn btn-sm btn-delete"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@ -592,7 +538,7 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
{/* ===== PAGINAÇÃO ===== */}
|
||||||
{pacientesFiltrados.length > 0 && (
|
{pacientesFiltrados.length > 0 && (
|
||||||
<div className="d-flex justify-content-between align-items-center mt-3">
|
<div className="d-flex justify-content-between align-items-center mt-3">
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
@ -648,33 +594,24 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
{/* ===== MODAL DE EXCLUSÃO ===== */}
|
||||||
{showDeleteModal && (
|
{showDeleteModal && (
|
||||||
<div
|
<div
|
||||||
className="modal fade show delete-modal"
|
className="modal fade show delete-modal"
|
||||||
style={{
|
style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }}
|
||||||
display: "block",
|
|
||||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
||||||
}}
|
|
||||||
tabIndex="-1"
|
tabIndex="-1"
|
||||||
onClick={(e) =>
|
onClick={(e) => e.target.classList.contains("modal") && setShowDeleteModal(false)}
|
||||||
e.target.classList.contains("modal") && setShowDeleteModal(false)
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<div className="modal-dialog modal-dialog-centered">
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
||||||
<h5 className="modal-title">
|
<h5 className="modal-title">Confirmação de Exclusão</h5>
|
||||||
Confirmação de Exclusão
|
|
||||||
</h5>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<p className="mb-0 fs-5">
|
<p className="mb-0 fs-5">Tem certeza que deseja excluir este paciente?</p>
|
||||||
Tem certeza que deseja excluir este paciente?
|
<p className="text-muted mt-2">Esta ação não pode ser desfeita.</p>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-footer">
|
<div className="modal-footer">
|
||||||
|
|||||||
@ -1,68 +1,114 @@
|
|||||||
.table-doctor-container {
|
/* ===== VARIÁVEIS CSS ===== */
|
||||||
line-height: 2.5;
|
:root {
|
||||||
|
--primary-color: #1e3a8a;
|
||||||
|
--secondary-color: #3b82f6;
|
||||||
|
--bg-light: #f8f9fa;
|
||||||
|
--border-light: #dee2e6;
|
||||||
|
--text-primary: #495057;
|
||||||
|
--text-muted: #6c757d;
|
||||||
|
--border-radius: 0.375rem;
|
||||||
|
--box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||||
|
--spacing-sm: 0.5rem;
|
||||||
|
--spacing-md: 1rem;
|
||||||
|
--spacing-lg: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== CONTAINER PRINCIPAL ===== */
|
||||||
|
.table-doctor-container {
|
||||||
|
padding: 1.5rem;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== CARD ===== */
|
||||||
.table-doctor-card {
|
.table-doctor-card {
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
box-shadow: var(--box-shadow);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-doctor-card .card-header {
|
.table-doctor-card .card-header {
|
||||||
background-color: #f8f9fa;
|
background-color: var(--bg-light);
|
||||||
border-bottom: 1px solid #dee2e6;
|
border-bottom: 1px solid var(--border-light);
|
||||||
padding: 1rem 1.25rem;
|
padding: 1rem 1.25rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table-doctor-card .card-header h4 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== FILTROS ===== */
|
||||||
.table-doctor-filters {
|
.table-doctor-filters {
|
||||||
background-color: #f8f9fa;
|
background-color: var(--bg-light);
|
||||||
border: 1px solid #dee2e6;
|
border: 1px solid var(--border-light);
|
||||||
border-radius: 0.375rem;
|
border-radius: var(--border-radius);
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-doctor-filters h5 {
|
.table-doctor-filters h5 {
|
||||||
color: #495057;
|
color: var(--text-primary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== TABELA ===== */
|
||||||
.table-doctor-table {
|
.table-doctor-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-doctor-table th {
|
.table-doctor-table th {
|
||||||
background-color: #f8f9fa;
|
background-color: var(--bg-light);
|
||||||
color: #495057;
|
color: var(--text-primary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 15px 8px;
|
padding: 15px 8px;
|
||||||
border-bottom: 2px solid #dee2e6;
|
border-bottom: 2px solid var(--border-light);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-doctor-table td {
|
.table-doctor-table td {
|
||||||
padding: 15px 8px;
|
padding: 15px 8px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border-bottom: 1px solid #dee2e6;
|
border-bottom: 1px solid var(--border-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-doctor-table tbody tr:hover {
|
.table-doctor-table tbody tr:hover {
|
||||||
background-color: rgba(0, 0, 0, 0.025);
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
transition: background-color 0.15s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== BADGES ===== */
|
||||||
.specialty-badge {
|
.specialty-badge {
|
||||||
background-color: #1e3a8a !important;
|
background-color: var(--primary-color) !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
padding: 0.35em 0.65em;
|
padding: 0.35em 0.65em;
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
border-radius: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.results-badge {
|
.status-badge {
|
||||||
background-color: #1e3a8a;
|
padding: 0.35em 0.65em;
|
||||||
color: white;
|
font-size: 0.75em;
|
||||||
padding: 0.5em 0.75em;
|
|
||||||
font-size: 0.875em;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vip-badge {
|
||||||
|
background-color: #ffc107;
|
||||||
|
color: #000;
|
||||||
|
padding: 0.35em 0.65em;
|
||||||
|
font-size: 0.75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.anniversary-badge {
|
.anniversary-badge {
|
||||||
@ -72,12 +118,22 @@
|
|||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.results-badge {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
padding: 0.5em 0.75em;
|
||||||
|
font-size: 0.875em;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== BOTÕES DE AÇÃO ===== */
|
||||||
.btn-view {
|
.btn-view {
|
||||||
background-color: #E6F2FF !important;
|
background-color: #E6F2FF !important;
|
||||||
color: #004085 !important;
|
color: #004085 !important;
|
||||||
border: 1px solid #B8D4F0;
|
border: 1px solid #B8D4F0;
|
||||||
padding: 0.375rem 0.75rem;
|
padding: 0.375rem 0.75rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-view:hover {
|
.btn-view:hover {
|
||||||
@ -91,6 +147,7 @@
|
|||||||
border: 1px solid #FFEAA7;
|
border: 1px solid #FFEAA7;
|
||||||
padding: 0.375rem 0.75rem;
|
padding: 0.375rem 0.75rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-edit:hover {
|
.btn-edit:hover {
|
||||||
@ -104,6 +161,7 @@
|
|||||||
border: 1px solid #F5C6CB;
|
border: 1px solid #F5C6CB;
|
||||||
padding: 0.375rem 0.75rem;
|
padding: 0.375rem 0.75rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-delete:hover {
|
.btn-delete:hover {
|
||||||
@ -111,22 +169,71 @@
|
|||||||
border-color: #ED969E;
|
border-color: #ED969E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advanced-filters {
|
/* ===== CONTADOR ===== */
|
||||||
border: 1px solid #dee2e6;
|
.contador-medicos {
|
||||||
border-radius: 0.375rem;
|
background-color: var(--primary-color);
|
||||||
background-color: white;
|
color: white;
|
||||||
|
padding: 0.5em 0.75em;
|
||||||
|
font-size: 0.875em;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advanced-filters h6 {
|
/* ===== PAGINAÇÃO ===== */
|
||||||
color: #495057;
|
.pagination {
|
||||||
font-weight: 600;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-label.fw-bold {
|
.page-link {
|
||||||
color: #495057;
|
color: var(--text-primary);
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-link:hover {
|
||||||
|
color: var(--primary-color);
|
||||||
|
background-color: #e9ecef;
|
||||||
|
border-color: var(--border-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item.active .page-link {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item.disabled .page-link {
|
||||||
|
color: var(--text-muted);
|
||||||
|
background-color: var(--bg-light);
|
||||||
|
border-color: var(--border-light);
|
||||||
|
}
|
||||||
|
/* ===== FILTROS AVANÇADOS ===== */
|
||||||
|
.advanced-filters {
|
||||||
|
border: 1px solid var(--border-light) !important;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background-color: var(--bg-light);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advanced-filters h6 {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advanced-filters .form-control-sm {
|
||||||
|
font-size: 0.825rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label.fw-bold {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== MODAL DE EXCLUSÃO ===== */
|
||||||
.delete-modal .modal-header {
|
.delete-modal .modal-header {
|
||||||
background-color: rgba(220, 53, 69, 0.1);
|
background-color: rgba(220, 53, 69, 0.1);
|
||||||
border-bottom: 1px solid rgba(220, 53, 69, 0.2);
|
border-bottom: 1px solid rgba(220, 53, 69, 0.2);
|
||||||
@ -137,6 +244,7 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== FILTROS ESPECÍFICOS ===== */
|
||||||
.filter-especialidade {
|
.filter-especialidade {
|
||||||
min-width: 180px !important;
|
min-width: 180px !important;
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
@ -160,59 +268,41 @@
|
|||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 576px) {
|
/* ===== SELECTS COMPACTOS ===== */
|
||||||
.table-doctor-card .card-header { padding: 0.75rem 1rem; }
|
.form-select-sm.compact-select {
|
||||||
.table-doctor-table th, .table-doctor-table td { padding: 8px 6px; }
|
min-width: 150px;
|
||||||
.table-doctor-table thead th:nth-child(2),
|
border: 1px solid var(--border-light);
|
||||||
.table-doctor-table thead th:nth-child(4),
|
border-radius: var(--border-radius);
|
||||||
.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) {
|
.form-select.form-select-sm.w-auto {
|
||||||
.table-doctor-table {
|
border: 1px solid var(--border-light);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-doctor-table th,
|
.form-select-sm:focus {
|
||||||
.table-doctor-table td {
|
border-color: var(--primary-color);
|
||||||
padding: 10px 6px;
|
box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-view,
|
.btn-outline-secondary.btn-sm {
|
||||||
.btn-edit,
|
border-color: var(--text-muted);
|
||||||
.btn-delete {
|
color: var(--text-muted);
|
||||||
padding: 0.25rem 0.5rem;
|
font-size: 0.8rem;
|
||||||
font-size: 0.75rem;
|
padding: 0.35rem 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filtros-basicos {
|
.btn-outline-secondary.btn-sm:hover {
|
||||||
flex-direction: column;
|
background-color: var(--text-muted);
|
||||||
align-items: stretch;
|
color: white;
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-especialidade {
|
|
||||||
min-width: 100% !important;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-buttons-container {
|
|
||||||
justify-content: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-btn {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== ESTADOS VAZIOS ===== */
|
||||||
.empty-state {
|
.empty-state {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6c757d;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-state td {
|
.empty-state td {
|
||||||
@ -220,72 +310,6 @@
|
|||||||
padding: 2rem !important;
|
padding: 2rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-active .badge {
|
|
||||||
font-size: 0.75em;
|
|
||||||
padding: 0.4em 0.65em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-doctor-table tbody tr {
|
|
||||||
transition: background-color 0.15s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-view,
|
|
||||||
.btn-edit,
|
|
||||||
.btn-delete {
|
|
||||||
transition: all 0.15s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.contador-medicos {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.text-center.py-4 .text-muted {
|
.text-center.py-4 .text-muted {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
@ -305,8 +329,104 @@
|
|||||||
padding: 2rem !important;
|
padding: 2rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== BADGES DE FILTROS ATIVOS ===== */
|
||||||
|
.filters-active .badge {
|
||||||
|
font-size: 0.75em;
|
||||||
|
padding: 0.4em 0.65em;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== SEÇÃO DE PAGINAÇÃO ===== */
|
||||||
|
.d-flex.justify-content-between.align-items-center {
|
||||||
|
border-top: 1px solid var(--border-light);
|
||||||
|
padding-top: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== NOME DE PACIENTE/MÉDICO COM BADGES ===== */
|
||||||
|
.patient-name-container,
|
||||||
|
.doctor-name-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-badges,
|
||||||
|
.doctor-badges {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25rem;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== TRANSIÇÕES ===== */
|
||||||
|
.table-doctor-table tbody tr {
|
||||||
|
transition: background-color 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== RESPONSIVIDADE ===== */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
.table-doctor-container {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-doctor-card .card-header {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-doctor-filters .d-flex.flex-wrap.align-items-center.gap-3 {
|
||||||
|
gap: 1rem !important;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-doctor-filters .d-flex.align-items-center.gap-2 {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-doctor-filters .form-select-sm.compact-select {
|
||||||
|
min-width: 100% !important;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vr.d-none.d-md-block {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-doctor-table {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-doctor-table th,
|
||||||
|
.table-doctor-table td {
|
||||||
|
padding: 10px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-view,
|
||||||
|
.btn-edit,
|
||||||
|
.btn-delete {
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-doctor-filters .d-flex {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-doctor-filters .form-select {
|
||||||
|
min-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-name-container,
|
||||||
|
.doctor-name-container {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start !important;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.d-flex.justify-content-between.align-items-center {
|
.d-flex.justify-content-between.align-items-center {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
@ -332,17 +452,63 @@
|
|||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
padding: 0.4em 0.6em;
|
padding: 0.4em 0.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filtros-basicos {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-select.form-select-sm.w-auto {
|
.filter-especialidade {
|
||||||
border: 1px solid #dee2e6;
|
min-width: 100% !important;
|
||||||
border-radius: 0.375rem;
|
max-width: 100%;
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filter-buttons-container {
|
||||||
.filters-active .badge {
|
justify-content: stretch;
|
||||||
font-size: 0.75em;
|
}
|
||||||
padding: 0.4em 0.65em;
|
|
||||||
margin-bottom: 0.25rem;
|
.filter-btn {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ocultar colunas em mobile */
|
||||||
|
.table-doctor-table thead th:nth-child(3),
|
||||||
|
.table-doctor-table thead th:nth-child(4),
|
||||||
|
.table-doctor-table tbody td:nth-child(3),
|
||||||
|
.table-doctor-table tbody td:nth-child(4) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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-filters .btn-sm {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-buttons-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ocultar mais colunas em telas muito pequenas */
|
||||||
|
.table-doctor-table thead th:nth-child(2),
|
||||||
|
.table-doctor-table thead th:nth-child(5),
|
||||||
|
.table-doctor-table tbody td:nth-child(2),
|
||||||
|
.table-doctor-table tbody td:nth-child(5) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,3 +1,29 @@
|
|||||||
|
/* ===== VARIÁVEIS CSS PADRONIZADAS ===== */
|
||||||
|
:root {
|
||||||
|
--primary-blue: #1e3a8a;
|
||||||
|
--light-blue: #E6F2FF;
|
||||||
|
--medium-blue: #D1E7FF;
|
||||||
|
--border-blue: #B8D4F0;
|
||||||
|
--warning-light: #FFF3CD;
|
||||||
|
--warning-dark: #856404;
|
||||||
|
--warning-border: #FFEAA7;
|
||||||
|
--danger-light: #F8D7DA;
|
||||||
|
--danger-dark: #721C24;
|
||||||
|
--danger-border: #F5C6CB;
|
||||||
|
--success-light: #d1edff;
|
||||||
|
--success-dark: #0d6efd;
|
||||||
|
--bg-light: #f1f4fb;
|
||||||
|
--border-light: #dee2e6;
|
||||||
|
--text-muted: #6c757d;
|
||||||
|
--text-dark: #495057;
|
||||||
|
--spacing-xs: 0.25rem;
|
||||||
|
--spacing-sm: 0.5rem;
|
||||||
|
--spacing-md: 1rem;
|
||||||
|
--spacing-lg: 1.5rem;
|
||||||
|
--border-radius: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== ESTILOS EXISTENTES MANTIDOS ===== */
|
||||||
.table-paciente-container {
|
.table-paciente-container {
|
||||||
line-height: 2.5;
|
line-height: 2.5;
|
||||||
}
|
}
|
||||||
@ -11,65 +37,71 @@
|
|||||||
background-color: #f8f9fa;
|
background-color: #f8f9fa;
|
||||||
border-bottom: 1px solid #dee2e6;
|
border-bottom: 1px solid #dee2e6;
|
||||||
padding: 1rem 1.25rem;
|
padding: 1rem 1.25rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== ESTILOS PADRONIZADOS DA TABELA ===== */
|
||||||
.table-paciente-filters {
|
.table-paciente-filters {
|
||||||
background-color: #f8f9fa;
|
background-color: var(--bg-light);
|
||||||
border: 1px solid #dee2e6;
|
border: 1px solid var(--border-light);
|
||||||
border-radius: 0.375rem;
|
border-radius: var(--border-radius);
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-paciente-filters h5 {
|
.table-paciente-filters h5 {
|
||||||
color: #495057;
|
color: var(--text-dark);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-paciente-table {
|
.table-paciente-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-paciente-table th {
|
.table-paciente-table th {
|
||||||
background-color: #f8f9fa;
|
background-color: var(--bg-light);
|
||||||
color: #495057;
|
color: var(--text-dark);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 15px 8px;
|
padding: 12px 8px;
|
||||||
border-bottom: 2px solid #dee2e6;
|
border-bottom: 2px solid var(--border-light);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-paciente-table td {
|
.table-paciente-table td {
|
||||||
padding: 15px 8px;
|
padding: 12px 8px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border-bottom: 1px solid #dee2e6;
|
border-bottom: 1px solid var(--border-light);
|
||||||
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-paciente-table tbody tr:hover {
|
.table-paciente-table tbody tr:hover {
|
||||||
background-color: rgba(0, 0, 0, 0.025);
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== BADGES E STATUS ===== */
|
||||||
.insurance-badge {
|
.insurance-badge {
|
||||||
background-color: #6c757d !important;
|
background-color: transparent !important;
|
||||||
color: white !important;
|
color: var(--text-dark) !important;
|
||||||
padding: 0.35em 0.65em;
|
padding: 0.35em 0.65em;
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.vip-badge {
|
.vip-badge {
|
||||||
background-color: #1e3a8a !important;
|
background-color: var(--primary-blue) !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
padding: 0.35em 0.65em;
|
padding: 0.35em 0.65em;
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
.results-badge {
|
|
||||||
background-color: #1e3a8a;
|
|
||||||
color: white;
|
|
||||||
padding: 0.5em 0.75em;
|
|
||||||
font-size: 0.875em;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.anniversary-badge {
|
.anniversary-badge {
|
||||||
@ -77,27 +109,52 @@
|
|||||||
color: #000;
|
color: #000;
|
||||||
padding: 0.35em 0.65em;
|
padding: 0.35em 0.65em;
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.status-badge {
|
||||||
|
padding: 0.35em 0.65em;
|
||||||
|
font-size: 0.75em;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
display: inline-block;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.ativo {
|
||||||
|
background-color: var(--primary-blue);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.inativo {
|
||||||
|
background-color: var(--text-muted);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== BOTÕES DE AÇÃO ===== */
|
||||||
.btn-view {
|
.btn-view {
|
||||||
background-color: #E6F2FF !important;
|
background-color: var(--light-blue) !important;
|
||||||
color: #004085 !important;
|
color: #004085 !important;
|
||||||
border: 1px solid #B8D4F0;
|
border: 1px solid var(--border-blue);
|
||||||
padding: 0.375rem 0.75rem;
|
padding: 0.375rem 0.75rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-view:hover {
|
.btn-view:hover {
|
||||||
background-color: #D1E7FF !important;
|
background-color: var(--medium-blue) !important;
|
||||||
border-color: #9EC5FE;
|
border-color: #9EC5FE;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-edit {
|
.btn-edit {
|
||||||
background-color: #FFF3CD !important;
|
background-color: var(--warning-light) !important;
|
||||||
color: #856404 !important;
|
color: var(--warning-dark) !important;
|
||||||
border: 1px solid #FFEAA7;
|
border: 1px solid var(--warning-border);
|
||||||
padding: 0.375rem 0.75rem;
|
padding: 0.375rem 0.75rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-edit:hover {
|
.btn-edit:hover {
|
||||||
@ -106,11 +163,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-delete {
|
.btn-delete {
|
||||||
background-color: #F8D7DA !important;
|
background-color: var(--danger-light) !important;
|
||||||
color: #721C24 !important;
|
color: var(--danger-dark) !important;
|
||||||
border: 1px solid #F5C6CB;
|
border: 1px solid var(--danger-border);
|
||||||
padding: 0.375rem 0.75rem;
|
padding: 0.375rem 0.75rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-delete:hover {
|
.btn-delete:hover {
|
||||||
@ -118,22 +177,25 @@
|
|||||||
border-color: #ED969E;
|
border-color: #ED969E;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== FILTROS AVANÇADOS ===== */
|
||||||
.advanced-filters {
|
.advanced-filters {
|
||||||
border: 1px solid #dee2e6;
|
border: 1px solid var(--border-light);
|
||||||
border-radius: 0.375rem;
|
border-radius: var(--border-radius);
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advanced-filters h6 {
|
.advanced-filters h6 {
|
||||||
color: #495057;
|
color: var(--text-dark);
|
||||||
|
font-size: 0.9rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-label.fw-bold {
|
.form-label.fw-bold {
|
||||||
color: #495057;
|
color: var(--text-dark);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== MODAL DE EXCLUSÃO ===== */
|
||||||
.delete-modal .modal-header {
|
.delete-modal .modal-header {
|
||||||
background-color: rgba(220, 53, 69, 0.1);
|
background-color: rgba(220, 53, 69, 0.1);
|
||||||
border-bottom: 1px solid rgba(220, 53, 69, 0.2);
|
border-bottom: 1px solid rgba(220, 53, 69, 0.2);
|
||||||
@ -144,6 +206,103 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== CONTADOR DE PACIENTES ===== */
|
||||||
|
.contador-pacientes {
|
||||||
|
background-color: var(--primary-blue);
|
||||||
|
color: white;
|
||||||
|
padding: 0.5em 0.75em;
|
||||||
|
font-size: 0.875em;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== PAGINAÇÃO ===== */
|
||||||
|
.pagination {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-link {
|
||||||
|
color: var(--text-dark);
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-link:hover {
|
||||||
|
color: var(--primary-blue);
|
||||||
|
background-color: #e9ecef;
|
||||||
|
border-color: var(--border-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item.active .page-link {
|
||||||
|
background-color: var(--primary-blue);
|
||||||
|
border-color: var(--primary-blue);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item.disabled .page-link {
|
||||||
|
color: var(--text-muted);
|
||||||
|
background-color: var(--bg-light);
|
||||||
|
border-color: var(--border-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== AJUSTES ESPECÍFICOS PARA OS FILTROS ===== */
|
||||||
|
.table-paciente-filters .form-select-sm {
|
||||||
|
font-size: 0.825rem;
|
||||||
|
padding: 0.35rem 0.5rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-paciente-filters .form-label.small {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #6c757d;
|
||||||
|
min-width: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Alinhamento dos grupos de filtro */
|
||||||
|
.table-paciente-filters .d-flex.align-items-center.gap-2 {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ajuste do contador */
|
||||||
|
.contador-pacientes {
|
||||||
|
background-color: #1e3a8a;
|
||||||
|
color: white;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Botão de filtros avançados */
|
||||||
|
.btn-link {
|
||||||
|
color: #1e3a8a !important;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-link:hover {
|
||||||
|
color: #162d6b !important;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selects compactos */
|
||||||
|
.compact-select {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 0.45rem 0.5rem;
|
||||||
|
min-width: 150px;
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== ESTADOS VAZIOS ===== */
|
||||||
.empty-state {
|
.empty-state {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -155,22 +314,57 @@
|
|||||||
padding: 2rem !important;
|
padding: 2rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-active .badge {
|
.text-center.py-4 .text-muted {
|
||||||
font-size: 0.75em;
|
padding: 2rem;
|
||||||
padding: 0.4em 0.65em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-paciente-table tbody tr {
|
.text-center.py-4 .bi-search {
|
||||||
transition: background-color 0.15s ease-in-out;
|
font-size: 3rem;
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-view,
|
.text-center.py-4 p {
|
||||||
.btn-edit,
|
margin-bottom: 0.5rem;
|
||||||
.btn-delete {
|
font-size: 1.1rem;
|
||||||
transition: all 0.15s ease-in-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-center.py-4 td {
|
||||||
|
border-bottom: none;
|
||||||
|
padding: 2rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== RESPONSIVIDADE ===== */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
.table-paciente-container {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-paciente-card .card-header {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-paciente-filters .d-flex.flex-wrap.align-items-center.gap-3 {
|
||||||
|
gap: 1rem !important;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-paciente-filters .d-flex.align-items-center.gap-2 {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-paciente-filters .form-select-sm.compact-select {
|
||||||
|
min-width: 100% !important;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vr.d-none.d-md-block {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.table-paciente-table {
|
.table-paciente-table {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
@ -202,71 +396,75 @@
|
|||||||
gap: 0.25rem;
|
gap: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.patient-badges {
|
.d-flex.justify-content-between.align-items-center {
|
||||||
margin-left: 0 !important;
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: stretch !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ocultar colunas em mobile */
|
||||||
|
.table-paciente-table thead th:nth-child(3),
|
||||||
|
.table-paciente-table thead th:nth-child(4),
|
||||||
|
.table-paciente-table tbody td:nth-child(3),
|
||||||
|
.table-paciente-table tbody td:nth-child(4) {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.compact-select {
|
@media (max-width: 576px) {
|
||||||
font-size: 1.0rem;
|
.table-paciente-card .card-header {
|
||||||
padding: 0.45rem 0.5rem;
|
padding: 0.75rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.compact-select option {
|
.table-paciente-table th,
|
||||||
font-size: 0.875rem;
|
.table-paciente-table td {
|
||||||
|
padding: 8px 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-paciente-filters .btn-sm {
|
.table-paciente-filters .btn-sm {
|
||||||
font-size: 0.8rem;
|
width: 100%;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-paciente-filters .d-flex {
|
/* Ocultar mais colunas em telas muito pequenas */
|
||||||
align-items: center;
|
.table-paciente-table thead th:nth-child(2),
|
||||||
gap: 8px;
|
.table-paciente-table thead th:nth-child(5),
|
||||||
|
.table-paciente-table tbody td:nth-child(2),
|
||||||
|
.table-paciente-table tbody td:nth-child(5) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== ESTILOS PARA PAGINAÇÃO ===== */
|
/* ===== MELHORIAS VISUAIS ===== */
|
||||||
|
.form-select-sm:focus {
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para a 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;
|
border-color: #1e3a8a;
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-secondary.btn-sm {
|
||||||
|
border-color: #6c757d;
|
||||||
|
color: #6c757d;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0.35rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-secondary.btn-sm:hover {
|
||||||
|
background-color: #6c757d;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-item.disabled .page-link {
|
.advanced-filters {
|
||||||
color: #6c757d;
|
background-color: var(--bg-light);
|
||||||
background-color: #f8f9fa;
|
border: 1px solid #dee2e6 !important;
|
||||||
border-color: #dee2e6;
|
}
|
||||||
|
|
||||||
|
.advanced-filters .form-control-sm {
|
||||||
|
font-size: 0.825rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advanced-filters h6 {
|
||||||
|
color: #495057;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ajustes para a seção de paginação */
|
/* Ajustes para a seção de paginação */
|
||||||
@ -276,26 +474,6 @@
|
|||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Estilos para empty state */
|
|
||||||
.text-center.py-4 .text-muted {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center.py-4 .bi-search {
|
|
||||||
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 para paginação */
|
/* Responsividade para paginação */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.d-flex.justify-content-between.align-items-center {
|
.d-flex.justify-content-between.align-items-center {
|
||||||
@ -332,19 +510,26 @@
|
|||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Melhorar a aparência dos badges de filtros ativos */
|
/* Melhorar a aparência dos badges de paciente */
|
||||||
.filters-active .badge {
|
.patient-badges {
|
||||||
font-size: 0.75em;
|
display: flex;
|
||||||
padding: 0.4em 0.65em;
|
gap: 0.25rem;
|
||||||
margin-bottom: 0.25rem;
|
margin-left: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 576px) {
|
.patient-name-container {
|
||||||
.table-paciente-card .card-header { padding: 0.75rem 1rem; }
|
display: flex;
|
||||||
.table-paciente-table th, .table-paciente-table td { padding: 8px 6px; }
|
align-items: center;
|
||||||
.table-paciente-table thead th:nth-child(2),
|
flex-wrap: wrap;
|
||||||
.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; }
|
/* Transições suaves */
|
||||||
.table-paciente-filters .btn-sm { width: 100%; }
|
.table-paciente-table tbody tr {
|
||||||
|
transition: background-color 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-view,
|
||||||
|
.btn-edit,
|
||||||
|
.btn-delete {
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user