Merge pull request #2111 from dubinc/sales-improvements

steven-tey · web-flow · commit 85a7975ae0a2 · 2025-03-04T11:00:18.000-08:00
Improve sales tab
diff --git a/apps/web/app/api/programs/[programId]/sales/count/route.ts b/apps/web/app/api/programs/[programId]/sales/count/route.ts
@@ -35,25 +35,50 @@ export const GET = withWorkspace(
         },
       },
       _count: true,
+      _sum: {
+        amount: true,
+        earnings: true,
+      },
     });
 
     const counts = salesCount.reduce(
       (acc, p) => {
-        acc[p.status] = p._count;
+        acc[p.status] = {
+          count: p._count,
+          amount: p._sum.amount ?? 0,
+          earnings: p._sum.earnings ?? 0,
+        };
         return acc;
       },
-      {} as Record<CommissionStatus | "all", number>,
+      {} as Record<
+        CommissionStatus | "all",
+        {
+          count: number;
+          amount: number;
+          earnings: number;
+        }
+      >,
     );
 
     // fill in missing statuses with 0
     Object.values(CommissionStatus).forEach((status) => {
       if (!(status in counts)) {
-        counts[status] = 0;
+        counts[status] = {
+          count: 0,
+          amount: 0,
+          earnings: 0,
+        };
       }
     });
 
-    counts.all = salesCount.reduce((acc, p) => acc + p._count, 0);
-
+    counts.all = salesCount.reduce(
+      (acc, p) => ({
+        count: acc.count + p._count,
+        amount: acc.amount + (p._sum.amount ?? 0),
+        earnings: acc.earnings + (p._sum.earnings ?? 0),
+      }),
+      { count: 0, amount: 0, earnings: 0 },
+    );
     return NextResponse.json(counts);
   },
 );
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/page.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/page.tsx
@@ -1,11 +1,14 @@
+"use client";
+
 import { PageContent } from "@/ui/layout/page-content";
 import { MaxWidthWrapper } from "@dub/ui";
 import { SaleStats } from "./sale-stats";
 import { SaleTableBusiness } from "./sale-table";
+import { SaleToggle } from "./sale-toggle";
 
 export default function ProgramSales() {
   return (
-    <PageContent title="Sales">
+    <PageContent title="Sales" titleControls={<SaleToggle />}>
       <MaxWidthWrapper>
         <SaleStats />
         <div className="mt-6">
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-stats.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-stats.tsx
@@ -5,22 +5,32 @@ import { ProgramStatsFilter } from "@/ui/partners/program-stats-filter";
 import { SaleStatusBadges } from "@/ui/partners/sale-status-badges";
 import { useRouterStuff } from "@dub/ui";
 import { Users } from "@dub/ui/icons";
-import { useParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 
 export function SaleStats() {
   const { slug, programId } = useParams();
   const { queryParams } = useRouterStuff();
-
+  const searchParams = useSearchParams();
   const { salesCount, error } = useSalesCount();
 
+  const view = searchParams.get("view") || "sales";
+
   return (
     <div className="xs:grid-cols-4 xs:divide-x xs:divide-y-0 grid divide-y divide-neutral-200 overflow-hidden rounded-lg border border-neutral-200">
       <ProgramStatsFilter
         label="All"
         href={`/${slug}/programs/${programId}/sales`}
-        count={salesCount?.all}
+        count={salesCount?.all.count}
+        amount={
+          view === "sales"
+            ? salesCount?.all.amount
+            : view === "commissions"
+              ? salesCount?.all.earnings
+              : undefined
+        }
         icon={Users}
         iconClassName="text-neutral-600 bg-neutral-100"
+        variant="loose"
         error={!!error}
       />
       <ProgramStatsFilter
@@ -31,9 +41,17 @@ export function SaleStats() {
             getNewPath: true,
           }) as string
         }
-        count={salesCount?.pending}
+        count={salesCount?.pending.count}
+        amount={
+          view === "sales"
+            ? salesCount?.pending.amount
+            : view === "commissions"
+              ? salesCount?.pending.earnings
+              : undefined
+        }
         icon={SaleStatusBadges.pending.icon}
         iconClassName={SaleStatusBadges.pending.className}
+        variant="loose"
         error={!!error}
       />
       <ProgramStatsFilter
@@ -44,9 +62,17 @@ export function SaleStats() {
             getNewPath: true,
           }) as string
         }
-        count={salesCount?.processed}
+        count={salesCount?.processed.count}
+        amount={
+          view === "sales"
+            ? salesCount?.processed.amount
+            : view === "commissions"
+              ? salesCount?.processed.earnings
+              : undefined
+        }
         icon={SaleStatusBadges.processed.icon}
         iconClassName={SaleStatusBadges.processed.className}
+        variant="loose"
         error={!!error}
       />
       <ProgramStatsFilter
@@ -57,9 +83,17 @@ export function SaleStats() {
             getNewPath: true,
           }) as string
         }
-        count={salesCount?.paid}
+        count={salesCount?.paid.count}
+        amount={
+          view === "sales"
+            ? salesCount?.paid.amount
+            : view === "commissions"
+              ? salesCount?.paid.earnings
+              : undefined
+        }
         icon={SaleStatusBadges.paid.icon}
         iconClassName={SaleStatusBadges.paid.className}
+        variant="loose"
         error={!!error}
       />
     </div>
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-table.tsx
@@ -60,9 +60,14 @@ const SaleTableBusinessInner = memo(
 
     const { salesCount } = useSalesCount();
     const { data: sales, error } = useSWR<SaleResponse[]>(
-      `/api/programs/${programId}/sales${getQueryString({
-        workspaceId,
-      })}`,
+      `/api/programs/${programId}/sales${getQueryString(
+        {
+          workspaceId,
+        },
+        {
+          exclude: ["view"],
+        },
+      )}`,
       fetcher,
     );
 
@@ -190,7 +195,7 @@ const SaleTableBusinessInner = memo(
       thClassName: "border-l-0",
       tdClassName: "border-l-0",
       resourceName: (p) => `sale${p ? "s" : ""}`,
-      rowCount: salesCount?.[status || "all"] ?? 0,
+      rowCount: salesCount?.[status || "all"].count ?? 0,
       loading,
       error: error ? "Failed to load sales" : undefined,
     });
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-toggle.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-toggle.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { ToggleGroup, useRouterStuff } from "@dub/ui";
+import { useSearchParams } from "next/navigation";
+
+const options = [
+  {
+    value: "sales",
+    label: "Sales",
+  },
+  {
+    value: "commissions",
+    label: "Commissions",
+  },
+];
+
+export function SaleToggle() {
+  const { queryParams } = useRouterStuff();
+  const searchParams = useSearchParams();
+  const view = searchParams.get("view") || "sales";
+
+  return (
+    <ToggleGroup
+      options={options}
+      selected={view}
+      selectAction={(option) => {
+        queryParams({
+          set: { view: option },
+        });
+      }}
+      className="flex w-fit shrink-0 items-center gap-0.5 rounded-lg border-neutral-100 bg-neutral-100 p-0.5"
+      optionClassName="h-9 flex items-center justify-center rounded-lg"
+      indicatorClassName="border border-neutral-200 bg-white"
+    />
+  );
+}
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/use-sale-filters.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/use-sale-filters.tsx
@@ -88,7 +88,7 @@ export function useSaleFilters() {
                 )}
               />
             ),
-            right: nFormatter(salesCount?.[value] || 0, { full: true }),
+            right: nFormatter(salesCount?.[value]?.count || 0, { full: true }),
           };
         }),
       },
@@ -175,7 +175,7 @@ function usePartnerFilterOptions(search: string) {
           ...(selectedPartners
             ?.filter((st) => !partners?.some((t) => t.id === st.id))
             ?.map((st) => ({ ...st, hideDuringSearch: true })) ?? []),
-        ] as (EnrolledPartnerProps & { hideDuringSearch?: boolean })[]) ?? null;
+        ] as (EnrolledPartnerProps & { hideDuringSearch?: boolean })[]);
   }, [partnersLoading, partners, selectedPartners, searchParamsObj.partnerId]);
 
   return { partners: result, partnersAsync };
@@ -216,7 +216,7 @@ function useCustomerFilterOptions(search: string) {
           ...(selectedCustomers
             ?.filter((st) => !customers?.some((t) => t.id === st.id))
             ?.map((st) => ({ ...st, hideDuringSearch: true })) ?? []),
-        ] as (CustomerProps & { hideDuringSearch?: boolean })[]) ?? null;
+        ] as (CustomerProps & { hideDuringSearch?: boolean })[]);
   }, [
     customersLoading,
     customers,
diff --git a/apps/web/lib/swr/use-sales-count.ts b/apps/web/lib/swr/use-sales-count.ts
@@ -15,10 +15,15 @@ export default function useSalesCount(
   const { getQueryString } = useRouterStuff();
 
   const { data: salesCount, error } = useSWR<SalesCount>(
-    `/api/programs/${programId}/sales/count${getQueryString({
-      workspaceId,
-      ...opts,
-    })}`,
+    `/api/programs/${programId}/sales/count${getQueryString(
+      {
+        workspaceId,
+        ...opts,
+      },
+      {
+        exclude: ["view"],
+      },
+    )}`,
     fetcher,
   );
 
diff --git a/apps/web/lib/types.ts b/apps/web/lib/types.ts
@@ -359,7 +359,14 @@ export type PartnersCount = Record<ProgramEnrollmentStatus | "all", number>;
 
 export type SaleProps = z.infer<typeof ProgramSaleSchema>;
 
-export type SalesCount = Record<CommissionStatus | "all", number>;
+export type SalesCount = Record<
+  CommissionStatus | "all",
+  {
+    count: number;
+    amount: number;
+    earnings: number;
+  }
+>;
 
 export type SaleResponse = z.infer<typeof ProgramSaleResponseSchema>;
 
diff --git a/apps/web/scripts/update-commissions.ts b/apps/web/scripts/update-commissions.ts
@@ -0,0 +1,73 @@
+import { calculateSaleEarnings } from "@/lib/api/sales/calculate-sale-earnings";
+import { determinePartnerReward } from "@/lib/partners/determine-partner-reward";
+import { prisma } from "@dub/prisma";
+import { Prisma } from "@dub/prisma/client";
+import "dotenv-flow/config";
+
+// update commissions for a program
+async function main() {
+  const where: Prisma.CommissionWhereInput = {
+    programId: "prog_MuZ3Tpycbzsp9c1FuYR03c4u",
+    status: "pending",
+    earnings: 0,
+  };
+
+  const commissions = await prisma.commission.findMany({
+    where,
+    take: 50,
+  });
+
+  const updatedCommissions = await Promise.all(
+    commissions.map(async (commission) => {
+      const reward = await determinePartnerReward({
+        event: commission.type,
+        partnerId: commission.partnerId,
+        programId: commission.programId,
+      });
+      if (!reward) {
+        return null;
+      }
+      // Recalculate the earnings based on the new amount
+      const earnings = calculateSaleEarnings({
+        reward,
+        sale: {
+          amount: commission.amount,
+          quantity: commission.quantity,
+        },
+      });
+
+      return prisma.commission.update({
+        where: { id: commission.id },
+        data: {
+          earnings,
+        },
+      });
+    }),
+  );
+  console.table(updatedCommissions, [
+    "id",
+    "partnerId",
+    "amount",
+    "earnings",
+    "createdAt",
+  ]);
+
+  const remainingCommissions = await prisma.commission.count({
+    where,
+  });
+  console.log(`${remainingCommissions} commissions left to update`);
+  const pendingCommissions = await prisma.commission.findMany({
+    where: {
+      ...where,
+      earnings: undefined,
+    },
+  });
+  console.log(
+    `${pendingCommissions.reduce((acc, curr) => acc + curr.amount, 0)} amount`,
+  );
+  console.log(
+    `${pendingCommissions.reduce((acc, curr) => acc + curr.earnings, 0)} earnings`,
+  );
+}
+
+main();
diff --git a/apps/web/ui/partners/amount-row-item.tsx b/apps/web/ui/partners/amount-row-item.tsx
@@ -17,21 +17,21 @@ export function AmountRowItem({
     maximumFractionDigits: 2,
   });
   if (status === PayoutStatus.pending) {
-    if (!payoutsEnabled) {
+    if (amount < MIN_PAYOUT_AMOUNT) {
       return (
-        <Tooltip content="This partner does not have payouts enabled, which means they will not be able to receive any payouts from this program.">
+        <Tooltip
+          content={`Minimum payout amount is ${currencyFormatter(
+            MIN_PAYOUT_AMOUNT / 100,
+          )}. This payout will be accrued and processed during the next payout period.`}
+        >
           <span className="cursor-default truncate text-neutral-400 underline decoration-dotted underline-offset-2">
             {display}
           </span>
         </Tooltip>
       );
-    } else if (amount < MIN_PAYOUT_AMOUNT) {
+    } else if (!payoutsEnabled) {
       return (
-        <Tooltip
-          content={`Minimum payout amount is ${currencyFormatter(
-            MIN_PAYOUT_AMOUNT / 100,
-          )}. This payout will be accrued and processed during the next payout period.`}
-        >
+        <Tooltip content="This partner does not have payouts enabled, which means they will not be able to receive any payouts from this program.">
           <span className="cursor-default truncate text-neutral-400 underline decoration-dotted underline-offset-2">
             {display}
           </span>
diff --git a/apps/web/ui/partners/program-stats-filter.tsx b/apps/web/ui/partners/program-stats-filter.tsx
