diff --git a/frontend/src/app/[lang]/dashboard/layout.tsx b/frontend/src/app/[lang]/dashboard/layout.tsx
index 38ad25d..ac67e45 100644
--- a/frontend/src/app/[lang]/dashboard/layout.tsx
+++ b/frontend/src/app/[lang]/dashboard/layout.tsx
@@ -1,11 +1,14 @@
'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 { Link } from '@/i18n/Link';
+import { useLocalizedRouter, usePathname } from '@/i18n/navigation';
+import { useT } from '@/i18n/I18nProvider';
+import { LanguageSwitcher } from '@/i18n/LanguageSwitcher';
+import type { Dictionary } from '@/i18n/dictionaries/fa';
import { DeploymentProgressManager } from '@/components/deployment-progress-manager';
import { useDeployProgressStore } from '@/lib/deploy-progress-store';
import {
@@ -31,43 +34,45 @@ import {
Database,
} from 'lucide-react';
-type NavItem = { href: string; label: string; icon: ReactNode };
+type NavKey = keyof Dictionary['nav'];
+type NavItem = { href: string; labelKey: NavKey; icon: ReactNode };
const userNavItems: NavItem[] = [
- { href: '/dashboard', label: 'Dashboard', icon: },
- { href: '/dashboard/apps', label: 'Applications', icon: },
- { href: '/dashboard/services', label: 'Databases & Services', icon: },
- { href: '/dashboard/logs', label: 'Logs', icon: },
- { href: '/dashboard/deploy', label: 'New Deploy', icon: },
- { href: '/dashboard/wallet', label: 'Wallet', icon: },
- { href: '/dashboard/invoices', label: 'Invoices', icon: },
- { href: '/dashboard/tickets', label: 'Tickets', icon: },
+ { href: '/dashboard', labelKey: 'dashboard', icon: },
+ { href: '/dashboard/apps', labelKey: 'applications', icon: },
+ { href: '/dashboard/services', labelKey: 'services', icon: },
+ { href: '/dashboard/logs', labelKey: 'logs', icon: },
+ { href: '/dashboard/deploy', labelKey: 'newDeploy', icon: },
+ { href: '/dashboard/wallet', labelKey: 'wallet', icon: },
+ { href: '/dashboard/invoices', labelKey: 'invoices', icon: },
+ { href: '/dashboard/tickets', labelKey: 'tickets', icon: },
];
const adminNavItems: NavItem[] = [
- { href: '/dashboard/admin/users', label: 'Users', icon: },
- { href: '/dashboard/admin/apps', label: 'All Applications', icon: },
- { href: '/dashboard/admin/billing', label: 'Billing Plans', icon: },
- { href: '/dashboard/admin/invoices', label: 'Invoices', icon: },
- { href: '/dashboard/admin/clusters', label: 'Clusters', icon: },
- { href: '/dashboard/admin/pools', label: 'Cluster Pools', icon: },
- { href: '/dashboard/admin/tickets', label: 'All Tickets', icon: },
+ { href: '/dashboard/admin/users', labelKey: 'users', icon: },
+ { href: '/dashboard/admin/apps', labelKey: 'allApplications', icon: },
+ { href: '/dashboard/admin/billing', labelKey: 'billingPlans', icon: },
+ { href: '/dashboard/admin/invoices', labelKey: 'invoices', icon: },
+ { href: '/dashboard/admin/clusters', labelKey: 'clusters', icon: },
+ { href: '/dashboard/admin/pools', labelKey: 'clusterPools', icon: },
+ { href: '/dashboard/admin/tickets', labelKey: 'allTickets', icon: },
];
const technicalNavItems: NavItem[] = [
- { href: '/dashboard/admin/users', label: 'Users', icon: },
- { href: '/dashboard/admin/apps', label: 'All Applications', icon: },
- { href: '/dashboard/staff/tickets', label: 'Technical Tickets', icon: },
+ { href: '/dashboard/admin/users', labelKey: 'users', icon: },
+ { href: '/dashboard/admin/apps', labelKey: 'allApplications', icon: },
+ { href: '/dashboard/staff/tickets', labelKey: 'technicalTickets', icon: },
];
const salesNavItems: NavItem[] = [
- { href: '/dashboard/admin/users', label: 'Users', icon: },
- { href: '/dashboard/staff/tickets', label: 'Sales Tickets', icon: },
+ { href: '/dashboard/admin/users', labelKey: 'users', icon: },
+ { href: '/dashboard/staff/tickets', labelKey: 'salesTickets', icon: },
];
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+ const t = useT();
const { user, isAuthenticated, isLoading, logout } = useAuthStore();
- const router = useRouter();
+ const router = useLocalizedRouter();
const pathname = usePathname();
const [sidebarOpen, setSidebarOpen] = useState(false);
const deployBarMinimized = useDeployProgressStore((s) => s.minimized);
@@ -106,7 +111,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
-
Loading...
+
{t.common.loading}
);
@@ -126,7 +131,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
}`}
>
{item.icon}
- {item.label}
+ {t.nav[item.labelKey]}
{badge !== undefined && badge > 0 && (
{badge}
@@ -160,7 +165,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
<>
- Admin
+ {t.nav.sectionAdmin}
{adminNavItems.map((item) => (
@@ -173,7 +178,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
<>
- Technical
+ {t.nav.sectionTechnical}
{technicalNavItems.map((item) => (
@@ -186,7 +191,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
<>
- Sales
+ {t.nav.sectionSales}
{salesNavItems.map((item) => (
@@ -221,13 +226,13 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
{/* Mobile sidebar */}