Melhorias da disponibilidade

src/pages/DisponibilidadesDoctorPage.jsx

@@ -1,115 +1,166 @@
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useMemo } 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";
+import "./style/DisponibilidadesDoctorPage.css";
 
-const ENDPOINT =
+const ENDPOINT = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
-  "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
+const DOCTORS_ENDPOINT = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors";
 
-const diasDaSemana = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];
+const diasDaSemana = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
 
-const DisponibilidadesDoctorPage = () => {
+const DisponibilidadesDoctorPage = ( ) => {
   const { getAuthorizationHeader } = useAuth();
   const [disponibilidades, setDisponibilidades] = useState([]);
-  const [loading, setLoading] = useState(false);
   const [doctors, setDoctors] = useState([]);
   const [searchTerm, setSearchTerm] = useState("");
-  const [selectedDoctor, setSelectedDoctor] = useState(null);
   const [editando, setEditando] = useState(null);
-  const [doctorsLoading, setDoctorsLoading] = useState(true);
+  const [expandedDoctors, setExpandedDoctors] = useState({});
-
+  const [showSuggestions, setShowSuggestions] = useState(false);
-  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 getHeaders = () => {
     const myHeaders = new Headers();
-    const authHeader = resolveAuthHeader();
+    const authHeader = getAuthorizationHeader();
     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) => {
+  useEffect(() => {
-    setLoading(true);
+    const fetchDoctors = async () => {
-    let url = ENDPOINT;
+      try {
-    if (doctorId) {
+        const requestOptions = {
-      url += `?doctor_id=eq.${doctorId}&select=*&order=weekday.asc,start_time.asc`;
+          method: 'GET',
-    } else {
+          headers: getHeaders(),
-      url += `?select=*&order=doctor_id.asc,weekday.asc,start_time.asc`;
+        };
-    }
+
-    try {
+        const response = await fetch(DOCTORS_ENDPOINT, requestOptions);
-      const res = await fetch(url, { method: "GET", headers: getHeaders() });
+        const result = await response.json();
-      if (!res.ok) throw new Error(`Erro HTTP: ${res.status}`);
+        setDoctors(Array.isArray(result) ? result : []);
-      const data = await res.json();
+      } catch (error) {
-      setDisponibilidades(Array.isArray(data) ? data : []);
+        console.error("Erro ao carregar médicos:", error);
-    } catch (e) {
+        setDoctors([]);
-      console.error("Erro ao buscar disponibilidades:", e);
+      }
-      alert("Erro ao carregar disponibilidades");
+    };
-      setDisponibilidades([]);
+    fetchDoctors();
-    } finally {
+  }, [getAuthorizationHeader]);
-      setLoading(false);
-    }
-  }, []);
 
   useEffect(() => {
-    if (selectedDoctor) {
+    const fetchDisponibilidades = async () => {
-      fetchDisponibilidades(selectedDoctor.id);
+      try {
-    } else {
+        const res = await fetch(ENDPOINT, { 
-      fetchDisponibilidades(null);
+          method: "GET", 
-    }
+          headers: getHeaders() 
-  }, [selectedDoctor, fetchDisponibilidades]);
+        });
+        if (res.ok) {
+          const data = await res.json();
+          setDisponibilidades(Array.isArray(data) ? data : []);
+        }
+      } catch (error) {
+        console.error("Erro ao buscar disponibilidades:", error);
+        setDisponibilidades([]);
+      }
+    };
+    fetchDisponibilidades();
+  }, [getAuthorizationHeader]);
 
-  const atualizarDisponibilidade = async (id, dadosAtualizados) => {
+  const toggleExpandDoctor = (doctorId) => {
+    setExpandedDoctors((prev) => ({
+      ...prev,
+      [doctorId]: !prev[doctorId],
+    }));
+  };
+
+  const salvarTodasDisponibilidades = async (doctorId, horariosAtualizados) => {
     try {
-      const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
+      const headers = getHeaders();
-        method: "PATCH",
+      
-        headers: getHeaders(),
+      // 1. Obter as disponibilidades existentes para este médico
-        body: JSON.stringify(dadosAtualizados),
+      const existingDisponibilidadesRes = await fetch(`${ENDPOINT}?doctor_id=eq.${String(doctorId)}`, {
+        method: "GET",
+        headers,
+      });
+      const existingDisponibilidades = existingDisponibilidadesRes.ok ? await existingDisponibilidadesRes.json() : [];
+
+      const disponibilidadesParaManter = new Set();
+
+      for (const dia of horariosAtualizados) {
+        if (dia.isChecked && dia.blocos.length > 0) {
+          // Processar blocos de horários
+          for (const bloco of dia.blocos) {
+            const inicio = bloco.inicio.includes(":") ? bloco.inicio : bloco.inicio + ":00";
+            const termino = bloco.termino.includes(":") ? bloco.termino : bloco.termino + ":00";
+
+            const payload = {
+              doctor_id: doctorId,
+              weekday: dia.weekday,
+              start_time: inicio,
+              end_time: termino,
+              slot_minutes: bloco.slot_minutes || 30,
+              appointment_type: bloco.appointment_type || "presencial",
+              active: true,
+            };
+
+            if (bloco.id && !bloco.isNew) {
+              // Atualizar disponibilidade existente
+              await fetch(`${ENDPOINT}?id=eq.${bloco.id}`, {
+                method: "PATCH",
+                headers,
+                body: JSON.stringify(payload),
+              });
+              disponibilidadesParaManter.add(bloco.id);
+            } else {
+              // Criar nova disponibilidade
+              const postRes = await fetch(ENDPOINT, {
+                method: "POST",
+                headers,
+                body: JSON.stringify(payload),
+              });
+              if (postRes.ok) {
+                const newDisp = await postRes.json();
+                // Adicionar o ID da nova disponibilidade para evitar exclusão acidental
+                if (newDisp && newDisp.length > 0) {
+                  disponibilidadesParaManter.add(newDisp[0].id);
+                }
+              }
+            }
+          }
+        }
+      }
+
+      // 2. Excluir disponibilidades antigas que não foram mantidas
+      const disponibilidadesParaExcluir = existingDisponibilidades.filter(
+        (disp) => !disponibilidadesParaManter.has(disp.id)
+      );
+
+      for (const disp of disponibilidadesParaExcluir) {
+        await fetch(`${ENDPOINT}?id=eq.${disp.id}`, {
+          method: "DELETE",
+          headers,
+        });
+      }
+
+      alert("Horários atualizados com sucesso!");
+      setEditando(null);
+      
+      const res = await fetch(ENDPOINT, { 
+        method: "GET", 
+        headers: getHeaders() 
       });
       if (res.ok) {
-        alert("Disponibilidade atualizada com sucesso!");
+          const data = await res.json();
-        setEditando(null);
+          setDisponibilidades(Array.isArray(data) ? data : []);
-        if (selectedDoctor) fetchDisponibilidades(selectedDoctor.id);
+        }
-        else fetchDisponibilidades();
+        
-      } else {
+      } catch (error) {
-        const errorData = await res.json();
+      console.error("Erro ao salvar disponibilidades:", error);
-        console.error("Erro na resposta:", errorData);
+      alert("Erro ao salvar os horários");
-        alert("Erro ao atualizar disponibilidade");
-      }
-    } catch (error) {
-      console.error("Erro:", error);
-      alert("Falha ao conectar com o servidor");
     }
   };
 
   const deletarDisponibilidade = async (id) => {
-    if (!window.confirm("Deseja realmente excluir esta disponibilidade?"))
+    if (!window.confirm("Deseja realmente excluir esta disponibilidade?")) return;
-      return;
     try {
       const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
         method: "DELETE",
@@ -118,10 +169,6 @@ const DisponibilidadesDoctorPage = () => {
       if (res.ok) {
         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 (error) {
       console.error("Erro:", error);
@@ -129,228 +176,322 @@ const DisponibilidadesDoctorPage = () => {
     }
   };
 
-  const initialAvailabilityParaEdicao = useMemo(
+  const disponibilidadesAgrupadas = useMemo(() => {
-    () =>
+    const agrupadas = {};
-      diasDaSemana.map((dia, weekdayIndex) => {
+
-        const blocosDoDia = disponibilidades
+    doctors.forEach((doctor) => {
-          .filter((d) => d.weekday === weekdayIndex && d.active !== false)
+      agrupadas[doctor.id] = {
-          .map((d) => ({
+        doctor_id: doctor.id,
-            id: d.id,
+        doctor_name: doctor.full_name || doctor.name,
-            inicio: d.start_time ? d.start_time.substring(0, 5) : "07:00",
+        disponibilidades: [],
-            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",
+    disponibilidades.forEach((disp) => {
-            active: d.active !== false,
+      if (agrupadas[disp.doctor_id]) {
-          }));
+        agrupadas[disp.doctor_id].disponibilidades.push(disp);
-        return {
+      }
-          dia,
+    });
-          weekday: weekdayIndex,
+
-          isChecked: blocosDoDia.length > 0,
+    Object.values(agrupadas).forEach((grupo) => {
-          blocos: blocosDoDia,
+      if (grupo.disponibilidades.length === 0) {
-        };
+        grupo.disponibilidades.push({
-      }),
+          id: `empty-${grupo.doctor_id}`,
-    [disponibilidades]
+          doctor_id: grupo.doctor_id,
-  );
+          doctor_name: grupo.doctor_name,
+          is_empty: true,
+        });
+      }
+    });
+
+    let resultado = Object.values(agrupadas);
+    
+    if (searchTerm) {
+      resultado = resultado.filter(grupo =>
+        grupo.doctor_name.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+    
+    return resultado;
+  }, [disponibilidades, doctors, searchTerm]);
+
+  const formatTime = (timeString) => {
+    if (!timeString) return "";
+    return timeString.includes(":") ? timeString.substring(0, 5) : timeString;
+  };
+
+  const getDiaSemana = (weekday) => {
+    const dias = {
+      0: "Domingo",
+      1: "Segunda",
+      2: "Terça",
+      3: "Quarta",
+      4: "Quinta",
+      5: "Sexta",
+      6: "Sábado",
+      sunday: "Domingo",
+      monday: "Segunda",
+      tuesday: "Terça",
+      wednesday: "Quarta",
+      thursday: "Quinta",
+      friday: "Sexta",
+      saturday: "Sábado",
+    };
+
+    const key = typeof weekday === "string" ? weekday.toLowerCase() : weekday;
+    return dias[key] || "Desconhecido";
+  };
+
+  const initialAvailabilityParaEdicao = useMemo(() => {
+    if (!editando) return [];
+
+    const disponibilidadesMedico = disponibilidades.filter(
+      (d) => String(d.doctor_id) === String(editando)
+    );
+
+    return [1, 2, 3, 4, 5, 6, 0].map((weekday) => {
+      const blocosDoDia = disponibilidadesMedico
+        .filter((d) => d.weekday === weekday && d.active !== false)
+        .map((d) => ({
+          id: d.id,
+          inicio: formatTime(d.start_time) || "07:00",
+          termino: formatTime(d.end_time) || "17:00",
+          slot_minutes: d.slot_minutes || 30,
+          appointment_type: d.appointment_type || "presencial",
+          isNew: false,
+        }));
+
+      return {
+        dia: diasDaSemana[weekday],
+        weekday: weekday,
+        isChecked: blocosDoDia.length > 0,
+        blocos: blocosDoDia.length > 0 ? blocosDoDia : [{
+          id: null,
+          inicio: "07:00",
+          termino: "17:00",
+          slot_minutes: 30,
+          appointment_type: "presencial",
+          isNew: true,
+        }],
+      };
+    });
+  }, [disponibilidades, editando]);
 
   const handleUpdateHorarios = (horariosAtualizados) => {
-    const bloco = horariosAtualizados
+    if (!editando) return;
-      .flatMap((d) => d.blocos)
+    salvarTodasDisponibilidades(editando, horariosAtualizados);
-      .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())
+      (doc.full_name || doc.name).toLowerCase().includes(searchTerm.toLowerCase())
     );
   }, [doctors, searchTerm]);
 
+  const handleCancelarEdicao = () => {
+    setEditando(null);
+  };
+
+  const handleDoctorSelect = (doctor) => {
+    setSearchTerm(doctor.full_name || doctor.name);
+    setShowSuggestions(false);
+  };
+
+  const handleClearSearch = () => {
+    setSearchTerm("");
+    setShowSuggestions(false);
+  };
+
+  const getStatusBadgeClass = (disp) => {
+    if (disp.is_empty) return "status-badge status-not-configured";
+    if (disp.active === false) return "status-badge status-inactive";
+    return "status-badge status-active";
+  };
+
+  const getStatusText = (disp) => {
+    if (disp.is_empty) return "Não configurado";
+    if (disp.active === false) return "Inativa";
+    return "Ativa";
+  };
+
   return (
-    <div id="main-content">
+    <div className="disponibilidades-container">
-      <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#333" }}>
+      <h1 className="disponibilidades-title">
         Disponibilidades dos Médicos
       </h1>
 
-      <div style={{ marginTop: "10px", marginBottom: "10px" }}>
+      <div className="search-container">
-        <input
+        <div className="search-input-container">
-          type="text"
+          <input
-          placeholder="Buscar médico por nome..."
+            type="text"
-          value={searchTerm}
+            placeholder="Buscar médico por nome..."
-          onChange={(e) => {
+            value={searchTerm}
-            setSearchTerm(e.target.value);
+            onChange={(e) => {
-            setSelectedDoctor(null);
+              setSearchTerm(e.target.value);
-          }}
+              setShowSuggestions(true);
-          style={{
-            border: "1px solid #ccc",
-            borderRadius: "4px",
-            padding: "6px",
-            width: "300px",
-          }}
-        />
-        {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,
             }}
-          >
+            onFocus={() => setShowSuggestions(true)}
-            {filteredDoctors.length > 0 ? (
+            className="search-input"
-              filteredDoctors.map((doc) => (
+          />
-                <li
+          {searchTerm && (
-                  key={doc.id}
+            <button
-                  onClick={() => {
+              onClick={handleClearSearch}
-                    setSelectedDoctor(doc);
+              className="clear-search-btn"
-                    setSearchTerm(doc.name);
+            >
-                  }}
+              ×
-                  style={{
+            </button>
-                    padding: "6px 8px",
+          )}
-                    cursor: "pointer",
+        </div>
-                    borderBottom: "1px solid #eee",
+
-                  }}
+        {showSuggestions && searchTerm && filteredDoctors.length > 0 && (
-                >
+          <div className="suggestions-dropdown">
-                  {doc.name}
+            {filteredDoctors.map((doc) => (
-                </li>
+              <div
-              ))
+                key={doc.id}
-            ) : (
+                onClick={() => handleDoctorSelect(doc)}
-              <li style={{ padding: "6px 8px", color: "#888" }}>
+                className="suggestion-item"
-                Nenhum médico encontrado
+              >
-              </li>
+                {doc.full_name || doc.name}
-            )}
+              </div>
-          </ul>
+            ))}
+          </div>
         )}
       </div>
 
       <section className="calendario-ou-filaespera">
         <div className="fila-container">
-          <h2 className="fila-titulo">
+          <h2 className="section-title">
-            {editando ? "Editar Disponibilidade" : "Lista de Disponibilidades"}{" "}
+            {editando ? `Editar Horários` : "Lista de Disponibilidades"} 
-            ({disponibilidades.length})
           </h2>
 
-          {loading ? (
+          {doctors.length === 0 ? (
-            <p>Carregando...</p>
+            <p className="loading-text">Carregando médicos...</p>
-          ) : disponibilidades.length === 0 ? (
-            <p>Nenhuma disponibilidade encontrada.</p>
           ) : editando ? (
             <>
-              <HorariosDisponibilidade
+              <div className="edit-container">
-                initialAvailability={initialAvailabilityParaEdicao}
+                {initialAvailabilityParaEdicao.length > 0 ? (
-                onUpdate={handleUpdateHorarios}
+                  <HorariosDisponibilidade
-              />
+                    initialAvailability={initialAvailabilityParaEdicao}
-              <button
+                    onUpdate={handleUpdateHorarios}
-                onClick={() =>
+                    readOnly={false}
-                  handleUpdateHorarios(initialAvailabilityParaEdicao)
+                    showHeader={false}
-                }
+                    compact={false}
-                style={{
+                  />
-                  marginTop: "20px",
+                ) : (
-                  padding: "10px 20px",
+                  <p className="loading-text">Carregando horários para edição...</p>
-                  fontSize: "16px",
+                )}
-                  fontWeight: "bold",
+              </div>
-                  borderRadius: "8px",
+
-                  backgroundColor: "#3b82f6",
+              <div className="disp-buttons-container">
-                  color: "white",
+                <button
-                  border: "none",
+                  onClick={() => handleUpdateHorarios(initialAvailabilityParaEdicao)}
-                  cursor: "pointer",
+                  className="disp-btn-primary"
-                }}
+                >
-              >
+                  Salvar Alterações
-                Salvar Alterações
+                </button>
-              </button>
+
+                <button
+                  onClick={handleCancelarEdicao}
+                  className="disp-btn-danger"
+                >
+                  Cancelar
+                </button>
+              </div>
             </>
           ) : (
-            <table className="fila-tabela">
+            <div className="doctor-group-container">
-              <thead>
+              {disponibilidadesAgrupadas.length === 0 ? (
-                <tr>
+                <p className="no-results">Nenhum médico encontrado</p>
-                  <th>Médico</th>
+              ) : (
-                  <th>Dia da Semana</th>
+                disponibilidadesAgrupadas.map((grupo) => (
-                  <th>Início</th>
+                  <div 
-                  <th>Término</th>
+                    key={grupo.doctor_id} 
-                  <th>Intervalo (min)</th>
+                    className={`doctor-group ${expandedDoctors[grupo.doctor_id] ? 'expanded' : ''}`}
-                  <th>Tipo</th>
+                  >
-                  <th>Status</th>
+                    <div
-                  <th>Ações</th>
+                      className="doctor-header"
-                </tr>
+                      onClick={() => toggleExpandDoctor(grupo.doctor_id)}
-              </thead>
+                    >
-              <tbody>
+                      <h3 className="doctor-name">
-                {disponibilidades.map((disp) => {
+                        {grupo.doctor_name}
-                  const medico = doctors.find((d) => d.id === disp.doctor_id);
+                        <span className="doctor-hours">
-                  return (
+                          ({grupo.disponibilidades.filter(d => !d.is_empty).length} horários)
-                    <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>
+                      </h3>
-                      <td>
+                      <span className={`expand-icon ${expandedDoctors[grupo.doctor_id] ? 'expanded' : ''}`}>
-                      <div style={{ display: "flex", gap: "8px" }}>
+                        ▼
-                        <button
+                      </span>
-                          className="btn btn-sm btn-edit"
+                    </div>
-                          style={{
-                            backgroundColor: "#3b82f6",
-                            color: "white",
-                            border: "none",
-                            borderRadius: "6px",
-                            padding: "6px 10px",
-                            cursor: "pointer",
-                            fontWeight: "bold",
-                          }}
-                          onClick={() => console.log("Editar clicado")}
-                        >
-                          Editar
-                        </button>
 
-                        <button
+                    {expandedDoctors[grupo.doctor_id] && (
-                          className="btn btn-sm btn-delete"
+                      <div className="doctor-content">
-                          style={{
+                        <div className="edit-btn-container">
-                            backgroundColor: "#ef4444",
+                          <button
-                            color: "white",
+                            onClick={() => setEditando(grupo.doctor_id)}
-                            border: "none",
+                            className="disp-btn-edit"
-                            borderRadius: "6px",
+                          >
-                            padding: "6px 10px",
+                            {grupo.disponibilidades.some(d => !d.is_empty) ? "Editar" : "Cadastrar Horários"}
-                            cursor: "pointer",
+                          </button>
-                            fontWeight: "bold",
+                        </div>
-                          }}
+
-                          onClick={() => console.log("Excluir clicado")}
+                        <div className="table-container">
-                        >
+                          <table className="disponibilidades-table">
-                          Excluir
+                            <thead>
-                        </button>
+                              <tr>
+                                <th>Dia da Semana</th>
+                                <th>Início</th>
+                                <th>Término</th>
+                                <th>Intervalo (min)</th>
+                                <th>Tipo</th>
+                                <th>Status</th>
+                                <th>Ações</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {grupo.disponibilidades.map((disp) => (
+                                <tr key={disp.id}>
+                                  <td>
+                                    {disp.is_empty ? "Nenhum horário cadastrado" : getDiaSemana(disp.weekday)}
+                                  </td>
+                                  <td>
+                                    {disp.is_empty ? "-" : formatTime(disp.start_time)}
+                                  </td>
+                                  <td>
+                                    {disp.is_empty ? "-" : formatTime(disp.end_time)}
+                                  </td>
+                                  <td>
+                                    {disp.is_empty ? "-" : disp.slot_minutes || 30}
+                                  </td>
+                                  <td>
+                                    {disp.is_empty ? "-" : disp.appointment_type || "presencial"}
+                                  </td>
+                                  <td>
+                                    <span className={getStatusBadgeClass(disp)}>
+                                      {getStatusText(disp)}
+                                    </span>
+                                  </td>
+                                  <td>
+                                    {!disp.is_empty && (
+                                      <button
+                                        onClick={() => deletarDisponibilidade(disp.id)}
+                                        className="disp-btn-delete"
+                                      >
+                                        Excluir
+                                      </button>
+                                    )}
+                                  </td>
+                                </tr>
+                              ))}
+                            </tbody>
+                          </table>
+                        </div>
                       </div>
-                      </td>
+                    )}
-                    </tr>
+                  </div>
-                  );
+                ))
-                })}
+              )}
-              </tbody>
+            </div>
-            </table>
           )}
         </div>
       </section>

src/pages/style/DisponibilidadesDoctorPage.css

@@ -0,0 +1,370 @@
+.disponibilidades-container {
+    padding: 20px;
+    background: #f5f7fa;
+    min-height: 100vh;
+}
+
+.disponibilidades-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #2c3e50;
+    margin-bottom: 20px;
+}
+
+.search-container {
+    margin: 10px 0 25px 0;
+    position: relative;
+    background-color: white;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    border: 1px solid #e1e8ed;
+}
+
+.search-input-container {
+    position: relative;
+}
+
+.search-input {
+    border: 1px solid #dce1e6;
+    border-radius: 6px;
+    padding: 10px 40px 10px 12px;
+    width: 100%;
+    font-size: 14px;
+    box-sizing: border-box;
+    transition: border-color 0.2s;
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: #3498db;
+    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
+}
+
+.clear-search-btn {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    color: #7f8c8d;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background-color 0.2s;
+}
+
+.clear-search-btn:hover {
+    background-color: #f8f9fa;
+    color: #e74c3c;
+}
+
+.suggestions-dropdown {
+    border: 1px solid #e1e8ed;
+    border-radius: 6px;
+    background-color: white;
+    position: absolute;
+    z-index: 1000;
+    width: calc(100% - 30px);
+    max-height: 200px;
+    overflow-y: auto;
+    margin-top: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    left: 15px;
+    right: 15px;
+}
+
+.suggestion-item {
+    padding: 10px 12px;
+    cursor: pointer;
+    border-bottom: 1px solid #f8f9fa;
+    transition: background-color 0.2s;
+    font-size: 14px;
+    color: #2c3e50;
+}
+
+.suggestion-item:hover {
+    background-color: #f8f9fa;
+}
+
+.suggestion-item:last-child {
+    border-bottom: none;
+}
+
+/* Collapsible Styles */
+.doctor-group {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    margin-bottom: 8px;
+    overflow: hidden;
+    border: 1px solid #e1e8ed;
+}
+
+.doctor-header {
+    padding: 16px 20px;
+    background-color: #f1f3f5;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.2s;
+    border-bottom: 1px solid #e1e8ed;
+}
+
+.doctor-header:hover {
+    background-color: #e9ecef;
+}
+.doctor-name {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #2c3e50;
+    margin: 0;
+}
+
+.doctor-hours {
+    font-size: 0.9rem;
+    font-weight: normal;
+    color: #7f8c8d;
+    margin-left: 8px;
+}
+
+.expand-icon {
+    font-size: 1rem;
+    color: #7f8c8d;
+    transform: rotate(0deg);
+    transition: transform 0.3s ease;
+}
+
+.expand-icon.expanded {
+    transform: rotate(180deg);
+}
+
+.doctor-content {
+    padding: 0;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+}
+
+.doctor-group.expanded .doctor-content {
+    max-height: 5000px;
+}
+
+/* Table Styles */
+.table-container {
+    overflow-x: auto;
+    padding: 0 10px 10px 10px;
+}
+
+.disponibilidades-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+    background-color: white;
+}
+
+.disponibilidades-table thead {
+    background-color: #f8f9fa;
+}
+
+.disponibilidades-table thead th {
+    padding: 6px 16px;
+    text-align: left;
+    font-weight: 600;
+    color: #2c3e50;
+    border-bottom: 1px solid #e1e8ed;
+    font-size: 0.875rem;
+}
+
+.disponibilidades-table tbody tr {
+    transition: background-color 0.2s;
+    border-bottom: 1px solid #f1f3f5;
+}
+
+.disponibilidades-table tbody tr:last-child {
+    border-bottom: none;
+}
+
+.disponibilidades-table tbody tr:hover {
+    background-color: #f8f9fa;
+}
+
+.disponibilidades-table td {
+    padding: 12px 16px;
+    color: #495057;
+    border-bottom: 1px solid #f1f3f5;
+}
+
+/* Status Badges */
+.status-badge {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: white;
+    display: inline-block;
+    text-align: center;
+    min-width: 80px;
+}
+
+.status-active {
+    background-color: #27ae60;
+}
+
+.status-inactive {
+    background-color: #e74c3c;
+}
+
+.status-not-configured {
+    background-color: #7f8c8d;
+}
+
+/* Buttons */
+.edit-btn-container {
+    padding: 8px 10px 0px 10px; 
+    background-color: #f8f9fa;
+}
+
+.disp-btn-edit {
+    background-color: #ffe8a1;
+    color: #2c3e50;
+    border: 1px solid #f0d860;
+    border-radius: 6px;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 0.875rem;
+    transition: all 0.2s;
+}
+
+.disp-btn-edit:hover {
+    background-color: #ffcc00;
+    border-color: #e6b800;
+}
+
+.disp-btn-delete {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+    border-radius: 4px;
+    padding: 6px 12px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 0.75rem;
+    transition: all 0.2s;
+}
+
+.disp-btn-delete:hover {
+    background-color: #f1b0b7;
+    border-color: #e89ca6;
+}
+
+/* Edit Mode Styles */
+.edit-container {
+    background-color: white;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e1e8ed;
+}
+
+.disp-buttons-container {
+    display: flex;
+    gap: 12px;
+    margin-top: 20px;
+    justify-content: flex-start;
+}
+
+.disp-btn-primary {
+    padding: 10px 20px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: 6px;
+    background-color: #3498db;
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.disp-btn-primary:hover {
+    background-color: #2980b9;
+}
+
+.disp-btn-danger {
+    padding: 10px 20px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: 6px;
+    background-color: #95a5a6;
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.disp-btn-danger:hover {
+    background-color: #7f8c8d;
+}
+
+/* Section Titles */
+.section-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #2c3e50;
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #e1e8ed;
+}
+
+/* Loading and Empty States */
+.loading-text, .no-results {
+    text-align: center;
+    padding: 40px 20px;
+    color: #7f8c8d;
+    font-size: 1rem;
+}
+
+.no-results {
+    background-color: white;
+    border-radius: 8px;
+    margin: 20px 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .disponibilidades-container {
+        padding: 16px;
+    }
+    
+    .disponibilidades-table {
+        font-size: 0.75rem;
+    }
+    
+    .disponibilidades-table th,
+    .disponibilidades-table td {
+        padding: 8px 12px;
+    }
+    
+    .doctor-header {
+        padding: 12px 16px;
+    }
+    
+    .disp-buttons-container {
+        flex-direction: column;
+    }
+    
+    .disp-btn-primary,
+    .disp-btn-danger {
+        width: 100%;
+    }
+}