feat(web): add i18n locale routes and language switcher component

Add locale-prefixed routes for admin, auth, dashboard, and public pages. Add error, loading, and not-found pages for locale context. Add language switcher UI component for Vietnamese/English toggle. Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-09 09:44:18 +07:00
parent 2250e17a09
commit 7195064f12
43 changed files with 7418 additions and 1 deletions
--- a/apps/web/app/[locale]/(dashboard)/layout.tsx
+++ b/apps/web/app/[locale]/(dashboard)/layout.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { useTheme } from '@/components/providers/theme-provider';
+import { Button } from '@/components/ui/button';
+import { LanguageSwitcher } from '@/components/ui/language-switcher';
+import { Link } from '@/i18n/navigation';
+import { useAuthStore } from '@/lib/auth-store';
+import { cn } from '@/lib/utils';
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const { user, logout } = useAuthStore();
+  const { theme, toggleTheme } = useTheme();
+  const t = useTranslations();
+
+  const navItems = [
+    { href: '/dashboard' as const, label: t('dashboard.title'), icon: '🏠' },
+    { href: '/listings' as const, label: t('dashboard.listings'), icon: '📋' },
+    { href: '/listings/new' as const, label: t('dashboard.createListing'), icon: '➕' },
+    { href: '/analytics' as const, label: t('dashboard.analytics'), icon: '📊' },
+    { href: '/dashboard/valuation' as const, label: t('dashboard.aiValuation'), icon: '🤖' },
+    { href: '/dashboard/profile' as const, label: t('dashboard.profile'), icon: '👤' },
+    { href: '/dashboard/subscription' as const, label: t('dashboard.subscription'), icon: '💎' },
+    { href: '/dashboard/payments' as const, label: t('dashboard.payments'), icon: '💳' },
+  ];
+
+  return (
+    <div className="min-h-screen bg-background">
+      <header
+        role="banner"
+        className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+      >
+        <div className="mx-auto flex h-14 max-w-7xl items-center px-4">
+          <Link href="/" className="mr-6 flex items-center space-x-2">
+            <span className="text-lg font-bold text-primary">{t('common.goodgo')}</span>
+          </Link>
+
+          <nav aria-label={t('nav.dashboardNav')} className="flex items-center space-x-1">
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                aria-label={item.label}
+                className={cn(
+                  'rounded-md px-2 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground sm:px-3',
+                  pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href))
+                    ? 'bg-accent text-accent-foreground'
+                    : 'text-muted-foreground',
+                )}
+              >
+                <span className="sm:mr-1.5" aria-hidden="true">{item.icon}</span>
+                <span className="hidden sm:inline">{item.label}</span>
+              </Link>
+            ))}
+          </nav>
+
+          <div className="ml-auto flex items-center space-x-2">
+            {user && (
+              <span className="hidden text-sm text-muted-foreground sm:inline">
+                {user.fullName}
+              </span>
+            )}
+            <LanguageSwitcher />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={toggleTheme}
+              aria-label={theme === 'light' ? t('dashboard.darkMode') : t('dashboard.lightMode')}
+              className="h-9 w-9 p-0"
+            >
+              {theme === 'light' ? (
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                </svg>
+              ) : (
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+              )}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => logout()}>
+              {t('common.logout')}
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <main id="main-content" role="main" className="mx-auto max-w-7xl px-4 py-6">{children}</main>
+    </div>
+  );
+}