build(ui): allow admin_viewer to view teams tab

Allows admin viewe role to see available teams on proxy ui

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

@@ -31,6 +31,9 @@ const Sidebar: React.FC<SidebarProps> = ({
             <Menu.Item key="1" onClick={() => setPage("usage")}>
               Usage
             </Menu.Item>
+            <Menu.Item key="6" onClick={() => setPage("teams")}>
+              <Text>Teams</Text>
+            </Menu.Item>
             <Menu.Item key="9" onClick={() => setPage("caching")}>
               <Text>Caching</Text>
             </Menu.Item>

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

@@ -636,6 +636,39 @@ export const teamInfoCall = async (
   }
 };
 
+export const teamListCall = async (
+  accessToken: String,
+) => {
+  /**
+   * Get all available teams on proxy
+   */
+  try {
+    let url = proxyBaseUrl ? `${proxyBaseUrl}/team/list` : `/team/list`;
+    console.log("in teamInfoCall");
+    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");
+    }
+
+    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 getTotalSpendCall = async (accessToken: String) => {
   /**
    * Get all models on proxy

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

@@ -62,6 +62,7 @@ import {
   teamMemberAddCall,
   Member,
   modelAvailableCall,
+  teamListCall
 } from "./networking";
 
 const Team: React.FC<TeamProps> = ({
@@ -72,6 +73,27 @@ const Team: React.FC<TeamProps> = ({
   userID,
   userRole,
 }) => {
+
+  if (teams && teams.length > 0) {
+    console.log(`Received teams: ${JSON.stringify(teams, null, 2)}`);
+  } else {
+    console.log("No teams received or teams array is empty.");
+  }
+
+  useEffect(() => {
+    console.log(`inside useeffect - ${teams}`)
+    if (teams === null && accessToken) {
+      // Call your function here
+      const fetchData = async () => {
+        const givenTeams = await teamListCall(accessToken)
+        console.log(`givenTeams: ${givenTeams}`)
+
+        setTeams(givenTeams)
+      }
+      fetchData()
+    }
+  }, [teams]);
+
   const [form] = Form.useForm();
   const [memberForm] = Form.useForm();
   const { Title, Paragraph } = Typography;