diff --git a/src/components/AgendarConsulta/FormNovaConsulta.jsx b/src/components/AgendarConsulta/FormNovaConsulta.jsx
index 9bf0e58..36cee3e 100644
--- a/src/components/AgendarConsulta/FormNovaConsulta.jsx
+++ b/src/components/AgendarConsulta/FormNovaConsulta.jsx
@@ -11,6 +11,9 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
console.log(agendamento, 'aqui2')
+ const [sessoes,setSessoes] = useState(1)
+ const [tempoBaseConsulta, setTempoBaseConsulta] = useState(30); // NOVO: Tempo base da consulta em minutos
+
const [selectedFile, setSelectedFile] = useState(null);
const [anexos, setAnexos] = useState([]);
const [loadingAnexos, setLoadingAnexos] = useState(false);
@@ -165,6 +168,33 @@ const formatarHora = (datetimeString) => {
disabled: !item.available
}));
+const calcularHorarioTermino = (inicio, sessoes, tempoBase) => {
+ if (!inicio || inicio.length !== 5 || !inicio.includes(':')) return '';
+
+ const [horas, minutos] = inicio.split(':').map(Number);
+ const minutosInicio = (horas * 60) + minutos;
+ const duracaoTotalMinutos = sessoes * tempoBase;
+ const minutosTermino = minutosInicio + duracaoTotalMinutos;
+
+ const horaTermino = Math.floor(minutosTermino / 60) % 24;
+ const minutoTermino = minutosTermino % 60;
+
+ const formatar = (num) => String(num).padStart(2, '0');
+
+ return `${formatar(horaTermino)}:${formatar(minutoTermino)}`;
+ };
+
+ useEffect(() => {
+ // Recalcula o horário de término sempre que houver alteração nas variáveis dependentes
+ const novoTermino = calcularHorarioTermino(horarioInicio, sessoes, tempoBaseConsulta);
+ setHorarioTermino(novoTermino);
+
+ setAgendamento(prev => ({
+ ...prev,
+ horarioTermino: novoTermino
+ }));
+ }, [horarioInicio, sessoes, tempoBaseConsulta, setAgendamento]);
+
const handleSubmit = (e) => {
e.preventDefault();
alert("Agendamento salvo!");
@@ -247,92 +277,82 @@ const handleSubmit = (e) => {
-
-
-
-
+
+
+
+
+
+
);
diff --git a/src/components/AgendarConsulta/style/formagendamentos.css b/src/components/AgendarConsulta/style/formagendamentos.css
index b42fd96..6f43703 100644
--- a/src/components/AgendarConsulta/style/formagendamentos.css
+++ b/src/components/AgendarConsulta/style/formagendamentos.css
@@ -110,6 +110,7 @@ svg{
margin-top: 25px;
display: flex;
gap: 12px;
+ justify-content: flex-end;
}
.btn-primary {
@@ -389,4 +390,85 @@ html[data-bs-theme="dark"] svg {
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
-}
\ No newline at end of file
+}
+/* Container dos três elementos na linha */
+.linha {
+ display: flex;
+ align-items: flex-end; /* Garante que os campos de input e o seletor fiquem alinhados pela base */
+ gap: 20px; /* Espaçamento entre os campos */
+}
+
+/* ------------------------------------------- */
+/* ESTILIZAÇÃO DO SELETOR DE SESSÕES */
+/* ------------------------------------------- */
+
+.seletor-wrapper {
+ /* Garante que o label e o contador fiquem alinhados verticalmente com os selects */
+ display: flex;
+ flex-direction: column;
+}
+
+.sessao-contador {
+ /* Estilo de "campo de input" */
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ /* Cores e Bordas */
+ background-color: #e9ecef; /* Cor cinza claro dos inputs do Bootstrap */
+ border: 1px solid #ced4da; /* Borda sutil */
+ border-radius: 0.25rem; /* Bordas arredondadas (Padrão Bootstrap) */
+
+ /* Garante a mesma altura dos selects */
+ height: 40px; /* Ajuste este valor para corresponder à altura exata do seu select */
+ width: 100px; /* Largura ajustável */
+ padding: 0 5px; /* Padding interno */
+
+ font-size: 1rem;
+ font-weight: 500;
+}
+
+.sessao-valor {
+ /* Estilo do número de sessões */
+ margin: 0;
+ padding: 0 5px;
+ font-size: 1.1rem; /* Um pouco maior que o texto dos selects */
+ color: #007bff; /* Cor azul destacada (como na sua imagem) */
+}
+
+.sessao-contador button {
+ /* Estilo dos botões de chevron */
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0 2px;
+ color: #495057; /* Cor do ícone */
+ font-size: 1.5rem; /* Aumenta o tamanho dos ícones do chevron */
+ line-height: 1; /* Alinha o ícone verticalmente */
+ transition: color 0.2s;
+}
+
+.sessao-contador button:hover:not(:disabled) {
+ color: #007bff; /* Cor azul ao passar o mouse */
+}
+
+.sessao-contador button:disabled {
+ cursor: not-allowed;
+ color: #adb5bd; /* Cor mais clara quando desabilitado */
+}
+
+/* ------------------------------------------- */
+/* GARANTINDO COERÊNCIA NOS SELECTS */
+/* ------------------------------------------- */
+
+.campo-de-input select {
+ /* Se seus selects estiverem com estilos diferentes, este bloco garante que eles se pareçam */
+ /* com o seletor de sessões (se já usarem classes do Bootstrap, podem não precisar disso) */
+ background-color: #e9ecef; /* Fundo cinza claro */
+ border: 1px solid #ced4da; /* Borda sutil */
+ border-radius: 0.25rem;
+ height: 40px; /* Garante a mesma altura do sessao-contador */
+ /* Adicione mais estilos do seu input/select se necessário (ex: font-size, padding) */
+}
+
+