RiseUP/riseup-squad23
4
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalizar o merge com as mudanças do agendamento

Browse Source
This commit is contained in:
jp-lima 2025-09-25 08:38:53 -03:00
commit 355f2a5d0a
13 changed files with 587 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

320
src/components/AgendarConsulta/FormNovaConsulta.jsx
View File

@ -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>
);
};

10
src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
View File

@ -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
View 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%
}

7
src/components/AgendarConsulta/style/styleTabelas/tabeladia.css
View File

@ -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 {

6
src/components/AgendarConsulta/style/styleTabelas/tabelames.css
View File

@ -147,4 +147,10 @@
padding: 4px 8px;
margin-bottom: 5px;
border-radius: 4px;
}
.cards-que-faltam{
color: #005a9e;
font-weight: bold;
font-size: larger;
}

16
src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css
View File

@ -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;
}

108
src/components/AgendarConsulta/style/styleagendamentos.css
View File

@ -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;
}

4
src/components/ProfileCard.js
View File

@ -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;*/

72
src/pages/Agendamento.jsx
View File

@ -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>
) : (

2
src/pages/DoctorDetails.jsx
View File

@ -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
src/pages/PatientCadastroManager.jsx
View File

@ -1,11 +1,10 @@
import React, { useState } from 'react';
import { useState } from 'react';
// Importamos os dois novos componentes que criamos
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({})

49
src/pages/Table.jsx
View File

@ -29,8 +29,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
}
const DeleteAnexo = async (patientID) => {
@ -61,17 +59,10 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
}
// Função para excluir paciente
const deletePatient = async (id) => {
DeleteAnexo(id)
const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
if (!window.confirm("Tem certeza que deseja excluir este paciente?")) return;
@ -85,45 +76,7 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
.catch((error) => console.log("Deu problema", error));
};
// Função para marcar/desmarcar VIP
const toggleVIP = async (id, atual) => {
const novoStatus = atual === true ? false : true;
await fetch(
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
{
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ vip: novoStatus }),
}
)
.then((response) => response.json())
.then(() => {
setPacientes((prev) =>
prev.map((p) => (p.id === id ? { ...p, vip: novoStatus } : p))
);
})
.catch((error) => console.log("Erro ao atualizar VIP:", error));
};
// Função para atualizar convênio/particular
const updateConvenio = async (id, convenio) => {
await fetch(
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
{
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ convenio }),
}
)
.then((response) => response.json())
.then(() => {
setPacientes((prev) =>
prev.map((p) => (p.id === id ? { ...p, convenio } : p))
);
})
.catch((error) => console.log("Erro ao atualizar convênio:", error));
};
// Requisição inicial para buscar pacientes
useEffect(() => {

56
src/pages/style/Agendamento.css
View File

@ -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;
}