Refactor: Usage page to support fine grained client side control of usage data

src/__test__/unit/chart-utils.test.ts

@@ -1,7 +1,5 @@
-import {
-  calculateYAxisMax,
-  transformMetrics,
-} from '@/features/dashboard/sandboxes/monitoring/charts/team-metrics-chart/utils'
+import { transformMetrics } from '@/features/dashboard/sandboxes/monitoring/charts/team-metrics-chart/utils'
+import { calculateAxisMax } from '@/lib/utils/chart'
 import { ClientTeamMetric } from '@/types/sandboxes.types'
 import { describe, expect, it } from 'vitest'
 
@@ -14,29 +12,44 @@ describe('team-metrics-chart-utils', () => {
         { x: 3, y: 60 },
       ]
       // max = 100, scale = 1.25 → 125 → snap to 150
-      expect(calculateYAxisMax(data, 1.25)).toBe(150)
+      expect(
+        calculateAxisMax(
+          data.map((d) => d.y),
+          1.25
+        )
+      ).toBe(150)
     })
 
     it('should use custom scale factor', () => {
       const data = [{ x: 1, y: 100 }]
       // max = 100, scale = 1.5 → 150
-      expect(calculateYAxisMax(data, 1.5)).toBe(150)
+      expect(
+        calculateAxisMax(
+          data.map((d) => d.y),
+          1.5
+        )
+      ).toBe(150)
     })
 
     it('should snap to nice values for different ranges', () => {
       // small values < 10
-      expect(calculateYAxisMax([{ x: 1, y: 5 }], 1.5)).toBe(8) // 7.5 → ceil to 8
+      expect(calculateAxisMax([5], 1.5)).toBe(8) // 7.5 → ceil to 8
 
       // values 10-100
-      expect(calculateYAxisMax([{ x: 1, y: 50 }], 1.5)).toBe(80) // 75 → snap to 80
+      expect(calculateAxisMax([50], 1.5)).toBe(80) // 75 → snap to 80
 
       // values 100-1000
-      expect(calculateYAxisMax([{ x: 1, y: 500 }], 1.5)).toBe(750) // 750 → snap to 750
+      expect(calculateAxisMax([500], 1.5)).toBe(750) // 750 → snap to 750
     })
 
     it('should return default for empty data', () => {
       const data: Array<{ x: number; y: number }> = []
-      expect(calculateYAxisMax(data, 1.25)).toBe(1)
+      expect(
+        calculateAxisMax(
+          data.map((d) => d.y),
+          1.25
+        )
+      ).toBe(1)
     })
   })
 

src/app/dashboard/[teamIdOrSlug]/usage/page.tsx

@@ -1,9 +1,8 @@
-import { CostCard } from '@/features/dashboard/usage/cost-card'
-import { RAMCard } from '@/features/dashboard/usage/ram-card'
-import { SandboxesCard } from '@/features/dashboard/usage/sandboxes-card'
-import { VCPUCard } from '@/features/dashboard/usage/vcpu-card'
+import { UsageChartsProvider } from '@/features/dashboard/usage/usage-charts-context'
+import { UsageMetricChart } from '@/features/dashboard/usage/usage-metric-chart'
 import { resolveTeamIdInServerComponent } from '@/lib/utils/server'
-import { CatchErrorBoundary } from '@/ui/error'
+import { getUsage } from '@/server/usage/get-usage'
+import ErrorBoundary from '@/ui/error'
 import Frame from '@/ui/frame'
 
 export default async function UsagePage({
@@ -14,44 +13,57 @@ export default async function UsagePage({
   const { teamIdOrSlug } = await params
   const teamId = await resolveTeamIdInServerComponent(teamIdOrSlug)
 
-  return (
-    <Frame
-      classNames={{
-        frame:
-          'relative grid max-h-full w-full grid-cols-1 self-start lg:grid-cols-12 max-md:border-none',
-        wrapper: 'w-full max-md:p-0',
-      }}
-    >
-      <SandboxesCard
-        teamId={teamId}
-        className="col-span-1 min-h-[360px] border-b lg:col-span-12"
+  const result = await getUsage({ teamId })
+
+  if (!result?.data || result.serverError || result.validationErrors) {
+    return (
+      <ErrorBoundary
+        error={
+          {
+            name: 'Usage Error',
+            message: result?.serverError ?? 'Failed to load usage data',
+          } satisfies Error
+        }
+        description="Could not load usage data"
       />
-      <UsagePageContent teamId={teamId} />
-    </Frame>
-  )
-}
+    )
+  }
 
-function UsagePageContent({ teamId }: { teamId: string }) {
   return (
-    <CatchErrorBoundary
-      hideFrame
-      classNames={{
-        wrapper: 'col-span-full bg-bg',
-        errorBoundary: 'mx-auto',
-      }}
-    >
-      <CostCard
-        teamId={teamId}
-        className="col-span-1 min-h-[360px] border-b lg:col-span-12"
-      />
-      <VCPUCard
-        teamId={teamId}
-        className="col-span-1 min-h-[360px] border-b lg:col-span-12 lg:border-r"
-      />
-      <RAMCard
-        teamId={teamId}
-        className="col-span-1 min-h-[360px] border-b lg:col-span-12 lg:border-b-0"
-      />
-    </CatchErrorBoundary>
+    <UsageChartsProvider data={result.data}>
+      <div className="flex-1 overflow-y-auto max-h-full min-h-0">
+        <div className="container mx-auto p-0 md:p-8 2xl:p-24 w-full max-w-[1800px]">
+          <Frame
+            classNames={{
+              wrapper: 'w-full lg:h-[75vh] lg:min-h-[700px]',
+              frame: 'lg:h-full max-lg:border-0',
+            }}
+          >
+            <div className="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-2 lg:h-full">
+              <UsageMetricChart
+                metric="sandboxes"
+                className="min-h-[48svh] lg:min-h-0 lg:h-full"
+                timeRangeControlsClassName="flex lg:hidden"
+              />
+              <UsageMetricChart
+                metric="cost"
+                className="min-h-[48svh] lg:min-h-0 lg:h-full"
+                timeRangeControlsClassName="hidden lg:flex"
+              />
+              <UsageMetricChart
+                metric="vcpu"
+                className="min-h-[48svh] lg:min-h-0 lg:h-full lg:border-t lg:border-stroke"
+                timeRangeControlsClassName="flex lg:hidden"
+              />
+              <UsageMetricChart
+                metric="ram"
+                className="min-h-[48svh] lg:min-h-0 lg:h-full lg:border-t lg:border-stroke"
+                timeRangeControlsClassName="hidden"
+              />
+            </div>
+          </Frame>
+        </div>
+      </div>
+    </UsageChartsProvider>
   )
 }

src/configs/layout.ts

@@ -7,6 +7,9 @@ import micromatch from 'micromatch'
 export interface DashboardLayoutConfig {
   title: string
   type: 'default' | 'custom'
+  custom?: {
+    includeHeaderBottomStyles: boolean
+  }
 }
 
 const DASHBOARD_LAYOUT_CONFIGS: Record<string, DashboardLayoutConfig> = {
@@ -24,7 +27,10 @@ const DASHBOARD_LAYOUT_CONFIGS: Record<string, DashboardLayoutConfig> = {
   },
   '/dashboard/*/usage': {
     title: 'Usage',
-    type: 'default',
+    type: 'custom',
+    custom: {
+      includeHeaderBottomStyles: true,
+    },
   },
   '/dashboard/*/members': {
     title: 'Members',

src/features/dashboard/billing/credits-content.tsx

@@ -1,4 +1,4 @@
-import { getUsageThroughReactCache } from '@/server/usage/get-usage'
+import { getUsage } from '@/server/usage/get-usage'
 import ErrorTooltip from '@/ui/error-tooltip'
 import { AlertTriangle } from 'lucide-react'
 
@@ -7,9 +7,10 @@ export default async function BillingCreditsContent({
 }: {
   teamId: string
 }) {
-  const res = await getUsageThroughReactCache({
+  const res = await getUsage({
     teamId,
   })
+
   if (!res?.data || res.serverError) {
     return (
       <ErrorTooltip

src/features/dashboard/layout/header.tsx

@@ -27,6 +27,9 @@ export default function DashboardLayoutHeader({
           'border-b min-h-[var(--height-protected-navbar)+12px] md:min-h-[var(--height-protected-navbar)+24px] max-h-min':
             config.type === 'default',
           '!pb-0 min-h-protected-navbar max-h-min': config.type === 'custom',
+          'border-b !pb-3 md:!pb-6':
+            config.custom?.includeHeaderBottomStyles &&
+            config.type === 'custom',
         },
         className
       )}

src/features/dashboard/layout/wrapper.tsx

@@ -30,7 +30,7 @@ export default function DashboardLayoutWrapper({
   }
 
   return (
-    <div className="flex-1 min-h-0 max-h-dvh w-full max-w-full overflow-hidden">
+    <div className="flex-1 min-h-0 max-h-dvh w-full max-w-full overflow-y-auto md:overflow-hidden">
       <CatchErrorBoundary
         classNames={{
           wrapper: 'h-full w-full',

src/features/dashboard/sandboxes/monitoring/charts/team-metrics-chart/constants.ts

@@ -1,9 +1,5 @@
 import { ChartType, TeamMetricChartConfig } from './types'
 
-/**
- * Static chart configurations by type
- * These never change and can be referenced directly
- */
 export const CHART_CONFIGS: Record<ChartType, TeamMetricChartConfig> = {
   concurrent: {
     id: 'concurrent-sandboxes',
@@ -25,21 +21,4 @@ export const CHART_CONFIGS: Record<ChartType, TeamMetricChartConfig> = {
   },
 }
 
-// echarts static configuration that never changes
-export const STATIC_ECHARTS_CONFIG = {
-  backgroundColor: 'transparent',
-  animation: false,
-  toolbox: {
-    id: 'toolbox',
-    show: true,
-    iconStyle: { opacity: 0 },
-    showTitle: false,
-    feature: {
-      dataZoom: {
-        yAxisIndex: 'none',
-      },
-    },
-  },
-} as const
-
 export const LIVE_PADDING_MULTIPLIER = 1