Improve the frontend 3

frontend/src/features/demo-onboarding/config/tour-steps.ts

@@ -4,8 +4,8 @@ export const getDemoTourSteps = (): DriveStep[] => [
   {
     element: '[data-tour="demo-banner"]',
     popover: {
-      title: '¡Bienvenido a BakeryIA Demo!',
-      description: 'Estás en una sesión demo de 30 minutos con datos reales de una panadería española. Te guiaremos por las funciones principales de la plataforma. Puedes cerrar el tour en cualquier momento con ESC.',
+      title: '¡Bienvenido a BakeryIA!',
+      description: 'Descubre cómo gestionar tu panadería en 5 minutos al día. Esta demo de 30 minutos usa datos reales de una panadería española. Te mostramos cómo ahorrar 2-3 horas diarias en planificación y reducir desperdicio un 15-25%. Puedes cerrar el tour con ESC.',
       side: 'bottom',
       align: 'center',
     },
@@ -13,8 +13,8 @@ export const getDemoTourSteps = (): DriveStep[] => [
   {
     element: '[data-tour="dashboard-stats"]',
     popover: {
-      title: 'Métricas en Tiempo Real',
-      description: 'Aquí ves las métricas clave de tu panadería actualizadas al instante: ventas del día, pedidos pendientes, productos vendidos y alertas de stock crítico.',
+      title: 'Tu Panel de Control',
+      description: 'Todo lo importante en un vistazo: ventas del día, pedidos pendientes, productos vendidos y alertas de stock crítico. Empieza tu día aquí en 30 segundos.',
       side: 'bottom',
       align: 'start',
     },
@@ -22,26 +22,26 @@ export const getDemoTourSteps = (): DriveStep[] => [
   {
     element: '[data-tour="real-time-alerts"]',
     popover: {
-      title: 'Alertas Inteligentes',
-      description: 'El sistema te avisa automáticamente de stock bajo, pedidos urgentes, predicciones de demanda y oportunidades de producción. Toda la información importante en un solo lugar.',
+      title: 'El Sistema Te Avisa de Todo',
+      description: 'Olvídate de vigilar el stock constantemente. El sistema te alerta automáticamente de ingredientes bajos, pedidos urgentes, predicciones de demanda y oportunidades de producción. Tu asistente 24/7.',
       side: 'top',
       align: 'start',
     },
   },
   {
-    element: '[data-tour="procurement-plans"]',
+    element: '[data-tour="pending-po-approvals"]',
     popover: {
-      title: 'Planes de Aprovisionamiento',
-      description: 'Visualiza qué ingredientes necesitas comprar hoy según tus planes de producción. El sistema calcula automáticamente las cantidades necesarias.',
+      title: 'Qué Comprar Hoy (Ya Calculado)',
+      description: 'Cada mañana el sistema analiza automáticamente tus ventas, pronósticos y stock, y te dice exactamente qué ingredientes comprar. Solo tienes que revisar y aprobar con un clic. Adiós a Excel y cálculos manuales.',
       side: 'top',
       align: 'start',
     },
   },
   {
-    element: '[data-tour="production-plans"]',
+    element: '[data-tour="today-production"]',
     popover: {
-      title: 'Gestión de Producción',
-      description: 'Consulta y gestiona tus órdenes de producción programadas. Puedes ver el estado de cada orden, los ingredientes necesarios y el tiempo estimado.',
+      title: 'Qué Producir Hoy (Ya Planificado)',
+      description: 'El sistema programa automáticamente tus lotes de producción cada mañana basándose en la demanda prevista. Puedes ver qué hacer, cuándo hacerlo, qué ingredientes necesitas y el tiempo estimado. Solo tienes que empezar a producir.',
       side: 'top',
       align: 'start',
     },
@@ -49,8 +49,8 @@ export const getDemoTourSteps = (): DriveStep[] => [
   {
     element: '[data-tour="sidebar-database"]',
     popover: {
-      title: 'Base de Datos de tu Panadería',
-      description: 'Accede a toda la información de tu negocio: inventario de ingredientes, recetas, proveedores, equipos y equipo de trabajo.',
+      title: 'Tu Información en un Solo Lugar',
+      description: 'Toda la información de tu panadería centralizada: ingredientes, recetas, proveedores, equipos y trabajadores. Sin papeles, sin Excel dispersos. Todo en un solo lugar, siempre actualizado.',
       side: 'right',
       align: 'start',
     },
@@ -58,8 +58,8 @@ export const getDemoTourSteps = (): DriveStep[] => [
   {
     element: '[data-tour="sidebar-operations"]',
     popover: {
-      title: 'Operaciones Diarias',
-      description: 'Gestiona las operaciones del día a día: aprovisionamiento de ingredientes, producción de recetas y punto de venta (POS) para registrar ventas.',
+      title: 'Lo Que Hay Que Hacer Hoy',
+      description: 'Aquí gestionas el día a día: revisar y aprobar compras, iniciar producción y registrar ventas. Simple y directo. El sistema ya hizo la planificación compleja por ti.',
       side: 'right',
       align: 'start',
     },
@@ -67,8 +67,8 @@ export const getDemoTourSteps = (): DriveStep[] => [
   {
     element: '[data-tour="sidebar-analytics"]',
     popover: {
-      title: 'Análisis e Inteligencia Artificial',
-      description: 'Accede a análisis avanzados de ventas, producción y pronósticos de demanda con IA. Simula escenarios y obtén insights inteligentes para tu negocio.',
+      title: 'Entiende Tu Negocio con Gráficos Simples',
+      description: 'Análisis de ventas, producción y pronósticos de demanda en gráficos fáciles de entender. Simula escenarios (¿qué pasa si subo precios?) y recibe recomendaciones de la IA. No necesitas ser experto en datos.',
       side: 'right',
       align: 'start',
     },
@@ -76,8 +76,8 @@ export const getDemoTourSteps = (): DriveStep[] => [
   {
     element: '[data-tour="header-tenant-selector"]',
     popover: {
-      title: 'Multi-Panadería',
-      description: 'Si gestionas varias panaderías o puntos de venta, puedes cambiar entre ellas fácilmente desde aquí. Cada panadería tiene sus propios datos aislados.',
+      title: 'Gestiona Varias Panaderías',
+      description: 'Si tienes múltiples puntos de venta, cambia entre ellos fácilmente aquí. Cada panadería tiene sus propios datos completamente separados para mayor seguridad y claridad.',
       side: 'bottom',
       align: 'end',
     },
@@ -86,15 +86,15 @@ export const getDemoTourSteps = (): DriveStep[] => [
     element: '[data-tour="demo-banner-actions"]',
     popover: {
       title: 'Limitaciones del Demo',
-      description: 'En modo demo puedes explorar todas las funciones, pero algunas acciones destructivas están deshabilitadas. Los cambios que hagas no se guardarán después de que expire la sesión.',
+      description: 'En modo demo puedes explorar todas las funciones, pero no puedes hacer cambios permanentes. Los datos que veas son reales pero tus modificaciones no afectarán nada. Perfecto para aprender sin riesgo.',
       side: 'bottom',
       align: 'center',
     },
   },
   {
     popover: {
-      title: '¿Listo para gestionar tu panadería real?',
-      description: 'Has explorado las funcionalidades principales de BakeryIA. Crea una cuenta gratuita para acceder a todas las funciones sin límites, guardar tus datos de forma permanente y conectar tu negocio real.',
+      title: '¿Listo Para Tu Panadería Real?',
+      description: 'Ahora que has visto cómo funciona, imagina ahorrando 2-3 horas diarias y reduciendo desperdicio entre €500-1500 al mes. Crea una cuenta gratuita para conectar tu panadería real, guardar tus datos de forma permanente y empezar a ahorrar desde mañana.',
       side: 'top',
       align: 'center',
     },
@@ -106,7 +106,7 @@ export const getMobileTourSteps = (): DriveStep[] => [
     element: '[data-tour="demo-banner"]',
     popover: {
       title: '¡Bienvenido a BakeryIA!',
-      description: 'Sesión demo de 30 minutos con datos reales. Te mostraremos las funciones clave.',
+      description: 'Gestiona tu panadería en 5 min/día. Demo de 30 min con datos reales. Ahorra 2-3h diarias y reduce desperdicio 15-25%.',
       side: 'bottom',
       align: 'center',
     },
@@ -114,8 +114,8 @@ export const getMobileTourSteps = (): DriveStep[] => [
   {
     element: '[data-tour="dashboard-stats"]',
     popover: {
-      title: 'Métricas en Tiempo Real',
-      description: 'Ventas, pedidos, productos y alertas actualizadas al instante.',
+      title: 'Tu Panel de Control',
+      description: 'Todo lo importante en un vistazo. Empieza tu día aquí en 30 segundos.',
       side: 'bottom',
       align: 'start',
     },
@@ -123,26 +123,26 @@ export const getMobileTourSteps = (): DriveStep[] => [
   {
     element: '[data-tour="real-time-alerts"]',
     popover: {
-      title: 'Alertas Inteligentes',
-      description: 'Stock bajo, pedidos urgentes y predicciones de demanda en un solo lugar.',
+      title: 'El Sistema Te Avisa',
+      description: 'Olvídate de vigilar el stock. Alertas automáticas de todo lo importante. Tu asistente 24/7.',
       side: 'top',
       align: 'start',
     },
   },
   {
-    element: '[data-tour="procurement-plans"]',
+    element: '[data-tour="pending-po-approvals"]',
     popover: {
-      title: 'Aprovisionamiento',
-      description: 'Ingredientes que necesitas comprar hoy calculados automáticamente.',
+      title: 'Qué Comprar (Ya Calculado)',
+      description: 'Cada mañana el sistema calcula qué ingredientes comprar. Solo aprueba con un clic. Adiós Excel.',
       side: 'top',
       align: 'start',
     },
   },
   {
-    element: '[data-tour="production-plans"]',
+    element: '[data-tour="today-production"]',
     popover: {
-      title: 'Producción',
-      description: 'Gestiona órdenes de producción y consulta ingredientes necesarios.',
+      title: 'Qué Producir (Ya Planificado)',
+      description: 'El sistema programa tu producción automáticamente cada mañana. Solo tienes que empezar a producir.',
       side: 'top',
       align: 'start',
     },
@@ -150,8 +150,8 @@ export const getMobileTourSteps = (): DriveStep[] => [
   {
     element: '[data-tour="sidebar-menu-toggle"]',
     popover: {
-      title: 'Menú de Navegación',
-      description: 'Toca aquí para acceder a Base de Datos, Operaciones y Análisis.',
+      title: 'Menú: Tu Información y Operaciones',
+      description: 'Aquí accedes a tu información (recetas, ingredientes, proveedores) y operaciones diarias.',
       side: 'bottom',
       align: 'start',
     },
@@ -160,15 +160,15 @@ export const getMobileTourSteps = (): DriveStep[] => [
     element: '[data-tour="demo-banner-actions"]',
     popover: {
       title: 'Limitaciones del Demo',
-      description: 'Puedes explorar todo, pero los cambios no se guardan permanentemente.',
+      description: 'Explora todo sin riesgo. Los cambios no afectan nada. Perfecto para aprender.',
       side: 'bottom',
       align: 'center',
     },
   },
   {
     popover: {
-      title: '¿Listo para tu panadería real?',
-      description: 'Crea una cuenta gratuita para acceso completo sin límites y datos permanentes.',
+      title: '¿Listo Para Tu Panadería?',
+      description: 'Ahorra 2-3h diarias y €500-1500/mes. Crea cuenta gratuita para empezar desde mañana.',
       side: 'top',
       align: 'center',
     },

frontend/src/features/demo-onboarding/hooks/useDemoTour.ts

@@ -1,9 +1,10 @@
 import { useState, useCallback, useEffect } from 'react';
 import { driver, Driver } from 'driver.js';
 import { useNavigate } from 'react-router-dom';
+import { ROUTES } from '../../../router/routes.config';
 import { getDriverConfig } from '../config/driver-config';
 import { getDemoTourSteps, getMobileTourSteps } from '../config/tour-steps';
-import { getTourState, saveTourState, clearTourState, clearTourStartPending } from '../utils/tour-state';
+import { getTourState, saveTourState, clearTourStartPending, clearTourState } from '../utils/tour-state';
 import { trackTourEvent } from '../utils/tour-analytics';
 import '../styles.css';
 
@@ -73,19 +74,35 @@ export const useDemoTour = () => {
   const startTour = useCallback((fromStep: number = 0) => {
     console.log('[useDemoTour] startTour called with fromStep:', fromStep);
 
+    // Check if we're already on the dashboard
+    const currentPath = window.location.pathname;
+    if (currentPath !== ROUTES.DASHBOARD) {
+      console.log('[useDemoTour] Not on dashboard, navigating to:', ROUTES.DASHBOARD);
+      // Store tour intent in sessionStorage before navigation
+      sessionStorage.setItem('demo_tour_should_start', 'true');
+      sessionStorage.setItem('demo_tour_start_step', fromStep.toString());
+      
+      // Navigate to dashboard
+      navigate(ROUTES.DASHBOARD);
+      return;
+    }
+
     const steps = isMobile ? getMobileTourSteps() : getDemoTourSteps();
     console.log('[useDemoTour] Using', isMobile ? 'mobile' : 'desktop', 'steps, total:', steps.length);
 
-    // Check if first element exists
-    const firstElement = steps[0]?.element;
-    if (firstElement) {
-      const el = document.querySelector(firstElement);
-      console.log('[useDemoTour] First element exists:', !!el, 'selector:', firstElement);
-      if (!el) {
-        console.warn('[useDemoTour] First tour element not found in DOM! Delaying tour start...');
-        // Retry after DOM is ready
-        setTimeout(() => startTour(fromStep), 500);
-        return;
+    // Check if first element exists (only if we're on the dashboard)
+    if (currentPath === ROUTES.DASHBOARD) {
+      const firstElement = steps[0]?.element;
+      if (firstElement) {
+        const selector = typeof firstElement === 'string' ? firstElement : String(firstElement);
+        const el = document.querySelector(selector);
+        console.log('[useDemoTour] First element exists:', !!el, 'selector:', selector);
+        if (!el) {
+          console.warn('[useDemoTour] First tour element not found in DOM! Delaying tour start...');
+          // Retry after DOM is ready
+          setTimeout(() => startTour(fromStep), 500);
+          return;
+        }
       }
     }
 
@@ -132,7 +149,7 @@ export const useDemoTour = () => {
     });
 
     clearTourStartPending();
-  }, [isMobile, handleTourDestroy, handleStepComplete, handleTourComplete]);
+  }, [isMobile, handleTourDestroy, handleStepComplete, handleTourComplete, navigate]);
 
   const resumeTour = useCallback(() => {
     const state = getTourState();

frontend/src/features/demo-onboarding/styles.css

@@ -44,20 +44,50 @@
   border-radius: 8px;
   font-weight: 600;
   font-size: 0.9375rem;
+  line-height: 1.5;
   transition: all 0.2s ease;
   border: none;
   cursor: pointer;
+  /* Ensure crisp text rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  /* Prevent blur from transforms */
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  perspective: 1000px;
+  /* Ensure no opacity issues */
+  opacity: 1;
+  /* Force hardware acceleration for crisp rendering */
+  transform: translate3d(0, 0, 0);
+  will-change: transform;
+  /* Additional text clarity */
+  text-shadow: none;
+  filter: none;
 }
 
 .driver-popover.bakery-tour-popover .driver-popover-next-btn {
   background: var(--color-primary);
-  color: white;
+  color: #ffffff;
   flex: 1;
+  /* Ensure text is fully opaque */
+  opacity: 1;
+  /* WHITE TEXT ON COLORED BG FIX: Use antialiased, not subpixel */
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  /* Slight letter spacing helps with clarity */
+  letter-spacing: 0.01em;
+  /* Prevent any blur from transforms */
+  transform: translate3d(0, 0, 0);
+  /* NO text-shadow - can cause blur */
+  text-shadow: none;
+  /* Ensure proper line height */
+  line-height: 1.5;
 }
 
 .driver-popover.bakery-tour-popover .driver-popover-next-btn:hover {
   background: var(--color-primary-dark);
-  transform: translateY(-1px);
+  transform: translate3d(0, -1px, 0);
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
 }
 
@@ -65,11 +95,21 @@
   background: var(--bg-secondary);
   color: var(--text-primary);
   border: 1px solid var(--border-default);
+  /* Ensure text is fully opaque */
+  opacity: 1;
+  /* Same crisp text rendering as next button */
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  letter-spacing: 0.01em;
+  transform: translate3d(0, 0, 0);
+  text-shadow: none;
+  line-height: 1.5;
 }
 
 .driver-popover.bakery-tour-popover .driver-popover-prev-btn:hover {
   background: var(--bg-tertiary);
   border-color: var(--border-hover);
+  transform: translate3d(0, 0, 0);
 }
 
 .driver-popover.bakery-tour-popover .driver-popover-close-btn {