fix: usage

src/lib/sdk/billing.ts

@@ -143,12 +143,15 @@ export type Aggregation = {
      */
     resources: OrganizationUsage;
 };
-
+type UsageMetric = {
+    date: string;
+    value: number;
+}
 export type OrganizationUsage = {
-    bandwidth: [];
+    bandwidth: Array<UsageMetric>;
     executions: number;
     storage: number;
-    users: [];
+    users: Array<UsageMetric>;
 };
 
 export type AggregationList = {

src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte

@@ -5,38 +5,30 @@
     import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
     import { wizard } from '$lib/stores/wizard.js';
     import { organization } from '$lib/stores/organization';
-    import { InputDateRange, InputSelect } from '$lib/elements/forms';
+    import { InputSelect } from '$lib/elements/forms';
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
-    import type { DateRange } from '@melt-ui/svelte';
 
     const tier = tierToPlan($organization?.billingPlan)?.name;
 
     export let data;
-    let period = 'current';
+    let invoice = 'current';
 
     async function handlePeriodChange() {
-        if (
-            period === 'current' &&
-            !$page.url.pathname.includes('usage/current') &&
-            $page.url.pathname !== `/console/organization-${$organization.$id}/usage`
-        ) {
-            await goto(`/console/organization-${$organization.$id}/usage/current`);
-        }
-        if (period === 'previous' && !$page.url.pathname.includes('usage/previous')) {
-            await goto(`/console/organization-${$organization.$id}/usage/previous`);
-        }
-        if (period === 'custom' && !$page.url.pathname.includes('usage/custom')) {
-            console.log('test');
-            // await goto(`/console/organization-${$organization.$id}/usage/custom`);
+        const target = invoice
+            ? `/console/organization-${$organization.$id}/usage/${invoice}`
+            : `/console/organization-${$organization.$id}/usage`;
+        if ($page.url.pathname !== target) {
+            await goto(target);
         }
     }
 
-    let test: DateRange;
+    const cycles = data.invoices.invoices.map((invoice) => ({
+        label: invoice.from,
+        value: invoice.$id
+    }));
 </script>
 
-<InputDateRange id="date" label="test" bind:data={test}></InputDateRange>
-
 <Container>
     <Heading tag="h2" size="5">Usage</Heading>
     <div class="u-flex u-main-space-between common-section u-cross-center">
@@ -59,8 +51,6 @@
             </p>
         {/if}
 
-        <!-- <InputDate id="date" label="test" showLabel={false}></InputDate> -->
-
         <div class="u-flex u-gap-8 u-cross-center">
             <p class="text">Usage period:</p>
 
@@ -69,21 +59,14 @@
                 id="period"
                 label="Usage period"
                 showLabel={false}
-                bind:value={period}
+                bind:value={invoice}
                 on:change={handlePeriodChange}
                 options={[
                     {
                         label: 'Current billing cycle',
                         value: 'current'
                     },
-                    {
-                        label: 'Previous billing cycle',
-                        value: 'previous'
-                    },
-                    {
-                        label: 'Choose dates',
-                        value: 'custom'
-                    }
+                    ...cycles
                 ]}></InputSelect>
         </div>
     </div>
@@ -99,7 +82,7 @@
             <ProgressBarBig
                 unit="GB"
                 max={getServiceLimit('bandwidth')}
-                used={data.organizationUsage.bandwidth[0] ?? 0} />
+                used={data.organizationUsage.bandwidth[0]?.value ?? 0} />
         </svelte:fragment>
     </CardGrid>
 
@@ -112,7 +95,7 @@
             <ProgressBarBig
                 unit="Users"
                 max={getServiceLimit('users')}
-                used={data.organizationUsage.bandwidth[0] ?? 0} />
+                used={data.organizationUsage.bandwidth[0]?.value ?? 0} />
         </svelte:fragment>
     </CardGrid>
 

src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts

@@ -0,0 +1,35 @@
+import { sdk } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+import type { Organization } from '$lib/stores/organization';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    const { invoice } = params;
+    const parentData = await parent();
+    const org = parentData.organization as Organization;
+    const today = new Date().toISOString();
+    let startDate: string;
+    let endDate: string;
+
+    if (invoice){
+        const data = await sdk.forConsole.billing.getInvoice(org.$id, invoice);
+        startDate = data.from;
+        endDate = data.to;
+    } else {
+        startDate = org.billingCurrentInvoiceDate;
+        endDate = today;
+    }
+
+    const [invoices, usage] = await Promise.all([
+        sdk.forConsole.billing.listInvoices(org.$id),
+        sdk.forConsole.billing.listUsage(
+            params.organization,
+            startDate ?? org.billingCurrentInvoiceDate,
+            endDate ?? today
+        )
+    ])
+
+    return {
+        organizationUsage: usage,
+        invoices
+    };
+};

src/routes/console/organization-[organization]/usage/[[period]]/+page.ts

@@ -1,34 +0,0 @@
-import type { Organization } from '$lib/stores/organization';
-import { sdk } from '$lib/stores/sdk';
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = async ({ params, parent, url }) => {
-    const { period } = params;
-    const parentData = await parent();
-    const org = parentData.organization as Organization;
-    const today = new Date().toISOString();
-    let startDate: string;
-    let endDate: string;
-
-    if (period === 'current') {
-        startDate = org.billingCurrentInvoiceDate;
-        endDate = today;
-    } else if (period === 'previous') {
-        const prevDate = new Date(org.billingCurrentInvoiceDate);
-        prevDate.setDate(prevDate.getDate() - 30);
-        startDate = prevDate.toISOString();
-        endDate = org.billingCurrentInvoiceDate;
-    } else if (period === 'custom') {
-        startDate = url.searchParams.get('start') ?? org.billingCurrentInvoiceDate;
-        endDate = url.searchParams.get('end') ?? today;
-    }
-    const usage = await sdk.forConsole.billing.listUsage(
-        params.organization,
-        startDate ?? org.billingCurrentInvoiceDate,
-        endDate ?? today
-    );
-    console.log(usage);
-    return {
-        organizationUsage: usage
-    };
-};