Atualização Exceções

src/components/AgendarConsulta/FormDisponibilidade.jsx

@@ -1,177 +0,0 @@
-import InputMask from "react-input-mask";
-import "./style/formagendamentos.css";
-import { useState, useEffect } from "react";
-
-const FormNovaDisponibilidade = ({ onCancel, doctorID }) => {
-
-  const [dadosAtendimento, setDadosAtendimento] = useState({
-    profissional: '',
-    tipoAtendimento: '',
-    dataAtendimento: '',
-    inicio: '',
-    termino: '',
-    motivo: ''
-  });
-
-  const handleAtendimentoChange = (e) => {
-    const { value, name } = e.target;
-    setDadosAtendimento(prev => ({
-      ...prev,
-      [name]: value
-    }));
-  };
-
-  const handleSubmitExcecao = async (e) => { 
-    e.preventDefault();
-    console.log("Modo Emergência Ativado: Tentando criar Exceção com novo endpoint.");
-
-    const { profissional, dataAtendimento, tipoAtendimento, inicio, termino, motivo } = dadosAtendimento;
-
-    if (!profissional || !dataAtendimento || !tipoAtendimento) {
-        alert("Por favor, preencha o Profissional, Data, e Tipo da exceção.");
-        return;
-    }
-
-    const payload = {
-      doctor_id: profissional,
-      date: dataAtendimento,
-      start_time: inicio + ":00" || null, // Adiciona ":00" se o input type="time" retornar apenas HH:MM
-      end_time: termino + ":00" || null,   // Adiciona ":00"
-      kind: tipoAtendimento,
-      reason: motivo,
-    };
-    
-    var myHeaders = new Headers();
-    myHeaders.append("Content-Type", "application/json");
-
-    var requestOptions = {
-      method: 'POST',
-      headers: myHeaders,
-      body: JSON.stringify(payload),
-      redirect: 'follow'
-    }; 
-
-    try {
-      const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_exceptions", requestOptions);
-      const result = await response.json();
-
-      if (response.ok || response.status === 201) {
-        console.log("Exceção de emergência criada com sucesso:", result);
-        alert(`Consulta de emergência agendada como exceção! Detalhes: ${JSON.stringify(result)}`);
-      } else {
-        console.error("Erro ao criar exceção de emergência:", result);
-        alert(`Erro ao agendar exceção. Status: ${response.status}. Detalhes: ${result.message || JSON.stringify(result)}`);
-      }
-    } catch (error) {
-      console.error("Erro na requisição para criar exceção:", error);
-      alert("Erro de comunicação com o servidor ou formato de resposta inválido.");
-    }
-  };
-
-  return (
-    <div className="form-container">
-      <form className="form-agendamento" onSubmit={handleSubmitExcecao}>
-        <h2 className="section-title">Informações do médico</h2>
-
-        <div className="campo-informacoes-atendimento">
-
-          <div className="campo-de-input">
-            <label>ID do profissional *</label>
-            <input 
-              type="text" 
-              name="profissional" 
-              required 
-              value={dadosAtendimento.profissional}
-              onChange={handleAtendimentoChange}
-            />
-          </div>
-
-          <div className="campo-de-input">
-            <label>Tipo de exceção *</label>
-            <select name="tipoAtendimento" onChange={handleAtendimentoChange}>
-              <option value="" disabled invisible selected>Selecione o tipo de exceção</option>
-              <option value={dadosAtendimento.tipoAtendimento === "liberacao"} >Liberação</option>
-              <option value={dadosAtendimento.tipoAtendimento === "bloqueio"} >Bloqueio</option>
-            </select>
-          </div>
-
-        </div>
-
-        <section id="informacoes-atendimento-segunda-linha">
-          <section id="informacoes-atendimento-segunda-linha-esquerda">
-        
-            <div className="campo-informacoes-atendimento">
-              
-              <div className="campo-de-input">
-                <label>Data *</label>
-                <input
-                  type="date"
-                  name="dataAtendimento"
-                  required 
-                  value={dadosAtendimento.dataAtendimento}
-                  onChange={handleAtendimentoChange}
-                />
-              </div>
-            </div>
-
-            <div className="campo-informacoes-atendimento">
-              <div className="campo-de-input">
-                <label>Início</label>
-                <input 
-                  type="time" 
-                  name="inicio" 
-                  value={dadosAtendimento.inicio}
-                  onChange={handleAtendimentoChange}
-                />
-              </div>
-
-              <div className="campo-de-input">
-                <label>Término</label>
-                <input 
-                  type="time" 
-                  name="termino"  
-                  value={dadosAtendimento.termino}
-                  onChange={handleAtendimentoChange}
-                />
-              </div>
-          
-              <div className="campo-de-input">
-                <label>Profissional solicitante</label>
-                <select 
-                  name="solicitante"
-                  value={dadosAtendimento.solicitante}
-                  onChange={handleAtendimentoChange}
-                >
-                  <option value="" disabled invisible selected>Selecione o solicitante</option>
-                  <option value="secretaria">Secretária</option>
-                  <option value="medico">Médico</option>
-                </select>
-              </div>
-            </div>
-          </section>
-
-          <section className="informacoes-atendimento-segunda-linha-direita"> 
-
-            <div className="campo-de-input">
-              <label>Motivo da exceção</label>
-              <textarea 
-                name="motivo" 
-                rows="4" 
-                cols="1"
-                value={dadosAtendimento.motivo}
-                onChange={handleAtendimentoChange}
-              ></textarea>
-            </div>
-          </section>
-        </section>
-
-      <div className="form-actions">
-        <button type="submit" className="btn-primary">Salvar agendamento</button>
-          <button type="button" className="btn-cancel" onClick={onCancel}>Cancelar</button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default FormNovaDisponibilidade;

src/components/FormCriarExcecao.jsx

@@ -0,0 +1,184 @@
+// src/components/FormCriarExcecao.jsx
+
+import React, { useState } from "react";
+// Assumindo que você usa o mesmo estilo
+import "./AgendarConsulta/style/formagendamentos.css"; 
+
+const ENDPOINT_CRIAR_EXCECAO = "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_exceptions";
+
+const FormCriarExcecao = ({ onCancel, doctorID }) => {
+
+    const [dadosAtendimento, setDadosAtendimento] = useState({
+        profissional: doctorID || '',
+        tipoAtendimento: '',
+        dataAtendimento: '',
+        inicio: '',
+        termino: '',
+        motivo: ''
+    });
+
+    const handleAtendimentoChange = (e) => {
+        const { value, name } = e.target;
+        setDadosAtendimento(prev => ({
+            ...prev,
+            [name]: value
+        }));
+    };
+
+    const handleSubmitExcecao = async (e) => { 
+        e.preventDefault();
+        console.log("Tentando criar Exceção.");
+
+        const { profissional, dataAtendimento, tipoAtendimento, inicio, termino, motivo } = dadosAtendimento;
+
+        // Validação
+        if (!profissional || !dataAtendimento || !tipoAtendimento || !motivo) {
+            alert("Por favor, preencha o ID do Profissional, Data, Tipo e Motivo.");
+            return;
+        }
+        
+        // Adiciona ":00" se o campo de hora estiver preenchido
+        const startTime = inicio ? inicio + ":00" : undefined; 
+        const endTime = termino ? termino + ":00" : undefined;
+        
+        const payload = {
+            doctor_id: profissional,
+            date: dataAtendimento,
+            start_time: startTime, 
+            end_time: endTime,
+            kind: tipoAtendimento, 
+            reason: motivo,
+        };
+        
+        var myHeaders = new Headers();
+        myHeaders.append("Content-Type", "application/json");
+
+        var requestOptions = {
+            method: 'POST',
+            headers: myHeaders,
+            body: JSON.stringify(payload),
+            redirect: 'follow'
+        }; 
+
+        try {
+            const response = await fetch(ENDPOINT_CRIAR_EXCECAO, requestOptions);
+            const resultText = await response.text(); 
+            let result;
+            try {
+                result = JSON.parse(resultText);
+            } catch {
+                result = { message: resultText || 'Sucesso, mas resposta não é JSON.' };
+            }
+
+            if (response.ok || response.status === 201) {
+                console.log("Exceção criada com sucesso:", result);
+                alert(`Exceção criada! Detalhes: ${result.id || JSON.stringify(result)}`);
+                onCancel(true); // Indica sucesso para o componente pai recarregar
+            } else {
+                console.error("Erro ao criar exceção:", result);
+                alert(`Erro ao criar exceção. Status: ${response.status}. Detalhes: ${result.message || JSON.stringify(result)}`);
+            }
+        } catch (error) {
+            console.error("Erro na requisição para criar exceção:", error);
+            alert("Erro de comunicação com o servidor.");
+        }
+    };
+
+    return (
+        <div className="form-container">
+            <form className="form-agendamento" onSubmit={handleSubmitExcecao}>
+                <h2 className="section-title">Informações da Nova Exceção</h2>
+
+                <div className="campo-informacoes-atendimento">
+
+                    <div className="campo-de-input">
+                        <label>ID do profissional *</label>
+                        <input 
+                            type="text" 
+                            name="profissional" 
+                            required 
+                            value={dadosAtendimento.profissional}
+                            onChange={handleAtendimentoChange}
+                        />
+                    </div>
+
+                    <div className="campo-de-input">
+                        <label>Tipo de exceção *</label>
+                        <select name="tipoAtendimento" onChange={handleAtendimentoChange} value={dadosAtendimento.tipoAtendimento} required>
+                            <option value="" disabled selected>Selecione o tipo de exceção</option>
+                            <option value="liberacao" >Liberação (Criar Slot)</option>
+                            <option value="bloqueio" >Bloqueio (Remover Slot)</option>
+                        </select>
+                    </div>
+
+                </div>
+
+                <section id="informacoes-atendimento-segunda-linha">
+                    <section id="informacoes-atendimento-segunda-linha-esquerda">
+                    
+                        <div className="campo-informacoes-atendimento">
+                            
+                            <div className="campo-de-input">
+                                <label>Data *</label>
+                                <input
+                                    type="date"
+                                    name="dataAtendimento"
+                                    required 
+                                    value={dadosAtendimento.dataAtendimento}
+                                    onChange={handleAtendimentoChange}
+                                />
+                            </div>
+                        </div>
+
+                        <div className="campo-informacoes-atendimento">
+                            <div className="campo-de-input">
+                                <label>Início (Opcional)</label>
+                                <input 
+                                    type="time" 
+                                    name="inicio" 
+                                    value={dadosAtendimento.inicio}
+                                    onChange={handleAtendimentoChange}
+                                />
+                            </div>
+
+                            <div className="campo-de-input">
+                                <label>Término (Opcional)</label>
+                                <input 
+                                    type="time" 
+                                    name="termino"  
+                                    value={dadosAtendimento.termino}
+                                    onChange={handleAtendimentoChange}
+                                />
+                            </div>
+                        
+                            <div className="campo-de-input">
+                                {/* Removendo o campo solicitante, pois não está no payload da API de exceções */}
+                            </div>
+                        </div>
+                    </section>
+
+                    <section className="informacoes-atendimento-segunda-linha-direita"> 
+                        <div className="campo-de-input">
+                            <label>Motivo da exceção *</label>
+                            <textarea 
+                                name="motivo" 
+                                rows="4" 
+                                cols="1"
+                                required
+                                value={dadosAtendimento.motivo}
+                                onChange={handleAtendimentoChange}
+                            ></textarea>
+                        </div>
+                    </section>
+                </section>
+
+                <div className="form-actions">
+                    <button type="submit" className="btn-primary">Criar Exceção</button>
+                    <button type="button" className="btn-cancel" onClick={() => onCancel(false)}>Cancelar</button>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default FormCriarExcecao;

src/pages/Agendamento.jsx

@@ -248,7 +248,7 @@ const handleSearchMedicos = (term) => {
     <div>
       <h1>Agendar nova consulta</h1>
 
-      <button onClick={() => navigate('/secretaria/form-disponibilidade')}>
+      <button className='manage-button' onClick={() => navigate('/secretaria/excecoes-disponibilidade')}>
         Ir para Formulário de Disponibilidade
       </button>
 

src/pages/ExcecoesDisponibilidade.jsx

@@ -0,0 +1,214 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import dayjs from 'dayjs';
+import FormCriarExcecao from '../components/FormCriarExcecao';
+import "../components/AgendarConsulta/style/formagendamentos.css";
+import "./style/Agendamento.css";
+import './style/FilaEspera.css';
+
+const ENDPOINT_LISTAR = "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_exceptions";
+const ENDPOINT_DELETAR = "https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_exceptions/";
+
+const ExcecoesDisponibilidade = () => {
+
+    const [pageNovaExcecao, setPageNovaExcecao] = useState(false);
+    const [excecoes, setExcecoes] = useState([]);
+    const [loading, setLoading] = useState(false);
+    
+    // Filtros
+    const [filtroMedicoId, setFiltroMedicoId] = useState('');
+    const [filtroData, setFiltroData] = useState(dayjs().format('YYYY-MM-DD'));
+    
+    // Estado para controlar a visualização (Diário, Semanal)
+    const [visualizacao, setVisualizacao] = useState('diario');
+
+    // Função para buscar as exceções
+    const fetchExcecoes = useCallback(async (doctorId, date) => {
+        setLoading(true);
+        let url = `${ENDPOINT_LISTAR}?select=*`;
+        
+        if (doctorId) {
+            url += `&doctor_id=eq.${doctorId}`; // Assume filtro por igualdade de ID
+        }
+        if (date) {
+            url += `&date=eq.${date}`; // Assume filtro por igualdade de data
+        }
+
+        try {
+            const requestOptions = { method: 'GET', redirect: 'follow' };
+            const response = await fetch(url, requestOptions);
+            const result = await response.json();
+            
+            if (response.ok && Array.isArray(result)) {
+                setExcecoes(result);
+            } else {
+                setExcecoes([]);
+                console.error("Erro ao listar exceções:", result);
+                alert("Erro ao carregar lista de exceções.");
+            }
+        } catch (error) {
+            console.error('Erro na requisição de listagem de exceções:', error);
+            setExcecoes([]);
+            alert("Erro de comunicação com o servidor ao listar exceções.");
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    // Função para deletar uma exceção
+    const deletarExcecao = async (id) => {
+        if (!window.confirm(`Tem certeza que deseja deletar a exceção com ID: ${id}?`)) return;
+
+        try {
+            const requestOptions = { method: 'DELETE', redirect: 'follow' };
+            const response = await fetch(`${ENDPOINT_DELETAR}${id}`, requestOptions);
+
+            if (response.ok || response.status === 204) {
+                alert(`Exceção ${id} deletada com sucesso.`);
+                fetchExcecoes(filtroMedicoId, filtroData); // Recarrega a lista
+            } else {
+                const result = await response.json();
+                alert(`Erro ao deletar exceção. Detalhes: ${result.message || JSON.stringify(result)}`);
+            }
+        } catch (error) {
+            console.error('Erro na requisição de deleção:', error);
+            alert('Erro de comunicação ao tentar deletar a exceção.');
+        }
+    };
+
+    // Efeito para carregar exceções quando os filtros mudam
+    useEffect(() => {
+        fetchExcecoes(filtroMedicoId, filtroData);
+    }, [fetchExcecoes, filtroMedicoId, filtroData]);
+
+    // Handler de cancelamento do formulário de criação
+    const handleCancelForm = (recarregar = false) => {
+        setPageNovaExcecao(false);
+        if (recarregar) {
+            fetchExcecoes(filtroMedicoId, filtroData); // Recarrega se a criação foi bem-sucedida
+        }
+    }
+
+    // Se o formulário de criação estiver aberto, renderiza apenas ele
+    if (pageNovaExcecao) {
+        return <FormCriarExcecao onCancel={handleCancelForm} doctorID={filtroMedicoId} />;
+    }
+
+    // Renderiza a tela de listagem (layout da agenda)
+    
+    return (
+        <div>
+           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
+                <h1>Gerenciar Exceções de Disponibilidade</h1>
+                <button 
+                    className="btn-primary" 
+                    onClick={() => setPageNovaExcecao(true)}
+                    // Use a classe btn-primary que deve estar funcionando
+                    style={{ padding: '10px 20px', fontSize: '14px', whiteSpace: 'nowrap' }} 
+                >
+                + Criar Nova Exceção
+                </button>
+            </div>
+            <div className='atendimento-eprocura'>
+                
+                {/* Filtros e Busca (Adaptados do Agendamento) */}
+                <div className='busca-atendimento'>
+                    <div>
+                        <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)}
+                        />
+                    </div>
+                    <div>
+                        <i className="fa-solid fa-calendar"></i>
+                         <input
+                            type="date"
+                            value={filtroData}
+                            onChange={(e) => setFiltroData(e.target.value)}
+                        />
+                    </div>
+                </div>
+                
+                {/* Botões de Visualização (Dia/Semana/Mês) - Adaptados */}
+                <div className='container-btns-agenda-fila_esepera'>
+                    <button
+                        className={`btn-agenda ${visualizacao === "diario" ? "opc-agenda-ativo" : ""}`}
+                        onClick={() => setVisualizacao('diario')}
+                    >
+                        Dia
+                    </button>
+                    <button
+                        className={`btn-fila-espera ${visualizacao === "semanal" ? "opc-filaespera-ativo" : ""}`}
+                        onClick={() => setVisualizacao('semanal')}
+                    >
+                        Semana
+                    </button>
+                    <button
+                        className={`btn-fila-espera ${visualizacao === "mensal" ? "opc-filaespera-ativo" : ""}`}
+                        onClick={() => setVisualizacao('mensal')}
+                    >
+                        Mês
+                    </button>
+                </div>
+                
+                {/* Tabela de Exceções (Simulando a Tabela de Agendamentos) */}
+                <section className='calendario-ou-filaespera'>
+                    <div className="fila-container">
+                        <h2 className="fila-titulo">Exceções em {filtroData} ({excecoes.length})</h2>
+                        {loading ? (
+                            <p>Carregando exceções...</p>
+                        ) : excecoes.length === 0 ? (
+                            <p>Nenhuma exceção encontrada para os filtros aplicados.</p>
+                        ) : (
+                            <table className="fila-tabela">
+                                <thead>
+                                    <tr>
+                                        <th>ID Exceção</th>
+                                        <th>ID Médico</th>
+                                        <th>Data</th>
+                                        <th>Início</th>
+                                        <th>Término</th>
+                                        <th>Tipo</th>
+                                        <th>Motivo</th>
+                                        <th>Ações</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {excecoes.map((excecao, index) => (
+                                        <tr key={excecao.id || index}>
+                                            <td>{excecao.id || 'N/A'}</td>
+                                            <td>{excecao.doctor_id}</td>
+                                            <td>{excecao.date}</td>
+                                            <td>{excecao.start_time ? excecao.start_time.substring(0, 5) : 'Dia Todo'}</td>
+                                            <td>{excecao.end_time ? excecao.end_time.substring(0, 5) : 'Dia Todo'}</td>
+                                            <td>
+                                                <span className={`status-tag ${excecao.kind === 'bloqueio' ? 'legenda-item-cancelado' : 'legenda-item-realizado'}`}>
+                                                    {excecao.kind}
+                                                </span>
+                                            </td>
+                                            <td>{excecao.reason}</td>
+                                            <td>
+                                                {excecao.id && (
+                                                    <button 
+                                                        onClick={() => deletarExcecao(excecao.id)}
+                                                        style={{ background: '#dc3545', color: 'white', border: 'none', padding: '5px 10px', cursor: 'pointer', borderRadius: '4px' }}
+                                                    >
+                                                        Deletar
+                                                    </button>
+                                                )}
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        )}
+                    </div>
+                </section>
+            </div>
+        </div>
+    );
+}
+
+export default ExcecoesDisponibilidade;

src/perfis/perfil_secretaria/PerfilSecretaria.jsx

@@ -15,7 +15,7 @@ import Details from "../../pages/Details";
 import EditPage from "../../pages/EditPage";
 import DoctorDetails from "../../pages/DoctorDetails";
 import DoctorEditPage from "../../pages/DoctorEditPage";
-import FormDisponibilidade from "../../components/AgendarConsulta/FormDisponibilidade";
+import ExcecoesDisponibilidade from "../../pages/ExcecoesDisponibilidade";
 import AgendamentoEditPage from "../../pages/AgendamentoEditPage";
 
 function PerfilSecretaria({ onLogout }) {
@@ -38,7 +38,7 @@ function PerfilSecretaria({ onLogout }) {
             <Route path="agendamento/:id/edit" element={<AgendamentoEditPage/>} />
              <Route path="laudo" element={<LaudoManager />} />
             <Route path="*" element={<h2>Página não encontrada</h2>} />
-            <Route path="form-disponibilidade" element={<FormDisponibilidade />} />
+            <Route path="excecoes-disponibilidade" element={<ExcecoesDisponibilidade />} />
           </Routes>
         </div>
       </div>