Fix: Multilingual and currency selectors not updating

2025-10-11 14:55:26 +00:00
parent 44979cc34e
commit f2105a81ee
8 changed files with 108 additions and 81 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { useAuth, AuthProvider } from "@/contexts/AuthContext";
 import { CartProvider } from "@/contexts/CartContext";
 import { LanguageProvider } from "@/contexts/LanguageContext";
+import { CurrencyProvider } from "@/contexts/CurrencyContext";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import FrontendLayout from "@/components/layouts/FrontendLayout";
 import Index from "./pages/Index";
@@ -507,11 +508,13 @@ const App = () => (
      <Sonner />
      <AuthProvider>
        <LanguageProvider>
+          <CurrencyProvider>
            <CartProvider>
              <ErrorBoundary>
                <AppRouter />
              </ErrorBoundary>
            </CartProvider>
+          </CurrencyProvider>
        </LanguageProvider>
      </AuthProvider>
    </TooltipProvider>
--- a/src/components/DashboardLayout.tsx
+++ b/src/components/DashboardLayout.tsx
@@ -76,7 +76,7 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
  };

  const menuItems = [
-    { icon: Home, label: 'Dashboard', path: '/dashboard' },
+    { icon: Home, label: t('dashboard'), path: '/dashboard' },
    { 
      icon: Settings, 
      label: 'Admin Panel', 
@@ -139,7 +139,7 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
        { icon: DoorOpen, label: 'Check-in', path: '/dashboard/hotel/checkin' },
        { icon: BellRing, label: 'Room Service', path: '/dashboard/hotel/room-service' },
        { icon: Key, label: 'Acceso', path: '/dashboard/hotel/keyless' },
-        { icon: Users, label: 'Personal', path: '/dashboard/hotel/staff' }
+        { icon: Users, label: t('staff'), path: '/dashboard/hotel/staff' }
      ]
    },
    { 
@@ -153,8 +153,8 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
        { icon: Receipt, label: 'Cuentas', path: '/dashboard/restaurant/bills' },
        { icon: Grid3x3, label: 'Mesas', path: '/dashboard/restaurant/tables' },
        { icon: UtensilsCrossed, label: 'Menú', path: '/dashboard/restaurant/menu' },
-        { icon: Package, label: 'Inventario', path: '/dashboard/restaurant/inventory' },
-        { icon: Users, label: 'Personal', path: '/dashboard/restaurant/staff' }
+        { icon: Package, label: t('inventory'), path: '/dashboard/restaurant/inventory' },
+        { icon: Users, label: t('staff'), path: '/dashboard/restaurant/staff' }
      ]
    },
    { icon: Brain, label: 'Personalization', path: '/dashboard/personalization' },
@@ -163,25 +163,25 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
    { icon: Leaf, label: 'Sustainability', path: '/dashboard/sustainability' },
    { 
      icon: Store, 
-      label: 'Comercios', 
+      label: t('commerce'), 
      path: '/dashboard/commerce',
      subItems: [
-        { icon: Store, label: 'Mi Comercio', path: '/dashboard/commerce/store' },
-        { icon: CreditCard, label: 'POS Ventas', path: '/dashboard/commerce/pos' },
-        { icon: Package, label: 'Inventario', path: '/dashboard/commerce/inventory' },
-        { icon: Users, label: 'Clientes', path: '/dashboard/commerce/customers' },
-        { icon: Users, label: 'Personal', path: '/dashboard/commerce/staff' },
-        { icon: Receipt, label: 'Caja', path: '/dashboard/commerce/cashier' },
-        { icon: BarChart3, label: 'Reportes', path: '/dashboard/commerce/reports' },
-        { icon: DollarSign, label: 'Ventas', path: '/dashboard/commerce/sales' }
+        { icon: Store, label: t('myStore'), path: '/dashboard/commerce/store' },
+        { icon: CreditCard, label: t('posTerminal'), path: '/dashboard/commerce/pos' },
+        { icon: Package, label: t('inventory'), path: '/dashboard/commerce/inventory' },
+        { icon: Users, label: t('customers'), path: '/dashboard/commerce/customers' },
+        { icon: Users, label: t('staff'), path: '/dashboard/commerce/staff' },
+        { icon: Receipt, label: t('cashier'), path: '/dashboard/commerce/cashier' },
+        { icon: BarChart3, label: t('reports'), path: '/dashboard/commerce/reports' },
+        { icon: DollarSign, label: t('sales'), path: '/dashboard/commerce/sales' }
      ]
    },
-    { icon: Wallet, label: 'Wallet', path: '/dashboard/wallet' },
+    { icon: Wallet, label: t('wallet'), path: '/dashboard/wallet' },
    { icon: MessageSquare, label: 'Message', path: '/dashboard/messages', badge: '2' },
  ];

  const listingItems = [
-    { icon: List, label: 'My Listing', path: '/dashboard/my-listings', hasSubmenu: true },
+    { icon: List, label: t('myListings'), path: '/dashboard/my-listings', hasSubmenu: true },
    { icon: Star, label: 'Reviews', path: '/dashboard/reviews' },
    { icon: BookOpen, label: 'Bookings', path: '/dashboard/bookings' },
    { icon: Heart, label: 'Bookmark', path: '/dashboard/bookmarks' },
@@ -189,9 +189,9 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
  ];

  const accountItems = [
-    { icon: User, label: 'Edit Profile', path: '/dashboard/profile' },
-    { icon: CreditCard, label: 'Wallet', path: '/dashboard/wallet' },
-    { icon: Settings, label: 'Setting', path: '/dashboard/settings' },
+    { icon: User, label: t('profile'), path: '/dashboard/profile' },
+    { icon: CreditCard, label: t('wallet'), path: '/dashboard/wallet' },
+    { icon: Settings, label: t('settings'), path: '/dashboard/settings' },
  ];

  return (
--- a/src/pages/dashboard/commerce/Cashier.tsx
+++ b/src/pages/dashboard/commerce/Cashier.tsx
@@ -6,8 +6,10 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/hooks/use-toast';
+import { useLanguage } from '@/contexts/LanguageContext';

 const Cashier = () => {
+  const { t } = useLanguage();
  const { toast } = useToast();
  const [cashierData] = useState({
    openingBalance: 1000.00,
@@ -25,19 +27,19 @@ const Cashier = () => {
  });

  const handleOpenCashier = () => {
-    toast({ title: 'Caja Abierta', description: 'Caja abierta con saldo inicial' });
+    toast({ title: t('openCashier'), description: t('openCashier') });
  };

  const handleCloseCashier = () => {
-    toast({ title: 'Caja Cerrada', description: 'Caja cerrada. Generando reporte...' });
+    toast({ title: t('closeCashier'), description: t('closeCashier') });
  };

  const handleAddTransaction = () => {
    if (newTransaction.amount <= 0) {
-      toast({ title: 'Error', description: 'Ingresa un monto válido', variant: 'destructive' });
+      toast({ title: t('error'), description: t('amount'), variant: 'destructive' });
      return;
    }
-    toast({ title: 'Éxito', description: 'Transacción registrada' });
+    toast({ title: t('success'), description: t('registerTransaction') });
    setNewTransaction({ type: 'sale', amount: 0, description: '' });
  };

--- a/src/pages/dashboard/commerce/Customers.tsx
+++ b/src/pages/dashboard/commerce/Customers.tsx
@@ -7,8 +7,10 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/hooks/use-toast';
+import { useLanguage } from '@/contexts/LanguageContext';

 const Customers = () => {
+  const { t } = useLanguage();
  const [customers, setCustomers] = useState<any[]>([]);
  const { toast } = useToast();

@@ -23,7 +25,7 @@ const Customers = () => {

  const handleSubmit = async () => {
    try {
-      toast({ title: 'Éxito', description: 'Cliente agregado correctamente' });
+      toast({ title: t('success'), description: t('add') });
      setFormData({
        firstName: '',
        lastName: '',
@@ -33,7 +35,7 @@ const Customers = () => {
        notes: ''
      });
    } catch (error: any) {
-      toast({ title: 'Error', description: error?.message || 'No se pudo agregar el cliente', variant: 'destructive' });
+      toast({ title: t('error'), description: error?.message || t('error'), variant: 'destructive' });
    }
  };

--- a/src/pages/dashboard/commerce/Inventory.tsx
+++ b/src/pages/dashboard/commerce/Inventory.tsx
@@ -7,8 +7,10 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/hooks/use-toast';
+import { useLanguage } from '@/contexts/LanguageContext';

 const Inventory = () => {
+  const { t } = useLanguage();
  const [inventory, setInventory] = useState<any[]>([]);
  const { toast } = useToast();

--- a/src/pages/dashboard/commerce/POSTerminal.tsx
+++ b/src/pages/dashboard/commerce/POSTerminal.tsx
@@ -6,8 +6,10 @@ import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/hooks/use-toast';
 import { apiClient } from '@/services/adminApi';
+import { useLanguage } from '@/contexts/LanguageContext';

 const POSTerminal = () => {
+  const { t } = useLanguage();
  const [products, setProducts] = useState<any[]>([]);
  const [cart, setCart] = useState<any[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
@@ -58,15 +60,15 @@ const POSTerminal = () => {

  const handleCheckout = async () => {
    if (cart.length === 0) {
-      toast({ title: 'Error', description: 'El carrito está vacío', variant: 'destructive' });
+      toast({ title: t('error'), description: t('cartEmpty'), variant: 'destructive' });
      return;
    }

    try {
-      toast({ title: 'Éxito', description: `Venta procesada: $${getTotal().toFixed(2)}` });
+      toast({ title: t('success'), description: `${t('total')}: $${getTotal().toFixed(2)}` });
      setCart([]);
    } catch (error: any) {
-      toast({ title: 'Error', description: error?.message || 'No se pudo procesar la venta', variant: 'destructive' });
+      toast({ title: t('error'), description: error?.message || t('error'), variant: 'destructive' });
    }
  };

@@ -81,14 +83,14 @@ const POSTerminal = () => {
        <div className="flex items-center gap-3 mb-6">
          <CreditCard className="w-8 h-8 text-orange-600" />
          <div>
-            <h1 className="text-3xl font-bold text-gray-900">POS Terminal</h1>
-            <p className="text-gray-600">Sistema punto de venta</p>
+            <h1 className="text-3xl font-bold text-gray-900">{t('posTerminal')}</h1>
+            <p className="text-gray-600">{t('currentSale')}</p>
          </div>
        </div>

        <div className="mb-4">
          <Input
-            placeholder="Buscar producto por nombre o escanear código de barras..."
+            placeholder={t('searchPlaceholder')}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="max-w-md"
@@ -101,8 +103,8 @@ const POSTerminal = () => {
            {filteredProducts.length === 0 ? (
              <div className="col-span-2 text-center py-12">
                <Package className="w-16 h-16 mx-auto text-muted-foreground mb-4" />
-                <p className="text-muted-foreground">No hay productos en el inventario</p>
-                <p className="text-sm text-muted-foreground">Agrega productos desde la sección de Inventario</p>
+                <p className="text-muted-foreground">{t('noProducts')}</p>
+                <p className="text-sm text-muted-foreground">{t('addProducts')}</p>
              </div>
            ) : (
              filteredProducts.map((item) => (
@@ -122,7 +124,7 @@ const POSTerminal = () => {
                        <Badge variant="outline">{item.category}</Badge>
                        <span className="text-lg font-bold">${item.price}</span>
                      </div>
-                      <p className="text-xs text-muted-foreground">Stock: {item.stock}</p>
+                      <p className="text-xs text-muted-foreground">{t('stock')}: {item.stock}</p>
                    </div>
                  </CardContent>
                </Card>
@@ -134,12 +136,12 @@ const POSTerminal = () => {
            <div className="lg:col-span-1">
              <Card className="sticky top-6">
                <CardHeader>
-                  <CardTitle>Venta Actual</CardTitle>
+                  <CardTitle>{t('currentSale')}</CardTitle>
                </CardHeader>
                <CardContent>
                  {cart.length === 0 ? (
                    <p className="text-sm text-muted-foreground text-center py-8">
-                      No hay productos en la venta
+                      {t('cartEmpty')}
                    </p>
                  ) : (
                    <>
@@ -167,12 +169,12 @@ const POSTerminal = () => {
                      </div>
                      <div className="border-t pt-4 space-y-2">
                        <div className="flex justify-between text-lg font-bold">
-                          <span>Total:</span>
+                          <span>{t('total')}:</span>
                          <span>${getTotal().toFixed(2)}</span>
                        </div>
                        <Button className="w-full" onClick={handleCheckout}>
                          <DollarSign className="w-4 h-4 mr-2" />
-                          Procesar Pago
+                          {t('processPay')}
                        </Button>
                      </div>
                    </>
--- a/src/pages/dashboard/commerce/Staff.tsx
+++ b/src/pages/dashboard/commerce/Staff.tsx
@@ -9,8 +9,10 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/hooks/use-toast';
 import { apiClient } from '@/services/adminApi';
+import { useLanguage } from '@/contexts/LanguageContext';

 const Staff = () => {
+  const { t } = useLanguage();
  const [staff, setStaff] = useState<any[]>([]);
  const [establishments, setEstablishments] = useState<any[]>([]);
  const { toast } = useToast();
--- a/src/pages/dashboard/commerce/Store.tsx
+++ b/src/pages/dashboard/commerce/Store.tsx
@@ -8,8 +8,10 @@ import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/hooks/use-toast';
 import { apiClient } from '@/services/adminApi';
+import { useLanguage } from '@/contexts/LanguageContext';

 const Store = () => {
+  const { t } = useLanguage();
  const [editing, setEditing] = useState(false);
  const [loading, setLoading] = useState(false);
  const { toast } = useToast();
@@ -62,11 +64,11 @@ const Store = () => {
      } else {
        await apiClient.post('/commerce/establishments', storeData);
      }
-      toast({ title: 'Éxito', description: 'Información de la tienda actualizada' });
+      toast({ title: t('success'), description: t('save') });
      setEditing(false);
      loadStoreData();
    } catch (error: any) {
-      toast({ title: 'Error', description: error?.message || 'No se pudo guardar', variant: 'destructive' });
+      toast({ title: t('error'), description: error?.message || t('error'), variant: 'destructive' });
    }
  };

@@ -77,13 +79,13 @@ const Store = () => {
          <div className="flex items-center gap-3">
            <StoreIcon className="w-8 h-8 text-orange-600" />
            <div>
-              <h1 className="text-3xl font-bold text-gray-900">Mi Comercio</h1>
-              <p className="text-gray-600">Información y configuración de tu tienda</p>
+              <h1 className="text-3xl font-bold text-gray-900">{t('myStore')}</h1>
+              <p className="text-gray-600">{t('storeInfo')}</p>
            </div>
          </div>
          <Button onClick={() => setEditing(!editing)} variant={editing ? 'outline' : 'default'}>
            <Edit className="w-4 h-4 mr-2" />
-            {editing ? 'Cancelar' : 'Editar'}
+            {editing ? t('cancel') : t('edit')}
          </Button>
        </div>

@@ -92,9 +94,9 @@ const Store = () => {
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
-                <CardTitle>Estado del Comercio</CardTitle>
+                <CardTitle>{t('storeStatus')}</CardTitle>
                <Badge variant={storeData.isActive ? 'default' : 'secondary'}>
-                  {storeData.isActive ? 'Activo' : 'Inactivo'}
+                  {storeData.isActive ? t('active') : t('inactive')}
                </Badge>
              </div>
            </CardHeader>
@@ -103,35 +105,35 @@ const Store = () => {
          {/* Basic Information */}
          <Card>
            <CardHeader>
-              <CardTitle>Información Básica</CardTitle>
+              <CardTitle>{t('basicInfo')}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
-                <Label>Nombre del Comercio</Label>
+                <Label>{t('storeName')}</Label>
                <Input
                  value={storeData.name}
                  onChange={(e) => setStoreData({ ...storeData, name: e.target.value })}
                  disabled={!editing}
-                  placeholder="Nombre de tu tienda"
+                  placeholder={t('storeName')}
                />
              </div>
              <div>
-                <Label>Descripción</Label>
+                <Label>{t('storeDescription')}</Label>
                <Textarea
                  value={storeData.description}
                  onChange={(e) => setStoreData({ ...storeData, description: e.target.value })}
                  disabled={!editing}
-                  placeholder="Describe tu negocio..."
+                  placeholder={t('storeDescription')}
                  rows={3}
                />
              </div>
              <div>
-                <Label>Categoría</Label>
+                <Label>{t('storeCategory')}</Label>
                <Input
                  value={storeData.category}
                  onChange={(e) => setStoreData({ ...storeData, category: e.target.value })}
                  disabled={!editing}
-                  placeholder="Ej: Boutique, Gift Shop, Electrónica"
+                  placeholder={t('storeCategory')}
                />
              </div>
            </CardContent>
@@ -140,49 +142,49 @@ const Store = () => {
          {/* Contact Information */}
          <Card>
            <CardHeader>
-              <CardTitle>Información de Contacto</CardTitle>
+              <CardTitle>{t('contactInfo')}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label className="flex items-center gap-2">
                  <MapPin className="w-4 h-4" />
-                  Dirección
+                  {t('storeAddress')}
                </Label>
                <Input
                  value={storeData.address}
                  onChange={(e) => setStoreData({ ...storeData, address: e.target.value })}
                  disabled={!editing}
-                  placeholder="Dirección completa"
+                  placeholder={t('storeAddress')}
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="flex items-center gap-2">
                    <Phone className="w-4 h-4" />
-                    Teléfono
+                    {t('storePhone')}
                  </Label>
                  <Input
                    value={storeData.phone}
                    onChange={(e) => setStoreData({ ...storeData, phone: e.target.value })}
                    disabled={!editing}
-                    placeholder="+1 809 123 4567"
+                    placeholder={t('storePhone')}
                  />
                </div>
                <div>
-                  <Label>Email</Label>
+                  <Label>{t('storeEmail')}</Label>
                  <Input
                    type="email"
                    value={storeData.email}
                    onChange={(e) => setStoreData({ ...storeData, email: e.target.value })}
                    disabled={!editing}
-                    placeholder="contacto@tienda.com"
+                    placeholder={t('storeEmail')}
                  />
                </div>
              </div>
              <div>
                <Label className="flex items-center gap-2">
                  <Globe className="w-4 h-4" />
-                  Sitio Web (Opcional)
+                  {t('storeWebsite')}
                </Label>
                <Input
                  value={storeData.website}
@@ -199,14 +201,25 @@ const Store = () => {
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Clock className="w-5 h-5" />
-                Horario de Atención
+                {t('openingHours')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
-                {Object.entries(storeData.openingHours).map(([day, hours]) => (
+                {Object.entries(storeData.openingHours).map(([day, hours]) => {
+                  const dayLabels: Record<string, string> = {
+                    'monday': t('monday'),
+                    'tuesday': t('tuesday'),
+                    'wednesday': t('wednesday'),
+                    'thursday': t('thursday'),
+                    'friday': t('friday'),
+                    'saturday': t('saturday'),
+                    'sunday': t('sunday')
+                  };
+                  
+                  return (
                    <div key={day} className="grid grid-cols-2 gap-4 items-center">
-                    <Label className="capitalize">{day === 'monday' ? 'Lunes' : day === 'tuesday' ? 'Martes' : day === 'wednesday' ? 'Miércoles' : day === 'thursday' ? 'Jueves' : day === 'friday' ? 'Viernes' : day === 'saturday' ? 'Sábado' : 'Domingo'}</Label>
+                      <Label className="capitalize">{dayLabels[day] || day}</Label>
                      <Input
                        value={hours as string}
                        onChange={(e) => setStoreData({
@@ -217,7 +230,8 @@ const Store = () => {
                        placeholder="9:00-18:00"
                      />
                    </div>
-                ))}
+                  );
+                })}
              </div>
            </CardContent>
          </Card>
@@ -225,10 +239,10 @@ const Store = () => {
          {editing && (
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => setEditing(false)}>
-                Cancelar
+                {t('cancel')}
              </Button>
              <Button onClick={handleSave}>
-                Guardar Cambios
+                {t('save')}
              </Button>
            </div>
          )}