pMerge branch 'API-Disponibilidade' into ExcecoesFinal

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -2,25 +2,83 @@ import InputMask from "react-input-mask";
 import "./style/formagendamentos.css";
 import { useState, useEffect } from "react";
 
-
 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);
-  const [paciente, setPaciente] = useState({})
+  const [paciente, setPaciente] = useState({});
-  const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false })
+  const [acessibilidade, setAcessibilidade] = useState({
-  const [dadosAtendimento, setDadosAtendimento] = useState({
+    cadeirante: false,
-    profissional: '',
+    idoso: false,
-    tipoAtendimento: '',
+    gravida: false,
-    unidade: '',
+    bebe: false,
-    dataAtendimento: '',
+    autista: false,
-    inicio: '',
-    termino: '',
-    solicitante: '',
-    observacoes: ''
   });
+  const [dadosAtendimento, setDadosAtendimento] = useState({
+    profissional: "",
+    tipoAtendimento: "",
+    unidade: "",
+    dataAtendimento: "",
+    inicio: "",
+    termino: "",
+    solicitante: "",
+    observacoes: "",
+  });
+
+  // Variável de controle para saber se a grade de horário deve ser mostrada
+  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);
+    }
+  };
 
   useEffect(() => {
     if (!patientID) return;
@@ -28,7 +86,9 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
     const fetchAnexos = async () => {
       setLoadingAnexos(true);
       try {
-        const res = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`);
+        const res = await fetch(
+          `https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`
+        );
         const data = await res.json();
         setAnexos(data.data || []);
       } catch (err) {
@@ -41,6 +101,23 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
     fetchAnexos();
   }, [patientID]);
 
+  useEffect(() => {
+    // Chama a busca apenas se estivermos no modo padrão E tivermos profissional e data
+    if (isReadyForSchedule && !isModoEmergencia) {
+      fetchHorariosDisponiveis(
+        dadosAtendimento.profissional,
+        dadosAtendimento.dataAtendimento
+      );
+    } else if (!isReadyForSchedule) {
+      setHorariosDisponiveis([]);
+    }
+  }, [
+    dadosAtendimento.profissional,
+    dadosAtendimento.dataAtendimento,
+    isModoEmergencia,
+    isReadyForSchedule,
+  ]);
+
   const handleUpload = async () => {
     if (!selectedFile) return;
 
@@ -48,13 +125,16 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
     formData.append("file", selectedFile);
 
     try {
-      const res = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`, {
+      const res = await fetch(
+        `https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`,
+        {
           method: "POST",
-        body: formData
+          body: formData,
-      });
+        }
+      );
       if (res.ok) {
         const novoAnexo = await res.json();
-        setAnexos(prev => [...prev, novoAnexo]);
+        setAnexos((prev) => [...prev, novoAnexo]);
         setSelectedFile(null);
       } else {
         console.error("Erro ao enviar anexo");
@@ -64,174 +144,214 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
     }
   };
 
-
   const handleclickAcessibilidade = (id) => {
-    let resultado = acessibilidade[id]
+    let resultado = acessibilidade[id];
 
-    if(resultado === false){ setAcessibilidade({...acessibilidade, [id]:true}); console.log('mudou')}
+    if (resultado === false) {
-
+      setAcessibilidade({ ...acessibilidade, [id]: true });
-    else if(resultado === true){ setAcessibilidade({...acessibilidade, [id]:false})}
+      console.log("mudou");
-    console.log(id)
+    } else if (resultado === true) {
+      setAcessibilidade({ ...acessibilidade, [id]: false });
     }
-
+    console.log(id);
+  };
 
   const FormatCPF = (valor) => {
-    console.log(valor)
+    const digits = String(valor).replace(/\D/g, "").slice(0, 11);
-
+    BuscarPacienteExistentePeloCPF(valor);
-    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
-    BuscarPacienteExistentePeloCPF(valor)
 
     return digits
-      .replace(/(\d{3})(\d)/, '$1.$2')
+      .replace(/(\d{3})(\d)/, "$1.$2")
-      .replace(/(\d{3})(\d)/, '$1.$2')
+      .replace(/(\d{3})(\d)/, "$1.$2")
-      .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
+      .replace(/(\d{3})(\d{1,2})$/, "$1-$2");
-  }
+  };
-
 
   const FormatTelefones = (valor) => {
-    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+    const digits = String(valor).replace(/\D/g, "").slice(0, 11);
     return digits
-      .replace(/(\d)/, '($1')
+      .replace(/(\d)/, "($1")
-      .replace(/(\d{2})(\d)/, '$1) $2' )
+      .replace(/(\d{2})(\d)/, "$1) $2")
-      .replace(/(\d)(\d{4})/, '$1 $2')
+      .replace(/(\d)(\d{4})/, "$1 $2")
-      .replace(/(\d{4})(\d{4})/, '$1-$2')
+      .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
+      cpf: cpf,
     });
 
     var requestOptions = {
-    method: 'POST',
+      method: "POST",
       headers: myHeaders,
       body: raw,
-    redirect: 'follow'
+      redirect: "follow",
     };
 
-   const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions);
+    const response = await fetch(
+      "https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf",
+      requestOptions
+    );
     const result = await response.json();
-  return result
+    return result;
-
+  };
-  
-  }
 
   const BuscarPacienteExistentePeloCPF = async (value) => {
-   
+    if (isNaN(value[13]) === false && value.length === 14)
-   if(isNaN(value[13]) === false && value.length === 14)try {
+      try {
         const result = await BuscarCPFnoBancodeDados(value);
-      console.log("Resultado:", result);
-      
-      if (result.data.existe === true){
 
+        if (result.data.existe === true) {
           var myHeaders = new Headers();
           myHeaders.append("Authorization", "Bearer <token>");
 
           var requestOptions = {
-      method: 'GET',
+            method: "GET",
             headers: myHeaders,
-      redirect: 'follow'
+            redirect: "follow",
           };
 
-    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/", requestOptions)
+          fetch(
-      .then(response => response.json())
+            "https://mock.apidog.com/m1/1053378-0-default/pacientes/",
-      .then(result => setPaciente(result.data))
+            requestOptions
-      .catch(error => console.log('error', error));
+          )
+            .then((response) => response.json())
+            .then((result) => setPaciente(result.data))
+            .catch((error) => console.log("error", error));
         }
-      
-
-
       } catch (error) {
         console.log("error", error);
       }
-    //BuscarCPFnoBancodeDados(value)
+  };
-  }
 
   const handleChange = (e) => {
+    const { value, name } = e.target;
 
-    const {value, name} = e.target;
+    if (name === "email") {
-
+      setPaciente({
-    console.log(value, name)
+        ...paciente,
-
+        contato: {
-    if(name === 'email'){
-      setPaciente({...paciente, contato:{
           ...paciente.contato,
-        email:value
+          email: value,
-      }})
+        },
-
+      });
-    } else if(name === 'telefone'){
+    } else if (name === "telefone") {
-      setPaciente({...paciente, contato:{
+      setPaciente({
+        ...paciente,
+        contato: {
           ...paciente.contato,
-        telefone1:FormatTelefones(value)
+          telefone1: FormatTelefones(value),
-      }})
+        },
-    }
+      });
-    else{
+    } else {
-    setPaciente({...paciente,[name]:value})
+      setPaciente({ ...paciente, [name]: value });
-    }
     }
+  };
 
   const handleAtendimentoChange = (e) => {
     const { value, name } = e.target;
-    setDadosAtendimento(prev => ({
+    setDadosAtendimento((prev) => ({
       ...prev,
-      [name]: value
+      [name]: value,
     }));
   };
 
   const handleSubmitExcecao = async () => {
-    console.log("Modo Emergência Ativado: Tentando criar Exceção com novo endpoint.");
+    console.log(
+      "Modo Emergência Ativado: Tentando criar Exceção com novo endpoint."
+    );
 
-    const { profissional, dataAtendimento, tipoAtendimento, inicio, termino, observacoes } = dadosAtendimento;
+    const {
+      profissional,
+      dataAtendimento,
+      tipoAtendimento,
+      inicio,
+      termino,
+      observacoes,
+    } = dadosAtendimento;
 
-    if (!profissional || !dataAtendimento || !tipoAtendimento || !inicio || !termino) {
+    if (
-        alert("Por favor, preencha o Profissional, Data, Tipo e Horários para a exceção.");
+      !profissional ||
+      !dataAtendimento ||
+      !tipoAtendimento ||
+      !inicio ||
+      !termino
+    ) {
+      alert(
+        "Por favor, preencha o Profissional, Data, Tipo e Horários para a exceção."
+      );
       return;
     }
 
     const payload = {
       doctor_id: profissional,
       date: dataAtendimento,
-      start_time: inicio + ":00", // Adiciona ":00" se o input type="time" retornar apenas HH:MM
+      start_time: inicio + ":00",
-      end_time: termino + ":00",   // Adiciona ":00"
+      end_time: termino + ":00",
-      kind: "liberacao", // Usando 'excecao' ou 'consulta' ao invés de 'bloqueio'
+      kind: "liberacao",
       reason: tipoAtendimento,
-      //observation: observacoes || "Agendamento fora da grade horária padrão.",
     };
 
     var myHeaders = new Headers();
     myHeaders.append("Content-Type", "application/json");
 
     var requestOptions = {
-      method: 'POST',
+      method: "POST",
       headers: myHeaders,
       body: JSON.stringify(payload),
-      redirect: 'follow'
+      redirect: "follow",
     };
 
     try {
-      const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_exceptions", requestOptions);
+      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)}`);
+        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)}`);
+        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.");
+      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!");
   };
@@ -247,49 +367,89 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
 
   return (
     <div className="form-container">
-      
-
       <form className="form-agendamento" onSubmit={handleSubmit}>
         <h2 className="section-title">Informações do paciente</h2>
 
-      <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
+        <div
+          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} placeholder="Insira o nome do paciente" required onChange={handleChange} />
+            <input
+              type="text"
+              name="nome"
+              value={paciente.nome}
+              placeholder="Insira o nome do paciente"
+              required
+              onChange={handleChange}
+            />
           </div>
 
           <div className="campo-de-input">
             <label>CPF do paciente</label>
 
-               <input  type="text" name="cpf"  placeholder="000.000.000-00" onChange={(e) => e.target.value = FormatCPF(e.target.value)}  />
+            <input
-           
+              type="text"
+              name="cpf"
+              placeholder="000.000.000-00"
+              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} />
+            <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="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}/>
+            <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} />
+            <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} />
+            <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="campos-informacoes-paciente"
+          id="informacoes-paciente-linha-tres"
+        >
           <div className="campo-de-input">
             <label>Convênio</label>
             <select name="convenio">
@@ -310,7 +470,9 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
 
         <h3 className="section-subtitle">Informações adicionais</h3>
 
-          <label htmlFor="anexo-input" className="btn btn-secondary">Adicionar Anexo</label>
+        <label htmlFor="anexo-input" className="btn btn-secondary">
+          Adicionar Anexo
+        </label>
         <input
           type="file"
           id="anexo-input"
@@ -318,7 +480,11 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
           onChange={(e) => setSelectedFile(e.target.files[0])}
         />
         {selectedFile && (
-            <button type="button" className="btn btn-primary ms-2" onClick={handleUpload}>
+          <button
+            type="button"
+            className="btn btn-primary ms-2"
+            onClick={handleUpload}
+          >
             Enviar
           </button>
         )}
@@ -337,45 +503,111 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
         <div className="emergencia-toggle-container">
           <button
             type="button"
-                className={`btn ${isModoEmergencia ? 'btn-danger' : 'btn-secondary'}`}
+            className={`btn ${
-                onClick={() => setIsModoEmergencia(prev => !prev)}
+              isModoEmergencia ? "btn-danger" : "btn-secondary"
-                style={{ marginBottom: '15px' }}
+            }`}
+            onClick={() => setIsModoEmergencia((prev) => !prev)}
+            style={{ marginBottom: "15px" }}
           >
-                {isModoEmergencia ? 'Modo: EMERGÊNCIA Ativo' : 'Ativar Modo: Emergência (Exceção)'}
+            {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>
+            <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)}>
+          <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)}>
+          <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)}>
+          <div
-              <span className="material-symbols-outlined icon">pregnant_woman</span> 
+            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)}>
+          <div
-              <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>
+            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)}>
+          <div
-            <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>
+            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: Nome do profissional (usado para habilitar a busca de horários) */}
             <input
               type="text"
               name="profissional"
@@ -398,23 +630,27 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
 
         <section id="informacoes-atendimento-segunda-linha">
           <section id="informacoes-atendimento-segunda-linha-esquerda">
-        
             <div className="campo-informacoes-atendimento">
-              <div className='campo-de-input'>
+              <div className="campo-de-input">
                 <label>Unidade *</label>
                 <select
                   name="unidade"
                   value={dadosAtendimento.unidade}
                   onChange={handleAtendimentoChange}
                 >
-                  <option value="" disabled invisible selected>Selecione a unidade</option>
+                  <option value="" disabled invisible selected>
-                  <option value="centro">Núcleo de Especialidades Integradas</option>
+                    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: Data de Atendimento (usada para habilitar a busca de horários) */}
                 <input
                   type="date"
                   name="dataAtendimento"
@@ -426,6 +662,9 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
             </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
@@ -436,7 +675,6 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
                       onChange={handleAtendimentoChange}
                     />
                   </div>
-
                   <div className="campo-de-input">
                     <label>Término *</label>
                     <input
@@ -447,6 +685,84 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
                       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>Término *</label>
+                    <select
+                      name="termino"
+                      required
+                      value={dadosAtendimento.termino}
+                      onChange={handleAtendimentoChange}
+                      disabled={horariosDisponiveis.length === 0}
+                    >
+                      <option value="" disabled>
+                        Selecione o horário de término
+                      </option>
+                      {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>Profissional solicitante</label>
@@ -455,7 +771,9 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
                   value={dadosAtendimento.solicitante}
                   onChange={handleAtendimentoChange}
                 >
-                  <option value="" disabled invisible selected>Selecione o solicitante</option>
+                  <option value="" disabled invisible selected>
+                    Selecione o solicitante
+                  </option>
                   <option value="secretaria">Secretária</option>
                   <option value="medico">Médico</option>
                 </select>
@@ -464,7 +782,6 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
           </section>
 
           <section className="informacoes-atendimento-segunda-linha-direita">
-
             <div className="campo-de-input">
               <label>Observações</label>
               <textarea
@@ -479,11 +796,14 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
         </section>
 
         <div className="form-actions">
-        <button type="submit" className="btn-primary">Salvar agendamento</button>
+          <button type="submit" className="btn-primary">
-          <button type="button" className="btn-cancel" onClick={onCancel}>Cancelar</button>
+            Salvar agendamento
+          </button>
+          <button type="button" className="btn-cancel" onClick={onCancel}>
+            Cancelar
+          </button>
         </div>
       </form>
-      
     </div>
   );
 };

src/components/doctors/DoctorForm.jsx

@@ -1,37 +1,35 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef } from "react";
-import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from "react-router-dom";
 
 function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const navigate = useNavigate();
   const location = useLocation();
 
   const FormatTelefones = (valor) => {
-    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+    const digits = String(valor).replace(/\D/g, "").slice(0, 11);
     return digits
-      .replace(/(\d)/, '($1')
+      .replace(/(\d)/, "($1")
-      .replace(/(\d{2})(\d)/, '$1) $2')
+      .replace(/(\d{2})(\d)/, "$1) $2")
-      .replace(/(\d)(\d{4})/, '$1 $2')
+      .replace(/(\d)(\d{4})/, "$1 $2")
-      .replace(/(\d{4})(\d{4})/, '$1-$2');
+      .replace(/(\d{4})(\d{4})/, "$1-$2");
   };
 
   const FormatCPF = (valor) => {
-    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+    const digits = String(valor).replace(/\D/g, "").slice(0, 11);
     return digits
-      .replace(/(\d{3})(\d)/, '$1.$2')
+      .replace(/(\d{3})(\d)/, "$1.$2")
-      .replace(/(\d{3})(\d)/, '$1.$2')
+      .replace(/(\d{3})(\d)/, "$1.$2")
-      .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
+      .replace(/(\d{3})(\d{1,2})$/, "$1-$2");
   };
 
- 
   const validarCPF = (cpf) => {
-    const cpfLimpo = cpf.replace(/\D/g, '');
+    const cpfLimpo = cpf.replace(/\D/g, "");
 
     if (cpfLimpo.length !== 11) return false;
     
 
     if (/^(\d)\1+$/.test(cpfLimpo)) return false;
 
-    
     let soma = 0;
     for (let i = 0; i < 9; i++) {
       soma += parseInt(cpfLimpo.charAt(i)) * (10 - i);
@@ -47,14 +45,16 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     resto = 11 - (soma % 11);
     let digito2 = resto === 10 || resto === 11 ? 0 : resto;
 
-  
+    return (
-    return digito1 === parseInt(cpfLimpo.charAt(9)) && digito2 === parseInt(cpfLimpo.charAt(10));
+      digito1 === parseInt(cpfLimpo.charAt(9)) &&
+      digito2 === parseInt(cpfLimpo.charAt(10))
+    );
   };
 
   const [avatarUrl, setAvatarUrl] = useState(null);
   const [showRequiredModal, setShowRequiredModal] = useState(false);
   const [emptyFields, setEmptyFields] = useState([]);
-  const [cpfError, setCpfError] = useState('');
+  const [cpfError, setCpfError] = useState("");
 
   const nomeRef = useRef(null);
   const cpfRef = useRef(null);
@@ -70,63 +70,59 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   });
 
   const handleToggleCollapse = (section) => {
-    setCollapsedSections(prevState => ({
+    setCollapsedSections((prevState) => ({
       ...prevState,
-      [section]: !prevState[section]
+      [section]: !prevState[section],
     }));
   };
 
   const handleChange = (e) => {
     const { name, value, type, checked, files } = e.target;
 
-   
     if (value && emptyFields.includes(name)) {
-      setEmptyFields(prev => prev.filter(field => field !== name));
+      setEmptyFields((prev) => prev.filter((field) => field !== name));
     }
 
-   
+    if (name === "cpf" && cpfError) {
-    if (name === 'cpf' && cpfError) {
+      setCpfError("");
-      setCpfError('');
     }
 
-    if (type === 'checkbox') {
+    if (type === "checkbox") {
-      setFormData(prev => ({ ...prev, [name]: checked }));
+      setFormData((prev) => ({ ...prev, [name]: checked }));
-    } else if (type === 'file') {
+    } else if (type === "file") {
-      setFormData(prev => ({ ...prev, [name]: files[0] }));
+      setFormData((prev) => ({ ...prev, [name]: files[0] }));
 
-      if (name === 'foto' && files[0]) {
+      if (name === "foto" && files[0]) {
         const reader = new FileReader();
         reader.onloadend = () => {
           setAvatarUrl(reader.result);
         };
         reader.readAsDataURL(files[0]);
-      } else if (name === 'foto' && !files[0]) {
+      } else if (name === "foto" && !files[0]) {
         setAvatarUrl(null);
       }
-
+    } else if (name.includes("cpf")) {
-    } else if (name.includes('cpf')) {
       let cpfFormatado = FormatCPF(value);
-      setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
+      setFormData((prev) => ({ ...prev, [name]: cpfFormatado }));
 
-      
+      const cpfLimpo = cpfFormatado.replace(/\D/g, "");
-      const cpfLimpo = cpfFormatado.replace(/\D/g, '');
       if (cpfLimpo.length === 11) {
         if (!validarCPF(cpfFormatado)) {
-          setCpfError('CPF inválido');
+          setCpfError("CPF inválido");
         } else {
-          setCpfError('');
+          setCpfError("");
         }
       }
-    } else if (name.includes('phone')) {
+    } else if (name.includes("phone")) {
       let telefoneFormatado = FormatTelefones(value);
-      setFormData(prev => ({ ...prev, [name]: telefoneFormatado }));
+      setFormData((prev) => ({ ...prev, [name]: telefoneFormatado }));
     } else {
-      setFormData(prev => ({ ...prev, [name]: value }));
+      setFormData((prev) => ({ ...prev, [name]: value }));
     }
   };
 
   const handleCepBlur = async () => {
-    const cep = formData.cep?.replace(/\D/g, '');
+    const cep = formData.cep?.replace(/\D/g, "");
     if (cep && cep.length === 8) {
       try {
         const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
@@ -134,50 +130,49 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         if (!data.erro) {
           setFormData((prev) => ({
             ...prev,
-            street: data.logradouro || '',
+            street: data.logradouro || "",
-            neighborhood: data.bairro || '',
+            neighborhood: data.bairro || "",
-            city: data.localidade || '',
+            city: data.localidade || "",
-            state: data.uf || ''
+            state: data.uf || "",
           }));
         } else {
           setShowRequiredModal(true);
-          setEmptyFields(['cep']);
+          setEmptyFields(["cep"]);
         }
       } catch (error) {
         setShowRequiredModal(true);
-        setEmptyFields(['cep']);
+        setEmptyFields(["cep"]);
       }
     }
   };
 
- 
   const scrollToEmptyField = (fieldName) => {
     let fieldRef = null;
 
     switch (fieldName) {
-      case 'full_name':
+      case "full_name":
         fieldRef = nomeRef;
-        setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
+        setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true }));
         break;
-      case 'cpf':
+      case "cpf":
         fieldRef = cpfRef;
-        setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
+        setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true }));
         break;
-      case 'email':
+      case "email":
         fieldRef = emailRef;
-        setCollapsedSections(prev => ({ ...prev, contato: true }));
+        setCollapsedSections((prev) => ({ ...prev, contato: true }));
         break;
-      case 'phone_mobile':
+      case "phone_mobile":
         fieldRef = telefoneRef;
-        setCollapsedSections(prev => ({ ...prev, contato: true }));
+        setCollapsedSections((prev) => ({ ...prev, contato: true }));
         break;
-      case 'crm_uf':
+      case "crm_uf":
         fieldRef = crmUfRef;
-        setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
+        setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true }));
         break;
-      case 'crm':
+      case "crm":
         fieldRef = crmRef;
-        setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
+        setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true }));
         break;
       default:
         return;
@@ -187,20 +182,19 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     setTimeout(() => {
       if (fieldRef.current) {
         fieldRef.current.scrollIntoView({
-          behavior: 'smooth', 
+          behavior: "smooth",
-          block: 'center' 
+          block: "center",
         });
         fieldRef.current.focus();
 
-  
+        fieldRef.current.style.border = "2px solid #dc3545";
-        fieldRef.current.style.border = '2px solid #dc3545';
+        fieldRef.current.style.boxShadow =
-        fieldRef.current.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
+          "0 0 0 0.2rem rgba(220, 53, 69, 0.25)";
-        
 
         setTimeout(() => {
           if (fieldRef.current) {
-            fieldRef.current.style.border = '';
+            fieldRef.current.style.border = "";
-            fieldRef.current.style.boxShadow = '';
+            fieldRef.current.style.boxShadow = "";
           }
         }, 3000);
       }
@@ -210,18 +204,17 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const handleSubmit = async () => {
 
     const missingFields = [];
-    if (!formData.full_name) missingFields.push('full_name');
+    if (!formData.full_name) missingFields.push("full_name");
-    if (!formData.cpf) missingFields.push('cpf');
+    if (!formData.cpf) missingFields.push("cpf");
-    if (!formData.email) missingFields.push('email');
+    if (!formData.email) missingFields.push("email");
-    if (!formData.phone_mobile) missingFields.push('phone_mobile');
+    if (!formData.phone_mobile) missingFields.push("phone_mobile");
-    if (!formData.crm_uf) missingFields.push('crm_uf');
+    if (!formData.crm_uf) missingFields.push("crm_uf");
-    if (!formData.crm) missingFields.push('crm');
+    if (!formData.crm) missingFields.push("crm");
 
     if (missingFields.length > 0) {
       setEmptyFields(missingFields);
       setShowRequiredModal(true);
 
-  
       setTimeout(() => {
         if (missingFields.length > 0) {
           scrollToEmptyField(missingFields[0]);
@@ -230,26 +223,23 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       return;
     }
 
-   
+    const cpfLimpo = formData.cpf.replace(/\D/g, "");
-    const cpfLimpo = formData.cpf.replace(/\D/g, '');
     if (cpfLimpo.length !== 11) {
       setShowRequiredModal(true);
-      setEmptyFields(['cpf']);
+      setEmptyFields(["cpf"]);
-      setCpfError('CPF deve ter 11 dígitos');
+      setCpfError("CPF deve ter 11 dígitos");
-      setTimeout(() => scrollToEmptyField('cpf'), 500);
+      setTimeout(() => scrollToEmptyField("cpf"), 500);
       return;
     }
 
-   
     if (!validarCPF(formData.cpf)) {
       setShowRequiredModal(true);
-      setEmptyFields(['cpf']);
+      setEmptyFields(["cpf"]);
-      setCpfError('CPF inválido');
+      setCpfError("CPF inválido");
-      setTimeout(() => scrollToEmptyField('cpf'), 500);
+      setTimeout(() => scrollToEmptyField("cpf"), 500);
       return;
     }
 
-  
     try {
       await onSave({ ...formData });
 
@@ -300,7 +290,16 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                 alignItems: "center",
               }}
             >
-              <h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
+              <h5
+                style={{
+                  color: "#fff",
+                  margin: 0,
+                  fontSize: "1.2rem",
+                  fontWeight: "bold",
+                }}
+              >
+                Atenção
+              </h5>
               <button
                 onClick={handleModalClose}
                 style={{
@@ -316,20 +315,109 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
             </div>
 
             <div style={{ padding: "25px 20px" }}>
-              <p style={{ color: "#111", fontSize: "1.1rem", margin: "0 0 15px 0", fontWeight: "bold" }}>
+              <p
-                {cpfError ? 'Problema com o CPF:' : 'Por favor, preencha:'}
+                style={{
+                  color: "#111",
+                  fontSize: "1.1rem",
+                  margin: "0 0 15px 0",
+                  fontWeight: "bold",
+                }}
+              >
+                {cpfError ? "Problema com o CPF:" : "Por favor, preencha:"}
               </p>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginLeft: '10px' }}>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "8px",
+                  marginLeft: "10px",
+                }}
+              >
                 {cpfError ? (
-                  <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>{cpfError}</p>
+                  <p
+                    style={{
+                      color: "#111",
+                      fontSize: "1.1rem",
+                      margin: 0,
+                      fontWeight: "600",
+                    }}
+                  >
+                    {cpfError}
+                  </p>
                 ) : (
                   <>
-                    {!formData.full_name && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Nome</p>}
+                    {!formData.full_name && (
-                    {!formData.cpf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CPF</p>}
+                      <p
-                    {!formData.email && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Email</p>}
+                        style={{
-                    {!formData.phone_mobile && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Telefone</p>}
+                          color: "#111",
-                    {!formData.crm_uf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Estado do CRM</p>}
+                          fontSize: "1.1rem",
-                    {!formData.crm && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CRM</p>}
+                          margin: 0,
+                          fontWeight: "600",
+                        }}
+                      >
+                        - Nome
+                      </p>
+                    )}
+                    {!formData.cpf && (
+                      <p
+                        style={{
+                          color: "#111",
+                          fontSize: "1.1rem",
+                          margin: 0,
+                          fontWeight: "600",
+                        }}
+                      >
+                        - CPF
+                      </p>
+                    )}
+                    {!formData.email && (
+                      <p
+                        style={{
+                          color: "#111",
+                          fontSize: "1.1rem",
+                          margin: 0,
+                          fontWeight: "600",
+                        }}
+                      >
+                        - Email
+                      </p>
+                    )}
+                    {!formData.phone_mobile && (
+                      <p
+                        style={{
+                          color: "#111",
+                          fontSize: "1.1rem",
+                          margin: 0,
+                          fontWeight: "600",
+                        }}
+                      >
+                        - Telefone
+                      </p>
+                    )}
+                    {!formData.crm_uf && (
+                      <p
+                        style={{
+                          color: "#111",
+                          fontSize: "1.1rem",
+                          margin: 0,
+                          fontWeight: "600",
+                        }}
+                      >
+                        - Estado do CRM
+                      </p>
+                    )}
+                    {!formData.crm && (
+                      <p
+                        style={{
+                          color: "#111",
+                          fontSize: "1.1rem",
+                          margin: 0,
+                          fontWeight: "600",
+                        }}
+                      >
+                        - CRM
+                      </p>
+                    )}
                   </>
                 )}
               </div>
@@ -364,18 +452,26 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       )}
 
       <div className="card p-3 shadow-sm">
-        <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
+        <h3 className="mb-4 text-center" style={{ fontSize: "2.5rem" }}>
+          MediConnect
+        </h3>
 
         <div className="mb-5 p-4 border rounded shadow-sm">
-          <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
+          <h4
-            onClick={() => handleToggleCollapse('dadosPessoais')}
+            className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
-            style={{ fontSize: '1.8rem' }}>
+            onClick={() => handleToggleCollapse("dadosPessoais")}
+            style={{ fontSize: "1.8rem" }}
+          >
             Dados Pessoais
             <span className="fs-5">
-              {collapsedSections.dadosPessoais ? '▲' : '▼'}
+              {collapsedSections.dadosPessoais ? "▲" : "▼"}
             </span>
           </h4>
-          <div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
+          <div
+            className={`collapse${
+              collapsedSections.dadosPessoais ? " show" : ""
+            }`}
+          >
             <div className="row mt-3">
               <div className="col-md-6 mb-3 d-flex align-items-center">
                 <div className="me-3">
@@ -383,20 +479,25 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                     <img
                       src={avatarUrl}
                       alt="Avatar do Médico"
-                      style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
+                      style={{
+                        width: "100px",
+                        height: "100px",
+                        borderRadius: "50%",
+                        objectFit: "cover",
+                      }}
                     />
                   ) : (
                     <div
                       style={{
-                        width: '100px',
+                        width: "100px",
-                        height: '100px',
+                        height: "100px",
-                        borderRadius: '50%',
+                        borderRadius: "50%",
-                        backgroundColor: '#e0e0e0',
+                        backgroundColor: "#e0e0e0",
-                        display: 'flex',
+                        display: "flex",
-                        alignItems: 'center',
+                        alignItems: "center",
-                        justifyContent: 'center',
+                        justifyContent: "center",
-                        fontSize: '3.5rem',
+                        fontSize: "3.5rem",
-                        color: '#9e9e9e'
+                        color: "#9e9e9e",
                       }}
                     >
                       &#x2624;
@@ -404,7 +505,13 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   )}
                 </div>
                 <div>
-                  <label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
+                  <label
+                    htmlFor="foto-input"
+                    className="btn btn-primary"
+                    style={{ fontSize: "1rem" }}
+                  >
+                    Carregar Foto
+                  </label>
                   <input
                     type="file"
                     className="form-control d-none"
@@ -413,49 +520,66 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                     onChange={handleChange}
                     accept="image/*"
                   />
-                  {formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
+                  {formData.foto && (
+                    <span className="ms-2" style={{ fontSize: "1rem" }}>
+                      {formData.foto.name}
+                    </span>
+                  )}
                 </div>
               </div>
 
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Nome: *</label>
+                <label style={{ fontSize: "1.1rem" }}>Nome: *</label>
                 <input
                   ref={nomeRef}
                   type="text"
                   className="form-control"
                   name="full_name"
-                  value={formData.full_name || ''} 
+                  value={formData.full_name || ""}
                   onChange={handleChange}
                 />
               </div>
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Data de nascimento:</label>
+                <label style={{ fontSize: "1.1rem" }}>
-                <input type="date" className="form-control" name="birth_date" value={formData.birth_date || ''} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
+                  Data de nascimento:
+                </label>
+                <input
+                  type="date"
+                  className="form-control"
+                  name="birth_date"
+                  value={formData.birth_date || ""}
+                  onChange={handleChange}
+                  min="1900-01-01"
+                  max="2025-09-24"
+                />
               </div>
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>CPF: *</label>
+                <label style={{ fontSize: "1.1rem" }}>CPF: *</label>
                 <input
                   ref={cpfRef}
                   type="text"
-                  className={`form-control ${cpfError ? 'is-invalid' : ''}`}
+                  className={`form-control ${cpfError ? "is-invalid" : ""}`}
                   name="cpf"
-                  value={formData.cpf || ''} 
+                  value={formData.cpf || ""}
                   onChange={handleChange}
                 />
                 {cpfError && (
-                  <div className="invalid-feedback" style={{ display: 'block' }}>
+                  <div
+                    className="invalid-feedback"
+                    style={{ display: "block" }}
+                  >
                     {cpfError}
                   </div>
                 )}
               </div>
 
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Estado do CRM: *</label>
+                <label style={{ fontSize: "1.1rem" }}>Estado do CRM: *</label>
                 <select
                   ref={crmUfRef}
                   className="form-control"
                   name="crm_uf"
-                  value={formData.crm_uf || ''} 
+                  value={formData.crm_uf || ""}
                   onChange={handleChange}
                 >
                   <option value="">Selecione</option>
@@ -489,28 +613,37 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </div>
 
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>CRM: *</label>
+                <label style={{ fontSize: "1.1rem" }}>CRM: *</label>
                 <input
                   ref={crmRef}
                   type="text"
                   className="form-control"
                   name="crm"
-                  value={formData.crm || ''} 
+                  value={formData.crm || ""}
                   onChange={handleChange}
                 />
               </div>
 
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Especialização:</label>
+                <label style={{ fontSize: "1.1rem" }}>Especialização:</label>
-                <select className="form-control" name="specialty" value={formData.specialty || ''} onChange={handleChange}>
+                <select
+                  className="form-control"
+                  name="specialty"
+                  value={formData.specialty || ""}
+                  onChange={handleChange}
+                >
                   <option value="">Selecione</option>
-                  <option value="Clínica Geral">Clínica médica (clínico geral)</option>
+                  <option value="Clínica Geral">
+                    Clínica médica (clínico geral)
+                  </option>
                   <option value="Pediatria">Pediatria</option>
                   <option value="Ginecologia">Ginecologia e obstetrícia</option>
                   <option value="Cardiologia">Cardiologia</option>
                   <option value="Ortopedia">Ortopedia e traumatologia</option>
                   <option value="Oftalmologia">Oftalmologia</option>
-                  <option value="Otorrinolaringologia">Otorrinolaringologia</option>
+                  <option value="Otorrinolaringologia">
+                    Otorrinolaringologia
+                  </option>
                   <option value="Dermatologia">Dermatologia</option>
                   <option value="Neurologia">Neurologia</option>
                   <option value="Psiquiatria">Psiquiatria</option>
@@ -524,103 +657,187 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         </div>
 
         <div className="mb-5 p-4 border rounded shadow-sm">
-          <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
+          <h4
-            onClick={() => handleToggleCollapse('contato')}
+            className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
-            style={{ fontSize: '1.8rem' }}>
+            onClick={() => handleToggleCollapse("contato")}
+            style={{ fontSize: "1.8rem" }}
+          >
             Contato
             <span className="fs-5">
-              {collapsedSections.contato ? '▲' : '▼'}
+              {collapsedSections.contato ? "▲" : "▼"}
             </span>
           </h4>
-          <div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
+          <div
+            className={`collapse${collapsedSections.contato ? " show" : ""}`}
+          >
             <div className="row mt-3">
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Email: *</label>
+                <label style={{ fontSize: "1.1rem" }}>Email: *</label>
                 <input
                   ref={emailRef}
                   type="email"
                   className="form-control"
                   name="email"
-                  value={formData.email || ''} 
+                  value={formData.email || ""}
                   onChange={handleChange}
                 />
               </div>
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
+                <label style={{ fontSize: "1.1rem" }}>Telefone: *</label>
                 <input
                   ref={telefoneRef}
                   type="text"
                   className="form-control"
                   name="phone_mobile"
-                  value={formData.phone_mobile || ''} 
+                  value={formData.phone_mobile || ""}
                   onChange={handleChange}
                 />
               </div>
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
+                <label style={{ fontSize: "1.1rem" }}>Telefone 2:</label>
-                <input type="text" className="form-control" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control"
+                  name="phone2"
+                  value={formData.phone2 || ""}
+                  onChange={handleChange}
+                />
               </div>
             </div>
           </div>
         </div>
 
         <div className="mb-5 p-4 border rounded shadow-sm">
-          <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
+          <h4
-            onClick={() => handleToggleCollapse('endereco')}
+            className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
-            style={{ fontSize: '1.8rem' }}>
+            onClick={() => handleToggleCollapse("endereco")}
+            style={{ fontSize: "1.8rem" }}
+          >
             Endereço
             <span className="fs-5">
-              {collapsedSections.endereco ? '▲' : '▼'}
+              {collapsedSections.endereco ? "▲" : "▼"}
             </span>
           </h4>
-          <div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
+          <div
+            className={`collapse${collapsedSections.endereco ? " show" : ""}`}
+          >
             <div className="row mt-3">
               <div className="col-md-4 mb-3">
                 <label>CEP:</label>
-                <input type="text" className="form-control" name="cep" value={formData.cep || ''} onChange={handleChange} onBlur={handleCepBlur} />
+                <input
+                  type="text"
+                  className="form-control"
+                  name="cep"
+                  value={formData.cep || ""}
+                  onChange={handleChange}
+                  onBlur={handleCepBlur}
+                />
               </div>
               <div className="col-md-8 mb-3">
                 <label>Rua:</label>
-                <input type="text" className="form-control" name="street" value={formData.street || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control"
+                  name="street"
+                  value={formData.street || ""}
+                  onChange={handleChange}
+                />
               </div>
               <div className="col-md-6 mb-3">
                 <label>Bairro:</label>
-                <input type="text" className="form-control" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control"
+                  name="neighborhood"
+                  value={formData.neighborhood || ""}
+                  onChange={handleChange}
+                />
               </div>
               <div className="col-md-4 mb-3">
                 <label>Cidade:</label>
-                <input type="text" className="form-control" name="city" value={formData.city || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control"
+                  name="city"
+                  value={formData.city || ""}
+                  onChange={handleChange}
+                />
               </div>
               <div className="col-md-2 mb-3">
                 <label>Estado:</label>
-                <input type="text" className="form-control" name="state" value={formData.state || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control"
+                  name="state"
+                  value={formData.state || ""}
+                  onChange={handleChange}
+                />
               </div>
               <div className="col-md-4 mb-3">
                 <label>Número:</label>
-                <input type="text" className="form-control" name="number" value={formData.number || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control"
+                  name="number"
+                  value={formData.number || ""}
+                  onChange={handleChange}
+                />
               </div>
               <div className="col-md-8 mb-3">
                 <label>Complemento:</label>
-                <input type="text" className="form-control" name="complement" value={formData.complement || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control"
+                  name="complement"
+                  value={formData.complement || ""}
+                  onChange={handleChange}
+                />
               </div>
             </div>
           </div>
         </div>
+        <div className="mb-5 p-4 border rounded shadow-sm">
+          <h4
+            className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
+            onClick={() => handleToggleCollapse("disponibilidade")}
+            style={{ fontSize: "1.8rem" }}
+          >
+            Disponibilidade Semanal
+            <span className="fs-5">
+              {collapsedSections.disponibilidade ? "▲" : "▼"}
+            </span>
+          </h4>
+          <div
+            className={`collapse${
+              collapsedSections.disponibilidade ? " show" : ""
+            }`}
+          >
+            <WeeklyAvailabilityPicker
+              initialAvailability={formData.availability || {}}
+              onChange={(newAvailability) => {
+                setFormData((prev) => ({
+                  ...prev,
+                  availability: newAvailability,
+                }));
+              }}
+            />
+          </div>
+        </div>
 
         <div className="mt-3 text-center">
           <button
             className="btn btn-success me-3"
             onClick={handleSubmit}
             disabled={isLoading}
-            style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
+            style={{ fontSize: "1.2rem", padding: "0.75rem 1.5rem" }}
           >
-            {isLoading ? 'Salvando...' : 'Salvar Médico'}
+            {isLoading ? "Salvando..." : "Salvar Médico"}
           </button>
 
           <Link to={`/${location.pathname.split("/")[1]}/medicos`}>
             <button
               className="btn btn-light"
-              style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
+              style={{ fontSize: "1.2rem", padding: "0.75rem 1.5rem" }}
             >
               Cancelar
             </button>
@@ -631,4 +848,79 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   );
 }
 
+function WeeklyAvailabilityPicker() {
+  const days = ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"];
+  const [availability, setAvailability] = useState(
+    days.reduce((acc, day) => ({ ...acc, [day]: [] }), {})
+  );
+
+  const handleAddInterval = (day) => {
+    const newIntervals = [...availability[day], { start: "", end: "" }];
+    const newAvailability = { ...availability, [day]: newIntervals };
+    setAvailability(newAvailability);
+  };
+
+  const handleRemoveInterval = (day, index) => {
+    const newIntervals = availability[day].filter((_, i) => i !== index);
+    setAvailability({ ...availability, [day]: newIntervals });
+  };
+
+  const handleTimeChange = (day, index, field, value) => {
+    const newIntervals = availability[day].map((interval, i) =>
+      i === index ? { ...interval, [field]: value } : interval
+    );
+    setAvailability({ ...availability, [day]: newIntervals });
+  };
+
+  const handleSave = () => {
+    const data = [];
+    for (const [day, intervals] of Object.entries(availability)) {
+      intervals.forEach(({ start, end }) => {
+        const dayIndex = days.indexOf(day);
+        data.push({ day: dayIndex, start, end });
+      });
+    }
+
+    fetch("https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    })
+      .then((res) => res.json())
+      .then((res) => console.log("Salvo:", res))
+      .catch((err) => console.error("Erro:", err));
+  };
+
+  return (
+    <div>
+      {days.map((day) => (
+        <div key={day} style={{ marginBottom: "20px" }}>
+          <h5>{day}</h5>
+          {availability[day].map((interval, index) => (
+            <div
+              key={index}
+              style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "5px" }}
+            >
+              <input
+                type="time"
+                value={interval.start}
+                onChange={(e) => handleTimeChange(day, index, "start", e.target.value)}
+              />
+              <span>até</span>
+              <input
+                type="time"
+                value={interval.end}
+                onChange={(e) => handleTimeChange(day, index, "end", e.target.value)}
+              />
+              <button onClick={() => handleRemoveInterval(day, index)}>Remover</button>
+            </div>
+          ))}
+          <button onClick={() => handleAddInterval(day)}>Adicionar intervalo</button>
+        </div>
+      ))}
+      <button onClick={handleSave}>Salvar Disponibilidade</button>
+    </div>
+  );
+}
+
 export default DoctorForm;

src/pages/DoctorCadastroManager.jsx

@@ -44,6 +44,7 @@ function DoctorCadastroManager() {
         number: doctorData.number || null,
         complement: doctorData.complement || null,
         phone2: doctorData.phone2 ? doctorData.phone2.replace(/\D/g, '') : null,
+        availability: doctorData.availability || {},
       };
 
       console.log('Dados limpos para envio:', cleanedData);

src/pages/DoctorEditPage.jsx

@@ -1,77 +1,115 @@
-import React from 'react'
+import React, { useEffect, useState } from "react";
-import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor'
+import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
-import DoctorForm from '../components/doctors/DoctorForm'
+import DoctorForm from "../components/doctors/DoctorForm";
-import { useAuth } from '../components/utils/AuthProvider'
+import { useAuth } from "../components/utils/AuthProvider";
-import {useEffect, useState} from 'react'
+import { useParams } from "react-router-dom";
-import { useParams } from 'react-router-dom'
+import API_KEY from "../components/utils/apiKeys";
-import API_KEY from '../components/utils/apiKeys'
+
 const DoctorEditPage = () => {
-  const {getAuthorizationHeader, isAuthenticated} = useAuth();
+  const { getAuthorizationHeader } = useAuth();
-  const [DoctorToPUT, setDoctorPUT] = useState({})
+  const [DoctorToPUT, setDoctorPUT] = useState({});
+  const [availability, setAvailability] = useState([]);
+  const { id: DoctorID } = useParams();
 
-  const Parametros = useParams()
+  useEffect(() => {
-
+    const authHeader = getAuthorizationHeader();
-  const DoctorID = Parametros.id
-
-useEffect(() => {
-    
-  const authHeader = getAuthorizationHeader()
 
+    // Buscar médico
     GetDoctorByID(DoctorID, authHeader)
-      .then((data) => {
+      .then((data) => setDoctorPUT(data[0]))
-        console.log(data, "médico vindo da API");
+      .catch((err) => console.error(err));
-        setDoctorPUT(data[0])
-        ; // supabase retorna array
-      })
-      .catch((err) => console.error("Erro ao buscar paciente:", err));
 
-    
+    // Buscar disponibilidades
-}, [])
+    const fetchAvailability = async () => {
-  const HandlePutDoctor = async () => {
+      try {
-const authHeader = getAuthorizationHeader()
+        const res = await fetch(
-  
+          `https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability/${DoctorID}`,
-
+          { headers: { apikey: API_KEY, Authorization: authHeader } }
-  var myHeaders = new Headers();
+        );
-  myHeaders.append('apikey', API_KEY)
+        const data = await res.json();
-  myHeaders.append("Authorization", authHeader);
+        setAvailability(data.data || []);
-  myHeaders.append("Content-Type", "application/json");
+      } catch (err) {
-
+        console.error(err);
-  var raw = JSON.stringify(DoctorToPUT);
+      }
-
-  console.log("Enviando médico para atualização:", DoctorToPUT);
-
-  var requestOptions = {
-    method: 'PUT',
-    headers: myHeaders,
-    body: raw,
-    redirect: 'follow'
     };
 
+    fetchAvailability();
+  }, []);
+
+  // Atualizar uma disponibilidade
+  const updateAvailability = async (id, updatedData) => {
+    const authHeader = getAuthorizationHeader();
     try {
-    const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DoctorID}`,requestOptions);    
+      await fetch(
-    console.log(response)
+        `https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability/${id}`,
-     
+        {
-  } catch (error) {
+          method: "PUT",
-    console.error("Erro ao atualizar paciente:", error);
+          headers: {
-    throw error;
+            apikey: API_KEY,
+            Authorization: authHeader,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(updatedData),
         }
-
+      );
+      // atualizar localmente
+      setAvailability((prev) =>
+        prev.map((a) => (a.id === id ? { ...a, ...updatedData } : a))
+      );
+    } catch (err) {
+      console.error(err);
     }
+  };
 
+  // Deletar uma disponibilidade
+  const deleteAvailability = async (id) => {
+    const authHeader = getAuthorizationHeader();
+    try {
+      await fetch(
+        `https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability/${id}`,
+        {
+          method: "DELETE",
+          headers: { apikey: API_KEY, Authorization: authHeader },
+        }
+      );
+      setAvailability((prev) => prev.filter((a) => a.id !== id));
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const HandlePutDoctor = async () => {
+    const authHeader = getAuthorizationHeader();
+    try {
+      await fetch(
+        `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DoctorID}`,
+        {
+          method: "PUT",
+          headers: {
+            apikey: API_KEY,
+            Authorization: authHeader,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(DoctorToPUT),
+        }
+      );
+    } catch (err) {
+      console.error(err);
+    }
+  };
 
   return (
     <div>
-
       <DoctorForm
         onSave={HandlePutDoctor}
-    
         formData={DoctorToPUT}
         setFormData={setDoctorPUT}
-    
+        availability={availability}
+        updateAvailability={updateAvailability}
+        deleteAvailability={deleteAvailability}
       />
-    
     </div>
-  )
+  );
-}
+};
 
-export default DoctorEditPage
+export default DoctorEditPage;