Erro 404 e a verfificação do cpf
This commit is contained in:
commit
04ed9b46b2
@ -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 <DoctorCadastroManager />;
|
||||
case 'table':
|
||||
return <Table setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
|
||||
return <TablePaciente setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
|
||||
case 'doctor-table':
|
||||
return <DoctorTable setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
|
||||
case 'details-page-paciente':
|
||||
@ -42,7 +42,7 @@ function App() {
|
||||
case 'details-page-doctor':
|
||||
return <DoctorDetails patientID={patientID} setCurrentPage={setCurrentPage} />;
|
||||
case 'edit-page-paciente':
|
||||
return <EditPage id={patientID} />;
|
||||
return <EditPage id={patientID} setCurrentPage={setCurrentPage}/>;
|
||||
case 'edit-page-doctor':
|
||||
return <DoctorEditPage id={patientID} />;
|
||||
case 'laudo-manager':
|
||||
|
||||
@ -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 <token>");
|
||||
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 <token>");
|
||||
|
||||
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 }) => {
|
||||
<form className="form-agendamento" onSubmit={handleSubmit}>
|
||||
<h2 className="section-title">Informações do paciente</h2>
|
||||
|
||||
<div id="informacoes-paciente-primeiralinha">
|
||||
<label>Nome *</label>
|
||||
<input type="text" name="nome" placeholder="Insira o nome do paciente" required />
|
||||
<div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
|
||||
<div className="campo-de-input">
|
||||
<label>Nome *</label>
|
||||
<input type="text" name="nome" value={paciente.nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<label>CPF do paciente</label>
|
||||
<InputMask mask="999.999.999-99" placeholder="000.000.000-00">
|
||||
{(inputProps) => <input {...inputProps} type="text" name="cpf" />}
|
||||
</InputMask>
|
||||
<div className="campo-de-input">
|
||||
<label>CPF do paciente</label>
|
||||
|
||||
<input type="text" name="cpf" placeholder="000.000.000-00" onChange={(e) => e.target.value = FormatCPF(e.target.value)} />
|
||||
|
||||
</div>
|
||||
|
||||
<label>RG</label>
|
||||
<input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
|
||||
<div className="campo-de-input">
|
||||
<label>RG</label>
|
||||
<input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>Data de nascimento *</label>
|
||||
<input type="date" name="data_nascimento" required />
|
||||
<div className="campos-informacoes-paciente" id="informacoes-paciente-linha-dois">
|
||||
<div className="campo-de-input">
|
||||
<label>Data de nascimento *</label>
|
||||
<input type="date" name="data_nascimento" value={paciente.data_nascimento} required onChange={handleChange}/>
|
||||
</div>
|
||||
|
||||
<label>Telefone</label>
|
||||
<InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
|
||||
{(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
|
||||
</InputMask>
|
||||
<div className="campo-de-input">
|
||||
<label>Telefone</label>
|
||||
<InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
|
||||
{(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
|
||||
</InputMask>
|
||||
</div>
|
||||
|
||||
<label>E-mail</label>
|
||||
<input type="email" name="email" placeholder="Email" />
|
||||
|
||||
<label>Convênio</label>
|
||||
<select name="convenio">
|
||||
<option value="particular">Particular</option>
|
||||
<option value="publico">Público</option>
|
||||
</select>
|
||||
|
||||
<label>Matrícula</label>
|
||||
<input type="text" name="matricula" placeholder="000000000" />
|
||||
<div className="campo-de-input">
|
||||
<label>E-mail</label>
|
||||
<input type="email" name="email" placeholder="Email" value={paciente.contato?.email} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Convênio</label>
|
||||
<select name="convenio">
|
||||
<option value="particular">Particular</option>
|
||||
<option value="publico">Público</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="campo-de-input">
|
||||
<label>Matrícula</label>
|
||||
<input type="text" name="matricula" placeholder="000000000" />
|
||||
</div>
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Validade</label>
|
||||
<InputMask mask="99/99/9999" placeholder="00/00/0000">
|
||||
{(inputProps) => <input {...inputProps} type="text" name="validade" />}
|
||||
</InputMask>
|
||||
<input type="date" name="validade" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="section-subtitle">Informações adicionais</h3>
|
||||
<button type="button" className="btn-secondary">Documentos e anexos</button>
|
||||
@ -124,59 +246,107 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
|
||||
)}
|
||||
</div>
|
||||
<h2 className="section-title">Informações do atendimento</h2>
|
||||
|
||||
|
||||
<div className="icons-container">
|
||||
|
||||
<div className={`icons-div ${ acessibilidade.cadeirante === true ? 'acessibilidade-ativado' : ''} `} id='cadeirante' onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
|
||||
|
||||
<span className="material-symbols-outlined icon">accessible</span>
|
||||
</div>
|
||||
|
||||
<label>Nome do profissional *</label>
|
||||
<input type="text" name="profissional" required />
|
||||
<div className={`icons-div ${acessibilidade.idoso === true ? 'acessibilidade-ativado' : ''}`} id="idoso" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
|
||||
<span className="material-symbols-outlined icon">elderly</span>
|
||||
</div>
|
||||
|
||||
<div className={`icons-div ${acessibilidade.gravida === true ? 'acessibilidade-ativado' : ''}`} id="gravida" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
|
||||
<span className="material-symbols-outlined icon">pregnant_woman</span>
|
||||
</div>
|
||||
|
||||
<div className={`icons-div ${acessibilidade.bebe === true ? 'acessibilidade-ativado' : ''}`} id="bebe" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-baby-icon lucide-baby"><path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5"/><path d="M15 12h.01"/><path d="M19.38 6.813A9 9 0 0 1 20.8 10.2a2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1"/><path d="M9 12h.01"/></svg>
|
||||
|
||||
<label>Tipo de atendimento *</label>
|
||||
<input type="text" name="tipoAtendimento" required />
|
||||
</div>
|
||||
|
||||
<label>Unidade *</label>
|
||||
<select name="unidade">
|
||||
<option value="centro">Núcleo de Especialidades Integradas</option>
|
||||
<option value="leste">Unidade Leste</option>
|
||||
</select>
|
||||
<div className={`icons-div ${acessibilidade.autista === true ? 'acessibilidade-ativado' : ''}`} id="autista" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<label>Data *</label>
|
||||
<input type="date" name="dataAtendimento" required />
|
||||
<div className="campo-informacoes-atendimento">
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Nome do profissional *</label>
|
||||
<input type="text" name="profissional" required />
|
||||
</div>
|
||||
|
||||
|
||||
<label>Início *</label>
|
||||
<input type="time" name="inicio" required />
|
||||
|
||||
<label>Término *</label>
|
||||
<input type="time" name="termino" required />
|
||||
|
||||
<label>Profissional solicitante</label>
|
||||
<select name="solicitante">
|
||||
<option value="">Selecione o solicitante</option>
|
||||
<option value="secretaria">Secretária</option>
|
||||
<option value="medico">Médico</option>
|
||||
</select>
|
||||
|
||||
<label>Observações</label>
|
||||
<textarea name="observacoes"></textarea>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="reembolso" /> Pagamento via Reembolso
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="imprimirEtiqueta" /> Imprimir na Etiqueta / Pulseira
|
||||
</label>
|
||||
|
||||
<h3 className="section-subtitle">Acessibilidade</h3>
|
||||
<div className="btn-group">
|
||||
<button type="button"></button>
|
||||
<button type="button"></button>
|
||||
<button type="button"></button>
|
||||
<button type="button"></button>
|
||||
<div className="campo-de-input">
|
||||
<label>Tipo de atendimento *</label>
|
||||
<input type="text" name="tipoAtendimento" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn-primary">Salvar agendamento</button>
|
||||
<section id="informacoes-atendimento-segunda-linha">
|
||||
<section id="informacoes-atendimento-segunda-linha-esquerda">
|
||||
|
||||
<div className="campo-informacoes-atendimento">
|
||||
<div className='campo-de-input'>
|
||||
<label>Unidade *</label>
|
||||
<select name="unidade">
|
||||
<option value="" disabled invisible selected>Selecione a unidade</option>
|
||||
<option value="centro">Núcleo de Especialidades Integradas</option>
|
||||
<option value="leste">Unidade Leste</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Data *</label>
|
||||
<input type="date" name="dataAtendimento" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="campo-informacoes-atendimento">
|
||||
<div className="campo-de-input">
|
||||
<label>Início *</label>
|
||||
<input type="time" name="inicio" required />
|
||||
</div>
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Término *</label>
|
||||
<input type="time" name="termino" required />
|
||||
</div>
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Profissional solicitante</label>
|
||||
<select name="solicitante">
|
||||
<option value="" disabled invisible selected>Selecione o solicitante</option>
|
||||
<option value="secretaria">Secretária</option>
|
||||
<option value="medico">Médico</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="informacoes-atendimento-segunda-linha-direita">
|
||||
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Observações</label>
|
||||
<textarea name="observacoes" rows="4" cols="1"></textarea>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn-primary">Salvar agendamento</button>
|
||||
<button type="button" className="btn-cancel" onClick={onCancel}>Cancelar</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -47,7 +47,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
))}
|
||||
</div>
|
||||
{dias.segunda.length > 3 ?
|
||||
<div><p>+ {dias.segunda.length - 3}</p></div>
|
||||
<div><p className='cards-que-faltam'>+ {dias.segunda.length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
@ -65,7 +65,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
))}
|
||||
</div>
|
||||
{dias.terca.length > 3 ?
|
||||
<div><p>+ {dias.terca.length - 3}</p></div>
|
||||
<div><p className='cards-que-faltam'>+ {dias.terca.length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
@ -83,7 +83,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
))}
|
||||
</div>
|
||||
{dias.quarta.length > 3 ?
|
||||
<div><p>+ {dias.quarta.length - 3}</p></div>
|
||||
<div><p className='cards-que-faltam'>+ {dias.quarta.length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
@ -101,7 +101,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
))}
|
||||
</div>
|
||||
{dias.quinta.length > 3 ?
|
||||
<div><p>+ {dias.quinta.length - 3}</p></div>
|
||||
<div><p className='cards-que-faltam'>+ {dias.quinta.length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
@ -119,7 +119,7 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
))}
|
||||
</div>
|
||||
{dias.sexta.length > 3 ?
|
||||
<div><p>+ {dias.sexta.length - 3}</p></div>
|
||||
<div><p className='cards-que-faltam'>+ {dias.sexta.length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
210
src/components/AgendarConsulta/style/formagendamentos.css
Normal file
210
src/components/AgendarConsulta/style/formagendamentos.css
Normal file
@ -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%
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -147,4 +147,10 @@
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cards-que-faltam{
|
||||
color: #005a9e;
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
/*import React from 'react';
|
||||
|
||||
function ProfileCard() {
|
||||
return (
|
||||
@ -18,4 +18,4 @@ function ProfileCard() {
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfileCard;
|
||||
export default ProfileCard;*/
|
||||
@ -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 && (
|
||||
<div className="modal fade show" style={{ display: 'block' }} tabIndex="-1">
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Atenção</h5>
|
||||
<button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p style={{ color: '#23336f', fontSize: '1.3rem', fontWeight: 500 }}>{modalMsg}</p>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
|
||||
@ -247,7 +275,7 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
|
||||
<input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} min="1900-01-01" max="2025-09-24" />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
|
||||
@ -406,11 +434,11 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
<div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Email: *</label>
|
||||
<label style={{ fontSize: '1.1rem' }}>Email: </label>
|
||||
<input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone: </label>
|
||||
<input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
@ -434,137 +462,10 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
// <div className="card p-3">
|
||||
// <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
|
||||
// {/* ------------------ DADOS PESSOAIS ------------------ */}
|
||||
// <h5 className="mb-3">Dados Pessoais</h5>
|
||||
// <div className="row">
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Nome: *</label>
|
||||
// <input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Nome social:</label>
|
||||
// <input type="text" className="form-control" name="nomeSocial" value={formData.nomeSocial} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Data de nascimento:</label>
|
||||
// <input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Gênero: *</label>
|
||||
// <select className="form-control" name="genero" value={formData.genero} onChange={handleChange}>
|
||||
// <option value="">Selecione</option>
|
||||
// <option value="Masculino">Masculino</option>
|
||||
// <option value="Feminino">Feminino</option>
|
||||
// <option value="Outro">Outro</option>
|
||||
// </select>
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>CPF: *</label>
|
||||
// <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Especialização:</label>
|
||||
// <select
|
||||
// className="form-control"
|
||||
// name="profissao"
|
||||
// value={formData.profissao}
|
||||
// onChange={handleChange}
|
||||
// >
|
||||
// <option value="">Selecione uma especialização</option>
|
||||
// <option value="Cardiologia">Clínica médica (clínico geral)</option>
|
||||
// <option value="Dermatologia">Pediatria</option>
|
||||
// <option value="Ginecologia">Ginecologia e obstetrícia</option>
|
||||
// <option value="Pediatria">Cardiologia</option>
|
||||
// <option value="Ortopedia">Ortopedia e traumatologia</option>
|
||||
// <option value="Oftalmologia">Oftalmologia</option>
|
||||
// <option value="Neurologia">Otorrinolaringologia</option>
|
||||
// <option value="Psiquiatria">Dermatologia</option>
|
||||
// <option value="Endocrinologia">Neurologia</option>
|
||||
// <option value="Oncologia">Psiquiatria</option>
|
||||
// <option value="Oncologia">Endocrinologia</option>
|
||||
// <option value="Oncologia">Gastroenterologia</option>
|
||||
// <option value="Oncologia">Urologia</option>
|
||||
// </select>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* ------------------ ENDEREÇO ------------------ */}
|
||||
// <h5>Endereço</h5>
|
||||
// <div className="row">
|
||||
// <div className="col-md-4 mb-3">
|
||||
// <label>CEP:</label>
|
||||
// <input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} />
|
||||
// </div>
|
||||
// <div className="col-md-8 mb-3">
|
||||
// <label>Rua:</label>
|
||||
// <input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Bairro:</label>
|
||||
// <input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-4 mb-3">
|
||||
// <label>Cidade:</label>
|
||||
// <input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-2 mb-3">
|
||||
// <label>Estado:</label>
|
||||
// <input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-4 mb-3">
|
||||
// <label>Número:</label>
|
||||
// <input type="text" className="form-control" name="numero" value={formData.numero} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-8 mb-3">
|
||||
// <label>Complemento:</label>
|
||||
// <input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* ------------------ CONTATO ------------------ */}
|
||||
// <h5>Contato</h5>
|
||||
// <div className="row">
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>E-mail: *</label>
|
||||
// <input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Telefone: *</label>
|
||||
// <input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Telefone 2:</label>
|
||||
// <input type="text" className="form-control" name="telefone2" value={formData.telefone2} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Telefone 3:</label>
|
||||
// <input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
|
||||
// <h5>Informações Adicionais</h5>
|
||||
// <div className="mb-3">
|
||||
// <label>Observações:</label>
|
||||
// <textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange}></textarea>
|
||||
// </div>
|
||||
|
||||
// {/* Botões */}
|
||||
// <div className="mt-3">
|
||||
// <button className="btn btn-success me-2" onClick={handleSubmit}>
|
||||
// Salvar Paciente
|
||||
// </button>
|
||||
// <button className="btn btn-light" onClick={onCancel}>
|
||||
// Cancelar
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default DoctorForm;
|
||||
|
||||
@ -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 (
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title">Médicos</h4>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<p>Gerencie os médicos cadastrados no sistema.</p>
|
||||
<button className="btn btn-primary" onClick={onAddPatient}>
|
||||
<i className="bi bi-plus-circle"></i> Adicionar Médico
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DoctorList;
|
||||
@ -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 <token>");
|
||||
@ -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 }) {
|
||||
<div className="col-md-12 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Anexos do Paciente:</label>
|
||||
<div>
|
||||
<label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem', background: '#9ca3af' }}>Escolher arquivo</label>
|
||||
<label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem' }}>Escolher arquivo</label>
|
||||
<input type="file" className="form-control d-none" name="anexos" id="anexos-input" onChange={handleChange} />
|
||||
<span className="ms-2" style={{ fontSize: '1.1rem' }}>{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
|
||||
</div>
|
||||
@ -664,20 +665,20 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Erro 404 */}
|
||||
{/* Erro 404 */}
|
||||
{showModal404 && (
|
||||
<div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||
<div className="modal-dialog">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header bg-danger text-white">
|
||||
<h5 className="modal-title">Erro de Validação</h5>
|
||||
<h5 className="modal-title">Erro de validação</h5>
|
||||
<button type="button" className="btn-close btn-close-white" onClick={() => setShowModal404(false)}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p style={{ fontSize: '1.4rem' }}>(Erro 404).Por favor,tente novamente mais tarde.</p>
|
||||
</div>
|
||||
<p style={{ fontSize: '1.4rem' }}>(Erro 404).Por favor,tente novamente mais tarde</p>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-primary" onClick={() => setShowModal404(false)}>
|
||||
<button type="button" className="btn btn-secondary" onClick={() => setShowModal404(false)}>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -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 (
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title">Pacientes</h4>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<p>Gerencie os pacientes cadastrados no sistema.</p>
|
||||
<button className="btn btn-primary" onClick={onAddPatient}>
|
||||
<i className="bi bi-plus-circle"></i> Adicionar Paciente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PatientList;
|
||||
@ -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 = () => {
|
||||
<div>
|
||||
<h1>Agendar nova consulta</h1>
|
||||
|
||||
|
||||
{!PageNovaConsulta? (
|
||||
|
||||
<div className='atendimento-eprocura'>
|
||||
@ -106,27 +110,41 @@ const Agendamento = () => {
|
||||
</select>
|
||||
|
||||
<input type="text" placeholder='Selecionar profissional' />
|
||||
|
||||
</div>
|
||||
|
||||
<div className='diadia'>
|
||||
<div>
|
||||
<button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
|
||||
|
||||
onClick={() => setTabela("diario")}>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
Dia
|
||||
</button>
|
||||
<button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
Semana
|
||||
</button>
|
||||
<button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
Mês
|
||||
</button>
|
||||
<div className='container-btns-agenda-fila_esepera'>
|
||||
<button className={`btn-agenda ${ FiladeEspera === false ? "opc-agenda-ativo": "" }`} onClick={ () => setFiladeEspera(false)}>Agenda</button>
|
||||
<button className={`btn-fila-espera ${ FiladeEspera === true ? "opc-filaespera-ativo": "" }`} onClick={ () => setFiladeEspera(true)}>Fila de espera</button>
|
||||
</div>
|
||||
|
||||
<div className='legenda-tabela'>
|
||||
<section className='calendario-ou-filaespera'>
|
||||
{FiladeEspera ===false ?
|
||||
|
||||
<div className='calendario'>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<section className='btns-e-legenda-container'>
|
||||
|
||||
<div>
|
||||
<button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
|
||||
|
||||
onClick={() => setTabela("diario")}>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
Dia
|
||||
</button>
|
||||
<button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
Semana
|
||||
</button>
|
||||
<button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
Mês
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='legenda-tabela'>
|
||||
<div className='legenda-item-realizado'>
|
||||
|
||||
<span>Realizado</span>
|
||||
@ -142,6 +160,12 @@ const Agendamento = () => {
|
||||
<span>Cancelado</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{tabela === "diario" && (
|
||||
<TabelaAgendamentoDia
|
||||
@ -162,7 +186,15 @@ const Agendamento = () => {
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>:
|
||||
|
||||
<div>
|
||||
<div className='container-fila-espera'></div>
|
||||
|
||||
</div>
|
||||
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
|
||||
@ -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 && (
|
||||
<div className="modal fade show" style={{ display: 'block' }} tabIndex="-1">
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Sucesso</h5>
|
||||
<button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p>{modalMsg}</p>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="page-heading">
|
||||
<h3>Cadastro de Médicos</h3>
|
||||
</div>
|
||||
<div className="page-content">
|
||||
<section className="row">
|
||||
<div className="col-12">
|
||||
{/* 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' ? (
|
||||
<DoctorList onAddPatient={() => setView('form')} />
|
||||
) : (
|
||||
|
||||
<DoctorForm
|
||||
onSave={handleSavePatient}
|
||||
onCancel={() => setView('list')}
|
||||
onCancel={console.log('hsh')}
|
||||
PatientDict={{}}
|
||||
|
||||
/>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -111,7 +111,7 @@ const Details = ({ patientID, setCurrentPage }) => {
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Anexos do Médico:</label>
|
||||
<p>{paciente.anexos || "-"}</p>
|
||||
<p>{ "-"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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 }) {
|
||||
<section className="row">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
|
||||
<div className="card-header d-flex justify-content-between align-items-center">
|
||||
<h4 className="card-title mb-0">Médicos Cadastrados</h4>
|
||||
<button
|
||||
@ -72,7 +77,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
</div>
|
||||
|
||||
<div className="card-body">
|
||||
|
||||
<div className="d-flex gap-2 mb-3">
|
||||
<input
|
||||
type="text"
|
||||
@ -95,7 +99,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped table-hover">
|
||||
<thead>
|
||||
@ -105,7 +108,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
<th>Email</th>
|
||||
<th>Telefone</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -130,7 +133,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
|
||||
<td>
|
||||
<div className="d-flex gap-2">
|
||||
|
||||
{/* Ver Detalhes */}
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
@ -146,6 +149,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
Detalhes
|
||||
</button>
|
||||
|
||||
{/* Editar */}
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
@ -160,13 +164,17 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "#F8D7DA",
|
||||
color: "#721C24",
|
||||
}}
|
||||
onClick={() => deleteDoctor(medico.id)}
|
||||
onClick={() => {
|
||||
setSelectedDoctorId(medico.id);
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-trash me-1"></i> Excluir
|
||||
</button>
|
||||
@ -189,6 +197,55 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Modal de confirmação de exclusão */}
|
||||
{showDeleteModal && (
|
||||
<div
|
||||
className="modal fade show"
|
||||
style={{
|
||||
display: "block",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
}}
|
||||
tabIndex="-1"
|
||||
onClick={(e) =>
|
||||
e.target.classList.contains("modal") && setShowDeleteModal(false)
|
||||
}
|
||||
>
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header bg-danger bg-opacity-25">
|
||||
<h5 className="modal-title text-danger"> Confirmação de Exclusão</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p className="mb-0 fs-5">
|
||||
Tem certeza que deseja excluir este médico?
|
||||
</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={() => deleteDoctor(selectedDoctorId)}
|
||||
>
|
||||
<i className="bi bi-trash me-1"></i> Excluir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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 <token>");
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
const HandlePutPatient = async () => {
|
||||
|
||||
|
||||
var raw = JSON.stringify(PatientToPUT)
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Authorization", "Bearer <token>");
|
||||
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 (
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
|
||||
<PatientForm
|
||||
onSave={HandlePutPatient}
|
||||
onCancel={console.log('Não atualizar')}
|
||||
|
||||
onCancel={() => {setCurrentPage('table')}}
|
||||
setCurrentPage={setCurrentPage}
|
||||
formData={PatientToPUT}
|
||||
setFormData={setPatientPUT}
|
||||
/>
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<div className="page-heading">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user