Alteracoes nos agendamenos

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) => {
             </select>
           </div>
 
-            <div className="form-check ">
-                <input className="form-check-input checkbox-cstom" type="checkbox" name="status" onChange={handleChange} />
-                <label className="form-check-label checkbox-label" htmlFor="vip">
-                  Fila de espera
-                </label>
-              </div>
         </div>
 
         <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" onChange={handleChange} required />
             </div>
           </div>
-
+<div className="linha">
-
+    {/* Dropdown de Início (Não modificado) */}
-        <div className="row">
+    <div className="campo-de-input">
-       <div className="campo-de-input">
+        <label htmlFor="inicio">Início *</label>
-          <label htmlFor="inicio">Início *</label>
+        <select 
-          <select 
             id="inicio"
             name="inicio" 
             required
             value={horarioInicio}
             onChange={(e) => setHorarioInicio(e.target.value)}
-          >
+        >
             <option value="" disabled>Selecione a hora de início</option>
             {opcoesDeHorario?.map((opcao, index) => (
-              <option 
+                <option 
-                key={index} 
+                    key={index} 
-                value={opcao.value} 
+                    value={opcao.value} 
-                disabled={opcao.disabled}
+                    disabled={opcao.disabled}
-              >
+                >
-                {opcao.label}
+                    {opcao.label}
-                {opcao.disabled && " (Indisponível)"} 
+                    {opcao.disabled && " (Indisponível)"} 
-              </option>
+                </option>
             ))}
-          </select>
+        </select>
+    </div>
+
+    {/* SELETOR DE SESSÕES MODIFICADO */}
+    {/* Removemos o 'label' para evitar o desalinhamento e colocamos o texto acima */}
+    <div className='seletor-wrapper'>
+        <label>Número de Sessões *</label> {/* Novo label para o seletor */}
+        <div className='sessao-contador'>
+            <button 
+                type="button" /* Adicionado para evitar submissão de formulário */
+                onClick={() => {if(sessoes === 0)return; else(setSessoes(sessoes - 1))}}
+                disabled={sessoes === 0} /* Desabilita o botão no limite */
+            > 
+                <i className="bi bi-chevron-compact-left"></i>
+            </button>
+            
+            <p className='sessao-valor'>{sessoes}</p> {/* Adicionada classe para estilização */}
+            
+            <button 
+                type="button" /* Adicionado para evitar submissão de formulário */
+                onClick={() => {if(sessoes === 3 )return; else(setSessoes(sessoes + 1))}}
+                disabled={sessoes === 3} /* Desabilita o botão no limite */
+            >  
+                <i className="bi bi-chevron-compact-right"></i>
+            </button>
         </div>
-
+    </div>
-        <div>
+      <div className="campo-de-input">
-
+        <label htmlFor="termino">Término *</label>
-        </div>
+                    <input
-
+                        type="text"
+                        id="termino"
+                        name="termino"
+                        value={horarioTermino || '— —'}
+                        readOnly
+                        className="horario-termino-readonly"
+                    />
        
-
+    
-        {/* Dropdown de Término */}
+    </div>
-        <div className="campo-de-input">
+</div>
-          <label htmlFor="termino">Término *</label>
-          <select 
-            id="termino"
-            name="termino" 
-            required
-            value={horarioTermino}
-            onChange={(e) => setHorarioTermino(e.target.value)}
-          >
-            <option value="" disabled>Selecione a hora de término</option>
-            {opcoesDeHorario?.map((opcao, index) => (
-              <option 
-                key={index} 
-                value={opcao.value} 
-                disabled={opcao.disabled}
-              >
-                {opcao.label}
-                {opcao.disabled && " (Indisponível)"} 
-              </option>
-            ))}
-          </select>
-        </div>
-        </div>
-      
-      
     
       </section>
 
@@ -344,13 +364,21 @@ const handleSubmit = (e) => {
           <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 className="campo-de-input-check">
+                <input className="form-check-input form-custom-check" type="checkbox" name="status" onChange={handleChange} />
+                <label className="form-check-label checkbox-label" htmlFor="status">
+                 Adicionar a fila de espera
+                </label>
+              </div>
       
     </div>
   );

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;
-}
+}
+/* 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) */
+}
+
+