diff --git a/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx b/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx index 2c32d88bd..551e8d37a 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 c52ca1631..4d2752a9b 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/teams.tsx b/ui/litellm-dashboard/src/components/teams.tsx index 95f097bf0..d11d7a842 100644 --- a/ui/litellm-dashboard/src/components/teams.tsx +++ b/ui/litellm-dashboard/src/components/teams.tsx @@ -152,16 +152,16 @@ const Team: React.FC = ({ - - daily - weekly - monthly - - + className="mt-8" + label="Reset Budget" + name="budget_duration" + > + + daily + weekly + monthly + +