Add i18n foundation (fa-IR/en-US) and localize landing + auth.

Introduce path-prefixed locale routing under app/[lang] with a middleware that detects locale from cookie/Accept-Language (default fa-IR) and redirects. Add fa-IR (source of truth) and en-US dictionaries, a server getDictionary, a client I18nProvider/useT, locale-aware Link + router helpers, and a language switcher. The root [lang] layout sets html lang/dir and the per-locale font (Peyda for fa, Inter for en). Landing sections and the login/register/auth shell now read all copy from the dictionaries; dashboard localization follows in a later commit. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-11 12:05:03 +03:30
parent 2b16846f67
commit 34993d417f
48 changed files with 785 additions and 200 deletions
@@ -0,0 +1,315 @@
+'use client';
+
+import { useEffect, useState, type ReactNode } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { useQuery } from '@tanstack/react-query';
+import { useAuthStore } from '@/lib/store';
+import api from '@/lib/api';
+import { DeploymentProgressManager } from '@/components/deployment-progress-manager';
+import { useDeployProgressStore } from '@/lib/deploy-progress-store';
+import {
+  LayoutDashboard,
+  Package,
+  Rocket,
+  Ticket,
+  Users,
+  Server,
+  Scale,
+  ClipboardList,
+  Wrench,
+  Briefcase,
+  Cloud,
+  Menu,
+  X,
+  LogOut,
+  Boxes,
+  Wallet,
+  CreditCard,
+  ScrollText,
+  FileText,
+  Database,
+} from 'lucide-react';
+
+type NavItem = { href: string; label: string; icon: ReactNode };
+
+const userNavItems: NavItem[] = [
+  { href: '/dashboard', label: 'Dashboard', icon: <LayoutDashboard className="w-4 h-4" /> },
+  { href: '/dashboard/apps', label: 'Applications', icon: <Package className="w-4 h-4" /> },
+  { href: '/dashboard/services', label: 'Databases & Services', icon: <Database className="w-4 h-4" /> },
+  { href: '/dashboard/logs', label: 'Logs', icon: <ScrollText className="w-4 h-4" /> },
+  { href: '/dashboard/deploy', label: 'New Deploy', icon: <Rocket className="w-4 h-4" /> },
+  { href: '/dashboard/wallet', label: 'Wallet', icon: <Wallet className="w-4 h-4" /> },
+  { href: '/dashboard/invoices', label: 'Invoices', icon: <FileText className="w-4 h-4" /> },
+  { href: '/dashboard/tickets', label: 'Tickets', icon: <Ticket className="w-4 h-4" /> },
+];
+
+const adminNavItems: NavItem[] = [
+  { href: '/dashboard/admin/users', label: 'Users', icon: <Users className="w-4 h-4" /> },
+  { href: '/dashboard/admin/apps', label: 'All Applications', icon: <Boxes className="w-4 h-4" /> },
+  { href: '/dashboard/admin/billing', label: 'Billing Plans', icon: <CreditCard className="w-4 h-4" /> },
+  { href: '/dashboard/admin/invoices', label: 'Invoices', icon: <FileText className="w-4 h-4" /> },
+  { href: '/dashboard/admin/clusters', label: 'Clusters', icon: <Server className="w-4 h-4" /> },
+  { href: '/dashboard/admin/pools', label: 'Cluster Pools', icon: <Scale className="w-4 h-4" /> },
+  { href: '/dashboard/admin/tickets', label: 'All Tickets', icon: <ClipboardList className="w-4 h-4" /> },
+];
+
+const technicalNavItems: NavItem[] = [
+  { href: '/dashboard/admin/users', label: 'Users', icon: <Users className="w-4 h-4" /> },
+  { href: '/dashboard/admin/apps', label: 'All Applications', icon: <Boxes className="w-4 h-4" /> },
+  { href: '/dashboard/staff/tickets', label: 'Technical Tickets', icon: <Wrench className="w-4 h-4" /> },
+];
+
+const salesNavItems: NavItem[] = [
+  { href: '/dashboard/admin/users', label: 'Users', icon: <Users className="w-4 h-4" /> },
+  { href: '/dashboard/staff/tickets', label: 'Sales Tickets', icon: <Briefcase className="w-4 h-4" /> },
+];
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const { user, isAuthenticated, isLoading, logout } = useAuthStore();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const deployBarMinimized = useDeployProgressStore((s) => s.minimized);
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push('/login');
+    }
+  }, [isLoading, isAuthenticated, router]);
+
+  // Close sidebar on route change (mobile)
+  useEffect(() => {
+    setSidebarOpen(false);
+  }, [pathname]);
+
+  // Fetch unanswered ticket counts for staff/admin roles
+  // Must be called before any early returns to respect React's rules of hooks
+  const isStaffOrAdmin = user?.role === 'admin' || user?.role === 'technical' || user?.role === 'sales';
+  const { data: unansweredCounts } = useQuery<{ technical: number; sales: number; total: number }>({
+    queryKey: ['unanswered-counts'],
+    queryFn: () => api.get('/tickets/unanswered-counts').then((r) => r.data),
+    enabled: isStaffOrAdmin && isAuthenticated,
+    refetchInterval: 30000,
+  });
+
+  // Fetch wallet balance for all authenticated users (shown in header)
+  const { data: walletData } = useQuery<{ balance: number }>({
+    queryKey: ['wallet-balance'],
+    queryFn: () => api.get('/billing/wallet').then((r) => r.data),
+    enabled: isAuthenticated,
+    refetchInterval: 60000,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="flex flex-col items-center gap-3">
+          <div className="animate-spin rounded-full h-10 w-10 border-2 border-primary-600 border-t-transparent" />
+          <span className="text-sm text-gray-500">Loading...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) return null;
+
+  const NavLink = ({ item, badge }: { item: NavItem; badge?: number }) => {
+    const isActive = pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href + '/'));
+    return (
+      <Link
+        href={item.href}
+        className={`flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-150 ${
+          isActive
+            ? 'bg-primary-50 text-primary-700 shadow-sm'
+            : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+        }`}
+      >
+        {item.icon}
+        <span className="flex-1">{item.label}</span>
+        {badge !== undefined && badge > 0 && (
+          <span className="min-w-[20px] h-5 flex items-center justify-center px-1.5 text-xs font-bold rounded-full bg-red-500 text-white">
+            {badge}
+          </span>
+        )}
+      </Link>
+    );
+  };
+
+  const getBadge = (href: string): number | undefined => {
+    if (!unansweredCounts) return undefined;
+    if (href === '/dashboard/staff/tickets') {
+      // Staff ticket page: show count for their department
+      if (user?.role === 'technical') return unansweredCounts.technical;
+      if (user?.role === 'sales') return unansweredCounts.sales;
+    }
+    if (href === '/dashboard/admin/tickets') {
+      return unansweredCounts.total;
+    }
+    return undefined;
+  };
+
+  const SidebarContent = () => (
+    <div className="flex flex-col h-full">
+      <div className="space-y-1 flex-1">
+        {userNavItems.map((item) => (
+          <NavLink key={item.href} item={item} badge={getBadge(item.href)} />
+        ))}
+
+        {user?.role === 'admin' && (
+          <>
+            <div className="pt-5 pb-2">
+              <p className="px-3 text-[11px] font-bold text-gray-400 uppercase tracking-widest">
+                Admin
+              </p>
+            </div>
+            {adminNavItems.map((item) => (
+              <NavLink key={item.href} item={item} badge={getBadge(item.href)} />
+            ))}
+          </>
+        )}
+
+        {user?.role === 'technical' && (
+          <>
+            <div className="pt-5 pb-2">
+              <p className="px-3 text-[11px] font-bold text-gray-400 uppercase tracking-widest">
+                Technical
+              </p>
+            </div>
+            {technicalNavItems.map((item) => (
+              <NavLink key={item.href} item={item} badge={getBadge(item.href)} />
+            ))}
+          </>
+        )}
+
+        {user?.role === 'sales' && (
+          <>
+            <div className="pt-5 pb-2">
+              <p className="px-3 text-[11px] font-bold text-gray-400 uppercase tracking-widest">
+                Sales
+              </p>
+            </div>
+            {salesNavItems.map((item) => (
+              <NavLink key={item.href} item={item} badge={getBadge(item.href)} />
+            ))}
+          </>
+        )}
+      </div>
+
+      {/* Sidebar footer */}
+      <div className="pt-4 mt-4 border-t border-gray-200">
+        <div className="px-3 py-2">
+          <p className="text-xs font-semibold text-gray-700 truncate">
+            {user?.firstName} {user?.lastName}
+          </p>
+          <p className="text-xs text-gray-400 truncate">{user?.email}</p>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <DeploymentProgressManager />
+      {/* Mobile overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/30 z-40 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Mobile sidebar */}
+      <aside
+        className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-gray-200 p-4 transform transition-transform duration-200 ease-in-out lg:hidden ${
+          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        <div className="flex items-center justify-between mb-6">
+          <Link href="/dashboard" className="text-lg font-bold text-primary-600">
+            <Cloud className="w-5 h-5 inline mr-1" /> CloudHost
+          </Link>
+          <button onClick={() => setSidebarOpen(false)} className="btn-icon">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <SidebarContent />
+      </aside>
+
+      {/* Header */}
+      <header
+        className={`bg-white/80 backdrop-blur-lg border-b border-gray-200/80 sticky z-30 ${
+          deployBarMinimized ? 'top-11' : 'top-0'
+        }`}
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center gap-3">
+              {/* Mobile hamburger */}
+              <button
+                onClick={() => setSidebarOpen(true)}
+                className="btn-icon lg:hidden"
+              >
+                <Menu className="w-5 h-5" />
+              </button>
+              <Link href="/dashboard" className="text-xl font-bold text-primary-600 flex items-center gap-2">
+                <Cloud className="w-6 h-6" />
+                <span className="hidden sm:inline">CloudHost</span>
+              </Link>
+            </div>
+            <div className="flex items-center gap-3">
+              {/* Wallet balance */}
+              <Link
+                href="/dashboard/wallet"
+                className="hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-gray-100 hover:bg-gray-200 transition-colors text-sm"
+                title="Wallet Balance"
+              >
+                <Wallet className="w-3.5 h-3.5 text-primary-600" />
+                <span className="font-bold text-gray-800">
+                  {walletData ? Number(walletData.balance).toLocaleString('en-US') : '...'}
+                </span>
+                <span className="text-gray-500 text-xs">T</span>
+              </Link>
+
+              <div className="hidden sm:flex items-center gap-2 text-sm">
+                <span className="text-gray-600 font-medium">
+                  {user?.firstName} {user?.lastName}
+                </span>
+                {user?.role === 'admin' && (
+                  <span className="badge-purple">Admin</span>
+                )}
+                {user?.role === 'technical' && (
+                  <span className="px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-100 text-blue-700">Technical</span>
+                )}
+                {user?.role === 'sales' && (
+                  <span className="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-700">Sales</span>
+                )}
+              </div>
+              <button
+                onClick={() => { logout(); router.push('/login'); }}
+                className="btn-ghost text-gray-500 hover:text-red-600"
+              >
+                <LogOut className="w-4 h-4 sm:hidden" />
+                <span className="hidden sm:inline">Sign out</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8">
+        <div className="flex gap-8">
+          {/* Desktop sidebar */}
+          <nav className="hidden lg:block w-56 flex-shrink-0">
+            <div className="sticky top-24">
+              <SidebarContent />
+            </div>
+          </nav>
+
+          {/* Main content */}
+          <main className="flex-1 min-w-0 animate-fade-in">{children}</main>
+        </div>
+      </div>
+    </div>
+  );
+}