From bab85ff1401c07b0e7cc34075d199cc8af2c1787 Mon Sep 17 00:00:00 2001 From: RafaelMTA13 Date: Thu, 11 Sep 2025 11:24:28 -0300 Subject: [PATCH] Concertar Agendamento --- .../AgendarConsulta/CardConsulta.jsx | 13 +- .../AgendarConsulta/DadosConsultasMock.js | 16 +- .../AgendarConsulta/FormNovaConsulta.jsx | 49 ++-- .../AgendarConsulta/TabelaAgendamentoDia.jsx | 14 +- .../AgendarConsulta/TabelaAgendamentoMes.jsx | 209 ++++++++++-------- .../TabelaAgendamentoSemana.jsx | 8 +- .../styleTabelas/tabeladia.css | 72 ++++++ .../styleTabelas/tabelames.css | 150 +++++++++++++ .../styleTabelas/tabelasemana.css | 82 +++++++ src/components/Estilo/styleagendamentos.css | 108 +++++++++ src/pages/Agendamento.jsx | 87 ++++---- src/pages/style/Agendamento.css | 86 +++++++ 12 files changed, 697 insertions(+), 197 deletions(-) create mode 100644 src/components/AgendarConsulta/styleTabelas/tabeladia.css create mode 100644 src/components/AgendarConsulta/styleTabelas/tabelames.css create mode 100644 src/components/AgendarConsulta/styleTabelas/tabelasemana.css create mode 100644 src/components/Estilo/styleagendamentos.css create mode 100644 src/pages/style/Agendamento.css diff --git a/src/components/AgendarConsulta/CardConsulta.jsx b/src/components/AgendarConsulta/CardConsulta.jsx index 90ff1ae..49ce2c9 100644 --- a/src/components/AgendarConsulta/CardConsulta.jsx +++ b/src/components/AgendarConsulta/CardConsulta.jsx @@ -2,22 +2,21 @@ import React from 'react' const CardConsulta = ( {DadosConsulta} ) => { return ( -
+
{DadosConsulta.status !== 'vazio'? -
-
-

8:20|GEAP| {DadosConsulta.medico}

+
+
+

{DadosConsulta.horario}|GEAP| {DadosConsulta.medico}

-
+

{DadosConsulta.paciente} - {DadosConsulta.motivo} - 23 anos

: -
-
+ null } diff --git a/src/components/AgendarConsulta/DadosConsultasMock.js b/src/components/AgendarConsulta/DadosConsultasMock.js index 6a5183d..8f4d88e 100644 --- a/src/components/AgendarConsulta/DadosConsultasMock.js +++ b/src/components/AgendarConsulta/DadosConsultasMock.js @@ -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' }], diff --git a/src/components/AgendarConsulta/FormNovaConsulta.jsx b/src/components/AgendarConsulta/FormNovaConsulta.jsx index 12bc3c0..b8435cc 100644 --- a/src/components/AgendarConsulta/FormNovaConsulta.jsx +++ b/src/components/AgendarConsulta/FormNovaConsulta.jsx @@ -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 ( -
-

Novo Agendamento

+
+ -
-

Informações do paciente

+ +

Informações do paciente

-

{(inputProps) => } -

-

-

{(inputProps) => } -
-

-

- -

- {(inputProps) => } + {(inputProps) => } -

+

Informações adicionais

+ -

Informações adicionais

- - -

Informações do atendimento

+

Informações do atendimento

@@ -105,18 +95,21 @@ const FormNovaConsulta = ({ onCancel }) => { Imprimir na Etiqueta / Pulseira -

Acessibilidade

- - - - +

Acessibilidade

+
+ + + + +
-

- - +
+ + +
); }; -export default FormNovaConsulta; \ No newline at end of file +export default FormNovaConsulta; diff --git a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx index 50fba4a..0df81e4 100644 --- a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx +++ b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx @@ -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 (
- +
- - + + @@ -24,8 +25,8 @@ const TabelaAgendamentoDia = ({handleClickAgendamento}) => { {agendamentos.map((agendamento) => ( - - + - - ))} -
HorárioPaciente{agendamentos.medico}
{agendamento.horario} +

{agendamento.horario}
handleClickAgendamento(agendamento)} > @@ -34,12 +35,9 @@ const TabelaAgendamentoDia = ({handleClickAgendamento}) => {
diff --git a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx index 404b697..8474452 100644 --- a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx +++ b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx @@ -2,120 +2,133 @@ 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 + 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] - 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 (
- - - - - - - - +
SegTerQuaQuiSex
+ + + + + + + - {Object.entries(AgendamentosMes).map(([semanas, dias], index) => ( - - - + + + -
- {dias.segunda.map((consulta) => ( - - ) )} +
- - - - - - - - - - - - ))} - - -
SegTerQuaQuiSex
-
- {segundas[index]} + {Object.entries(AgendamentosMes).map(([semanas, dias], index) => ( +
+
+

{segundas[index]}

+
+ {dias.segunda.slice(0,4).map((consulta, idx) => ( + + ))} +
+ {dias.segunda.length > 3 ? +

+ {dias.segunda.length - 3}

+ : null} +
+ 		+
+ {tercas[index]} +
+ {dias.terca.slice(0,4).map((consulta, idx) => ( + + ))} +
+ {dias.terca.length > 3 ? +

+ {dias.terca.length - 3}

+ : null} +
+ 		+
+ {quartas[index]} +
+ {dias.quarta.slice(0,4).map((consulta, idx) => ( + + ))} +
+ {dias.quarta.length > 3 ? +

+ {dias.quarta.length - 3}

+ : null} +
+ 		- -
- {tercas[index]} - -
- {dias.terca.map((consulta) => ( - - ) )} - -
- -
- 		- -
- {quartas[index]} - -
- {dias.quarta.map((consulta) => ( - - ) )} - -
- -
- 		- -
- {quintas[index]} - -
- {dias.quinta.map((consulta) => ( - - ) )} - -
- -
- 		- -
- {sextas[index]} - -
- {dias.sexta.map((consulta) => ( - - ) )} - -
- -
-
+ +
+ {quintas[index]} +
+ {dias.quinta.slice(0,4).map((consulta, idx) => ( + + ))} +
+ {dias.quinta.length > 3 ? +

+ {dias.quinta.length - 3}

+ : null} +
+ + +
+ {sextas[index]} +
+ {dias.sexta.slice(0,4).map((consulta, idx) => ( + + ))} +
+ {dias.sexta.length > 3 ? +

+ {dias.sexta.length - 3}

+ : null} +
+ + + ))} +
) } -export default TabelaAgendamentoMes \ No newline at end of file +export default TabelaAgendamentoMes diff --git a/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx b/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx index d0e8c0c..faa36fb 100644 --- a/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx +++ b/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx @@ -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 @@ -17,9 +19,9 @@ const TabelaAgendamentoSemana = () => { return ( -
+
- +
@@ -34,7 +36,7 @@ const TabelaAgendamentoSemana = () => { - + diff --git a/src/components/AgendarConsulta/styleTabelas/tabeladia.css b/src/components/AgendarConsulta/styleTabelas/tabeladia.css new file mode 100644 index 0000000..ebd7179 --- /dev/null +++ b/src/components/AgendarConsulta/styleTabelas/tabeladia.css @@ -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; +} diff --git a/src/components/AgendarConsulta/styleTabelas/tabelames.css b/src/components/AgendarConsulta/styleTabelas/tabelames.css new file mode 100644 index 0000000..6df085d --- /dev/null +++ b/src/components/AgendarConsulta/styleTabelas/tabelames.css @@ -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; +} \ No newline at end of file diff --git a/src/components/AgendarConsulta/styleTabelas/tabelasemana.css b/src/components/AgendarConsulta/styleTabelas/tabelasemana.css new file mode 100644 index 0000000..d2692d3 --- /dev/null +++ b/src/components/AgendarConsulta/styleTabelas/tabelasemana.css @@ -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; +} diff --git a/src/components/Estilo/styleagendamentos.css b/src/components/Estilo/styleagendamentos.css new file mode 100644 index 0000000..bcdc8db --- /dev/null +++ b/src/components/Estilo/styleagendamentos.css @@ -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; +} + diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx index 169bb11..96eb570 100644 --- a/src/pages/Agendamento.jsx +++ b/src/pages/Agendamento.jsx @@ -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,62 +75,73 @@ const Agendamento = () => { {!PageNovaConsulta? ( -
+
+ +
+
+ + +
+ +
+ +
+
-
+
+ + +
-
- - -
- +
- -
- -
- - - {tabela === "diario" && ( )} {tabela === 'semanal' && - } {tabela === 'mensal' && ( - + )} -
+
) : ( @@ -162,4 +159,4 @@ const Agendamento = () => { } -export default Agendamento \ No newline at end of file +export default Agendamento diff --git a/src/pages/style/Agendamento.css b/src/pages/style/Agendamento.css new file mode 100644 index 0000000..6f20be6 --- /dev/null +++ b/src/pages/style/Agendamento.css @@ -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; + + +} \ No newline at end of file
Segunda
{consulta.horario}