Add: credits usage on org.

src/lib/components/navbar.svelte

@@ -30,6 +30,7 @@
     } from '@appwrite.io/pink-svelte';
     import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
     import {
+        IconChartSquareBar,
         IconChevronRight,
         IconCreditCard,
         IconGlobeAlt,
@@ -269,6 +270,13 @@
                                     on:click={() => toggle()}>
                                     Domains</ActionMenu.Item.Anchor>
 
+                                <ActionMenu.Item.Anchor
+                                    size="l"
+                                    trailingIcon={IconChartSquareBar}
+                                    href={`${baseOrgUrl}/usage`}
+                                    on:click={() => toggle()}>
+                                    Usage</ActionMenu.Item.Anchor>
+
                                 <Divider />
                             {/if}
 

src/lib/sdk/billing.ts

@@ -293,12 +293,16 @@ export type OrganizationUsage = {
     databasesReads: Array<Models.Metric>;
     databasesWrites: Array<Models.Metric>;
     imageTransformations: Array<Models.Metric>;
+    screenshotsGenerated: Array<Models.Metric>;
+    imagineCredits: Array<Models.Metric>;
     executionsTotal: number;
     filesStorageTotal: number;
     buildsStorageTotal: number;
     databasesReadsTotal: number;
     databasesWritesTotal: number;
     imageTransformationsTotal: number;
+    screenshotsGeneratedTotal: number;
+    imagineCreditsTotal: number;
     deploymentsStorageTotal: number;
     executionsMBSecondsTotal: number;
     buildsMBSecondsTotal: number;
@@ -317,6 +321,8 @@ export type OrganizationUsage = {
         authPhoneTotal: number;
         authPhoneEstimate: number;
         imageTransformations: number;
+        screenshotsGenerated: number;
+        imagineCredits: number;
     }>;
     authPhoneTotal: number;
     authPhoneEstimate: number;

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

@@ -57,4 +57,6 @@
 
 <Create bind:show={$newOrgModal} />
 
-<CreateMember bind:showCreate={$newMemberModal} />
+{#if page.data.supportsMoreMembers}
+    <CreateMember bind:showCreate={$newMemberModal} />
+{/if}

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

@@ -64,6 +64,10 @@ export const load: LayoutLoad = async ({ params, depends, parent }) => {
             loadAvailableRegions(params.organization)
         ]);
 
+        const seatsAddon = currentPlan?.addons?.seats;
+        const canAddMembers =
+            !seatsAddon || (seatsAddon.supported ?? false) || (seatsAddon.limit ?? 0) > 1;
+
         return {
             header: Header,
             breadcrumbs: Breadcrumbs,
@@ -73,7 +77,8 @@ export const load: LayoutLoad = async ({ params, depends, parent }) => {
             roles,
             scopes,
             countryList,
-            locale
+            locale,
+            supportsMoreMembers: canAddMembers
         };
     } catch (e) {
         const newPrefs = {

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

@@ -25,7 +25,8 @@
     import { onMount } from 'svelte';
     import type { UsageProjectInfo } from '../../store';
     import { isFreePlan } from '$lib/helpers/billing';
-    import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
+    import { page } from '$app/state';
 
     export let data;
 
@@ -114,6 +115,52 @@
         </p>
     {/if}
 
+    {#if resolvedProfile.id === ProfileMode.STUDIO}
+        <CardGrid gap="none">
+            <svelte:fragment slot="title">Credits</svelte:fragment>
+            The total number of credits used across all projects in your organization.
+            <svelte:fragment slot="aside">
+                {#if data.organizationUsage.imagineCreditsTotal}
+                    {@const current = data.organizationUsage.imagineCreditsTotal}
+                    <ProgressBarBig
+                        currentUnit="Credits"
+                        currentValue={formatNum(current)}
+                        progressValue={current}
+                        showBar={false} />
+                    <BarChart
+                        options={{
+                            yAxis: {
+                                axisLabel: {
+                                    formatter: formatNum
+                                }
+                            }
+                        }}
+                        series={[
+                            {
+                                name: 'Credits',
+                                data: [
+                                    ...(data.organizationUsage.imagineCredits ?? []).map((e) => [
+                                        e.date,
+                                        e.value
+                                    ])
+                                ]
+                            }
+                        ]} />
+                    {#if projects?.length > 0}
+                        <ProjectBreakdown {projects} metric="imagineCredits" {usageProjects} />
+                    {/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 gap="none">
         <svelte:fragment slot="title">Bandwidth</svelte:fragment>
         Calculated for all bandwidth used across all projects in your organization. Resets at the start
@@ -550,7 +597,9 @@
         </svelte:fragment>
     </CardGrid>
 
-    <TotalMembers members={data?.organizationMembers} />
+    {#if page.data.supportsMoreMembers}
+        <TotalMembers members={data?.organizationMembers} />
+    {/if}
 
     <p class="text common-section u-color-text-gray">
         Metrics are estimates updated every 24 hours and may not accurately reflect your invoice.

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

@@ -34,7 +34,11 @@ export const load: PageLoad = async ({ params, parent }) => {
                 databasesReadsTotal: null,
                 databasesWritesTotal: null,
                 imageTransformations: null,
-                imageTransformationsTotal: null
+                imageTransformationsTotal: null,
+                screenshotsGenerated: null,
+                screenshotsGeneratedTotal: null,
+                imagineCredits: null,
+                imagineCreditsTotal: null
             }
         };
     }

src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte

@@ -16,7 +16,9 @@
         | 'authPhoneTotal'
         | 'databasesReads'
         | 'databasesWrites'
-        | 'imageTransformations';
+        | 'imageTransformations'
+        | 'screenshotsGenerated'
+        | 'imagineCredits';
 
     type Estimate = 'authPhoneEstimate';
 
@@ -89,6 +91,8 @@
 
         switch (metric) {
             case 'imageTransformations':
+            case 'screenshotsGenerated':
+            case 'imagineCredits':
             case 'authPhoneTotal':
                 return formatNumberWithCommas(value);
             case 'executions':