feat: add screenshotsGenerated metrics across console #2543

HarshMN2345 · 2025-11-03T20:13:10Z

What does this PR do?

(Provide a description of what this PR does.)

Test Plan

(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)

Related PRs and Issues

(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)

Have you read the Contributing Guidelines on issues?

(Write your answer here.)

Summary by CodeRabbit

New Features
- Added dashboard and billing surface support for "Screenshots generated" across plan summaries, organization and project usage pages, progress bars, charts, and per-project breakdowns.
Chores
- Added a new runtime dependency: "install" ^0.13.0.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

appwrite · 2025-11-03T20:13:14Z

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

Site	Status	Logs	Preview	QR
console-stage `688b7cf6003b1842c9dc`	Ready	View Logs	Preview URL

Tip

Every Git commit and branch gets its own deployment URL automatically

coderabbitai · 2025-11-03T20:13:23Z

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This pull request adds a new resource metric, screenshotsGenerated, across billing and usage surfaces. SDK types (OrganizationUsage, Plan, UsageProject) now include screenshotsGenerated arrays and totals; PlanServices union gains 'screenshotsGenerated'. UI pages (organization and project usage, plan summary, project breakdown) render the new metric and reuse existing formatting/progress logic. package.json adds a new dependency "install": "^0.13.0". No control-flow or error-handling behavior was changed.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Files requiring focused review:
- src/lib/sdk/billing.ts — new fields in public types and nested project entries
- src/lib/sdk/usage.ts — UsageProject type additions
- src/lib/stores/billing.ts — PlanServices union change
- src/routes/(console)/organization-[organization]/billing/planSummary.svelte — data mapping and new resource row
- src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte and +page.ts — UI block and early-return placeholder fields
- src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte — Metric type and formatting logic
- src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte — project-level UI block
- package.json — added install dependency
Attention points:
- Ensure type shapes for screenshotsGenerated are consistent across SDK, stores, and UI mappings
- Verify chart/legend and formatting logic treats screenshotsGenerated like analogous metrics
- Confirm plan limit lookups (e.g., currentPlan?.screenshotsGenerated) handle null/undefined and Unlimited cases correctly

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding a new screenshotsGenerated metric across the console application, which is reflected throughout all modified files.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c5fd02a and b7e99ba.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (9)

package.json (1 hunks)
src/lib/sdk/billing.ts (4 hunks)
src/lib/sdk/usage.ts (1 hunks)
src/lib/stores/billing.ts (1 hunks)
src/routes/(console)/organization-[organization]/billing/planSummary.svelte (2 hunks)
src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte (1 hunks)
src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts (1 hunks)
src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte (2 hunks)
src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte (2 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-09-26T06:48:57.938Z

Learnt from: ItzNotABug
Repo: appwrite/console PR: 2373
File: src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte:629-631
Timestamp: 2025-09-26T06:48:57.938Z
Learning: In the Appwrite console codebase using appwrite.io/pink-svelte, the Icon component automatically handles CSS variable names passed to its color prop by internally wrapping them with var(). Therefore, passing '--some-css-variable' as a string to the Icon color prop works correctly without needing to manually wrap it with var().

Applied to files:

package.json

🧬 Code graph analysis (1)

src/lib/sdk/billing.ts (1)

src/lib/sdk/usage.ts (1)

Metric (21-30)

🪛 ESLint

src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte

[error] 33-33: Unexpected any. Specify a different type.

(@typescript-eslint/no-explicit-any)

[error] 34-34: Unexpected any. Specify a different type.

(@typescript-eslint/no-explicit-any)

🔇 Additional comments (10)

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

37-39: LGTM! Consistent with existing temporary fix pattern.

The new fields are correctly initialized to null in the early-return path, matching the pattern used for other metrics like imageTransformationsTotal.

src/lib/stores/billing.ts (1)

153-154: LGTM! Service type extension is correct.

The addition of 'screenshotsGenerated' to the PlanServices union follows the existing pattern and enables the new metric to be used with getServiceLimit().

src/lib/sdk/usage.ts (1)

336-344: LGTM! Type definitions follow established pattern.

The new screenshotsGenerated and screenshotsGeneratedTotal fields mirror the structure of imageTransformations, maintaining consistency in the data model.

package.json (1)

25-25: Dependency update noted.

Package version updated to support the new screenshotsGenerated metric feature.

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

19-20: LGTM! Metric handling is consistent.

The addition of 'screenshotsGenerated' to the Metric type and its formatting logic correctly mirrors the imageTransformations implementation, using formatNumberWithCommas for display.

Also applies to: 93-93

src/lib/sdk/billing.ts (1)

295-295: LGTM! Comprehensive metric integration.

The new screenshotsGenerated metric is properly integrated across all billing data structures:

Organization-level metrics and totals

Per-project tracking

Plan limits and usage pricing

All additions follow the established pattern from imageTransformations.

Also applies to: 302-302, 321-321, 390-390, 418-418

src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte (1)

246-283: LGTM! UI implementation follows established patterns.

The new "Screenshots generated" CardGrid section correctly mirrors the structure of other usage metrics, including the chart visualization and "No data to show" fallback state.

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

325-370: LGTM! Organization usage section is well-implemented.

The new "Screenshots generated" section correctly integrates with the billing system, including:

Progress bar with current usage and plan limits

Bar chart visualization

Project breakdown for detailed analysis

Proper conditional rendering for empty states

The implementation is consistent with other usage metrics in the file.

src/routes/(console)/organization-[organization]/billing/planSummary.svelte (2)

130-132: LGTM! Resource mapping follows established pattern.

The addition of screenshotsGenerated to the resource mapping is consistent with how other metrics (executions, imageTransformations, etc.) are handled.

286-298: LGTM! Billing row implementation is consistent and complete.

The screenshots generated metric row correctly implements:

Formatted usage display with current/limit values

Currency formatting for pricing

Progress bar visualization

Proper handling of unlimited plans

The implementation mirrors the pattern used for other metrics like image transformations, ensuring UI consistency.

src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte

…billing-metrics-console

ItzNotABug · 2025-12-07T12:05:52Z

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

+                        'screenshots-generated',
+                        'Screenshots generated',


all the ids and text that are passed to createResourceRow are always same and only separated by -. We should just infer the text from the id in that case like -

createResourceRow( 'screenshots-generated', // simply replace `-` with a ` ` and making the first char uppercased getResource(resources, 'screenshotsGenerated'), currentPlan?.screenshotsGenerated ),

ItzNotABug · 2025-12-07T12:06:38Z

package.json

        "deep-equal": "^2.2.3",
        "echarts": "^5.6.0",
        "ignore": "^6.0.2",
+        "install": "^0.13.0",


whats this for?

lohanidamodar

Some comments.

lohanidamodar · 2025-12-07T12:44:03Z

src/lib/sdk/billing.ts

we should instead start using the generated SDK, it should already have these

lohanidamodar · 2025-12-07T12:44:31Z

src/lib/sdk/usage.ts

Same as above, generated SDK should have these.

add screenshotsGenerated metric across console

b7e99ba

HarshMN2345 mentioned this pull request Nov 3, 2025

Feat: add screenshotsGenerated metric across console #2542

Closed

coderabbitai bot reviewed Nov 3, 2025

View reviewed changes

src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte Outdated Show resolved Hide resolved

HarshMN2345 and others added 3 commits November 3, 2025 20:17

pnpm lockfile

80fb7f6

package upgrade

930d0fb

Refactor usage data handling for screenshots generated

1af8a32

HarshMN2345 requested review from Meldiron and lohanidamodar November 4, 2025 08:42

HarshMN2345 added 2 commits December 7, 2025 10:59

Merge remote-tracking branch 'origin/main' into feat-screenshots-api-…

524336d

…billing-metrics-console

broken lockfile fix

53b9707

ItzNotABug requested changes Dec 7, 2025

View reviewed changes

lohanidamodar reviewed Dec 7, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add screenshotsGenerated metrics across console #2543

feat: add screenshotsGenerated metrics across console #2543

HarshMN2345 commented Nov 3, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

appwrite bot commented Nov 3, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 3, 2025 •

edited

Loading

Review skipped

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

ItzNotABug Dec 7, 2025

Uh oh!

ItzNotABug Dec 7, 2025

Uh oh!

lohanidamodar left a comment

Uh oh!

lohanidamodar Dec 7, 2025

Uh oh!

lohanidamodar Dec 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat: add screenshotsGenerated metrics across console #2543

Are you sure you want to change the base?

feat: add screenshotsGenerated metrics across console #2543

Conversation

HarshMN2345 commented Nov 3, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Test Plan

Related PRs and Issues

Have you read the Contributing Guidelines on issues?

Summary by CodeRabbit

Uh oh!

appwrite bot commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Console (appwrite/console)

Uh oh!

coderabbitai bot commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ItzNotABug Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

ItzNotABug Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

lohanidamodar left a comment

Choose a reason for hiding this comment

Uh oh!

lohanidamodar Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

lohanidamodar Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

HarshMN2345 commented Nov 3, 2025 •

edited by coderabbitai bot

Loading

appwrite bot commented Nov 3, 2025 •

edited

Loading

coderabbitai bot commented Nov 3, 2025 •

edited

Loading