OneLiteLLM team per company+virt keys

src/components/dashboard/usage-display.tsx

@@ -94,10 +94,20 @@ function UsageChart({ data }: { data: DailyUsage[] }) {
 /**
  * Usage display widget.
  *
- * - Customers: don't pass teamId — the backend resolves it from the session.
- * - Admins inspecting a specific tenant: pass teamId to override.
+ * - Customers: don't pass teamId or keyAlias — the backend resolves both
+ *   from the session-bound tenant.
+ * - Admins inspecting a specific tenant: pass `teamId` (the org-level
+ *   LiteLLM team id) AND `keyAlias` (the tenant's virtual-key alias).
+ *   Without `keyAlias`, the response includes spend from sibling tenants
+ *   in the same org, since teams are shared since Slice 2.
  */
-export function UsageDisplay({ teamId }: { teamId?: string | null }) {
+export function UsageDisplay({
+  teamId,
+  keyAlias,
+}: {
+  teamId?: string | null;
+  keyAlias?: string | null;
+}) {
   const t = useTranslations("usage");
   const [month, setMonth] = useState(getCurrentMonth);
   const [data, setData] = useState<UsageData | null>(null);
@@ -114,13 +124,16 @@ export function UsageDisplay({ teamId }: { teamId?: string | null }) {
     if (teamId) {
       params.set("teamId", teamId);
     }
+    if (keyAlias) {
+      params.set("keyAlias", keyAlias);
+    }
 
     fetch(`/api/usage?${params}`)
       .then((res) => { if (!res.ok) throw new Error(`${res.status}`); return res.json(); })
       .then(setData)
       .catch((e) => setError(e.message))
       .finally(() => setLoading(false));
-  }, [teamId, month]);
+  }, [teamId, keyAlias, month]);
 
   useEffect(() => { fetchUsage(); }, [fetchUsage]);