Add new Frontend

frontend/src/pages/orders/OrdersPage.tsx

@@ -0,0 +1,424 @@
+import React, { useState, useEffect } from 'react';
+import { Package, Plus, Edit, Trash2, Calendar, CheckCircle, AlertCircle, Clock } from 'lucide-react';
+
+interface Order {
+  id: string;
+  supplier: string;
+  items: OrderItem[];
+  orderDate: string;
+  deliveryDate: string;
+  status: 'pending' | 'confirmed' | 'delivered' | 'cancelled';
+  total: number;
+  type: 'ingredients' | 'consumables';
+}
+
+interface OrderItem {
+  name: string;
+  quantity: number;
+  unit: string;
+  price: number;
+  suggested?: boolean;
+}
+
+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');
+
+  // Sample orders data
+  const sampleOrders: Order[] = [
+    {
+      id: '1',
+      supplier: 'Harinas Castellana',
+      items: [
+        { name: 'Harina de trigo', quantity: 50, unit: 'kg', price: 0.85, suggested: true },
+        { name: 'Levadura fresca', quantity: 2, unit: 'kg', price: 3.20 },
+        { name: 'Sal marina', quantity: 5, unit: 'kg', price: 1.10 }
+      ],
+      orderDate: '2024-11-03',
+      deliveryDate: '2024-11-05',
+      status: 'pending',
+      total: 52.50,
+      type: 'ingredients'
+    },
+    {
+      id: '2',
+      supplier: 'Distribuciones Madrid',
+      items: [
+        { name: 'Vasos de café 250ml', quantity: 1000, unit: 'unidades', price: 0.08 },
+        { name: 'Bolsas papel kraft', quantity: 500, unit: 'unidades', price: 0.12, suggested: true },
+        { name: 'Servilletas', quantity: 20, unit: 'paquetes', price: 2.50 }
+      ],
+      orderDate: '2024-11-02',
+      deliveryDate: '2024-11-04',
+      status: 'confirmed',
+      total: 190.00,
+      type: 'consumables'
+    },
+    {
+      id: '3',
+      supplier: 'Lácteos Frescos SA',
+      items: [
+        { name: 'Leche entera', quantity: 20, unit: 'litros', price: 0.95 },
+        { name: 'Mantequilla', quantity: 5, unit: 'kg', price: 4.20 },
+        { name: 'Nata para montar', quantity: 3, unit: 'litros', price: 2.80 }
+      ],
+      orderDate: '2024-11-01',
+      deliveryDate: '2024-11-03',
+      status: 'delivered',
+      total: 47.40,
+      type: 'ingredients'
+    }
+  ];
+
+  useEffect(() => {
+    const loadOrders = async () => {
+      setIsLoading(true);
+      
+      try {
+        // Simulate API call
+        await new Promise(resolve => setTimeout(resolve, 800));
+        setOrders(sampleOrders);
+      } catch (error) {
+        console.error('Error loading orders:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadOrders();
+  }, []);
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return 'bg-warning-100 text-warning-800 border-warning-200';
+      case 'confirmed':
+        return 'bg-blue-100 text-blue-800 border-blue-200';
+      case 'delivered':
+        return 'bg-success-100 text-success-800 border-success-200';
+      case 'cancelled':
+        return 'bg-red-100 text-red-800 border-red-200';
+      default:
+        return 'bg-gray-100 text-gray-800 border-gray-200';
+    }
+  };
+
+  const getStatusLabel = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return 'Pendiente';
+      case 'confirmed':
+        return 'Confirmado';
+      case 'delivered':
+        return 'Entregado';
+      case 'cancelled':
+        return 'Cancelado';
+      default:
+        return status;
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return <Clock className="h-4 w-4" />;
+      case 'confirmed':
+        return <AlertCircle className="h-4 w-4" />;
+      case 'delivered':
+        return <CheckCircle className="h-4 w-4" />;
+      case 'cancelled':
+        return <AlertCircle className="h-4 w-4" />;
+      default:
+        return <Clock className="h-4 w-4" />;
+    }
+  };
+
+  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;
+  });
+
+  const handleDeleteOrder = (orderId: string) => {
+    setOrders(prev => prev.filter(order => order.id !== orderId));
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-6">
+        <div className="animate-pulse space-y-6">
+          <div className="h-8 bg-gray-200 rounded w-1/3"></div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className="h-48 bg-gray-200 rounded-xl"></div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Gestión de Pedidos</h1>
+          <p className="text-gray-600 mt-1">
+            Administra tus pedidos de ingredientes y consumibles
+          </p>
+        </div>
+        
+        <button
+          onClick={() => setShowNewOrder(true)}
+          className="mt-4 sm:mt-0 inline-flex items-center px-4 py-2 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-all hover:shadow-lg"
+        >
+          <Plus className="h-5 w-5 mr-2" />
+          Nuevo Pedido
+        </button>
+      </div>
+
+      {/* 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 }
+          ].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 ${
+                activeTab === tab.id
+                  ? 'bg-primary-100 text-primary-700'
+                  : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
+              }`}
+            >
+              {tab.label} ({tab.count})
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* AI Suggestions */}
+      <div className="bg-gradient-to-r from-primary-50 to-orange-50 border border-primary-200 rounded-xl p-6">
+        <div className="flex items-start">
+          <div className="p-2 bg-primary-100 rounded-lg mr-4">
+            <Package className="h-6 w-6 text-primary-600" />
+          </div>
+          <div className="flex-1">
+            <h3 className="font-semibold text-primary-900 mb-2">Sugerencias Inteligentes de Pedidos</h3>
+            <div className="space-y-2 text-sm text-primary-800">
+              <p>• <strong>Harina de trigo:</strong> Stock bajo detectado. Recomendamos pedir 50kg para cubrir 2 semanas.</p>
+              <p>• <strong>Bolsas de papel:</strong> Aumento del 15% en takeaway. Considera aumentar el pedido habitual.</p>
+              <p>• <strong>Café en grano:</strong> Predicción de alta demanda por temperaturas bajas. +20% recomendado.</p>
+            </div>
+            <button className="mt-3 text-primary-700 hover:text-primary-600 font-medium text-sm">
+              Ver todas las sugerencias →
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 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 */}
+            <div className="p-6 border-b border-gray-100">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="font-semibold text-gray-900">{order.supplier}</h3>
+                <span className={`px-2 py-1 rounded-lg text-xs font-medium border flex items-center ${getStatusColor(order.status)}`}>
+                  {getStatusIcon(order.status)}
+                  <span className="ml-1">{getStatusLabel(order.status)}</span>
+                </span>
+              </div>
+              
+              <div className="flex items-center text-sm text-gray-600 mb-2">
+                <Calendar className="h-4 w-4 mr-1" />
+                <span>Entrega: {new Date(order.deliveryDate).toLocaleDateString('es-ES')}</span>
+              </div>
+              
+              <div className="flex items-center justify-between">
+                <span className={`text-xs px-2 py-1 rounded ${
+                  order.type === 'ingredients' 
+                    ? 'bg-green-100 text-green-800' 
+                    : 'bg-blue-100 text-blue-800'
+                }`}>
+                  {order.type === 'ingredients' ? 'Ingredientes' : 'Consumibles'}
+                </span>
+                <span className="text-lg font-bold text-gray-900">€{order.total.toFixed(2)}</span>
+              </div>
+            </div>
+
+            {/* Order Items */}
+            <div className="p-6">
+              <h4 className="text-sm font-medium text-gray-700 mb-3">Artículos ({order.items.length})</h4>
+              <div className="space-y-2 max-h-32 overflow-y-auto">
+                {order.items.map((item, index) => (
+                  <div key={index} className="flex justify-between text-sm">
+                    <div className="flex-1">
+                      <span className="text-gray-900">{item.name}</span>
+                      {item.suggested && (
+                        <span className="ml-2 text-xs bg-primary-100 text-primary-700 px-1 py-0.5 rounded">
+                          IA
+                        </span>
+                      )}
+                      <div className="text-gray-500 text-xs">
+                        {item.quantity} {item.unit} × €{item.price.toFixed(2)}
+                      </div>
+                    </div>
+                    <span className="text-gray-900 font-medium">
+                      €{(item.quantity * item.price).toFixed(2)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Order Actions */}
+            <div className="px-6 pb-6">
+              <div className="flex space-x-2">
+                <button className="flex-1 py-2 px-3 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center justify-center">
+                  <Edit className="h-4 w-4 mr-1" />
+                  Editar
+                </button>
+                <button 
+                  onClick={() => handleDeleteOrder(order.id)}
+                  className="py-2 px-3 text-sm bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Empty State */}
+      {filteredOrders.length === 0 && (
+        <div className="text-center py-12">
+          <Package className="mx-auto h-12 w-12 text-gray-400 mb-4" />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">No hay pedidos</h3>
+          <p className="text-gray-600 mb-4">
+            {activeTab === 'all' 
+              ? 'Aún no has creado ningún pedido'
+              : `No hay pedidos ${activeTab === 'pending' ? 'pendientes' : 'entregados'}`
+            }
+          </p>
+          <button
+            onClick={() => setShowNewOrder(true)}
+            className="inline-flex items-center px-4 py-2 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-colors"
+          >
+            <Plus className="h-5 w-5 mr-2" />
+            Crear primer pedido
+          </button>
+        </div>
+      )}
+
+      {/* Quick Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="bg-white p-6 rounded-xl shadow-soft">
+          <div className="flex items-center">
+            <div className="p-2 bg-primary-100 rounded-lg">
+              <Package className="h-6 w-6 text-primary-600" />
+            </div>
+            <div className="ml-4">
+              <p className="text-sm font-medium text-gray-600">Total Pedidos</p>
+              <p className="text-2xl font-bold text-gray-900">{orders.length}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white p-6 rounded-xl shadow-soft">
+          <div className="flex items-center">
+            <div className="p-2 bg-warning-100 rounded-lg">
+              <Clock className="h-6 w-6 text-warning-600" />
+            </div>
+            <div className="ml-4">
+              <p className="text-sm font-medium text-gray-600">Pendientes</p>
+              <p className="text-2xl font-bold text-gray-900">
+                {orders.filter(o => o.status === 'pending' || o.status === 'confirmed').length}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white p-6 rounded-xl shadow-soft">
+          <div className="flex items-center">
+            <div className="p-2 bg-success-100 rounded-lg">
+              <CheckCircle className="h-6 w-6 text-success-600" />
+            </div>
+            <div className="ml-4">
+              <p className="text-sm font-medium text-gray-600">Gasto Mensual</p>
+              <p className="text-2xl font-bold text-gray-900">
+                €{orders.reduce((sum, order) => sum + order.total, 0).toFixed(0)}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="bg-white p-6 rounded-xl shadow-soft">
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">
+          Acciones Rápidas
+        </h3>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <button className="p-4 border border-gray-300 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all text-left">
+            <div className="font-medium text-gray-900">Pedido Automático</div>
+            <div className="text-sm text-gray-500 mt-1">Basado en predicciones IA</div>
+          </button>
+          
+          <button className="p-4 border border-gray-300 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all text-left">
+            <div className="font-medium text-gray-900">Gestión de Proveedores</div>
+            <div className="text-sm text-gray-500 mt-1">Añadir o editar proveedores</div>
+          </button>
+          
+          <button className="p-4 border border-gray-300 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all text-left">
+            <div className="font-medium text-gray-900">Historial de Gastos</div>
+            <div className="text-sm text-gray-500 mt-1">Ver análisis de costos</div>
+          </button>
+          
+          <button className="p-4 border border-gray-300 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all text-left">
+            <div className="font-medium text-gray-900">Configurar Alertas</div>
+            <div className="text-sm text-gray-500 mt-1">Stock bajo y vencimientos</div>
+          </button>
+        </div>
+      </div>
+
+      {/* New Order Modal Placeholder */}
+      {showNewOrder && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-2xl p-6 max-w-md w-full">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">Nuevo Pedido</h3>
+            <p className="text-gray-600 mb-6">
+              Esta funcionalidad estará disponible próximamente. PanIA analizará tus necesidades 
+              y creará pedidos automáticos basados en las predicciones de demanda.
+            </p>
+            <div className="flex space-x-3">
+              <button
+                onClick={() => setShowNewOrder(false)}
+                className="flex-1 py-2 px-4 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 transition-colors"
+              >
+                Cerrar
+              </button>
+              <button
+                onClick={() => setShowNewOrder(false)}
+                className="flex-1 py-2 px-4 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-colors"
+              >
+                Entendido
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OrdersPage;