Skip to content

[Dashboard] Feature: Team Analytics Page #5353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 8, 2024
+533 −454
Merged

[Dashboard] Feature: Team Analytics Page #5353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
552 changes: 507 additions & 45 deletions apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@
import { type WalletId, getWalletInfo } from "thirdweb/wallets";

import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
import { CombinedBarChartCard } from "./components/CombinedBarChartCard";
import { EmptyState } from "./components/EmptyState";
import { PieChartCard } from "./components/PieChartCard";
import { ProjectOverviewHeader } from "./components/ProjectOverviewHeader";
import { StatBreakdownCard } from "./components/StatBreakdownCard";
import { AnalyticsHeader } from "../../components/Analytics/AnalyticsHeader";
import { CombinedBarChartCard } from "../../components/Analytics/CombinedBarChartCard";
import { EmptyState } from "../../components/Analytics/EmptyState";
import { PieChartCard } from "../../components/Analytics/PieChartCard";
import { StatBreakdownCard } from "../../components/Analytics/StatBreakdownCard";

type PageParams = {
team_slug: string;
Expand Down Expand Up @@ -111,10 +111,10 @@
userOpUsage.length === 0;

return (
<div className="">
<div className="pb-16">
<div className="w-full border-border-800 border-b px-6 dark:bg-muted/50">
<ProjectOverviewHeader
project={project}
<AnalyticsHeader
title={project.name}
interval={interval}
range={range}
/>
Expand Down Expand Up @@ -301,7 +301,7 @@
value: item.sponsoredUsd,
icon: chain?.icon?.url ? (
<div className="flex size-4 items-center justify-center">
<img

Check warning on line 304 in apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx

View workflow job for this annotation

GitHub Actions / Lint Packages 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element

Check warning on line 304 in apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx

View workflow job for this annotation

GitHub Actions / Lint Packages 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={resolveSchemeWithErrorHandler({
client: getThirdwebClient(),
uri: chain?.icon.url,
Expand Down Expand Up @@ -342,7 +342,7 @@
value: item.successful + item.failed,
icon: chain?.icon?.url ? (
<div className="flex size-4 items-center justify-center">
<img

Check warning on line 345 in apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx

View workflow job for this annotation

GitHub Actions / Lint Packages 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element

Check warning on line 345 in apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx

View workflow job for this annotation

GitHub Actions / Lint Packages 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={resolveSchemeWithErrorHandler({
client: getThirdwebClient(),
uri: chain.icon.url,
Expand Down
9 changes: 4 additions & 5 deletions ...ponents/ProjectOverviewHeader.stories.tsx → ...nts/Analytics/AnalyticsHeader.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import type { Meta, StoryObj } from "@storybook/react";
import { getLastNDaysRange } from "components/analytics/date-range-selector";
import { projectStub } from "stories/stubs";
import { BadgeContainer, mobileViewport } from "stories/utils";
import { ProjectOverviewHeader } from "./ProjectOverviewHeader";
import { AnalyticsHeader } from "./AnalyticsHeader";

const meta = {
title: "project/Overview/Header",
title: "Analytics/AnalyticsHeader",
component: Component,
parameters: {
layout: "centered",
Expand Down Expand Up @@ -36,8 +35,8 @@ function Component() {
return (
<div className="container py-8">
<BadgeContainer label="Base">
<ProjectOverviewHeader
project={projectStub("123", "456")}
<AnalyticsHeader
title="Project Overview"
interval="day"
range={getLastNDaysRange("last-120")}
/>
Expand Down
11 changes: 4 additions & 7 deletions ...lug]/components/ProjectOverviewHeader.tsx → .../components/Analytics/AnalyticsHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import type { Project } from "@/api/projects";
import type { Range } from "components/analytics/date-range-selector";
import { RangeSelector } from "components/analytics/range-selector";

export function ProjectOverviewHeader(props: {
project: Project;
export function AnalyticsHeader(props: {
title: string;
interval: "day" | "week";
range: Range;
}) {
const { project, interval, range } = props;
const { title, interval, range } = props;

return (
<div className="container flex flex-col items-start gap-6 px-2 py-6 md:h-[120px] md:flex-row md:items-center md:p-6 md:py-0">
<div className="flex-1">
<h1 className="font-semibold text-3xl text-foreground">
{project.name}
</h1>
<h1 className="font-semibold text-3xl text-foreground">{title}</h1>
</div>
<RangeSelector interval={interval} range={range} />
</div>
Expand Down
0 ...ect_slug]/components/BarChart.stories.tsx → ...components/Analytics/BarChart.stories.tsx
View file
Open in desktop
File renamed without changes.
0 ...g]/[project_slug]/components/BarChart.tsx → ...pp/team/components/Analytics/BarChart.tsx
View file
Open in desktop
File renamed without changes.
0 ...mponents/CombinedBarChartCard.stories.tsx → ...nalytics/CombinedBarChartCard.stories.tsx
View file
Open in desktop
File renamed without changes.
0 ...slug]/components/CombinedBarChartCard.tsx → ...onents/Analytics/CombinedBarChartCard.tsx
View file
Open in desktop
File renamed without changes.
0 ...t_slug]/components/EmptyState.stories.tsx → ...mponents/Analytics/EmptyState.stories.tsx
View file
Open in desktop
File renamed without changes.
17 changes: 9 additions & 8 deletions .../[project_slug]/components/EmptyState.tsx → .../team/components/Analytics/EmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,18 @@ import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
import { DocLink } from "components/shared/DocLink";
import { ArrowRightIcon } from "lucide-react";
import Image, { type StaticImageData } from "next/image";
import Link from "next/link";
import accountAbstractionIcon from "../../../../../../public/assets/tw-icons/account-abstraction.svg";
import authIcon from "../../../../../../public/assets/tw-icons/auth.svg";
import payIcon from "../../../../../../public/assets/tw-icons/pay.svg";
import socialAuthIcon from "../../../../../../public/assets/tw-icons/social-auth.svg";
import walletsIcon from "../../../../../../public/assets/tw-icons/wallets.svg";
import accountAbstractionIcon from "../../../../../public/assets/tw-icons/account-abstraction.svg";
import authIcon from "../../../../../public/assets/tw-icons/auth.svg";
import payIcon from "../../../../../public/assets/tw-icons/pay.svg";
import socialAuthIcon from "../../../../../public/assets/tw-icons/social-auth.svg";
import walletsIcon from "../../../../../public/assets/tw-icons/wallets.svg";

export function EmptyState() {
return (
<div className="flex items-center justify-center md:min-h-[500px]">
<div className="flex items-start justify-center md:min-h-[500px]">
<div className="group container flex flex-col items-center justify-center gap-8 rounded-lg border bg-card p-6 py-24">
<div className="flex max-w-[500px] flex-col items-center justify-center gap-6">
<AnimatedIcons />
Expand Down Expand Up @@ -62,9 +63,9 @@ export function EmptyState() {
</div>
</div>
<div className="flex gap-2">
<Button variant="outline" asChild className="min-w-36">
<Button variant="primary" asChild className="min-w-36">
<Link href="https://portal.thirdweb.com/connect" target="_blank">
View Docs
View Docs <ArrowRightIcon className="ml-2 h-4 w-auto" />
</Link>
</Button>
</div>
Expand Down
0 ...ect_slug]/components/PieChart.stories.tsx → ...components/Analytics/PieChart.stories.tsx
View file
Open in desktop
File renamed without changes.
0 ...g]/[project_slug]/components/PieChart.tsx → ...pp/team/components/Analytics/PieChart.tsx
View file
Open in desktop
File renamed without changes.
0 ...slug]/components/PieChartCard.stories.tsx → ...onents/Analytics/PieChartCard.stories.tsx
View file
Open in desktop
File renamed without changes.
0 ...project_slug]/components/PieChartCard.tsx → ...eam/components/Analytics/PieChartCard.tsx
View file
Open in desktop
File renamed without changes.
0 ...project_slug]/components/Stat.stories.tsx → ...eam/components/Analytics/Stat.stories.tsx
View file
Open in desktop
File renamed without changes.
0 ..._slug]/[project_slug]/components/Stat.tsx → ...rc/app/team/components/Analytics/Stat.tsx
View file
Open in desktop
File renamed without changes.
0 .../components/StatBreakdownCard.stories.tsx → ...s/Analytics/StatBreakdownCard.stories.tsx
View file
Open in desktop
File renamed without changes.
0 ...ct_slug]/components/StatBreakdownCard.tsx → ...omponents/Analytics/StatBreakdownCard.tsx
View file
Open in desktop
File renamed without changes.
51 changes: 0 additions & 51 deletions apps/dashboard/src/components/dashboard/HomeProductCard.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading