fix(analytics): resolve account email/name in Utilization chart and fix tooltip stacking context (#13029)

Co-authored-by: ZaimMarzuki <ZaimMarzuki@users.noreply.github.com>

src/app/(dashboard)/dashboard/analytics/ProviderUtilizationTab.tsx

@@ -172,6 +172,25 @@ export default function ProviderUtilizationTab() {
 
   const latestPoints = useMemo(() => getLatestPoints(data?.data ?? []), [data?.data]);
 
+  const resolveDisplayName = useCallback(
+    (key: string) => {
+      const colonIdx = key.indexOf(":");
+      const isConnectionKey = aggregateBy === "connection" && colonIdx !== -1;
+      if (isConnectionKey) {
+        const connectionId = key.slice(colonIdx + 1);
+        const connMeta = data?.connectionMeta?.[connectionId];
+        return getAccountDisplayName({
+          id: connectionId,
+          email: connMeta?.email,
+          name: connMeta?.name,
+          displayName: connMeta?.displayName,
+        });
+      }
+      return resolveProviderName(key, nodeMap);
+    },
+    [aggregateBy, data?.connectionMeta, nodeMap]
+  );
+
   const hasData = Boolean(data?.data.length);
   const [retrying, setRetrying] = useState(false);
 
@@ -303,7 +322,7 @@ export default function ProviderUtilizationTab() {
               providers={data?.providers ?? []}
               providerColors={providerColors}
               range={range}
-              resolveProviderName={resolveProviderName}
+              resolveProviderName={resolveDisplayName}
               nodeMap={nodeMap}
               formatTimestamp={formatTimestamp}
               formatPercent={formatPercent}
@@ -321,15 +340,7 @@ export default function ProviderUtilizationTab() {
                   ? point.provider.slice(0, colonIdx)
                   : point.provider;
                 const connectionId = isConnectionKey ? point.provider.slice(colonIdx + 1) : null;
-                const connMeta = connectionId ? data?.connectionMeta?.[connectionId] : null;
-                const cardTitle = isConnectionKey
-                  ? getAccountDisplayName({
-                      id: connectionId ?? undefined,
-                      email: connMeta?.email,
-                      name: connMeta?.name,
-                      displayName: connMeta?.displayName,
-                    })
-                  : resolveProviderName(point.provider, nodeMap);
+                const cardTitle = resolveDisplayName(point.provider);
                 const cardSubtitle = isConnectionKey
                   ? `${providerPart} · account ${(connectionId ?? "").slice(0, 8)}…`
                   : t("providerUtilizationLatestSnapshot");

src/app/(dashboard)/dashboard/analytics/components/ProviderCharts.tsx

@@ -55,7 +55,9 @@ export default function ProviderCharts({
             tickLine={{ stroke: "var(--color-border)" }}
             width={44}
           />
+          <Legend />
           <Tooltip
+            wrapperStyle={{ zIndex: 1000, pointerEvents: "none" }}
             labelFormatter={(value) => formatTooltipTimestamp(String(value), range)}
             formatter={(value: number, name: string) => [formatPercent(value), name]}
             contentStyle={{
@@ -63,12 +65,12 @@ export default function ProviderCharts({
               borderColor: "var(--color-border)",
               borderRadius: 12,
               color: "var(--color-text-main)",
-              boxShadow: "var(--shadow-soft)",
+              boxShadow: "var(--shadow-elevated)",
+              opacity: 1,
             }}
             itemStyle={{ color: "var(--color-text-main)" }}
             labelStyle={{ color: "var(--color-text-main)", fontWeight: 600 }}
           />
-          <Legend />
           {providers.map((provider) => (
             <Line
               key={provider}