build(ui): show users the teams they're in

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

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+import { Typography } from "antd";
+import { Select, SelectItem } from "@tremor/react";
+
+interface DashboardTeamProps {
+  teams: string[] | null;
+}
+
+const DashboardTeam: React.FC<DashboardTeamProps> = ({ teams }) => {
+  const { Title, Paragraph } = Typography;
+  const [value, setValue] = useState("");
+  console.log(`received teams ${teams}`);
+  return (
+    <div className="mt-10">
+      <Title level={4}>Default Team</Title>
+      <Paragraph>
+        If you belong to multiple teams, this setting controls which
+        organization is used by default when creating new API Keys.
+      </Paragraph>
+      {teams && teams.length > 0 ? (
+        <Select
+          id="distance"
+          value={value}
+          onValueChange={setValue}
+          className="mt-2"
+        >
+          {teams.map((model) => (
+            <SelectItem value="model">{model}</SelectItem>
+          ))}
+        </Select>
+      ) : (
+        <Paragraph>
+          No team created. <b>Defaulting to personal account.</b>
+        </Paragraph>
+      )}
+    </div>
+  );
+};
+
+export default DashboardTeam;

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

@@ -30,13 +30,14 @@ const Sidebar: React.FC<SidebarProps> = ({ setPage, userRole }) => {
           <Menu.Item key="4" onClick={() => setPage("usage")}>
             Usage
           </Menu.Item>
-          {
+          {userRole == "Admin" ? (
-            userRole == "Admin" ? 
+            <Menu.Item key="5" onClick={() => setPage("users")}>
-              <Menu.Item key="5" onClick={() => setPage("users")}>
+              Users
-                Users
+            </Menu.Item>
-              </Menu.Item>
+          ) : null}
-            : null
+          <Menu.Item key="6" onClick={() => setPage("teams")}>
-          }
+            Teams
+          </Menu.Item>
         </Menu>
       </Sider>
     </Layout>

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

@@ -5,6 +5,7 @@ import { Grid, Col, Card, Text } from "@tremor/react";
 import CreateKey from "./create_key_button";
 import ViewKeyTable from "./view_key_table";
 import ViewUserSpend from "./view_user_spend";
+import DashboardTeam from "./dashboard_default_team";
 import EnterProxyUrl from "./enter_proxy_url";
 import { message } from "antd";
 import Navbar from "./navbar";
@@ -36,6 +37,7 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
   setUserEmail,
 }) => {
   const [data, setData] = useState<null | any[]>(null); // Keep the initialization of state here
+  const [teams, setTeams] = useState<null | string[]>(null); // Keep the initialization of state here
   const [userSpendData, setUserSpendData] = useState<UserSpendData | null>(
     null
   );
@@ -111,8 +113,14 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
         const fetchData = async () => {
           try {
             const response = await userInfoCall(accessToken, userID, userRole);
+            console.log(
+              `received teams in user dashboard: ${Object.keys(
+                response
+              )}; team type: ${Array.isArray(response.teams)}`
+            );
             setUserSpendData(response["user_info"]);
             setData(response["keys"]); // Assuming this is the correct path to your data
+            setTeams(response["teams"]);
             sessionStorage.setItem(
               "userData" + userID,
               JSON.stringify(response["keys"])
@@ -191,6 +199,7 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
             data={data}
             setData={setData}
           />
+          <DashboardTeam teams={teams} />
         </Col>
       </Grid>
     </div>