From 860f20d1abb2556b284c1c006bb8711edeb40956 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 22 Apr 2024 13:27:42 -0700
Subject: [PATCH 1/4] ui - cleanup litellm logo

---
 ui/litellm-dashboard/src/components/navbar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index 9e25c797eb..eddbb0b78b 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -55,11 +55,11 @@ const Navbar: React.FC<NavbarProps> = ({
       <div className="text-left my-2 absolute top-0 left-0">
         <div className="flex flex-col items-center">
           <Link href="/">
-            <button className="text-gray-800 text-2xl py-1 rounded text-center">
+            <button className="text-gray-800 rounded text-center">
               <img
                 src={imageUrl}
-                width={200}
-                height={200}
+                width={160}
+                height={160}
                 alt="LiteLLM Brand"
                 className="mr-2"
               />

From 69121360ba82aa382eb850ba608795bdfb12c568 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 22 Apr 2024 13:29:48 -0700
Subject: [PATCH 2/4] fix text input box on ui

---
 .../src/components/create_key_button.tsx      | 149 +-----------------
 1 file changed, 3 insertions(+), 146 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index d950c3be5c..976ac2ccfd 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -116,7 +116,6 @@ const CreateKey: React.FC<CreateKeyProps> = ({
           wrapperCol={{ span: 16 }}
           labelAlign="left"
         >
-          {userRole === "App Owner" || userRole === "Admin" ? (
             <>
               <Form.Item 
                 label="Key Name" 
@@ -124,7 +123,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                 rules={[{ required: true, message: 'Please input a key name' }]}
                 help="required"
               >
-                <Input />
+                <TextInput placeholder="" />
               </Form.Item>
               <Form.Item
                 label="Team ID"
@@ -188,147 +187,6 @@ const CreateKey: React.FC<CreateKeyProps> = ({
 
                 </Select>
               </Form.Item>
-              <Form.Item 
-                className="mt-8"
-                label="Max Budget (USD)" 
-                name="max_budget" 
-                help={`Budget cannot exceed team max budget: $${team?.max_budget !== null && team?.max_budget !== undefined ? team?.max_budget : 'unlimited'}`}
-                rules={[
-                  {
-                      validator: async (_, value) => {
-                          if (value && team && team.max_budget !== null && value > team.max_budget) {
-                              throw new Error(`Budget cannot exceed team max budget: $${team.max_budget}`);
-                          }
-                      },
-                  },
-              ]}
-              >
-                <InputNumber step={0.01} precision={2} width={200} />
-              </Form.Item>
-              <Form.Item 
-              className="mt-8"
-              label="Reset Budget" 
-              name="budget_duration"
-              help={`Team Reset Budget: ${team?.budget_duration !== null && team?.budget_duration !== undefined ? team?.budget_duration : 'None'}`}
-              >
-                <Select defaultValue={null} placeholder="n/a">
-                  <Select.Option value="24h">daily</Select.Option>
-                  <Select.Option value="30d">monthly</Select.Option>
-                </Select>
-              </Form.Item>
-              <Form.Item 
-                className="mt-8"
-                label="Tokens per minute Limit (TPM)" 
-                name="tpm_limit" 
-                help={`TPM cannot exceed team TPM limit: ${team?.tpm_limit !== null && team?.tpm_limit !== undefined ? team?.tpm_limit : 'unlimited'}`}
-                rules={[
-                  {
-                      validator: async (_, value) => {
-                          if (value && team && team.tpm_limit !== null && value > team.tpm_limit) {
-                              throw new Error(`TPM limit cannot exceed team TPM limit: ${team.tpm_limit}`);
-                          }
-                      },
-                  },
-              ]}
-                >
-                <InputNumber step={1} width={400} />
-              </Form.Item>
-              <Form.Item
-                className="mt-8"
-                label="Requests per minute Limit (RPM)"
-                name="rpm_limit"
-                help={`RPM cannot exceed team RPM limit: ${team?.rpm_limit !== null && team?.rpm_limit !== undefined ? team?.rpm_limit : 'unlimited'}`}
-                rules={[
-                  {
-                      validator: async (_, value) => {
-                          if (value && team && team.rpm_limit !== null && value > team.rpm_limit) {
-                              throw new Error(`RPM limit cannot exceed team RPM limit: ${team.rpm_limit}`);
-                          }
-                      },
-                  },
-              ]}
-              >
-                <InputNumber step={1} width={400} />
-              </Form.Item>
-              <Form.Item label="Expire Key (eg: 30s, 30h, 30d)" name="duration" className="mt-8">
-                <Input />
-              </Form.Item>
-              <Form.Item label="Metadata" name="metadata">
-                <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
-              </Form.Item>
-            </>
-          ) : (
-            <>
-              <Form.Item 
-                label="Key Name" 
-                name="key_alias"
-                rules={[{ required: true, message: 'Please input a key name' }]}
-                help="required"
-              >
-                <Input />
-              </Form.Item>
-              <Form.Item
-                label="Team ID"
-                name="team_id"
-                hidden={true}
-                initialValue={team ? team["team_id"] : null}
-                valuePropName="team_id"
-                className="mt-8"
-              >
-                <Input value={team ? team["team_alias"] : ""} disabled />
-              </Form.Item>
-
-              <Form.Item 
-                label="Models" 
-                name="models"
-                className="mb-12"
-                rules={[{ required: true, message: 'Please select a model' }]}
-                help="required"
-              >
-                <Select
-                  mode="multiple"
-                  placeholder="Select models"
-                  style={{ width: "100%" }}
-                  onChange={(values) => {
-                    const isAllTeamModelsSelected = values.includes("all-team-models");
-              
-                    if (isAllTeamModelsSelected) {
-                      const newValues = ["all-team-models"];
-                      form.setFieldsValue({ models: newValues });
-                    }
-                  }}
-
-                >
-                    <Option key="all-team-models" value="all-team-models">
-                      All Team Models
-                    </Option>
-                    {team && team.models ? (
-                      team.models.includes("all-proxy-models") ? (
-                        userModels.map((model: string) => (
-                          (
-                            <Option key={model} value={model}>
-                              {model}
-                            </Option>
-                          )
-                        ))
-                      ) : (
-                        team.models.map((model: string) => (
-                          <Option key={model} value={model}>
-                            {model}
-                          </Option>
-                        ))
-                      )
-                    ) : (
-                      userModels.map((model: string) => (
-                        <Option key={model} value={model}>
-                          {model}
-                        </Option>
-                      ))
-                    )}
-
-                </Select>
-              </Form.Item>
-
               <Accordion className="mt-20 mb-8" >
                 <AccordionHeader>
                   <b>Optional Settings</b>
@@ -397,7 +255,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                 <InputNumber step={1} width={400} />
               </Form.Item>
               <Form.Item label="Expire Key (eg: 30s, 30h, 30d)" name="duration" className="mt-8">
-                <Input />
+                <TextInput placeholder="" />
               </Form.Item>
               <Form.Item label="Metadata" name="metadata">
                 <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
@@ -405,9 +263,8 @@ const CreateKey: React.FC<CreateKeyProps> = ({
 
                 </AccordionBody>
               </Accordion>
-
             </>
-          )}
+          
           <div style={{ textAlign: "right", marginTop: "10px" }}>
             <Button2 htmlType="submit">Create Key</Button2>
           </div>

From 40ae95163461280b91bb414d70a9b087623f2ad7 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 22 Apr 2024 13:34:23 -0700
Subject: [PATCH 3/4] ui - cleanup input text boxes

---
 ui/litellm-dashboard/src/components/create_user_button.tsx | 4 ++--
 ui/litellm-dashboard/src/components/teams.tsx              | 3 ++-
 ui/litellm-dashboard/src/components/view_users.tsx         | 3 ++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/create_user_button.tsx b/ui/litellm-dashboard/src/components/create_user_button.tsx
index b3fbfd5d77..c0332b35c0 100644
--- a/ui/litellm-dashboard/src/components/create_user_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_user_button.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Button, Modal, Form, Input, message, Select, InputNumber } from "antd";
-import { Button as Button2, Text } from "@tremor/react";
+import { Button as Button2, Text, TextInput } from "@tremor/react";
 import { userCreateCall, modelAvailableCall } from "./networking";
 const { Option } = Select;
 
@@ -94,7 +94,7 @@ const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken, teams }) =
           labelAlign="left"
         >
           <Form.Item label="User Email" name="user_email">
-            <Input placeholder="Enter User Email" />
+            <TextInput placeholder="" />
           </Form.Item>
           <Form.Item label="Team ID" name="team_id">
           <Select
diff --git a/ui/litellm-dashboard/src/components/teams.tsx b/ui/litellm-dashboard/src/components/teams.tsx
index 26c5c9bac9..3cafe12673 100644
--- a/ui/litellm-dashboard/src/components/teams.tsx
+++ b/ui/litellm-dashboard/src/components/teams.tsx
@@ -20,6 +20,7 @@ import {
   TableHead,
   TableHeaderCell,
   TableRow,
+  TextInput,
   Card,
   Icon,
   Button,
@@ -480,7 +481,7 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
                   name="team_alias"
                   rules={[{ required: true, message: 'Please input a team name' }]}
                 >
-                  <Input />
+                  <TextInput placeholder="" />
                 </Form.Item>
                 <Form.Item label="Models" name="models">
                   <Select2
diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx
index d9fa5f7844..192ff490a1 100644
--- a/ui/litellm-dashboard/src/components/view_users.tsx
+++ b/ui/litellm-dashboard/src/components/view_users.tsx
@@ -21,7 +21,8 @@ import {
   SelectItem,
   Dialog, 
   DialogPanel,
-  Icon
+  Icon,
+  TextInput,
 } from "@tremor/react";
 import { userInfoCall, adminTopEndUsersCall } from "./networking";
 import { Badge, BadgeDelta, Button } from "@tremor/react";

From 753bed86e532a26b6175cc5e091ad24f5933c027 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 22 Apr 2024 13:44:37 -0700
Subject: [PATCH 4/4] ui - clean up order

---
 .../src/components/leftnav.tsx                | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index 326568e34d..461c360f97 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -46,8 +46,8 @@ const Sidebar: React.FC<SidebarProps> = ({
     );
   }
   return (
-    <Layout style={{ minHeight: "100vh", maxWidth: "130px" }}>
-      <Sider width={130}>
+    <Layout style={{ minHeight: "100vh", maxWidth: "145px" }}>
+      <Sider width={145}>
         <Menu
           mode="inline"
           defaultSelectedKeys={defaultSelectedKey ? defaultSelectedKey : ["1"]}
@@ -64,11 +64,7 @@ const Sidebar: React.FC<SidebarProps> = ({
             </Text>
           </Menu.Item>
 
-              <Menu.Item key="11" onClick={() => setPage("api_ref")}>
-              <Text>
-                API Reference
-                </Text>
-              </Menu.Item>
+              
 
           {
             userRole == "Admin" ? (
@@ -79,15 +75,6 @@ const Sidebar: React.FC<SidebarProps> = ({
               </Menu.Item>
             ) : null
           }
-
-          {userRole == "Admin" ? (
-            <Menu.Item key="6" onClick={() => setPage("teams")}>
-              <Text>
-              Teams
-              </Text>
-            </Menu.Item>
-          ) : null}
-
           {
             userRole == "Admin" ? (
               <Menu.Item key="4" onClick={() => setPage("usage")}>
@@ -98,6 +85,16 @@ const Sidebar: React.FC<SidebarProps> = ({
 
               ) : null
           }
+
+          {userRole == "Admin" ? (
+            <Menu.Item key="6" onClick={() => setPage("teams")}>
+              <Text>
+              Teams
+              </Text>
+            </Menu.Item>
+          ) : null}
+
+
           
             {userRole == "Admin" ? (
             <Menu.Item key="5" onClick={() => setPage("users")}>
@@ -111,7 +108,7 @@ const Sidebar: React.FC<SidebarProps> = ({
             userRole == "Admin" ? (
               <Menu.Item key="8" onClick={() => setPage("settings")}>
                 <Text>
-                  Integrations
+                  Logging & Alerts
                 </Text>
                 </Menu.Item>
               ) : null
@@ -134,6 +131,11 @@ const Sidebar: React.FC<SidebarProps> = ({
               </Text>
             </Menu.Item>
           ) : null}
+          <Menu.Item key="11" onClick={() => setPage("api_ref")}>
+              <Text>
+                API Reference
+                </Text>
+              </Menu.Item>
         </Menu>
       </Sider>
     </Layout>