From 13b37f634fd5822f1993eef4d2c09b84056406cd Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Sat, 28 Feb 2026 18:00:38 -0800
Subject: [PATCH] feat(ui): add StatsBar component

---
 .../components/routing_groups/StatsBar.tsx    | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/components/routing_groups/StatsBar.tsx

diff --git a/ui/litellm-dashboard/src/components/routing_groups/StatsBar.tsx b/ui/litellm-dashboard/src/components/routing_groups/StatsBar.tsx
new file mode 100644
index 00000000000..62973925ae7
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/routing_groups/StatsBar.tsx
@@ -0,0 +1,29 @@
+"use client";
+import React from "react";
+
+interface StatsBarProps {
+  requests: number;
+  successRate: number;    // 0-100
+  avgLatencyMs: number;
+  fallbackCount: number;
+}
+
+export default function StatsBar({ requests, successRate, avgLatencyMs, fallbackCount }: StatsBarProps) {
+  const stats = [
+    { label: "REQUESTS", value: requests.toLocaleString() },
+    { label: "SUCCESS", value: `${Math.round(successRate)}%` },
+    { label: "AVG LATENCY", value: avgLatencyMs > 0 ? `${Math.round(avgLatencyMs)}ms` : "—" },
+    { label: "FALLBACKS", value: fallbackCount.toLocaleString() },
+  ];
+
+  return (
+    <div className="grid grid-cols-4 divide-x divide-gray-700 rounded-xl border border-gray-700 bg-[#1a1f2e] px-0">
+      {stats.map(({ label, value }) => (
+        <div key={label} className="flex flex-col items-start gap-1 px-6 py-4">
+          <span className="text-xs font-medium uppercase tracking-widest text-gray-500">{label}</span>
+          <span className="text-2xl font-bold text-white">{value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}