💰 Add new revenue page in staff tools (#yoginth/eng-116-add-new-reven…

…ue-page-in-staff-tools)

Summary: Added a new revenue page in staff tools, displaying NFT, Pro, and Signup revenue stats.

Highlights:

• Created `NftRevenue`, `ProRevenue`, and `SignupRevenue` components to fetch and display respective revenue data.
• Added a new route `/staff/revenue` and updated `StaffSidebar` to include a link to the revenue page.
• Removed revenue components from `Stats` page, consolidating them in the new revenue page.

Read more: https://pierre.co/hey/hey/yoginth/eng-116-add-new-revenue-page-in-staff-tools

apps/web/src/components/Staff/Revenue/index.tsx

@@ -0,0 +1,44 @@
+import MetaTags from "@components/Common/MetaTags";
+import { Leafwatch } from "@helpers/leafwatch";
+import { APP_NAME } from "@hey/data/constants";
+import { FeatureFlag } from "@hey/data/feature-flags";
+import { PAGEVIEW } from "@hey/data/tracking";
+import { GridItemEight, GridItemFour, GridLayout } from "@hey/ui";
+import { useFlag } from "@unleash/proxy-client-react";
+import type { NextPage } from "next";
+import { useEffect } from "react";
+import Custom404 from "src/pages/404";
+import { useProfileStore } from "src/store/persisted/useProfileStore";
+import StaffSidebar from "../Sidebar";
+import NftRevenue from "./NftRevenue";
+import ProRevenue from "./ProRevenue";
+import SignupRevenue from "./SignupRevenue";
+
+const Revenue: NextPage = () => {
+  const { currentProfile } = useProfileStore();
+  const isStaff = useFlag(FeatureFlag.Staff);
+
+  useEffect(() => {
+    Leafwatch.track(PAGEVIEW, { page: "staff-tools", subpage: "revenue" });
+  }, []);
+
+  if (!currentProfile || !isStaff) {
+    return <Custom404 />;
+  }
+
+  return (
+    <GridLayout>
+      <MetaTags title={`Staff Tools • Revenue • ${APP_NAME}`} />
+      <GridItemFour>
+        <StaffSidebar />
+      </GridItemFour>
+      <GridItemEight className="space-y-5">
+        <ProRevenue />
+        <SignupRevenue />
+        <NftRevenue />
+      </GridItemEight>
+    </GridLayout>
+  );
+};
+
+export default Revenue;

apps/web/src/components/Staff/Sidebar.tsx

@@ -15,6 +15,11 @@ const sidebarItems = [
     title: "Overview",
     url: "/staff"
   },
+  {
+    icon: <CurrencyDollarIcon className="size-4" />,
+    title: "Revenue",
+    url: "/staff/revenue"
+  },
   {
     icon: <ChartBarIcon className="size-4" />,
     title: "Stats",

apps/web/src/components/Staff/Stats/index.tsx

@@ -11,9 +11,6 @@ import Custom404 from "src/pages/404";
 import { useProfileStore } from "src/store/persisted/useProfileStore";
 import StaffSidebar from "../Sidebar";
 import LensStats from "./LensStats";
-import NftRevenue from "./NftRevenue";
-import ProRevenue from "./ProRevenue";
-import SignupRevenue from "./SignupRevenue";
 
 const Stats: NextPage = () => {
   const { currentProfile } = useProfileStore();
@@ -34,9 +31,6 @@ const Stats: NextPage = () => {
         <StaffSidebar />
       </GridItemFour>
       <GridItemEight className="space-y-5">
-        <ProRevenue />
-        <SignupRevenue />
-        <NftRevenue />
         <LensStats />
       </GridItemEight>
     </GridLayout>

apps/web/src/pages/staff/revenue.tsx

@@ -0,0 +1,3 @@
+import Revenue from "@components/Staff/Revenue";
+
+export default Revenue;