From 0b1fb3d0a8ccf048b305f84f44e808304d26f15f Mon Sep 17 00:00:00 2001 From: Mauricio Araujo Date: Sun, 12 May 2024 13:26:21 -0400 Subject: [PATCH] Working past usage --- .../main/home/project-settings/UsagePage.tsx | 26 ++++++++++++------- internal/billing/usage.go | 25 ++++++++++++------ 2 files changed, 34 insertions(+), 17 deletions(-) diff --git a/dashboard/src/main/home/project-settings/UsagePage.tsx b/dashboard/src/main/home/project-settings/UsagePage.tsx index d3800645ca..78384445b7 100644 --- a/dashboard/src/main/home/project-settings/UsagePage.tsx +++ b/dashboard/src/main/home/project-settings/UsagePage.tsx @@ -13,9 +13,11 @@ dayjs.extend(utc); function UsagePage(): JSX.Element { const { plan } = useCustomerPlan(); - const planStartDate = dayjs.utc(plan?.starting_on); + const planStartDate = dayjs.utc(plan?.starting_on).startOf("month"); - const [currentPeriod, setCurrentPeriod] = useState(planStartDate); + const [currentPeriod, setCurrentPeriod] = useState( + dayjs().utc().startOf("month") + ); const [options, setOptions] = useState< Array<{ value: string; label: string }> >([]); @@ -37,11 +39,11 @@ function UsagePage(): JSX.Element { const monthsElapsed = dayjs .utc() .startOf("month") - .diff(planStartDate.utc().startOf("month"), "month"); + .diff(planStartDate, "month"); if (monthsElapsed <= 0) { options.push({ - value: currentPeriod.toISOString(), + value: currentPeriod.month().toString(), label: dayjs().utc().format("MMMM YYYY"), }); setShowCurrentPeriod(true); @@ -52,7 +54,7 @@ function UsagePage(): JSX.Element { for (let i = 0; i <= monthsElapsed; i++) { const optionDate = planStartDate.add(i, "month"); options.push({ - value: optionDate.toISOString(), + value: optionDate.month().toString(), label: optionDate.format("MMMM YYYY"), }); } @@ -61,13 +63,19 @@ function UsagePage(): JSX.Element { }; const processedUsage = useMemo(() => { - if (!usageList || !usageList.length) { + if (!usageList?.length) { return null; } - const periodUsage = usageList.find((usage) => - dayjs(usage.from_datetime).isSame(currentPeriod.month(), "month") + const periodUsage = usageList.find( + (usage) => + dayjs(usage.from_datetime).utc().month() === currentPeriod.month() ); + + if (!periodUsage) { + return null; + } + const totalCost = periodUsage?.total_amount_cents ? (periodUsage.total_amount_cents / 100).toFixed(4) : ""; @@ -92,7 +100,7 @@ function UsagePage(): JSX.Element { <>