Support multiple languages

frontend/src/components/domain/sales/OrdersTable.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Table,
   Button,
@@ -95,35 +96,7 @@ const StatusColors = {
   [OrderStatus.CANCELADO]: 'red'
 } as const;
 
-const StatusLabels = {
-  [OrderStatus.PENDIENTE]: 'Pendiente',
-  [OrderStatus.CONFIRMADO]: 'Confirmado',
-  [OrderStatus.EN_PREPARACION]: 'En Preparación',
-  [OrderStatus.LISTO]: 'Listo para Entrega',
-  [OrderStatus.ENTREGADO]: 'Entregado',
-  [OrderStatus.CANCELADO]: 'Cancelado'
-} as const;
-
-const ChannelLabels = {
-  [SalesChannel.STORE_FRONT]: 'Tienda',
-  [SalesChannel.ONLINE]: 'Online',
-  [SalesChannel.PHONE_ORDER]: 'Teléfono',
-  [SalesChannel.DELIVERY]: 'Delivery',
-  [SalesChannel.CATERING]: 'Catering',
-  [SalesChannel.WHOLESALE]: 'Mayorista',
-  [SalesChannel.FARMERS_MARKET]: 'Mercado',
-  [SalesChannel.THIRD_PARTY]: 'Terceros'
-} as const;
-
-const PaymentLabels = {
-  [PaymentMethod.CASH]: 'Efectivo',
-  [PaymentMethod.CREDIT_CARD]: 'Tarjeta Crédito',
-  [PaymentMethod.DEBIT_CARD]: 'Tarjeta Débito',
-  [PaymentMethod.DIGITAL_WALLET]: 'Wallet Digital',
-  [PaymentMethod.BANK_TRANSFER]: 'Transferencia',
-  [PaymentMethod.CHECK]: 'Cheque',
-  [PaymentMethod.STORE_CREDIT]: 'Crédito Tienda'
-} as const;
+// Note: These will be replaced with translation functions inside the component
 
 export const OrdersTable: React.FC<OrdersTableProps> = ({
   tenantId,
@@ -132,6 +105,34 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
   onOrderUpdate,
   initialFilters = {}
 }) => {
+  const { t } = useTranslation(['sales']);
+
+  // Translation helper functions
+  const getStatusLabel = (status: OrderStatus) => {
+    const statusKey = status.toLowerCase();
+    return t(`sales:orders.status.${statusKey}`, StatusLabels[status] || status);
+  };
+
+  const getChannelLabel = (channel: SalesChannel) => {
+    const channelKey = channel.toLowerCase();
+    return t(`sales:orders.channels.${channelKey}`, channel);
+  };
+
+  const getPaymentLabel = (method: PaymentMethod) => {
+    const methodKey = method.toLowerCase();
+    return t(`sales:orders.payment_methods.${methodKey}`, method);
+  };
+
+  // Legacy objects for fallbacks (will be removed after migration)
+  const StatusLabels = {
+    [OrderStatus.PENDIENTE]: 'Pendiente',
+    [OrderStatus.CONFIRMADO]: 'Confirmado',
+    [OrderStatus.EN_PREPARACION]: 'En Preparación',
+    [OrderStatus.LISTO]: 'Listo para Entrega',
+    [OrderStatus.ENTREGADO]: 'Entregado',
+    [OrderStatus.CANCELADO]: 'Cancelado'
+  } as const;
+
   // State
   const [orders, setOrders] = useState<Order[]>([]);
   const [loading, setLoading] = useState(false);
@@ -270,7 +271,7 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
     },
     {
       key: 'id',
-      title: 'Nº Pedido',
+      title: t('sales:orders.table.columns.order_number', 'Nº Pedido'),
       sortable: true,
       render: (order: Order) => (
         <button
@@ -286,7 +287,7 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
     },
     {
       key: 'customer_name',
-      title: 'Cliente',
+      title: t('sales:orders.table.columns.customer', 'Cliente'),
       sortable: true,
       render: (order: Order) => (
         <div>
@@ -299,7 +300,7 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
     },
     {
       key: 'products',
-      title: 'Productos',
+      title: t('sales:orders.table.columns.products', 'Productos'),
       render: (order: Order) => (
         <div>
           <div className="font-medium">{order.product_name}</div>
@@ -311,7 +312,7 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
     },
     {
       key: 'total_revenue',
-      title: 'Total',
+      title: t('sales:orders.table.columns.total', 'Total'),
       sortable: true,
       render: (order: Order) => (
         <div className="text-right">
@@ -326,17 +327,17 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
     },
     {
       key: 'status',
-      title: 'Estado',
+      title: t('sales:orders.table.columns.status', 'Estado'),
       sortable: true,
       render: (order: Order) => (
         <Badge color={StatusColors[order.status]} variant="soft">
-          {StatusLabels[order.status]}
+          {getStatusLabel(order.status)}
         </Badge>
       ),
     },
     {
       key: 'sales_channel',
-      title: 'Canal',
+      title: t('sales:orders.table.columns.channel', 'Canal'),
       render: (order: Order) => (
         <span className="text-sm text-[var(--text-secondary)]">
           {ChannelLabels[order.sales_channel]}
@@ -345,7 +346,7 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
     },
     {
       key: 'date',
-      title: 'Fecha',
+      title: t('sales:orders.table.columns.date', 'Fecha'),
       sortable: true,
       render: (order: Order) => (
         <div>
@@ -364,7 +365,7 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
   if (showActions) {
     columns.push({
       key: 'actions',
-      title: 'Acciones',
+      title: t('sales:orders.table.columns.actions', 'Acciones'),
       render: (order: Order) => (
         <div className="flex space-x-2">
           <Tooltip content="Ver detalles">