Merge branch 'Disponibilidades2'

src/components/doctors/DoctorForm.jsx

@@ -7,6 +7,7 @@ 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
@@ -28,7 +29,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     const cpfLimpo = cpf.replace(/\D/g, "");
 
     if (cpfLimpo.length !== 11) return false;
-
     if (/^(\d)\1+$/.test(cpfLimpo)) return false;
 
     let soma = 0;
@@ -51,6 +51,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     );
   };
 
+
   const [avatarUrl, setAvatarUrl] = useState(null);
   const [showRequiredModal, setShowRequiredModal] = useState(false);
   const [emptyFields, setEmptyFields] = useState([]);
@@ -122,6 +123,10 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     }
   };
 
+  const handleAvailabilityUpdate = (newAvailability) => {
+    setFormData((prev) => ({ ...prev, availability: newAvailability }));
+  };
+
   const handleCepBlur = async () => {
     const cep = formData.cep?.replace(/\D/g, "");
     if (cep && cep.length === 8) {
@@ -250,8 +255,10 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     setShowRequiredModal(false);
   };
 
+
   return (
     <>
+      {/* Modal de Alerta */}
       {showRequiredModal && (
         <div className="modal-overlay">
           <div className="modal-content">
@@ -299,6 +306,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         </div>
       )}
 
+      {/* Formulário Principal */}
       <div className="card doctor-form-container shadow-sm">
         <h3 className="doctor-form-title">MediConnect</h3>
 
@@ -319,6 +327,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
             }`}
           >
             <div className="row mt-3">
+              {/* Foto / Avatar */}
               <div className="col-md-6 mb-3 avatar-container">
                 <div className="me-3">
                   {avatarUrl ? (
@@ -354,6 +363,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                 </div>
               </div>
 
+              {/* Nome Completo */}
               <div className="col-md-6 mb-3">
                 <label className="form-label">Nome: *</label>
                 <input
@@ -365,6 +375,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   onChange={handleChange}
                 />
               </div>
+              {/* Data de Nascimento */}
               <div className="col-md-6 mb-3">
                 <label className="form-label">Data de nascimento:</label>
                 <input
@@ -377,6 +388,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   max="2025-09-24"
                 />
               </div>
+              {/* CPF */}
               <div className="col-md-6 mb-3">
                 <label className="form-label">CPF: *</label>
                 <input
@@ -399,6 +411,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                 )}
               </div>
 
+              {/* Estado do CRM */}
               <div className="col-md-6 mb-3">
                 <label className="form-label">Estado do CRM: *</label>
                 <select
@@ -438,6 +451,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                 </select>
               </div>
 
+              {/* CRM */}
               <div className="col-md-6 mb-3">
                 <label className="form-label">CRM: *</label>
                 <input
@@ -450,6 +464,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                 />
               </div>
 
+              {/* Especialização */}
               <div className="col-md-6 mb-3">
                 <label className="form-label">Especialização:</label>
                 <select
@@ -497,6 +512,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
             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
@@ -508,6 +524,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   onChange={handleChange}
                 />
               </div>
+              {/* Telefone 1 (Principal) */}
               <div className="col-md-6 mb-3">
                 <label className="form-label">Telefone: *</label>
                 <input
@@ -519,6 +536,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   onChange={handleChange}
                 />
               </div>
+              {/* Telefone 2 (Opcional) */}
               <div className="col-md-6 mb-3">
                 <label className="form-label">Telefone 2:</label>
                 <input
@@ -548,6 +566,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
             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
@@ -559,6 +578,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   onBlur={handleCepBlur}
                 />
               </div>
+              {/* Rua */}
               <div className="col-md-8 mb-3">
                 <label className="form-label">Rua:</label>
                 <input
@@ -569,6 +589,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   onChange={handleChange}
                 />
               </div>
+              {/* Bairro */}
               <div className="col-md-6 mb-3">
                 <label className="form-label">Bairro:</label>
                 <input
@@ -579,6 +600,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   onChange={handleChange}
                 />
               </div>
+              {/* Cidade */}
               <div className="col-md-4 mb-3">
                 <label className="form-label">Cidade:</label>
                 <input
@@ -589,6 +611,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   onChange={handleChange}
                 />
               </div>
+              {/* Estado */}
               <div className="col-md-2 mb-3">
                 <label className="form-label">Estado:</label>
                 <input
@@ -599,6 +622,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   onChange={handleChange}
                 />
               </div>
+              {/* Número */}
               <div className="col-md-4 mb-3">
                 <label className="form-label">Número:</label>
                 <input
@@ -609,6 +633,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   onChange={handleChange}
                 />
               </div>
+              {/* Complemento */}
               <div className="col-md-8 mb-3">
                 <label className="form-label">Complemento:</label>
                 <input
@@ -629,23 +654,27 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
             className="section-header"
             onClick={() => handleToggleCollapse("horarios")}
           >
-                  Horários
+            Horários de Atendimento
             <span className="section-toggle">
               {collapsedSections.horarios ? "▲" : "▼"}
             </span>
           </h4>
-
+          <div
-                <div className={`collapse${collapsedSections.horarios ? " show" : ""}`}>
+            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
-                    onChange={(dados) => {
+                  initialAvailability={formData.availability}
-                      console.log("Disponibilidades atualizadas:", dados);
+                  onUpdate={handleAvailabilityUpdate}
-                      // Se quiser salvar no formData:
-                      // setFormData(prev => ({ ...prev, disponibilidades: dados }));
-                    }}
                 />
               </div>
             </div>
-
+          </div>
         </div>
 
 	        {/* BOTÕES DE AÇÃO */}
@@ -662,6 +691,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
             <button className="btn btn-light btn-cancel">Cancelar</button>
           </Link>
         </div>
+      </div>
     </>
   );
 }

src/components/doctors/HorariosDisponibilidade.jsx

@@ -1,106 +1,401 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useCallback } from "react";
+import { Clock } from "lucide-react";
 
-const diasDaSemana = [
+const initialBlockTemplate = {
-  "segunda",
+  id: null,
-  "terca",
+  inicio: "09:00",
-  "quarta",
+  termino: "17:00",
-  "quinta",
+  isNew: true,
-  "sexta",
+};
-  "sabado",
+
-  "domingo"
+const emptyAvailabilityTemplate = [
+  { dia: "Segunda-feira", isChecked: false, blocos: [] },
+  { dia: "Terça-feira", isChecked: false, blocos: [] },
+  { dia: "Quarta-feira", isChecked: false, blocos: [] },
+  { dia: "Quinta-feira", isChecked: false, blocos: [] },
+  { dia: "Sexta-feira", isChecked: false, blocos: [] },
+  { dia: "Sábado", isChecked: false, blocos: [] },
+  { dia: "Domingo", isChecked: false, blocos: [] },
 ];
 
-export default function HorariosDisponibilidade({ onChange }) {
+const HorariosDisponibilidade = ({
-  const [disponibilidades, setDisponibilidades] = useState(
+  initialAvailability = emptyAvailabilityTemplate,
-    diasDaSemana.map(dia => ({
+  onUpdate,
-      weekday: dia,
+}) => {
-      slots: [{ start_time: "09:00", end_time: "17:00" }],
+  const [availability, setAvailability] = useState(initialAvailability);
-      ativo: false,
+
-    }))
+  useEffect(() => {
+    if (initialAvailability !== emptyAvailabilityTemplate) {
+      setAvailability(initialAvailability);
+    }
+  }, [initialAvailability]);
+
+  useEffect(() => {
+    if (onUpdate) {
+      onUpdate(availability);
+    }
+  }, [availability, onUpdate]);
+
+  const handleDayCheck = useCallback((dayIndex, currentIsChecked) => {
+    const isChecked = !currentIsChecked;
+
+    setAvailability((prev) =>
+      prev.map((day, i) =>
+        i === dayIndex
+          ? {
+              ...day,
+              isChecked,
+              blocos: isChecked
+                ? day.blocos.length === 0
+                  ? [
+                      {
+                        ...initialBlockTemplate,
+                        id: Date.now() + Math.random(),
+                        isNew: true,
+                      },
+                    ]
+                  : day.blocos
+                : [],
+            }
+          : day
+      )
     );
+  }, []);
 
-  function handleToggleDia(index) {
+  const handleAddBlock = useCallback((dayIndex) => {
-    const updated = [...disponibilidades];
+    const tempId = Date.now() + Math.random();
-    updated[index].ativo = !updated[index].ativo;
+    const newBlock = { ...initialBlockTemplate, id: tempId, isNew: true };
-    setDisponibilidades(updated);
-    onChange?.(updated);
-  }
 
-  function handleSlotChange(indexDia, indexSlot, campo, valor) {
+    setAvailability((prev) =>
-    const updated = [...disponibilidades];
+      prev.map((day, i) =>
-    updated[indexDia].slots[indexSlot][campo] = valor;
+        i === dayIndex
-    setDisponibilidades(updated);
+          ? {
-    onChange?.(updated);
+              ...day,
+              blocos: [...day.blocos, newBlock],
+              isChecked: true,
             }
+          : day
+      )
+    );
+  }, []);
 
-  function handleAddSlot(indexDia) {
+  const handleRemoveBlock = useCallback((dayIndex, blockId) => {
-    const updated = [...disponibilidades];
+    setAvailability((prev) =>
-    updated[indexDia].slots.push({ start_time: "", end_time: "" });
+      prev.map((day, i) => {
-    setDisponibilidades(updated);
+        if (i === dayIndex) {
-    onChange?.(updated);
+          const newBlocos = day.blocos.filter((bloco) => bloco.id !== blockId);
+          return {
+            ...day,
+            blocos: newBlocos,
+            isChecked: newBlocos.length > 0,
+          };
         }
+        return day;
+      })
+    );
+  }, []);
 
-  function handleRemoveSlot(indexDia, indexSlot) {
+  const handleTimeChange = useCallback((dayIndex, blockId, field, value) => {
-    const updated = [...disponibilidades];
+    setAvailability((prev) =>
-    updated[indexDia].slots.splice(indexSlot, 1);
+      prev.map((day, i) =>
-    setDisponibilidades(updated);
+        i === dayIndex
-    onChange?.(updated);
+          ? {
+              ...day,
+              blocos: day.blocos.map((bloco) =>
+                bloco.id === blockId ? { ...bloco, [field]: value } : bloco
+              ),
             }
+          : day
+      )
+    );
+  }, []);
+
+  const renderTimeBlock = (dayIndex, bloco) => (
+    <div
+      key={bloco.id}
+      style={{
+        display: "flex",
+        flexDirection: window.innerWidth < 640 ? "column" : "row",
+        alignItems: window.innerWidth < 640 ? "flex-start" : "center",
+        justifyContent: "space-between",
+        padding: "16px",
+        marginBottom: "16px",
+        borderRadius: "12px",
+        boxShadow:
+          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        transition: "all 0.3s",
+        backgroundColor: bloco.isNew ? "#eef2ff" : "#ffffff",
+        border: bloco.isNew ? "2px solid #6366f1" : "1px solid #e5e7eb",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: window.innerWidth < 640 ? "column" : "row",
+          gap: window.innerWidth < 640 ? "0" : "32px",
+          width: window.innerWidth < 640 ? "100%" : "auto",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            marginBottom: window.innerWidth < 640 ? "8px" : "0",
+          }}
+        >
+          <label
+            htmlFor={`inicio-${dayIndex}-${bloco.id}`}
+            style={{ fontWeight: 500, color: "#4b5563", width: "64px" }}
+          >
+            Início:
+          </label>
+          <div style={{ position: "relative" }}>
+            <input
+              id={`inicio-${dayIndex}-${bloco.id}`}
+              type="time"
+              value={bloco.inicio}
+              onChange={(e) =>
+                handleTimeChange(dayIndex, bloco.id, "inicio", e.target.value)
+              }
+              style={{
+                padding: "8px",
+                border: "1px solid #d1d5db",
+                borderRadius: "8px",
+                width: "100%",
+                boxSizing: "border-box",
+                outline: "none",
+              }}
+              step="300"
+            />
+            <Clock
+              size={16}
+              style={{
+                position: "absolute",
+                right: "12px",
+                top: "50%",
+                transform: "translateY(-50%)",
+                color: "#9ca3af",
+                pointerEvents: "none",
+              }}
+            />
+          </div>
+        </div>
+
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <label
+            htmlFor={`termino-${dayIndex}-${bloco.id}`}
+            style={{ fontWeight: 500, color: "#4b5563", width: "64px" }}
+          >
+            Término:
+          </label>
+          <div style={{ position: "relative" }}>
+            <input
+              id={`termino-${dayIndex}-${bloco.id}`}
+              type="time"
+              value={bloco.termino}
+              onChange={(e) =>
+                handleTimeChange(dayIndex, bloco.id, "termino", e.target.value)
+              }
+              style={{
+                padding: "8px",
+                border: "1px solid #d1d5db",
+                borderRadius: "8px",
+                width: "100%",
+                boxSizing: "border-box",
+                outline: "none",
+              }}
+              step="300"
+            />
+            <Clock
+              size={16}
+              style={{
+                position: "absolute",
+                right: "12px",
+                top: "50%",
+                transform: "translateY(-50%)",
+                color: "#9ca3af",
+                pointerEvents: "none",
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <button
+        onClick={() => handleRemoveBlock(dayIndex, bloco.id)}
+        style={{
+          marginTop: window.innerWidth < 640 ? "16px" : "0",
+          padding: "8px 24px",
+          backgroundColor: "#ef4444",
+          color: "white",
+          fontWeight: 600,
+          borderRadius: "12px",
+          boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+          transition: "all 0.2s",
+          width: window.innerWidth < 640 ? "100%" : "auto",
+          cursor: "pointer",
+          border: "none",
+          opacity: 1,
+        }}
+        onMouseEnter={(e) =>
+          (e.currentTarget.style.backgroundColor = "#dc2626")
+        }
+        onMouseLeave={(e) =>
+          (e.currentTarget.style.backgroundColor = "#ef4444")
+        }
+      >
+        Remover Bloco
+      </button>
+      {bloco.isNew && (
+        <span
+          style={{
+            fontSize: "12px",
+            color: "#6366f1",
+            marginTop: "8px",
+            marginLeft: window.innerWidth < 640 ? "0" : "16px",
+            fontWeight: 500,
+          }}
+        >
+          (Novo)
+        </span>
+      )}
+    </div>
+  );
 
   return (
-    <div className="space-y-4">
+    <div
-      {disponibilidades.map((dia, i) => (
+      style={{
-        <div key={dia.weekday} className="border p-3 rounded-md bg-gray-50">
+        maxWidth: "960px",
-          <div className="flex items-center justify-between">
+        margin: "0 auto",
-            <label className="font-semibold capitalize">
+        fontFamily: "Inter, sans-serif",
-              {dia.weekday}
+      }}
-            </label>
+    >
+      <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+        {availability.map((day, dayIndex) => {
+          const isChecked = day.isChecked;
+
+          const dayHeaderStyle = {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "12px 0",
+            borderBottom: "1px solid #e5e7eb",
+            marginBottom: "16px",
+            backgroundColor: isChecked ? "#1f2937" : "#f9fafb",
+            borderRadius: "8px",
+            paddingLeft: "16px",
+            paddingRight: "16px",
+            cursor: "pointer",
+            transition: "background-color 0.2s",
+          };
+
+          return (
+            <div
+              key={day.dia}
+              style={{
+                backgroundColor: "#f9fafb",
+                padding: "20px",
+                borderRadius: "12px",
+                border: "1px solid #e5e7eb",
+              }}
+            >
+              <div
+                style={{
+                  ...dayHeaderStyle,
+                  backgroundColor: isChecked ? "#1f2937" : "#f9fafb",
+                  borderBottom: isChecked
+                    ? "1px solid #4b5563"
+                    : "1px solid #e5e7eb",
+                }}
+                onClick={() => handleDayCheck(dayIndex, isChecked)}
+              >
+                <label
+                  style={{
+                    fontSize: "18px",
+                    fontWeight: "bold",
+                    color: isChecked ? "white" : "#1f2937",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "12px",
+                    cursor: "pointer",
+                  }}
+                >
+                  <span>{day.dia}</span>
                   <input
                     type="checkbox"
-              checked={dia.ativo}
+                    checked={isChecked}
-              onChange={() => handleToggleDia(i)}
+                    onChange={() => {}}
+                    style={{
+                      width: "20px",
+                      height: "20px",
+                      accentColor: isChecked ? "#3b82f6" : "#9ca3af",
+                      marginLeft: "8px",
+                    }}
                   />
+                </label>
               </div>
 
-          {dia.ativo && (
+              {isChecked && (
-            <div className="mt-2 space-y-2">
+                <div style={{ marginTop: "16px" }}>
-              {dia.slots.map((slot, j) => (
+                  {day.blocos.length === 0 && (
-                <div key={j} className="flex gap-2 items-center">
+                    <p
-                  <input
+                      style={{
-                    type="time"
+                        color: "#6b7280",
-                    value={slot.start_time}
+                        fontStyle: "italic",
-                    onChange={e => handleSlotChange(i, j, "start_time", e.target.value)}
+                        marginBottom: "16px",
-                    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
+                      Nenhum bloco de horário definido.
-                    </button>
+                    </p>
+                  )}
+
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "16px",
+                    }}
+                  >
+                    {day.blocos.map((bloco) =>
+                      renderTimeBlock(dayIndex, bloco)
                     )}
                   </div>
-              ))}
+
                   <button
-                type="button"
+                    onClick={() => handleAddBlock(dayIndex)}
-                onClick={() => handleAddSlot(i)}
+                    style={{
-                className="text-blue-600 hover:underline mt-2"
+                      marginTop: "24px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      padding: "12px 24px",
+                      backgroundColor: "#10b981",
+                      color: "white",
+                      fontWeight: "bold",
+                      borderRadius: "12px",
+                      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+                      transition: "all 0.3s",
+                      cursor: "pointer",
+                      border: "none",
+                    }}
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.backgroundColor = "#059669")
+                    }
+                    onMouseLeave={(e) =>
+                      (e.currentTarget.style.backgroundColor = "#10b981")
+                    }
                   >
-                + Adicionar pausa/bloco
+                    + Adicionar novo bloco
                   </button>
                 </div>
               )}
             </div>
-      ))}
-    </div>
           );
-}
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default HorariosDisponibilidade;

src/pages/Agendamento.jsx

@@ -6,6 +6,7 @@ import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendament
 import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
 import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
 import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
+// Importação de endpoints para lógica da Fila de Espera e Médicos (versão main)
 import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient.js';
 import { GetAllDoctors, GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor.js';
 
@@ -13,7 +14,6 @@ import { useAuth } from '../components/utils/AuthProvider.js';
 // ✨ NOVO: Caminho de importação corrigido com base na sua estrutura de pastas
 import AgendamentosMes from '../components/AgendarConsulta/DadosConsultasMock.js';
 
-
 import dayjs from 'dayjs';
 import "./style/Agendamento.css";
 import './style/FilaEspera.css';
@@ -21,21 +21,22 @@ import { Search } from 'lucide-react';
 
 
 
-const Agendamento = ({setDictInfo}) => {
+const Agendamento = ({setDictInfo}) => { // Mantido setDictInfo (versão main)
   const navigate = useNavigate();
 
-  const [selectedID, setSelectedId] = useState('0')
+  // Estados mesclados
-  const [filaEsperaData, setfilaEsperaData] = useState([])
+  const [selectedID, setSelectedId] = useState('0') // (main)
+  const [filaEsperaData, setfilaEsperaData] = useState([]) // (main)
   const [FiladeEspera, setFiladeEspera] = useState(false);
   const [tabela, setTabela] = useState('diario');
   const [PageNovaConsulta, setPageConsulta] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
-  const [agendamentos, setAgendamentos] = useState()
+  const [agendamentos, setAgendamentos] = useState() // (main)
   const {getAuthorizationHeader} = useAuth()
   const [DictAgendamentosOrganizados, setAgendamentosOrganizados ] = useState({})
 
   const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const [AgendamentoFiltrado, setAgendamentoFiltrado] = useState()
+  const [AgendamentoFiltrado, setAgendamentoFiltrado] = useState() // (main)
   
   const [ListaDeMedicos, setListaDeMedicos] = useState([])
   const [FiltredTodosMedicos, setFiltredTodosMedicos] = useState([])
@@ -44,6 +45,7 @@ const Agendamento = ({setDictInfo}) => {
 
   let authHeader = getAuthorizationHeader() 
 
+  // Função FiltrarAgendamentos (Mesclado: Mantido o da MAIN, mais completo e com ordenação/fila de espera real)
  const FiltrarAgendamentos = async (listaTodosAgendamentos) => {
     const ConfigurarFiladeEspera = async (patient_id, doctor_id, agendamento) => {
       // Assumindo que GetDoctorByID e GetPatientByID estão definidos no seu escopo
@@ -66,11 +68,9 @@ const Agendamento = ({setDictInfo}) => {
     let DictAgendamentosOrganizados = {};
     let ListaFilaDeEspera = [];
 
-    // 1. Agrupamento (igual ao seu código original)
+    // 1. Agrupamento
     for (const agendamento of listaTodosAgendamentos) {
         if (agendamento.status === 'requested') {
-            // Recomenda-se usar Promise.all para melhorar a performance
-            // mas, para manter a estrutura, mantemos o await no loop.
             let v = await ConfigurarFiladeEspera(agendamento.patient_id, agendamento.doctor_id, agendamento);
             ListaFilaDeEspera.push(v);
         } else {
@@ -84,40 +84,31 @@ const Agendamento = ({setDictInfo}) => {
         }
     }
 
-// ----------------------------------------------------------------------
     // 2. Ordenação Interna: Ordenar os agendamentos por HORÁRIO (do menor para o maior)
     for (const DiaAgendamento in DictAgendamentosOrganizados) {
         DictAgendamentosOrganizados[DiaAgendamento].sort((a, b) => {
-            // Compara as strings de data/hora (ISO 8601) diretamente,
-            // que funcionam para ordenação cronológica.
             if (a.scheduled_at < b.scheduled_at) return -1;
             if (a.scheduled_at > b.scheduled_at) return 1;
             return 0;
         });
     }
 
-// ----------------------------------------------------------------------
+    // 3. Ordenação Externa: Ordenar os DIAS
-    // 3. Ordenação Externa: Ordenar os DIAS (as chaves do objeto)
-    // Para garantir que as chaves fiquem na sequência cronológica correta.
-
-    // Pega as chaves (datas)
     const chavesOrdenadas = Object.keys(DictAgendamentosOrganizados).sort((a, b) => {
-        // Compara as chaves de data (strings 'YYYY-MM-DD')
         if (a < b) return -1;
         if (a > b) return 1;
         return 0;
     });
 
-    // Cria um novo objeto no formato desejado, garantindo a ordem das chaves
     let DictAgendamentosFinal = {};
     for (const data of chavesOrdenadas) {
         DictAgendamentosFinal[data] = DictAgendamentosOrganizados[data];
     }
-    setAgendamentosOrganizados(DictAgendamentosFinal); // Use o objeto final ordenado
+    setAgendamentosOrganizados(DictAgendamentosFinal); 
     setfilaEsperaData(ListaFilaDeEspera);
 };
 
-  // Requisição inicial para mostrar os agendamentos do banco de dados
+  // Requisição inicial (Mesclado: Mantido o da MAIN, pois o da disponibilidade2 não tem a ordenação/fila de espera no .then)
   useEffect(() => {
     var myHeaders = new Headers();
     myHeaders.append("Authorization", authHeader);
@@ -146,6 +137,7 @@ const Agendamento = ({setDictInfo}) => {
 
   }, [])
 
+  // Efeito de filtro de médico (Presente em ambas, mantida a lógica da MAIN/disponibilidade2 que se complementam)
  useEffect(() => {
       console.log("mudou FiltredTodosMedicos:", FiltredTodosMedicos);
    if (FiltredTodosMedicos.length === 1) {  
@@ -165,6 +157,7 @@ const Agendamento = ({setDictInfo}) => {
     } 
   }, [FiltredTodosMedicos]); 
 
+// Função de Delete (Presente apenas na MAIN)
 const deleteConsulta = (selectedPatientId) => {
   console.log("tentando apagar")
      var myHeaders = new Headers();
@@ -184,20 +177,10 @@ fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${sel
   
 }
   
-
+// Função auxiliar de filtro de médico (Presente em ambas, mantida a versão mais limpa)
-/**
- * Filtra todos os agendamentos em um objeto aninhado (data -> [agendamentos]) 
- * com base no ID do médico.
- *
- * @param {Object} dictAgendamentos - O dicionário de agendamentos.
- * @param {string} idMedicoFiltrado - O ID do médico (doctor_id) para ser usado como filtro.
- * @returns {Array} Um array contendo todos os agendamentos que correspondem ao idMedicoFiltrado.
- */
 const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => { 
     
-    // O corpo da função deve usar esses nomes de variáveis:
     const todasAsListasDeAgendamentos = Object.values(dictAgendamentos);
-    
     const todosOsAgendamentos = todasAsListasDeAgendamentos.flat();
 
     const agendamentosFiltrados = todosOsAgendamentos.filter(agendamento => 
@@ -209,7 +192,7 @@ const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
 
  
 
-  // Lógica para filtrar os dados da AGENDA (AgendamentosMes)
+  // Lógica para filtrar os dados da AGENDA (useMemo) - (Presente em ambas, mantida a da MAIN, que está melhor formatada)
   const filteredAgendamentos = useMemo(() => {
     if (!searchTerm.trim()) {
       return AgendamentosMes;
@@ -229,6 +212,7 @@ const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
     return filteredData;
   }, [searchTerm]);
 
+  // ListarDiasdoMes (Presente em ambas)
   const ListarDiasdoMes = (ano, mes) => {
     let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
     const base = dayjs(`${ano}-${mes}-01`)
@@ -249,12 +233,14 @@ const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
     return ListaDiasDatas
   }
 
+  // handleClickAgendamento (Presente em ambas)
   const handleClickAgendamento = (agendamento) => {
     if (agendamento.status !== 'vazio') return
     else setPageConsulta(true)
 };
 
 
+// handleSearchMedicos (Presente em ambas)
 const handleSearchMedicos = (term) => {
     setSearchTermDoctor(term);
     if (term.trim() === '') {
@@ -276,22 +262,33 @@ const handleSearchMedicos = (term) => {
     <div>
       <h1>Agendar nova consulta</h1>
       
-      <button className='manage-button btn' onClick={() => navigate('/secretaria/excecoes-disponibilidade')}>
+      {/* Mesclagem dos botões de navegação: Adicionar Consulta da main + Gerenciamento da disponibilidade2 */}
-        <i className="bi bi-gear-fill me-1"></i>
+      <div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
-        Mudar Disponibilidade
-      </button>
-
           <button className="btn btn-primary" onClick={() => setPageConsulta(true)}>
              <i className="bi bi-plus-circle"></i> Adicionar Consulta
           </button>
+          
+          <button
+              className="manage-button btn"
+              onClick={() => navigate("/secretaria/excecoes-disponibilidade")}
+          >
+              <i className="bi bi-gear-fill me-1"></i>
+              Gerenciar Exceções
+          </button>
+          
+          <button className='manage-button btn' onClick={() => navigate('/secretaria/disponibilidade')}>
+            <i className="bi bi-gear-fill me-1"></i>
+            Mudar Disponibilidade
+          </button>
+      </div>
+
       {!PageNovaConsulta ? (
         <div className='atendimento-eprocura'>
            <div className='unidade-selecionarprofissional'>
           
+          {/* Bloco de busca por médico */}
           <div className='busca-atendimento-container'> 
-        
             <div className='input-e-dropdown-wrapper'>
-
               <div className='busca-atendimento'>
                   <div>
                       <i className="fa-solid fa-calendar-day"></i>
@@ -312,10 +309,8 @@ const handleSearchMedicos = (term) => {
                               key={medico.id} 
                               className='dropdown-item'
                               onClick={() => {
-                              // Ação ao selecionar o médico
                                   setSearchTermDoctor(medico.nomeMedico); // Preenche o input
-                              //setFiltredTodosMedicos([]); // Fecha o dropdown
+                                  // setFiltredTodosMedicos([]); // Opcional: fechar o dropdown
-                              // Lógica adicional, como selecionar o ID do médico...
                               }}
                           >
                               <p>{medico.nomeMedico} </p>
@@ -326,6 +321,20 @@ const handleSearchMedicos = (term) => {
             </div>
           </div>
           
+          {/* Div da disponibilidade2 - Unidade/Selecionar Profissional (manter) */}
+          <div className="unidade-selecionarprofissional">
+            <select>
+              <option value="" disabled selected>
+                Unidade
+              </option>
+              <option value="">Unidade Central</option>
+              <option value="">Unidade Zona Norte</option>
+              <option value="">Unidade Zona Oeste</option>
+            </select>
+            <input type="text" placeholder="Selecionar profissional" />
+          </div>
+
+           
           </div>
 
           <div className='container-btns-agenda-fila_esepera'>
@@ -374,6 +383,7 @@ const handleSearchMedicos = (term) => {
                       </div>
                     </section>
                     
+                    {/* Componentes de Tabela - Adicionado props de delete da main */}
                     {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />}
                     {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>}
                     {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />}
@@ -382,6 +392,7 @@ const handleSearchMedicos = (term) => {
               )
               :
               (
+                // Fila de Espera - Restaurada a versão da MAIN com dados reais
                 <div className="fila-container">
                   <div className="fila-header">
                     <input
@@ -396,11 +407,10 @@ const handleSearchMedicos = (term) => {
                   <table className="fila-tabela">
                     <thead>
                       <tr>
-                        <th>Nome</th>
+                        <th>Nome do Paciente</th> {/* Ajustado o cabeçalho */}
-                        <th>Telefone</th>
+                        <th>CPF</th> {/* Ajustado o cabeçalho */}
-                      
+                        <th>Médico Solicitado</th> {/* Ajustado o cabeçalho */}
-                        <th>Telefone</th>
+                        <th>Data da Solicitação</th> {/* Ajustado o cabeçalho */}
-                        <th>Entrou na fila de espera</th>
                         <th>Ações</th>
                       </tr>
                     </thead>
@@ -408,15 +418,15 @@ const handleSearchMedicos = (term) => {
                       {filaEsperaData.map((item, index) => (
                         <tr key={index}>
                           <td> <p>{item.Infos?.paciente_nome} </p>  </td>
-                          <td><p>{} </p></td>
+                          <td><p>{item.Infos?.paciente_cpf} </p></td>
-                          <td>{}</td>
+                          <td><p>{item.Infos?.nome_nedico} </p></td>
-                          <td>{}</td>
+                          <td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td> {/* Formatando a data de criação */}
                           <td> <div className="d-flex gap-2">
                             
                               <button className="btn btn-sm btn-edit"
                               onClick={() => {
                                 console.log(item, 'item')
-                                navigate(`${2}/edit`)
+                                navigate(`${2}/edit`) // Assumindo uma rota base
                                 setDictInfo(item)
                               }}
                               >
@@ -444,9 +454,11 @@ const handleSearchMedicos = (term) => {
           </section>
         </div>
       ) : (
+        // AgendamentoCadastroManager - (Mesclado: Mantido o setPageConsulta da main)
         <AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
       )}
 
+       {/* Modal de Confirmação de Exclusão (Da MAIN) */}
        {showDeleteModal && (
         <div
           className="modal fade show"

src/pages/DisponibilidadesDoctorPage.jsx

@@ -0,0 +1,145 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Link } from "react-router-dom";
+
+const ENDPOINT_LISTAR = "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability";
+
+const DisponibilidadesDoctorPage = () => {
+  const [disponibilidades, setDisponibilidades] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [filtroMedicoId, setFiltroMedicoId] = useState("");
+  const [filtroActive, setFiltroActive] = useState("true");
+  const [medicoValido, setMedicoValido] = useState(false);
+
+  const fetchDisponibilidades = useCallback(async (doctorId, activeStatus) => {
+    setLoading(true);
+    let url = `${ENDPOINT_LISTAR}?select=*`;
+    if (doctorId) url += `&doctor_id=eq.${doctorId}`;
+    if (activeStatus === "true" || activeStatus === "false") url += `&active=eq.${activeStatus}`;
+
+    try {
+      const response = await fetch(url);
+      const result = await response.json();
+      setDisponibilidades(Array.isArray(result) ? result : []);
+      setMedicoValido(Array.isArray(result) && result.length > 0);
+    } catch (error) {
+      setDisponibilidades([]);
+      setMedicoValido(false);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (filtroMedicoId) {
+      fetchDisponibilidades(filtroMedicoId, filtroActive);
+    } else {
+      setDisponibilidades([]);
+      setMedicoValido(false);
+    }
+  }, [filtroMedicoId, filtroActive, fetchDisponibilidades]);
+
+  return (
+    <div id="main-content">
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#333" }}>
+          Disponibilidades por Médico
+        </h1>
+        <Link
+          to={medicoValido ? `../medicos/${filtroMedicoId}/edit` : "#"}
+          className="btn-primary"
+          style={{
+            padding: "10px 20px",
+            fontSize: "14px",
+            whiteSpace: "nowrap",
+            textDecoration: "none",
+            display: "inline-block",
+            opacity: medicoValido ? 1 : 0.6,
+            pointerEvents: medicoValido ? "auto" : "none",
+          }}
+        >
+          + Gerenciar Disponibilidades
+        </Link>
+      </div>
+
+      <div className="atendimento-eprocura">
+        <div className="busca-atendimento">
+          <div>
+            <i className="fa-solid fa-user-doctor"></i>
+            <input
+              type="text"
+              placeholder="Filtrar por ID do Médico..."
+              value={filtroMedicoId}
+              onChange={(e) => setFiltroMedicoId(e.target.value)}
+              style={{ border: "1px solid #ccc", borderRadius: "4px", padding: "5px" }}
+            />
+          </div>
+          <div>
+            <i className="fa-solid fa-check-circle"></i>
+            <select
+              value={filtroActive}
+              onChange={(e) => setFiltroActive(e.target.value)}
+              style={{ padding: "8px", border: "1px solid #ccc", borderRadius: "4px" }}
+            >
+              <option value="true">Ativas</option>
+              <option value="false">Inativas</option>
+              <option value="">Todas</option>
+            </select>
+          </div>
+        </div>
+
+        <section className="calendario-ou-filaespera">
+          <div className="fila-container">
+            <h2 className="fila-titulo">
+              Disponibilidades Encontradas ({disponibilidades.length})
+            </h2>
+
+            {loading ? (
+              <p className="text-center py-10">Carregando disponibilidades...</p>
+            ) : disponibilidades.length === 0 ? (
+              <p className="text-center py-10">
+                Nenhuma disponibilidade encontrada para os filtros aplicados.
+              </p>
+            ) : (
+              <table className="fila-tabela" style={{ width: "100%", borderCollapse: "collapse" }}>
+                <thead>
+                  <tr>
+                    {["ID", "ID Médico", "Dia da Semana", "Início", "Término", "Intervalo (min)", "Tipo Consulta", "Status"].map(
+                      (header) => (
+                        <th
+                          key={header}
+                          style={{ padding: "10px", borderBottom: "2px solid #ddd", textAlign: "left" }}
+                        >
+                          {header}
+                        </th>
+                      )
+                    )}
+                  </tr>
+                </thead>
+                <tbody>
+                  {disponibilidades.map((disp, index) => (
+                    <tr key={disp.id || index} style={{ borderBottom: "1px solid #eee" }}>
+                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.id || "N/A"}</td>
+                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.doctor_id}</td>
+                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.weekday}</td>
+                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.start_time || "N/A"}</td>
+                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.end_time || "N/A"}</td>
+                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.slot_minutes}</td>
+                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.appointment_type}</td>
+                      <td style={{ padding: "10px", fontSize: "0.9em" }}>
+                        <span className={`status-tag ${disp.active ? "legenda-item-realizado" : "legenda-item-cancelado"}`}>
+                          {disp.active ? "Ativa" : "Inativa"}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default DisponibilidadesDoctorPage;

src/pages/DoctorEditPage.jsx

@@ -1,77 +1,146 @@
-import React from 'react'
+import React, { useEffect, useState, useCallback } from "react";
-import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor'
+import { useParams, useSearchParams } from "react-router-dom";
-import DoctorForm from '../components/doctors/DoctorForm'
+import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
-import { useAuth } from '../components/utils/AuthProvider'
+import DoctorForm from "../components/doctors/DoctorForm";
-import {useEffect, useState} from 'react'
+import { useAuth } from "../components/utils/AuthProvider";
-import { useParams } from 'react-router-dom'
+import API_KEY from "../components/utils/apiKeys";
-import API_KEY from '../components/utils/apiKeys'
+
+const ENDPOINT_AVAILABILITY =
+  "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
+
 const DoctorEditPage = () => {
-  const {getAuthorizationHeader, isAuthenticated} = useAuth();
+  const { getAuthorizationHeader } = useAuth();
-  const [DoctorToPUT, setDoctorPUT] = useState({})
+  const [DoctorToPUT, setDoctorPUT] = useState({});
 
-  const Parametros = useParams()
+  const Parametros = useParams();
+  const [searchParams] = useSearchParams();
+  const DoctorID = Parametros.id;
+  const availabilityId = searchParams.get("availabilityId");
 
-  const DoctorID = Parametros.id
+  const [availabilityToPATCH, setAvailabilityToPATCH] = useState(null);
+  const [mode, setMode] = useState("doctor");
 
   useEffect(() => {
+    const authHeader = getAuthorizationHeader();
 
-  const authHeader = getAuthorizationHeader()
+    if (availabilityId) {
+      setMode("availability");
 
+      fetch(`${ENDPOINT_AVAILABILITY}?id=eq.${availabilityId}&select=*`, {
+        method: "GET",
+        headers: {
+          apikey: API_KEY,
+          Authorization: authHeader,
+        },
+      })
+        .then((res) => res.json())
+        .then((data) => {
+          if (data && data.length > 0) {
+            setAvailabilityToPATCH(data[0]);
+            console.log("Disponibilidade vinda da API:", data[0]);
+          }
+        })
+        .catch((err) => console.error("Erro ao buscar disponibilidade:", err));
+    } else {
+      setMode("doctor");
       GetDoctorByID(DoctorID, authHeader)
         .then((data) => {
           console.log(data, "médico vindo da API");
-        setDoctorPUT(data[0])
+          setDoctorPUT(data[0]);
-        ; // supabase retorna array
         })
         .catch((err) => console.error("Erro ao buscar paciente:", err));
+    }
+  }, [DoctorID, availabilityId, getAuthorizationHeader]);
 
-    
-}, [])
   const HandlePutDoctor = async () => {
-const authHeader = getAuthorizationHeader()
+    const authHeader = getAuthorizationHeader();
-  
 
     var myHeaders = new Headers();
-  myHeaders.append('apikey', API_KEY)
+    myHeaders.append("apikey", API_KEY);
     myHeaders.append("Authorization", authHeader);
     myHeaders.append("Content-Type", "application/json");
 
     var raw = JSON.stringify(DoctorToPUT);
 
-  console.log("Enviando médico para atualização:", DoctorToPUT);
+    console.log("Enviando médico para atualização (PUT):", DoctorToPUT);
 
     var requestOptions = {
-    method: 'PUT',
+      method: "PUT",
       headers: myHeaders,
       body: raw,
-    redirect: 'follow'
+      redirect: "follow",
     };
 
     try {
-    const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DoctorID}`,requestOptions);    
+      const response = await fetch(
-    console.log(response)
+        `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DoctorID}`,
-     
+        requestOptions
+      );
+      console.log("Resposta PUT Doutor:", response);
+      alert("Dados do médico atualizados com sucesso!");
     } catch (error) {
-    console.error("Erro ao atualizar paciente:", error);
+      console.error("Erro ao atualizar médico:", error);
+      alert("Erro ao atualizar dados do médico.");
       throw error;
     }
+  };
 
+  // 2. Função para Atualizar DISPONIBILIDADE (PATCH)
+  const HandlePatchAvailability = async (data) => {
+    const authHeader = getAuthorizationHeader();
+
+    var myHeaders = new Headers();
+    myHeaders.append("apikey", API_KEY);
+    myHeaders.append("Authorization", authHeader);
+    myHeaders.append("Content-Type", "application/json");
+
+    var raw = JSON.stringify(data);
+
+    console.log("Enviando disponibilidade para atualização (PATCH):", data);
+
+    var requestOptions = {
+      method: "PATCH",
+      headers: myHeaders,
+      body: raw,
+      redirect: "follow",
+    };
+
+    try {
+      const response = await fetch(
+        `${ENDPOINT_AVAILABILITY}?id=eq.${availabilityId}`,
+        requestOptions
+      );
+      console.log("Resposta PATCH Disponibilidade:", response);
+      alert("Disponibilidade atualizada com sucesso!");
+      // Opcional: Redirecionar de volta para a lista de disponibilidades
+      // navigate('/disponibilidades');
+    } catch (error) {
+      console.error("Erro ao atualizar disponibilidade:", error);
+      alert("Erro ao atualizar disponibilidade.");
+      throw error;
     }
-
+  };
 
   return (
     <div>
+      <h1 className="text-2xl font-bold mb-4">
+        {mode === "availability"
+          ? `Editar Horário Disponível (ID: ${availabilityId.substring(0, 8)})`
+          : `Editar Médico (ID: ${DoctorID})`}
+      </h1>
 
       <DoctorForm
-    onSave={HandlePutDoctor}
+        onSave={
-    
+          mode === "availability" ? HandlePatchAvailability : HandlePutDoctor
-    formData={DoctorToPUT}
-    setFormData={setDoctorPUT}
-    
-    />
-    
-    </div>
-  )
         }
+        formData={mode === "availability" ? availabilityToPATCH : DoctorToPUT}
+        setFormData={
+          mode === "availability" ? setAvailabilityToPATCH : setDoctorPUT
+        }
+        isEditingAvailability={mode === "availability"}
+      />
+    </div>
+  );
+};
 
-export default DoctorEditPage
+export default DoctorEditPage;

src/perfis/perfil_secretaria/PerfilSecretaria.jsx

@@ -2,7 +2,7 @@
 import { Routes, Route } from "react-router-dom";
 import { useState } from "react";
 import Sidebar from "../../components/Sidebar";
-import FinanceiroDashboard from "../../pages/FinanceiroDashboard";
+import HorariosDisponibilidade from "../../components/doctors/HorariosDisponibilidade";
 import SecretariaItems from "../../data/sidebar-items-secretaria.json";
 import Inicio from "../../pages/Inicio";
 import TablePaciente from "../../pages/TablePaciente";
@@ -16,6 +16,7 @@ import EditPage from "../../pages/EditPage";
 import DoctorDetails from "../../pages/DoctorDetails";
 import DoctorEditPage from "../../pages/DoctorEditPage";
 import ExcecoesDisponibilidade from "../../pages/ExcecoesDisponibilidade";
+import DisponibilidadesDoctorPage from "../../pages/DisponibilidadesDoctorPage"
 import AgendamentoEditPage from "../../pages/AgendamentoEditPage";
 
 function PerfilSecretaria({ onLogout }) {
@@ -38,8 +39,10 @@ function PerfilSecretaria({ onLogout }) {
             <Route path="agendamento" element={<Agendamento setDictInfo={setDictInfo}/>} />
             <Route path="agendamento/:id/edit" element={<AgendamentoEditPage setDictInfo={setDictInfo} DictInfo={DictInfo}/>} />
             <Route path="laudo" element={<LaudoManager />} />
-            <Route path="*" element={<h2>Página não encontrada</h2>} />
+            <Route path="disponibilidade" element={<DisponibilidadesDoctorPage />} />
+            <Route path="horarios" element={<HorariosDisponibilidade/>}/>
             <Route path="excecoes-disponibilidade" element={<ExcecoesDisponibilidade />} />
+            <Route path="*" element={<h2>Página não encontrada</h2>} />
           </Routes>
         </div>
       </div>