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

Adição das cores nos cards de consulta

Browse Source
This commit is contained in:
jp-lima 2025-09-18 09:46:59 -03:00
parent a54b119e24
commit e4515cf98e
6 changed files with 160 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/AgendarConsulta/CardConsulta.jsx
View File

@ -1,12 +1,16 @@
import React from 'react'
const CardConsulta = ( {DadosConsulta} ) => {
return (
<div >
const CardConsulta = ( {DadosConsulta, TabelaAgendamento} ) => {
// Status (agendado, confirmado, realizado, cancelado)
return (
<div className={`container-cardconsulta-${TabelaAgendamento}`}>
{DadosConsulta.status !== 'vazio'?
<div className='cardconsulta'>
<div className='cardconsulta' id={`status-card-consulta-${DadosConsulta.status}`}>
<section className='cardconsulta-infosecundaria'>
<p>{DadosConsulta.horario}|GEAP| {DadosConsulta.medico}</p>
</section>

122
src/components/AgendarConsulta/DadosConsultasMock.js
View File

@ -1,96 +1,100 @@
// Status (agendado, confirmado, realizado, cancelado)
let AgendamentosMes = {semana1:{
segunda:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
segunda:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'realizado', motivo:'Consulta de Rotina' },
{ horario: '07:10', status:'vazio' },
{ horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
{ horario: '07:40', status:'vazio' },
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
{ horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'realizado', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
{ horario: '07:40', status:'vazio' },
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'realizado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }],
terca:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
terca:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' },
{ horario: '07:10', status:'vazio' },
{ horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
{ horario: '07:40', status:'vazio' },
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }],
quarta:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
quarta:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' },
{ horario: '07:10', status:'vazio' },
{ horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
{ horario: '07:40', status:'vazio' },
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }],
quinta:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
quinta:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' },
{ horario: '07:10', status:'vazio' },
{ horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
{ horario: '07:40', status:'vazio' },
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }],
sexta:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
sexta:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' },
{ horario: '07:10', status:'vazio' },
{ horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
{ horario: '07:40', status:'vazio' },
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }]
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }]
}, semana2:{segunda:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
}, semana2:{segunda:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' },
{ horario: '07:10', status:'vazio' },
{ horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
{ horario: '07:40', status:'vazio' },
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' },
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' },
{ horario: '07:10', status:'vazio' },
{ horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
{ horario: '07:40', status:'vazio' },
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }],
terca:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
terca:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' },
{ horario: '07:10', status:'vazio' },
{ horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
{ horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
{ horario: '07:40', status:'vazio' },
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
{ horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
{ horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
{ horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
{ horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }],
quarta:[{ horario: '07:10', status:'vazio' }],
quinta:[{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' }],
quinta:[{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' }],
sexta:[{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' }]}
sexta:[{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' }]}

2
src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
View File

@ -29,7 +29,7 @@ const TabelaAgendamentoDia = ({handleClickAgendamento}) => {
<td className='mostrar-horario'>
<div onClick={() => handleClickAgendamento(agendamento)} >
<CardConsulta DadosConsulta={agendamento} />
<CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} />
</div>
</td>

8
src/components/AgendarConsulta/styleTabelas/tabeladia.css
View File

@ -70,3 +70,11 @@ font-weight: 600;
border: 1px solid #e0e0e0;
text-align: center;
}
.container-cardconsulta-dia {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 70px;
}

23
src/pages/Agendamento.jsx
View File

@ -4,7 +4,7 @@ import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendament
import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
import { useState, useEffect } from 'react';
import { useState} from 'react';
import dayjs from 'dayjs'
import "./style/Agendamento.css";
@ -43,6 +43,9 @@ const Agendamento = () => {
case'Friday':
sextas.push(d)
break
default:
break
}}
let ListaDiasDatas = [segundas,tercas, quartas, quintas,sextas]
@ -123,9 +126,27 @@ const Agendamento = () => {
Mês
</button>
<div className='legenda-tabela'>
<div className='legenda-item-realizado'>
<span>Realizado</span>
</div>
<div className='legenda-item-confirmado'>
<span>Confirmado</span>
</div>
<div className='legenda-item-agendado'>
<span>Agendado</span>
</div>
<div className='legenda-item-cancelado'>
<span>Cancelado</span>
</div>
</div>
{tabela === "diario" && (
<TabelaAgendamentoDia
handleClickAgendamento={handleClickAgendamento}
/>
)}

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

@ -84,3 +84,61 @@
}
.legenda-tabela{
display: flex;
justify-content: flex-end;
margin-top: 10px;
margin-bottom: 10px;
gap: 15px;
}
.legenda-item-realizado{
background-color: #2c5e37;
}
.legenda-item-confirmado{
background-color: #1e90ff;
}
.legenda-item-cancelado{
background-color: #d9534f;
}
.legenda-item-agendado{
background-color: #f0ad4e;
}
#status-card-consulta-realizado, .legenda-item-realizado {
background-color: #b7ffbd;
border:3px solid #91d392;
padding: 5px;
font-weight: bold;
border-radius: 10px;
}
#status-card-consulta-cancelado, .legenda-item-cancelado {
background-color: #ffb7cc;
border:3px solid #ff6c84;
padding: 5px;
font-weight: bold;
border-radius: 10px;
}
#status-card-consulta-confirmado, .legenda-item-confirmado {
background-color: #eef8fb;
border:3px solid #d8dfe7;
padding: 5px;
font-weight: bold;
border-radius: 10px;
}
#status-card-consulta-agendado, .legenda-item-agendado {
background-color: #f7f7c4;
border:3px solid #f3ce67;
padding: 5px;
font-weight: bold;
border-radius: 10px;
}