From de7aad9def6c05f6f28044400b729472ca087508 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Wed, 15 Apr 2026 13:55:13 -0700
Subject: [PATCH] [Feature] UI - Deleted Keys/Teams: Add Enterprise notice
 banner

Show an info banner on the Deleted Keys and Deleted Teams pages for
non-premium users indicating that deleted-record auditing is graduating
from beta into the Enterprise audit & compliance suite.
---
 .../DeletedKeysPage/DeletedKeysPage.tsx       | 32 +++++++++++++------
 .../DeletedTeamsPage/DeletedTeamsPage.tsx     | 24 +++++++++++---
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysPage.tsx b/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysPage.tsx
index 0ca6438a09..3d6389e548 100644
--- a/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysPage.tsx
+++ b/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysPage.tsx
@@ -1,9 +1,12 @@
 "use client";
 import { useState } from "react";
+import { Alert } from "antd";
 import { useDeletedKeys } from "@/app/(dashboard)/hooks/keys/useKeys";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { DeletedKeysTable } from "./DeletedKeysTable/DeletedKeysTable";
 
 export default function DeletedKeysPage() {
+  const { premiumUser } = useAuthorized();
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize] = useState(50);
 
@@ -14,14 +17,25 @@ export default function DeletedKeysPage() {
   } = useDeletedKeys(pageIndex + 1, pageSize);
 
   return (
-    <DeletedKeysTable
-      keys={keysData?.keys || []}
-      totalCount={keysData?.total_count || 0}
-      isLoading={isLoading}
-      isFetching={isFetching}
-      pageIndex={pageIndex}
-      pageSize={pageSize}
-      onPageChange={setPageIndex}
-    />
+    <div className="flex flex-col gap-4">
+      {!premiumUser && (
+        <Alert
+          type="info"
+          banner
+          showIcon
+          message="Coming soon to Enterprise"
+          description="Deleted key auditing is graduating from beta into our Enterprise audit & compliance suite."
+        />
+      )}
+      <DeletedKeysTable
+        keys={keysData?.keys || []}
+        totalCount={keysData?.total_count || 0}
+        isLoading={isLoading}
+        isFetching={isFetching}
+        pageIndex={pageIndex}
+        pageSize={pageSize}
+        onPageChange={setPageIndex}
+      />
+    </div>
   );
 }
diff --git a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsPage.tsx b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsPage.tsx
index d065ba8f29..2b0286b1b0 100644
--- a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsPage.tsx
+++ b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsPage.tsx
@@ -1,8 +1,11 @@
 "use client";
+import { Alert } from "antd";
 import { useDeletedTeams } from "@/app/(dashboard)/hooks/teams/useTeams";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { DeletedTeamsTable } from "./DeletedTeamsTable/DeletedTeamsTable";
 
 export default function DeletedTeamsPage() {
+  const { premiumUser } = useAuthorized();
   const {
     data: teamsData,
     isPending: isLoading,
@@ -10,10 +13,21 @@ export default function DeletedTeamsPage() {
   } = useDeletedTeams(1, 100);
 
   return (
-    <DeletedTeamsTable
-      teams={teamsData || []}
-      isLoading={isLoading}
-      isFetching={isFetching}
-    />
+    <div className="flex flex-col gap-4">
+      {!premiumUser && (
+        <Alert
+          type="info"
+          banner
+          showIcon
+          message="Coming soon to Enterprise"
+          description="Deleted team auditing is graduating from beta into our Enterprise audit & compliance suite."
+        />
+      )}
+      <DeletedTeamsTable
+        teams={teamsData || []}
+        isLoading={isLoading}
+        isFetching={isFetching}
+      />
+    </div>
   );
 }