Improve the design of the frontend

frontend/src/pages/orders/OrdersPage.tsx

@@ -1,5 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { Package, Plus, Edit, Trash2, Calendar, CheckCircle, AlertCircle, Clock } from 'lucide-react';
+import { Package, Plus, Edit, Trash2, Calendar, CheckCircle, AlertCircle, Clock, BarChart3, TrendingUp, Euro, Settings } from 'lucide-react';
+
+// Import complex components
+import WhatIfPlanner from '../../components/ui/WhatIfPlanner';
+import DemandHeatmap from '../../components/ui/DemandHeatmap';
 
 interface Order {
   id: string;
@@ -24,7 +28,7 @@ const OrdersPage: React.FC = () => {
   const [orders, setOrders] = useState<Order[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [showNewOrder, setShowNewOrder] = useState(false);
-  const [activeTab, setActiveTab] = useState<'all' | 'pending' | 'delivered'>('all');
+  const [activeTab, setActiveTab] = useState<'orders' | 'analytics' | 'forecasting' | 'suppliers'>('orders');
 
   // Sample orders data
   const sampleOrders: Order[] = [
@@ -135,11 +139,47 @@ const OrdersPage: React.FC = () => {
     }
   };
 
+  // Sample data for complex components
+  const orderDemandHeatmapData = [
+    {
+      weekStart: '2024-11-04',
+      days: [
+        {
+          date: '2024-11-04',
+          demand: 180,
+          isToday: true,
+          products: [
+            { name: 'Harina de trigo', demand: 50, confidence: 'high' as const },
+            { name: 'Levadura fresca', demand: 2, confidence: 'high' as const },
+            { name: 'Mantequilla', demand: 5, confidence: 'medium' as const },
+            { name: 'Vasos café', demand: 1000, confidence: 'medium' as const },
+          ]
+        },
+        { date: '2024-11-05', demand: 165, isForecast: true },
+        { date: '2024-11-06', demand: 195, isForecast: true },
+        { date: '2024-11-07', demand: 220, isForecast: true },
+        { date: '2024-11-08', demand: 185, isForecast: true },
+        { date: '2024-11-09', demand: 250, isForecast: true },
+        { date: '2024-11-10', demand: 160, isForecast: true }
+      ]
+    }
+  ];
+
+  const baselineSupplyData = {
+    totalDemand: 180,
+    totalRevenue: 420,
+    products: [
+      { name: 'Harina de trigo', demand: 50, price: 0.85 },
+      { name: 'Levadura fresca', demand: 2, price: 3.20 },
+      { name: 'Mantequilla', demand: 5, price: 4.20 },
+      { name: 'Leche entera', demand: 20, price: 0.95 },
+      { name: 'Vasos café', demand: 1000, price: 0.08 },
+    ]
+  };
+
   const filteredOrders = orders.filter(order => {
-    if (activeTab === 'all') return true;
-    if (activeTab === 'pending') return order.status === 'pending' || order.status === 'confirmed';
-    if (activeTab === 'delivered') return order.status === 'delivered';
-    return true;
+    if (activeTab === 'orders') return true;
+    return false;
   });
 
   const handleDeleteOrder = (orderId: string) => {
@@ -181,24 +221,31 @@ const OrdersPage: React.FC = () => {
         </button>
       </div>
 
-      {/* Tabs */}
+      {/* Enhanced Tabs */}
       <div className="bg-white rounded-xl shadow-soft p-1">
         <div className="flex space-x-1">
           {[
-            { id: 'all', label: 'Todos', count: orders.length },
-            { id: 'pending', label: 'Pendientes', count: orders.filter(o => o.status === 'pending' || o.status === 'confirmed').length },
-            { id: 'delivered', label: 'Entregados', count: orders.filter(o => o.status === 'delivered').length }
+            { id: 'orders', label: 'Gestión de Pedidos', icon: Package, count: orders.length },
+            { id: 'analytics', label: 'Análisis', icon: BarChart3 },
+            { id: 'forecasting', label: 'Simulaciones', icon: TrendingUp },
+            { id: 'suppliers', label: 'Proveedores', icon: Settings }
           ].map((tab) => (
             <button
               key={tab.id}
               onClick={() => setActiveTab(tab.id as any)}
-              className={`flex-1 py-2 px-4 text-sm font-medium rounded-lg transition-all ${
+              className={`flex-1 py-3 px-4 text-sm font-medium rounded-lg transition-all flex items-center justify-center ${
                 activeTab === tab.id
                   ? 'bg-primary-100 text-primary-700'
                   : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
               }`}
             >
-              {tab.label} ({tab.count})
+              <tab.icon className="h-4 w-4 mr-2" />
+              {tab.label}
+              {tab.count && (
+                <span className="ml-2 px-2 py-1 bg-gray-200 text-gray-700 rounded-full text-xs">
+                  {tab.count}
+                </span>
+              )}
             </button>
           ))}
         </div>
@@ -224,8 +271,11 @@ const OrdersPage: React.FC = () => {
         </div>
       </div>
 
-      {/* Orders Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {/* Tab Content */}
+      {activeTab === 'orders' && (
+        <>
+          {/* Orders Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {filteredOrders.map((order) => (
           <div key={order.id} className="bg-white rounded-xl shadow-soft hover:shadow-medium transition-shadow">
             {/* Order Header */}
@@ -390,6 +440,148 @@ const OrdersPage: React.FC = () => {
           </button>
         </div>
       </div>
+        </>
+      )}
+
+      {/* Analytics Tab */}
+      {activeTab === 'analytics' && (
+        <div className="space-y-6">
+          <DemandHeatmap
+            data={orderDemandHeatmapData}
+            selectedProduct="Ingredientes"
+            onDateClick={(date) => {
+              console.log('Selected date:', date);
+            }}
+          />
+          
+          {/* Cost Analysis Chart */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
+              <Euro className="h-5 w-5 mr-2 text-primary-600" />
+              Análisis de Costos
+            </h3>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+                <div className="text-green-800 font-semibold">Ahorro Mensual</div>
+                <div className="text-2xl font-bold text-green-900">€124.50</div>
+                <div className="text-sm text-green-700">vs mes anterior</div>
+              </div>
+              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                <div className="text-blue-800 font-semibold">Gasto Promedio</div>
+                <div className="text-2xl font-bold text-blue-900">€289.95</div>
+                <div className="text-sm text-blue-700">por pedido</div>
+              </div>
+              <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
+                <div className="text-purple-800 font-semibold">Eficiencia</div>
+                <div className="text-2xl font-bold text-purple-900">94.2%</div>
+                <div className="text-sm text-purple-700">predicción IA</div>
+              </div>
+            </div>
+            
+            <div className="mt-6 h-64 bg-gray-50 rounded-lg flex items-center justify-center">
+              <div className="text-center text-gray-500">
+                <BarChart3 className="h-12 w-12 mx-auto mb-2 text-gray-400" />
+                <p>Gráfico de tendencias de costos</p>
+                <p className="text-sm">Próximamente disponible</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Forecasting/Simulations Tab */}
+      {activeTab === 'forecasting' && (
+        <div className="space-y-6">
+          <WhatIfPlanner
+            baselineData={baselineSupplyData}
+            onScenarioRun={(scenario, result) => {
+              console.log('Scenario run:', scenario, result);
+            }}
+          />
+        </div>
+      )}
+
+      {/* Suppliers Tab */}
+      {activeTab === 'suppliers' && (
+        <div className="space-y-6">
+          {/* Suppliers Management */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
+              <Settings className="h-5 w-5 mr-2 text-primary-600" />
+              Gestión de Proveedores
+            </h3>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {[
+                {
+                  name: 'Harinas Castellana',
+                  category: 'Ingredientes',
+                  rating: 4.8,
+                  reliability: 98,
+                  nextDelivery: '2024-11-05',
+                  status: 'active'
+                },
+                {
+                  name: 'Distribuciones Madrid',
+                  category: 'Consumibles',
+                  rating: 4.5,
+                  reliability: 95,
+                  nextDelivery: '2024-11-04',
+                  status: 'active'
+                },
+                {
+                  name: 'Lácteos Frescos SA',
+                  category: 'Ingredientes',
+                  rating: 4.9,
+                  reliability: 99,
+                  nextDelivery: '2024-11-03',
+                  status: 'active'
+                }
+              ].map((supplier, index) => (
+                <div key={index} className="border border-gray-200 rounded-lg p-4">
+                  <div className="flex items-center justify-between mb-3">
+                    <h4 className="font-medium text-gray-900">{supplier.name}</h4>
+                    <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
+                      {supplier.status === 'active' ? 'Activo' : 'Inactivo'}
+                    </span>
+                  </div>
+                  
+                  <div className="space-y-2">
+                    <div className="text-sm text-gray-600">
+                      <span className="font-medium">Categoría:</span> {supplier.category}
+                    </div>
+                    <div className="text-sm text-gray-600">
+                      <span className="font-medium">Calificación:</span> ⭐ {supplier.rating}/5
+                    </div>
+                    <div className="text-sm text-gray-600">
+                      <span className="font-medium">Confiabilidad:</span> {supplier.reliability}%
+                    </div>
+                    <div className="text-sm text-gray-600">
+                      <span className="font-medium">Próxima entrega:</span> {new Date(supplier.nextDelivery).toLocaleDateString('es-ES')}
+                    </div>
+                  </div>
+                  
+                  <div className="mt-4 flex space-x-2">
+                    <button className="flex-1 px-3 py-2 text-sm bg-primary-100 text-primary-700 rounded-lg hover:bg-primary-200 transition-colors">
+                      Editar
+                    </button>
+                    <button className="px-3 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
+                      Contactar
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+            
+            <div className="mt-6 text-center">
+              <button className="inline-flex items-center px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors">
+                <Plus className="h-4 w-4 mr-2" />
+                Añadir Proveedor
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
 
       {/* New Order Modal Placeholder */}
       {showNewOrder && (