forked from RiseUP/riseup-squad23
Adicionado-novas-tabelas
This commit is contained in:
parent
d8e63f8abe
commit
e007c167e7
@ -23,7 +23,7 @@ import { Search } from 'lucide-react';
|
||||
|
||||
|
||||
|
||||
const Agendamento = ({setDictInfo}) => {
|
||||
const Agendamento = ({ setDictInfo }) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [listaTodosAgendamentos, setListaTodosAgendamentos] = useState([])
|
||||
@ -35,8 +35,8 @@ const Agendamento = ({setDictInfo}) => {
|
||||
const [PageNovaConsulta, setPageConsulta] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [agendamentos, setAgendamentos] = useState()
|
||||
const {getAuthorizationHeader} = useAuth()
|
||||
const [DictAgendamentosOrganizados, setAgendamentosOrganizados ] = useState({})
|
||||
const { getAuthorizationHeader } = useAuth()
|
||||
const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState({})
|
||||
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
const [AgendamentoFiltrado, setAgendamentoFiltrado] = useState()
|
||||
@ -45,90 +45,94 @@ const Agendamento = ({setDictInfo}) => {
|
||||
const [FiltredTodosMedicos, setFiltredTodosMedicos] = useState([])
|
||||
const [searchTermDoctor, setSearchTermDoctor] = useState('');
|
||||
|
||||
const [MedicoFiltrado, setMedicoFiltrado] = useState({id:"vazio"})
|
||||
const [MedicoFiltrado, setMedicoFiltrado] = useState({ id: "vazio" })
|
||||
|
||||
|
||||
const [cacheAgendamentos, setCacheAgendamentos] = useState([])
|
||||
const [cacheAgendamentos, setCacheAgendamentos] = useState([])
|
||||
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false)
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false)
|
||||
|
||||
const [motivoCancelamento, setMotivoCancelamento] = useState("")
|
||||
const [motivoCancelamento, setMotivoCancelamento] = useState("")
|
||||
|
||||
const [corModal, setCorModal] = useState("")
|
||||
|
||||
const [listaConsultasID, setListaConsultaID] = useState([])
|
||||
const [coresConsultas,setCoresConsultas] = useState([])
|
||||
const [corModal, setCorModal] = useState("")
|
||||
|
||||
const [listaConsultasID, setListaConsultaID] = useState([])
|
||||
const [coresConsultas, setCoresConsultas] = useState([])
|
||||
|
||||
// Estados para a tabela da fila de espera
|
||||
const [searchTermFila, setSearchTermFila] = useState('');
|
||||
const [filtroMedicoFila, setFiltroMedicoFila] = useState('Todos');
|
||||
const [paginaAtualFila, setPaginaAtualFila] = useState(1);
|
||||
const [itensPorPaginaFila, setItensPorPaginaFila] = useState(10);
|
||||
|
||||
let authHeader = getAuthorizationHeader()
|
||||
|
||||
const cacheMedicos = {};
|
||||
const cachePacientes = {};
|
||||
const cacheMedicos = {};
|
||||
const cachePacientes = {};
|
||||
|
||||
|
||||
|
||||
useMemo(() => {
|
||||
if (!listaTodosAgendamentos.length) return { agendamentosOrganizados: {}, filaEsperaData: [] };
|
||||
console.log("recarregando")
|
||||
const DictAgendamentosOrganizados = {};
|
||||
const ListaFilaDeEspera = [];
|
||||
useMemo(() => {
|
||||
if (!listaTodosAgendamentos.length) return { agendamentosOrganizados: {}, filaEsperaData: [] };
|
||||
console.log("recarregando")
|
||||
const DictAgendamentosOrganizados = {};
|
||||
const ListaFilaDeEspera = [];
|
||||
|
||||
const fetchDados = async () => {
|
||||
for (const agendamento of listaTodosAgendamentos) {
|
||||
if (agendamento.status === "requested") {
|
||||
// Cache de médico e paciente
|
||||
if (!cacheMedicos[agendamento.doctor_id]) {
|
||||
cacheMedicos[agendamento.doctor_id] = await GetDoctorByID(agendamento.doctor_id, authHeader);
|
||||
}
|
||||
if (!cachePacientes[agendamento.patient_id]) {
|
||||
cachePacientes[agendamento.patient_id] = await GetPatientByID(agendamento.patient_id, authHeader);
|
||||
}
|
||||
const fetchDados = async () => {
|
||||
for (const agendamento of listaTodosAgendamentos) {
|
||||
if (agendamento.status === "requested") {
|
||||
// Cache de médico e paciente
|
||||
if (!cacheMedicos[agendamento.doctor_id]) {
|
||||
cacheMedicos[agendamento.doctor_id] = await GetDoctorByID(agendamento.doctor_id, authHeader);
|
||||
}
|
||||
if (!cachePacientes[agendamento.patient_id]) {
|
||||
cachePacientes[agendamento.patient_id] = await GetPatientByID(agendamento.patient_id, authHeader);
|
||||
}
|
||||
|
||||
const medico = cacheMedicos[agendamento.doctor_id];
|
||||
const paciente = cachePacientes[agendamento.patient_id];
|
||||
const medico = cacheMedicos[agendamento.doctor_id];
|
||||
const paciente = cachePacientes[agendamento.patient_id];
|
||||
|
||||
ListaFilaDeEspera.push({
|
||||
agendamento,
|
||||
Infos: {
|
||||
nome_medico: medico[0]?.full_name,
|
||||
doctor_id: medico[0]?.id,
|
||||
patient_id: paciente[0]?.id,
|
||||
paciente_nome: paciente[0]?.full_name,
|
||||
paciente_cpf: paciente[0]?.cpf,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const DiaAgendamento = agendamento.scheduled_at.split("T")[0];
|
||||
|
||||
if (DiaAgendamento in DictAgendamentosOrganizados) {
|
||||
DictAgendamentosOrganizados[DiaAgendamento].push(agendamento);
|
||||
ListaFilaDeEspera.push({
|
||||
agendamento,
|
||||
Infos: {
|
||||
nome_medico: medico[0]?.full_name,
|
||||
doctor_id: medico[0]?.id,
|
||||
patient_id: paciente[0]?.id,
|
||||
paciente_nome: paciente[0]?.full_name,
|
||||
paciente_cpf: paciente[0]?.cpf,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
DictAgendamentosOrganizados[DiaAgendamento] = [agendamento];
|
||||
const DiaAgendamento = agendamento.scheduled_at.split("T")[0];
|
||||
|
||||
if (DiaAgendamento in DictAgendamentosOrganizados) {
|
||||
DictAgendamentosOrganizados[DiaAgendamento].push(agendamento);
|
||||
} else {
|
||||
DictAgendamentosOrganizados[DiaAgendamento] = [agendamento];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ordenar por data
|
||||
for (const DiaAgendamento in DictAgendamentosOrganizados) {
|
||||
DictAgendamentosOrganizados[DiaAgendamento].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
|
||||
}
|
||||
// Ordenar por data
|
||||
for (const DiaAgendamento in DictAgendamentosOrganizados) {
|
||||
DictAgendamentosOrganizados[DiaAgendamento].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
|
||||
}
|
||||
|
||||
const chavesOrdenadas = Object.keys(DictAgendamentosOrganizados).sort();
|
||||
const chavesOrdenadas = Object.keys(DictAgendamentosOrganizados).sort();
|
||||
|
||||
const DictAgendamentosFinal = {};
|
||||
for (const data of chavesOrdenadas) {
|
||||
DictAgendamentosFinal[data] = DictAgendamentosOrganizados[data];
|
||||
}
|
||||
const DictAgendamentosFinal = {};
|
||||
for (const data of chavesOrdenadas) {
|
||||
DictAgendamentosFinal[data] = DictAgendamentosOrganizados[data];
|
||||
}
|
||||
|
||||
setAgendamentosOrganizados(DictAgendamentosFinal);
|
||||
setFilaEsperaData(ListaFilaDeEspera);
|
||||
};
|
||||
setAgendamentosOrganizados(DictAgendamentosFinal);
|
||||
setFilaEsperaData(ListaFilaDeEspera);
|
||||
};
|
||||
|
||||
fetchDados();
|
||||
fetchDados();
|
||||
|
||||
return { agendamentosOrganizados: DictAgendamentosOrganizados, filaEsperaData: ListaFilaDeEspera };
|
||||
}, [listaTodosAgendamentos]); // 👉 só recalcula quando a lista muda
|
||||
return { agendamentosOrganizados: DictAgendamentosOrganizados, filaEsperaData: ListaFilaDeEspera };
|
||||
}, [listaTodosAgendamentos]); // 👉 só recalcula quando a lista muda
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
@ -144,15 +148,16 @@ console.log("recarregando")
|
||||
|
||||
fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select&doctor_id&patient_id&status&scheduled_at&order&limit&offset", requestOptions)
|
||||
.then(response => response.json())
|
||||
.then(result => {setListaTodosAgendamentos(result);console.log(result)})
|
||||
.then(result => { setListaTodosAgendamentos(result); console.log(result) })
|
||||
.catch(error => console.log('error', error));
|
||||
|
||||
const PegarTodosOsMedicos = async () => {
|
||||
let lista = []
|
||||
const TodosOsMedicos = await GetAllDoctors(authHeader)
|
||||
|
||||
for(let d = 0; TodosOsMedicos.length > d; d++){
|
||||
lista.push({nomeMedico: TodosOsMedicos[d].full_name, idMedico: TodosOsMedicos[d].id })}
|
||||
for (let d = 0; TodosOsMedicos.length > d; d++) {
|
||||
lista.push({ nomeMedico: TodosOsMedicos[d].full_name, idMedico: TodosOsMedicos[d].id })
|
||||
}
|
||||
setListaDeMedicos(lista)
|
||||
}
|
||||
PegarTodosOsMedicos()
|
||||
@ -160,55 +165,57 @@ console.log("recarregando")
|
||||
}, [])
|
||||
|
||||
|
||||
const deleteConsulta = (selectedPatientId) => {
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
myHeaders.append('apikey', API_KEY)
|
||||
myHeaders.append("authorization", authHeader)
|
||||
const deleteConsulta = (selectedPatientId) => {
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
myHeaders.append('apikey', API_KEY)
|
||||
myHeaders.append("authorization", authHeader)
|
||||
|
||||
|
||||
var raw = JSON.stringify({ "status":"cancelled",
|
||||
"cancellation_reason": motivoCancelamento
|
||||
});
|
||||
var raw = JSON.stringify({
|
||||
"status": "cancelled",
|
||||
"cancellation_reason": motivoCancelamento
|
||||
});
|
||||
|
||||
|
||||
var requestOptions = {
|
||||
method: 'PATCH',
|
||||
headers: myHeaders,
|
||||
body: raw,
|
||||
redirect: 'follow'
|
||||
};
|
||||
var requestOptions = {
|
||||
method: 'PATCH',
|
||||
headers: myHeaders,
|
||||
body: raw,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
|
||||
.then(response => {if(response.status !== 200)(console.log(response))})
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.log('error', error));
|
||||
}
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
|
||||
.then(response => { if (response.status !== 200) (console.log(response)) })
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.log('error', error));
|
||||
}
|
||||
|
||||
const confirmConsulta = (selectedPatientId) => {
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
myHeaders.append('apikey', API_KEY)
|
||||
myHeaders.append("authorization", authHeader)
|
||||
const confirmConsulta = (selectedPatientId) => {
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
myHeaders.append('apikey', API_KEY)
|
||||
myHeaders.append("authorization", authHeader)
|
||||
|
||||
|
||||
var raw = JSON.stringify({ "status":"confirmed"
|
||||
});
|
||||
var raw = JSON.stringify({
|
||||
"status": "confirmed"
|
||||
});
|
||||
|
||||
|
||||
var requestOptions = {
|
||||
method: 'PATCH',
|
||||
headers: myHeaders,
|
||||
body: raw,
|
||||
redirect: 'follow'
|
||||
};
|
||||
var requestOptions = {
|
||||
method: 'PATCH',
|
||||
headers: myHeaders,
|
||||
body: raw,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
|
||||
.then(response => {if(response.status !== 200)(console.log(response))})
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.log('error', error));
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
|
||||
.then(response => { if (response.status !== 200) (console.log(response)) })
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.log('error', error));
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -247,7 +254,7 @@ const confirmConsulta = (selectedPatientId) => {
|
||||
default: break
|
||||
}
|
||||
}
|
||||
let ListaDiasDatas = {segundas:segundas,tercas:tercas,quartas: quartas,quintas: quintas,sextas: sextas}
|
||||
let ListaDiasDatas = { segundas: segundas, tercas: tercas, quartas: quartas, quintas: quintas, sextas: sextas }
|
||||
return ListaDiasDatas
|
||||
}
|
||||
|
||||
@ -255,20 +262,20 @@ const confirmConsulta = (selectedPatientId) => {
|
||||
const handleClickAgendamento = (agendamento) => {
|
||||
if (agendamento.status !== 'vazio') return
|
||||
else setPageConsulta(true)
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
console.log("mudou FiltredTodosMedicos:", FiltredTodosMedicos);
|
||||
if (MedicoFiltrado.id != "vazio" ) {
|
||||
useEffect(() => {
|
||||
console.log("mudou FiltredTodosMedicos:", FiltredTodosMedicos);
|
||||
if (MedicoFiltrado.id != "vazio") {
|
||||
const unicoMedico = MedicoFiltrado;
|
||||
console.log(unicoMedico)
|
||||
const idMedicoFiltrado = unicoMedico.idMedico;
|
||||
console.log(`Médico único encontrado: ${unicoMedico.nomeMedico}. ID: ${idMedicoFiltrado}`);
|
||||
|
||||
const agendamentosDoMedico = filtrarAgendamentosPorMedico(
|
||||
DictAgendamentosOrganizados,
|
||||
idMedicoFiltrado
|
||||
DictAgendamentosOrganizados,
|
||||
idMedicoFiltrado
|
||||
);
|
||||
console.log(`Total de agendamentos filtrados para este médico: ${agendamentosDoMedico.length}`);
|
||||
console.log("Lista completa de Agendamentos do Médico:", agendamentosDoMedico);
|
||||
@ -280,23 +287,23 @@ const confirmConsulta = (selectedPatientId) => {
|
||||
}
|
||||
}, [FiltredTodosMedicos, MedicoFiltrado]);
|
||||
|
||||
const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
|
||||
const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
|
||||
setCacheAgendamentos(DictAgendamentosOrganizados);
|
||||
|
||||
const todasAsListasDeAgendamentos = Object.values(dictAgendamentos);
|
||||
const todosOsAgendamentos = todasAsListasDeAgendamentos.flat();
|
||||
|
||||
const agendamentosFiltrados = todosOsAgendamentos.filter(agendamento =>
|
||||
agendamento.doctor_id === idMedicoFiltrado
|
||||
agendamento.doctor_id === idMedicoFiltrado
|
||||
);
|
||||
|
||||
return agendamentosFiltrados;
|
||||
};
|
||||
};
|
||||
|
||||
const handleSearchMedicos = (term) => {
|
||||
const handleSearchMedicos = (term) => {
|
||||
setSearchTermDoctor(term);
|
||||
if (term.trim() === '') {
|
||||
if(MedicoFiltrado.id !== "vazio"){
|
||||
if (MedicoFiltrado.id !== "vazio") {
|
||||
console.log("Medico escolhido, mas vai ser apagado")
|
||||
console.log(cacheAgendamentos, "cache ")
|
||||
|
||||
@ -304,20 +311,20 @@ const handleSearchMedicos = (term) => {
|
||||
|
||||
|
||||
setFiltredTodosMedicos([]);
|
||||
setMedicoFiltrado({id:"vazio"})
|
||||
setMedicoFiltrado({ id: "vazio" })
|
||||
|
||||
//2 FiltrarAgendamentos()
|
||||
return;
|
||||
return;
|
||||
}
|
||||
if (FiltredTodosMedicos.length === 1){
|
||||
setMedicoFiltrado({...FiltredTodosMedicos[0]})
|
||||
if (FiltredTodosMedicos.length === 1) {
|
||||
setMedicoFiltrado({ ...FiltredTodosMedicos[0] })
|
||||
}
|
||||
|
||||
const filtered = ListaDeMedicos.filter(medico =>
|
||||
medico.nomeMedico.toLowerCase().includes(term.toLowerCase())
|
||||
medico.nomeMedico.toLowerCase().includes(term.toLowerCase())
|
||||
);
|
||||
setFiltredTodosMedicos(filtered);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
@ -327,64 +334,64 @@ const handleSearchMedicos = (term) => {
|
||||
|
||||
|
||||
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
||||
<button className="btn btn-primary" onClick={() => setPageConsulta(true)}>
|
||||
<i className="bi bi-plus-circle"></i> Adicionar Consulta
|
||||
</button>
|
||||
<button className="btn btn-primary" onClick={() => setPageConsulta(true)}>
|
||||
<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/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>
|
||||
<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='unidade-selecionarprofissional'>
|
||||
|
||||
{/* Bloco de busca por médico */}
|
||||
<div className='busca-atendimento-container'>
|
||||
<div className='input-e-dropdown-wrapper'>
|
||||
<div className='busca-atendimento'>
|
||||
{/* Bloco de busca por médico */}
|
||||
<div className='busca-atendimento-container'>
|
||||
<div className='input-e-dropdown-wrapper'>
|
||||
<div className='busca-atendimento'>
|
||||
<div>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filtrar atendimento por médico..."
|
||||
value={searchTermDoctor}
|
||||
onChange={(e) => handleSearchMedicos(e.target.value)}
|
||||
/>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filtrar atendimento por médico..."
|
||||
value={searchTermDoctor}
|
||||
onChange={(e) => handleSearchMedicos(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DROPDOWN (RENDERIZAÇÃO CONDICIONAL) */}
|
||||
{/* DROPDOWN (RENDERIZAÇÃO CONDICIONAL) */}
|
||||
{searchTermDoctor && FiltredTodosMedicos.length > 0 && (
|
||||
<div className='dropdown-medicos'>
|
||||
{FiltredTodosMedicos.map((medico) => (
|
||||
<div
|
||||
key={medico.id}
|
||||
className='dropdown-item'
|
||||
onClick={() => {
|
||||
setSearchTermDoctor(medico.nomeMedico);
|
||||
setFiltredTodosMedicos([]);
|
||||
setMedicoFiltrado(medico)
|
||||
{FiltredTodosMedicos.map((medico) => (
|
||||
<div
|
||||
key={medico.id}
|
||||
className='dropdown-item'
|
||||
onClick={() => {
|
||||
setSearchTermDoctor(medico.nomeMedico);
|
||||
setFiltredTodosMedicos([]);
|
||||
setMedicoFiltrado(medico)
|
||||
|
||||
}}
|
||||
>
|
||||
<p>{medico.nomeMedico} </p>
|
||||
</div>
|
||||
))}
|
||||
}}
|
||||
>
|
||||
<p>{medico.nomeMedico} </p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -437,68 +444,282 @@ const handleSearchMedicos = (term) => {
|
||||
|
||||
{/* Componentes de Tabela - Adicionado props de delete da main */}
|
||||
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
|
||||
{tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>}
|
||||
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>}
|
||||
{tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
|
||||
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
(
|
||||
<div className="fila-container">
|
||||
<div className="fila-header">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pesquisar na fila de espera..."
|
||||
className="busca-fila-espera"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<h2 className="fila-titulo">Fila de Espera</h2>
|
||||
</div>
|
||||
<table className="fila-tabela">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome do Paciente</th> {/* Ajustado o cabeçalho */}
|
||||
<th>CPF</th> {/* Ajustado o cabeçalho */}
|
||||
<th>Médico Solicitado</th> {/* Ajustado o cabeçalho */}
|
||||
<th>Data da Solicitação</th> {/* Ajustado o cabeçalho */}
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filaEsperaData.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td> <p>{item.Infos?.paciente_nome} </p> </td>
|
||||
<td><p>{item.Infos?.paciente_cpf} </p></td>
|
||||
<td><p>{item.Infos?.nome_medico} </p></td>
|
||||
<td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
|
||||
<td> <div className="d-flex gap-2">
|
||||
<div className="page-content table-paciente-container">
|
||||
<section className="row">
|
||||
<div className="col-12">
|
||||
<div className="card table-paciente-card">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title mb-0">Fila de Espera</h4>
|
||||
</div>
|
||||
|
||||
<button className="btn btn-sm btn-edit"
|
||||
onClick={() => {
|
||||
console.log(item, 'item')
|
||||
navigate(`${2}/edit`)
|
||||
setDictInfo(item)
|
||||
}}
|
||||
<div className="card-body">
|
||||
{/* Filtros */}
|
||||
<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 nome do paciente ou CPF..."
|
||||
value={searchTermFila}
|
||||
onChange={(e) => setSearchTermFila(e.target.value)}
|
||||
/>
|
||||
<small className="text-muted">
|
||||
Digite o nome completo ou número do CPF
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Filtrar por nome do médico..."
|
||||
value={filtroMedicoFila === 'Todos' ? '' : filtroMedicoFila}
|
||||
onChange={(e) => setFiltroMedicoFila(e.target.value || 'Todos')}
|
||||
/>
|
||||
<small className="text-muted">
|
||||
Digite o nome do médico para filtrar
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-end">
|
||||
<button
|
||||
className="btn btn-outline-secondary btn-sm"
|
||||
onClick={() => {
|
||||
setSearchTermFila('');
|
||||
setFiltroMedicoFila('Todos');
|
||||
setPaginaAtualFila(1);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<div className="contador-pacientes">
|
||||
{(() => {
|
||||
const filtrados = filaEsperaData.filter((item) => {
|
||||
const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
|
||||
const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
|
||||
const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
|
||||
const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
|
||||
return passaBusca && passaMedico;
|
||||
});
|
||||
return filtrados.length;
|
||||
})()} DE {filaEsperaData.length} SOLICITAÇÕES ENCONTRADAS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn btn-sm btn-delete"
|
||||
onClick={() => {
|
||||
setSelectedId(item.agendamento.id)
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-trash me-1"></i> Excluir
|
||||
</button>
|
||||
</div></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* Filtros Ativos */}
|
||||
{(searchTermFila || filtroMedicoFila !== "Todos") && (
|
||||
<div className="alert alert-info mb-3 filters-active">
|
||||
<strong>Filtros ativos:</strong>
|
||||
<div className="mt-1">
|
||||
{searchTermFila && <span className="badge bg-primary me-2">Busca: "{searchTermFila}"</span>}
|
||||
{filtroMedicoFila !== "Todos" && <span className="badge bg-primary me-2">Médico: {filtroMedicoFila}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabela */}
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped table-hover table-paciente-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome do Paciente</th>
|
||||
<th>CPF</th>
|
||||
<th>Médico Solicitado</th>
|
||||
<th>Data da Solicitação</th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(() => {
|
||||
// Filtrar dados
|
||||
const filaFiltrada = filaEsperaData.filter((item) => {
|
||||
const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
|
||||
const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
|
||||
const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
|
||||
const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
|
||||
return passaBusca && passaMedico;
|
||||
});
|
||||
|
||||
// Paginação
|
||||
const totalPaginasFila = Math.ceil(filaFiltrada.length / itensPorPaginaFila);
|
||||
const indiceInicial = (paginaAtualFila - 1) * itensPorPaginaFila;
|
||||
const indiceFinal = indiceInicial + itensPorPaginaFila;
|
||||
const filaPaginada = filaFiltrada.slice(indiceInicial, indiceFinal);
|
||||
|
||||
if (filaPaginada.length > 0) {
|
||||
return filaPaginada.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td>
|
||||
<div className="d-flex align-items-center">
|
||||
{item.Infos?.paciente_nome}
|
||||
</div>
|
||||
</td>
|
||||
<td>{item.Infos?.paciente_cpf}</td>
|
||||
<td>
|
||||
<span className="badge insurance-badge">
|
||||
{item.Infos?.nome_medico || 'Não informado'}
|
||||
</span>
|
||||
</td>
|
||||
<td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
|
||||
<td>
|
||||
<div className="d-flex gap-2">
|
||||
<button
|
||||
className="btn btn-sm btn-edit"
|
||||
onClick={() => {
|
||||
console.log(item, 'item');
|
||||
navigate(`${2}/edit`);
|
||||
setDictInfo(item);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn btn-sm btn-delete"
|
||||
onClick={() => {
|
||||
setSelectedId(item.agendamento.id);
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-trash me-1"></i> Excluir
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
));
|
||||
} else {
|
||||
return (
|
||||
<tr>
|
||||
<td colSpan="5" className="text-center py-4">
|
||||
<div className="text-muted">
|
||||
<i className="bi bi-search display-4"></i>
|
||||
<p className="mt-2">Nenhuma solicitação encontrada com os filtros aplicados.</p>
|
||||
{(searchTermFila || filtroMedicoFila !== "Todos") && (
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm mt-2"
|
||||
onClick={() => {
|
||||
setSearchTermFila('');
|
||||
setFiltroMedicoFila('Todos');
|
||||
setPaginaAtualFila(1);
|
||||
}}
|
||||
>
|
||||
Limpar filtros
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* Paginação */}
|
||||
{(() => {
|
||||
const filaFiltrada = filaEsperaData.filter((item) => {
|
||||
const buscaNome = item.Infos?.paciente_nome?.toLowerCase().includes(searchTermFila.toLowerCase());
|
||||
const buscaCPF = item.Infos?.paciente_cpf?.toLowerCase().includes(searchTermFila.toLowerCase());
|
||||
const passaBusca = searchTermFila === "" || buscaNome || buscaCPF;
|
||||
const passaMedico = filtroMedicoFila === "Todos" || item.Infos?.nome_medico?.toLowerCase().includes(filtroMedicoFila.toLowerCase());
|
||||
return passaBusca && passaMedico;
|
||||
});
|
||||
|
||||
const totalPaginasFila = Math.ceil(filaFiltrada.length / itensPorPaginaFila);
|
||||
const indiceInicial = (paginaAtualFila - 1) * itensPorPaginaFila;
|
||||
const indiceFinal = indiceInicial + itensPorPaginaFila;
|
||||
|
||||
if (filaFiltrada.length > 0) {
|
||||
return (
|
||||
<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={itensPorPaginaFila}
|
||||
onChange={(e) => {
|
||||
setItensPorPaginaFila(Number(e.target.value));
|
||||
setPaginaAtualFila(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 {paginaAtualFila} de {totalPaginasFila} •
|
||||
Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, filaFiltrada.length)} de {filaFiltrada.length} solicitações
|
||||
</span>
|
||||
|
||||
<nav>
|
||||
<ul className="pagination pagination-sm mb-0">
|
||||
<li className={`page-item ${paginaAtualFila === 1 ? 'disabled' : ''}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setPaginaAtualFila(paginaAtualFila - 1)}
|
||||
>
|
||||
<i className="bi bi-chevron-left"></i>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
{Array.from({ length: Math.min(5, totalPaginasFila) }, (_, i) => {
|
||||
const startPage = Math.max(1, paginaAtualFila - 2);
|
||||
const pageNum = startPage + i;
|
||||
if (pageNum <= totalPaginasFila) {
|
||||
return (
|
||||
<li key={pageNum} className={`page-item ${pageNum === paginaAtualFila ? 'active' : ''}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setPaginaAtualFila(pageNum)}
|
||||
>
|
||||
{pageNum}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
|
||||
<li className={`page-item ${paginaAtualFila === totalPaginasFila ? 'disabled' : ''}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setPaginaAtualFila(paginaAtualFila + 1)}
|
||||
>
|
||||
<i className="bi bi-chevron-right"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -508,8 +729,8 @@ const handleSearchMedicos = (term) => {
|
||||
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
|
||||
)}
|
||||
|
||||
{/* Modal de Confirmação de Exclusão */}
|
||||
{showDeleteModal && (
|
||||
{/* Modal de Confirmação de Exclusão */}
|
||||
{showDeleteModal && (
|
||||
<div
|
||||
className="modal fade show"
|
||||
style={{
|
||||
@ -537,11 +758,11 @@ const handleSearchMedicos = (term) => {
|
||||
|
||||
<div className="modal-body">
|
||||
<p className="mb-0 fs-5">
|
||||
Qual o motivo do cancelamento?
|
||||
Qual o motivo do cancelamento?
|
||||
</p>
|
||||
<div className='campo-de-input'>
|
||||
|
||||
<textarea className='input-modal' value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} />
|
||||
<textarea className='input-modal' value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -550,9 +771,10 @@ const handleSearchMedicos = (term) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => {setShowDeleteModal(false);
|
||||
onClick={() => {
|
||||
setShowDeleteModal(false);
|
||||
|
||||
}}
|
||||
}}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
@ -561,20 +783,21 @@ const handleSearchMedicos = (term) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
onClick={() => {deleteConsulta(selectedID);
|
||||
onClick={() => {
|
||||
deleteConsulta(selectedID);
|
||||
setShowDeleteModal(false)
|
||||
let lista_cores = coresConsultas
|
||||
let lista_cores = coresConsultas
|
||||
|
||||
let lista = listaConsultasID
|
||||
let lista = listaConsultasID
|
||||
|
||||
lista.push(selectedID)
|
||||
lista_cores.push("cancelled")
|
||||
lista.push(selectedID)
|
||||
lista_cores.push("cancelled")
|
||||
|
||||
setCoresConsultas(lista_cores)
|
||||
setCoresConsultas(lista_cores)
|
||||
|
||||
setListaConsultaID(lista)
|
||||
setListaConsultaID(lista)
|
||||
|
||||
console.log("lista", lista)
|
||||
console.log("lista", lista)
|
||||
|
||||
}}
|
||||
|
||||
@ -590,7 +813,7 @@ const handleSearchMedicos = (term) => {
|
||||
|
||||
|
||||
|
||||
{showConfirmModal &&(
|
||||
{showConfirmModal && (
|
||||
<div
|
||||
className="modal fade show"
|
||||
style={{
|
||||
@ -623,7 +846,7 @@ const handleSearchMedicos = (term) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => {setShowConfirmModal(false); setSelectedId("")}}
|
||||
onClick={() => { setShowConfirmModal(false); setSelectedId("") }}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
@ -632,17 +855,18 @@ const handleSearchMedicos = (term) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-success"
|
||||
onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)
|
||||
let lista_cores = coresConsultas
|
||||
onClick={() => {
|
||||
confirmConsulta(selectedID); setShowConfirmModal(false)
|
||||
let lista_cores = coresConsultas
|
||||
|
||||
let lista = listaConsultasID
|
||||
let lista = listaConsultasID
|
||||
|
||||
lista.push(selectedID)
|
||||
lista_cores.push("confirmed")
|
||||
lista.push(selectedID)
|
||||
lista_cores.push("confirmed")
|
||||
|
||||
setCoresConsultas(lista_cores)
|
||||
setCoresConsultas(lista_cores)
|
||||
|
||||
setListaConsultaID(lista)
|
||||
setListaConsultaID(lista)
|
||||
|
||||
|
||||
}}
|
||||
@ -657,7 +881,7 @@ const handleSearchMedicos = (term) => {
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@ -433,3 +433,21 @@ html[data-bs-theme="dark"] {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* Estilo para o botão Excluir nos modais de Agendamento - vermelho escuro */
|
||||
.modal-footer .btn-danger,
|
||||
button.btn.btn-danger {
|
||||
background-color: #c82333 !important;
|
||||
border-color: #bd2130 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.modal-footer .btn-danger:hover,
|
||||
.modal-footer .btn-danger:focus,
|
||||
.modal-footer .btn-danger:active,
|
||||
button.btn.btn-danger:hover,
|
||||
button.btn.btn-danger:focus,
|
||||
button.btn.btn-danger:active {
|
||||
background-color: #a71d2a !important;
|
||||
border-color: #9c1c28 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user