diff --git a/litellm/proxy/_experimental/out/404.html b/litellm/proxy/_experimental/out/404.html deleted file mode 100644 index e97c72fc132..00000000000 --- a/litellm/proxy/_experimental/out/404.html +++ /dev/null @@ -1 +0,0 @@ -404: This page could not be found.LiteLLM Dashboard

404

This page could not be found.

\ No newline at end of file diff --git a/litellm/proxy/_experimental/out/model_hub.html b/litellm/proxy/_experimental/out/model_hub.html deleted file mode 100644 index 5b965b3bdc2..00000000000 --- a/litellm/proxy/_experimental/out/model_hub.html +++ /dev/null @@ -1 +0,0 @@ -LiteLLM Dashboard \ No newline at end of file diff --git a/litellm/proxy/_experimental/out/onboarding.html b/litellm/proxy/_experimental/out/onboarding.html deleted file mode 100644 index 33efe1f8ea1..00000000000 --- a/litellm/proxy/_experimental/out/onboarding.html +++ /dev/null @@ -1 +0,0 @@ -LiteLLM Dashboard \ No newline at end of file diff --git a/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx b/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx index 2c32d88bd09..551e8d37a02 100644 --- a/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx +++ b/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx @@ -122,6 +122,7 @@ const BudgetModal: React.FC = ({ > diff --git a/ui/litellm-dashboard/src/components/budgets/budget_panel.tsx b/ui/litellm-dashboard/src/components/budgets/budget_panel.tsx index c52ca163188..4d2752a9b59 100644 --- a/ui/litellm-dashboard/src/components/budgets/budget_panel.tsx +++ b/ui/litellm-dashboard/src/components/budgets/budget_panel.tsx @@ -6,6 +6,7 @@ import React, { useState, useEffect } from "react"; import BudgetSettings from "./budget_settings"; import BudgetModal from "./budget_modal"; +import EditBudgetModal from "./edit_budget_modal"; import { Table, TableBody, @@ -43,7 +44,7 @@ interface BudgetSettingsPageProps { accessToken: string | null; } -interface budgetItem { +export interface budgetItem { budget_id: string; max_budget: string | null; rpm_limit: number | null; @@ -52,6 +53,8 @@ interface budgetItem { const BudgetPanel: React.FC = ({ accessToken }) => { const [isModalVisible, setIsModalVisible] = useState(false); + const [isEditModalVisible, setIsEditModalVisible] = useState(false); + const [selectedBudget, setSelectedBudget] = useState(null); const [budgetList, setBudgetList] = useState([]); useEffect(() => { if (!accessToken) { @@ -62,6 +65,15 @@ const BudgetPanel: React.FC = ({ accessToken }) => { }); }, [accessToken]); + + const handleEditCall = async (budget_id: string, index: number) => { + if (accessToken == null) { + return; + } + setSelectedBudget(budgetList[index]) + setIsEditModalVisible(true) + }; + const handleDeleteCall = async (budget_id: string, index: number) => { if (accessToken == null) { return; @@ -94,6 +106,15 @@ const BudgetPanel: React.FC = ({ accessToken }) => { setIsModalVisible={setIsModalVisible} setBudgetList={setBudgetList} /> + { + selectedBudget && + } Create a budget to assign to customers. @@ -119,6 +140,11 @@ const BudgetPanel: React.FC = ({ accessToken }) => { {value.rpm_limit ? value.rpm_limit : "n/a"} + handleEditCall(value.budget_id, index)} + /> >; + setBudgetList: React.Dispatch>; + existingBudget: budgetItem +} +const EditBudgetModal: React.FC = ({ + isModalVisible, + accessToken, + setIsModalVisible, + setBudgetList, + existingBudget +}) => { + const [form] = Form.useForm(); + const handleOk = () => { + setIsModalVisible(false); + form.resetFields(); + }; + + const handleCancel = () => { + setIsModalVisible(false); + form.resetFields(); + }; + + const handleCreate = async (formValues: Record) => { + if (accessToken == null || accessToken == undefined) { + return; + } + try { + message.info("Making API Call"); + // setIsModalVisible(true); + const response = await budgetCreateCall(accessToken, formValues); + console.log("key create Response:", response); + setBudgetList((prevData) => + prevData ? [...prevData, response] : [response] + ); // Check if prevData is null + message.success("API Key Created"); + form.resetFields(); + } catch (error) { + console.error("Error creating the key:", error); + message.error(`Error creating the key: ${error}`, 20); + } + }; + + return ( + +
+ <> + + + + + + + + + + + + + Optional Settings + + + + + + + + + + + + +
+ Edit Budget +
+ + + ); +}; + +export default EditBudgetModal; diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index 83e8d926474..75edb2ef3bc 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -261,6 +261,7 @@ const CreateKey: React.FC = ({ > diff --git a/ui/litellm-dashboard/src/components/teams.tsx b/ui/litellm-dashboard/src/components/teams.tsx index 56d4f5e0d68..8b4b803b563 100644 --- a/ui/litellm-dashboard/src/components/teams.tsx +++ b/ui/litellm-dashboard/src/components/teams.tsx @@ -151,6 +151,17 @@ const Team: React.FC = ({ + + + daily + weekly + monthly + + @@ -635,6 +646,17 @@ const Team: React.FC = ({ + + + daily + weekly + monthly + +