From 163c8f1c5a137e9167c511ef228261cef6b14cc7 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 2 Mar 2024 14:58:02 -0800
Subject: [PATCH 1/2] (feat) set soft budget limits on ui

---
 ui/litellm-dashboard/src/components/create_key_button.tsx     | 3 +++
 ui/litellm-dashboard/src/components/view_key_spend_report.tsx | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index 3dddaf8b7b..b6cec81e4b 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -108,6 +108,9 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                   ))}
                 </Select>
               </Form.Item>
+              <Form.Item label="Soft Budget (USD) Monthly" name="soft_budget">
+                <InputNumber step={0.01} precision={2} defaultValue={50.00} width={200} />
+              </Form.Item>
               <Form.Item label="Max Budget (USD)" name="max_budget">
                 <InputNumber step={0.01} precision={2} width={200} />
               </Form.Item>
diff --git a/ui/litellm-dashboard/src/components/view_key_spend_report.tsx b/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
index 0788af2097..f0916ec017 100644
--- a/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
@@ -105,7 +105,7 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
 
   return (
     <div>
-      <Button size = "xs" onClick={showModal}>
+      <Button size = "xs" onClick={showModal} variant="secondary">
         View Spend Report
       </Button>
       <Modal

From 709c2518e7eb81c488e382fc2cb4fa1134724946 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 2 Mar 2024 15:31:59 -0800
Subject: [PATCH 2/2] (feat) set soft limits per key

---
 .../src/components/create_key_button.tsx      | 50 ++++++++++++-------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index b6cec81e4b..e76e2d0c2b 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect, useRef } from "react";
 import { Button, TextInput, Grid, Col } from "@tremor/react";
-import { Card, Metric, Text } from "@tremor/react";
+import { Card, Metric, Text, Title, Subtitle } from "@tremor/react";
 import {
   Button as Button2,
   Modal,
@@ -38,6 +38,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
   const [form] = Form.useForm();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [apiKey, setApiKey] = useState(null);
+  const [softBudget, setSoftBudget] = useState(null);
   const handleOk = () => {
     setIsModalVisible(false);
     form.resetFields();
@@ -54,8 +55,11 @@ const CreateKey: React.FC<CreateKeyProps> = ({
       message.info("Making API Call");
       setIsModalVisible(true);
       const response = await keyCreateCall(accessToken, userID, formValues);
+
+      console.log("key create Response:", response);
       setData((prevData) => (prevData ? [...prevData, response] : [response])); // Check if prevData is null
       setApiKey(response["key"]);
+      setSoftBudget(response["soft_budget"]);
       message.success("API Key Created");
       form.resetFields();
       localStorage.removeItem("userData" + userID);
@@ -108,7 +112,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                   ))}
                 </Select>
               </Form.Item>
-              <Form.Item label="Soft Budget (USD) Monthly" name="soft_budget">
+              <Form.Item label="Soft Budget (USD) Monthly" name="soft_budget" initialValue={50.00}>
                 <InputNumber step={0.01} precision={2} defaultValue={50.00} width={200} />
               </Form.Item>
               <Form.Item label="Max Budget (USD)" name="max_budget">
@@ -157,28 +161,38 @@ const CreateKey: React.FC<CreateKeyProps> = ({
       </Modal>
       {apiKey && (
         <Modal
-          title="Save your key"
           visible={isModalVisible}
           onOk={handleOk}
           onCancel={handleCancel}
           footer={null}
         >
           <Grid numItems={1} className="gap-2 w-full">
-            <Col numColSpan={1}>
-              <p>
-                Please save this secret key somewhere safe and accessible. For
-                security reasons, <b>you will not be able to view it again</b>{" "}
-                through your LiteLLM account. If you lose this secret key, you
-                will need to generate a new one.
-              </p>
-            </Col>
-            <Col numColSpan={1}>
-              {apiKey != null ? (
-                <Text>API Key: {apiKey}</Text>
-              ) : (
-                <Text>Key being created, this might take 30s</Text>
-              )}
-            </Col>
+            <Card>
+              <Title>Save your Key</Title>
+              <Col numColSpan={1}>
+                <p>
+                  Please save this secret key somewhere safe and accessible. For
+                  security reasons, <b>you will not be able to view it again</b>{" "}
+                  through your LiteLLM account. If you lose this secret key, you
+                  will need to generate a new one.
+                </p>
+              </Col>
+              <Col numColSpan={1}>
+                {apiKey != null ? (
+                  <div>
+                    <Text>API Key: {apiKey}</Text>
+                    <Title className="mt-6">Budgets</Title>
+                      <Text>Soft Limit Budget: ${softBudget}</Text>
+                      <Button className="mt-3">
+                        Test Alert
+                      </Button>
+
+                  </div>
+                ) : (
+                  <Text>Key being created, this might take 30s</Text>
+                )}
+              </Col>
+            </Card>
           </Grid>
         </Modal>
       )}