[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 adds a new `Insight` page to the dashboard for a project, featuring a `BlueprintsPage` that displays blueprints and a header. It includes authentication checks and a redirect to the login page if the user is not authenticated.

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

> ✨ 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` feature to the dashboard, which includes a dedicated page for insights with blueprints and a header component. It also implements authentication checks and displays billing alerts.

### Detailed summary
- Added a new route for `Insight`.
- Created `Page` component with authentication check and redirection.
- Introduced `BlueprintsPage` component displaying billing alerts and blueprints.
- Implemented `BlueprintsPageHeader` with a disabled button.
- Added `BlueprintsExplorer` for listing blueprints.
- Defined `BlueprintCard` for individual blueprint display.

> ✨ 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",