Improve the design of the frontend 2

frontend/src/pages/dashboard/DashboardPage.tsx

@@ -35,9 +35,18 @@ const DashboardPage: React.FC<DashboardPageProps> = ({
   const {
     dailyOrders: realDailyOrders,
     weeklyOrders: realWeeklyOrders,
-    isLoading: ordersLoading
+    isLoading: ordersLoading,
+    error: ordersError
   } = useOrderSuggestions();
 
+  // Debug order suggestions
+  console.log('📈 Dashboard: OrderSuggestions data:', {
+    dailyOrders: realDailyOrders,
+    weeklyOrders: realWeeklyOrders,
+    isLoading: ordersLoading,
+    error: ordersError
+  });
+
   // Use real API data for alerts
   const {
     alerts: realAlerts,
@@ -170,22 +179,36 @@ const DashboardPage: React.FC<DashboardPageProps> = ({
       </div>
 
       {/* Order Suggestions - Real AI-Powered Recommendations */}
-      <OrderSuggestions
-        dailyOrders={realDailyOrders}
-        weeklyOrders={realWeeklyOrders}
-        onUpdateQuantity={(orderId, quantity, type) => {
-          console.log('Update order quantity:', orderId, quantity, type);
-          // In real implementation, this would update the backend
-        }}
-        onCreateOrder={(items, type) => {
-          console.log('Create order:', type, items);
-          // Navigate to orders page to complete the order
-          onNavigateToOrders?.();
-        }}
-        onViewDetails={() => {
-          onNavigateToOrders?.();
-        }}
-      />
+      {ordersLoading ? (
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <div className="flex items-center justify-center py-8">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+            <span className="ml-3 text-gray-600">Cargando sugerencias de pedidos...</span>
+          </div>
+        </div>
+      ) : ordersError ? (
+        <div className="bg-red-50 border border-red-200 rounded-xl p-6">
+          <h3 className="text-red-800 font-medium">Error al cargar sugerencias</h3>
+          <p className="text-red-700 mt-1">{ordersError}</p>
+        </div>
+      ) : (
+        <OrderSuggestions
+          dailyOrders={realDailyOrders}
+          weeklyOrders={realWeeklyOrders}
+          onUpdateQuantity={(orderId, quantity, type) => {
+            console.log('Update order quantity:', orderId, quantity, type);
+            // In real implementation, this would update the backend
+          }}
+          onCreateOrder={(items, type) => {
+            console.log('Create order:', type, items);
+            // Navigate to orders page to complete the order
+            onNavigateToOrders?.();
+          }}
+          onViewDetails={() => {
+            onNavigateToOrders?.();
+          }}
+        />
+      )}
 
       {/* Production Section - Core Operations */}
       <TodayProduction