package.json

@@ -23,7 +23,6 @@
     "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",
@@ -84,4 +83,4 @@
   "overrides": {
     "react": "$react"
   }
-}
+}

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -69,16 +69,8 @@ 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, useEffect } from "react";
+import React, { useState } 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,13 +18,6 @@ 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 => ({
@@ -33,52 +26,6 @@ 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.");
@@ -90,13 +37,6 @@ 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;
         
@@ -130,13 +70,13 @@ const FormCriarExcecao = ({ onCancel, doctorID }) => {
         const raw = JSON.stringify({
             doctor_id: profissional,
             date: dataAtendimento,
-            kind: mappedKind,
+            kind: tipoAtendimento,
             start_time: startTime,
             end_time: endTime,
             reason: motivo,
             created_by: createdBy
         });
-
+        
         var myHeaders = new Headers();
         if (authHeader) myHeaders.append("Authorization", authHeader);
         myHeaders.append("Content-Type", "application/json");
@@ -179,36 +119,13 @@ 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
+                        <input 
-                            type="text"
+                            type="text" 
-                            name="profissional"
+                            name="profissional" 
-                            required
+                            required 
                             value={dadosAtendimento.profissional}
                             onChange={handleAtendimentoChange}
                         />
@@ -217,11 +134,12 @@ 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="" disabled>Selecione o tipo de exceção</option>
+                            <option value="">Selecione o tipo de exceção</option>
-                            <option value="disponibilidade_extra" >Liberação</option>
+                            <option value="liberacao" >Liberação (Criar Slot)</option>
-                            <option value="bloqueio" >Bloqueio</option>
+                            <option value="bloqueio" >Bloqueio (Remover Slot)</option>
                         </select>
                     </div>
+
                 </div>
 
                 <section id="informacoes-atendimento-segunda-linha">

src/components/doctors/DoctorForm.jsx

@@ -1,18 +1,15 @@
 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://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
+const ENDPOINT_AVAILABILITY =
+  "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability";
 
 function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const navigate = useNavigate();
   const location = useLocation();
-  const { getAuthorizationHeader } = useAuth();
+
 
   const FormatTelefones = (valor) => {
     const digits = String(valor).replace(/\D/g, "").slice(0, 11);
@@ -57,6 +54,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     );
   };
 
+
   const [avatarUrl, setAvatarUrl] = useState(null);
   const [showRequiredModal, setShowRequiredModal] = useState(false);
   const [emptyFields, setEmptyFields] = useState([]);
@@ -76,15 +74,6 @@ 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,
@@ -137,14 +126,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, "");
@@ -224,68 +213,21 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       }
     }, 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: myHeaders,
+        headers: {
-        body: JSON.stringify({
+          "Content-Type": "application/json",
-          doctor_id: doctorId,
+        },
-          availability: availabilityData,
+        body: JSON.stringify(newAvailability),
-          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);
-      return data;
+      alert("Disponibilidade criada com sucesso!");
     } catch (error) {
       console.error("Erro ao criar disponibilidade:", error);
-      throw error;
+      alert("Erro ao criar disponibilidade.");
-    }
-  };
-
-  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;
     }
   };
 
@@ -328,29 +270,23 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     }
 
     try {
-      const savedDoctor = await onSave({ ...formData });
+      await onSave({ ...formData });
 
-      if (formData.availability && formData.availability.length > 0 && savedDoctor.id) {
+      if (formData.availability && formData.availability.length > 0) {
-        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 ou disponibilidade:", error);
+      console.error("Erro ao salvar médico:", error);
-      alert("Erro ao salvar médico ou disponibilidade.");
+      alert("Erro ao salvar médico.");
-    }
+    };
   };
 
   const handleModalClose = () => {
     setShowRequiredModal(false);
   };
 
+
   return (
     <>
       {/* Modal de Alerta */}
@@ -791,4 +727,4 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   );
 }
 
-export default DoctorForm;
+export default DoctorForm;

src/components/doctors/HorariosDisponibilidade.css

@@ -1,154 +0,0 @@
-.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,6 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
 import { Clock } from "lucide-react";
-import "./HorariosDisponibilidade.css";
 
 const initialBlockTemplate = {
   id: null,
@@ -37,6 +36,7 @@ const HorariosDisponibilidade = ({
 
   const handleDayCheck = useCallback((dayIndex, currentIsChecked) => {
     const isChecked = !currentIsChecked;
+
     setAvailability((prev) =>
       prev.map((day, i) =>
         i === dayIndex
@@ -63,6 +63,7 @@ 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
@@ -108,91 +109,298 @@ 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 className="horarios-container">
+    <div
-      {availability.map((day, dayIndex) => (
+      style={{
-        <div key={day.dia} className="day-card">
+        maxWidth: "960px",
-          <div
+        margin: "0 auto",
-            className={`day-header ${day.isChecked ? "checked" : ""}`}
+        fontFamily: "Inter, sans-serif",
-            onClick={() => handleDayCheck(dayIndex, day.isChecked)}
+      }}
-          >
+    >
-            <label>
+      <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-              <span>{day.dia}</span>
+        {availability.map((day, dayIndex) => {
-              <input type="checkbox" checked={day.isChecked} readOnly />
+          const isChecked = day.isChecked;
-            </label>
-          </div>
 
-          {day.isChecked && (
+          const dayHeaderStyle = {
-            <div className="blocks-section">
+            display: "flex",
-              <div className="blocks-grid">
+            alignItems: "center",
-                {day.blocos.map((bloco) => (
+            justifyContent: "space-between",
-                  <div
+            padding: "12px 0",
-                    key={bloco.id}
+            borderBottom: "1px solid #e5e7eb",
-                    className={`time-block ${bloco.isNew ? "new" : ""}`}
+            marginBottom: "16px",
-                  >
+            backgroundColor: isChecked ? "#1f2937" : "#f9fafb",
-                    <div className="time-inputs">
+            borderRadius: "8px",
-                      <label>
+            paddingLeft: "16px",
-                        Início:
+            paddingRight: "16px",
-                        <div className="input-wrapper">
+            cursor: "pointer",
-                          <input
+            transition: "background-color 0.2s",
-                            type="time"
+          };
-                            value={bloco.inicio}
-                            onChange={(e) =>
-                              handleTimeChange(
-                                dayIndex,
-                                bloco.id,
-                                "inicio",
-                                e.target.value
-                              )
-                            }
-                          />
-                          <Clock className="clock-icon" size={14} />
-                        </div>
-                      </label>
 
-                      <label>
+          return (
-                        Término:
+            <div
-                        <div className="input-wrapper">
+              key={day.dia}
-                          <input
+              style={{
-                            type="time"
+                backgroundColor: "#f9fafb",
-                            value={bloco.termino}
+                padding: "8px",
-                            onChange={(e) =>
+                borderRadius: "10px",
-                              handleTimeChange(
+                border: "1px solid #e5e7eb",
-                                dayIndex,
+              }}
-                                bloco.id,
+            >
-                                "termino",
+              <div
-                                e.target.value
+                style={{
-                              )
+                  ...dayHeaderStyle,
-                            }
+                  backgroundColor: isChecked ? "#1f2937" : "#f9fafb",
-                          />
+                  borderBottom: isChecked
-                          <Clock className="clock-icon" size={14} />
+                    ? "1px solid #4b5563"
-                        </div>
+                    : "1px solid #e5e7eb",
-                      </label>
+                }}
-                    </div>
+                onClick={() => handleDayCheck(dayIndex, isChecked)}
-
+              >
-                    <button
+                <label
-                      className="btn-remove"
+                  style={{
-                      onClick={() => handleRemoveBlock(dayIndex, bloco.id)}
+                    fontSize: "18px",
-                    >
+                    fontWeight: "bold",
-                      Remover
+                    color: isChecked ? "white" : "#1f2937",
-                    </button>
+                    display: "flex",
-                  </div>
+                    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>
               </div>
 
-              <button
+              {isChecked && (
-                className="btn-add"
+                <div style={{ marginTop: "16px" }}>
-                onClick={() => handleAddBlock(dayIndex)}
+                  {day.blocos.length === 0 && (
-              >
+                    <p
-                + Adicionar novo bloco
+                      style={{
-              </button>
+                        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>
+              )}
             </div>
-          )}
+          );
-        </div>
+        })}
-      ))}
+      </div>
     </div>
   );
 };

src/pages/DisponibilidadesDoctorPage.jsx

@@ -1,75 +1,68 @@
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import HorariosDisponibilidade from "../components/doctors/HorariosDisponibilidade";
-import { useAuth } from "../components/utils/AuthProvider";
-import API_KEY from "../components/utils/apiKeys";
-import { GetAllDoctors } from "../components/utils/Functions-Endpoints/Doctor";
-
 const ENDPOINT =
-  "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
+  "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability";
+
+const MEDICOS_MOCKADOS = [
+  { id: 53, nome: "João Silva" },
+  { 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 [doctors, setDoctors] = useState([]);
+  const [filtroMedicoNome, setFiltroMedicoNome] = useState("");
-  const [searchTerm, setSearchTerm] = useState("");
+  const [gerenciarModo, setGerenciarModo] = useState(false);
-  const [selectedDoctor, setSelectedDoctor] = useState(null);
+  const [editando, setEditando] = useState(null); // ID da disponibilidade sendo editada
-  const [editando, setEditando] = useState(null);
-  const [doctorsLoading, setDoctorsLoading] = useState(true);
 
-  useEffect(() => {
+  const encontrarMedicoIdPorNome = (nome) => {
-    const fetchDoctors = async () => {
+    if (!nome) return null;
-      try {
+    const termo = nome.toLowerCase();
-        setDoctorsLoading(true);
+    const medico = MEDICOS_MOCKADOS.find((m) =>
-        const data = await GetAllDoctors();
+      m.nome.toLowerCase().includes(termo)
-        console.log("Médicos recebidos:", data);
+    );
-        setDoctors(Array.isArray(data) ? data : []);
+    return medico ? medico.id : null;
-      } 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 getHeaders = () => {
+  const fetchDisponibilidades = useCallback(async (nome) => {
-    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 fetchDisponibilidades = useCallback(async (doctorId = null) => {
     setLoading(true);
-    let url = ENDPOINT;
+
-    if (doctorId) {
+    const doctorId = encontrarMedicoIdPorNome(nome);
-      url += `?doctor_id=eq.${doctorId}&select=*&order=weekday.asc,start_time.asc`;
+    if (!doctorId) {
-    } else {
+      setLoading(false);
-      url += `?select=*&order=doctor_id.asc,weekday.asc,start_time.asc`;
+      return;
     }
     try {
-      const res = await fetch(url, { method: "GET", headers: getHeaders() });
+      const res = await fetch(`${ENDPOINT}?doctor_id=eq.${doctorId}`);
-      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);
@@ -77,32 +70,39 @@ const DisponibilidadesDoctorPage = () => {
   }, []);
 
   useEffect(() => {
-    if (selectedDoctor) {
+    if (!gerenciarModo && editando) {
-      fetchDisponibilidades(selectedDoctor.id);
+      setEditando(null);
-    } else {
-      fetchDisponibilidades(null);
     }
-  }, [selectedDoctor, fetchDisponibilidades]);
+  }, [gerenciarModo]);
 
-  const atualizarDisponibilidade = async (id, dadosAtualizados) => {
+  useEffect(() => {
+    if (editando) return;
+    if (filtroMedicoNome) {
+      const timer = setTimeout(() => {
+        fetchDisponibilidades(filtroMedicoNome);
+      }, 300);
+
+      return () => clearTimeout(timer);
+    } else {
+      setDisponibilidades([]);
+    }
+  }, [filtroMedicoNome, fetchDisponibilidades, editando]);
+
+  const atualizarDisponibilidade = async (id, novoIntervalo) => {
     try {
       const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
-        method: "PATCH",
+        method: "PUT",
-        headers: getHeaders(),
+        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(dadosAtualizados),
+        body: JSON.stringify({ slot_minutes: novoIntervalo }),
       });
       if (res.ok) {
         alert("Disponibilidade atualizada com sucesso!");
         setEditando(null);
-        if (selectedDoctor) fetchDisponibilidades(selectedDoctor.id);
+        fetchDisponibilidades(filtroMedicoNome);
-        else fetchDisponibilidades();
       } else {
-        const errorData = await res.json();
-        console.error("Erro na resposta:", errorData);
         alert("Erro ao atualizar disponibilidade");
       }
-    } catch (error) {
+    } catch {
-      console.error("Erro:", error);
       alert("Falha ao conectar com o servidor");
     }
   };
@@ -111,138 +111,118 @@ const DisponibilidadesDoctorPage = () => {
     if (!window.confirm("Deseja realmente excluir esta disponibilidade?"))
       return;
     try {
-      const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
+      const res = await fetch(`${ENDPOINT}?id=eq.${id}`, { method: "DELETE" });
-        method: "DELETE",
-        headers: getHeaders(),
-      });
       if (res.ok) {
-        alert("Disponibilidade excluída com sucesso!");
+        alert("Disponibilidade excluída!");
         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 (error) {
+    } catch {
-      console.error("Erro:", error);
       alert("Erro ao conectar com o servidor");
     }
   };
 
-  const initialAvailabilityParaEdicao = useMemo(
+  const disponibilidadeParaEdicao = editando
-    () =>
+    ? disponibilidades.find((d) => d.id === editando)
-      diasDaSemana.map((dia, weekdayIndex) => {
+    : null;
-        const blocosDoDia = disponibilidades
+
-          .filter((d) => d.weekday === weekdayIndex && d.active !== false)
+const initialAvailabilityParaEdicao = diasDaSemana.map((dia, weekdayIndex) => {
-          .map((d) => ({
+  const blocosDoDia = disponibilidades
-            id: d.id,
+    .filter(d => d.weekday === weekdayIndex)
-            inicio: d.start_time ? d.start_time.substring(0, 5) : "07:00",
+    .map(d => ({
-            termino: d.end_time ? d.end_time.substring(0, 5) : "17:00",
+      id: d.id,
-            isNew: false,
+      inicio: d.start_time
-            slot_minutes: d.slot_minutes || 30,
+        ? new Date(d.start_time).toISOString().substring(11, 16)
-            appointment_type: d.appointment_type || "presencial",
+        : "07:00",
-            active: d.active !== false,
+      termino: d.end_time
-          }));
+        ? new Date(d.end_time).toISOString().substring(11, 16)
-        return {
+        : "17:00",
-          dia,
+      isNew: false,
-          weekday: weekdayIndex,
+      slot_minutes: d.slot_minutes,
-          isChecked: blocosDoDia.length > 0,
+    }));
-          blocos: blocosDoDia,
+
-        };
+  return {
-      }),
+    dia,
-    [disponibilidades]
+    isChecked: blocosDoDia.length > 0,
-  );
+    blocos: blocosDoDia,
+  };
+});
 
   const handleUpdateHorarios = (horariosAtualizados) => {
-    const bloco = horariosAtualizados
+    console.log("Horários editados:", 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(() => {
+    setEditando(null);
-    if (!searchTerm) return doctors;
+    fetchDisponibilidades(filtroMedicoNome);
-    return doctors.filter((doc) =>
+  };
-      doc.name.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-  }, [doctors, searchTerm]);
 
   return (
     <div id="main-content">
-      <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#333" }}>
+      {/* Cabeçalho */}
-        Disponibilidades dos Médicos
+      <div
-      </h1>
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#333" }}>
+          Disponibilidades por Médico
+        </h1>
 
-      <div style={{ marginTop: "10px", marginBottom: "10px" }}>
+        {/* Botão Voltar/Gerenciar */}
-        <input
+        <button
-          type="text"
+          onClick={() => {
-          placeholder="Buscar médico por nome..."
+            if (editando) {
-          value={searchTerm}
+              setEditando(null); // Se está editando, volta para a tabela
-          onChange={(e) => {
+            } else {
-            setSearchTerm(e.target.value);
+              setGerenciarModo((m) => !m); // Senão, alterna o modo de gerenciamento
-            setSelectedDoctor(null);
+            }
           }}
+          className="btn-primary"
           style={{
-            border: "1px solid #ccc",
+            padding: "10px 20px",
-            borderRadius: "4px",
+            fontSize: "14px",
-            padding: "6px",
+            whiteSpace: "nowrap",
-            width: "300px",
           }}
-        />
+        >
-        {searchTerm && (
+          {editando
-          <ul
+            ? "← Voltar para Tabela"
-            style={{
+            : gerenciarModo
-              border: "1px solid #ddd",
+            ? "← Voltar"
-              borderRadius: "4px",
+            : "+ Gerenciar Disponibilidades"}
-              backgroundColor: "white",
+        </button>
-              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" : "Lista de Disponibilidades"}{" "}
+            {editando
+              ? "Editar Disponibilidade"
+              : gerenciarModo
+              ? "Gerenciar Disponibilidades"
+              : "Disponibilidades Encontradas"}{" "}
             ({disponibilidades.length})
           </h2>
 
@@ -276,79 +256,51 @@ const DisponibilidadesDoctorPage = () => {
               </button>
             </>
           ) : (
-            <table className="fila-tabela">
+            <table style={{ width: "100%", borderCollapse: "collapse" }}>
               <thead>
                 <tr>
-                  <th>Médico</th>
                   <th>Dia da Semana</th>
                   <th>Início</th>
                   <th>Término</th>
-                  <th>Intervalo (min)</th>
+                  <th>Intervalo</th>
-                  <th>Tipo</th>
+                  <th>Tipo Consulta</th>
-                  <th>Status</th>
+                  {gerenciarModo && <th>Ações</th>}
-                  <th>Ações</th>
                 </tr>
               </thead>
               <tbody>
-                {disponibilidades.map((disp) => {
+                {disponibilidades.map((disp) => (
-                  const medico = doctors.find((d) => d.id === disp.doctor_id);
+                  <tr key={disp.id}>
-                  return (
+                    <td>{diasDaSemana[disp.weekday]}</td>
-                    <tr key={disp.id}>
+                    <td>{formatarDataHora(disp.start_time)}</td>
-                      <td>{medico ? medico.name : disp.doctor_id}</td>
+                    <td>{formatarDataHora(disp.end_time)}</td>
-                      <td>{diasDaSemana[disp.weekday]}</td>
+                    <td>{disp.slot_minutes}</td>
-                      <td>{disp.start_time}</td>
+                    <td>{disp.appointment_type}</td>
-                      <td>{disp.end_time}</td>
+                    {gerenciarModo && (
-                      <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
-                          className="btn btn-sm btn-edit"
+                          onClick={() => setEditando(disp.id)}
                           style={{
-                            backgroundColor: "#3b82f6",
+                            backgroundColor: "#10b981",
                             color: "white",
-                            border: "none",
                             borderRadius: "6px",
-                            padding: "6px 10px",
-                            cursor: "pointer",
-                            fontWeight: "bold",
                           }}
-                          onClick={() => console.log("Editar clicado")}
                         >
                           Editar
-                        </button>
+                        </button>{" "}
-
                         <button
-                          className="btn btn-sm btn-delete"
+                          onClick={() => deletarDisponibilidade(disp.id)}
                           style={{
-                            backgroundColor: "#ef4444",
+                            backgroundColor: "#c72f2f",
                             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>
           )}