diff --git a/frontend/application/app/dashboard/page.tsx b/frontend/application/app/dashboard/page.tsx index a180ce4..f91a997 100644 --- a/frontend/application/app/dashboard/page.tsx +++ b/frontend/application/app/dashboard/page.tsx @@ -1,3 +1,4 @@ +import { Suspense } from 'react'; import type { Metadata } from 'next'; import UserDashboard from "../../components/UserDashboard"; import { getPageMetadata } from "../../lib/seo"; @@ -12,6 +13,11 @@ export async function generateMetadata(): Promise { } export default function DashboardPage() { - return ; + return ( + در حال بارگذاری داشبورد...}> + + + ); } + diff --git a/frontend/application/components/UserDashboard.tsx b/frontend/application/components/UserDashboard.tsx index f34cb7f..15c5bde 100644 --- a/frontend/application/components/UserDashboard.tsx +++ b/frontend/application/components/UserDashboard.tsx @@ -36,15 +36,30 @@ export default function UserDashboard() { }, [isLoggedIn, router]); const { orders } = useCartStore(); - const [activeTab, setActiveTab] = React.useState<"profile" | "orders" | "wallet" | "addresses" | "tickets" | "pets" | "prescriptions" | "overview">("profile"); + const validTabs = React.useMemo(() => ['profile', 'orders', 'wallet', 'addresses', 'tickets', 'pets', 'prescriptions'], []); - // Set tab from URL query param if present + // Initialize tab directly from URL or default to profile + const initialTab = (searchParams.get('tab') as "profile" | "orders" | "wallet" | "addresses" | "tickets" | "pets" | "prescriptions") || "profile"; + const [activeTab, setActiveTab] = React.useState<"profile" | "orders" | "wallet" | "addresses" | "tickets" | "pets" | "prescriptions" | "overview">( + validTabs.includes(initialTab) ? initialTab : "profile" + ); + + // Handle tab click and update browser URL without full reloads + const handleTabChange = React.useCallback((tabId: "profile" | "orders" | "wallet" | "addresses" | "tickets" | "pets" | "prescriptions") => { + setActiveTab(tabId); + const newUrl = tabId === 'profile' ? '/dashboard' : `/dashboard?tab=${tabId}`; + window.history.replaceState(null, '', newUrl); + }, []); + + // Sync tab if user navigates back/forward in browser history or searchParams change useEffect(() => { const tabParam = searchParams.get('tab'); - if (tabParam && ['profile', 'orders', 'wallet', 'addresses', 'tickets', 'pets', 'prescriptions'].includes(tabParam)) { + if (tabParam && validTabs.includes(tabParam)) { setActiveTab(tabParam as "profile" | "orders" | "wallet" | "addresses" | "tickets" | "pets" | "prescriptions"); + } else if (!tabParam) { + setActiveTab("profile"); } - }, [searchParams]); + }, [searchParams, validTabs]); const [isLoadingOrders, setIsLoadingOrders] = useState(false); const [prescriptions, setPrescriptions] = useState([]); @@ -402,7 +417,7 @@ export default function UserDashboard() { {tabs.map(tab => (