debug: Add comprehensive debugging tools for React Error #306

Added systematic debugging infrastructure to identify the exact source
of undefined values causing React Error #306.

Changes Made:

1. **ErrorBoundary Component (NEW)**:
   - Created frontend/src/components/ErrorBoundary.tsx
   - Catches React errors and displays detailed debug information
   - Shows error message, stack trace, and component name
   - Has "Try Again" button to reset error state
   - Logs full error details to console with 🔴 prefix

2. **Debug Logging in useReasoningTranslation.ts**:
   - Added console.log in formatPOAction before processing
   - Logs fallback values when no reasoning data provided
   - Checks for undefined in result and logs error if found
   - Added console.log in formatBatchAction with same checks
   - Uses emojis for easy identification:
     - 🔍 = Debug info
     - ✅ = Success
     - 🔴 = Error detected

3. **Dashboard Debug Logging**:
   - Added useEffect to log all dashboard data on change
   - Logs: healthStatus, orchestrationSummary, actionQueue, etc.
   - Logs loading states for all queries
   - Helps identify which API calls return undefined

4. **Error Boundaries Around Components**:
   - Wrapped HealthStatusCard in ErrorBoundary
   - Wrapped ActionQueueCard in ErrorBoundary
   - Wrapped OrchestrationSummaryCard in ErrorBoundary
   - Wrapped ProductionTimelineCard in ErrorBoundary
   - Wrapped InsightsGrid in ErrorBoundary
   - Each boundary has componentName for easy identification

How to Use:

1. Open browser console
2. Load dashboard
3. Look for debug logs:
   - 🔍 Dashboard Data: Shows all fetched data
   - 🔍 formatPOAction/formatBatchAction: Shows translation calls
   - 🔴 errors: Shows if undefined detected
4. If error occurs, ErrorBoundary will show which component failed
5. Check console for full stack trace and component stack

This will help identify:
- Which component is rendering undefined
- What data is being passed to formatters
- Whether backend is returning unexpected data structures
- Exact line where error occurs

frontend/src/pages/app/DashboardPage.tsx

@@ -15,7 +15,7 @@
  * - Trust-building (explain system reasoning)
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { RefreshCw, ExternalLink } from 'lucide-react';
 import { useTenant } from '../../stores/tenant.store';
@@ -34,6 +34,7 @@ import { ActionQueueCard } from '../../components/dashboard/ActionQueueCard';
 import { OrchestrationSummaryCard } from '../../components/dashboard/OrchestrationSummaryCard';
 import { ProductionTimelineCard } from '../../components/dashboard/ProductionTimelineCard';
 import { InsightsGrid } from '../../components/dashboard/InsightsGrid';
+import { ErrorBoundary } from '../../components/ErrorBoundary';
 
 export function NewDashboardPage() {
   const navigate = useNavigate();
@@ -71,6 +72,25 @@ export function NewDashboardPage() {
     refetch: refetchInsights,
   } = useInsights(tenantId);
 
+  // Debug logging for data
+  useEffect(() => {
+    console.log('🔍 Dashboard Data:', {
+      healthStatus: healthStatus,
+      orchestrationSummary: orchestrationSummary,
+      actionQueue: actionQueue,
+      productionTimeline: productionTimeline,
+      insights: insights,
+      loading: {
+        health: healthLoading,
+        orchestration: orchestrationLoading,
+        actionQueue: actionQueueLoading,
+        timeline: timelineLoading,
+        insights: insightsLoading
+      }
+    });
+  }, [healthStatus, orchestrationSummary, actionQueue, productionTimeline, insights,
+      healthLoading, orchestrationLoading, actionQueueLoading, timelineLoading, insightsLoading]);
+
   // Mutations
   const approvePO = useApprovePurchaseOrder();
   const startBatch = useStartProductionBatch();
@@ -147,36 +167,46 @@ export function NewDashboardPage() {
         {/* Main Dashboard Layout */}
         <div className="space-y-6">
           {/* SECTION 1: Bakery Health Status */}
-          <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />
+          <ErrorBoundary componentName="HealthStatusCard">
+            <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />
+          </ErrorBoundary>
 
           {/* SECTION 2: What Needs Your Attention (Action Queue) */}
-          <ActionQueueCard
-            actionQueue={actionQueue}
-            loading={actionQueueLoading}
-            onApprove={handleApprove}
-            onViewDetails={handleViewDetails}
-            onModify={handleModify}
-          />
+          <ErrorBoundary componentName="ActionQueueCard">
+            <ActionQueueCard
+              actionQueue={actionQueue}
+              loading={actionQueueLoading}
+              onApprove={handleApprove}
+              onViewDetails={handleViewDetails}
+              onModify={handleModify}
+            />
+          </ErrorBoundary>
 
           {/* SECTION 3: What the System Did for You (Orchestration Summary) */}
-          <OrchestrationSummaryCard
-            summary={orchestrationSummary}
-            loading={orchestrationLoading}
-          />
+          <ErrorBoundary componentName="OrchestrationSummaryCard">
+            <OrchestrationSummaryCard
+              summary={orchestrationSummary}
+              loading={orchestrationLoading}
+            />
+          </ErrorBoundary>
 
           {/* SECTION 4: Today's Production Timeline */}
-          <ProductionTimelineCard
-            timeline={productionTimeline}
-            loading={timelineLoading}
-            onStart={handleStartBatch}
-            onPause={handlePauseBatch}
-          />
+          <ErrorBoundary componentName="ProductionTimelineCard">
+            <ProductionTimelineCard
+              timeline={productionTimeline}
+              loading={timelineLoading}
+              onStart={handleStartBatch}
+              onPause={handlePauseBatch}
+            />
+          </ErrorBoundary>
 
           {/* SECTION 5: Quick Insights Grid */}
-          <div>
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">Key Metrics</h2>
-            <InsightsGrid insights={insights} loading={insightsLoading} />
-          </div>
+          <ErrorBoundary componentName="InsightsGrid">
+            <div>
+              <h2 className="text-2xl font-bold text-gray-900 mb-4">Key Metrics</h2>
+              <InsightsGrid insights={insights} loading={insightsLoading} />
+            </div>
+          </ErrorBoundary>
 
           {/* SECTION 6: Quick Action Links */}
           <div className="bg-white rounded-xl shadow-md p-6">