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>
   );

frontend/src/pages/app/operations/inventory/InventoryPage.tsx

@@ -35,6 +35,11 @@ const InventoryPage: React.FC = () => {
 
   const tenantId = useTenantId();
 
+  // Debug tenant ID
+  console.log('🔍 [InventoryPage] Tenant ID from hook:', tenantId);
+  console.log('🔍 [InventoryPage] tenantId type:', typeof tenantId);
+  console.log('🔍 [InventoryPage] tenantId truthy?', !!tenantId);
+
   // Mutations
   const createIngredientMutation = useCreateIngredient();
   const softDeleteMutation = useSoftDeleteIngredient();

frontend/src/pages/app/settings/subscription/SubscriptionPage.tsx

@@ -43,7 +43,39 @@ const SubscriptionPage: React.FC = () => {
         subscriptionService.getAvailablePlans()
       ]);
 
-      setUsageSummary(usage);
+      // FIX: Handle demo mode or missing subscription data
+      if (!usage || !usage.usage) {
+        // If no usage data, likely a demo tenant - create mock data
+        const mockUsage: UsageSummary = {
+          plan: 'demo',
+          status: 'active',
+          monthly_price: 0,
+          next_billing_date: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
+          usage: {
+            users: {
+              current: 1,
+              limit: 5,
+              unlimited: false,
+              usage_percentage: 20
+            },
+            locations: {
+              current: 1,
+              limit: 1,
+              unlimited: false,
+              usage_percentage: 100
+            },
+            products: {
+              current: 0,
+              limit: 50,
+              unlimited: false,
+              usage_percentage: 0
+            }
+          }
+        };
+        setUsageSummary(mockUsage);
+      } else {
+        setUsageSummary(usage);
+      }
       setAvailablePlans(plans);
     } catch (error) {
       console.error('Error loading subscription data:', error);