feature: localization's first implmentation

frontend/src/components/ui/dashboard/DashboardAccountMenu.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/navigation';
 import {
   Settings,
   AlertTriangle,
@@ -15,16 +16,21 @@ import { useAuth } from '@/lib/hooks/useAuth';
 import { authApi } from '@/lib/api/auth';
 import type { SubscriptionAlertData } from '@/types/subscription';
 
-function warningTooltip(data: SubscriptionAlertData | null): string {
+function warningTooltip(
+  data: SubscriptionAlertData | null,
+  t: ReturnType<typeof useTranslations<'accountMenu'>>,
+): string {
   if (!data?.showWarning) return '';
-  if (data.noActiveSubscription) return 'No active subscription — review Subscriptions';
-  if (data.trialExpired) return 'Trial ended — review Subscriptions';
-  if (data.trialEndingSoon) return 'Trial ending soon — review Subscriptions';
-  if (data.seatsLow) return 'Seats running low — review Subscriptions';
-  return 'Review Subscriptions';
+  if (data.noActiveSubscription) return t('noActiveSubscription');
+  if (data.trialExpired) return t('trialEnded');
+  if (data.trialEndingSoon) return t('trialEndingSoon');
+  if (data.seatsLow) return t('seatsLow');
+  return t('reviewSubscriptions');
 }
 
 export function DashboardAccountMenu() {
+  const t = useTranslations('auth');
+  const tAccount = useTranslations('accountMenu');
   const { user, currentOrganization, logout } = useAuth();
   const [open, setOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -61,7 +67,7 @@ export function DashboardAccountMenu() {
   }, [isOwner, currentOrganization?.id]);
 
   const showWarning = Boolean(isOwner && alert?.showWarning);
-  const tooltip = useMemo(() => warningTooltip(alert), [alert]);
+  const tooltip = useMemo(() => warningTooltip(alert, tAccount), [alert, tAccount]);
 
   const handleLogout = useCallback(() => {
     setOpen(false);
@@ -98,7 +104,7 @@ export function DashboardAccountMenu() {
           className="absolute right-0 mt-2 w-72 rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-2 shadow-lg z-[200] backdrop-blur-sm"
         >
           <div className="px-3 py-2 border-b border-border/60">
-            <p className="text-xs text-text-muted">Signed in</p>
+            <p className="text-xs text-text-muted">{t('signedIn')}</p>
             <p className="text-sm font-medium truncate">{user?.email}</p>
             <p className="text-xs text-text-secondary mt-1 truncate">
               {currentOrganization?.name}
@@ -113,7 +119,7 @@ export function DashboardAccountMenu() {
               onClick={() => setOpen(false)}
             >
               <Building2 className="h-4 w-4 icon-flat shrink-0" />
-              Switch organization
+              {t('switchOrganization')}
             </Link>
 
             {isOwner && (
@@ -124,7 +130,7 @@ export function DashboardAccountMenu() {
                 onClick={() => setOpen(false)}
               >
                 <CreditCard className="h-4 w-4 icon-flat shrink-0" />
-                Subscriptions
+                {t('subscriptions')}
               </Link>
             )}
 
@@ -135,7 +141,7 @@ export function DashboardAccountMenu() {
               onClick={() => setOpen(false)}
             >
               <User className="h-4 w-4 icon-flat shrink-0" />
-              Account
+              {t('account')}
             </Link>
           </div>
 
@@ -147,7 +153,7 @@ export function DashboardAccountMenu() {
               onClick={handleLogout}
             >
               <LogOut className="h-4 w-4 icon-flat shrink-0" />
-              Log out
+              {t('signOut')}
             </button>
           </div>
         </div>