Platform breakdown on Pulse, cost display on sessions

2026-04-09 21:23:03 -05:00
parent 03d3b72f9b
commit 4ab41d0e38
3 changed files with 55 additions and 1 deletions
@@ -0,0 +1,46 @@
+"use client";
+
+import { useSessions } from "@/lib/hooks";
+import { platformBadgeClass } from "@/lib/utils";
+
+export function PlatformBreakdown() {
+  const { data } = useSessions(50);
+  const items = data?.items || [];
+
+  if (items.length === 0) return null;
+
+  const counts: Record<string, number> = {};
+  for (const s of items) {
+    counts[s.source] = (counts[s.source] || 0) + 1;
+  }
+
+  const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1]);
+  const total = items.length;
+
+  return (
+    <div className="card p-4">
+      <div className="section-label mb-3">Platforms</div>
+      <div className="space-y-2">
+        {sorted.map(([platform, count]) => {
+          const pct = Math.round((count / total) * 100);
+          return (
+            <div key={platform} className="flex items-center gap-3">
+              <span className={`badge ${platformBadgeClass(platform)} w-16 text-center`}>
+                {platform}
+              </span>
+              <div className="flex-1 h-1.5 rounded-full" style={{ background: "var(--border)" }}>
+                <div
+                  className="h-full rounded-full transition-all"
+                  style={{ width: pct + "%", background: "var(--accent)" }}
+                />
+              </div>
+              <span className="text-[11px] font-mono w-8 text-right" style={{ color: "var(--text-3)" }}>
+                {count}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}