working modal

ui/litellm-dashboard/src/components/key_page_wrapper.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import TopKeyView from "./top_key_view";
+import KeyInfoView from "./key_info_view";
+import { KeyResponse } from "./key_team_helpers/key_list";
+
+interface KeyPageWrapperProps {
+  topKeys: any[];
+  accessToken: string | null;
+  userID: string | null;
+  userRole: string | null;
+  teams: any[] | null;
+}
+
+const KeyPageWrapper: React.FC<KeyPageWrapperProps> = ({
+  topKeys,
+  accessToken,
+  userID,
+  userRole,
+  teams,
+}) => {
+  const [selectedKeyData, setSelectedKeyData] = useState<KeyResponse | null>(null);
+
+  if (selectedKeyData) {
+    return (
+      <div className="h-full w-full">
+        <KeyInfoView
+          keyId={selectedKeyData.token}
+          keyData={selectedKeyData}
+          onClose={() => setSelectedKeyData(null)}
+          accessToken={accessToken}
+          userID={userID}
+          userRole={userRole}
+          teams={teams}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <TopKeyView
+      topKeys={topKeys}
+      accessToken={accessToken}
+      userID={userID}
+      userRole={userRole}
+      onKeySelect={setSelectedKeyData}
+    />
+  );
+};
+
+export default KeyPageWrapper; 

ui/litellm-dashboard/src/components/top_key_view.tsx

@@ -19,58 +19,63 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({
   userRole,
   teams
 }) => {
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [selectedKey, setSelectedKey] = useState<string | null>(null);
   const [keyData, setKeyData] = useState<any | undefined>(undefined);
 
   const handleKeyClick = async (item: any) => {
     if (!accessToken) return;
     
-    console.log("Clicked item:", item);
     try {
-      // Use item.key instead of item.api_key
       const keyInfo = await keyInfoV1Call(accessToken, item.api_key);
       const transformedKeyData = transformKeyInfo(keyInfo);
       setKeyData(transformedKeyData);
       setSelectedKey(item.key);
+      setIsModalOpen(true);  // Open modal when key is clicked
     } catch (error) {
       console.error("Error fetching key info:", error);
     }
   };
 
   const handleClose = () => {
+    setIsModalOpen(false);
     setSelectedKey(null);
     setKeyData(undefined);
   };
 
-  if (selectedKey && keyData) {
-    return (
-      <KeyInfoView
-        keyId={selectedKey}
-        onClose={handleClose}
-        keyData={keyData}
-        accessToken={accessToken}
-        userID={userID}
-        userRole={userRole}
-        teams={teams}
-      />
-    );
-  }
-
   return (
-    <BarChart
-      className="mt-4 h-40 cursor-pointer"
-      data={topKeys}
-      index="key"
-      categories={["spend"]}
-      colors={["cyan"]}
-      yAxisWidth={80}
-      tickGap={5}
-      layout="vertical"
-      showXAxis={false}
-      showLegend={false}
-      valueFormatter={(value) => `$${value.toFixed(2)}`}
-      onValueChange={(item) => handleKeyClick(item)}
-    />
+    <>
+      <BarChart
+        className="mt-4 h-40 cursor-pointer"
+        data={topKeys}
+        index="key"
+        categories={["spend"]}
+        colors={["cyan"]}
+        yAxisWidth={80}
+        tickGap={5}
+        layout="vertical"
+        showXAxis={false}
+        showLegend={false}
+        valueFormatter={(value) => `$${value.toFixed(2)}`}
+        onValueChange={(item) => handleKeyClick(item)}
+      />
+
+      {isModalOpen && selectedKey && keyData && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-11/12 max-w-6xl max-h-[90vh] overflow-y-auto">
+            <KeyInfoView
+              keyId={selectedKey}
+              onClose={handleClose}
+              keyData={keyData}
+              accessToken={accessToken}
+              userID={userID}
+              userRole={userRole}
+              teams={teams}
+            />
+          </div>
+        </div>
+      )}
+    </>
   );
 };