(fix) proxy dashboard

ui/litellm-dashboard/src/components/enter_proxy_url.tsx

@@ -1,44 +1,58 @@
 "use client";
 
-import React, { use, useState } from "react";
+import React, { useState } from "react";
 import { Button, TextInput } from "@tremor/react";
+import { Card, Text } from "@tremor/react";
 
-import { Card, Metric, Text } from "@tremor/react";
+const EnterProxyUrl: React.FC = () => {
-import { createKeyCall } from "./networking";
+  const [proxyUrl, setProxyUrl] = useState<string>("");
-// Define the props type
+  const [isUrlSaved, setIsUrlSaved] = useState<boolean>(false);
-interface EnterProxyUrlProps {
+
-    onUrlChange: (url: string) => void;
+  const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-  }
+    setProxyUrl(event.target.value);
-  
+    // Reset the saved status when the URL changes
-  const EnterProxyUrl: React.FC<EnterProxyUrlProps> = ({ onUrlChange }) => {
+    setIsUrlSaved(false);
-    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;
+  const handleSaveClick = () => {
+    // You can perform any additional validation or actions here
+    // For now, let's just display the message
+    setIsUrlSaved(true);
+  };
+
+  return (
+    <div>
+      <Card decoration="top" decorationColor="blue" style={{ width: '1000px' }}>
+        <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>
+        {/* Display message if the URL is saved */}
+        {isUrlSaved && (
+        <div>
+
+            <p>
+            Save this URL: {window.location.href + "?proxyBaseUrl=" + proxyUrl}
+            </p>
+            <p>
+            Go here 👉 
+            <a href={window.location.href + "?proxyBaseUrl=" + proxyUrl} target="_blank" rel="noopener noreferrer">
+            {window.location.href + "?proxyBaseUrl=" + proxyUrl}
+            </a>
+            </p>
+
+        </div>
+        )}
+
+      </Card>
+    </div>
+  );
+};
+
+export default EnterProxyUrl;

ui/litellm-dashboard/src/components/user_dashboard.tsx

@@ -44,10 +44,12 @@ const UserDashboard = () => {
   }
   else if (userID == null || accessToken == null) {
     // redirect to page: ProxyBaseUrl/google-login/key/generate
-    sessionStorage.setItem('returnUrl', window.location.href);
+    const baseUrl = proxyBaseUrl.endsWith('/') ? proxyBaseUrl : proxyBaseUrl + '/';
+  
+    // Now you can construct the full URL
+    const url = `${baseUrl}google-login/key/generate`;
 
-    
+    window.location.href = url;
-    window.location.href = `${proxyBaseUrl}/google-login/key/generate`;
     
 
     return null;