feat(04-02): thread user locale from useAuth through DashboardPage to chart components

- Import useAuth in DashboardPage and derive userLocale with fallback to 'en'
- Pass locale={userLocale} to AvailableBalance and ExpenseBreakdown
- Add useAuth mock to DashboardPage test to avoid i18n initReactI18next import error

frontend/src/pages/DashboardPage.test.tsx

@@ -19,6 +19,17 @@ vi.mock('@/lib/api', () => ({
   },
 }))
 
+vi.mock('@/hooks/useAuth', () => ({
+  useAuth: () => ({
+    user: { preferred_locale: 'en' },
+    loading: false,
+    login: vi.fn(),
+    register: vi.fn(),
+    logout: vi.fn(),
+    refetch: vi.fn(),
+  }),
+}))
+
 // Mock useBudgets so loading starts as false (skips the loading skeleton branch)
 vi.mock('@/hooks/useBudgets', () => ({
   useBudgets: () => ({

frontend/src/pages/DashboardPage.tsx

@@ -12,6 +12,7 @@ import { DebtTracker } from '@/components/DebtTracker'
 import { AvailableBalance } from '@/components/AvailableBalance'
 import { EmptyState } from '@/components/EmptyState'
 import { useBudgets } from '@/hooks/useBudgets'
+import { useAuth } from '@/hooks/useAuth'
 import { budgetItems as budgetItemsApi } from '@/lib/api'
 import { FolderOpen } from 'lucide-react'
 import { palette } from '@/lib/palette'
@@ -19,6 +20,8 @@ import { palette } from '@/lib/palette'
 export function DashboardPage() {
   const { t } = useTranslation()
   const { list, current, loading, fetchList, selectBudget } = useBudgets()
+  const { user } = useAuth()
+  const userLocale = user?.preferred_locale || 'en'
   const [showCreate, setShowCreate] = useState(false)
 
   useEffect(() => {
@@ -111,14 +114,14 @@ export function DashboardPage() {
             <div className="lg:col-span-2">
               <FinancialOverview budget={current} />
             </div>
-            <AvailableBalance budget={current} />
+            <AvailableBalance budget={current} locale={userLocale} />
           </div>
 
           <BillsTracker budget={current} onUpdate={handleItemUpdate} />
           <VariableExpenses budget={current} onUpdate={handleItemUpdate} />
 
           <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-            <ExpenseBreakdown budget={current} />
+            <ExpenseBreakdown budget={current} locale={userLocale} />
             <DebtTracker budget={current} onUpdate={handleItemUpdate} />
           </div>
         </div>