From f561bf779fd1deb965561711873c6a6c8e53b32b Mon Sep 17 00:00:00 2001
From: JayashTripathy <jayashtripathy371@gmail.com>
Date: Fri, 20 Jun 2025 17:33:03 +0530
Subject: [PATCH] feat: add analytics tabs in pathparams fix: padding in tabs

---
 .../analytics/{ => [tabId]}/header.tsx        |  0
 .../analytics/{ => [tabId]}/layout.tsx        |  3 +-
 .../analytics/{ => [tabId]}/page.tsx          | 37 +++++++++++++------
 web/next.config.js                            |  5 +++
 4 files changed, 31 insertions(+), 14 deletions(-)
 rename web/app/(all)/[workspaceSlug]/(projects)/analytics/{ => [tabId]}/header.tsx (100%)
 rename web/app/(all)/[workspaceSlug]/(projects)/analytics/{ => [tabId]}/layout.tsx (70%)
 rename web/app/(all)/[workspaceSlug]/(projects)/analytics/{ => [tabId]}/page.tsx (87%)

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/analytics/header.tsx b/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx
similarity index 100%
rename from web/app/(all)/[workspaceSlug]/(projects)/analytics/header.tsx
rename to web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/analytics/layout.tsx b/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx
similarity index 70%
rename from web/app/(all)/[workspaceSlug]/(projects)/analytics/layout.tsx
rename to web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx
index 6f087aa5683..3a531a7b292 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/analytics/layout.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx
@@ -1,10 +1,9 @@
 "use client";
 // components
 import { AppHeader, ContentWrapper } from "@/components/core";
-// plane web components
 import { WorkspaceAnalyticsHeader } from "./header";
 
-export default function WorkspaceAnalyticsLayout({ children }: { children: React.ReactNode }) {
+export default function WorkspaceAnalyticsTabLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <AppHeader header={<WorkspaceAnalyticsHeader />} />
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/analytics/page.tsx b/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
similarity index 87%
rename from web/app/(all)/[workspaceSlug]/(projects)/analytics/page.tsx
rename to web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
index 7e9e0ac9e96..477534a593c 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/analytics/page.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
@@ -16,23 +16,32 @@ import { useCommandPalette, useEventTracker, useProject, useUserPermissions, use
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { getAnalyticsTabs } from "@/plane-web/components/analytics/tabs";
 
-const AnalyticsPage = observer(() => {
+type Props = {
+  params: {
+    tabId: string;
+  };
+};
+
+const AnalyticsPage = observer((props: Props) => {
+  // props
+  const { params } = props;
+  const { tabId } = params;
+
+  // hooks
   const router = useRouter();
-  const searchParams = useSearchParams();
+
   // plane imports
   const { t } = useTranslation();
+
   // store hooks
   const { toggleCreateProjectModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
   const { workspaceProjectIds, loader } = useProject();
   const { currentWorkspace } = useWorkspace();
   const { allowPermissions } = useUserPermissions();
+
   // helper hooks
   const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/analytics" });
-  // derived values
-  const pageTitle = currentWorkspace?.name
-    ? t(`workspace_analytics.page_label`, { workspace: currentWorkspace?.name })
-    : undefined;
 
   // permissions
   const canPerformEmptyStateActions = allowPermissions(
@@ -40,8 +49,11 @@ const AnalyticsPage = observer(() => {
     EUserPermissionsLevel.WORKSPACE
   );
 
+  // derived values
+  const pageTitle = currentWorkspace?.name
+    ? t(`workspace_analytics.page_label`, { workspace: currentWorkspace?.name })
+    : undefined;
   const ANALYTICS_TABS = useMemo(() => getAnalyticsTabs(t), [t]);
-
   const tabs = useMemo(
     () =>
       ANALYTICS_TABS.map((tab) => ({
@@ -49,13 +61,13 @@ const AnalyticsPage = observer(() => {
         label: tab.label,
         content: <tab.content />,
         onClick: () => {
-          router.push(`?tab=${tab.key}`);
+          router.push(`/${currentWorkspace?.slug}/analytics/${tab.key}`);
         },
         isDisabled: tab.isDisabled,
       })),
-    [ANALYTICS_TABS, router]
+    [ANALYTICS_TABS, router, currentWorkspace?.slug]
   );
-  const defaultTab = searchParams.get("tab") || ANALYTICS_TABS[0].key;
+  const defaultTab = tabId || ANALYTICS_TABS[0].key;
 
   return (
     <>
@@ -70,8 +82,9 @@ const AnalyticsPage = observer(() => {
                 defaultTab={defaultTab}
                 size="md"
                 tabListContainerClassName="px-6 py-2 border-b border-custom-border-200 flex items-center justify-between"
-                tabListClassName="my-2 max-w-36"
-                tabPanelClassName="h-full w-full overflow-hidden overflow-y-auto"
+                tabListClassName="my-2 w-auto"
+                tabClassName="px-3"
+                tabPanelClassName="h-full overflow-hidden overflow-y-auto px-2"
                 storeInLocalStorage={false}
                 actions={<AnalyticsFilterActions />}
               />
diff --git a/web/next.config.js b/web/next.config.js
index 41ed049c558..34c3c3a7fca 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -53,6 +53,11 @@ const nextConfig = {
         destination: "/:workspaceSlug/settings/projects/:projectId/:path*",
         permanent: true,
       },
+      {
+        source: "/:workspaceSlug/analytics",
+        destination: "/:workspaceSlug/analytics/overview",
+        permanent: true,
+      },
       {
         source: "/:workspaceSlug/settings/api-tokens",
         destination: "/:workspaceSlug/settings/account/api-tokens",