730 lines
24 KiB
JavaScript
730 lines
24 KiB
JavaScript
import React, { useState, useRef, useCallback } from "react";
|
||
import { Link, useNavigate, useLocation } from "react-router-dom";
|
||
import "./DoctorForm.css";
|
||
import HorariosDisponibilidade from "../doctors/HorariosDisponibilidade";
|
||
|
||
const ENDPOINT_AVAILABILITY =
|
||
"https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability";
|
||
|
||
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);
|
||
return digits
|
||
.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);
|
||
return digits
|
||
.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, "");
|
||
|
||
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);
|
||
}
|
||
let resto = 11 - (soma % 11);
|
||
let digito1 = resto === 10 || resto === 11 ? 0 : resto;
|
||
|
||
soma = 0;
|
||
for (let i = 0; i < 10; i++) {
|
||
soma += parseInt(cpfLimpo.charAt(i)) * (11 - i);
|
||
}
|
||
resto = 11 - (soma % 11);
|
||
let digito2 = resto === 10 || resto === 11 ? 0 : resto;
|
||
|
||
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 nomeRef = useRef(null);
|
||
const cpfRef = useRef(null);
|
||
const emailRef = useRef(null);
|
||
const telefoneRef = useRef(null);
|
||
const crmUfRef = useRef(null);
|
||
const crmRef = useRef(null);
|
||
|
||
const [collapsedSections, setCollapsedSections] = useState({
|
||
dadosPessoais: true,
|
||
contato: false,
|
||
endereco: false,
|
||
horarios: false,
|
||
});
|
||
|
||
const handleToggleCollapse = (section) => {
|
||
setCollapsedSections((prevState) => ({
|
||
...prevState,
|
||
[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));
|
||
}
|
||
|
||
if (name === "cpf" && cpfError) {
|
||
setCpfError("");
|
||
}
|
||
|
||
if (type === "checkbox") {
|
||
setFormData((prev) => ({ ...prev, [name]: checked }));
|
||
} else if (type === "file") {
|
||
setFormData((prev) => ({ ...prev, [name]: 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]) {
|
||
setAvatarUrl(null);
|
||
}
|
||
} else if (name.includes("cpf")) {
|
||
let cpfFormatado = FormatCPF(value);
|
||
setFormData((prev) => ({ ...prev, [name]: cpfFormatado }));
|
||
|
||
const cpfLimpo = cpfFormatado.replace(/\D/g, "");
|
||
if (cpfLimpo.length === 11) {
|
||
if (!validarCPF(cpfFormatado)) {
|
||
setCpfError("CPF inválido");
|
||
} else {
|
||
setCpfError("");
|
||
}
|
||
}
|
||
} else if (name.includes("phone")) {
|
||
let telefoneFormatado = FormatTelefones(value);
|
||
setFormData((prev) => ({ ...prev, [name]: telefoneFormatado }));
|
||
} else {
|
||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||
}
|
||
};
|
||
|
||
const handleAvailabilityUpdate = useCallback((newAvailability) => {
|
||
setFormData((prev) => {
|
||
if (JSON.stringify(prev.availability) !== JSON.stringify(newAvailability)) {
|
||
return { ...prev, availability: newAvailability };
|
||
}
|
||
return prev;
|
||
});
|
||
}, []);
|
||
|
||
const handleCepBlur = async () => {
|
||
const cep = formData.cep?.replace(/\D/g, "");
|
||
if (cep && cep.length === 8) {
|
||
try {
|
||
const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
|
||
const data = await response.json();
|
||
if (!data.erro) {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
street: data.logradouro || "",
|
||
neighborhood: data.bairro || "",
|
||
city: data.localidade || "",
|
||
state: data.uf || "",
|
||
}));
|
||
} else {
|
||
setShowRequiredModal(true);
|
||
setEmptyFields(["cep"]);
|
||
}
|
||
} catch (error) {
|
||
setShowRequiredModal(true);
|
||
setEmptyFields(["cep"]);
|
||
}
|
||
}
|
||
};
|
||
|
||
const scrollToEmptyField = (fieldName) => {
|
||
let fieldRef = null;
|
||
|
||
switch (fieldName) {
|
||
case "full_name":
|
||
fieldRef = nomeRef;
|
||
setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true }));
|
||
break;
|
||
case "cpf":
|
||
fieldRef = cpfRef;
|
||
setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true }));
|
||
break;
|
||
case "email":
|
||
fieldRef = emailRef;
|
||
setCollapsedSections((prev) => ({ ...prev, contato: true }));
|
||
break;
|
||
case "phone_mobile":
|
||
fieldRef = telefoneRef;
|
||
setCollapsedSections((prev) => ({ ...prev, contato: true }));
|
||
break;
|
||
case "crm_uf":
|
||
fieldRef = crmUfRef;
|
||
setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true }));
|
||
break;
|
||
case "crm":
|
||
fieldRef = crmRef;
|
||
setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true }));
|
||
break;
|
||
default:
|
||
return;
|
||
}
|
||
|
||
setTimeout(() => {
|
||
if (fieldRef.current) {
|
||
fieldRef.current.scrollIntoView({
|
||
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)";
|
||
|
||
setTimeout(() => {
|
||
if (fieldRef.current) {
|
||
fieldRef.current.style.border = "";
|
||
fieldRef.current.style.boxShadow = "";
|
||
}
|
||
}, 3000);
|
||
}
|
||
}, 300);
|
||
};
|
||
const handleCreateAvailability = async (newAvailability) => {
|
||
try {
|
||
const response = await fetch(ENDPOINT_AVAILABILITY, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(newAvailability),
|
||
});
|
||
const data = await response.json();
|
||
console.log("Disponibilidade criada :", data);
|
||
alert("Disponibilidade criada com sucesso!");
|
||
} catch (error) {
|
||
console.error("Erro ao criar disponibilidade:", error);
|
||
alert("Erro ao criar disponibilidade.");
|
||
}
|
||
};
|
||
|
||
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 (missingFields.length > 0) {
|
||
setEmptyFields(missingFields);
|
||
setShowRequiredModal(true);
|
||
|
||
setTimeout(() => {
|
||
if (missingFields.length > 0) {
|
||
scrollToEmptyField(missingFields[0]);
|
||
}
|
||
}, 500);
|
||
return;
|
||
}
|
||
|
||
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);
|
||
return;
|
||
}
|
||
|
||
if (!validarCPF(formData.cpf)) {
|
||
setShowRequiredModal(true);
|
||
setEmptyFields(["cpf"]);
|
||
setCpfError("CPF inválido");
|
||
setTimeout(() => scrollToEmptyField("cpf"), 500);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await onSave({ ...formData });
|
||
|
||
if (formData.availability && formData.availability.length > 0) {
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error("Erro ao salvar médico:", error);
|
||
alert("Erro ao salvar médico.");
|
||
};
|
||
};
|
||
|
||
const handleModalClose = () => {
|
||
setShowRequiredModal(false);
|
||
};
|
||
|
||
|
||
return (
|
||
<>
|
||
{/* Modal de Alerta */}
|
||
{showRequiredModal && (
|
||
<div className="modal-overlay">
|
||
<div className="modal-content">
|
||
<div className="modal-header">
|
||
<h5 className="modal-title">Atenção</h5>
|
||
<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:"}
|
||
</p>
|
||
<div className="modal-list">
|
||
{cpfError ? (
|
||
<p className="modal-list-item">{cpfError}</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.crm && <p className="modal-list-item">- CRM</p>}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="modal-footer">
|
||
<button onClick={handleModalClose} className="modal-confirm-btn">
|
||
Fechar
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Formulário Principal */}
|
||
<div className="card doctor-form-container shadow-sm">
|
||
<h3 className="doctor-form-title">MediConnect</h3>
|
||
|
||
{/* DADOS PESSOAIS */}
|
||
<div className="form-section">
|
||
<h4
|
||
className="section-header"
|
||
onClick={() => handleToggleCollapse("dadosPessoais")}
|
||
>
|
||
Dados Pessoais
|
||
<span className="section-toggle">
|
||
{collapsedSections.dadosPessoais ? "▲" : "▼"}
|
||
</span>
|
||
</h4>
|
||
<div
|
||
className={`collapse${
|
||
collapsedSections.dadosPessoais ? " show" : ""
|
||
}`}
|
||
>
|
||
<div className="row mt-3">
|
||
{/* Foto / Avatar */}
|
||
<div className="col-md-6 mb-3 avatar-container">
|
||
<div className="me-3">
|
||
{avatarUrl ? (
|
||
<img
|
||
src={avatarUrl}
|
||
alt="Avatar do Médico"
|
||
className="avatar-image"
|
||
/>
|
||
) : (
|
||
<div className="avatar-placeholder">☤</div>
|
||
)}
|
||
</div>
|
||
<div>
|
||
<label
|
||
htmlFor="foto-input"
|
||
className="btn btn-primary file-input-label"
|
||
>
|
||
Carregar Foto
|
||
</label>
|
||
<input
|
||
type="file"
|
||
className="form-control d-none"
|
||
name="foto"
|
||
id="foto-input"
|
||
onChange={handleChange}
|
||
accept="image/*"
|
||
/>
|
||
{formData.foto && (
|
||
<span className="ms-2 form-label">
|
||
{formData.foto.name}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Nome Completo */}
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">Nome: *</label>
|
||
<input
|
||
ref={nomeRef}
|
||
type="text"
|
||
className="form-control form-control-custom"
|
||
name="full_name"
|
||
value={formData.full_name || ""}
|
||
onChange={handleChange}
|
||
/>
|
||
</div>
|
||
{/* Data de Nascimento */}
|
||
<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"
|
||
/>
|
||
</div>
|
||
{/* CPF */}
|
||
<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" : ""
|
||
}`}
|
||
name="cpf"
|
||
value={formData.cpf || ""}
|
||
onChange={handleChange}
|
||
/>
|
||
{cpfError && (
|
||
<div
|
||
className="invalid-feedback"
|
||
style={{ display: "block" }}
|
||
>
|
||
{cpfError}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Estado do CRM */}
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">Estado do CRM: *</label>
|
||
<select
|
||
ref={crmUfRef}
|
||
className="form-control form-control-custom"
|
||
name="crm_uf"
|
||
value={formData.crm_uf || ""}
|
||
onChange={handleChange}
|
||
>
|
||
<option value="">Selecione</option>
|
||
<option value="AP">AP</option>
|
||
<option value="AL">AL</option>
|
||
<option value="AM">AM</option>
|
||
<option value="BA">BA</option>
|
||
<option value="CE">CE</option>
|
||
<option value="DF">DF</option>
|
||
<option value="ES">ES</option>
|
||
<option value="GO">GO</option>
|
||
<option value="MA">MA</option>
|
||
<option value="MT">MT</option>
|
||
<option value="MS">MS</option>
|
||
<option value="MG">MG</option>
|
||
<option value="PA">PA</option>
|
||
<option value="PB">PB</option>
|
||
<option value="PR">PR</option>
|
||
<option value="PE">PE</option>
|
||
<option value="PI">PI</option>
|
||
<option value="RJ">RJ</option>
|
||
<option value="RN">RN</option>
|
||
<option value="RS">RS</option>
|
||
<option value="RO">RO</option>
|
||
<option value="RR">RR</option>
|
||
<option value="SC">SC</option>
|
||
<option value="SP">SP</option>
|
||
<option value="SE">SE</option>
|
||
<option value="TO">TO</option>
|
||
</select>
|
||
</div>
|
||
|
||
{/* CRM */}
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">CRM: *</label>
|
||
<input
|
||
ref={crmRef}
|
||
type="text"
|
||
className="form-control form-control-custom"
|
||
name="crm"
|
||
value={formData.crm || ""}
|
||
onChange={handleChange}
|
||
/>
|
||
</div>
|
||
|
||
{/* Especialização */}
|
||
<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}
|
||
>
|
||
<option value="">Selecione</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="Dermatologia">Dermatologia</option>
|
||
<option value="Neurologia">Neurologia</option>
|
||
<option value="Psiquiatria">Psiquiatria</option>
|
||
<option value="Endocrinologia">Endocrinologia</option>
|
||
<option value="Gastroenterologia">Gastroenterologia</option>
|
||
<option value="Urologia">Urologia</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* CONTATO */}
|
||
<div className="form-section">
|
||
<h4
|
||
className="section-header"
|
||
onClick={() => handleToggleCollapse("contato")}
|
||
>
|
||
Contato
|
||
<span className="section-toggle">
|
||
{collapsedSections.contato ? "▲" : "▼"}
|
||
</span>
|
||
</h4>
|
||
<div
|
||
className={`collapse${collapsedSections.contato ? " show" : ""}`}
|
||
>
|
||
<div className="row mt-3">
|
||
{/* Email */}
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">Email: *</label>
|
||
<input
|
||
ref={emailRef}
|
||
type="email"
|
||
className="form-control form-control-custom"
|
||
name="email"
|
||
value={formData.email || ""}
|
||
onChange={handleChange}
|
||
/>
|
||
</div>
|
||
{/* Telefone 1 (Principal) */}
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">Telefone: *</label>
|
||
<input
|
||
ref={telefoneRef}
|
||
type="text"
|
||
className="form-control form-control-custom"
|
||
name="phone_mobile"
|
||
value={formData.phone_mobile || ""}
|
||
onChange={handleChange}
|
||
/>
|
||
</div>
|
||
{/* Telefone 2 (Opcional) */}
|
||
<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}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ENDEREÇO */}
|
||
<div className="form-section">
|
||
<h4
|
||
className="section-header"
|
||
onClick={() => handleToggleCollapse("endereco")}
|
||
>
|
||
Endereço
|
||
<span className="section-toggle">
|
||
{collapsedSections.endereco ? "▲" : "▼"}
|
||
</span>
|
||
</h4>
|
||
<div
|
||
className={`collapse${collapsedSections.endereco ? " show" : ""}`}
|
||
>
|
||
<div className="row mt-3">
|
||
{/* CEP */}
|
||
<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}
|
||
/>
|
||
</div>
|
||
{/* Rua */}
|
||
<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}
|
||
/>
|
||
</div>
|
||
{/* Bairro */}
|
||
<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}
|
||
/>
|
||
</div>
|
||
{/* Cidade */}
|
||
<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}
|
||
/>
|
||
</div>
|
||
{/* Estado */}
|
||
<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}
|
||
/>
|
||
</div>
|
||
{/* Número */}
|
||
<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}
|
||
/>
|
||
</div>
|
||
{/* Complemento */}
|
||
<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}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* HORÁRIOS */}
|
||
<div className="form-section">
|
||
<h4
|
||
className="section-header"
|
||
onClick={() => handleToggleCollapse("horarios")}
|
||
>
|
||
Horários de Atendimento
|
||
<span className="section-toggle">
|
||
{collapsedSections.horarios ? "▲" : "▼"}
|
||
</span>
|
||
</h4>
|
||
<div
|
||
className={`collapse${collapsedSections.horarios ? " show" : ""}`}
|
||
>
|
||
<div className="row mt-3">
|
||
<div className="col-12 mb-3">
|
||
<p className="form-label text-muted">
|
||
Defina seus horários de atendimento para cada dia da semana.
|
||
Marque um dia para começar a adicionar blocos de tempo.
|
||
</p>
|
||
<HorariosDisponibilidade
|
||
initialAvailability={formData.availability}
|
||
onUpdate={handleAvailabilityUpdate}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* BOTÕES DE AÇÃO */}
|
||
<div className="btns-container">
|
||
<button
|
||
className="btn btn-success btn-submit"
|
||
onClick={handleSubmit}
|
||
disabled={isLoading}
|
||
>
|
||
{isLoading ? "Salvando..." : "Salvar Médico"}
|
||
</button>
|
||
|
||
<Link to={`/${location.pathname.split("/")[1]}/medicos`}>
|
||
<button className="btn btn-light btn-cancel">Cancelar</button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default DoctorForm;
|