From 896b3683d92a746465175554c5e5cb9df4fc72c7 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Mon, 16 Feb 2026 14:09:17 -0800
Subject: [PATCH] Add region filter to policy templates UI

- Added Radio.Group filter for regions (All, AU, EU, Global)
- Efficient filtering with useMemo hooks
- Clean button-based UI matching existing design
- Defaults missing regions to Global
---
 .../components/policies/policy_templates.tsx  | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/policies/policy_templates.tsx b/ui/litellm-dashboard/src/components/policies/policy_templates.tsx
index 588fca80923..f8b3f141248 100644
--- a/ui/litellm-dashboard/src/components/policies/policy_templates.tsx
+++ b/ui/litellm-dashboard/src/components/policies/policy_templates.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import { Card, Button, Spin, message } from "antd";
+import React, { useState, useEffect, useMemo } from "react";
+import { Card, Button, Spin, message, Radio } from "antd";
 import {
   ShieldCheckIcon,
   ShieldExclamationIcon,
@@ -116,6 +116,17 @@ const iconMap: Record<string, React.ComponentType<React.SVGProps<SVGSVGElement>>
 const PolicyTemplates: React.FC<PolicyTemplatesProps> = ({ onUseTemplate, accessToken }) => {
   const [templates, setTemplates] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [selectedRegion, setSelectedRegion] = useState<string>("All");
+
+  const availableRegions = useMemo(() => {
+    const regions = new Set(templates.map(t => t.region || "Global"));
+    return ["All", ...Array.from(regions).sort()];
+  }, [templates]);
+
+  const filteredTemplates = useMemo(() => {
+    if (selectedRegion === "All") return templates;
+    return templates.filter(t => (t.region || "Global") === selectedRegion);
+  }, [templates, selectedRegion]);
 
   useEffect(() => {
     const fetchTemplates = async () => {
@@ -158,8 +169,23 @@ 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>
+
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-        {templates.map((template, index) => (
+        {filteredTemplates.map((template, index) => (
           <PolicyTemplateCard
             key={template.id || index}
             title={template.title}