Easier user onboarding via SSO (#8187)

* fix(ui_sso.py): use common `get_user_object` logic across jwt + ui sso auth

Allows finding users by their email, and attaching the sso user id to the user if found

* Improve Team Management flow on UI  (#8204)

* build(teams.tsx): refactor teams page to make it easier to add members to a team

make a row in table clickable -> allows user to add users to team they intended

* build(teams.tsx): make it clear user should click on team id to view team details

simplifies team management by putting team details on separate page

* build(team_info.tsx): separately show user id and user email

make it easy for user to understand the information they're seeing

* build(team_info.tsx): add back in 'add member' button

* build(team_info.tsx): working team member update on team_info.tsx

* build(team_info.tsx): enable team member delete on ui

allow user to delete accidental adds

* build(internal_user_endpoints.py): expose new endpoint for ui to allow filtering on user table

allows proxy admin to quickly find user they're looking for

* feat(team_endpoints.py): expose new team filter endpoint for ui

allows proxy admin to easily find team they're looking for

* feat(user_search_modal.tsx): allow admin to filter on users when adding new user to teams

* test: mark flaky test

* test: mark flaky test

* fix(exception_mapping_utils.py): fix anthropic text route error

* fix(ui_sso.py): handle situation when user not in db

litellm/litellm_core_utils/exception_mapping_utils.py

@@ -14,6 +14,7 @@ from ..exceptions import (
     BadRequestError,
     ContentPolicyViolationError,
     ContextWindowExceededError,
+    InternalServerError,
     NotFoundError,
     PermissionDeniedError,
     RateLimitError,
@@ -467,7 +468,10 @@ def exception_type(  # type: ignore  # noqa: PLR0915
                             method="POST", url="https://api.openai.com/v1/"
                         ),
                     )
-            elif custom_llm_provider == "anthropic":  # one of the anthropics
+            elif (
+                custom_llm_provider == "anthropic"
+                or custom_llm_provider == "anthropic_text"
+            ):  # one of the anthropics
                 if "prompt is too long" in error_str or "prompt: length" in error_str:
                     exception_mapping_worked = True
                     raise ContextWindowExceededError(
@@ -475,6 +479,13 @@ def exception_type(  # type: ignore  # noqa: PLR0915
                         model=model,
                         llm_provider="anthropic",
                     )
+                elif "overloaded_error" in error_str:
+                    exception_mapping_worked = True
+                    raise InternalServerError(
+                        message="AnthropicError - {}".format(error_str),
+                        model=model,
+                        llm_provider="anthropic",
+                    )
                 if "Invalid API Key" in error_str:
                     exception_mapping_worked = True
                     raise AuthenticationError(

litellm/proxy/management_endpoints/internal_user_endpoints.py

@@ -926,3 +926,81 @@ async def add_internal_user_to_organization(
         return new_membership
     except Exception as e:
         raise Exception(f"Failed to add user to organization: {str(e)}")
+
+
+@router.get(
+    "/user/filter/ui",
+    tags=["Internal User management"],
+    dependencies=[Depends(user_api_key_auth)],
+    include_in_schema=False,
+    responses={
+        200: {"model": List[LiteLLM_UserTable]},
+    },
+)
+async def ui_view_users(
+    user_id: Optional[str] = fastapi.Query(
+        default=None, description="User ID in the request parameters"
+    ),
+    user_email: Optional[str] = fastapi.Query(
+        default=None, description="User email in the request parameters"
+    ),
+    page: int = fastapi.Query(
+        default=1, description="Page number for pagination", ge=1
+    ),
+    page_size: int = fastapi.Query(
+        default=50, description="Number of items per page", ge=1, le=100
+    ),
+    user_api_key_dict: UserAPIKeyAuth = Depends(user_api_key_auth),
+):
+    """
+    [PROXY-ADMIN ONLY]Filter users based on partial match of user_id or email with pagination.
+
+    Args:
+        user_id (Optional[str]): Partial user ID to search for
+        user_email (Optional[str]): Partial email to search for
+        page (int): Page number for pagination (starts at 1)
+        page_size (int): Number of items per page (max 100)
+        user_api_key_dict (UserAPIKeyAuth): User authentication information
+
+    Returns:
+        List[LiteLLM_SpendLogs]: Paginated list of matching user records
+    """
+    from litellm.proxy.proxy_server import prisma_client
+
+    if prisma_client is None:
+        raise HTTPException(status_code=500, detail={"error": "No db connected"})
+
+    try:
+        # Calculate offset for pagination
+        skip = (page - 1) * page_size
+
+        # Build where conditions based on provided parameters
+        where_conditions = {}
+
+        if user_id:
+            where_conditions["user_id"] = {
+                "contains": user_id,
+                "mode": "insensitive",  # Case-insensitive search
+            }
+
+        if user_email:
+            where_conditions["user_email"] = {
+                "contains": user_email,
+                "mode": "insensitive",  # Case-insensitive search
+            }
+
+        # Query users with pagination and filters
+        users = await prisma_client.db.litellm_usertable.find_many(
+            where=where_conditions,
+            skip=skip,
+            take=page_size,
+            order={"created_at": "desc"},
+        )
+
+        if not users:
+            return []
+
+        return users
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error searching users: {str(e)}")

litellm/proxy/management_endpoints/team_endpoints.py

@@ -1637,3 +1637,81 @@ def _set_team_metadata_field(
         _premium_user_check()
     team_data.metadata = team_data.metadata or {}
     team_data.metadata[field_name] = value
+
+
+@router.get(
+    "/team/filter/ui",
+    tags=["team management"],
+    dependencies=[Depends(user_api_key_auth)],
+    include_in_schema=False,
+    responses={
+        200: {"model": List[LiteLLM_TeamTable]},
+    },
+)
+async def ui_view_teams(
+    team_id: Optional[str] = fastapi.Query(
+        default=None, description="Team ID in the request parameters"
+    ),
+    team_alias: Optional[str] = fastapi.Query(
+        default=None, description="Team alias in the request parameters"
+    ),
+    page: int = fastapi.Query(
+        default=1, description="Page number for pagination", ge=1
+    ),
+    page_size: int = fastapi.Query(
+        default=50, description="Number of items per page", ge=1, le=100
+    ),
+    user_api_key_dict: UserAPIKeyAuth = Depends(user_api_key_auth),
+):
+    """
+    [PROXY-ADMIN ONLY] Filter teams based on partial match of team_id or team_alias with pagination.
+
+    Args:
+        user_id (Optional[str]): Partial user ID to search for
+        user_email (Optional[str]): Partial email to search for
+        page (int): Page number for pagination (starts at 1)
+        page_size (int): Number of items per page (max 100)
+        user_api_key_dict (UserAPIKeyAuth): User authentication information
+
+    Returns:
+        List[LiteLLM_SpendLogs]: Paginated list of matching user records
+    """
+    from litellm.proxy.proxy_server import prisma_client
+
+    if prisma_client is None:
+        raise HTTPException(status_code=500, detail={"error": "No db connected"})
+
+    try:
+        # Calculate offset for pagination
+        skip = (page - 1) * page_size
+
+        # Build where conditions based on provided parameters
+        where_conditions = {}
+
+        if team_id:
+            where_conditions["team_id"] = {
+                "contains": team_id,
+                "mode": "insensitive",  # Case-insensitive search
+            }
+
+        if team_alias:
+            where_conditions["team_alias"] = {
+                "contains": team_alias,
+                "mode": "insensitive",  # Case-insensitive search
+            }
+
+        # Query users with pagination and filters
+        teams = await prisma_client.db.litellm_teamtable.find_many(
+            where=where_conditions,
+            skip=skip,
+            take=page_size,
+            order={"created_at": "desc"},
+        )
+
+        if not teams:
+            return []
+
+        return teams
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error searching teams: {str(e)}")

litellm/proxy/management_endpoints/ui_sso.py

@@ -8,7 +8,7 @@ Has all /sso/* routes
 import asyncio
 import os
 import uuid
-from typing import TYPE_CHECKING, Any, Dict, List, Optional, cast
+from typing import TYPE_CHECKING, Any, Dict, List, Optional, Union, cast
 
 from fastapi import APIRouter, Depends, HTTPException, Request, status
 from fastapi.responses import RedirectResponse
@@ -17,6 +17,7 @@ import litellm
 from litellm._logging import verbose_proxy_logger
 from litellm.constants import MAX_SPENDLOG_ROWS_TO_QUERY
 from litellm.proxy._types import (
+    LiteLLM_UserTable,
     LitellmUserRoles,
     Member,
     NewUserRequest,
@@ -27,6 +28,7 @@ from litellm.proxy._types import (
     TeamMemberAddRequest,
     UserAPIKeyAuth,
 )
+from litellm.proxy.auth.auth_checks import get_user_object
 from litellm.proxy.auth.auth_utils import _has_user_setup_sso
 from litellm.proxy.auth.handle_jwt import JWTHandler
 from litellm.proxy.auth.user_api_key_auth import user_api_key_auth
@@ -368,7 +370,9 @@ async def create_team_member_add_task(team_id, user_info):
         )
 
 
-async def add_missing_team_member(user_info: NewUserResponse, sso_teams: List[str]):
+async def add_missing_team_member(
+    user_info: Union[NewUserResponse, LiteLLM_UserTable], sso_teams: List[str]
+):
     """
     - Get missing teams (diff b/w user_info.team_ids and sso_teams)
     - Add missing user to missing teams
@@ -414,7 +418,9 @@ async def auth_callback(request: Request):  # noqa: PLR0915
         master_key,
         premium_user,
         prisma_client,
+        proxy_logging_obj,
         ui_access_mode,
+        user_api_key_cache,
         user_custom_sso,
     )
 
@@ -557,20 +563,30 @@ async def auth_callback(request: Request):  # noqa: PLR0915
     user_role = None
     try:
         if prisma_client is not None:
-            user_info = await prisma_client.get_data(user_id=user_id, table_name="user")
+            try:
+                user_info = await get_user_object(
+                    user_id=user_id,
+                    user_email=user_email,
+                    prisma_client=prisma_client,
+                    user_api_key_cache=user_api_key_cache,
+                    user_id_upsert=False,
+                    parent_otel_span=None,
+                    proxy_logging_obj=proxy_logging_obj,
+                    sso_user_id=user_id,
+                )
+            except Exception as e:
+                verbose_proxy_logger.debug(f"Error getting user object: {e}")
+                user_info = None
+
             verbose_proxy_logger.debug(
                 f"user_info: {user_info}; litellm.default_internal_user_params: {litellm.default_internal_user_params}"
             )
-            if user_info is None:
-                ## check if user-email in db ##
-                user_info = await prisma_client.db.litellm_usertable.find_first(
-                    where={"user_email": user_email}
-                )
 
-            if user_info is not None and user_id is not None:
+            if user_info is not None:
+                user_id = user_info.user_id
                 user_defined_values = SSOUserDefinedValues(
                     models=getattr(user_info, "models", user_id_models),
-                    user_id=user_id,
+                    user_id=user_info.user_id,
                     user_email=getattr(user_info, "user_email", user_email),
                     user_role=getattr(user_info, "user_role", None),
                     max_budget=getattr(
@@ -588,6 +604,9 @@ async def auth_callback(request: Request):  # noqa: PLR0915
                     where={"user_email": user_email}, data={"user_id": user_id}  # type: ignore
                 )
             else:
+                verbose_proxy_logger.info(
+                    "user not in DB, inserting user into LiteLLM DB"
+                )
                 # user not in DB, insert User into LiteLLM DB
                 user_info = await insert_sso_user(
                     result_openid=result,
@@ -624,9 +643,6 @@ async def auth_callback(request: Request):  # noqa: PLR0915
     key = response["token"]  # type: ignore
     user_id = response["user_id"]  # type: ignore
 
-    # This should always be true
-    # User_id on SSO == user_id in the LiteLLM_VerificationToken Table
-    assert user_id == _user_id_from_sso
     litellm_dashboard_ui = "/ui/"
     user_role = user_role or LitellmUserRoles.INTERNAL_USER_VIEW_ONLY.value
     if (

tests/llm_translation/test_anthropic_text_completion.py

@@ -24,6 +24,7 @@ import pytest
 
 @pytest.mark.asyncio
 @pytest.mark.parametrize("model", ["claude-2", "anthropic/claude-2"])
+@pytest.mark.flaky(retries=6, delay=1)
 async def test_acompletion_claude2(model):
     try:
         litellm.set_verbose = True

tests/logging_callback_tests/test_langfuse_e2e_test.py

@@ -327,6 +327,7 @@ class TestLangfuseLogging:
             ({}, "empty_metadata.json"),
         ],
     )
+    @pytest.mark.flaky(retries=6, delay=1)
     async def test_langfuse_logging_with_various_metadata_types(
         self, mock_setup, test_metadata, response_json_file
     ):

tests/proxy_admin_ui_tests/test_sso_sign_in.py

@@ -61,6 +61,9 @@ async def test_auth_callback_new_user(mock_google_sso, mock_env_vars, prisma_cli
     Tests that a new SSO Sign In user is by default given an 'INTERNAL_USER_VIEW_ONLY' role
     """
     import uuid
+    import litellm
+
+    litellm._turn_on_debug()
 
     # Generate a unique user ID
     unique_user_id = str(uuid.uuid4())

ui/litellm-dashboard/package-lock.json

@@ -30,6 +30,7 @@
       },
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.7",
+        "@types/lodash": "^4.17.15",
         "@types/node": "^20",
         "@types/react": "18.2.48",
         "@types/react-copy-to-clipboard": "^5.0.7",
@@ -944,6 +945,12 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.15.tgz",
+      "integrity": "sha512-w/P33JFeySuhN6JLkysYUK2gEmy9kHHFN7E8ro0tkfmlDOgxBDzWEZ/J8cWA+fHqFevpswDTFZnDx+R9lbL6xw==",
+      "dev": true
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz",

ui/litellm-dashboard/package.json

@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
+    "@types/lodash": "^4.17.15",
     "@types/node": "^20",
     "@types/react": "18.2.48",
     "@types/react-copy-to-clipboard": "^5.0.7",

ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx

@@ -0,0 +1,175 @@
+import { useState, useCallback } from 'react';
+import { Modal, Form, Button, Select } from 'antd';
+import debounce from 'lodash/debounce';
+import { userFilterUICall } from "@/components/networking";
+
+interface User {
+  user_id: string;
+  user_email: string;
+  role?: string;
+}
+
+interface UserOption {
+  label: string;
+  value: string;
+  user: User;
+}
+
+interface FormValues {
+  user_email: string;
+  user_id: string;
+  role: 'admin' | 'user';
+}
+
+interface UserSearchModalProps {
+  isVisible: boolean;
+  onCancel: () => void;
+  onSubmit: (values: FormValues) => void;
+  accessToken: string | null;
+}
+
+const UserSearchModal: React.FC<UserSearchModalProps> = ({ 
+  isVisible, 
+  onCancel, 
+  onSubmit,
+  accessToken
+}) => {
+  const [form] = Form.useForm<FormValues>();
+  const [userOptions, setUserOptions] = useState<UserOption[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [selectedField, setSelectedField] = useState<'user_email' | 'user_id'>('user_email');
+
+  const fetchUsers = async (searchText: string, fieldName: 'user_email' | 'user_id'): Promise<void> => {
+    if (!searchText) {
+      setUserOptions([]);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const params = new URLSearchParams();
+      params.append(fieldName, searchText);
+      if (accessToken == null) {
+        return;
+      }
+      const response = await userFilterUICall(accessToken, params);
+      
+        const data: User[] = response
+        const options: UserOption[] = data.map(user => ({
+            label: fieldName === 'user_email' 
+                ? `${user.user_email}`
+                : `${user.user_id}`,
+            value: fieldName === 'user_email' ? user.user_email : user.user_id,
+            user
+         }));
+        setUserOptions(options);
+    } catch (error) {
+      console.error('Error fetching users:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const debouncedSearch = useCallback(
+    debounce((text: string, fieldName: 'user_email' | 'user_id') => fetchUsers(text, fieldName), 300),
+    []
+  );
+
+  const handleSearch = (value: string, fieldName: 'user_email' | 'user_id'): void => {
+    setSelectedField(fieldName);
+    debouncedSearch(value, fieldName);
+  };
+
+  const handleSelect = (_value: string, option: UserOption): void => {
+    const selectedUser = option.user;
+    form.setFieldsValue({
+      user_email: selectedUser.user_email,
+      user_id: selectedUser.user_id,
+      role: form.getFieldValue('role') // Preserve current role selection
+    });
+  };
+
+  const handleClose = (): void => {
+    form.resetFields();
+    setUserOptions([]);
+    onCancel();
+  };
+
+  return (
+    <Modal
+      title="Add Team Member" 
+      open={isVisible}
+      onCancel={handleClose}
+      footer={null}
+      width={800}
+    >
+      <Form<FormValues>
+        form={form}
+        onFinish={onSubmit}
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 16 }}
+        labelAlign="left"
+        initialValues={{
+          role: "user",
+        }}
+      >
+        <Form.Item
+          label="Email"
+          name="user_email"
+          className="mb-4"
+        >
+          <Select
+            showSearch
+            className="w-full" 
+            placeholder="Search by email"
+            filterOption={false}
+            onSearch={(value) => handleSearch(value, 'user_email')}
+            onSelect={(value, option) => handleSelect(value, option as UserOption)}
+            options={selectedField === 'user_email' ? userOptions : []}
+            loading={loading}
+            allowClear
+          />
+        </Form.Item>
+
+        <div className="text-center mb-4">OR</div>
+        
+        <Form.Item
+          label="User ID"
+          name="user_id" 
+          className="mb-4"
+        >
+          <Select
+            showSearch
+            className="w-full"
+            placeholder="Search by user ID" 
+            filterOption={false}
+            onSearch={(value) => handleSearch(value, 'user_id')}
+            onSelect={(value, option) => handleSelect(value, option as UserOption)}
+            options={selectedField === 'user_id' ? userOptions : []}
+            loading={loading}
+            allowClear
+          />
+        </Form.Item>
+
+        <Form.Item
+          label="Member Role"
+          name="role"
+          className="mb-4"
+        >
+          <Select defaultValue="user">
+            <Select.Option value="admin">admin</Select.Option>
+            <Select.Option value="user">user</Select.Option>
+          </Select>
+        </Form.Item>
+
+        <div className="text-right mt-4">
+          <Button type="primary" htmlType="submit">
+            Add Member
+          </Button>
+        </div>
+      </Form>
+    </Modal>
+  );
+};
+
+export default UserSearchModal;

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

@@ -1510,6 +1510,36 @@ export const allEndUsersCall = async (accessToken: String) => {
   }
 };
 
+export const userFilterUICall = async (accessToken: String, params: URLSearchParams) => {
+  try {
+    let url = proxyBaseUrl ? `${proxyBaseUrl}/user/filter/ui` : `/user/filter/ui`;
+
+    if (params.get("user_email")) {
+      url += `?user_email=${params.get("user_email")}`;
+    }
+    if (params.get("user_id")) {
+      url += `?user_id=${params.get("user_id")}`;
+    }
+
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        [globalLitellmHeaderName]: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+    if (!response.ok) {
+      const errorData = await response.text();
+      handleError(errorData);
+      throw new Error("Network response was not ok");
+    }
+  return await response.json();
+  } catch (error) {
+    console.error("Failed to create key:", error);
+    throw error;
+  }
+}
+
 export const userSpendLogsCall = async (
   accessToken: String,
   token: String,
@@ -2402,6 +2432,47 @@ export const teamMemberUpdateCall = async (
   }
 }
 
+export const teamMemberDeleteCall = async (
+  accessToken: string,
+  teamId: string,
+  formValues: Member // Assuming formValues is an object
+) => {
+  try {
+    console.log("Form Values in teamMemberAddCall:", formValues); // Log the form values before making the API call
+
+    const url = proxyBaseUrl
+      ? `${proxyBaseUrl}/team/member_delete`
+      : `/team/member_delete`;
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        [globalLitellmHeaderName]: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        team_id: teamId,
+        ...(formValues.user_email && { user_email: formValues.user_email }),
+        ...(formValues.user_id && { user_id: formValues.user_id })
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.text();
+      handleError(errorData);
+      console.error("Error response from the server:", errorData);
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+    console.log("API Response:", data);
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to create key:", error);
+    throw error;
+  }
+}
+
 export const organizationMemberAddCall = async (
   accessToken: string,
   organizationId: string,

ui/litellm-dashboard/src/components/team/edit_membership.tsx

@@ -1,19 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Modal, Form, Input, Select as AntSelect, Button as AntButton, message } from 'antd';
 import { Select, SelectItem } from "@tremor/react";
 import { Card, Text } from "@tremor/react";
-
+import { Member } from "@/components/networking";
-export interface TeamMember {
-  id?: string;
-  email?: string;
-  role: 'admin' | 'user';
-}
-
 interface TeamMemberModalProps {
   visible: boolean;
   onCancel: () => void;
-  onSubmit: (data: TeamMember) => void;
+  onSubmit: (data: Member) => void;
-  initialData?: TeamMember | null;
+  initialData?: Member | null;
   mode: 'add' | 'edit';
 }
 
@@ -26,11 +20,22 @@ const TeamMemberModal: React.FC<TeamMemberModalProps> = ({
 }) => {
   const [form] = Form.useForm();
 
+  useEffect(() => {
+    if (initialData) {
+      form.setFieldsValue({
+        user_email: initialData.user_email,
+        user_id: initialData.user_id,
+        role: initialData.role,
+      });
+    }
+  }, [initialData, form]);
+  
+
   const handleSubmit = async (values: any) => {
     try {
-      const formData: TeamMember = {
+      const formData: Member = {
-        email: values.user_email,
+        user_email: values.user_email,
-        id: values.user_id,
+        user_id: values.user_id,
         role: values.role,
       };
       
@@ -60,8 +65,8 @@ const TeamMemberModal: React.FC<TeamMemberModalProps> = ({
         wrapperCol={{ span: 16 }}
         labelAlign="left"
         initialValues={{
-          user_email: initialData?.email?.trim() || '',
+          user_email: initialData?.user_email?.trim() || '',
-          user_id: initialData?.id?.trim() || '',
+          user_id: initialData?.user_id?.trim() || '',
           role: initialData?.role || 'user',
         }}
       >

ui/litellm-dashboard/src/components/team/team_info.tsx

@@ -0,0 +1,326 @@
+import React, { useState, useEffect } from "react";
+import {
+  Card,
+  Title,
+  Text,
+  Tab,
+  TabList,
+  TabGroup,
+  TabPanel,
+  TabPanels,
+  Grid,
+  Badge,
+  Button as TremorButton,
+  TableRow,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableBody,
+  Table,
+  Icon
+} from "@tremor/react";
+import { teamInfoCall, teamMemberDeleteCall, teamMemberAddCall, teamMemberUpdateCall, Member } from "@/components/networking";
+import { Button, Modal, Form, Input, Select as AntSelect, message } from "antd";
+import { PencilAltIcon, PlusIcon, TrashIcon } from "@heroicons/react/outline";
+import TeamMemberModal from "./edit_membership";
+import UserSearchModal from "@/components/common_components/user_search_modal";
+interface TeamData {
+  team_id: string;
+  team_info: {
+    team_alias: string;
+    team_id: string;
+    organization_id: string | null;
+    admins: string[];
+    members: string[];
+    members_with_roles: Member[];
+    metadata: Record<string, any>;
+    tpm_limit: number | null;
+    rpm_limit: number | null;
+    max_budget: number | null;
+    budget_duration: string | null;
+    models: string[];
+    blocked: boolean;
+    spend: number;
+    max_parallel_requests: number | null;
+    budget_reset_at: string | null;
+    model_id: string | null;
+    litellm_model_table: string | null;
+    created_at: string;
+  };
+  keys: any[];
+  team_memberships: any[];
+}
+
+interface TeamInfoProps {
+  teamId: string;
+  onClose: () => void;
+  accessToken: string | null;
+  is_team_admin: boolean;
+  is_proxy_admin: boolean;
+}
+
+const TeamInfoView: React.FC<TeamInfoProps> = ({ 
+  teamId, 
+  onClose, 
+  accessToken, 
+  is_team_admin, 
+  is_proxy_admin 
+}) => {
+  const [teamData, setTeamData] = useState<TeamData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [isAddMemberModalVisible, setIsAddMemberModalVisible] = useState(false);
+  const [form] = Form.useForm();
+  const [isEditMemberModalVisible, setIsEditMemberModalVisible] = useState(false);
+  const [selectedEditMember, setSelectedEditMember] = useState<Member | null>(null);
+
+  const canManageMembers = is_team_admin || is_proxy_admin;
+
+  const fetchTeamInfo = async () => {
+    try {
+      setLoading(true);
+      if (!accessToken) return;
+      const response = await teamInfoCall(accessToken, teamId);
+      setTeamData(response);
+    } catch (error) {
+      message.error("Failed to load team information");
+      console.error("Error fetching team info:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTeamInfo();
+  }, [teamId, accessToken]);
+
+
+  const handleMemberCreate = async (values: any) => {
+    try {
+      if (accessToken == null) {
+        return;
+      }
+
+      const member: Member = {
+        user_email: values.user_email,
+        user_id: values.user_id,
+        role: values.role,
+      }
+      const response = await teamMemberAddCall(accessToken, teamId, member);
+
+
+      message.success("Team member added successfully");
+      setIsAddMemberModalVisible(false);
+      form.resetFields();
+      fetchTeamInfo();
+    } catch (error) {
+      message.error("Failed to add team member");
+      console.error("Error adding team member:", error);
+    }
+  };
+
+  const handleMemberDelete = async (member: Member) => {
+    try {
+      if (accessToken == null) {
+        return;
+      }
+
+      const response = await teamMemberDeleteCall(accessToken, teamId, member);
+
+      message.success("Team member removed successfully");
+      fetchTeamInfo();
+    } catch (error) {
+      message.error("Failed to remove team member");
+      console.error("Error removing team member:", error);
+    }
+  };
+
+  const handleMemberUpdate = async (values: any) => {
+    try {
+      if (accessToken == null) {
+        return;
+      }
+
+      const member: Member = {
+        user_email: values.user_email,
+        user_id: values.user_id,
+        role: values.role,
+      }
+
+      const response = await teamMemberUpdateCall(accessToken, teamId, member);
+
+      message.success("Team member updated successfully");
+      setIsEditMemberModalVisible(false);
+      fetchTeamInfo();
+    } catch (error) {
+      message.error("Failed to update team member");
+      console.error("Error updating team member:", error);
+    }
+  }
+
+  if (loading) {
+    return <div className="p-4">Loading...</div>;
+  }
+
+  if (!teamData?.team_info) {
+    return <div className="p-4">Team not found</div>;
+  }
+
+  const { team_info: info } = teamData;
+
+  const renderMembersPanel = () => (
+    <div className="space-y-4">
+    <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh]">
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeaderCell>User ID</TableHeaderCell>
+            <TableHeaderCell>User Email</TableHeaderCell>
+            <TableHeaderCell>Role</TableHeaderCell>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          {teamData
+            ? teamData.team_info.members_with_roles.map(
+                (member: any, index: number) => (
+                  <TableRow key={index}>
+                    <TableCell>
+                      <Text className="font-mono">{member["user_id"]}</Text>
+                    </TableCell>
+                    <TableCell>
+                      <Text className="font-mono">{member["user_email"]}</Text>
+                    </TableCell>
+                    <TableCell>
+                      <Text className="font-mono">{member["role"]}</Text>
+                    </TableCell>
+                    <TableCell>
+                    {is_team_admin ? (
+                      <>
+                      <Icon
+                        icon={PencilAltIcon}
+                        size="sm"
+                        onClick={() => {
+                          setSelectedEditMember(member);
+                          setIsEditMemberModalVisible(true);
+                        }}
+                      />
+                      <Icon
+                        onClick={() => {handleMemberDelete(member)}}
+                        icon={TrashIcon}
+                        size="sm"
+                      />
+                      </>
+                    ) : null}
+                  </TableCell>
+                  </TableRow>
+                )
+              )
+            : null}
+        </TableBody>
+      </Table>
+    </Card>
+    <TremorButton onClick={() => setIsAddMemberModalVisible(true)}>Add Member</TremorButton>
+    </div>
+  );
+
+  return (
+    <div className="p-4">
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <Button onClick={onClose} className="mb-4">← Back</Button>
+          <Title>{info.team_alias}</Title>
+          <Text className="text-gray-500 font-mono">{info.team_id}</Text>
+        </div>
+      </div>
+
+      <TabGroup>
+        <TabList className="mb-4">
+          <Tab>Overview</Tab>
+          <Tab>Members</Tab>
+          <Tab>Settings</Tab>
+        </TabList>
+
+        <TabPanels>
+          <TabPanel>
+            <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-6">
+              <Card>
+                <Text>Budget Status</Text>
+                <div className="mt-2">
+                  <Title>${info.spend.toFixed(6)}</Title>
+                  <Text>of {info.max_budget === null ? "Unlimited" : `$${info.max_budget}`}</Text>
+                  {info.budget_duration && (
+                    <Text className="text-gray-500">Reset: {info.budget_duration}</Text>
+                  )}
+                </div>
+              </Card>
+
+              <Card>
+                <Text>Rate Limits</Text>
+                <div className="mt-2">
+                  <Text>TPM: {info.tpm_limit || 'Unlimited'}</Text>
+                  <Text>RPM: {info.rpm_limit || 'Unlimited'}</Text>
+                  {info.max_parallel_requests && (
+                    <Text>Max Parallel Requests: {info.max_parallel_requests}</Text>
+                  )}
+                </div>
+              </Card>
+
+              <Card>
+                <Text>Models</Text>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {info.models.map((model, index) => (
+                    <Badge key={index} color="red">
+                      {model}
+                    </Badge>
+                  ))}
+                </div>
+              </Card>
+            </Grid>
+          </TabPanel>
+
+          <TabPanel>
+            {renderMembersPanel()}
+          </TabPanel>
+
+          <TabPanel>
+            <Card>
+              <Title>Team Settings</Title>
+              <div className="mt-4 space-y-4">
+                <div>
+                  <Text className="font-medium">Team ID</Text>
+                  <Text className="font-mono">{info.team_id}</Text>
+                </div>
+                <div>
+                  <Text className="font-medium">Created At</Text>
+                  <Text>{new Date(info.created_at).toLocaleString()}</Text>
+                </div>
+                <div>
+                  <Text className="font-medium">Status</Text>
+                  <Badge color={info.blocked ? 'red' : 'green'}>
+                    {info.blocked ? 'Blocked' : 'Active'}
+                  </Badge>
+                </div>
+              </div>
+            </Card>
+            <TeamMemberModal
+            visible={isEditMemberModalVisible}
+            onCancel={() => setIsEditMemberModalVisible(false)}
+            onSubmit={handleMemberUpdate}
+            initialData={selectedEditMember}
+            mode="edit"
+          />
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+
+      <UserSearchModal
+        isVisible={isAddMemberModalVisible}
+        onCancel={() => setIsAddMemberModalVisible(false)}
+        onSubmit={handleMemberCreate}
+        accessToken={accessToken}
+      />
+    </div>
+  );
+};
+
+export default TeamInfoView;

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

@@ -25,7 +25,7 @@ import { fetchAvailableModelsForTeamOrKey, getModelDisplayName } from "./key_tea
 import { Select, SelectItem } from "@tremor/react";
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { getGuardrailsList } from "./networking";
-
+import TeamInfoView from "@/components/team/team_info";
 import {
   Table,
   TableBody,
@@ -129,8 +129,9 @@ const Team: React.FC<TeamProps> = ({
   const [editModalVisible, setEditModalVisible] = useState(false);
 
   const [selectedTeam, setSelectedTeam] = useState<null | any>(
-    teams ? teams[0] : null
+    null
   );
+  const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
 
   const [isTeamModalVisible, setIsTeamModalVisible] = useState(false);
   const [isAddMemberModalVisible, setIsAddMemberModalVisible] = useState(false);
@@ -500,6 +501,9 @@ const Team: React.FC<TeamProps> = ({
   };
 
   const is_team_admin = (team: any) => {
+    if (team == null || team.members_with_roles == null) {
+      return false;
+    }
     for (let i = 0; i < team.members_with_roles.length; i++) {
       let member = team.members_with_roles[i];
       if (member.user_id == userID && member.role == "admin") {
@@ -509,58 +513,7 @@ const Team: React.FC<TeamProps> = ({
     return false;
   }
 
-  const _common_member_update_call = async (formValues: Record<string, any>, callType: "add" | "edit") => {
-    try {
-      if (accessToken != null && teams != null) {
-        message.info("Adding Member");
-        const user_role: Member = {
-          role: formValues.role,
-          user_email: formValues.user_email,
-          user_id: formValues.user_id,
-        };
-        let response: any;
-        if (callType == "add") {
-          response = await teamMemberAddCall(
-          accessToken,
-          selectedTeam["team_id"],
-          user_role
-        );
-        message.success("Member added");
-        } else {
-          response = await teamMemberUpdateCall(
-            accessToken,
-            selectedTeam["team_id"],
-            {
-              "role": formValues.role,
-              "user_id": formValues.id,
-              "user_email": formValues.email
-            }
-          );
-          message.success("Member updated");
-        }
 
-        // Checking if the team exists in the list and updating or adding accordingly
-        const foundIndex = teams.findIndex((team) => {
-          console.log(
-            `team.team_id=${team.team_id}; response.data.team_id=${response.data.team_id}`
-          );
-          return team.team_id === response.data.team_id;
-        });
-        console.log(`foundIndex: ${foundIndex}`);
-        if (foundIndex !== -1) {
-          // If the team is found, update it
-          const updatedTeams = [...teams]; // Copy the current state
-          updatedTeams[foundIndex] = response.data; // Update the specific team
-          setTeams(updatedTeams); // Set the new state
-          setSelectedTeam(response.data);
-        }
-        setIsAddMemberModalVisible(false);
-        
-      }
-    } catch (error) {
-      console.error("Error creating the team:", error);
-    }
-  }
 
   const handleRefreshClick = () => {
     // Update the 'lastRefreshed' state to the current date and time
@@ -577,6 +530,15 @@ const Team: React.FC<TeamProps> = ({
   }
   return (
     <div className="w-full mx-4">
+      {selectedTeamId ? (
+        <TeamInfoView 
+        teamId={selectedTeamId} 
+        onClose={() => setSelectedTeamId(null)} 
+        accessToken={accessToken}
+        is_team_admin={is_team_admin(teams?.find((team) => team.team_id === selectedTeamId))}
+        is_proxy_admin={userRole == "Admin"}
+      />
+    ) : (
       <TabGroup className="gap-2 p-8 h-[75vh] w-full mt-2">
       <TabList className="flex justify-between mt-2 w-full items-center">
         <div className="flex">
@@ -596,6 +558,9 @@ const Team: React.FC<TeamProps> = ({
       </TabList>
       <TabPanels>
       <TabPanel>
+      <Text>
+        Click on "Team ID" to view team details <b>and</b> manage team members.
+      </Text>
       <Grid numItems={1} className="gap-2 pt-2 pb-2 h-[75vh] w-full mt-2">
         <Col numColSpan={1}>
           <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh]">
@@ -628,19 +593,27 @@ const Team: React.FC<TeamProps> = ({
                         >
                           {team["team_alias"]}
                         </TableCell>
-                        <TableCell
+                        <TableRow>
-                          style={{
+                        <TableCell>
-                            maxWidth: "4px",
+                          <div className="overflow-hidden">
-                            whiteSpace: "nowrap",
+                            <Tooltip title={team.team_id}>
-                            overflow: "hidden",
+                              <Button 
-                            textOverflow: "ellipsis",
+                                size="xs"
-                            fontSize: "0.75em", // or any smaller size as needed
+                                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]"
-                        >
+
-                          <Tooltip title={team.team_id}>
+                                onClick={() => {
-                          {team.team_id}
+                                  // Add click handler
-                          </Tooltip>
+                                  setSelectedTeamId(team.team_id);
+                                }}
+                              >
+                                {team.team_id.slice(0, 7)}...
+                              </Button>
+                            </Tooltip>
+                          </div>
                         </TableCell>
+                      </TableRow>
+
                         <TableCell
                           style={{
                             maxWidth: "4px",
@@ -964,25 +937,30 @@ const Team: React.FC<TeamProps> = ({
           </Modal>
           </Col>
         ) : null}
-        <Col numColSpan={1}>
+        {/* <Col numColSpan={1}>
           <Title level={4}>Team Members</Title>
           <Paragraph>
-            If you belong to multiple teams, this setting controls which teams
+            If you belong to multiple teams, this setting controls which teams' members you see.
-            members you see.
           </Paragraph>
           {teams && teams.length > 0 ? (
             <Select defaultValue="0">
-              {teams.map((team: any, index) => (
+              {[...teams]
-                <SelectItem
+                .sort((a, b) => {
-                  key={index}
+                  const aliasA = a.team_alias || '';
-                  value={String(index)}
+                  const aliasB = b.team_alias || '';
-                  onClick={() => {
+                  return aliasA.localeCompare(aliasB);
-                    setSelectedTeam(team);
+                })
-                  }}
+                .map((team: any, index) => (
-                >
+                  <SelectItem
-                  {team["team_alias"]}
+                    key={index}
-                </SelectItem>
+                    value={String(index)}
-              ))}
+                    onClick={() => {
+                      setSelectedTeam(team);
+                    }}
+                  >
+                    {team.team_alias || 'Unnamed Team'}
+                  </SelectItem>
+                ))}
             </Select>
           ) : (
             <Paragraph>
@@ -1112,7 +1090,7 @@ const Team: React.FC<TeamProps> = ({
               </div>
             </Form>
           </Modal>
-        </Col>
+        </Col> */}
       </Grid>
       </TabPanel>
       <TabPanel>  
@@ -1123,7 +1101,7 @@ const Team: React.FC<TeamProps> = ({
       </TabPanel>
       </TabPanels>
 
-    </TabGroup>
+      </TabGroup>)}
     </div>
   );
 };