From 1b44173933cf4a0caf4aa60b07df1be3f7ed73a8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 7 Nov 2025 22:03:45 +0000
Subject: [PATCH] fix: Remove conditional rendering to always show dashboard
 components

Components were conditionally rendered based on data availability, causing
a blank page during loading or on API errors. Each component already has
internal loading state handling with skeleton loaders.

Changed:
- HealthStatusCard: Always render, let component show skeleton
- ActionQueueCard: Always render, let component show skeleton
- OrchestrationSummaryCard: Always render, let component show skeleton
- ProductionTimelineCard: Always render, let component show skeleton
- InsightsGrid: Always render, let component show skeleton

Benefits:
- Users see loading skeletons instead of blank page
- Better UX during initial load and API failures
- Components handle their own loading/error states
---
 frontend/src/pages/app/DashboardPage.tsx | 52 ++++++++++--------------
 1 file changed, 22 insertions(+), 30 deletions(-)

diff --git a/frontend/src/pages/app/DashboardPage.tsx b/frontend/src/pages/app/DashboardPage.tsx
index ecb186b4..b8a9bb06 100644
--- a/frontend/src/pages/app/DashboardPage.tsx
+++ b/frontend/src/pages/app/DashboardPage.tsx
@@ -153,44 +153,36 @@ 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 */}
-          {insights && (
-            <div>
-              <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>Key Metrics</h2>
-              <InsightsGrid insights={insights} loading={insightsLoading} />
-            </div>
-          )}
+          <div>
+            <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>Key Metrics</h2>
+            <InsightsGrid insights={insights} loading={insightsLoading} />
+          </div>
 
           {/* SECTION 6: Quick Action Links */}
           <div className="rounded-xl shadow-md p-6" style={{ backgroundColor: 'var(--bg-primary)' }}>