New alert system and panel de control page

frontend/src/components/layout/DemoBanner/DemoBanner.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { extendDemoSession, destroyDemoSession } from '../../../api/services/demo';
 import { apiClient } from '../../../api/client';
 import { useNavigate } from 'react-router-dom';
@@ -7,7 +7,7 @@ import { BookOpen, Clock, Sparkles, X } from 'lucide-react';
 
 export const DemoBanner: React.FC = () => {
   const navigate = useNavigate();
-  const { startTour, resumeTour, tourState } = useDemoTour();
+  const { startTour, resumeTour } = useDemoTour();
   const [isDemo, setIsDemo] = useState(() => localStorage.getItem('demo_mode') === 'true');
   const [expiresAt, setExpiresAt] = useState<string | null>(() => localStorage.getItem('demo_expires_at'));
   const [timeRemaining, setTimeRemaining] = useState<string>('');
@@ -15,6 +15,16 @@ export const DemoBanner: React.FC = () => {
   const [extending, setExtending] = useState(false);
   const [showExitModal, setShowExitModal] = useState(false);
 
+  // Memoize tour state to prevent re-renders
+  const tourState = useMemo(() => {
+    try {
+      return getTourState();
+    } catch (error) {
+      console.error('Error getting tour state:', error);
+      return null;
+    }
+  }, []); // Only get tour state on initial render
+
   useEffect(() => {
     const demoMode = localStorage.getItem('demo_mode') === 'true';
     const expires = localStorage.getItem('demo_expires_at');