Merge branch 'main' of https://git.popcode.com.br/RiseUP/riseup-squad23

package-lock.json

@@ -38,6 +38,7 @@
         "express": "^5.1.0",
         "firebase": "^12.5.0",
         "flatpickr": "^4.6.13",
+        "helmet": "^8.1.0",
         "html2pdf.js": "^0.12.1",
         "lucide-react": "^0.543.0",
         "node-fetch": "^3.3.2",
@@ -25979,6 +25980,15 @@
         "he": "bin/he"
       }
     },
+    "node_modules/helmet": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz",
+      "integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",

package.json

@@ -33,6 +33,7 @@
     "express": "^5.1.0",
     "firebase": "^12.5.0",
     "flatpickr": "^4.6.13",
+    "helmet": "^8.1.0",
     "html2pdf.js": "^0.12.1",
     "lucide-react": "^0.543.0",
     "node-fetch": "^3.3.2",

src/PagesPaciente/ConsultasPaciente.jsx

@@ -1,429 +1,371 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import API_KEY from '../components/utils/apiKeys.js';
-import AgendamentoCadastroManager from '../pages/AgendamentoCadastroManager.jsx'; 
+import AgendamentoCadastroManager from '../pages/AgendamentoCadastroManager.jsx';
 import { useAuth } from '../components/utils/AuthProvider.js';
 import dayjs from 'dayjs';
 import 'dayjs/locale/pt-br';
 import isBetween from 'dayjs/plugin/isBetween';
-import localeData from 'dayjs/plugin/localeData'; 
+import localeData from 'dayjs/plugin/localeData';
-import { ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react'; 
+import { ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react';
-import "../pages/style/Agendamento.css"; 
+import "../pages/style/Agendamento.css";
 import '../pages/style/FilaEspera.css';
 import Spinner from '../components/Spinner.jsx';
 
-
 dayjs.locale('pt-br');
 dayjs.extend(isBetween);
-dayjs.extend(localeData); 
+dayjs.extend(localeData);
-
 
 const Agendamento = ({ setDictInfo }) => {
-    const navigate = useNavigate();
+  const navigate = useNavigate();
-    const { getAuthorizationHeader, user } = useAuth();
+  const { getAuthorizationHeader, user } = useAuth();
 
+  const [isLoading, setIsLoading] = useState(true);
+  const [DictAgendamentosOrganizados, setDictAgendamentosOrganizados] = useState({});
+  const [filaEsperaData, setFilaDeEsperaData] = useState([]);
+  const [FiladeEspera, setFiladeEspera] = useState(false);
+  const [PageNovaConsulta, setPageConsulta] = useState(false);
 
-   
+  const [currentDate, setCurrentDate] = useState(dayjs());
-    const [isLoading, setIsLoading] = useState(true);
+  const [selectedDay, setSelectedDay] = useState(dayjs());
-    const [DictAgendamentosOrganizados, setDictAgendamentosOrganizados] = useState({});
+  const [quickJump, setQuickJump] = useState({
-    
+    month: currentDate.month(),
-    
+    year: currentDate.year()
-    const [filaEsperaData, setFilaDeEsperaData] = useState([]);
+  });
-    
-    const [FiladeEspera, setFiladeEspera] = useState(false); 
-    const [PageNovaConsulta, setPageConsulta] = useState(false);
-    
 
-    const [currentDate, setCurrentDate] = useState(dayjs());
+  const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
-    const [selectedDay, setSelectedDay] = useState(dayjs());
+  const [appointmentToCancel, setAppointmentToCancel] = useState(null);
-    const [quickJump, setQuickJump] = useState({ 
+  const [cancellationReason, setCancellationReason] = useState('');
-        month: currentDate.month(), 
+
-        year: currentDate.year() 
+  const authHeader = useMemo(() => getAuthorizationHeader(), [getAuthorizationHeader]);
+
+  useEffect(() => {
+    const carregarDados = async () => {
+      const patientId = user?.patient_id || "6e7f8829-0574-42df-9290-8dbb70f75ada";
+
+      if (!authHeader) {
+        console.warn("Header de autorização não disponível.");
+        setIsLoading(false);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const myHeaders = new Headers({ "Authorization": authHeader, "apikey": API_KEY });
+        const requestOptions = { method: 'GET', headers: myHeaders };
+        const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*,doctors(full_name)&patient_id=eq.${patientId}`, requestOptions);
+
+        if (!response.ok) throw new Error(`Erro na requisição: ${response.statusText}`);
+
+        const consultasBrutas = await response.json() || [];
+
+        const newDict = {};
+        const newFila = [];
+
+        for (const agendamento of consultasBrutas) {
+          const agendamentoMelhorado = {
+            ...agendamento,
+            medico_nome: agendamento.doctors?.full_name || 'Médico não informado'
+          };
+
+          if (agendamento.status === "requested") {
+            newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
+          } else {
+            const diaAgendamento = dayjs(agendamento.scheduled_at).format("YYYY-MM-DD");
+            if (newDict[diaAgendamento]) {
+              newDict[diaAgendamento].push(agendamentoMelhorado);
+            } else {
+              newDict[diaAgendamento] = [agendamentoMelhorado];
+            }
+          }
+        }
+
+        for (const key in newDict) {
+          newDict[key].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
+        }
+
+        setDictAgendamentosOrganizados(newDict);
+        setFilaDeEsperaData(newFila);
+
+      } catch (err) {
+        console.error('Falha ao buscar ou processar agendamentos:', err);
+        setDictAgendamentosOrganizados({});
+        setFilaDeEsperaData([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    carregarDados();
+  }, [authHeader, user]);
+
+  const updateAppointmentStatus = async (id, updates) => {
+    const myHeaders = new Headers({
+      "Authorization": authHeader, "apikey": API_KEY, "Content-Type": "application/json"
+    });
+    const requestOptions = { method: 'PATCH', headers: myHeaders, body: JSON.stringify(updates) };
+
+    try {
+      const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions);
+      if (!response.ok) throw new Error('Falha ao atualizar o status.');
+      return true;
+    } catch (error) {
+      console.error('Erro de rede/servidor:', error);
+      return false;
+    }
+  };
+
+  const handleCancelClick = (appointmentId) => {
+    setAppointmentToCancel(appointmentId);
+    setCancellationReason('');
+    setIsCancelModalOpen(true);
+  };
+
+  const executeCancellation = async () => {
+    if (!appointmentToCancel) return;
+    setIsLoading(true);
+    const motivo = cancellationReason.trim() || "Cancelado pelo paciente (motivo não especificado)";
+    const success = await updateAppointmentStatus(appointmentToCancel, {
+      status: "cancelled",
+      cancellation_reason: motivo,
+      updated_at: new Date().toISOString()
     });
 
+    setIsCancelModalOpen(false);
+    setAppointmentToCancel(null);
+    setCancellationReason('');
 
-   
+    if (success) {
-    const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
+      alert("Solicitação cancelada com sucesso!");
-    const [appointmentToCancel, setAppointmentToCancel] = useState(null); 
-    const [cancellationReason, setCancellationReason] = useState('');
-    
-    const authHeader = useMemo(() => getAuthorizationHeader(), [getAuthorizationHeader]);
 
-
+      setDictAgendamentosOrganizados(prev => {
-   
+        const newDict = { ...prev };
-    useEffect(() => {
+        for (const date in newDict) {
-        const carregarDados = async () => {
+          newDict[date] = newDict[date].filter(app => app.id !== appointmentToCancel);
-           
-            const patientId = user?.patient_id || "6e7f8829-0574-42df-9290-8dbb70f75ada";
-            
-            if (!authHeader) {
-                console.warn("Header de autorização não disponível.");
-                setIsLoading(false);
-                return;
-            }
-
-
-            setIsLoading(true);
-            try {
-                
-                const myHeaders = new Headers({ "Authorization": authHeader, "apikey": API_KEY });
-                const requestOptions = { method: 'GET', headers: myHeaders };
-                const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*,doctors(full_name)&patient_id=eq.${patientId}`, requestOptions);
-                
-                if (!response.ok) throw new Error(`Erro na requisição: ${response.statusText}`);
-                
-                const consultasBrutas = await response.json() || [];
-
-
-               
-                const newDict = {};
-                const newFila = [];
-
-
-                for (const agendamento of consultasBrutas) {
-                    const agendamentoMelhorado = { 
-                        ...agendamento, 
-                        medico_nome: agendamento.doctors?.full_name || 'Médico não informado' 
-                    };
-                    
-                    if (agendamento.status === "requested") {
-                        newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
-                    } else {
-                        const diaAgendamento = dayjs(agendamento.scheduled_at).format("YYYY-MM-DD");
-                        if (newDict[diaAgendamento]) {
-                            newDict[diaAgendamento].push(agendamentoMelhorado);
-                        } else {
-                            newDict[diaAgendamento] = [agendamentoMelhorado];
-                        }
-                    }
-                }
-                
-                for (const key in newDict) {
-                    newDict[key].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
-                }
-                
-                setDictAgendamentosOrganizados(newDict);
-                setFilaDeEsperaData(newFila);
-
-
-            } catch (err) {
-                console.error('Falha ao buscar ou processar agendamentos:', err);
-                setDictAgendamentosOrganizados({});
-                setFilaDeEsperaData([]);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-
-
-        carregarDados();
-    }, [authHeader, user]); 
-
-
-    const updateAppointmentStatus = async (id, updates) => {
-        const myHeaders = new Headers({
-            "Authorization": authHeader, "apikey": API_KEY, "Content-Type": "application/json"
-        });
-        const requestOptions = { method: 'PATCH', headers: myHeaders, body: JSON.stringify(updates) };
-        
-        try {
-            const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions);
-            if (!response.ok) throw new Error('Falha ao atualizar o status.');
-            return true;
-        } catch (error) {
-            console.error('Erro de rede/servidor:', error);
-            return false;
         }
-    };
+        return newDict;
-    
+      });
-   
+      setFilaDeEsperaData(prev => prev.filter(item => item.agendamento.id !== appointmentToCancel));
-    const handleCancelClick = (appointmentId) => {
+    } else {
-        setAppointmentToCancel(appointmentId);
+      alert("Falha ao cancelar a solicitação.");
-        setCancellationReason(''); 
-        setIsCancelModalOpen(true);
-    };
-
-
-   
-    const executeCancellation = async () => {
-        if (!appointmentToCancel) return;
-        
-        setIsLoading(true);
-        
-      
-        const motivo = cancellationReason.trim() || "Cancelado pelo paciente (motivo não especificado)";
-        
-        const success = await updateAppointmentStatus(appointmentToCancel, { 
-            status: "cancelled", 
-            cancellation_reason: motivo, 
-            updated_at: new Date().toISOString() 
-        });
-        
-       
-        setIsCancelModalOpen(false); 
-        setAppointmentToCancel(null);
-        setCancellationReason('');
-
-
-        if (success) {
-            alert("Solicitação cancelada com sucesso!");
-            
-            setDictAgendamentosOrganizados(prev => {
-                const newDict = { ...prev };
-                for (const date in newDict) {
-                    newDict[date] = newDict[date].filter(app => app.id !== appointmentToCancel);
-                }
-                return newDict;
-            });
-            setFilaDeEsperaData(prev => prev.filter(item => item.agendamento.id !== appointmentToCancel));
-        } else {
-            alert("Falha ao cancelar a solicitação.");
-        }
-        setIsLoading(false);
-    };
-    
-  
-    const handleQuickJumpChange = (type, value) => setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
-    const applyQuickJump = () => {
-        const newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
-        setCurrentDate(newDate);
-        setSelectedDay(newDate);
-    };
-    const dateGrid = useMemo(() => {
-        const grid = [];
-        const startOfMonth = currentDate.startOf('month');
-        let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
-        for (let i = 0; i < 42; i++) {
-            grid.push(currentDay);
-            currentDay = currentDay.add(1, 'day');
-        }
-        return grid;
-    }, [currentDate]);
-    const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
-    const handleDateClick = (day) => setSelectedDay(day);
-
-    const activeButtonStyle = {
-        backgroundColor: '#1B2A41', 
-        color: 'white',
-        padding: '6px 12px',
-        fontSize: '0.875rem',
-        borderRadius: '8px',
-        border: '1px solid white', 
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        cursor: 'pointer'
-    };
-
-    const inactiveButtonStyle = {
-        backgroundColor: '#1B2A41', 
-        color: 'white',
-        padding: '6px 12px',
-        fontSize: '0.875rem',
-        borderRadius: '8px',
-        border: '1px solid #1B2A41', 
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        cursor: 'pointer'
-    };
-
-
-
-    if (isLoading) {
-        return (
-            <div className="form-container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
-                <Spinner />
-            </div>
-        );
     }
+    setIsLoading(false);
+  };
 
+  const handleQuickJumpChange = (type, value) => setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
+  const applyQuickJump = () => {
+    const newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
+    setCurrentDate(newDate);
+    setSelectedDay(newDate);
+  };
+  const dateGrid = useMemo(() => {
+    const grid = [];
+    const startOfMonth = currentDate.startOf('month');
+    let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
+    for (let i = 0; i < 42; i++) {
+      grid.push(currentDay);
+      currentDay = currentDay.add(1, 'day');
+    }
+    return grid;
+  }, [currentDate]);
+  const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
+  const handleDateClick = (day) => setSelectedDay(day);
 
+  if (isLoading) {
     return (
-        <div>
+      <div className="form-container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
-            <h1>Minhas consultas</h1>
+        <Spinner />
-            <div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
+      </div>
-                
+    );
-                <button 
+  }
-                    style={PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle} 
+
-                    onClick={() => {
+  return (
-                        setPageConsulta(true);
+    <div>
-                        setFiladeEspera(false);
+      <h1>Minhas consultas</h1>
-                    }}
+      <div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
-                >
+        <button
-                    <i className="bi bi-plus-circle"></i> Solicitar Agendamento
+          className="btn-adicionar-consulta"
-                </button>
+          onClick={() => {
-                
+            setPageConsulta(true);
-                <button 
+            setFiladeEspera(false);
-                    style={FiladeEspera && !PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle} 
+          }}
-                    onClick={() => {
+          style={{
-                        setFiladeEspera(!FiladeEspera);
+            backgroundColor: PageNovaConsulta ? '#1d4ed8' : undefined
-                        setPageConsulta(false);
+          }}
-                    }}
+        >
-                >
+          <i className="bi bi-plus-circle"></i> Solicitar Agendamento
-                    <i className="bi bi-list-task me-1"></i> Fila de Espera ({filaEsperaData.length})
+        </button>
-                </button>
+        <button
-            </div>
+          className="btn-adicionar-consulta"
-            
+          onClick={() => {
-            {!PageNovaConsulta ? (
+            setFiladeEspera(!FiladeEspera);
-                <div className='atendimento-eprocura'>
+            setPageConsulta(false);
-                    <section className='calendario-ou-filaespera'>
+          }}
-                        {!FiladeEspera ? (
+          style={{
-                            
+            backgroundColor: FiladeEspera && !PageNovaConsulta ? '#1d4ed8' : undefined
-                            <div className="calendar-wrapper">
+          }}
-                                <div className="calendar-info-panel">
+        >
-                                    <div className="info-date-display"><span>{selectedDay.format('MMM')}</span><strong>{selectedDay.format('DD')}</strong></div>
+          <i className="bi bi-list-task me-1"></i> Fila de Espera ({filaEsperaData.length})
-                                    <div className="info-details"><h3>{selectedDay.format('dddd')}</h3><p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p></div>
+        </button>
-                                    <div className="appointments-list">
+      </div>
-                                        <h4>Consultas para {selectedDay.format('DD/MM')}</h4>
+
-                                        {(DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
+      {!PageNovaConsulta ? (
-                                            DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
+        <div className='atendimento-eprocura'>
-                                                <div key={app.id} className="appointment-item" data-status={app.status}>
+          <section className='calendario-ou-filaespera'>
-                                                    <div className="item-time">{dayjs(app.scheduled_at).format('HH:mm')}</div>
+            {!FiladeEspera ? (
-                                                    <div className="item-details">
+              <div className="calendar-wrapper">
-                                                        <span>Consulta com Dr(a). {app.medico_nome}</span>
+                <div className="calendar-info-panel">
-                                                    </div>
+                  <div className="info-date-display"><span>{selectedDay.format('MMM')}</span><strong>{selectedDay.format('DD')}</strong></div>
-                                                    <div className='item-actions'>
+                  <div className="info-details"><h3>{selectedDay.format('dddd')}</h3><p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p></div>
-                                                        {app.status !== 'cancelled' && dayjs(app.scheduled_at).isAfter(dayjs()) && (
+                  <div className="appointments-list">
-                                                            <button className="btn btn-sm btn-outline-danger" onClick={() => handleCancelClick(app.id)} title="Cancelar Consulta">
+                    <h4>Consultas para {selectedDay.format('DD/MM')}</h4>
-                                                                <Trash2 size={16} />
+                    {(DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
-                                                            </button>
+                      DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
-                                                        )}
+                        <div key={app.id} className="appointment-item" data-status={app.status}>
-                                                    </div>
+                          <div className="item-time">{dayjs(app.scheduled_at).format('HH:mm')}</div>
-                                                </div>
+                          <div className="item-details">
-                                            ))
+                            <span>Consulta com Dr(a). {app.medico_nome}</span>
-                                        ) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada para esta data.</p></div>)}
+                          </div>
-                                    </div>
+                          <div className='item-actions'>
-                                </div>
+                            {app.status !== 'cancelled' && dayjs(app.scheduled_at).isAfter(dayjs()) && (
-                                <div className="calendar-main">
+                              <button className="btn btn-sm btn-outline-danger" onClick={() => handleCancelClick(app.id)} title="Cancelar Consulta">
-                                    <div className="calendar-legend">
+                                <Trash2 size={16} />
-                                        <div className="legend-item" data-status="completed">Realizado</div><div className="legend-item" data-status="confirmed">Confirmado</div><div className="legend-item" data-status="agendado">Agendado</div><div className="legend-item" data-status="cancelled">Cancelado</div>
+                              </button>
-                                    </div>
+                            )}
-                                    <div className="calendar-controls">
+                          </div>
-                                        <div className="date-indicator">
+                        </div>
-                                            <h2>{currentDate.format('MMMM [de] YYYY')}</h2>
+                      ))
-                                            <div className="quick-jump-controls" style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
+                    ) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada para esta data.</p></div>)}
-                                                <select value={quickJump.month} onChange={(e) => handleQuickJumpChange('month', e.target.value)} className="form-select form-select-sm w-auto">
+                  </div>
-                                                    {dayjs.months().map((month, index) => (<option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>))}
-                                                </select>
-                                                <select value={quickJump.year} onChange={(e) => handleQuickJumpChange('year', e.target.value)} className="form-select form-select-sm w-auto">
-                                                    {Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (<option key={year} value={year}>{year}</option>))}
-                                                </select>
-                                                <button className="btn btn-sm btn-outline-primary" onClick={applyQuickJump} disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}>Ir</button>
-                                            </div>
-                                        </div>
-                                        <div className="nav-buttons">
-                                            <button onClick={() => setCurrentDate(c => c.subtract(1, 'month'))}><ChevronLeft size={20} /></button>
-                                            <button onClick={() => setCurrentDate(dayjs())}>Hoje</button>
-                                            <button onClick={() => setCurrentDate(c => c.add(1, 'month'))}><ChevronRight size={20} /></button>
-                                        </div>
-                                    </div>
-                                    <div className="calendar-grid">
-                                        {weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
-                                        {dateGrid.map((day, index) => {
-                                            const appointmentsOnDay = DictAgendamentosOrganizados[day.format('YYYY-MM-DD')] || [];
-                                            const cellClasses = `day-cell ${day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'} ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${day.isSame(selectedDay, 'day') ? 'selected' : ''}`;
-                                            return (
-                                                <div key={index} className={cellClasses} onClick={() => handleDateClick(day)}>
-                                                    <span>{day.format('D')}</span>
-                                                    {appointmentsOnDay.length > 0 && <div className="appointments-indicator">{appointmentsOnDay.length}</div>}
-                                                </div>
-                                            );
-                                        })}
-                                    </div>
-                                </div>
-                            </div>
-                        ) : (
-                            <div className="page-content table-paciente-container">
-                                <section className="row">
-                                    <div className="col-12">
-                                        <div className="card table-paciente-card">
-                                            <div className="card-header"><h4 className="card-title mb-0">Minhas Solicitações em Fila de Espera</h4></div>
-                                            <div className="card-body">
-                                                <div className="table-responsive">
-                                                    <table className="table table-striped table-hover">
-                                                        <thead>
-                                                            <tr>
-                                                                <th>Médico Solicitado</th>
-                                                                <th>Data da Solicitação</th>
-                                                                <th>Ações</th>
-                                                            </tr>
-                                                        </thead>
-                                                        <tbody>
-                                                            {filaEsperaData.length > 0 ? (filaEsperaData.map((item) => (
-                                                                <tr key={item.agendamento.id}>
-                                                                    <td>Dr(a). {item.Infos?.medico_nome}</td>
-                                                                    <td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
-                                                                    <td>
-                                                                        <button className="btn btn-sm btn-danger" onClick={() => handleCancelClick(item.agendamento.id)}>
-                                                                            <i className="bi bi-trash me-1"></i> Cancelar
-                                                                        </button>
-                                                                    </td>
-                                                                </tr>
-                                                            ))) : (
-                                                                <tr>
-                                                                    <td colSpan="3" className="text-center py-4">
-                                                                        <div className="text-muted">Nenhuma solicitação na fila de espera.</div>
-                                                                    </td>
-                                                                </tr>
-                                                            )}
-                                                        </tbody>
-                                                    </table>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </section>
-                            </div>
-                        )}
-                    </section>
                 </div>
-            ) : (
+                <div className="calendar-main">
-                <AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
+                  <div className="calendar-legend">
-            )}
+                    <div className="legend-item" data-status="completed">Realizado</div>
-
+                    <div className="legend-item" data-status="confirmed">Confirmado</div>
-
+                    <div className="legend-item" data-status="agendado">Agendado</div>
-            {}
+                    <div className="legend-item" data-status="cancelled">Cancelado</div>
-            {isCancelModalOpen && (
+                  </div>
-                <div className="modal-overlay">
+                  <div className="calendar-controls">
-                    <div className="modal-content" style={{ maxWidth: '400px' }}>
+                    <div className="date-indicator">
-                        <div className="modal-header" style={{ backgroundColor: '#fee2e2', borderBottom: '1px solid #fca5a5', padding: '15px', borderRadius: '8px 8px 0 0' }}>
+                      <h2>{currentDate.format('MMMM [de] YYYY')}</h2>
-                            <h4 style={{ margin: 0, color: '#dc2626' }}>Confirmação de Cancelamento</h4>
+                      <div className="quick-jump-controls" style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
-                            <button className="close-button" onClick={() => setIsCancelModalOpen(false)} style={{ background: 'none', border: 'none', fontSize: '1.5rem', cursor: 'pointer' }}>&times;</button>
+                        <select value={quickJump.month} onChange={(e) => handleQuickJumpChange('month', e.target.value)} className="form-select form-select-sm w-auto">
-                        </div>
+                          {dayjs.months().map((month, index) => (<option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>))}
-                        <div className="modal-body" style={{ padding: '20px' }}>
+                        </select>
-                            <p>Qual o motivo do cancelamento?</p>
+                        <select value={quickJump.year} onChange={(e) => handleQuickJumpChange('year', e.target.value)} className="form-select form-select-sm w-auto">
-                            <textarea 
+                          {Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (<option key={year} value={year}>{year}</option>))}
-                                value={cancellationReason}
+                        </select>
-                                onChange={(e) => setCancellationReason(e.target.value)}
+                        <button className="btn btn-sm btn-outline-primary" onClick={applyQuickJump} disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}>Ir</button>
-                                placeholder="Ex: Precisei viajar, motivo pessoal, etc."
+                      </div>
-                                rows="4"
-                                style={{ width: '100%', padding: '10px', resize: 'none', border: '1px solid #ccc', borderRadius: '4px' }}
-                            ></textarea>
-                        </div>
-                        <div className="modal-footer" style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', padding: '15px', borderTop: '1px solid #eee' }}>
-                            <button 
-                                className="btn btn-secondary" 
-                                onClick={() => setIsCancelModalOpen(false)}
-                                style={{ backgroundColor: '#6c757d', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
-                            >
-                                Cancelar
-                            </button>
-                            <button 
-                                className="btn btn-danger" 
-                                onClick={executeCancellation}
-                                style={{ backgroundColor: '#dc3545', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
-                            >
-                                <Trash2 size={16} style={{ marginRight: '5px' }} /> Excluir
-                            </button>
-                        </div>
                     </div>
+                    <div className="nav-buttons">
+                      <button onClick={() => setCurrentDate(c => c.subtract(1, 'month'))}><ChevronLeft size={20} /></button>
+                      <button onClick={() => setCurrentDate(dayjs())}>Hoje</button>
+                      <button onClick={() => setCurrentDate(c => c.add(1, 'month'))}><ChevronRight size={20} /></button>
+                    </div>
+                  </div>
+                  <div className="calendar-grid">
+                    {weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
+                    {dateGrid.map((day, index) => {
+                      const appointmentsOnDay = DictAgendamentosOrganizados[day.format('YYYY-MM-DD')] || [];
+                      const cellClasses = `day-cell ${day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'} ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${day.isSame(selectedDay, 'day') ? 'selected' : ''}`;
+                      return (
+                        <div key={index} className={cellClasses} onClick={() => handleDateClick(day)}>
+                          <span>{day.format('D')}</span>
+                          {appointmentsOnDay.length > 0 && <div className="appointments-indicator">{appointmentsOnDay.length}</div>}
+                        </div>
+                      );
+                    })}
+                  </div>
                 </div>
+              </div>
+            ) : (
+              <div className="page-content table-paciente-container">
+                <section className="row">
+                  <div className="col-12">
+                    <div className="card table-paciente-card">
+                      <div className="card-header"><h4 className="card-title mb-0">Minhas Solicitações em Fila de Espera</h4></div>
+                      <div className="card-body">
+                        <div className="table-responsive">
+                          <table className="table table-striped table-hover">
+                            <thead>
+                              <tr>
+                                <th>Médico Solicitado</th>
+                                <th>Data da Solicitação</th>
+                                <th>Ações</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {filaEsperaData.length > 0 ? (filaEsperaData.map((item) => (
+                                <tr key={item.agendamento.id}>
+                                  <td>Dr(a). {item.Infos?.medico_nome}</td>
+                                  <td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
+                                  <td>
+                                    <button className="btn btn-sm btn-danger" onClick={() => handleCancelClick(item.agendamento.id)}>
+                                      <i className="bi bi-trash me-1"></i> Cancelar
+                                    </button>
+                                  </td>
+                                </tr>
+                              ))) : (
+                                <tr>
+                                  <td colSpan="3" className="text-center py-4">
+                                    <div className="text-muted">Nenhuma solicitação na fila de espera.</div>
+                                  </td>
+                                </tr>
+                              )}
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </section>
+              </div>
             )}
-            {}
+          </section>
         </div>
-    )
+      ) : (
+        <AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
+      )}
+
+      {isCancelModalOpen && (
+        <div className="modal-overlay">
+          <div className="modal-content" style={{ maxWidth: '400px' }}>
+            <div className="modal-header" style={{ backgroundColor: '#fee2e2', borderBottom: '1px solid #fca5a5', padding: '15px', borderRadius: '8px 8px 0 0' }}>
+              <h4 style={{ margin: 0, color: '#dc2626' }}>Confirmação de Cancelamento</h4>
+              <button className="close-button" onClick={() => setIsCancelModalOpen(false)} style={{ background: 'none', border: 'none', fontSize: '1.5rem', cursor: 'pointer' }}>&times;</button>
+            </div>
+            <div className="modal-body" style={{ padding: '20px' }}>
+              <p>Qual o motivo do cancelamento?</p>
+              <textarea
+                value={cancellationReason}
+                onChange={(e) => setCancellationReason(e.target.value)}
+                placeholder="Ex: Precisei viajar, motivo pessoal, etc."
+                rows="4"
+                style={{ width: '100%', padding: '10px', resize: 'none', border: '1px solid #ccc', borderRadius: '4px' }}
+              ></textarea>
+            </div>
+            <div className="modal-footer" style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', padding: '15px', borderTop: '1px solid #eee' }}>
+              <button
+                className="btn btn-secondary"
+                onClick={() => setIsCancelModalOpen(false)}
+                style={{ backgroundColor: '#6c757d', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
+              >
+                Cancelar
+              </button>
+              <button
+                className="btn btn-danger"
+                onClick={executeCancellation}
+                style={{ backgroundColor: '#dc3545', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
+              >
+                <Trash2 size={16} style={{ marginRight: '5px' }} /> Excluir
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
 }
 
-
 export default Agendamento;

src/components/Header/Header.css

@@ -487,4 +487,15 @@
         width: calc(100vw - 20px);
         max-width: none;
     }
-}
+}
+
+/* permite que cliques "passem" através do header (exceto para os elementos interativos) */
+.header-container {
+  pointer-events: none; /* header não captura cliques */
+}
+
+/* mas permite que os controles no canto (telefone e profile) continuem clicáveis */
+.phone-icon-container,
+.profile-section {
+  pointer-events: auto;
+}

src/components/Header/Header.jsx

@@ -1,8 +1,11 @@
+// src/components/Header/Header.jsx
 import React, { useState, useRef, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { createPortal } from 'react-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import './Header.css';
 
 const Header = () => {
+  // --- Hooks (sempre chamados na mesma ordem) ---
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isSuporteCardOpen, setIsSuporteCardOpen] = useState(false);
   const [isChatOpen, setIsChatOpen] = useState(false);
@@ -11,9 +14,11 @@ const Header = () => {
   const [showLogoutModal, setShowLogoutModal] = useState(false);
   const [avatarUrl, setAvatarUrl] = useState(null);
   const navigate = useNavigate();
+  const location = useLocation();
   const chatInputRef = useRef(null);
   const mensagensContainerRef = useRef(null);
 
+  // --- Efeitos ---
   useEffect(() => {
     const loadAvatar = () => {
       const localAvatar = localStorage.getItem('user_avatar');
@@ -44,7 +49,18 @@ const Header = () => {
     }
   }, [mensagens]);
 
-  // --- Logout ---
+  // Fecha modal com ESC (útil para logout)
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === 'Escape' && showLogoutModal) {
+        setShowLogoutModal(false);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [showLogoutModal]);
+
+  // --- Lógica e handlers ---
   const handleLogoutClick = () => {
     setShowLogoutModal(true);
     setIsDropdownOpen(false);
@@ -65,26 +81,21 @@ const Header = () => {
         sessionStorage.getItem("authToken");
 
       if (token) {
-        const response = await fetch(
+        // tentativa de logout no backend (se houver)
-          "https://mock.apidog.com/m1/1053378-0-default/auth/v1/logout",
+        try {
-          {
+          await fetch(
-            method: "POST",
+            "https://mock.apidog.com/m1/1053378-0-default/auth/v1/logout",
-            headers: {
+            {
-              "Content-Type": "application/json",
+              method: "POST",
-              Authorization: `Bearer ${token}`,
+              headers: {
-            },
+                "Content-Type": "application/json",
-          }
+                Authorization: `Bearer ${token}`,
-        );
+              },
-
+            }
-        if (response.status === 204) console.log("Logout realizado com sucesso");
+          );
-        else if (response.status === 401) console.log("Token inválido ou expirado");
+        } catch (err) {
-        else {
+          // não interrompe o fluxo se a API falhar — prosseguimos para limpar local
-          try {
+          console.warn('Erro ao chamar endpoint de logout (ignorado):', err);
-            const errorData = await response.json();
-            console.error("Erro no logout:", errorData);
-          } catch {
-            console.error("Erro no logout - status:", response.status);
-          }
         }
       }
 
@@ -105,12 +116,13 @@ const Header = () => {
       sessionStorage.removeItem(key);
     });
 
+    // tenta limpar caches relacionados se existirem
     if (window.caches) {
       caches.keys().then(names => {
         names.forEach(name => {
           if (name.includes("auth") || name.includes("api")) caches.delete(name);
         });
-      });
+      }).catch(()=>{ /* ignore */ });
     }
   };
 
@@ -157,7 +169,6 @@ const Header = () => {
     e.preventDefault();
     if (mensagem.trim() === '') return;
 
-    // Mensagem do usuário
     const novaMensagemUsuario = {
       id: Date.now(),
       texto: mensagem,
@@ -177,7 +188,6 @@ const Header = () => {
 
       const data = await response.json();
 
-      // Resposta da IA
       const respostaSuporte = {
         id: Date.now() + 1,
         texto: data.resposta || data.reply || "Desculpe, não consegui processar sua pergunta no momento 😅",
@@ -198,6 +208,7 @@ const Header = () => {
     }
   };
 
+  // --- Subcomponentes ---
   const SuporteCard = () => (
     <div className="suporte-card">
       <h2 className="suporte-titulo">Suporte</h2>
@@ -257,6 +268,82 @@ const Header = () => {
     </div>
   );
 
+  // --- Modal de logout renderizado via Portal (garante top-most e clique) ---
+  const LogoutModalPortal = ({ onCancel, onConfirm }) => {
+    const modalContent = (
+      <div
+        className="logout-modal-overlay"
+        // inline style reforçando z-index e pointer events caso algum CSS global esteja atrapalhando
+        style={{
+          position: 'fixed',
+          top: 0, left: 0, right: 0, bottom: 0,
+          backgroundColor: 'rgba(0,0,0,0.5)',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          zIndex: 99999,
+          padding: '1rem'
+        }}
+        role="dialog"
+        aria-modal="true"
+      >
+        <div
+          className="logout-modal-content"
+          style={{
+            backgroundColor: 'white',
+            padding: '1.6rem',
+            borderRadius: '12px',
+            boxShadow: '0 8px 24px rgba(0,0,0,0.2)',
+            maxWidth: '480px',
+            width: '100%',
+            textAlign: 'center'
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <h3 style={{ marginTop: 0 }}>Confirmar Logout</h3>
+          <p>Tem certeza que deseja encerrar a sessão?</p>
+          <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', marginTop: '1rem' }}>
+            <button
+              onClick={onCancel}
+              style={{
+                padding: '10px 18px',
+                borderRadius: '8px',
+                border: '1px solid #ccc',
+                background: 'white',
+                cursor: 'pointer'
+              }}
+            >
+              Cancelar
+            </button>
+            <button
+              onClick={onConfirm}
+              style={{
+                padding: '10px 18px',
+                borderRadius: '8px',
+                border: 'none',
+                background: '#dc3545',
+                color: 'white',
+                cursor: 'pointer'
+              }}
+            >
+              Sair
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+
+    // garante que exista document antes de criar portal (SSRed apps podem não ter)
+    if (typeof document === 'undefined') return null;
+    return createPortal(modalContent, document.body);
+  };
+
+  // --- Agora sim: condicional de render baseado na rota ---
+  if (location.pathname === '/login') {
+    return null;
+  }
+
+  // --- JSX principal ---
   return (
     <div className="header-container">
       <div className="right-corner-elements">
@@ -282,22 +369,9 @@ const Header = () => {
         </div>
       </div>
 
-      {/* Modal de Logout */}
+      {/* Modal de Logout via portal */}
       {showLogoutModal && (
-        <div className="logout-modal-overlay">
+        <LogoutModalPortal onCancel={handleLogoutCancel} onConfirm={handleLogoutConfirm} />
-          <div className="logout-modal-content">
-            <h3>Confirmar Logout</h3>
-            <p>Tem certeza que deseja encerrar a sessão?</p>
-            <div className="logout-modal-buttons">
-              <button onClick={handleLogoutCancel} className="logout-cancel-button">
-                Cancelar
-              </button>
-              <button onClick={handleLogoutConfirm} className="logout-confirm-button">
-                Sair
-              </button>
-            </div>
-          </div>
-        </div>
       )}
 
       {isSuporteCardOpen && (
@@ -319,4 +393,4 @@ const Header = () => {
   );
 };
 
-export default Header;
+export default Header;

src/pages/style/Agendamento.css

@@ -240,3 +240,31 @@
   .appointment-actions { width: 100%; }
   .btn-action { width: 100%; }
 }
+.btn-adicionar-consulta {
+  background-color: #2a67e2;
+  color: #fff;
+  padding: 10px 24px;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.btn-adicionar-consulta:hover {
+  background-color: #1d4ed8;
+}
+.btn-adicionar-consulta i {
+  font-size: 1.2em;
+  vertical-align: middle;
+}
+.btn-adicionar-consulta i {
+  font-size: 1.2em;        
+  vertical-align: middle;  
+  display: flex;           
+  align-items: center;
+  justify-content: center;
+}