Fix: Language and currency selectors not working

src/components/layouts/FrontendLayout.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import FrontendStyles from './FrontendStyles';
+import CurrencySelector from '@/components/CurrencySelector';
+import LanguageSelector from '@/components/LanguageSelector';
 
 interface FrontendLayoutProps {
   children: React.ReactNode;
@@ -9,6 +11,10 @@ const FrontendLayout: React.FC<FrontendLayoutProps> = ({ children }) => {
   return (
     <>
       <FrontendStyles />
+      <div className="fixed top-3 right-3 z-[60] flex items-center gap-2">
+        <CurrencySelector />
+        <LanguageSelector />
+      </div>
       {children}
     </>
   );

src/pages/Index.tsx

@@ -5,9 +5,11 @@ import PlacesSection from "@/components/PlacesSection";
 import BlogSection from "@/components/BlogSection";
 import Footer from "@/components/Footer";
 import { AIFloatingAssistant } from "@/components/AIFloatingAssistant";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 const Index = () => {
   const navigate = useNavigate();
+  const { t } = useLanguage();
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedLocation, setSelectedLocation] = useState("");
 
@@ -23,12 +25,12 @@ const Index = () => {
   };
 
   const categories = [
-    { icon: "🏢", title: "Apartment", count: "99+" },
+    { icon: "🏢", title: t('apartments'), count: "99+" },
-    { icon: "🍽️", title: "Restaurant", count: "55+" },
+    { icon: "🍽️", title: t('restaurants'), count: "55+" },
-    { icon: "🎭", title: "Events/Arts", count: "55+" },
+    { icon: "🎭", title: t('events'), count: "55+" },
-    { icon: "🛍️", title: "Shops", count: "80+" },
+    { icon: "🛍️", title: t('shops'), count: "80+" },
-    { icon: "🏛️", title: "Museum", count: "96+" },
+    { icon: "🏛️", title: t('museums'), count: "96+" },
-    { icon: "💪", title: "Gymnasiums", count: "21+" }
+    { icon: "💪", title: t('gyms'), count: "21+" }
   ];
 
   return (
@@ -66,9 +68,9 @@ const Index = () => {
             </a>
             
             <div className="hidden lg:flex items-center space-x-8">
-              <a className="text-white hover:text-orange-400 transition-colors" href="/">Home</a>
+              <a className="text-white hover:text-orange-400 transition-colors" href="/">{t('home')}</a>
-              <a className="text-white hover:text-orange-400 transition-colors" href="/explore">Explore</a>
+              <a className="text-white hover:text-orange-400 transition-colors" href="/explore">{t('explore')}</a>
-              <a className="text-white hover:text-orange-400 transition-colors" href="/about">About</a>
+              <a className="text-white hover:text-orange-400 transition-colors" href="/about">{t('about')}</a>
             </div>
             
             <div className="flex items-center space-x-4">
@@ -83,7 +85,7 @@ const Index = () => {
                 className="hidden sm:flex items-center space-x-2 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full transition-colors"
               >
                 <span>➕</span>
-                <span>Add Listing</span>
+                <span>{t('addListing')}</span>
               </a>
             </div>
           </div>
@@ -99,15 +101,13 @@ const Index = () => {
         <div className="absolute inset-0 bg-black bg-opacity-50" />
         <div className="container mx-auto px-4 relative z-10 py-20">
           <div className="text-center text-white uppercase mb-3 text-sm font-medium">
-            WE ARE #1 ON THE MARKET
+            {t('heroBadge')}
           </div>
           <h1 className="text-4xl md:text-6xl font-bold text-white text-center mb-5">
-            We're Here to Help You
+            {t('heroTitle')}
-            <br className="hidden lg:block" /> 
-            <span className="font-caveat text-span">Navigate</span> While Traveling
           </h1>
           <div className="text-lg mb-8 text-center text-white max-w-2xl mx-auto">
-            You'll get comprehensive results based on the provided location.
+            {t('heroSubtitle')}
           </div>
 
           {/* Search Form */}
@@ -119,7 +119,7 @@ const Index = () => {
                   <input 
                     type="text" 
                     className="bg-transparent text-white placeholder-white border-none outline-none flex-1" 
-                    placeholder="What are you looking for?" 
+                    placeholder={t('searchPlaceholder')} 
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
                     onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
@@ -133,7 +133,7 @@ const Index = () => {
                     value={selectedLocation}
                     onChange={(e) => setSelectedLocation(e.target.value)}
                   >
-                    <option value="" className="text-gray-800">Location</option>
+                    <option value="" className="text-gray-800">{t('locationPlaceholder')}</option>
                     <option value="florence" className="text-gray-800">Florence, Italy</option>
                     <option value="rome" className="text-gray-800">Rome, Italy</option>
                     <option value="milan" className="text-gray-800">Milan, Italy</option>
@@ -145,7 +145,7 @@ const Index = () => {
                   className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-full transition-colors"
                   onClick={handleSearch}
                 >
-                  Search places
+                  {t('searchButton')}
                 </button>
               </div>
             </div>
@@ -172,7 +172,7 @@ const Index = () => {
                             {category.title}
                           </button>
                         </h3>
-                        <p className="text-sm text-gray-300">{category.count} listings</p>
+                        <p className="text-sm text-gray-300">{category.count} {t('listings')}</p>
                       </div>
                     </div>
                   </div>
@@ -189,13 +189,11 @@ const Index = () => {
           <div className="flex justify-center">
             <div className="max-w-4xl text-center">
               <div className="mb-12">
-                <div className="font-caveat text-4xl font-medium text-orange-500 mb-4">Best Way</div>
                 <h2 className="text-4xl md:text-5xl font-semibold mb-6">
-                  Find Your Dream Place The Best Way
+                  {t('processTitle')}
                 </h2>
                 <div className="text-lg text-gray-600">
-                  Discover exciting categories. 
+                  {t('processSubtitle')}
-                  <span className="text-orange-500 font-semibold"> Find what you're looking for.</span>
                 </div>
               </div>
             </div>
@@ -207,7 +205,7 @@ const Index = () => {
                 1
               </div>
               <h4 className="text-xl font-semibold mb-4">
-                Input your location to start looking for landmarks.
+                {t('step1')}
               </h4>
               <p className="text-gray-600">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra vitae quam integer semper.
@@ -219,7 +217,7 @@ const Index = () => {
                 2
               </div>
               <h4 className="text-xl font-semibold mb-4">
-                Make an appointment at the place you want to visit.
+                {t('step2')}
               </h4>
               <p className="text-gray-600">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra vitae quam integer.
@@ -231,7 +229,7 @@ const Index = () => {
                 3
               </div>
               <h4 className="text-xl font-semibold mb-4">
-                Visit the place and enjoy the experience.
+                {t('step3')}
               </h4>
               <p className="text-gray-600">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra vitae quam integer aenean.

src/pages/dashboard/commerce/Cashier.tsx

@@ -7,9 +7,11 @@ import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/hooks/use-toast';
 import { useLanguage } from '@/contexts/LanguageContext';
+import { useCurrency } from '@/contexts/CurrencyContext';
 
 const Cashier = () => {
   const { t } = useLanguage();
+  const { formatAmount } = useCurrency();
   const { toast } = useToast();
   const [cashierData] = useState({
     openingBalance: 1000.00,
@@ -50,55 +52,55 @@ const Cashier = () => {
           <div className="flex items-center gap-3">
             <Receipt className="w-8 h-8 text-orange-600" />
             <div>
-              <h1 className="text-3xl font-bold text-gray-900">Control de Caja</h1>
+              <h1 className="text-3xl font-bold text-gray-900">{t('cashierControl')}</h1>
-              <p className="text-gray-600">Gestiona el flujo de efectivo de tu tienda</p>
+              <p className="text-gray-600">{t('cashierControl')}</p>
             </div>
           </div>
           <div className="flex gap-2">
-            <Button onClick={handleOpenCashier}>Abrir Caja</Button>
+            <Button onClick={handleOpenCashier}>{t('openCashier')}</Button>
-            <Button variant="outline" onClick={handleCloseCashier}>Cerrar Caja</Button>
+            <Button variant="outline" onClick={handleCloseCashier}>{t('closeCashier')}</Button>
           </div>
         </div>
 
         <div className="grid gap-6 md:grid-cols-4 mb-6">
           <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Saldo Inicial</CardTitle>
+              <CardTitle className="text-sm font-medium">{t('openingBalance')}</CardTitle>
               <DollarSign className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold">${cashierData.openingBalance.toFixed(2)}</div>
+              <div className="text-2xl font-bold">{formatAmount(cashierData.openingBalance)}</div>
             </CardContent>
           </Card>
 
           <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Saldo Actual</CardTitle>
+              <CardTitle className="text-sm font-medium">{t('currentBalance')}</CardTitle>
               <DollarSign className="h-4 w-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold text-green-600">${cashierData.currentBalance.toFixed(2)}</div>
+              <div className="text-2xl font-bold text-green-600">{formatAmount(cashierData.currentBalance)}</div>
             </CardContent>
           </Card>
 
           <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Ventas del Día</CardTitle>
+              <CardTitle className="text-sm font-medium">{t('dailySales')}</CardTitle>
               <TrendingUp className="h-4 w-4 text-green-600" />
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold">${cashierData.totalSales.toFixed(2)}</div>
+              <div className="text-2xl font-bold">{formatAmount(cashierData.totalSales)}</div>
               <p className="text-xs text-muted-foreground">{cashierData.transactionsCount} transacciones</p>
             </CardContent>
           </Card>
 
           <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Gastos</CardTitle>
+              <CardTitle className="text-sm font-medium">{t('expenses')}</CardTitle>
               <TrendingDown className="h-4 w-4 text-red-600" />
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold text-red-600">${cashierData.totalExpenses.toFixed(2)}</div>
+              <div className="text-2xl font-bold text-red-600">{formatAmount(cashierData.totalExpenses)}</div>
             </CardContent>
           </Card>
         </div>

src/pages/dashboard/commerce/Customers.tsx

@@ -127,7 +127,7 @@ const Customers = () => {
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <div>
                     <CardTitle className="text-base">{customer.firstName} {customer.lastName}</CardTitle>
-                    <p className="text-sm text-muted-foreground">Cliente desde {customer.createdAt}</p>
+                    <p className="text-sm text-muted-foreground">{t('customerSince')} {customer.createdAt}</p>
                   </div>
                   <div className="flex gap-1">
                     <Button variant="outline" size="sm">
@@ -155,7 +155,7 @@ const Customers = () => {
                       </div>
                     )}
                     <div className="flex justify-between items-center pt-2 border-t">
-                      <span className="text-muted-foreground">Total compras:</span>
+                      <span className="text-muted-foreground">{t('totalPurchases')}:</span>
                       <div className="flex items-center gap-1 font-bold">
                         <DollarSign className="w-4 h-4" />
                         {customer.totalPurchases || 0}

src/pages/dashboard/commerce/Inventory.tsx

@@ -25,7 +25,7 @@ const Inventory = () => {
 
   const handleSubmit = async () => {
     try {
-      toast({ title: 'Éxito', description: 'Producto agregado al inventario' });
+      toast({ title: t('success'), description: t('add') });
       setFormData({
         name: '',
         category: '',
@@ -35,7 +35,7 @@ const Inventory = () => {
         supplier: ''
       });
     } catch (error: any) {
-      toast({ title: 'Error', description: error?.message || 'No se pudo agregar el producto', variant: 'destructive' });
+      toast({ title: t('error'), description: error?.message || t('error'), variant: 'destructive' });
     }
   };
 

src/pages/dashboard/commerce/POSTerminal.tsx

@@ -7,9 +7,11 @@ import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/hooks/use-toast';
 import { apiClient } from '@/services/adminApi';
 import { useLanguage } from '@/contexts/LanguageContext';
+import { useCurrency } from '@/contexts/CurrencyContext';
 
 const POSTerminal = () => {
   const { t } = useLanguage();
+  const { formatAmount } = useCurrency();
   const [products, setProducts] = useState<any[]>([]);
   const [cart, setCart] = useState<any[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
@@ -23,7 +25,11 @@ const POSTerminal = () => {
     try {
       // Load inventory products for POS
       // For now using mock data
-      setProducts([]);
+      const mock = [
+        { id: 1, name: 'T-Shirt', category: 'Apparel', price: 20, stock: 15, barcode: '123456' },
+        { id: 2, name: 'Mug', category: 'Gifts', price: 8.5, stock: 40, barcode: '789012' },
+      ].map(p => ({ ...p, formattedPrice: formatAmount(p.price) }));
+      setProducts(mock);
     } catch (error) {
       console.error('Error loading products:', error);
     }
@@ -122,7 +128,7 @@ const POSTerminal = () => {
                       )}
                         <div className="flex justify-between items-center">
                           <Badge variant="outline">{item.category}</Badge>
-                        <span className="text-lg font-bold">${item.price}</span>
+                          <span className="text-lg font-bold">{item.formattedPrice || `$${item.price}`}</span>
                         </div>
                       <p className="text-xs text-muted-foreground">{t('stock')}: {item.stock}</p>
                     </div>
@@ -150,7 +156,7 @@ const POSTerminal = () => {
                           <div key={item.id} className="flex items-center justify-between border-b pb-2">
                             <div className="flex-1">
                               <p className="font-medium text-sm">{item.name}</p>
-                              <p className="text-xs text-muted-foreground">${item.price}</p>
+                              <p className="text-xs text-muted-foreground">{item.formattedPrice || `$${item.price}`}</p>
                             </div>
                             <div className="flex items-center gap-2">
                               <Button size="sm" variant="outline" onClick={() => updateQuantity(item.id, -1)}>