[WEB-4921] refactor: replaced tabs implementation with propel tabs

apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx

@@ -6,7 +6,8 @@ import { useRouter } from "next/navigation";
 // plane package imports
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { type TabItem, Tabs } from "@plane/ui";
+import { Tabs } from "@plane/propel/tabs";
+import { TAnalyticsTabsBase } from "@plane/types";
 // components
 import AnalyticsFilterActions from "@/components/analytics/analytics-filter-actions";
 import { PageHead } from "@/components/core/page-title";
@@ -59,40 +60,37 @@ const AnalyticsPage = observer((props: Props) => {
     ? t(`workspace_analytics.page_label`, { workspace: currentWorkspace?.name })
     : undefined;
   const ANALYTICS_TABS = useMemo(() => getAnalyticsTabs(t), [t]);
-  const tabs: TabItem[] = useMemo(
-    () =>
-      ANALYTICS_TABS.map((tab) => ({
-        key: tab.key,
-        label: tab.label,
-        content: <tab.content />,
-        onClick: () => {
-          router.push(`/${currentWorkspace?.slug}/analytics/${tab.key}`);
-        },
-        disabled: tab.isDisabled,
-      })),
-    [ANALYTICS_TABS, router, currentWorkspace?.slug]
-  );
-  const defaultTab = tabId || ANALYTICS_TABS[0].key;
+  const defaultTab = (tabId as TAnalyticsTabsBase) || ANALYTICS_TABS[0].key;
+
+  const handleTabChange = (value: TAnalyticsTabsBase) => {
+    router.push(`/${currentWorkspace?.slug}/analytics/${value}`);
+  };
 
   return (
     <>
       <PageHead title={pageTitle} />
       {workspaceProjectIds && (
         <>
           {workspaceProjectIds.length > 0 || loader === "init-loader" ? (
-            <div className="flex h-full overflow-hidden bg-custom-background-100 justify-between items-center  ">
-              <Tabs
-                tabs={tabs}
-                storageKey={`analytics-page-${currentWorkspace?.id}`}
-                defaultTab={defaultTab}
-                size="md"
-                tabListContainerClassName="px-6 py-2 border-b border-custom-border-200 flex items-center justify-between"
-                tabListClassName="my-2 w-auto"
-                tabClassName="px-3"
-                tabPanelClassName="h-full overflow-hidden overflow-y-auto px-2"
-                storeInLocalStorage={false}
-                actions={<AnalyticsFilterActions />}
-              />
+            <div className="flex h-full overflow-hidden bg-custom-background-100 justify-between items-center">
+              <Tabs value={defaultTab} onValueChange={handleTabChange} className="flex flex-col w-full h-full">
+                <div className="px-6 py-2 border-b border-custom-border-200 flex items-center justify-between">
+                  <Tabs.List className="my-2 w-auto">
+                    {ANALYTICS_TABS.map((tab) => (
+                      <Tabs.Trigger key={tab.key} value={tab.key} size="md" className="px-3" disabled={tab.isDisabled}>
+                        {tab.label}
+                      </Tabs.Trigger>
+                    ))}
+                  </Tabs.List>
+                  <AnalyticsFilterActions />
+                </div>
+
+                {ANALYTICS_TABS.map((tab) => (
+                  <Tabs.Content key={tab.key} value={tab.key} className="h-full overflow-hidden overflow-y-auto px-2">
+                    <tab.content />
+                  </Tabs.Content>
+                ))}
+              </Tabs>
             </div>
           ) : (
             <DetailedEmptyState

apps/web/core/components/analytics/work-items/modal/content.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { Tab } from "@headlessui/react";
 // plane package imports
 import { ICycle, IModule, IProject } from "@plane/types";
 import { Spinner } from "@plane/ui";
@@ -69,13 +68,11 @@ export const WorkItemsModalMainContent: React.FC<Props> = observer((props) => {
     );
 
   return (
-    <Tab.Group as={React.Fragment}>
-      <div className="flex flex-col gap-14 overflow-y-auto p-6">
-        <TotalInsights analyticsType="work-items" peekView={!fullScreen} />
-        <CreatedVsResolved />
-        <CustomizedInsights peekView={!fullScreen} isEpic={isEpic} />
-        <WorkItemsInsightTable />
-      </div>
-    </Tab.Group>
+    <div className="flex flex-col gap-14 overflow-y-auto p-6">
+      <TotalInsights analyticsType="work-items" peekView={!fullScreen} />
+      <CreatedVsResolved />
+      <CustomizedInsights peekView={!fullScreen} isEpic={isEpic} />
+      <WorkItemsInsightTable />
+    </div>
   );
 });