From 4f3d5190d6621c2b3d5f2fe9b5ceb1bf3add14d5 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Wed, 12 Aug 2026 13:57:09 -0700
Subject: [PATCH] refactor(ui): migrate guardrail and duration controls

---
 ui/litellm-dashboard/eslint-suppressions.json |  8 ---
 .../src/components/GuardrailSettingsView.tsx  | 50 ++++++++-----------
 .../common_components/DurationSelect.tsx      | 22 ++++++--
 3 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json
index 8a86305b4cb..4d7b0d75e76 100644
--- a/ui/litellm-dashboard/eslint-suppressions.json
+++ b/ui/litellm-dashboard/eslint-suppressions.json
@@ -2055,9 +2055,6 @@
   "src/components/GuardrailSettingsView.tsx": {
     "no-nested-ternary": {
       "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "src/components/GuardrailsMonitor/LogViewer.tsx": {
@@ -2649,11 +2646,6 @@
       "count": 1
     }
   },
-  "src/components/common_components/DurationSelect.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/common_components/Filters/FilterInput.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 1
diff --git a/ui/litellm-dashboard/src/components/GuardrailSettingsView.tsx b/ui/litellm-dashboard/src/components/GuardrailSettingsView.tsx
index 95957e845d9..5510eb62bdb 100644
--- a/ui/litellm-dashboard/src/components/GuardrailSettingsView.tsx
+++ b/ui/litellm-dashboard/src/components/GuardrailSettingsView.tsx
@@ -1,6 +1,8 @@
 import React from "react";
-import { Tag } from "antd";
-import { GlobalOutlined } from "@ant-design/icons";
+import { Globe2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/cva.config";
 
 interface GuardrailSettingsViewProps {
   globalGuardrailNames: Set<string>;
@@ -26,40 +28,36 @@ export function GuardrailSettingsView({
   const isEmpty = !killSwitchOn && globalsRunning.length === 0 && nonGlobalOptIns.length === 0;
 
   const content = isEmpty ? (
-    <span className="block text-gray-500">No guardrails configured</span>
+    <span className="block text-muted-foreground">No guardrails configured</span>
   ) : (
     <div className="flex flex-col gap-4">
       <div>
-        <span className="block text-sm font-medium text-gray-700 mb-2">
-          <GlobalOutlined style={{ marginInlineEnd: 4 }} aria-label="Global guardrail" />
+        <span className="mb-2 flex items-center gap-1 text-sm font-medium text-foreground">
+          <Globe2 className="size-4" aria-label="Global guardrail" />
           Global
         </span>
         {killSwitchOn ? (
-          <Tag color="gold">Bypassed for this team</Tag>
+          <Badge variant="outline">Bypassed for this team</Badge>
         ) : globalsRunning.length > 0 ? (
           <div className="flex flex-wrap gap-2">
             {globalsRunning.map((name) => (
-              <Tag key={name} color="blue">
-                {name}
-              </Tag>
+              <Badge key={name}>{name}</Badge>
             ))}
           </div>
         ) : (
-          <span className="block text-sm text-gray-500">None configured</span>
+          <span className="block text-sm text-muted-foreground">None configured</span>
         )}
       </div>
       <div>
-        <span className="block text-sm font-medium text-gray-700 mb-2">Team-specific</span>
+        <span className="mb-2 block text-sm font-medium text-foreground">Team-specific</span>
         {nonGlobalOptIns.length > 0 ? (
           <div className="flex flex-wrap gap-2">
             {nonGlobalOptIns.map((name) => (
-              <Tag key={name} color="blue">
-                {name}
-              </Tag>
+              <Badge key={name}>{name}</Badge>
             ))}
           </div>
         ) : (
-          <span className="block text-sm text-gray-500">None configured</span>
+          <span className="block text-sm text-muted-foreground">None configured</span>
         )}
       </div>
     </div>
@@ -67,23 +65,19 @@ export function GuardrailSettingsView({
 
   if (variant === "card") {
     return (
-      <div className={`bg-white border border-gray-200 rounded-lg p-6 ${className}`}>
-        <div className="flex items-center gap-2 mb-6">
-          <div>
-            <span className="block font-semibold text-gray-900">Guardrails Settings</span>
-            <span className="block text-xs text-gray-500">
-              Global and team-specific guardrails applied to this team
-            </span>
-          </div>
-        </div>
-        {content}
-      </div>
+      <Card className={className}>
+        <CardHeader>
+          <CardTitle>Guardrails Settings</CardTitle>
+          <CardDescription>Global and team-specific guardrails applied to this team</CardDescription>
+        </CardHeader>
+        <CardContent>{content}</CardContent>
+      </Card>
     );
   }
 
   return (
-    <div className={`${className}`}>
-      <span className="block font-medium text-gray-900 mb-3">Guardrails Settings</span>
+    <div className={cn(className)}>
+      <span className="mb-3 block font-medium text-foreground">Guardrails Settings</span>
       {content}
     </div>
   );
diff --git a/ui/litellm-dashboard/src/components/common_components/DurationSelect.tsx b/ui/litellm-dashboard/src/components/common_components/DurationSelect.tsx
index a84e8aeb110..0ac00606355 100644
--- a/ui/litellm-dashboard/src/components/common_components/DurationSelect.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/DurationSelect.tsx
@@ -1,4 +1,4 @@
-import { Select } from "antd";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
 interface DurationSelectProps {
   className?: string;
@@ -8,10 +8,22 @@ interface DurationSelectProps {
 
 export default function DurationSelect({ className, value, onChange }: DurationSelectProps) {
   return (
-    <Select className={className} value={value} onChange={onChange}>
-      <Select.Option value="24h">Daily</Select.Option>
-      <Select.Option value="7d">Weekly</Select.Option>
-      <Select.Option value="30d">Monthly</Select.Option>
+    <Select
+      value={value}
+      onValueChange={(nextValue) => {
+        if (nextValue !== null) {
+          onChange?.(nextValue);
+        }
+      }}
+    >
+      <SelectTrigger className={className}>
+        <SelectValue placeholder="Select duration" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="24h">Daily</SelectItem>
+        <SelectItem value="7d">Weekly</SelectItem>
+        <SelectItem value="30d">Monthly</SelectItem>
+      </SelectContent>
     </Select>
   );
 }