From bfc9d8f83696ac875420e40e7b2300bde1c184b3 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 16:58:57 +0000
Subject: [PATCH] feat(ui): UsagePage/EntityUsage/TopKeyView to shadcn

- @heroicons ChevronUp/Down \u2192 lucide ChevronUp/ChevronDown + X.
- @tremor Button pill \u2192 shadcn-styled native <button> with semantic
  blue/muted palette. @tremor BarChart preserved (chart whitelist
  with inline eslint-disable).
- Hand-rolled modal overlay cleaned up (bg-black/50 + bg-background
  + lucide X close icon); tooltip contents use TooltipContent for
  tag hover details. File added to .eslintrc overrides.

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 ui/litellm-dashboard/.eslintrc.json           |   1 +
 .../components/EntityUsage/TopKeyView.tsx     | 162 +++++++++++-------
 2 files changed, 104 insertions(+), 59 deletions(-)

diff --git a/ui/litellm-dashboard/.eslintrc.json b/ui/litellm-dashboard/.eslintrc.json
index 3ec2a72eaad..760b215c757 100644
--- a/ui/litellm-dashboard/.eslintrc.json
+++ b/ui/litellm-dashboard/.eslintrc.json
@@ -68,6 +68,7 @@
         "src/components/mcp_tools/MCPPermissionManagement.tsx",
         "src/components/model_add/credentials.tsx",
         "src/components/model_dashboard/health_check_columns.tsx",
+        "src/components/UsagePage/components/EntityUsage/TopKeyView.tsx",
         "src/components/permissions/VectorStorePermissions.tsx",
         "src/components/permissions/AgentPermissions.tsx",
         "src/components/permissions/MCPServerPermissions.tsx",
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
index 8903f74f232..484aa0fcb18 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
@@ -1,7 +1,15 @@
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/outline";
-import { BarChart, Button } from "@tremor/react";
-import { Segmented, Tooltip } from "antd";
+import { ChevronDown, ChevronUp, X } from "lucide-react";
+// eslint-disable-next-line litellm-ui/no-banned-ui-imports
+import { BarChart } from "@tremor/react";
+import { Segmented } from "antd";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 import React, { useState } from "react";
 import { formatNumberWithCommas } from "../../../../utils/dataUtils";
 import { transformKeyInfo } from "../../../key_team_helpers/transform_key_info";
@@ -11,7 +19,9 @@ import { DataTable } from "../../../view_logs/table";
 import { TagUsage } from "../../types";
 
 interface TopKeyViewProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   topKeys: any[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   teams: any[] | null;
   showTags?: boolean;
   topKeysLimit: number;
@@ -22,6 +32,7 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
   const { accessToken, userRole, userId: userID, premiumUser } = useAuthorized();
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [selectedKey, setSelectedKey] = useState<string | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [keyData, setKeyData] = useState<any | undefined>(undefined);
   const [viewMode, setViewMode] = useState<"chart" | "table">("table");
   const [expandedTags, setExpandedTags] = useState<Set<string>>(new Set());
@@ -38,6 +49,7 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
     });
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleKeyClick = async (item: any) => {
     if (!accessToken) return;
 
@@ -83,24 +95,32 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
     {
       header: "Key ID",
       accessorKey: "api_key",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       cell: (info: any) => (
         <div className="overflow-hidden">
-          <Tooltip title={info.getValue() as string}>
-            <Button
-              size="xs"
-              variant="light"
-              className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate max-w-[200px]"
-              onClick={() => handleKeyClick(info.row.original)}
-            >
-              {info.getValue() ? `${(info.getValue() as string).slice(0, 7)}...` : "-"}
-            </Button>
-          </Tooltip>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 dark:bg-blue-950/30 dark:hover:bg-blue-950/60 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate max-w-[200px] rounded"
+                  onClick={() => handleKeyClick(info.row.original)}
+                >
+                  {info.getValue()
+                    ? `${(info.getValue() as string).slice(0, 7)}...`
+                    : "-"}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>{info.getValue() as string}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
       ),
     },
     {
       header: "Key Alias",
       accessorKey: "key_alias",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       cell: (info: any) => info.getValue() || "-",
     },
   ];
@@ -108,6 +128,7 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
   const tagsColumn = {
     header: "Tags",
     accessorKey: "tags",
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     cell: (info: any) => {
       const tags = info.getValue() as TagUsage[] | undefined;
       const apiKey = info.row.original.api_key;
@@ -125,33 +146,43 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
         <div className="overflow-hidden">
           <div className="flex flex-wrap items-center gap-1">
             {displayTags.map((tag, index) => (
-              <Tooltip
-                key={index}
-                title={
-                  <div>
+              <TooltipProvider key={index}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="px-2 py-1 bg-muted rounded-full text-xs">
+                      {tag.tag.slice(0, 7)}...
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
                     <div>
-                      <span className="text-gray-300">Tag Name:</span> {tag.tag}
+                      <div>
+                        <span className="text-muted-foreground">
+                          Tag Name:
+                        </span>{" "}
+                        {tag.tag}
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">Spend:</span>{" "}
+                        {tag.usage > 0 && tag.usage < 0.01
+                          ? "<$0.01"
+                          : `$${formatNumberWithCommas(tag.usage, 2)}`}
+                      </div>
                     </div>
-                    <div>
-                      <span className="text-gray-300">Spend:</span>{" "}
-                      {tag.usage > 0 && tag.usage < 0.01 ? "<$0.01" : `$${formatNumberWithCommas(tag.usage, 2)}`}
-                    </div>
-                  </div>
-                }
-              >
-                <span className="px-2 py-1 bg-gray-100 rounded-full text-xs">{tag.tag.slice(0, 7)}...</span>
-              </Tooltip>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             ))}
             {hasMoreTags && (
               <button
+                type="button"
                 onClick={() => toggleTagsExpansion(apiKey)}
-                className="ml-1 p-1 hover:bg-gray-200 rounded-full transition-colors"
+                className="ml-1 p-1 hover:bg-muted rounded-full transition-colors"
                 title={isExpanded ? "Show fewer tags" : "Show all tags"}
               >
                 {isExpanded ? (
-                  <ChevronUpIcon className="h-3 w-3 text-gray-500" />
+                  <ChevronUp className="h-3 w-3 text-muted-foreground" />
                 ) : (
-                  <ChevronDownIcon className="h-3 w-3 text-gray-500" />
+                  <ChevronDown className="h-3 w-3 text-muted-foreground" />
                 )}
               </button>
             )}
@@ -164,9 +195,12 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
   const spendColumn = {
     header: "Spend (USD)",
     accessorKey: "spend",
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     cell: (info: any) => {
       const value = info.getValue();
-      return value > 0 && value < 0.01 ? "<$0.01" : `$${formatNumberWithCommas(value, 2)}`;
+      return value > 0 && value < 0.01
+        ? "<$0.01"
+        : `$${formatNumberWithCommas(value, 2)}`;
     },
   };
 
@@ -192,14 +226,26 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
         />
         <div className="flex space-x-2">
           <button
+            type="button"
             onClick={() => setViewMode("table")}
-            className={`px-3 py-1 text-sm rounded-md ${viewMode === "table" ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-700"}`}
+            className={cn(
+              "px-3 py-1 text-sm rounded-md",
+              viewMode === "table"
+                ? "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300"
+                : "bg-muted text-muted-foreground",
+            )}
           >
             Table View
           </button>
           <button
+            type="button"
             onClick={() => setViewMode("chart")}
-            className={`px-3 py-1 text-sm rounded-md ${viewMode === "chart" ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-700"}`}
+            className={cn(
+              "px-3 py-1 text-sm rounded-md",
+              viewMode === "chart"
+                ? "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300"
+                : "bg-muted text-muted-foreground",
+            )}
           >
             Chart View
           </button>
@@ -246,7 +292,7 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
           />
         </div>
       ) : (
-        <div className="border rounded-lg overflow-hidden max-h-[600px] overflow-y-auto">
+        <div className="border border-border rounded-lg overflow-hidden max-h-[600px] overflow-y-auto">
           <DataTable
             columns={columns}
             data={topKeys}
@@ -257,34 +303,32 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
         </div>
       )}
 
-      {isModalOpen &&
-        selectedKey &&
-        keyData &&
-        (console.log("Rendering modal with:", { isModalOpen, selectedKey, keyData }),
-        (
-          <div
-            className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-            onClick={handleOutsideClick}
-          >
-            <div className="bg-white rounded-lg shadow-xl relative w-11/12 max-w-6xl max-h-[90vh] overflow-y-auto min-h-[750px]">
-              {/* Close button */}
-              <button
-                onClick={handleClose}
-                className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 focus:outline-none"
-                aria-label="Close"
-              >
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
+      {isModalOpen && selectedKey && keyData && (
+        <div
+          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+          onClick={handleOutsideClick}
+        >
+          <div className="bg-background rounded-lg shadow-xl relative w-11/12 max-w-6xl max-h-[90vh] overflow-y-auto min-h-[750px]">
+            <button
+              type="button"
+              onClick={handleClose}
+              className="absolute top-4 right-4 text-muted-foreground hover:text-foreground focus:outline-none"
+              aria-label="Close"
+            >
+              <X className="w-6 h-6" />
+            </button>
 
-              {/* Content */}
-              <div className="p-6 h-full">
-                <KeyInfoView keyId={selectedKey} onClose={handleClose} keyData={keyData} teams={teams} />
-              </div>
+            <div className="p-6 h-full">
+              <KeyInfoView
+                keyId={selectedKey}
+                onClose={handleClose}
+                keyData={keyData}
+                teams={teams}
+              />
             </div>
           </div>
-        ))}
+        </div>
+      )}
     </>
   );
 };