Frontend adjustments

src/components/dashboard/usage-display.tsx

@@ -91,7 +91,13 @@ function UsageChart({ data }: { data: DailyUsage[] }) {
   );
 }
 
-export function UsageDisplay({ teamId }: { teamId: string | null }) {
+/**
+ * Usage display widget.
+ *
+ * - Customers: don't pass teamId — the backend resolves it from the session.
+ * - Admins inspecting a specific tenant: pass teamId to override.
+ */
+export function UsageDisplay({ teamId }: { teamId?: string | null }) {
   const t = useTranslations("usage");
   const [month, setMonth] = useState(getCurrentMonth);
   const [data, setData] = useState<UsageData | null>(null);
@@ -101,10 +107,15 @@ export function UsageDisplay({ teamId }: { teamId: string | null }) {
   const isCurrentMonth = month === getCurrentMonth();
 
   const fetchUsage = useCallback(() => {
-    if (!teamId) { setLoading(false); return; }
     setLoading(true);
     setError(null);
-    fetch(`/api/usage?teamId=${encodeURIComponent(teamId)}&month=${month}`)
+
+    const params = new URLSearchParams({ month });
+    if (teamId) {
+      params.set("teamId", teamId);
+    }
+
+    fetch(`/api/usage?${params}`)
       .then((res) => { if (!res.ok) throw new Error(`${res.status}`); return res.json(); })
       .then(setData)
       .catch((e) => setError(e.message))
@@ -113,8 +124,6 @@ export function UsageDisplay({ teamId }: { teamId: string | null }) {
 
   useEffect(() => { fetchUsage(); }, [fetchUsage]);
 
-  if (!teamId) return null;
-
   return (
     <div className="space-y-4">
       {/* Month selector */}
@@ -182,4 +191,4 @@ function StatCard({ label, value, accent }: { label: string; value: string; acce
       <div className={`font-display text-lg font-semibold tabular-nums ${accent ? "text-accent" : "text-text-primary"}`}>{value}</div>
     </div>
   );
-}
+}