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

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

diff --git a/ui/litellm-dashboard/src/components/routing_groups/RoutingGroupsView.tsx b/ui/litellm-dashboard/src/components/routing_groups/RoutingGroupsView.tsx
new file mode 100644
index 00000000000..3d620b5d340
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/routing_groups/RoutingGroupsView.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button, Divider, Typography } from "antd";
+import { PlusOutlined, CloseOutlined } from "@ant-design/icons";
+import RoutingGroupsTable from "./RoutingGroupsTable";
+import RoutingGroupBuilder from "./RoutingGroupBuilder";
+import LiveTester from "./LiveTester";
+
+interface RoutingGroupsViewProps {
+  accessToken: string | null;
+  userRole: string;
+  userId: string;
+}
+
+export default function RoutingGroupsView({
+  accessToken,
+  userRole,
+  userId,
+}: RoutingGroupsViewProps) {
+  const [createModalVisible, setCreateModalVisible] = useState(false);
+  const [editTarget, setEditTarget] = useState<Record<string, unknown> | null>(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [selectedGroup, setSelectedGroup] = useState<Record<string, unknown> | null>(null);
+
+  const handleEdit = (group: Record<string, unknown>) => {
+    setEditTarget(group);
+    setCreateModalVisible(true);
+  };
+
+  const handleTest = (group: Record<string, unknown>) => {
+    setSelectedGroup(group);
+  };
+
+  const handleClose = () => {
+    setCreateModalVisible(false);
+    setEditTarget(null);
+  };
+
+  const handleSuccess = () => {
+    setCreateModalVisible(false);
+    setEditTarget(null);
+    setRefreshKey((k) => k + 1);
+  };
+
+  return (
+    <div className="w-full mx-4">
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <Typography.Title level={4} style={{ margin: 0 }}>
+            Routing Groups
+          </Typography.Title>
+          <Typography.Text type="secondary">
+            Configure named routing pipelines with fallback strategies
+          </Typography.Text>
+        </div>
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={() => setCreateModalVisible(true)}
+        >
+          Create Routing Group
+        </Button>
+      </div>
+
+      <RoutingGroupsTable
+        accessToken={accessToken}
+        refreshKey={refreshKey}
+        onEdit={handleEdit}
+        onTest={handleTest}
+      />
+
+      {selectedGroup && accessToken && (
+        <>
+          <Divider />
+          <div className="flex items-center justify-between mb-4">
+            <Typography.Text type="secondary" className="text-sm">
+              Testing:{" "}
+              <span className="font-mono font-semibold">
+                {selectedGroup.routing_group_name as string}
+              </span>
+            </Typography.Text>
+            <Button
+              size="small"
+              icon={<CloseOutlined />}
+              onClick={() => setSelectedGroup(null)}
+              style={{ color: "#64748b", borderColor: "#334155" }}
+            >
+              Close
+            </Button>
+          </div>
+          <LiveTester
+            accessToken={accessToken}
+            routingGroupId={selectedGroup.routing_group_id as string}
+            routingGroupName={selectedGroup.routing_group_name as string}
+            routingStrategy={(selectedGroup.routing_strategy as string) ?? "weighted"}
+          />
+        </>
+      )}
+
+      {createModalVisible && (
+        <RoutingGroupBuilder
+          accessToken={accessToken}
+          visible={createModalVisible}
+          editTarget={editTarget}
+          onClose={handleClose}
+          onSuccess={handleSuccess}
+        />
+      )}
+    </div>
+  );
+}