From 36d9b08c44492b5f609b2ee3f8a837635145e014 Mon Sep 17 00:00:00 2001
From: Kritik Jiyaviya <kritikjiyaviya07@gmail.com>
Date: Sun, 21 Jan 2024 23:20:32 +0530
Subject: [PATCH 1/3] feat: Add daily runs graph

---
 .../billing/ConcurrentRunsChart.tsx           |  8 +-
 .../app/components/billing/DailyRunsChat.tsx  | 86 +++++++++++++++++++
 .../presenters/OrgUsagePresenter.server.ts    | 44 ++++++++--
 .../route.tsx                                 | 11 ++-
 4 files changed, 142 insertions(+), 7 deletions(-)
 create mode 100644 apps/webapp/app/components/billing/DailyRunsChat.tsx

diff --git a/apps/webapp/app/components/billing/ConcurrentRunsChart.tsx b/apps/webapp/app/components/billing/ConcurrentRunsChart.tsx
index 060a85473b7..4cadb6a7026 100644
--- a/apps/webapp/app/components/billing/ConcurrentRunsChart.tsx
+++ b/apps/webapp/app/components/billing/ConcurrentRunsChart.tsx
@@ -71,7 +71,13 @@ export function ConcurrentRunsChart({
           >
             <Label value="Last 30 days" offset={-8} position="insideBottom" fill="#94A3B8" />
           </XAxis>
-          <YAxis stroke="#94A3B8" fontSize={12} tickLine={false} axisLine={false} />
+          <YAxis
+            stroke="#94A3B8"
+            fontSize={12}
+            tickLine={false}
+            axisLine={false}
+            allowDecimals={false}
+          />
           <Tooltip
             cursor={{ fill: "rgba(255,255,255,0.05)" }}
             contentStyle={tooltipStyle}
diff --git a/apps/webapp/app/components/billing/DailyRunsChat.tsx b/apps/webapp/app/components/billing/DailyRunsChat.tsx
new file mode 100644
index 00000000000..7d5b0e17f37
--- /dev/null
+++ b/apps/webapp/app/components/billing/DailyRunsChat.tsx
@@ -0,0 +1,86 @@
+import { Label, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { Paragraph } from "../primitives/Paragraph";
+
+const tooltipStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  borderRadius: "0.25rem",
+  border: "1px solid #1A2434",
+  backgroundColor: "#0B1018",
+  padding: "0.3rem 0.5rem",
+  fontSize: "0.75rem",
+  color: "#E2E8F0",
+};
+
+type DataItem = { date: Date; runs: number };
+
+const dateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+});
+
+export function DailyRunsChart({
+  data,
+  hasDailyRunsData,
+}: {
+  data: DataItem[];
+  hasDailyRunsData: boolean;
+}) {
+  return (
+    <div className="relative">
+      {!hasDailyRunsData && (
+        <Paragraph className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+          No daily Runs to show
+        </Paragraph>
+      )}
+      <ResponsiveContainer width="100%" height="100%" className="relative min-h-[20rem]">
+        <LineChart
+          data={data}
+          margin={{
+            top: 20,
+            right: 0,
+            left: 0,
+            bottom: 10,
+          }}
+          className="-ml-8"
+        >
+          <XAxis
+            stroke="#94A3B8"
+            fontSize={12}
+            tickLine={false}
+            axisLine={false}
+            dataKey={(item: DataItem) => {
+              if (item.date.getDate() === 1) {
+                return dateFormatter.format(item.date);
+              }
+              return `${item.date.getDate()}`;
+            }}
+            className="text-xs"
+          >
+            <Label value="Last 30 days" offset={-8} position="insideBottom" fill="#94A3B8" />
+          </XAxis>
+          <YAxis
+            stroke="#94A3B8"
+            fontSize={12}
+            tickLine={false}
+            axisLine={false}
+            allowDecimals={false}
+          />
+          <Tooltip
+            cursor={{ fill: "rgba(255,255,255,0.05)" }}
+            contentStyle={tooltipStyle}
+            labelFormatter={(value, data) => {
+              const date = data.at(0)?.payload.date;
+              if (!date) {
+                return "";
+              }
+              return dateFormatter.format(date);
+            }}
+          />
+          <Line dataKey="runs" name="Runs" stroke="#16A34A" strokeWidth={2} dot={false} />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/presenters/OrgUsagePresenter.server.ts b/apps/webapp/app/presenters/OrgUsagePresenter.server.ts
index 5f1c1642605..0455469c77d 100644
--- a/apps/webapp/app/presenters/OrgUsagePresenter.server.ts
+++ b/apps/webapp/app/presenters/OrgUsagePresenter.server.ts
@@ -1,9 +1,7 @@
 import { estimate } from "@trigger.dev/billing";
-import { formatDateTime } from "~/components/primitives/DateTime";
 import { PrismaClient, prisma } from "~/db.server";
 import { featuresForRequest } from "~/features.server";
 import { BillingService } from "~/services/billing.server";
-import { logger } from "~/services/logger.server";
 
 export class OrgUsagePresenter {
   #prismaClient: PrismaClient;
@@ -108,7 +106,7 @@ export class OrgUsagePresenter {
 
     const ThirtyDaysAgo = new Date();
     ThirtyDaysAgo.setDate(ThirtyDaysAgo.getDate() - 30);
-    ThirtyDaysAgo.setHours(0, 0, 0, 0);
+    ThirtyDaysAgo.setUTCHours(0, 0, 0, 0);
 
     const hasConcurrencyData = concurrencyChartRawData.length > 0;
     const concurrencyChartRawDataFilledIn = fillInMissingConcurrencyDays(
@@ -117,6 +115,13 @@ export class OrgUsagePresenter {
       concurrencyChartRawData
     );
 
+    const dailyRunsRawData = await this.#prismaClient.$queryRaw<
+      { day: Date; runs: BigInt }[]
+    >`SELECT date_trunc('day', "createdAt") as day, COUNT(*) as runs FROM "JobRun" WHERE "organizationId" = ${organization.id} AND "createdAt" >= NOW() - INTERVAL '30 days' AND "internal" = FALSE GROUP BY day`;
+
+    const hasDailyRunsData = dailyRunsRawData.length > 0;
+    const dailyRunsDataFilledIn = fillInMissingDailyRuns(ThirtyDaysAgo, 31, dailyRunsRawData);
+
     const endOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1);
     endOfMonth.setDate(endOfMonth.getDate() - 1);
     const projectedRunsCount = Math.round(
@@ -146,12 +151,12 @@ export class OrgUsagePresenter {
 
     const periodStart = new Date();
     periodStart.setDate(1);
-    periodStart.setHours(0, 0, 0, 0);
+    periodStart.setUTCHours(0, 0, 0, 0);
 
     const periodEnd = new Date();
     periodEnd.setDate(1);
     periodEnd.setMonth(periodEnd.getMonth() + 1);
-    periodEnd.setHours(0, 0, 0, 0);
+    periodEnd.setUTCHours(0, 0, 0, 0);
 
     return {
       id: organization.id,
@@ -161,6 +166,8 @@ export class OrgUsagePresenter {
       hasMonthlyRunData,
       concurrencyData: concurrencyChartRawDataFilledIn,
       hasConcurrencyData,
+      dailyRunsData: dailyRunsDataFilledIn,
+      hasDailyRunsData,
       runCostEstimation,
       projectedRunCostEstimation,
       periodStart,
@@ -224,6 +231,33 @@ function fillInMissingConcurrencyDays(
   return outputData;
 }
 
+function fillInMissingDailyRuns(
+  startDate: Date,
+  days: number,
+  data: Array<{ day: Date; runs: BigInt }>
+) {
+  const outputData: Array<{ date: Date; runs: number }> = [];
+  for (let i = 0; i < days; i++) {
+    const date = new Date(startDate);
+    date.setDate(date.getDate() + i);
+
+    const foundData = data.find((d) => d.day.toISOString() === date.toISOString());
+    if (!foundData) {
+      outputData.push({
+        date,
+        runs: 0,
+      });
+    } else {
+      outputData.push({
+        date,
+        runs: Number(foundData.runs),
+      });
+    }
+  }
+
+  return outputData;
+}
+
 // Start month will be like 2023-03 and endMonth will be like 2023-10
 // The result should be an array of months between these two months, including the start and end month
 // So for example, if startMonth is 2023-03 and endMonth is 2023-10, the result should be:
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx
index ae7fc8819a4..74598156aca 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx
@@ -16,6 +16,7 @@ import { formatCurrency, formatNumberCompact } from "~/utils/numberFormatter";
 import { OrganizationParamsSchema, plansPath } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { DateTime, formatDateTime } from "~/components/primitives/DateTime";
+import { DailyRunsChart } from "~/components/billing/DailyRunsChat";
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
   const userId = await requireUserId(request);
@@ -90,7 +91,15 @@ export default function Page() {
           />
         </div>
       </div>
-
+      <div>
+        <Header2 spacing>Daily runs</Header2>
+        <div className="flex w-full flex-col gap-5 rounded border border-border p-6">
+          <DailyRunsChart
+            data={loaderData.dailyRunsData}
+            hasDailyRunsData={loaderData.hasDailyRunsData}
+          />
+        </div>
+      </div>
       <div className="@container">
         <Header2 spacing>Runs</Header2>
         <div className="flex flex-col gap-5 rounded border border-border p-6">

From 65c46c86c9a79d81b9b2c8ffd1706bd73a18a553 Mon Sep 17 00:00:00 2001
From: Kritik Jiyaviya <kritikjiyaviya07@gmail.com>
Date: Mon, 22 Jan 2024 18:51:56 +0530
Subject: [PATCH 2/3] Merge branch 'main' into feat/daily-runs-graph

---
 .../billing/ConcurrentRunsChart.tsx           |  17 +-
 .../presenters/OrgUsagePresenter.server.ts    |   2 +-
 .../route.tsx                                 | 336 ++++++++++--------
 3 files changed, 197 insertions(+), 158 deletions(-)

diff --git a/apps/webapp/app/components/billing/ConcurrentRunsChart.tsx b/apps/webapp/app/components/billing/ConcurrentRunsChart.tsx
index 4cadb6a7026..5e1ef198efc 100644
--- a/apps/webapp/app/components/billing/ConcurrentRunsChart.tsx
+++ b/apps/webapp/app/components/billing/ConcurrentRunsChart.tsx
@@ -22,7 +22,7 @@ const tooltipStyle = {
   color: "#E2E8F0",
 };
 
-type DataItem = { date: Date; maxConcurrentRuns: number };
+type DataItem = { date: string; maxConcurrentRuns: number };
 
 const dateFormatter = new Intl.DateTimeFormat("en-US", {
   month: "short",
@@ -62,10 +62,12 @@ export function ConcurrentRunsChart({
             tickLine={false}
             axisLine={false}
             dataKey={(item: DataItem) => {
-              if (item.date.getDate() === 1) {
-                return dateFormatter.format(item.date);
+              if (!item.date) return "";
+              const date = new Date(item.date);
+              if (date.getDate() === 1) {
+                return dateFormatter.format(date);
               }
-              return `${item.date.getDate()}`;
+              return `${date.getDate()}`;
             }}
             className="text-xs"
           >
@@ -82,11 +84,12 @@ export function ConcurrentRunsChart({
             cursor={{ fill: "rgba(255,255,255,0.05)" }}
             contentStyle={tooltipStyle}
             labelFormatter={(value, data) => {
-              const date = data.at(0)?.payload.date;
-              if (!date) {
+              const dateString = data.at(0)?.payload.date;
+              if (!dateString) {
                 return "";
               }
-              return dateFormatter.format(date);
+
+              return dateFormatter.format(new Date(dateString));
             }}
           />
           {concurrentRunsLimit && (
diff --git a/apps/webapp/app/presenters/OrgUsagePresenter.server.ts b/apps/webapp/app/presenters/OrgUsagePresenter.server.ts
index 0455469c77d..c0fddfc3add 100644
--- a/apps/webapp/app/presenters/OrgUsagePresenter.server.ts
+++ b/apps/webapp/app/presenters/OrgUsagePresenter.server.ts
@@ -23,7 +23,7 @@ export class OrgUsagePresenter {
     });
 
     if (!organization) {
-      return;
+      throw new Error("Organization not found");
     }
 
     // Get count of runs since the start of the current month
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx
index 74598156aca..939178031e8 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx
@@ -1,36 +1,32 @@
 import { ArrowRightIcon } from "@heroicons/react/20/solid";
 import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
-import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { Await, useLoaderData } from "@remix-run/react";
+import { DataFunctionArgs, defer } from "@remix-run/server-runtime";
+import { Suspense } from "react";
 import { Bar, BarChart, ResponsiveContainer, Tooltip, TooltipProps, XAxis, YAxis } from "recharts";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { ConcurrentRunsChart } from "~/components/billing/ConcurrentRunsChart";
 import { UsageBar } from "~/components/billing/UsageBar";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
+import { DailyRunsChart } from "~/components/billing/DailyRunsChat";
+import { DateTime } from "~/components/primitives/DateTime";
 import { Header2, Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { Spinner } from "~/components/primitives/Spinner";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { OrgUsagePresenter } from "~/presenters/OrgUsagePresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { formatCurrency, formatNumberCompact } from "~/utils/numberFormatter";
 import { OrganizationParamsSchema, plansPath } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
-import { DateTime, formatDateTime } from "~/components/primitives/DateTime";
-import { DailyRunsChart } from "~/components/billing/DailyRunsChat";
 
-export async function loader({ params, request }: LoaderFunctionArgs) {
+export async function loader({ request, params }: DataFunctionArgs) {
   const userId = await requireUserId(request);
   const { organizationSlug } = OrganizationParamsSchema.parse(params);
 
   const presenter = new OrgUsagePresenter();
-
-  const data = await presenter.call({ userId, slug: organizationSlug, request });
-
-  if (!data) {
-    throw new Response(null, { status: 404 });
-  }
-
-  return typedjson(data);
+  const usageData = presenter.call({ userId, slug: organizationSlug, request });
+  return defer({ usageData });
 }
 
 const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>) => {
@@ -48,154 +44,194 @@ const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>)
 
 export default function Page() {
   const organization = useOrganization();
-  const loaderData = useTypedLoaderData<typeof loader>();
+  const { usageData } = useLoaderData<typeof loader>();
   const currentPlan = useCurrentPlan();
 
-  const hitConcurrencyLimit = currentPlan?.subscription?.limits.concurrentRuns
-    ? loaderData.concurrencyData.some(
-        (c) => c.maxConcurrentRuns >= (currentPlan.subscription?.limits.concurrentRuns ?? Infinity)
-      )
-    : false;
-
   const hitsRunLimit = currentPlan?.usage?.runCountCap
     ? currentPlan.usage.currentRunCount > currentPlan.usage.runCountCap
     : false;
 
   return (
     <div className="flex flex-col gap-4">
-      <div>
-        <Header2 spacing>Concurrent runs</Header2>
-        <div className="flex w-full flex-col gap-5 rounded border border-border p-6">
-          {hitConcurrencyLimit && (
-            <Callout
-              variant={"pricing"}
-              cta={
-                <LinkButton
-                  variant="primary/small"
-                  LeadingIcon={ArrowUpCircleIcon}
-                  leadingIconClassName="px-0"
-                  to={plansPath(organization)}
-                >
-                  Increase concurrent runs
-                </LinkButton>
-              }
-            >
-              {`Some of your runs are being queued because the number of concurrent runs is limited to
+      <Suspense
+        fallback={
+          <>
+            <LoadingElement title="Concurrent runs" />
+            <LoadingElement title="Runs" />
+          </>
+        }
+      >
+        <Await
+          resolve={usageData}
+          errorElement={<Paragraph>There was a problem loading your usage data.</Paragraph>}
+        >
+          {(data) => {
+            const hitConcurrencyLimit = currentPlan?.subscription?.limits.concurrentRuns
+              ? data.concurrencyData.some(
+                  (c) =>
+                    c.maxConcurrentRuns >=
+                    (currentPlan.subscription?.limits.concurrentRuns ?? Infinity)
+                )
+              : false;
+
+            return (
+              <>
+                <div>
+                  <Header2 spacing>Concurrent runs</Header2>
+                  <div className="flex w-full flex-col gap-5 rounded border border-border p-6">
+                    {hitConcurrencyLimit && (
+                      <Callout
+                        variant={"pricing"}
+                        cta={
+                          <LinkButton
+                            variant="primary/small"
+                            LeadingIcon={ArrowUpCircleIcon}
+                            leadingIconClassName="px-0"
+                            to={plansPath(organization)}
+                          >
+                            Increase concurrent runs
+                          </LinkButton>
+                        }
+                      >
+                        {`Some of your runs are being queued because the number of concurrent runs is limited to
             ${currentPlan?.subscription?.limits.concurrentRuns}.`}
-            </Callout>
-          )}
-          <ConcurrentRunsChart
-            data={loaderData.concurrencyData}
-            concurrentRunsLimit={currentPlan?.subscription?.limits.concurrentRuns}
-            hasConcurrencyData={loaderData.hasConcurrencyData}
-          />
-        </div>
-      </div>
-      <div>
-        <Header2 spacing>Daily runs</Header2>
-        <div className="flex w-full flex-col gap-5 rounded border border-border p-6">
-          <DailyRunsChart
-            data={loaderData.dailyRunsData}
-            hasDailyRunsData={loaderData.hasDailyRunsData}
-          />
-        </div>
-      </div>
-      <div className="@container">
-        <Header2 spacing>Runs</Header2>
-        <div className="flex flex-col gap-5 rounded border border-border p-6">
-          {hitsRunLimit && (
-            <Callout
-              variant={"error"}
-              cta={
-                <LinkButton
-                  variant="primary/small"
-                  LeadingIcon={ArrowUpCircleIcon}
-                  leadingIconClassName="px-0"
-                  to={plansPath(organization)}
-                >
-                  Upgrade
-                </LinkButton>
-              }
-            >
-              <Paragraph variant="small" className="text-white">
-                You have exceeded the monthly{" "}
-                {formatNumberCompact(currentPlan?.subscription?.limits.runs ?? 0)} runs limit.
-                Upgrade to a paid plan before{" "}
-                <DateTime date={loaderData.periodEnd} includeSeconds={false} includeTime={false} />.
-              </Paragraph>
-            </Callout>
-          )}
-          <div className="flex flex-col gap-x-8 @4xl:flex-row">
-            <div className="flex w-full flex-col gap-4">
-              {loaderData.runCostEstimation !== undefined &&
-                loaderData.projectedRunCostEstimation !== undefined && (
-                  <div className="flex w-full items-center gap-6">
-                    <div className="flex flex-col gap-2">
-                      <Header3 className="">Month-to-date</Header3>
-                      <p className="text-3xl font-medium text-bright">
-                        {formatCurrency(loaderData.runCostEstimation, false)}
-                      </p>
-                    </div>
-                    <ArrowRightIcon className="h-6 w-6 text-dimmed/50" />
-                    <div className="flex flex-col gap-2 text-dimmed">
-                      <Header3 className="text-dimmed">Projected</Header3>
-                      <p className="text-3xl font-medium">
-                        {formatCurrency(loaderData.projectedRunCostEstimation, false)}
-                      </p>
+                      </Callout>
+                    )}
+                    <ConcurrentRunsChart
+                      data={data.concurrencyData}
+                      concurrentRunsLimit={currentPlan?.subscription?.limits.concurrentRuns}
+                      hasConcurrencyData={data.hasConcurrencyData}
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <Header2 spacing>Daily runs</Header2>
+                  <div className="flex w-full flex-col gap-5 rounded border border-border p-6">
+                    <DailyRunsChart
+                      data={data.dailyRunsData}
+                      hasDailyRunsData={data.hasDailyRunsData}
+                    />
+                  </div>
+                </div>
+
+                <div className="@container">
+                  <Header2 spacing>Runs</Header2>
+                  <div className="flex flex-col gap-5 rounded border border-border p-6">
+                    {hitsRunLimit && (
+                      <Callout
+                        variant={"error"}
+                        cta={
+                          <LinkButton
+                            variant="primary/small"
+                            LeadingIcon={ArrowUpCircleIcon}
+                            leadingIconClassName="px-0"
+                            to={plansPath(organization)}
+                          >
+                            Upgrade
+                          </LinkButton>
+                        }
+                      >
+                        <Paragraph variant="small" className="text-white">
+                          You have exceeded the monthly{" "}
+                          {formatNumberCompact(currentPlan?.subscription?.limits.runs ?? 0)} runs
+                          limit. Upgrade to a paid plan before{" "}
+                          <DateTime
+                            date={data.periodEnd}
+                            includeSeconds={false}
+                            includeTime={false}
+                          />
+                          .
+                        </Paragraph>
+                      </Callout>
+                    )}
+                    <div className="flex flex-col gap-x-8 @4xl:flex-row">
+                      <div className="flex w-full flex-col gap-4">
+                        {data.runCostEstimation !== undefined &&
+                          data.projectedRunCostEstimation !== undefined && (
+                            <div className="flex w-full items-center gap-6">
+                              <div className="flex flex-col gap-2">
+                                <Header3 className="">Month-to-date</Header3>
+                                <p className="text-3xl font-medium text-bright">
+                                  {formatCurrency(data.runCostEstimation, false)}
+                                </p>
+                              </div>
+                              <ArrowRightIcon className="h-6 w-6 text-dimmed/50" />
+                              <div className="flex flex-col gap-2 text-dimmed">
+                                <Header3 className="text-dimmed">Projected</Header3>
+                                <p className="text-3xl font-medium">
+                                  {formatCurrency(data.projectedRunCostEstimation, false)}
+                                </p>
+                              </div>
+                            </div>
+                          )}
+                        <UsageBar
+                          numberOfCurrentRuns={data.runsCount}
+                          tierRunLimit={
+                            currentPlan?.usage.runCountCap ??
+                            currentPlan?.subscription?.plan.runs?.pricing?.brackets.at(0)?.upto
+                          }
+                          projectedRuns={data.projectedRunsCount}
+                        />
+                      </div>
+                      <div className="relative w-full">
+                        <Header3 className="mb-4">Monthly runs</Header3>
+                        {!data.hasMonthlyRunData && (
+                          <Paragraph className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+                            No runs to show
+                          </Paragraph>
+                        )}
+                        <ResponsiveContainer width="100%" height={200}>
+                          <BarChart
+                            data={data.monthlyRunsData}
+                            margin={{
+                              top: 0,
+                              right: 0,
+                              left: 0,
+                              bottom: 0,
+                            }}
+                            className="-ml-7"
+                          >
+                            <XAxis
+                              dataKey="name"
+                              stroke="#94A3B8"
+                              fontSize={12}
+                              tickLine={false}
+                              axisLine={false}
+                            />
+                            <YAxis
+                              stroke="#94A3B8"
+                              fontSize={12}
+                              tickLine={false}
+                              axisLine={false}
+                              tickFormatter={(value) => `${value}`}
+                            />
+                            <Tooltip
+                              cursor={{ fill: "rgba(255,255,255,0.05)" }}
+                              content={<CustomTooltip />}
+                            />
+                            <Bar dataKey="total" fill="#16A34A" radius={[3, 3, 0, 0]} />
+                          </BarChart>
+                        </ResponsiveContainer>
+                      </div>
                     </div>
                   </div>
-                )}
-              <UsageBar
-                numberOfCurrentRuns={loaderData.runsCount}
-                tierRunLimit={
-                  currentPlan?.usage.runCountCap ??
-                  currentPlan?.subscription?.plan.runs?.pricing?.brackets.at(0)?.upto
-                }
-                projectedRuns={loaderData.projectedRunsCount}
-              />
-            </div>
-            <div className="relative w-full">
-              <Header3 className="mb-4">Monthly runs</Header3>
-              {!loaderData.hasMonthlyRunData && (
-                <Paragraph className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-                  No runs to show
-                </Paragraph>
-              )}
-              <ResponsiveContainer width="100%" height={200}>
-                <BarChart
-                  data={loaderData.monthlyRunsData}
-                  margin={{
-                    top: 0,
-                    right: 0,
-                    left: 0,
-                    bottom: 0,
-                  }}
-                  className="-ml-7"
-                >
-                  <XAxis
-                    dataKey="name"
-                    stroke="#94A3B8"
-                    fontSize={12}
-                    tickLine={false}
-                    axisLine={false}
-                  />
-                  <YAxis
-                    stroke="#94A3B8"
-                    fontSize={12}
-                    tickLine={false}
-                    axisLine={false}
-                    tickFormatter={(value) => `${value}`}
-                  />
-                  <Tooltip
-                    cursor={{ fill: "rgba(255,255,255,0.05)" }}
-                    content={<CustomTooltip />}
-                  />
-                  <Bar dataKey="total" fill="#16A34A" radius={[3, 3, 0, 0]} />
-                </BarChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-        </div>
+                </div>
+              </>
+            );
+          }}
+        </Await>
+      </Suspense>
+    </div>
+  );
+}
+
+function LoadingElement({ title }: { title: string }) {
+  return (
+    <div>
+      <Header2 spacing>{title}</Header2>
+      <div className="flex h-96 w-full items-center justify-center gap-5 rounded border border-border p-6">
+        <Spinner />
       </div>
     </div>
   );

From ba649902b266caa2f9b407598e5632641141283f Mon Sep 17 00:00:00 2001
From: Kritik Jiyaviya <kritikjiyaviya07@gmail.com>
Date: Mon, 22 Jan 2024 18:55:08 +0530
Subject: [PATCH 3/3] update DayRunsChart

---
 .../app/components/billing/DailyRunsChat.tsx    | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/webapp/app/components/billing/DailyRunsChat.tsx b/apps/webapp/app/components/billing/DailyRunsChat.tsx
index 7d5b0e17f37..250f84e1ed8 100644
--- a/apps/webapp/app/components/billing/DailyRunsChat.tsx
+++ b/apps/webapp/app/components/billing/DailyRunsChat.tsx
@@ -13,7 +13,7 @@ const tooltipStyle = {
   color: "#E2E8F0",
 };
 
-type DataItem = { date: Date; runs: number };
+type DataItem = { date: string; runs: number };
 
 const dateFormatter = new Intl.DateTimeFormat("en-US", {
   month: "short",
@@ -51,10 +51,12 @@ export function DailyRunsChart({
             tickLine={false}
             axisLine={false}
             dataKey={(item: DataItem) => {
-              if (item.date.getDate() === 1) {
-                return dateFormatter.format(item.date);
+              if (!item.date) return "";
+              const date = new Date(item.date);
+              if (date.getDate() === 1) {
+                return dateFormatter.format(date);
               }
-              return `${item.date.getDate()}`;
+              return `${date.getDate()}`;
             }}
             className="text-xs"
           >
@@ -71,11 +73,12 @@ export function DailyRunsChart({
             cursor={{ fill: "rgba(255,255,255,0.05)" }}
             contentStyle={tooltipStyle}
             labelFormatter={(value, data) => {
-              const date = data.at(0)?.payload.date;
-              if (!date) {
+              const dateString = data.at(0)?.payload.date;
+              if (!dateString) {
                 return "";
               }
-              return dateFormatter.format(date);
+
+              return dateFormatter.format(new Date(dateString));
             }}
           />
           <Line dataKey="runs" name="Runs" stroke="#16A34A" strokeWidth={2} dot={false} />