feat: Implement internationalization

src/components/CurrencySelector.tsx

@@ -21,7 +21,7 @@ const CurrencySelector = () => {
         <SelectTrigger className="w-[180px]">
           <SelectValue />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent className="bg-white z-[100]">
           {currencies.map((curr) => (
             <SelectItem key={curr.value} value={curr.value}>
               <span className="flex items-center gap-2">

src/components/DashboardLayout.tsx

@@ -4,6 +4,7 @@ import { useAuth } from '@/contexts/AuthContext';
 import { useLanguage } from '@/contexts/LanguageContext';
 import DashboardStyles from '@/components/layouts/DashboardStyles';
 import CurrencySelector from '@/components/CurrencySelector';
+import LanguageSelector from '@/components/LanguageSelector';
 import { 
   Home, 
   Plus, 
@@ -480,6 +481,9 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
 
             {/* Right Side */}
             <div className="flex items-center space-x-4">
+              {/* Language Selector */}
+              <LanguageSelector />
+              
               {/* Currency Selector */}
               <CurrencySelector />
               

src/components/LanguageSelector.tsx

@@ -0,0 +1,38 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { Globe } from 'lucide-react';
+
+type Language = 'en' | 'es' | 'fr';
+
+const languages: { value: Language; label: string; flag: string }[] = [
+  { value: 'en', label: 'English', flag: '🇺🇸' },
+  { value: 'es', label: 'Español', flag: '🇪🇸' },
+  { value: 'fr', label: 'Français', flag: '🇫🇷' }
+];
+
+const LanguageSelector = () => {
+  const { language, setLanguage } = useLanguage();
+
+  return (
+    <div className="flex items-center gap-2">
+      <Globe className="h-4 w-4 text-muted-foreground" />
+      <Select value={language} onValueChange={(value) => setLanguage(value as Language)}>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="bg-white z-[100]">
+          {languages.map((lang) => (
+            <SelectItem key={lang.value} value={lang.value}>
+              <span className="flex items-center gap-2">
+                <span>{lang.flag}</span>
+                <span>{lang.label}</span>
+              </span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
+
+export default LanguageSelector;