From 5ac449a5181745e0fd17f97deeec85ea69fc7a21 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 27 Jan 2024 17:31:59 -0800
Subject: [PATCH] (feat) add enter proxy url screen

---
 .../src/components/enter_proxy_url.tsx        | 44 +++++++++++++++++++
 .../src/components/user_dashboard.tsx         | 15 +++++++
 2 files changed, 59 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/components/enter_proxy_url.tsx

diff --git a/ui/litellm-dashboard/src/components/enter_proxy_url.tsx b/ui/litellm-dashboard/src/components/enter_proxy_url.tsx
new file mode 100644
index 0000000000..7c8267cf5d
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/enter_proxy_url.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import React, { use, useState } from "react";
+import { Button, TextInput } from "@tremor/react";
+
+import { Card, Metric, Text } from "@tremor/react";
+import { createKeyCall } from "./networking";
+// Define the props type
+interface EnterProxyUrlProps {
+    onUrlChange: (url: string) => void;
+  }
+  
+  const EnterProxyUrl: React.FC<EnterProxyUrlProps> = ({ onUrlChange }) => {
+    const [proxyUrl, setProxyUrl] = useState<string>('');
+  
+    const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setProxyUrl(event.target.value);
+    };
+  
+    const handleSaveClick = () => {
+      // You can perform any additional validation or actions here
+      // For now, let's just pass the entered URL to the parent component
+      onUrlChange(proxyUrl);
+    };
+  
+    return (
+      <div>
+        <Card decoration="top" decorationColor="blue" style={{ width: '100%' }}>
+            <Text>Admin Configuration</Text>
+            <label htmlFor="proxyUrl">Enter Proxy URL:</label>
+            <TextInput
+            type="text"
+            id="proxyUrl"
+            value={proxyUrl}
+            onChange={handleUrlChange}
+            placeholder="https://your-proxy-endpoint.com"
+            />
+            <Button onClick={handleSaveClick}>Save</Button>
+        </Card>
+      </div>
+    );
+  };
+  
+export default EnterProxyUrl;
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx
index c7acd36407..1d337979b8 100644
--- a/ui/litellm-dashboard/src/components/user_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx
@@ -3,14 +3,29 @@ import React from "react";
 import { Grid, Col, Card, Text } from "@tremor/react";
 import CreateKey from "./create_key_button";
 import ViewKeyTable from "./view_key_table";
+import EnterProxyUrl from "./enter_proxy_url";
 import { useSearchParams } from "next/navigation";
 
+
+
 export default function UserDashboard() {
   const searchParams = useSearchParams();
   const userID = searchParams.get("userID");
   const accessToken = searchParams.get("accessToken");
   const proxyBaseUrl = searchParams.get("proxyBaseUrl");
 
+  const handleProxyUrlChange = (url: string) => {
+    // Do something with the entered proxy URL, e.g., save it in the state
+    console.log('Entered Proxy URL:', url);
+  };
+
+  if (proxyBaseUrl == null) {
+    return (
+      <div>
+        <EnterProxyUrl onUrlChange={handleProxyUrlChange} />
+      </div>
+    );
+  }
   if (userID == null || accessToken == null || proxyBaseUrl == null) {
     return (
       <Card