diff --git a/src/App.js b/src/App.js index 3d450982..8d5862b3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import Sidebar from './components/Sidebar'; //import Header from './components/Header'; -import Table from "./pages/Table"; +import TablePaciente from "./pages/TablePaciente"; import Inicio from './pages/Inicio'; import PatientCadastroManager from './pages/PatientCadastroManager'; @@ -34,7 +34,7 @@ function App() { case 'doctor-form-layout': return ; case 'table': - return ; + return ; case 'doctor-table': return ; case 'details-page-paciente': @@ -42,7 +42,7 @@ function App() { case 'details-page-doctor': return ; case 'edit-page-paciente': - return ; + return ; case 'edit-page-doctor': return ; case 'laudo-manager': diff --git a/src/components/AgendarConsulta/FormNovaConsulta.jsx b/src/components/AgendarConsulta/FormNovaConsulta.jsx index 0ab474df..53f63c78 100644 --- a/src/components/AgendarConsulta/FormNovaConsulta.jsx +++ b/src/components/AgendarConsulta/FormNovaConsulta.jsx @@ -1,12 +1,18 @@ -import React, { useState, useEffect } from "react"; + import InputMask from "react-input-mask"; -import "./style/styleagendamentos.css"; +import "./style/formagendamentos.css"; +import { useState, useEffect } from "react"; + const FormNovaConsulta = ({ onCancel, patientID }) => { + const [selectedFile, setSelectedFile] = useState(null); const [anexos, setAnexos] = useState([]); const [loadingAnexos, setLoadingAnexos] = useState(false); - useEffect(() => { + const [paciente, setPaciente] = useState({}) + const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false }) + + useEffect(() => { if (!patientID) return; const fetchAnexos = async () => { @@ -48,6 +54,102 @@ const FormNovaConsulta = ({ onCancel, patientID }) => { } }; + + const handleclickAcessibilidade = (id) => { + let resultado = acessibilidade[id] + + if(resultado === false){ setAcessibilidade({...acessibilidade, [id]:true}); console.log('mudou')} + + else if(resultado === true){ setAcessibilidade({...acessibilidade, [id]:false})} + console.log(id) + } + + + const FormatCPF = (valor) => { + console.log(valor) + + const digits = String(valor).replace(/\D/g, '').slice(0, 11); + BuscarPacienteExistentePeloCPF(valor) + + return digits + .replace(/(\d{3})(\d)/, '$1.$2') + .replace(/(\d{3})(\d)/, '$1.$2') + .replace(/(\d{3})(\d{1,2})$/, '$1-$2'); + } + + + const BuscarCPFnoBancodeDados = async (cpf) => { + + var myHeaders = new Headers(); + myHeaders.append("Authorization", "Bearer "); + myHeaders.append("Content-Type", "application/json"); + + var raw = JSON.stringify({ + "cpf": cpf + }); + + var requestOptions = { + method: 'POST', + headers: myHeaders, + body: raw, + redirect: 'follow' + }; + + const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions); + const result = await response.json(); + return result + + + } + + const BuscarPacienteExistentePeloCPF = async (value) => { + + if(isNaN(value[13]) === false && value.length === 14)try { + const result = await BuscarCPFnoBancodeDados(value); + console.log("Resultado:", result); + + if (result.data.existe === true){ + + var myHeaders = new Headers(); + myHeaders.append("Authorization", "Bearer "); + + var requestOptions = { + method: 'GET', + headers: myHeaders, + redirect: 'follow' + }; + + fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/", requestOptions) + .then(response => response.json()) + .then(result => setPaciente(result.data)) + .catch(error => console.log('error', error)); + } + + + + } catch (error) { + console.log("error", error); + } + //BuscarCPFnoBancodeDados(value) + } + + const handleChange = (e) => { + + const {value, name} = e.target; + + console.log(value, name) + + if(name === 'email'){ + setPaciente({...paciente, contato:{ + ...paciente.contato, + email:value + }}) + + }else{ + setPaciente({...paciente,[name]:value}) + } + } + const handleSubmit = (e) => { e.preventDefault(); alert("Agendamento salvo!"); @@ -60,43 +162,63 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {

Informações do paciente

-
- - +
+
+ + +
- - - {(inputProps) => } - +
+ + + e.target.value = FormatCPF(e.target.value)} /> + +
- - +
+ + +
- - +
+
+ + +
- - - {(inputProps) => } - +
+ + + {(inputProps) => } + +
- - - - - - - - +
+ + +
+
+
+ +
+ + +
+
+ + +
+ +
- - {(inputProps) => } - + +
+

Informações adicionais

@@ -124,59 +246,107 @@ const FormNovaConsulta = ({ onCancel, patientID }) => { )}

Informações do atendimento

+ + +
+ +
handleclickAcessibilidade(e.currentTarget.id)}> + + accessible +
- - +
handleclickAcessibilidade(e.currentTarget.id)}> + elderly +
+ +
handleclickAcessibilidade(e.currentTarget.id)}> + pregnant_woman +
+ +
handleclickAcessibilidade(e.currentTarget.id)}> + - - +
- - +
handleclickAcessibilidade(e.currentTarget.id)}> + +
+ +
- - +
+ +
+ + +
+ - - - - - - - - - - - - - - - - -

Acessibilidade

-
- - - - +
+ + +
-
- +
+
+ +
+
+ + +
+ + + +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ +
+ + +
+ + +
+
+
+ +
+
+
); }; diff --git a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx index 924332f7..55d8cf99 100644 --- a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx +++ b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx @@ -47,7 +47,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => { ))}
{dias.segunda.length > 3 ? -

+ {dias.segunda.length - 3}

+

+ {dias.segunda.length - 3}

: null} @@ -65,7 +65,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => { ))} {dias.terca.length > 3 ? -

+ {dias.terca.length - 3}

+

+ {dias.terca.length - 3}

: null} @@ -83,7 +83,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => { ))} {dias.quarta.length > 3 ? -

+ {dias.quarta.length - 3}

+

+ {dias.quarta.length - 3}

: null} @@ -101,7 +101,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => { ))} {dias.quinta.length > 3 ? -

+ {dias.quinta.length - 3}

+

+ {dias.quinta.length - 3}

: null} @@ -119,7 +119,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => { ))} {dias.sexta.length > 3 ? -

+ {dias.sexta.length - 3}

+

+ {dias.sexta.length - 3}

: null} diff --git a/src/components/AgendarConsulta/style/formagendamentos.css b/src/components/AgendarConsulta/style/formagendamentos.css new file mode 100644 index 00000000..afb1403b --- /dev/null +++ b/src/components/AgendarConsulta/style/formagendamentos.css @@ -0,0 +1,210 @@ +@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined'); + +.icons-container { + display: flex; + gap: 10px; + justify-content: flex-end; + margin-bottom: -7px; +} + +.acessibilidade-ativado{ + background-color: #1e3a8a; + border: none; +} +.acessibilidade-ativado svg, .acessibilidade-ativado .icon{ + color: white; +} + + +.icons-div{ + border: 1px solid #607080; + padding: 10px; + display: flex; + align-items: center; + justify-content: center; + height: 40px; + width: 40px; + border-radius: 10px; + cursor: pointer; + transition: 0.3s; +} + +.icons-div:hover{ + background-color: #1e3a8a; + } + .icons-div:hover svg, .icons-div:hover .icon{ + color:white; + } + +svg{ + color:black; + +} +.icon { + font-family: 'Material Symbols Outlined'; + font-size: 20px; + color:black + + +} + +.form-container { + /*max-width: 800px;*/ + margin: 20px auto; + padding: 25px; + background: #f5f8ff; + border-radius: 12px; + font-family: Arial, sans-serif; +} + +.form-title { + font-size: 26px; + font-weight: bold; + color: #1e3a8a; + margin-bottom: 20px; +} + +.form-agendamento label { + display: block; + margin-top: 12px; + font-weight: bold; + color: #333; +} + +.form-agendamento input, +.form-agendamento select, +.form-agendamento textarea { + width: 100%; + padding: 8px; + margin-top: 6px; + border: 1px solid #ccc; + border-radius: 6px; + font-size: 14px; +} + +.section-title { + font-size: 20px; + margin-top: 25px; + color: #1e40af; +} + +.section-subtitle { + font-size: 16px; + margin-top: 20px; + color: #374151; +} + +.btn-group button { + margin-right: 8px; + padding: 8px 12px; + border: 1px solid #1e3a8a; + border-radius: 6px; + background: #fff; + cursor: pointer; +} + +.btn-group button:hover { + background: #e0e7ff; +} + +.form-actions { + margin-top: 25px; + display: flex; + gap: 12px; +} + +.btn-primary { + background: #1e3a8a; + color: white; + border: none; + padding: 10px 18px; + border-radius: 6px; + cursor: pointer; +} + +.btn-primary:hover { + background: #172554; +} + +.btn-cancel { + background: #e5e7eb; + border: none; + padding: 10px 18px; + border-radius: 6px; + cursor: pointer; +} + +.btn-cancel:hover { + background: #d1d5db; +} + +.btn-secondary { + margin: 10px 0; + background: #f3f4f6; + padding: 8px 14px; + border: 1px solid #9ca3af; + border-radius: 6px; + cursor: pointer; +} + +.btn-secondary:hover { + background: #e5e7eb; +} + + +.cardconsulta-infosecundaria{ + font-size: small; +} + +.campos-informacoes-paciente,.campo-informacoes-atendimento{ + display: flex; + gap: 10px; + flex-direction: row; +} + +.campo-de-input{ + display: flex; + flex-direction: column; + +} + + +#informacoes-atendimento-segunda-linha{ + margin-top: 10px; + display: flex; + flex-direction: row; + gap: 4rem; +} + +textarea{ + width: 30px; + resize: both; +} + +.campos-informacoes-paciente, +.campo-informacoes-atendimento { + display: flex; + gap: 16px; /* espaço entre campos */ +} + +.campo-de-input { + flex: 1; /* todos os filhos ocupam mesmo espaço */ + display: flex; + flex-direction: column; /* mantém label em cima do input */ +} + +#informacoes-atendimento-segunda-linha-esquerda select[name="unidade"]{ + width: 300px; +} + +input[type="time"]{ + width: 150px; +} + +select[name=solicitante]{ + width: 190px; +} + +.campo-de-input{ + width:120% +} diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css b/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css index bc1a1794..a242ba06 100644 --- a/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css +++ b/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css @@ -51,8 +51,9 @@ font-weight: 600; padding: 8px; } -/* Ajuste para a classe .diadia, se for usada */ -.diadia { +/* Ajuste para a classe calendario, se for usada */ +/* +.calendario { margin-top: 20px; border-collapse: collapse; width: 100%; @@ -61,7 +62,7 @@ font-weight: 600; box-shadow: 0 4px 12px rgb(255, 255, 255); border: 10px solid #ffffffc5; background-color: rgb(253, 253, 253); -} +}*/ .mostrar-horario td, .mostrar-horario th { diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css index 6df085d1..fbce17bb 100644 --- a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css +++ b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css @@ -147,4 +147,10 @@ padding: 4px 8px; margin-bottom: 5px; border-radius: 4px; +} + +.cards-que-faltam{ + color: #005a9e; + font-weight: bold; + font-size: larger; } \ No newline at end of file diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css b/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css index d2692d38..70cdeef8 100644 --- a/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css +++ b/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css @@ -56,17 +56,7 @@ padding: 12px; } -/* Ajuste para a classe .diadia, se for usada */ -.diadia { - margin-top: 20px; - border-collapse: collapse; - width: 100%; - border-radius: 10px; - overflow: hidden; - box-shadow: 0 4px 12px rgb(255, 255, 255); - border: 10px solid #ffffffc5; - background-color: rgb(253, 253, 253); -} +/* Ajuste para a classe .calendario, se for usada */ .tabelasemanal tr:nth-child(even) { background-color: #e7e7e7a6 !important; @@ -80,3 +70,7 @@ .tabelasemanal tr:hover { background-color: #f1f1f1 !important; } + +tr{ + width: 1000px; +} \ No newline at end of file diff --git a/src/components/AgendarConsulta/style/styleagendamentos.css b/src/components/AgendarConsulta/style/styleagendamentos.css deleted file mode 100644 index bcdc8dbc..00000000 --- a/src/components/AgendarConsulta/style/styleagendamentos.css +++ /dev/null @@ -1,108 +0,0 @@ -.form-container { - max-width: 800px; - margin: 20px auto; - padding: 25px; - background: #f5f8ff; - border-radius: 12px; - font-family: Arial, sans-serif; -} - -.form-title { - font-size: 26px; - font-weight: bold; - color: #1e3a8a; - margin-bottom: 20px; -} - -.form-agendamento label { - display: block; - margin-top: 12px; - font-weight: bold; - color: #333; -} - -.form-agendamento input, -.form-agendamento select, -.form-agendamento textarea { - width: 100%; - padding: 8px; - margin-top: 6px; - border: 1px solid #ccc; - border-radius: 6px; - font-size: 14px; -} - -.section-title { - font-size: 20px; - margin-top: 25px; - color: #1e40af; -} - -.section-subtitle { - font-size: 16px; - margin-top: 20px; - color: #374151; -} - -.btn-group button { - margin-right: 8px; - padding: 8px 12px; - border: 1px solid #1e3a8a; - border-radius: 6px; - background: #fff; - cursor: pointer; -} - -.btn-group button:hover { - background: #e0e7ff; -} - -.form-actions { - margin-top: 25px; - display: flex; - gap: 12px; -} - -.btn-primary { - background: #1e3a8a; - color: white; - border: none; - padding: 10px 18px; - border-radius: 6px; - cursor: pointer; -} - -.btn-primary:hover { - background: #172554; -} - -.btn-cancel { - background: #e5e7eb; - border: none; - padding: 10px 18px; - border-radius: 6px; - cursor: pointer; -} - -.btn-cancel:hover { - background: #d1d5db; -} - -.btn-secondary { - margin: 10px 0; - background: #f3f4f6; - padding: 8px 14px; - border: 1px solid #9ca3af; - border-radius: 6px; - cursor: pointer; -} - -.btn-secondary:hover { - background: #e5e7eb; -} - - -.cardconsulta-infosecundaria{ - font-size: small; -} - diff --git a/src/components/ProfileCard.js b/src/components/ProfileCard.js index 64b88b2c..7a5b181a 100644 --- a/src/components/ProfileCard.js +++ b/src/components/ProfileCard.js @@ -1,4 +1,4 @@ -import React from 'react'; +/*import React from 'react'; function ProfileCard() { return ( @@ -18,4 +18,4 @@ function ProfileCard() { ); } -export default ProfileCard; \ No newline at end of file +export default ProfileCard;*/ \ No newline at end of file diff --git a/src/components/doctors/DoctorForm.jsx b/src/components/doctors/DoctorForm.jsx index d70187b1..0632b7e8 100644 --- a/src/components/doctors/DoctorForm.jsx +++ b/src/components/doctors/DoctorForm.jsx @@ -124,6 +124,9 @@ function DoctorForm({ onSave, onCancel, PatientDict }) { }; // Função para buscar endereço pelo CEP + const [showModal, setShowModal] = useState(false); + const [modalMsg, setModalMsg] = useState(''); + const handleCepBlur = async () => { const cep = formData.cep.replace(/\D/g, ''); if (cep.length === 8) { @@ -139,17 +142,20 @@ function DoctorForm({ onSave, onCancel, PatientDict }) { estado: data.uf || '' })); } else { - alert('CEP não encontrado!'); + setModalMsg('CEP não encontrado!'); + setShowModal(true); } } catch (error) { - alert('Erro ao buscar o CEP.'); + setModalMsg('Erro ao buscar o CEP.'); + setShowModal(true); } } }; const handleSubmit = () => { - if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento || !formData.email) { - alert('Por favor, preencha: Nome ,CPF, Gênero, Data de Nascimento e Email.'); + if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento ) { + setModalMsg('Por favor, preencha: Nome, CPF, Gênero, Data de Nascimento.'); + setShowModal(true); return; } @@ -180,9 +186,31 @@ function DoctorForm({ onSave, onCancel, PatientDict }) { } } ); + setModalMsg('Médico salvo com sucesso!'); + setShowModal(true); }; return ( + <> + {/* Modal de feedback */} + {showModal && ( +
+
+
+
+
Atenção
+ +
+
+

{modalMsg}

+
+
+ +
+
+
+
+ )}

MediConnect

@@ -247,7 +275,7 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
- +
@@ -406,11 +434,11 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
- +
- +
@@ -434,137 +462,10 @@ function DoctorForm({ onSave, onCancel, PatientDict }) { Cancelar
+
- //
- //

MediConnect

- - // {/* ------------------ DADOS PESSOAIS ------------------ */} - //
Dados Pessoais
- //
- //
- // - // - //
- //
- // - // - //
- //
- // - // - //
- //
- // - // - //
- //
- // - // - //
- //
- // - // - //
- //
- - // {/* ------------------ ENDEREÇO ------------------ */} - //
Endereço
- //
- //
- // - // - //
- //
- // - // - //
- //
- // - // - //
- //
- // - // - //
- //
- // - // - //
- //
- // - // - //
- //
- // - // - //
- //
- - // {/* ------------------ CONTATO ------------------ */} - //
Contato
- //
- //
- // - // - //
- //
- // - // - //
- //
- // - // - //
- //
- // - // - //
- //
- - // {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */} - //
Informações Adicionais
- //
- // - // - //
- - // {/* Botões */} - //
- // - // - //
- //
+ ); } - export default DoctorForm; diff --git a/src/components/doctors/DoctorList.jsx b/src/components/doctors/DoctorList.jsx deleted file mode 100644 index 570e5987..00000000 --- a/src/components/doctors/DoctorList.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -// Este componente recebe uma função 'onAddDoctor' para avisar que o botão foi clicado -function DoctorList({ onAddPatient }) { - return ( -
-
-

Médicos

-
-
-

Gerencie os médicos cadastrados no sistema.

- -
-
- ); -} - -export default DoctorList; \ No newline at end of file diff --git a/src/components/patients/PatientForm.jsx b/src/components/patients/PatientForm.jsx index 6e8fb321..cb4121ae 100644 --- a/src/components/patients/PatientForm.jsx +++ b/src/components/patients/PatientForm.jsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; function PatientForm({ onSave, onCancel, formData, setFormData }) { + // Estado para controlar a exibição do modal e os dados do paciente existente const [showModal, setShowModal] = useState(false); const [showModal404, setShowModal404] = useState(false); const [pacienteExistente, setPacienteExistente] = useState(null); @@ -41,7 +42,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) { return result.data } - + // Função para buscar os dados completos do paciente pelo ID const BuscarPacientePorId = async (id) => { var myHeaders = new Headers(); myHeaders.append("Authorization", "Bearer "); @@ -106,7 +107,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) { // Estado para controlar quais seções estão colapsadas const [collapsedSections, setCollapsedSections] = useState({ - dadosPessoais: true, + dadosPessoais: true, // Alterado para true para a seção ficar aberta por padrão infoMedicas: false, infoConvenio: false, endereco: false, @@ -426,7 +427,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
- + {formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}
@@ -664,20 +665,20 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
)} - {/* Erro 404 */} + {/* Erro 404 */} {showModal404 && (
-
Erro de Validação
+
Erro de validação
-

(Erro 404).Por favor,tente novamente mais tarde.

-
+

(Erro 404).Por favor,tente novamente mais tarde

+
-
diff --git a/src/components/patients/PatientList.jsx b/src/components/patients/PatientList.jsx deleted file mode 100644 index 1619828e..00000000 --- a/src/components/patients/PatientList.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -// Este componente recebe uma função 'onAddPatient' para avisar que o botão foi clicado -function PatientList({ onAddPatient }) { - return ( -
-
-

Pacientes

-
-
-

Gerencie os pacientes cadastrados no sistema.

- -
-
- ); -} - -export default PatientList; \ No newline at end of file diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx index 66349fd8..b008dc0a 100644 --- a/src/pages/Agendamento.jsx +++ b/src/pages/Agendamento.jsx @@ -10,6 +10,11 @@ import "./style/Agendamento.css"; const Agendamento = () => { + const [FiladeEspera, setFiladeEspera] = useState(false) + const [tabela, setTabela] = useState('diario') + const [PageNovaConsulta, setPageConsulta] = useState(false) + + const ListarDiasdoMes = (ano, mes) => { let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = [] @@ -54,8 +59,6 @@ const Agendamento = () => { return ListaDiasDatas } - const [tabela, setTabela] = useState('diario') - const [PageNovaConsulta, setPageConsulta] = useState(false) const handleClickAgendamento = (agendamento) => { @@ -76,6 +79,7 @@ const Agendamento = () => {

Agendar nova consulta

+ {!PageNovaConsulta? (
@@ -106,27 +110,41 @@ const Agendamento = () => { -
-
-
- - - +
+ + +
-
+
+ {FiladeEspera ===false ? + +
+ + + +
+
+ +
+ + + +
+ +
Realizado @@ -142,6 +160,12 @@ const Agendamento = () => { Cancelado
+ +
+ + + + {tabela === "diario" && ( { )}
+
: + +
+
+
+ + } +
) : ( diff --git a/src/pages/DoctorCadastroManager.jsx b/src/pages/DoctorCadastroManager.jsx index 3a928c44..5c9d8021 100644 --- a/src/pages/DoctorCadastroManager.jsx +++ b/src/pages/DoctorCadastroManager.jsx @@ -1,17 +1,21 @@ import React, { useState } from 'react'; // Importamos os dois novos componentes que criamos -import DoctorList from '../components/doctors/DoctorList'; + import DoctorForm from '../components/doctors/DoctorForm'; function DoctorCadastroManager( ) { // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário) - const [view, setView] = useState('form'); + var myHeaders = new Headers(); myHeaders.append("Content-Type", "application/json"); + // Estado do modal de sucesso + const [showModal, setShowModal] = useState(false); + const [modalMsg, setModalMsg] = useState(''); + // Função que será chamada para "salvar" o paciente const handleSavePatient = (patientData) => { console.log('Salvando médico:', patientData); @@ -23,42 +27,52 @@ function DoctorCadastroManager( ) { header: myHeaders, body:raw, redirect:'follow' - } + fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions) + .then(response => response.text()) + .then(result => console.log(result)) + .catch(error => console.log('error', error)); - fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions) - .then(response => response.text()) - .then(result => console.log(result)) - .catch(error => console.log('error', error)); - - alert(`Médico "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend - // Após salvar, voltamos para a tela de lista - setView('list'); + setModalMsg(`Médico "${patientData.nome}" salvo com sucesso!`); + setShowModal(true); + }; return ( <> + {/* Modal de feedback */} + {showModal && ( +
+
+
+
+
Sucesso
+ +
+
+

{modalMsg}

+
+
+ +
+
+
+
+ )}

Cadastro de Médicos

- {/* Aqui está a lógica principal: */} - {/* Se a view for 'list', mostramos a lista com o botão. */} - {/* Se for 'form', mostramos o formulário de cadastro. */} - - {view === 'list' ? ( - setView('form')} /> - ) : ( + setView('list')} + onCancel={console.log('hsh')} PatientDict={{}} - /> - )} +
diff --git a/src/pages/DoctorDetails.jsx b/src/pages/DoctorDetails.jsx index 25a26e4e..c8b77268 100644 --- a/src/pages/DoctorDetails.jsx +++ b/src/pages/DoctorDetails.jsx @@ -111,7 +111,7 @@ const Details = ({ patientID, setCurrentPage }) => {
-

{paciente.anexos || "-"}

+

{ "-"}

diff --git a/src/pages/DoctorTable.jsx b/src/pages/DoctorTable.jsx index b8341377..80774b97 100644 --- a/src/pages/DoctorTable.jsx +++ b/src/pages/DoctorTable.jsx @@ -5,19 +5,25 @@ function TableDoctor({ setCurrentPage, setPatientID }) { const [search, setSearch] = useState(""); const [filtroAniversariante, setFiltroAniversariante] = useState(false); + // estados do modal + const [showDeleteModal, setShowDeleteModal] = useState(false); + const [selectedDoctorId, setSelectedDoctorId] = useState(null); + // Função para excluir médicos const deleteDoctor = async (id) => { const requestOptionsDelete = { method: "DELETE", redirect: "follow" }; - if (!window.confirm("Tem certeza que deseja excluir este médico?")) return; - - await fetch( - `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, - requestOptionsDelete - ) - .then((response) => response.text()) - .then((mensage) => console.log(mensage)) - .catch((error) => console.log("Deu problema", error)); + try { + await fetch( + `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, + requestOptionsDelete + ); + setMedicos((prev) => prev.filter((m) => m.id !== id)); + } catch (error) { + console.log("Deu problema", error); + } finally { + setShowDeleteModal(false); + } }; // Função para verificar se hoje é aniversário @@ -60,7 +66,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
-

Médicos Cadastrados

@@ -105,7 +108,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) { - + @@ -130,7 +133,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
Email Telefone Ações
- + {/* Ver Detalhes */} + @@ -189,6 +197,55 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
+ + {/* Modal de confirmação de exclusão */} + {showDeleteModal && ( +
+ e.target.classList.contains("modal") && setShowDeleteModal(false) + } + > +
+
+
+
Confirmação de Exclusão
+ +
+
+

+ Tem certeza que deseja excluir este médico? +

+
+
+ + +
+
+
+
+ )} ); } diff --git a/src/pages/EditPage.jsx b/src/pages/EditPage.jsx index b204fd95..1b946208 100644 --- a/src/pages/EditPage.jsx +++ b/src/pages/EditPage.jsx @@ -4,7 +4,7 @@ import PatientForm from '../components/patients/PatientForm' import {useEffect, useState} from 'react' -const EditPage = ( {id}) => { +const EditPage = ( {id, setCurrentPage}) => { const [PatientToPUT, setPatientPUT] = useState({}) @@ -22,43 +22,52 @@ fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOpt .then(data => setPatientPUT(data)) .catch(error => console.log('error', error)); -}, []) +}, [id,requestOptions]) -const HandlePutPatient = () => { - alert(`Atualizando paciente "${PatientToPUT.nome}" com sucesso`) - var myHeaders = new Headers(); -myHeaders.append("Authorization", "Bearer "); -myHeaders.append("Content-Type", "application/json"); +const HandlePutPatient = async () => { + -var raw = JSON.stringify(PatientToPUT) + var myHeaders = new Headers(); + myHeaders.append("Authorization", "Bearer "); + myHeaders.append("Content-Type", "application/json"); -console.log(PatientToPUT) + var raw = JSON.stringify(PatientToPUT); -var requestOptions = { - method: 'PUT', - headers: myHeaders, - body: raw, - redirect: 'follow' -}; + console.log("Enviando paciente para atualização:", PatientToPUT); -fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/", requestOptions) - .then(response => response.text()) - .then(result => console.log('ATUALIZADO COM SUCESSO',result)) - .catch(error => console.log('error', error)); + var requestOptions = { + method: 'PUT', + headers: myHeaders, + body: raw, + redirect: 'follow' + }; + try { + const response = await fetch( + "https://mock.apidog.com/m1/1053378-0-default/pacientes/" + PatientToPUT.id, + requestOptions + ); + + // se o backend retorna JSON + const result = await response.json(); + console.log("ATUALIZADO COM SUCESSO", result); + + return result; + } catch (error) { + console.error("Erro ao atualizar paciente:", error); + throw error; } + +}; return ( -
- - {setCurrentPage('table')}} + setCurrentPage={setCurrentPage} formData={PatientToPUT} setFormData={setPatientPUT} /> diff --git a/src/pages/PatientCadastroManager.jsx b/src/pages/PatientCadastroManager.jsx index 7653975a..8a2fab83 100644 --- a/src/pages/PatientCadastroManager.jsx +++ b/src/pages/PatientCadastroManager.jsx @@ -1,11 +1,7 @@ -import React, { useState } from 'react'; - -// Importamos os dois novos componentes que criamos - +import {useState} from 'react'; import PatientForm from '../components/patients/PatientForm'; function PatientCadastroManager( {setCurrentPage} ) { - // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário) const [formData, setFormData] = useState({}) @@ -13,29 +9,33 @@ function PatientCadastroManager( {setCurrentPage} ) { myHeaders.append("Content-Type", "application/json"); // Função que será chamada para "salvar" o paciente - const handleSavePatient = (patientData) => { - console.log('Salvando paciente:', patientData); + const handleSavePatient = async (patientData) => { + console.log('Salvando paciente:', patientData); - var raw = JSON.stringify(patientData) + var raw = JSON.stringify(patientData); - var requestOptions = { - method:'POST', - header: myHeaders, - body:raw, - redirect:'follow' - } - - - fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions) - .then(response => response.text()) - .then(result => console.log(result)) - .catch(error => console.log('error', error)); - - alert(`Paciente "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend - // Após salvar, voltamos para a tela de lista - + var requestOptions = { + method: 'POST', + headers: { + "Content-Type": "application/json" + }, + body: raw, + redirect: 'follow' }; + try { + const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions); + const result = await response.json(); + console.log("Paciente salvo no backend:", result); + setCurrentPage('table') + return result; + } catch (error) { + console.error("Erro ao salvar paciente:", error); + throw error; + } +}; + + return ( <>
diff --git a/src/pages/style/Agendamento.css b/src/pages/style/Agendamento.css index d7f34d51..3bb469aa 100644 --- a/src/pages/style/Agendamento.css +++ b/src/pages/style/Agendamento.css @@ -89,10 +89,11 @@ .legenda-tabela{ display: flex; - justify-content: flex-end; - margin-top: 10px; + + margin-top: 30px; margin-bottom: 10px; gap: 15px; + justify-content: flex-end; } .legenda-item-realizado{ @@ -141,4 +142,55 @@ padding: 5px; font-weight: bold; border-radius: 10px; +} + +.btns-e-legenda-container{ + + display: flex; + + justify-content: space-between; + flex-direction: row; + margin-top: 10px; +} + + +.calendario { + + border-collapse: collapse; + width: 100%; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 4px 12px rgb(255, 255, 255); + border: 10px solid #ffffffc5; + background-color: rgb(253, 253, 253); +} + + + +.calendario-ou-filaespera{ + margin-top: 0; +} + +.container-btns-agenda-fila_esepera{ + margin-top: 30px; + display: flex; + flex-direction: row; + gap: 20px; + margin-left:20px ; + +} + +.btn-fila-espera, .btn-agenda{ + background-color: transparent; + border: 0px ; + border-bottom: 3px solid rgb(253, 253, 253); + padding: 8px; + border-radius: 10px 10px 0px 0px; + font-weight: bold; + +} + +.opc-filaespera-ativo, .opc-agenda-ativo{ + color: white; + background-color: #5980fd; } \ No newline at end of file