diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 0c1a60f557c..61ecdd59a81 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -6,6 +6,7 @@ import UserDashboard from "../components/user_dashboard";
import ModelDashboard from "@/components/model_dashboard";
import ViewUserDashboard from "@/components/view_users";
import Teams from "@/components/teams";
+import AdminPanel from "@/components/admins";
import ChatUI from "@/components/chat_ui";
import Sidebar from "../components/leftnav";
import Usage from "../components/usage";
@@ -133,6 +134,13 @@ const CreateKeyPage = () => {
searchParams={searchParams}
accessToken={accessToken}
/>
+ ) : page == "admin-panel" ? (
+
) : (
>;
+}
+import { teamCreateCall, teamMemberAddCall, Member } from "./networking";
+
+const AdminPanel: React.FC = ({
+ teams,
+ searchParams,
+ accessToken,
+ setTeams,
+}) => {
+ const [form] = Form.useForm();
+ const [memberForm] = Form.useForm();
+ const { Title, Paragraph } = Typography;
+ const [value, setValue] = useState("");
+
+ const [selectedTeam, setSelectedTeam] = useState(
+ teams ? teams[0] : null
+ );
+ const [isTeamModalVisible, setIsTeamModalVisible] = useState(false);
+ const [isAddMemberModalVisible, setIsAddMemberModalVisible] = useState(false);
+ const handleOk = () => {
+ setIsTeamModalVisible(false);
+ form.resetFields();
+ };
+
+ const handleMemberOk = () => {
+ setIsAddMemberModalVisible(false);
+ memberForm.resetFields();
+ };
+
+ const handleCancel = () => {
+ setIsTeamModalVisible(false);
+ form.resetFields();
+ };
+
+ const handleMemberCancel = () => {
+ setIsAddMemberModalVisible(false);
+ memberForm.resetFields();
+ };
+
+ const handleCreate = async (formValues: Record) => {
+ try {
+ if (accessToken != null) {
+ message.info("Making API Call");
+ const response: any = await teamCreateCall(accessToken, formValues);
+ if (teams !== null) {
+ setTeams([...teams, response]);
+ } else {
+ setTeams([response]);
+ }
+ console.log(`response for team create call: ${response}`);
+ setIsTeamModalVisible(false);
+ }
+ } catch (error) {
+ console.error("Error creating the key:", error);
+ }
+ };
+
+ const handleMemberCreate = async (formValues: Record) => {
+ try {
+ if (accessToken != null && teams != null) {
+ message.info("Making API Call");
+ const user_role: Member = {
+ role: "user",
+ user_email: formValues.user_email,
+ user_id: formValues.user_id,
+ };
+ const response: any = await teamMemberAddCall(
+ accessToken,
+ selectedTeam["team_id"],
+ user_role
+ );
+ console.log(`response for team create call: ${response["data"]}`);
+ // Checking if the team exists in the list and updating or adding accordingly
+ const foundIndex = teams.findIndex((team) => {
+ console.log(
+ `team.team_id=${team.team_id}; response.data.team_id=${response.data.team_id}`
+ );
+ return team.team_id === response.data.team_id;
+ });
+ console.log(`foundIndex: ${foundIndex}`);
+ if (foundIndex !== -1) {
+ // If the team is found, update it
+ const updatedTeams = [...teams]; // Copy the current state
+ updatedTeams[foundIndex] = response.data; // Update the specific team
+ setTeams(updatedTeams); // Set the new state
+ setSelectedTeam(response.data);
+ }
+ setIsAddMemberModalVisible(false);
+ }
+ } catch (error) {
+ console.error("Error creating the key:", error);
+ }
+ };
+ console.log(`received teams ${teams}`);
+ return (
+
+
Proxy Admins
+
Add other people to just view global spend.
+
+
+
+
+
+
+ Member Name
+ Role
+ Action
+
+
+
+
+ {selectedTeam
+ ? selectedTeam["members_with_roles"].map(
+ (member: any, index: number) => (
+
+
+ {member["user_email"]
+ ? member["user_email"]
+ : member["user_id"]
+ ? member["user_id"]
+ : null}
+
+ {member["role"]}
+
+
+
+
+ )
+ )
+ : null}
+
+
+
+
+
+
+
+
+
+
+
+