From 08ea3c9826458b7230ca6b4835d3fb8b63b59a13 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Tue, 17 Feb 2026 16:08:18 -0800
Subject: [PATCH] Add Type filter to policy templates UI

---
 .../components/policies/policy_templates.tsx  | 59 ++++++++++++++-----
 1 file changed, 43 insertions(+), 16 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/policies/policy_templates.tsx b/ui/litellm-dashboard/src/components/policies/policy_templates.tsx
index f8b3f141248..478293f19ec 100644
--- a/ui/litellm-dashboard/src/components/policies/policy_templates.tsx
+++ b/ui/litellm-dashboard/src/components/policies/policy_templates.tsx
@@ -117,16 +117,25 @@ const PolicyTemplates: React.FC<PolicyTemplatesProps> = ({ onUseTemplate, access
   const [templates, setTemplates] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [selectedRegion, setSelectedRegion] = useState<string>("All");
+  const [selectedType, setSelectedType] = useState<string>("All");
 
   const availableRegions = useMemo(() => {
     const regions = new Set(templates.map(t => t.region || "Global"));
     return ["All", ...Array.from(regions).sort()];
   }, [templates]);
 
+  const availableTypes = useMemo(() => {
+    const types = new Set(templates.map(t => t.type || "General"));
+    return ["All", ...Array.from(types).sort()];
+  }, [templates]);
+
   const filteredTemplates = useMemo(() => {
-    if (selectedRegion === "All") return templates;
-    return templates.filter(t => (t.region || "Global") === selectedRegion);
-  }, [templates, selectedRegion]);
+    return templates.filter(t => {
+      const regionMatch = selectedRegion === "All" || (t.region || "Global") === selectedRegion;
+      const typeMatch = selectedType === "All" || (t.type || "General") === selectedType;
+      return regionMatch && typeMatch;
+    });
+  }, [templates, selectedRegion, selectedType]);
 
   useEffect(() => {
     const fetchTemplates = async () => {
@@ -169,19 +178,37 @@ const PolicyTemplates: React.FC<PolicyTemplatesProps> = ({ onUseTemplate, access
         </div>
       </div>
 
-      <div className="flex items-center gap-3 mb-4">
-        <span className="text-sm font-medium text-gray-700">Region:</span>
-        <Radio.Group
-          value={selectedRegion}
-          onChange={(e) => setSelectedRegion(e.target.value)}
-          buttonStyle="solid"
-        >
-          {availableRegions.map(region => (
-            <Radio.Button key={region} value={region}>
-              {region}
-            </Radio.Button>
-          ))}
-        </Radio.Group>
+      <div className="flex items-center gap-6 mb-4">
+        <div className="flex items-center gap-3">
+          <span className="text-sm font-medium text-gray-700">Region:</span>
+          <Radio.Group
+            value={selectedRegion}
+            onChange={(e) => setSelectedRegion(e.target.value)}
+            buttonStyle="solid"
+          >
+            {availableRegions.map(region => (
+              <Radio.Button key={region} value={region}>
+                {region}
+              </Radio.Button>
+            ))}
+          </Radio.Group>
+        </div>
+        {availableTypes.length > 2 && (
+          <div className="flex items-center gap-3">
+            <span className="text-sm font-medium text-gray-700">Type:</span>
+            <Radio.Group
+              value={selectedType}
+              onChange={(e) => setSelectedType(e.target.value)}
+              buttonStyle="solid"
+            >
+              {availableTypes.map(type => (
+                <Radio.Button key={type} value={type}>
+                  {type}
+                </Radio.Button>
+              ))}
+            </Radio.Group>
+          </div>
+        )}
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">