From 449c231af0648e26b0b15e49bbc336175c154687 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 7 Nov 2025 21:44:24 +0000
Subject: [PATCH] fix: Update dashboard to match backend structure and support
 dark mode

Frontend changes:
- Updated API endpoints to call /tenants/{id}/dashboard/*
  (removed /orchestrator/ prefix to match backend router)
- Updated DashboardPage to use CSS theme variables instead of hardcoded colors
- Replaced bg-white, text-gray-*, bg-blue-* with var(--bg-primary), var(--text-primary), etc.
- Quick action buttons now use color accents with left border for visual distinction

This ensures:
1. Frontend calls the correct backend endpoints (fixes 404 errors)
2. Dashboard respects theme (light/dark mode)
3. Consistent styling with rest of application
---
 frontend/src/api/hooks/newDashboard.ts   | 10 ++---
 frontend/src/pages/app/DashboardPage.tsx | 48 ++++++++++++++----------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/frontend/src/api/hooks/newDashboard.ts b/frontend/src/api/hooks/newDashboard.ts
index 71bfc112..31018a46 100644
--- a/frontend/src/api/hooks/newDashboard.ts
+++ b/frontend/src/api/hooks/newDashboard.ts
@@ -153,7 +153,7 @@ export function useBakeryHealthStatus(tenantId: string) {
     queryKey: ['bakery-health-status', tenantId],
     queryFn: async () => {
       const response = await apiClient.get(
-        `/orchestrator/tenants/${tenantId}/dashboard/health-status`
+        `/tenants/${tenantId}/dashboard/health-status`
       );
       return response.data;
     },
@@ -174,7 +174,7 @@ export function useOrchestrationSummary(tenantId: string, runId?: string) {
     queryFn: async () => {
       const params = runId ? { run_id: runId } : {};
       const response = await apiClient.get(
-        `/orchestrator/tenants/${tenantId}/dashboard/orchestration-summary`,
+        `/tenants/${tenantId}/dashboard/orchestration-summary`,
         { params }
       );
       return response.data;
@@ -195,7 +195,7 @@ export function useActionQueue(tenantId: string) {
     queryKey: ['action-queue', tenantId],
     queryFn: async () => {
       const response = await apiClient.get(
-        `/orchestrator/tenants/${tenantId}/dashboard/action-queue`
+        `/tenants/${tenantId}/dashboard/action-queue`
       );
       return response.data;
     },
@@ -215,7 +215,7 @@ export function useProductionTimeline(tenantId: string) {
     queryKey: ['production-timeline', tenantId],
     queryFn: async () => {
       const response = await apiClient.get(
-        `/orchestrator/tenants/${tenantId}/dashboard/production-timeline`
+        `/tenants/${tenantId}/dashboard/production-timeline`
       );
       return response.data;
     },
@@ -235,7 +235,7 @@ export function useInsights(tenantId: string) {
     queryKey: ['dashboard-insights', tenantId],
     queryFn: async () => {
       const response = await apiClient.get(
-        `/orchestrator/tenants/${tenantId}/dashboard/insights`
+        `/tenants/${tenantId}/dashboard/insights`
       );
       return response.data;
     },
diff --git a/frontend/src/pages/app/DashboardPage.tsx b/frontend/src/pages/app/DashboardPage.tsx
index e322a546..ecb186b4 100644
--- a/frontend/src/pages/app/DashboardPage.tsx
+++ b/frontend/src/pages/app/DashboardPage.tsx
@@ -126,18 +126,24 @@ export function NewDashboardPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 pb-20 md:pb-8">
+    <div className="min-h-screen pb-20 md:pb-8" style={{ backgroundColor: 'var(--bg-secondary)' }}>
       {/* Mobile-optimized container */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         {/* Header */}
         <div className="flex items-center justify-between mb-6">
           <div>
-            <h1 className="text-3xl md:text-4xl font-bold text-gray-900">Panel de Control</h1>
-            <p className="text-gray-600 mt-1">Your bakery at a glance</p>
+            <h1 className="text-3xl md:text-4xl font-bold" style={{ color: 'var(--text-primary)' }}>Panel de Control</h1>
+            <p className="mt-1" style={{ color: 'var(--text-secondary)' }}>Your bakery at a glance</p>
           </div>
           <button
             onClick={handleRefreshAll}
-            className="flex items-center gap-2 px-4 py-2 bg-white hover:bg-gray-50 border border-gray-300 rounded-lg font-semibold text-gray-700 transition-colors duration-200"
+            className="flex items-center gap-2 px-4 py-2 rounded-lg font-semibold transition-colors duration-200"
+            style={{
+              backgroundColor: 'var(--bg-primary)',
+              borderColor: 'var(--border-primary)',
+              border: '1px solid',
+              color: 'var(--text-secondary)'
+            }}
           >
             <RefreshCw className="w-5 h-5" />
             <span className="hidden sm:inline">Refresh</span>
@@ -181,45 +187,49 @@ export function NewDashboardPage() {
           {/* SECTION 5: Quick Insights Grid */}
           {insights && (
             <div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-4">Key Metrics</h2>
+              <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="bg-white rounded-xl shadow-md p-6">
-            <h2 className="text-xl font-bold text-gray-900 mb-4">Quick Actions</h2>
+          <div className="rounded-xl shadow-md p-6" style={{ backgroundColor: 'var(--bg-primary)' }}>
+            <h2 className="text-xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>Quick Actions</h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
               <button
                 onClick={() => navigate('/app/operations/procurement')}
-                className="flex items-center justify-between p-4 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors duration-200 group"
+                className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group"
+                style={{ backgroundColor: 'var(--bg-tertiary)', borderLeft: '4px solid var(--color-info)' }}
               >
-                <span className="font-semibold text-blue-900">View Orders</span>
-                <ExternalLink className="w-5 h-5 text-blue-600 group-hover:translate-x-1 transition-transform duration-200" />
+                <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>View Orders</span>
+                <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" style={{ color: 'var(--color-info)' }} />
               </button>
 
               <button
                 onClick={() => navigate('/app/operations/production')}
-                className="flex items-center justify-between p-4 bg-green-50 hover:bg-green-100 rounded-lg transition-colors duration-200 group"
+                className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group"
+                style={{ backgroundColor: 'var(--bg-tertiary)', borderLeft: '4px solid var(--color-success)' }}
               >
-                <span className="font-semibold text-green-900">Production</span>
-                <ExternalLink className="w-5 h-5 text-green-600 group-hover:translate-x-1 transition-transform duration-200" />
+                <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>Production</span>
+                <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" style={{ color: 'var(--color-success)' }} />
               </button>
 
               <button
                 onClick={() => navigate('/app/database/inventory')}
-                className="flex items-center justify-between p-4 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors duration-200 group"
+                className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group"
+                style={{ backgroundColor: 'var(--bg-tertiary)', borderLeft: '4px solid var(--color-secondary)' }}
               >
-                <span className="font-semibold text-purple-900">Inventory</span>
-                <ExternalLink className="w-5 h-5 text-purple-600 group-hover:translate-x-1 transition-transform duration-200" />
+                <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>Inventory</span>
+                <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" style={{ color: 'var(--color-secondary)' }} />
               </button>
 
               <button
                 onClick={() => navigate('/app/database/suppliers')}
-                className="flex items-center justify-between p-4 bg-amber-50 hover:bg-amber-100 rounded-lg transition-colors duration-200 group"
+                className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group"
+                style={{ backgroundColor: 'var(--bg-tertiary)', borderLeft: '4px solid var(--color-warning)' }}
               >
-                <span className="font-semibold text-amber-900">Suppliers</span>
-                <ExternalLink className="w-5 h-5 text-amber-600 group-hover:translate-x-1 transition-transform duration-200" />
+                <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>Suppliers</span>
+                <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" style={{ color: 'var(--color-warning)' }} />
               </button>
             </div>
           </div>