fix(settings): update usage data in settings > subs to use reactquery hooks

[waleedlatif1]

Summary

• update usage data in settings > subs to use reactquery hooks

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 14, 2025 3:41am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR consolidates usage data fetching in the settings subscription tab by eliminating the redundant useUsageData() hook. Now all usage information (current, limit, percentUsed) comes from subscriptionData.data.usage returned by useSubscriptionData(), while useUsageLimitData() focuses solely on limit metadata (currentLimit, minimumLimit).

Key improvements:

• Single source of truth: Usage data now comes from /api/billing?context=user via useSubscriptionData(), matching the panel usage indicator behavior
• Reduced API calls: Removed duplicate useUsageData() hook, eliminating an unnecessary fetch
• Standardized visualization: New usage-visualization.ts utility provides shared constants (8 pills, colors) and calculation logic (Math.ceil heuristic) for consistent pill displays
• Improved precision: Removed Math.round() calls on percentUsed to preserve decimal values for more accurate visual feedback
• Color consistency: Updated team seats pill color from #4285F4 to #34B5FF to match the standardized cyan color scheme

Confidence Score: 5/5

• Safe to merge - well-structured refactoring that consolidates data fetching and standardizes visualization logic
• The changes are clean refactoring with clear improvements: eliminates duplicate API calls, establishes a single source of truth for usage data, and creates reusable utilities. All data path changes correctly access subscriptionData.data.* fields matching the API response structure. The removal of Math.round() preserves precision while the new shared utilities ensure consistent behavior across components.
• No files require special attention - all changes follow consistent patterns

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/hooks/queries/subscription.ts	5/5	Simplified hook structure by removing duplicate useUsageData() hook - now usage data comes from useSubscriptionData() response, and useUsageLimitData() returns only limit metadata
apps/sim/lib/subscription/usage-visualization.ts	5/5	New shared utility module for usage pill visualization - provides consistent calculation logic (Math.ceil heuristic) and constants (8 pills, colors) across components
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx	4/5	Updated to use single data source (subscriptionData.data) for usage info, removed useUsageData() hook, removed Math.round() calls to preserve decimal precision in percentages

Sequence Diagram

sequenceDiagram
    participant Settings as Settings Modal
    participant Hook1 as useSubscriptionData()
    participant Hook2 as useUsageLimitData()
    participant API1 as /api/billing?context=user
    participant API2 as /api/usage?context=user
    
    Note over Settings,API2: Before: 2 separate API calls
    Settings->>Hook1: Fetch subscription data
    Hook1->>API1: GET request
    API1-->>Hook1: {data: {plan, usage{current, limit, percentUsed}, ...}}
    Settings->>Hook2: Fetch usage data (duplicate)
    Hook2->>API2: GET request
    API2-->>Hook2: {data: {usage{current, limit, percentUsed}}}
    
    Note over Settings,API2: After: Single source of truth
    Settings->>Hook1: Fetch subscription data
    Hook1->>API1: GET request
    API1-->>Hook1: {data: {plan, usage{current, limit, percentUsed}, ...}}
    Settings->>Hook2: Fetch usage limit metadata
    Hook2->>API2: GET request
    API2-->>Hook2: {data: {currentLimit, minimumLimit, canEdit}}
    
    Note over Settings: Usage display uses subscriptionData.data.usage
    Note over Settings: Limit editing uses usageLimitResponse.data

Loading

[greptile-apps]

_{6 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}