Improve the demo feature of the project

frontend/src/pages/app/DashboardPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { PageHeader } from '../../components/layout';
@@ -10,6 +10,7 @@ import ProcurementPlansToday from '../../components/domain/dashboard/Procurement
 import ProductionPlansToday from '../../components/domain/dashboard/ProductionPlansToday';
 import PurchaseOrdersTracking from '../../components/domain/dashboard/PurchaseOrdersTracking';
 import { useTenant } from '../../stores/tenant.store';
+import { useDemoTour, shouldStartTour, clearTourStartPending } from '../../features/demo-onboarding';
 import {
   AlertTriangle,
   Clock,
@@ -23,6 +24,25 @@ const DashboardPage: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { availableTenants } = useTenant();
+  const { startTour } = useDemoTour();
+  const isDemoMode = localStorage.getItem('demo_mode') === 'true';
+
+  useEffect(() => {
+    console.log('[Dashboard] Demo mode:', isDemoMode);
+    console.log('[Dashboard] Should start tour:', shouldStartTour());
+    console.log('[Dashboard] SessionStorage demo_tour_should_start:', sessionStorage.getItem('demo_tour_should_start'));
+
+    if (isDemoMode && shouldStartTour()) {
+      console.log('[Dashboard] Starting tour in 1.5s...');
+      const timer = setTimeout(() => {
+        console.log('[Dashboard] Executing startTour()');
+        startTour();
+        clearTourStartPending();
+      }, 1500);
+
+      return () => clearTimeout(timer);
+    }
+  }, [isDemoMode, startTour]);
 
   const handleAddNewBakery = () => {
     navigate('/app/onboarding?new=true');
@@ -107,12 +127,14 @@ const DashboardPage: React.FC = () => {
       />
 
       {/* Critical Metrics using StatsGrid */}
-      <StatsGrid
-        stats={criticalStats}
-        columns={4}
-        gap="lg"
-        className="mb-6"
-      />
+      <div data-tour="dashboard-stats">
+        <StatsGrid
+          stats={criticalStats}
+          columns={4}
+          gap="lg"
+          className="mb-6"
+        />
+      </div>
 
       {/* Quick Actions - Add New Bakery */}
       {availableTenants && availableTenants.length > 0 && (
@@ -153,25 +175,31 @@ const DashboardPage: React.FC = () => {
       {/* Full width blocks - one after another */}
       <div className="space-y-6">
         {/* 1. Real-time alerts block */}
-        <RealTimeAlerts />
+        <div data-tour="real-time-alerts">
+          <RealTimeAlerts />
+        </div>
 
         {/* 2. Purchase Orders Tracking block */}
         <PurchaseOrdersTracking />
 
         {/* 3. Procurement plans block */}
-        <ProcurementPlansToday
-          onOrderItem={handleOrderItem}
-          onViewDetails={handleViewDetails}
-          onViewAllPlans={handleViewAllPlans}
-        />
+        <div data-tour="procurement-plans">
+          <ProcurementPlansToday
+            onOrderItem={handleOrderItem}
+            onViewDetails={handleViewDetails}
+            onViewAllPlans={handleViewAllPlans}
+          />
+        </div>
 
         {/* 4. Production plans block */}
-        <ProductionPlansToday
-          onStartOrder={handleStartOrder}
-          onPauseOrder={handlePauseOrder}
-          onViewDetails={handleViewDetails}
-          onViewAllPlans={handleViewAllPlans}
-        />
+        <div data-tour="production-plans">
+          <ProductionPlansToday
+            onStartOrder={handleStartOrder}
+            onPauseOrder={handlePauseOrder}
+            onViewDetails={handleViewDetails}
+            onViewAllPlans={handleViewAllPlans}
+          />
+        </div>
       </div>
     </div>
   );