{props.children}
diff --git a/apps/dashboard/src/components/analytics/date-range-selector.tsx b/apps/dashboard/src/components/analytics/date-range-selector.tsx
index 65841f7607c..7439f37c936 100644
--- a/apps/dashboard/src/components/analytics/date-range-selector.tsx
+++ b/apps/dashboard/src/components/analytics/date-range-selector.tsx
@@ -107,7 +107,7 @@ const durationPresets = [
},
] as const;
-type DurationId = (typeof durationPresets)[number]["id"];
+export type DurationId = (typeof durationPresets)[number]["id"];
export type Range = {
type: DurationId | "custom";
diff --git a/apps/dashboard/src/components/analytics/range-selector.tsx b/apps/dashboard/src/components/analytics/range-selector.tsx
index d929a5939fc..018166b5f84 100644
--- a/apps/dashboard/src/components/analytics/range-selector.tsx
+++ b/apps/dashboard/src/components/analytics/range-selector.tsx
@@ -1,7 +1,14 @@
"use client";
import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { DateRangeSelector } from "components/analytics/date-range-selector";
-import type { Range } from "components/analytics/date-range-selector";
+import { useQuery } from "@tanstack/react-query";
+import {
+ DateRangeSelector,
+ getLastNDaysRange,
+} from "components/analytics/date-range-selector";
+import type {
+ DurationId,
+ Range,
+} from "components/analytics/date-range-selector";
import { IntervalSelector } from "components/analytics/interval-selector";
import { differenceInDays } from "date-fns";
import { usePathname, useSearchParams } from "next/navigation";
@@ -9,15 +16,35 @@ import { usePathname, useSearchParams } from "next/navigation";
export function RangeSelector({
range,
interval,
-}: { range: Range; interval: "day" | "week" }) {
+}: { range?: Range; interval: "day" | "week" }) {
const pathname = usePathname();
const searchParams = useSearchParams();
const router = useDashboardRouter();
+ const { data: computedRange } = useQuery({
+ queryKey: ["analytics-range", searchParams?.toString(), range],
+ queryFn: async () => {
+ if (range) {
+ return range;
+ }
+ if (searchParams) {
+ const fromStringified = searchParams.get("from");
+ const from = fromStringified
+ ? new Date(fromStringified)
+ : getLastNDaysRange("last-120").from;
+ const toStringified = searchParams.get("to");
+ const to = toStringified ? new Date(toStringified) : new Date();
+ const type = (searchParams.get("type") as DurationId) || "last-120";
+ return { from, to, type } satisfies Range;
+ }
+ return getLastNDaysRange("last-120");
+ },
+ });
+
return (
-
+
{
const days = differenceInDays(newRange.to, newRange.from);
const interval = days > 30 ? "week" : "day";
diff --git a/apps/dashboard/src/stories/stubs.ts b/apps/dashboard/src/stories/stubs.ts
index 4fe910e5640..82b6f2faefd 100644
--- a/apps/dashboard/src/stories/stubs.ts
+++ b/apps/dashboard/src/stories/stubs.ts
@@ -15,7 +15,7 @@ import type {
} from "@3rdweb-sdk/react/hooks/useEngine";
import { ZERO_ADDRESS } from "thirdweb";
-function projectStub(id: string, teamId: string) {
+export function projectStub(id: string, teamId: string) {
const project: Project = {
bundleIds: [] as string[],
createdAt: new Date(),