frontend/src/pages/SiteOverview/SiteOverview.tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router';
+import { useParams, useSearchParams } from 'react-router';
 import Page from '../Page';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
@@ -95,6 +95,17 @@ const MOCK_SITE: MockSite = {
     ],
 };
 
+const VALID_TABS = [
+    'overview',
+    'deployments',
+    'forward-rules',
+    'custom-headers',
+    'settings',
+] as const;
+type TabValue = (typeof VALID_TABS)[number];
+
+const DEFAULT_TAB: TabValue = 'overview';
+
 const SiteOverviewSkeleton = memo(() => (
     <>
         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-2">
@@ -149,11 +160,32 @@ const SiteOverviewSkeleton = memo(() => (
 
 const SiteOverview = () => {
     const { id } = useParams<{ id: string }>();
+    const [searchParams, setSearchParams] = useSearchParams();
     const { data: site, isLoading: isLoadingSite, error: siteError } = useSite(id!);
     const toggleSiteEnabled = useToggleSiteEnabled(id!);
 
     const mockSite = MOCK_SITE;
 
+    const tabParam = searchParams.get('tab');
+    const activeTab: TabValue =
+        tabParam && VALID_TABS.includes(tabParam as TabValue)
+            ? (tabParam as TabValue)
+            : DEFAULT_TAB;
+
+    const handleTabChange = (value: string) => {
+        setSearchParams(
+            (prev) => {
+                if (value === DEFAULT_TAB) {
+                    prev.delete('tab');
+                } else {
+                    prev.set('tab', value);
+                }
+                return prev;
+            },
+            { replace: true }
+        );
+    };
+
     const handleToggleEnabled = () => {
         toggleSiteEnabled.mutate();
     };
@@ -197,7 +229,7 @@ const SiteOverview = () => {
                         </div>
                     </div>
 
-                    <Tabs defaultValue="overview">
+                    <Tabs value={activeTab} onValueChange={handleTabChange}>
                         <div className="flex items-center">
                             <TabsList>
                                 <TabsTrigger value="overview">