implementação dos horarios

src/components/doctors/DoctorForm.jsx

@@ -1,30 +1,31 @@
-import React, { useState, useRef } from 'react';
-import { Link, useNavigate, useLocation } from 'react-router-dom';
-import './DoctorForm.css';
+import React, { useState, useRef } from "react";
+import { Link, useNavigate, useLocation } from "react-router-dom";
+import "./DoctorForm.css";
+import HorariosDisponibilidade from "../doctors/HorariosDisponibilidade";
 
 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{2})(\d)/, '$1) $2')
-      .replace(/(\d)(\d{4})/, '$1 $2')
-      .replace(/(\d{4})(\d{4})/, '$1-$2');
+      .replace(/(\d)/, "($1")
+      .replace(/(\d{2})(\d)/, "$1) $2")
+      .replace(/(\d)(\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})$/, '$1-$2');
+      .replace(/(\d{3})(\d)/, "$1.$2")
+      .replace(/(\d{3})(\d)/, "$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;
 
@@ -44,13 +45,16 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     resto = 11 - (soma % 11);
     let digito2 = resto === 10 || resto === 11 ? 0 : resto;
 
-    return digito1 === parseInt(cpfLimpo.charAt(9)) && digito2 === parseInt(cpfLimpo.charAt(10));
+    return (
+      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);
@@ -63,12 +67,13 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     dadosPessoais: true,
     contato: false,
     endereco: false,
+    horarios: false,
   });
 
   const handleToggleCollapse = (section) => {
-    setCollapsedSections(prevState => ({
+    setCollapsedSections((prevState) => ({
       ...prevState,
-      [section]: !prevState[section]
+      [section]: !prevState[section],
     }));
   };
 
@@ -76,50 +81,49 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     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) {
-      setCpfError('');
+    if (name === "cpf" && cpfError) {
+      setCpfError("");
     }
 
-    if (type === 'checkbox') {
-      setFormData(prev => ({ ...prev, [name]: checked }));
-    } else if (type === 'file') {
-      setFormData(prev => ({ ...prev, [name]: files[0] }));
+    if (type === "checkbox") {
+      setFormData((prev) => ({ ...prev, [name]: checked }));
+    } else if (type === "file") {
+      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/`);
@@ -127,18 +131,18 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         if (!data.erro) {
           setFormData((prev) => ({
             ...prev,
-            street: data.logradouro || '',
-            neighborhood: data.bairro || '',
-            city: data.localidade || '',
-            state: data.uf || ''
+            street: data.logradouro || "",
+            neighborhood: data.bairro || "",
+            city: data.localidade || "",
+            state: data.uf || "",
           }));
         } else {
           setShowRequiredModal(true);
-          setEmptyFields(['cep']);
+          setEmptyFields(["cep"]);
         }
       } catch (error) {
         setShowRequiredModal(true);
-        setEmptyFields(['cep']);
+        setEmptyFields(["cep"]);
       }
     }
   };
@@ -147,29 +151,29 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     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;
@@ -178,18 +182,19 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     setTimeout(() => {
       if (fieldRef.current) {
         fieldRef.current.scrollIntoView({
-          behavior: 'smooth', 
-          block: 'center' 
+          behavior: "smooth",
+          block: "center",
         });
         fieldRef.current.focus();
 
-        fieldRef.current.style.border = '2px solid #dc3545';
-        fieldRef.current.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
+        fieldRef.current.style.border = "2px solid #dc3545";
+        fieldRef.current.style.boxShadow =
+          "0 0 0 0.2rem rgba(220, 53, 69, 0.25)";
 
         setTimeout(() => {
           if (fieldRef.current) {
-            fieldRef.current.style.border = '';
-            fieldRef.current.style.boxShadow = '';
+            fieldRef.current.style.border = "";
+            fieldRef.current.style.boxShadow = "";
           }
         }, 3000);
       }
@@ -198,12 +203,12 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
 
   const handleSubmit = async () => {
     const missingFields = [];
-    if (!formData.full_name) missingFields.push('full_name');
-    if (!formData.cpf) missingFields.push('cpf');
-    if (!formData.email) missingFields.push('email');
-    if (!formData.phone_mobile) missingFields.push('phone_mobile');
-    if (!formData.crm_uf) missingFields.push('crm_uf');
-    if (!formData.crm) missingFields.push('crm');
+    if (!formData.full_name) missingFields.push("full_name");
+    if (!formData.cpf) missingFields.push("cpf");
+    if (!formData.email) missingFields.push("email");
+    if (!formData.phone_mobile) missingFields.push("phone_mobile");
+    if (!formData.crm_uf) missingFields.push("crm_uf");
+    if (!formData.crm) missingFields.push("crm");
 
     if (missingFields.length > 0) {
       setEmptyFields(missingFields);
@@ -217,20 +222,20 @@ 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']);
-      setCpfError('CPF deve ter 11 dígitos');
-      setTimeout(() => scrollToEmptyField('cpf'), 500);
+      setEmptyFields(["cpf"]);
+      setCpfError("CPF deve ter 11 dígitos");
+      setTimeout(() => scrollToEmptyField("cpf"), 500);
       return;
     }
 
     if (!validarCPF(formData.cpf)) {
       setShowRequiredModal(true);
-      setEmptyFields(['cpf']);
-      setCpfError('CPF inválido');
-      setTimeout(() => scrollToEmptyField('cpf'), 500);
+      setEmptyFields(["cpf"]);
+      setCpfError("CPF inválido");
+      setTimeout(() => scrollToEmptyField("cpf"), 500);
       return;
     }
 
@@ -252,28 +257,33 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
           <div className="modal-content">
             <div className="modal-header">
               <h5 className="modal-title">Atenção</h5>
-              <button
-                onClick={handleModalClose}
-                className="modal-close-btn"
-              >
+              <button onClick={handleModalClose} className="modal-close-btn">
                 ×
               </button>
             </div>
 
             <div className="modal-body">
               <p className="modal-message">
-                {cpfError ? 'Problema com o CPF:' : 'Por favor, preencha:'}
+                {cpfError ? "Problema com o CPF:" : "Por favor, preencha:"}
               </p>
               <div className="modal-list">
                 {cpfError ? (
                   <p className="modal-list-item">{cpfError}</p>
                 ) : (
                   <>
-                    {!formData.full_name && <p className="modal-list-item">- Nome</p>}
+                    {!formData.full_name && (
+                      <p className="modal-list-item">- Nome</p>
+                    )}
                     {!formData.cpf && <p className="modal-list-item">- CPF</p>}
-                    {!formData.email && <p className="modal-list-item">- Email</p>}
-                    {!formData.phone_mobile && <p className="modal-list-item">- Telefone</p>}
-                    {!formData.crm_uf && <p className="modal-list-item">- Estado do CRM</p>}
+                    {!formData.email && (
+                      <p className="modal-list-item">- Email</p>
+                    )}
+                    {!formData.phone_mobile && (
+                      <p className="modal-list-item">- Telefone</p>
+                    )}
+                    {!formData.crm_uf && (
+                      <p className="modal-list-item">- Estado do CRM</p>
+                    )}
                     {!formData.crm && <p className="modal-list-item">- CRM</p>}
                   </>
                 )}
@@ -281,10 +291,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
             </div>
 
             <div className="modal-footer">
-              <button
-                onClick={handleModalClose}
-                className="modal-confirm-btn"
-              >
+              <button onClick={handleModalClose} className="modal-confirm-btn">
                 Fechar
               </button>
             </div>
@@ -297,13 +304,20 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
 
         {/* DADOS PESSOAIS */}
         <div className="form-section">
-          <h4 className="section-header" onClick={() => handleToggleCollapse('dadosPessoais')}>
+          <h4
+            className="section-header"
+            onClick={() => handleToggleCollapse("dadosPessoais")}
+          >
             Dados Pessoais
             <span className="section-toggle">
-              {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 avatar-container">
                 <div className="me-3">
@@ -314,13 +328,16 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                       className="avatar-image"
                     />
                   ) : (
-                    <div className="avatar-placeholder">
-                      &#x2624;
-                    </div>
+                    <div className="avatar-placeholder">&#x2624;</div>
                   )}
                 </div>
                 <div>
-                  <label htmlFor="foto-input" className="btn btn-primary file-input-label">Carregar Foto</label>
+                  <label
+                    htmlFor="foto-input"
+                    className="btn btn-primary file-input-label"
+                  >
+                    Carregar Foto
+                  </label>
                   <input
                     type="file"
                     className="form-control d-none"
@@ -329,7 +346,11 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                     onChange={handleChange}
                     accept="image/*"
                   />
-                  {formData.foto && <span className="ms-2 form-label">{formData.foto.name}</span>}
+                  {formData.foto && (
+                    <span className="ms-2 form-label">
+                      {formData.foto.name}
+                    </span>
+                  )}
                 </div>
               </div>
 
@@ -340,26 +361,39 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   type="text"
                   className="form-control form-control-custom"
                   name="full_name"
-                  value={formData.full_name || ''} 
+                  value={formData.full_name || ""}
                   onChange={handleChange}
                 />
               </div>
               <div className="col-md-6 mb-3">
                 <label className="form-label">Data de nascimento:</label>
-                <input type="date" className="form-control form-control-custom" name="birth_date" value={formData.birth_date || ''} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
+                <input
+                  type="date"
+                  className="form-control form-control-custom"
+                  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 className="form-label">CPF: *</label>
                 <input
                   ref={cpfRef}
                   type="text"
-                  className={`form-control form-control-custom ${cpfError ? 'is-invalid' : ''}`}
+                  className={`form-control form-control-custom ${
+                    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>
                 )}
@@ -371,7 +405,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   ref={crmUfRef}
                   className="form-control form-control-custom"
                   name="crm_uf"
-                  value={formData.crm_uf || ''} 
+                  value={formData.crm_uf || ""}
                   onChange={handleChange}
                 >
                   <option value="">Selecione</option>
@@ -411,22 +445,31 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   type="text"
                   className="form-control form-control-custom"
                   name="crm"
-                  value={formData.crm || ''} 
+                  value={formData.crm || ""}
                   onChange={handleChange}
                 />
               </div>
 
               <div className="col-md-6 mb-3">
                 <label className="form-label">Especialização:</label>
-                <select className="form-control form-control-custom" name="specialty" value={formData.specialty || ''} onChange={handleChange}>
+                <select
+                  className="form-control form-control-custom"
+                  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>
@@ -441,13 +484,18 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
 
         {/* CONTATO */}
         <div className="form-section">
-          <h4 className="section-header" onClick={() => handleToggleCollapse('contato')}>
+          <h4
+            className="section-header"
+            onClick={() => handleToggleCollapse("contato")}
+          >
             Contato
             <span className="section-toggle">
-              {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 className="form-label">Email: *</label>
@@ -456,7 +504,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   type="email"
                   className="form-control form-control-custom"
                   name="email"
-                  value={formData.email || ''} 
+                  value={formData.email || ""}
                   onChange={handleChange}
                 />
               </div>
@@ -467,13 +515,19 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   type="text"
                   className="form-control form-control-custom"
                   name="phone_mobile"
-                  value={formData.phone_mobile || ''} 
+                  value={formData.phone_mobile || ""}
                   onChange={handleChange}
                 />
               </div>
               <div className="col-md-6 mb-3">
                 <label className="form-label">Telefone 2:</label>
-                <input type="text" className="form-control form-control-custom" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control form-control-custom"
+                  name="phone2"
+                  value={formData.phone2 || ""}
+                  onChange={handleChange}
+                />
               </div>
             </div>
           </div>
@@ -481,46 +535,119 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
 
         {/* ENDEREÇO */}
         <div className="form-section">
-          <h4 className="section-header" onClick={() => handleToggleCollapse('endereco')}>
+          <h4
+            className="section-header"
+            onClick={() => handleToggleCollapse("endereco")}
+          >
             Endereço
             <span className="section-toggle">
-              {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 className="form-label">CEP:</label>
-                <input type="text" className="form-control form-control-custom" name="cep" value={formData.cep || ''} onChange={handleChange} onBlur={handleCepBlur} />
+                <input
+                  type="text"
+                  className="form-control form-control-custom"
+                  name="cep"
+                  value={formData.cep || ""}
+                  onChange={handleChange}
+                  onBlur={handleCepBlur}
+                />
               </div>
               <div className="col-md-8 mb-3">
                 <label className="form-label">Rua:</label>
-                <input type="text" className="form-control form-control-custom" name="street" value={formData.street || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control form-control-custom"
+                  name="street"
+                  value={formData.street || ""}
+                  onChange={handleChange}
+                />
               </div>
               <div className="col-md-6 mb-3">
                 <label className="form-label">Bairro:</label>
-                <input type="text" className="form-control form-control-custom" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control form-control-custom"
+                  name="neighborhood"
+                  value={formData.neighborhood || ""}
+                  onChange={handleChange}
+                />
               </div>
               <div className="col-md-4 mb-3">
                 <label className="form-label">Cidade:</label>
-                <input type="text" className="form-control form-control-custom" name="city" value={formData.city || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control form-control-custom"
+                  name="city"
+                  value={formData.city || ""}
+                  onChange={handleChange}
+                />
               </div>
               <div className="col-md-2 mb-3">
                 <label className="form-label">Estado:</label>
-                <input type="text" className="form-control form-control-custom" name="state" value={formData.state || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control form-control-custom"
+                  name="state"
+                  value={formData.state || ""}
+                  onChange={handleChange}
+                />
               </div>
               <div className="col-md-4 mb-3">
                 <label className="form-label">Número:</label>
-                <input type="text" className="form-control form-control-custom" name="number" value={formData.number || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control form-control-custom"
+                  name="number"
+                  value={formData.number || ""}
+                  onChange={handleChange}
+                />
               </div>
               <div className="col-md-8 mb-3">
                 <label className="form-label">Complemento:</label>
-                <input type="text" className="form-control form-control-custom" name="complement" value={formData.complement || ''} onChange={handleChange} />
+                <input
+                  type="text"
+                  className="form-control form-control-custom"
+                  name="complement"
+                  value={formData.complement || ""}
+                  onChange={handleChange}
+                />
               </div>
             </div>
           </div>
         </div>
 
+        {/* HORÁRIOS */}
+              <div className="form-section">
+                <h4
+                  className="section-header"
+                  onClick={() => handleToggleCollapse("horarios")}
+                >
+                  Horários
+                  <span className="section-toggle">
+                    {collapsedSections.horarios ? "▲" : "▼"}
+                  </span>
+                </h4>
+
+                <div className={`collapse${collapsedSections.horarios ? " show" : ""}`}>
+                  <HorariosDisponibilidade
+                    onChange={(dados) => {
+                      console.log("Disponibilidades atualizadas:", dados);
+                      // Se quiser salvar no formData:
+                      // setFormData(prev => ({ ...prev, disponibilidades: dados }));
+                    }}
+                  />
+                </div>
+              </div>
+
+              </div>
+
         {/* BOTÕES DE AÇÃO */}
         <div className="actions-container">
           <button
@@ -528,16 +655,13 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
             onClick={handleSubmit}
             disabled={isLoading}
           >
-            {isLoading ? 'Salvando...' : 'Salvar Médico'}
+            {isLoading ? "Salvando..." : "Salvar Médico"}
           </button>
 
           <Link to={`/${location.pathname.split("/")[1]}/medicos`}>
-            <button className="btn btn-light btn-cancel">
-              Cancelar
-            </button>
+            <button className="btn btn-light btn-cancel">Cancelar</button>
           </Link>
         </div>
-      </div>
     </>
   );
 }

src/components/doctors/HorariosDisponibilidade.jsx

@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+
+const diasDaSemana = [
+  "segunda",
+  "terca",
+  "quarta",
+  "quinta",
+  "sexta",
+  "sabado",
+  "domingo"
+];
+
+export default function HorariosDisponibilidade({ onChange }) {
+  const [disponibilidades, setDisponibilidades] = useState(
+    diasDaSemana.map(dia => ({
+      weekday: dia,
+      slots: [{ start_time: "09:00", end_time: "17:00" }],
+      ativo: false,
+    }))
+  );
+
+  function handleToggleDia(index) {
+    const updated = [...disponibilidades];
+    updated[index].ativo = !updated[index].ativo;
+    setDisponibilidades(updated);
+    onChange?.(updated);
+  }
+
+  function handleSlotChange(indexDia, indexSlot, campo, valor) {
+    const updated = [...disponibilidades];
+    updated[indexDia].slots[indexSlot][campo] = valor;
+    setDisponibilidades(updated);
+    onChange?.(updated);
+  }
+
+  function handleAddSlot(indexDia) {
+    const updated = [...disponibilidades];
+    updated[indexDia].slots.push({ start_time: "", end_time: "" });
+    setDisponibilidades(updated);
+    onChange?.(updated);
+  }
+
+  function handleRemoveSlot(indexDia, indexSlot) {
+    const updated = [...disponibilidades];
+    updated[indexDia].slots.splice(indexSlot, 1);
+    setDisponibilidades(updated);
+    onChange?.(updated);
+  }
+
+  return (
+    <div className="space-y-4">
+      {disponibilidades.map((dia, i) => (
+        <div key={dia.weekday} className="border p-3 rounded-md bg-gray-50">
+          <div className="flex items-center justify-between">
+            <label className="font-semibold capitalize">
+              {dia.weekday}
+            </label>
+            <input
+              type="checkbox"
+              checked={dia.ativo}
+              onChange={() => handleToggleDia(i)}
+            />
+          </div>
+
+          {dia.ativo && (
+            <div className="mt-2 space-y-2">
+              {dia.slots.map((slot, j) => (
+                <div key={j} className="flex gap-2 items-center">
+                  <input
+                    type="time"
+                    value={slot.start_time}
+                    onChange={e => handleSlotChange(i, j, "start_time", e.target.value)}
+                    className="border rounded p-1"
+                  />
+                  <span>até</span>
+                  <input
+                    type="time"
+                    value={slot.end_time}
+                    onChange={e => handleSlotChange(i, j, "end_time", e.target.value)}
+                    className="border rounded p-1"
+                  />
+                  {dia.slots.length > 1 && (
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveSlot(i, j)}
+                      className="text-red-600 hover:underline"
+                    >
+                      Remover
+                    </button>
+                  )}
+                </div>
+              ))}
+              <button
+                type="button"
+                onClick={() => handleAddSlot(i)}
+                className="text-blue-600 hover:underline mt-2"
+              >
+                + Adicionar pausa/bloco
+              </button>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}