Merge branch 'Disponibilidade5'

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,7 +69,7 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
   }, [authHeader]);
 
   useEffect(() => {
-<<<<<<< HEAD
+<<<<<<< Updated upstream
     ChamarMedicos();
   }, [ChamarMedicos]);
 =======
@@ -78,7 +78,7 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
     setHorarioInicio(formatarHora(agendamento.scheduled_at));
   }
   }, [])
->>>>>>> melhoriasAgendamentos
+>>>>>>> Stashed changes
 
   useEffect(() => {
     if (!agendamento.dataAtendimento || !agendamento.doctor_id) return;

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 =
+const ENDPOINT_AVAILABILITY = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
-  "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability";
 
 function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const navigate = useNavigate();
   const location = useLocation();
-
+  const { 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) => {
+  const handleAvailabilityUpdate = useCallback((newAvailability) => {
-  setFormData((prev) => {
+    setFormData((prev) => {
-    if (JSON.stringify(prev.availability) !== JSON.stringify(newAvailability)) {
+      if (JSON.stringify(prev.availability) !== JSON.stringify(newAvailability)) {
-      return { ...prev, availability: newAvailability };
+        return { ...prev, availability: newAvailability };
-    }
+      }
-    return prev;
+      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: {
+        headers: myHeaders,
-          "Content-Type": "application/json",
+        body: JSON.stringify({
-        },
+          doctor_id: doctorId,
-        body: JSON.stringify(newAvailability),
+          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);
+      console.log("Disponibilidade criada:", data);
-      alert("Disponibilidade criada com sucesso!");
+      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);
+      console.error("Erro ao salvar médico ou disponibilidade:", error);
-      alert("Erro ao salvar médico.");
+      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);
+    if (onUpdate) onUpdate(availability);
-   }, [availability, onUpdate]);
+  }, [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>
-  );
 
   return (
-    <div
+    <div className="horarios-container">
-      style={{
+      {availability.map((day, dayIndex) => (
-        maxWidth: "960px",
+        <div key={day.dia} className="day-card">
-        margin: "0 auto",
+          <div
-        fontFamily: "Inter, sans-serif",
+            className={`day-header ${day.isChecked ? "checked" : ""}`}
-      }}
+            onClick={() => handleDayCheck(dayIndex, day.isChecked)}
-    >
+          >
-      <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+            <label>
-        {availability.map((day, dayIndex) => {
+              <span>{day.dia}</span>
-          const isChecked = day.isChecked;
+              <input type="checkbox" checked={day.isChecked} readOnly />
+            </label>
+          </div>
 
-          const dayHeaderStyle = {
+          {day.isChecked && (
-            display: "flex",
+            <div className="blocks-section">
-            alignItems: "center",
+              <div className="blocks-grid">
-            justifyContent: "space-between",
+                {day.blocos.map((bloco) => (
-            padding: "12px 0",
+                  <div
-            borderBottom: "1px solid #e5e7eb",
+                    key={bloco.id}
-            marginBottom: "16px",
+                    className={`time-block ${bloco.isNew ? "new" : ""}`}
-            backgroundColor: isChecked ? "#1f2937" : "#f9fafb",
+                  >
-            borderRadius: "8px",
+                    <div className="time-inputs">
-            paddingLeft: "16px",
+                      <label>
-            paddingRight: "16px",
+                        Início:
-            cursor: "pointer",
+                        <div className="input-wrapper">
-            transition: "background-color 0.2s",
+                          <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 (
+                      <label>
-            <div
+                        Término:
-              key={day.dia}
+                        <div className="input-wrapper">
-              style={{
+                          <input
-                backgroundColor: "#f9fafb",
+                            type="time"
-                padding: "8px",
+                            value={bloco.termino}
-                borderRadius: "10px",
+                            onChange={(e) =>
-                border: "1px solid #e5e7eb",
+                              handleTimeChange(
-              }}
+                                dayIndex,
-            >
+                                bloco.id,
-              <div
+                                "termino",
-                style={{
+                                e.target.value
-                  ...dayHeaderStyle,
+                              )
-                  backgroundColor: isChecked ? "#1f2937" : "#f9fafb",
+                            }
-                  borderBottom: isChecked
+                          />
-                    ? "1px solid #4b5563"
+                          <Clock className="clock-icon" size={14} />
-                    : "1px solid #e5e7eb",
+                        </div>
-                }}
+                      </label>
-                onClick={() => handleDayCheck(dayIndex, isChecked)}
+                    </div>
-              >
+
-                <label
+                    <button
-                  style={{
+                      className="btn-remove"
-                    fontSize: "18px",
+                      onClick={() => handleRemoveBlock(dayIndex, bloco.id)}
-                    fontWeight: "bold",
+                    >
-                    color: isChecked ? "white" : "#1f2937",
+                      Remover
-                    display: "flex",
+                    </button>
-                    alignItems: "center",
+                  </div>
-                    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>
               </div>
 
-              {isChecked && (
+              <button
-                <div style={{ marginTop: "16px" }}>
+                className="btn-add"
-                  {day.blocos.length === 0 && (
+                onClick={() => handleAddBlock(dayIndex)}
-                    <p
+              >
-                      style={{
+                + Adicionar novo bloco
-                        color: "#6b7280",
+              </button>
-                        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>
-              )}
             </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 =
+import { useAuth } from "../components/utils/AuthProvider";
-  "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability";
+import API_KEY from "../components/utils/apiKeys";
+import { GetAllDoctors } from "../components/utils/Functions-Endpoints/Doctor";
 
-const MEDICOS_MOCKADOS = [
+const ENDPOINT =
-  { id: 53, nome: "João Silva" },
+  "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
-  { id: 19, nome: "Ana Costa" },
-  { id: 11, nome: "Pedro Santos" },
-];
 
 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 [doctors, setDoctors] = useState([]);
-  const [gerenciarModo, setGerenciarModo] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
-  const [editando, setEditando] = useState(null); // ID da disponibilidade sendo editada
+  const [selectedDoctor, setSelectedDoctor] = useState(null);
+  const [editando, setEditando] = useState(null);
+  const [doctorsLoading, setDoctorsLoading] = useState(true);
 
-  const encontrarMedicoIdPorNome = (nome) => {
+  useEffect(() => {
-    if (!nome) return null;
+    const fetchDoctors = async () => {
-    const termo = nome.toLowerCase();
+      try {
-    const medico = MEDICOS_MOCKADOS.find((m) =>
+        setDoctorsLoading(true);
-      m.nome.toLowerCase().includes(termo)
+        const data = await GetAllDoctors();
-    );
+        console.log("Médicos recebidos:", data);
-    return medico ? medico.id : null;
+        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) => {
+  const getHeaders = () => {
-    setLoading(true);
+    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);
+  const fetchDisponibilidades = useCallback(async (doctorId = null) => {
-    if (!doctorId) {
+    setLoading(true);
-      setLoading(false);
+    let url = ENDPOINT;
-      return;
+    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 : []);
-      setDisponibilidades(
-        Array.isArray(data)
-          ? data
-          : data && Array.isArray(data.items)
-          ? data.items
-          : []
-      );
     } 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) {
+    if (selectedDoctor) {
-      setEditando(null);
+      fetchDisponibilidades(selectedDoctor.id);
-    }
-  }, [gerenciarModo]);
-
-  useEffect(() => {
-    if (editando) return;
-    if (filtroMedicoNome) {
-      const timer = setTimeout(() => {
-        fetchDisponibilidades(filtroMedicoNome);
-      }, 300);
-
-      return () => clearTimeout(timer);
     } 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",
+        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
+        headers: getHeaders(),
-        body: JSON.stringify({ slot_minutes: novoIntervalo }),
+        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
+  const initialAvailabilityParaEdicao = useMemo(
-    ? disponibilidades.find((d) => d.id === editando)
+    () =>
-    : null;
+      diasDaSemana.map((dia, weekdayIndex) => {
-
+        const blocosDoDia = disponibilidades
-const initialAvailabilityParaEdicao = diasDaSemana.map((dia, weekdayIndex) => {
+          .filter((d) => d.weekday === weekdayIndex && d.active !== false)
-  const blocosDoDia = disponibilidades
+          .map((d) => ({
-    .filter(d => d.weekday === weekdayIndex)
+            id: d.id,
-    .map(d => ({
+            inicio: d.start_time ? d.start_time.substring(0, 5) : "07:00",
-      id: d.id,
+            termino: d.end_time ? d.end_time.substring(0, 5) : "17:00",
-      inicio: d.start_time
+            isNew: false,
-        ? new Date(d.start_time).toISOString().substring(11, 16)
+            slot_minutes: d.slot_minutes || 30,
-        : "07:00",
+            appointment_type: d.appointment_type || "presencial",
-      termino: d.end_time
+            active: d.active !== false,
-        ? new Date(d.end_time).toISOString().substring(11, 16)
+          }));
-        : "17:00",
+        return {
-      isNew: false,
+          dia,
-      slot_minutes: d.slot_minutes,
+          weekday: weekdayIndex,
-    }));
+          isChecked: blocosDoDia.length > 0,
-
+          blocos: blocosDoDia,
-  return {
+        };
-    dia,
+      }),
-    isChecked: blocosDoDia.length > 0,
+    [disponibilidades]
-    blocos: blocosDoDia,
+  );
-  };
-});
 
   const handleUpdateHorarios = (horariosAtualizados) => {
-    console.log("Horários editados:", horariosAtualizados);
+    const bloco = horariosAtualizados
-
+      .flatMap((d) => d.blocos)
-    setEditando(null);
+      .find((b) => b.id === editando);
-    fetchDisponibilidades(filtroMedicoNome);
+    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 */}
+      <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#333" }}>
-      <div
+        Disponibilidades dos Médicos
-        style={{
+      </h1>
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#333" }}>
-          Disponibilidades por Médico
-        </h1>
 
-        {/* Botão Voltar/Gerenciar */}
+      <div style={{ marginTop: "10px", marginBottom: "10px" }}>
-        <button
+        <input
-          onClick={() => {
+          type="text"
-            if (editando) {
+          placeholder="Buscar médico por nome..."
-              setEditando(null); // Se está editando, volta para a tabela
+          value={searchTerm}
-            } else {
+          onChange={(e) => {
-              setGerenciarModo((m) => !m); // Senão, alterna o modo de gerenciamento
+            setSearchTerm(e.target.value);
-            }
+            setSelectedDoctor(null);
           }}
-          className="btn-primary"
           style={{
-            padding: "10px 20px",
+            border: "1px solid #ccc",
-            fontSize: "14px",
+            borderRadius: "4px",
-            whiteSpace: "nowrap",
+            padding: "6px",
+            width: "300px",
           }}
-        >
+        />
-          {editando
+        {searchTerm && (
-            ? "← Voltar para Tabela"
+          <ul
-            : gerenciarModo
+            style={{
-            ? "← Voltar"
+              border: "1px solid #ddd",
-            : "+ Gerenciar Disponibilidades"}
+              borderRadius: "4px",
-        </button>
+              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
+            {editando ? "Editar Disponibilidade" : "Lista de Disponibilidades"}{" "}
-              ? "Editar Disponibilidade"
-              : gerenciarModo
-              ? "Gerenciar Disponibilidades"
-              : "Disponibilidades Encontradas"}{" "}
             ({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>Intervalo (min)</th>
-                  <th>Tipo Consulta</th>
+                  <th>Tipo</th>
-                  {gerenciarModo && <th>Ações</th>}
+                  <th>Status</th>
+                  <th>Ações</th>
                 </tr>
               </thead>
               <tbody>
-                {disponibilidades.map((disp) => (
+                {disponibilidades.map((disp) => {
-                  <tr key={disp.id}>
+                  const medico = doctors.find((d) => d.id === disp.doctor_id);
-                    <td>{diasDaSemana[disp.weekday]}</td>
+                  return (
-                    <td>{formatarDataHora(disp.start_time)}</td>
+                    <tr key={disp.id}>
-                    <td>{formatarDataHora(disp.end_time)}</td>
+                      <td>{medico ? medico.name : disp.doctor_id}</td>
-                    <td>{disp.slot_minutes}</td>
+                      <td>{diasDaSemana[disp.weekday]}</td>
-                    <td>{disp.appointment_type}</td>
+                      <td>{disp.start_time}</td>
-                    {gerenciarModo && (
+                      <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>
           )}