[TOOL-3124] Dashboard: Show 8 top projects, Add show more button for full list

Author: MananTank

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

@@ -2,8 +2,12 @@ import { getWalletConnections } from "@/api/analytics";
 import { type Project, getProjects } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
 import { Changelog } from "components/dashboard/Changelog";
+import { subDays } from "date-fns";
 import { redirect } from "next/navigation";
-import { TeamProjectsPage } from "./~/projects/TeamProjectsPage";
+import {
+  type ProjectWithAnalytics,
+  TeamProjectsPage,
+} from "./~/projects/TeamProjectsPage";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string }>;
@@ -16,7 +20,7 @@ export default async function Page(props: {
   }
 
   const projects = await getProjects(params.team_slug);
-  const projectsWithTotalWallets = await getProjectsWithTotalWallets(projects);
+  const projectsWithTotalWallets = await getProjectsWithAnalytics(projects);
 
   return (
     <div className="container flex grow flex-col gap-12 py-8 lg:flex-row">
@@ -34,30 +38,35 @@ export default async function Page(props: {
   );
 }
 
-async function getProjectsWithTotalWallets(
+async function getProjectsWithAnalytics(
   projects: Project[],
-): Promise<Array<Project & { totalConnections: number }>> {
+): Promise<Array<ProjectWithAnalytics>> {
   return Promise.all(
     projects.map(async (p) => {
       try {
+        const today = new Date();
+        const thirtyDaysAgo = subDays(today, 30);
+
         const data = await getWalletConnections({
           clientId: p.publishableKey,
           period: "all",
+          from: thirtyDaysAgo,
+          to: today,
         });
 
-        let totalConnections = 0;
+        let uniqueWalletsConnected = 0;
         for (const d of data) {
-          totalConnections += d.totalConnections;
+          uniqueWalletsConnected += d.uniqueWalletsConnected;
         }
 
         return {
           ...p,
-          totalConnections,
+          monthlyActiveUsers: uniqueWalletsConnected,
         };
       } catch {
         return {
           ...p,
-          totalConnections: 0,
+          monthlyActiveUsers: 0,
         };
       }
     }),

apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx

@@ -23,6 +23,7 @@ import {
   SelectTrigger,
 } from "@/components/ui/select";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
 import { LazyCreateAPIKeyDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
 import {
   ChevronDownIcon,
@@ -33,22 +34,25 @@ import {
 import Link from "next/link";
 import { useMemo, useState } from "react";
 
-type SortById = "name" | "createdAt" | "totalConnections";
+type SortById = "name" | "createdAt" | "monthlyActiveUsers";
 
-type ProjectWithTotalConnections = Project & { totalConnections: number };
+export type ProjectWithAnalytics = Project & {
+  monthlyActiveUsers: number;
+};
 
 export function TeamProjectsPage(props: {
-  projects: ProjectWithTotalConnections[];
+  projects: ProjectWithAnalytics[];
   team: Team;
 }) {
   const { projects } = props;
   const [searchTerm, setSearchTerm] = useState("");
-  const [sortBy, setSortBy] = useState<SortById>("totalConnections");
+  const [sortBy, setSortBy] = useState<SortById>("monthlyActiveUsers");
   const [isCreateProjectDialogOpen, setIsCreateProjectDialogOpen] =
     useState(false);
   const router = useDashboardRouter();
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const projectsToShow = useMemo(() => {
+  const filteredProjects = useMemo(() => {
     let _projectsToShow = !searchTerm
       ? projects
       : projects.filter(
@@ -68,15 +72,23 @@ export function TeamProjectsPage(props: {
         (a, b) =>
           new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
       );
-    } else if (sortBy === "totalConnections") {
+    } else if (sortBy === "monthlyActiveUsers") {
       _projectsToShow = _projectsToShow.sort(
-        (a, b) => b.totalConnections - a.totalConnections,
+        (a, b) => b.monthlyActiveUsers - a.monthlyActiveUsers,
       );
     }
 
     return _projectsToShow;
   }, [searchTerm, sortBy, projects]);
 
+  const maxProjectsToShow = 8;
+
+  const projectsToShow = isExpanded
+    ? filteredProjects
+    : filteredProjects.slice(0, maxProjectsToShow);
+
+  const showExpandCollapseButton = filteredProjects.length > maxProjectsToShow;
+
   return (
     <div className="flex grow flex-col">
       {/* Filters + Add New */}
@@ -132,6 +144,27 @@ export function TeamProjectsPage(props: {
         </div>
       )}
 
+      {showExpandCollapseButton && (
+        <div className="mt-4 flex items-center justify-end">
+          <Button
+            size="sm"
+            variant="ghost"
+            className="gap-2"
+            onClick={() => {
+              setIsExpanded((v) => !v);
+            }}
+          >
+            <ChevronDownIcon
+              className={cn(
+                "size-4 transition-transform",
+                isExpanded && "rotate-180",
+              )}
+            />
+            {isExpanded ? "Show less" : "Show more"}
+          </Button>
+        </div>
+      )}
+
       <LazyCreateAPIKeyDialog
         open={isCreateProjectDialogOpen}
         onOpenChange={setIsCreateProjectDialogOpen}
@@ -148,7 +181,7 @@ export function TeamProjectsPage(props: {
 }
 
 function ProjectCard(props: {
-  project: ProjectWithTotalConnections;
+  project: ProjectWithAnalytics;
   team_slug: string;
 }) {
   const { project, team_slug } = props;
@@ -160,7 +193,7 @@ function ProjectCard(props: {
       {/* TODO - set image */}
       <ProjectAvatar className="size-10 rounded-full" src="" />
 
-      <div className="flex-grow flex-col gap-1.5">
+      <div className="flex flex-grow flex-col gap-1">
         <Link
           className="group static before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0"
           // remove /connect when we have overview page
@@ -170,8 +203,8 @@ function ProjectCard(props: {
         </Link>
 
         <p className="flex items-center gap-1 text-muted-foreground text-sm">
-          <span>{project.totalConnections}</span>
-          Total Users
+          <span>{project.monthlyActiveUsers}</span>
+          Monthly Active Users
         </p>
       </div>
 
@@ -256,11 +289,11 @@ function SelectBy(props: {
   value: SortById;
   onChange: (value: SortById) => void;
 }) {
-  const values: SortById[] = ["name", "createdAt", "totalConnections"];
+  const values: SortById[] = ["name", "createdAt", "monthlyActiveUsers"];
   const valueToLabel: Record<SortById, string> = {
     name: "Name",
     createdAt: "Creation Date",
-    totalConnections: "Total Users",
+    monthlyActiveUsers: "Monthly Active Users",
   };
 
   return (