diff --git a/ui/litellm-dashboard/src/components/dashboard_default_team.tsx b/ui/litellm-dashboard/src/components/dashboard_default_team.tsx new file mode 100644 index 000000000..8520096df --- /dev/null +++ b/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 = ({ teams }) => { + const { Title, Paragraph } = Typography; + const [value, setValue] = useState(""); + console.log(`received teams ${teams}`); + return ( +
+ Default Team + + If you belong to multiple teams, this setting controls which + organization is used by default when creating new API Keys. + + {teams && teams.length > 0 ? ( + + ) : ( + + No team created. Defaulting to personal account. + + )} +
+ ); +}; + +export default DashboardTeam; diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx index 8a13d2213..da7e9f432 100644 --- a/ui/litellm-dashboard/src/components/leftnav.tsx +++ b/ui/litellm-dashboard/src/components/leftnav.tsx @@ -30,13 +30,14 @@ const Sidebar: React.FC = ({ setPage, userRole }) => { setPage("usage")}> Usage - { - userRole == "Admin" ? - setPage("users")}> - Users - - : null - } + {userRole == "Admin" ? ( + setPage("users")}> + Users + + ) : null} + setPage("teams")}> + Teams + diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx index ad0070864..74ab3890c 100644 --- a/ui/litellm-dashboard/src/components/user_dashboard.tsx +++ b/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 = ({ setUserEmail, }) => { const [data, setData] = useState(null); // Keep the initialization of state here + const [teams, setTeams] = useState(null); // Keep the initialization of state here const [userSpendData, setUserSpendData] = useState( null ); @@ -111,8 +113,14 @@ const UserDashboard: React.FC = ({ 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 = ({ data={data} setData={setData} /> +