diff --git a/src/components/AgendarConsulta/CardConsulta.jsx b/src/components/AgendarConsulta/CardConsulta.jsx index accb6cc..acd627c 100644 --- a/src/components/AgendarConsulta/CardConsulta.jsx +++ b/src/components/AgendarConsulta/CardConsulta.jsx @@ -1,39 +1,86 @@ import React, { useState, useEffect } from 'react';import { GetDoctorByID } from '../utils/Functions-Endpoints/Doctor'; import { GetPatientByID } from '../utils/Functions-Endpoints/Patient'; import { useAuth } from '../utils/AuthProvider'; -const CardConsulta = ( {DadosConsulta, TabelaAgendamento} ) => { +import { useNavigate } from 'react-router-dom'; +import { useMemo } from 'react'; + +const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} ) => { + const navigate = useNavigate(); + const {getAuthorizationHeader} = useAuth() const authHeader = getAuthorizationHeader() const [Paciente, setPaciente] = useState() const [Medico, setMedico] = useState() - const BuscarMedicoEPaciente = async () => { - const Doctor = await GetDoctorByID(DadosConsulta.doctor_id, authHeader) - const Patient = await GetPatientByID(DadosConsulta.patient_id, authHeader) - setMedico(Doctor[0]) - setPaciente(Patient[0]) - console.log(Doctor, Patient) - } + const ids = useMemo(() => { + return { + doctor_id: DadosConsulta?.doctor_id, + patient_id: DadosConsulta?.patient_id, + status: DadosConsulta?.status + }; + }, [DadosConsulta]); - // Status (agendado, confirmado, realizado, cancelado) - useEffect(() => { - if(DadosConsulta.status !== 'nada'){BuscarMedicoEPaciente()} - -}, []) + + useEffect(() => { + const BuscarMedicoEPaciente = async () => { + if (!ids.doctor_id || !ids.patient_id || ids.status === 'nada') return; + + try { + const [Doctor, Patient] = await Promise.all([ + GetDoctorByID(ids.doctor_id, authHeader), + GetPatientByID(ids.patient_id, authHeader) + ]); + + setMedico(Doctor?.[0] || null); + setPaciente(Patient?.[0] || null); + } catch (error) { + console.error('Erro ao buscar médico/paciente:', error); + } + }; + + BuscarMedicoEPaciente(); + }, [ids, authHeader]); return ( -
console.log('Clicou n aconsulta')}> +
- {DadosConsulta.status !== 'vazio'? + {DadosConsulta.id? +
-
-

{DadosConsulta.horario} {Medico?.full_name}

-
-
-

{Paciente?.full_name} - {DadosConsulta.exam}

-
+
+
+

{DadosConsulta.horario} {Medico?.full_name}

+
+ +
+

{Paciente?.full_name} - {DadosConsulta.exam}

+
+
+ +
+ + + + + +
+
: null diff --git a/src/components/AgendarConsulta/FormNovaConsulta.jsx b/src/components/AgendarConsulta/FormNovaConsulta.jsx index d45e659..bdae91d 100644 --- a/src/components/AgendarConsulta/FormNovaConsulta.jsx +++ b/src/components/AgendarConsulta/FormNovaConsulta.jsx @@ -5,13 +5,14 @@ import { GetPatientByCPF } from "../utils/Functions-Endpoints/Patient"; import { GetDoctorByName } from "../utils/Functions-Endpoints/Doctor"; import { useAuth } from "../utils/AuthProvider"; -const FormNovaConsulta = ({ onCancel, onSave }) => { +const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) => { const {getAuthorizationHeader} = useAuth() const [selectedFile, setSelectedFile] = useState(null); const [anexos, setAnexos] = useState([]); const [loadingAnexos, setLoadingAnexos] = useState(false); - const [agendamento, setAgendamento] = useState({}) + + const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false }) let authHeader = getAuthorizationHeader() @@ -40,9 +41,6 @@ const FormNovaConsulta = ({ onCancel, onSave }) => { const handleChange = (e) => { const {value, name} = e.target; - - console.log(value, name, agendamento) - if(name === 'email'){ setAgendamento({...agendamento, contato:{ ...agendamento.contato, diff --git a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx index 15cca20..a248f23 100644 --- a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx +++ b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import CardConsulta from './CardConsulta'; import "./style/styleTabelas/tabeladia.css"; -const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos }) => { +const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal }) => { const [indiceAcesso, setIndiceAcesso] = useState(0) const [Dia, setDia] = useState() const agendamentosDoDia = agendamentos?.semana1?.segunda || []; @@ -23,10 +23,12 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos }) => { return (
- +
+

{Dia}

- +
+
@@ -41,7 +43,7 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos }) => { diff --git a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx index 616c401..26dcb31 100644 --- a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx +++ b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx @@ -174,17 +174,18 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => { return (
-
- -

{AgendamentosMensaisOrganizados[indice].nomeDoMes}

- - +
+
+ +

{AgendamentosMensaisOrganizados[indice].nomeDoMes}

+ + +
-

{agendamento.horario}
handleClickAgendamento(agendamento)}> - +
- + @@ -196,16 +197,13 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => { const semana = AgendamentosMensaisOrganizados[indice][semanaKey] console.log(AgendamentosMensaisOrganizados[indice][semanaKey], 'ajdsahchbaohdfoduh') - - - return( { semana && typeof semana === "object" && Object.keys(semana).map((dia) => ( - diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css b/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css index 6228433..0e94023 100644 --- a/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css +++ b/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css @@ -114,4 +114,9 @@ html[data-bs-theme="dark"] .mostrar-horario th { border: 1px solid #333; color: #e0e0e0; background-color: #232323; -} \ No newline at end of file +} +/* +.container-botons{ + margin-left: 10rem; + background-color: pink; +}*/ \ No newline at end of file diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css index b63f5e1..2197260 100644 --- a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css +++ b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css @@ -221,6 +221,12 @@ html[data-bs-theme="dark"] .cards-que-faltam { color: #90caf9; } -th{ +.cabecalho-tabela{ color: white; + background-color: #005a9e; +} + +.container-botons{ + margin-left: 5rem; + } \ No newline at end of file diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx index cc0bebf..5266b66 100644 --- a/src/pages/Agendamento.jsx +++ b/src/pages/Agendamento.jsx @@ -1,6 +1,6 @@ import React, { useState, useMemo, useEffect } from 'react'; import API_KEY from '../components/utils/apiKeys.js'; - +import AgendamentoCadastroManager from './AgendamentoCadastroManager.jsx'; import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia'; import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana'; import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes'; @@ -16,115 +16,6 @@ import './style/FilaEspera.css'; const Agendamento = () => { - // Dados mocados para simular consultas com a API de Hugo - const Agendamentos = [ - { - id: "", - order_number: "APT-2025-0001", - patient_id: "a8039e6d-7271-4187-a719-e27d9c6d15b3", - appointment_type: "presencial", - cancellation_reason: null, - cancelled_at: null, - checked_in_at: null, - chief_complaint: "Dor de cabeça há 3", - completed_at: null, - created_at: "2025-10-10T15:56:59.112231+00:00", - created_by: "87f2662c-9da7-45c0-9e05-521d9d92d105", - doctor_id: "c2715ddb-e8fb-4319-8015-4fd5df93a39b", - duration_minutes: 30, - insurance_provider: "Unimed", - notes: null, - patient_notes: "Prefiro horário pela manhã", - scheduled_at: "2025-10-10T15:56:58.937+00:00", - status: "requested", - updated_at: "2025-10-10T15:56:59.112231+00:00", - updated_by: null - }, - // mesma data - { - id: "", - order_number: "APT-2025-0002", - patient_id: "becd4c18-042e-44ad-9bcb-cfef08f18046", - appointment_type: "presencial", - chief_complaint: "Retorno de consulta", - created_at: "2025-10-10T09:30:00.000+00:00", - scheduled_at: "2025-10-10T09:30:00.000+00:00", - doctor_id: "c2715ddb-e8fb-4319-8015-4fd5df93a39b", - duration_minutes: 45, - insurance_provider: "Amil", - status: "requested" - }, - // dia anterior 1 - { - id: "", - order_number: "APT-2025-0003", - patient_id: "e17e2bc6-6a90-4dc6-ae2d-b503e2835d36", - appointment_type: "teleconsulta", - chief_complaint: "Tosse persistente", - created_at: "2025-10-09T10:15:00.000+00:00", - scheduled_at: "2025-10-09T10:15:00.000+00:00", - doctor_id: "c2715ddb-e8fb-4319-8015-4fd5df93a39b", - duration_minutes: 20, - insurance_provider: "Bradesco Saúde", - status: "confirmed" - }, - // dia anterior 2 - { - id: "", - order_number: "APT-2025-0004", - patient_id: "d20e418f-6e45-495a-98be-16a9a163fab3", - appointment_type: "presencial", - chief_complaint: "Check-up anual", - created_at: "2025-10-09T14:00:00.000+00:00", - scheduled_at: "2025-10-09T14:00:00.000+00:00", - doctor_id: "c2715ddb-e8fb-4319-8015-4fd5df93a39b", - duration_minutes: 60, - insurance_provider: "Unimed", - status: "requested" - }, - // dia seguinte - { - id: "", - order_number: "APT-2025-0005", - patient_id: "8f27e87d-851a-484a-8450-6e3a5f29476c", - appointment_type: "presencial", - chief_complaint: "Dor lombar", - created_at: "2025-10-11T11:45:00.000+00:00", - scheduled_at: "2025-10-08T11:45:00.000+00:00", - doctor_id: "9471fb52-4de6-4052-b173-1f0695173ba3", - duration_minutes: 30, - insurance_provider: "SulAmérica", - status: "requested" - }, - // outro qualquer (para variedade) - { - id: "", - order_number: "APT-2025-0006", - patient_id: "47902ada-7d04-480a-a759-bae8a211973a", - appointment_type: "teleconsulta", - chief_complaint: "Acompanhamento pós-cirurgia", - created_at: "2025-10-10T18:00:00.000+00:00", - scheduled_at: "2025-10-10T18:00:00.000+00:00", - doctor_id: "9471fb52-4de6-4052-b173-1f0695173ba3", - duration_minutes: 25, - insurance_provider: "Unimed", - status: "requested" - }, { id: "", - order_number: "APT-2025-0006", - patient_id: "47902ada-7d04-480a-a759-bae8a211973a", - appointment_type: "teleconsulta", - chief_complaint: "Acompanhamento pós-cirurgia", - created_at: "2025-10-10T18:00:00.000+00:00", - scheduled_at: "2025-10-24T18:00:00.000+00:00", - doctor_id: "9471fb52-4de6-4052-b173-1f0695173ba3", - duration_minutes: 25, - insurance_provider: "Unimed", - status: "requested"} - -]; - - - const [FiladeEspera, setFiladeEspera] = useState(false); const [tabela, setTabela] = useState('diario'); const [PageNovaConsulta, setPageConsulta] = useState(false); @@ -133,19 +24,13 @@ const Agendamento = () => { const {getAuthorizationHeader} = useAuth() const [DictAgendamentosOrganizados, setAgendamentosOrganizados ] = useState({}) + const [showDeleteModal, setShowDeleteModal] = useState(false) const [AgendamentoFiltrado, setAgendamentoFiltrado] = useState() let authHeader = getAuthorizationHeader() - - // id do doutor - // dias - const FiltrarAgendamentos = (listaTodosAgendamentos) => { - - - // cria um dicionário temporário let DictAgendamentosOrganizados = {}; for (let i = 0; i < listaTodosAgendamentos.length; i++) { @@ -168,38 +53,6 @@ const Agendamento = () => { } - const handleSave = (Dict) => { - let DataAtual = dayjs() - var myHeaders = new Headers(); - myHeaders.append("apikey", API_KEY); - myHeaders.append("Authorization", authHeader); - myHeaders.append("Content-Type", "application/json"); - -var raw = JSON.stringify({ - "patient_id": Dict.patient_id, - "doctor_id": Dict.doctor_id, - "scheduled_at": DataAtual, - "duration_minutes": 30, - "appointment_type": "presencial", - "chief_complaint": "Dor de cabeça há 3 ", - "patient_notes": "Prefiro horário pela manhã", - "insurance_provider": "Unimed", - "created_by": "87f2662c-9da7-45c0-9e05-521d9d92d105" -}); - -var requestOptions = { - method: 'POST', - headers: myHeaders, - body: raw, - redirect: 'follow' -}; - -fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions) - .then(response => response.text()) - .then(result => console.log(result)) - .catch(error => console.log('error', error)); - - } // Requisição inicial para mostrar os agendamentos do banco de dados useEffect(() => { @@ -215,7 +68,7 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOp 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 => {FiltrarAgendamentos(Agendamentos); console.log(Agendamentos, "aqui")}) + .then(result => {FiltrarAgendamentos(result); console.log(result, "aqui")}) .catch(error => console.log('error', error)); }, []) @@ -371,7 +224,7 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOp - {tabela === "diario" && } + {tabela === "diario" && } {tabela === 'semanal' && } {tabela === 'mensal' && } @@ -418,8 +271,65 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOp ) : ( - + )} + + {showDeleteModal && ( +
+ e.target.classList.contains("modal") && setShowDeleteModal(false) + } + > +
+
+ +
+
+ Confirmação de Exclusão +
+ +
+ +
+

+ Tem certeza que deseja excluir este paciente? +

+
+ +
+ + + + + +
+
+
+
)} + + ) } diff --git a/src/pages/AgendamentoCadastroManager.jsx b/src/pages/AgendamentoCadastroManager.jsx new file mode 100644 index 0000000..7c97640 --- /dev/null +++ b/src/pages/AgendamentoCadastroManager.jsx @@ -0,0 +1,58 @@ +import React from 'react' +import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta' +import API_KEY from '../components/utils/apiKeys' +import { useAuth } from '../components/utils/AuthProvider' +import { useState } from 'react' +import dayjs from 'dayjs' + +const AgendamentoCadastroManager = () => { + + const {getAuthorizationHeader} = useAuth() + const [agendamento, setAgendamento] = useState({}) + + + let authHeader = getAuthorizationHeader() + + const handleSave = (Dict) => { + let DataAtual = dayjs() + var myHeaders = new Headers(); + myHeaders.append("apikey", API_KEY); + myHeaders.append("Authorization", authHeader); + myHeaders.append("Content-Type", "application/json"); + + var raw = JSON.stringify({ + "patient_id": Dict.patient_id, + "doctor_id": Dict.doctor_id, + "scheduled_at": DataAtual, + "duration_minutes": 30, + "appointment_type": "presencial", + "chief_complaint": "Dor de cabeça há 3 ", + "patient_notes": "Prefiro horário pela manhã", + "insurance_provider": "Unimed", + "created_by": "87f2662c-9da7-45c0-9e05-521d9d92d105" + }); + + var requestOptions = { + method: 'POST', + headers: myHeaders, + body: raw, + redirect: 'follow' + }; + + fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions) + .then(response => response.text()) + .then(result => console.log(result)) + .catch(error => console.log('error', error)); + + } + + return ( +
+ + + +
+ ) +} + +export default AgendamentoCadastroManager \ No newline at end of file diff --git a/src/pages/AgendamentoEditPage.jsx b/src/pages/AgendamentoEditPage.jsx new file mode 100644 index 0000000..46f3711 --- /dev/null +++ b/src/pages/AgendamentoEditPage.jsx @@ -0,0 +1,70 @@ +import React from 'react' +import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta' +import { useState } from 'react' +import { useParams } from 'react-router-dom' +import API_KEY from '../components/utils/apiKeys' +import { useAuth } from '../components/utils/AuthProvider' +import dayjs from 'dayjs' + + +const AgendamentoEditPage = () => { + + let DataAtual = dayjs() + const {getAuthorizationHeader} = useAuth() + const params = useParams() + const [PatientToPatch, setPatientToPatch] = useState({}) + + let id = params.id + + console.log(id) + + let authHeader = getAuthorizationHeader() + + const handleSave = (DictParaPatch) => { + var myHeaders = new Headers(); + myHeaders.append("Content-Type", "application/json"); + myHeaders.append('apikey', API_KEY) + myHeaders.append("authorization", authHeader) + + console.log(DictParaPatch) + + var raw = JSON.stringify({"patient_id": DictParaPatch.patient_id, + "doctor_id": DictParaPatch.doctor_id, + "scheduled_at": DataAtual, + "duration_minutes": 30, + "appointment_type": "presencial", + "chief_complaint": "Dor de cabeça há 3 ", + "patient_notes": "Prefiro horário pela manhã", + "insurance_provider": "Unimed", + "created_by": "87f2662c-9da7-45c0-9e05-521d9d92d105" + + + }); + + console.log(DictParaPatch) + console.log(id) + + var requestOptions = { + method: 'PATCH', + headers: myHeaders, + body: raw, + redirect: 'follow' + }; + + fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions) + .then(response => response.text()) + .then(result => console.log(result)) + .catch(error => console.log('error', error)); + } + + + return ( +
+ + + +
+ ) +} + +export default AgendamentoEditPage diff --git a/src/pages/style/Agendamento.css b/src/pages/style/Agendamento.css index 8df2e11..8d1e7eb 100644 --- a/src/pages/style/Agendamento.css +++ b/src/pages/style/Agendamento.css @@ -118,7 +118,7 @@ border-radius: 10px; } -#status-card-consulta-confirmado, .legenda-item-confirmado { +#status-card-consulta-confirmado, .legenda-item-confirmed { background-color: #eef8fb; border:3px solid #d8dfe7; padding: 5px; @@ -288,4 +288,73 @@ html[data-bs-theme="dark"] { color: #fff; background-color: #005a9e; } -} \ No newline at end of file +} + +/* Estilo para o botão de Editar */ +.btn-edit-custom { + background-color: #FFF3CD; + color: #856404; +} + +/* Estilo para o botão de Excluir (Deletar) */ +.btn-delete-custom { + background-color: #F8D7DA; + color: #721C24; + padding: 10px; +} + +.cardconsulta{ + display:flex; + align-items: center; + flex-direction: row; +} + +.container-botons{ + display: flex; + flex-direction: row; +} + +#tabela-seletor-container { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + + background-color: #fff; + border-radius: 8px; + padding: 6px 12px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); + + font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; + width: fit-content; + margin: 0 auto; +} + +#tabela-seletor-container p { + margin: 0; + font-size: 23px; + font-weight: 500; + color: #4085f6; + text-align: center; + white-space: nowrap; +} + +#tabela-seletor-container button { + background: transparent; + border: none; + color: #555; + font-size: 20px; + cursor: pointer; + padding: 4px 6px; + border-radius: 6px; + transition: all 0.2s ease-in-out; +} + +#tabela-seletor-container button:hover { + background-color: rgba(0, 0, 0, 0.05); + color: #000; +} + +#tabela-seletor-container i { + pointer-events: none; +} diff --git a/src/perfis/perfil_secretaria/PerfilSecretaria.jsx b/src/perfis/perfil_secretaria/PerfilSecretaria.jsx index baa72a6..b59d2d2 100644 --- a/src/perfis/perfil_secretaria/PerfilSecretaria.jsx +++ b/src/perfis/perfil_secretaria/PerfilSecretaria.jsx @@ -15,6 +15,7 @@ import Details from "../../pages/Details"; import EditPage from "../../pages/EditPage"; import DoctorDetails from "../../pages/DoctorDetails"; import DoctorEditPage from "../../pages/DoctorEditPage"; +import AgendamentoEditPage from "../../pages/AgendamentoEditPage"; function PerfilSecretaria({ onLogout }) { return ( @@ -33,7 +34,8 @@ function PerfilSecretaria({ onLogout }) { } /> } /> } /> - } /> + } /> + } /> Página não encontrada} />
SegSeg Ter Qua Qui
console.log('Clicou n aconsulta')}> + diff --git a/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx b/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx index 82f26bb..95a3238 100644 --- a/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx +++ b/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx @@ -126,22 +126,21 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes }) => { return (
{/* Container de Navegação */} -
+
- -

{tituloSemana}

- +

{tituloSemana}

@@ -166,7 +165,7 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes }) => { {/* Mapeamento de COLUNAS (dias) */}
{semanaParaRenderizar.segunda[indiceLinha] - ? + ? : null }