Skip to content

feat: add screenshots generated metric to billing and usage reports #2798

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lohanidamodar merged 3 commits into from
Jan 21, 2026
Merged

feat: add screenshots generated metric to billing and usage reports #2798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3102716
feat: add screenshots generated metric to billing and usage reports
lohanidamodar Jan 21, 2026
513521f
feat: add screenshots generated metrics to organization usage
lohanidamodar Jan 21, 2026
cace951
feat: add screenshots generated metrics to organization usage
lohanidamodar Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/lib/sdk/billing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,7 @@ export type OrganizationUsage = {
databasesReadsTotal: number;
databasesWritesTotal: number;
imageTransformationsTotal: number;
screenshotsGeneratedTotal: number;
deploymentsStorageTotal: number;
executionsMBSecondsTotal: number;
buildsMBSecondsTotal: number;
Expand All @@ -316,6 +317,7 @@ export type OrganizationUsage = {
authPhoneTotal: number;
authPhoneEstimate: number;
imageTransformations: number;
screenshotsGenerated: number;
}>;
authPhoneTotal: number;
authPhoneEstimate: number;
Expand Down Expand Up @@ -384,6 +386,7 @@ export type Plan = {
bandwidth: number;
storage: number;
imageTransformations: number;
screenshotsGenerated: number;
webhooks: number;
users: number;
teams: number;
Expand Down
6 changes: 6 additions & 0 deletions src/routes/(console)/organization-[organization]/billing/planSummary.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,12 @@
getResource(resources, 'imageTransformations'),
currentPlan?.imageTransformations
),
createResourceRow(
'screenshots-generated',
'Screenshots generated',
getResource(resources, 'screenshotsGenerated'),
currentPlan?.screenshotsGenerated
),
createResourceRow(
'gb-hours',
'GB-hours',
Expand Down
48 changes: 48 additions & 0 deletions src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,6 +322,54 @@
</svelte:fragment>
</CardGrid>

<CardGrid gap="none">
<svelte:fragment slot="title">Screenshots generated</svelte:fragment>
The total number of unique screenshots generated across all projects in your organization.

<svelte:fragment slot="aside">
{#if data.organizationUsage.screenshotsGeneratedTotal}
{@const current = data.organizationUsage.screenshotsGeneratedTotal}
<ProgressBarBig
currentUnit="Screenshots generated"
currentValue={formatNum(current)}
progressValue={current}
showBar={false} />
<BarChart
options={{
yAxis: {
axisLabel: {
formatter: formatNum
}
}
}}
series={[
{
name: 'Screenshots generated',
data: [
...(data.organizationUsage.imageTransformations ?? []).map((e) => [
e.date,
e.value
])
]
}
]} />
Comment on lines +345 to +355
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Bug: Chart uses wrong data source - displays imageTransformations instead of screenshotsGenerated.

The BarChart is mapping data.organizationUsage.imageTransformations instead of data.organizationUsage.screenshotsGenerated. This will display incorrect data in the "Screenshots generated" chart.

🐛 Proposed fix 
                     series={[
                         {
                             name: 'Screenshots generated',
                             data: [
-                                ...(data.organizationUsage.imageTransformations ?? []).map((e) => [
+                                ...(data.organizationUsage.screenshotsGenerated ?? []).map((e) => [
                                     e.date,
                                     e.value
                                 ])
                             ]
                         }
                     ]} />
🤖 Prompt for AI Agents 
In
`@src/routes/`(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
around lines 345 - 355, The BarChart series for "Screenshots generated" is using
the wrong data source; replace references to
data.organizationUsage.imageTransformations with
data.organizationUsage.screenshotsGenerated in the series mapping so the chart
maps (e.date, e.value) from screenshotsGenerated instead of
imageTransformations; update the series object in the component where the chart
is defined (the code creating series={[ { name: 'Screenshots generated', data:
[...] } ]}) to use screenshotsGenerated.

{#if projects?.length > 0}
<ProjectBreakdown {projects} metric="screenshotsGenerated" {usageProjects} />
{/if}
{:else}
<Card isDashed>
<div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
<span
class="icon-chart-square-bar text-large"
aria-hidden="true"
style="font-size: 32px;"></span>
<p class="u-bold">No data to show</p>
</div>
</Card>
{/if}
</svelte:fragment>
</CardGrid>

<CardGrid gap="none">
<svelte:fragment slot="title">Executions</svelte:fragment>
Calculated for all functions that are executed in all projects in your organization.
Expand Down
4 changes: 3 additions & 1 deletion src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ export const load: PageLoad = async ({ params, parent }) => {
databasesReadsTotal: null,
databasesWritesTotal: null,
imageTransformations: null,
imageTransformationsTotal: null
imageTransformationsTotal: null,
screenshotsGenerated: null,
screenshotsGeneratedTotal: null
}
};
}
Expand Down
3 changes: 2 additions & 1 deletion src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
| 'authPhoneTotal'
| 'databasesReads'
| 'databasesWrites'
| 'imageTransformations';
| 'imageTransformations'
| 'screenshotsGenerated';

type Estimate = 'authPhoneEstimate';

Expand Down
40 changes: 40 additions & 0 deletions src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
data.usage.buildsStorageTotal;
$: imageTransformations = data.usage.imageTransformations;
$: imageTransformationsTotal = data.usage.imageTransformationsTotal;
$: screenshotsGenerated = data.usage.screenshotsGenerated;
$: screenshotsGeneratedTotal = data.usage.screenshotsGeneratedTotal;
$: dbReads = data.usage.databasesReads;
$: dbWrites = data.usage.databasesWrites;
Expand Down Expand Up @@ -241,6 +243,44 @@
{/if}
</svelte:fragment>
</CardGrid>
<CardGrid>
<svelte:fragment slot="title">Screenshots generated</svelte:fragment>
Total unique screenshots generated in your project.
<svelte:fragment slot="aside">
{#if screenshotsGenerated}
{@const current = formatNum(screenshotsGeneratedTotal)}
<div class="u-flex u-flex-vertical">
<div class="u-flex u-main-space-between">
<p>
<span class="heading-level-4">{current}</span>
<span class="body-text-1 u-bold">Transformations</span>
</p>
</div>
Comment on lines +252 to +258
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Incorrect label: Shows "Transformations" instead of "Screenshots".

The label text appears to be a copy/paste artifact from the Image transformations section. It should reflect the "Screenshots generated" metric.

✏️ Proposed fix 
                 <div class="u-flex u-flex-vertical">
                     <div class="u-flex u-main-space-between">
                         <p>
                             <span class="heading-level-4">{current}</span>
-                            <span class="body-text-1 u-bold">Transformations</span>
+                            <span class="body-text-1 u-bold">Screenshots</span>
                         </p>
                     </div>
                 </div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div class="u-flex u-flex-vertical">
<div class="u-flex u-main-space-between">
<p>
<span class="heading-level-4">{current}</span>
<span class="body-text-1 u-bold">Transformations</span>
</p>
</div>
<div class="u-flex u-flex-vertical">
<div class="u-flex u-main-space-between">
<p>
<span class="heading-level-4">{current}</span>
<span class="body-text-1 u-bold">Screenshots</span>
</p>
</div>
🤖 Prompt for AI Agents 
In
`@src/routes/`(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
around lines 252 - 258, The label text for the screenshots metric is wrong:
update the hardcoded span that currently reads "Transformations" (near the span
containing {current} in the +page.svelte markup) to "Screenshots generated" so
the UI correctly reflects the screenshots metric; ensure you only change the
visible label string and leave the surrounding structure and the {current}
variable intact.

</div>
<BarChart
options={{
yAxis: {
axisLabel: {
formatter: formatNum
}
}
}}
series={[
{
name: 'Screenshots generated',
data: [...screenshotsGenerated.map((e) => [e.date, e.value])]
}
]} />
{: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>
<CardGrid>
<svelte:fragment slot="title">Executions</svelte:fragment>
Calculated for all functions that are executed in this project.
Expand Down