From 8866ebedbf34b8c051d9d2ade921108edeac3ffd Mon Sep 17 00:00:00 2001
From: jp-lima <jpbrasil763@gmail.com>
Date: Sat, 20 Sep 2025 11:10:13 -0300
Subject: [PATCH] =?UTF-8?q?Final=20estiliza=C3=A7=C3=A3o=20do=20form=20de?=
 =?UTF-8?q?=20agendamento?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AgendarConsulta/FormNovaConsulta.jsx      |  1 +
 .../style/formagendamentos.css                | 29 ++++++++---
 src/pages/Agendamento.jsx                     | 51 ++++++++++++-------
 src/pages/style/Agendamento.css               | 11 +++-
 4 files changed, 67 insertions(+), 25 deletions(-)

diff --git a/src/components/AgendarConsulta/FormNovaConsulta.jsx b/src/components/AgendarConsulta/FormNovaConsulta.jsx
index 1ce6f124..120aa56c 100644
--- a/src/components/AgendarConsulta/FormNovaConsulta.jsx
+++ b/src/components/AgendarConsulta/FormNovaConsulta.jsx
@@ -98,6 +98,7 @@ const FormNovaConsulta = ({ onCancel }) => {
             <div className='campo-de-input'>
               <label>Unidade *</label>
               <select name="unidade">
+                <option value="" disabled invisible>Selecione sua unidade</option>
                 <option value="centro">Núcleo de Especialidades Integradas</option>
                 <option value="leste">Unidade Leste</option>
               </select>
diff --git a/src/components/AgendarConsulta/style/formagendamentos.css b/src/components/AgendarConsulta/style/formagendamentos.css
index d41eb619..3684f90a 100644
--- a/src/components/AgendarConsulta/style/formagendamentos.css
+++ b/src/components/AgendarConsulta/style/formagendamentos.css
@@ -123,7 +123,8 @@
   margin-top: 10px;
   display: flex;
   flex-direction: row;
-  gap: rem;
+  gap: 4rem;
+
 }
 
 textarea{
@@ -132,14 +133,30 @@ textarea{
   
 }
 
-#informacoes-atendimento-segunda-linha-esquerda input{
-  width: 200px;
+.campos-informacoes-paciente,
+.campo-informacoes-atendimento {
+  display: flex;
+  gap: 16px;              /* espaço entre campos */
 }
 
-input[type='text']{
-  width: 600px;
+.campo-de-input {
+  flex: 1;                /* todos os filhos ocupam mesmo espaço */
+  display: flex;
+  flex-direction: column; /* mantém label em cima do input */
 }
 
-select[name='solicitante']{
+#informacoes-atendimento-segunda-linha-esquerda select[name="unidade"]{
   width: 300px;
+}
+
+input[type="time"]{
+  width: 150px;
+}
+
+select[name=solicitante]{
+  width: 190px;
+}
+
+.campo-de-input{
+  width:120%
 }
\ No newline at end of file
diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx
index 66349fd8..0f68825c 100644
--- a/src/pages/Agendamento.jsx
+++ b/src/pages/Agendamento.jsx
@@ -10,6 +10,11 @@ import "./style/Agendamento.css";
 
 const Agendamento = () => {
 
+  const [FiladeEspera, setFiladeEspera] = useState(false)
+  const [tabela, setTabela] = useState('diario')
+  const [PageNovaConsulta, setPageConsulta] = useState(false)
+
+
   
     const ListarDiasdoMes = (ano, mes) => {
       let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
@@ -54,8 +59,6 @@ const Agendamento = () => {
       return ListaDiasDatas
       }
 
-  const [tabela, setTabela] = useState('diario')
-  const [PageNovaConsulta, setPageConsulta] = useState(false)
 
   const handleClickAgendamento = (agendamento) => {
   
@@ -76,6 +79,7 @@ const Agendamento = () => {
   <div>
     <h1>Agendar nova consulta</h1>
 
+
   {!PageNovaConsulta? (
     
     <div className='atendimento-eprocura'>
@@ -106,25 +110,36 @@ const Agendamento = () => {
         </select>
 
         <input type="text" placeholder='Selecionar profissional' />
-
       </div>
 
+ 
     <div className='diadia'>
+      
+      
+      
       <div>
-        <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
-        
-        onClick={() => setTabela("diario")}>
-          <i className="fa-solid fa-calendar-day"></i>
-          Dia
-        </button>
-        <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
-          <i className="fa-solid fa-calendar-day"></i>
-          Semana
-        </button>
-        <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
-          <i className="fa-solid fa-calendar-day"></i>
-          Mês
-        </button>
+        <section className='botões-container'>
+       
+        <div>
+          <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
+          
+          onClick={() => setTabela("diario")}>
+            <i className="fa-solid fa-calendar-day"></i>
+            Dia
+          </button>
+          <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
+            <i className="fa-solid fa-calendar-day"></i>
+            Semana
+          </button>
+          <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
+            <i className="fa-solid fa-calendar-day"></i>
+            Mês
+          </button>
+        </div>
+         <div className='botão-fila-espera'>
+         <button onClick={ () => setFiladeEspera(true)}>Abrir fila de espera</button>
+        </div>
+        </section>
 
         <div className='legenda-tabela'>
           <div className='legenda-item-realizado'>
@@ -142,6 +157,8 @@ const Agendamento = () => {
             <span>Cancelado</span>
           </div>
         </div>
+      
+
 
         {tabela === "diario" && (
           <TabelaAgendamentoDia
diff --git a/src/pages/style/Agendamento.css b/src/pages/style/Agendamento.css
index d7f34d51..06fb5558 100644
--- a/src/pages/style/Agendamento.css
+++ b/src/pages/style/Agendamento.css
@@ -89,8 +89,8 @@
 
 .legenda-tabela{
   display: flex;
-  justify-content: flex-end;
-  margin-top: 10px;
+  
+  margin-top: 30px;
   margin-bottom: 10px;
   gap: 15px;
 }
@@ -141,4 +141,11 @@
   padding: 5px;
   font-weight: bold;
   border-radius: 10px;
+}
+
+.botões-container{
+  
+  display: flex;
+
+  justify-content: space-between;
 }
\ No newline at end of file