Filter payouts by date range (using paidAt)

Author: steven-tey

apps/web/app/api/programs/[programId]/payouts/count/route.ts

@@ -1,3 +1,4 @@
+import { getStartEndDates } from "@/lib/analytics/utils/get-start-end-dates";
 import { getProgramOrThrow } from "@/lib/api/programs/get-program";
 import { withWorkspace } from "@/lib/auth";
 import { MIN_PAYOUT_AMOUNT } from "@/lib/partners/constants";
@@ -10,14 +11,17 @@ import { NextResponse } from "next/server";
 export const GET = withWorkspace(
   async ({ workspace, params, searchParams }) => {
     const { programId } = params;
-    const { partnerId, groupBy, eligibility } =
-      payoutsCountQuerySchema.parse(searchParams);
+    const parsed = payoutsCountQuerySchema.parse(searchParams);
 
     await getProgramOrThrow({
       workspaceId: workspace.id,
       programId,
     });
 
+    const { startDate, endDate } = getStartEndDates(parsed);
+
+    const { partnerId, groupBy, eligibility, status } = parsed;
+
     const where: Prisma.PayoutWhereInput = {
       programId,
       ...(partnerId && { partnerId }),
@@ -29,6 +33,10 @@ export const GET = withWorkspace(
           payoutsEnabled: true,
         },
       }),
+      paidAt: {
+        gte: startDate.toISOString(),
+        lte: endDate.toISOString(),
+      },
     };
 
     // Get payout count by status
@@ -61,7 +69,10 @@ export const GET = withWorkspace(
       return NextResponse.json(counts);
     } else {
       const count = await prisma.payout.count({
-        where,
+        where: {
+          ...where,
+          status,
+        },
       });
 
       return NextResponse.json(count);

apps/web/app/api/programs/[programId]/payouts/route.ts

@@ -1,3 +1,4 @@
+import { getStartEndDates } from "@/lib/analytics/utils/get-start-end-dates";
 import { getProgramOrThrow } from "@/lib/api/programs/get-program";
 import { withWorkspace } from "@/lib/auth";
 import {
@@ -12,21 +13,28 @@ import z from "zod";
 export const GET = withWorkspace(
   async ({ workspace, params, searchParams }) => {
     const { programId } = params;
+    const parsed = payoutsQuerySchema.parse(searchParams);
+
+    await getProgramOrThrow({
+      workspaceId: workspace.id,
+      programId,
+    });
+
     const {
       status,
       partnerId,
       invoiceId,
+      type,
       sortBy,
       sortOrder,
       page,
       pageSize,
-      type,
-    } = payoutsQuerySchema.parse(searchParams);
+    } = parsed;
 
-    await getProgramOrThrow({
-      workspaceId: workspace.id,
-      programId,
-    });
+    console.log(parsed);
+
+    const { startDate, endDate } = getStartEndDates(parsed);
+    console.log({ startDate, endDate });
 
     const payouts = await prisma.payout.findMany({
       where: {
@@ -35,6 +43,10 @@ export const GET = withWorkspace(
         ...(partnerId && { partnerId }),
         ...(type && { type }),
         ...(invoiceId && { invoiceId }),
+        paidAt: {
+          gte: startDate.toISOString(),
+          lte: endDate.toISOString(),
+        },
       },
       include: {
         partner: true,

apps/web/app/api/stripe/webhook/charge-succeeded.ts

@@ -75,6 +75,7 @@ export async function chargeSucceeded(event: Stripe.Event) {
           data: {
             stripeTransferId: transfer.id,
             status: "completed",
+            paidAt: new Date(),
           },
         });
 

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-table.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import usePayoutsCount from "@/lib/swr/use-payouts-count";
+import useWorkspace from "@/lib/swr/use-workspace";
 import { PayoutResponse } from "@/lib/types";
 import { AmountRowItem } from "@/ui/partners/amount-row-item";
 import { PartnerRowItem } from "@/ui/partners/partner-row-item";
@@ -22,7 +23,7 @@ import {
   useTable,
 } from "@dub/ui";
 import { Dots, MoneyBill2, MoneyBills2 } from "@dub/ui/icons";
-import { cn, formatDate } from "@dub/utils";
+import { cn, formatDate, timeAgo } from "@dub/utils";
 import { fetcher } from "@dub/utils/src/functions/fetcher";
 import { Row } from "@tanstack/react-table";
 import { Command } from "cmdk";
@@ -33,7 +34,8 @@ import { usePayoutFilters } from "./use-payout-filters";
 
 export function PayoutTable() {
   const { programId } = useParams();
-  const { queryParams, searchParams } = useRouterStuff();
+  const { id: workspaceId } = useWorkspace();
+  const { queryParams, searchParams, getQueryString } = useRouterStuff();
 
   const sortBy = searchParams.get("sortBy") || "periodStart";
   const sortOrder = searchParams.get("sortOrder") === "asc" ? "asc" : "desc";
@@ -44,7 +46,6 @@ export function PayoutTable() {
     onSelect,
     onRemove,
     onRemoveAll,
-    searchQuery,
     isFiltered,
     setSearch,
     setSelectedFilter,
@@ -57,7 +58,7 @@ export function PayoutTable() {
     error,
     isLoading,
   } = useSWR<PayoutResponse[]>(
-    `/api/programs/${programId}/payouts?${searchQuery}`,
+    `/api/programs/${programId}/payouts?${getQueryString({ workspaceId })}`,
     fetcher,
     {
       keepPreviousData: true,
@@ -128,7 +129,7 @@ export function PayoutTable() {
         id: "paidAt",
         header: "Paid at",
         cell: ({ row }) =>
-          row.original.paidAt ? formatDate(row.original.paidAt) : "-",
+          row.original.paidAt ? timeAgo(row.original.paidAt) : "-",
       },
       {
         id: "amount",

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/use-payout-filters.tsx

@@ -14,6 +14,8 @@ import { useDebounce } from "use-debounce";
 export function usePayoutFilters(extraSearchParams: Record<string, string>) {
   const { searchParamsObj, queryParams } = useRouterStuff();
   const { id: workspaceId } = useWorkspace();
+  const { interval, start, end } = searchParamsObj;
+
   const { payoutsCount } = usePayoutsCount<PayoutsCount[]>({
     groupBy: "status",
   });
@@ -82,6 +84,9 @@ export function usePayoutFilters(extraSearchParams: Record<string, string>) {
     return [
       ...(status ? [{ key: "status", value: status }] : []),
       ...(partnerId ? [{ key: "partnerId", value: partnerId }] : []),
+      ...(interval ? [{ key: "interval", value: interval }] : []),
+      ...(start ? [{ key: "start", value: start }] : []),
+      ...(end ? [{ key: "end", value: end }] : []),
     ];
   }, [searchParamsObj]);
 
@@ -109,14 +114,13 @@ export function usePayoutFilters(extraSearchParams: Record<string, string>) {
         ...Object.fromEntries(
           activeFilters.map(({ key, value }) => [key, value]),
         ),
-        ...(searchParamsObj.search && { search: searchParamsObj.search }),
         workspaceId: workspaceId || "",
         ...extraSearchParams,
       }).toString(),
     [activeFilters, workspaceId, extraSearchParams],
   );
 
-  const isFiltered = activeFilters.length > 0 || searchParamsObj.search;
+  const isFiltered = activeFilters.length > 0;
 
   return {
     filters,

apps/web/lib/swr/use-payouts-count.ts

@@ -1,3 +1,4 @@
+import { useRouterStuff } from "@dub/ui";
 import { fetcher } from "@dub/utils";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -11,13 +12,14 @@ export default function usePayoutsCount<T>(
 ) {
   const { programId } = useParams();
   const { id: workspaceId } = useWorkspace();
+  const { getQueryString } = useRouterStuff();
 
   const { data: payoutsCount, error } = useSWR<PayoutsCount[]>(
     workspaceId &&
-      `/api/programs/${programId}/payouts/count?${new URLSearchParams({
+      `/api/programs/${programId}/payouts/count?${getQueryString({
         ...opts,
         workspaceId,
-      }).toString()}`,
+      })}`,
     fetcher,
   );
 

apps/web/lib/zod/schemas/payouts.ts

@@ -1,3 +1,4 @@
+import { intervals } from "@/lib/analytics/constants";
 import { parseDateSchema } from "@/lib/zod/schemas/utils";
 import { PayoutStatus, PayoutType } from "@dub/prisma/client";
 import { z } from "zod";
@@ -30,14 +31,26 @@ export const payoutsQuerySchema = z
     sortBy: z.enum(["periodStart", "total"]).default("periodStart"),
     sortOrder: z.enum(["asc", "desc"]).default("desc"),
     type: z.nativeEnum(PayoutType).optional(),
+    interval: z.enum(intervals).default("1y").optional(),
+    start: parseDateSchema.optional(),
+    end: parseDateSchema.optional(),
   })
   .merge(getPaginationQuerySchema({ pageSize: PAYOUTS_MAX_PAGE_SIZE }));
 
-export const payoutsCountQuerySchema = z.object({
-  partnerId: z.string().optional(),
-  groupBy: z.enum(["status"]).optional(),
-  eligibility: z.enum(["eligible"]).optional(),
-});
+export const payoutsCountQuerySchema = payoutsQuerySchema
+  .pick({
+    status: true,
+    partnerId: true,
+    interval: true,
+    start: true,
+    end: true,
+  })
+  .merge(
+    z.object({
+      groupBy: z.enum(["status"]).optional(),
+      eligibility: z.enum(["eligible"]).optional(),
+    }),
+  );
 
 export const PayoutSchema = z.object({
   id: z.string(),