Add Date Range Selector for Connect Analaytics

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/ConnectAnalyticsDashboard.tsx

@@ -1,42 +1,161 @@
 "use client";
+import { DatePickerWithRange } from "@/components/ui/DatePickerWithRange";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   useWalletUsageAggregate,
   useWalletUsagePeriod,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { useMemo } from "react";
+import { format } from "date-fns";
+import { useState } from "react";
 import { ConnectAnalyticsDashboardUI } from "./ConnectAnalyticsDashboardUI";
 
 export function ConnectAnalyticsDashboard(props: {
   clientId: string;
 }) {
-  const allTimeFrom = useMemo(
-    () => new Date(Date.now() - 135 * 24 * 60 * 60 * 1000),
-    [],
-  );
-  const from = useMemo(
-    () => new Date(Date.now() - 135 * 24 * 60 * 60 * 1000),
-    [],
+  const [range, setRange] = useState<Range>(() =>
+    getLastNDaysRange("last-120"),
   );
-  const to = useMemo(() => new Date(), []);
+
   const walletUsageQuery = useWalletUsagePeriod({
     clientId: props.clientId,
-    from,
-    to,
+    from: range.from,
+    to: range.to,
     period: "day",
   });
+
   const walletUsageAggregateQuery = useWalletUsageAggregate({
     clientId: props.clientId,
-    from: allTimeFrom,
-    to,
+    from: range.from,
+    to: range.to,
   });
 
   return (
-    <ConnectAnalyticsDashboardUI
-      walletUsage={walletUsageQuery.data || []}
-      aggregateWalletUsage={walletUsageAggregateQuery.data || []}
-      isPending={
-        walletUsageQuery.isPending || walletUsageAggregateQuery.isPending
+    <div>
+      <Filters range={range} setRange={setRange} />
+      <div className="h-2" />
+      <ConnectAnalyticsDashboardUI
+        walletUsage={walletUsageQuery.data || []}
+        aggregateWalletUsage={walletUsageAggregateQuery.data || []}
+        isPending={
+          walletUsageQuery.isPending || walletUsageAggregateQuery.isPending
+        }
+      />
+    </div>
+  );
+}
+
+const durationPresets = [
+  {
+    name: "Last 7 Days",
+    id: "last-7",
+    days: 7,
+  },
+  {
+    name: "Last 30 Days",
+    id: "last-30",
+    days: 30,
+  },
+  {
+    name: "Last 60 Days",
+    id: "last-60",
+    days: 60,
+  },
+  {
+    name: "Last 120 Days",
+    id: "last-120",
+    days: 120,
+  },
+] as const;
+
+type DurationId = (typeof durationPresets)[number]["id"];
+
+type Range = {
+  type: DurationId | "custom";
+  label?: string;
+  from: Date;
+  to: Date;
+};
+
+function getLastNDaysRange(id: DurationId) {
+  const todayDate = new Date();
+  const pastDate = new Date(todayDate);
+
+  const durationInfo = durationPresets.find((preset) => preset.id === id);
+  if (!durationInfo) {
+    throw new Error("Invalid duration id");
+  }
+
+  pastDate.setDate(todayDate.getDate() - durationInfo.days);
+
+  const value: Range = {
+    type: id,
+    from: pastDate,
+    to: todayDate,
+    label: durationInfo.name,
+  };
+
+  return value;
+}
+
+function Filters(props: { range: Range; setRange: (range: Range) => void }) {
+  const { range, setRange } = props;
+
+  const presets = (
+    <div className="mb-2 border-border border-b p-4">
+      <Select
+        value={range.type}
+        onValueChange={(id: DurationId) => {
+          setRange(getLastNDaysRange(id));
+        }}
+      >
+        <SelectTrigger className="flex bg-transparent">
+          <SelectValue placeholder="Select" />
+        </SelectTrigger>
+        <SelectContent position="popper">
+          {durationPresets.map((preset) => (
+            <SelectItem key={preset.id} value={preset.id}>
+              {preset.name}
+            </SelectItem>
+          ))}
+
+          {range.type === "custom" && (
+            <SelectItem value="custom">
+              {format(range.from, "LLL dd, y")} -{" "}
+              {format(range.to, "LLL dd, y")}
+            </SelectItem>
+          )}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+
+  return (
+    <DatePickerWithRange
+      from={range.from}
+      to={range.to}
+      setFrom={(from) =>
+        setRange({
+          from,
+          to: range.to,
+          type: "custom",
+        })
+      }
+      setTo={(to) =>
+        setRange({
+          from: range.from,
+          to,
+          type: "custom",
+        })
       }
+      header={presets}
+      labelOverride={range.label}
+      className="w-auto border-none p-0"
     />
   );
 }