Atualizacao de modais e ajuste de tabela
This commit is contained in:
parent
ad7c300a44
commit
496a83ecc1
6250
package-lock.json
generated
6250
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -2,7 +2,6 @@ import React, { useState, useMemo, useEffect, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import API_KEY from '../components/utils/apiKeys.js';
|
||||
import AgendamentoCadastroManager from '../pages/AgendamentoCadastroManager.jsx';
|
||||
// Removidos imports não utilizados no novo fluxo
|
||||
import { GetAllDoctors } from '../components/utils/Functions-Endpoints/Doctor.js';
|
||||
import { useAuth } from '../components/utils/AuthProvider.js';
|
||||
import dayjs from 'dayjs';
|
||||
@ -25,7 +24,7 @@ const Agendamento = () => {
|
||||
const { getAuthorizationHeader, user } = useAuth();
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
// ID do médico que você quer visualizar
|
||||
|
||||
const ID_MEDICO_ESPECIFICO = "078d2a67-b4c1-43c8-ae32-c1e75bb5b3df";
|
||||
|
||||
const [listaTodosAgendamentos, setListaTodosAgendamentos] = useState([]);
|
||||
@ -56,7 +55,7 @@ const Agendamento = () => {
|
||||
year: currentDate.year()
|
||||
});
|
||||
|
||||
// ✨ ALTERAÇÃO PRINCIPAL: A busca agora filtra pelo ID do médico direto na API
|
||||
|
||||
const fetchAppointments = useCallback(async () => {
|
||||
if (!authHeader) return;
|
||||
setShowSpinner(true);
|
||||
@ -65,7 +64,7 @@ const Agendamento = () => {
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
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=*`;
|
||||
|
||||
try {
|
||||
@ -131,7 +130,7 @@ const Agendamento = () => {
|
||||
useEffect(() => {
|
||||
if(authHeader) {
|
||||
fetchAppointments();
|
||||
// A busca de todos os médicos pode continuar caso a secretária precise ver a lista
|
||||
|
||||
if (user?.role !== 'doctor') {
|
||||
GetAllDoctors(authHeader).then(docs => {
|
||||
if (docs) {
|
||||
@ -144,7 +143,7 @@ const Agendamento = () => {
|
||||
|
||||
useEffect(() => {
|
||||
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) {
|
||||
setAgendamentosOrganizados({});
|
||||
setFilaEsperaData([]);
|
||||
@ -153,8 +152,7 @@ const Agendamento = () => {
|
||||
|
||||
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 patientIdsToFetch = new Set();
|
||||
@ -179,7 +177,7 @@ const Agendamento = () => {
|
||||
}).then(res => res.json())
|
||||
);
|
||||
} else {
|
||||
fetchPromises.push(Promise.resolve(null)); // Mantém a ordem do Promise.all
|
||||
fetchPromises.push(Promise.resolve(null));
|
||||
}
|
||||
|
||||
if (doctorIdsToFetch.size > 0) {
|
||||
@ -239,9 +237,9 @@ const Agendamento = () => {
|
||||
};
|
||||
|
||||
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) => {
|
||||
setAgendamentoParaEdicao(agendamento);
|
||||
@ -276,22 +274,20 @@ const Agendamento = () => {
|
||||
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 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: '#f8d7da', color: '#721c24' }}>
|
||||
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
||||
<h5 className="modal-title">Confirmação de Cancelamento</h5>
|
||||
<button type="button" className="btn-close" onClick={() => setShowDeleteModal(false)}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p>Qual o motivo do cancelamento? (Opcional)</p>
|
||||
<textarea className="form-control" rows="3" value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)}></textarea>
|
||||
<p>Qual o motivo do cancelamento?</p>
|
||||
<textarea className="form-control" rows="3" value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} placeholder="Ex: Motivo pessoal, reagendamento, etc."></textarea>
|
||||
</div>
|
||||
<div className="modal-footer justify-content-center">
|
||||
<button type="button" className="btn btn-secondary" onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}>Manter Agendamento</button>
|
||||
{/* ✨ Botão sempre ativo ✨ */}
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-primary" onClick={() => { setShowDeleteModal(false); setMotivoCancelamento(""); }}>Cancelar</button>
|
||||
<button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)}>
|
||||
<Trash2 size={16} className="me-1" /> Confirmar Cancelamento
|
||||
Confirmar Cancelamento
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -379,33 +375,58 @@ const DeleteModal = () => (
|
||||
{!PageNovaConsulta ? (
|
||||
<div className='atendimento-eprocura'>
|
||||
{user?.role !== 'doctor' && (
|
||||
<div className='unidade-selecionarprofissional'>
|
||||
<div className='busca-atendimento-container'>
|
||||
<div className='input-e-dropdown-wrapper'>
|
||||
<div className='busca-atendimento'>
|
||||
<div className='mb-5'>
|
||||
<input type="text" placeholder="Filtrar atendimento do medico..." value={searchTermDoctor} onChange={(e) => handleSearchMedicos(e.target.value)} />
|
||||
</div>
|
||||
<div className="card p-3 mb-3 table-paciente-filters">
|
||||
<h5 className="mb-3">
|
||||
<i className="bi bi-funnel-fill me-2 text-primary"></i>
|
||||
Filtrar por Médico
|
||||
</h5>
|
||||
<div className="position-relative">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Digite o nome do médico..."
|
||||
value={searchTermDoctor}
|
||||
onChange={(e) => handleSearchMedicos(e.target.value)}
|
||||
/>
|
||||
<small className="text-muted">Buscar médico para filtrar consultas</small>
|
||||
|
||||
{searchTermDoctor && FiltredTodosMedicos.length > 0 && (
|
||||
<div className="list-group position-absolute w-100" style={{ zIndex: 1000, maxHeight: '200px', overflowY: 'auto' }}>
|
||||
{FiltredTodosMedicos.map((medico) => (
|
||||
<button
|
||||
key={medico.idMedico}
|
||||
type="button"
|
||||
className="list-group-item list-group-item-action"
|
||||
onClick={() => {
|
||||
setSearchTermDoctor(medico.nomeMedico);
|
||||
setFiltredTodosMedicos([]);
|
||||
setMedicoFiltrado({ id: medico.idMedico });
|
||||
}}
|
||||
>
|
||||
{medico.nomeMedico}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{searchTermDoctor && FiltredTodosMedicos.length > 0 && (
|
||||
<div className='dropdown-medicos'>
|
||||
{FiltredTodosMedicos.map((medico) => (
|
||||
<div
|
||||
key={medico.idMedico}
|
||||
className='dropdown-item'
|
||||
onClick={() => {
|
||||
setSearchTermDoctor(medico.nomeMedico);
|
||||
setFiltredTodosMedicos([]);
|
||||
setMedicoFiltrado({ id: medico.idMedico });
|
||||
}}
|
||||
>
|
||||
<p>{medico.nomeMedico}</p>
|
||||
</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 className='container-btns-agenda-fila_esepera'>
|
||||
|
||||
@ -46,7 +46,7 @@ const DoctorRelatorioManager = () => {
|
||||
if (authHeader) myHeaders.append('Authorization', authHeader);
|
||||
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 userFullName = null;
|
||||
try {
|
||||
@ -60,12 +60,12 @@ const DoctorRelatorioManager = () => {
|
||||
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=*";
|
||||
let data = [];
|
||||
|
||||
if (userId) {
|
||||
// 1) tenta por doctor_id
|
||||
|
||||
try {
|
||||
const res = await fetch(`${baseUrl}&doctor_id=eq.${userId}`, requestOptions);
|
||||
data = await res.json();
|
||||
@ -74,7 +74,7 @@ const DoctorRelatorioManager = () => {
|
||||
data = [];
|
||||
}
|
||||
|
||||
// 2) fallback para created_by (se vazio)
|
||||
|
||||
if ((!Array.isArray(data) || data.length === 0) && userId) {
|
||||
try {
|
||||
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) {
|
||||
try {
|
||||
// encode para evitar problemas com espaços/caracteres especiais
|
||||
|
||||
const encodedName = encodeURIComponent(userFullName);
|
||||
const res3 = await fetch(`${baseUrl}&requested_by=eq.${encodedName}`, requestOptions);
|
||||
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)) {
|
||||
try {
|
||||
const resAll = await fetch(baseUrl, requestOptions);
|
||||
@ -110,7 +108,7 @@ const DoctorRelatorioManager = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// garante unicidade e ordenação por criação
|
||||
|
||||
const uniqueMap = new Map();
|
||||
(Array.isArray(data) ? data : []).forEach(r => {
|
||||
if (r && r.id) uniqueMap.set(r.id, r);
|
||||
@ -144,14 +142,14 @@ const DoctorRelatorioManager = () => {
|
||||
};
|
||||
}, [authHeader]);
|
||||
|
||||
// Busca dados de pacientes e médicos baseados na lista final que aparece na tela
|
||||
|
||||
useEffect(() => {
|
||||
const fetchRelData = async () => {
|
||||
const pacientes = [];
|
||||
const medicos = [];
|
||||
for (let i = 0; i < relatoriosFinais.length; i++) {
|
||||
const rel = relatoriosFinais[i];
|
||||
// paciente
|
||||
|
||||
try {
|
||||
const pacienteRes = await GetPatientByID(rel.patient_id, authHeader);
|
||||
pacientes.push(Array.isArray(pacienteRes) ? pacienteRes[0] : pacienteRes);
|
||||
@ -159,13 +157,12 @@ const DoctorRelatorioManager = () => {
|
||||
pacientes.push(null);
|
||||
}
|
||||
|
||||
// médico: prioriza campos com id (doctor_id ou created_by). Se tiver somente requested_by (nome), usa nome.
|
||||
try {
|
||||
if (rel.doctor_id) {
|
||||
const docRes = await GetDoctorByID(rel.doctor_id, authHeader);
|
||||
medicos.push(Array.isArray(docRes) ? docRes[0] : docRes);
|
||||
} else if (rel.created_by) {
|
||||
// created_by costuma ser id
|
||||
|
||||
const docRes = await GetDoctorByID(rel.created_by, authHeader);
|
||||
medicos.push(Array.isArray(docRes) ? docRes[0] : docRes);
|
||||
} else if (rel.requested_by) {
|
||||
@ -174,7 +171,6 @@ const DoctorRelatorioManager = () => {
|
||||
medicos.push({ full_name: '' });
|
||||
}
|
||||
} catch (err) {
|
||||
// fallback para requested_by se houver
|
||||
medicos.push({ full_name: rel.requested_by || '' });
|
||||
}
|
||||
}
|
||||
@ -190,7 +186,6 @@ const DoctorRelatorioManager = () => {
|
||||
}, [relatoriosFinais, authHeader]);
|
||||
|
||||
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 indexToUse = globalIndex >= 0 ? globalIndex : (indiceInicial + pageIndex);
|
||||
setRelatorioModal(relatorio);
|
||||
@ -198,7 +193,7 @@ const DoctorRelatorioManager = () => {
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
// Função para limpar filtros
|
||||
|
||||
const limparFiltros = () => {
|
||||
setTermoPesquisa('');
|
||||
setFiltroExame('');
|
||||
@ -256,12 +251,11 @@ const DoctorRelatorioManager = () => {
|
||||
return (
|
||||
<div>
|
||||
{showModal && (
|
||||
<div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowModal(false)}>
|
||||
<div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }} tabIndex="-1">
|
||||
<div className="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div className="modal-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>
|
||||
<button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowModal(false)}></button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
@ -290,11 +284,11 @@ const DoctorRelatorioManager = () => {
|
||||
</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)}>
|
||||
<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 type="button" className="btn btn-outline-secondary" onClick={() => { setShowModal(false) }}>
|
||||
<button type="button" className="btn btn-secondary" onClick={() => { setShowModal(false) }}>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -42,6 +42,16 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
});
|
||||
|
||||
|
||||
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);
|
||||
@ -202,6 +212,63 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
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',
|
||||
@ -274,10 +341,21 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
<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>
|
||||
{(DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
|
||||
DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
|
||||
{(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">
|
||||
@ -340,6 +418,56 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
<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>
|
||||
@ -350,7 +478,7 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filaEsperaData.length > 0 ? (filaEsperaData.map((item) => (
|
||||
{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>
|
||||
@ -369,6 +497,58 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
)}
|
||||
</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>
|
||||
@ -383,44 +563,55 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
)}
|
||||
|
||||
|
||||
{}
|
||||
{isCancelModalOpen && (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content" style={{ maxWidth: '400px' }}>
|
||||
<div className="modal-header" style={{ backgroundColor: '#fee2e2', borderBottom: '1px solid #fca5a5', padding: '15px', borderRadius: '8px 8px 0 0' }}>
|
||||
<h4 style={{ margin: 0, color: '#dc2626' }}>Confirmação de Cancelamento</h4>
|
||||
<button className="close-button" onClick={() => setIsCancelModalOpen(false)} style={{ background: 'none', border: 'none', fontSize: '1.5rem', cursor: 'pointer' }}>×</button>
|
||||
</div>
|
||||
<div className="modal-body" style={{ padding: '20px' }}>
|
||||
<p>Qual o motivo do cancelamento?</p>
|
||||
<textarea
|
||||
value={cancellationReason}
|
||||
onChange={(e) => setCancellationReason(e.target.value)}
|
||||
placeholder="Ex: Precisei viajar, motivo pessoal, etc."
|
||||
rows="4"
|
||||
style={{ width: '100%', padding: '10px', resize: 'none', border: '1px solid #ccc', borderRadius: '4px' }}
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="modal-footer" style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', padding: '15px', borderTop: '1px solid #eee' }}>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={() => setIsCancelModalOpen(false)}
|
||||
style={{ backgroundColor: '#6c757d', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={executeCancellation}
|
||||
style={{ backgroundColor: '#dc3545', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
|
||||
>
|
||||
<Trash2 size={16} style={{ marginRight: '5px' }} /> Excluir
|
||||
</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -461,6 +461,115 @@
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Avatar Modal */
|
||||
.avatar-modal-content {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.avatar-preview-container {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.avatar-preview-wrapper {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 0 auto 20px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-preview-placeholder {
|
||||
font-size: 4rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.avatar-error-message {
|
||||
color: #dc3545;
|
||||
margin-bottom: 10px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.avatar-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.avatar-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.avatar-upload-button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.avatar-upload-button:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
.avatar-upload-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.avatar-remove-button {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #dc3545;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #dc3545;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.avatar-remove-button:hover {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.avatar-remove-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.avatar-info-text {
|
||||
margin-top: 15px;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.avatar-actions-spacing {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.avatar-close-button {
|
||||
background: #6c757d;
|
||||
}
|
||||
|
||||
.avatar-close-button:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
/* Responsividade */
|
||||
@media (max-width: 768px) {
|
||||
.header-container {
|
||||
@ -487,4 +596,13 @@
|
||||
width: calc(100vw - 20px);
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.avatar-modal-content {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.avatar-preview-wrapper {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,9 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import './Header.css';
|
||||
import API_KEY from '../utils/apiKeys';
|
||||
|
||||
const SUPABASE_URL = 'https://yuanqfswhberkoevtmfr.supabase.co';
|
||||
|
||||
const Header = () => {
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
@ -10,16 +13,111 @@ const Header = () => {
|
||||
const [mensagens, setMensagens] = useState([]);
|
||||
const [showLogoutModal, setShowLogoutModal] = useState(false);
|
||||
const [avatarUrl, setAvatarUrl] = useState(null);
|
||||
const [showAvatarModal, setShowAvatarModal] = useState(false);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [avatarError, setAvatarError] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
const chatInputRef = useRef(null);
|
||||
const mensagensContainerRef = useRef(null);
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const loadAvatarFromSupabase = async (userId) => {
|
||||
const extensions = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
|
||||
|
||||
for (const ext of extensions) {
|
||||
try {
|
||||
const avatarUrl = `${SUPABASE_URL}/storage/v1/object/public/avatars/${userId}/avatar.${ext}`;
|
||||
|
||||
const response = await fetch(avatarUrl, {
|
||||
method: 'GET',
|
||||
mode: 'cors'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const blob = await response.blob();
|
||||
const imageUrl = URL.createObjectURL(blob);
|
||||
return imageUrl;
|
||||
}
|
||||
} catch (err) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const loadAvatar = () => {
|
||||
const loadAvatar = async () => {
|
||||
let userId = localStorage.getItem('userId') || localStorage.getItem('user_id');
|
||||
|
||||
if (!userId) {
|
||||
try {
|
||||
const userData = localStorage.getItem('user') || localStorage.getItem('userData');
|
||||
if (userData) {
|
||||
const parsed = JSON.parse(userData);
|
||||
userId = parsed.id || parsed.user_id || parsed.sub || parsed.userId;
|
||||
|
||||
if (userId) {
|
||||
localStorage.setItem('userId', userId);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Erro ao parsear dados do usuário:', e);
|
||||
}
|
||||
}
|
||||
|
||||
if (!userId) {
|
||||
try {
|
||||
const token = localStorage.getItem('token') ||
|
||||
localStorage.getItem('authToken') ||
|
||||
localStorage.getItem('access_token');
|
||||
|
||||
if (token) {
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append('apikey', API_KEY);
|
||||
myHeaders.append('Authorization', token.startsWith('Bearer') ? token : `Bearer ${token}`);
|
||||
|
||||
const response = await fetch(
|
||||
'https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/user-info',
|
||||
{ method: 'GET', headers: myHeaders }
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const userInfo = await response.json();
|
||||
userId = userInfo.id || userInfo.user_id || userInfo.sub || userInfo.user?.id;
|
||||
|
||||
if (userId) {
|
||||
localStorage.setItem('userId', userId);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Erro ao buscar userId da API:', e);
|
||||
}
|
||||
}
|
||||
|
||||
if (!userId) {
|
||||
const localAvatar = localStorage.getItem('user_avatar');
|
||||
if (localAvatar) {
|
||||
setAvatarUrl(localAvatar);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const localAvatar = localStorage.getItem('user_avatar');
|
||||
if (localAvatar) {
|
||||
setAvatarUrl(localAvatar);
|
||||
}
|
||||
|
||||
try {
|
||||
const supabaseAvatarUrl = await loadAvatarFromSupabase(userId);
|
||||
if (supabaseAvatarUrl) {
|
||||
setAvatarUrl(supabaseAvatarUrl);
|
||||
localStorage.setItem('user_avatar', supabaseAvatarUrl);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar avatar do Supabase:', error);
|
||||
}
|
||||
};
|
||||
|
||||
loadAvatar();
|
||||
@ -44,7 +142,6 @@ const Header = () => {
|
||||
}
|
||||
}, [mensagens]);
|
||||
|
||||
// --- Logout ---
|
||||
const handleLogoutClick = () => {
|
||||
setShowLogoutModal(true);
|
||||
setIsDropdownOpen(false);
|
||||
@ -100,7 +197,7 @@ const Header = () => {
|
||||
};
|
||||
|
||||
const clearAuthData = () => {
|
||||
["token", "authToken", "userToken", "access_token", "user", "auth", "userData"].forEach(key => {
|
||||
["token", "authToken", "userToken", "access_token", "user", "auth", "userData", "user_avatar"].forEach(key => {
|
||||
localStorage.removeItem(key);
|
||||
sessionStorage.removeItem(key);
|
||||
});
|
||||
@ -121,10 +218,169 @@ const Header = () => {
|
||||
};
|
||||
|
||||
const handleViewProfile = () => {
|
||||
navigate('/perfil');
|
||||
setShowAvatarModal(true);
|
||||
setIsDropdownOpen(false);
|
||||
};
|
||||
|
||||
const handleAvatarUpload = async (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
setAvatarError(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) {
|
||||
setAvatarError("Arquivo muito grande. Máximo 5MB.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!ACCEPTED_TYPES.includes(file.type)) {
|
||||
setAvatarError("Tipo de arquivo não suportado. Use JPEG, PNG, GIF ou WebP.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsUploading(true);
|
||||
|
||||
try {
|
||||
let userId = localStorage.getItem('userId') || localStorage.getItem('user_id');
|
||||
|
||||
if (!userId) {
|
||||
try {
|
||||
const userData = localStorage.getItem('user') || localStorage.getItem('userData');
|
||||
if (userData) {
|
||||
const parsed = JSON.parse(userData);
|
||||
userId = parsed.id || parsed.user_id || parsed.sub || parsed.userId;
|
||||
if (userId) {
|
||||
localStorage.setItem('userId', userId);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Erro ao buscar userId:', e);
|
||||
}
|
||||
}
|
||||
|
||||
if (userId) {
|
||||
try {
|
||||
await uploadAvatarToSupabase(file, userId);
|
||||
|
||||
const ext = file.name.split('.').pop();
|
||||
const publicAvatarUrl = `${SUPABASE_URL}/storage/v1/object/public/avatars/${userId}/avatar.${ext}`;
|
||||
|
||||
const response = await fetch(publicAvatarUrl);
|
||||
if (response.ok) {
|
||||
const blob = await response.blob();
|
||||
const imageUrl = URL.createObjectURL(blob);
|
||||
setAvatarUrl(imageUrl);
|
||||
localStorage.setItem('user_avatar', imageUrl);
|
||||
window.dispatchEvent(new Event('storage'));
|
||||
return;
|
||||
}
|
||||
} catch (apiError) {
|
||||
console.error('Erro ao enviar para Supabase:', apiError);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const imageDataUrl = e.target.result;
|
||||
localStorage.setItem('user_avatar', imageDataUrl);
|
||||
setAvatarUrl(imageDataUrl);
|
||||
window.dispatchEvent(new Event('storage'));
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erro no processamento:', error);
|
||||
setAvatarError('Erro ao processar imagem');
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const imageDataUrl = e.target.result;
|
||||
localStorage.setItem('user_avatar', imageDataUrl);
|
||||
setAvatarUrl(imageDataUrl);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
if (event.target) event.target.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const uploadAvatarToSupabase = async (file, userId) => {
|
||||
const ext = file.name.split('.').pop();
|
||||
const filePath = `${userId}/avatar.${ext}`;
|
||||
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append('apikey', API_KEY);
|
||||
myHeaders.append('Content-Type', file.type);
|
||||
|
||||
const token = localStorage.getItem('token') || localStorage.getItem('authToken');
|
||||
if (token) {
|
||||
myHeaders.append('Authorization', `Bearer ${token}`);
|
||||
}
|
||||
|
||||
const response = await fetch(`${SUPABASE_URL}/storage/v1/object/avatars/${filePath}`, {
|
||||
method: 'POST',
|
||||
headers: myHeaders,
|
||||
body: file
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
|
||||
const updateResponse = await fetch(`${SUPABASE_URL}/storage/v1/object/avatars/${filePath}`, {
|
||||
method: 'PUT',
|
||||
headers: myHeaders,
|
||||
body: file
|
||||
});
|
||||
|
||||
if (!updateResponse.ok) {
|
||||
throw new Error('Erro ao fazer upload do avatar');
|
||||
}
|
||||
return await updateResponse.json();
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
const clearAvatar = async () => {
|
||||
const userId = localStorage.getItem('userId') || localStorage.getItem('user_id');
|
||||
|
||||
if (userId) {
|
||||
try {
|
||||
const extensions = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
|
||||
|
||||
for (const ext of extensions) {
|
||||
const filePath = `${userId}/avatar.${ext}`;
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append('apikey', API_KEY);
|
||||
|
||||
const token = localStorage.getItem('token') || localStorage.getItem('authToken');
|
||||
if (token) {
|
||||
myHeaders.append('Authorization', `Bearer ${token}`);
|
||||
}
|
||||
|
||||
try {
|
||||
await fetch(`${SUPABASE_URL}/storage/v1/object/avatars/${filePath}`, {
|
||||
method: 'DELETE',
|
||||
headers: myHeaders
|
||||
});
|
||||
} catch (e) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao remover avatar da API:', error);
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.removeItem('user_avatar');
|
||||
setAvatarUrl(null);
|
||||
window.dispatchEvent(new Event('storage'));
|
||||
};
|
||||
|
||||
const handleSuporteClick = () => {
|
||||
setIsSuporteCardOpen(!isSuporteCardOpen);
|
||||
if (isDropdownOpen) setIsDropdownOpen(false);
|
||||
@ -157,7 +413,7 @@ const Header = () => {
|
||||
e.preventDefault();
|
||||
if (mensagem.trim() === '') return;
|
||||
|
||||
// Mensagem do usuário
|
||||
|
||||
const novaMensagemUsuario = {
|
||||
id: Date.now(),
|
||||
texto: mensagem,
|
||||
@ -177,7 +433,7 @@ const Header = () => {
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Resposta da IA
|
||||
|
||||
const respostaSuporte = {
|
||||
id: Date.now() + 1,
|
||||
texto: data.resposta || data.reply || "Desculpe, não consegui processar sua pergunta no momento 😅",
|
||||
@ -266,7 +522,31 @@ const Header = () => {
|
||||
|
||||
<div className="profile-section">
|
||||
<div className="profile-picture-container" onClick={handleProfileClick}>
|
||||
<div className="profile-placeholder"></div>
|
||||
{avatarUrl ? (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt="Avatar"
|
||||
className="profile-photo"
|
||||
onError={() => {
|
||||
const userId = localStorage.getItem('userId') || localStorage.getItem('user_id');
|
||||
if (userId) {
|
||||
loadAvatarFromSupabase(userId).then(newUrl => {
|
||||
if (newUrl) {
|
||||
setAvatarUrl(newUrl);
|
||||
localStorage.setItem('user_avatar', newUrl);
|
||||
} else {
|
||||
setAvatarUrl(null);
|
||||
localStorage.removeItem('user_avatar');
|
||||
}
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="profile-placeholder">
|
||||
<span className="placeholder-icon"></span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isDropdownOpen && (
|
||||
@ -282,7 +562,6 @@ const Header = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal de Logout */}
|
||||
{showLogoutModal && (
|
||||
<div className="logout-modal-overlay">
|
||||
<div className="logout-modal-content">
|
||||
@ -315,6 +594,79 @@ const Header = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{showAvatarModal && (
|
||||
<div className="logout-modal-overlay" onClick={() => setShowAvatarModal(false)}>
|
||||
<div className="logout-modal-content avatar-modal-content" onClick={(e) => e.stopPropagation()}>
|
||||
<h3>Gerenciar Avatar</h3>
|
||||
|
||||
<div className="avatar-preview-container">
|
||||
<div className="avatar-preview-wrapper">
|
||||
{avatarUrl ? (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt="Avatar"
|
||||
className="avatar-preview-image"
|
||||
onError={() => {
|
||||
setAvatarUrl(null);
|
||||
localStorage.removeItem('user_avatar');
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span className="avatar-preview-placeholder">👤</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{avatarError && (
|
||||
<div className="avatar-error-message">
|
||||
{avatarError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleAvatarUpload}
|
||||
disabled={isUploading}
|
||||
className="avatar-file-input"
|
||||
/>
|
||||
|
||||
<div className="avatar-actions">
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={isUploading}
|
||||
className="avatar-upload-button"
|
||||
>
|
||||
{isUploading ? 'Enviando...' : ' Alterar Foto'}
|
||||
</button>
|
||||
|
||||
{avatarUrl && (
|
||||
<button
|
||||
onClick={clearAvatar}
|
||||
disabled={isUploading}
|
||||
className="avatar-remove-button"
|
||||
>
|
||||
Remover
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="avatar-info-text">
|
||||
Formatos aceitos: JPEG, PNG, GIF, WebP (máx. 5MB)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="logout-modal-buttons avatar-actions-spacing">
|
||||
<button
|
||||
onClick={() => setShowAvatarModal(false)}
|
||||
className="logout-confirm-button avatar-close-button"
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -184,7 +184,18 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
}, [authHeader]);
|
||||
|
||||
|
||||
const handleSearchMedicos = (term) => { };
|
||||
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(() => {
|
||||
@ -233,9 +244,8 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
<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: '#f8d7da', color: '#721c24' }}>
|
||||
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
||||
<h5 className="modal-title">Confirmação de Cancelamento</h5>
|
||||
<button type="button" className="btn-close" onClick={() => setShowDeleteModal(false)}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p>Qual o motivo do cancelamento?</p>
|
||||
@ -243,7 +253,7 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</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)}><Trash2 size={16} className="me-1" /> Excluir</button>
|
||||
<button type="button" className="btn btn-danger" onClick={() => deleteConsulta(selectedID)}>Excluir</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -278,33 +288,79 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
<div>
|
||||
<h1>Agendar nova consulta</h1>
|
||||
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
||||
{/* LIMPA O OBJETO DE EDIÇÃO AO CLICAR EM "ADICIONAR" */}
|
||||
|
||||
<button className="btn btn-primary" onClick={() => {
|
||||
setPageConsulta(true);
|
||||
setEditingAppointmentId(null);
|
||||
setAppointmentToEdit(null); // <-- LIMPA O OBJETO AQUI PARA GARANTIR MODO CADASTRO
|
||||
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='unidade-selecionarprofissional'>
|
||||
<div className='busca-atendimento-container'>
|
||||
<div className='input-e-dropdown-wrapper'>
|
||||
<div className='busca-atendimento'>
|
||||
<div className='mb-5'>
|
||||
<input type="text" placeholder="Filtrar atendimento do medico..." value={searchTermDoctor} onChange={(e) => handleSearchMedicos(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
{searchTermDoctor && FiltredTodosMedicos.length > 0 && (<div className='dropdown-medicos'>{FiltredTodosMedicos.map((medico) => (<div key={medico.idMedico} className='dropdown-item' onClick={() => { setSearchTermDoctor(medico.nomeMedico); setFiltredTodosMedicos([]); setMedicoFiltrado(medico); }}><p>{medico.nomeMedico}</p></div>))}</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
@ -313,18 +369,24 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
<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')].map(app => (
|
||||
{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} /> {/* Botão de Reverter Cancelamento */}
|
||||
<Edit size={16} />
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
{/* MUDANÇA: PASSA O OBJETO COMPLETO 'app' PARA O ESTADO DE EDIÇÃO */}
|
||||
|
||||
<button
|
||||
className="btn-action btn-edit"
|
||||
onClick={() => {
|
||||
@ -335,7 +397,7 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
>
|
||||
<Edit size={16} />
|
||||
</button>
|
||||
{/* Botão de Cancelar */}
|
||||
|
||||
<button className="btn-action btn-delete" onClick={() => { setSelectedId(app.id); setShowDeleteModal(true); }}>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
|
||||
@ -18,6 +18,8 @@ const DisponibilidadesDoctorPage = () => {
|
||||
const [selectedDoctor, setSelectedDoctor] = useState(null);
|
||||
const [editando, setEditando] = useState(null);
|
||||
const [doctorsLoading, setDoctorsLoading] = useState(true);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [selectedDisponibilidadeId, setSelectedDisponibilidadeId] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchDoctors = async () => {
|
||||
@ -108,8 +110,6 @@ const DisponibilidadesDoctorPage = () => {
|
||||
};
|
||||
|
||||
const deletarDisponibilidade = async (id) => {
|
||||
if (!window.confirm("Deseja realmente excluir esta disponibilidade?"))
|
||||
return;
|
||||
try {
|
||||
const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
|
||||
method: "DELETE",
|
||||
@ -118,6 +118,8 @@ const DisponibilidadesDoctorPage = () => {
|
||||
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);
|
||||
@ -181,62 +183,68 @@ const DisponibilidadesDoctorPage = () => {
|
||||
Disponibilidades dos Médicos
|
||||
</h1>
|
||||
|
||||
<div style={{ marginTop: "10px", marginBottom: "10px" }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar médico por nome..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => {
|
||||
setSearchTerm(e.target.value);
|
||||
setSelectedDoctor(null);
|
||||
}}
|
||||
style={{
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: "4px",
|
||||
padding: "6px",
|
||||
width: "300px",
|
||||
}}
|
||||
/>
|
||||
{searchTerm && (
|
||||
<ul
|
||||
style={{
|
||||
border: "1px solid #ddd",
|
||||
borderRadius: "4px",
|
||||
backgroundColor: "white",
|
||||
position: "absolute",
|
||||
zIndex: 10,
|
||||
width: "300px",
|
||||
maxHeight: "150px",
|
||||
overflowY: "auto",
|
||||
marginTop: "4px",
|
||||
listStyle: "none",
|
||||
padding: 0,
|
||||
<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);
|
||||
}}
|
||||
>
|
||||
{filteredDoctors.length > 0 ? (
|
||||
filteredDoctors.map((doc) => (
|
||||
<li
|
||||
/>
|
||||
<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);
|
||||
}}
|
||||
style={{
|
||||
padding: "6px 8px",
|
||||
cursor: "pointer",
|
||||
borderBottom: "1px solid #eee",
|
||||
}}
|
||||
>
|
||||
{doc.name}
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li style={{ padding: "6px 8px", color: "#888" }}>
|
||||
Nenhum médico encontrado
|
||||
</li>
|
||||
</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>
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<section className="calendario-ou-filaespera">
|
||||
@ -312,39 +320,24 @@ const DisponibilidadesDoctorPage = () => {
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: "flex", gap: "8px" }}>
|
||||
<button
|
||||
className="btn btn-sm btn-edit"
|
||||
style={{
|
||||
backgroundColor: "#3b82f6",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "6px",
|
||||
padding: "6px 10px",
|
||||
cursor: "pointer",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
onClick={() => console.log("Editar clicado")}
|
||||
>
|
||||
Editar
|
||||
</button>
|
||||
<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"
|
||||
style={{
|
||||
backgroundColor: "#ef4444",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "6px",
|
||||
padding: "6px 10px",
|
||||
cursor: "pointer",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
onClick={() => console.log("Excluir clicado")}
|
||||
>
|
||||
Excluir
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
@ -354,6 +347,54 @@ const DisponibilidadesDoctorPage = () => {
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useState, useCallback } from "react";
|
||||
import { useParams, useSearchParams } from "react-router-dom";
|
||||
import { useParams, useSearchParams, useNavigate } from "react-router-dom";
|
||||
import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
|
||||
import DoctorForm from "../components/doctors/DoctorForm";
|
||||
import { useAuth } from "../components/utils/AuthProvider";
|
||||
@ -10,7 +10,9 @@ const ENDPOINT_AVAILABILITY =
|
||||
|
||||
const DoctorEditPage = ({DictInfo}) => {
|
||||
const { getAuthorizationHeader } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [DoctorToPUT, setDoctorPUT] = useState({});
|
||||
const [showSuccessModal, setShowSuccessModal] = useState(false);
|
||||
|
||||
const Parametros = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
@ -46,10 +48,17 @@ const DoctorEditPage = ({DictInfo}) => {
|
||||
};
|
||||
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DictInfo.id}`,requestOptions)
|
||||
.then(response => console.log(response))
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
if (response.ok) {
|
||||
setShowSuccessModal(true)
|
||||
}
|
||||
return response
|
||||
})
|
||||
.catch(error => console.log("erro", error))
|
||||
};
|
||||
|
||||
// 2. Função para Atualizar DISPONIBILIDADE (PATCH)
|
||||
|
||||
const HandlePatchAvailability = async (data) => {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
@ -76,8 +85,6 @@ const DoctorEditPage = ({DictInfo}) => {
|
||||
);
|
||||
console.log("Resposta PATCH Disponibilidade:", response);
|
||||
alert("Disponibilidade atualizada com sucesso!");
|
||||
// Opcional: Redirecionar de volta para a lista de disponibilidades
|
||||
// navigate('/disponibilidades');
|
||||
} catch (error) {
|
||||
console.error("Erro ao atualizar disponibilidade:", error);
|
||||
alert("Erro ao atualizar disponibilidade.");
|
||||
@ -97,6 +104,46 @@ const DoctorEditPage = ({DictInfo}) => {
|
||||
}
|
||||
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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -27,9 +27,8 @@ function TableDoctor({setDictInfo}) {
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [selectedDoctorId, setSelectedDoctorId] = useState(null);
|
||||
|
||||
// Ordenação rápida
|
||||
const [sortKey, setSortKey] = useState(null); // 'nome' | 'idade' | null
|
||||
const [sortDir, setSortDir] = useState('asc'); // 'asc' | 'desc'
|
||||
const [sortKey, setSortKey] = useState(null);
|
||||
const [sortDir, setSortDir] = useState('asc');
|
||||
|
||||
const limparFiltros = () => {
|
||||
setSearch("");
|
||||
@ -147,7 +146,6 @@ function TableDoctor({setDictInfo}) {
|
||||
return resultado;
|
||||
}) : [];
|
||||
|
||||
// Aplica ordenação rápida
|
||||
const applySorting = (arr) => {
|
||||
if (!Array.isArray(arr) || !sortKey) return arr;
|
||||
const copy = [...arr];
|
||||
@ -277,7 +275,7 @@ function TableDoctor({setDictInfo}) {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Ordenação rápida */}
|
||||
|
||||
<div className="vr mx-2 d-none d-md-block" />
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<span className="text-muted small">Ordenar por:</span>
|
||||
@ -481,7 +479,6 @@ function TableDoctor({setDictInfo}) {
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* Paginação */}
|
||||
{medicosFiltrados.length > 0 && (
|
||||
<div className="d-flex justify-content-between align-items-center mt-3">
|
||||
<div className="d-flex align-items-center">
|
||||
@ -554,15 +551,10 @@ function TableDoctor({setDictInfo}) {
|
||||
>
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
||||
<h5 className="modal-title">
|
||||
Confirmação de Exclusão
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
|
||||
@ -9,6 +9,7 @@ import { useAuth } from '../components/utils/AuthProvider'
|
||||
const EditPage = ({DictInfo}) => {
|
||||
const navigate = useNavigate()
|
||||
const [PatientToPUT, setPatientPUT] = useState({})
|
||||
const [showSuccessModal, setShowSuccessModal] = useState(false)
|
||||
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
|
||||
@ -37,9 +38,15 @@ const HandlePutPatient = async () => {
|
||||
};
|
||||
|
||||
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))
|
||||
.catch(console.log("erro"))
|
||||
.catch(error => console.log("erro", error))
|
||||
|
||||
};
|
||||
|
||||
@ -52,6 +59,46 @@ const HandlePutPatient = async () => {
|
||||
formData={PatientToPUT}
|
||||
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>
|
||||
)
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/pt-br';
|
||||
import weekday from 'dayjs/plugin/weekday';
|
||||
@ -23,12 +24,10 @@ const getDateRange = (date, view) => {
|
||||
toDate = startDayjs.format('YYYY-MM-DD');
|
||||
titleRange = startDayjs.format('DD/MM/YYYY');
|
||||
} 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');
|
||||
if (weekStart.day() !== 1) { // Se não for segunda-feira (1), ajusta
|
||||
weekStart = startDayjs.weekday(1); // Vai para a segunda-feira desta semana
|
||||
if (weekStart.day() !== 1) {
|
||||
weekStart = startDayjs.weekday(1);
|
||||
}
|
||||
|
||||
const weekEnd = weekStart.add(6, 'day');
|
||||
@ -52,12 +51,21 @@ const getDateRange = (date, view) => {
|
||||
const ExcecoesDisponibilidade = () => {
|
||||
|
||||
const { getAuthorizationHeader } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [pageNovaExcecao, setPageNovaExcecao] = useState(false);
|
||||
const [excecoes, setExcecoes] = useState([]);
|
||||
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 [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');
|
||||
|
||||
@ -123,8 +131,51 @@ const ExcecoesDisponibilidade = () => {
|
||||
fetchExcecoes(fromDate, toDate, filtroMedicoId);
|
||||
}, [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) => {
|
||||
if (!window.confirm("Confirma exclusão desta exceção?")) return;
|
||||
const myHeaders = new Headers();
|
||||
const authHeader = resolveAuthHeader();
|
||||
if (authHeader) myHeaders.append("Authorization", authHeader);
|
||||
@ -139,6 +190,9 @@ const ExcecoesDisponibilidade = () => {
|
||||
});
|
||||
if (res.ok) {
|
||||
setExcecoes(prev => prev.filter(x => x.id !== id));
|
||||
setShowDeleteModal(false);
|
||||
setSuccessMessage('Exceção excluída com sucesso!');
|
||||
setShowSuccessModal(true);
|
||||
} else {
|
||||
const text = await res.text();
|
||||
console.error('Erro ao deletar exceção', res.status, text);
|
||||
@ -163,7 +217,7 @@ const ExcecoesDisponibilidade = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Título e Botão de Criação */}
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
|
||||
<h1>Gerenciar Exceções de Disponibilidade</h1>
|
||||
<button
|
||||
@ -175,30 +229,80 @@ const ExcecoesDisponibilidade = () => {
|
||||
</button>
|
||||
</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='busca-atendimento'>
|
||||
<div>
|
||||
<i className="fa-solid fa-user-doctor"></i>
|
||||
<div className="row g-3 mb-3">
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Buscar Médico</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filtrar por ID do Médico..."
|
||||
value={filtroMedicoId}
|
||||
onChange={(e) => setFiltroMedicoId(e.target.value)}
|
||||
className="form-control"
|
||||
placeholder="Digite o nome do médico..."
|
||||
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>
|
||||
<input
|
||||
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Data de Referência</label>
|
||||
<input
|
||||
type="date"
|
||||
className="form-control"
|
||||
value={filtroData}
|
||||
onChange={(e) => setFiltroData(e.target.value)}
|
||||
/>
|
||||
<small className="text-muted">Selecione a data base para visualização</small>
|
||||
</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'>
|
||||
<button
|
||||
className={`btn-agenda ${visualizacao === "diario" ? "opc-agenda-ativo" : ""}`}
|
||||
@ -220,7 +324,7 @@ const ExcecoesDisponibilidade = () => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabela de Exceções (Título usa o titleRange calculado) */}
|
||||
|
||||
<section className='calendario-ou-filaespera'>
|
||||
<div className="fila-container">
|
||||
<h2 className="fila-titulo">Exceções em {titleRange} ({excecoes.length})</h2>
|
||||
@ -264,7 +368,10 @@ const ExcecoesDisponibilidade = () => {
|
||||
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
@ -278,6 +385,89 @@ const ExcecoesDisponibilidade = () => {
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -32,7 +32,6 @@ const LaudoManager = () => {
|
||||
const [paginaAtual, setPaginaAtual] = useState(1);
|
||||
const [itensPorPagina, setItensPorPagina] = useState(10);
|
||||
|
||||
// agora guardamos a mensagem (null = sem aviso)
|
||||
const [noPermissionText, setNoPermissionText] = useState(null);
|
||||
|
||||
const isSecretary = true;
|
||||
@ -162,11 +161,11 @@ const LaudoManager = () => {
|
||||
|
||||
const handleLiberarLaudo = async (relatorio) => {
|
||||
if (isSecretary) {
|
||||
// MUDANÇA: mostrar "Ainda não implementado"
|
||||
|
||||
setNoPermissionText('Ainda não implementado');
|
||||
return;
|
||||
}
|
||||
// para médicos: implementação real já estava antes (mantive o bloco, caso queira)
|
||||
|
||||
try {
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append('apikey', API_KEY);
|
||||
@ -187,7 +186,6 @@ const LaudoManager = () => {
|
||||
throw new Error('Erro ao liberar laudo: ' + res.status + ' ' + txt);
|
||||
}
|
||||
|
||||
// refetch simples
|
||||
const refreshed = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*", {
|
||||
method: 'GET',
|
||||
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
|
||||
</button>
|
||||
|
||||
{/* Removido o botão "Imprimir" daqui (agora no Ver Detalhes) */}
|
||||
|
||||
|
||||
<button className="btn btn-sm btn-protocolo" onClick={() => handleOpenProtocol(relatorio, index)}>
|
||||
<i className="bi bi-send me-1"></i> Protocolo
|
||||
@ -405,14 +403,13 @@ const LaudoManager = () => {
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Modal principal (detalhes) */}
|
||||
|
||||
{showModal && relatorioModal && (
|
||||
<div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowModal(false)}>
|
||||
<div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.5)" }} tabIndex="-1">
|
||||
<div className="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div className="modal-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>
|
||||
<button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowModal(false)}></button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
@ -441,11 +438,11 @@ const LaudoManager = () => {
|
||||
</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)}>
|
||||
<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 type="button" className="btn btn-outline-secondary" onClick={() => { setShowModal(false) }}>
|
||||
<button type="button" className="btn btn-secondary" onClick={() => { setShowModal(false) }}>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
@ -454,14 +451,13 @@ const LaudoManager = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal Protocolo */}
|
||||
|
||||
{showProtocolModal && protocolForIndex && (
|
||||
<div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowProtocolModal(false)}>
|
||||
<div className="modal-dialog modal-dialog-tabela-relatorio" role="document" onClick={(e) => e.stopPropagation()}>
|
||||
<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 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>
|
||||
<button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowProtocolModal(false)}></button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
@ -474,14 +470,14 @@ const LaudoManager = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer custom-modal-footer">
|
||||
<div className="modal-footer">
|
||||
<button className="btn btn-primary" onClick={() => {
|
||||
const idx = protocolForIndex.index ?? 0;
|
||||
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 type="button" className="btn btn-outline-secondary" onClick={() => setShowProtocolModal(false)}>
|
||||
<button type="button" className="btn btn-secondary" onClick={() => setShowProtocolModal(false)}>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
@ -490,17 +486,18 @@ const LaudoManager = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Variável de aviso: mostra texto personalizado */}
|
||||
{noPermissionText && (
|
||||
<div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setNoPermissionText(null)}>
|
||||
<div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
|
||||
<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 style={{ padding: 18 }}>
|
||||
<h5 style={{ marginBottom: 8 }}>{noPermissionText}</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 className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
|
||||
<h5 className="modal-title">Aviso</h5>
|
||||
</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>
|
||||
|
||||
@ -2,14 +2,6 @@ import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
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 = {
|
||||
ADMIN: "Administrador",
|
||||
SECRETARY: "Secretária",
|
||||
@ -36,7 +28,6 @@ const ProfilePage = () => {
|
||||
const [userEmail, setUserEmail] = useState("admin@squad23.com");
|
||||
const [avatarUrl, setAvatarUrl] = useState(null);
|
||||
const [isEditingName, setIsEditingName] = useState(false);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
|
||||
@ -52,14 +43,21 @@ const ProfilePage = () => {
|
||||
|
||||
useEffect(() => {
|
||||
const loadProfileData = () => {
|
||||
|
||||
const localAvatar = getLocalAvatar();
|
||||
const localAvatar = localStorage.getItem('user_avatar');
|
||||
if (localAvatar) {
|
||||
setAvatarUrl(localAvatar);
|
||||
}
|
||||
};
|
||||
|
||||
loadProfileData();
|
||||
|
||||
|
||||
const handleStorageChange = () => {
|
||||
loadProfileData();
|
||||
};
|
||||
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
return () => window.removeEventListener('storage', handleStorageChange);
|
||||
}, []);
|
||||
|
||||
const handleNameSave = () => {
|
||||
@ -83,104 +81,6 @@ const ProfilePage = () => {
|
||||
|
||||
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 (
|
||||
<div className="profile-overlay" role="dialog" aria-modal="true">
|
||||
<div className="profile-modal">
|
||||
@ -203,7 +103,7 @@ const ProfilePage = () => {
|
||||
className="avatar-img"
|
||||
onError={() => {
|
||||
setAvatarUrl(null);
|
||||
clearLocalAvatar();
|
||||
localStorage.removeItem('user_avatar');
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
@ -212,26 +112,15 @@ const ProfilePage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<label
|
||||
className={`avatar-edit-btn ${isUploading ? 'uploading' : ''}`}
|
||||
title="Alterar foto de perfil"
|
||||
>
|
||||
{isUploading ? 'Enviando...' : 'Alterar Foto'}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleAvatarUpload}
|
||||
disabled={isUploading}
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{isUploading && (
|
||||
<p className="upload-status">
|
||||
Processando imagem...
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p style={{
|
||||
textAlign: 'center',
|
||||
marginTop: '10px',
|
||||
fontSize: '0.85rem',
|
||||
color: '#666'
|
||||
}}>
|
||||
Gerencie seu avatar no menu do perfil acima
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -287,11 +176,6 @@ const ProfilePage = () => {
|
||||
</div>
|
||||
|
||||
<div className="profile-actions">
|
||||
{avatarUrl && (
|
||||
<button onClick={clearAvatar} className="btn btn-clear">
|
||||
Remover Avatar
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-close"
|
||||
onClick={handleClose}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 { useAuth } from "../components/utils/AuthProvider";
|
||||
import "./style/TablePaciente.css";
|
||||
@ -9,6 +9,7 @@ import manager from "../components/utils/fetchErros/ManagerFunction";
|
||||
function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
||||
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [pacientes, setPacientes] = useState([]);
|
||||
const [search, setSearch] = useState("");
|
||||
@ -23,9 +24,9 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
||||
const [dataInicial, setDataInicial] = useState("");
|
||||
const [dataFinal, setDataFinal] = useState("");
|
||||
|
||||
// Ordenação rápida
|
||||
const [sortKey, setSortKey] = useState(null); // 'nome' | 'idade' | null
|
||||
const [sortDir, setSortDir] = useState('asc'); // 'asc' | 'desc'
|
||||
|
||||
const [sortKey, setSortKey] = useState(null);
|
||||
const [sortDir, setSortDir] = useState('asc');
|
||||
|
||||
|
||||
const [paginaAtual, setPaginaAtual] = useState(1);
|
||||
@ -250,7 +251,7 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
||||
return resultado;
|
||||
}) : [];
|
||||
|
||||
// Aplica ordenação rápida
|
||||
|
||||
const applySorting = (arr) => {
|
||||
if (!Array.isArray(arr) || !sortKey) return arr;
|
||||
const copy = [...arr];
|
||||
@ -377,7 +378,6 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
||||
<i className="bi bi-calendar me-1"></i> Aniversariantes
|
||||
</button>
|
||||
|
||||
{/* Ordenação rápida (estilo compacto por select) */}
|
||||
<div className="vr mx-2 d-none d-md-block" />
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<span className="text-muted small">Ordenar por:</span>
|
||||
@ -550,11 +550,15 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<Link to={"edit"}>
|
||||
<button className="btn btn-sm btn-edit" onClick={() => setDictInfo(paciente)}>
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
className="btn btn-sm btn-edit"
|
||||
onClick={() => {
|
||||
setDictInfo(paciente);
|
||||
navigate('edit');
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn btn-sm btn-delete"
|
||||
@ -588,7 +592,7 @@ function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* Paginação */}
|
||||
|
||||
{pacientesFiltrados.length > 0 && (
|
||||
<div className="d-flex justify-content-between align-items-center mt-3">
|
||||
<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-content">
|
||||
<div className="modal-header">
|
||||
<div className="modal-header" style={{ backgroundColor: '#dc3545', color: 'white' }}>
|
||||
<h5 className="modal-title">
|
||||
Confirmação de Exclusão
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user