Analytics Dashboard

Copyexport const GET = withWorkspace(
  async ({ params, searchParams, workspace, session }) => {
    throwIfClicksUsageExceeded(workspace);

Copylet { eventType: oldEvent, endpoint: oldType } =
  analyticsPathParamsSchema.parse(params);
 
// for backwards compatibility (we used to support /analytics/[endpoint] as well)
if (!oldType && oldEvent && VALID_ANALYTICS_ENDPOINTS.includes(oldEvent)) {
  oldType = oldEvent;
  oldEvent = undefined;
}
 
const parsedParams = parseAnalyticsQuery(searchParams);

Copyif (!linkId && (externalId || (domain && key))) {
  const link = await getLinkOrThrow({
    workspaceId: workspace.id,
    linkId,
    externalId,
    domain: getFirstFilterValue(domain),
    key,
  });
 
  parsedParams.linkId = {
    operator: "IS",
    sqlOperator: "IN",
    values: [link.id],
  };
 
  // since we're filtering for a specific link, exclude domain from filters
  parsedParams.domain = undefined;

Copyif (programId) {
  const workspaceProgramId = getDefaultProgramIdOrThrow(workspace);
  if (programId !== workspaceProgramId) {
    throw new DubApiError({
      code: "forbidden",
      message: `Program ${programId} does not belong to workspace ${prefixWorkspaceId(workspace.id)}.`,
    });
  }
  if (groupBy === "timeseries") {

Copyexport default function Analytics({
  adminPage,
  dashboardProps,
}: {
  adminPage?: boolean;
  dashboardProps?: AnalyticsDashboardProps;
}) {
  return (
    <AnalyticsProvider {...{ adminPage, dashboardProps }}>
      <AnalyticsContext.Consumer>
        {({ dashboardProps }) => {
          return (
            <div
              className={cn("pb-10", dashboardProps && "bg-neutral-50 pt-10")}
            >
              <AnalyticsToggle />
              <div
                className={cn(
                  "mx-auto grid max-w-screen-xl gap-5 px-3 lg:px-10",
                  // TODO: [PageContent] Remove once all pages are migrated to the new PageContent
                  !dashboardProps && !adminPage && "lg:px-6",
                )}
              >
                <ChartSection />
                <StatsGrid />
              </div>
            </div>
          );
        }}
      </AnalyticsContext.Consumer>
    </AnalyticsProvider>
  );
}

Copyfunction StatsGrid() {
  const { dashboardProps, selectedTab, view } = useContext(AnalyticsContext);
  const { plan } = useWorkspace();
 
  const hide =
    (selectedTab === "leads" || selectedTab === "sales" || view === "funnel") &&
    (plan === "free" || plan === "pro");
 
  return hide ? null : (
    <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
      {!dashboardProps?.key && <TopLinks />}
      <ReferrersUTMs />
      <LocationSection />
      <DeviceSection />
    </div>
  );
}

Copyconst dateRangePicker = (
  <DateRangePicker
    className="w-full md:w-fit"
    align="start"
    value={
      start && end
        ? {
            from: start,
            to: end,
          }
        : undefined
    }
    presetId={
      start && end ? undefined : interval ?? DUB_LINKS_ANALYTICS_INTERVAL
    }
    onChange={(range, preset) => {
      if (preset) {
        queryParams({
          del: ["start", "end"],
          set: {
            interval: preset.id,
          },
        });
 
        return;
      }
 
      // Regular range
      if (!range || !range.from || !range.to) return;
 
      queryParams({
        del: "interval",
        set: {
          start: range.from.toISOString(),
          end: range.to.toISOString(),
        },
      });
    }}
    presets={INTERVAL_DISPLAYS.map(({ display, value, shortcut }) => {
      const requiresUpgrade =
        partnerPage ||
        DUB_DEMO_LINKS.find((l) => l.domain === domain && l.key === key)
          ? false
          : !validDateRangeForPlan({
              plan: plan || dashboardProps?.workspacePlan,
              dataAvailableFrom: createdAt,
              interval: value,
              start,
              end,
            }).valid;
 
      const { startDate, endDate } = getStartEndDates({
        interval: value,
        dataAvailableFrom: createdAt,
      });
 
      return {
        id: value,
        label: display,
        dateRange: {
          from: startDate,
          to: endDate,
        },
        requiresUpgrade,
        tooltipContent: requiresUpgrade ? (
          <UpgradeTooltip rangeLabel={display} plan={plan} />
        ) : undefined,
        shortcut,
      };
    })}
  />

CopyonChange={(range, preset) => {
  if (preset) {
    queryParams({
      del: ["start", "end"],
      set: {
        interval: preset.id,
      },
    });
 
    return;
  }
 
  // Regular range
  if (!range || !range.from || !range.to) return;
 
  queryParams({
    del: "interval",
    set: {
      start: range.from.toISOString(),
      end: range.to.toISOString(),
    },
  });
}}

Copyexport function ChartSection() {
  const {
    totalEvents,
    requiresUpgrade,
    showConversions,
    selectedTab,
    saleUnit,
    view,
  } = useContext(AnalyticsContext);
  const { plan } = useWorkspace();
  const { queryParams } = useRouterStuff();
 
  const tabs = useMemo(
    () =>
      [
        {
          id: "clicks",
          label: "Clicks",
          colorClassName: "text-blue-500/50",
          conversions: false,
        },
        ...(showConversions
          ? [
              {
                id: "leads",
                label: "Leads",
                colorClassName: "text-violet-600/50",
                conversions: true,
              },
              {
                id: "sales",
                label: "Sales",
                colorClassName: "text-teal-400/50",
                conversions: true,
              },
            ]
          : []),
      ] as Tab[],
    [showConversions],
  );

Copyconst { data, error } = useSWR<
  {
    start: Date;
    clicks: number;
    leads: number;
    sales: number;
    saleAmount: number;
  }[]
>(
  `/api/analytics?${editQueryString(queryString ?? "", {
    event: selectedTab,
    groupBy: "timeseries",
  })}`,
  fetcher,
);
 
const chartData = useMemo(
  () =>
    data?.map((d) => ({
      date: new Date(d.start),
      values: {
        amount:
          selectedTab === "sales" && saleUnit === "saleAmount"
            ? d.saleAmount
            : d[selectedTab],
      },
    })),
  [data, selectedTab, saleUnit],
);

Copy<div className="relative h-72 md:h-96">
  {dataLoading ? (
    <div className="flex size-full items-center justify-center">
      <LoadingSpinner />
    </div>
  ) : error ? (
    <div className="flex size-full items-center justify-center text-sm text-neutral-500">
      Failed to load data
    </div>
  ) : (
    <>
      {view === "timeseries" ? (
        <div className="relative size-full p-6 pt-10">
          <AnalyticsTimeseriesChart data={chartData} />
        </div>
      ) : (
        <AnalyticsFunnelChart />
      )}

Copyexport function LocationSection() {
  const { queryParams, searchParams } = useRouterStuff();
 
  const { selectedTab, saleUnit } = useContext(AnalyticsContext);
  const dataKey = selectedTab === "sales" ? saleUnit : "count";
 
  const [tab, setTab] = useState<
    "countries" | "cities" | "regions" | "continents"
  >("countries");
 
  const { data } = useAnalyticsFilterOption(tab);
  const { data: allData } = useAnalyticsFilterOption(tab, {
    omitGroupByFilterKey: true,
  });

Copyexport function DeviceSection() {
  const { queryParams, searchParams } = useRouterStuff();
 
  const { selectedTab, saleUnit } = useContext(AnalyticsContext);
  const dataKey = selectedTab === "sales" ? saleUnit : "count";
 
  const [tab, setTab] = useState<DeviceTabs>("devices");
  const { data } = useAnalyticsFilterOption(tab);
  const { data: allData } = useAnalyticsFilterOption(tab, {
    omitGroupByFilterKey: true,
  });
  const singularTabName = SINGULAR_ANALYTICS_ENDPOINTS[tab];

Copyconst TAB_CONFIG: Record<
  TabId,
  {
    subtabs: Subtab[];
    defaultSubtab: Subtab;
    getSubtabLabel: (subtab: Subtab) => string;
  }
> = {
  referers: {
    subtabs: ["referers", "referer_urls"],
    defaultSubtab: "referers",
    getSubtabLabel: (subtab) => (subtab === "referers" ? "Domain" : "URL"),
  },
  utms: {
    subtabs: [...UTM_TAGS_PLURAL_LIST] as Subtab[],
    defaultSubtab: "utm_sources" as Subtab,
    getSubtabLabel: (subtab) =>
      SINGULAR_ANALYTICS_ENDPOINTS[subtab as UTM_TAGS_PLURAL].replace(
        "utm_",
        "",
      ),
  },
};

Copyicon:
  isUtmTab && UTMTagIcon ? (
    <UTMTagIcon />
  ) : isDirect ? (
    <Link2 className="h-4 w-4" />
  ) : (
    <BlurImage
      src={`${GOOGLE_FAVICON_URL}${
        isRefererUrl
          ? getApexDomain(d[singularTabName])
          : d[singularTabName]
      }`}
      alt={d[singularTabName]}
      width={20}
      height={20}
      className="h-4 w-4 rounded-full"
    />
  ),

Copyconst aggregations = {
  _count: {
    visitedAt: true,
    startedAt: true,
    submittedAt: true,
    approvedAt: true,
    rejectedAt: true,
  },
} as const;

Copyif (groupBy === "count") {
  const earnings = await prisma.commission.aggregate({
    _sum: {
      earnings: true,
    },
    where: {
      type: "sale",
      amount: {
        gt: 0,
      },
      programId: programEnrollment.programId,
      partnerId: programEnrollment.partnerId,
      status: {
        in: ["pending", "processed", "paid"],
      },
      createdAt: {
        gte: startDate,
        lt: endDate,
      },
    },
  });
 
  return NextResponse.json({
    ...analytics,
    earnings: earnings._sum.earnings || 0,
  });
}

Copyconst [partnersResult, earningsResult] = await Promise.all([
  prisma.$queryRaw<{ start: string; partners: number }[]>(
    Prisma.sql`
      SELECT
        DATE_FORMAT(CONVERT_TZ(createdAt, "UTC", ${timezone || "UTC"}), ${dateFormat}) AS start,
        COUNT(*) AS partners
      FROM Partner
      WHERE
        referredByPartnerId = ${partner.id}
        AND createdAt >= ${startDate}
        AND createdAt < ${endDate}
      GROUP BY start
      ORDER BY start ASC
    `,
  ),
 
  prisma.$queryRaw<{ start: string; earnings: number }[]>(
    Prisma.sql`
      SELECT
        DATE_FORMAT(CONVERT_TZ(createdAt, "UTC", ${timezone || "UTC"}), ${dateFormat}) AS start,
        SUM(earnings) AS earnings
      FROM Commission
      WHERE
        partnerId = ${partner.id}
        AND programId = ${NETWORK_PROGRAM_ID}
        AND type = ${CommissionType.referral}
        AND status in ('pending', 'processed', 'paid')
        AND createdAt >= ${startDate}
        AND createdAt < ${endDate}
      GROUP BY start
      ORDER BY start ASC
    `,
  ),
]);

Copyexport default async function DashboardPage(props: {
  params: Promise<{ dashboardId: string }>;
}) {
  const params = await props.params;
  const data = await getDashboard({ id: params.dashboardId });
 
  // if the dashboard, link, or folder doesn't exist
  if (!data?.link && !data?.folder) {
    notFound();
  }

Copyif (
  data.password &&
  (await cookies()).get(`dub_password_${params.dashboardId}`)?.value !==
    data.password
) {
  return (
    <main className="relative min-h-[100dvh]">
      <div className="absolute inset-0 isolate overflow-hidden bg-neutral-50">
        {/* Grid */}
        <div
          className={cn(
            "absolute inset-y-0 left-1/2 w-[1200px] -translate-x-1/2",
            "[mask-composite:intersect] [mask-image:linear-gradient(black,transparent_320px),linear-gradient(90deg,transparent,black_5%,black_95%,transparent)]",
          )}
        >
          <Grid
            cellSize={60}
            patternOffset={[0.75, 0]}
            className="text-neutral-200"
          />
        </div>
 
        <AuroraGradient />
      </div>
 
      <div className="relative flex min-h-[100dvh] w-full items-center justify-center px-4 pb-12 pt-20">
        <a
          href="https://dub.co"
          target="_blank"
          rel="noopener noreferrer"
          className="absolute left-1/2 top-4 -translate-x-1/2"
        >
          <Wordmark className="h-8" />
        </a>
 
        <div className="animate-slide-up-fade flex w-full max-w-[320px] flex-col items-center [--offset:10px] [animation-duration:1s] [animation-fill-mode:both]">
          <div className="flex size-8 items-center justify-center rounded-md bg-neutral-200/60">
            <ShieldKeyhole className="size-[18px] text-neutral-800" />
          </div>
          <h1 className="mt-4 text-center text-xl font-semibold text-neutral-900">
            Enter Password
          </h1>
          <p className="mt-1 text-center text-base font-medium text-neutral-500">
            This dashboard is password protected.
          </p>
          <div className="mt-10 w-full">
            <DashboardPasswordForm />
          </div>
        </div>
      </div>
    </main>
  );
}

Copyexport const GET = async (req: Request) => {
  try {
    const searchParams = getSearchParams(req.url);
    const parsedParams = parseAnalyticsQuery(searchParams);
 
    const {
      domain: domainFilter,
      key,
      folderId: folderIdFilter,
      interval,
      start,
      end,
    } = parsedParams;
 
    // Extract string values for specific link/folder lookup
    const domain = getFirstFilterValue(domainFilter);
    const folderId = getFirstFilterValue(folderIdFilter);
 
    if ((!domain || !key) && !folderId) {
      throw new DubApiError({
        code: "bad_request",
        message: "Missing domain/key or folderId query parameters",
      });
    }

Copyasync function assertDashboardPassword(dashboard: {
  id: string;
  password: string | null;
}) {
  if (!dashboard.password) {
    return;
  }
 
  const cookiePassword = (await cookies()).get(
    `dub_password_${dashboard.id}`,
  )?.value;
 
  if (cookiePassword !== dashboard.password) {
    throw new DubApiError({
      code: "unauthorized",
      message: "This dashboard is password protected",
    });
  }
}

Copyawait assertRateLimit({
  policy: RATELIMIT_POLICIES.analyticsExport,
  identifier: workspace.id,
});
 
throwIfClicksUsageExceeded(workspace);

Copyconst parsedParams = parseAnalyticsQuery(searchParams);
 
let {
  interval,
  start,
  end,
  folderId,
  domain,
  key,
  linkId,
  externalId,
  programId,
} = parsedParams;
 
let programStartedAt: Date | null | undefined = null;
if (programId) {
  const workspaceProgramId = getDefaultProgramIdOrThrow(workspace);
  if (programId !== workspaceProgramId) {
    throw new DubApiError({
      code: "forbidden",
      message: `Program ${programId} does not belong to workspace ${prefixWorkspaceId(workspace.id)}.`,
    });
  }
  const program = await getProgramOrThrow({
    workspaceId: workspace.id,
    programId,
  });
  programStartedAt = program.startedAt;
}
 
let folderIdToVerify = getFirstFilterValue(folderId);
if (!linkId && (externalId || (domain && key))) {
  const link = await getLinkOrThrow({
    workspaceId: workspace.id,
    linkId,
    externalId,
    domain: getFirstFilterValue(domain),
    key,
  });
 
  parsedParams.linkId = {
    operator: "IS",
    sqlOperator: "IN",
    values: [link.id],
  };
 
  parsedParams.domain = undefined;
 
  if (link.folderId && !folderIdToVerify) {
    folderIdToVerify = link.folderId;
  }
}
 
if (folderIdToVerify) {
  await verifyFolderAccess({
    workspace,
    userId: session.user.id,
    folderId: folderIdToVerify,
    requiredPermission: "folders.read",
  });
}
 
assertValidDateRangeForPlan({
  plan: workspace.plan,
  dataAvailableFrom: workspace.createdAt,
  interval,
  start,
  end,
});

Copyconst zipData = await exportAnalyticsToZip({
  params: analyticsParams,
  workspaceId: workspace.id,
  useComposite: canTrackConversions,
  skipTopLinksForSingleLink: hasExactlyOneLinkIdFilter(parsedParams.linkId),
  getDataAvailableFrom: (endpoint) =>
    endpoint === "timeseries"
      ? programStartedAt ?? workspace.createdAt
      : undefined,
  ...(programId && {
    formatRows: formatProgramAnalyticsForExport,
  }),
});
 
return new Response(zipData as unknown as BodyInit, {
  headers: {
    "Content-Type": "application/zip",
    "Content-Disposition": "attachment; filename=analytics_export.zip",
  },
});

Copyconst MAX_EVENTS_TO_EXPORT = 1000;
 
const exportQuerySchema = z
  .object({
    columns: z
      .string()
      .transform((c) => c.split(","))
      .pipe(z.string().array()),
  })
  .passthrough();
 
// GET /api/events/export – export events to CSV (with async support if >1000 events)
export const GET = withWorkspace(

Copyconst response = await getEvents({
  ...parsedParams,
  event,
  workspaceId: workspace.id,
  limit: MAX_EVENTS_TO_EXPORT,
  dataAvailableFrom,
});
 
const data = response.map((row) =>
  Object.fromEntries(
    columns.map((c) => [
      eventsExportColumnNames?.[c] ?? capitalize(c),
      eventsExportColumnAccessors[c]?.(row) ?? row?.[c],
    ]),
  ),
);
 
const csvData = convertToCSV(data);
 
return new Response(csvData, {
  headers: {
    "Content-Type": "application/csv",
    "Content-Disposition": `attachment; filename=${event}_export.csv`,
  },
});

Copyexport function AnalyticsExportButton({
  setOpenPopover,
}: {
  setOpenPopover: Dispatch<SetStateAction<boolean>>;
}) {
  const [loading, setLoading] = useState(false);
  const { queryString, baseApiPath, partnerPage } =
    useContext(AnalyticsContext);
 
  async function exportData() {
    setLoading(true);
    try {
      const exportPath = partnerPage
        ? `${baseApiPath}/export`
        : "/api/analytics/export";

Copy    const response = await fetch(`${exportPath}?${queryString}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });
 
    if (!response.ok) {
      let message = response.statusText;
 
      try {
        const body = await response.json();
        if (body?.error?.message) {
          message = body.error.message;
        }
      } catch {
        // ignore JSON parse errors
      }
 
      throw new Error(message);
    }
 
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `Dub Analytics Export - ${new Date().toISOString()}.zip`;
    a.click();
    window.URL.revokeObjectURL(url);
  } catch (error) {
    throw error instanceof Error ? error : new Error(String(error));
  } finally {
    setLoading(false);
  }
}