fix: Add comprehensive null guards to all dashboard components

This commit fixes React Error #306 (text content mismatch) by ensuring
no component ever tries to render undefined values as text content.

Changes made across all dashboard components:

1. **Component Entry Guards**:
   - Added early returns for null/undefined data
   - Changed `if (loading)` to `if (loading || !data)` pattern
   - Components now show loading skeleton when data is undefined

2. **Property Access Guards**:
   - Added `|| fallback` operators for all rendered text
   - Added optional chaining for nested property access
   - Added conditional rendering for optional/array fields

3. **Specific Component Fixes**:

   **HealthStatusCard.tsx**:
   - Added early return for !healthStatus
   - Added fallback for status: `healthStatus.status || 'green'`
   - Added conditional rendering for nextScheduledRun
   - Added conditional rendering for checklistItems array
   - Added text fallback: `item.text || ''`

   **InsightsGrid.tsx**:
   - Added null check: `if (!insights || !insights.savings || ...)`
   - Added fallbacks: `insights.savings?.label || 'Savings'`
   - Added fallbacks for all 4 insight cards

   **OrchestrationSummaryCard.tsx**:
   - Added early return for !summary
   - Added fallback: `summary.message || ''`
   - Added fallback: `summary.runNumber || 0`
   - Added array checks: `summary.purchaseOrdersSummary && ...`
   - Added fallbacks for PO items: `po.supplierName || 'Unknown Supplier'`
   - Added fallbacks for batch items: `batch.quantity || 0`
   - Added safe date parsing: `batch.readyByTime ? new Date(...) : 'TBD'`

   **ProductionTimelineCard.tsx**:
   - Added early return for !timeline
   - Added array check: `!timeline.timeline || timeline.timeline.length === 0`
   - Added fallbacks for all item properties:
     - `item.statusIcon || '🔵'`
     - `item.productName || 'Product'`
     - `item.quantity || 0`
     - `item.unit || 'units'`
     - `item.batchNumber || 'N/A'`
     - `item.priority || 'NORMAL'`
     - `item.statusText || 'Status'`
     - `item.progress || 0`

   **ActionQueueCard.tsx**:
   - Added early return for !actionQueue
   - Added safe config lookup with fallback to normal urgency
   - Added array check: `!actionQueue.actions || ...`
   - Added property fallbacks:
     - `action.title || 'Action Required'`
     - `action.urgency || 'normal'`
     - `action.subtitle || ''`
     - `action.estimatedTimeMinutes || 5`
   - Added array guard: `(action.actions || []).map(...)`
   - Added fallbacks for counts: `actionQueue.totalActions || 0`

   **useReasoningTranslation.ts**:
   - Enhanced formatPOAction with explicit fallbacks
   - Enhanced formatBatchAction with explicit fallbacks
   - All translation functions return strings with || operators

   **DashboardPage.tsx**:
   - Removed conditional rendering operators (&&)
   - Components now always render and handle their own null states
   - Pattern: `<Component data={data} loading={loading} />`

4. **Testing Strategy**:
   - All components gracefully handle undefined data
   - Loading states shown when data is undefined
   - No undefined values can be rendered as text content
   - Multiple fallback layers ensure strings are always returned

This comprehensive fix addresses the root cause of React Error #306
by making all components bulletproof against undefined values.

frontend/src/pages/app/DashboardPage.tsx

@@ -147,43 +147,35 @@ export function NewDashboardPage() {
         {/* Main Dashboard Layout */}
         <div className="space-y-6">
           {/* SECTION 1: Bakery Health Status */}
-          {healthStatus && (
-            <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />
-          )}
+          <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />
 
           {/* SECTION 2: What Needs Your Attention (Action Queue) */}
-          {actionQueue && (
-            <ActionQueueCard
-              actionQueue={actionQueue}
-              loading={actionQueueLoading}
-              onApprove={handleApprove}
-              onViewDetails={handleViewDetails}
-              onModify={handleModify}
-            />
-          )}
+          <ActionQueueCard
+            actionQueue={actionQueue}
+            loading={actionQueueLoading}
+            onApprove={handleApprove}
+            onViewDetails={handleViewDetails}
+            onModify={handleModify}
+          />
 
           {/* SECTION 3: What the System Did for You (Orchestration Summary) */}
-          {orchestrationSummary && (
-            <OrchestrationSummaryCard
-              summary={orchestrationSummary}
-              loading={orchestrationLoading}
-            />
-          )}
+          <OrchestrationSummaryCard
+            summary={orchestrationSummary}
+            loading={orchestrationLoading}
+          />
 
           {/* SECTION 4: Today's Production Timeline */}
-          {productionTimeline && (
-            <ProductionTimelineCard
-              timeline={productionTimeline}
-              loading={timelineLoading}
-              onStart={handleStartBatch}
-              onPause={handlePauseBatch}
-            />
-          )}
+          <ProductionTimelineCard
+            timeline={productionTimeline}
+            loading={timelineLoading}
+            onStart={handleStartBatch}
+            onPause={handlePauseBatch}
+          />
 
           {/* SECTION 5: Quick Insights Grid */}
           <div>
             <h2 className="text-2xl font-bold text-gray-900 mb-4">Key Metrics</h2>
-            {insights && <InsightsGrid insights={insights} loading={insightsLoading} />}
+            <InsightsGrid insights={insights} loading={insightsLoading} />
           </div>
 
           {/* SECTION 6: Quick Action Links */}