Alterações nas Disponibilidades

package.json

@@ -23,6 +23,7 @@
     "dayjs": "^1.11.18",
     "dotenv": "^17.2.3",
     "express": "^5.1.0",
+    "firebase": "^12.5.0",
     "flatpickr": "^4.6.13",
     "html2pdf.js": "^0.12.1",
     "lucide-react": "^0.543.0",

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -69,8 +69,16 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
   }, [authHeader]);
 
   useEffect(() => {
+<<<<<<< Updated upstream
     ChamarMedicos();
   }, [ChamarMedicos]);
+=======
+    console.log("Horario","tessssste"  )
+      if (agendamento?.scheduled_at) {
+    setHorarioInicio(formatarHora(agendamento.scheduled_at));
+  }
+  }, [])
+>>>>>>> Stashed changes
 
   useEffect(() => {
     if (!agendamento.dataAtendimento || !agendamento.doctor_id) return;

src/components/FormCriarExcecao.jsx

@@ -1,13 +1,13 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useAuth } from "./utils/AuthProvider";
 import API_KEY from "./utils/apiKeys";
 import "./AgendarConsulta/style/formagendamentos.css";
+import { GetAllDoctors } from './utils/Functions-Endpoints/Doctor';
 
 
 const ENDPOINT_CRIAR_EXCECAO = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_exceptions";
 
 const FormCriarExcecao = ({ onCancel, doctorID }) => {
-
     const { getAuthorizationHeader, user, getUserInfo } = useAuth();
     const [dadosAtendimento, setDadosAtendimento] = useState({
         profissional: doctorID || '',
@@ -18,6 +18,13 @@ const FormCriarExcecao = ({ onCancel, doctorID }) => {
         motivo: ''
     });
 
+    const [todosProfissionais, setTodosProfissionais] = useState([]);
+    const [profissionaisFiltrados, setProfissionaisFiltrados] = useState([]);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+    const [doctorSearchName, setDoctorSearchName] = useState('');
+    const [searchingDoctor, setSearchingDoctor] = useState(false);
+
     const handleAtendimentoChange = (e) => {
         const { value, name } = e.target;
         setDadosAtendimento(prev => ({
@@ -26,6 +33,52 @@ const FormCriarExcecao = ({ onCancel, doctorID }) => {
         }));
     };
 
+    useEffect(() => {
+        const loadDoctors = async () => {
+            setSearchingDoctor(true);
+            let authHeader = '';
+            try { authHeader = getAuthorizationHeader ? getAuthorizationHeader() : ''; } catch {}
+            try {
+                const Medicos = await GetAllDoctors(authHeader);
+                setTodosProfissionais(Array.isArray(Medicos) ? Medicos : []);
+            } catch (err) {
+                console.error('Erro ao carregar médicos:', err);
+                setTodosProfissionais([]);
+            } finally {
+                setSearchingDoctor(false);
+            }
+        };
+        loadDoctors();
+    }, [getAuthorizationHeader]);
+
+    const handleSearchProfissional = (e) => {
+        const term = e.target.value;
+        setDoctorSearchName(term);
+        if (term.trim() === '') {
+            setProfissionaisFiltrados([]);
+            setIsDropdownOpen(false);
+            return;
+        }
+        const filtered = todosProfissionais.filter(p =>
+            (p.full_name || '').toLowerCase().includes(term.toLowerCase())
+        );
+        setProfissionaisFiltrados(filtered);
+        setIsDropdownOpen(filtered.length > 0);
+    };
+
+    const handleSelectProfissional = (profissional) => {
+        setDadosAtendimento(prev => ({
+            ...prev,
+            profissional: profissional.id
+        }));
+        setDoctorSearchName(profissional.full_name || '');
+        setProfissionaisFiltrados([]);
+        setIsDropdownOpen(false);
+    };
+
+    // lista simples de valores permitidos
+    const ALLOWED_KINDS = ['disponibilidade_extra', 'bloqueio'];
+
     const handleSubmitExcecao = async (e) => { 
         e.preventDefault();
         console.log("Tentando criar Exceção.");
@@ -37,6 +90,13 @@ const FormCriarExcecao = ({ onCancel, doctorID }) => {
             return;
         }
 
+        // usa diretamente o value selecionado (já definido no <select>) e valida
+        const mappedKind = tipoAtendimento;
+        if (!ALLOWED_KINDS.includes(mappedKind)) {
+            alert(`Tipo inválido: "${tipoAtendimento}". Tipos aceitos: ${ALLOWED_KINDS.join(', ')}`);
+            return;
+        }
+
         const startTime = inicio ? inicio + ":00" : null; 
         const endTime = termino ? termino + ":00" : null;
         
@@ -70,7 +130,7 @@ const FormCriarExcecao = ({ onCancel, doctorID }) => {
         const raw = JSON.stringify({
             doctor_id: profissional,
             date: dataAtendimento,
-            kind: tipoAtendimento,
+            kind: mappedKind,
             start_time: startTime,
             end_time: endTime,
             reason: motivo,
@@ -119,7 +179,30 @@ const FormCriarExcecao = ({ onCancel, doctorID }) => {
                 <h2 className="section-title">Informações da Nova Exceção</h2>
 
                 <div className="campo-informacoes-atendimento">
+                    {/* Busca por nome usando filtragem local */}
+                    <div className="campo-de-input campo-de-input-container">
+                        <label>Nome do médico</label>
+                        <input
+                            type="text"
+                            name="doctorSearchName"
+                            placeholder="Digite o nome do médico"
+                            value={doctorSearchName}
+                            onChange={handleSearchProfissional}
+                            autoComplete="off"
+                        />
+                        {isDropdownOpen && profissionaisFiltrados.length > 0 && (
+                            <div className="dropdown-profissionais">
+                                {profissionaisFiltrados.map(p => (
+                                    <div key={p.id} className="dropdown-item" onClick={() => handleSelectProfissional(p)}>
+                                        {p.full_name}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                        {searchingDoctor && <small>Carregando médicos...</small>}
+                    </div>
 
+                    {/* ID do profissional (preenchido ao selecionar) */}
                     <div className="campo-de-input">
                         <label>ID do profissional *</label>
                         <input
@@ -134,12 +217,11 @@ const FormCriarExcecao = ({ onCancel, doctorID }) => {
                     <div className="campo-de-input">
                         <label>Tipo de exceção *</label>
                         <select name="tipoAtendimento" onChange={handleAtendimentoChange} value={dadosAtendimento.tipoAtendimento} required>
-                            <option value="">Selecione o tipo de exceção</option>
-                            <option value="liberacao" >Liberação (Criar Slot)</option>
-                            <option value="bloqueio" >Bloqueio (Remover Slot)</option>
+                            <option value="" disabled>Selecione o tipo de exceção</option>
+                            <option value="disponibilidade_extra" >Liberação</option>
+                            <option value="bloqueio" >Bloqueio</option>
                         </select>
                     </div>
-
                 </div>
 
                 <section id="informacoes-atendimento-segunda-linha">

src/components/doctors/DoctorForm.jsx

@@ -1,15 +1,18 @@
 import React, { useState, useRef, useCallback } from "react";
 import { Link, useNavigate, useLocation } from "react-router-dom";
+import { useAuth } from "../components/utils/AuthProvider";
+import API_KEY from "../components/utils/apiKeys";
 import "./DoctorForm.css";
 import HorariosDisponibilidade from "../doctors/HorariosDisponibilidade";
+import { useAuth } from '../utils/AuthProvider';
+import API_KEY from '../utils/apiKeys';
 
-const ENDPOINT_AVAILABILITY =
-  "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability";
+const ENDPOINT_AVAILABILITY = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
 
 function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const navigate = useNavigate();
   const location = useLocation();
-
+  const { getAuthorizationHeader } = useAuth();
 
   const FormatTelefones = (valor) => {
     const digits = String(valor).replace(/\D/g, "").slice(0, 11);
@@ -54,7 +57,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     );
   };
 
-
   const [avatarUrl, setAvatarUrl] = useState(null);
   const [showRequiredModal, setShowRequiredModal] = useState(false);
   const [emptyFields, setEmptyFields] = useState([]);
@@ -74,6 +76,15 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     horarios: false,
   });
 
+  const resolveAuthHeader = () => {
+    try {
+      const h = getAuthorizationHeader();
+      return h || '';
+    } catch {
+      return '';
+    }
+  }
+
   const handleToggleCollapse = (section) => {
     setCollapsedSections((prevState) => ({
       ...prevState,
@@ -126,14 +137,14 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     }
   };
 
-const handleAvailabilityUpdate = useCallback((newAvailability) => {
-  setFormData((prev) => {
-    if (JSON.stringify(prev.availability) !== JSON.stringify(newAvailability)) {
-      return { ...prev, availability: newAvailability };
-    }
-    return prev;
-  });
-}, []);
+  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, "");
@@ -213,21 +224,68 @@ const handleAvailabilityUpdate = useCallback((newAvailability) => {
       }
     }, 300);
   };
-  const handleCreateAvailability = async (newAvailability) => {
+
+  const handleCreateAvailability = async (doctorId, availabilityData) => {
     try {
+      const myHeaders = new Headers();
+      const authHeader = resolveAuthHeader();
+      if (authHeader) myHeaders.append("Authorization", authHeader);
+      myHeaders.append("Content-Type", "application/json");
+      if (API_KEY) myHeaders.append("apikey", API_KEY);
+
       const response = await fetch(ENDPOINT_AVAILABILITY, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(newAvailability),
+        headers: myHeaders,
+        body: JSON.stringify({
+          doctor_id: doctorId,
+          availability: availabilityData,
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString()
+        }),
       });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Erro ${response.status}: ${errorText}`);
+      }
+
       const data = await response.json();
-      console.log("Disponibilidade criada :", data);
-      alert("Disponibilidade criada com sucesso!");
+      console.log("Disponibilidade criada:", data);
+      return data;
     } catch (error) {
       console.error("Erro ao criar disponibilidade:", error);
-      alert("Erro ao criar disponibilidade.");
+      throw error;
+    }
+  };
+
+  const handlePatchAvailability = async (id, updatedAvailability) => {
+    try {
+      const myHeaders = new Headers();
+      const authHeader = resolveAuthHeader();
+      if (authHeader) myHeaders.append("Authorization", authHeader);
+      myHeaders.append("Content-Type", "application/json");
+      if (API_KEY) myHeaders.append("apikey", API_KEY);
+
+      const response = await fetch(`${ENDPOINT_AVAILABILITY}?id=eq.${id}`, {
+        method: "PATCH",
+        headers: myHeaders,
+        body: JSON.stringify({
+          availability: updatedAvailability,
+          updated_at: new Date().toISOString()
+        }),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Erro ${response.status}: ${errorText}`);
+      }
+
+      const data = await response.json();
+      console.log("Disponibilidade atualizada:", data);
+      return data;
+    } catch (error) {
+      console.error("Erro ao atualizar disponibilidade:", error);
+      throw error;
     }
   };
 
@@ -270,23 +328,29 @@ const handleAvailabilityUpdate = useCallback((newAvailability) => {
     }
 
     try {
-      await onSave({ ...formData });
+      const savedDoctor = await onSave({ ...formData });
 
-      if (formData.availability && formData.availability.length > 0) {
+      if (formData.availability && formData.availability.length > 0 && savedDoctor.id) {
+        if (formData.availabilityId) {
+
+          await handlePatchAvailability(formData.availabilityId, formData.availability);
+        } else {
+
+          await handleCreateAvailability(savedDoctor.id, formData.availability);
+        }
       }
 
       alert("Médico salvo com sucesso!");
     } catch (error) {
-      console.error("Erro ao salvar médico:", error);
-      alert("Erro ao salvar médico.");
-    };
+      console.error("Erro ao salvar médico ou disponibilidade:", error);
+      alert("Erro ao salvar médico ou disponibilidade.");
+    }
   };
 
   const handleModalClose = () => {
     setShowRequiredModal(false);
   };
 
-
   return (
     <>
       {/* Modal de Alerta */}

src/components/doctors/HorariosDisponibilidade.css

@@ -0,0 +1,154 @@
+.horarios-container {
+  max-width: 1100px;
+  margin: 0 auto;
+  font-family: "Inter", sans-serif;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 15px;
+}
+
+/* Cards mais compactos */
+.day-card {
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 8px;
+  height: 220px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: all 0.2s ease;
+}
+
+.day-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
+}
+
+.day-card.checked {
+  background-color: #1f2937;
+  color: white;
+  border-color: #4b5563;
+}
+
+/* Cabeçalho compacto */
+.day-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border-radius: 6px;
+  border-bottom: 1px solid #e5e7eb;
+  cursor: pointer;
+}
+
+.day-header.checked {
+  background-color: #1f2937;
+  color: white;
+  border-color: #4b5563;
+}
+
+.day-header label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+/* Seção de blocos mais compacta */
+.blocks-section {
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex-grow: 1;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+/* Blocos de tempo menores */
+.time-block {
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  padding: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.time-block:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
+}
+
+.time-block.new {
+  background-color: #eef2ff;
+  border-color: #6366f1;
+}
+
+/* Inputs compactos */
+.time-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.input-wrapper {
+  position: relative;
+}
+
+.input-wrapper input {
+  padding: 4px 24px 4px 4px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  width: 100%;
+  font-size: 13px;
+  outline: none;
+}
+
+.clock-icon {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #9ca3af;
+  font-size: 12px;
+}
+
+/* Botões compactos */
+.btn-remove {
+  margin-top: 6px;
+  width: 100%;
+  background-color: #ef4444;
+  border: none;
+  color: white;
+  font-weight: bold;
+  padding: 4px 0;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background-color 0.15s;
+}
+
+.btn-remove:hover {
+  background-color: #dc2626;
+}
+
+.btn-add {
+  background-color: #10b981;
+  color: white;
+  font-weight: bold;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  align-self: center;
+  transition: background-color 0.15s;
+  width: 100%;
+  font-size: 13px;
+}
+
+.btn-add:hover {
+  background-color: #059669;
+}

src/components/doctors/HorariosDisponibilidade.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
 import { Clock } from "lucide-react";
+import "./HorariosDisponibilidade.css";
 
 const initialBlockTemplate = {
   id: null,
@@ -36,7 +37,6 @@ const HorariosDisponibilidade = ({
 
   const handleDayCheck = useCallback((dayIndex, currentIsChecked) => {
     const isChecked = !currentIsChecked;
-
     setAvailability((prev) =>
       prev.map((day, i) =>
         i === dayIndex
@@ -63,7 +63,6 @@ const HorariosDisponibilidade = ({
   const handleAddBlock = useCallback((dayIndex) => {
     const tempId = Date.now() + Math.random();
     const newBlock = { ...initialBlockTemplate, id: tempId, isNew: true };
-
     setAvailability((prev) =>
       prev.map((day, i) =>
         i === dayIndex
@@ -109,298 +108,91 @@ const HorariosDisponibilidade = ({
   }, []);
 
   const handleSave = useCallback(() => {
-  if (onUpdate) onUpdate(availability);
-   }, [availability, onUpdate]);
-
-  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: "8px",
-        marginBottom: "8px",
-        borderRadius: "8px",
-        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" : "12px",
-          width: window.innerWidth < 640 ? "100%" : "auto",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "4px",
-            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: "4px 6px",
-                border: "1px solid #d1d5db",
-                borderRadius: "6px",
-                width: "100%",
-                boxSizing: "border-box",
-                outline: "none",
-                fontSize: "13px",
-              }}
-              step="300"
-            />
-            <Clock
-              size={12}
-              style={{
-                position: "absolute",
-                right: "8px",
-                top: "50%",
-                transform: "translateY(-50%)",
-                color: "#9ca3af",
-                pointerEvents: "none",
-              }}
-            />
-          </div>
-        </div>
-
-        <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-          <label
-            htmlFor={`termino-${dayIndex}-${bloco.id}`}
-            style={{
-              fontWeight: 500,
-              color: "#4b5563",
-              width: "56px",
-              fontSize: "13px",
-            }}
-          >
-            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: "4px 6px",
-                border: "1px solid #d1d5db",
-                borderRadius: "6px",
-                width: "100%",
-                boxSizing: "border-box",
-                outline: "none",
-                fontSize: "13px",
-              }}
-              step="300"
-            />
-            <Clock
-              size={12}
-              style={{
-                position: "absolute",
-                right: "8px",
-                top: "50%",
-                transform: "translateY(-50%)",
-                color: "#9ca3af",
-                pointerEvents: "none",
-              }}
-            />
-          </div>
-        </div>
-      </div>
-
-      <button
-        onClick={() => handleRemoveBlock(dayIndex, bloco.id)}
-        style={{
-          marginTop: window.innerWidth < 640 ? "8px" : "0",
-          padding: "4px 10px",
-          backgroundColor: "#ef4444",
-          color: "white",
-          fontWeight: 600,
-          borderRadius: "13px",
-          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,
-          }}
-        ></span>
-      )}
-    </div>
-  );
+    if (onUpdate) onUpdate(availability);
+  }, [availability, onUpdate]);
 
   return (
-    <div
-      style={{
-        maxWidth: "960px",
-        margin: "0 auto",
-        fontFamily: "Inter, sans-serif",
-      }}
-    >
-      <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-        {availability.map((day, dayIndex) => {
-          const isChecked = day.isChecked;
+    <div className="horarios-container">
+      {availability.map((day, dayIndex) => (
+        <div key={day.dia} className="day-card">
+          <div
+            className={`day-header ${day.isChecked ? "checked" : ""}`}
+            onClick={() => handleDayCheck(dayIndex, day.isChecked)}
+          >
+            <label>
+              <span>{day.dia}</span>
+              <input type="checkbox" checked={day.isChecked} readOnly />
+            </label>
+          </div>
 
-          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",
-          };
+          {day.isChecked && (
+            <div className="blocks-section">
+              <div className="blocks-grid">
+                {day.blocos.map((bloco) => (
+                  <div
+                    key={bloco.id}
+                    className={`time-block ${bloco.isNew ? "new" : ""}`}
+                  >
+                    <div className="time-inputs">
+                      <label>
+                        Início:
+                        <div className="input-wrapper">
+                          <input
+                            type="time"
+                            value={bloco.inicio}
+                            onChange={(e) =>
+                              handleTimeChange(
+                                dayIndex,
+                                bloco.id,
+                                "inicio",
+                                e.target.value
+                              )
+                            }
+                          />
+                          <Clock className="clock-icon" size={14} />
+                        </div>
+                      </label>
 
-          return (
-            <div
-              key={day.dia}
-              style={{
-                backgroundColor: "#f9fafb",
-                padding: "8px",
-                borderRadius: "10px",
-                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={isChecked}
-                    onChange={() => {}}
-                    style={{
-                      width: "20px",
-                      height: "20px",
-                      accentColor: isChecked ? "#3b82f6" : "#9ca3af",
-                      marginLeft: "8px",
-                    }}
-                  />
-                </label>
+                      <label>
+                        Término:
+                        <div className="input-wrapper">
+                          <input
+                            type="time"
+                            value={bloco.termino}
+                            onChange={(e) =>
+                              handleTimeChange(
+                                dayIndex,
+                                bloco.id,
+                                "termino",
+                                e.target.value
+                              )
+                            }
+                          />
+                          <Clock className="clock-icon" size={14} />
+                        </div>
+                      </label>
+                    </div>
+
+                    <button
+                      className="btn-remove"
+                      onClick={() => handleRemoveBlock(dayIndex, bloco.id)}
+                    >
+                      Remover
+                    </button>
+                  </div>
+                ))}
               </div>
 
-              {isChecked && (
-                <div style={{ marginTop: "16px" }}>
-                  {day.blocos.length === 0 && (
-                    <p
-                      style={{
-                        color: "#6b7280",
-                        fontStyle: "italic",
-                        marginBottom: "16px",
-                      }}
-                    >
-                      Nenhum bloco de horário definido.
-                    </p>
-                  )}
-
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: "16px",
-                    }}
-                  >
-                    {day.blocos.map((bloco) =>
-                      renderTimeBlock(dayIndex, bloco)
-                    )}
-                  </div>
-
-                  <button
-                    onClick={() => handleAddBlock(dayIndex)}
-                    style={{
-                      marginTop: "15px",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      padding: "10px 22px",
-                      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 novo bloco
-                  </button>
-                </div>
-              )}
+              <button
+                className="btn-add"
+                onClick={() => handleAddBlock(dayIndex)}
+              >
+                + Adicionar novo bloco
+              </button>
             </div>
-          );
-        })}
-      </div>
+          )}
+        </div>
+      ))}
     </div>
   );
 };

src/pages/DisponibilidadesDoctorPage.jsx

@@ -1,68 +1,75 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import HorariosDisponibilidade from "../components/doctors/HorariosDisponibilidade";
-const ENDPOINT =
-  "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability";
+import { useAuth } from "../components/utils/AuthProvider";
+import API_KEY from "../components/utils/apiKeys";
+import { GetAllDoctors } from "../components/utils/Functions-Endpoints/Doctor";
 
-const MEDICOS_MOCKADOS = [
-  { id: 53, nome: "João Silva" },
-  { id: 19, nome: "Ana Costa" },
-  { id: 11, nome: "Pedro Santos" },
-];
+const ENDPOINT =
+  "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
 
 const diasDaSemana = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];
 
-const formatarDataHora = (isoString) => {
-  if (!isoString) return "N/A";
-  try {
-    const data = new Date(isoString);
-    // Usa o toLocaleTimeString para extrair hora e minuto
-    return data.toLocaleTimeString("pt-BR", {
-      hour: "2-digit",
-      minute: "2-digit",
-      timeZone: "UTC",
-    });
-  } catch {
-    return "Data Inválida";
-  }
-};
-
 const DisponibilidadesDoctorPage = () => {
+  const { getAuthorizationHeader } = useAuth();
   const [disponibilidades, setDisponibilidades] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [filtroMedicoNome, setFiltroMedicoNome] = useState("");
-  const [gerenciarModo, setGerenciarModo] = useState(false);
-  const [editando, setEditando] = useState(null); // ID da disponibilidade sendo editada
+  const [doctors, setDoctors] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedDoctor, setSelectedDoctor] = useState(null);
+  const [editando, setEditando] = useState(null);
+  const [doctorsLoading, setDoctorsLoading] = useState(true);
 
-  const encontrarMedicoIdPorNome = (nome) => {
-    if (!nome) return null;
-    const termo = nome.toLowerCase();
-    const medico = MEDICOS_MOCKADOS.find((m) =>
-      m.nome.toLowerCase().includes(termo)
-    );
-    return medico ? medico.id : null;
+  useEffect(() => {
+    const fetchDoctors = async () => {
+      try {
+        setDoctorsLoading(true);
+        const data = await GetAllDoctors();
+        console.log("Médicos recebidos:", data);
+        setDoctors(Array.isArray(data) ? data : []);
+      } catch (error) {
+        console.error("Erro ao carregar médicos:", error);
+        setDoctors([]);
+      } finally {
+        setDoctorsLoading(false);
+      }
+    };
+    fetchDoctors();
+  }, []);
+
+  const resolveAuthHeader = () => {
+    try {
+      const h = getAuthorizationHeader();
+      return h || "";
+    } catch {
+      return "";
+    }
   };
 
-  const fetchDisponibilidades = useCallback(async (nome) => {
-    setLoading(true);
+  const getHeaders = () => {
+    const myHeaders = new Headers();
+    const authHeader = resolveAuthHeader();
+    if (authHeader) myHeaders.append("Authorization", authHeader);
+    myHeaders.append("Content-Type", "application/json");
+    if (API_KEY) myHeaders.append("apikey", API_KEY);
+    return myHeaders;
+  };
 
-    const doctorId = encontrarMedicoIdPorNome(nome);
-    if (!doctorId) {
-      setLoading(false);
-      return;
+  const fetchDisponibilidades = useCallback(async (doctorId = null) => {
+    setLoading(true);
+    let url = ENDPOINT;
+    if (doctorId) {
+      url += `?doctor_id=eq.${doctorId}&select=*&order=weekday.asc,start_time.asc`;
+    } else {
+      url += `?select=*&order=doctor_id.asc,weekday.asc,start_time.asc`;
     }
     try {
-      const res = await fetch(`${ENDPOINT}?doctor_id=eq.${doctorId}`);
+      const res = await fetch(url, { method: "GET", headers: getHeaders() });
+      if (!res.ok) throw new Error(`Erro HTTP: ${res.status}`);
       const data = await res.json();
-
-      setDisponibilidades(
-        Array.isArray(data)
-          ? data
-          : data && Array.isArray(data.items)
-          ? data.items
-          : []
-      );
+      setDisponibilidades(Array.isArray(data) ? data : []);
     } catch (e) {
       console.error("Erro ao buscar disponibilidades:", e);
+      alert("Erro ao carregar disponibilidades");
       setDisponibilidades([]);
     } finally {
       setLoading(false);
@@ -70,39 +77,32 @@ const DisponibilidadesDoctorPage = () => {
   }, []);
 
   useEffect(() => {
-    if (!gerenciarModo && editando) {
-      setEditando(null);
-    }
-  }, [gerenciarModo]);
-
-  useEffect(() => {
-    if (editando) return;
-    if (filtroMedicoNome) {
-      const timer = setTimeout(() => {
-        fetchDisponibilidades(filtroMedicoNome);
-      }, 300);
-
-      return () => clearTimeout(timer);
+    if (selectedDoctor) {
+      fetchDisponibilidades(selectedDoctor.id);
     } else {
-      setDisponibilidades([]);
+      fetchDisponibilidades(null);
     }
-  }, [filtroMedicoNome, fetchDisponibilidades, editando]);
+  }, [selectedDoctor, fetchDisponibilidades]);
 
-  const atualizarDisponibilidade = async (id, novoIntervalo) => {
+  const atualizarDisponibilidade = async (id, dadosAtualizados) => {
     try {
       const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ slot_minutes: novoIntervalo }),
+        method: "PATCH",
+        headers: getHeaders(),
+        body: JSON.stringify(dadosAtualizados),
       });
       if (res.ok) {
         alert("Disponibilidade atualizada com sucesso!");
         setEditando(null);
-        fetchDisponibilidades(filtroMedicoNome);
+        if (selectedDoctor) fetchDisponibilidades(selectedDoctor.id);
+        else fetchDisponibilidades();
       } else {
+        const errorData = await res.json();
+        console.error("Erro na resposta:", errorData);
         alert("Erro ao atualizar disponibilidade");
       }
-    } catch {
+    } catch (error) {
+      console.error("Erro:", error);
       alert("Falha ao conectar com o servidor");
     }
   };
@@ -111,118 +111,138 @@ const DisponibilidadesDoctorPage = () => {
     if (!window.confirm("Deseja realmente excluir esta disponibilidade?"))
       return;
     try {
-      const res = await fetch(`${ENDPOINT}?id=eq.${id}`, { method: "DELETE" });
+      const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
+        method: "DELETE",
+        headers: getHeaders(),
+      });
       if (res.ok) {
-        alert("Disponibilidade excluída!");
+        alert("Disponibilidade excluída com sucesso!");
         setDisponibilidades((prev) => prev.filter((d) => d.id !== id));
       } else {
+        const errorData = await res.json();
+        console.error("Erro na resposta:", errorData);
         alert("Erro ao excluir disponibilidade");
       }
-    } catch {
+    } catch (error) {
+      console.error("Erro:", error);
       alert("Erro ao conectar com o servidor");
     }
   };
 
-  const disponibilidadeParaEdicao = editando
-    ? disponibilidades.find((d) => d.id === editando)
-    : null;
-
-const initialAvailabilityParaEdicao = diasDaSemana.map((dia, weekdayIndex) => {
-  const blocosDoDia = disponibilidades
-    .filter(d => d.weekday === weekdayIndex)
-    .map(d => ({
-      id: d.id,
-      inicio: d.start_time
-        ? new Date(d.start_time).toISOString().substring(11, 16)
-        : "07:00",
-      termino: d.end_time
-        ? new Date(d.end_time).toISOString().substring(11, 16)
-        : "17:00",
-      isNew: false,
-      slot_minutes: d.slot_minutes,
-    }));
-
-  return {
-    dia,
-    isChecked: blocosDoDia.length > 0,
-    blocos: blocosDoDia,
-  };
-});
+  const initialAvailabilityParaEdicao = useMemo(
+    () =>
+      diasDaSemana.map((dia, weekdayIndex) => {
+        const blocosDoDia = disponibilidades
+          .filter((d) => d.weekday === weekdayIndex && d.active !== false)
+          .map((d) => ({
+            id: d.id,
+            inicio: d.start_time ? d.start_time.substring(0, 5) : "07:00",
+            termino: d.end_time ? d.end_time.substring(0, 5) : "17:00",
+            isNew: false,
+            slot_minutes: d.slot_minutes || 30,
+            appointment_type: d.appointment_type || "presencial",
+            active: d.active !== false,
+          }));
+        return {
+          dia,
+          weekday: weekdayIndex,
+          isChecked: blocosDoDia.length > 0,
+          blocos: blocosDoDia,
+        };
+      }),
+    [disponibilidades]
+  );
 
   const handleUpdateHorarios = (horariosAtualizados) => {
-    console.log("Horários editados:", horariosAtualizados);
-
-    setEditando(null);
-    fetchDisponibilidades(filtroMedicoNome);
+    const bloco = horariosAtualizados
+      .flatMap((d) => d.blocos)
+      .find((b) => b.id === editando);
+    if (!bloco) return alert("Bloco não encontrado.");
+    const dadosAtualizados = {
+      start_time: bloco.inicio + ":00",
+      end_time: bloco.termino + ":00",
+      slot_minutes: bloco.slot_minutes,
+      appointment_type: bloco.appointment_type,
+      active: bloco.active,
+    };
+    atualizarDisponibilidade(editando, dadosAtualizados);
   };
 
+  const filteredDoctors = useMemo(() => {
+    if (!searchTerm) return doctors;
+    return doctors.filter((doc) =>
+      doc.name.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [doctors, searchTerm]);
+
   return (
     <div id="main-content">
-      {/* Cabeçalho */}
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#333" }}>
-          Disponibilidades por Médico
-        </h1>
+      <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#333" }}>
+        Disponibilidades dos Médicos
+      </h1>
 
-        {/* Botão Voltar/Gerenciar */}
-        <button
-          onClick={() => {
-            if (editando) {
-              setEditando(null); // Se está editando, volta para a tabela
-            } else {
-              setGerenciarModo((m) => !m); // Senão, alterna o modo de gerenciamento
-            }
+      <div style={{ marginTop: "10px", marginBottom: "10px" }}>
+        <input
+          type="text"
+          placeholder="Buscar médico por nome..."
+          value={searchTerm}
+          onChange={(e) => {
+            setSearchTerm(e.target.value);
+            setSelectedDoctor(null);
           }}
-          className="btn-primary"
           style={{
-            padding: "10px 20px",
-            fontSize: "14px",
-            whiteSpace: "nowrap",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+            padding: "6px",
+            width: "300px",
           }}
-        >
-          {editando
-            ? "← Voltar para Tabela"
-            : gerenciarModo
-            ? "← Voltar"
-            : "+ Gerenciar Disponibilidades"}
-        </button>
+        />
+        {searchTerm && (
+          <ul
+            style={{
+              border: "1px solid #ddd",
+              borderRadius: "4px",
+              backgroundColor: "white",
+              position: "absolute",
+              zIndex: 10,
+              width: "300px",
+              maxHeight: "150px",
+              overflowY: "auto",
+              marginTop: "4px",
+              listStyle: "none",
+              padding: 0,
+            }}
+          >
+            {filteredDoctors.length > 0 ? (
+              filteredDoctors.map((doc) => (
+                <li
+                  key={doc.id}
+                  onClick={() => {
+                    setSelectedDoctor(doc);
+                    setSearchTerm(doc.name);
+                  }}
+                  style={{
+                    padding: "6px 8px",
+                    cursor: "pointer",
+                    borderBottom: "1px solid #eee",
+                  }}
+                >
+                  {doc.name}
+                </li>
+              ))
+            ) : (
+              <li style={{ padding: "6px 8px", color: "#888" }}>
+                Nenhum médico encontrado
+              </li>
+            )}
+          </ul>
+        )}
       </div>
 
-      {/* Campo de busca - ESCONDIDO NO MODO DE EDIÇÃO */}
-      {!editando && (
-        <div className="atendimento-eprocura">
-          <div className="busca-atendimento">
-            <input
-              type="text"
-              placeholder="Filtrar por Nome do Médico..."
-              value={filtroMedicoNome}
-              onChange={(e) => setFiltroMedicoNome(e.target.value)}
-              style={{
-                border: "1px solid #ccc",
-                borderRadius: "4px",
-                padding: "5px",
-                marginTop: "10px",
-                marginBottom: "10px",
-              }}
-            />
-          </div>
-        </div>
-      )}
-
       <section className="calendario-ou-filaespera">
         <div className="fila-container">
           <h2 className="fila-titulo">
-            {editando
-              ? "Editar Disponibilidade"
-              : gerenciarModo
-              ? "Gerenciar Disponibilidades"
-              : "Disponibilidades Encontradas"}{" "}
+            {editando ? "Editar Disponibilidade" : "Lista de Disponibilidades"}{" "}
             ({disponibilidades.length})
           </h2>
 
@@ -256,51 +276,79 @@ const initialAvailabilityParaEdicao = diasDaSemana.map((dia, weekdayIndex) => {
               </button>
             </>
           ) : (
-            <table style={{ width: "100%", borderCollapse: "collapse" }}>
+            <table className="fila-tabela">
               <thead>
                 <tr>
+                  <th>Médico</th>
                   <th>Dia da Semana</th>
                   <th>Início</th>
                   <th>Término</th>
-                  <th>Intervalo</th>
-                  <th>Tipo Consulta</th>
-                  {gerenciarModo && <th>Ações</th>}
+                  <th>Intervalo (min)</th>
+                  <th>Tipo</th>
+                  <th>Status</th>
+                  <th>Ações</th>
                 </tr>
               </thead>
               <tbody>
-                {disponibilidades.map((disp) => (
-                  <tr key={disp.id}>
-                    <td>{diasDaSemana[disp.weekday]}</td>
-                    <td>{formatarDataHora(disp.start_time)}</td>
-                    <td>{formatarDataHora(disp.end_time)}</td>
-                    <td>{disp.slot_minutes}</td>
-                    <td>{disp.appointment_type}</td>
-                    {gerenciarModo && (
+                {disponibilidades.map((disp) => {
+                  const medico = doctors.find((d) => d.id === disp.doctor_id);
+                  return (
+                    <tr key={disp.id}>
+                      <td>{medico ? medico.name : disp.doctor_id}</td>
+                      <td>{diasDaSemana[disp.weekday]}</td>
+                      <td>{disp.start_time}</td>
+                      <td>{disp.end_time}</td>
+                      <td>{disp.slot_minutes || 30}</td>
+                      <td>{disp.appointment_type || "presencial"}</td>
                       <td>
+                        <span
+                          className={`badge ${
+                            disp.active === false
+                              ? "badge-inactive"
+                              : "badge-active"
+                          }`}
+                        >
+                          {disp.active === false ? "Inativa" : "Ativa"}
+                        </span>
+                      </td>
+                      <td>
+                      <div style={{ display: "flex", gap: "8px" }}>
                         <button
-                          onClick={() => setEditando(disp.id)}
+                          className="btn btn-sm btn-edit"
                           style={{
-                            backgroundColor: "#10b981",
+                            backgroundColor: "#3b82f6",
                             color: "white",
+                            border: "none",
                             borderRadius: "6px",
+                            padding: "6px 10px",
+                            cursor: "pointer",
+                            fontWeight: "bold",
                           }}
+                          onClick={() => console.log("Editar clicado")}
                         >
                           Editar
-                        </button>{" "}
+                        </button>
+
                         <button
-                          onClick={() => deletarDisponibilidade(disp.id)}
+                          className="btn btn-sm btn-delete"
                           style={{
-                            backgroundColor: "#c72f2f",
+                            backgroundColor: "#ef4444",
                             color: "white",
+                            border: "none",
                             borderRadius: "6px",
+                            padding: "6px 10px",
+                            cursor: "pointer",
+                            fontWeight: "bold",
                           }}
+                          onClick={() => console.log("Excluir clicado")}
                         >
                           Excluir
                         </button>
+                      </div>
                       </td>
-                    )}
-                  </tr>
-                ))}
+                    </tr>
+                  );
+                })}
               </tbody>
             </table>
           )}