Merge branch 'Disponibilidade3'

Corrige API de disponibilidade e tratamento de erros
2025-10-23 13:06:12 -03:00 · 2025-10-23 12:58:13 -03:00
7 changed files with 198 additions and 99 deletions
--- a/src/components/doctors/DoctorForm.jsx
+++ b/src/components/doctors/DoctorForm.jsx
@ -1,8 +1,11 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useCallback } from "react";
 import { Link, useNavigate, useLocation } from "react-router-dom";
 import "./DoctorForm.css";
 import HorariosDisponibilidade from "../doctors/HorariosDisponibilidade";

+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();
@ -123,9 +126,12 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
    }
  };

-  const handleAvailabilityUpdate = (newAvailability) => {
+  const handleAvailabilityUpdate = useCallback(
+    (newAvailability) => {
      setFormData((prev) => ({ ...prev, availability: newAvailability }));
-  };
+    },
+    [setFormData]
+  );

  const handleCepBlur = async () => {
    const cep = formData.cep?.replace(/\D/g, "");
@ -205,6 +211,42 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
      }
    }, 300);
  };
+  const handleCreateAvailability = async (newAvailability) => {
+    try {
+      const response = await fetch(ENDPOINT_AVAILABILITY, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(newAvailability),
+      });
+      const data = await response.json();
+      console.log("Disponibilidade criada :", data);
+      alert("Disponibilidade criada com sucesso!");
+    } catch (error) {
+      console.error("Erro ao criar disponibilidade:", error);
+      alert("Erro ao criar disponibilidade.");
+    }
+  };
+
+  const handlePatchAvailability = async (id, updatedAvailability) => {
+    try {
+      const response = await fetch(`${ENDPOINT_AVAILABILITY}?id=${id}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(updatedAvailability),
+      });
+
+  const data = await response.json();
+  console.log("Disponibilidade atualizada:", data);
+  alert("Disponibilidade atualizada com sucesso!");
+} catch (error) {
+  console.error("Erro ao atualizar disponibilidade:", error);
+  alert("Erro ao atualizar disponibilidade.");
+}
+  };

  const handleSubmit = async () => {
    const missingFields = [];
@ -246,9 +288,23 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {

    try {
      await onSave({ ...formData });
-    } catch (error) {
-      throw error;
+
+      if (formData.availability && formData.availability.length > 0) {
+        if (formData.availabilityId) {
+          await handlePatchAvailability(
+            formData.availabilityId,
+            formData.availability
+          );
+        } else {
+          await handleCreateAvailability(formData.availability);
        }
+      }
+
+      alert("Médico salvo e disponibilidade enviada ao mock com sucesso!");
+    } catch (error) {
+      console.error("Erro ao salvar médico ou disponibilidade:", error);
+      alert("Erro ao salvar médico ou disponibilidade.");
+    };
  };

  const handleModalClose = () => {
--- a/src/components/doctors/HorariosDisponibilidade.jsx
+++ b/src/components/doctors/HorariosDisponibilidade.jsx
@ -3,8 +3,8 @@ import { Clock } from "lucide-react";

 const initialBlockTemplate = {
  id: null,
-  inicio: "09:00",
-  termino: "17:00",
+  inicio: "07:00",
+  termino: "18:00",
  isNew: true,
 };

@ -118,9 +118,9 @@ const HorariosDisponibilidade = ({
        flexDirection: window.innerWidth < 640 ? "column" : "row",
        alignItems: window.innerWidth < 640 ? "flex-start" : "center",
        justifyContent: "space-between",
-        padding: "16px",
-        marginBottom: "16px",
-        borderRadius: "12px",
+        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",
@ -132,7 +132,7 @@ const HorariosDisponibilidade = ({
        style={{
          display: "flex",
          flexDirection: window.innerWidth < 640 ? "column" : "row",
-          gap: window.innerWidth < 640 ? "0" : "32px",
+          gap: window.innerWidth < 640 ? "0" : "12px",
          width: window.innerWidth < 640 ? "100%" : "auto",
        }}
      >
@ -140,7 +140,7 @@ const HorariosDisponibilidade = ({
          style={{
            display: "flex",
            alignItems: "center",
-            gap: "8px",
+            gap: "4px",
            marginBottom: window.innerWidth < 640 ? "8px" : "0",
          }}
        >
@ -159,20 +159,21 @@ const HorariosDisponibilidade = ({
                handleTimeChange(dayIndex, bloco.id, "inicio", e.target.value)
              }
              style={{
-                padding: "8px",
+                padding: "4px 6px",
                border: "1px solid #d1d5db",
-                borderRadius: "8px",
+                borderRadius: "6px",
                width: "100%",
                boxSizing: "border-box",
                outline: "none",
+                fontSize: "13px"
              }}
              step="300"
            />
            <Clock
-              size={16}
+              size={12}
              style={{
                position: "absolute",
-                right: "12px",
+                right: "8px",
                top: "50%",
                transform: "translateY(-50%)",
                color: "#9ca3af",
@ -182,10 +183,10 @@ const HorariosDisponibilidade = ({
          </div>
        </div>

-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
          <label
            htmlFor={`termino-${dayIndex}-${bloco.id}`}
-            style={{ fontWeight: 500, color: "#4b5563", width: "64px" }}
+            style={{ fontWeight: 500, color: "#4b5563", width: "56px", fontSize: "13px" }}
          >
            Término:
          </label>
@ -198,20 +199,21 @@ const HorariosDisponibilidade = ({
                handleTimeChange(dayIndex, bloco.id, "termino", e.target.value)
              }
              style={{
-                padding: "8px",
+              padding: "4px 6px",
              border: "1px solid #d1d5db",
-                borderRadius: "8px",
+              borderRadius: "6px",
              width: "100%",
              boxSizing: "border-box",
              outline: "none",
+              fontSize: "13px",
              }}
              step="300"
            />
            <Clock
-              size={16}
+              size={12}
              style={{
                position: "absolute",
-                right: "12px",
+                right: "8px",
                top: "50%",
                transform: "translateY(-50%)",
                color: "#9ca3af",
@ -225,12 +227,12 @@ const HorariosDisponibilidade = ({
      <button
        onClick={() => handleRemoveBlock(dayIndex, bloco.id)}
        style={{
-          marginTop: window.innerWidth < 640 ? "16px" : "0",
-          padding: "8px 24px",
+          marginTop: window.innerWidth < 640 ? "8px" : "0",
+          padding: "4px 10px",
          backgroundColor: "#ef4444",
          color: "white",
          fontWeight: 600,
-          borderRadius: "12px",
+          borderRadius: "13px",
          boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
          transition: "all 0.2s",
          width: window.innerWidth < 640 ? "100%" : "auto",
@ -257,7 +259,6 @@ const HorariosDisponibilidade = ({
            fontWeight: 500,
          }}
        >
-          (Novo)
        </span>
      )}
    </div>
@ -295,8 +296,8 @@ const HorariosDisponibilidade = ({
              key={day.dia}
              style={{
                backgroundColor: "#f9fafb",
-                padding: "20px",
-                borderRadius: "12px",
+                padding: "8px",
+                borderRadius: "10px",
                border: "1px solid #e5e7eb",
              }}
            >
@ -365,11 +366,11 @@ const HorariosDisponibilidade = ({
                  <button
                    onClick={() => handleAddBlock(dayIndex)}
                    style={{
-                      marginTop: "24px",
+                      marginTop: "15px",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
-                      padding: "12px 24px",
+                      padding: "10px 22px",
                      backgroundColor: "#10b981",
                      color: "white",
                      fontWeight: "bold",
--- a/src/data/sidebar-items-adm.json
+++ b/src/data/sidebar-items-adm.json
@ -21,7 +21,7 @@
  },

  {
-    "name": "Relaototios",
+    "name": "Relatórios",
    "icon": "table",
    "url": "/admin/laudo"
  },
--- a/src/pages/Agendamento.jsx
+++ b/src/pages/Agendamento.jsx
@ -21,22 +21,22 @@ import { Search } from 'lucide-react';



-const Agendamento = ({setDictInfo}) => { // Mantido setDictInfo (versão main)
+const Agendamento = ({setDictInfo}) => {
  const navigate = useNavigate();

-  // Estados mesclados
-  const [selectedID, setSelectedId] = useState('0') // (main)
-  const [filaEsperaData, setfilaEsperaData] = useState([]) // (main)
+ 
+  const [selectedID, setSelectedId] = useState('0') 
+  const [filaEsperaData, setfilaEsperaData] = useState([])
  const [FiladeEspera, setFiladeEspera] = useState(false);
  const [tabela, setTabela] = useState('diario');
  const [PageNovaConsulta, setPageConsulta] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
-  const [agendamentos, setAgendamentos] = useState() // (main)
+  const [agendamentos, setAgendamentos] = useState() 
  const {getAuthorizationHeader} = useAuth()
  const [DictAgendamentosOrganizados, setAgendamentosOrganizados ] = useState({})

  const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const [AgendamentoFiltrado, setAgendamentoFiltrado] = useState() // (main)
+  const [AgendamentoFiltrado, setAgendamentoFiltrado] = useState()
  
  const [ListaDeMedicos, setListaDeMedicos] = useState([])
  const [FiltredTodosMedicos, setFiltredTodosMedicos] = useState([])
@ -45,10 +45,10 @@ const Agendamento = ({setDictInfo}) => { // Mantido setDictInfo (versão main)

  let authHeader = getAuthorizationHeader() 

-  // Função FiltrarAgendamentos (Mesclado: Mantido o da MAIN, mais completo e com ordenação/fila de espera real)
+
 const FiltrarAgendamentos = async (listaTodosAgendamentos) => {
    const ConfigurarFiladeEspera = async (patient_id, doctor_id, agendamento) => {
-      // Assumindo que GetDoctorByID e GetPatientByID estão definidos no seu escopo
+
      let medico = await GetDoctorByID(doctor_id, authHeader);
      let paciente = await GetPatientByID(patient_id, authHeader);

@ -431,7 +431,7 @@ const handleSearchMedicos = (term) => {
        <AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
      )}

-       {/* Modal de Confirmação de Exclusão (Da MAIN) */}
+       {/* Modal de Confirmação de Exclusão */}
       {showDeleteModal && (
        <div
          className="modal fade show"
--- a/src/pages/DisponibilidadesDoctorPage.jsx
+++ b/src/pages/DisponibilidadesDoctorPage.jsx
@ -3,40 +3,96 @@ import { Link } from "react-router-dom";

 const ENDPOINT_LISTAR = "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);
+
+    return data.toLocaleTimeString("pt-BR", { hour: '2-digit', minute: '2-digit', timeZone: 'UTC' });
+  } catch (error) {
+    return "Data Inválida";
+  }
+};
+
+
 const DisponibilidadesDoctorPage = () => {
  const [disponibilidades, setDisponibilidades] = useState([]);
  const [loading, setLoading] = useState(false);
-  const [filtroMedicoId, setFiltroMedicoId] = useState("");
-  const [filtroActive, setFiltroActive] = useState("true");
-  const [medicoValido, setMedicoValido] = useState(false);
+  const [filtroMedicoNome, setFiltroMedicoNome] = useState("");

-  const fetchDisponibilidades = useCallback(async (doctorId, activeStatus) => {
+  const [medicoEncontradoId, setMedicoEncontradoId] = useState(null);
+
+
+  const encontrarMedicoIdPorNome = (nome) => {
+      if (!nome) return null;
+      const termoBusca = nome.toLowerCase();
+      
+
+      const medico = MEDICOS_MOCKADOS.find(m => 
+          m.nome.toLowerCase().includes(termoBusca)
+      );
+      
+      return medico ? medico.id : null;
+  };
+
+  const fetchDisponibilidades = useCallback(async (nome) => {
    setLoading(true);
-    let url = `${ENDPOINT_LISTAR}?select=*`;
-    if (doctorId) url += `&doctor_id=eq.${doctorId}`;
-    if (activeStatus === "true" || activeStatus === "false") url += `&active=eq.${activeStatus}`;
+    setDisponibilidades([]);
+    setMedicoEncontradoId(null);
+
+    const doctorId = encontrarMedicoIdPorNome(nome);
+
+    if (!doctorId) {
+        setLoading(false);
+        return;
+    }
+    
+    const url = `${ENDPOINT_LISTAR}?select=*&doctor_id=eq.${doctorId}`;
    
    try {
      const response = await fetch(url);
      const result = await response.json();
-      setDisponibilidades(Array.isArray(result) ? result : []);
-      setMedicoValido(Array.isArray(result) && result.length > 0);
+      
+      let dados = Array.isArray(result) ? result : [];
+
+      setDisponibilidades(dados);
+      setMedicoEncontradoId(doctorId); 
    } catch (error) {
      setDisponibilidades([]);
-      setMedicoValido(false);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
-    if (filtroMedicoId) {
-      fetchDisponibilidades(filtroMedicoId, filtroActive);
+    if (filtroMedicoNome) {
+      const timer = setTimeout(() => {
+        fetchDisponibilidades(filtroMedicoNome);
+      }, 300); 
+
+      return () => clearTimeout(timer);
    } else {
        setDisponibilidades([]);
-      setMedicoValido(false);
+        setMedicoEncontradoId(null);
    }
-  }, [filtroMedicoId, filtroActive, fetchDisponibilidades]);
+  }, [filtroMedicoNome, fetchDisponibilidades]);
+
+  const rotaGerenciar = medicoEncontradoId 
+    ? `../medicos/${medicoEncontradoId}/edit` 
+    : `../medicos/novo/edit`;
+

  return (
    <div id="main-content">
@ -44,8 +100,9 @@ const DisponibilidadesDoctorPage = () => {
        <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#333" }}>
          Disponibilidades por Médico
        </h1>
+        
        <Link
-          to={medicoValido ? `../medicos/${filtroMedicoId}/edit` : "#"}
+          to={rotaGerenciar}
          className="btn-primary"
          style={{
            padding: "10px 20px",
@ -53,8 +110,6 @@ const DisponibilidadesDoctorPage = () => {
            whiteSpace: "nowrap",
            textDecoration: "none",
            display: "inline-block",
-            opacity: medicoValido ? 1 : 0.6,
-            pointerEvents: medicoValido ? "auto" : "none",
          }}
        >
          + Gerenciar Disponibilidades
@ -63,28 +118,16 @@ const DisponibilidadesDoctorPage = () => {

      <div className="atendimento-eprocura">
        <div className="busca-atendimento">
-          <div>
+          <div style={{ marginRight: '10px' }}>
            <i className="fa-solid fa-user-doctor"></i>
            <input
              type="text"
-              placeholder="Filtrar por ID do Médico..."
-              value={filtroMedicoId}
-              onChange={(e) => setFiltroMedicoId(e.target.value)}
+              placeholder="Filtrar por Nome do Médico..."
+              value={filtroMedicoNome}
+              onChange={(e) => setFiltroMedicoNome(e.target.value)}
              style={{ border: "1px solid #ccc", borderRadius: "4px", padding: "5px" }}
            />
          </div>
-          <div>
-            <i className="fa-solid fa-check-circle"></i>
-            <select
-              value={filtroActive}
-              onChange={(e) => setFiltroActive(e.target.value)}
-              style={{ padding: "8px", border: "1px solid #ccc", borderRadius: "4px" }}
-            >
-              <option value="true">Ativas</option>
-              <option value="false">Inativas</option>
-              <option value="">Todas</option>
-            </select>
-          </div>
        </div>

        <section className="calendario-ou-filaespera">
@ -95,15 +138,15 @@ const DisponibilidadesDoctorPage = () => {

            {loading ? (
              <p className="text-center py-10">Carregando disponibilidades...</p>
-            ) : disponibilidades.length === 0 ? (
+            ) : (filtroMedicoNome && disponibilidades.length === 0) ? (
              <p className="text-center py-10">
-                Nenhuma disponibilidade encontrada para os filtros aplicados.
+                Nenhuma disponibilidade encontrada para o nome buscado.
              </p>
            ) : (
              <table className="fila-tabela" style={{ width: "100%", borderCollapse: "collapse" }}>
                <thead>
                  <tr>
-                    {["ID", "ID Médico", "Dia da Semana", "Início", "Término", "Intervalo (min)", "Tipo Consulta", "Status"].map(
+                    {[ "Dia da Semana", "Início", "Término", "Intervalo", "Tipo Consulta"].map(
                      (header) => (
                        <th
                          key={header}
@ -118,18 +161,17 @@ const DisponibilidadesDoctorPage = () => {
                <tbody>
                  {disponibilidades.map((disp, index) => (
                    <tr key={disp.id || index} style={{ borderBottom: "1px solid #eee" }}>
-                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.id || "N/A"}</td>
-                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.doctor_id}</td>
-                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.weekday}</td>
-                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.start_time || "N/A"}</td>
-                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.end_time || "N/A"}</td>
+                      <td style={{ padding: "10px", fontSize: "0.9em" }}>
+                          {diasDaSemana[disp.weekday] || disp.weekday}
+                      </td>
+                      <td style={{ padding: "10px", fontSize: "0.9em" }}>
+                          {formatarDataHora(disp.start_time)}
+                      </td>
+                      <td style={{ padding: "10px", fontSize: "0.9em" }}>
+                          {formatarDataHora(disp.end_time)}
+                      </td>
                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.slot_minutes}</td>
                      <td style={{ padding: "10px", fontSize: "0.9em" }}>{disp.appointment_type}</td>
-                      <td style={{ padding: "10px", fontSize: "0.9em" }}>
-                        <span className={`status-tag ${disp.active ? "legenda-item-realizado" : "legenda-item-cancelado"}`}>
-                          {disp.active ? "Ativa" : "Inativa"}
-                        </span>
-                      </td>
                    </tr>
                  ))}
                </tbody>
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@ -135,9 +135,9 @@ function Login({ onEnterSystem }) {
  return (
    <>
      <div className="mt-3 card-position">
-        <div className="col-lg-5 col-md-7 col-sm-9 col-12 mx-auto">
-          <div className="card shadow-sm d-flex justify-content-between align-items-center">
-            <div id="auth-left" className="w-100">
+        <div className="col-lg-5 col-md-7 col-sm-9 col-5 mx-auto">
+          <div className="card w-10 shadow-sm d-flex justify-content-between align-items-center">
+            <div id="auth-left" className="w-10">
              <div className="auth-logo">
                <br />
                <Link to="/">
--- a/src/pages/Register.jsx
+++ b/src/pages/Register.jsx
@ -123,8 +123,8 @@ function Register() {
    return (
        <>
            <div className="mt-3 card-position">
-                <div className="col-lg-5 col-12">
-                    <div className="card shadow-sm d-flex justify-content-between align-items-center">
+                <div className="col-lg-5 col-6">
+                    <div className="card w-10 shadow-sm d-flex justify-content-between align-items-center">
                        <div id="auth-left">
                            <div className="auth-logo">
                                <br />
Author	SHA1	Message	Date
pedrofedericoo	d80b13e404	Merge branch 'Disponibilidade3'	2025-10-23 13:06:12 -03:00
pedrofedericoo	272be628aa	Corrige API de disponibilidade e tratamento de erros	2025-10-23 12:58:13 -03:00