Fix: Multilingual and currency selectors not updating

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>
-          <CartProvider>
+          <CurrencyProvider>
-            <ErrorBoundary>
+            <CartProvider>
-              <AppRouter />
+              <ErrorBoundary>
-            </ErrorBoundary>
+                <AppRouter />
-          </CartProvider>
+              </ErrorBoundary>
+            </CartProvider>
+          </CurrencyProvider>
         </LanguageProvider>
       </AuthProvider>
     </TooltipProvider>

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: Package, label: t('inventory'), path: '/dashboard/restaurant/inventory' },
-        { icon: Users, label: 'Personal', path: '/dashboard/restaurant/staff' }
+        { 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: Store, label: t('myStore'), path: '/dashboard/commerce/store' },
-        { icon: CreditCard, label: 'POS Ventas', path: '/dashboard/commerce/pos' },
+        { icon: CreditCard, label: t('posTerminal'), path: '/dashboard/commerce/pos' },
-        { icon: Package, label: 'Inventario', path: '/dashboard/commerce/inventory' },
+        { icon: Package, label: t('inventory'), path: '/dashboard/commerce/inventory' },
-        { icon: Users, label: 'Clientes', path: '/dashboard/commerce/customers' },
+        { icon: Users, label: t('customers'), path: '/dashboard/commerce/customers' },
-        { icon: Users, label: 'Personal', path: '/dashboard/commerce/staff' },
+        { icon: Users, label: t('staff'), path: '/dashboard/commerce/staff' },
-        { icon: Receipt, label: 'Caja', path: '/dashboard/commerce/cashier' },
+        { icon: Receipt, label: t('cashier'), path: '/dashboard/commerce/cashier' },
-        { icon: BarChart3, label: 'Reportes', path: '/dashboard/commerce/reports' },
+        { icon: BarChart3, label: t('reports'), path: '/dashboard/commerce/reports' },
-        { icon: DollarSign, label: 'Ventas', path: '/dashboard/commerce/sales' }
+        { 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: User, label: t('profile'), path: '/dashboard/profile' },
-    { icon: CreditCard, label: 'Wallet', path: '/dashboard/wallet' },
+    { icon: CreditCard, label: t('wallet'), path: '/dashboard/wallet' },
-    { icon: Settings, label: 'Setting', path: '/dashboard/settings' },
+    { icon: Settings, label: t('settings'), path: '/dashboard/settings' },
   ];
 
   return (

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: '' });
   };
 

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' });
     }
   };
 

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();
 

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>
+            <h1 className="text-3xl font-bold text-gray-900">{t('posTerminal')}</h1>
-            <p className="text-gray-600">Sistema punto de venta</p>
+            <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-muted-foreground">{t('noProducts')}</p>
-                <p className="text-sm text-muted-foreground">Agrega productos desde la sección de Inventario</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>
                     </>

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();

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>
+              <h1 className="text-3xl font-bold text-gray-900">{t('myStore')}</h1>
-              <p className="text-gray-600">Información y configuración de tu tienda</p>
+              <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,25 +201,37 @@ 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]) => {
-                  <div key={day} className="grid grid-cols-2 gap-4 items-center">
+                  const dayLabels: Record<string, string> = {
-                    <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>
+                    'monday': t('monday'),
-                    <Input
+                    'tuesday': t('tuesday'),
-                      value={hours as string}
+                    'wednesday': t('wednesday'),
-                      onChange={(e) => setStoreData({
+                    'thursday': t('thursday'),
-                        ...storeData,
+                    'friday': t('friday'),
-                        openingHours: { ...storeData.openingHours, [day]: e.target.value }
+                    'saturday': t('saturday'),
-                      })}
+                    'sunday': t('sunday')
-                      disabled={!editing}
+                  };
-                      placeholder="9:00-18:00"
+                  
-                    />
+                  return (
-                  </div>
+                    <div key={day} className="grid grid-cols-2 gap-4 items-center">
-                ))}
+                      <Label className="capitalize">{dayLabels[day] || day}</Label>
+                      <Input
+                        value={hours as string}
+                        onChange={(e) => setStoreData({
+                          ...storeData,
+                          openingHours: { ...storeData.openingHours, [day]: e.target.value }
+                        })}
+                        disabled={!editing}
+                        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>
           )}