Concertar Agendamento
This commit is contained in:
RafaelMTA13
parent
d91b5cfebe
commit
bab85ff140
@ -6,18 +6,17 @@ const CardConsulta = ( {DadosConsulta} ) => {
|
||||
|
||||
|
||||
{DadosConsulta.status !== 'vazio'?
|
||||
<div>
|
||||
<section>
|
||||
<p>8:20|GEAP| {DadosConsulta.medico}</p>
|
||||
<div className='cardconsulta'>
|
||||
<section className='cardconsulta-infosecundaria'>
|
||||
<p>{DadosConsulta.horario}|GEAP| {DadosConsulta.medico}</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section className='cardconsulta-infoprimaria'>
|
||||
<p>{DadosConsulta.paciente} - {DadosConsulta.motivo} - 23 anos</p>
|
||||
</section>
|
||||
</div>
|
||||
:
|
||||
<div>
|
||||
</div>
|
||||
null
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ let AgendamentosMes = {semana1:{
|
||||
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
|
||||
|
||||
terca:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
|
||||
{ horario: '07:10', satus:'vazio' },
|
||||
{ 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' },
|
||||
@ -22,7 +22,7 @@ let AgendamentosMes = {semana1:{
|
||||
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
|
||||
|
||||
quarta:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
|
||||
{ horario: '07:10', satus:'vazio' },
|
||||
{ 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' },
|
||||
@ -33,7 +33,7 @@ let AgendamentosMes = {semana1:{
|
||||
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
|
||||
|
||||
quinta:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
|
||||
{ horario: '07:10', satus:'vazio' },
|
||||
{ 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' },
|
||||
@ -44,7 +44,7 @@ let AgendamentosMes = {semana1:{
|
||||
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
|
||||
|
||||
sexta:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
|
||||
{ horario: '07:10', satus:'vazio' },
|
||||
{ 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' },
|
||||
@ -56,7 +56,7 @@ let AgendamentosMes = {semana1:{
|
||||
|
||||
|
||||
}, semana2:{segunda:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
|
||||
{ horario: '07:10', satus:'vazio' },
|
||||
{ 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' },
|
||||
@ -76,17 +76,17 @@ let AgendamentosMes = {semana1:{
|
||||
{ horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
|
||||
|
||||
terca:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
|
||||
{ horario: '07:10', motivo:'vazio' },
|
||||
{ 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', motivo:'vazio' },
|
||||
{ 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: '' }],
|
||||
|
||||
quarta:[{ horario: '07:10', motivo:'vazio' }],
|
||||
quarta:[{ horario: '07:10', status:'vazio' }],
|
||||
|
||||
quinta:[{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' }],
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React from "react";
|
||||
import InputMask from "react-input-mask";
|
||||
import "../Estilo/styleagendamentos.css";
|
||||
|
||||
const FormNovaConsulta = ({ onCancel }) => {
|
||||
const handleSubmit = (e) => {
|
||||
@ -8,63 +9,52 @@ const FormNovaConsulta = ({ onCancel }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Novo Agendamento</h1>
|
||||
<div className="form-container">
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<h2>Informações do paciente</h2>
|
||||
|
||||
<form className="form-agendamento" onSubmit={handleSubmit}>
|
||||
<h2 className="section-title">Informações do paciente</h2>
|
||||
|
||||
<label>Nome *</label>
|
||||
<input type="text" name="nome" placeholder="Insira o nome do paciente" required />
|
||||
<br></br>
|
||||
|
||||
<label>CPF do paciente</label>
|
||||
<InputMask mask="999.999.999-99" placeholder="000.000.000-00">
|
||||
{(inputProps) => <input {...inputProps} type="text" name="cpf" />}
|
||||
</InputMask>
|
||||
<br></br>
|
||||
|
||||
<label>RG</label>
|
||||
<input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
|
||||
<br></br>
|
||||
|
||||
<label>Data de nascimento *</label>
|
||||
<input type="date" name="dataNascimento" required />
|
||||
<br></br>
|
||||
|
||||
<label>Telefone</label>
|
||||
<InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
|
||||
{(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
|
||||
</InputMask>
|
||||
<br />
|
||||
|
||||
<label>E-mail</label>
|
||||
<input type="email" name="email" placeholder="Email" />
|
||||
<br></br>
|
||||
|
||||
<label>Convênio</label>
|
||||
<select name="convenio">
|
||||
<option value="particular">Particular</option>
|
||||
<option value="publico">Público</option>
|
||||
</select>
|
||||
<br></br>
|
||||
|
||||
|
||||
<label>Matrícula</label>
|
||||
<input type="text" name="matricula" placeholder="000000000" />
|
||||
<br></br>
|
||||
|
||||
<label>Validade</label>
|
||||
<InputMask mask="99/99/9999" placeholder="00/00/0000">
|
||||
{(inputProps) => <input {...inputProps} type="text" name="validade" />}
|
||||
</InputMask>
|
||||
|
||||
<br></br>
|
||||
<h3 className="section-subtitle">Informações adicionais</h3>
|
||||
<button type="button" className="btn-secondary">Documentos e anexos</button>
|
||||
|
||||
<h3>Informações adicionais</h3>
|
||||
<button type="button">Documentos e anexos</button>
|
||||
|
||||
<h2>Informações do atendimento</h2>
|
||||
<h2 className="section-title">Informações do atendimento</h2>
|
||||
|
||||
<label>Nome do profissional *</label>
|
||||
<input type="text" name="profissional" required />
|
||||
@ -105,15 +95,18 @@ const FormNovaConsulta = ({ onCancel }) => {
|
||||
<input type="checkbox" name="imprimirEtiqueta" /> Imprimir na Etiqueta / Pulseira
|
||||
</label>
|
||||
|
||||
<h3>Acessibilidade</h3>
|
||||
<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>
|
||||
|
||||
<br /><br />
|
||||
<button type="submit">Salvar agendamento</button>
|
||||
<button type="button" onClick={onCancel}>Cancelar</button>
|
||||
<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>
|
||||
);
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react'
|
||||
import CardConsulta from './CardConsulta'
|
||||
import AgendamentosMes from './DadosConsultasMock'
|
||||
import "./styleTabelas/tabeladia.css";
|
||||
|
||||
const TabelaAgendamentoDia = ({handleClickAgendamento}) => {
|
||||
|
||||
@ -12,11 +13,11 @@ const TabelaAgendamentoDia = ({handleClickAgendamento}) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<table border="2">
|
||||
<table className='tabeladiaria'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Horário</th>
|
||||
<th>Paciente</th>
|
||||
<th></th>
|
||||
<th>{agendamentos.medico}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -24,8 +25,8 @@ const TabelaAgendamentoDia = ({handleClickAgendamento}) => {
|
||||
|
||||
{agendamentos.map((agendamento) => (
|
||||
<tr key={agendamento.id} border='2' >
|
||||
<td>{agendamento.horario}</td>
|
||||
<td>
|
||||
<td ><p>{agendamento.horario}</p></td>
|
||||
<td className='mostrar-horario'>
|
||||
|
||||
<div onClick={() => handleClickAgendamento(agendamento)} >
|
||||
<CardConsulta DadosConsulta={agendamento} />
|
||||
@ -34,12 +35,9 @@ const TabelaAgendamentoDia = ({handleClickAgendamento}) => {
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
))}
|
||||
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -2,30 +2,29 @@ import React from 'react'
|
||||
import AgendamentosMes from './DadosConsultasMock'
|
||||
import dayjs from "dayjs"
|
||||
import CardConsulta from './CardConsulta'
|
||||
import "./styleTabelas/tabelames.css";
|
||||
|
||||
const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
|
||||
const agendamentosMes = [0,1,2,3,4,5]
|
||||
|
||||
|
||||
|
||||
|
||||
const dataHoje = dayjs()
|
||||
const AnoAtual = dataHoje.year()
|
||||
|
||||
const mes = dataHoje.month() + 1
|
||||
|
||||
let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes)
|
||||
|
||||
|
||||
let segundas = ListaDiasDatas[0];
|
||||
let tercas = ListaDiasDatas[1];
|
||||
let quartas = ListaDiasDatas[2];
|
||||
let quintas = ListaDiasDatas[3];
|
||||
let sextas = ListaDiasDatas[4]
|
||||
|
||||
console.log(AnoAtual, 'ano', mes, 'mes')
|
||||
|
||||
return (
|
||||
<div>
|
||||
<table>
|
||||
<table className='tabelamensal'>
|
||||
<tr>
|
||||
<th>Seg</th>
|
||||
<th>Ter</th>
|
||||
@ -35,85 +34,99 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
</tr>
|
||||
|
||||
{Object.entries(AgendamentosMes).map(([semanas, dias], index) => (
|
||||
|
||||
<tr key={index}>
|
||||
<td>
|
||||
<div>
|
||||
{segundas[index]}
|
||||
|
||||
<p>{segundas[index]}</p>
|
||||
<div>
|
||||
{dias.segunda.map((consulta) => (
|
||||
<CardConsulta DadosConsulta={consulta} />
|
||||
{dias.segunda.slice(0,4).map((consulta, idx) => (
|
||||
<CardConsulta
|
||||
key={idx}
|
||||
DadosConsulta={consulta}
|
||||
className={`usuario-${consulta.cor || "default"}`}
|
||||
/>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
{dias.segunda.length > 3 ?
|
||||
<div><p>+ {dias.segunda.length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<div>
|
||||
{tercas[index]}
|
||||
|
||||
<div>
|
||||
{dias.terca.map((consulta) => (
|
||||
<CardConsulta DadosConsulta={consulta} />
|
||||
{dias.terca.slice(0,4).map((consulta, idx) => (
|
||||
<CardConsulta
|
||||
key={idx}
|
||||
DadosConsulta={consulta}
|
||||
className={`usuario-${consulta.cor || "default"}`}
|
||||
/>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
{dias.terca.length > 3 ?
|
||||
<div><p>+ {dias.terca.length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<div>
|
||||
{quartas[index]}
|
||||
|
||||
<div>
|
||||
{dias.quarta.map((consulta) => (
|
||||
<CardConsulta DadosConsulta={consulta} />
|
||||
{dias.quarta.slice(0,4).map((consulta, idx) => (
|
||||
<CardConsulta
|
||||
key={idx}
|
||||
DadosConsulta={consulta}
|
||||
className={`usuario-${consulta.cor || "default"}`}
|
||||
/>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
{dias.quarta.length > 3 ?
|
||||
<div><p>+ {dias.quarta.length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<td>
|
||||
<div>
|
||||
{quintas[index]}
|
||||
|
||||
<div>
|
||||
{dias.quinta.map((consulta) => (
|
||||
<CardConsulta DadosConsulta={consulta} />
|
||||
{dias.quinta.slice(0,4).map((consulta, idx) => (
|
||||
<CardConsulta
|
||||
key={idx}
|
||||
DadosConsulta={consulta}
|
||||
className={`usuario-${consulta.cor || "default"}`}
|
||||
/>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
{dias.quinta.length > 3 ?
|
||||
<div><p>+ {dias.quinta.length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<td>
|
||||
<div>
|
||||
{sextas[index]}
|
||||
|
||||
<div>
|
||||
{dias.sexta.map((consulta) => (
|
||||
<CardConsulta DadosConsulta={consulta} />
|
||||
{dias.sexta.slice(0,4).map((consulta, idx) => (
|
||||
<CardConsulta
|
||||
key={idx}
|
||||
DadosConsulta={consulta}
|
||||
className={`usuario-${consulta.cor || "default"}`}
|
||||
/>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
{dias.sexta.length > 3 ?
|
||||
<div><p>+ {dias.sexta.length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,6 +2,8 @@ import React from 'react'
|
||||
import Agendamento from '../../pages/Agendamento'
|
||||
import AgendamentosMes from './DadosConsultasMock'
|
||||
import CardConsulta from './CardConsulta'
|
||||
import "./styleTabelas/tabelasemana.css";
|
||||
|
||||
const TabelaAgendamentoSemana = () => {
|
||||
|
||||
let AgendamentosDesseMes = AgendamentosMes
|
||||
@ -19,7 +21,7 @@ const TabelaAgendamentoSemana = () => {
|
||||
return (
|
||||
<div >
|
||||
|
||||
<table>
|
||||
<table className='tabelasemanal'>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Segunda</th>
|
||||
@ -34,7 +36,7 @@ const TabelaAgendamentoSemana = () => {
|
||||
|
||||
<tr key={index}>
|
||||
<td>{consulta.horario}</td>
|
||||
<td> <CardConsulta DadosConsulta={AgendamentosdeSegunda[index]} /> </td>
|
||||
<td className='coluna-tipo1'> <CardConsulta DadosConsulta={AgendamentosdeSegunda[index]} /> </td>
|
||||
<td> <CardConsulta DadosConsulta={AgendamentosdeTerca[index]} /> </td>
|
||||
<td> <CardConsulta DadosConsulta={AgendamentosdeQuarta[index]} /> </td>
|
||||
<td><CardConsulta DadosConsulta={AgendamentosdeQuinta[index]} /></td>
|
||||
|
||||
72
src/components/AgendarConsulta/styleTabelas/tabeladia.css
Normal file
72
src/components/AgendarConsulta/styleTabelas/tabeladia.css
Normal file
@ -0,0 +1,72 @@
|
||||
.tabeladiaria {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden; /* mantém o arredondado */
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
|
||||
}
|
||||
|
||||
/* Células da tabela */
|
||||
.tabeladiaria th, .tabeladiaria td {
|
||||
padding: 9px;
|
||||
text-align: left;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
/* Cabeçalho */
|
||||
.tabeladiaria thead th {
|
||||
background-color: #0078d7;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #005a9e; /* borda inferior mais forte no cabeçalho */
|
||||
}
|
||||
|
||||
/* Remover bordas laterais do cabeçalho (se quiser) */
|
||||
.tabeladiaria thead th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tabeladiaria thead th:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Linhas pares do corpo */
|
||||
.tabeladiaria tbody tr:nth-child(even) {
|
||||
background-color: #e7e7e7a6;
|
||||
}
|
||||
|
||||
/* Hover nas linhas */
|
||||
.tabeladiaria tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Card dentro da tabela */
|
||||
.tabeladiaria .cardconsulta {
|
||||
border-radius: 10px;
|
||||
color: black;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
|
||||
.mostrar-horario td, .mostrar-horario th {
|
||||
padding: 4px 6px;
|
||||
height: 30px;
|
||||
border: 1px solid #e0e0e0;
|
||||
text-align: center;
|
||||
}
|
||||
150
src/components/AgendarConsulta/styleTabelas/tabelames.css
Normal file
150
src/components/AgendarConsulta/styleTabelas/tabelames.css
Normal file
@ -0,0 +1,150 @@
|
||||
.tabelamensal {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden; /* mantém o arredondado */
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
|
||||
}
|
||||
|
||||
/* Células da tabela */
|
||||
.tabelamensal th, .tabelamensal td {
|
||||
padding: 9px;
|
||||
text-align: left;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
/* Cabeçalho */
|
||||
.tabelamensal thead th {
|
||||
background-color: #0078d7;
|
||||
color: #0078d7;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #0078d7; /* borda inferior mais forte no cabeçalho */
|
||||
}
|
||||
|
||||
/* Remover bordas laterais do cabeçalho (se quiser) */
|
||||
.tabelamensal thead th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tabelamensal thead th:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Linhas pares do corpo */
|
||||
.tabelamensal tbody tr:nth-child(even) {
|
||||
background-color: #e7e7e7a6;
|
||||
}
|
||||
|
||||
/* Hover nas linhas */
|
||||
.tabelamensal tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Card dentro da tabela */
|
||||
.tabelamensal .cardconsulta {
|
||||
border-radius: 10px;
|
||||
color: black;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
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);
|
||||
}
|
||||
|
||||
.tabelamensal {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden; /* mantém o arredondado */
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
|
||||
}
|
||||
|
||||
.tabelamensal th, .tabelamensal td {
|
||||
padding: 9px;
|
||||
text-align: left;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.tabelamensal th {
|
||||
background-color: #0078d7;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #005a9e; /* borda inferior mais forte no cabeçalho */
|
||||
}
|
||||
|
||||
.tabelamensal td {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.tabelamensal td:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Estilo geral do card de consulta */
|
||||
.tabelamensal .cardconsulta {
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
padding: 6px;
|
||||
margin: 4px 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
border-left: 5px solid transparent; /* espaço da borda colorida */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.usuario-azul {
|
||||
background-color: #E3F2FD;
|
||||
border-left: 4px solid #2196F3;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.usuario-verde {
|
||||
background-color: #E8F5E9;
|
||||
border-left: 4px solid #4CAF50;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.usuario-roxo {
|
||||
background-color: #F3E5F5;
|
||||
border-left: 4px solid #9C27B0;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.usuario-laranja {
|
||||
background-color: #FFF3E0;
|
||||
border-left: 4px solid #FF9800;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.usuario-default {
|
||||
background-color: #FAFAFA;
|
||||
border-left: 4px solid #BDBDBD;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
82
src/components/AgendarConsulta/styleTabelas/tabelasemana.css
Normal file
82
src/components/AgendarConsulta/styleTabelas/tabelasemana.css
Normal file
@ -0,0 +1,82 @@
|
||||
.tabelasemanal {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden; /* mantém o arredondado */
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
|
||||
}
|
||||
|
||||
/* Células da tabela */
|
||||
.tabelasemanal th, .tabelasemanal td {
|
||||
padding: 9px;
|
||||
text-align: left;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
/* Cabeçalho da semanal */
|
||||
.tabelasemanal thead th,
|
||||
.tabelasemanal thead td,
|
||||
.tabelasemanal tr:first-child th,
|
||||
.tabelasemanal tr:first-child td {
|
||||
background-color: #0078d7 !important;
|
||||
color: #ffffff !important;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #005a9e;
|
||||
}
|
||||
|
||||
|
||||
/* Remover bordas laterais do cabeçalho (se quiser) */
|
||||
.tabelasemanal thead th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tabelasemanal thead th:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Linhas pares do corpo */
|
||||
.tabelasemanal tbody tr:nth-child(even) {
|
||||
background-color: #e7e7e7a6;
|
||||
}
|
||||
|
||||
/* Hover nas linhas */
|
||||
.tabelasemanal tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Card dentro da tabela */
|
||||
.tabelasemanal .cardconsulta {
|
||||
border-radius: 10px;
|
||||
color: black;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
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);
|
||||
}
|
||||
|
||||
.tabelasemanal tr:nth-child(even) {
|
||||
background-color: #e7e7e7a6 !important;
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
|
||||
.tabelasemanal tr:nth-child(odd) {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.tabelasemanal tr:hover {
|
||||
background-color: #f1f1f1 !important;
|
||||
}
|
||||
108
src/components/Estilo/styleagendamentos.css
Normal file
108
src/components/Estilo/styleagendamentos.css
Normal file
@ -0,0 +1,108 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendament
|
||||
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
|
||||
import { useState, useEffect } from 'react';
|
||||
import dayjs from 'dayjs'
|
||||
import "./style/Agendamento.css";
|
||||
|
||||
const Agendamento = () => {
|
||||
|
||||
@ -19,7 +20,7 @@ const Agendamento = () => {
|
||||
const DiasnoMes= base.daysInMonth()
|
||||
for(let d = 1; d <= DiasnoMes; d++){
|
||||
|
||||
const data = dayjs(`${ano}--${mes}--${d}`)
|
||||
const data = dayjs(`${ano}-${mes}-${d}`)
|
||||
|
||||
const dia = data.format('dddd')
|
||||
|
||||
@ -45,42 +46,27 @@ const Agendamento = () => {
|
||||
}}
|
||||
|
||||
let ListaDiasDatas = [segundas,tercas, quartas, quintas,sextas]
|
||||
console.log('dentro da função', ListaDiasDatas)
|
||||
|
||||
return ListaDiasDatas
|
||||
}
|
||||
|
||||
const [tabela, setTabela] = useState('diario')
|
||||
const [PageNovaConsulta, setPageConsulta] = useState(true)
|
||||
const [PageNovaConsulta, setPageConsulta] = useState(false)
|
||||
|
||||
const handleClickAgendamento = (agendamento) => {
|
||||
|
||||
if(agendamento.motivo !== 'vazio'){alert('tem')}
|
||||
if(agendamento.status !== 'vazio')return
|
||||
|
||||
else{
|
||||
setPageConsulta(true)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const handleClickCancel = () => {
|
||||
setPageConsulta(false)
|
||||
}
|
||||
|
||||
let agendamentos = [
|
||||
{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
|
||||
{ horario: '07:10', satus:'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: '' }
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
return(
|
||||
@ -89,61 +75,72 @@ const Agendamento = () => {
|
||||
|
||||
{!PageNovaConsulta? (
|
||||
|
||||
<div>
|
||||
<div className='atendimento-eprocura'>
|
||||
|
||||
|
||||
<div>
|
||||
<select>
|
||||
<option value="">Unidade Central</option>
|
||||
<option value="">Unidade Zona Norte</option>
|
||||
<option value="">Unidade Zona Oeste</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="input-container">
|
||||
<div className='busca-atendimento'>
|
||||
<div className="">
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
<input type="text" placeholder="Buscar atendimento" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<select>
|
||||
<option value="" disabled selected>Agendar</option>
|
||||
<option value="">Atendimento</option>
|
||||
<option value="">Sessões</option>
|
||||
<option value="">Urgência</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className='unidade-selecionarprofissional'>
|
||||
<select>
|
||||
<option value="" disabled selected >Unidade</option>
|
||||
<option value="">Unidade Central</option>
|
||||
<option value="">Unidade Zona Norte</option>
|
||||
<option value="">Unidade Zona Oeste</option>
|
||||
</select>
|
||||
|
||||
<input type="text" placeholder='Selecionar profissional' />
|
||||
|
||||
</div>
|
||||
|
||||
<div className='diadia'>
|
||||
<div>
|
||||
<button className="btn-buscar" onClick={() => setTabela("diario")}>
|
||||
<button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
|
||||
|
||||
onClick={() => setTabela("diario")}>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
dia
|
||||
Dia
|
||||
</button>
|
||||
<button className="btn-buscar" onClick={() => setTabela("semanal")}>
|
||||
<button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
semana
|
||||
Semana
|
||||
</button>
|
||||
<button className="btn-buscar" onClick={() => setTabela("mensal")}>
|
||||
<button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
mes
|
||||
Mês
|
||||
</button>
|
||||
|
||||
{tabela === "diario" && (
|
||||
<TabelaAgendamentoDia
|
||||
|
||||
handleClickAgendamento={handleClickAgendamento}
|
||||
/>
|
||||
)}
|
||||
|
||||
{tabela === 'semanal' &&
|
||||
<TabelaAgendamentoSemana/>
|
||||
|
||||
}
|
||||
|
||||
{tabela === 'mensal' && (
|
||||
<TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes}/>
|
||||
<TabelaAgendamentoMes
|
||||
ListarDiasdoMes={ListarDiasdoMes}
|
||||
aplicarCores={true} // 🔹 Ativa a lógica de cores só no mensal
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
86
src/pages/style/Agendamento.css
Normal file
86
src/pages/style/Agendamento.css
Normal file
@ -0,0 +1,86 @@
|
||||
.filtros-container select,
|
||||
.filtros-container input {
|
||||
padding: 0.5rem;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.btn-buscar {
|
||||
padding: 0.5rem 1rem;
|
||||
margin-right: 0.5rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.unidade-selecionarprofissional{
|
||||
background-color: #fdfdfdde;
|
||||
padding: 20px 10px;
|
||||
display: flex;
|
||||
border-radius:10px ;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.unidade-selecionarprofissional input, .unidade-selecionarprofissional select {
|
||||
margin-left: 8px;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.unidade-selecionarprofissional select{
|
||||
width: 7%;
|
||||
}
|
||||
|
||||
.busca-atendimento{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin:10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.busca-atendimento select{
|
||||
padding:5px;
|
||||
border-radius:8px ;
|
||||
margin-left: 15px;
|
||||
background-color: #0078d7;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.busca-atendimento input{
|
||||
margin-left: 8px;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-selecionar-tabeladia, .btn-selecionar-tabelasemana, .btn-selecionar-tabelames {
|
||||
background-color: rgba(231, 231, 231, 0.808);
|
||||
padding:8px 10px;
|
||||
font-size: larger;
|
||||
font-weight: bold;
|
||||
border-style: hidden;
|
||||
}
|
||||
|
||||
.btn-selecionar-tabeladia{
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.btn-selecionar-tabelames{
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
}
|
||||
|
||||
|
||||
.btn-selecionar-tabeladia.ativo, .btn-selecionar-tabelasemana.ativo, .btn-selecionar-tabelames.ativo{
|
||||
background-color: lightcyan;
|
||||
border-color: darkcyan;
|
||||
font-weight: bolder;
|
||||
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user