[TOOL-3684] Dashboard: Add FTUX in project overview page (#6466)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces several enhancements and fixes across various components in the dashboard application, including new features, property adjustments, and structural changes for improved functionality and usability.

### Detailed summary
- Added `showRangeSelector` property to `AnalyticsHeader`.
- Updated `RotateSecretKeyButton` to be exported.
- Removed `isEnabled` property and replaced it with `isDisabled` across multiple components.
- Introduced `IntegrateAPIKeyCodeTabs` and related sections in `ProjectFTUX`.
- Enhanced project integration sections with new UI components and improved code examples.
- Refactored `NotificationButtonInner` and other components to remove `isEnabled` checks.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/.storybook/main.ts

@@ -27,5 +27,8 @@ const config: StorybookConfig = {
     },
   },
   staticDirs: ["../public"],
+  features: {
+    experimentalRSC: true,
+  },
 };
 export default config;

apps/dashboard/src/@/components/blocks/code-segment.client.tsx

@@ -96,7 +96,6 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
             onClick: () => setEnvironment(env.environment),
             isActive: activeEnvironment === env.environment,
             name: env.title,
-            isEnabled: true,
           }))}
           tabClassName="text-sm gap-2 !text-sm"
           tabIconClassName="size-4"

apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx

@@ -91,13 +91,11 @@ export function DatePickerWithRange(props: {
                     name: "From",
                     onClick: () => setScreen("from"),
                     isActive: screen === "from",
-                    isEnabled: true,
                   },
                   {
                     name: "To",
                     onClick: () => setScreen("to"),
                     isActive: screen === "to",
-                    isEnabled: true,
                   },
                 ]}
               />

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -79,7 +79,7 @@ export function TabButtons(props: {
     name: React.ReactNode;
     onClick: () => void;
     isActive: boolean;
-    isEnabled?: boolean;
+    isDisabled?: boolean;
     icon?: React.FC<{ className?: string }>;
   }[];
   tabClassName?: string;
@@ -119,11 +119,11 @@ export function TabButtons(props: {
                   "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
                   !tab.isActive &&
                     "text-muted-foreground hover:text-foreground",
-                  !tab.isEnabled && "cursor-not-allowed opacity-50",
+                  tab.isDisabled && "cursor-not-allowed opacity-50",
                   props.tabClassName,
                   tab.isActive && props.activeTabClassName,
                 )}
-                onClick={tab.isEnabled ? tab.onClick : undefined}
+                onClick={!tab.isDisabled ? tab.onClick : undefined}
               >
                 {tab.icon && (
                   <tab.icon className={cn("size-6", props.tabIconClassName)} />

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-button.tsx

@@ -71,7 +71,6 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
                   name: mode,
                   isActive: mode === listingMode,
                   onClick: () => setListingMode(mode),
-                  isEnabled: true,
                 }))}
                 tabClassName="text-sm gap-2 !text-sm"
                 tabContainerClassName="gap-0.5"

apps/dashboard/src/app/account/contracts/_components/GetStartedWithContractsDeploy.tsx

@@ -100,7 +100,6 @@ const DeployOptions = (props: {
           key,
           name: value.title,
           isActive: activeTab === key,
-          isEnabled: true,
           onClick: () => setActiveTab(key as TabId),
         }))}
         tabClassName="font-medium"

apps/dashboard/src/app/login/onboarding/LoginOrSignup/LoginOrSignup.tsx

@@ -89,13 +89,11 @@ export function LoginOrSignup(props: {
             name: "Create account",
             onClick: () => setTab("signup"),
             isActive: tab === "signup",
-            isEnabled: true,
           },
           {
             name: "I already have an account",
             onClick: () => setTab("login"),
             isActive: tab === "login",
-            isEnabled: true,
           },
         ]}
       />

apps/dashboard/src/app/login/onboarding/team-onboarding/InviteTeamMembers.tsx

@@ -227,13 +227,11 @@ function InviteModalContent(props: {
               name: "Starter",
               onClick: () => setPlanToShow("starter"),
               isActive: planToShow === "starter",
-              isEnabled: true,
             },
             {
               name: "Growth",
               onClick: () => setPlanToShow("growth"),
               isActive: planToShow === "growth",
-              isEnabled: true,
             },
           ]}
         />

apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { getBillingCheckoutUrl } from "@/actions/billing";
+import { apiServerProxy } from "@/actions/proxies";
 import { sendTeamInvites } from "@/actions/sendTeamInvite";
 import type { Team } from "@/api/team";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import { upload } from "thirdweb/storage";
-import { apiServerProxy } from "../../../../@/actions/proxies";
 import { useTrack } from "../../../../hooks/analytics/useTrack";
 import { updateTeam } from "../../../team/[team_slug]/(team)/~/settings/general/updateTeam";
 import { InviteTeamMembersUI } from "./InviteTeamMembers";

apps/dashboard/src/app/team/[team_slug]/(team)/~/analytics/page.tsx

@@ -63,7 +63,12 @@ export default async function TeamOverviewPage(props: {
   return (
     <div className="flex grow flex-col">
       <div className="border-b">
-        <AnalyticsHeader title="Analytics" interval={interval} range={range} />
+        <AnalyticsHeader
+          title="Analytics"
+          interval={interval}
+          range={range}
+          showRangeSelector={true}
+        />
       </div>
       <div className="flex grow flex-col justify-between gap-10 md:container md:pt-8 md:pb-16">
         <Suspense fallback={<GenericLoadingPage />}>

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx

@@ -86,7 +86,6 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
           key,
           name,
           isActive: activeTab === key,
-          isEnabled: true,
           onClick: () => setActiveTab(key),
           icon:
             (key === "aws-kms" && !isAwsKmsConfigured) ||

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx

@@ -62,13 +62,11 @@ export function TeamMembersSettingsPage(props: {
             isActive: manageTab === "members",
             name: "Team Members",
             onClick: () => setManageTab("members"),
-            isEnabled: true,
           },
           {
             isActive: manageTab === "invites",
             name: "Pending Invites",
             onClick: () => setManageTab("invites"),
-            isEnabled: true,
           },
         ]}
       />

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { TabButtons } from "@/components/ui/tabs";
+import { useState } from "react";
+
+type TabKey = "ts" | "react" | "react-native" | "dotnet" | "unity" | "unreal";
+
+const tabNames: Record<TabKey, string> = {
+  ts: "TypeScript",
+  react: "React",
+  "react-native": "React Native",
+  dotnet: ".NET",
+  unity: "Unity",
+  unreal: "Unreal Engine",
+};
+
+export function IntegrateAPIKeyCodeTabs(props: {
+  tabs: Record<TabKey, React.ReactNode>;
+}) {
+  const [tab, setTab] = useState<TabKey>("ts");
+
+  return (
+    <div>
+      <TabButtons
+        tabClassName="!text-sm"
+        tabs={Object.entries(tabNames).map(([key, name]) => ({
+          name,
+          onClick: () => setTab(key as TabKey),
+          isActive: tab === key,
+        }))}
+      />
+      <div className="h-3" />
+      {props.tabs[tab]}
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectFTUX/ProjectFTUX.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { projectStub } from "../../../../../../stories/stubs";
+import { ProjectFTUX } from "./ProjectFTUX";
+
+const meta = {
+  title: "Project/ProjectFTUX",
+  component: ProjectFTUX,
+  decorators: [
+    (Story) => (
+      <div className="container py-8 pb-20">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ProjectFTUX>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    project: {
+      ...projectStub("foo", "bar"),
+      secretKeys: [
+        {
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          hash: "1234567890",
+          masked: "1234567890",
+        },
+      ],
+    },
+    teamSlug: "bar",
+  },
+};