[Dashboard] Feature: Add initial insight UI (#5435)

## Problem solved
BLOCK-436

This PR adds an initial UI for insight to give visibility to insight in the platform. The first three blueprints are Data APIs available for all users. The next iteration will add the ability to create a new blueprint.

![CleanShot 2024-11-15 at [email protected]](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/dGj3ureqJk84bcvq1s10/8d0fb6d9-f80b-414a-925d-e6ed68aa6bfb.png)

---

## PR-Codex overview
This PR introduces a new `Insight` page under the project structure, adding components for displaying blueprints, including a header and an explorer. It also implements authentication redirection and a loading state for better user experience.

### Detailed summary
- Added a new route for `Insight` in `layout.tsx`.
- Created `BlueprintsPageHeader` component for the `Insight` page.
- Implemented `Page` component with authentication check and redirection logic.
- Developed `BlueprintsPage` component to display blueprints with a loading state.
- Created `getProjectBlueprints` function to fetch blueprint data.
- Added `BlueprintsExplorer` component to list blueprints with a fallback message.
- Implemented `BlueprintCard` for individual blueprint display.
- Included loading spinner in `Loading` component.

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

<!-- end pr-codex -->

Linear Ticket: https://linear.app/thirdweb/issue/BLOCK-436/implement-initial-insight-ui

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `Insight` page to the dashboard, enhancing the team project features with insights into blueprints. It includes user authentication, a header component, and displays blueprints with relevant data.

### Detailed summary
- Added `Insight` route in `layout.tsx`.
- Created `Page` component in `page.tsx` for rendering insights.
- Implemented user authentication redirect if not logged in.
- Developed `BlueprintsPageHeader` for page title and button.
- Added `BlueprintsPage` to display billing alerts and blueprints.
- Defined `getProjectBlueprints` to fetch blueprint data.
- Created `BlueprintsExplorer` to list blueprints with a card layout.
- Implemented `BlueprintCard` for individual blueprint display.

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

<!-- end pr-codex -->

Linear Ticket: https://linear.app/thirdweb/issue/BLOCK-436/implement-initial-insight-ui

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `Insight` page for a project within a team dashboard, featuring a header and blueprint exploration components. It includes user authentication redirection and displays available blueprints with relevant information.

### Detailed summary
- Added a new route for `Insight` in `layout.tsx`.
- Created `BlueprintsPageHeader` component for the `Insight` page.
- Implemented `Page` function to handle user authentication and redirection.
- Developed `BlueprintsPage` to display blueprints and alerts.
- Created `getProjectBlueprints` function to fetch blueprint data.
- Added `BlueprintsExplorer` component to list blueprints.
- Implemented `BlueprintCard` to display individual blueprint details.

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

Author: AmineAfia

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsExplorer.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import {} from "@/components/ui/dropdown-menu";
+import {} from "@/components/ui/select";
+import { Layers3 } from "lucide-react";
+import Link from "next/link";
+
+export type Blueprint = {
+  id: string;
+  name: string;
+  slug: string;
+  description: string;
+};
+
+export function BlueprintsExplorer(props: {
+  blueprints: Blueprint[];
+}) {
+  const { blueprints } = props;
+  return (
+    <div className="container">
+      {/* Blueprints */}
+      {blueprints.length === 0 ? (
+        <div className="flex h-[450px] items-center justify-center rounded-lg border border-border ">
+          No blueprints found
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
+          {blueprints.map((blueprint) => {
+            return <BlueprintCard key={blueprint.id} blueprint={blueprint} />;
+          })}
+        </div>
+      )}
+
+      <div className="h-10" />
+    </div>
+  );
+}
+
+function BlueprintCard(props: {
+  blueprint: Blueprint;
+}) {
+  const { blueprint } = props;
+  return (
+    <div
+      key={blueprint.id}
+      className="relative flex items-center gap-4 rounded-lg border border-border bg-muted/50 p-4 transition-colors hover:bg-muted/70"
+    >
+      <Layers3 className="size-10" />
+
+      <div>
+        <Link
+          className="group static before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0"
+          href={`https://portal.thirdweb.com/insight/blueprints#${blueprint.slug}`}
+        >
+          <h2 className="font-medium text-base">{blueprint.name}</h2>
+        </Link>
+
+        <p className="my-1 text-muted-foreground/70 text-xs">
+          {blueprint.description}
+        </p>
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsPage.tsx

@@ -0,0 +1,43 @@
+import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
+import { type Blueprint, BlueprintsExplorer } from "./BlueprintsExplorer";
+import { BlueprintsPageHeader } from "./BlueprintsPageHeader";
+
+export function BlueprintsPage() {
+  return (
+    <div>
+      <BillingAlerts />
+      <BlueprintsPageHeader />
+      <div className="h-6" />
+      <BlueprintsPageContent />
+    </div>
+  );
+}
+
+function getProjectBlueprints() {
+  return [
+    {
+      id: "1",
+      name: "Transactions",
+      slug: "transactions-blueprint",
+      description: "Query transaction data",
+    },
+    {
+      id: "2",
+      name: "Events",
+      slug: "events-blueprint",
+      description: "Query event data",
+    },
+    {
+      id: "3",
+      name: "Tokens",
+      slug: "tokens-blueprint",
+      description: "Query ERC-20, ERC-721, and ERC-1155 tokens",
+    },
+  ] as Blueprint[];
+}
+
+function BlueprintsPageContent() {
+  const blueprints = getProjectBlueprints();
+
+  return <BlueprintsExplorer blueprints={blueprints} />;
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsPageHeader.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { PlusIcon } from "lucide-react";
+
+export function BlueprintsPageHeader() {
+  return (
+    <div className="flex grow flex-col">
+      <div className="border-border border-b py-10">
+        <div className="container flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <h1 className="font-semibold text-2xl tracking-tight sm:text-3xl">
+            Insight
+          </h1>
+          <Button
+            className="w-full cursor-not-allowed gap-2 opacity-50 sm:w-auto"
+            disabled
+          >
+            <PlusIcon className="size-4" />
+            Create Blueprint (Coming Soon)
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx

@@ -0,0 +1,18 @@
+import { redirect } from "next/navigation";
+import { getAuthTokenWalletAddress } from "../../../../api/lib/getAuthToken";
+import { BlueprintsPage } from "./components/BlueprintsPage";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string; project_slug: string }>;
+}) {
+  const accountAddress = await getAuthTokenWalletAddress();
+
+  if (!accountAddress) {
+    const { team_slug, project_slug } = await props.params;
+    return redirect(
+      `/login?next=${encodeURIComponent(`/team/${team_slug}/${project_slug}/insight`)}`,
+    );
+  }
+
+  return <BlueprintsPage />;
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx

@@ -69,6 +69,10 @@ export default async function TeamLayout(props: {
                   },
                 ]
               : []),
+            {
+              path: `/team/${params.team_slug}/${params.project_slug}/insight`,
+              name: "Insight",
+            },
             {
               path: `/team/${params.team_slug}/${params.project_slug}/settings`,
               name: "Settings",