diff --git a/frontend/src/pages/SiteOverview/SiteOverview.tsx b/frontend/src/pages/SiteOverview/SiteOverview.tsx
index b263117..86c89cb 100644
--- a/frontend/src/pages/SiteOverview/SiteOverview.tsx
+++ b/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(() => (
<>
@@ -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 = () => {
-
+