Compare commits
3 Commits
b0ba36507b
...
6312a72895
| Author | SHA1 | Date | |
|---|---|---|---|
| 6312a72895 | |||
| 57f8024bb2 | |||
| 496a83ecc1 |
6233
package-lock.json
generated
6233
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
.dashboard-container {
|
.dashboard-container {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
font-family: 'Arial', sans-serif;
|
font-family: 'Arial', sans-serif;
|
||||||
@ -6,7 +5,6 @@
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.dashboard-header {
|
.dashboard-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -34,143 +32,133 @@
|
|||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.3s, transform 0.25s ease, box-shadow 0.25s ease;
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 2px 8px rgba(30, 58, 138, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-user-btn:hover {
|
.new-user-btn:hover {
|
||||||
background-color: #162d6b;
|
background-color: #162d6b;
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0px 4px 12px rgba(30, 58, 138, 0.3);
|
box-shadow: 0 4px 12px rgba(30, 58, 138, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.filters-container {
|
.filters-container {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 1.5rem;
|
padding: 1.2rem;
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-container:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-title {
|
.filters-title {
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 0.3rem;
|
margin-bottom: 0.3rem;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-subtitle {
|
.filters-subtitle {
|
||||||
font-size: 0.9rem;
|
font-size: 0.85rem;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-content {
|
.filters-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 0.8rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-input {
|
.filters-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0.6rem 1rem;
|
padding: 0.5rem 0.8rem;
|
||||||
border: 1px solid #d1d5db;
|
border: 1px solid #d1d5db;
|
||||||
border-radius: 8px;
|
border-radius: 6px;
|
||||||
font-size: 0.95rem;
|
font-size: 0.9rem;
|
||||||
color: #333;
|
color: #333;
|
||||||
transition: border-color 0.2s, box-shadow 0.2s;
|
min-width: 200px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-input:focus {
|
.filters-input:focus {
|
||||||
border-color: #1e3a8a;
|
border-color: #1e3a8a;
|
||||||
box-shadow: 0px 0px 0px 3px rgba(30, 58, 138, 0.2);
|
box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-select {
|
.filters-select {
|
||||||
padding: 0.6rem 1rem;
|
padding: 0.5rem 0.8rem;
|
||||||
border: 1px solid #d1d5db;
|
border: 1px solid #d1d5db;
|
||||||
border-radius: 8px;
|
border-radius: 6px;
|
||||||
font-size: 0.95rem;
|
font-size: 0.9rem;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #333;
|
color: #333;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: border-color 0.2s, box-shadow 0.2s;
|
min-width: 140px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-select:focus {
|
.filters-select:focus {
|
||||||
border-color: #1e3a8a;
|
border-color: #1e3a8a;
|
||||||
box-shadow: 0px 0px 0px 3px rgba(30, 58, 138, 0.2);
|
box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
|
||||||
outline: none;
|
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));
|
||||||
gap: 1.5rem;
|
gap: 1.2rem;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 1.5rem;
|
padding: 1.2rem;
|
||||||
border-radius: 12px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
transition: transform 0.25s ease, box-shadow 0.25s ease, border 0.25s ease, background 0.25s ease;
|
transition: all 0.25s ease;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlight:hover {
|
.highlight:hover {
|
||||||
transform: translateY(-6px);
|
transform: translateY(-4px);
|
||||||
box-shadow: 0 8px 20px rgba(30, 58, 138, 0.2);
|
box-shadow: 0 6px 16px rgba(30, 58, 138, 0.2);
|
||||||
background: #f8faff;
|
background: #f8faff;
|
||||||
border: 1px solid #1e3a8a33;
|
border: 1px solid #1e3a8a33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-label {
|
.card-label {
|
||||||
font-size: 0.9rem;
|
font-size: 0.85rem;
|
||||||
color: #999;
|
color: #999;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-value {
|
.card-value {
|
||||||
font-size: 1.8rem;
|
font-size: 1.6rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-extra {
|
.card-extra {
|
||||||
font-size: 0.85rem;
|
font-size: 0.8rem;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-extra.positive {
|
.card-extra.positive {
|
||||||
color: #1e3a8a;
|
color: #1e3a8a;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.user-table-container {
|
.user-table-container {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 1.5rem;
|
padding: 1.2rem;
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-table-container:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 6px 14px rgba(0,0,0,0.15);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-table-container h2 {
|
.user-table-container h2 {
|
||||||
@ -193,7 +181,7 @@
|
|||||||
|
|
||||||
.user-table th,
|
.user-table th,
|
||||||
.user-table td {
|
.user-table td {
|
||||||
padding: 12px 15px;
|
padding: 10px 12px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border-bottom: 1px solid #e0e0e0;
|
border-bottom: 1px solid #e0e0e0;
|
||||||
}
|
}
|
||||||
@ -202,10 +190,11 @@
|
|||||||
background-color: #f3f4f6;
|
background-color: #f3f4f6;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-table tr {
|
.user-table tr {
|
||||||
transition: background-color 0.25s ease;
|
transition: background-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-table tr:hover {
|
.user-table tr:hover {
|
||||||
@ -214,44 +203,115 @@
|
|||||||
|
|
||||||
.profile-badge {
|
.profile-badge {
|
||||||
background-color: #1e3a8a;
|
background-color: #1e3a8a;
|
||||||
color: #f7f7f7;
|
color: white;
|
||||||
padding: 3px 8px;
|
padding: 4px 10px;
|
||||||
border-radius: 8px;
|
border-radius: 6px;
|
||||||
font-size: 0.85rem;
|
font-size: 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-badge {
|
.status-badge {
|
||||||
padding: 3px 8px;
|
padding: 4px 10px;
|
||||||
border-radius: 8px;
|
border-radius: 6px;
|
||||||
font-size: 0.85rem;
|
font-size: 0.8rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
font-weight: 500;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-badge.ativo {
|
.status-badge.ativo {
|
||||||
background-color: #28a745;
|
background-color: #1e3a8a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-badge.inativo {
|
.status-badge.inativo {
|
||||||
background-color: #dc3545;
|
background-color: #6c757d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-icon {
|
.action-btn {
|
||||||
|
border: none;
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #555;
|
transition: all 0.2s ease;
|
||||||
transition: color 0.2s, transform 0.2s;
|
border-radius: 4px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-icon:hover {
|
.action-btn.detalhes {
|
||||||
color: #1e3a8a;
|
background-color: #e6f2ff;
|
||||||
transform: scale(1.2);
|
color: #004085;
|
||||||
|
border: 1px solid #b8d4ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn.detalhes:hover {
|
||||||
|
background-color: #cce4ff;
|
||||||
|
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;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn:hover {
|
||||||
|
background-color: #162d6b;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 8px rgba(30, 58, 138, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-btn {
|
||||||
|
background-color: #fff3cd;
|
||||||
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .dashboard-container {
|
html[data-bs-theme="dark"] .dashboard-container {
|
||||||
@ -266,18 +326,17 @@ html[data-bs-theme="dark"] .dashboard-subtitle {
|
|||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .new-user-btn {
|
html[data-bs-theme="dark"] .new-user-btn {
|
||||||
background-color: #2563eb;
|
background-color: #1e3a8a;
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .new-user-btn:hover {
|
html[data-bs-theme="dark"] .new-user-btn:hover {
|
||||||
background-color: #1e40af;
|
background-color: #162d6b;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .filters-container,
|
html[data-bs-theme="dark"] .filters-container,
|
||||||
html[data-bs-theme="dark"] .user-table-container {
|
html[data-bs-theme="dark"] .user-table-container {
|
||||||
background: #1a1a1a;
|
background: #1a1a1a;
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0.4);
|
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .filters-title,
|
html[data-bs-theme="dark"] .filters-title,
|
||||||
@ -299,19 +358,19 @@ html[data-bs-theme="dark"] .filters-select {
|
|||||||
|
|
||||||
html[data-bs-theme="dark"] .filters-input:focus,
|
html[data-bs-theme="dark"] .filters-input:focus,
|
||||||
html[data-bs-theme="dark"] .filters-select:focus {
|
html[data-bs-theme="dark"] .filters-select:focus {
|
||||||
border-color: #2563eb;
|
border-color: #1e3a8a;
|
||||||
box-shadow: 0px 0px 0px 3px rgba(37, 99, 235, 0.2);
|
box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .cards-container .card {
|
html[data-bs-theme="dark"] .cards-container .card {
|
||||||
background-color: #181818;
|
background-color: #181818;
|
||||||
color: #e0e0e0;
|
color: #e0e0e0;
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0.4);
|
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .highlight:hover {
|
html[data-bs-theme="dark"] .highlight:hover {
|
||||||
background: #232a3a;
|
background: #1a1f2e;
|
||||||
border: 1px solid #2563eb33;
|
border: 1px solid #1e3a8a33;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .card-label {
|
html[data-bs-theme="dark"] .card-label {
|
||||||
@ -327,7 +386,7 @@ html[data-bs-theme="dark"] .card-extra {
|
|||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .card-extra.positive {
|
html[data-bs-theme="dark"] .card-extra.positive {
|
||||||
color: #2563eb;
|
color: #1e3a8a;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .user-table th {
|
html[data-bs-theme="dark"] .user-table th {
|
||||||
@ -341,26 +400,39 @@ html[data-bs-theme="dark"] .user-table td {
|
|||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .user-table tr:hover {
|
html[data-bs-theme="dark"] .user-table tr:hover {
|
||||||
background-color: #232a3a;
|
background-color: #1a1f2e;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .profile-badge {
|
html[data-bs-theme="dark"] .profile-badge {
|
||||||
background-color: #2563eb;
|
background-color: #1e3a8a;
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .status-badge.ativo {
|
html[data-bs-theme="dark"] .action-btn.detalhes {
|
||||||
background-color: #28a745;
|
background-color: #e6f2ff;
|
||||||
|
color: #004085;
|
||||||
|
border: 1px solid #b8d4ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .status-badge.inativo {
|
html[data-bs-theme="dark"] .action-btn.detalhes:hover {
|
||||||
background-color: #dc3545;
|
background-color: #cce4ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .action-icon {
|
html[data-bs-theme="dark"] .action-btn.editar {
|
||||||
color: #bdbdbd;
|
background-color: #fff3cd;
|
||||||
|
color: #856405;
|
||||||
|
border: 1px solid #ffeaa7;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme="dark"] .action-icon:hover {
|
html[data-bs-theme="dark"] .action-btn.editar:hover {
|
||||||
color: #2563eb;
|
background-color: #ffeaa7;
|
||||||
|
}
|
||||||
|
|
||||||
|
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,14 +1,9 @@
|
|||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import "./gestao.css";
|
import "./gestao.css";
|
||||||
import { FaEdit, FaTrash } from "react-icons/fa";
|
|
||||||
|
|
||||||
|
|
||||||
function UserDashboard() {
|
function UserDashboard() {
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<div className="dashboard-container">
|
<div className="dashboard-container">
|
||||||
|
|
||||||
<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>
|
||||||
@ -91,8 +86,9 @@ function UserDashboard() {
|
|||||||
<td><span className="status-badge ativo">Ativo</span></td>
|
<td><span className="status-badge ativo">Ativo</span></td>
|
||||||
<td>20/12/2024, 08:30</td>
|
<td>20/12/2024, 08:30</td>
|
||||||
<td className="actions">
|
<td className="actions">
|
||||||
<span className="action-icon"></span>
|
<button className="action-btn detalhes">Ver Detalhes</button>
|
||||||
<span className="action-icon"></span>
|
<button className="action-btn editar">Editar</button>
|
||||||
|
<button className="action-btn excluir">Excluir</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@ -103,8 +99,9 @@ function UserDashboard() {
|
|||||||
<td><span className="status-badge ativo">Ativo</span></td>
|
<td><span className="status-badge ativo">Ativo</span></td>
|
||||||
<td>19/12/2024, 14:20</td>
|
<td>19/12/2024, 14:20</td>
|
||||||
<td className="actions">
|
<td className="actions">
|
||||||
<span className="action-icon"></span>
|
<button className="action-btn detalhes">Ver Detalhes</button>
|
||||||
<span className="action-icon"></span>
|
<button className="action-btn editar">Editar</button>
|
||||||
|
<button className="action-btn excluir">Excluir</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@ -115,8 +112,9 @@ function UserDashboard() {
|
|||||||
<td><span className="status-badge ativo">Ativo</span></td>
|
<td><span className="status-badge ativo">Ativo</span></td>
|
||||||
<td>20/12/2024, 07:45</td>
|
<td>20/12/2024, 07:45</td>
|
||||||
<td className="actions">
|
<td className="actions">
|
||||||
<span className="action-icon"></span>
|
<button className="action-btn detalhes">Ver Detalhes</button>
|
||||||
<span className="action-icon"></span>
|
<button className="action-btn editar">Editar</button>
|
||||||
|
<button className="action-btn excluir">Excluir</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@ -127,8 +125,9 @@ function UserDashboard() {
|
|||||||
<td><span className="status-badge inativo">Inativo</span></td>
|
<td><span className="status-badge inativo">Inativo</span></td>
|
||||||
<td>15/12/2024, 16:30</td>
|
<td>15/12/2024, 16:30</td>
|
||||||
<td className="actions">
|
<td className="actions">
|
||||||
<span className="action-icon"></span>
|
<button className="action-btn detalhes">Ver Detalhes</button>
|
||||||
<span className="person-badge-fill"></span>
|
<button className="action-btn editar">Editar</button>
|
||||||
|
<button className="action-btn excluir">Excluir</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -138,5 +137,4 @@ function UserDashboard() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default UserDashboard;
|
export default UserDashboard;
|
||||||
@ -2,7 +2,6 @@ import React, { useState, useMemo, useEffect, useCallback } from 'react';
|
|||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import API_KEY from '../components/utils/apiKeys.js';
|
import API_KEY from '../components/utils/apiKeys.js';
|
||||||
import AgendamentoCadastroManager from '../pages/AgendamentoCadastroManager.jsx';
|
import AgendamentoCadastroManager from '../pages/AgendamentoCadastroManager.jsx';
|
||||||
// Removidos imports não utilizados no novo fluxo
|
|
||||||
import { GetAllDoctors } from '../components/utils/Functions-Endpoints/Doctor.js';
|
import { GetAllDoctors } from '../components/utils/Functions-Endpoints/Doctor.js';
|
||||||
import { useAuth } from '../components/utils/AuthProvider.js';
|
import { useAuth } from '../components/utils/AuthProvider.js';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
@ -25,7 +24,7 @@ const Agendamento = () => {
|
|||||||
const { getAuthorizationHeader, user } = useAuth();
|
const { getAuthorizationHeader, user } = useAuth();
|
||||||
const authHeader = getAuthorizationHeader();
|
const authHeader = getAuthorizationHeader();
|
||||||
|
|
||||||
// ID do médico que você quer visualizar
|
|
||||||
const ID_MEDICO_ESPECIFICO = "078d2a67-b4c1-43c8-ae32-c1e75bb5b3df";
|
const ID_MEDICO_ESPECIFICO = "078d2a67-b4c1-43c8-ae32-c1e75bb5b3df";
|
||||||
|
|
||||||
const [listaTodosAgendamentos, setListaTodosAgendamentos] = useState([]);
|
const [listaTodosAgendamentos, setListaTodosAgendamentos] = useState([]);
|
||||||
@ -56,7 +55,7 @@ const Agendamento = () => {
|
|||||||
year: currentDate.year()
|
year: currentDate.year()
|
||||||
});
|
});
|
||||||
|
|
||||||
// ✨ ALTERAÇÃO PRINCIPAL: A busca agora filtra pelo ID do médico direto na API
|
|
||||||
const fetchAppointments = useCallback(async () => {
|
const fetchAppointments = useCallback(async () => {
|
||||||
if (!authHeader) return;
|
if (!authHeader) return;
|
||||||
setShowSpinner(true);
|
setShowSpinner(true);
|
||||||
@ -65,7 +64,7 @@ const Agendamento = () => {
|
|||||||
myHeaders.append("apikey", API_KEY);
|
myHeaders.append("apikey", API_KEY);
|
||||||
const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
|
const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
|
||||||
|
|
||||||
// A URL agora contém o filtro para o ID do médico específico
|
|
||||||
const apiUrl = `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?doctor_id=eq.${ID_MEDICO_ESPECIFICO}&select=*`;
|
const apiUrl = `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?doctor_id=eq.${ID_MEDICO_ESPECIFICO}&select=*`;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@ -131,7 +130,7 @@ const Agendamento = () => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if(authHeader) {
|
if(authHeader) {
|
||||||
fetchAppointments();
|
fetchAppointments();
|
||||||
// A busca de todos os médicos pode continuar caso a secretária precise ver a lista
|
|
||||||
if (user?.role !== 'doctor') {
|
if (user?.role !== 'doctor') {
|
||||||
GetAllDoctors(authHeader).then(docs => {
|
GetAllDoctors(authHeader).then(docs => {
|
||||||
if (docs) {
|
if (docs) {
|
||||||
@ -144,7 +143,7 @@ const Agendamento = () => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const processData = async () => {
|
const processData = async () => {
|
||||||
// Como os dados já vêm filtrados da API, não precisamos mais da verificação de 'user' aqui
|
|
||||||
if (!listaTodosAgendamentos.length) {
|
if (!listaTodosAgendamentos.length) {
|
||||||
setAgendamentosOrganizados({});
|
setAgendamentosOrganizados({});
|
||||||
setFilaEsperaData([]);
|
setFilaEsperaData([]);
|
||||||
@ -153,8 +152,7 @@ const Agendamento = () => {
|
|||||||
|
|
||||||
setShowSpinner(true);
|
setShowSpinner(true);
|
||||||
|
|
||||||
// ✨ SIMPLIFICAÇÃO: Não é mais necessário filtrar por `user.role`,
|
|
||||||
// pois a API já retornou apenas os agendamentos do médico desejado.
|
|
||||||
const appointmentsToShow = listaTodosAgendamentos;
|
const appointmentsToShow = listaTodosAgendamentos;
|
||||||
|
|
||||||
const patientIdsToFetch = new Set();
|
const patientIdsToFetch = new Set();
|
||||||
@ -179,7 +177,7 @@ const Agendamento = () => {
|
|||||||
}).then(res => res.json())
|
}).then(res => res.json())
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
fetchPromises.push(Promise.resolve(null)); // Mantém a ordem do Promise.all
|
fetchPromises.push(Promise.resolve(null));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (doctorIdsToFetch.size > 0) {
|
if (doctorIdsToFetch.size > 0) {
|
||||||
@ -239,9 +237,9 @@ const Agendamento = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
processData();
|
processData();
|
||||||
}, [listaTodosAgendamentos, authHeader]); // Removido 'user' das dependências pois não é mais usado aqui
|
}, [listaTodosAgendamentos, authHeader]);
|
||||||
|
|
||||||
|
|
||||||
// O restante do código permanece o mesmo...
|
|
||||||
|
|
||||||
const handleEditConsulta = (agendamento) => {
|
const handleEditConsulta = (agendamento) => {
|
||||||
setAgendamentoParaEdicao(agendamento);
|
setAgendamentoParaEdicao(agendamento);
|
||||||
@ -276,22 +274,20 @@ const Agendamento = () => {
|
|||||||
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);
|
||||||
const DeleteModal = () => (
|
const DeleteModal = () => (
|
||||||
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
|
<div className="modal fade show delete-modal" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
|
||||||
<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: '#f8d7da', color: '#721c24' }}>
|
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
||||||
<h5 className="modal-title">Confirmação de Cancelamento</h5>
|
<h5 className="modal-title">Confirmação de Cancelamento</h5>
|
||||||
<button type="button" className="btn-close" onClick={() => setShowDeleteModal(false)}></button>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<p>Qual o motivo do cancelamento? (Opcional)</p>
|
<p>Qual o motivo do cancelamento?</p>
|
||||||
<textarea className="form-control" rows="3" value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)}></textarea>
|
<textarea className="form-control" rows="3" value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} placeholder="Ex: Motivo pessoal, reagendamento, etc."></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-footer justify-content-center">
|
<div className="modal-footer">
|
||||||
<button type="button" className="btn btn-secondary" onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}>Manter Agendamento</button>
|
<button type="button" className="btn btn-primary" onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}>Cancelar</button>
|
||||||
{/* ✨ Botão sempre ativo ✨ */}
|
|
||||||
<button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)}>
|
<button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)}>
|
||||||
<Trash2 size={16} className="me-1" /> Confirmar Cancelamento
|
Confirmar Cancelamento
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -379,33 +375,58 @@ const DeleteModal = () => (
|
|||||||
{!PageNovaConsulta ? (
|
{!PageNovaConsulta ? (
|
||||||
<div className='atendimento-eprocura'>
|
<div className='atendimento-eprocura'>
|
||||||
{user?.role !== 'doctor' && (
|
{user?.role !== 'doctor' && (
|
||||||
<div className='unidade-selecionarprofissional'>
|
<div className="card p-3 mb-3 table-paciente-filters">
|
||||||
<div className='busca-atendimento-container'>
|
<h5 className="mb-3">
|
||||||
<div className='input-e-dropdown-wrapper'>
|
<i className="bi bi-funnel-fill me-2 text-primary"></i>
|
||||||
<div className='busca-atendimento'>
|
Filtrar por Médico
|
||||||
<div className='mb-5'>
|
</h5>
|
||||||
<input type="text" placeholder="Filtrar atendimento do medico..." value={searchTermDoctor} onChange={(e) => handleSearchMedicos(e.target.value)} />
|
<div className="position-relative">
|
||||||
</div>
|
<input
|
||||||
</div>
|
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 && (
|
{searchTermDoctor && FiltredTodosMedicos.length > 0 && (
|
||||||
<div className='dropdown-medicos'>
|
<div className="list-group position-absolute w-100" style={{ zIndex: 1000, maxHeight: '200px', overflowY: 'auto' }}>
|
||||||
{FiltredTodosMedicos.map((medico) => (
|
{FiltredTodosMedicos.map((medico) => (
|
||||||
<div
|
<button
|
||||||
key={medico.idMedico}
|
key={medico.idMedico}
|
||||||
className='dropdown-item'
|
type="button"
|
||||||
|
className="list-group-item list-group-item-action"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSearchTermDoctor(medico.nomeMedico);
|
setSearchTermDoctor(medico.nomeMedico);
|
||||||
setFiltredTodosMedicos([]);
|
setFiltredTodosMedicos([]);
|
||||||
setMedicoFiltrado({ id: medico.idMedico });
|
setMedicoFiltrado({ id: medico.idMedico });
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p>{medico.nomeMedico}</p>
|
{medico.nomeMedico}
|
||||||
</div>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</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>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className='container-btns-agenda-fila_esepera'>
|
<div className='container-btns-agenda-fila_esepera'>
|
||||||
|
|||||||
@ -46,7 +46,7 @@ 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' };
|
||||||
|
|
||||||
// Tenta descobrir o ID do usuário logado para aplicar filtro por médico
|
|
||||||
let userId = null;
|
let userId = null;
|
||||||
let userFullName = null;
|
let userFullName = null;
|
||||||
try {
|
try {
|
||||||
@ -60,12 +60,12 @@ 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);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Monta a URL com possíveis filtros preferenciais
|
|
||||||
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) {
|
||||||
// 1) tenta por doctor_id
|
|
||||||
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 +74,7 @@ const DoctorRelatorioManager = () => {
|
|||||||
data = [];
|
data = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2) fallback para created_by (se vazio)
|
|
||||||
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);
|
||||||
@ -85,10 +85,9 @@ const DoctorRelatorioManager = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3) fallback para requested_by com nome completo (se ainda vazio)
|
|
||||||
if ((!Array.isArray(data) || data.length === 0) && userFullName) {
|
if ((!Array.isArray(data) || data.length === 0) && userFullName) {
|
||||||
try {
|
try {
|
||||||
// encode para evitar problemas com espaços/caracteres especiais
|
|
||||||
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();
|
||||||
@ -99,7 +98,6 @@ const DoctorRelatorioManager = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Se não obteve userId ou nenhuma das tentativas acima retornou algo, busca tudo (comportamento anterior)
|
|
||||||
if (!userId || (!Array.isArray(data) || data.length === 0)) {
|
if (!userId || (!Array.isArray(data) || data.length === 0)) {
|
||||||
try {
|
try {
|
||||||
const resAll = await fetch(baseUrl, requestOptions);
|
const resAll = await fetch(baseUrl, requestOptions);
|
||||||
@ -110,7 +108,7 @@ const DoctorRelatorioManager = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// garante unicidade e ordenação por criação
|
|
||||||
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);
|
||||||
@ -144,14 +142,14 @@ const DoctorRelatorioManager = () => {
|
|||||||
};
|
};
|
||||||
}, [authHeader]);
|
}, [authHeader]);
|
||||||
|
|
||||||
// Busca dados de pacientes e médicos baseados na lista final que aparece na tela
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchRelData = async () => {
|
const fetchRelData = async () => {
|
||||||
const pacientes = [];
|
const pacientes = [];
|
||||||
const medicos = [];
|
const medicos = [];
|
||||||
for (let i = 0; i < relatoriosFinais.length; i++) {
|
for (let i = 0; i < relatoriosFinais.length; i++) {
|
||||||
const rel = relatoriosFinais[i];
|
const rel = relatoriosFinais[i];
|
||||||
// paciente
|
|
||||||
try {
|
try {
|
||||||
const pacienteRes = await GetPatientByID(rel.patient_id, authHeader);
|
const pacienteRes = await GetPatientByID(rel.patient_id, authHeader);
|
||||||
pacientes.push(Array.isArray(pacienteRes) ? pacienteRes[0] : pacienteRes);
|
pacientes.push(Array.isArray(pacienteRes) ? pacienteRes[0] : pacienteRes);
|
||||||
@ -159,13 +157,12 @@ const DoctorRelatorioManager = () => {
|
|||||||
pacientes.push(null);
|
pacientes.push(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
// médico: prioriza campos com id (doctor_id ou created_by). Se tiver somente requested_by (nome), usa nome.
|
|
||||||
try {
|
try {
|
||||||
if (rel.doctor_id) {
|
if (rel.doctor_id) {
|
||||||
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) {
|
||||||
// created_by costuma ser id
|
|
||||||
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) {
|
||||||
@ -174,7 +171,6 @@ const DoctorRelatorioManager = () => {
|
|||||||
medicos.push({ full_name: '' });
|
medicos.push({ full_name: '' });
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
// fallback para requested_by se houver
|
|
||||||
medicos.push({ full_name: rel.requested_by || '' });
|
medicos.push({ full_name: rel.requested_by || '' });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -190,7 +186,6 @@ const DoctorRelatorioManager = () => {
|
|||||||
}, [relatoriosFinais, authHeader]);
|
}, [relatoriosFinais, authHeader]);
|
||||||
|
|
||||||
const abrirModal = (relatorio, pageIndex) => {
|
const abrirModal = (relatorio, pageIndex) => {
|
||||||
// encontra índice global do relatório no array relatoriosFinais (para alinhar com pacientes/medicos)
|
|
||||||
const globalIndex = relatoriosFinais.findIndex(r => r.id === relatorio.id);
|
const globalIndex = relatoriosFinais.findIndex(r => r.id === relatorio.id);
|
||||||
const indexToUse = globalIndex >= 0 ? globalIndex : (indiceInicial + pageIndex);
|
const indexToUse = globalIndex >= 0 ? globalIndex : (indiceInicial + pageIndex);
|
||||||
setRelatorioModal(relatorio);
|
setRelatorioModal(relatorio);
|
||||||
@ -198,7 +193,7 @@ const DoctorRelatorioManager = () => {
|
|||||||
setShowModal(true);
|
setShowModal(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Função para limpar filtros
|
|
||||||
const limparFiltros = () => {
|
const limparFiltros = () => {
|
||||||
setTermoPesquisa('');
|
setTermoPesquisa('');
|
||||||
setFiltroExame('');
|
setFiltroExame('');
|
||||||
@ -256,12 +251,11 @@ const DoctorRelatorioManager = () => {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{showModal && (
|
{showModal && (
|
||||||
<div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowModal(false)}>
|
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }} tabIndex="-1">
|
||||||
<div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
|
<div className="modal-dialog modal-dialog-centered modal-lg">
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div className="modal-header custom-modal-header">
|
<div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
|
||||||
<h5 className="modal-title">Relatório de {pacientesComRelatorios[modalIndex]?.full_name}</h5>
|
<h5 className="modal-title">Relatório de {pacientesComRelatorios[modalIndex]?.full_name}</h5>
|
||||||
<button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowModal(false)}></button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
@ -290,11 +284,11 @@ const DoctorRelatorioManager = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-footer custom-modal-footer">
|
<div className="modal-footer">
|
||||||
<button className="btn btn-primary" onClick={() => BaixarPDFdoRelatorio(pacientesComRelatorios[modalIndex]?.full_name, modalIndex)}>
|
<button className="btn btn-primary" onClick={() => BaixarPDFdoRelatorio(pacientesComRelatorios[modalIndex]?.full_name, modalIndex)}>
|
||||||
<i className='bi bi-file-pdf-fill'></i> baixar em pdf
|
<i className='bi bi-file-pdf-fill me-1'></i> Baixar em PDF
|
||||||
</button>
|
</button>
|
||||||
<button type="button" className="btn btn-outline-secondary" onClick={() => { setShowModal(false) }}>
|
<button type="button" className="btn btn-secondary" onClick={() => { setShowModal(false) }}>
|
||||||
Fechar
|
Fechar
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -135,6 +135,71 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
setAppointmentToCancel(null);
|
setAppointmentToCancel(null);
|
||||||
setCancellationReason('');
|
setCancellationReason('');
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
|
if (success) {
|
||||||
|
alert("Solicitação cancelada com sucesso!");
|
||||||
|
=======
|
||||||
|
const [searchConsultas, setSearchConsultas] = useState('');
|
||||||
|
const [searchFilaEspera, setSearchFilaEspera] = useState('');
|
||||||
|
|
||||||
|
|
||||||
|
const [waitPage, setWaitPage] = useState(1);
|
||||||
|
const [waitPerPage, setWaitPerPage] = useState(10);
|
||||||
|
const [waitSortKey, setWaitSortKey] = useState(null);
|
||||||
|
const [waitSortDir, setWaitSortDir] = useState('asc');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
|
||||||
|
const [appointmentToCancel, setAppointmentToCancel] = useState(null);
|
||||||
|
const [cancellationReason, setCancellationReason] = useState('');
|
||||||
|
|
||||||
|
const authHeader = useMemo(() => getAuthorizationHeader(), [getAuthorizationHeader]);
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
|
|
||||||
|
setDictAgendamentosOrganizados(prev => {
|
||||||
|
const newDict = { ...prev };
|
||||||
|
for (const date in newDict) {
|
||||||
|
newDict[date] = newDict[date].filter(app => app.id !== appointmentToCancel);
|
||||||
|
}
|
||||||
|
<<<<<<< HEAD
|
||||||
|
return newDict;
|
||||||
|
});
|
||||||
|
setFilaDeEsperaData(prev => prev.filter(item => item.agendamento.id !== appointmentToCancel));
|
||||||
|
} else {
|
||||||
|
alert("Falha ao cancelar a solicitação.");
|
||||||
|
=======
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const handleCancelClick = (appointmentId) => {
|
||||||
|
setAppointmentToCancel(appointmentId);
|
||||||
|
setCancellationReason('');
|
||||||
|
setIsCancelModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const executeCancellation = async () => {
|
||||||
|
if (!appointmentToCancel) return;
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
|
||||||
|
const motivo = cancellationReason.trim() || "Cancelado pelo paciente (motivo não especificado)";
|
||||||
|
|
||||||
|
const success = await updateAppointmentStatus(appointmentToCancel, {
|
||||||
|
status: "cancelled",
|
||||||
|
cancellation_reason: motivo,
|
||||||
|
updated_at: new Date().toISOString()
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
setIsCancelModalOpen(false);
|
||||||
|
setAppointmentToCancel(null);
|
||||||
|
setCancellationReason('');
|
||||||
|
|
||||||
|
|
||||||
if (success) {
|
if (success) {
|
||||||
alert("Solicitação cancelada com sucesso!");
|
alert("Solicitação cancelada com sucesso!");
|
||||||
|
|
||||||
@ -152,6 +217,122 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const handleQuickJumpChange = (type, value) => setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
|
||||||
|
const applyQuickJump = () => {
|
||||||
|
const newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
|
||||||
|
setCurrentDate(newDate);
|
||||||
|
setSelectedDay(newDate);
|
||||||
|
};
|
||||||
|
const dateGrid = useMemo(() => {
|
||||||
|
const grid = [];
|
||||||
|
const startOfMonth = currentDate.startOf('month');
|
||||||
|
let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
|
||||||
|
for (let i = 0; i < 42; i++) {
|
||||||
|
grid.push(currentDay);
|
||||||
|
currentDay = currentDay.add(1, 'day');
|
||||||
|
}
|
||||||
|
return grid;
|
||||||
|
}, [currentDate]);
|
||||||
|
const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
|
||||||
|
const handleDateClick = (day) => setSelectedDay(day);
|
||||||
|
|
||||||
|
|
||||||
|
const consultasDoDiaFiltradas = useMemo(() => {
|
||||||
|
const consultas = DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')] || [];
|
||||||
|
if (!searchConsultas.trim()) return consultas;
|
||||||
|
const term = searchConsultas.toLowerCase();
|
||||||
|
return consultas.filter(app =>
|
||||||
|
app.medico_nome?.toLowerCase().includes(term) ||
|
||||||
|
app.status?.toLowerCase().includes(term)
|
||||||
|
);
|
||||||
|
}, [DictAgendamentosOrganizados, selectedDay, searchConsultas]);
|
||||||
|
|
||||||
|
|
||||||
|
const filaEsperaFiltrada = useMemo(() => {
|
||||||
|
if (!searchFilaEspera.trim()) return filaEsperaData;
|
||||||
|
const term = searchFilaEspera.toLowerCase();
|
||||||
|
return filaEsperaData.filter(item =>
|
||||||
|
item.Infos?.medico_nome?.toLowerCase().includes(term)
|
||||||
|
);
|
||||||
|
}, [filaEsperaData, searchFilaEspera]);
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
// Paginação
|
||||||
|
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);
|
||||||
|
}, [searchFilaEspera, waitSortKey, waitSortDir]);
|
||||||
|
|
||||||
|
const activeButtonStyle = {
|
||||||
|
backgroundColor: '#1B2A41',
|
||||||
|
color: 'white',
|
||||||
|
padding: '6px 12px',
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid white',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
cursor: 'pointer'
|
||||||
|
};
|
||||||
|
|
||||||
|
const inactiveButtonStyle = {
|
||||||
|
backgroundColor: '#1B2A41',
|
||||||
|
color: 'white',
|
||||||
|
padding: '6px 12px',
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid #1B2A41',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
cursor: 'pointer'
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="form-container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
|
}
|
||||||
|
setIsLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
const handleQuickJumpChange = (type, value) => setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
|
const handleQuickJumpChange = (type, value) => setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
|
||||||
const applyQuickJump = () => {
|
const applyQuickJump = () => {
|
||||||
const newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
|
const newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
|
||||||
@ -173,6 +354,7 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
|
<<<<<<< HEAD
|
||||||
<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' }}>
|
||||||
<Spinner />
|
<Spinner />
|
||||||
</div>
|
</div>
|
||||||
@ -257,6 +439,310 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
</select>
|
</select>
|
||||||
<button className="btn btn-sm btn-outline-primary" onClick={applyQuickJump} disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}>Ir</button>
|
<button className="btn btn-sm btn-outline-primary" onClick={applyQuickJump} disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}>Ir</button>
|
||||||
</div>
|
</div>
|
||||||
|
=======
|
||||||
|
<div>
|
||||||
|
<h1>Minhas consultas</h1>
|
||||||
|
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
||||||
|
|
||||||
|
<button
|
||||||
|
style={PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle}
|
||||||
|
onClick={() => {
|
||||||
|
setPageConsulta(true);
|
||||||
|
setFiladeEspera(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className="bi bi-plus-circle"></i> Solicitar Agendamento
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
style={FiladeEspera && !PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle}
|
||||||
|
onClick={() => {
|
||||||
|
setFiladeEspera(!FiladeEspera);
|
||||||
|
setPageConsulta(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className="bi bi-list-task me-1"></i> Fila de Espera ({filaEsperaData.length})
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!PageNovaConsulta ? (
|
||||||
|
<div className='atendimento-eprocura'>
|
||||||
|
<section className='calendario-ou-filaespera'>
|
||||||
|
{!FiladeEspera ? (
|
||||||
|
|
||||||
|
<div className="calendar-wrapper">
|
||||||
|
<div className="calendar-info-panel">
|
||||||
|
<div className="info-date-display"><span>{selectedDay.format('MMM')}</span><strong>{selectedDay.format('DD')}</strong></div>
|
||||||
|
<div className="info-details"><h3>{selectedDay.format('dddd')}</h3><p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p></div>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
placeholder="Buscar por médico ou status..."
|
||||||
|
value={searchConsultas}
|
||||||
|
onChange={(e) => setSearchConsultas(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="appointments-list">
|
||||||
|
<h4>Consultas para {selectedDay.format('DD/MM')}</h4>
|
||||||
|
{(consultasDoDiaFiltradas.length > 0) ? (
|
||||||
|
consultasDoDiaFiltradas.map(app => (
|
||||||
|
<div key={app.id} className="appointment-item" data-status={app.status}>
|
||||||
|
<div className="item-time">{dayjs(app.scheduled_at).format('HH:mm')}</div>
|
||||||
|
<div className="item-details">
|
||||||
|
<span>Consulta com Dr(a). {app.medico_nome}</span>
|
||||||
|
</div>
|
||||||
|
<div className='item-actions'>
|
||||||
|
{app.status !== 'cancelled' && dayjs(app.scheduled_at).isAfter(dayjs()) && (
|
||||||
|
<button className="btn btn-sm btn-outline-danger" onClick={() => handleCancelClick(app.id)} title="Cancelar Consulta">
|
||||||
|
<Trash2 size={16} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada para esta data.</p></div>)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="calendar-main">
|
||||||
|
<div className="calendar-legend">
|
||||||
|
<div className="legend-item" data-status="completed">Realizado</div><div className="legend-item" data-status="confirmed">Confirmado</div><div className="legend-item" data-status="agendado">Agendado</div><div className="legend-item" data-status="cancelled">Cancelado</div>
|
||||||
|
</div>
|
||||||
|
<div className="calendar-controls">
|
||||||
|
<div className="date-indicator">
|
||||||
|
<h2>{currentDate.format('MMMM [de] YYYY')}</h2>
|
||||||
|
<div className="quick-jump-controls" style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
|
||||||
|
<select value={quickJump.month} onChange={(e) => handleQuickJumpChange('month', e.target.value)} className="form-select form-select-sm w-auto">
|
||||||
|
{dayjs.months().map((month, index) => (<option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>))}
|
||||||
|
</select>
|
||||||
|
<select value={quickJump.year} onChange={(e) => handleQuickJumpChange('year', e.target.value)} className="form-select form-select-sm w-auto">
|
||||||
|
{Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (<option key={year} value={year}>{year}</option>))}
|
||||||
|
</select>
|
||||||
|
<button className="btn btn-sm btn-outline-primary" onClick={applyQuickJump} disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}>Ir</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="nav-buttons">
|
||||||
|
<button onClick={() => setCurrentDate(c => c.subtract(1, 'month'))}><ChevronLeft size={20} /></button>
|
||||||
|
<button onClick={() => setCurrentDate(dayjs())}>Hoje</button>
|
||||||
|
<button onClick={() => setCurrentDate(c => c.add(1, 'month'))}><ChevronRight size={20} /></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="calendar-grid">
|
||||||
|
{weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
|
||||||
|
{dateGrid.map((day, index) => {
|
||||||
|
const appointmentsOnDay = DictAgendamentosOrganizados[day.format('YYYY-MM-DD')] || [];
|
||||||
|
const cellClasses = `day-cell ${day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'} ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${day.isSame(selectedDay, 'day') ? 'selected' : ''}`;
|
||||||
|
return (
|
||||||
|
<div key={index} className={cellClasses} onClick={() => handleDateClick(day)}>
|
||||||
|
<span>{day.format('D')}</span>
|
||||||
|
{appointmentsOnDay.length > 0 && <div className="appointments-indicator">{appointmentsOnDay.length}</div>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="page-content table-paciente-container">
|
||||||
|
<section className="row">
|
||||||
|
<div className="col-12">
|
||||||
|
<div className="card table-paciente-card">
|
||||||
|
<div className="card-header"><h4 className="card-title mb-0">Minhas Solicitações em Fila de Espera</h4></div>
|
||||||
|
<div className="card-body">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
Filtros
|
||||||
|
</h5>
|
||||||
|
<div className="mb-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Buscar por médico..."
|
||||||
|
value={searchFilaEspera}
|
||||||
|
onChange={(e) => setSearchFilaEspera(e.target.value)}
|
||||||
|
/>
|
||||||
|
<small className="text-muted">Digite o nome do médico</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex align-items-center gap-2 mb-3">
|
||||||
|
<span className="text-muted small">Ordenar por:</span>
|
||||||
|
{(() => {
|
||||||
|
const sortValue = waitSortKey ? `${waitSortKey}-${waitSortDir}` : '';
|
||||||
|
return (
|
||||||
|
<select
|
||||||
|
className="form-select compact-select sort-select w-auto"
|
||||||
|
value={sortValue}
|
||||||
|
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 className="mt-3">
|
||||||
|
<div className="contador-pacientes">
|
||||||
|
{filaEsperaFiltrada.length} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-striped table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Médico Solicitado</th>
|
||||||
|
<th>Data da Solicitação</th>
|
||||||
|
<th>Ações</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{filaEsperaPaginada.length > 0 ? (filaEsperaPaginada.map((item) => (
|
||||||
|
<tr key={item.agendamento.id}>
|
||||||
|
<td>Dr(a). {item.Infos?.medico_nome}</td>
|
||||||
|
<td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
|
||||||
|
<td>
|
||||||
|
<button className="btn btn-sm btn-danger" onClick={() => handleCancelClick(item.agendamento.id)}>
|
||||||
|
<i className="bi bi-trash me-1"></i> Cancelar
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))) : (
|
||||||
|
<tr>
|
||||||
|
<td colSpan="3" className="text-center py-4">
|
||||||
|
<div className="text-muted">Nenhuma solicitação na fila de espera.</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{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}
|
||||||
|
</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>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
{isCancelModalOpen && (
|
||||||
|
<div
|
||||||
|
className="modal fade show delete-modal"
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||||
|
}}
|
||||||
|
tabIndex="-1"
|
||||||
|
>
|
||||||
|
<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 className="modal-body">
|
||||||
|
<p>Qual o motivo do cancelamento?</p>
|
||||||
|
<textarea
|
||||||
|
className="form-control"
|
||||||
|
rows="3"
|
||||||
|
value={cancellationReason}
|
||||||
|
onChange={(e) => setCancellationReason(e.target.value)}
|
||||||
|
placeholder="Ex: Precisei viajar, motivo pessoal, etc."
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={() => setIsCancelModalOpen(false)}
|
||||||
|
>
|
||||||
|
Cancelar
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-danger"
|
||||||
|
onClick={executeCancellation}
|
||||||
|
>
|
||||||
|
Excluir
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
</div>
|
</div>
|
||||||
<div className="nav-buttons">
|
<div className="nav-buttons">
|
||||||
<button onClick={() => setCurrentDate(c => c.subtract(1, 'month'))}><ChevronLeft size={20} /></button>
|
<button onClick={() => setCurrentDate(c => c.subtract(1, 'month'))}><ChevronLeft size={20} /></button>
|
||||||
@ -322,7 +808,10 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
<<<<<<< HEAD
|
||||||
</section>
|
</section>
|
||||||
|
=======
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
|
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
|
||||||
|
|||||||
@ -526,3 +526,7 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
<<<<<<< HEAD
|
||||||
|
=======
|
||||||
|
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
|
|||||||
@ -413,3 +413,9 @@ const Header = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default Header;
|
export default Header;
|
||||||
|
<<<<<<< HEAD
|
||||||
|
=======
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
|
|||||||
@ -25,5 +25,10 @@
|
|||||||
"name": "Painel Administrativo",
|
"name": "Painel Administrativo",
|
||||||
"icon": "file-bar-graph-fill",
|
"icon": "file-bar-graph-fill",
|
||||||
"url": "/admin/painel"
|
"url": "/admin/painel"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Gestão de Usuários",
|
||||||
|
"icon": "people-fill",
|
||||||
|
"url": "/admin/gestao"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@ -172,6 +172,7 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
paciente_cpf: paciente?.cpf
|
paciente_cpf: paciente?.cpf
|
||||||
};
|
};
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
if (agendamento.status === "requested") {
|
if (agendamento.status === "requested") {
|
||||||
newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
|
newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
|
||||||
} else {
|
} else {
|
||||||
@ -189,14 +190,84 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
setAgendamentosOrganizados(newDict);
|
setAgendamentosOrganizados(newDict);
|
||||||
setFilaEsperaData(newFila);
|
setFilaEsperaData(newFila);
|
||||||
setShowSpinner(false);
|
setShowSpinner(false);
|
||||||
|
=======
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchAppointments();
|
||||||
|
GetAllDoctors(authHeader).then(docs => setListaDeMedicos(docs.map(d => ({ nomeMedico: d.full_name, idMedico: d.id }))));
|
||||||
|
}, [authHeader]);
|
||||||
|
|
||||||
|
|
||||||
|
const handleSearchMedicos = (term) => {
|
||||||
|
setSearchTermDoctor(term);
|
||||||
|
if (term.trim() === '') {
|
||||||
|
setFiltredTodosMedicos([]);
|
||||||
|
setMedicoFiltrado({ id: "vazio" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const filtered = ListaDeMedicos.filter(medico =>
|
||||||
|
medico.nomeMedico.toLowerCase().includes(term.toLowerCase())
|
||||||
|
);
|
||||||
|
setFiltredTodosMedicos(filtered);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const filaEsperaFiltrada = useMemo(() => {
|
||||||
|
if (!waitlistSearch.trim()) return filaEsperaData;
|
||||||
|
const term = waitlistSearch.toLowerCase();
|
||||||
|
return filaEsperaData.filter(item => (item?.Infos?.paciente_nome?.toLowerCase() || '').includes(term) || (item?.Infos?.paciente_cpf?.toLowerCase() || '').includes(term) || (item?.Infos?.nome_medico?.toLowerCase() || '').includes(term));
|
||||||
|
}, [waitlistSearch, filaEsperaData]);
|
||||||
|
|
||||||
|
const applySortingWaitlist = (arr) => {
|
||||||
|
if (!Array.isArray(arr) || !waitSortKey) return arr;
|
||||||
|
const copy = [...arr];
|
||||||
|
if (waitSortKey === 'paciente') { copy.sort((a, b) => (a?.Infos?.paciente_nome || '').localeCompare((b?.Infos?.paciente_nome || ''))); }
|
||||||
|
else if (waitSortKey === 'medico') { copy.sort((a, b) => (a?.Infos?.nome_medico || '').localeCompare((b?.Infos?.nome_medico || ''))); }
|
||||||
|
else if (waitSortKey === 'data') { copy.sort((a, b) => new Date(a?.agendamento?.scheduled_at || 0) - new Date(b?.agendamento?.scheduled_at || 0)); }
|
||||||
|
if (waitSortDir === 'desc') copy.reverse();
|
||||||
|
return copy;
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
};
|
};
|
||||||
fetchDados();
|
fetchDados();
|
||||||
}, [listaTodosAgendamentos, authHeader, cacheMedicos, cachePacientes]);
|
}, [listaTodosAgendamentos, authHeader, cacheMedicos, cachePacientes]);
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchAppointments();
|
fetchAppointments();
|
||||||
GetAllDoctors(authHeader).then(docs =>
|
GetAllDoctors(authHeader).then(docs =>
|
||||||
setListaDeMedicos(docs.map(d => ({ nomeMedico: d.full_name, idMedico: d.id })))
|
setListaDeMedicos(docs.map(d => ({ nomeMedico: d.full_name, idMedico: d.id })))
|
||||||
|
=======
|
||||||
|
|
||||||
|
const generateDateGrid = () => {
|
||||||
|
const grid = []; const startOfMonth = currentDate.startOf('month');
|
||||||
|
let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
|
||||||
|
for (let i = 0; i < 42; i++) { grid.push(currentDay); currentDay = currentDay.add(1, 'day'); }
|
||||||
|
return grid;
|
||||||
|
};
|
||||||
|
const dateGrid = useMemo(() => generateDateGrid(), [currentDate]);
|
||||||
|
const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
|
||||||
|
const handleDateClick = (day) => setSelectedDay(day);
|
||||||
|
|
||||||
|
|
||||||
|
const DeleteModal = () => (
|
||||||
|
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }} tabIndex="-1">
|
||||||
|
<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 className="modal-body">
|
||||||
|
<p>Qual o motivo do cancelamento?</p>
|
||||||
|
<textarea className="form-control" rows="3" value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)}></textarea>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer justify-content-center">
|
||||||
|
<button type="button" className="btn btn-secondary" onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}>Cancelar</button>
|
||||||
|
<button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)}>Excluir</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
);
|
);
|
||||||
}, [authHeader]);
|
}, [authHeader]);
|
||||||
|
|
||||||
@ -234,6 +305,7 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
const waitIndiceFinal = waitIndiceInicial + waitPerPage;
|
const waitIndiceFinal = waitIndiceInicial + waitPerPage;
|
||||||
const filaEsperaPaginada = filaEsperaOrdenada.slice(waitIndiceInicial, waitIndiceFinal);
|
const filaEsperaPaginada = filaEsperaOrdenada.slice(waitIndiceInicial, waitIndiceFinal);
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
const gerarNumerosWaitPages = () => {
|
const gerarNumerosWaitPages = () => {
|
||||||
const paginas = [];
|
const paginas = [];
|
||||||
const paginasParaMostrar = 5;
|
const paginasParaMostrar = 5;
|
||||||
@ -478,6 +550,230 @@ const Agendamento = ({ setDictInfo }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
=======
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Agendar nova consulta</h1>
|
||||||
|
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
||||||
|
|
||||||
|
<button className="btn btn-primary" onClick={() => {
|
||||||
|
setPageConsulta(true);
|
||||||
|
setEditingAppointmentId(null);
|
||||||
|
setAppointmentToEdit(null);
|
||||||
|
}}><i className="bi bi-plus-circle"></i> Adicionar Consulta</button>
|
||||||
|
<button className="manage-button btn" onClick={() => navigate("/secretaria/excecoes-disponibilidade")}><i className="bi bi-gear-fill me-1"></i> Gerenciar Exceções</button>
|
||||||
|
<button className='manage-button btn' onClick={() => navigate('/secretaria/disponibilidade')}><i className="bi bi-gear-fill me-1"></i> Mudar Disponibilidade</button>
|
||||||
|
</div>
|
||||||
|
{!PageNovaConsulta ? (
|
||||||
|
<div className='atendimento-eprocura'>
|
||||||
|
<div className='container-btns-agenda-fila_esepera'>
|
||||||
|
<button className={`btn-agenda ${!FiladeEspera ? "opc-agenda-ativo" : ""}`} onClick={() => { setFiladeEspera(false); setSearchTerm(''); }}>Agenda</button>
|
||||||
|
<button className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`} onClick={() => { setFiladeEspera(true); setSearchTerm(''); }}>Fila de espera</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!FiladeEspera && (
|
||||||
|
<div className="card p-3 mb-3" style={{ marginTop: '20px' }}>
|
||||||
|
<h5 className="mb-3">
|
||||||
|
<i className="bi bi-funnel-fill me-2 text-primary"></i>
|
||||||
|
Filtrar por Médico
|
||||||
|
</h5>
|
||||||
|
<div className="mb-3">
|
||||||
|
<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">
|
||||||
|
Filtre os agendamentos por médico
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
{searchTermDoctor && FiltredTodosMedicos.length > 0 && (
|
||||||
|
<div className="list-group">
|
||||||
|
{FiltredTodosMedicos.map((medico) => (
|
||||||
|
<button
|
||||||
|
key={medico.idMedico}
|
||||||
|
className="list-group-item list-group-item-action"
|
||||||
|
onClick={() => {
|
||||||
|
setSearchTermDoctor(medico.nomeMedico);
|
||||||
|
setFiltredTodosMedicos([]);
|
||||||
|
setMedicoFiltrado(medico);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{medico.nomeMedico}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{MedicoFiltrado.id !== "vazio" && (
|
||||||
|
<div className="alert alert-info mt-2" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<span>
|
||||||
|
<i className="bi bi-info-circle me-2"></i>
|
||||||
|
Filtrando por: <strong>{searchTermDoctor}</strong>
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-outline-secondary"
|
||||||
|
onClick={() => {
|
||||||
|
setSearchTermDoctor('');
|
||||||
|
setMedicoFiltrado({ id: "vazio" });
|
||||||
|
setFiltredTodosMedicos([]);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className="bi bi-x-circle me-1"></i>
|
||||||
|
Limpar filtro
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<section className='calendario-ou-filaespera'>
|
||||||
|
{FiladeEspera === false ? (
|
||||||
|
<div className="calendar-wrapper">
|
||||||
|
<div className="calendar-info-panel">
|
||||||
|
<div className="info-date-display"><span>{selectedDay.format('MMM')}</span><strong>{selectedDay.format('DD')}</strong></div>
|
||||||
|
<div className="info-details"><h3>{selectedDay.format('dddd')}</h3><p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p></div>
|
||||||
|
<div className="appointments-list">
|
||||||
|
<h4>Consultas para {selectedDay.format('DD/MM')}</h4>
|
||||||
|
{showSpinner ? <Spinner/> : (DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
|
||||||
|
DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]
|
||||||
|
.filter(app => {
|
||||||
|
if (MedicoFiltrado.id === "vazio") return true;
|
||||||
|
return app.doctor_id === MedicoFiltrado.idMedico;
|
||||||
|
})
|
||||||
|
.map(app => (
|
||||||
|
<div key={app.id} className="appointment-item" data-status={app.status}>
|
||||||
|
<div className="item-time">{dayjs(app.scheduled_at).format('HH:mm')}</div>
|
||||||
|
<div className="item-details"><span>{app.paciente_nome}</span><small>Dr(a). {app.medico_nome}</small></div>
|
||||||
|
<div className="appointment-actions">
|
||||||
|
{app.status === 'cancelled' ? (
|
||||||
|
<button className="btn-action btn-edit" onClick={() => { setSelectedId(app.id); setShowConfirmModal(true); }}>
|
||||||
|
<Edit size={16} />
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn-action btn-edit"
|
||||||
|
onClick={() => {
|
||||||
|
setAppointmentToEdit(app);
|
||||||
|
setEditingAppointmentId(app.id);
|
||||||
|
setPageConsulta(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Edit size={16} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button className="btn-action btn-delete" onClick={() => { setSelectedId(app.id); setShowDeleteModal(true); }}>
|
||||||
|
<Trash2 size={16} />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada.</p></div>)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="calendar-main">
|
||||||
|
<div className="calendar-legend">
|
||||||
|
<div className="legend-item" data-status="completed">Realizado</div><div className="legend-item" data-status="confirmed">Confirmado</div><div className="legend-item" data-status="agendado">Agendado</div><div className="legend-item" data-status="cancelled">Cancelado</div>
|
||||||
|
</div>
|
||||||
|
<div className="calendar-controls">
|
||||||
|
<div className="date-indicator">
|
||||||
|
<h2>{currentDate.format('MMMM [de] YYYY')}</h2>
|
||||||
|
<div className="quick-jump-controls" style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
|
||||||
|
<select
|
||||||
|
value={quickJump.month}
|
||||||
|
onChange={(e) => handleQuickJumpChange('month', e.target.value)}
|
||||||
|
className="form-select form-select-sm w-auto"
|
||||||
|
>
|
||||||
|
{dayjs.months().map((month, index) => (
|
||||||
|
<option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<select
|
||||||
|
value={quickJump.year}
|
||||||
|
onChange={(e) => handleQuickJumpChange('year', e.target.value)}
|
||||||
|
className="form-select form-select-sm w-auto"
|
||||||
|
>
|
||||||
|
{Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (
|
||||||
|
<option key={year} value={year}>{year}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-outline-primary"
|
||||||
|
onClick={applyQuickJump}
|
||||||
|
disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}
|
||||||
|
>
|
||||||
|
Ir
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="nav-buttons">
|
||||||
|
<button onClick={() => { setCurrentDate(currentDate.subtract(1, 'month')); setSelectedDay(currentDate.subtract(1, 'month')); }}><ChevronLeft size={20} /></button>
|
||||||
|
<button onClick={() => { setCurrentDate(dayjs()); setSelectedDay(dayjs()); }}>Hoje</button>
|
||||||
|
<button onClick={() => { setCurrentDate(currentDate.add(1, 'month')); setSelectedDay(currentDate.add(1, 'month')); }}><ChevronRight size={20} /></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="calendar-grid">
|
||||||
|
{weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
|
||||||
|
{dateGrid.map((day, index) => {
|
||||||
|
const appointmentsOnDay = DictAgendamentosOrganizados[day.format('YYYY-MM-DD')] || [];
|
||||||
|
const cellClasses = `day-cell ${day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'} ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${day.isSame(selectedDay, 'day') ? 'selected' : ''}`;
|
||||||
|
return (<div key={index} className={cellClasses} onClick={() => handleDateClick(day)}><span>{day.format('D')}</span>{appointmentsOnDay.length > 0 && <div className="appointments-indicator">{appointmentsOnDay.length}</div>}</div>);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="page-content table-paciente-container">
|
||||||
|
<section className="row">
|
||||||
|
<div className="col-12">
|
||||||
|
<div className="card table-paciente-card">
|
||||||
|
<div className="card-header"><h4 className="card-title mb-0">Fila de Espera</h4></div>
|
||||||
|
<div className="card-body">
|
||||||
|
<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> Filtros</h5>
|
||||||
|
<div className="mb-3"><input type="text" className="form-control" placeholder="Buscar por paciente, CPF ou médico..." value={waitlistSearch} onChange={(e) => setWaitlistSearch(e.target.value)} /><small className="text-muted">Digite o nome do paciente, CPF ou nome do médico</small></div>
|
||||||
|
<div className="d-flex flex-wrap align-items-center gap-2 mb-3">
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<span className="me-2 text-muted small">Ordenar por:</span>
|
||||||
|
{(() => { const sortValue = waitSortKey ? `${waitSortKey}-${waitSortDir}` : ''; return (<select className="form-select compact-select sort-select w-auto" value={sortValue} 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="paciente-asc">Paciente (A-Z)</option><option value="paciente-desc">Paciente (Z-A)</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>
|
||||||
|
<div className="mt-3"><div className="contador-pacientes">{filaEsperaFiltrada.length} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS</div></div>
|
||||||
|
</div>
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-striped table-hover table-paciente-table">
|
||||||
|
<thead><tr><th>Nome do Paciente</th><th>CPF</th><th>Médico Solicitado</th><th>Data da Solicitação</th><th>Ações</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
{filaEsperaPaginada.length > 0 ? (filaEsperaPaginada.map((item, index) => (
|
||||||
|
<tr key={index}><td>{item?.Infos?.paciente_nome}</td><td>{item?.Infos?.paciente_cpf}</td><td>{item?.Infos?.nome_medico}</td><td>{dayjs(item.agendamento.scheduled_at).format('DD/MM/YYYY')}</td><td><button className="btn btn-sm btn-delete" onClick={() => { setSelectedId(item.agendamento.id); setShowDeleteModal(true); }}><i className="bi bi-trash me-1"></i> Excluir</button></td></tr>
|
||||||
|
))) : (<tr><td colSpan="5" className="text-center py-4"><div className="text-muted">{showSpinner ? <Spinner /> : (<><i className="bi bi-inbox display-4"></i><p className="mt-2">Nenhuma solicitação encontrada.</p></>)}</div></td></tr>)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{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}</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>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="calendar-main">
|
<div className="calendar-main">
|
||||||
|
|||||||
@ -35,6 +35,7 @@ const DisponibilidadesDoctorPage = () => {
|
|||||||
const [doctors, setDoctors] = useState([]);
|
const [doctors, setDoctors] = useState([]);
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
const [editando, setEditando] = useState(null);
|
const [editando, setEditando] = useState(null);
|
||||||
|
<<<<<<< HEAD
|
||||||
const [expandedDoctors, setExpandedDoctors] = useState({});
|
const [expandedDoctors, setExpandedDoctors] = useState({});
|
||||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||||
const [availabilityEdit, setAvailabilityEdit] = useState([]);
|
const [availabilityEdit, setAvailabilityEdit] = useState([]);
|
||||||
@ -48,6 +49,11 @@ const DisponibilidadesDoctorPage = () => {
|
|||||||
myHeaders.append("Prefer", "return=representation");
|
myHeaders.append("Prefer", "return=representation");
|
||||||
return myHeaders;
|
return myHeaders;
|
||||||
};
|
};
|
||||||
|
=======
|
||||||
|
const [doctorsLoading, setDoctorsLoading] = useState(true);
|
||||||
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
|
const [selectedDisponibilidadeId, setSelectedDisponibilidadeId] = useState(null);
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchDoctors = async () => {
|
const fetchDoctors = async () => {
|
||||||
@ -167,11 +173,33 @@ const DisponibilidadesDoctorPage = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const deletarDisponibilidade = async (id) => {
|
const deletarDisponibilidade = async (id) => {
|
||||||
|
<<<<<<< HEAD
|
||||||
if (!window.confirm("Deseja realmente excluir esta disponibilidade?")) return;
|
if (!window.confirm("Deseja realmente excluir esta disponibilidade?")) return;
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`${ENDPOINT}?id=eq.${id}`, { method: "DELETE", headers: getHeaders() });
|
const res = await fetch(`${ENDPOINT}?id=eq.${id}`, { method: "DELETE", headers: getHeaders() });
|
||||||
if (res.ok) setDisponibilidades((prev) => prev.filter((d) => d.id !== id));
|
if (res.ok) setDisponibilidades((prev) => prev.filter((d) => d.id !== id));
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
|
=======
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
|
||||||
|
method: "DELETE",
|
||||||
|
headers: getHeaders(),
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
alert("Disponibilidade excluída com sucesso!");
|
||||||
|
setDisponibilidades((prev) => prev.filter((d) => d.id !== id));
|
||||||
|
setShowDeleteModal(false);
|
||||||
|
setSelectedDisponibilidadeId(null);
|
||||||
|
} else {
|
||||||
|
const errorData = await res.json();
|
||||||
|
console.error("Erro na resposta:", errorData);
|
||||||
|
alert("Erro ao excluir disponibilidade");
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erro:", error);
|
||||||
|
alert("Erro ao conectar com o servidor");
|
||||||
|
}
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
};
|
};
|
||||||
|
|
||||||
const disponibilidadesAgrupadas = useMemo(() => {
|
const disponibilidadesAgrupadas = useMemo(() => {
|
||||||
@ -285,6 +313,7 @@ const DisponibilidadesDoctorPage = () => {
|
|||||||
setAvailabilityEdit([]);
|
setAvailabilityEdit([]);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
const handleDoctorSelect = (doctor) => {
|
const handleDoctorSelect = (doctor) => {
|
||||||
setSearchTerm(doctor.full_name || doctor.name);
|
setSearchTerm(doctor.full_name || doctor.name);
|
||||||
setShowSuggestions(false);
|
setShowSuggestions(false);
|
||||||
@ -340,6 +369,70 @@ const DisponibilidadesDoctorPage = () => {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
=======
|
||||||
|
<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={searchTerm}
|
||||||
|
onChange={(e) => {
|
||||||
|
setSearchTerm(e.target.value);
|
||||||
|
if (!e.target.value) setSelectedDoctor(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<small className="text-muted">Buscar médico para filtrar disponibilidades</small>
|
||||||
|
|
||||||
|
{searchTerm && !selectedDoctor && filteredDoctors.length > 0 && (
|
||||||
|
<div className="list-group position-absolute w-100" style={{ zIndex: 1000, maxHeight: '200px', overflowY: 'auto' }}>
|
||||||
|
{filteredDoctors.map((doc) => (
|
||||||
|
<button
|
||||||
|
key={doc.id}
|
||||||
|
type="button"
|
||||||
|
className="list-group-item list-group-item-action"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedDoctor(doc);
|
||||||
|
setSearchTerm(doc.name);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{doc.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-3 d-flex justify-content-between align-items-center">
|
||||||
|
<div>
|
||||||
|
{selectedDoctor && (
|
||||||
|
<span className="badge bg-primary me-2">
|
||||||
|
<i className="bi bi-person-check me-1"></i>
|
||||||
|
{selectedDoctor.name}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<div className="contador-pacientes" style={{ display: 'inline-block' }}>
|
||||||
|
{disponibilidades.length} DISPONIBILIDADES ENCONTRADAS
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedDoctor && (
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary btn-sm"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedDoctor(null);
|
||||||
|
setSearchTerm('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtro
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section className="calendario-ou-filaespera">
|
<section className="calendario-ou-filaespera">
|
||||||
@ -374,6 +467,7 @@ const DisponibilidadesDoctorPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
<<<<<<< HEAD
|
||||||
<div className="doctor-group-container">
|
<div className="doctor-group-container">
|
||||||
{disponibilidadesAgrupadas.length === 0 ? (
|
{disponibilidadesAgrupadas.length === 0 ? (
|
||||||
<p className="no-results">Nenhum médico encontrado</p>
|
<p className="no-results">Nenhum médico encontrado</p>
|
||||||
@ -432,9 +526,119 @@ const DisponibilidadesDoctorPage = () => {
|
|||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
=======
|
||||||
|
<table className="fila-tabela">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Médico</th>
|
||||||
|
<th>Dia da Semana</th>
|
||||||
|
<th>Início</th>
|
||||||
|
<th>Término</th>
|
||||||
|
<th>Intervalo (min)</th>
|
||||||
|
<th>Tipo</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Ações</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{disponibilidades.map((disp) => {
|
||||||
|
const medico = doctors.find((d) => d.id === disp.doctor_id);
|
||||||
|
return (
|
||||||
|
<tr key={disp.id}>
|
||||||
|
<td>{medico ? medico.name : disp.doctor_id}</td>
|
||||||
|
<td>{diasDaSemana[disp.weekday]}</td>
|
||||||
|
<td>{disp.start_time}</td>
|
||||||
|
<td>{disp.end_time}</td>
|
||||||
|
<td>{disp.slot_minutes || 30}</td>
|
||||||
|
<td>{disp.appointment_type || "presencial"}</td>
|
||||||
|
<td>
|
||||||
|
<span
|
||||||
|
className={`badge ${
|
||||||
|
disp.active === false
|
||||||
|
? "badge-inactive"
|
||||||
|
: "badge-active"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{disp.active === false ? "Inativa" : "Ativa"}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="d-flex gap-2">
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-edit"
|
||||||
|
onClick={() => setEditando(disp.id)}
|
||||||
|
>
|
||||||
|
<i className="bi bi-pencil me-1"></i> Editar
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-delete"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedDisponibilidadeId(disp.id);
|
||||||
|
setShowDeleteModal(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className="bi bi-trash me-1"></i> Excluir
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{showDeleteModal && (
|
||||||
|
<div
|
||||||
|
className="modal fade show delete-modal"
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||||
|
}}
|
||||||
|
tabIndex="-1"
|
||||||
|
>
|
||||||
|
<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 esta disponibilidade?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={() => {
|
||||||
|
setShowDeleteModal(false);
|
||||||
|
setSelectedDisponibilidadeId(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancelar
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-danger"
|
||||||
|
onClick={() => deletarDisponibilidade(selectedDisponibilidadeId)}
|
||||||
|
>
|
||||||
|
Excluir
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,5 +1,11 @@
|
|||||||
|
<<<<<<< HEAD
|
||||||
import React, { useState, useEffect, useMemo } from "react";
|
import React, { useState, useEffect, useMemo } from "react";
|
||||||
import { useParams, useNavigate, useLocation } from "react-router-dom";
|
import { useParams, useNavigate, useLocation } from "react-router-dom";
|
||||||
|
=======
|
||||||
|
import React, { useEffect, useState, useCallback } from "react";
|
||||||
|
import { useParams, useSearchParams, useNavigate } from "react-router-dom";
|
||||||
|
import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
import DoctorForm from "../components/doctors/DoctorForm";
|
import DoctorForm from "../components/doctors/DoctorForm";
|
||||||
import { useAuth } from "../components/utils/AuthProvider";
|
import { useAuth } from "../components/utils/AuthProvider";
|
||||||
import API_KEY from "../components/utils/apiKeys";
|
import API_KEY from "../components/utils/apiKeys";
|
||||||
@ -26,11 +32,17 @@ const EditDoctorPage = () => {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const { getAuthorizationHeader } = useAuth();
|
const { getAuthorizationHeader } = useAuth();
|
||||||
|
<<<<<<< HEAD
|
||||||
|
|
||||||
const [doctor, setDoctor] = useState(null);
|
const [doctor, setDoctor] = useState(null);
|
||||||
const [availability, setAvailability] = useState([]);
|
const [availability, setAvailability] = useState([]);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [isSaving, setIsSaving] = useState(false);
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
=======
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [DoctorToPUT, setDoctorPUT] = useState({});
|
||||||
|
const [showSuccessModal, setShowSuccessModal] = useState(false);
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
|
|
||||||
const effectiveId = id;
|
const effectiveId = id;
|
||||||
|
|
||||||
@ -39,12 +51,58 @@ const EditDoctorPage = () => {
|
|||||||
const authHeader = getAuthorizationHeader();
|
const authHeader = getAuthorizationHeader();
|
||||||
if (authHeader) myHeaders.append("Authorization", authHeader);
|
if (authHeader) myHeaders.append("Authorization", authHeader);
|
||||||
myHeaders.append("Content-Type", "application/json");
|
myHeaders.append("Content-Type", "application/json");
|
||||||
|
<<<<<<< HEAD
|
||||||
if (API_KEY) myHeaders.append("apikey", API_KEY);
|
if (API_KEY) myHeaders.append("apikey", API_KEY);
|
||||||
myHeaders.append("Prefer", "return=representation");
|
myHeaders.append("Prefer", "return=representation");
|
||||||
return myHeaders;
|
return myHeaders;
|
||||||
};
|
};
|
||||||
|
|
||||||
const salvarDisponibilidades = async (doctorId, horariosAtualizados) => {
|
const salvarDisponibilidades = async (doctorId, horariosAtualizados) => {
|
||||||
|
=======
|
||||||
|
|
||||||
|
var raw = JSON.stringify(DoctorToPUT);
|
||||||
|
|
||||||
|
console.log("Enviando médico para atualização (PUT):", DoctorToPUT);
|
||||||
|
|
||||||
|
var requestOptions = {
|
||||||
|
method: "PUT",
|
||||||
|
headers: myHeaders,
|
||||||
|
body: raw,
|
||||||
|
redirect: "follow",
|
||||||
|
};
|
||||||
|
|
||||||
|
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DictInfo.id}`,requestOptions)
|
||||||
|
.then(response => {
|
||||||
|
console.log(response)
|
||||||
|
if (response.ok) {
|
||||||
|
setShowSuccessModal(true)
|
||||||
|
}
|
||||||
|
return response
|
||||||
|
})
|
||||||
|
.catch(error => console.log("erro", error))
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const HandlePatchAvailability = async (data) => {
|
||||||
|
const authHeader = getAuthorizationHeader();
|
||||||
|
|
||||||
|
var myHeaders = new Headers();
|
||||||
|
myHeaders.append("apikey", API_KEY);
|
||||||
|
myHeaders.append("Authorization", authHeader);
|
||||||
|
myHeaders.append("Content-Type", "application/json");
|
||||||
|
|
||||||
|
var raw = JSON.stringify(data);
|
||||||
|
|
||||||
|
console.log("Enviando disponibilidade para atualização (PATCH):", data);
|
||||||
|
|
||||||
|
var requestOptions = {
|
||||||
|
method: "PATCH",
|
||||||
|
headers: myHeaders,
|
||||||
|
body: raw,
|
||||||
|
redirect: "follow",
|
||||||
|
};
|
||||||
|
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
try {
|
try {
|
||||||
const headers = getHeaders();
|
const headers = getHeaders();
|
||||||
const promises = [];
|
const promises = [];
|
||||||
@ -109,6 +167,7 @@ const EditDoctorPage = () => {
|
|||||||
`${ENDPOINT_AVAILABILITY}?doctor_id=eq.${String(doctorId)}`,
|
`${ENDPOINT_AVAILABILITY}?doctor_id=eq.${String(doctorId)}`,
|
||||||
{ method: "GET", headers }
|
{ method: "GET", headers }
|
||||||
);
|
);
|
||||||
|
<<<<<<< HEAD
|
||||||
|
|
||||||
if (existingDisponibilidadesRes.ok) {
|
if (existingDisponibilidadesRes.ok) {
|
||||||
const existingDisponibilidades = await existingDisponibilidadesRes.json();
|
const existingDisponibilidades = await existingDisponibilidadesRes.json();
|
||||||
@ -134,6 +193,10 @@ const EditDoctorPage = () => {
|
|||||||
const updatedData = await updatedResponse.json();
|
const updatedData = await updatedResponse.json();
|
||||||
setAvailability(updatedData);
|
setAvailability(updatedData);
|
||||||
}
|
}
|
||||||
|
=======
|
||||||
|
console.log("Resposta PATCH Disponibilidade:", response);
|
||||||
|
alert("Disponibilidade atualizada com sucesso!");
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
@ -312,6 +375,7 @@ const EditDoctorPage = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<<<<<<< HEAD
|
||||||
<div className="container mt-4">
|
<div className="container mt-4">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
@ -326,6 +390,59 @@ const EditDoctorPage = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
=======
|
||||||
|
<div>
|
||||||
|
<DoctorForm
|
||||||
|
onSave={
|
||||||
|
mode === "availability" ? HandlePatchAvailability : HandlePutDoctor
|
||||||
|
}
|
||||||
|
formData={mode === "availability" ? availabilityToPATCH : DoctorToPUT}
|
||||||
|
setFormData={
|
||||||
|
mode === "availability" ? setAvailabilityToPATCH : setDoctorPUT
|
||||||
|
}
|
||||||
|
isEditingAvailability={mode === "availability"}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{showSuccessModal && (
|
||||||
|
<div
|
||||||
|
className="modal fade show delete-modal"
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||||
|
}}
|
||||||
|
tabIndex="-1"
|
||||||
|
>
|
||||||
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
|
||||||
|
<h5 className="modal-title">
|
||||||
|
Médico Editado
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-body">
|
||||||
|
<p className="mb-0 fs-5">
|
||||||
|
Médico editado com sucesso!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={() => {
|
||||||
|
setShowSuccessModal(false)
|
||||||
|
navigate(-1)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
OK
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -27,9 +27,8 @@ function TableDoctor({setDictInfo}) {
|
|||||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
const [selectedDoctorId, setSelectedDoctorId] = useState(null);
|
const [selectedDoctorId, setSelectedDoctorId] = useState(null);
|
||||||
|
|
||||||
// Ordenação rápida
|
const [sortKey, setSortKey] = useState(null);
|
||||||
const [sortKey, setSortKey] = useState(null); // 'nome' | 'idade' | null
|
const [sortDir, setSortDir] = useState('asc');
|
||||||
const [sortDir, setSortDir] = useState('asc'); // 'asc' | 'desc'
|
|
||||||
|
|
||||||
const limparFiltros = () => {
|
const limparFiltros = () => {
|
||||||
setSearch("");
|
setSearch("");
|
||||||
@ -147,7 +146,10 @@ function TableDoctor({setDictInfo}) {
|
|||||||
return resultado;
|
return resultado;
|
||||||
}) : [];
|
}) : [];
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
|
|
||||||
|
=======
|
||||||
|
>>>>>>> alteracoes-modais-tabela
|
||||||
const applySorting = (arr) => {
|
const applySorting = (arr) => {
|
||||||
if (!Array.isArray(arr) || !sortKey) return arr;
|
if (!Array.isArray(arr) || !sortKey) return arr;
|
||||||
const copy = [...arr];
|
const copy = [...arr];
|
||||||
@ -277,7 +279,7 @@ function TableDoctor({setDictInfo}) {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Ordenação rápida */}
|
|
||||||
<div className="vr mx-2 d-none d-md-block" />
|
<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>
|
<span className="text-muted small">Ordenar por:</span>
|
||||||
@ -481,7 +483,6 @@ 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">
|
||||||
@ -554,15 +555,10 @@ function TableDoctor({setDictInfo}) {
|
|||||||
>
|
>
|
||||||
<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">
|
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
||||||
<h5 className="modal-title">
|
<h5 className="modal-title">
|
||||||
Confirmação de Exclusão
|
Confirmação de Exclusão
|
||||||
</h5>
|
</h5>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn-close"
|
|
||||||
onClick={() => setShowDeleteModal(false)}
|
|
||||||
></button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
|
|||||||
@ -9,6 +9,7 @@ import { useAuth } from '../components/utils/AuthProvider'
|
|||||||
const EditPage = ({DictInfo}) => {
|
const EditPage = ({DictInfo}) => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const [PatientToPUT, setPatientPUT] = useState({})
|
const [PatientToPUT, setPatientPUT] = useState({})
|
||||||
|
const [showSuccessModal, setShowSuccessModal] = useState(false)
|
||||||
|
|
||||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||||
|
|
||||||
@ -37,9 +38,15 @@ const HandlePutPatient = async () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${PatientToPUT.id}`,requestOptions)
|
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${PatientToPUT.id}`,requestOptions)
|
||||||
.then(response => console.log(response))
|
.then(response => {
|
||||||
|
console.log(response)
|
||||||
|
if (response.ok) {
|
||||||
|
setShowSuccessModal(true)
|
||||||
|
}
|
||||||
|
return response
|
||||||
|
})
|
||||||
.then(result => console.log(result))
|
.then(result => console.log(result))
|
||||||
.catch(console.log("erro"))
|
.catch(error => console.log("erro", error))
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -53,6 +60,46 @@ const HandlePutPatient = async () => {
|
|||||||
setFormData={setPatientPUT}
|
setFormData={setPatientPUT}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{showSuccessModal && (
|
||||||
|
<div
|
||||||
|
className="modal fade show delete-modal"
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
backgroundColor: "rgba(0, 0, 0, 0,5)",
|
||||||
|
}}
|
||||||
|
tabIndex="-1"
|
||||||
|
>
|
||||||
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
|
||||||
|
<h5 className="modal-title">
|
||||||
|
Paciente Editado
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-body">
|
||||||
|
<p className="mb-0 fs-5">
|
||||||
|
Paciente editado com sucesso!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={() => {
|
||||||
|
setShowSuccessModal(false)
|
||||||
|
navigate(-1)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
OK
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import 'dayjs/locale/pt-br';
|
import 'dayjs/locale/pt-br';
|
||||||
import weekday from 'dayjs/plugin/weekday';
|
import weekday from 'dayjs/plugin/weekday';
|
||||||
@ -23,12 +24,10 @@ const getDateRange = (date, view) => {
|
|||||||
toDate = startDayjs.format('YYYY-MM-DD');
|
toDate = startDayjs.format('YYYY-MM-DD');
|
||||||
titleRange = startDayjs.format('DD/MM/YYYY');
|
titleRange = startDayjs.format('DD/MM/YYYY');
|
||||||
} else if (view === 'semanal') {
|
} else if (view === 'semanal') {
|
||||||
// Padrão Dayjs: Sunday=0, Monday=1.
|
|
||||||
// startOf('week') pode ser Domingo ou Segunda, dependendo do locale.
|
|
||||||
// Se precisar forçar a Segunda-feira:
|
|
||||||
let weekStart = startDayjs.startOf('week');
|
let weekStart = startDayjs.startOf('week');
|
||||||
if (weekStart.day() !== 1) { // Se não for segunda-feira (1), ajusta
|
if (weekStart.day() !== 1) {
|
||||||
weekStart = startDayjs.weekday(1); // Vai para a segunda-feira desta semana
|
weekStart = startDayjs.weekday(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
const weekEnd = weekStart.add(6, 'day');
|
const weekEnd = weekStart.add(6, 'day');
|
||||||
@ -52,12 +51,21 @@ const getDateRange = (date, view) => {
|
|||||||
const ExcecoesDisponibilidade = () => {
|
const ExcecoesDisponibilidade = () => {
|
||||||
|
|
||||||
const { getAuthorizationHeader } = useAuth();
|
const { getAuthorizationHeader } = useAuth();
|
||||||
|
const navigate = useNavigate();
|
||||||
const [pageNovaExcecao, setPageNovaExcecao] = useState(false);
|
const [pageNovaExcecao, setPageNovaExcecao] = useState(false);
|
||||||
const [excecoes, setExcecoes] = useState([]);
|
const [excecoes, setExcecoes] = useState([]);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
|
const [selectedExceptionId, setSelectedExceptionId] = useState(null);
|
||||||
|
const [showSuccessModal, setShowSuccessModal] = useState(false);
|
||||||
|
const [successMessage, setSuccessMessage] = useState('');
|
||||||
|
|
||||||
const [filtroMedicoId, setFiltroMedicoId] = useState('');
|
const [filtroMedicoId, setFiltroMedicoId] = useState('');
|
||||||
const [filtroData, setFiltroData] = useState(dayjs().format('YYYY-MM-DD'));
|
const [filtroData, setFiltroData] = useState(dayjs().format('YYYY-MM-DD'));
|
||||||
|
const [listaDeMedicos, setListaDeMedicos] = useState([]);
|
||||||
|
const [searchTermDoctor, setSearchTermDoctor] = useState('');
|
||||||
|
const [filteredDoctors, setFilteredDoctors] = useState([]);
|
||||||
|
const [selectedDoctor, setSelectedDoctor] = useState(null);
|
||||||
|
|
||||||
const [visualizacao, setVisualizacao] = useState('diario');
|
const [visualizacao, setVisualizacao] = useState('diario');
|
||||||
|
|
||||||
@ -123,8 +131,51 @@ const ExcecoesDisponibilidade = () => {
|
|||||||
fetchExcecoes(fromDate, toDate, filtroMedicoId);
|
fetchExcecoes(fromDate, toDate, filtroMedicoId);
|
||||||
}, [fetchExcecoes, filtroMedicoId, fromDate, toDate]);
|
}, [fetchExcecoes, filtroMedicoId, fromDate, toDate]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchDoctors = async () => {
|
||||||
|
const myHeaders = new Headers();
|
||||||
|
const authHeader = resolveAuthHeader();
|
||||||
|
if (authHeader) myHeaders.append("Authorization", authHeader);
|
||||||
|
if (API_KEY) myHeaders.append("apikey", API_KEY);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?select=id,full_name', {
|
||||||
|
method: 'GET',
|
||||||
|
headers: myHeaders
|
||||||
|
});
|
||||||
|
if (response.ok) {
|
||||||
|
const doctors = await response.json();
|
||||||
|
setListaDeMedicos(doctors);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao buscar médicos:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
fetchDoctors();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSearchDoctors = (term) => {
|
||||||
|
setSearchTermDoctor(term);
|
||||||
|
if (term.trim() === '') {
|
||||||
|
setFilteredDoctors([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const filtered = listaDeMedicos.filter(doc =>
|
||||||
|
doc.full_name.toLowerCase().includes(term.toLowerCase())
|
||||||
|
);
|
||||||
|
setFilteredDoctors(filtered);
|
||||||
|
};
|
||||||
|
|
||||||
|
const limparFiltros = () => {
|
||||||
|
setSearchTermDoctor('');
|
||||||
|
setFilteredDoctors([]);
|
||||||
|
setSelectedDoctor(null);
|
||||||
|
setFiltroMedicoId('');
|
||||||
|
setFiltroData(dayjs().format('YYYY-MM-DD'));
|
||||||
|
setVisualizacao('diario');
|
||||||
|
};
|
||||||
|
|
||||||
const deleteExcecao = async (id) => {
|
const deleteExcecao = async (id) => {
|
||||||
if (!window.confirm("Confirma exclusão desta exceção?")) return;
|
|
||||||
const myHeaders = new Headers();
|
const myHeaders = new Headers();
|
||||||
const authHeader = resolveAuthHeader();
|
const authHeader = resolveAuthHeader();
|
||||||
if (authHeader) myHeaders.append("Authorization", authHeader);
|
if (authHeader) myHeaders.append("Authorization", authHeader);
|
||||||
@ -139,6 +190,9 @@ const ExcecoesDisponibilidade = () => {
|
|||||||
});
|
});
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
setExcecoes(prev => prev.filter(x => x.id !== id));
|
setExcecoes(prev => prev.filter(x => x.id !== id));
|
||||||
|
setShowDeleteModal(false);
|
||||||
|
setSuccessMessage('Exceção excluída com sucesso!');
|
||||||
|
setShowSuccessModal(true);
|
||||||
} else {
|
} else {
|
||||||
const text = await res.text();
|
const text = await res.text();
|
||||||
console.error('Erro ao deletar exceção', res.status, text);
|
console.error('Erro ao deletar exceção', res.status, text);
|
||||||
@ -163,7 +217,7 @@ const ExcecoesDisponibilidade = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{/* Título e Botão de Criação */}
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
|
||||||
<h1>Gerenciar Exceções de Disponibilidade</h1>
|
<h1>Gerenciar Exceções de Disponibilidade</h1>
|
||||||
<button
|
<button
|
||||||
@ -175,30 +229,80 @@ const ExcecoesDisponibilidade = () => {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='atendimento-eprocura'>
|
<div className="card p-3 mb-3" style={{ marginTop: '20px' }}>
|
||||||
|
<h5 className="mb-3">
|
||||||
|
<i className="bi bi-funnel-fill me-2 text-primary"></i>
|
||||||
|
Filtros
|
||||||
|
</h5>
|
||||||
|
|
||||||
{/* Filtros de Médico e Data */}
|
<div className="row g-3 mb-3">
|
||||||
<div className='busca-atendimento'>
|
<div className="col-md-6">
|
||||||
<div>
|
<label className="form-label fw-bold">Buscar Médico</label>
|
||||||
<i className="fa-solid fa-user-doctor"></i>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Filtrar por ID do Médico..."
|
className="form-control"
|
||||||
value={filtroMedicoId}
|
placeholder="Digite o nome do médico..."
|
||||||
onChange={(e) => setFiltroMedicoId(e.target.value)}
|
value={searchTermDoctor}
|
||||||
|
onChange={(e) => handleSearchDoctors(e.target.value)}
|
||||||
/>
|
/>
|
||||||
|
<small className="text-muted">Filtre as exceções por médico</small>
|
||||||
|
{searchTermDoctor && filteredDoctors.length > 0 && (
|
||||||
|
<div className="list-group mt-2" style={{ maxHeight: '200px', overflowY: 'auto' }}>
|
||||||
|
{filteredDoctors.map((doc) => (
|
||||||
|
<button
|
||||||
|
key={doc.id}
|
||||||
|
className="list-group-item list-group-item-action"
|
||||||
|
onClick={() => {
|
||||||
|
setSearchTermDoctor(doc.full_name);
|
||||||
|
setFilteredDoctors([]);
|
||||||
|
setSelectedDoctor(doc);
|
||||||
|
setFiltroMedicoId(doc.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{doc.full_name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
)}
|
||||||
<i className="fa-solid fa-calendar"></i>
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-6">
|
||||||
|
<label className="form-label fw-bold">Data de Referência</label>
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
|
className="form-control"
|
||||||
value={filtroData}
|
value={filtroData}
|
||||||
onChange={(e) => setFiltroData(e.target.value)}
|
onChange={(e) => setFiltroData(e.target.value)}
|
||||||
/>
|
/>
|
||||||
|
<small className="text-muted">Selecione a data base para visualização</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Botões de Visualização (Dia/Semana/Mês) */}
|
<div className="d-flex justify-content-between align-items-center">
|
||||||
|
<div>
|
||||||
|
{selectedDoctor && (
|
||||||
|
<span className="badge bg-primary me-2">
|
||||||
|
<i className="bi bi-person-fill me-1"></i>
|
||||||
|
{selectedDoctor.full_name}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<div className="contador-pacientes" style={{ display: 'inline-block' }}>
|
||||||
|
{excecoes.length} DE {excecoes.length} EXCEÇÕES ENCONTRADAS
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-secondary btn-sm"
|
||||||
|
onClick={limparFiltros}
|
||||||
|
>
|
||||||
|
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='atendimento-eprocura'>
|
||||||
|
|
||||||
|
|
||||||
<div className='container-btns-agenda-fila_esepera'>
|
<div className='container-btns-agenda-fila_esepera'>
|
||||||
<button
|
<button
|
||||||
className={`btn-agenda ${visualizacao === "diario" ? "opc-agenda-ativo" : ""}`}
|
className={`btn-agenda ${visualizacao === "diario" ? "opc-agenda-ativo" : ""}`}
|
||||||
@ -220,7 +324,7 @@ const ExcecoesDisponibilidade = () => {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tabela de Exceções (Título usa o titleRange calculado) */}
|
|
||||||
<section className='calendario-ou-filaespera'>
|
<section className='calendario-ou-filaespera'>
|
||||||
<div className="fila-container">
|
<div className="fila-container">
|
||||||
<h2 className="fila-titulo">Exceções em {titleRange} ({excecoes.length})</h2>
|
<h2 className="fila-titulo">Exceções em {titleRange} ({excecoes.length})</h2>
|
||||||
@ -264,7 +368,10 @@ const ExcecoesDisponibilidade = () => {
|
|||||||
|
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-delete"
|
className="btn btn-sm btn-delete"
|
||||||
onClick={() => deleteExcecao(exc.id)}
|
onClick={() => {
|
||||||
|
setSelectedExceptionId(exc.id);
|
||||||
|
setShowDeleteModal(true);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<i className="bi bi-trash me-1"></i> Excluir
|
<i className="bi bi-trash me-1"></i> Excluir
|
||||||
</button>
|
</button>
|
||||||
@ -278,6 +385,89 @@ const ExcecoesDisponibilidade = () => {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{showDeleteModal && (
|
||||||
|
<div
|
||||||
|
className="modal fade show delete-modal"
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||||
|
}}
|
||||||
|
tabIndex="-1"
|
||||||
|
>
|
||||||
|
<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 esta exceção?
|
||||||
|
</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={() => deleteExcecao(selectedExceptionId)}
|
||||||
|
>
|
||||||
|
Excluir
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
{showSuccessModal && (
|
||||||
|
<div
|
||||||
|
className="modal fade show delete-modal"
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||||
|
}}
|
||||||
|
tabIndex="-1"
|
||||||
|
>
|
||||||
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
|
||||||
|
<h5 className="modal-title">
|
||||||
|
Sucesso
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-body">
|
||||||
|
<p className="mb-0 fs-5">
|
||||||
|
{successMessage}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={() => setShowSuccessModal(false)}
|
||||||
|
>
|
||||||
|
OK
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -32,7 +32,6 @@ const LaudoManager = () => {
|
|||||||
const [paginaAtual, setPaginaAtual] = useState(1);
|
const [paginaAtual, setPaginaAtual] = useState(1);
|
||||||
const [itensPorPagina, setItensPorPagina] = useState(10);
|
const [itensPorPagina, setItensPorPagina] = useState(10);
|
||||||
|
|
||||||
// agora guardamos a mensagem (null = sem aviso)
|
|
||||||
const [noPermissionText, setNoPermissionText] = useState(null);
|
const [noPermissionText, setNoPermissionText] = useState(null);
|
||||||
|
|
||||||
const isSecretary = true;
|
const isSecretary = true;
|
||||||
@ -162,11 +161,11 @@ const LaudoManager = () => {
|
|||||||
|
|
||||||
const handleLiberarLaudo = async (relatorio) => {
|
const handleLiberarLaudo = async (relatorio) => {
|
||||||
if (isSecretary) {
|
if (isSecretary) {
|
||||||
// MUDANÇA: mostrar "Ainda não implementado"
|
|
||||||
setNoPermissionText('Ainda não implementado');
|
setNoPermissionText('Ainda não implementado');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// para médicos: implementação real já estava antes (mantive o bloco, caso queira)
|
|
||||||
try {
|
try {
|
||||||
const myHeaders = new Headers();
|
const myHeaders = new Headers();
|
||||||
myHeaders.append('apikey', API_KEY);
|
myHeaders.append('apikey', API_KEY);
|
||||||
@ -187,7 +186,6 @@ const LaudoManager = () => {
|
|||||||
throw new Error('Erro ao liberar laudo: ' + res.status + ' ' + txt);
|
throw new Error('Erro ao liberar laudo: ' + res.status + ' ' + txt);
|
||||||
}
|
}
|
||||||
|
|
||||||
// refetch simples
|
|
||||||
const refreshed = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*", {
|
const refreshed = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*", {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
headers: (() => { const h=new Headers(); h.append('apikey', API_KEY); if(authHeader) h.append('Authorization', authHeader); return h; })(),
|
headers: (() => { const h=new Headers(); h.append('apikey', API_KEY); if(authHeader) h.append('Authorization', authHeader); return h; })(),
|
||||||
@ -327,7 +325,7 @@ const LaudoManager = () => {
|
|||||||
<i className="bi bi-pencil me-1"></i> Editar
|
<i className="bi bi-pencil me-1"></i> Editar
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Removido o botão "Imprimir" daqui (agora no Ver Detalhes) */}
|
|
||||||
|
|
||||||
<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
|
||||||
@ -405,14 +403,13 @@ const LaudoManager = () => {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Modal principal (detalhes) */}
|
|
||||||
{showModal && relatorioModal && (
|
{showModal && relatorioModal && (
|
||||||
<div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowModal(false)}>
|
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }} tabIndex="-1">
|
||||||
<div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
|
<div className="modal-dialog modal-dialog-centered modal-lg">
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div className="modal-header custom-modal-header">
|
<div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
|
||||||
<h5 className="modal-title">Relatório de {pacientesComRelatorios[modalIndex]?.full_name || relatorioModal.patient_name || 'Paciente'}</h5>
|
<h5 className="modal-title">Relatório de {pacientesComRelatorios[modalIndex]?.full_name || relatorioModal.patient_name || 'Paciente'}</h5>
|
||||||
<button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowModal(false)}></button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
@ -441,11 +438,11 @@ const LaudoManager = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-footer custom-modal-footer">
|
<div className="modal-footer">
|
||||||
<button className="btn btn-primary" onClick={() => BaixarPDFdoRelatorio(pacientesComRelatorios[modalIndex]?.full_name || 'paciente', modalIndex)}>
|
<button className="btn btn-primary" onClick={() => BaixarPDFdoRelatorio(pacientesComRelatorios[modalIndex]?.full_name || 'paciente', modalIndex)}>
|
||||||
<i className='bi bi-file-pdf-fill'></i> baixar em pdf
|
<i className='bi bi-file-pdf-fill me-1'></i> Baixar em PDF
|
||||||
</button>
|
</button>
|
||||||
<button type="button" className="btn btn-outline-secondary" onClick={() => { setShowModal(false) }}>
|
<button type="button" className="btn btn-secondary" onClick={() => { setShowModal(false) }}>
|
||||||
Fechar
|
Fechar
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -454,14 +451,13 @@ const LaudoManager = () => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Modal Protocolo */}
|
|
||||||
{showProtocolModal && protocolForIndex && (
|
{showProtocolModal && protocolForIndex && (
|
||||||
<div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowProtocolModal(false)}>
|
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }} tabIndex="-1">
|
||||||
<div className="modal-dialog modal-dialog-tabela-relatorio" role="document" onClick={(e) => e.stopPropagation()}>
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div className="modal-header custom-modal-header">
|
<div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
|
||||||
<h5 className="modal-title">Protocolo de Entrega - {protocolForIndex.relatorio?.patient_name || 'Paciente'}</h5>
|
<h5 className="modal-title">Protocolo de Entrega - {protocolForIndex.relatorio?.patient_name || 'Paciente'}</h5>
|
||||||
<button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowProtocolModal(false)}></button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
@ -474,14 +470,14 @@ const LaudoManager = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-footer custom-modal-footer">
|
<div className="modal-footer">
|
||||||
<button className="btn btn-primary" onClick={() => {
|
<button className="btn btn-primary" onClick={() => {
|
||||||
const idx = protocolForIndex.index ?? 0;
|
const idx = protocolForIndex.index ?? 0;
|
||||||
BaixarPDFdoRelatorio(protocolForIndex.relatorio?.patient_name || 'paciente', idx);
|
BaixarPDFdoRelatorio(protocolForIndex.relatorio?.patient_name || 'paciente', idx);
|
||||||
}}>
|
}}>
|
||||||
<i className='bi bi-file-earmark-pdf-fill'></i> baixar protocolo (PDF)
|
<i className='bi bi-file-earmark-pdf-fill me-1'></i> Baixar Protocolo (PDF)
|
||||||
</button>
|
</button>
|
||||||
<button type="button" className="btn btn-outline-secondary" onClick={() => setShowProtocolModal(false)}>
|
<button type="button" className="btn btn-secondary" onClick={() => setShowProtocolModal(false)}>
|
||||||
Fechar
|
Fechar
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -490,17 +486,18 @@ const LaudoManager = () => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Variável de aviso: mostra texto personalizado */}
|
|
||||||
{noPermissionText && (
|
{noPermissionText && (
|
||||||
<div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setNoPermissionText(null)}>
|
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }} tabIndex="-1">
|
||||||
<div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div style={{ padding: 18 }}>
|
<div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
|
||||||
<h5 style={{ marginBottom: 8 }}>{noPermissionText}</h5>
|
<h5 className="modal-title">Aviso</h5>
|
||||||
<p style={{ color: '#6c757d' }}>{/* opcional descrição aqui */}</p>
|
|
||||||
<div style={{ textAlign: 'right', marginTop: 12 }}>
|
|
||||||
<button className="btn btn-outline-secondary" onClick={() => setNoPermissionText(null)}>Fechar</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<p>{noPermissionText}</p>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button className="btn btn-primary" onClick={() => setNoPermissionText(null)}>Fechar</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -2,14 +2,6 @@ import React, { useState, useEffect, useCallback } from "react";
|
|||||||
import { useLocation, useNavigate } from "react-router-dom";
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
import "./style/ProfilePage.css";
|
import "./style/ProfilePage.css";
|
||||||
|
|
||||||
|
|
||||||
const MOCK_API_BASE_URL = "https://mock.apidog.com/m1/1053378-0-default";
|
|
||||||
|
|
||||||
|
|
||||||
const getLocalAvatar = () => localStorage.getItem('user_avatar');
|
|
||||||
const setLocalAvatar = (avatarData) => localStorage.setItem('user_avatar', avatarData);
|
|
||||||
const clearLocalAvatar = () => localStorage.removeItem('user_avatar');
|
|
||||||
|
|
||||||
const ROLES = {
|
const ROLES = {
|
||||||
ADMIN: "Administrador",
|
ADMIN: "Administrador",
|
||||||
SECRETARY: "Secretária",
|
SECRETARY: "Secretária",
|
||||||
@ -36,7 +28,6 @@ const ProfilePage = () => {
|
|||||||
const [userEmail, setUserEmail] = useState("admin@squad23.com");
|
const [userEmail, setUserEmail] = useState("admin@squad23.com");
|
||||||
const [avatarUrl, setAvatarUrl] = useState(null);
|
const [avatarUrl, setAvatarUrl] = useState(null);
|
||||||
const [isEditingName, setIsEditingName] = useState(false);
|
const [isEditingName, setIsEditingName] = useState(false);
|
||||||
const [isUploading, setIsUploading] = useState(false);
|
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
|
||||||
@ -52,14 +43,21 @@ const ProfilePage = () => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadProfileData = () => {
|
const loadProfileData = () => {
|
||||||
|
const localAvatar = localStorage.getItem('user_avatar');
|
||||||
const localAvatar = getLocalAvatar();
|
|
||||||
if (localAvatar) {
|
if (localAvatar) {
|
||||||
setAvatarUrl(localAvatar);
|
setAvatarUrl(localAvatar);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
loadProfileData();
|
loadProfileData();
|
||||||
|
|
||||||
|
|
||||||
|
const handleStorageChange = () => {
|
||||||
|
loadProfileData();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('storage', handleStorageChange);
|
||||||
|
return () => window.removeEventListener('storage', handleStorageChange);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleNameSave = () => {
|
const handleNameSave = () => {
|
||||||
@ -83,104 +81,6 @@ const ProfilePage = () => {
|
|||||||
|
|
||||||
const handleClose = () => navigate(-1);
|
const handleClose = () => navigate(-1);
|
||||||
|
|
||||||
|
|
||||||
const handleAvatarUpload = async (event) => {
|
|
||||||
const file = event.target.files[0];
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
|
|
||||||
const MAX_FILE_SIZE = 5 * 1024 * 1024;
|
|
||||||
const ACCEPTED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
|
|
||||||
|
|
||||||
if (file.size > MAX_FILE_SIZE) {
|
|
||||||
setError("Arquivo muito grande. Máximo 5MB.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!ACCEPTED_TYPES.includes(file.type)) {
|
|
||||||
setError("Tipo de arquivo não suportado. Use JPEG, PNG, GIF ou WebP.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsUploading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await uploadAvatarToMockAPI(file);
|
|
||||||
|
|
||||||
const newAvatarUrl = result.url || result.avatarUrl;
|
|
||||||
if (newAvatarUrl) {
|
|
||||||
setAvatarUrl(newAvatarUrl);
|
|
||||||
setLocalAvatar(newAvatarUrl);
|
|
||||||
console.log('Avatar enviado para API com sucesso');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} catch (apiError) {
|
|
||||||
|
|
||||||
console.log('API não disponível, salvando localmente...');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = (e) => {
|
|
||||||
const imageDataUrl = e.target.result;
|
|
||||||
setLocalAvatar(imageDataUrl);
|
|
||||||
setAvatarUrl(imageDataUrl);
|
|
||||||
console.log('Avatar salvo localmente');
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
|
|
||||||
console.error('Erro no processamento:', error);
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = (e) => {
|
|
||||||
const imageDataUrl = e.target.result;
|
|
||||||
setLocalAvatar(imageDataUrl);
|
|
||||||
setAvatarUrl(imageDataUrl);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
} finally {
|
|
||||||
setIsUploading(false);
|
|
||||||
event.target.value = '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const uploadAvatarToMockAPI = async (file) => {
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("avatar", file);
|
|
||||||
|
|
||||||
const response = await fetch(`${MOCK_API_BASE_URL}/storage/v1/object/avatars/[path]`, {
|
|
||||||
method: "POST",
|
|
||||||
body: formData
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return await response.json();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const clearAvatar = () => {
|
|
||||||
|
|
||||||
fetch(`${MOCK_API_BASE_URL}/storage/v1/object/avatars/[path]`, {
|
|
||||||
method: "DELETE"
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
clearLocalAvatar();
|
|
||||||
setAvatarUrl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
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">
|
||||||
@ -203,7 +103,7 @@ const ProfilePage = () => {
|
|||||||
className="avatar-img"
|
className="avatar-img"
|
||||||
onError={() => {
|
onError={() => {
|
||||||
setAvatarUrl(null);
|
setAvatarUrl(null);
|
||||||
clearLocalAvatar();
|
localStorage.removeItem('user_avatar');
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
@ -213,25 +113,14 @@ const ProfilePage = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label
|
<p style={{
|
||||||
className={`avatar-edit-btn ${isUploading ? 'uploading' : ''}`}
|
textAlign: 'center',
|
||||||
title="Alterar foto de perfil"
|
marginTop: '10px',
|
||||||
>
|
fontSize: '0.85rem',
|
||||||
{isUploading ? 'Enviando...' : 'Alterar Foto'}
|
color: '#666'
|
||||||
<input
|
}}>
|
||||||
type="file"
|
Gerencie seu avatar no menu do perfil acima
|
||||||
accept="image/*"
|
|
||||||
onChange={handleAvatarUpload}
|
|
||||||
disabled={isUploading}
|
|
||||||
style={{ display: "none" }}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{isUploading && (
|
|
||||||
<p className="upload-status">
|
|
||||||
Processando imagem...
|
|
||||||
</p>
|
</p>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -287,11 +176,6 @@ const ProfilePage = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="profile-actions">
|
<div className="profile-actions">
|
||||||
{avatarUrl && (
|
|
||||||
<button onClick={clearAvatar} className="btn btn-clear">
|
|
||||||
Remover Avatar
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<button
|
<button
|
||||||
className="btn btn-close"
|
className="btn btn-close"
|
||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
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 "./style/TablePaciente.css";
|
import "./style/TablePaciente.css";
|
||||||
@ -9,6 +9,7 @@ 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 [pacientes, setPacientes] = useState([]);
|
const [pacientes, setPacientes] = useState([]);
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
@ -23,9 +24,9 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
const [dataInicial, setDataInicial] = useState("");
|
const [dataInicial, setDataInicial] = useState("");
|
||||||
const [dataFinal, setDataFinal] = useState("");
|
const [dataFinal, setDataFinal] = useState("");
|
||||||
|
|
||||||
// Ordenação rápida
|
|
||||||
const [sortKey, setSortKey] = useState(null); // 'nome' | 'idade' | null
|
const [sortKey, setSortKey] = useState(null);
|
||||||
const [sortDir, setSortDir] = useState('asc'); // 'asc' | 'desc'
|
const [sortDir, setSortDir] = useState('asc');
|
||||||
|
|
||||||
|
|
||||||
const [paginaAtual, setPaginaAtual] = useState(1);
|
const [paginaAtual, setPaginaAtual] = useState(1);
|
||||||
@ -250,7 +251,7 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
return resultado;
|
return resultado;
|
||||||
}) : [];
|
}) : [];
|
||||||
|
|
||||||
// Aplica ordenação rápida
|
|
||||||
const applySorting = (arr) => {
|
const applySorting = (arr) => {
|
||||||
if (!Array.isArray(arr) || !sortKey) return arr;
|
if (!Array.isArray(arr) || !sortKey) return arr;
|
||||||
const copy = [...arr];
|
const copy = [...arr];
|
||||||
@ -377,7 +378,6 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
<i className="bi bi-calendar me-1"></i> Aniversariantes
|
<i className="bi bi-calendar me-1"></i> Aniversariantes
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Ordenação rápida (estilo compacto por select) */}
|
|
||||||
<div className="vr mx-2 d-none d-md-block" />
|
<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>
|
<span className="text-muted small">Ordenar por:</span>
|
||||||
@ -550,11 +550,15 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<Link to={"edit"}>
|
<button
|
||||||
<button className="btn btn-sm btn-edit" onClick={() => setDictInfo(paciente)}>
|
className="btn btn-sm btn-edit"
|
||||||
|
onClick={() => {
|
||||||
|
setDictInfo(paciente);
|
||||||
|
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"
|
||||||
@ -588,7 +592,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">
|
||||||
@ -661,15 +665,10 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
|||||||
>
|
>
|
||||||
<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">
|
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
||||||
<h5 className="modal-title">
|
<h5 className="modal-title">
|
||||||
Confirmação de Exclusão
|
Confirmação de Exclusão
|
||||||
</h5>
|
</h5>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn-close"
|
|
||||||
onClick={() => setShowDeleteModal(false)}
|
|
||||||
></button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user