[TOOL-3124] Dashboard: paginate projects, sort by Montly active users (#6027)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the project analytics in the dashboard by changing how project data is retrieved and displayed. It updates the calculation of user connections to reflect monthly active users and introduces pagination for project listings.

### Detailed summary
- Replaced `getProjectsWithTotalWallets` with `getProjectsWithAnalytics`.
- Updated project data structure to include `monthlyActiveUsers` instead of `totalConnections`.
- Introduced pagination in the `TeamProjectsPage` component.
- Changed sorting criteria from `totalConnections` to `monthlyActiveUsers`.
- Updated UI elements to reflect the new data fields.

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

<!-- end pr-codex -->

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

@@ -3,6 +3,7 @@
 import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
 import { ProjectAvatar } from "@/components/blocks/Avatars/ProjectAvatar";
+import { PaginationButtons } from "@/components/pagination-buttons";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Button } from "@/components/ui/button";
 import {
@@ -33,22 +34,24 @@ 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 projectsToShow = useMemo(() => {
+  const sortedProjects = useMemo(() => {
     let _projectsToShow = !searchTerm
       ? projects
       : projects.filter(
@@ -68,15 +71,25 @@ 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 pageSize = 8;
+  const [page, setPage] = useState(1);
+  const paginatedProjects = sortedProjects.slice(
+    (page - 1) * pageSize,
+    page * pageSize,
+  );
+
+  const showPagination = sortedProjects.length > pageSize;
+  const totalPages = Math.ceil(sortedProjects.length / pageSize);
+
   return (
     <div className="flex grow flex-col">
       {/* Filters + Add New */}
@@ -94,7 +107,7 @@ export function TeamProjectsPage(props: {
       <div className="h-6" />
 
       {/* Projects */}
-      {projectsToShow.length === 0 ? (
+      {paginatedProjects.length === 0 ? (
         <>
           {searchTerm !== "" ? (
             <div className="flex min-h-[450px] grow items-center justify-center rounded-lg border border-border">
@@ -120,7 +133,7 @@ export function TeamProjectsPage(props: {
         </>
       ) : (
         <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
-          {projectsToShow.map((project) => {
+          {paginatedProjects.map((project) => {
             return (
               <ProjectCard
                 key={project.id}
@@ -132,6 +145,16 @@ export function TeamProjectsPage(props: {
         </div>
       )}
 
+      {showPagination && (
+        <div className="py-6">
+          <PaginationButtons
+            activePage={page}
+            onPageClick={setPage}
+            totalPages={totalPages}
+          />
+        </div>
+      )}
+
       <LazyCreateAPIKeyDialog
         open={isCreateProjectDialogOpen}
         onOpenChange={setIsCreateProjectDialogOpen}
@@ -148,7 +171,7 @@ export function TeamProjectsPage(props: {
 }
 
 function ProjectCard(props: {
-  project: ProjectWithTotalConnections;
+  project: ProjectWithAnalytics;
   team_slug: string;
 }) {
   const { project, team_slug } = props;
@@ -160,7 +183,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 +193,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 +279,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 (