build(ui): fix admin viewer issue

ui/litellm-dashboard/src/app/page.tsx

@@ -41,6 +41,9 @@ const CreateKeyPage = () => {
           const formattedUserRole = formatUserRole(decoded.user_role);
           console.log("Decoded user_role:", formattedUserRole);
           setUserRole(formattedUserRole);
+          if (formattedUserRole == "Admin Viewer") {
+            setPage("usage");
+          }
         } else {
           console.log("User role not defined");
         }
@@ -66,7 +69,8 @@ const CreateKeyPage = () => {
     if (!userRole) {
       return "Undefined Role";
     }
-    console.log(`Received user role: ${userRole}`);
+    console.log(`Received user role: ${userRole.toLowerCase()}`);
+    console.log(`Received user role length: ${userRole.toLowerCase().length}`);
     switch (userRole.toLowerCase()) {
       case "app_owner":
         return "App Owner";

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

@@ -16,6 +16,25 @@ const Sidebar: React.FC<SidebarProps> = ({
   userRole,
   defaultSelectedKey,
 }) => {
+  if (userRole == "Admin Viewer") {
+    return (
+      <Layout style={{ minHeight: "100vh", maxWidth: "120px" }}>
+        <Sider width={120}>
+          <Menu
+            mode="inline"
+            defaultSelectedKeys={
+              defaultSelectedKey ? defaultSelectedKey : ["1"]
+            }
+            style={{ height: "100%", borderRight: 0 }}
+          >
+            <Menu.Item key="1" onClick={() => setPage("usage")}>
+              Usage
+            </Menu.Item>
+          </Menu>
+        </Sider>
+      </Layout>
+    );
+  }
   return (
     <Layout style={{ minHeight: "100vh", maxWidth: "120px" }}>
       <Sider width={120}>

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

@@ -175,7 +175,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
            * If user is App Owner - use the normal spend logs call
            */
           console.log(`user role: ${userRole}`);
-          if (userRole == "Admin") {
+          if (userRole == "Admin" || userRole == "Admin Viewer") {
             const overall_spend = await adminSpendLogsCall(accessToken);
             setKeySpendData(overall_spend);
             const top_keys = await adminTopKeysCall(accessToken);

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

@@ -73,6 +73,10 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
         return "App Owner";
       case "app_admin":
         return "Admin";
+      case "proxy_admin":
+        return "Admin";
+      case "proxy_admin_viewer":
+        return "Admin Viewer";
       case "app_user":
         return "App User";
       default: