From ca1f5409e057d90afa59634fc036396b46ed8bbd Mon Sep 17 00:00:00 2001
From: jp-lima <jpbrasil763@gmail.com>
Date: Fri, 19 Sep 2025 15:19:01 -0300
Subject: [PATCH] =?UTF-8?q?come=C3=A7o=20da=20estiliza=C3=A7=C3=A3o=20do?=
 =?UTF-8?q?=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AgendarConsulta/FormNovaConsulta.jsx      | 188 +++++++++++-------
 ...eagendamentos.css => formagendamentos.css} |  39 +++-
 .../style/styleTabelas/tabelasemana.css       |   4 +
 src/pages/DoctorDetails.jsx                   |   2 +-
 4 files changed, 154 insertions(+), 79 deletions(-)
 rename src/components/AgendarConsulta/style/{styleagendamentos.css => formagendamentos.css} (74%)

diff --git a/src/components/AgendarConsulta/FormNovaConsulta.jsx b/src/components/AgendarConsulta/FormNovaConsulta.jsx
index 6723e6ce..1ce6f124 100644
--- a/src/components/AgendarConsulta/FormNovaConsulta.jsx
+++ b/src/components/AgendarConsulta/FormNovaConsulta.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import InputMask from "react-input-mask";
-import "./style/styleagendamentos.css";
+import "./style/formagendamentos.css";
 
 const FormNovaConsulta = ({ onCancel }) => {
   const handleSubmit = (e) => {
@@ -15,98 +15,132 @@ const FormNovaConsulta = ({ onCancel }) => {
       <form className="form-agendamento" onSubmit={handleSubmit}>
         <h2 className="section-title">Informações do paciente</h2>
 
-      <div id="informacoes-paciente-primeiralinha">
-          <label>Nome *</label>
-          <input type="text" name="nome" placeholder="Insira o nome do paciente" required />
+      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
+          <div className="campo-de-input">
+            <label>Nome *</label>
+            <input type="text" name="nome" placeholder="Insira o nome do paciente" required />
+          </div>
 
-          <label>CPF do paciente</label>
-          <InputMask mask="999.999.999-99" placeholder="000.000.000-00">
-            {(inputProps) => <input {...inputProps} type="text" name="cpf" />}
-          </InputMask>
+          <div className="campo-de-input">
+            <label>CPF do paciente</label>
+            <InputMask mask="999.999.999-99" placeholder="000.000.000-00">
+              {(inputProps) => <input {...inputProps} type="text" name="cpf" />}
+            </InputMask>
+          </div>
 
-          <label>RG</label>
-          <input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
+          <div className="campo-de-input">
+            <label>RG</label>
+            <input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
+          </div>
       </div>
 
-        <label>Data de nascimento *</label>
-        <input type="date" name="data_nascimento" required />
+      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-dois">
+          <div className="campo-de-input">
+            <label>Data de nascimento *</label>
+            <input type="date" name="data_nascimento" required />
+          </div>
 
-        <label>Telefone</label>
-        <InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
-          {(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
-        </InputMask>
+          <div className="campo-de-input">
+            <label>Telefone</label>
+            <InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
+              {(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
+            </InputMask>
+          </div>
 
-        <label>E-mail</label>
-        <input type="email" name="email" placeholder="Email" />
-
-        <label>Convênio</label>
-        <select name="convenio">
-          <option value="particular">Particular</option>
-          <option value="publico">Público</option>
-        </select>
-
-        <label>Matrícula</label>
-        <input type="text" name="matricula" placeholder="000000000" />
+          <div className="campo-de-input">
+            <label>E-mail</label>
+            <input type="email" name="email" placeholder="Email" />
+          </div>
+      </div>
 
+      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
+       
+        <div className="campo-de-input">
+          <label>Convênio</label>
+          <select name="convenio">
+            <option value="particular">Particular</option>
+            <option value="publico">Público</option>
+          </select>
+        </div>
+        <div className="campo-de-input">
+          <label>Matrícula</label>
+          <input type="text" name="matricula" placeholder="000000000" />
+        </div>
+    
+        <div className="campo-de-input">
         <label>Validade</label>
-        <InputMask mask="99/99/9999" placeholder="00/00/0000">
-          {(inputProps) => <input {...inputProps} type="text" name="validade" />}
-        </InputMask>
+          <input type="date" name="validade" />
+        </div>
+      </div>
 
         <h3 className="section-subtitle">Informações adicionais</h3>
         <button type="button" className="btn-secondary">Documentos e anexos</button>
 
         <h2 className="section-title">Informações do atendimento</h2>
+       
+        <div className="campo-informacoes-atendimento">
+            <div className="campo-de-input">
+              <label>Nome do profissional *</label>
+              <input type="text" name="profissional" required />
+            </div>
+          
 
-        <label>Nome do profissional *</label>
-        <input type="text" name="profissional" required />
-
-        <label>Tipo de atendimento *</label>
-        <input type="text" name="tipoAtendimento" required />
-
-        <label>Unidade *</label>
-        <select name="unidade">
-          <option value="centro">Núcleo de Especialidades Integradas</option>
-          <option value="leste">Unidade Leste</option>
-        </select>
-
-        <label>Data *</label>
-        <input type="date" name="dataAtendimento" required />
-
-        <label>Início *</label>
-        <input type="time" name="inicio" required />
-
-        <label>Término *</label>
-        <input type="time" name="termino" required />
-
-        <label>Profissional solicitante</label>
-        <select name="solicitante">
-          <option value="">Selecione o solicitante</option>
-          <option value="secretaria">Secretária</option>
-          <option value="medico">Médico</option>
-        </select>
-
-        <label>Observações</label>
-        <textarea name="observacoes"></textarea>
-
-        <label>
-          <input type="checkbox" name="reembolso" /> Pagamento via Reembolso
-        </label>
-
-        <label>
-          <input type="checkbox" name="imprimirEtiqueta" /> Imprimir na Etiqueta / Pulseira
-        </label>
-
-        <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 className="campo-de-input">
+            <label>Tipo de atendimento *</label>
+            <input type="text" name="tipoAtendimento" required />
+          </div>
         </div>
 
-        <div className="form-actions">
-          <button type="submit" className="btn-primary">Salvar agendamento</button>
+        <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="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" required />
+            </div>
+          </div>
+
+          <div className="campo-informacoes-atendimento">
+            <div className="campo-de-input">
+              <label>Início *</label>
+              <input type="time" name="inicio" required />
+            </div>
+
+            <div className="campo-de-input">
+              <label>Término *</label>
+              <input type="time" name="termino" required />
+            </div>
+          
+            <div className="campo-de-input">
+              <label>Profissional solicitante</label>
+              <select name="solicitante">
+                <option value="" disabled invisible>Selecione o solicitante</option>
+                <option value="secretaria">Secretária</option>
+                <option value="medico">Médico</option>
+              </select>
+            </div>
+          </div>
+      </section>
+
+      <div className="campo-de-input">
+        <label>Observações</label>
+        <textarea name="observacoes" rows="4" cols="1"></textarea>
+      </div>
+    </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>
diff --git a/src/components/AgendarConsulta/style/styleagendamentos.css b/src/components/AgendarConsulta/style/formagendamentos.css
similarity index 74%
rename from src/components/AgendarConsulta/style/styleagendamentos.css
rename to src/components/AgendarConsulta/style/formagendamentos.css
index bcdc8dbc..d41eb619 100644
--- a/src/components/AgendarConsulta/style/styleagendamentos.css
+++ b/src/components/AgendarConsulta/style/formagendamentos.css
@@ -1,5 +1,5 @@
 .form-container {
-  max-width: 800px;
+  /*max-width: 800px;*/
   margin: 20px auto;
   padding: 25px;
   background: #f5f8ff;
@@ -106,3 +106,40 @@
   font-size: small;
 }
 
+.campos-informacoes-paciente,.campo-informacoes-atendimento{
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+}
+
+.campo-de-input{
+  display: flex;
+  flex-direction: column;
+  
+}
+
+
+#informacoes-atendimento-segunda-linha{
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  gap: rem;
+}
+
+textarea{
+  width: 30px;
+  resize: both;
+  
+}
+
+#informacoes-atendimento-segunda-linha-esquerda input{
+  width: 200px;
+}
+
+input[type='text']{
+  width: 600px;
+}
+
+select[name='solicitante']{
+  width: 300px;
+}
\ No newline at end of file
diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css b/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css
index d2692d38..e890b6f9 100644
--- a/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css
+++ b/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css
@@ -80,3 +80,7 @@
 .tabelasemanal tr:hover {
   background-color: #f1f1f1 !important;
 }
+
+tr{
+  width: 1000px;
+}
\ No newline at end of file
diff --git a/src/pages/DoctorDetails.jsx b/src/pages/DoctorDetails.jsx
index 25a26e4e..c8b77268 100644
--- a/src/pages/DoctorDetails.jsx
+++ b/src/pages/DoctorDetails.jsx
@@ -111,7 +111,7 @@ const Details = ({ patientID, setCurrentPage }) => {
         </div>
         <div className="col-md-6 mb-3">
           <label className="font-extrabold">Anexos do Médico:</label>
-          <p>{paciente.anexos || "-"}</p>
+          <p>{ "-"}</p>
         </div>
       </div>
       </div>