fix(usage): drop the redundant organization query param, harden deep links

`organizationId` was accepted and validated on every usage query and read by no
handler — all four map `params.id`, which is also the value that gets authorized.
It could never widen access, but it was an API that read as though the query
mattered. Removed from the shared window schema and from the hooks and export URL
that were sending it.

The client's custom-range guard checked that both bounds were real dates but not
their ordering or their span, while this PR added a 400 for each. A bookmarked link
with reversed or over-long bounds was therefore marked resolved and failed all four
queries, instead of degrading to the default window the guard exists to provide. It
now checks all three conditions the resolver enforces.

The charts' empty state pinned itself to the clamped minimum width, which forced
horizontal overflow in a narrow container — fallout from adding scrolling to the
chart root, which that branch returns before reaching. It takes the container width
now; the floor protects axis labels, and this branch draws none.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: icecrasher321

apps/sim/components/charts/bar-chart.tsx

@@ -151,10 +151,16 @@ function BarChartComponent({
       <div
         ref={containerRef}
         className={cn(
-          'flex items-center justify-center',
+          'flex w-full items-center justify-center',
           !hasExternalWrapper && 'rounded-lg border bg-card p-4'
         )}
-        style={{ width, height }}
+        /*
+          Height only. `width` is floored at CHART_MIN_WIDTH for the plot geometry,
+          and pinning the empty state to it pushed a narrow container into horizontal
+          overflow to centre two words — this branch draws no axes, so it has nothing
+          to protect from compressing.
+        */
+        style={{ height }}
       >
         <p className='text-[var(--text-muted)] text-sm'>No data</p>
       </div>

apps/sim/components/charts/line-chart.tsx

@@ -208,10 +208,16 @@ function LineChartComponent({
     return (
       <div
         className={cn(
-          'flex items-center justify-center',
+          'flex w-full items-center justify-center',
           !hasExternalWrapper && 'rounded-lg border bg-card p-4'
         )}
-        style={{ width, height }}
+        /*
+          Height only. `width` is floored at CHART_MIN_WIDTH for the plot geometry,
+          and pinning the empty state to it pushed a narrow container into horizontal
+          overflow to centre two words — this branch draws no axes, so it has nothing
+          to protect from compressing.
+        */
+        style={{ height }}
       >
         <p className='text-[var(--text-muted)] text-sm'>No data</p>
       </div>

apps/sim/ee/organization-usage/components/usage-monitoring.tsx

@@ -173,8 +173,9 @@ export function UsageMonitoring({ organizationId, workspaceId }: UsageMonitoring
   }
 
   const handleExport = async () => {
+    // The organization is the path segment below; the query no longer carries a
+    // second copy of it.
     const params = new URLSearchParams({
-      organizationId,
       preset: window.preset,
       timezone: window.timezone,
     })

apps/sim/ee/organization-usage/hooks/use-usage-window.ts

@@ -2,7 +2,10 @@
 
 import { useMemo } from 'react'
 import { useQueryStates } from 'nuqs'
-import type { UsageWindowPreset } from '@/lib/api/contracts/organization-usage'
+import {
+  MAX_CUSTOM_RANGE_DAYS,
+  type UsageWindowPreset,
+} from '@/lib/api/contracts/organization-usage'
 import { formatDateShort } from '@/lib/core/utils/date-display'
 import { getBrowserTimezone } from '@/lib/core/utils/timezone'
 import { DEFAULT_USAGE_PRESET, PERIOD_LABELS } from '@/ee/organization-usage/constants'
@@ -12,6 +15,8 @@ import {
 } from '@/ee/organization-usage/search-params'
 import type { OrganizationUsageWindowKey } from '@/hooks/queries/utils/organization-usage-keys'
 
+const DAY_MS = 24 * 60 * 60 * 1000
+
 /** A `YYYY-MM-DD` that survives a calendar round-trip, matching the contract's rule. */
 function isCalendarDate(value: string | null): value is string {
   if (!value) return false
@@ -20,6 +25,23 @@ function isCalendarDate(value: string | null): value is string {
   return new Date(`${datePart}T00:00:00.000Z`).toISOString().slice(0, 10) === datePart
 }
 
+/**
+ * Every rule the window resolver enforces, checked here too.
+ *
+ * The server refuses an unreal date, an inverted pair, and a span past the cap — each
+ * as a 400. A deep link carrying any of them would otherwise be marked "resolved" and
+ * fail all four queries on the page, which is a worse outcome than the fallback this
+ * guard exists to provide. Duplicated deliberately, and narrowly: these are the three
+ * conditions that turn a link into an error rather than into different data.
+ */
+function isUsableCustomRange(start: string | null, end: string | null): boolean {
+  if (!isCalendarDate(start) || !isCalendarDate(end)) return false
+  const from = new Date(`${start.slice(0, 10)}T00:00:00.000Z`).getTime()
+  const to = new Date(`${end.slice(0, 10)}T00:00:00.000Z`).getTime()
+  if (to < from) return false
+  return Math.round((to - from) / DAY_MS) + 1 <= MAX_CUSTOM_RANGE_DAYS
+}
+
 /**
  * The panel's URL state, resolved into the window every query is keyed on.
  *

apps/sim/hooks/queries/organization-usage.ts

@@ -35,7 +35,7 @@ export function useOrganizationUsageSummary(
     queryFn: ({ signal }): Promise<OrganizationUsageSummary> =>
       requestJson(getOrganizationUsageSummaryContract, {
         params: { id: organizationId as string },
-        query: { organizationId: organizationId as string, ...window },
+        query: { ...window },
         signal,
       }),
     enabled: Boolean(organizationId),
@@ -73,7 +73,6 @@ export function useOrganizationUsageBreakdown(
       requestJson(getOrganizationUsageBreakdownContract, {
         params: { id: organizationId as string },
         query: {
-          organizationId: organizationId as string,
           ...window,
           dimension,
           limit,
@@ -99,7 +98,6 @@ export function useOrganizationUsageEvents(
       requestJson(listOrganizationUsageEventsContract, {
         params: { id: organizationId as string },
         query: {
-          organizationId: organizationId as string,
           ...window,
           ...(sources.length ? { source: sources } : {}),
           limit: EVENTS_PAGE_SIZE,

apps/sim/lib/api/contracts/organization-usage.ts

@@ -83,7 +83,13 @@ function usageLimitSchema(max: number, fallback: number) {
  * windows — a mismatch here is how the tiles and the event log would disagree.
  */
 const organizationUsageWindowQuerySchema = z.object({
-  organizationId: organizationIdSchema,
+  /*
+    No `organizationId` here. The organization is the path parameter, and that is the
+    one every handler authorizes and reads. Accepting a second copy in the query meant
+    a request could name one organization and be answered about another — not an
+    authorization hole, since `params.id` is what gets checked, but an API that reads
+    as though the query mattered.
+  */
   preset: usageWindowPresetSchema,
   startDate: isoDateSchema,
   endDate: isoDateSchema,