feat(user_info_view.tsx): be able to click in and see all teams user is part of

makes it easy to see which teams a user belongs to

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

@@ -751,8 +751,10 @@ export const userInfoCall = async (
   userRole: String,
   viewAll: Boolean = false,
   page: number | null,
-  page_size: number | null
+  page_size: number | null,
+  lookup_user_id: boolean = false
 ) => {
+  console.log(`userInfoCall: ${userID}, ${userRole}, ${viewAll}, ${page}, ${page_size}, ${lookup_user_id}`)
   try {
     let url: string;
     
@@ -766,7 +768,7 @@ export const userInfoCall = async (
     } else {
       // Use /user/info endpoint for individual user info
       url = proxyBaseUrl ? `${proxyBaseUrl}/user/info` : `/user/info`;
-      if (userRole === "Admin" || userRole === "Admin Viewer") {
+      if ((userRole === "Admin" || userRole === "Admin Viewer") && !lookup_user_id) {
         // do nothing 
       } else if (userID) {
         url += `?user_id=${userID}`;

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

@@ -594,6 +594,8 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
                 data={userListResponse.users || []}
                 columns={tableColumns}
                 isLoading={!userListResponse}
+                accessToken={accessToken}
+                userRole={userRole}
               />
             </div>
           </TabPanel>

ui/litellm-dashboard/src/components/view_users/table.tsx

@@ -18,21 +18,27 @@ import {
 } from "@tremor/react";
 import { SwitchVerticalIcon, ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/outline";
 import { UserInfo } from "./types";
+import UserInfoView from "./user_info_view";
 
 interface UserDataTableProps {
   data: UserInfo[];
   columns: ColumnDef<UserInfo, any>[];
   isLoading?: boolean;
+  accessToken: string | null;
+  userRole: string | null;
 }
 
 export function UserDataTable({
   data = [],
   columns,
   isLoading = false,
+  accessToken,
+  userRole,
 }: UserDataTableProps) {
   const [sorting, setSorting] = React.useState<SortingState>([
     { id: "created_at", desc: true }
   ]);
+  const [selectedUserId, setSelectedUserId] = React.useState<string | null>(null);
 
   const table = useReactTable({
     data,
@@ -46,6 +52,25 @@ export function UserDataTable({
     enableSorting: true,
   });
 
+  const handleUserClick = (userId: string) => {
+    setSelectedUserId(userId);
+  };
+
+  const handleCloseUserInfo = () => {
+    setSelectedUserId(null);
+  };
+
+  if (selectedUserId) {
+    return (
+      <UserInfoView
+        userId={selectedUserId}
+        onClose={handleCloseUserInfo}
+        accessToken={accessToken}
+        userRole={userRole}
+      />
+    );
+  }
+
   return (
     <div className="rounded-lg custom-border relative">
       <div className="overflow-x-auto">
@@ -110,6 +135,15 @@ export function UserDataTable({
                           ? 'sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)]'
                           : ''
                       }`}
+                      onClick={() => {
+                        if (cell.column.id === 'user_id') {
+                          handleUserClick(cell.getValue() as string);
+                        }
+                      }}
+                      style={{
+                        cursor: cell.column.id === 'user_id' ? 'pointer' : 'default',
+                        color: cell.column.id === 'user_id' ? '#3b82f6' : 'inherit',
+                      }}
                     >
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>

ui/litellm-dashboard/src/components/view_users/user_info_view.tsx

@@ -0,0 +1,297 @@
+import React, { useState } from "react";
+import {
+  Card,
+  Text,
+  Button,
+  Grid,
+  Col,
+  Tab,
+  TabList,
+  TabGroup,
+  TabPanel,
+  TabPanels,
+  Title,
+  Badge,
+} from "@tremor/react";
+import { ArrowLeftIcon, TrashIcon } from "@heroicons/react/outline";
+import { userInfoCall, userDeleteCall } from "../networking";
+import { message } from "antd";
+import { rolesWithWriteAccess } from '../../utils/roles';
+
+interface UserInfoViewProps {
+  userId: string;
+  onClose: () => void;
+  accessToken: string | null;
+  userRole: string | null;
+  onDelete?: () => void;
+}
+
+interface UserInfo {
+  user_id: string;
+  user_info: {
+    user_email: string | null;
+    user_role: string | null;
+    teams: any[] | null;
+    models: string[] | null;
+    max_budget: number | null;
+    spend: number | null;
+    metadata: Record<string, any> | null;
+    created_at: string | null;
+    updated_at: string | null;
+  };
+  keys: any[] | null;
+  teams: any[] | null;
+}
+
+export default function UserInfoView({ userId, onClose, accessToken, userRole, onDelete }: UserInfoViewProps) {
+  const [userData, setUserData] = useState<UserInfo | null>(null);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  React.useEffect(() => {
+    console.log(`userId: ${userId}, userRole: ${userRole}, accessToken: ${accessToken}`)
+    const fetchUserData = async () => {
+      try {
+        if (!accessToken) return;
+        const data = await userInfoCall(accessToken, userId, userRole || "", false, null, null, true);
+        setUserData(data);
+      } catch (error) {
+        console.error("Error fetching user data:", error);
+        message.error("Failed to fetch user data");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchUserData();
+  }, [accessToken, userId, userRole]);
+
+  const handleDelete = async () => {
+    try {
+      if (!accessToken) return;
+      await userDeleteCall(accessToken, [userId]);
+      message.success("User deleted successfully");
+      if (onDelete) {
+        onDelete();
+      }
+      onClose();
+    } catch (error) {
+      console.error("Error deleting user:", error);
+      message.error("Failed to delete user");
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-4">
+        <Button 
+          icon={ArrowLeftIcon} 
+          variant="light"
+          onClick={onClose}
+          className="mb-4"
+        >
+          Back to Users
+        </Button>
+        <Text>Loading user data...</Text>
+      </div>
+    );
+  }
+
+  if (!userData) {
+    return (
+      <div className="p-4">
+        <Button 
+          icon={ArrowLeftIcon} 
+          variant="light"
+          onClick={onClose}
+          className="mb-4"
+        >
+          Back to Users
+        </Button>
+        <Text>User not found</Text>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4">
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <Button 
+            icon={ArrowLeftIcon} 
+            variant="light"
+            onClick={onClose}
+            className="mb-4"
+          >
+            Back to Users
+          </Button>
+          <Title>{userData.user_info?.user_email || "User"}</Title>
+          <Text className="text-gray-500 font-mono">{userData.user_id}</Text>
+        </div>
+        {userRole && rolesWithWriteAccess.includes(userRole) && (
+          <Button
+            icon={TrashIcon}
+            variant="secondary"
+            onClick={() => setIsDeleteModalOpen(true)}
+            className="flex items-center"
+          >
+            Delete User
+          </Button>
+        )}
+      </div>
+
+      {/* Delete Confirmation Modal */}
+      {isDeleteModalOpen && (
+        <div className="fixed z-10 inset-0 overflow-y-auto">
+          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
+              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+
+            <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                <div className="sm:flex sm:items-start">
+                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                    <h3 className="text-lg leading-6 font-medium text-gray-900">
+                      Delete User
+                    </h3>
+                    <div className="mt-2">
+                      <p className="text-sm text-gray-500">
+                        Are you sure you want to delete this user?
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                <Button
+                  onClick={handleDelete}
+                  color="red"
+                  className="ml-2"
+                >
+                  Delete
+                </Button>
+                <Button onClick={() => setIsDeleteModalOpen(false)}>
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <TabGroup>
+        <TabList className="mb-4">
+          <Tab>Overview</Tab>
+          <Tab>Details</Tab>
+        </TabList>
+
+        <TabPanels>
+          {/* Overview Panel */}
+          <TabPanel>
+            <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-6">
+              <Card>
+                <Text>Spend</Text>
+                <div className="mt-2">
+                  <Title>${Number(userData.user_info?.spend || 0).toFixed(4)}</Title>
+                  <Text>of {userData.user_info?.max_budget !== null ? `$${userData.user_info.max_budget}` : "Unlimited"}</Text>
+                </div>
+              </Card>
+
+              <Card>
+                <Text>Teams</Text>
+                <div className="mt-2">
+                  <Text>{userData.teams.length} teams</Text>
+                </div>
+              </Card>
+
+              <Card>
+                <Text>API Keys</Text>
+                <div className="mt-2">
+                  <Text>{userData.keys.length} keys</Text>
+                </div>
+              </Card>
+            </Grid>
+          </TabPanel>
+
+          {/* Details Panel */}
+          <TabPanel>
+            <Card>
+              <div className="space-y-4">
+                <div>
+                  <Text className="font-medium">User ID</Text>
+                  <Text className="font-mono">{userData.user_id}</Text>
+                </div>
+                
+                <div>
+                  <Text className="font-medium">Email</Text>
+                  <Text>{userData.user_info?.user_email || "Not Set"}</Text>
+                </div>
+
+                <div>
+                  <Text className="font-medium">Role</Text>
+                  <Text>{userData.user_info?.user_role || "Not Set"}</Text>
+                </div>
+
+                <div>
+                  <Text className="font-medium">Created</Text>
+                  <Text>{userData.user_info?.created_at ? new Date(userData.user_info.created_at).toLocaleString() : "Unknown"}</Text>
+                </div>
+
+                <div>
+                  <Text className="font-medium">Last Updated</Text>
+                  <Text>{userData.user_info?.updated_at ? new Date(userData.user_info.updated_at).toLocaleString() : "Unknown"}</Text>
+                </div>
+
+                <div>
+                  <Text className="font-medium">Teams</Text>
+                  <div className="flex flex-wrap gap-2 mt-1">
+                    {userData.teams.length > 0 ? (
+                      userData.teams.map((team, index) => (
+                        <span
+                          key={index}
+                          className="px-2 py-1 bg-blue-100 rounded text-xs"
+                        >
+                          {team.team_alias || team.team_id}
+                        </span>
+                      ))
+                    ) : (
+                      <Text>No teams</Text>
+                    )}
+                  </div>
+                </div>
+
+                <div>
+                  <Text className="font-medium">API Keys</Text>
+                  <div className="flex flex-wrap gap-2 mt-1">
+                    {userData.keys.length > 0 ? (
+                      userData.keys.map((key, index) => (
+                        <span
+                          key={index}
+                          className="px-2 py-1 bg-green-100 rounded text-xs"
+                        >
+                          {key.key_alias || key.token}
+                        </span>
+                      ))
+                    ) : (
+                      <Text>No API keys</Text>
+                    )}
+                  </div>
+                </div>
+
+                <div>
+                  <Text className="font-medium">Metadata</Text>
+                  <pre className="bg-gray-100 p-2 rounded text-xs overflow-auto mt-1">
+                    {JSON.stringify(userData.user_info?.metadata || {}, null, 2)}
+                  </pre>
+                </div>
+              </div>
+            </Card>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </div>
+  );
+}