ajeitei a solicitar agendamento e fila de espera

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

@@ -12,28 +12,20 @@ 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);
 
-
 const Agendamento = ({ setDictInfo }) => {
   const navigate = useNavigate();
   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 [selectedDay, setSelectedDay] = useState(dayjs());
   const [quickJump, setQuickJump] = useState({
@@ -41,19 +33,14 @@ const Agendamento = ({ setDictInfo }) => {
     year: currentDate.year()
   });
 
-
-   
   const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
   const [appointmentToCancel, setAppointmentToCancel] = useState(null);
   const [cancellationReason, setCancellationReason] = useState('');
 
   const authHeader = useMemo(() => getAuthorizationHeader(), [getAuthorizationHeader]);
 
-
-   
   useEffect(() => {
     const carregarDados = async () => {
-           
       const patientId = user?.patient_id || "6e7f8829-0574-42df-9290-8dbb70f75ada";
 
       if (!authHeader) {
@@ -62,10 +49,8 @@ const Agendamento = ({ setDictInfo }) => {
         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);
@@ -74,12 +59,9 @@ const Agendamento = ({ setDictInfo }) => {
 
         const consultasBrutas = await response.json() || [];
 
-
-               
         const newDict = {};
         const newFila = [];
 
-
         for (const agendamento of consultasBrutas) {
           const agendamentoMelhorado = {
             ...agendamento,
@@ -105,7 +87,6 @@ const Agendamento = ({ setDictInfo }) => {
         setDictAgendamentosOrganizados(newDict);
         setFilaDeEsperaData(newFila);
 
-
       } catch (err) {
         console.error('Falha ao buscar ou processar agendamentos:', err);
         setDictAgendamentosOrganizados({});
@@ -115,11 +96,9 @@ const Agendamento = ({ setDictInfo }) => {
       }
     };
 
-
     carregarDados();
   }, [authHeader, user]);
 
-
   const updateAppointmentStatus = async (id, updates) => {
     const myHeaders = new Headers({
       "Authorization": authHeader, "apikey": API_KEY, "Content-Type": "application/json"
@@ -136,35 +115,26 @@ const Agendamento = ({ setDictInfo }) => {
     }
   };
 
-   
   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) {
       alert("Solicitação cancelada com sucesso!");
 
@@ -182,7 +152,6 @@ const Agendamento = ({ setDictInfo }) => {
     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);
@@ -202,34 +171,6 @@ const Agendamento = ({ setDictInfo }) => {
   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' }}>
@@ -238,28 +179,31 @@ const Agendamento = ({ setDictInfo }) => {
     );
   }
 
-
   return (
     <div>
       <h1>Minhas consultas</h1>
       <div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
-                
         <button
-                    style={PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle} 
+          className="btn-adicionar-consulta"
           onClick={() => {
             setPageConsulta(true);
             setFiladeEspera(false);
           }}
+          style={{
+            backgroundColor: PageNovaConsulta ? '#1d4ed8' : undefined
+          }}
         >
           <i className="bi bi-plus-circle"></i> Solicitar Agendamento
         </button>
-                
         <button
-                    style={FiladeEspera && !PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle} 
+          className="btn-adicionar-consulta"
           onClick={() => {
             setFiladeEspera(!FiladeEspera);
             setPageConsulta(false);
           }}
+          style={{
+            backgroundColor: FiladeEspera && !PageNovaConsulta ? '#1d4ed8' : undefined
+          }}
         >
           <i className="bi bi-list-task me-1"></i> Fila de Espera ({filaEsperaData.length})
         </button>
@@ -269,7 +213,6 @@ const Agendamento = ({ setDictInfo }) => {
         <div className='atendimento-eprocura'>
           <section className='calendario-ou-filaespera'>
             {!FiladeEspera ? (
-                            
               <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>
@@ -297,7 +240,10 @@ const Agendamento = ({ setDictInfo }) => {
                 </div>
                 <div className="calendar-main">
                   <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>
+                    <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>
                   </div>
                   <div className="calendar-controls">
                     <div className="date-indicator">
@@ -382,8 +328,6 @@ const Agendamento = ({ setDictInfo }) => {
         <AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
       )}
 
-
-            {}
       {isCancelModalOpen && (
         <div className="modal-overlay">
           <div className="modal-content" style={{ maxWidth: '400px' }}>
@@ -420,10 +364,8 @@ const Agendamento = ({ setDictInfo }) => {
           </div>
         </div>
       )}
-            {}
     </div>
   )
 }
 
-
 export default Agendamento;

src/pages/style/Agendamento.css

@@ -223,3 +223,31 @@
 .btn-action.btn-delete:hover {
     background-color: #C53030;
 }
+.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;
+}