From 86648beda9b4b0546ee295b0d96d7ce17627c4e4 Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Sun, 29 Dec 2024 17:29:52 -0800
Subject: [PATCH] fix usage page

---
 .../workspaces/[idOrSlug]/billing/usage/route.ts   | 14 ++++----------
 .../[slug]/settings/billing/plan-usage.tsx         |  5 +++--
 apps/web/lib/swr/use-usage.ts                      | 11 +++++++++--
 apps/web/lib/zod/schemas/usage.ts                  |  2 ++
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/apps/web/app/api/workspaces/[idOrSlug]/billing/usage/route.ts b/apps/web/app/api/workspaces/[idOrSlug]/billing/usage/route.ts
index 088bec0c42..a80aff8a82 100644
--- a/apps/web/app/api/workspaces/[idOrSlug]/billing/usage/route.ts
+++ b/apps/web/app/api/workspaces/[idOrSlug]/billing/usage/route.ts
@@ -2,13 +2,11 @@ import { withWorkspace } from "@/lib/auth";
 import { tb } from "@/lib/tinybird";
 import z from "@/lib/zod";
 import { usageQuerySchema, usageResponse } from "@/lib/zod/schemas/usage";
-import { getFirstAndLastDay } from "@dub/utils";
 import { NextResponse } from "next/server";
 
 export const GET = withWorkspace(async ({ searchParams, workspace }) => {
-  const { resource, timezone } = usageQuerySchema.parse(searchParams);
-  const { billingCycleStart } = workspace;
-  const { firstDay, lastDay } = getFirstAndLastDay(billingCycleStart);
+  const { resource, start, end, timezone } =
+    usageQuerySchema.parse(searchParams);
 
   const pipe = tb.buildPipe({
     pipe: "v2_usage",
@@ -34,12 +32,8 @@ export const GET = withWorkspace(async ({ searchParams, workspace }) => {
   const response = await pipe({
     resource,
     workspaceId: workspace.id,
-    start: firstDay.toISOString().replace("T", " ").replace("Z", ""),
-    // get end of the day (11:59:59 PM)
-    end: new Date(lastDay.getTime() + 86399999)
-      .toISOString()
-      .replace("T", " ")
-      .replace("Z", ""),
+    start,
+    end,
     timezone,
   });
 
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/plan-usage.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/plan-usage.tsx
index f9416057b7..61d0a0621e 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/plan-usage.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/plan-usage.tsx
@@ -213,6 +213,7 @@ function UsageTabCard({
   const loading = usage === undefined || limit === undefined;
   const unlimited = limit !== undefined && limit >= INFINITY_NUMBER;
   const warning = !loading && !unlimited && usage >= limit * 0.9;
+  console.log({ warning, usage, limit });
   const remaining = !loading && !unlimited ? Math.max(0, limit - usage) : 0;
 
   const prefix = unit || "";
@@ -258,7 +259,7 @@ function UsageTabCard({
             loading && "bg-neutral-900/5",
           )}
         >
-          {!loading && !unlimited && limit > usage && (
+          {!loading && !unlimited && (
             <div
               className="animate-slide-right-fade size-full"
               style={{ "--offset": "-100%" } as CSSProperties}
@@ -266,7 +267,7 @@ function UsageTabCard({
               <div
                 className={cn(
                   "size-full rounded-full bg-gradient-to-r from-blue-500/80 to-blue-600",
-                  warning && "to-rose-500",
+                  warning && "from-neutral-900/10 via-red-500 to-red-600",
                 )}
                 style={{
                   transform: `translateX(-${100 - Math.floor((usage / Math.max(0, usage, limit)) * 100)}%)`,
diff --git a/apps/web/lib/swr/use-usage.ts b/apps/web/lib/swr/use-usage.ts
index 95a2fc5cbe..ac85c841c8 100644
--- a/apps/web/lib/swr/use-usage.ts
+++ b/apps/web/lib/swr/use-usage.ts
@@ -1,4 +1,4 @@
-import { fetcher } from "@dub/utils";
+import { fetcher, getFirstAndLastDay } from "@dub/utils";
 import useSWR from "swr";
 import { UsageResponse } from "../types";
 import useWorkspace from "./use-workspace";
@@ -8,7 +8,8 @@ export default function useUsage({
 }: {
   resource: "links" | "events" | "revenue";
 }) {
-  const { id: workspaceId } = useWorkspace();
+  const { id: workspaceId, billingCycleStart } = useWorkspace();
+  const { firstDay, lastDay } = getFirstAndLastDay(billingCycleStart ?? 0);
 
   const {
     data: usage,
@@ -18,6 +19,12 @@ export default function useUsage({
     workspaceId &&
       `/api/workspaces/${workspaceId}/billing/usage?${new URLSearchParams({
         resource,
+        start: firstDay.toISOString().replace("T", " ").replace("Z", ""),
+        // get end of the day (11:59:59 PM)
+        end: new Date(lastDay.getTime() + 86399999)
+          .toISOString()
+          .replace("T", " ")
+          .replace("Z", ""),
         timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
       }).toString()}`,
     fetcher,
diff --git a/apps/web/lib/zod/schemas/usage.ts b/apps/web/lib/zod/schemas/usage.ts
index 8143e05220..27eb77dea0 100644
--- a/apps/web/lib/zod/schemas/usage.ts
+++ b/apps/web/lib/zod/schemas/usage.ts
@@ -2,6 +2,8 @@ import z from "@/lib/zod";
 
 export const usageQuerySchema = z.object({
   resource: z.enum(["links", "events", "revenue"]),
+  start: z.string(),
+  end: z.string(),
   timezone: z.string().optional().default("UTC"),
 });