feat: pagination on billing ui table and refactoring it

package.json

@@ -24,9 +24,9 @@
         "@ai-sdk/svelte": "^1.1.24",
         "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@f08cb74",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@077179c",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@3a17fe8",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@077179c",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3a17fe8",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",

src/lib/constants.ts

@@ -22,6 +22,7 @@ export enum Dependencies {
     CREDIT = 'dependency:credit',
     INVOICES = 'dependency:invoices',
     ADDRESS = 'dependency:address',
+    BILLING_AGGREGATION = 'dependency:billing_aggregation',
     UPGRADE_PLAN = 'dependency:upgrade_plan',
     ORGANIZATIONS = 'dependency:organizations',
     PAYMENT_METHODS = 'dependency:paymentMethods',

src/lib/sdk/billing.ts

@@ -934,12 +934,24 @@ export class Billing {
         );
     }
 
-    async getAggregation(organizationId: string, aggregationId: string): Promise<AggregationTeam> {
+    async getAggregation(
+        organizationId: string,
+        aggregationId: string,
+        limit?: number,
+        offset?: number
+    ): Promise<AggregationTeam> {
         const path = `/organizations/${organizationId}/aggregations/${aggregationId}`;
-        const params = {
+        const params: {
+            organizationId: string;
+            aggregationId: string;
+            limit?: number;
+            offset?: number;
+        } = {
             organizationId,
             aggregationId
         };
+        if (typeof limit === 'number') params.limit = limit;
+        if (typeof offset === 'number') params.offset = offset;
         const uri = new URL(this.client.config.endpoint + path);
         return await this.client.call(
             'get',

src/routes/(console)/organization-[organization]/billing/+page.svelte

@@ -133,7 +133,10 @@
             availableCredit={data?.availableCredit}
             currentPlan={data?.currentPlan}
             nextPlan={data?.nextPlan}
-            currentAggregation={data?.billingAggregation} />
+            currentAggregation={data?.billingAggregation}
+            limit={data?.limit}
+            offset={data?.offset}
+            aggregationKey={data?.aggregationKey} />
     {:else}
         <PlanSummaryOld
             availableCredit={data?.availableCredit}

src/routes/(console)/organization-[organization]/billing/+page.ts

@@ -7,7 +7,9 @@ import type { PageLoad } from './$types';
 import { isCloud } from '$lib/system';
 import { base } from '$app/paths';
 
-export const load: PageLoad = async ({ parent, depends }) => {
+import { getLimit, getPage, pageToOffset } from '$lib/helpers/load';
+
+export const load: PageLoad = async ({ parent, depends, url, route }) => {
     const { organization, scopes, currentPlan, countryList, locale } = await parent();
 
     if (!scopes.includes('billing.read')) {
@@ -19,6 +21,8 @@ export const load: PageLoad = async ({ parent, depends }) => {
     depends(Dependencies.CREDIT);
     depends(Dependencies.INVOICES);
     depends(Dependencies.ADDRESS);
+    //aggregation reloads on page param changes
+    depends(Dependencies.BILLING_AGGREGATION);
 
     const billingAddressId = (organization as Organization)?.billingAddressId;
     const billingAddressPromise: Promise<Address> = billingAddressId
@@ -34,9 +38,14 @@ export const load: PageLoad = async ({ parent, depends }) => {
      */
     let billingAggregation = null;
     try {
+        const currentPage = getPage(url) || 1;
+        const limit = getLimit(url, route, 5);
+        const offset = pageToOffset(currentPage, limit);
         billingAggregation = await sdk.forConsole.billing.getAggregation(
             organization.$id,
-            (organization as Organization)?.billingAggregationId
+            (organization as Organization)?.billingAggregationId,
+            limit,
+            offset
         );
     } catch (e) {
         // ignore error
@@ -84,6 +93,9 @@ export const load: PageLoad = async ({ parent, depends }) => {
         areCreditsSupported,
         countryList,
         locale,
-        nextPlan: billingPlanDowngrade
+        nextPlan: billingPlanDowngrade,
+        // expose pagination for components
+        limit: getLimit(url, route, 5),
+        offset: pageToOffset(getPage(url) || 1, getLimit(url, route, 5))
     };
 };