Feature/spanish translation dropdown

dashboard/src/components/Layout.css

@@ -195,6 +195,100 @@
   color: var(--text-primary);
 }
 
+.language-select-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 0.9rem;
+  color: var(--text-secondary);
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.language-select-wrapper:hover {
+  background: var(--bg-light);
+  color: var(--text-primary);
+}
+
+.language-icon {
+  flex-shrink: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.language-select {
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding-right: 1.2rem;
+  padding-left: 0;
+  z-index: 2;
+}
+
+.language-select option {
+  background: var(--bg-white);
+  color: var(--text-primary);
+}
+
+.language-arrow {
+  position: absolute;
+  right: 0.9rem;
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  pointer-events: none;
+  transition: transform 0.2s;
+  z-index: 1;
+}
+
+/* RTL styles */
+[dir="rtl"] .language-select {
+  padding-right: 0;
+  padding-left: 1.2rem;
+}
+
+[dir="rtl"] .language-arrow {
+  right: auto;
+  left: 0.9rem;
+}
+
+/* Collapsed sidebar styles */
+.sidebar.collapsed .language-select-wrapper {
+  justify-content: center;
+  padding: 0.6rem;
+  width: auto;
+  overflow: visible;
+}
+
+.sidebar.collapsed .language-select {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+
+.sidebar.collapsed .language-arrow {
+  display: none;
+}
+
 .logout-btn {
   display: flex;
   align-items: center;

dashboard/src/components/Layout.tsx

@@ -22,7 +22,7 @@ import {
 } from 'lucide-react';
 import { useTheme } from '../hooks/useTheme';
 import { type UserRole } from '../hooks/useRole';
-import { supportedLanguages, type SupportedLanguage } from '../i18n';
+import { type SupportedLanguage } from '../i18n';
 import './Layout.css';
 
 interface LayoutProps {
@@ -80,12 +80,9 @@ export function Layout({ onLogout, userRole }: LayoutProps) {
   const toggleMobile = () => setIsMobileOpen(!isMobileOpen);
 
   const currentLang = (i18n.resolvedLanguage || i18n.language || 'en').split('-')[0] as SupportedLanguage;
-  const cycleLanguage = () => {
-    const idx = supportedLanguages.indexOf(currentLang);
-    const next = supportedLanguages[(idx + 1) % supportedLanguages.length];
-    void i18n.changeLanguage(next);
+  const handleLanguageChange = (lang: string) => {
+    void i18n.changeLanguage(lang);
   };
-  const languageLabel = currentLang === 'he' ? 'עברית' : 'EN';
   const isRtl = currentLang === 'he';
 
   return (
@@ -151,15 +148,20 @@ export function Layout({ onLogout, userRole }: LayoutProps) {
         </nav>
 
         <div className="sidebar-footer">
-          <button
-            className="theme-toggle-btn"
-            onClick={cycleLanguage}
-            title={t('common.language')}
-            aria-label={t('common.language')}
-          >
-            <Languages size={18} />
-            {!isCollapsed && <span>{languageLabel}</span>}
-          </button>
+          <div className="language-select-wrapper" title={t('common.language')}>
+            <Languages size={18} className="language-icon" />
+            <select
+              value={currentLang}
+              onChange={(e) => handleLanguageChange(e.target.value)}
+              className="language-select"
+              aria-label={t('common.language')}
+            >
+              <option value="en">English</option>
+              <option value="es">Español</option>
+              <option value="he">עברית</option>
+            </select>
+            {!isCollapsed && <span className="language-arrow">▼</span>}
+          </div>
           <button
             className="theme-toggle-btn"
             onClick={toggleTheme}

dashboard/src/i18n/index.ts

@@ -3,8 +3,9 @@ import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import en from './locales/en.json';
 import he from './locales/he.json';
+import es from './locales/es.json';
 
-export const supportedLanguages = ['en', 'he'] as const;
+export const supportedLanguages = ['en', 'he', 'es'] as const;
 export type SupportedLanguage = (typeof supportedLanguages)[number];
 
 export const rtlLanguages: SupportedLanguage[] = ['he'];
@@ -16,6 +17,7 @@ void i18n
     resources: {
       en: { translation: en },
       he: { translation: he },
+      es: { translation: es },
     },
     fallbackLng: 'en',
     supportedLngs: supportedLanguages as unknown as string[],