feature: localization's first implmentation

frontend/src/components/ui/shared/LanguageToggle.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Globe, Check } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { usePathname, useRouter } from '@/i18n/navigation';
+import { useAuth } from '@/lib/hooks/useAuth';
+import { authApi } from '@/lib/api/auth';
+import { locales, type AppLocale } from '@/i18n/routing';
+
+const LOCALE_OPTIONS: AppLocale[] = [...locales];
+
+export function LanguageToggle() {
+  const t = useTranslations('language');
+  const locale = useLocale() as AppLocale;
+  const router = useRouter();
+  const pathname = usePathname();
+  const { user, setUserLanguage } = useAuth();
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onDocClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, []);
+
+  const switchLocale = useCallback(
+    async (next: AppLocale) => {
+      if (next === locale) {
+        setOpen(false);
+        return;
+      }
+
+      if (user) {
+        setUserLanguage(next);
+        try {
+          await authApi.updateLanguage(next);
+        } catch {
+          /* keep optimistic locale in client state */
+        }
+      }
+
+      router.replace(pathname, { locale: next });
+      setOpen(false);
+    },
+    [locale, pathname, router, setUserLanguage, user],
+  );
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="inline-flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/80 px-2.5 text-text-primary hover:border-border-strong hover:bg-background-card/80 transition-colors"
+        aria-label={t('selectLanguage')}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        title={t('label')}
+      >
+        <Globe className="h-[18px] w-[18px] icon-flat" />
+        <span className="text-xs font-medium uppercase">{locale}</span>
+      </button>
+
+      {open && (
+        <ul
+          role="listbox"
+          aria-label={t('selectLanguage')}
+          className="absolute right-0 z-[200] mt-2 min-w-[10rem] rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-1 shadow-lg backdrop-blur-sm"
+        >
+          {LOCALE_OPTIONS.map((option) => {
+            const selected = option === locale;
+            return (
+              <li key={option} role="option" aria-selected={selected}>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-text-primary hover:bg-background-card/70"
+                  onClick={() => void switchLocale(option)}
+                >
+                  <span>{t(option)}</span>
+                  {selected && <Check className="h-4 w-4 text-primary shrink-0" />}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

frontend/src/components/ui/shared/Sidebar.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import Link from 'next/link';
 import { memo, useMemo } from 'react';
-import { usePathname } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { Link, usePathname } from '@/i18n/navigation';
 import {
   LayoutDashboard,
   Users,
@@ -19,55 +19,46 @@ import {
   organizationTypeIcon,
 } from '@/components/shared/organizationTypeIcon';
 
-const menu = [
-  { name: 'Dashboard', path: '/today', icon: LayoutDashboard, read: 'TAB_TODAY_READ' as const },
-  { name: 'Staff', path: '/staff', icon: UserCog, read: 'TAB_STAFF_READ' as const },
-  { name: 'Patients', path: '/patients', icon: Users, read: 'TAB_PATIENTS_READ' as const },
-  { name: 'Appointment', path: '/appointments', icon: Calendar, read: 'TAB_APPOINTMENTS_READ' as const },
-  { name: 'Treatment', path: '/treatment', icon: FlaskConical, read: 'TAB_TREATMENT_READ' as const },
-  { name: 'Billing', path: '/billing', icon: CreditCard, read: 'TAB_BILLING_READ' as const },
-  { name: 'Reports', path: '/reports', icon: FileText, read: 'TAB_REPORTS_READ' as const },
-];
-
 function Sidebar() {
+  const t = useTranslations('nav');
+  const tCommon = useTranslations('common');
   const pathname = usePathname();
   const { currentOrganization } = useAuth();
-  const counterpartLabel = currentOrganization?.type === 'LAB' ? 'Clinics' : 'Labs';
-  const organizationsTabIcon = organizationTypeIcon(
-    counterpartOrganizationType(currentOrganization?.type),
+
+  const menu = useMemo(
+    () => [
+      { name: t('dashboard'), path: '/today', icon: LayoutDashboard, read: 'TAB_TODAY_READ' as const },
+      { name: t('staff'), path: '/staff', icon: UserCog, read: 'TAB_STAFF_READ' as const },
+      {
+        name: currentOrganization?.type === 'LAB' ? t('clinics') : t('labs'),
+        path: '/organizations',
+        icon: organizationTypeIcon(counterpartOrganizationType(currentOrganization?.type)),
+        read: 'TAB_ORGANIZATIONS_READ' as const,
+      },
+      { name: t('patients'), path: '/patients', icon: Users, read: 'TAB_PATIENTS_READ' as const },
+      { name: t('appointment'), path: '/appointments', icon: Calendar, read: 'TAB_APPOINTMENTS_READ' as const },
+      { name: t('treatment'), path: '/treatment', icon: FlaskConical, read: 'TAB_TREATMENT_READ' as const },
+      { name: t('billing'), path: '/billing', icon: CreditCard, read: 'TAB_BILLING_READ' as const },
+      { name: t('reports'), path: '/reports', icon: FileText, read: 'TAB_REPORTS_READ' as const },
+    ],
+    [currentOrganization?.type, t],
   );
 
   const visibleMenu = useMemo(
-    () => {
-      const withCounterpartTab = [
-        menu[0],
-        menu[1],
-        {
-          name: counterpartLabel,
-          path: '/organizations',
-          icon: organizationsTabIcon,
-          read: 'TAB_ORGANIZATIONS_READ' as const,
-        },
-        menu[2],
-        menu[3],
-        menu[4],
-        menu[5],
-        menu[6],
-      ];
-      return withCounterpartTab.filter((item) => {
+    () =>
+      menu.filter((item) => {
         if (item.path === '/appointments') {
           return canAccessAppointmentsSection(currentOrganization);
         }
         return canViewTab(currentOrganization, item.read);
-      });
-    },
-    [counterpartLabel, organizationsTabIcon, currentOrganization],
+      }),
+    [currentOrganization, menu],
   );
 
   return (
     <aside className="w-64 bg-background-secondary/90 border-r border-border text-text-primary flex flex-col">
       <div className="h-[71px] px-4 flex items-center">
-        <h1 className="text-lg font-medium tracking-tight">DyoLink</h1>
+        <h1 className="text-lg font-medium tracking-tight">{tCommon('appName')}</h1>
       </div>
       <div className="mx-4 border-b border-border/70" />
 
@@ -78,7 +69,7 @@ function Sidebar() {
 
           return (
             <Link
-              key={item.name}
+              key={item.path}
               href={item.path}
               prefetch
               className={`flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-sm)] border transition-colors ${
@@ -97,4 +88,4 @@ function Sidebar() {
   );
 }
 
-export default memo(Sidebar);
+export default memo(Sidebar);

frontend/src/components/ui/shared/ThemeToggle.tsx

@@ -2,9 +2,11 @@
 
 import { useEffect, useState } from 'react';
 import { Moon, Sun } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { applyTheme, getStoredTheme, type ThemeMode } from '@/lib/theme';
 
 export function ThemeToggle() {
+  const t = useTranslations('theme');
   const [mode, setMode] = useState<ThemeMode | null>(null);
 
   useEffect(() => {
@@ -34,8 +36,8 @@ export function ThemeToggle() {
       type="button"
       onClick={handleClick}
       className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/80 text-text-primary hover:border-border-strong hover:bg-background-card/80 transition-colors"
-      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
-      title={isDark ? 'Light mode' : 'Dark mode'}
+      aria-label={isDark ? t('switchToLight') : t('switchToDark')}
+      title={isDark ? t('lightMode') : t('darkMode')}
     >
       {isDark ? (
         <Sun className="h-[18px] w-[18px] icon-flat" />

frontend/src/components/ui/shared/TopBarControls.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { LanguageToggle } from '@/components/ui/shared/LanguageToggle';
+import { ThemeToggle } from '@/components/ui/shared/ThemeToggle';
+
+export function TopBarControls({ className = '' }: { className?: string }) {
+  return (
+    <div className={`flex items-center gap-3 shrink-0 ${className}`.trim()}>
+      <LanguageToggle />
+      <ThemeToggle />
+    </div>
+  );
+}