disponibilidade no agendamento

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -2,7 +2,11 @@ import InputMask from "react-input-mask";
 import "./style/formagendamentos.css";
 import { useState, useEffect } from "react";
 
-const FormNovaConsulta = ({ onCancel, patientID, profissionalId }) => {
+const FormNovaConsulta = ({ onCancel, patientID }) => {
+  const [horariosDisponiveis, setHorariosDisponiveis] = useState([]);
+  const [carregandoHorarios, setCarregandoHorarios] = useState(false);
+
+  const [isModoEmergencia, setIsModoEmergencia] = useState(false);
   const [selectedFile, setSelectedFile] = useState(null);
   const [anexos, setAnexos] = useState([]);
   const [loadingAnexos, setLoadingAnexos] = useState(false);
@@ -14,11 +18,68 @@ const FormNovaConsulta = ({ onCancel, patientID, profissionalId }) => {
     bebe: false,
     autista: false,
   });
+  const [dadosAtendimento, setDadosAtendimento] = useState({
+    profissional: "",
+    tipoAtendimento: "",
+    unidade: "",
+    dataAtendimento: "",
+    inicio: "",
+    termino: "",
+    solicitante: "",
+    observacoes: "",
+  });
 
-  const [disponibilidades, setDisponibilidades] = useState([]);
+  // Variável de controle para saber se a grade de horário deve ser mostrada
-  const [horarioSelecionado, setHorarioSelecionado] = useState("");
+  const isReadyForSchedule =
+    dadosAtendimento.profissional && dadosAtendimento.dataAtendimento;
+
+  const fetchHorariosDisponiveis = async (professionalId, date) => {
+    if (!isReadyForSchedule || isModoEmergencia) {
+      setHorariosDisponiveis([]);
+      return;
+    }
+
+    setCarregandoHorarios(true);
+    setHorariosDisponiveis([]);
+
+    var myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+
+    const payload = {
+      doctor_id: professionalId,
+      date: date,
+    };
+
+    var requestOptions = {
+      method: "POST",
+      headers: myHeaders,
+      body: JSON.stringify(payload),
+      redirect: "follow",
+    };
+
+    try {
+      const res = await fetch(
+        "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability",
+        requestOptions
+      );
+      const data = await res.json();
+
+      const slots = data.data && Array.isArray(data.data) ? data.data : [];
+
+      setHorariosDisponiveis(slots);
+
+      // Limpa o horário se o que estava selecionado não existe mais na nova grade
+      if (dadosAtendimento.inicio && !slots.includes(dadosAtendimento.inicio)) {
+        setDadosAtendimento((prev) => ({ ...prev, inicio: "", termino: "" }));
+      }
+    } catch (err) {
+      console.error("Erro ao buscar horários disponíveis:", err);
+      setHorariosDisponiveis([]);
+    } finally {
+      setCarregandoHorarios(false);
+    }
+  };
 
-  // Buscar anexos do paciente
   useEffect(() => {
     if (!patientID) return;
 
@@ -40,48 +101,22 @@ const FormNovaConsulta = ({ onCancel, patientID, profissionalId }) => {
     fetchAnexos();
   }, [patientID]);
 
-  // Buscar disponibilidades do médico
   useEffect(() => {
-    if (!profissionalId) return;
+    // Chama a busca apenas se estivermos no modo padrão E tivermos profissional e data
-
+    if (isReadyForSchedule && !isModoEmergencia) {
-    const fetchDisponibilidades = async () => {
+      fetchHorariosDisponiveis(
-      try {
+        dadosAtendimento.profissional,
-        const res = await fetch(
+        dadosAtendimento.dataAtendimento
-          `https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability?doctorId=${profissionalId}`
       );
-        const data = await res.json();
+    } else if (!isReadyForSchedule) {
-        setDisponibilidades(data.data || []);
+      setHorariosDisponiveis([]);
-      } catch (err) {
-        console.error("Erro ao buscar disponibilidades:", err);
     }
-    };
+  }, [
-
+    dadosAtendimento.profissional,
-    fetchDisponibilidades();
+    dadosAtendimento.dataAtendimento,
-  }, [profissionalId]);
+    isModoEmergencia,
-
+    isReadyForSchedule,
-  // Função para criar intervalos de 30 minutos
+  ]);
-  const gerarIntervalos = (inicio, fim) => {
-    const horarios = [];
-    let horaAtual = new Date(`1970-01-01T${inicio}:00`);
-    const horaFim = new Date(`1970-01-01T${fim}:00`);
-
-    while (horaAtual < horaFim) {
-      const proximo = new Date(horaAtual.getTime() + 30 * 60000);
-      if (proximo <= horaFim) {
-        horarios.push(
-          `${horaAtual.toTimeString().slice(0, 5)} - ${proximo
-            .toTimeString()
-            .slice(0, 5)}`
-        );
-      }
-      horaAtual = proximo;
-    }
-    return horarios;
-  };
-
-  const intervalosDisponiveis = disponibilidades.flatMap((disp) =>
-    gerarIntervalos(disp.horarioInicial, disp.horarioFinal)
-  );
 
   const handleUpload = async () => {
     if (!selectedFile) return;
@@ -110,14 +145,20 @@ const FormNovaConsulta = ({ onCancel, patientID, profissionalId }) => {
   };
 
   const handleclickAcessibilidade = (id) => {
-    setAcessibilidade({
+    let resultado = acessibilidade[id];
-      ...acessibilidade,
+
-      [id]: !acessibilidade[id],
+    if (resultado === false) {
-    });
+      setAcessibilidade({ ...acessibilidade, [id]: true });
+      console.log("mudou");
+    } else if (resultado === true) {
+      setAcessibilidade({ ...acessibilidade, [id]: false });
+    }
+    console.log(id);
   };
 
   const FormatCPF = (valor) => {
     const digits = String(valor).replace(/\D/g, "").slice(0, 11);
+    BuscarPacienteExistentePeloCPF(valor);
 
     return digits
       .replace(/(\d{3})(\d)/, "$1.$2")
@@ -134,6 +175,58 @@ const FormNovaConsulta = ({ onCancel, patientID, profissionalId }) => {
       .replace(/(\d{4})(\d{4})/, "$1-$2");
   };
 
+  const BuscarCPFnoBancodeDados = async (cpf) => {
+    var myHeaders = new Headers();
+    myHeaders.append("Authorization", "Bearer <token>");
+    myHeaders.append("Content-Type", "application/json");
+
+    var raw = JSON.stringify({
+      cpf: cpf,
+    });
+
+    var requestOptions = {
+      method: "POST",
+      headers: myHeaders,
+      body: raw,
+      redirect: "follow",
+    };
+
+    const response = await fetch(
+      "https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf",
+      requestOptions
+    );
+    const result = await response.json();
+    return result;
+  };
+
+  const BuscarPacienteExistentePeloCPF = async (value) => {
+    if (isNaN(value[13]) === false && value.length === 14)
+      try {
+        const result = await BuscarCPFnoBancodeDados(value);
+
+        if (result.data.existe === true) {
+          var myHeaders = new Headers();
+          myHeaders.append("Authorization", "Bearer <token>");
+
+          var requestOptions = {
+            method: "GET",
+            headers: myHeaders,
+            redirect: "follow",
+          };
+
+          fetch(
+            "https://mock.apidog.com/m1/1053378-0-default/pacientes/",
+            requestOptions
+          )
+            .then((response) => response.json())
+            .then((result) => setPaciente(result.data))
+            .catch((error) => console.log("error", error));
+        }
+      } catch (error) {
+        console.log("error", error);
+      }
+  };
+
   const handleChange = (e) => {
     const { value, name } = e.target;
 
@@ -158,13 +251,118 @@ const FormNovaConsulta = ({ onCancel, patientID, profissionalId }) => {
     }
   };
 
-  const handleSubmit = (e) => {
+  const handleAtendimentoChange = (e) => {
-    e.preventDefault();
+    const { value, name } = e.target;
+    setDadosAtendimento((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmitExcecao = async () => {
+    console.log(
+      "Modo Emergência Ativado: Tentando criar Exceção com novo endpoint."
+    );
+
+    const {
+      profissional,
+      dataAtendimento,
+      tipoAtendimento,
+      inicio,
+      termino,
+      observacoes,
+    } = dadosAtendimento;
+
+    if (
+      !profissional ||
+      !dataAtendimento ||
+      !tipoAtendimento ||
+      !inicio ||
+      !termino
+    ) {
       alert(
-      `Agendamento salvo! Horário selecionado: ${
+        "Por favor, preencha o Profissional, Data, Tipo e Horários para a exceção."
-        horarioSelecionado || "não selecionado"
+      );
+      return;
+    }
+
+    const payload = {
+      doctor_id: profissional,
+      date: dataAtendimento,
+      start_time: inicio + ":00",
+      end_time: termino + ":00",
+      kind: "liberacao",
+      reason: tipoAtendimento,
+    };
+
+    var myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+
+    var requestOptions = {
+      method: "POST",
+      headers: myHeaders,
+      body: JSON.stringify(payload),
+      redirect: "follow",
+    };
+
+    try {
+      const response = await fetch(
+        "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_exceptions",
+        requestOptions
+      );
+      const result = await response.json();
+
+      if (response.ok || response.status === 201) {
+        console.log("Exceção de emergência criada com sucesso:", result);
+        alert(
+          `Consulta de emergência agendada como exceção! Detalhes: ${JSON.stringify(
+            result
+          )}`
+        );
+      } else {
+        console.error("Erro ao criar exceção de emergência:", result);
+        alert(
+          `Erro ao agendar exceção. Status: ${response.status}. Detalhes: ${
+            result.message || JSON.stringify(result)
           }`
         );
+      }
+    } catch (error) {
+      console.error("Erro na requisição para criar exceção:", error);
+      alert(
+        "Erro de comunicação com o servidor ou formato de resposta inválido."
+      );
+    }
+  };
+
+  const handleSubmitPadrao = () => {
+    if (!isReadyForSchedule) {
+      alert(
+        "Por favor, preencha o Profissional e a Data do Atendimento antes de salvar."
+      );
+      return;
+    }
+    if (
+      !horariosDisponiveis.includes(dadosAtendimento.inicio) ||
+      !horariosDisponiveis.includes(dadosAtendimento.termino)
+    ) {
+      alert(
+        "Por favor, selecione horários válidos dentro da grade do profissional."
+      );
+      return;
+    }
+
+    console.log("Salvando agendamento.");
+    alert("Agendamento salvo!");
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (isModoEmergencia) {
+      handleSubmitExcecao();
+    } else {
+      handleSubmitPadrao();
+    }
   };
 
   return (
@@ -172,14 +370,16 @@ const FormNovaConsulta = ({ onCancel, patientID, profissionalId }) => {
       <form className="form-agendamento" onSubmit={handleSubmit}>
         <h2 className="section-title">Informações do paciente</h2>
 
-        {/* Campos do paciente */}
+        <div
-        <div className="campos-informacoes-paciente">
+          className="campos-informacoes-paciente"
+          id="informacoes-paciente-linha-um"
+        >
           <div className="campo-de-input">
             <label>Nome *</label>
             <input
               type="text"
               name="nome"
-              value={paciente.nome || ""}
+              value={paciente.nome}
               placeholder="Insira o nome do paciente"
               required
               onChange={handleChange}
@@ -188,6 +388,7 @@ const FormNovaConsulta = ({ onCancel, patientID, profissionalId }) => {
 
           <div className="campo-de-input">
             <label>CPF do paciente</label>
+
             <input
               type="text"
               name="cpf"
@@ -195,10 +396,80 @@ const FormNovaConsulta = ({ onCancel, patientID, profissionalId }) => {
               onChange={(e) => (e.target.value = FormatCPF(e.target.value))}
             />
           </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"
+              value={paciente.data_nascimento}
+              required
+              onChange={handleChange}
+            />
+          </div>
+
+          <div className="campo-de-input">
+            <label>Telefone</label>
+            <input
+              type="tel"
+              name="telefone"
+              placeholder="(99) 99999-9999"
+              value={paciente.contato?.telefone1}
+              onChange={handleChange}
+            />
+          </div>
+
+          <div className="campo-de-input">
+            <label>E-mail</label>
+            <input
+              type="email"
+              name="email"
+              placeholder="Email"
+              value={paciente.contato?.email}
+              onChange={handleChange}
+            />
+          </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>
+            <input type="date" name="validade" />
+          </div>
         </div>
 
-        {/* Informações adicionais / anexos */}
         <h3 className="section-subtitle">Informações adicionais</h3>
+
         <label htmlFor="anexo-input" className="btn btn-secondary">
           Adicionar Anexo
         </label>
@@ -228,28 +499,146 @@ const FormNovaConsulta = ({ onCancel, patientID, profissionalId }) => {
             ))
           )}
         </div>
-
-        {/* Informações do atendimento */}
         <h2 className="section-title">Informações do atendimento</h2>
+        <div className="emergencia-toggle-container">
+          <button
+            type="button"
+            className={`btn ${
+              isModoEmergencia ? "btn-danger" : "btn-secondary"
+            }`}
+            onClick={() => setIsModoEmergencia((prev) => !prev)}
+            style={{ marginBottom: "15px" }}
+          >
+            {isModoEmergencia
+              ? "Modo: EMERGÊNCIA Ativo"
+              : "Ativar Modo: Emergência (Exceção)"}
+          </button>
+          {isModoEmergencia && (
+            <p className="alerta-emergencia">
+              ⚠️ As informações de data e horário serão enviadas como uma
+              exceção fora da grade normal.
+            </p>
+          )}
+        </div>
+
+        <div className="icons-container">
+          <div
+            className={`icons-div ${
+              acessibilidade.cadeirante === true ? "acessibilidade-ativado" : ""
+            } `}
+            id="cadeirante"
+            onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}
+          >
+            <span className="material-symbols-outlined icon">accessible</span>
+          </div>
+
+          <div
+            className={`icons-div ${
+              acessibilidade.idoso === true ? "acessibilidade-ativado" : ""
+            }`}
+            id="idoso"
+            onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}
+          >
+            <span className="material-symbols-outlined icon">elderly</span>
+          </div>
+
+          <div
+            className={`icons-div ${
+              acessibilidade.gravida === true ? "acessibilidade-ativado" : ""
+            }`}
+            id="gravida"
+            onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}
+          >
+            <span className="material-symbols-outlined icon">
+              pregnant_woman
+            </span>
+          </div>
+
+          <div
+            className={`icons-div ${
+              acessibilidade.bebe === true ? "acessibilidade-ativado" : ""
+            }`}
+            id="bebe"
+            onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="34"
+              height="34"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="lucide lucide-baby-icon lucide-baby"
+            >
+              <path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5" />
+              <path d="M15 12h.01" />
+              <path d="M19.38 6.813A9 9 0 0 1 20.8 10.2a2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1" />
+              <path d="M9 12h.01" />
+            </svg>
+          </div>
+
+          <div
+            className={`icons-div ${
+              acessibilidade.autista === true ? "acessibilidade-ativado" : ""
+            }`}
+            id="autista"
+            onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="lucide lucide-puzzle-icon lucide-puzzle"
+            >
+              <path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z" />
+            </svg>
+          </div>
+        </div>
 
         <div className="campo-informacoes-atendimento">
           <div className="campo-de-input">
             <label>Nome do profissional *</label>
-            <input type="text" name="profissional" required />
+            {/* INPUT: Nome do profissional (usado para habilitar a busca de horários) */}
+            <input
+              type="text"
+              name="profissional"
+              required
+              value={dadosAtendimento.profissional}
+              onChange={handleAtendimentoChange}
+            />
           </div>
-
           <div className="campo-de-input">
             <label>Tipo de atendimento *</label>
-            <input type="text" name="tipoAtendimento" required />
+            <input
+              type="text"
+              name="tipoAtendimento"
+              required
+              value={dadosAtendimento.tipoAtendimento}
+              onChange={handleAtendimentoChange}
+            />
           </div>
         </div>
 
-        {/* Seção de datas e horários */}
+        <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" required>
+                <select
-              <option value="" disabled selected>
+                  name="unidade"
+                  value={dadosAtendimento.unidade}
+                  onChange={handleAtendimentoChange}
+                >
+                  <option value="" disabled invisible selected>
                     Selecione a unidade
                   </option>
                   <option value="centro">
@@ -261,30 +650,150 @@ const FormNovaConsulta = ({ onCancel, patientID, profissionalId }) => {
 
               <div className="campo-de-input">
                 <label>Data *</label>
-            <input type="date" name="dataAtendimento" required />
+                {/* INPUT: Data de Atendimento (usada para habilitar a busca de horários) */}
+                <input
+                  type="date"
+                  name="dataAtendimento"
+                  required
+                  value={dadosAtendimento.dataAtendimento}
+                  onChange={handleAtendimentoChange}
+                />
+              </div>
+            </div>
+
+            <div className="campo-informacoes-atendimento">
+              {isModoEmergencia ? (
+                // MODO EMERGÊNCIA: Input type="time" simples, sem restrição
+                <>
+                  <div className="campo-de-input">
+                    <label>Início *</label>
+                    <input
+                      type="time"
+                      name="inicio"
+                      required
+                      value={dadosAtendimento.inicio}
+                      onChange={handleAtendimentoChange}
+                    />
+                  </div>
+                  <div className="campo-de-input">
+                    <label>Término *</label>
+                    <input
+                      type="time"
+                      name="termino"
+                      required
+                      value={dadosAtendimento.termino}
+                      onChange={handleAtendimentoChange}
+                    />
+                  </div>
+                </>
+              ) : // MODO PADRÃO
+              isReadyForSchedule ? (
+                // ESTADO 2: Médico e Data ESCOLHIDOS -> Restringe para grade (SELECT)
+                <>
+                  <div className="campo-de-input">
+                    <label>Início *</label>
+                    {carregandoHorarios ? (
+                      <select disabled>
+                        <option>Carregando horários...</option>
+                      </select>
+                    ) : (
+                      <select
+                        name="inicio"
+                        required
+                        value={dadosAtendimento.inicio}
+                        onChange={handleAtendimentoChange}
+                        disabled={horariosDisponiveis.length === 0}
+                      >
+                        <option value="" disabled>
+                          {horariosDisponiveis.length === 0
+                            ? "Nenhum horário disponível"
+                            : "Selecione o horário de início"}
+                        </option>
+                        {horariosDisponiveis.map((slot) => (
+                          <option key={slot} value={slot}>
+                            {slot}
+                          </option>
+                        ))}
+                      </select>
+                    )}
                   </div>
 
                   <div className="campo-de-input">
-            <label>Horário do atendimento *</label>
+                    <label>Término *</label>
                     <select
-              value={horarioSelecionado}
+                      name="termino"
-              onChange={(e) => setHorarioSelecionado(e.target.value)}
                       required
+                      value={dadosAtendimento.termino}
+                      onChange={handleAtendimentoChange}
+                      disabled={horariosDisponiveis.length === 0}
                     >
-              <option value="">-- Selecione um horário --</option>
+                      <option value="" disabled>
-              {intervalosDisponiveis.map((horario, i) => (
+                        Selecione o horário de término
-                <option key={i} value={horario}>
+                      </option>
-                  {horario}
+                      {horariosDisponiveis.map((slot) => (
+                        <option key={slot} value={slot}>
+                          {slot}
                         </option>
                       ))}
                     </select>
                   </div>
+                </>
+              ) : (
+                // ESTADO 1: Médico ou Data PENDENTE -> Permite entrada de tempo livre (INPUT TYPE="TIME")
+                <>
+                  <div className="campo-de-input">
+                    <label>Início *</label>
+                    <input
+                      type="time"
+                      name="inicio"
+                      required
+                      value={dadosAtendimento.inicio}
+                      onChange={handleAtendimentoChange}
+                    />
                   </div>
+                  <div className="campo-de-input">
+                    <label>Término *</label>
+                    <input
+                      type="time"
+                      name="termino"
+                      required
+                      value={dadosAtendimento.termino}
+                      onChange={handleAtendimentoChange}
+                    />
+                  </div>
+                </>
+              )}
 
               <div className="campo-de-input">
-          <label>Observações</label>
+                <label>Profissional solicitante</label>
-          <textarea name="observacoes" rows="4" cols="1"></textarea>
+                <select
+                  name="solicitante"
+                  value={dadosAtendimento.solicitante}
+                  onChange={handleAtendimentoChange}
+                >
+                  <option value="" disabled invisible selected>
+                    Selecione o solicitante
+                  </option>
+                  <option value="secretaria">Secretária</option>
+                  <option value="medico">Médico</option>
+                </select>
               </div>
+            </div>
+          </section>
+
+          <section className="informacoes-atendimento-segunda-linha-direita">
+            <div className="campo-de-input">
+              <label>Observações</label>
+              <textarea
+                name="observacoes"
+                rows="4"
+                cols="1"
+                value={dadosAtendimento.observacoes}
+                onChange={handleAtendimentoChange}
+              ></textarea>
+            </div>
+          </section>
+        </section>
 
         <div className="form-actions">
           <button type="submit" className="btn-primary">