From 1c4a03e8da786a6142936bee935ab74ca431ccbf Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 6 Dec 2025 19:15:03 +0530
Subject: [PATCH] add: imagine specific credits usage.

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 ++--
 .../settings/usage/[[invoice]]/+page.svelte   | 48 ++++++++++++++++++-
 3 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 210d3010f..4572c02cb 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@4838219",
+        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@f3cd1df",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@5b26bb8",
         "@appwrite.io/pink-legacy": "^1.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 70948dc58..fd88b4c68 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^1.1.24
         version: 1.1.24(svelte@5.45.5)(zod@3.24.3)
       '@appwrite.io/console':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/console@4838219
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/console@4838219
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/console@f3cd1df
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/console@f3cd1df
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
@@ -278,8 +278,8 @@ packages:
   '@apm-js-collab/tracing-hooks@0.3.1':
     resolution: {integrity: sha512-Vu1CbmPURlN5fTboVuKMoJjbO5qcq9fA5YXpskx3dXe/zTBvjODFoerw+69rVBlRLrJpwPqSDqEuJDEKIrTldw==}
 
-  '@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@4838219':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/console@4838219}
+  '@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@f3cd1df':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/console@f3cd1df}
     version: 1.10.0
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1':
@@ -3673,7 +3673,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@4838219': {}
+  '@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@f3cd1df': {}
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1(svelte@5.45.5)':
     dependencies:
diff --git a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
index f239a448d..ab15f0470 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
@@ -15,7 +15,9 @@
     import { Accordion, Icon, Layout, Link, Table, Typography } from '@appwrite.io/pink-svelte';
     import { IconChartSquareBar } from '@appwrite.io/pink-icons-svelte';
     import { page } from '$app/state';
-    import { isFreePlan } from '$lib/helpers/billing.js';
+    import { isFreePlan, isPaidPlan } from '$lib/helpers/billing.js';
+    import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { Platform } from '@appwrite.io/console';
 
     export let data;
 
@@ -67,7 +69,7 @@
                     on:click={() => ($showUsageRatesModal = true)}
                     >Learn more about plan usage limits.</Link.Button>
             </p>
-        {:else if $organization.billingPlan === BillingPlan.PRO}
+        {:else if isPaidPlan($organization.billingPlan)}
             <p class="text">
                 On the Pro plan, you'll be charged only for any usage that exceeds the thresholds
                 per resource listed below. <Link.Button
@@ -83,6 +85,48 @@
             </p>
         {/if}
     </div>
+
+    {#if resolvedProfile.platform === Platform.Imagine}
+        <CardGrid>
+        <svelte:fragment slot="title">Imagine Credits</svelte:fragment>
+        Total Imagine credits consumed across your project. Resets at the start of each billing cycle.
+        <svelte:fragment slot="aside">
+            {#if data.usage.imagineCredits}
+                {@const creditsTotal = data.usage.imagineCredits.reduce((sum, item) => sum + item.value, 0)}
+                <Layout.Stack gap="s" direction="row" alignItems="baseline">
+                    <Typography.Title>
+                        {formatNumberWithCommas(creditsTotal)}
+                    </Typography.Title>
+                    <Typography.Text>Credits</Typography.Text>
+                </Layout.Stack>
+                {#if data.usage.imagineCredits.length > 0}
+                    <BarChart
+                        options={{
+                            yAxis: {
+                                axisLabel: {
+                                    formatter: formatNum
+                                }
+                            }
+                        }}
+                        series={[
+                            {
+                                name: 'Credits',
+                                data: [...data.usage.imagineCredits.map((e) => [e.date, e.value])]
+                            }
+                        ]} />
+                {/if}
+            {:else}
+                <Card isDashed>
+                    <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                        <Icon icon={IconChartSquareBar} size="l" />
+                        <Typography.Text variant="m-600">No data to show</Typography.Text>
+                    </Layout.Stack>
+                </Card>
+            {/if}
+        </svelte:fragment>
+    </CardGrid>
+    {/if}
+
     <CardGrid>
         <svelte:fragment slot="title">Bandwidth</svelte:fragment>
         Calculated for all bandwidth used across your project. Resets at the start of each billing cycle.