começo da estilização do form

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,95 +15,129 @@ const FormNovaConsulta = ({ onCancel }) => {
       <form className="form-agendamento" onSubmit={handleSubmit}>
         <h2 className="section-title">Informações do paciente</h2>
 
-      <div id="informacoes-paciente-primeiralinha">
+      <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>
 
+          <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>
 
+          <div className="campo-de-input">
             <label>RG</label>
             <input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
           </div>
+      </div>
 
+      <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>
 
+          <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>
 
+          <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">
+          <input type="date" name="validade" />
-          {(inputProps) => <input {...inputProps} type="text" name="validade" />}
+        </div>
-        </InputMask>
+      </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>
           
+
+          <div className="campo-de-input">
             <label>Tipo de atendimento *</label>
             <input type="text" name="tipoAtendimento" required />
+          </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="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="">Selecione o solicitante</option>
+                <option value="" disabled invisible>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>
+          </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>

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;
+}

src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css

@@ -80,3 +80,7 @@
 .tabelasemanal tr:hover {
   background-color: #f1f1f1 !important;
 }
+
+tr{
+  width: 1000px;
+}

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>