fix - show team models / team info in admin ui

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

@@ -34,20 +34,19 @@ const DashboardTeam: React.FC<DashboardTeamProps> = ({
   } else {
     updatedTeams = teams ? [...teams, defaultTeam] : [defaultTeam];
   }
+  if (userRole === 'App User') return null;
 
   return (
     <div className="mt-5 mb-5">
       <Title>Select Team</Title>
-      {userRole !== "App User" && (
-          <>
-            <Text>
-              If you belong to multiple teams, this setting controls which team is used by default when creating new API Keys.
-            </Text>
-            <Text className="mt-3 mb-3">
-              <b>Default Team:</b> If no team_id is set for a key, it will be grouped under here.
-            </Text>
-          </>
-        )}
+      
+      <Text>
+        If you belong to multiple teams, this setting controls which team is used by default when creating new API Keys.
+      </Text>
+      <Text className="mt-3 mb-3">
+        <b>Default Team:</b> If no team_id is set for a key, it will be grouped under here.
+      </Text>
+
       {updatedTeams && updatedTeams.length > 0 ? (
         <Select defaultValue="0">
           {updatedTeams.map((team: any, index) => (

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

@@ -5,6 +5,7 @@ import { Grid, Col, Card, Text, Title } from "@tremor/react";
 import CreateKey from "./create_key_button";
 import ViewKeyTable from "./view_key_table";
 import ViewUserSpend from "./view_user_spend";
+import ViewUserTeam from "./view_user_team";
 import DashboardTeam from "./dashboard_default_team";
 import { useSearchParams, useRouter } from "next/navigation";
 import { jwtDecode } from "jwt-decode";
@@ -232,6 +233,12 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
       <div className="w-full mx-4">
       <Grid numItems={1} className="gap-2 p-8 h-[75vh] w-full mt-2">
         <Col numColSpan={1}>
+          <ViewUserTeam
+            userID={userID}
+            userRole={userRole}
+            selectedTeam={selectedTeam ? selectedTeam : null}
+            accessToken={accessToken}
+          />
           <ViewUserSpend
             userID={userID}
             userRole={userRole}

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

@@ -0,0 +1,95 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import {
+  Badge,
+  Card,
+  Table,
+  Metric,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  Text,
+  Title,
+  Icon,
+  Accordion,
+  AccordionBody,
+  AccordionHeader,
+  List,
+  ListItem,
+} from "@tremor/react";
+import { Statistic } from "antd"
+import { modelAvailableCall }  from "./networking";
+
+
+interface ViewUserTeamProps {
+    userID: string | null;
+    userRole: string | null;
+    selectedTeam: any | null; 
+    accessToken: string | null;
+}
+const ViewUserTeam: React.FC<ViewUserTeamProps> = ({ userID, userRole, selectedTeam, accessToken}) => {
+    const [userModels, setUserModels] = useState([]);
+    useEffect(() => {
+        const fetchUserModels = async () => {
+          try {
+            if (userID === null || userRole === null) {
+              return;
+            }
+    
+            if (accessToken !== null) {
+              const model_available = await modelAvailableCall(accessToken, userID, userRole);
+              let available_model_names = model_available["data"].map(
+                (element: { id: string }) => element.id
+              );
+              console.log("available_model_names:", available_model_names);
+              setUserModels(available_model_names);
+            }
+          } catch (error) {
+            console.error("Error fetching user models:", error);
+          }
+        };
+      
+        fetchUserModels();
+      }, [accessToken, userID, userRole]);
+    if (userRole !== 'App User') return null;
+
+    // logic to decide what models to display
+    let modelsToDisplay = [];
+    if (selectedTeam && selectedTeam.models) {
+        modelsToDisplay = selectedTeam.models;
+    }
+
+    // check if "all-proxy-models" is in modelsToDisplay
+    if (modelsToDisplay && modelsToDisplay.includes("all-proxy-models")) {
+        console.log("user models:", userModels);
+        modelsToDisplay = userModels;
+    }
+    return (
+        <>
+        <div className="mb-5">
+        <p className="text-3xl mb-2 text-tremor-content-strong dark:text-dark-tremor-content-strong">Team: {selectedTeam?.team_alias}</p>
+        <Accordion>
+            <AccordionHeader>
+            <Text><b>Team Models</b></Text>
+            </AccordionHeader>
+            <AccordionBody>
+            <List>
+            {modelsToDisplay.map((model: string, index: number) => (
+                <ListItem>
+                    {model}
+                </ListItem>
+            ))}
+            </List>
+            </AccordionBody>
+        </Accordion>
+        </div>
+
+        
+    </>
+    )
+}
+
+export default ViewUserTeam;
+