feat: Spanish localization (#74)

## Pending
- [x] Translate landing page
- [x] Dashboard
- [x] Accounts list page
- [x] Account page
- [x] Cashflow
- [x] Budgets
- [x] Transactions
- [x] Settings

## Screenshots
<img width="1210" height="969" alt="image"
src="https://github.com/user-attachments/assets/c7935e5c-488d-4941-8f19-8834e5668257"
/>
<img width="1211" height="972" alt="image"
src="https://github.com/user-attachments/assets/e94e1daf-233a-4a49-aa65-5678c772d178"
/>

LOCALIZATION.md

@@ -0,0 +1,273 @@
+# Frontend Localization Guide
+
+This document describes the localization system for the Whisper Money React frontend and the automated tools available.
+
+## Overview
+
+The application now supports multilingual UI text using a simple translation system:
+
+- **Hook**: `useTranslations()` (aliased as `__()`)
+- **Translation Files**: `lang/es.json` (Spanish), with English as fallback
+- **Coverage**: 118+ React components have been localized
+- **Total Strings**: 730+ translatable strings
+
+## How It Works
+
+### Backend (Laravel)
+
+The `HandleInertiaRequests` middleware loads the appropriate translation file (`lang/{locale}.json`) and shares it with all Inertia page props:
+
+```php
+protected function getTranslations(): array
+{
+    $locale = app()->getLocale();
+    $translationFile = lang_path("{$locale}.json");
+    return json_decode(file_get_contents($translationFile), true) ?? [];
+}
+```
+
+### Frontend (React)
+
+Components use the `__()` function directly to translate strings:
+
+```tsx
+import { __ } from '@/utils/i18n';
+
+export default function MyComponent() {
+    return (
+        <div>
+            <h1>{__('Welcome to Whisper Money')}</h1>
+            <Button>{__('Save')}</Button>
+        </div>
+    );
+}
+```
+
+**Note**: The `__()` function uses React's `usePage()` hook internally, so it must be called within React components.
+
+### Frontend (React)
+
+Components use the `__()` hook to translate strings:
+
+```tsx
+import { __ } from '@/utils/i18n';
+
+export default function MyComponent() {
+    const t = __();
+
+    return (
+        <div>
+            <h1>{t('Welcome to Whisper Money')}</h1>
+            <Button>{t('Save')}</Button>
+        </div>
+    );
+}
+```
+
+## Automated Localization Tools
+
+### Main Localization Script (Local Development Only)
+
+**File**: `scripts/localize-frontend.mjs` (not committed to repo)
+
+This script automatically wraps hardcoded strings with the `t()` translation function across all React components.
+
+**What it does**:
+
+- Scans all `.tsx` and `.ts` files in `resources/js/`
+- Wraps JSX text content and specific props (title, placeholder, etc.) with `t()`
+- Auto-imports the `__()` hook and adds `const t = __()` to components
+- Extracts all unique strings to `lang/es.json`
+- Generates a detailed report of changes
+
+**What it skips**:
+
+- Technical identifiers (class names, data-test attributes, etc.)
+- URLs, email addresses
+- Currency codes (USD, EUR, etc.)
+- Brand names (Whisper Money, Discord, etc.)
+- Single-character strings
+- Code-like patterns
+
+**Usage** (local development only):
+
+```bash
+# Run the localization script (safe to run multiple times)
+node scripts/localize-frontend.mjs
+
+# Format the modified files
+bun run format
+
+# Review changes
+git diff resources/js/
+git diff lang/es.json
+cat localization-report.txt
+```
+
+**Note**: The script is for local development only and not committed to the repository. Translations must be added manually to `lang/es.json`.
+
+## Current Status
+
+### Completed (✅)
+
+- ✅ 118 React components localized
+- ✅ 730 strings extracted and wrapped with `t()`
+- ✅ Translation infrastructure in place
+- ✅ Automated extraction tool created
+- ✅ English fallbacks for all strings
+
+### Pending (⏳)
+
+- ⏳ Spanish translations (currently English placeholders - manual translation needed)
+- ⏳ Some files may need manual review for complex JSX patterns
+
+## Adding New Translatable Strings
+
+### Option 1: Manual (Recommended for new code)
+
+```tsx
+import { __ } from '@/utils/i18n';
+
+export default function NewComponent() {
+    return (
+        <div>
+            <h1>{__('My New Title')}</h1>
+            <Input placeholder={__('Enter your name')} />
+        </div>
+    );
+}
+```
+
+Then add the translations to `lang/es.json`:
+
+```json
+{
+    "My New Title": "Mi Nuevo Título",
+    "Enter your name": "Ingresa tu nombre"
+}
+```
+
+Then add the translations to `lang/es.json`:
+
+```json
+{
+    "My New Title": "Mi Nuevo Título",
+    "Enter your name": "Ingresa tu nombre"
+}
+```
+
+### Option 2: Automated (For bulk updates - local development)
+
+1. Write your component with hardcoded English strings
+2. Run `node scripts/localize-frontend.mjs` (if available locally)
+3. Run `bun run format`
+4. Manually translate new entries in `lang/es.json`
+
+## Translation with Placeholders
+
+Support for dynamic values:
+
+```tsx
+// In your component
+const message = __('Hello :name, you have :count unread messages', {
+    name: user.name,
+    count: unreadCount
+});
+
+// In lang/es.json
+{
+    "Hello :name, you have :count unread messages": "Hola :name, tienes :count mensajes sin leer"
+}
+```
+
+## Testing Translations
+
+1. **Change language**: Go to Settings → Language → Select "Español"
+2. **Test UI**: Navigate through the app and verify translations
+3. **Check console**: Look for missing translation warnings (if implemented)
+
+## Translation Guidelines
+
+### For Spanish (es)
+
+- Use informal "tú" form (not formal "usted")
+- Financial terms should be accurate and professional
+- Preserve brand names in English
+- Keep the friendly, approachable tone
+- Use sentence case, not title case
+
+### Examples
+
+- ✅ "Guardar cambios" (Save changes)
+- ❌ "Guardar Cambios" (wrong capitalization)
+- ✅ "Iniciar sesión" (Log in)
+- ❌ "Entrar" (too casual)
+
+## CI/CD Integration
+
+Consider adding translation validation to your CI pipeline in the future to ensure all strings are translated.
+
+## Troubleshooting
+
+### Issue: Translations not showing
+
+**Solution**: Check that:
+
+1. The string exists in `lang/es.json`
+2. User's language setting is "Español" or auto-detected to Spanish
+3. Browser cache is cleared
+
+### Issue: String wrapped incorrectly by script
+
+**Solution**:
+
+1. Revert the file: `git checkout <file>`
+2. Manually wrap the string
+3. Add the string pattern to skip list in `scripts/localize-frontend.mjs`
+
+### Issue: Script breaks complex JSX
+
+**Solution**: The script has limitations with very complex nested JSX. For these files:
+
+1. Revert the auto-changes
+2. Manually localize
+3. Or simplify the JSX structure
+
+## File Structure
+
+```
+lang/
+├── es.json              # Spanish translations
+├── es/                  # Laravel backend translations (PHP)
+│   ├── auth.php
+│   ├── pagination.php
+│   └── ...
+└── en/                  # English backend translations
+
+scripts/
+├── localize-frontend.mjs       # Main localization tool
+└── translate-to-spanish.mjs    # AI translation helper
+
+resources/js/
+├── utils/i18n.ts              # Translation hook
+└── types/index.d.ts           # SharedData type (includes translations)
+```
+
+## Next Steps
+
+1. **Manual translation**: Translate English placeholders in `lang/es.json` to Spanish
+2. **Review translations**: Check accuracy, tone, and proper Spanish conventions
+3. **Test thoroughly**: Test the entire app in Spanish
+4. **Add more languages**: Create `lang/fr.json`, `lang/de.json`, etc.
+
+## Resources
+
+- Translation hook: `resources/js/utils/i18n.ts`
+- Example localized component: `resources/js/pages/auth/login.tsx`
+- Example localized settings: `resources/js/pages/settings/account.tsx`
+- Translation middleware: `app/Http/Middleware/HandleInertiaRequests.php`
+- Spanish translations: `lang/es.json`
+
+## Development Scripts
+
+The localization automation script (`scripts/localize-frontend.mjs`) is available for local development only and is not committed to the repository. It uses Babel to parse and transform React components automatically. If you need to regenerate it, refer to the project's localization implementation history.

app/Actions/CreateDefaultCategories.php

@@ -11,7 +11,8 @@ class CreateDefaultCategories
      */
     public function handle(User $user): void
     {
-        $defaultCategories = self::getDefaultCategories();
+        $locale = $user->locale ?? app()->getLocale();
+        $defaultCategories = self::getDefaultCategories($locale);
 
         foreach ($defaultCategories as $category) {
             $user->categories()->firstOrCreate(
@@ -22,11 +23,33 @@ class CreateDefaultCategories
     }
 
     /**
-     * Get the default categories configuration.
+     * Get the default categories configuration for a given locale.
      *
      * @return array<int, array{name: string, icon: string, color: string, type: string}>
      */
-    public static function getDefaultCategories(): array
+    public static function getDefaultCategories(string $locale = 'en'): array
+    {
+        $categories = self::getBaseCategories();
+
+        if ($locale === 'es') {
+            $translations = self::getSpanishTranslations();
+
+            return array_map(function (array $category) use ($translations) {
+                $category['name'] = $translations[$category['name']] ?? $category['name'];
+
+                return $category;
+            }, $categories);
+        }
+
+        return $categories;
+    }
+
+    /**
+     * Get the base (English) categories configuration.
+     *
+     * @return array<int, array{name: string, icon: string, color: string, type: string}>
+     */
+    private static function getBaseCategories(): array
     {
         return [
             [
@@ -409,4 +432,78 @@ class CreateDefaultCategories
             ],
         ];
     }
+
+    /**
+     * Get the Spanish translations for category names.
+     *
+     * @return array<string, string>
+     */
+    private static function getSpanishTranslations(): array
+    {
+        return [
+            'Food' => 'Alimentación',
+            'Cafes, restaurants, bars' => 'Cafeterías, restaurantes, bares',
+            'Groceries' => 'Supermercado',
+            'Tobacco and alcohol' => 'Tabaco y alcohol',
+            'Other groceries' => 'Otras compras de alimentación',
+            'Food delivery' => 'Comida a domicilio',
+            'Utility services' => 'Servicios del hogar',
+            'Electricity' => 'Electricidad',
+            'Natural gas' => 'Gas natural',
+            'Rent and maintanence' => 'Alquiler y mantenimiento',
+            'Telephone, internet, TV, computer' => 'Teléfono, internet, TV, ordenador',
+            'Water' => 'Agua',
+            'Other utility expenses' => 'Otros gastos del hogar',
+            'Household goods' => 'Artículos del hogar',
+            'Transportation' => 'Transporte',
+            'Parking' => 'Aparcamiento',
+            'Fuel' => 'Combustible',
+            'Transportation expenses' => 'Gastos de transporte',
+            'Vehicle purchase, maintenance' => 'Compra y mantenimiento de vehículo',
+            'Clothing and shoes' => 'Ropa y calzado',
+            'Leisure activities, traveling' => 'Ocio y viajes',
+            'Gifts' => 'Regalos',
+            'Books, newspapers, magazines' => 'Libros, periódicos, revistas',
+            'Accommodation, travel expenses' => 'Alojamiento y gastos de viaje',
+            'Sport and sports goods' => 'Deporte y artículos deportivos',
+            'Theatre, music, cinema' => 'Teatro, música, cine',
+            'Hobbies and other leisure time activites' => 'Hobbies y otras actividades de ocio',
+            'Education, health and beauty' => 'Educación, salud y belleza',
+            'Education and courses' => 'Educación y cursos',
+            'Beauty, cosmetics' => 'Belleza y cosmética',
+            'Health and pharmaceuticals' => 'Salud y farmacia',
+            'Online transactions' => 'Transacciones en línea',
+            'Online services' => 'Servicios en línea',
+            'Insurance' => 'Seguros',
+            'Investments' => 'Inversiones',
+            'Savings' => 'Ahorros',
+            'Other investments' => 'Otras inversiones',
+            'Financial services and commission' => 'Servicios financieros y comisiones',
+            'Fines' => 'Multas',
+            'Mortgage' => 'Hipoteca',
+            'Credit card repayment' => 'Pago de tarjeta de crédito',
+            'Cash withdrawal' => 'Retiro de efectivo',
+            'Gambling' => 'Apuestas',
+            'Lottery' => 'Lotería',
+            'Taxes and government fees' => 'Impuestos y tasas',
+            'Invoices' => 'Facturas',
+            'Personal transfers' => 'Transferencias personales',
+            'Other personal transfers' => 'Otras transferencias personales',
+            'Administrative violations' => 'Infracciones administrativas',
+            'Other transfers' => 'Otras transferencias',
+            'Other payments' => 'Otros pagos',
+            'Salary' => 'Salario',
+            'Regular income' => 'Ingresos regulares',
+            'Work on demand' => 'Trabajo por encargo',
+            'Income from rent' => 'Ingresos por alquiler',
+            'Unemployment benefit' => 'Prestación por desempleo',
+            'Tax return' => 'Devolución de impuestos',
+            'Return debit' => 'Devolución de débito',
+            'Own account' => 'Cuenta propia',
+            'From account of relatives' => 'Desde cuenta de familiares',
+            'Returned payments' => 'Pagos devueltos',
+            'Credit cards' => 'Tarjetas de crédito',
+            'Other incoming payments' => 'Otros ingresos',
+        ];
+    }
 }

app/Actions/Fortify/CreateNewUser.php

@@ -34,6 +34,7 @@ class CreateNewUser implements CreatesNewUsers
             'name' => $input['name'],
             'email' => $input['email'],
             'password' => $input['password'],
+            'locale' => $this->detectLocaleFromRequest(),
         ]);
 
         if (! config('mail.email_verification_enabled')) {
@@ -42,4 +43,19 @@ class CreateNewUser implements CreatesNewUsers
 
         return $user;
     }
+
+    /**
+     * Detect locale from Accept-Language header.
+     */
+    protected function detectLocaleFromRequest(): string
+    {
+        $acceptLanguage = request()->header('Accept-Language', '');
+
+        // Check if Spanish is preferred
+        if (preg_match('/^es(-|,|;)/i', $acceptLanguage) || $acceptLanguage === 'es') {
+            return 'es';
+        }
+
+        return 'en';
+    }
 }

app/Http/Controllers/Settings/ProfileController.php

@@ -45,7 +45,9 @@ class ProfileController extends Controller
      */
     public function update(ProfileUpdateRequest $request): RedirectResponse
     {
-        $request->user()->fill($request->validated());
+        $data = $request->validated();
+
+        $request->user()->fill($data);
 
         if ($request->user()->isDirty('email')) {
             $request->user()->email_verified_at = null;

app/Http/Middleware/BlockDemoAccountActions.php

@@ -18,7 +18,7 @@ class BlockDemoAccountActions
 
     public function handle(Request $request, Closure $next, ?string $mode = null): Response
     {
-        if (! $request->user()?->isDemoAccount()) {
+        if (! $request->user()?->isDemoAccount() || app()->environment('local')) {
             return $next($request);
         }
 

app/Http/Middleware/HandleInertiaRequests.php

@@ -40,7 +40,7 @@ class HandleInertiaRequests extends Middleware
         [$message, $author] = str(Inspiring::quotes()->random())->explode('-');
 
         $user = $request->user();
-        $isDemoAccount = $user?->isDemoAccount() ?? false;
+        $isDemoAccount = $user?->isDemoAccount() && ! app()->environment('local') ?? false;
         $isDemoQuery = $request->query('demo') === '1';
 
         return [
@@ -94,6 +94,25 @@ class HandleInertiaRequests extends Middleware
             'labels' => fn () => $user ? $user->labels()
                 ->orderBy('name')
                 ->get(['id', 'name', 'color']) : [],
+            'locale' => app()->getLocale(),
+            'translations' => $this->getTranslations(),
         ];
     }
+
+    /**
+     * Get all translations for the current locale as a flat key-value array.
+     *
+     * @return array<string, string>
+     */
+    protected function getTranslations(): array
+    {
+        $locale = app()->getLocale();
+        $translationFile = lang_path("{$locale}.json");
+
+        if (! file_exists($translationFile)) {
+            return [];
+        }
+
+        return json_decode(file_get_contents($translationFile), true) ?? [];
+    }
 }

app/Http/Middleware/SetLocale.php

@@ -0,0 +1,86 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\App;
+use Symfony\Component\HttpFoundation\Response;
+
+class SetLocale
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        $locale = $this->determineLocale($request);
+
+        App::setLocale($locale);
+
+        return $next($request);
+    }
+
+    /**
+     * Determine the locale for the current request.
+     */
+    protected function determineLocale(Request $request): string
+    {
+        // Priority 1: Check for lang query parameter (user override on welcome page)
+        if ($request->has('lang') && in_array($request->get('lang'), ['en', 'es'])) {
+            $locale = $request->get('lang');
+            // Store in session so subsequent requests remember this choice
+            $request->session()->put('locale', $locale);
+
+            return $locale;
+        }
+
+        // Priority 2: Check authenticated user's locale preference
+        if ($request->user() && $request->user()->locale) {
+            return $request->user()->locale;
+        }
+
+        // Priority 2b: Authenticated user without locale — detect and persist
+        if ($request->user()) {
+            $detected = $this->detectLocaleFromHeader($request);
+
+            if (in_array($request->session()->get('locale'), ['en', 'es'])) {
+                $detected = $request->session()->get('locale');
+            }
+
+            $request->user()->update(['locale' => $detected]);
+
+            return $detected;
+        }
+
+        // Priority 3: Check session for previously detected locale
+        if ($request->session()->has('locale')) {
+            return $request->session()->get('locale');
+        }
+
+        // Priority 4: Detect from Accept-Language header
+        $detected = $this->detectLocaleFromHeader($request);
+
+        // Store in session for subsequent requests
+        $request->session()->put('locale', $detected);
+
+        return $detected;
+    }
+
+    /**
+     * Detect locale from Accept-Language header.
+     */
+    protected function detectLocaleFromHeader(Request $request): string
+    {
+        $acceptLanguage = $request->header('Accept-Language', '');
+
+        // Check if Spanish is preferred
+        if (preg_match('/^es(-|,|;)/i', $acceptLanguage) || $acceptLanguage === 'es') {
+            return 'es';
+        }
+
+        return 'en';
+    }
+}

app/Http/Requests/Settings/ProfileUpdateRequest.php

@@ -28,6 +28,7 @@ class ProfileUpdateRequest extends FormRequest
                 Rule::unique(User::class)->ignore($this->user()->id),
             ],
             'currency_code' => ['required', 'string', 'max:3', Rule::in(['USD', 'EUR', 'GBP', 'JPY', 'CHF', 'CAD', 'AUD', 'CNY', 'INR', 'MXN'])],
+            'locale' => ['nullable', 'string', Rule::in(['en', 'es'])],
         ];
     }
 }

app/Mail/Drip/FeedbackEmail.php

@@ -37,7 +37,7 @@ class FeedbackEmail extends Mailable implements ShouldQueue
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: "How's Your Experience So Far?",
+            subject: __("How's Your Experience So Far?"),
         )->from(config('mail.from.address', 'hello@example.com'), 'Victor');
     }
 

app/Mail/Drip/ImportHelpEmail.php

@@ -37,7 +37,7 @@ class ImportHelpEmail extends Mailable implements ShouldQueue
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: "Let's Import Your Transactions",
+            subject: __("Let's Import Your Transactions"),
         )->from(config('mail.from.address', 'hello@example.com'), 'Victor');
     }
 

app/Mail/Drip/OnboardingReminderEmail.php

@@ -37,7 +37,7 @@ class OnboardingReminderEmail extends Mailable implements ShouldQueue
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: 'Need Help Getting Started?',
+            subject: __('Need Help Getting Started?'),
         )->from(config('mail.from.address', 'hello@example.com'), 'Victor');
     }
 

app/Mail/Drip/PromoCodeEmail.php

@@ -37,7 +37,7 @@ class PromoCodeEmail extends Mailable implements ShouldQueue
     public function envelope(): Envelope
     {
         return (new Envelope(
-            subject: 'Your Founder Discount - 80% Off First Period'
+            subject: __('Your Founder Discount - 80% Off First Period')
         ))->from(config('mail.from.address', 'hello@example.com'), 'Victor');
     }
 

app/Mail/Drip/SubscriptionCancelledEmail.php

@@ -37,7 +37,7 @@ class SubscriptionCancelledEmail extends Mailable implements ShouldQueue
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: "We're sorry to see you go",
+            subject: __("We're sorry to see you go"),
         )->from(config('mail.from.address', 'hello@example.com'), 'Victor');
     }
 

app/Mail/Drip/WelcomeEmail.php

@@ -37,7 +37,7 @@ class WelcomeEmail extends Mailable implements ShouldQueue
     public function envelope(): Envelope
     {
         return new Envelope(
-            subject: 'Welcome to Whisper Money - Your Privacy-First Finance App',
+            subject: __('Welcome to Whisper Money - Your Privacy-First Finance App'),
         )->from(config('mail.from.address', 'hello@example.com'), 'Victor');
     }
 

app/Models/User.php

@@ -5,6 +5,7 @@ namespace App\Models;
 use App\Enums\DripEmailType;
 use App\Notifications\VerifyEmailNotification;
 use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Illuminate\Contracts\Translation\HasLocalePreference;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Concerns\HasUuids;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
@@ -16,7 +17,7 @@ use Laravel\Cashier\Billable;
 use Laravel\Fortify\TwoFactorAuthenticatable;
 use Laravel\Pennant\Concerns\HasFeatures;
 
-class User extends Authenticatable implements MustVerifyEmail
+class User extends Authenticatable implements HasLocalePreference, MustVerifyEmail
 {
     /** @use HasFactory<\Database\Factories\UserFactory> */
     use Billable, HasFactory, HasFeatures, HasUuids, Notifiable, TwoFactorAuthenticatable;
@@ -33,6 +34,7 @@ class User extends Authenticatable implements MustVerifyEmail
         'encryption_salt',
         'onboarded_at',
         'currency_code',
+        'locale',
     ];
 
     /**
@@ -135,6 +137,11 @@ class User extends Authenticatable implements MustVerifyEmail
         return $this->email === config('app.demo.email');
     }
 
+    public function preferredLocale(): string
+    {
+        return $this->locale ?? 'en';
+    }
+
     public function sendEmailVerificationNotification(): void
     {
         $this->notify(new VerifyEmailNotification);

app/Notifications/VerifyEmailNotification.php

@@ -13,7 +13,7 @@ class VerifyEmailNotification extends VerifyEmail
 
         return (new MailMessage)
             ->from(config('mail.from.address', 'hello@example.com'), 'Victor')
-            ->subject('Verify Your Email - Whisper Money')
+            ->subject(__('Verify Your Email - Whisper Money'))
             ->markdown('mail.verify-email', [
                 'userName' => $notifiable->name,
                 'verificationUrl' => $verificationUrl,

bootstrap/app.php

@@ -4,6 +4,7 @@ use App\Http\Middleware\EnsureBudgetsFeature;
 use App\Http\Middleware\EnsureUserIsSubscribed;
 use App\Http\Middleware\HandleAppearance;
 use App\Http\Middleware\HandleInertiaRequests;
+use App\Http\Middleware\SetLocale;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
@@ -30,6 +31,7 @@ return Application::configure(basePath: dirname(__DIR__))
 
         $middleware->web(append: [
             HandleAppearance::class,
+            SetLocale::class,
             HandleInertiaRequests::class,
             AddLinkHeadersForPreloadedAssets::class,
             \App\Http\Middleware\BlockDemoAccountActions::class.':auto',

database/factories/UserFactory.php

@@ -65,6 +65,7 @@ class UserFactory extends Factory
         return $this->state(fn (array $attributes) => [
             'onboarded_at' => now(),
             'encryption_salt' => 'test-salt',
+            'locale' => 'en',
         ]);
     }
 

database/migrations/2026_01_22_143232_add_locale_to_users_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->string('locale', 2)->nullable()->after('currency_code');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('locale');
+        });
+    }
+};

lang/en/auth.php

@@ -0,0 +1,20 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'failed' => 'These credentials do not match our records.',
+    'password' => 'The provided password is incorrect.',
+    'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
+
+];

lang/en/pagination.php

@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Pagination Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used by the paginator library to build
+    | the simple pagination links. You are free to change them to anything
+    | you want to customize your views to better match your application.
+    |
+    */
+
+    'previous' => '&laquo; Previous',
+    'next' => 'Next &raquo;',
+
+];

lang/en/passwords.php

@@ -0,0 +1,22 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reset Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are the default lines which match reasons
+    | that are given by the password broker for a password update attempt
+    | outcome such as failure due to an invalid password / reset token.
+    |
+    */
+
+    'reset' => 'Your password has been reset.',
+    'sent' => 'We have emailed your password reset link.',
+    'throttled' => 'Please wait before retrying.',
+    'token' => 'This password reset token is invalid.',
+    'user' => "We can't find a user with that email address.",
+
+];

lang/en/validation.php

@@ -0,0 +1,200 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines contain the default error messages used by
+    | the validator class. Some of these rules have multiple versions such
+    | as the size rules. Feel free to tweak each of these messages here.
+    |
+    */
+
+    'accepted' => 'The :attribute field must be accepted.',
+    'accepted_if' => 'The :attribute field must be accepted when :other is :value.',
+    'active_url' => 'The :attribute field must be a valid URL.',
+    'after' => 'The :attribute field must be a date after :date.',
+    'after_or_equal' => 'The :attribute field must be a date after or equal to :date.',
+    'alpha' => 'The :attribute field must only contain letters.',
+    'alpha_dash' => 'The :attribute field must only contain letters, numbers, dashes, and underscores.',
+    'alpha_num' => 'The :attribute field must only contain letters and numbers.',
+    'any_of' => 'The :attribute field is invalid.',
+    'array' => 'The :attribute field must be an array.',
+    'ascii' => 'The :attribute field must only contain single-byte alphanumeric characters and symbols.',
+    'before' => 'The :attribute field must be a date before :date.',
+    'before_or_equal' => 'The :attribute field must be a date before or equal to :date.',
+    'between' => [
+        'array' => 'The :attribute field must have between :min and :max items.',
+        'file' => 'The :attribute field must be between :min and :max kilobytes.',
+        'numeric' => 'The :attribute field must be between :min and :max.',
+        'string' => 'The :attribute field must be between :min and :max characters.',
+    ],
+    'boolean' => 'The :attribute field must be true or false.',
+    'can' => 'The :attribute field contains an unauthorized value.',
+    'confirmed' => 'The :attribute field confirmation does not match.',
+    'contains' => 'The :attribute field is missing a required value.',
+    'current_password' => 'The password is incorrect.',
+    'date' => 'The :attribute field must be a valid date.',
+    'date_equals' => 'The :attribute field must be a date equal to :date.',
+    'date_format' => 'The :attribute field must match the format :format.',
+    'decimal' => 'The :attribute field must have :decimal decimal places.',
+    'declined' => 'The :attribute field must be declined.',
+    'declined_if' => 'The :attribute field must be declined when :other is :value.',
+    'different' => 'The :attribute field and :other must be different.',
+    'digits' => 'The :attribute field must be :digits digits.',
+    'digits_between' => 'The :attribute field must be between :min and :max digits.',
+    'dimensions' => 'The :attribute field has invalid image dimensions.',
+    'distinct' => 'The :attribute field has a duplicate value.',
+    'doesnt_contain' => 'The :attribute field must not contain any of the following: :values.',
+    'doesnt_end_with' => 'The :attribute field must not end with one of the following: :values.',
+    'doesnt_start_with' => 'The :attribute field must not start with one of the following: :values.',
+    'email' => 'The :attribute field must be a valid email address.',
+    'encoding' => 'The :attribute field must be encoded in :encoding.',
+    'ends_with' => 'The :attribute field must end with one of the following: :values.',
+    'enum' => 'The selected :attribute is invalid.',
+    'exists' => 'The selected :attribute is invalid.',
+    'extensions' => 'The :attribute field must have one of the following extensions: :values.',
+    'file' => 'The :attribute field must be a file.',
+    'filled' => 'The :attribute field must have a value.',
+    'gt' => [
+        'array' => 'The :attribute field must have more than :value items.',
+        'file' => 'The :attribute field must be greater than :value kilobytes.',
+        'numeric' => 'The :attribute field must be greater than :value.',
+        'string' => 'The :attribute field must be greater than :value characters.',
+    ],
+    'gte' => [
+        'array' => 'The :attribute field must have :value items or more.',
+        'file' => 'The :attribute field must be greater than or equal to :value kilobytes.',
+        'numeric' => 'The :attribute field must be greater than or equal to :value.',
+        'string' => 'The :attribute field must be greater than or equal to :value characters.',
+    ],
+    'hex_color' => 'The :attribute field must be a valid hexadecimal color.',
+    'image' => 'The :attribute field must be an image.',
+    'in' => 'The selected :attribute is invalid.',
+    'in_array' => 'The :attribute field must exist in :other.',
+    'in_array_keys' => 'The :attribute field must contain at least one of the following keys: :values.',
+    'integer' => 'The :attribute field must be an integer.',
+    'ip' => 'The :attribute field must be a valid IP address.',
+    'ipv4' => 'The :attribute field must be a valid IPv4 address.',
+    'ipv6' => 'The :attribute field must be a valid IPv6 address.',
+    'json' => 'The :attribute field must be a valid JSON string.',
+    'list' => 'The :attribute field must be a list.',
+    'lowercase' => 'The :attribute field must be lowercase.',
+    'lt' => [
+        'array' => 'The :attribute field must have less than :value items.',
+        'file' => 'The :attribute field must be less than :value kilobytes.',
+        'numeric' => 'The :attribute field must be less than :value.',
+        'string' => 'The :attribute field must be less than :value characters.',
+    ],
+    'lte' => [
+        'array' => 'The :attribute field must not have more than :value items.',
+        'file' => 'The :attribute field must be less than or equal to :value kilobytes.',
+        'numeric' => 'The :attribute field must be less than or equal to :value.',
+        'string' => 'The :attribute field must be less than or equal to :value characters.',
+    ],
+    'mac_address' => 'The :attribute field must be a valid MAC address.',
+    'max' => [
+        'array' => 'The :attribute field must not have more than :max items.',
+        'file' => 'The :attribute field must not be greater than :max kilobytes.',
+        'numeric' => 'The :attribute field must not be greater than :max.',
+        'string' => 'The :attribute field must not be greater than :max characters.',
+    ],
+    'max_digits' => 'The :attribute field must not have more than :max digits.',
+    'mimes' => 'The :attribute field must be a file of type: :values.',
+    'mimetypes' => 'The :attribute field must be a file of type: :values.',
+    'min' => [
+        'array' => 'The :attribute field must have at least :min items.',
+        'file' => 'The :attribute field must be at least :min kilobytes.',
+        'numeric' => 'The :attribute field must be at least :min.',
+        'string' => 'The :attribute field must be at least :min characters.',
+    ],
+    'min_digits' => 'The :attribute field must have at least :min digits.',
+    'missing' => 'The :attribute field must be missing.',
+    'missing_if' => 'The :attribute field must be missing when :other is :value.',
+    'missing_unless' => 'The :attribute field must be missing unless :other is :value.',
+    'missing_with' => 'The :attribute field must be missing when :values is present.',
+    'missing_with_all' => 'The :attribute field must be missing when :values are present.',
+    'multiple_of' => 'The :attribute field must be a multiple of :value.',
+    'not_in' => 'The selected :attribute is invalid.',
+    'not_regex' => 'The :attribute field format is invalid.',
+    'numeric' => 'The :attribute field must be a number.',
+    'password' => [
+        'letters' => 'The :attribute field must contain at least one letter.',
+        'mixed' => 'The :attribute field must contain at least one uppercase and one lowercase letter.',
+        'numbers' => 'The :attribute field must contain at least one number.',
+        'symbols' => 'The :attribute field must contain at least one symbol.',
+        'uncompromised' => 'The given :attribute has appeared in a data leak. Please choose a different :attribute.',
+    ],
+    'present' => 'The :attribute field must be present.',
+    'present_if' => 'The :attribute field must be present when :other is :value.',
+    'present_unless' => 'The :attribute field must be present unless :other is :value.',
+    'present_with' => 'The :attribute field must be present when :values is present.',
+    'present_with_all' => 'The :attribute field must be present when :values are present.',
+    'prohibited' => 'The :attribute field is prohibited.',
+    'prohibited_if' => 'The :attribute field is prohibited when :other is :value.',
+    'prohibited_if_accepted' => 'The :attribute field is prohibited when :other is accepted.',
+    'prohibited_if_declined' => 'The :attribute field is prohibited when :other is declined.',
+    'prohibited_unless' => 'The :attribute field is prohibited unless :other is in :values.',
+    'prohibits' => 'The :attribute field prohibits :other from being present.',
+    'regex' => 'The :attribute field format is invalid.',
+    'required' => 'The :attribute field is required.',
+    'required_array_keys' => 'The :attribute field must contain entries for: :values.',
+    'required_if' => 'The :attribute field is required when :other is :value.',
+    'required_if_accepted' => 'The :attribute field is required when :other is accepted.',
+    'required_if_declined' => 'The :attribute field is required when :other is declined.',
+    'required_unless' => 'The :attribute field is required unless :other is in :values.',
+    'required_with' => 'The :attribute field is required when :values is present.',
+    'required_with_all' => 'The :attribute field is required when :values are present.',
+    'required_without' => 'The :attribute field is required when :values is not present.',
+    'required_without_all' => 'The :attribute field is required when none of :values are present.',
+    'same' => 'The :attribute field must match :other.',
+    'size' => [
+        'array' => 'The :attribute field must contain :size items.',
+        'file' => 'The :attribute field must be :size kilobytes.',
+        'numeric' => 'The :attribute field must be :size.',
+        'string' => 'The :attribute field must be :size characters.',
+    ],
+    'starts_with' => 'The :attribute field must start with one of the following: :values.',
+    'string' => 'The :attribute field must be a string.',
+    'timezone' => 'The :attribute field must be a valid timezone.',
+    'unique' => 'The :attribute has already been taken.',
+    'uploaded' => 'The :attribute failed to upload.',
+    'uppercase' => 'The :attribute field must be uppercase.',
+    'url' => 'The :attribute field must be a valid URL.',
+    'ulid' => 'The :attribute field must be a valid ULID.',
+    'uuid' => 'The :attribute field must be a valid UUID.',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify custom validation messages for attributes using the
+    | convention "attribute.rule" to name the lines. This makes it quick to
+    | specify a specific custom language line for a given attribute rule.
+    |
+    */
+
+    'custom' => [
+        'attribute-name' => [
+            'rule-name' => 'custom-message',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Attributes
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used to swap our attribute placeholder
+    | with something more reader friendly such as "E-Mail Address" instead
+    | of "email". This simply helps us make our message more expressive.
+    |
+    */
+
+    'attributes' => [],
+
+];

lang/es/auth.php

@@ -0,0 +1,20 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'failed' => 'Estas credenciales no coinciden con nuestros registros.',
+    'password' => 'La contraseña proporcionada es incorrecta.',
+    'throttle' => 'Demasiados intentos de acceso. Por favor intente de nuevo en :seconds segundos.',
+
+];

lang/es/pagination.php

@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Pagination Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used by the paginator library to build
+    | the simple pagination links. You are free to change them to anything
+    | you want to customize your views to better match your application.
+    |
+    */
+
+    'previous' => '&laquo; Anterior',
+    'next' => 'Siguiente &raquo;',
+
+];

lang/es/passwords.php

@@ -0,0 +1,22 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reset Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are the default lines which match reasons
+    | that are given by the password broker for a password update attempt
+    | outcome such as failure due to an invalid password / reset token.
+    |
+    */
+
+    'reset' => 'Tu contraseña ha sido restablecida.',
+    'sent' => 'Te hemos enviado por correo electrónico el enlace para restablecer tu contraseña.',
+    'throttled' => 'Por favor espera antes de intentar de nuevo.',
+    'token' => 'Este token de restablecimiento de contraseña es inválido.',
+    'user' => 'No podemos encontrar un usuario con esa dirección de correo electrónico.',
+
+];

lang/es/validation.php

@@ -0,0 +1,200 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines contain the default error messages used by
+    | the validator class. Some of these rules have multiple versions such
+    | as the size rules. Feel free to tweak each of these messages here.
+    |
+    */
+
+    'accepted' => 'El campo :attribute debe ser aceptado.',
+    'accepted_if' => 'El campo :attribute debe ser aceptado cuando :other sea :value.',
+    'active_url' => 'El campo :attribute debe ser una URL válida.',
+    'after' => 'El campo :attribute debe ser una fecha posterior a :date.',
+    'after_or_equal' => 'El campo :attribute debe ser una fecha posterior o igual a :date.',
+    'alpha' => 'El campo :attribute solo debe contener letras.',
+    'alpha_dash' => 'El campo :attribute solo debe contener letras, números, guiones y guiones bajos.',
+    'alpha_num' => 'El campo :attribute solo debe contener letras y números.',
+    'any_of' => 'El campo :attribute es inválido.',
+    'array' => 'El campo :attribute debe ser un arreglo.',
+    'ascii' => 'El campo :attribute solo debe contener caracteres alfanuméricos y símbolos de un byte.',
+    'before' => 'El campo :attribute debe ser una fecha anterior a :date.',
+    'before_or_equal' => 'El campo :attribute debe ser una fecha anterior o igual a :date.',
+    'between' => [
+        'array' => 'El campo :attribute debe tener entre :min y :max elementos.',
+        'file' => 'El campo :attribute debe tener entre :min y :max kilobytes.',
+        'numeric' => 'El campo :attribute debe estar entre :min y :max.',
+        'string' => 'El campo :attribute debe tener entre :min y :max caracteres.',
+    ],
+    'boolean' => 'El campo :attribute debe ser verdadero o falso.',
+    'can' => 'El campo :attribute contiene un valor no autorizado.',
+    'confirmed' => 'La confirmación del campo :attribute no coincide.',
+    'contains' => 'El campo :attribute falta un valor requerido.',
+    'current_password' => 'La contraseña es incorrecta.',
+    'date' => 'El campo :attribute debe ser una fecha válida.',
+    'date_equals' => 'El campo :attribute debe ser una fecha igual a :date.',
+    'date_format' => 'El campo :attribute debe coincidir con el formato :format.',
+    'decimal' => 'El campo :attribute debe tener :decimal lugares decimales.',
+    'declined' => 'El campo :attribute debe ser rechazado.',
+    'declined_if' => 'El campo :attribute debe ser rechazado cuando :other sea :value.',
+    'different' => 'El campo :attribute y :other deben ser diferentes.',
+    'digits' => 'El campo :attribute debe tener :digits dígitos.',
+    'digits_between' => 'El campo :attribute debe tener entre :min y :max dígitos.',
+    'dimensions' => 'El campo :attribute tiene dimensiones de imagen inválidas.',
+    'distinct' => 'El campo :attribute tiene un valor duplicado.',
+    'doesnt_contain' => 'El campo :attribute no debe contener ninguno de los siguientes: :values.',
+    'doesnt_end_with' => 'El campo :attribute no debe terminar con ninguno de los siguientes: :values.',
+    'doesnt_start_with' => 'El campo :attribute no debe comenzar con ninguno de los siguientes: :values.',
+    'email' => 'El campo :attribute debe ser una dirección de correo electrónico válida.',
+    'encoding' => 'El campo :attribute debe estar codificado en :encoding.',
+    'ends_with' => 'El campo :attribute debe terminar con uno de los siguientes: :values.',
+    'enum' => 'El :attribute seleccionado es inválido.',
+    'exists' => 'El :attribute seleccionado es inválido.',
+    'extensions' => 'El campo :attribute debe tener una de las siguientes extensiones: :values.',
+    'file' => 'El campo :attribute debe ser un archivo.',
+    'filled' => 'El campo :attribute debe tener un valor.',
+    'gt' => [
+        'array' => 'El campo :attribute debe tener más de :value elementos.',
+        'file' => 'El campo :attribute debe ser mayor que :value kilobytes.',
+        'numeric' => 'El campo :attribute debe ser mayor que :value.',
+        'string' => 'El campo :attribute debe ser mayor que :value caracteres.',
+    ],
+    'gte' => [
+        'array' => 'El campo :attribute debe tener :value elementos o más.',
+        'file' => 'El campo :attribute debe ser mayor o igual a :value kilobytes.',
+        'numeric' => 'El campo :attribute debe ser mayor o igual a :value.',
+        'string' => 'El campo :attribute debe ser mayor o igual a :value caracteres.',
+    ],
+    'hex_color' => 'El campo :attribute debe ser un color hexadecimal válido.',
+    'image' => 'El campo :attribute debe ser una imagen.',
+    'in' => 'El :attribute seleccionado es inválido.',
+    'in_array' => 'El campo :attribute debe existir en :other.',
+    'in_array_keys' => 'El campo :attribute debe contener al menos una de las siguientes claves: :values.',
+    'integer' => 'El campo :attribute debe ser un número entero.',
+    'ip' => 'El campo :attribute debe ser una dirección IP válida.',
+    'ipv4' => 'El campo :attribute debe ser una dirección IPv4 válida.',
+    'ipv6' => 'El campo :attribute debe ser una dirección IPv6 válida.',
+    'json' => 'El campo :attribute debe ser una cadena JSON válida.',
+    'list' => 'El campo :attribute debe ser una lista.',
+    'lowercase' => 'El campo :attribute debe estar en minúsculas.',
+    'lt' => [
+        'array' => 'El campo :attribute debe tener menos de :value elementos.',
+        'file' => 'El campo :attribute debe ser menor que :value kilobytes.',
+        'numeric' => 'El campo :attribute debe ser menor que :value.',
+        'string' => 'El campo :attribute debe ser menor que :value caracteres.',
+    ],
+    'lte' => [
+        'array' => 'El campo :attribute no debe tener más de :value elementos.',
+        'file' => 'El campo :attribute debe ser menor o igual a :value kilobytes.',
+        'numeric' => 'El campo :attribute debe ser menor o igual a :value.',
+        'string' => 'El campo :attribute debe ser menor o igual a :value caracteres.',
+    ],
+    'mac_address' => 'El campo :attribute debe ser una dirección MAC válida.',
+    'max' => [
+        'array' => 'El campo :attribute no debe tener más de :max elementos.',
+        'file' => 'El campo :attribute no debe ser mayor que :max kilobytes.',
+        'numeric' => 'El campo :attribute no debe ser mayor que :max.',
+        'string' => 'El campo :attribute no debe ser mayor que :max caracteres.',
+    ],
+    'max_digits' => 'El campo :attribute no debe tener más de :max dígitos.',
+    'mimes' => 'El campo :attribute debe ser un archivo de tipo: :values.',
+    'mimetypes' => 'El campo :attribute debe ser un archivo de tipo: :values.',
+    'min' => [
+        'array' => 'El campo :attribute debe tener al menos :min elementos.',
+        'file' => 'El campo :attribute debe tener al menos :min kilobytes.',
+        'numeric' => 'El campo :attribute debe ser al menos :min.',
+        'string' => 'El campo :attribute debe tener al menos :min caracteres.',
+    ],
+    'min_digits' => 'El campo :attribute debe tener al menos :min dígitos.',
+    'missing' => 'El campo :attribute debe estar ausente.',
+    'missing_if' => 'El campo :attribute debe estar ausente cuando :other sea :value.',
+    'missing_unless' => 'El campo :attribute debe estar ausente a menos que :other sea :value.',
+    'missing_with' => 'El campo :attribute debe estar ausente cuando :values esté presente.',
+    'missing_with_all' => 'El campo :attribute debe estar ausente cuando :values estén presentes.',
+    'multiple_of' => 'El campo :attribute debe ser un múltiplo de :value.',
+    'not_in' => 'El :attribute seleccionado es inválido.',
+    'not_regex' => 'El formato del campo :attribute es inválido.',
+    'numeric' => 'El campo :attribute debe ser un número.',
+    'password' => [
+        'letters' => 'El campo :attribute debe contener al menos una letra.',
+        'mixed' => 'El campo :attribute debe contener al menos una letra mayúscula y una minúscula.',
+        'numbers' => 'El campo :attribute debe contener al menos un número.',
+        'symbols' => 'El campo :attribute debe contener al menos un símbolo.',
+        'uncompromised' => 'El :attribute proporcionado ha aparecido en una filtración de datos. Por favor elige un :attribute diferente.',
+    ],
+    'present' => 'El campo :attribute debe estar presente.',
+    'present_if' => 'El campo :attribute debe estar presente cuando :other sea :value.',
+    'present_unless' => 'El campo :attribute debe estar presente a menos que :other sea :value.',
+    'present_with' => 'El campo :attribute debe estar presente cuando :values esté presente.',
+    'present_with_all' => 'El campo :attribute debe estar presente cuando :values estén presentes.',
+    'prohibited' => 'El campo :attribute está prohibido.',
+    'prohibited_if' => 'El campo :attribute está prohibido cuando :other sea :value.',
+    'prohibited_if_accepted' => 'El campo :attribute está prohibido cuando :other sea aceptado.',
+    'prohibited_if_declined' => 'El campo :attribute está prohibido cuando :other sea rechazado.',
+    'prohibited_unless' => 'El campo :attribute está prohibido a menos que :other esté en :values.',
+    'prohibits' => 'El campo :attribute prohíbe que :other esté presente.',
+    'regex' => 'El formato del campo :attribute es inválido.',
+    'required' => 'El campo :attribute es obligatorio.',
+    'required_array_keys' => 'El campo :attribute debe contener entradas para: :values.',
+    'required_if' => 'El campo :attribute es obligatorio cuando :other sea :value.',
+    'required_if_accepted' => 'El campo :attribute es obligatorio cuando :other sea aceptado.',
+    'required_if_declined' => 'El campo :attribute es obligatorio cuando :other sea rechazado.',
+    'required_unless' => 'El campo :attribute es obligatorio a menos que :other esté en :values.',
+    'required_with' => 'El campo :attribute es obligatorio cuando :values esté presente.',
+    'required_with_all' => 'El campo :attribute es obligatorio cuando :values estén presentes.',
+    'required_without' => 'El campo :attribute es obligatorio cuando :values no esté presente.',
+    'required_without_all' => 'El campo :attribute es obligatorio cuando ninguno de :values esté presente.',
+    'same' => 'El campo :attribute debe coincidir con :other.',
+    'size' => [
+        'array' => 'El campo :attribute debe contener :size elementos.',
+        'file' => 'El campo :attribute debe tener :size kilobytes.',
+        'numeric' => 'El campo :attribute debe ser :size.',
+        'string' => 'El campo :attribute debe tener :size caracteres.',
+    ],
+    'starts_with' => 'El campo :attribute debe comenzar con uno de los siguientes: :values.',
+    'string' => 'El campo :attribute debe ser una cadena de texto.',
+    'timezone' => 'El campo :attribute debe ser una zona horaria válida.',
+    'unique' => 'El :attribute ya ha sido tomado.',
+    'uploaded' => 'El :attribute falló al subirse.',
+    'uppercase' => 'El campo :attribute debe estar en mayúsculas.',
+    'url' => 'El campo :attribute debe ser una URL válida.',
+    'ulid' => 'El campo :attribute debe ser un ULID válido.',
+    'uuid' => 'El campo :attribute debe ser un UUID válido.',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify custom validation messages for attributes using the
+    | convention "attribute.rule" to name the lines. This makes it quick to
+    | specify a specific custom language line for a given attribute rule.
+    |
+    */
+
+    'custom' => [
+        'attribute-name' => [
+            'rule-name' => 'custom-message',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Attributes
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used to swap our attribute placeholder
+    | with something more reader friendly such as "E-Mail Address" instead
+    | of "email". This simply helps us make our message more expressive.
+    |
+    */
+
+    'attributes' => [],
+
+];

phpunit.xml

@@ -33,5 +33,6 @@
         <env name="PULSE_ENABLED" value="false"/>
         <env name="TELESCOPE_ENABLED" value="false"/>
         <env name="NIGHTWATCH_ENABLED" value="false"/>
+        <env name="EMAIL_VERIFICATION_ENABLED" value="true"/>
     </php>
 </phpunit>

resources/js/app.tsx

@@ -1,6 +1,6 @@
 import '../css/app.css';
 
-import { createInertiaApp } from '@inertiajs/react';
+import { createInertiaApp, router } from '@inertiajs/react';
 import * as Sentry from '@sentry/react';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import {
@@ -19,6 +19,7 @@ import { SyncProvider } from './contexts/sync-context';
 import { initializeTheme } from './hooks/use-appearance';
 import { initializePostHog } from './lib/posthog';
 import type { SharedData } from './types';
+import { setTranslations } from './utils/i18n';
 
 Sentry.init({
     dsn: 'https://47f7a823afae4c2f93ab3159ca7c0a3a@bugsink.whisper.money/2',
@@ -56,6 +57,19 @@ createInertiaApp({
         const initialUser = initialPageProps?.auth?.user ?? null;
         const initialIsAuthenticated = Boolean(initialUser);
 
+        // Initialize translations from server-rendered page data
+        setTranslations(
+            (initialPageProps?.translations as Record<string, string>) ?? {},
+        );
+
+        // Keep translations in sync on every Inertia navigation
+        router.on('navigate', (event) => {
+            const pageProps = event.detail.page.props as SharedData;
+            setTranslations(
+                (pageProps?.translations as Record<string, string>) ?? {},
+            );
+        });
+
         root.render(
             <StrictMode>
                 <EncryptionKeyProvider>

resources/js/components/accounts/account-balance-chart.tsx

@@ -23,7 +23,10 @@ import {
     convertSingleAccountData,
     useChartViews,
 } from '@/hooks/use-chart-views';
+import { useLocale } from '@/hooks/use-locale';
 import { Account } from '@/types/account';
+import { formatMonthFromYearMonth } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 import { format, subMonths } from 'date-fns';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Bar, BarChart, XAxis } from 'recharts';
@@ -52,21 +55,18 @@ interface AccountBalanceChartProps {
     onBalanceClick?: () => void;
 }
 
-function formatXAxisLabel(value: string): string {
+function createXAxisFormatter(locale: string) {
-    const [year, month] = value.split('-');
+    return function formatXAxisLabel(value: string): string {
-    const date = new Date(parseInt(year), parseInt(month) - 1);
+        return formatMonthFromYearMonth(value, locale);
-    const monthName = date.toLocaleString('en-US', { month: 'short' });
+    };
-    const currentYear = new Date().getFullYear();
-
-    if (parseInt(year) === currentYear) {
-        return monthName;
-    }
-
-    return `${monthName} ${year.slice(-2)}`;
 }
 
-function formatCurrency(value: number, currencyCode: string): string {
+function formatChartCurrency(
-    return new Intl.NumberFormat('en-US', {
+    value: number,
+    currencyCode: string,
+    locale: string,
+): string {
+    return new Intl.NumberFormat(locale, {
         style: 'currency',
         currency: currencyCode,
         minimumFractionDigits: 0,
@@ -104,6 +104,7 @@ export function AccountBalanceChart({
     refreshKey,
     onBalanceClick,
 }: AccountBalanceChartProps) {
+    const locale = useLocale();
     const [balanceData, setBalanceData] = useState<AccountBalanceData | null>(
         null,
     );
@@ -181,12 +182,18 @@ export function AccountBalanceChart({
                     length={{ min: 5, max: 20 }}
                 />
             ),
+
             color: 'var(--color-chart-2)',
         },
     };
 
+    const formatXAxisLabel = useMemo(
+        () => createXAxisFormatter(locale),
+        [locale],
+    );
+
     const valueFormatter = (value: number): string => {
-        return formatCurrency(value, account.currency_code);
+        return formatChartCurrency(value, account.currency_code, locale);
     };
 
     const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -204,7 +211,7 @@ export function AccountBalanceChart({
         return (
             <Card>
                 <CardHeader>
-                    <CardTitle>Balance evolution</CardTitle>
+                    <CardTitle>{__('Balance evolution')}</CardTitle>
                     <CardDescription>
                         <div className="h-4 w-48 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
                     </CardDescription>
@@ -220,11 +227,11 @@ export function AccountBalanceChart({
         return (
             <Card>
                 <CardHeader>
-                    <CardTitle>Balance evolution</CardTitle>
+                    <CardTitle>{__('Balance evolution')}</CardTitle>
                 </CardHeader>
                 <CardContent>
                     <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-                        No balance data available
+                        {__('No balance data available')}
                     </div>
                 </CardContent>
             </Card>
@@ -236,7 +243,7 @@ export function AccountBalanceChart({
             <CardHeader>
                 <div className="flex flex-row items-start justify-between">
                     <div className="flex flex-col gap-1 sm:gap-2">
-                        <CardTitle>Balance evolution</CardTitle>
+                        <CardTitle>{__('Balance evolution')}</CardTitle>
                         <button
                             type="button"
                             onClick={onBalanceClick}
@@ -252,14 +259,15 @@ export function AccountBalanceChart({
                         <CardDescription className="flex flex-col gap-1 text-sm">
                             <PercentageTrendIndicator
                                 trend={monthlyTrend?.percentage ?? null}
-                                label="this month"
+                                label={__('this month')}
                                 previousAmount={monthlyTrend?.previousValue}
                                 currentAmount={monthlyTrend?.currentValue}
                                 currencyCode={account.currency_code}
                             />
+
                             <PercentageTrendIndicator
                                 trend={yearlyTrend?.percentage ?? null}
-                                label="for the last 12 months"
+                                label={__('for the last 12 months')}
                                 previousAmount={yearlyTrend?.previousValue}
                                 currentAmount={yearlyTrend?.currentValue}
                                 currencyCode={account.currency_code}
@@ -295,6 +303,7 @@ export function AccountBalanceChart({
                                     axisLine={false}
                                     tickFormatter={formatXAxisLabel}
                                 />
+
                                 <ChartTooltip
                                     content={
                                         <ChartTooltipContent
@@ -303,6 +312,7 @@ export function AccountBalanceChart({
                                         />
                                     }
                                 />
+
                                 <Bar
                                     dataKey="value"
                                     fill="var(--color-chart-2)"

resources/js/components/accounts/account-form.tsx

@@ -15,6 +15,7 @@ import {
     type Bank,
     type CurrencyCode,
 } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { useCallback, useEffect, useState } from 'react';
 import { BankCombobox } from './bank-combobox';
 import { CustomBankData, CustomBankForm } from './custom-bank-form';
@@ -112,20 +113,20 @@ export function AccountForm({
     return (
         <>
             <div className="space-y-2">
-                <Label htmlFor="display_name">Name</Label>
+                <Label htmlFor="display_name">{__('Name')}</Label>
                 <Input
                     id="display_name"
                     className="mt-1"
                     name="display_name"
                     value={displayName}
                     onChange={(e) => setDisplayName(e.target.value)}
-                    placeholder="Account name"
+                    placeholder={__('Account name')}
                     required
                 />
             </div>
 
             <div className="space-y-2">
-                <Label htmlFor="bank_id">Bank</Label>
+                <Label htmlFor="bank_id">{__('Bank')}</Label>
                 <div className="mt-1">
                     {isCreatingCustomBank ? (
                         <CustomBankForm
@@ -142,6 +143,7 @@ export function AccountForm({
                                 value={selectedBankId ?? ''}
                                 required
                             />
+
                             <BankCombobox
                                 value={selectedBankId}
                                 onValueChange={setSelectedBankId}
@@ -154,7 +156,7 @@ export function AccountForm({
             </div>
 
             <div className="space-y-2">
-                <Label htmlFor="type">Account Type</Label>
+                <Label htmlFor="type">{__('Account Type')}</Label>
                 <div className="mt-1">
                     <Select
                         name="type"
@@ -166,7 +168,9 @@ export function AccountForm({
                         required
                     >
                         <SelectTrigger name="type">
-                            <SelectValue placeholder="Select account type" />
+                            <SelectValue
+                                placeholder={__('Select account type')}
+                            />
                         </SelectTrigger>
                         <SelectContent>
                             {ACCOUNT_TYPES.map((type) => (
@@ -180,14 +184,15 @@ export function AccountForm({
                 {(selectedType === 'investment' ||
                     selectedType === 'retirement') && (
                     <p className="pl-1 text-xs text-muted-foreground">
-                        This account type is for balance tracking only and
+                        {__(
-                        doesn't support transactions.
+                            "This account type is for balance tracking only and\n                        doesn't support transactions.",
+                        )}
                     </p>
                 )}
             </div>
 
             <div className="space-y-2">
-                <Label htmlFor="currency_code">Currency</Label>
+                <Label htmlFor="currency_code">{__('Currency')}</Label>
                 <div className="mt-1">
                     <Select
                         name="currency_code"
@@ -198,7 +203,7 @@ export function AccountForm({
                         required
                     >
                         <SelectTrigger name="currency_code">
-                            <SelectValue placeholder="Select currency" />
+                            <SelectValue placeholder={__('Select currency')} />
                         </SelectTrigger>
                         <SelectContent>
                             {CURRENCY_OPTIONS.map((currency) => (

resources/js/components/accounts/account-list-card.tsx

@@ -4,6 +4,7 @@ import { EncryptedText } from '@/components/encrypted-text';
 import { AmountDisplay } from '@/components/ui/amount-display';
 import { Card, CardContent } from '@/components/ui/card';
 import { AccountWithMetrics } from '@/hooks/use-dashboard-data';
+import { __ } from '@/utils/i18n';
 import { Link } from '@inertiajs/react';
 import { useState } from 'react';
 import { Line, LineChart, ResponsiveContainer, Tooltip } from 'recharts';
@@ -108,7 +109,7 @@ export function AccountListCard({
                             <AmountTrendIndicator
                                 isPositive={isPositive}
                                 trend={Math.abs(account.diff)}
-                                label="vs last month"
+                                label={__('vs last month')}
                                 className="text-sm"
                                 previousAmount={account.previousBalance}
                                 currentAmount={account.currentBalance}
@@ -147,6 +148,7 @@ export function AccountListCard({
                                         );
                                     }}
                                 />
+
                                 <Line
                                     type="monotone"
                                     dataKey="value"
@@ -163,12 +165,12 @@ export function AccountListCard({
                             variant="secondary"
                             onClick={() => setUpdateBalanceOpen(true)}
                         >
-                            Update balance
+                            {__('Update balance')}
                         </Button>
 
                         <Link href={show.url(account.id)}>
                             <Button className="cursor-pointer" variant="ghost">
-                                Details &rarr;
+                                {__('Details')} &rarr;
                             </Button>
                         </Link>
                     </div>

resources/js/components/accounts/balances-modal.tsx

@@ -34,6 +34,7 @@ import {
     TableRow,
 } from '@/components/ui/table';
 import type { Account, AccountBalance } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { Pencil, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -218,9 +219,11 @@ export function BalancesModal({
             <Dialog open={open} onOpenChange={onOpenChange}>
                 <DialogContent className="sm:max-w-[600px]">
                     <DialogHeader>
-                        <DialogTitle>Balance History</DialogTitle>
+                        <DialogTitle>{__('Balance History')}</DialogTitle>
                         <DialogDescription>
-                            View and manage balance records for this account.
+                            {__(
+                                'View and manage balance records for this account.',
+                            )}
                         </DialogDescription>
                     </DialogHeader>
 
@@ -235,12 +238,12 @@ export function BalancesModal({
                             <Table>
                                 <TableHeader className="sticky top-0 z-10 bg-background">
                                     <TableRow>
-                                        <TableHead>Date</TableHead>
+                                        <TableHead>{__('Date')}</TableHead>
                                         <TableHead className="text-right">
-                                            Balance
+                                            {__('Balance')}
                                         </TableHead>
                                         <TableHead className="w-[100px] text-right">
-                                            Actions
+                                            {__('Actions')}
                                         </TableHead>
                                     </TableRow>
                                 </TableHeader>
@@ -251,7 +254,7 @@ export function BalancesModal({
                                                 colSpan={3}
                                                 className="h-24 text-center"
                                             >
-                                                Loading...
+                                                {__('Loading...')}
                                             </TableCell>
                                         </TableRow>
                                     ) : balances.length === 0 ? (
@@ -260,7 +263,9 @@ export function BalancesModal({
                                                 colSpan={3}
                                                 className="h-24 text-center"
                                             >
-                                                No balance records found.
+                                                {__(
+                                                    'No balance records found.',
+                                                )}
                                             </TableCell>
                                         </TableRow>
                                     ) : (
@@ -313,7 +318,10 @@ export function BalancesModal({
                     {lastPage > 1 && (
                         <div className="flex items-center justify-between">
                             <span className="text-sm text-muted-foreground">
-                                {total} balance record{total !== 1 ? 's' : ''}
+                                {total}{' '}
+                                {total === 1
+                                    ? __('balance record')
+                                    : __('balance records')}
                             </span>
                             <div className="flex items-center gap-2">
                                 <Button
@@ -324,10 +332,11 @@ export function BalancesModal({
                                     }
                                     disabled={currentPage <= 1 || isLoading}
                                 >
-                                    Previous
+                                    {__('Previous')}
                                 </Button>
                                 <span className="text-sm">
-                                    Page {currentPage} of {lastPage}
+                                    {__('Page')} {currentPage} {__('of')}{' '}
+                                    {lastPage}
                                 </span>
                                 <Button
                                     variant="outline"
@@ -339,7 +348,7 @@ export function BalancesModal({
                                         currentPage >= lastPage || isLoading
                                     }
                                 >
-                                    Next
+                                    {__('Next')}
                                 </Button>
                             </div>
                         </div>
@@ -353,15 +362,15 @@ export function BalancesModal({
             >
                 <DialogContent className="sm:max-w-[400px]">
                     <DialogHeader>
-                        <DialogTitle>Edit Balance</DialogTitle>
+                        <DialogTitle>{__('Edit Balance')}</DialogTitle>
                         <DialogDescription>
-                            Update the balance record.
+                            {__('Update the balance record.')}
                         </DialogDescription>
                     </DialogHeader>
 
                     <form onSubmit={handleEditSubmit} className="space-y-4">
                         <div className="space-y-2">
-                            <Label htmlFor="edit-amount">Balance</Label>
+                            <Label htmlFor="edit-amount">{__('Balance')}</Label>
                             <AmountInput
                                 id="edit-amount"
                                 className="mt-1"
@@ -373,7 +382,7 @@ export function BalancesModal({
                         </div>
 
                         <div className="space-y-2">
-                            <Label htmlFor="edit-date">Date</Label>
+                            <Label htmlFor="edit-date">{__('Date')}</Label>
                             <Input
                                 id="edit-date"
                                 className="mt-1"
@@ -391,10 +400,12 @@ export function BalancesModal({
                                 onClick={() => setEditingBalance(null)}
                                 disabled={isEditSubmitting}
                             >
-                                Cancel
+                                {__('Cancel')}
                             </Button>
                             <Button type="submit" disabled={isEditSubmitting}>
-                                {isEditSubmitting ? 'Saving...' : 'Save'}
+                                {isEditSubmitting
+                                    ? __('Saving...')
+                                    : __('Save')}
                             </Button>
                         </DialogFooter>
                     </form>
@@ -407,22 +418,25 @@ export function BalancesModal({
             >
                 <AlertDialogContent>
                     <AlertDialogHeader>
-                        <AlertDialogTitle>Delete balance</AlertDialogTitle>
+                        <AlertDialogTitle>
+                            {__('Delete balance')}
+                        </AlertDialogTitle>
                         <AlertDialogDescription>
-                            Are you sure you want to delete this balance record?
+                            {__(
-                            This action cannot be undone.
+                                'Are you sure you want to delete this balance record? This action cannot be undone.',
+                            )}
                         </AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>
                         <AlertDialogCancel disabled={isDeleting}>
-                            Cancel
+                            {__('Cancel')}
                         </AlertDialogCancel>
                         <AlertDialogAction
                             variant={'destructive'}
                             onClick={handleDelete}
                             disabled={isDeleting}
                         >
-                            {isDeleting ? 'Deleting...' : 'Delete'}
+                            {isDeleting ? __('Deleting...') : __('Delete')}
                         </AlertDialogAction>
                     </AlertDialogFooter>
                 </AlertDialogContent>

resources/js/components/accounts/bank-combobox.tsx

@@ -16,6 +16,7 @@ import {
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
 import { type Bank } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { Check, ChevronsUpDown, Plus } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -121,7 +122,7 @@ export function BankCombobox({
                             <span>{selectedBank.name}</span>
                         </div>
                     ) : (
-                        'Select bank...'
+                        __('Select bank...')
                     )}
                     <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                 </Button>
@@ -132,17 +133,18 @@ export function BankCombobox({
             >
                 <Command filter={() => 1}>
                     <CommandInput
-                        placeholder="Search bank..."
+                        placeholder={__('Search bank...')}
                         value={searchQuery}
                         onValueChange={setSearchQuery}
                     />
+
                     <CommandList>
                         <CommandEmpty>
                             {isLoading
-                                ? 'Searching...'
+                                ? __('Searching...')
                                 : searchQuery.length < 3
-                                  ? 'Type at least 3 characters to search'
+                                  ? __('Type at least 3 characters to search')
-                                  : 'No bank found.'}
+                                  : __('No bank found.')}
                         </CommandEmpty>
                         <CommandGroup>
                             {banks.map((bank) => (
@@ -190,7 +192,8 @@ export function BankCombobox({
                                         >
                                             <Plus className="mr-2 h-4 w-4" />
                                             <span>
-                                                Create &quot;{searchQuery}&quot;
+                                                {__('Create "')}
+                                                {searchQuery}&quot;
                                             </span>
                                         </CommandItem>
                                     </CommandGroup>

resources/js/components/accounts/create-account-dialog.tsx

@@ -17,6 +17,7 @@ import {
 } from '@/components/ui/tooltip';
 import { encrypt, importKey } from '@/lib/crypto';
 import { getStoredKey } from '@/lib/key-storage';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { AccountForm, AccountFormData } from './account-form';
@@ -163,7 +164,7 @@ export function CreateAccountDialog({ onSuccess }: { onSuccess?: () => void }) {
     }
 
     const createButton = (
-        <Button disabled={!isKeyAvailable}>Create Account</Button>
+        <Button disabled={!isKeyAvailable}>{__('Create Account')}</Button>
     );
 
     return (
@@ -189,9 +190,11 @@ export function CreateAccountDialog({ onSuccess }: { onSuccess?: () => void }) {
             </DialogTrigger>
             <DialogContent hasKeyboard className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Create Account</DialogTitle>
+                    <DialogTitle>{__('Create Account')}</DialogTitle>
                     <DialogDescription>
-                        Add a new bank account to track your transactions.
+                        {__(
+                            'Add a new bank account to track your transactions.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <form onSubmit={handleSubmit} className="space-y-2">
@@ -204,7 +207,7 @@ export function CreateAccountDialog({ onSuccess }: { onSuccess?: () => void }) {
                             onClick={() => setOpen(false)}
                             disabled={isSubmitting}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"

resources/js/components/accounts/custom-bank-form.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { __ } from '@/utils/i18n';
 import { ImagePlus, X } from 'lucide-react';
 import { useCallback, useRef, useState } from 'react';
 
@@ -112,10 +113,10 @@ export function CustomBankForm({
 
             <div className="mt-1 space-y-2 rounded-sm border border-border p-3">
                 <div className="space-y-2">
-                    <Label htmlFor="bank_name">Bank name</Label>
+                    <Label htmlFor="bank_name">{__('Bank name')}</Label>
                     <Input
                         id="bank_name"
-                        placeholder="Bank name"
+                        placeholder={__('Bank name')}
                         defaultValue={defaultName}
                         value={value.name}
                         className="mt-1"
@@ -125,7 +126,7 @@ export function CustomBankForm({
                 </div>
 
                 <div className="space-y-2">
-                    <Label htmlFor="bank_logo">Logo</Label>
+                    <Label htmlFor="bank_logo">{__('Logo')}</Label>
                     <div className="mt-1 flex items-center gap-2">
                         <Input
                             ref={fileInputRef}
@@ -134,6 +135,7 @@ export function CustomBankForm({
                             accept="image/png,image/jpeg,image/webp"
                             onChange={handleFileChange}
                         />
+
                         <button
                             type="button"
                             onClick={() => fileInputRef.current?.click()}
@@ -142,7 +144,7 @@ export function CustomBankForm({
                             {value.logoPreview ? (
                                 <img
                                     src={value.logoPreview}
-                                    alt="Bank logo preview"
+                                    alt={__('Bank logo preview')}
                                     className="size-5 rounded-full object-contain"
                                 />
                             ) : (
@@ -152,8 +154,11 @@ export function CustomBankForm({
                     </div>
                     <div className="text-xs text-muted-foreground">
                         <p>
-                            Square images only (max {MAX_DIMENSIONS}x
+                            {__('Square images only (max')}
-                            {MAX_DIMENSIONS}px) / {MAX_FILE_SIZE / 1024}KB max.
+                            {MAX_DIMENSIONS}x{MAX_DIMENSIONS}
+                            {__('px) /')}
+                            {MAX_FILE_SIZE / 1024}
+                            {__('KB max.')}
                         </p>
                     </div>
                     {error && (

resources/js/components/accounts/delete-account-dialog.tsx

@@ -11,6 +11,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { type Account } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { Form, router } from '@inertiajs/react';
 import { useState } from 'react';
 
@@ -44,28 +45,30 @@ export function DeleteAccountDialog({
         <Dialog open={open} onOpenChange={handleOpenChange}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Delete Account</DialogTitle>
+                    <DialogTitle>{__('Delete Account')}</DialogTitle>
                     <DialogDescription className="space-y-2">
                         <p>
-                            This action is irreversible. All transactions in
+                            {__(
-                            this account will also be permanently deleted.
+                                'This action is irreversible. All transactions in\n                            this account will also be permanently deleted.',
+                            )}
                         </p>
                         <p className="font-semibold">
-                            Type <span className="text-red-600">DELETE</span> to
+                            {__('Type')}
-                            confirm.
+                            <span className="text-red-600">DELETE</span>
+                            {__('to\n                            confirm.')}
                         </p>
                     </DialogDescription>
                 </DialogHeader>
 
                 <div className="space-y-4">
                     <div className="space-y-2">
-                        <Label htmlFor="confirm">Confirmation</Label>
+                        <Label htmlFor="confirm">{__('Confirmation')}</Label>
                         <Input
                             id="confirm"
                             className="mt-1"
                             value={confirmText}
                             onChange={(e) => setConfirmText(e.target.value)}
-                            placeholder="Type DELETE"
+                            placeholder={__('Type DELETE')}
                             autoComplete="off"
                         />
                     </div>
@@ -89,7 +92,7 @@ export function DeleteAccountDialog({
                                     onClick={() => handleOpenChange(false)}
                                     disabled={processing}
                                 >
-                                    Cancel
+                                    {__('Cancel')}
                                 </Button>
                                 <Button
                                     type="submit"

resources/js/components/accounts/edit-account-dialog.tsx

@@ -11,6 +11,7 @@ import {
 import { decrypt, encrypt, importKey } from '@/lib/crypto';
 import { getStoredKey } from '@/lib/key-storage';
 import type { Account } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AccountForm, AccountFormData } from './account-form';
@@ -202,9 +203,9 @@ export function EditAccountDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent hasKeyboard className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Edit Account</DialogTitle>
+                    <DialogTitle>{__('Edit Account')}</DialogTitle>
                     <DialogDescription>
-                        Update the account information.
+                        {__('Update the account information.')}
                     </DialogDescription>
                 </DialogHeader>
                 <form onSubmit={handleSubmit} className="space-y-2">
@@ -229,7 +230,7 @@ export function EditAccountDialog({
                             onClick={() => onOpenChange(false)}
                             disabled={isSubmitting}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"

resources/js/components/accounts/import-balances-drawer.tsx

@@ -27,6 +27,7 @@ import {
 } from '@/types/balance-import';
 import { DateFormat } from '@/types/import';
 import type { UUID } from '@/types/uuid';
+import { __ } from '@/utils/i18n';
 import { Check } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
@@ -155,6 +156,7 @@ export function ImportBalancesDrawer({
             'balance_date',
             'f. valor',
         ];
+
         const balancePatterns = [
             'balance',
             'saldo',
@@ -554,6 +556,7 @@ export function ImportBalancesDrawer({
                         onNext={() => moveToStep(BalanceImportStep.UploadFile)}
                     />
                 );
+
             case BalanceImportStep.UploadFile:
                 return (
                     <ImportBalanceStepUpload
@@ -563,6 +566,7 @@ export function ImportBalancesDrawer({
                         onBack={handleBack}
                     />
                 );
+
             case BalanceImportStep.MapColumns:
                 return (
                     <ImportBalanceStepMapping
@@ -578,6 +582,7 @@ export function ImportBalancesDrawer({
                         onBack={handleBack}
                     />
                 );
+
             case BalanceImportStep.Preview:
                 return (
                     <ImportBalanceStepPreview
@@ -588,6 +593,7 @@ export function ImportBalancesDrawer({
                         isImporting={isImporting}
                     />
                 );
+
             default:
                 return null;
         }
@@ -602,7 +608,8 @@ export function ImportBalancesDrawer({
                 <div className="space-y-4">
                     <div className="flex items-center justify-between text-sm text-muted-foreground">
                         <span>
-                            {importProgress} of {importTotal} balances imported
+                            {importProgress} of {importTotal}
+                            {__('balances imported')}
                         </span>
                         <span>{Math.round(percentage)}%</span>
                     </div>
@@ -613,7 +620,8 @@ export function ImportBalancesDrawer({
                     <div className="space-y-3">
                         <div className="flex items-center justify-between">
                             <h3 className="text-sm font-medium text-destructive">
-                                Errors ({importErrors.length})
+                                {__('Errors (')}
+                                {importErrors.length})
                             </h3>
                         </div>
                         <div className="max-h-[300px] overflow-y-auto rounded-lg border">
@@ -621,16 +629,16 @@ export function ImportBalancesDrawer({
                                 <thead className="sticky top-0 bg-muted">
                                     <tr className="border-b">
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Row
+                                            {__('Row')}
                                         </th>
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Date
+                                            {__('Date')}
                                         </th>
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Balance
+                                            {__('Balance')}
                                         </th>
                                         <th className="px-4 py-2 text-left font-medium">
-                                            Error
+                                            {__('Error')}
                                         </th>
                                     </tr>
                                 </thead>

resources/js/components/accounts/import-balances/import-balance-step-account.tsx

@@ -4,6 +4,7 @@ import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { type Account } from '@/types/account';
 import type { UUID } from '@/types/uuid';
+import { __ } from '@/utils/i18n';
 import { Building2 } from 'lucide-react';
 
 interface ImportBalanceStepAccountProps {
@@ -23,7 +24,7 @@ export function ImportBalanceStepAccount({
         return (
             <div className="flex flex-col items-center justify-center py-8 text-center">
                 <p className="text-sm text-muted-foreground">
-                    No accounts found. Please create an account first.
+                    {__('No accounts found. Please create an account first.')}
                 </p>
             </div>
         );
@@ -46,6 +47,7 @@ export function ImportBalanceStepAccount({
                                 value={account.id}
                                 id={`account-${account.id}`}
                             />
+
                             {account.bank.logo ? (
                                 <img
                                     src={account.bank.logo}
@@ -77,7 +79,7 @@ export function ImportBalanceStepAccount({
 
             <div className="flex justify-end">
                 <Button onClick={onNext} disabled={!selectedAccountId}>
-                    Next
+                    {__('Next')}
                 </Button>
             </div>
         </div>

resources/js/components/accounts/import-balances/import-balance-step-mapping.tsx

@@ -15,6 +15,7 @@ import type {
     ParsedRow,
 } from '@/types/balance-import';
 import { DateFormat } from '@/types/import';
+import { __ } from '@/utils/i18n';
 
 interface ImportBalanceStepMappingProps {
     columnOptions: ColumnOption[];
@@ -77,7 +78,8 @@ export function ImportBalanceStepMapping({
             <div className="space-y-4">
                 <div className="space-y-2">
                     <Label htmlFor="date-column">
-                        Balance Date <span className="text-destructive">*</span>
+                        {__('Balance Date')}
+                        <span className="text-destructive">*</span>
                     </Label>
                     <Select
                         value={columnMapping.balance_date || ''}
@@ -86,7 +88,9 @@ export function ImportBalanceStepMapping({
                         }
                     >
                         <SelectTrigger id="date-column">
-                            <SelectValue placeholder="Select date column" />
+                            <SelectValue
+                                placeholder={__('Select date column')}
+                            />
                         </SelectTrigger>
                         <SelectContent>
                             {columnOptions.map((option, index) => (
@@ -105,7 +109,8 @@ export function ImportBalanceStepMapping({
 
                 <div className="space-y-2">
                     <Label htmlFor="balance-column">
-                        Balance <span className="text-destructive">*</span>
+                        {__('Balance')}
+                        <span className="text-destructive">*</span>
                     </Label>
                     <Select
                         value={columnMapping.balance || ''}
@@ -114,7 +119,9 @@ export function ImportBalanceStepMapping({
                         }
                     >
                         <SelectTrigger id="balance-column">
-                            <SelectValue placeholder="Select balance column" />
+                            <SelectValue
+                                placeholder={__('Select balance column')}
+                            />
                         </SelectTrigger>
                         <SelectContent>
                             {columnOptions.map((option, index) => (
@@ -132,7 +139,7 @@ export function ImportBalanceStepMapping({
                 {isValid && previewBalances.length > 0 && (
                     <div className="space-y-4 rounded-lg border bg-muted/30 p-4">
                         <Label className="pl-2 text-xs font-light tracking-widest uppercase opacity-50">
-                            Preview (first 3 rows)
+                            {__('Preview (first 3 rows)')}
                         </Label>
                         <div className="space-y-2 pt-2">
                             {previewBalances.map((balance, index) => (
@@ -154,7 +161,7 @@ export function ImportBalanceStepMapping({
 
                 {!dateFormatDetected && (
                     <div className="space-y-3 rounded-lg border p-4">
-                        <Label>Date Format</Label>
+                        <Label>{__('Date Format')}</Label>
                         <RadioGroup
                             value={dateFormat}
                             onValueChange={(value) =>
@@ -166,11 +173,12 @@ export function ImportBalanceStepMapping({
                                     value={DateFormat.YearMonthDay}
                                     id="format-ymd"
                                 />
+
                                 <Label
                                     htmlFor="format-ymd"
                                     className="cursor-pointer font-normal"
                                 >
-                                    YYYY-MM-DD (e.g., 2024-12-31)
+                                    {__('YYYY-MM-DD (e.g., 2024-12-31)')}
                                 </Label>
                             </div>
                             <div className="flex items-center space-x-2">
@@ -178,11 +186,12 @@ export function ImportBalanceStepMapping({
                                     value={DateFormat.MonthDayYear}
                                     id="format-mdy"
                                 />
+
                                 <Label
                                     htmlFor="format-mdy"
                                     className="cursor-pointer font-normal"
                                 >
-                                    MM-DD-YYYY (e.g., 12-31-2024)
+                                    {__('MM-DD-YYYY (e.g., 12-31-2024)')}
                                 </Label>
                             </div>
                             <div className="flex items-center space-x-2">
@@ -190,11 +199,12 @@ export function ImportBalanceStepMapping({
                                     value={DateFormat.DayMonthYear}
                                     id="format-dmy"
                                 />
+
                                 <Label
                                     htmlFor="format-dmy"
                                     className="cursor-pointer font-normal"
                                 >
-                                    DD-MM-YYYY (e.g., 31-12-2024)
+                                    {__('DD-MM-YYYY (e.g., 31-12-2024)')}
                                 </Label>
                             </div>
                         </RadioGroup>
@@ -204,10 +214,10 @@ export function ImportBalanceStepMapping({
 
             <div className="flex justify-between">
                 <Button variant="outline" onClick={onBack}>
-                    Back
+                    {__('Back')}
                 </Button>
                 <Button onClick={onNext} disabled={!isValid}>
-                    Preview Balances
+                    {__('Preview Balances')}
                 </Button>
             </div>
         </div>

resources/js/components/accounts/import-balances/import-balance-step-preview.tsx

@@ -7,7 +7,10 @@ import {
     TableHeader,
     TableRow,
 } from '@/components/ui/table';
+import { useLocale } from '@/hooks/use-locale';
 import { type ParsedBalance } from '@/types/balance-import';
+import { formatDateMedium } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 
 interface ImportBalanceStepPreviewProps {
     balances: ParsedBalance[];
@@ -24,30 +27,22 @@ export function ImportBalanceStepPreview({
     onBack,
     isImporting,
 }: ImportBalanceStepPreviewProps) {
+    const locale = useLocale();
     const total = balances.length;
 
     const formatBalance = (balance: number): string => {
-        return new Intl.NumberFormat('en-US', {
+        return new Intl.NumberFormat(locale, {
             style: 'currency',
             currency: currencyCode,
         }).format(balance / 100);
     };
 
-    const formatDate = (dateStr: string): string => {
-        const date = new Date(dateStr);
-        return date.toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-        });
-    };
-
     return (
         <div className="flex flex-col gap-6">
             <div className="rounded-lg border bg-muted/50 p-4">
                 <p className="text-sm text-muted-foreground">
-                    {total} balance{total !== 1 ? 's' : ''} will be updated or
+                    {total} balance{total !== 1 ? 's' : ''}
-                    created.
+                    {__('will be updated or\n                    created.')}
                 </p>
             </div>
 
@@ -55,9 +50,9 @@ export function ImportBalanceStepPreview({
                 <Table>
                     <TableHeader>
                         <TableRow>
-                            <TableHead>Date</TableHead>
+                            <TableHead>{__('Date')}</TableHead>
                             <TableHead className="text-right">
-                                Balance
+                                {__('Balance')}
                             </TableHead>
                         </TableRow>
                     </TableHeader>
@@ -75,7 +70,10 @@ export function ImportBalanceStepPreview({
                             balances.map((balance, index) => (
                                 <TableRow key={index}>
                                     <TableCell className="whitespace-nowrap">
-                                        {formatDate(balance.balance_date)}
+                                        {formatDateMedium(
+                                            balance.balance_date,
+                                            locale,
+                                        )}
                                     </TableCell>
                                     <TableCell className="text-right font-mono">
                                         {formatBalance(balance.balance)}
@@ -93,7 +91,7 @@ export function ImportBalanceStepPreview({
                     onClick={onBack}
                     disabled={isImporting}
                 >
-                    Back
+                    {__('Back')}
                 </Button>
                 <Button
                     onClick={onConfirm}

resources/js/components/accounts/import-balances/import-balance-step-upload.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { FileSpreadsheet, Upload, X } from 'lucide-react';
 import { useCallback, useState } from 'react';
 
@@ -89,14 +90,15 @@ export function ImportBalanceStepUpload({
                     <>
                         <Upload className="mb-4 h-12 w-12 text-muted-foreground" />
                         <p className="mb-2 text-sm font-medium">
-                            Drop your file here, or click to browse
+                            {__('Drop your file here, or click to browse')}
                         </p>
                         <p className="mb-4 text-xs text-muted-foreground">
-                            Supports CSV, XLS, and XLSX files
+                            {__('Supports CSV, XLS, and XLSX files')}
                         </p>
                         <Button asChild variant="secondary">
                             <label className="cursor-pointer">
-                                Browse Files
+                                {__('Browse Files')}
+
                                 <input
                                     type="file"
                                     className="hidden"
@@ -135,10 +137,10 @@ export function ImportBalanceStepUpload({
 
             <div className="flex justify-between">
                 <Button variant="outline" onClick={onBack}>
-                    Back
+                    {__('Back')}
                 </Button>
                 <Button onClick={onNext} disabled={!file}>
-                    Next
+                    {__('Next')}
                 </Button>
             </div>
         </div>

resources/js/components/accounts/update-balance-dialog.tsx

@@ -15,6 +15,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import type { Account, AccountBalance } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { useEffect, useRef, useState } from 'react';
 
 interface UpdateBalanceDialogProps {
@@ -149,18 +150,20 @@ export function UpdateBalanceDialog({
         <Dialog open={open} onOpenChange={handleOpenChange}>
             <DialogContent hasKeyboard className="sm:max-w-[400px]">
                 <DialogHeader>
-                    <DialogTitle>Update balance</DialogTitle>
+                    <DialogTitle>{__('Update balance')}</DialogTitle>
                     <DialogDescription>
-                        Set the balance for this account on a specific date.
+                        {__(
+                            'Set the balance for this account on a specific date.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
 
                 <form onSubmit={handleSubmit} className="space-y-4">
                     <div className="space-y-2">
-                        <Label htmlFor="balance-amount">Balance</Label>
+                        <Label htmlFor="balance-amount">{__('Balance')}</Label>
                         {isLoadingLastBalance ? (
                             <div className="flex h-10 items-center rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground">
-                                Loading last balance...
+                                {__('Loading last balance...')}
                             </div>
                         ) : (
                             <AmountInput
@@ -176,7 +179,7 @@ export function UpdateBalanceDialog({
                     </div>
 
                     <div className="space-y-2">
-                        <Label htmlFor="balance-date">Date</Label>
+                        <Label htmlFor="balance-date">{__('Date')}</Label>
                         <Input
                             id="balance-date"
                             type="date"
@@ -198,17 +201,17 @@ export function UpdateBalanceDialog({
                             onClick={() => handleOpenChange(false)}
                             disabled={isSubmitting || isLoadingLastBalance}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"
                             disabled={isSubmitting || isLoadingLastBalance}
                         >
                             {isSubmitting
-                                ? 'Saving...'
+                                ? __('Saving...')
                                 : isLoadingLastBalance
-                                  ? 'Loading...'
+                                  ? __('Loading...')
-                                  : 'Save'}
+                                  : __('Save')}
                         </Button>
                     </DialogFooter>
                 </form>

resources/js/components/appearance-dropdown.tsx

@@ -6,6 +6,7 @@ import {
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useAppearance } from '@/hooks/use-appearance';
+import { __ } from '@/utils/i18n';
 import { Monitor, Moon, Sun } from 'lucide-react';
 import { HTMLAttributes } from 'react';
 
@@ -36,20 +37,20 @@ export default function AppearanceToggleDropdown({
                         className="h-9 w-9 rounded-md"
                     >
                         {getCurrentIcon()}
-                        <span className="sr-only">Toggle theme</span>
+                        <span className="sr-only">{__('Toggle theme')}</span>
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
                     <DropdownMenuItem onClick={() => updateAppearance('light')}>
                         <span className="flex items-center gap-2">
                             <Sun className="h-5 w-5" />
-                            Light
+                            {__('Light')}
                         </span>
                     </DropdownMenuItem>
                     <DropdownMenuItem onClick={() => updateAppearance('dark')}>
                         <span className="flex items-center gap-2">
                             <Moon className="h-5 w-5" />
-                            Dark
+                            {__('Dark')}
                         </span>
                     </DropdownMenuItem>
                     <DropdownMenuItem
@@ -57,7 +58,7 @@ export default function AppearanceToggleDropdown({
                     >
                         <span className="flex items-center gap-2">
                             <Monitor className="h-5 w-5" />
-                            System
+                            {__('System')}
                         </span>
                     </DropdownMenuItem>
                 </DropdownMenuContent>

resources/js/components/appearance-tabs.tsx

@@ -1,5 +1,6 @@
 import { Appearance, useAppearance } from '@/hooks/use-appearance';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { LucideIcon, Monitor, Moon, Sun } from 'lucide-react';
 import { HTMLAttributes } from 'react';
 
@@ -10,9 +11,9 @@ export default function AppearanceToggleTab({
     const { appearance, updateAppearance } = useAppearance();
 
     const tabs: { value: Appearance; icon: LucideIcon; label: string }[] = [
-        { value: 'light', icon: Sun, label: 'Light' },
+        { value: 'light', icon: Sun, label: __('Light') },
-        { value: 'dark', icon: Moon, label: 'Dark' },
+        { value: 'dark', icon: Moon, label: __('Dark') },
-        { value: 'system', icon: Monitor, label: 'System' },
+        { value: 'system', icon: Monitor, label: __('System') },
     ];
 
     return (

resources/js/components/automation-rules/automation-rules-dialog.tsx

@@ -56,6 +56,7 @@ import { useEncryptionKey } from '@/contexts/encryption-key-context';
 import { type AutomationRule, getRuleActions } from '@/types/automation-rule';
 import { type Category, getCategoryColorClasses } from '@/types/category';
 import { type Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 
 interface AutomationRulesDialogProps {
     open: boolean;
@@ -81,22 +82,22 @@ function AutomationRuleActions({
                     <Button
                         variant="ghost"
                         className="h-8 w-8 p-0"
-                        aria-label="Actions"
+                        aria-label={__('Actions')}
                     >
-                        <span className="sr-only">Open menu</span>
+                        <span className="sr-only">{__('Open menu')}</span>
                         <MoreHorizontal className="h-4 w-4" />
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                    <DropdownMenuLabel>{__('Actions')}</DropdownMenuLabel>
                     <DropdownMenuItem onClick={() => setEditOpen(true)}>
-                        Edit
+                        {__('Edit')}
                     </DropdownMenuItem>
                     <DropdownMenuItem
                         onClick={() => setDeleteOpen(true)}
                         variant="destructive"
                     >
-                        Delete
+                        {__('Delete')}
                     </DropdownMenuItem>
                 </DropdownMenuContent>
             </DropdownMenu>
@@ -154,15 +155,15 @@ function AutomationRuleRow({
                     </TableRow>
                 </ContextMenuTrigger>
                 <ContextMenuContent>
-                    <ContextMenuLabel>Actions</ContextMenuLabel>
+                    <ContextMenuLabel>{__('Actions')}</ContextMenuLabel>
                     <ContextMenuItem onClick={() => setEditOpen(true)}>
-                        Edit
+                        {__('Edit')}
                     </ContextMenuItem>
                     <ContextMenuItem
                         onClick={() => setDeleteOpen(true)}
                         variant="destructive"
                     >
-                        Delete
+                        {__('Delete')}
                     </ContextMenuItem>
                 </ContextMenuContent>
             </ContextMenu>
@@ -220,7 +221,7 @@ export function AutomationRulesDialog({
     const columns: ColumnDef<AutomationRule>[] = [
         {
             accessorKey: 'priority',
-            header: 'Priority',
+            header: __('Priority'),
             cell: ({ row }) => {
                 return (
                     <div className="font-medium">
@@ -231,7 +232,7 @@ export function AutomationRulesDialog({
         },
         {
             accessorKey: 'title',
-            header: 'Title',
+            header: __('Title'),
             cell: ({ row }) => {
                 return (
                     <div className="font-medium">{row.getValue('title')}</div>
@@ -240,7 +241,7 @@ export function AutomationRulesDialog({
         },
         {
             id: 'actions_display',
-            header: 'Actions',
+            header: __('Actions'),
             cell: ({ row }) => {
                 const rule = row.original;
                 const actions = getRuleActions(rule);
@@ -299,7 +300,7 @@ export function AutomationRulesDialog({
 
                 return (
                     <span className="text-sm text-muted-foreground">
-                        Add note
+                        {__('Add note')}
                     </span>
                 );
             },
@@ -337,17 +338,18 @@ export function AutomationRulesDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-3xl">
                 <DialogHeader>
-                    <DialogTitle>Automation Rules</DialogTitle>
+                    <DialogTitle>{__('Automation Rules')}</DialogTitle>
                     <DialogDescription>
-                        Manage your transaction automation rules. Rules will be
+                        {__(
-                        applied to categorize transactions automatically.
+                            'Manage your transaction automation rules. Rules will be applied to categorize transactions automatically.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
 
                 <div className="space-y-4">
                     <div className="flex items-center justify-between">
                         <Input
-                            placeholder="Filter rules...."
+                            placeholder={__('Filter rules...')}
                             value={
                                 (table
                                     .getColumn('title')
@@ -407,7 +409,7 @@ export function AutomationRulesDialog({
                                             colSpan={columns.length}
                                             className="h-24 text-center"
                                         >
-                                            No automation rules found.
+                                            {__('No automation rules found.')}
                                         </TableCell>
                                     </TableRow>
                                 )}
@@ -417,8 +419,8 @@ export function AutomationRulesDialog({
 
                     <div className="flex items-center justify-end">
                         <div className="text-sm text-muted-foreground">
-                            {table.getFilteredRowModel().rows.length} rule(s)
+                            {table.getFilteredRowModel().rows.length}{' '}
-                            total.
+                            {__('rule(s) total.')}
                         </div>
                     </div>
                 </div>

resources/js/components/automation-rules/create-automation-rule-dialog.tsx

@@ -21,6 +21,7 @@ import {
 } from '@/lib/rule-builder-utils';
 import type { Category } from '@/types/category';
 import type { Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useState } from 'react';
 
@@ -124,26 +125,28 @@ export function CreateAutomationRuleDialog({
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
-                <Button disabled={disabled}>Create Rule</Button>
+                <Button disabled={disabled}>{__('Create Rule')}</Button>
             </DialogTrigger>
             <DialogContent className="overflow-x-hidden sm:max-w-[600px]">
                 <DialogHeader>
-                    <DialogTitle>Create Automation Rule</DialogTitle>
+                    <DialogTitle>{__('Create Automation Rule')}</DialogTitle>
                     <DialogDescription>
-                        Create a rule to automatically categorize transactions
+                        {__(
-                        and add labels.
+                            'Create a rule to automatically categorize transactions\n                        and add labels.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <form onSubmit={handleSubmit} className="space-y-4">
                     <div className="space-y-2">
-                        <FormLabel htmlFor="title">Title</FormLabel>
+                        <FormLabel htmlFor="title">{__('Title')}</FormLabel>
                         <Input
                             id="title"
                             value={title}
                             onChange={(e) => setTitle(e.target.value)}
-                            placeholder="Rule title"
+                            placeholder={__('Rule title')}
                             required
                         />
+
                         {errors.title && (
                             <p className="text-sm text-red-500">
                                 {errors.title}
@@ -152,7 +155,9 @@ export function CreateAutomationRuleDialog({
                     </div>
 
                     <div className="space-y-2">
-                        <FormLabel htmlFor="priority">Priority</FormLabel>
+                        <FormLabel htmlFor="priority">
+                            {__('Priority')}
+                        </FormLabel>
                         <Input
                             id="priority"
                             type="number"
@@ -162,8 +167,9 @@ export function CreateAutomationRuleDialog({
                             placeholder="10"
                             required
                         />
+
                         <p className="text-xs text-muted-foreground">
-                            Lower numbers execute first
+                            {__('Lower numbers execute first')}
                         </p>
                         {errors.priority && (
                             <p className="text-sm text-red-500">
@@ -179,21 +185,23 @@ export function CreateAutomationRuleDialog({
                     />
 
                     <div className="space-y-4 rounded-md border p-4">
-                        <h4 className="font-medium">Actions</h4>
+                        <h4 className="font-medium">{__('Actions')}</h4>
                         <p className="text-sm text-muted-foreground">
-                            At least one action is required
+                            {__('At least one action is required')}
                         </p>
 
                         <div className="space-y-2">
                             <FormLabel htmlFor="category">
-                                Set Category
+                                {__('Set Category')}
                             </FormLabel>
                             <div className="mt-1">
                                 <CategoryCombobox
                                     value={categoryId}
                                     onValueChange={setCategoryId}
                                     categories={categories}
-                                    placeholder="Select a category (optional)"
+                                    placeholder={__(
+                                        'Select a category (optional)',
+                                    )}
                                     showUncategorized={false}
                                     data-testid="action-category-select"
                                 />
@@ -201,13 +209,13 @@ export function CreateAutomationRuleDialog({
                         </div>
 
                         <div className="space-y-2">
-                            <FormLabel>Add Labels</FormLabel>
+                            <FormLabel>{__('Add Labels')}</FormLabel>
                             <div className="mt-1">
                                 <LabelCombobox
                                     value={selectedLabelIds}
                                     onValueChange={setSelectedLabelIds}
                                     labels={labels}
-                                    placeholder="Select labels (optional)"
+                                    placeholder={__('Select labels (optional)')}
                                     allowCreate={true}
                                 />
                             </div>
@@ -234,7 +242,7 @@ export function CreateAutomationRuleDialog({
                             onClick={() => setOpen(false)}
                             disabled={isSubmitting}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"

resources/js/components/automation-rules/delete-automation-rule-dialog.tsx

@@ -10,6 +10,7 @@ import {
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import type { AutomationRule } from '@/types/automation-rule';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useState } from 'react';
 
@@ -47,15 +48,20 @@ export function DeleteAutomationRuleDialog({
         <AlertDialog open={open} onOpenChange={onOpenChange}>
             <AlertDialogContent>
                 <AlertDialogHeader>
-                    <AlertDialogTitle>Delete Automation Rule</AlertDialogTitle>
+                    <AlertDialogTitle>
+                        {__('Delete Automation Rule')}
+                    </AlertDialogTitle>
                     <AlertDialogDescription>
-                        Are you sure you want to delete "{rule.title}"? This
+                        {__('Are you sure you want to delete "')}
-                        action cannot be undone.
+                        {rule.title}
+                        {__(
+                            '"? This\n                        action cannot be undone.',
+                        )}
                     </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
                     <AlertDialogCancel disabled={isDeleting}>
-                        Cancel
+                        {__('Cancel')}
                     </AlertDialogCancel>
                     <AlertDialogAction
                         onClick={handleDelete}

resources/js/components/automation-rules/edit-automation-rule-dialog.tsx

@@ -22,6 +22,7 @@ import {
 import type { AutomationRule } from '@/types/automation-rule';
 import type { Category } from '@/types/category';
 import type { Label as LabelType } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useEffect, useState } from 'react';
 
@@ -133,22 +134,24 @@ export function EditAutomationRuleDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="overflow-x-hidden sm:max-w-[600px]">
                 <DialogHeader>
-                    <DialogTitle>Edit Automation Rule</DialogTitle>
+                    <DialogTitle>{__('Edit Automation Rule')}</DialogTitle>
                     <DialogDescription>
-                        Update the rule to automatically categorize transactions
+                        {__(
-                        and add labels.
+                            'Update the rule to automatically categorize transactions\n                        and add labels.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <form onSubmit={handleSubmit} className="space-y-4">
                     <div className="space-y-2">
-                        <Label htmlFor="title">Title</Label>
+                        <Label htmlFor="title">{__('Title')}</Label>
                         <Input
                             id="title"
                             value={title}
                             onChange={(e) => setTitle(e.target.value)}
-                            placeholder="Rule title"
+                            placeholder={__('Rule title')}
                             required
                         />
+
                         {errors.title && (
                             <p className="text-sm text-red-500">
                                 {errors.title}
@@ -157,7 +160,7 @@ export function EditAutomationRuleDialog({
                     </div>
 
                     <div className="space-y-2">
-                        <Label htmlFor="priority">Priority</Label>
+                        <Label htmlFor="priority">{__('Priority')}</Label>
                         <Input
                             id="priority"
                             type="number"
@@ -167,8 +170,9 @@ export function EditAutomationRuleDialog({
                             placeholder="0"
                             required
                         />
+
                         <p className="text-xs text-muted-foreground">
-                            Lower numbers execute first
+                            {__('Lower numbers execute first')}
                         </p>
                         {errors.priority && (
                             <p className="text-sm text-red-500">
@@ -184,30 +188,32 @@ export function EditAutomationRuleDialog({
                     />
 
                     <div className="space-y-4 rounded-md border p-4">
-                        <h4 className="font-medium">Actions</h4>
+                        <h4 className="font-medium">{__('Actions')}</h4>
                         <p className="text-sm text-muted-foreground">
-                            At least one action is required
+                            {__('At least one action is required')}
                         </p>
 
                         <div className="space-y-2">
-                            <Label htmlFor="category">Set Category</Label>
+                            <Label htmlFor="category">
+                                {__('Set Category')}
+                            </Label>
                             <CategoryCombobox
                                 value={categoryId}
                                 onValueChange={setCategoryId}
                                 categories={categories}
-                                placeholder="Select a category (optional)"
+                                placeholder={__('Select a category (optional)')}
                                 showUncategorized={false}
                                 data-testid="action-category-select"
                             />
                         </div>
 
                         <div className="space-y-2">
-                            <Label>Add Labels</Label>
+                            <Label>{__('Add Labels')}</Label>
                             <LabelCombobox
                                 value={selectedLabelIds}
                                 onValueChange={setSelectedLabelIds}
                                 labels={labels}
-                                placeholder="Select labels (optional)"
+                                placeholder={__('Select labels (optional)')}
                                 allowCreate={true}
                             />
                         </div>
@@ -233,7 +239,7 @@ export function EditAutomationRuleDialog({
                             onClick={() => onOpenChange(false)}
                             disabled={isSubmitting}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"

resources/js/components/automation-rules/rule-builder.tsx

@@ -19,6 +19,7 @@ import {
     OPERATOR_LABELS,
     type RuleStructure,
 } from '@/lib/rule-builder-utils';
+import { __ } from '@/utils/i18n';
 import { ChevronDown, Plus, Trash2, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
@@ -76,7 +77,7 @@ export function RuleBuilder({ value, onChange, error }: RuleBuilderProps) {
     return (
         <div className="space-y-4">
             <div className="flex items-center justify-between">
-                <Label>Conditions</Label>
+                <Label>{__('Conditions')}</Label>
                 {structure.groups.length > 1 && (
                     <Button
                         type="button"
@@ -85,7 +86,7 @@ export function RuleBuilder({ value, onChange, error }: RuleBuilderProps) {
                         onClick={toggleGroupOperator}
                         className="px-1.5 py-4"
                     >
-                        Groups joined by:{' '}
+                        {__('Groups joined by:')}{' '}
                         <Badge variant="secondary" className="ml-2">
                             {structure.groupOperator.toUpperCase()}
                             <ChevronDown className="-mr-1 inline-block h-3 w-3" />
@@ -120,7 +121,9 @@ export function RuleBuilder({ value, onChange, error }: RuleBuilderProps) {
                                                 data-testid="toggle-condition-operator"
                                             >
                                                 <span className="text-sm">
-                                                    Conditions joined by:{' '}
+                                                    {__(
+                                                        'Conditions joined by:',
+                                                    )}{' '}
                                                 </span>
                                                 <Badge
                                                     variant="secondary"
@@ -204,7 +207,7 @@ export function RuleBuilder({ value, onChange, error }: RuleBuilderProps) {
                                 }}
                             >
                                 <Plus className="mr-2 h-4 w-4" />
-                                Add Condition
+                                {__('Add Condition')}
                             </Button>
                         </Card>
                     </div>
@@ -219,7 +222,7 @@ export function RuleBuilder({ value, onChange, error }: RuleBuilderProps) {
                 onClick={addGroup}
             >
                 <Plus className="mr-2 h-4 w-4" />
-                Add Group
+                {__('Add Group')}
             </Button>
 
             {error && <p className="text-sm text-red-500">{error}</p>}
@@ -314,7 +317,7 @@ function ConditionRow({
                     onChange={(e) =>
                         onChange({ ...condition, value: e.target.value })
                     }
-                    placeholder="Value"
+                    placeholder={__('Value')}
                     className="w-full sm:flex-1"
                     step={inputType === 'number' ? 'any' : undefined}
                 />

resources/js/components/breadcrumbs.tsx

@@ -7,6 +7,7 @@ import {
     BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
 import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Link } from '@inertiajs/react';
 import { Fragment } from 'react';
 
@@ -27,12 +28,12 @@ export function Breadcrumbs({
                                     <BreadcrumbItem>
                                         {isLast ? (
                                             <BreadcrumbPage>
-                                                {item.title}
+                                                {__(item.title)}
                                             </BreadcrumbPage>
                                         ) : (
                                             <BreadcrumbLink asChild>
                                                 <Link href={item.href}>
-                                                    {item.title}
+                                                    {__(item.title)}
                                                 </Link>
                                             </BreadcrumbLink>
                                         )}

resources/js/components/budgets/budget-list-card.tsx

@@ -9,8 +9,11 @@ import {
     CardTitle,
 } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
+import { useLocale } from '@/hooks/use-locale';
 import { Budget, getBudgetPeriodTypeLabel } from '@/types/budget';
 import { formatCurrency } from '@/utils/currency';
+import { formatDate } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 import { Link } from '@inertiajs/react';
 import { ArrowRight, Calendar } from 'lucide-react';
 import { useMemo } from 'react';
@@ -21,6 +24,7 @@ interface Props {
 }
 
 export function BudgetListCard({ budget, currencyCode }: Props) {
+    const locale = useLocale();
     const currentPeriod = budget.periods?.[0];
 
     const stats = useMemo(() => {
@@ -53,19 +57,13 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
     }, [currentPeriod]);
 
     const periodLabel = useMemo(() => {
-        if (!currentPeriod) return 'No active period';
+        if (!currentPeriod) return __('No active period');
 
-        const start = new Date(currentPeriod.start_date).toLocaleDateString(
+        const start = formatDate(currentPeriod.start_date, 'MMM d', locale);
-            'en-US',
+        const end = formatDate(currentPeriod.end_date, 'MMM d', locale);
-            { month: 'short', day: 'numeric' },
-        );
-        const end = new Date(currentPeriod.end_date).toLocaleDateString(
-            'en-US',
-            { month: 'short', day: 'numeric' },
-        );
 
         return `${start} - ${end}`;
-    }, [currentPeriod]);
+    }, [currentPeriod, locale]);
 
     const statusColor = useMemo(() => {
         if (stats.percentageUsed >= 100)
@@ -78,7 +76,7 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
     const trackingLabel = useMemo(() => {
         if (budget.category) return budget.category.name;
         if (budget.label) return budget.label.name;
-        return 'No tracking';
+        return __('No tracking');
     }, [budget]);
 
     return (
@@ -93,16 +91,19 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
                         </CardDescription>
                     </div>
                     <Badge variant="outline">
-                        {getBudgetPeriodTypeLabel(budget.period_type)}
+                        {__(getBudgetPeriodTypeLabel(budget.period_type))}
                     </Badge>
                 </div>
             </CardHeader>
             <CardContent className="space-y-4">
                 <div className="space-y-2">
                     <div className="flex items-center justify-between text-sm">
-                        <span className="text-muted-foreground">Spent</span>
+                        <span className="text-muted-foreground">
+                            {__('Spent')}
+                        </span>
                         <span className={statusColor}>
-                            {formatCurrency(stats.totalSpent, currencyCode)} of{' '}
+                            {formatCurrency(stats.totalSpent, currencyCode)}{' '}
+                            {__('of')}{' '}
                             {formatCurrency(stats.totalAllocated, currencyCode)}
                         </span>
                     </div>
@@ -110,8 +111,11 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
                         value={Math.min(stats.percentageUsed, 100)}
                         className="h-2"
                     />
+
                     <div className="flex items-center justify-between text-sm">
-                        <span className="text-muted-foreground">Remaining</span>
+                        <span className="text-muted-foreground">
+                            {__('Remaining')}
+                        </span>
                         <span className={statusColor}>
                             {formatCurrency(stats.remaining, currencyCode)}
                         </span>
@@ -120,7 +124,8 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
 
                 <div className="flex items-center justify-between border-t pt-4">
                     <span className="text-sm text-muted-foreground">
-                        Tracking: {trackingLabel}
+                        {__('Tracking:')}
+                        {trackingLabel}
                     </span>
                     <Link href={show({ budget: budget.id }).url}>
                         <Button
@@ -128,7 +133,8 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
                             variant="ghost"
                             size="sm"
                         >
-                            View Details
+                            {__('View Details')}
+
                             <ArrowRight className="ml-2 h-4 w-4" />
                         </Button>
                     </Link>

resources/js/components/budgets/budget-spending-chart.tsx

@@ -10,8 +10,11 @@ import {
     ChartTooltip,
     type ChartConfig,
 } from '@/components/ui/chart';
+import { useLocale } from '@/hooks/use-locale';
 import { BudgetPeriod } from '@/types/budget';
 import { formatCurrency } from '@/utils/currency';
+import { formatDate } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 import { useMemo } from 'react';
 import { Area, AreaChart, Line, XAxis } from 'recharts';
 
@@ -40,6 +43,7 @@ interface CustomTooltipProps {
     label?: string | number;
     currencyCode: string;
     hasPreviousPeriod: boolean;
+    locale: string;
 }
 
 function CustomTooltip({
@@ -47,6 +51,7 @@ function CustomTooltip({
     payload,
     currencyCode,
     hasPreviousPeriod,
+    locale,
 }: CustomTooltipProps) {
     if (!active || !payload || !payload.length) {
         return null;
@@ -64,21 +69,21 @@ function CustomTooltip({
             <p className="mb-2 text-sm font-medium">
                 {hasPreviousPeriod
                     ? `Day ${data.day}`
-                    : new Date(data.date).toLocaleDateString('en-US', {
+                    : formatDate(data.date, 'MMM d, yyyy', locale)}
-                          month: 'short',
-                          day: 'numeric',
-                          year: 'numeric',
-                      })}
             </p>
             <div className="space-y-1 text-sm">
                 <div className="flex items-center justify-between gap-8">
-                    <span className="text-muted-foreground">Allocated:</span>
+                    <span className="text-muted-foreground">
+                        {__('Allocated:')}
+                    </span>
                     <span className="font-medium">
                         {formatCurrency(allocated, currencyCode)}
                     </span>
                 </div>
                 <div className="flex items-center justify-between gap-8">
-                    <span className="text-muted-foreground">Spent:</span>
+                    <span className="text-muted-foreground">
+                        {__('Spent:')}
+                    </span>
                     <span className="font-medium">
                         {formatCurrency(spent, currencyCode)}
                     </span>
@@ -86,7 +91,7 @@ function CustomTooltip({
                 {hasPreviousPeriod && data.prevSpent !== undefined && (
                     <div className="flex items-center justify-between gap-8">
                         <span className="text-muted-foreground">
-                            Last period:
+                            {__('Last period:')}
                         </span>
                         <span className="font-medium text-muted-foreground">
                             {formatCurrency(data.prevSpent, currencyCode)}
@@ -95,7 +100,7 @@ function CustomTooltip({
                 )}
                 <div className="border-t pt-1">
                     <div className="flex items-center justify-between gap-8">
-                        <span className="font-medium">Available:</span>
+                        <span className="font-medium">{__('Available:')}</span>
                         <div className="flex items-baseline gap-1">
                             <span className="text-xs text-muted-foreground">
                                 {percentage}% /
@@ -135,6 +140,7 @@ export function BudgetSpendingChart({
     budgetName,
     currencyCode,
 }: Props) {
+    const locale = useLocale();
     const hasPreviousPeriod = !!previousPeriod;
 
     const chartData = useMemo(() => {
@@ -212,23 +218,18 @@ export function BudgetSpendingChart({
     } satisfies ChartConfig;
 
     const periodLabel = useMemo(() => {
-        const start = new Date(currentPeriod.start_date).toLocaleDateString(
+        const start = formatDate(currentPeriod.start_date, 'MMM d', locale);
-            'en-US',
+        const end = formatDate(currentPeriod.end_date, 'MMM d, yyyy', locale);
-            { month: 'short', day: 'numeric' },
-        );
-        const end = new Date(currentPeriod.end_date).toLocaleDateString(
-            'en-US',
-            { month: 'short', day: 'numeric', year: 'numeric' },
-        );
         return `${start} - ${end}`;
-    }, [currentPeriod]);
+    }, [currentPeriod, locale]);
 
     return (
         <Card>
             <CardHeader>
-                <CardTitle>Budget Spending</CardTitle>
+                <CardTitle>{__('Budget Spending')}</CardTitle>
                 <CardDescription>
-                    Tracking spending for {budgetName} · {periodLabel}
+                    {__('Tracking spending for')}
+                    {budgetName} · {periodLabel}
                 </CardDescription>
             </CardHeader>
             <CardContent className="px-6 pt-0">
@@ -254,11 +255,13 @@ export function BudgetSpendingChart({
                                     stopColor="var(--color-spent)"
                                     stopOpacity={0.8}
                                 />
+
                                 <stop
                                     offset="50%"
                                     stopColor="var(--color-spent)"
                                     stopOpacity={0.4}
                                 />
+
                                 <stop
                                     offset="100%"
                                     stopColor="var(--color-spent)"
@@ -277,11 +280,13 @@ export function BudgetSpendingChart({
                                     stopColor="var(--color-allocated)"
                                     stopOpacity={0.4}
                                 />
+
                                 <stop
                                     offset="50%"
                                     stopColor="var(--color-allocated)"
                                     stopOpacity={0.2}
                                 />
+
                                 <stop
                                     offset="100%"
                                     stopColor="var(--color-allocated)"
@@ -298,21 +303,20 @@ export function BudgetSpendingChart({
                                 if (hasPreviousPeriod) {
                                     return `Day ${value}`;
                                 }
-                                const date = new Date(value);
+                                return formatDate(value, 'MMM d', locale);
-                                return date.toLocaleDateString('en-US', {
-                                    month: 'short',
-                                    day: 'numeric',
-                                });
                             }}
                         />
+
                         <ChartTooltip
                             content={
                                 <CustomTooltip
                                     currencyCode={currencyCode}
                                     hasPreviousPeriod={hasPreviousPeriod}
+                                    locale={locale}
                                 />
                             }
                         />
+
                         <Area
                             dataKey="allocated"
                             type="basis"
@@ -323,6 +327,7 @@ export function BudgetSpendingChart({
                             activeDot={{ r: 6 }}
                             fillOpacity={1}
                         />
+
                         <Area
                             dataKey="spent"
                             type="basis"

resources/js/components/budgets/create-budget-dialog.tsx

@@ -31,6 +31,7 @@ import {
 } from '@/types/budget';
 import { Category } from '@/types/category';
 import { Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { router, usePage } from '@inertiajs/react';
 import { Plus, X } from 'lucide-react';
 import { useState } from 'react';
@@ -125,7 +126,7 @@ export function CreateBudgetDialog({
                     <CardContent className="flex h-full items-center justify-center">
                         <div className="flex flex-row items-center justify-center gap-1">
                             <Plus className="mr-2 h-4 w-4" />
-                            Create Budget
+                            {__('Create Budget')}
                         </div>
                     </CardContent>
                 </Card>
@@ -133,26 +134,32 @@ export function CreateBudgetDialog({
             <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
                 <form onSubmit={handleSubmit}>
                     <DialogHeader>
-                        <DialogTitle>Create Budget</DialogTitle>
+                        <DialogTitle>{__('Create Budget')}</DialogTitle>
                         <DialogDescription>
-                            Set up a spending limit for a category or label.
+                            {__(
+                                'Set up a spending limit for a category or label.',
+                            )}
                         </DialogDescription>
                     </DialogHeader>
 
                     <div className="space-y-6 py-4">
                         <div className="space-y-2">
-                            <UILabel htmlFor="name">Budget Name</UILabel>
+                            <UILabel htmlFor="name">
+                                {__('Budget Name')}
+                            </UILabel>
                             <Input
                                 id="name"
                                 value={name}
                                 onChange={(e) => setName(e.target.value)}
-                                placeholder="e.g., Padel Budget"
+                                placeholder={__('e.g., Padel Budget')}
                                 required
                             />
                         </div>
 
                         <div className="space-y-2">
-                            <UILabel htmlFor="period-type">Period Type</UILabel>
+                            <UILabel htmlFor="period-type">
+                                {__('Period Type')}
+                            </UILabel>
                             <Select
                                 value={periodType}
                                 onValueChange={(value) =>
@@ -175,7 +182,7 @@ export function CreateBudgetDialog({
                         {periodType === 'custom' && (
                             <div className="space-y-2">
                                 <UILabel htmlFor="period-duration">
-                                    Period Duration (days)
+                                    {__('Period Duration (days)')}
                                 </UILabel>
                                 <Input
                                     id="period-duration"
@@ -211,6 +218,7 @@ export function CreateBudgetDialog({
                                     setPeriodStartDay(parseInt(e.target.value))
                                 }
                             />
+
                             <p className="text-sm text-muted-foreground">
                                 {periodType === 'monthly'
                                     ? 'Day of the month when the period starts (1-31)'
@@ -230,7 +238,7 @@ export function CreateBudgetDialog({
 
                             <div className="space-y-2">
                                 <UILabel htmlFor="category">
-                                    Category (Optional)
+                                    {__('Category (Optional)')}
                                 </UILabel>
                                 <div className="flex gap-2">
                                     <Select
@@ -241,7 +249,11 @@ export function CreateBudgetDialog({
                                             id="category"
                                             className="flex-1"
                                         >
-                                            <SelectValue placeholder="Select a category" />
+                                            <SelectValue
+                                                placeholder={__(
+                                                    'Select a category',
+                                                )}
+                                            />
                                         </SelectTrigger>
                                         <SelectContent>
                                             {allCategories.map((category) => (
@@ -271,7 +283,7 @@ export function CreateBudgetDialog({
 
                             <div className="space-y-2">
                                 <UILabel htmlFor="label">
-                                    Label (Optional)
+                                    {__('Label (Optional)')}
                                 </UILabel>
                                 <div className="flex gap-2">
                                     <Select
@@ -284,7 +296,11 @@ export function CreateBudgetDialog({
                                             id="label"
                                             className="flex-1"
                                         >
-                                            <SelectValue placeholder="Select a label" />
+                                            <SelectValue
+                                                placeholder={__(
+                                                    'Select a label',
+                                                )}
+                                            />
                                         </SelectTrigger>
                                         <SelectContent>
                                             {allLabels.map((label) => (
@@ -311,14 +327,15 @@ export function CreateBudgetDialog({
                                     )}
                                 </div>
                                 <p className="text-sm text-muted-foreground">
-                                    Select at least a category or a label to
+                                    {__(
-                                    track.
+                                        'Select at least a category or a label to\n                                    track.',
+                                    )}
                                 </p>
                             </div>
 
                             <div className="space-y-2">
                                 <UILabel htmlFor="allocated-amount">
-                                    Allocated Amount
+                                    {__('Allocated Amount')}
                                 </UILabel>
                                 <AmountInput
                                     id="allocated-amount"
@@ -328,14 +345,17 @@ export function CreateBudgetDialog({
                                     placeholder="0.00"
                                     required
                                 />
+
                                 <p className="text-sm text-muted-foreground">
-                                    How much do you want to budget per period?
+                                    {__(
+                                        'How much do you want to budget per period?',
+                                    )}
                                 </p>
                             </div>
 
                             <div className="space-y-2">
                                 <UILabel htmlFor="rollover">
-                                    Rollover Type
+                                    {__('Rollover Type')}
                                 </UILabel>
                                 <Select
                                     value={rolloverType}
@@ -369,7 +389,7 @@ export function CreateBudgetDialog({
                             variant="outline"
                             onClick={() => setOpen(false)}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button
                             type="submit"

resources/js/components/budgets/delete-budget-dialog.tsx

@@ -10,6 +10,7 @@ import {
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Budget } from '@/types/budget';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useState } from 'react';
 
@@ -46,17 +47,18 @@ export function DeleteBudgetDialog({
         <AlertDialog open={open} onOpenChange={onOpenChange}>
             <AlertDialogContent>
                 <AlertDialogHeader>
-                    <AlertDialogTitle>Delete Budget</AlertDialogTitle>
+                    <AlertDialogTitle>{__('Delete Budget')}</AlertDialogTitle>
                     <AlertDialogDescription>
-                        Are you sure you want to delete "{budget.name}"? This
+                        {__('Are you sure you want to delete "')}
-                        action cannot be undone. All budget periods,
+                        {budget.name}
-                        allocations, and transaction assignments will be
+                        {__(
-                        permanently removed.
+                            '"? This\n                        action cannot be undone. All budget periods,\n                        allocations, and transaction assignments will be\n                        permanently removed.',
+                        )}
                     </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
                     <AlertDialogCancel disabled={isDeleting}>
-                        Cancel
+                        {__('Cancel')}
                     </AlertDialogCancel>
                     <AlertDialogAction
                         onClick={handleDelete}

resources/js/components/budgets/edit-budget-dialog.tsx

@@ -27,6 +27,7 @@ import {
     ROLLOVER_TYPES,
     RolloverType,
 } from '@/types/budget';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { useEffect, useState } from 'react';
 
@@ -102,28 +103,31 @@ export function EditBudgetDialog({
             <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
                 <form onSubmit={handleSubmit}>
                     <DialogHeader>
-                        <DialogTitle>Edit Budget</DialogTitle>
+                        <DialogTitle>{__('Edit Budget')}</DialogTitle>
                         <DialogDescription>
-                            Update your budget settings. To change the allocated
+                            {__(
-                            amount or tracking, use the budget page directly.
+                                'Update your budget settings. To change the allocated\n                            amount or tracking, use the budget page directly.',
+                            )}
                         </DialogDescription>
                     </DialogHeader>
 
                     <div className="space-y-4 py-4">
                         <div className="space-y-2">
-                            <Label htmlFor="name">Budget Name</Label>
+                            <Label htmlFor="name">{__('Budget Name')}</Label>
                             <Input
                                 id="name"
                                 value={name}
                                 className="mt-1"
                                 onChange={(e) => setName(e.target.value)}
-                                placeholder="e.g., Monthly Budget"
+                                placeholder={__('e.g., Monthly Budget')}
                                 required
                             />
                         </div>
 
                         <div className="space-y-2">
-                            <Label htmlFor="period-type">Period Type</Label>
+                            <Label htmlFor="period-type">
+                                {__('Period Type')}
+                            </Label>
                             <div className="mt-1">
                                 <Select
                                     value={periodType}
@@ -149,7 +153,7 @@ export function EditBudgetDialog({
                         {periodType === 'custom' && (
                             <div className="space-y-2">
                                 <Label htmlFor="period-duration">
-                                    Period Duration (days)
+                                    {__('Period Duration (days)')}
                                 </Label>
                                 <Input
                                     disabled
@@ -189,6 +193,7 @@ export function EditBudgetDialog({
                                     setPeriodStartDay(parseInt(e.target.value))
                                 }
                             />
+
                             <p className="text-sm text-muted-foreground">
                                 {periodType === 'monthly'
                                     ? 'Day of the month when the period starts (1-31)'
@@ -201,7 +206,7 @@ export function EditBudgetDialog({
 
                         <div className="space-y-2">
                             <Label htmlFor="allocated-amount">
-                                Allocated Amount
+                                {__('Allocated Amount')}
                             </Label>
                             <AmountInput
                                 id="allocated-amount"
@@ -211,14 +216,18 @@ export function EditBudgetDialog({
                                 placeholder="0.00"
                                 required
                             />
+
                             <p className="text-sm text-muted-foreground">
-                                This will update the allocated amount for the
+                                {__(
-                                current and future periods.
+                                    'This will update the allocated amount for the\n                                current and future periods.',
+                                )}
                             </p>
                         </div>
 
                         <div className="space-y-2">
-                            <Label htmlFor="rollover">Rollover Type</Label>
+                            <Label htmlFor="rollover">
+                                {__('Rollover Type')}
+                            </Label>
                             <div className="mt-1">
                                 <Select
                                     disabled
@@ -253,7 +262,7 @@ export function EditBudgetDialog({
                             variant="outline"
                             onClick={() => onOpenChange(false)}
                         >
-                            Cancel
+                            {__('Cancel')}
                         </Button>
                         <Button type="submit" disabled={isSubmitting || !name}>
                             {isSubmitting ? 'Saving...' : 'Save Changes'}

resources/js/components/cashflow/breakdown-card.tsx

@@ -11,6 +11,7 @@ import { Progress } from '@/components/ui/progress';
 import { BreakdownData } from '@/hooks/use-cashflow-data';
 import { cn } from '@/lib/utils';
 import { getCategoryColorClasses } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import * as Icons from 'lucide-react';
 import { LucideIcon } from 'lucide-react';
 
@@ -38,13 +39,16 @@ export function BreakdownCard({
     loading,
     currency = 'USD',
 }: BreakdownCardProps) {
-    const title = type === 'income' ? 'Income Sources' : 'Expense Categories';
+    const title =
+        type === 'income' ? __('Income Sources') : __('Expense Categories');
     const description =
         type === 'income'
-            ? 'Where your money comes from'
+            ? __('Where your money comes from')
-            : 'Where your money goes';
+            : __('Where your money goes');
     const emptyMessage =
-        type === 'income' ? 'No income this period' : 'No expenses this period';
+        type === 'income'
+            ? __('No income this period')
+            : __('No expenses this period');
 
     if (loading) {
         return (

resources/js/components/cashflow/net-cashflow-card.tsx

@@ -8,6 +8,7 @@ import {
 } from '@/components/ui/card';
 import { CashflowSummary } from '@/hooks/use-cashflow-data';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { ArrowDown, ArrowUp, TrendingDown, TrendingUp } from 'lucide-react';
 
 interface NetCashflowCardProps {
@@ -28,7 +29,7 @@ export function NetCashflowCard({
             <Card>
                 <CardHeader className="pb-2">
                     <CardTitle className="text-sm font-medium">
-                        Net Cashflow
+                        {__('Net Cashflow')}
                     </CardTitle>
                 </CardHeader>
                 <CardContent>
@@ -47,9 +48,9 @@ export function NetCashflowCard({
         <Card>
             <CardHeader className="pb-2">
                 <CardTitle className="text-sm font-medium">
-                    Net Cashflow
+                    {__('Net Cashflow')}
                 </CardTitle>
-                <CardDescription>Income minus expenses</CardDescription>
+                <CardDescription>{__('Income minus expenses')}</CardDescription>
             </CardHeader>
             <CardContent>
                 <div className="flex items-baseline gap-2">
@@ -109,13 +110,15 @@ export function NetCashflowCard({
                             />
                         </span>
                         <span className="text-muted-foreground">
-                            vs last period
+                            {__('vs last period')}
                         </span>
                     </div>
                 )}
                 <div className="mt-3 grid grid-cols-2 gap-4 border-t pt-3">
                     <div>
-                        <p className="text-xs text-muted-foreground">Income</p>
+                        <p className="text-xs text-muted-foreground">
+                            {__('Income')}
+                        </p>
                         <AmountDisplay
                             amountInCents={current.income}
                             currencyCode={currency}
@@ -127,7 +130,7 @@ export function NetCashflowCard({
                     </div>
                     <div>
                         <p className="text-xs text-muted-foreground">
-                            Expenses
+                            {__('Expenses')}
                         </p>
                         <AmountDisplay
                             amountInCents={current.expense}

resources/js/components/cashflow/period-navigation.tsx

@@ -1,5 +1,8 @@
 import { Button } from '@/components/ui/button';
-import { addMonths, format, isSameMonth, subMonths } from 'date-fns';
+import { useLocale } from '@/hooks/use-locale';
+import { formatMonthYear } from '@/utils/date';
+import { __ } from '@/utils/i18n';
+import { addMonths, isSameMonth, subMonths } from 'date-fns';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 interface PeriodNavigationProps {
@@ -11,6 +14,7 @@ export function PeriodNavigation({
     currentDate,
     onDateChange,
 }: PeriodNavigationProps) {
+    const locale = useLocale();
     const now = new Date();
     const isCurrentMonth = isSameMonth(currentDate, now);
 
@@ -32,7 +36,7 @@ export function PeriodNavigation({
                 variant="outline"
                 size="icon-sm"
                 onClick={handlePrevMonth}
-                aria-label="Previous month"
+                aria-label={__('Previous month')}
             >
                 <ChevronLeft className="size-4" />
             </Button>
@@ -41,7 +45,7 @@ export function PeriodNavigation({
                 onClick={handleCurrentMonth}
                 className="min-w-[140px] rounded-md px-3 py-1.5 text-center text-sm font-medium hover:bg-accent"
             >
-                {format(currentDate, 'MMMM yyyy')}
+                {formatMonthYear(currentDate, locale)}
             </button>
 
             <Button
@@ -49,7 +53,7 @@ export function PeriodNavigation({
                 size="icon-sm"
                 onClick={handleNextMonth}
                 disabled={isCurrentMonth}
-                aria-label="Next month"
+                aria-label={__('Next month')}
             >
                 <ChevronRight className="size-4" />
             </Button>

resources/js/components/cashflow/savings-rate-card.tsx

@@ -7,6 +7,7 @@ import {
 } from '@/components/ui/card';
 import { CashflowSummary } from '@/hooks/use-cashflow-data';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { TrendingDown, TrendingUp } from 'lucide-react';
 
 interface SavingsRateCardProps {
@@ -25,7 +26,7 @@ export function SavingsRateCard({
             <Card>
                 <CardHeader className="pb-2">
                     <CardTitle className="text-sm font-medium">
-                        Savings Rate
+                        {__('Savings Rate')}
                     </CardTitle>
                 </CardHeader>
                 <CardContent>
@@ -53,9 +54,11 @@ export function SavingsRateCard({
         <Card>
             <CardHeader className="pb-2">
                 <CardTitle className="text-sm font-medium">
-                    Savings Rate
+                    {__('Savings Rate')}
                 </CardTitle>
-                <CardDescription>Percentage of income saved</CardDescription>
+                <CardDescription>
+                    {__('Percentage of income saved')}
+                </CardDescription>
             </CardHeader>
             <CardContent>
                 <div className="flex items-baseline gap-2">
@@ -83,12 +86,12 @@ export function SavingsRateCard({
                 </div>
                 <p className="mt-2 text-xs text-muted-foreground">
                     {current.savings_rate >= 20
-                        ? "Great job! You're saving well."
+                        ? __("Great job! You're saving well.")
                         : current.savings_rate >= 10
-                          ? 'Good progress on your savings.'
+                          ? __('Good progress on your savings.')
                           : current.savings_rate >= 0
-                            ? 'Consider saving more if possible.'
+                            ? __('Consider saving more if possible.')
-                            : 'Spending exceeds income this period.'}
+                            : __('Spending exceeds income this period.')}
                 </p>
             </CardContent>
         </Card>

resources/js/components/categories/create-category-dialog.tsx

@@ -25,6 +25,7 @@ import {
     CATEGORY_TYPES,
     getCategoryColorClasses,
 } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 import * as Icons from 'lucide-react';
 import { Info } from 'lucide-react';
@@ -41,13 +42,15 @@ export function CreateCategoryDialog({
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
-                <Button>Create Category</Button>
+                <Button>{__('Create Category')}</Button>
             </DialogTrigger>
             <DialogContent hasKeyboard className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Create Category</DialogTitle>
+                    <DialogTitle>{__('Create Category')}</DialogTitle>
                     <DialogDescription>
-                        Add a new category to organize your transactions.
+                        {__(
+                            'Add a new category to organize your transactions.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <Form
@@ -61,13 +64,14 @@ export function CreateCategoryDialog({
                     {({ errors, processing }) => (
                         <>
                             <div className="space-y-2">
-                                <Label htmlFor="name">Name</Label>
+                                <Label htmlFor="name">{__('Name')}</Label>
                                 <Input
                                     id="name"
                                     name="name"
-                                    placeholder="Category name"
+                                    placeholder={__('Category name')}
                                     required
                                 />
+
                                 {errors.name && (
                                     <p className="text-sm text-red-500">
                                         {errors.name}
@@ -76,10 +80,12 @@ export function CreateCategoryDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="icon">Icon</Label>
+                                <Label htmlFor="icon">{__('Icon')}</Label>
                                 <Select name="icon" required>
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select an icon" />
+                                        <SelectValue
+                                            placeholder={__('Select an icon')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {CATEGORY_ICONS.map((iconName) => {
@@ -108,10 +114,12 @@ export function CreateCategoryDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="color">Color</Label>
+                                <Label htmlFor="color">{__('Color')}</Label>
                                 <Select name="color" required>
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select a color" />
+                                        <SelectValue
+                                            placeholder={__('Select a color')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {CATEGORY_COLORS.map((color) => {
@@ -126,7 +134,7 @@ export function CreateCategoryDialog({
                                                         <Badge
                                                             className={`${colorClasses.bg} ${colorClasses.text}`}
                                                         >
-                                                            {color}
+                                                            {__(color)}
                                                         </Badge>
                                                     </div>
                                                 </SelectItem>
@@ -142,14 +150,16 @@ export function CreateCategoryDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="type">Type</Label>
+                                <Label htmlFor="type">{__('Type')}</Label>
                                 <Select
                                     name="type"
                                     required
                                     onValueChange={setSelectedType}
                                 >
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select a type" />
+                                        <SelectValue
+                                            placeholder={__('Select a type')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {CATEGORY_TYPES.map((type) => (
@@ -169,11 +179,9 @@ export function CreateCategoryDialog({
                                     <Alert>
                                         <Info className="h-4 w-4 opacity-50" />
                                         <AlertDescription className="text-sm">
-                                            Transactions in this category will
+                                            {__(
-                                            not be counted in top expenses or
+                                                'Transactions in this category will\n                                            not be counted in top expenses or\n                                            income. Transfer categories are\n                                            mainly used for transactions between\n                                            accounts.',
-                                            income. Transfer categories are
+                                            )}
-                                            mainly used for transactions between
-                                            accounts.
                                         </AlertDescription>
                                     </Alert>
                                 )}
@@ -186,7 +194,7 @@ export function CreateCategoryDialog({
                                     onClick={() => setOpen(false)}
                                     disabled={processing}
                                 >
-                                    Cancel
+                                    {__('Cancel')}
                                 </Button>
                                 <Button type="submit" disabled={processing}>
                                     {processing ? 'Creating...' : 'Create'}

resources/js/components/categories/delete-category-dialog.tsx

@@ -9,6 +9,7 @@ import {
     DialogTitle,
 } from '@/components/ui/dialog';
 import { type Category } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 
 interface DeleteCategoryDialogProps {
@@ -28,10 +29,13 @@ export function DeleteCategoryDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Delete Category</DialogTitle>
+                    <DialogTitle>{__('Delete Category')}</DialogTitle>
                     <DialogDescription>
-                        Are you sure you want to delete "{category.name}"? This
+                        {__('Are you sure you want to delete "')}
-                        action cannot be undone.
+                        {category.name}
+                        {__(
+                            '"? This\n                        action cannot be undone.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <Form
@@ -49,7 +53,7 @@ export function DeleteCategoryDialog({
                                 onClick={() => onOpenChange(false)}
                                 disabled={processing}
                             >
-                                Cancel
+                                {__('Cancel')}
                             </Button>
                             <Button
                                 type="submit"

resources/js/components/categories/edit-category-dialog.tsx

@@ -25,6 +25,7 @@ import {
     getCategoryColorClasses,
     type Category,
 } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 import * as Icons from 'lucide-react';
 import { Info } from 'lucide-react';
@@ -49,9 +50,9 @@ export function EditCategoryDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent hasKeyboard className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Edit Category</DialogTitle>
+                    <DialogTitle>{__('Edit Category')}</DialogTitle>
                     <DialogDescription>
-                        Update the category information.
+                        {__('Update the category information.')}
                     </DialogDescription>
                 </DialogHeader>
                 <Form
@@ -65,14 +66,15 @@ export function EditCategoryDialog({
                     {({ errors, processing }) => (
                         <>
                             <div className="space-y-2">
-                                <Label htmlFor="name">Name</Label>
+                                <Label htmlFor="name">{__('Name')}</Label>
                                 <Input
                                     id="name"
                                     name="name"
                                     defaultValue={category.name}
-                                    placeholder="Category name"
+                                    placeholder={__('Category name')}
                                     required
                                 />
+
                                 {errors.name && (
                                     <p className="text-sm text-red-500">
                                         {errors.name}
@@ -81,14 +83,16 @@ export function EditCategoryDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="icon">Icon</Label>
+                                <Label htmlFor="icon">{__('Icon')}</Label>
                                 <Select
                                     name="icon"
                                     defaultValue={category.icon}
                                     required
                                 >
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select an icon" />
+                                        <SelectValue
+                                            placeholder={__('Select an icon')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {CATEGORY_ICONS.map((iconName) => {
@@ -117,14 +121,16 @@ export function EditCategoryDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="color">Color</Label>
+                                <Label htmlFor="color">{__('Color')}</Label>
                                 <Select
                                     name="color"
                                     defaultValue={category.color}
                                     required
                                 >
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select a color" />
+                                        <SelectValue
+                                            placeholder={__('Select a color')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {CATEGORY_COLORS.map((color) => {
@@ -139,7 +145,7 @@ export function EditCategoryDialog({
                                                         <Badge
                                                             className={`${colorClasses.bg} ${colorClasses.text}`}
                                                         >
-                                                            {color}
+                                                            {__(color)}
                                                         </Badge>
                                                     </div>
                                                 </SelectItem>
@@ -155,7 +161,7 @@ export function EditCategoryDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="type">Type</Label>
+                                <Label htmlFor="type">{__('Type')}</Label>
                                 <Select
                                     name="type"
                                     defaultValue={category.type}
@@ -163,7 +169,9 @@ export function EditCategoryDialog({
                                     onValueChange={setSelectedType}
                                 >
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select a type" />
+                                        <SelectValue
+                                            placeholder={__('Select a type')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {CATEGORY_TYPES.map((type) => (
@@ -183,11 +191,9 @@ export function EditCategoryDialog({
                                     <Alert>
                                         <Info className="h-4 w-4 opacity-50" />
                                         <AlertDescription className="text-sm">
-                                            Transactions in this category will
+                                            {__(
-                                            not be counted in top expenses or
+                                                'Transactions in this category will\n                                            not be counted in top expenses or\n                                            income. Transfer categories are\n                                            mainly used for transactions between\n                                            accounts.',
-                                            income. Transfer categories are
+                                            )}
-                                            mainly used for transactions between
-                                            accounts.
                                         </AlertDescription>
                                     </Alert>
                                 )}
@@ -200,10 +206,12 @@ export function EditCategoryDialog({
                                     onClick={() => onOpenChange(false)}
                                     disabled={processing}
                                 >
-                                    Cancel
+                                    {__('Cancel')}
                                 </Button>
                                 <Button type="submit" disabled={processing}>
-                                    {processing ? 'Updating...' : 'Update'}
+                                    {processing
+                                        ? __('Updating...')
+                                        : __('Update')}
                                 </Button>
                             </div>
                         </>

resources/js/components/charts/cashflow-trend-chart.tsx

@@ -8,7 +8,10 @@ import {
 } from '@/components/ui/card';
 import { ChartConfig, ChartContainer } from '@/components/ui/chart';
 import { TrendDataPoint } from '@/hooks/use-cashflow-data';
+import { useLocale } from '@/hooks/use-locale';
 import { cn } from '@/lib/utils';
+import { formatCompactNumber, formatMonthFromYearMonth } from '@/utils/date';
+import { __ } from '@/utils/i18n';
 import { useEffect, useRef } from 'react';
 import {
     Bar,
@@ -28,21 +31,6 @@ interface CashflowTrendChartProps {
     currency?: string;
 }
 
-const chartConfig: ChartConfig = {
-    income: {
-        label: 'Income',
-        color: 'var(--color-chart-2)',
-    },
-    expense: {
-        label: 'Expenses',
-        color: 'var(--color-chart-5)',
-    },
-    net: {
-        label: 'Net',
-        color: 'var(--color-chart-1)',
-    },
-};
-
 interface TooltipPayloadItem {
     dataKey?: string;
     value?: number;
@@ -57,24 +45,13 @@ interface CustomTooltipProps {
     currency?: string;
 }
 
-function formatMonth(yearMonth: string): string {
-    const [year, month] = yearMonth.split('-');
-    const date = new Date(parseInt(year), parseInt(month) - 1);
-    const isCurrentYear = date.getFullYear() === new Date().getFullYear();
-
-    return date.toLocaleDateString(
-        'en-US',
-        isCurrentYear
-            ? { month: 'short' }
-            : { year: '2-digit', month: 'short' },
-    );
-}
-
 function CustomTooltip({
     active,
     payload,
     currency = 'USD',
 }: CustomTooltipProps) {
+    const locale = useLocale();
+
     if (!active || !payload?.length) return null;
 
     const data = payload[0].payload;
@@ -82,12 +59,14 @@ function CustomTooltip({
 
     return (
         <div className="rounded-lg border border-border/50 bg-background px-3 py-2 text-xs shadow-xl">
-            <div className="mb-2 font-medium">{formatMonth(data.month)}</div>
+            <div className="mb-2 font-medium">
+                {formatMonthFromYearMonth(data.month, locale)}
+            </div>
             <div className="space-y-1">
                 <div className="flex items-center justify-between gap-4">
                     <span className="flex items-center gap-2">
                         <span className="size-2 rounded-full bg-[var(--color-chart-2)]" />
-                        Income
+                        {__('Income')}
                     </span>
                     <AmountDisplay
                         amountInCents={data.income}
@@ -100,7 +79,7 @@ function CustomTooltip({
                 <div className="flex items-center justify-between gap-4">
                     <span className="flex items-center gap-2">
                         <span className="size-2 rounded-full bg-[var(--color-chart-5)]" />
-                        Expenses
+                        {__('Expenses')}
                     </span>
                     <AmountDisplay
                         amountInCents={data.expense}
@@ -113,7 +92,7 @@ function CustomTooltip({
                 <div className="flex items-center justify-between gap-4 border-t pt-1">
                     <span className="flex items-center gap-2">
                         <span className="size-2 rounded-full bg-[var(--color-chart-1)]" />
-                        Net
+                        {__('Net')}
                     </span>
                     <AmountDisplay
                         amountInCents={data.net}
@@ -137,9 +116,25 @@ export function CashflowTrendChart({
     className,
     currency = 'USD',
 }: CashflowTrendChartProps) {
+    const locale = useLocale();
     const scrollContainerRef = useRef<HTMLDivElement>(null);
     const minChartWidth = data.length * 60;
 
+    const chartConfig: ChartConfig = {
+        income: {
+            label: __('Income'),
+            color: 'var(--color-chart-2)',
+        },
+        expense: {
+            label: __('Expenses'),
+            color: 'var(--color-chart-5)',
+        },
+        net: {
+            label: __('Net'),
+            color: 'var(--color-chart-1)',
+        },
+    };
+
     useEffect(() => {
         if (scrollContainerRef.current) {
             scrollContainerRef.current.scrollLeft =
@@ -151,7 +146,9 @@ export function CashflowTrendChart({
         return (
             <Card className={className}>
                 <CardHeader>
-                    <CardTitle className="text-base">Cashflow Trend</CardTitle>
+                    <CardTitle className="text-base">
+                        {__('Cashflow Trend')}
+                    </CardTitle>
                 </CardHeader>
                 <CardContent>
                     <div className="h-[250px] animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
@@ -163,10 +160,13 @@ export function CashflowTrendChart({
     return (
         <Card className={className}>
             <CardHeader className="gap-1 pb-4">
-                <CardTitle className="text-base">Cashflow Trend</CardTitle>
+                <CardTitle className="text-base">
+                    {__('Cashflow Trend')}
+                </CardTitle>
                 <CardDescription>
-                    Monthly income, expenses, and net cashflow over the last 12
+                    {__(
-                    months
+                        'Monthly income, expenses, and net cashflow over the last 12 months',
+                    )}
                 </CardDescription>
             </CardHeader>
             <CardContent>
@@ -183,33 +183,36 @@ export function CashflowTrendChart({
                                 stroke="var(--color-border)"
                                 opacity={0.3}
                             />
+
                             <XAxis
                                 dataKey="month"
                                 tickLine={false}
                                 tickMargin={10}
                                 axisLine={false}
-                                tickFormatter={formatMonth}
+                                tickFormatter={(value) =>
+                                    formatMonthFromYearMonth(value, locale)
+                                }
                             />
+
                             <YAxis
                                 tickLine={false}
                                 axisLine={false}
-                                tickFormatter={(value: number) => {
+                                tickFormatter={(value: number) =>
-                                    return new Intl.NumberFormat('en-US', {
+                                    formatCompactNumber(
-                                        notation: 'compact',
+                                        value / 100,
-                                        compactDisplay: 'short',
+                                        locale,
-                                        style: 'currency',
+                                        currency,
-                                        currency: currency,
+                                    )
-                                        minimumFractionDigits: 0,
+                                }
-                                        maximumFractionDigits: 0,
-                                    }).format(value / 100);
-                                }}
                                 width={60}
                             />
+
                             <ReferenceLine
                                 y={0}
                                 stroke="var(--color-border)"
                                 strokeDasharray="3 3"
                             />
+
                             <Tooltip
                                 content={<CustomTooltip currency={currency} />}
                                 cursor={{
@@ -217,6 +220,7 @@ export function CashflowTrendChart({
                                     opacity: 0.3,
                                 }}
                             />
+
                             <Bar
                                 dataKey="income"
                                 fill="var(--color-chart-2)"
@@ -224,6 +228,7 @@ export function CashflowTrendChart({
                                 stackId="a"
                                 name="Income"
                             />
+
                             <Bar
                                 dataKey="expense"
                                 fill="var(--color-chart-5)"
@@ -231,6 +236,7 @@ export function CashflowTrendChart({
                                 stackId="b"
                                 name="Expenses"
                             />
+
                             <Line
                                 type="monotone"
                                 dataKey="net"
@@ -250,15 +256,15 @@ export function CashflowTrendChart({
                 <div className="mt-4 flex items-center justify-center gap-6 text-xs">
                     <div className="flex items-center gap-2">
                         <span className="size-3 rounded bg-[var(--color-chart-2)]" />
-                        <span>Income</span>
+                        <span>{__('Income')}</span>
                     </div>
                     <div className="flex items-center gap-2">
                         <span className="size-3 rounded bg-[var(--color-chart-5)]" />
-                        <span>Expenses</span>
+                        <span>{__('Expenses')}</span>
                     </div>
                     <div className="flex items-center gap-2">
                         <span className="size-3 rounded-full bg-[var(--color-chart-1)]" />
-                        <span>Net</span>
+                        <span>{__('Net')}</span>
                     </div>
                 </div>
             </CardContent>

resources/js/components/charts/mom-chart.tsx

@@ -2,6 +2,7 @@ import { AmountDisplay } from '@/components/ui/amount-display';
 import { ChartConfig, ChartContainer } from '@/components/ui/chart';
 import { ChangeDataPoint } from '@/lib/chart-calculations';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { useEffect, useRef } from 'react';
 import {
     Bar,
@@ -54,7 +55,7 @@ function CustomTooltip({ active, payload, currencyCode }: CustomTooltipProps) {
         <div className="rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl">
             <div className="font-medium">{data.month}</div>
             <div className="mt-1 flex items-center justify-between gap-4">
-                <span className="text-muted-foreground">Change</span>
+                <span className="text-muted-foreground">{__('Change')}</span>
                 <span
                     className={cn(
                         'font-mono font-medium tabular-nums',
@@ -114,6 +115,7 @@ export function MoMChart({
                         axisLine={false}
                         tickFormatter={xAxisFormatter}
                     />
+
                     <YAxis
                         tickLine={false}
                         axisLine={false}
@@ -125,15 +127,18 @@ export function MoMChart({
                         }}
                         width={50}
                     />
+
                     <ReferenceLine
                         y={0}
                         stroke="var(--color-border)"
                         strokeDasharray="3 3"
                     />
+
                     <Tooltip
                         content={<CustomTooltip currencyCode={currencyCode} />}
                         cursor={{ fill: 'var(--color-muted)', opacity: 0.3 }}
                     />
+
                     <Bar dataKey="displayValue" radius={[4, 4, 0, 0]}>
                         {chartData.map((entry, index) => {
                             const value = entry.displayValue;

resources/js/components/charts/mom-percent-chart.tsx

@@ -1,6 +1,7 @@
 import { ChartConfig, ChartContainer } from '@/components/ui/chart';
 import { formatPercentValue, PercentDataPoint } from '@/lib/chart-calculations';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { useEffect, useRef } from 'react';
 import {
     Bar,
@@ -51,7 +52,7 @@ function CustomTooltip({ active, payload }: CustomTooltipProps) {
         <div className="rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl">
             <div className="font-medium">{data.month}</div>
             <div className="mt-1 flex items-center justify-between gap-4">
-                <span className="text-muted-foreground">Change</span>
+                <span className="text-muted-foreground">{__('Change')}</span>
                 <span
                     className={cn(
                         'font-mono font-medium tabular-nums',
@@ -105,6 +106,7 @@ export function MoMPercentChart({
                         axisLine={false}
                         tickFormatter={xAxisFormatter}
                     />
+
                     <YAxis
                         tickLine={false}
                         axisLine={false}
@@ -113,15 +115,18 @@ export function MoMPercentChart({
                         }
                         width={50}
                     />
+
                     <ReferenceLine
                         y={0}
                         stroke="var(--color-border)"
                         strokeDasharray="3 3"
                     />
+
                     <Tooltip
                         content={<CustomTooltip />}
                         cursor={{ fill: 'var(--color-muted)', opacity: 0.3 }}
                     />
+
                     <Bar dataKey="displayValue" radius={[4, 4, 0, 0]}>
                         {chartData.map((entry, index) => {
                             const value = entry.displayValue;

resources/js/components/charts/sankey-chart.tsx

@@ -12,6 +12,7 @@ import {
 } from '@/lib/sankey-utils';
 import { cn } from '@/lib/utils';
 import { Category } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { useMemo, useState } from 'react';
 
 interface SankeyChartProps {
@@ -75,10 +76,11 @@ function OtherCategoriesBreakdown({
             <div className="space-y-3">
                 <div>
                     <h4 className="text-sm font-medium">
-                        Other Categories ({categories.length})
+                        {__('Other Categories (')}
+                        {categories.length})
                     </h4>
                     <p className="text-xs text-muted-foreground">
-                        Categories below 5% of total
+                        {__('Categories below 5% of total')}
                     </p>
                 </div>
 
@@ -102,6 +104,7 @@ function OtherCategoriesBreakdown({
                                                 'var(--color-chart-4)',
                                         }}
                                     />
+
                                     <span className="truncate">
                                         {item.category.name}
                                     </span>
@@ -122,7 +125,7 @@ function OtherCategoriesBreakdown({
                 <Separator />
 
                 <div className="flex items-center justify-between text-sm font-medium">
-                    <span>Total</span>
+                    <span>{__('Total')}</span>
                     <span>{formatAmount(total, currency)}</span>
                 </div>
             </div>
@@ -201,7 +204,7 @@ export function SankeyChart({
             );
             const otherNode: NodeData = {
                 id: 'income-other',
-                label: 'Other',
+                label: __('Other'),
                 value: groupedIncome.other.total,
                 color: 'var(--color-muted)',
                 y: incomeY,
@@ -223,7 +226,7 @@ export function SankeyChart({
         const centerY = (height - centerHeight) / 2;
         const centerNode: NodeData = {
             id: 'center',
-            label: 'Cashflow',
+            label: __('Cashflow'),
             value: total_income - total_expense,
             color: 'var(--color-chart-1)',
             y: centerY,
@@ -267,7 +270,7 @@ export function SankeyChart({
             );
             const otherNode: NodeData = {
                 id: 'expense-other',
-                label: 'Other',
+                label: __('Other'),
                 value: groupedExpense.other.total,
                 color: 'var(--color-muted)',
                 y: expenseY,
@@ -334,7 +337,7 @@ export function SankeyChart({
                 )}
                 style={{ height }}
             >
-                No cashflow data for this period
+                {__('No cashflow data for this period')}
             </div>
         );
     }
@@ -453,6 +456,7 @@ export function SankeyChart({
                                     strokeWidth={isOtherNode ? 1 : 0}
                                     className="transition-all duration-200"
                                 />
+
                                 {/* Label */}
                                 <text
                                     x={

resources/js/components/dashboard/account-balance-card.tsx

@@ -4,6 +4,7 @@ import { EncryptedText } from '@/components/encrypted-text';
 import { AmountDisplay } from '@/components/ui/amount-display';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { AccountWithMetrics } from '@/hooks/use-dashboard-data';
+import { __ } from '@/utils/i18n';
 import { Link } from '@inertiajs/react';
 import { useState } from 'react';
 import { Line, LineChart, ResponsiveContainer, Tooltip } from 'recharts';
@@ -27,7 +28,7 @@ export function AccountBalanceCard({
             <Card>
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                     <CardTitle className="text-sm font-medium">
-                        Loading...
+                        {__('Loading...')}
                     </CardTitle>
                 </CardHeader>
                 <CardContent>
@@ -87,7 +88,7 @@ export function AccountBalanceCard({
                         <AmountTrendIndicator
                             isPositive={isPositive}
                             trend={Math.abs(account.diff)}
-                            label="vs last month"
+                            label={__('vs last month')}
                             className="text-sm"
                             previousAmount={account.previousBalance}
                             currentAmount={account.currentBalance}
@@ -125,6 +126,7 @@ export function AccountBalanceCard({
                                         );
                                     }}
                                 />
+
                                 <Line
                                     type="monotone"
                                     dataKey="value"

resources/js/components/dashboard/cashflow-summary-card.tsx

@@ -9,6 +9,7 @@ import {
 import { cn } from '@/lib/utils';
 import { cashflow } from '@/routes';
 import { SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Link, usePage } from '@inertiajs/react';
 import { endOfMonth, format, startOfMonth } from 'date-fns';
 import { ArrowRight, TrendingDown, TrendingUp } from 'lucide-react';
@@ -61,7 +62,7 @@ export function CashflowSummaryCard({ loading }: CashflowSummaryCardProps) {
         return (
             <Card className="col-span-3">
                 <CardHeader>
-                    <CardTitle>Cashflow</CardTitle>
+                    <CardTitle>{__('Cashflow')}</CardTitle>
                 </CardHeader>
                 <CardContent>
                     <div className="grid grid-cols-3 gap-4">
@@ -88,24 +89,27 @@ export function CashflowSummaryCard({ loading }: CashflowSummaryCardProps) {
         <Card className="col-span-3">
             <CardHeader className="gap-1">
                 <div className="flex items-center justify-between">
-                    <CardTitle>Cashflow</CardTitle>
+                    <CardTitle>{__('Cashflow')}</CardTitle>
                     <Link
                         href={cashflow().url}
                         className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
                     >
-                        View details
+                        {__('View details')}
+
                         <ArrowRight className="size-4" />
                     </Link>
                 </div>
                 <CardDescription>
-                    This month's income and expenses
+                    {__("This month's income and expenses")}
                 </CardDescription>
             </CardHeader>
             <CardContent>
                 <div className="grid grid-cols-3 gap-4">
                     {/* Income */}
                     <div>
-                        <p className="text-xs text-muted-foreground">Income</p>
+                        <p className="text-xs text-muted-foreground">
+                            {__('Income')}
+                        </p>
                         <AmountDisplay
                             amountInCents={current.income}
                             currencyCode={auth.user.currency_code}
@@ -119,7 +123,7 @@ export function CashflowSummaryCard({ loading }: CashflowSummaryCardProps) {
                     {/* Expenses */}
                     <div>
                         <p className="text-xs text-muted-foreground">
-                            Expenses
+                            {__('Expenses')}
                         </p>
                         <AmountDisplay
                             amountInCents={current.expense}
@@ -132,7 +136,9 @@ export function CashflowSummaryCard({ loading }: CashflowSummaryCardProps) {
 
                     {/* Net */}
                     <div>
-                        <p className="text-xs text-muted-foreground">Net</p>
+                        <p className="text-xs text-muted-foreground">
+                            {__('Net')}
+                        </p>
                         <div className="flex items-center gap-1">
                             {isPositiveNet ? (
                                 <TrendingUp className="size-4 text-green-600 dark:text-green-400" />
@@ -154,7 +160,7 @@ export function CashflowSummaryCard({ loading }: CashflowSummaryCardProps) {
                 {/* Savings rate footer */}
                 <div className="mt-4 flex items-center justify-between border-t pt-3">
                     <span className="text-xs text-muted-foreground">
-                        Savings rate
+                        {__('Savings rate')}
                     </span>
                     <span
                         className={cn(

resources/js/components/dashboard/net-worth-chart.tsx

@@ -16,7 +16,9 @@ import { ChartConfig } from '@/components/ui/chart';
 import { StackedBarChart } from '@/components/ui/stacked-bar-chart';
 import { useChartViews } from '@/hooks/use-chart-views';
 import { NetWorthEvolutionData } from '@/hooks/use-dashboard-data';
+import { useLocale } from '@/hooks/use-locale';
 import { AccountInfo } from '@/lib/chart-calculations';
+import { __ } from '@/utils/i18n';
 import { useMemo } from 'react';
 import { PercentageTrendIndicator } from './percentage-trend-indicator';
 
@@ -32,10 +34,10 @@ interface TrendData {
     currentAmount: number;
 }
 
-function formatXAxisLabel(value: string): string {
+function formatXAxisLabel(value: string, locale: string = 'en'): string {
     const [year, month] = value.split('-');
     const date = new Date(parseInt(year), parseInt(month) - 1);
-    const monthName = date.toLocaleString('en-US', { month: 'short' });
+    const monthName = date.toLocaleString(locale, { month: 'short' });
     const currentYear = new Date().getFullYear();
 
     if (parseInt(year) === currentYear) {
@@ -138,6 +140,7 @@ export function NetWorthChart({
     loading,
     showLegend = false,
 }: NetWorthChartProps) {
+    const locale = useLocale();
     const {
         chartData,
         dataKeys,
@@ -240,7 +243,7 @@ export function NetWorthChart({
         return (
             <Card className="col-span-3">
                 <CardHeader>
-                    <CardTitle>Net Worth Evolution</CardTitle>
+                    <CardTitle>{__('Net Worth Evolution')}</CardTitle>
                     <CardDescription>
                         <div className="h-4 w-48 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
                     </CardDescription>
@@ -256,11 +259,11 @@ export function NetWorthChart({
         return (
             <Card className="col-span-3">
                 <CardHeader>
-                    <CardTitle>Net Worth Evolution</CardTitle>
+                    <CardTitle>{__('Net Worth Evolution')}</CardTitle>
                 </CardHeader>
                 <CardContent>
                     <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-                        No account data available
+                        {__('No account data available')}
                     </div>
                 </CardContent>
             </Card>
@@ -272,21 +275,22 @@ export function NetWorthChart({
             <CardHeader>
                 <div className="flex flex-row items-start justify-between gap-4">
                     <div className="flex min-w-0 flex-col gap-2">
-                        <CardTitle>Net Worth Evolution</CardTitle>
+                        <CardTitle>{__('Net Worth Evolution')}</CardTitle>
                         <CardDescription className="flex flex-col gap-1 text-sm">
                             <div className="text-foreground">
                                 <TotalDisplay totals={currencyTotals} />
                             </div>
                             <PercentageTrendIndicator
                                 trend={monthlyTrend?.percentage ?? null}
-                                label="this month"
+                                label={__('this month')}
                                 previousAmount={monthlyTrend?.previousAmount}
                                 currentAmount={monthlyTrend?.currentAmount}
                                 currencyCode={primaryCurrency}
                             />
+
                             <PercentageTrendIndicator
                                 trend={yearlyTrend?.percentage ?? null}
-                                label="for the last 12 months"
+                                label={__('for the last 12 months')}
                                 previousAmount={yearlyTrend?.previousAmount}
                                 currentAmount={yearlyTrend?.currentAmount}
                                 currencyCode={primaryCurrency}
@@ -308,7 +312,9 @@ export function NetWorthChart({
                         dataKeys={dataKeys}
                         config={chartConfig}
                         xAxisKey="month"
-                        xAxisFormatter={formatXAxisLabel}
+                        xAxisFormatter={(value) =>
+                            formatXAxisLabel(value, locale)
+                        }
                         valueFormatter={valueFormatter}
                         accountCurrencies={accountCurrencies}
                         className="h-[300px] w-full"
@@ -319,14 +325,18 @@ export function NetWorthChart({
                     <MoMChart
                         data={chartViews.deltaSeries}
                         currencyCode={primaryCurrency}
-                        xAxisFormatter={formatXAxisLabel}
+                        xAxisFormatter={(value) =>
+                            formatXAxisLabel(value, locale)
+                        }
                         className="h-[300px] w-full"
                     />
                 )}
                 {chartViews.currentView === 'mom_percent' && (
                     <MoMPercentChart
                         data={chartViews.momPercentSeries}
-                        xAxisFormatter={formatXAxisLabel}
+                        xAxisFormatter={(value) =>
+                            formatXAxisLabel(value, locale)
+                        }
                         className="h-[300px] w-full"
                     />
                 )}

resources/js/components/dashboard/top-categories-card.tsx

@@ -10,6 +10,7 @@ import { Progress } from '@/components/ui/progress';
 import { cn } from '@/lib/utils';
 import { SharedData } from '@/types';
 import { Category, getCategoryColorClasses } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { usePage } from '@inertiajs/react';
 import * as Icons from 'lucide-react';
 import { LucideIcon } from 'lucide-react';
@@ -50,7 +51,7 @@ export function TopCategoriesCard({
         return (
             <Card className="w-full">
                 <CardHeader>
-                    <CardTitle>Top Spending Categories</CardTitle>
+                    <CardTitle>{__('Top Spending Categories')}</CardTitle>
                 </CardHeader>
                 <CardContent>
                     <div className="space-y-4">
@@ -73,8 +74,8 @@ export function TopCategoriesCard({
     return (
         <Card className="w-full">
             <CardHeader className="gap-2">
-                <CardTitle>Top spending categories</CardTitle>
+                <CardTitle>{__('Top spending categories')}</CardTitle>
-                <CardDescription>on the last 30 days</CardDescription>
+                <CardDescription>{__('on the last 30 days')}</CardDescription>
             </CardHeader>
             <CardContent>
                 <div className="space-y-4">
@@ -147,7 +148,7 @@ export function TopCategoriesCard({
                     })}
                     {categories.length === 0 && (
                         <div className="py-8 text-center text-muted-foreground">
-                            No spending data this month
+                            {__('No spending data this month')}
                         </div>
                     )}
                 </div>

resources/js/components/delete-user.tsx

@@ -15,6 +15,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { type SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Form, usePage } from '@inertiajs/react';
 import { InfoIcon } from 'lucide-react';
 import { useRef } from 'react';
@@ -28,13 +29,16 @@ export default function DeleteUser() {
         return (
             <div className="space-y-6">
                 <HeadingSmall
-                    title="Delete account"
+                    title={__('Delete account')}
-                    description="Delete your account and all of its resources"
+                    description={__(
+                        'Delete your account and all of its resources',
+                    )}
                 />
+
                 <Alert>
                     <InfoIcon className="h-4 w-4" />
                     <AlertDescription>
-                        The demo account cannot be deleted.
+                        {__('The demo account cannot be deleted.')}
                     </AlertDescription>
                 </Alert>
             </div>
@@ -44,14 +48,17 @@ export default function DeleteUser() {
     return (
         <div className="space-y-6">
             <HeadingSmall
-                title="Delete account"
+                title={__('Delete account')}
-                description="Delete your account and all of its resources"
+                description={__('Delete your account and all of its resources')}
             />
+
             <div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
                 <div className="relative space-y-0.5 text-red-600 dark:text-red-100">
-                    <p className="font-medium">Warning</p>
+                    <p className="font-medium">{__('Warning')}</p>
                     <p className="text-sm">
-                        Please proceed with caution, this cannot be undone.
+                        {__(
+                            'Please proceed with caution, this cannot be undone.',
+                        )}
                     </p>
                 </div>
 
@@ -61,18 +68,19 @@ export default function DeleteUser() {
                             variant="destructive"
                             data-test="delete-user-button"
                         >
-                            Delete account
+                            {__('Delete account')}
                         </Button>
                     </DialogTrigger>
                     <DialogContent>
                         <DialogTitle>
-                            Are you sure you want to delete your account?
+                            {__(
+                                'Are you sure you want to delete your account?',
+                            )}
                         </DialogTitle>
                         <DialogDescription>
-                            Once your account is deleted, all of its resources
+                            {__(
-                            and data will also be permanently deleted. Please
+                                'Once your account is deleted, all of its resources\n                            and data will also be permanently deleted. Please\n                            enter your password to confirm you would like to\n                            permanently delete your account.',
-                            enter your password to confirm you would like to
+                            )}
-                            permanently delete your account.
                         </DialogDescription>
 
                         <Form
@@ -91,7 +99,7 @@ export default function DeleteUser() {
                                             htmlFor="password"
                                             className="sr-only"
                                         >
-                                            Password
+                                            {__('Password')}
                                         </Label>
 
                                         <Input
@@ -99,7 +107,7 @@ export default function DeleteUser() {
                                             type="password"
                                             name="password"
                                             ref={passwordInput}
-                                            placeholder="Password"
+                                            placeholder={__('Password')}
                                             autoComplete="current-password"
                                         />
 
@@ -114,7 +122,7 @@ export default function DeleteUser() {
                                                     resetAndClearErrors()
                                                 }
                                             >
-                                                Cancel
+                                                {__('Cancel')}
                                             </Button>
                                         </DialogClose>
 
@@ -127,7 +135,7 @@ export default function DeleteUser() {
                                                 type="submit"
                                                 data-test="confirm-delete-user-button"
                                             >
-                                                Delete account
+                                                {__('Delete account')}
                                             </button>
                                         </Button>
                                     </DialogFooter>

resources/js/components/encryption-key-button.tsx

@@ -1,5 +1,6 @@
 import { useEncryptionKey } from '@/contexts/encryption-key-context';
 import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
 import { LockKeyhole, LockKeyholeOpen } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Button } from './ui/button';
@@ -70,8 +71,8 @@ export function EncryptionKeyButton() {
                             onClick={handleClick}
                             aria-label={
                                 isKeySet
-                                    ? 'Lock encryption key'
+                                    ? __('Lock encryption key')
-                                    : 'Unlock encryption key'
+                                    : __('Unlock encryption key')
                             }
                         >
                             {isKeySet ? (
@@ -83,8 +84,8 @@ export function EncryptionKeyButton() {
                     </TooltipTrigger>
                     <TooltipContent>
                         {isKeySet
-                            ? 'Click to lock encryption key'
+                            ? __('Click to lock encryption key')
-                            : 'Click to unlock encryption key'}
+                            : __('Click to unlock encryption key')}
                     </TooltipContent>
                 </Tooltip>
             </TooltipProvider>
@@ -103,11 +104,11 @@ export function EncryptionKeyButton() {
             <Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
                 <DialogContent>
                     <DialogHeader>
-                        <DialogTitle>Clear Encryption Key?</DialogTitle>
+                        <DialogTitle>{__('Clear Encryption Key?')}</DialogTitle>
                         <DialogDescription>
-                            This will remove your encryption key from this
+                            {__(
-                            browser session. You'll need to enter your password
+                                "This will remove your encryption key from this browser session. You'll need to enter your password again to unlock encrypted content.",
-                            again to unlock encrypted content.
+                            )}
                         </DialogDescription>
                     </DialogHeader>
                     <DialogFooter>
@@ -115,9 +116,11 @@ export function EncryptionKeyButton() {
                             variant="outline"
                             onClick={() => setShowClearDialog(false)}
                         >
-                            Cancel
+                            {__('Cancel')}
+                        </Button>
+                        <Button onClick={handleClearKey}>
+                            {__('Clear Key')}
                         </Button>
-                        <Button onClick={handleClearKey}>Clear Key</Button>
                     </DialogFooter>
                 </DialogContent>
             </Dialog>

resources/js/components/labels/create-label-dialog.tsx

@@ -19,6 +19,7 @@ import {
     SelectValue,
 } from '@/components/ui/select';
 import { getLabelColorClasses, LABEL_COLORS } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 import { useState } from 'react';
 
@@ -28,13 +29,13 @@ export function CreateLabelDialog({ onSuccess }: { onSuccess?: () => void }) {
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
-                <Button>Create Label</Button>
+                <Button>{__('Create Label')}</Button>
             </DialogTrigger>
             <DialogContent hasKeyboard className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Create Label</DialogTitle>
+                    <DialogTitle>{__('Create Label')}</DialogTitle>
                     <DialogDescription>
-                        Add a new label to tag your transactions.
+                        {__('Add a new label to tag your transactions.')}
                     </DialogDescription>
                 </DialogHeader>
                 <Form
@@ -48,13 +49,14 @@ export function CreateLabelDialog({ onSuccess }: { onSuccess?: () => void }) {
                     {({ errors, processing }) => (
                         <>
                             <div className="space-y-2">
-                                <Label htmlFor="name">Name</Label>
+                                <Label htmlFor="name">{__('Name')}</Label>
                                 <Input
                                     id="name"
                                     name="name"
-                                    placeholder="Label name"
+                                    placeholder={__('Label name')}
                                     required
                                 />
+
                                 {errors.name && (
                                     <p className="text-sm text-red-500">
                                         {errors.name}
@@ -63,10 +65,12 @@ export function CreateLabelDialog({ onSuccess }: { onSuccess?: () => void }) {
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="color">Color</Label>
+                                <Label htmlFor="color">{__('Color')}</Label>
                                 <Select name="color" required>
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select a color" />
+                                        <SelectValue
+                                            placeholder={__('Select a color')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {LABEL_COLORS.map((color) => {
@@ -81,7 +85,7 @@ export function CreateLabelDialog({ onSuccess }: { onSuccess?: () => void }) {
                                                         <Badge
                                                             className={`${colorClasses.bg} ${colorClasses.text}`}
                                                         >
-                                                            {color}
+                                                            {__(color)}
                                                         </Badge>
                                                     </div>
                                                 </SelectItem>
@@ -103,7 +107,7 @@ export function CreateLabelDialog({ onSuccess }: { onSuccess?: () => void }) {
                                     onClick={() => setOpen(false)}
                                     disabled={processing}
                                 >
-                                    Cancel
+                                    {__('Cancel')}
                                 </Button>
                                 <Button type="submit" disabled={processing}>
                                     {processing ? 'Creating...' : 'Create'}

resources/js/components/labels/delete-label-dialog.tsx

@@ -9,6 +9,7 @@ import {
     DialogTitle,
 } from '@/components/ui/dialog';
 import { type Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 
 interface DeleteLabelDialogProps {
@@ -28,10 +29,13 @@ export function DeleteLabelDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Delete Label</DialogTitle>
+                    <DialogTitle>{__('Delete Label')}</DialogTitle>
                     <DialogDescription>
-                        Are you sure you want to delete "{label.name}"? This
+                        {__('Are you sure you want to delete "')}
-                        action cannot be undone.
+                        {label.name}
+                        {__(
+                            '"? This\n                        action cannot be undone.',
+                        )}
                     </DialogDescription>
                 </DialogHeader>
                 <Form
@@ -49,7 +53,7 @@ export function DeleteLabelDialog({
                                 onClick={() => onOpenChange(false)}
                                 disabled={processing}
                             >
-                                Cancel
+                                {__('Cancel')}
                             </Button>
                             <Button
                                 type="submit"

resources/js/components/labels/edit-label-dialog.tsx

@@ -22,6 +22,7 @@ import {
     LABEL_COLORS,
     type Label as LabelType,
 } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { Form } from '@inertiajs/react';
 
 interface EditLabelDialogProps {
@@ -41,9 +42,9 @@ export function EditLabelDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent hasKeyboard className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Edit Label</DialogTitle>
+                    <DialogTitle>{__('Edit Label')}</DialogTitle>
                     <DialogDescription>
-                        Update the label information.
+                        {__('Update the label information.')}
                     </DialogDescription>
                 </DialogHeader>
                 <Form
@@ -57,14 +58,15 @@ export function EditLabelDialog({
                     {({ errors, processing }) => (
                         <>
                             <div className="space-y-2">
-                                <Label htmlFor="name">Name</Label>
+                                <Label htmlFor="name">{__('Name')}</Label>
                                 <Input
                                     id="name"
                                     name="name"
                                     defaultValue={label.name}
-                                    placeholder="Label name"
+                                    placeholder={__('Label name')}
                                     required
                                 />
+
                                 {errors.name && (
                                     <p className="text-sm text-red-500">
                                         {errors.name}
@@ -73,14 +75,16 @@ export function EditLabelDialog({
                             </div>
 
                             <div className="space-y-2">
-                                <Label htmlFor="color">Color</Label>
+                                <Label htmlFor="color">{__('Color')}</Label>
                                 <Select
                                     name="color"
                                     defaultValue={label.color}
                                     required
                                 >
                                     <SelectTrigger>
-                                        <SelectValue placeholder="Select a color" />
+                                        <SelectValue
+                                            placeholder={__('Select a color')}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         {LABEL_COLORS.map((color) => {
@@ -95,7 +99,7 @@ export function EditLabelDialog({
                                                         <Badge
                                                             className={`${colorClasses.bg} ${colorClasses.text}`}
                                                         >
-                                                            {color}
+                                                            {__(color)}
                                                         </Badge>
                                                     </div>
                                                 </SelectItem>
@@ -117,7 +121,7 @@ export function EditLabelDialog({
                                     onClick={() => onOpenChange(false)}
                                     disabled={processing}
                                 >
-                                    Cancel
+                                    {__('Cancel')}
                                 </Button>
                                 <Button type="submit" disabled={processing}>
                                     {processing ? 'Updating...' : 'Update'}

resources/js/components/landing/install-app-button.tsx

@@ -7,6 +7,7 @@ import {
     DialogTitle,
 } from '@/components/ui/dialog';
 import { usePwaInstall } from '@/hooks/use-pwa-install';
+import { __ } from '@/utils/i18n';
 import { DownloadIcon, PlusSquareIcon, ShareIcon } from 'lucide-react';
 import { useState } from 'react';
 
@@ -26,7 +27,7 @@ export default function InstallAppButton() {
                 className="text-shadow h-14 w-full cursor-pointer bg-gradient-to-t from-zinc-700 to-zinc-900 text-base text-white shadow-sm transition-all hover:from-zinc-800 hover:to-black hover:shadow-md dark:bg-[#eeeeec] dark:from-zinc-200 dark:to-zinc-300 dark:text-[#1C1C1A] dark:hover:bg-white hover:dark:from-zinc-50 dark:hover:shadow-md"
             >
                 <DownloadIcon className="size-5" />
-                Install App
+                {__('Install App')}
             </Button>
         );
     }
@@ -39,16 +40,19 @@ export default function InstallAppButton() {
                     className="text-shadow h-14 w-full cursor-pointer bg-gradient-to-t from-zinc-700 to-zinc-900 text-base text-white shadow-sm transition-all hover:from-zinc-800 hover:to-black hover:shadow-md dark:bg-[#eeeeec] dark:from-zinc-200 dark:to-zinc-300 dark:text-[#1C1C1A] dark:hover:bg-white hover:dark:from-zinc-50 dark:hover:shadow-md"
                 >
                     <DownloadIcon className="size-5" />
-                    Install App
+                    {__('Install App')}
                 </Button>
 
                 <Dialog open={showIosDialog} onOpenChange={setShowIosDialog}>
                     <DialogContent className="max-w-sm">
                         <DialogHeader>
-                            <DialogTitle>Install Whisper Money</DialogTitle>
+                            <DialogTitle>
+                                {__('Install Whisper Money')}
+                            </DialogTitle>
                             <DialogDescription>
-                                Add the app to your home screen for the best
+                                {__(
-                                experience.
+                                    'Add the app to your home screen for the best experience.',
+                                )}
                             </DialogDescription>
                         </DialogHeader>
 
@@ -58,11 +62,11 @@ export default function InstallAppButton() {
                                     <ShareIcon className="size-5 text-zinc-600 dark:text-zinc-400" />
                                 </span>
                                 <span className="text-sm">
-                                    Tap the{' '}
+                                    {__('Tap the')}{' '}
                                     <strong className="font-semibold">
-                                        Share
+                                        {__('Share')}
                                     </strong>{' '}
-                                    button in your browser toolbar
+                                    {__('button in your browser toolbar')}
                                 </span>
                             </li>
                             <li className="flex items-center gap-4">
@@ -70,9 +74,9 @@ export default function InstallAppButton() {
                                     <PlusSquareIcon className="size-5 text-zinc-600 dark:text-zinc-400" />
                                 </span>
                                 <span className="text-sm">
-                                    Tap{' '}
+                                    {__('Tap')}{' '}
                                     <strong className="font-semibold">
-                                        Add to Home Screen
+                                        {__('Add to Home Screen')}
                                     </strong>
                                 </span>
                             </li>
@@ -83,7 +87,7 @@ export default function InstallAppButton() {
                             className="mt-2 w-full"
                             onClick={() => setShowIosDialog(false)}
                         >
-                            Got it
+                            {__('Got it')}
                         </Button>
                     </DialogContent>
                 </Dialog>

resources/js/components/nav-footer.tsx

@@ -8,6 +8,7 @@ import {
 } from '@/components/ui/sidebar';
 import { resolveUrl } from '@/lib/utils';
 import { type NavItem } from '@/types';
+import { __ } from '@/utils/i18n';
 import { LucideIcon } from 'lucide-react';
 import { isValidElement, type ComponentPropsWithoutRef } from 'react';
 
@@ -37,7 +38,7 @@ export function NavFooter({
                                     rel="noopener noreferrer"
                                 >
                                     <IconOrComponent icon={item.icon} />
-                                    <span>{item.title}</span>
+                                    <span>{__(item.title)}</span>
                                 </a>
                             </SidebarMenuButton>
                         </SidebarMenuItem>

resources/js/components/nav-main.tsx

@@ -7,13 +7,14 @@ import {
 } from '@/components/ui/sidebar';
 import { resolveUrl } from '@/lib/utils';
 import { type NavItem } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Link, usePage } from '@inertiajs/react';
 
 export function NavMain({ items = [] }: { items: NavItem[] }) {
     const page = usePage();
     return (
         <SidebarGroup className="px-2 py-0">
-            <SidebarGroupLabel>Platform</SidebarGroupLabel>
+            <SidebarGroupLabel>{__('Platform')}</SidebarGroupLabel>
             <SidebarMenu>
                 {items.map((item) => (
                     <SidebarMenuItem key={item.title}>
@@ -22,11 +23,11 @@ export function NavMain({ items = [] }: { items: NavItem[] }) {
                             isActive={page.url.startsWith(
                                 resolveUrl(item.href),
                             )}
-                            tooltip={{ children: item.title }}
+                            tooltip={{ children: __(item.title) }}
                         >
                             <Link href={item.href} prefetch>
                                 {item.icon && <item.icon />}
-                                <span>{item.title}</span>
+                                <span>{__(item.title)}</span>
                             </Link>
                         </SidebarMenuButton>
                     </SidebarMenuItem>

resources/js/components/onboarding/step-account-types.tsx

@@ -1,5 +1,6 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
+import { __ } from '@/utils/i18n';
 import {
     Banknote,
     Building2,
@@ -17,44 +18,44 @@ interface StepAccountTypesProps {
 const accountTypes = [
     {
         type: 'checking',
-        name: 'Checking',
+        nameKey: 'Checking',
         icon: Wallet,
-        description: 'Daily spending and transactions',
+        descriptionKey: 'Daily spending and transactions',
         hasTransactions: true,
     },
     {
         type: 'savings',
-        name: 'Savings',
+        nameKey: 'Savings',
         icon: PiggyBank,
-        description: 'Save money for goals',
+        descriptionKey: 'Save money for goals',
         hasTransactions: true,
     },
     {
         type: 'credit_card',
-        name: 'Credit Card',
+        nameKey: 'Credit Card',
         icon: CreditCard,
-        description: 'Track credit card spending',
+        descriptionKey: 'Track credit card spending',
         hasTransactions: true,
     },
     {
         type: 'investment',
-        name: 'Investment',
+        nameKey: 'Investment',
         icon: LineChart,
-        description: 'Stocks, ETFs, and portfolios',
+        descriptionKey: 'Stocks, ETFs, and portfolios',
         hasTransactions: false,
     },
     {
         type: 'retirement',
-        name: 'Retirement',
+        nameKey: 'Retirement',
         icon: TrendingUp,
-        description: '401k, IRA, pension funds',
+        descriptionKey: '401k, IRA, pension funds',
         hasTransactions: false,
     },
     {
         type: 'loan',
-        name: 'Loan',
+        nameKey: 'Loan',
         icon: Building2,
-        description: 'Mortgages and loans',
+        descriptionKey: 'Mortgages and loans',
         hasTransactions: false,
     },
 ];
@@ -65,8 +66,10 @@ export function StepAccountTypes({ onContinue }: StepAccountTypesProps) {
             <StepHeader
                 icon={Banknote}
                 iconContainerClassName="bg-gradient-to-br from-cyan-400 to-blue-500"
-                title="Account Types"
+                title={__('Account Types')}
-                description="There are different account types. Some track transactions, others just track balance over time."
+                description={__(
+                    'There are different account types. Some track transactions, others just track balance over time.',
+                )}
             />
 
             <div className="grid w-full max-w-2xl gap-3 sm:grid-cols-2">
@@ -81,8 +84,9 @@ export function StepAccountTypes({ onContinue }: StepAccountTypesProps) {
                                     <account.icon
                                         className={`size-4 stroke-muted-foreground`}
                                     />
+
                                     <h3 className="font-semibold">
-                                        {account.name}
+                                        {__(account.nameKey)}
                                     </h3>
                                 </div>
 
@@ -94,12 +98,12 @@ export function StepAccountTypes({ onContinue }: StepAccountTypesProps) {
                                     }`}
                                 >
                                     {account.hasTransactions
-                                        ? 'Transactions + Balance'
+                                        ? __('Transactions + Balance')
-                                        : 'Balance'}
+                                        : __('Balance')}
                                 </span>
                             </div>
                             <p className="text-sm text-muted-foreground">
-                                {account.description}
+                                {__(account.descriptionKey)}
                             </p>
                         </div>
                     </div>
@@ -108,7 +112,7 @@ export function StepAccountTypes({ onContinue }: StepAccountTypesProps) {
 
             <div className="mt-8 w-full sm:w-auto">
                 <StepButton
-                    text="Create Your First Account"
+                    text={__('Create Your First Account')}
                     onClick={onContinue}
                 />
             </div>

resources/js/components/onboarding/step-category-types.tsx

@@ -1,5 +1,6 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
+import { __ } from '@/utils/i18n';
 import { ArrowDownLeft, ArrowUpRight, Repeat, Tag } from 'lucide-react';
 
 interface StepCategoryTypesProps {
@@ -9,33 +10,30 @@ interface StepCategoryTypesProps {
 const categoryTypes = [
     {
         type: 'expense',
-        name: 'Expense',
+        nameKey: 'Expense',
         icon: ArrowUpRight,
-        description:
+        descriptionKey:
             'Money going out of an account to pay for something (e.g., groceries, rent, subscriptions). Decreases your balance.',
-        examples: ['Food', 'Rent', 'Entertainment', 'Transport'],
         color: 'from-red-500 to-rose-500',
         bgColor: 'bg-red-50 dark:bg-red-900/20',
         textColor: 'text-red-700 dark:text-red-400',
     },
     {
         type: 'income',
-        name: 'Income',
+        nameKey: 'Income',
         icon: ArrowDownLeft,
-        description:
+        descriptionKey:
             'Money coming into an account from a source (e.g., salary, refunds, interest). Increases your balance.',
-        examples: ['Salary', 'Freelance', 'Investments', 'Refunds'],
         color: 'from-emerald-500 to-green-500',
         bgColor: 'bg-emerald-50 dark:bg-emerald-900/20',
         textColor: 'text-emerald-700 dark:text-emerald-400',
     },
     {
         type: 'transfer',
-        name: 'Transfer',
+        nameKey: 'Transfer',
         icon: Repeat,
-        description:
+        descriptionKey:
             'Moving money between accounts. It does not count in expenses or income charts.',
-        examples: ['To savings', 'Credit card payment', 'Between banks'],
         color: 'from-blue-500 to-cyan-500',
         bgColor: 'bg-blue-50 dark:bg-blue-900/20',
         textColor: 'text-blue-700 dark:text-blue-400',
@@ -48,8 +46,10 @@ export function StepCategoryTypes({ onContinue }: StepCategoryTypesProps) {
             <StepHeader
                 icon={Tag}
                 iconContainerClassName="bg-gradient-to-br from-violet-400 to-purple-500"
-                title="Understanding Categories"
+                title={__('Understanding Categories')}
-                description="Every transaction belongs to one of three types:"
+                description={__(
+                    'Every transaction belongs to one of three types:',
+                )}
             />
 
             <div className="mb-8 grid w-full max-w-3xl gap-4 md:grid-cols-3">
@@ -65,18 +65,18 @@ export function StepCategoryTypes({ onContinue }: StepCategoryTypesProps) {
                                 <category.icon className="size-4 text-white" />
                             </div>
                             <h3 className="text-base font-semibold">
-                                {category.name}
+                                {__(category.nameKey)}
                             </h3>
                         </div>
 
                         <p className="w-full text-left text-muted-foreground/75">
-                            {category.description}
+                            {__(category.descriptionKey)}
                         </p>
                     </div>
                 ))}
             </div>
 
-            <StepButton text="Continue" onClick={onContinue} />
+            <StepButton text={__('Continue')} onClick={onContinue} />
         </div>
     );
 }

resources/js/components/onboarding/step-complete.tsx

@@ -1,6 +1,7 @@
 import { complete } from '@/actions/App/Http/Controllers/OnboardingController';
 import { StepButton } from '@/components/onboarding/step-button';
 import { dashboard } from '@/routes';
+import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
 import { PartyPopper } from 'lucide-react';
 import { useState } from 'react';
@@ -34,12 +35,13 @@ export function StepComplete() {
             </div>
 
             <h1 className="mb-2 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
-                You're All Set!
+                {__("You're All Set!")}
             </h1>
 
             <p className="mb-8 max-w-lg text-lg text-balance text-muted-foreground">
-                Your accounts are ready and your data is securely encrypted.
+                {__(
-                Welcome to Whisper Money!
+                    'Your accounts are ready and your data is securely encrypted.\n                Welcome to Whisper Money!',
+                )}
             </p>
 
             <div className="mb-12 flex w-full max-w-md flex-col justify-center gap-4">
@@ -48,7 +50,7 @@ export function StepComplete() {
                         ✓
                     </div>
                     <p className="text-sm text-muted-foreground">
-                        Encryption Set
+                        {__('Encryption Set')}
                     </p>
                 </div>
                 <div className="flex items-center justify-center gap-2 rounded-xl border bg-card p-2">
@@ -56,7 +58,7 @@ export function StepComplete() {
                         ✓
                     </div>
                     <p className="text-sm text-muted-foreground">
-                        Accounts Created
+                        {__('Accounts Created')}
                     </p>
                 </div>
                 <div className="flex items-center justify-center gap-2 rounded-xl border bg-card p-2">
@@ -64,16 +66,16 @@ export function StepComplete() {
                         ✓
                     </div>
                     <p className="text-sm text-muted-foreground">
-                        Data Imported
+                        {__('Data Imported')}
                     </p>
                 </div>
             </div>
 
             <StepButton
-                text="Go to Dashboard"
+                text={__('Go to Dashboard')}
                 onClick={handleComplete}
                 loading={isRedirecting}
-                loadingText="Redirecting..."
+                loadingText={__('Redirecting...')}
             />
         </div>
     );

resources/js/components/onboarding/step-create-account.tsx

@@ -10,6 +10,7 @@ import { CreatedAccount } from '@/hooks/use-onboarding-state';
 import { encrypt, importKey } from '@/lib/crypto';
 import { getStoredKey } from '@/lib/key-storage';
 import { type AccountType, formatAccountType } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { AlertCircle, CheckCircle2, CreditCard } from 'lucide-react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { StepButton } from './step-button';
@@ -99,23 +100,25 @@ export function StepCreateAccount({
         const keyString = getStoredKey();
         if (!keyString) {
             setError(
-                'Encryption key not available. Please go back and set up encryption.',
+                __(
+                    'Encryption key not available. Please go back and set up encryption.',
+                ),
             );
             return;
         }
 
         if (!displayName.trim()) {
-            setError('Please enter an account name.');
+            setError(__('Please enter an account name.'));
             return;
         }
 
         if (!type || !currencyCode) {
-            setError('Please fill in all required fields.');
+            setError(__('Please fill in all required fields.'));
             return;
         }
 
         if (isFirstAccount && type !== 'checking') {
-            setError('Your first account must be a checking account.');
+            setError(__('Your first account must be a checking account.'));
             return;
         }
 
@@ -126,7 +129,7 @@ export function StepCreateAccount({
 
             if (customBank) {
                 if (!customBank.name.trim()) {
-                    setError('Please enter a bank name.');
+                    setError(__('Please enter a bank name.'));
                     setIsSubmitting(false);
                     return;
                 }
@@ -137,7 +140,7 @@ export function StepCreateAccount({
                 finalBankId = createdBankId;
             } else {
                 if (!bankId) {
-                    setError('Please select a bank.');
+                    setError(__('Please select a bank.'));
                     setIsSubmitting(false);
                     return;
                 }
@@ -191,7 +194,7 @@ export function StepCreateAccount({
             setError(
                 err instanceof Error
                     ? err.message
-                    : 'Failed to create account. Please try again.',
+                    : __('Failed to create account. Please try again.'),
             );
             setIsSubmitting(false);
         }
@@ -202,21 +205,25 @@ export function StepCreateAccount({
     const { title, description } = useMemo(() => {
         if (hasExistingAccounts) {
             return {
-                title: 'Your Accounts',
+                title: __('Your Accounts'),
-                description:
+                description: __(
                     "You already have accounts set up. Let's continue with the onboarding.",
+                ),
             };
         }
         if (isFirstAccount) {
             return {
-                title: 'Create an Account',
+                title: __('Create an Account'),
-                description:
+                description: __(
                     "Let's start with your main checking account. You can add more accounts later.",
+                ),
             };
         }
         return {
-            title: 'Add Another Account',
+            title: __('Add Another Account'),
-            description: 'Add another account to track more of your finances.',
+            description: __(
+                'Add another account to track more of your finances.',
+            ),
         };
     }, [hasExistingAccounts, isFirstAccount]);
 
@@ -256,7 +263,7 @@ export function StepCreateAccount({
                     </div>
 
                     <StepButton
-                        text="Continue"
+                        text={__('Continue')}
                         className="w-full sm:w-full"
                         onClick={() =>
                             onAccountCreated({
@@ -285,8 +292,9 @@ export function StepCreateAccount({
                     {isFirstAccount && (
                         <div className="rounded-lg border border-blue-100 bg-blue-50 p-3 text-sm dark:border-blue-900/50 dark:bg-blue-900/20">
                             <p className="text-center">
-                                Your first account must be a{' '}
+                                {__('Your first account must be a')}{' '}
-                                <strong>Checking</strong> account.
+                                <strong>{__('Checking')}</strong>{' '}
+                                {__('account.')}
                             </p>
                         </div>
                     )}
@@ -303,8 +311,8 @@ export function StepCreateAccount({
                         className="w-full sm:w-full"
                         disabled={isSubmitting}
                         loading={isSubmitting}
-                        loadingText="Creating..."
+                        loadingText={__('Creating...')}
-                        text="Create Account"
+                        text={__('Create Account')}
                     />
 
                     {!isFirstAccount && onSkip && (
@@ -315,7 +323,7 @@ export function StepCreateAccount({
                             disabled={isSubmitting}
                             onClick={() => onSkip()}
                         >
-                            Ignore
+                            {__('Ignore')}
                         </Button>
                     )}
                 </form>

resources/js/components/onboarding/step-customize-categories.tsx

@@ -1,6 +1,7 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
 import { Button } from '@/components/ui/button';
+import { __ } from '@/utils/i18n';
 import { Check, Settings, SkipForward } from 'lucide-react';
 
 interface StepCustomizeCategoriesProps {
@@ -17,22 +18,26 @@ export function StepCustomizeCategories({
             <StepHeader
                 icon={Settings}
                 iconContainerClassName="bg-gradient-to-br from-pink-400 to-rose-500"
-                title="Customize Your Categories"
+                title={__('Customize Your Categories')}
-                description="We've created a comprehensive set of categories for you. You can customize them now or adjust them later in settings."
+                description={__(
+                    "We've created a comprehensive set of categories for you. You can customize them now or adjust them later in settings.",
+                )}
             />
 
             <div className="mb-8 w-full max-w-md rounded-xl border bg-card p-6">
-                <h3 className="mb-4 font-semibold">Your Categories Include:</h3>
+                <h3 className="mb-4 font-semibold">
+                    {__('Your Categories Include:')}
+                </h3>
                 <div className="space-y-2">
                     {[
-                        'Food & Dining (Groceries, Restaurants, Delivery)',
+                        __('Food & Dining (Groceries, Restaurants, Delivery)'),
-                        'Housing (Rent, Utilities, Maintenance)',
+                        __('Housing (Rent, Utilities, Maintenance)'),
-                        'Transportation (Fuel, Public Transit, Parking)',
+                        __('Transportation (Fuel, Public Transit, Parking)'),
-                        'Shopping (Clothing, Electronics, Gifts)',
+                        __('Shopping (Clothing, Electronics, Gifts)'),
-                        'Entertainment (Movies, Sports, Hobbies)',
+                        __('Entertainment (Movies, Sports, Hobbies)'),
-                        'Health & Wellness (Medical, Pharmacy, Fitness)',
+                        __('Health & Wellness (Medical, Pharmacy, Fitness)'),
-                        'Income (Salary, Freelance, Investments)',
+                        __('Income (Salary, Freelance, Investments)'),
-                        'Transfers (Between accounts, Savings)',
+                        __('Transfers (Between accounts, Savings)'),
                     ].map((category) => (
                         <div
                             key={category}
@@ -43,7 +48,7 @@ export function StepCustomizeCategories({
                         </div>
                     ))}
                     <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                        <span className="ml-6">...and 40+ more</span>
+                        <span className="ml-6">{__('...and 40+ more')}</span>
                     </div>
                 </div>
             </div>
@@ -56,14 +61,15 @@ export function StepCustomizeCategories({
                     className="group gap-2"
                 >
                     <SkipForward className="h-4 w-4" />
-                    Use Defaults
+                    {__('Use Defaults')}
                 </Button>
-                <StepButton text="Continue" onClick={onContinue} />
+                <StepButton text={__('Continue')} onClick={onContinue} />
             </div>
 
             <p className="mt-4 text-center text-xs text-muted-foreground">
-                You can always customize categories later in Settings →
+                {__(
-                Categories
+                    'You can always customize categories later in Settings \u2192\n                Categories',
+                )}
             </p>
         </div>
     );

resources/js/components/onboarding/step-encryption-explained.tsx

@@ -1,5 +1,6 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
+import { __ } from '@/utils/i18n';
 import { Eye, EyeOff, Lock, Server, Shield, User } from 'lucide-react';
 
 interface StepEncryptionExplainedProps {
@@ -14,30 +15,38 @@ export function StepEncryptionExplained({
             <StepHeader
                 icon={Shield}
                 iconContainerClassName="bg-gradient-to-br from-blue-500 to-indigo-600"
-                title="Your Data, Your Privacy"
+                title={__('Your Data, Your Privacy')}
-                description="Whisper Money uses end-to-end encryption to protect your financial data. Here's how it works:"
+                description={__(
+                    "Whisper Money uses end-to-end encryption to protect your financial data. Here's how it works:",
+                )}
             />
 
             <div className="mb-5 grid w-full max-w-xl gap-4 sm:mb-4">
                 <Item
-                    title="Create a Password"
+                    title={__('Create a Password')}
-                    description="Only you know this password. It never leaves your device."
+                    description={__(
+                        'Only you know this password. It never leaves your device.',
+                    )}
                     icon={
                         <User className="size-4 text-emerald-600 dark:text-emerald-400" />
                     }
                 />
 
                 <Item
-                    title="Data is Encrypted"
+                    title={__('Data is Encrypted')}
-                    description="Your data is encrypted before it leaves your browser."
+                    description={__(
+                        'Your data is encrypted before it leaves your browser.',
+                    )}
                     icon={
                         <Lock className="size-4 text-blue-600 dark:text-blue-400" />
                     }
                 />
 
                 <Item
-                    title="We Can't Read It"
+                    title={__("We Can't Read It")}
-                    description="Even we can't access your data. It's truly private."
+                    description={__(
+                        "Even we can't access your data. It's truly private.",
+                    )}
                     icon={
                         <Server className="size-4 text-violet-600 dark:text-violet-400" />
                     }
@@ -47,22 +56,24 @@ export function StepEncryptionExplained({
             <div className="mb-8 flex w-full max-w-xl flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-muted-foreground/20 p-4">
                 <div className="flex items-center gap-2">
                     <Eye className="h-5 w-5 text-muted-foreground" />
-                    <span className="text-sm font-medium">You see:</span>
+                    <span className="text-sm font-medium">
+                        {__('You see:')}
+                    </span>
                     <span className="font-mono text-emerald-600 dark:text-emerald-400">
-                        STARBUCKS@TEKKA PLC
+                        {__('STARBUCKS@TEKKA PLC')}
                     </span>
                 </div>
                 <div className="flex items-center gap-2">
                     <EyeOff className="h-5 w-5 text-muted-foreground" />
-                    <span className="text-sm font-medium">We see:</span>
+                    <span className="text-sm font-medium">{__('We see:')}</span>
                     <span className="font-mono text-muted-foreground">
-                        $KO!F6LMHU1W%TAEQFZMD9
+                        {__('$KO!F6LMHU1W%TAEQFZMD9')}
                     </span>
                 </div>
             </div>
 
             <StepButton
-                text="I Understand, Continue"
+                text={__('I Understand, Continue')}
                 onClick={onContinue}
                 data-testid="encryption-continue-button"
             />

resources/js/components/onboarding/step-encryption-setup.tsx

@@ -18,6 +18,7 @@ import {
     getKeyFromPassword,
 } from '@/lib/crypto';
 import { storeKey } from '@/lib/key-storage';
+import { __ } from '@/utils/i18n';
 import axios from 'axios';
 import { AlertCircle, CheckCircle2, KeyRound } from 'lucide-react';
 import { useState } from 'react';
@@ -44,12 +45,12 @@ export function StepEncryptionSetup({ onComplete }: StepEncryptionSetupProps) {
         setError(null);
 
         if (password.length < 12) {
-            setError('Password must be at least 12 characters');
+            setError(__('Password must be at least 12 characters'));
             return;
         }
 
         if (password !== confirmPassword) {
-            setError('Passwords do not match');
+            setError(__('Passwords do not match'));
             return;
         }
 
@@ -73,7 +74,7 @@ export function StepEncryptionSetup({ onComplete }: StepEncryptionSetupProps) {
             onComplete();
         } catch (err) {
             console.error('Encryption setup error:', err);
-            setError('Failed to setup encryption. Please try again.');
+            setError(__('Failed to setup encryption. Please try again.'));
             setProcessing(false);
         }
     }
@@ -83,24 +84,29 @@ export function StepEncryptionSetup({ onComplete }: StepEncryptionSetupProps) {
             <StepHeader
                 icon={KeyRound}
                 iconContainerClassName="bg-gradient-to-br from-amber-400 to-orange-500"
-                title="Create Your Encryption Password"
+                title={__('Create Your Encryption Password')}
-                description="This password will encrypt all your financial data. Make it strong and memorable — we can't recover it for you."
+                description={__(
+                    "This password will encrypt all your financial data. Make it strong and memorable \u2014 we can't recover it for you.",
+                )}
             />
 
             <form onSubmit={handleSubmit} className="w-full max-w-md space-y-6">
                 <div className="space-y-2">
-                    <Label htmlFor="password">Encryption Password</Label>
+                    <Label htmlFor="password">
+                        {__('Encryption Password')}
+                    </Label>
                     <Input
                         id="password"
                         type="password"
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
-                        placeholder="Enter a strong password"
+                        placeholder={__('Enter a strong password')}
                         disabled={processing}
                         autoComplete="new-password"
                         required
                         minLength={12}
                     />
+
                     <div className="flex items-center justify-between gap-2">
                         <div className="flex flex-1 items-center gap-2">
                             <div className="flex flex-1 gap-1">
@@ -116,39 +122,45 @@ export function StepEncryptionSetup({ onComplete }: StepEncryptionSetupProps) {
                                 ))}
                             </div>
                             <span className="text-xs text-muted-foreground">
-                                {passwordStrength.label}
+                                {__(passwordStrength.label)}
                             </span>
                         </div>
                         <span
                             className={`text-xs ${password.length >= 12 ? 'text-emerald-600' : 'text-muted-foreground'}`}
                         >
-                            {password.length}/12 min
+                            {password.length}
+                            {__('/12 min')}
                         </span>
                     </div>
                 </div>
 
                 <div className="space-y-2">
-                    <Label htmlFor="confirmPassword">Confirm Password</Label>
+                    <Label htmlFor="confirmPassword">
+                        {__('Confirm Password')}
+                    </Label>
                     <Input
                         id="confirmPassword"
                         type="password"
                         value={confirmPassword}
                         onChange={(e) => setConfirmPassword(e.target.value)}
-                        placeholder="Confirm your password"
+                        placeholder={__('Confirm your password')}
                         disabled={processing}
                         autoComplete="new-password"
                         required
                     />
+
                     {confirmPassword && password === confirmPassword && (
                         <div className="flex items-center gap-1 text-xs text-emerald-600">
                             <CheckCircle2 className="h-3 w-3" />
-                            Passwords match
+                            {__('Passwords match')}
                         </div>
                     )}
                 </div>
 
                 <div className="space-y-2">
-                    <Label htmlFor="storagePreference">Key Storage</Label>
+                    <Label htmlFor="storagePreference">
+                        {__('Key Storage')}
+                    </Label>
                     <Select
                         value={storagePreference}
                         onValueChange={(value) =>
@@ -163,17 +175,19 @@ export function StepEncryptionSetup({ onComplete }: StepEncryptionSetupProps) {
                         </SelectTrigger>
                         <SelectContent>
                             <SelectItem value="session">
-                                Session only (more secure)
+                                {__('Session only (more secure)')}
                             </SelectItem>
                             <SelectItem value="persistent">
-                                Keep me logged in (convenient)
+                                {__('Keep me logged in (convenient)')}
                             </SelectItem>
                         </SelectContent>
                     </Select>
                     <p className="text-xs text-muted-foreground">
                         {storagePreference === 'session'
-                            ? 'Your key will be cleared when you close the browser.'
+                            ? __(
-                            : 'Your key will be stored until you log out.'}
+                                  'Your key will be cleared when you close the browser.',
+                              )
+                            : __('Your key will be stored until you log out.')}
                     </p>
                 </div>
 
@@ -188,8 +202,8 @@ export function StepEncryptionSetup({ onComplete }: StepEncryptionSetupProps) {
                     type="submit"
                     disabled={processing || password.length < 12}
                     loading={processing}
-                    loadingText="Setting up encryption..."
+                    loadingText={__('Setting up encryption...')}
-                    text={'Setup Encryption'}
+                    text={__('Setup Encryption')}
                     className="w-full sm:w-full"
                 />
             </form>

resources/js/components/onboarding/step-import-balances.tsx

@@ -3,6 +3,7 @@ import { StepHeader } from '@/components/onboarding/step-header';
 import { AmountInput } from '@/components/ui/amount-input';
 import { Label } from '@/components/ui/label';
 import { CreatedAccount } from '@/hooks/use-onboarding-state';
+import { __ } from '@/utils/i18n';
 import { AlertCircle, TrendingUp, Wallet } from 'lucide-react';
 import { useMemo, useState } from 'react';
 
@@ -24,7 +25,7 @@ export function StepImportBalances({
         setError(null);
 
         if (balanceInCents === 0) {
-            setError('Please enter a balance');
+            setError(__('Please enter a balance'));
             return;
         }
 
@@ -35,15 +36,17 @@ export function StepImportBalances({
             onComplete();
         } catch (err) {
             console.error('Failed to set balance:', err);
-            setError('Failed to set balance. Please try again.');
+            setError(__('Failed to set balance. Please try again.'));
             setIsSubmitting(false);
         }
     }
 
     const description = useMemo(() => {
         return account
-            ? `"${account.name}" is a ${account.type} account. These accounts track balance changes over time instead of individual transactions.`
+            ? __(
-            : 'Set the current balance for this account to start tracking.';
+                  'This account tracks balance changes over time instead of individual transactions.',
+              )
+            : __('Set the current balance for this account to start tracking.');
     }, [account]);
 
     return (
@@ -51,7 +54,7 @@ export function StepImportBalances({
             <StepHeader
                 icon={TrendingUp}
                 iconContainerClassName="bg-gradient-to-br from-amber-400 to-orange-500"
-                title="Set Account Balance"
+                title={__('Set Account Balance')}
                 description={description}
             />
 
@@ -61,10 +64,13 @@ export function StepImportBalances({
                         <Wallet className="h-5 w-5 text-amber-600 dark:text-amber-400" />
                     </div>
                     <div>
-                        <h3 className="font-semibold">Balance Tracking</h3>
+                        <h3 className="font-semibold">
+                            {__('Balance Tracking')}
+                        </h3>
                         <p className="text-sm text-muted-foreground">
-                            Perfect for investment portfolios and retirement
+                            {__(
-                            accounts
+                                'Perfect for investment portfolios and retirement\n                            accounts',
+                            )}
                         </p>
                     </div>
                 </div>
@@ -72,22 +78,22 @@ export function StepImportBalances({
                 <ul className="space-y-2 text-sm text-muted-foreground">
                     <li className="flex items-center gap-2">
                         <div className="h-1.5 w-1.5 rounded-full bg-amber-500" />
-                        Update balances periodically to track growth
+                        {__('Update balances periodically to track growth')}
                     </li>
                     <li className="flex items-center gap-2">
                         <div className="h-1.5 w-1.5 rounded-full bg-amber-500" />
-                        Import balance history from CSV files
+                        {__('Import balance history from CSV files')}
                     </li>
                     <li className="flex items-center gap-2">
                         <div className="h-1.5 w-1.5 rounded-full bg-amber-500" />
-                        View balance evolution over time
+                        {__('View balance evolution over time')}
                     </li>
                 </ul>
             </div>
 
             <form onSubmit={handleSubmit} className="w-full max-w-md space-y-4">
                 <div className="space-y-2">
-                    <Label htmlFor="balance">Current Balance</Label>
+                    <Label htmlFor="balance">{__('Current Balance')}</Label>
                     <AmountInput
                         id="balance"
                         value={balanceInCents}
@@ -108,9 +114,9 @@ export function StepImportBalances({
                 <StepButton
                     type="submit"
                     className="w-full sm:w-full"
-                    text="Save Balance"
+                    text={__('Save Balance')}
                     loading={isSubmitting}
-                    loadingText="Saving..."
+                    loadingText={__('Saving...')}
                 />
             </form>
         </div>

resources/js/components/onboarding/step-import-transactions.tsx

@@ -5,6 +5,7 @@ import { CreatedAccount } from '@/hooks/use-onboarding-state';
 import { type Account, type Bank } from '@/types/account';
 import { type AutomationRule } from '@/types/automation-rule';
 import { type Category } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { usePage } from '@inertiajs/react';
 import { ArrowRight, FileSpreadsheet, Upload } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
@@ -42,8 +43,12 @@ export function StepImportTransactions({
 
     const description = useMemo(() => {
         return account
-            ? `Import transactions for "${account.name}". You can export transaction history from your bank's website.`
+            ? __(
-            : 'Import your transaction history to start tracking your finances.';
+                  "Import transactions for your account. You can export transaction history from your bank's website.",
+              )
+            : __(
+                  'Import your transaction history to start tracking your finances.',
+              );
     }, [account]);
 
     return (
@@ -51,38 +56,44 @@ export function StepImportTransactions({
             <StepHeader
                 icon={Upload}
                 iconContainerClassName="bg-gradient-to-br from-indigo-400 to-purple-500"
-                title="Import Your Transactions"
+                title={__('Import Your Transactions')}
                 description={description}
             />
 
             <div className="mb-4 w-full max-w-md rounded-xl border bg-card p-6">
                 <h3 className="mb-4 font-semibold">
-                    How to Export from Your Bank:
+                    {__('How to Export from Your Bank:')}
                 </h3>
                 <ol className="space-y-3 text-sm text-muted-foreground">
                     <li className="flex gap-3">
                         <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                             1
                         </span>
-                        <span>Log in to your bank's website or app</span>
+                        <span>
+                            {__("Log in to your bank's website or app")}
+                        </span>
                     </li>
                     <li className="flex gap-3">
                         <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                             2
                         </span>
-                        <span>Go to your account's transaction history</span>
+                        <span>
+                            {__("Go to your account's transaction history")}
+                        </span>
                     </li>
                     <li className="flex gap-3">
                         <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                             3
                         </span>
-                        <span>Look for "Export" or "Download" option</span>
+                        <span>
+                            {__('Look for "Export" or "Download" option')}
+                        </span>
                     </li>
                     <li className="flex gap-3">
                         <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                             4
                         </span>
-                        <span>Download as CSV or Excel format</span>
+                        <span>{__('Download as CSV or Excel format')}</span>
                     </li>
                 </ol>
             </div>
@@ -90,9 +101,11 @@ export function StepImportTransactions({
             <div className="mb-6 flex w-full max-w-md items-center gap-4 rounded-lg border border-dashed border-muted-foreground/30 p-4">
                 <FileSpreadsheet className="size-10 rounded-full bg-muted p-2.5 text-muted-foreground" />
                 <div className="flex flex-col gap-0.5">
-                    <p className="text-sm font-medium">Supported formats</p>
+                    <p className="text-sm font-medium">
+                        {__('Supported formats')}
+                    </p>
                     <p className="text-xs text-muted-foreground">
-                        CSV, XLS, XLSX files
+                        {__('CSV, XLS, XLSX files')}
                     </p>
                 </div>
             </div>
@@ -104,7 +117,7 @@ export function StepImportTransactions({
                     className="group w-full gap-2 !px-8 py-6 sm:w-auto"
                 >
                     <Upload className="h-4 w-4" />
-                    Import Transactions
+                    {__('Import Transactions')}
                 </Button>
 
                 {hasImported && (
@@ -114,7 +127,8 @@ export function StepImportTransactions({
                         onClick={onComplete}
                         className="group gap-2"
                     >
-                        Continue
+                        {__('Continue')}
+
                         <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                     </Button>
                 )}

resources/js/components/onboarding/step-more-accounts.tsx

@@ -2,8 +2,8 @@ import { StepHeader } from '@/components/onboarding/step-header';
 import { Button } from '@/components/ui/button';
 import { CreatedAccount } from '@/hooks/use-onboarding-state';
 import { formatAccountType } from '@/types/account';
+import { __ } from '@/utils/i18n';
 import { Check, CheckCircle2, Plus, Wallet } from 'lucide-react';
-import { useMemo } from 'react';
 import { StepButton } from './step-button';
 
 interface ExistingAccount {
@@ -33,24 +33,22 @@ export function StepMoreAccounts({
     onAddMore,
     onFinish,
 }: StepMoreAccountsProps) {
-    const totalAccounts = createdAccounts.length + existingAccounts.length;
+    const description = __(
-
+        'Would you like to add more accounts or continue to the dashboard?',
-    const description = useMemo(() => {
+    );
-        return `You've set up ${totalAccounts} account${totalAccounts !== 1 ? 's' : ''}. Would you like to add more or continue to the dashboard?`;
-    }, [totalAccounts]);
 
     return (
         <div className="flex animate-in flex-col items-center duration-500 fade-in slide-in-from-bottom-4">
             <StepHeader
                 icon={Wallet}
                 iconContainerClassName="bg-gradient-to-br from-teal-400 to-cyan-500"
-                title="Great Progress!"
+                title={__('Great Progress!')}
                 description={description}
             />
 
             <div className="mb-8 w-full max-w-md">
                 <h3 className="mb-3 text-sm font-medium text-muted-foreground">
-                    Your Accounts
+                    {__('Your Accounts')}
                 </h3>
                 <div className="space-y-2">
                     {createdAccounts.map((account) => (
@@ -96,10 +94,13 @@ export function StepMoreAccounts({
 
             <div className="mb-6 w-full max-w-md rounded-xl border-2 border-dashed border-muted-foreground/20 p-6">
                 <div className="text-center">
-                    <h3 className="mb-1 font-semibold">Add More Accounts?</h3>
+                    <h3 className="mb-1 font-semibold">
+                        {__('Add More Accounts?')}
+                    </h3>
                     <p className="mb-4 text-sm text-muted-foreground">
-                        Track all your finances in one place — checking,
+                        {__(
-                        savings, credit cards, investments, and more.
+                            'Track all your finances in one place \u2014 checking,\n                        savings, credit cards, investments, and more.',
+                        )}
                     </p>
                     <Button
                         variant="outline"
@@ -107,12 +108,12 @@ export function StepMoreAccounts({
                         className="w-full gap-2 !py-6"
                     >
                         <Plus className="h-4 w-4" />
-                        Add Another Account
+                        {__('Add Another Account')}
                     </Button>
                 </div>
             </div>
 
-            <StepButton text="Finish Setup" onClick={onFinish} />
+            <StepButton text={__('Finish Setup')} onClick={onFinish} />
         </div>
     );
 }

resources/js/components/onboarding/step-smart-rules.tsx

@@ -1,5 +1,6 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
+import { __ } from '@/utils/i18n';
 import { Bot, Eye, EyeOff, Sparkles, Zap } from 'lucide-react';
 
 interface StepSmartRulesProps {
@@ -12,8 +13,10 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
             <StepHeader
                 icon={Zap}
                 iconContainerClassName="bg-gradient-to-br from-yellow-400 to-amber-500"
-                title="Smart Automation Rules"
+                title={__('Smart Automation Rules')}
-                description="Create rules to automatically categorize your transactions based on patterns you define."
+                description={__(
+                    'Create rules to automatically categorize your transactions based on patterns you define.',
+                )}
             />
 
             <div className="mb-5 grid w-full max-w-2xl gap-4 md:grid-cols-2">
@@ -22,11 +25,14 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
                         <div className="mb-3 flex size-8 items-center justify-center rounded-lg bg-emerald-100 dark:bg-emerald-900/30">
                             <Sparkles className="size-5 text-emerald-600 dark:text-emerald-400" />
                         </div>
-                        <h3 className="mb-2 font-semibold">Pattern Matching</h3>
+                        <h3 className="mb-2 font-semibold">
+                            {__('Pattern Matching')}
+                        </h3>
                     </div>
                     <p className="text-sm text-muted-foreground">
-                        Create rules like "If description contains 'AMAZON',
+                        {__(
-                        categorize as Shopping"
+                            'Create rules like "If description contains \'AMAZON\',\n                        categorize as Shopping"',
+                        )}
                     </p>
                 </div>
 
@@ -36,12 +42,13 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
                             <Zap className="size-5 text-blue-600 dark:text-blue-400" />
                         </div>
                         <h3 className="mb-2 font-semibold">
-                            Instant Application
+                            {__('Instant Application')}
                         </h3>
                     </div>
                     <p className="text-sm text-muted-foreground">
-                        Rules apply automatically when you import new
+                        {__(
-                        transactions
+                            'Rules apply automatically when you import new\n                        transactions',
+                        )}
                     </p>
                 </div>
             </div>
@@ -50,10 +57,10 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
                 <div className="mb-4 flex items-center gap-3">
                     <div>
                         <h3 className="font-semibold text-amber-900 dark:text-amber-100">
-                            Why No AI Auto-Categorization?
+                            {__('Why No AI Auto-Categorization?')}
                         </h3>
                         <p className="text-sm text-amber-800 dark:text-amber-200">
-                            Privacy comes first
+                            {__('Privacy comes first')}
                         </p>
                     </div>
                 </div>
@@ -65,12 +72,14 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
                         </div>
                         <div>
                             <p className="text-sm font-medium text-amber-900 dark:text-amber-100">
-                                AI requires sending your data to external
+                                {__(
-                                servers
+                                    'AI requires sending your data to external\n                                servers',
+                                )}
                             </p>
                             <p className="text-xs text-amber-700 dark:text-amber-300">
-                                This would break our end-to-end encryption
+                                {__(
-                                promise
+                                    'This would break our end-to-end encryption\n                                promise',
+                                )}
                             </p>
                         </div>
                     </div>
@@ -81,10 +90,12 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
                         </div>
                         <div>
                             <p className="text-sm font-medium text-amber-900 dark:text-amber-100">
-                                Your rules run entirely in your browser
+                                {__('Your rules run entirely in your browser')}
                             </p>
                             <p className="text-xs text-amber-700 dark:text-amber-300">
-                                We never see your transaction descriptions
+                                {__(
+                                    'We never see your transaction descriptions',
+                                )}
                             </p>
                         </div>
                     </div>
@@ -95,17 +106,17 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
                         </div>
                         <div>
                             <p className="text-sm font-medium text-amber-900 dark:text-amber-100">
-                                You're in complete control
+                                {__("You're in complete control")}
                             </p>
                             <p className="text-xs text-amber-700 dark:text-amber-300">
-                                Create, edit, and delete rules anytime
+                                {__('Create, edit, and delete rules anytime')}
                             </p>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <StepButton text="Continue to Import" onClick={onContinue} />
+            <StepButton text={__('Continue to Import')} onClick={onContinue} />
         </div>
     );
 }

resources/js/components/onboarding/step-welcome.tsx

@@ -1,5 +1,6 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
+import { __ } from '@/utils/i18n';
 import { Bird } from 'lucide-react';
 
 interface StepWelcomeProps {
@@ -12,16 +13,21 @@ export function StepWelcome({ onContinue }: StepWelcomeProps) {
             <StepHeader
                 icon={Bird}
                 iconContainerClassName="bg-gradient-to-br from-black to-zinc-700"
-                title="Welcome to</br>Whisper Money"
+                title={__('Welcome to</br>Whisper Money')}
-                description="Take control of your finances with privacy-first money tracking. Let's set up your account in just a few minutes."
+                description={__(
+                    "Take control of your finances with privacy-first money tracking. Let's set up your account in just a few minutes.",
+                )}
                 large
             />
 
             <div className="flex w-full flex-col gap-4 sm:w-auto">
-                <StepButton text="Let's Get Started" onClick={onContinue} />
+                <StepButton
+                    text={__("Let's Get Started")}
+                    onClick={onContinue}
+                />
 
                 <p className="text-sm text-muted-foreground">
-                    This will take less than 5 minutes
+                    {__('This will take less than 5 minutes')}
                 </p>
             </div>
         </div>

resources/js/components/partials/header.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import { dashboard } from '@/routes';
 import { type SharedData } from '@/types';
+import { __ } from '@/utils/i18n';
 import { Link, usePage } from '@inertiajs/react';
 import { BirdIcon, Github, StarIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
@@ -50,6 +51,61 @@ export default function Header({
                     <span className="text-sm font-medium">Whisper Money</span>
                 </div>
                 <nav className="flex items-center gap-2">
+                    {!hideExternalButtons && (
+                        <>
+                            <a
+                                href="https://github.com/whisper-money/whisper-money"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <Button
+                                    variant={'ghost'}
+                                    className={cn([
+                                        'cursor-pointer opacity-70 transition-all duration-200 hover:opacity-100',
+                                        { 'hidden sm:flex': !hideAuthButtons },
+                                    ])}
+                                >
+                                    <Github className="size-5" />
+                                    <span className="hidden sm:inline">
+                                        {__('Github')}
+                                    </span>
+                                    {stars !== null && (
+                                        <span className="flex items-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium">
+                                            <StarIcon className="size-3 fill-amber-400 text-amber-400" />
+                                            {stars}
+                                        </span>
+                                    )}
+                                </Button>
+                            </a>
+                            <a
+                                href="https://discord.gg/9UQWZECDDv"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <Button
+                                    variant={'ghost'}
+                                    className={cn([
+                                        'cursor-pointer opacity-70 transition-all duration-200 hover:opacity-100',
+                                        { 'hidden sm:flex': !hideAuthButtons },
+                                    ])}
+                                >
+                                    <DiscordIcon className="size-5" />
+                                    <span className="hidden sm:inline">
+                                        Discord
+                                    </span>
+                                </Button>
+                            </a>
+                        </>
+                    )}
+                    {!hideAuthButtons && !hideExternalButtons && (
+                        <Separator
+                            orientation="vertical"
+                            className={cn([
+                                'data-[orientation=vertical]:h-6 data-[orientation=vertical]:w-[1px] data-[orientation=vertical]:bg-border',
+                                { 'hidden sm:block': !hideAuthButtons },
+                            ])}
+                        />
+                    )}
                     {!hideAuthButtons && (
                         <>
                             {auth.user ? (
@@ -58,7 +114,7 @@ export default function Header({
                                         size="sm"
                                         className="cursor-pointer rounded-full"
                                     >
-                                        Dashboard
+                                        {__('Dashboard')}
                                     </Button>
                                 </Link>
                             ) : (
@@ -69,7 +125,7 @@ export default function Header({
                                             size="sm"
                                             className="cursor-pointer rounded-full"
                                         >
-                                            Log in
+                                            {__('Log in')}
                                         </Button>
                                     </Link>
                                     {canRegister && (
@@ -79,7 +135,7 @@ export default function Header({
                                                 size="sm"
                                                 className="cursor-pointer rounded-full"
                                             >
-                                                Register
+                                                {__('Register')}
                                             </Button>
                                         </Link>
                                     )}

resources/js/components/shared/category-combobox.tsx

@@ -13,6 +13,7 @@ import {
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
 import { type Category, getCategoryColorClasses } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import * as Icons from 'lucide-react';
 import {
     Check,
@@ -117,7 +118,7 @@ export function CategoryCombobox({
                                 <HelpCircle className="h-3 w-3 text-zinc-500" />
                             </div>
                             <span className="truncate text-zinc-500">
-                                Uncategorized
+                                {__('Uncategorized')}
                             </span>
                         </div>
                     ) : (
@@ -133,12 +134,13 @@ export function CategoryCombobox({
             <PopoverContent className="p-0" align="start">
                 <Command>
                     <CommandInput
-                        placeholder="Search categories..."
+                        placeholder={__('Search categories...')}
                         value={filterValue}
                         onValueChange={setFilterValue}
                     />
+
                     <CommandList ref={listRef}>
-                        <CommandEmpty>No category found.</CommandEmpty>
+                        <CommandEmpty>{__('No category found.')}</CommandEmpty>
                         {showUncategorized && (
                             <CommandItem
                                 value="uncategorized"
@@ -151,7 +153,7 @@ export function CategoryCombobox({
                                     <div className="flex h-6 w-6 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800">
                                         <HelpCircle className="h-3 w-3 text-zinc-500" />
                                     </div>
-                                    <span>Uncategorized</span>
+                                    <span>{__('Uncategorized')}</span>
                                 </div>
                                 <Check
                                     className={cn(

resources/js/components/shared/label-combobox.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
 import { getLabelColorClasses, LABEL_COLORS, type Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { Check, ChevronsUpDown, Plus, Tag, X } from 'lucide-react';
 import { useState } from 'react';
 
@@ -190,13 +191,16 @@ export function LabelCombobox({
             <PopoverContent className="w-[300px] p-0" align="start">
                 <Command shouldFilter={false}>
                     <CommandInput
-                        placeholder="Search or create labels..."
+                        placeholder={__('Search or create labels...')}
                         value={inputValue}
                         onValueChange={setInputValue}
                     />
+
                     <CommandList>
                         {sortedLabels.length === 0 && !showCreateOption && (
-                            <CommandEmpty>No labels found.</CommandEmpty>
+                            <CommandEmpty>
+                                {__('No labels found.')}
+                            </CommandEmpty>
                         )}
                         {allowRemoveAll && (
                             <CommandItem
@@ -207,7 +211,7 @@ export function LabelCombobox({
                                 className="gap-2"
                             >
                                 <X className="h-4 w-4" />
-                                Remove all labels
+                                {__('Remove all labels')}
                             </CommandItem>
                         )}
                         {showCreateOption && (

resources/js/components/sync-status-button.tsx

@@ -8,6 +8,7 @@ import {
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useSyncContext } from '@/contexts/sync-context';
+import { __ } from '@/utils/i18n';
 import { formatDistanceToNow } from 'date-fns';
 import { CloudAlert, CloudCheck, CloudOff, RefreshCw } from 'lucide-react';
 import { useState } from 'react';
@@ -83,7 +84,7 @@ export function SyncStatusButton() {
                     <RefreshCw
                         className={`mr-2 h-4 w-4 ${syncStatus === 'syncing' ? 'animate-spin' : ''}`}
                     />
-                    Sync now
+                    {__('Sync now')}
                 </DropdownMenuItem>
             </DropdownMenuContent>
         </DropdownMenu>

resources/js/components/transactions/bulk-actions-bar.tsx

@@ -18,6 +18,7 @@ import {
 import { isAdmin } from '@/hooks/use-admin';
 import { type Category } from '@/types/category';
 import { type Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import {
     CheckCheck,
     MoreHorizontal,
@@ -74,7 +75,8 @@ export function BulkActionsBar({
                 <div className="flex items-center gap-2 pl-2 text-sm">
                     {isSelectingAll ? (
                         <>
-                            All {displayCount} transaction
+                            {__('All')}
+                            {displayCount} transaction
                             {displayCount !== 1 ? 's' : ''} selected
                         </>
                     ) : (
@@ -96,12 +98,15 @@ export function BulkActionsBar({
                                             className="h-auto px-0 py-1 text-xs text-primary hover:text-primary/80"
                                         >
                                             <CheckCheck className="mr-1 h-3 w-3" />
-                                            Select all
+                                            {__('Select all')}
                                         </Button>
                                     </TooltipTrigger>
                                     <TooltipContent>
-                                        Select all {totalFilteredCount}{' '}
+                                        {__('Select all')}
-                                        transactions matching current filter
+                                        {totalFilteredCount}{' '}
+                                        {__(
+                                            'transactions matching current filter',
+                                        )}
                                     </TooltipContent>
                                 </Tooltip>
                             </TooltipProvider>
@@ -129,7 +134,7 @@ export function BulkActionsBar({
                                     variant="outline"
                                     size="icon"
                                     disabled={isUpdating}
-                                    aria-label="More actions"
+                                    aria-label={__('More actions')}
                                 >
                                     <MoreHorizontal className="h-4 w-4" />
                                 </Button>
@@ -141,7 +146,7 @@ export function BulkActionsBar({
                                         disabled={isUpdating}
                                     >
                                         <WandSparkles className="h-4 w-4" />
-                                        Re-evaluate rules
+                                        {__('Re-evaluate rules')}
                                     </DropdownMenuItem>
 
                                     {isDeleteEnabled && (
@@ -150,7 +155,7 @@ export function BulkActionsBar({
                                             onSelect={onDelete}
                                         >
                                             <Trash2 />
-                                            Delete
+                                            {__('Delete')}
                                         </DropdownMenuItem>
                                     )}
                                 </DropdownMenuGroup>
@@ -164,7 +169,7 @@ export function BulkActionsBar({
                             size="icon"
                             onClick={onClear}
                             disabled={isUpdating}
-                            aria-label="Clear selection"
+                            aria-label={__('Clear selection')}
                         >
                             <X className="h-4 w-4" />
                         </Button>

resources/js/components/transactions/bulk-category-select.tsx

@@ -1,5 +1,6 @@
 import { CategorySelect } from '@/components/transactions/category-select';
 import { type Category } from '@/types/category';
+import { __ } from '@/utils/i18n';
 import { useState } from 'react';
 
 interface BulkCategorySelectProps {
@@ -27,7 +28,7 @@ export function BulkCategorySelect({
             onValueChange={handleChange}
             categories={categories}
             disabled={disabled}
-            placeholder="Change category"
+            placeholder={__('Change category')}
             triggerClassName="h-9 w-[180px]"
             showUncategorized={true}
         />

resources/js/components/transactions/bulk-label-select.tsx

@@ -1,5 +1,6 @@
 import { LabelCombobox } from '@/components/shared/label-combobox';
 import { type Label } from '@/types/label';
+import { __ } from '@/utils/i18n';
 import { useState } from 'react';
 
 interface BulkLabelSelectProps {
@@ -26,7 +27,7 @@ export function BulkLabelSelect({
             onValueChange={handleChange}
             labels={labels}
             disabled={disabled}
-            placeholder="Add labels"
+            placeholder={__('Add labels')}
             triggerClassName="h-9 w-[180px] min-h-9"
             allowCreate={true}
             allowRemoveAll={true}