From c22b92439b9efa4d33265aa6d71509cbd6cf6074 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 10 Mar 2025 18:44:07 -0700
Subject: [PATCH 1/3] use helper setProxySettings

---
 .../src/components/navbar.tsx                 | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index 9bdc0fe9b7..b64f72c547 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import type { MenuProps } from "antd";
 import { Dropdown } from "antd";
 import { Organization } from "@/components/networking";
@@ -9,6 +9,8 @@ import {
   LogoutOutlined
 } from '@ant-design/icons';
 import { clearTokenCookies } from "@/utils/cookieUtils";
+import { fetchProxySettings } from "@/utils/proxyUtils";
+
 interface NavbarProps {
   userID: string | null;
   userEmail: string | null;
@@ -16,6 +18,7 @@ interface NavbarProps {
   premiumUser: boolean;
   setProxySettings: React.Dispatch<React.SetStateAction<any>>;
   proxySettings: any;
+  accessToken: string | null;
 }
 
 const Navbar: React.FC<NavbarProps> = ({
@@ -24,10 +27,30 @@ const Navbar: React.FC<NavbarProps> = ({
   userRole,
   premiumUser,
   proxySettings,
+  setProxySettings,
+  accessToken,
 }) => {
   const isLocal = process.env.NODE_ENV === "development";
   const imageUrl = isLocal ? "http://localhost:4000/get_image" : "/get_image";
-  let logoutUrl = proxySettings?.PROXY_LOGOUT_URL || "";
+  const [logoutUrl, setLogoutUrl] = useState("");
+
+  useEffect(() => {
+    const initializeProxySettings = async () => {
+      if (accessToken) {
+        const settings = await fetchProxySettings(accessToken);
+        console.log("response from fetchProxySettings", settings);
+        if (settings) {
+          setProxySettings(settings);
+        }
+      }
+    };
+
+    initializeProxySettings();
+  }, [accessToken]);
+
+  useEffect(() => {
+    setLogoutUrl(proxySettings?.PROXY_LOGOUT_URL || "");
+  }, [proxySettings]);
 
   const handleLogout = () => {
     clearTokenCookies();

From afe0c03376ad0b2dfbd6ff22a28af3fe217e2db3 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 10 Mar 2025 18:44:13 -0700
Subject: [PATCH 2/3] getProxyUISettings

---
 ui/litellm-dashboard/src/utils/proxyUtils.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/utils/proxyUtils.ts

diff --git a/ui/litellm-dashboard/src/utils/proxyUtils.ts b/ui/litellm-dashboard/src/utils/proxyUtils.ts
new file mode 100644
index 0000000000..32e14baddb
--- /dev/null
+++ b/ui/litellm-dashboard/src/utils/proxyUtils.ts
@@ -0,0 +1,13 @@
+import { getProxyUISettings } from "@/components/networking";
+
+export const fetchProxySettings = async (accessToken: string | null) => {
+  if (!accessToken) return null;
+  
+  try {
+    const proxySettings = await getProxyUISettings(accessToken);
+    return proxySettings;
+  } catch (error) {
+    console.error("Error fetching proxy settings:", error);
+    return null;
+  }
+}; 
\ No newline at end of file

From e7eb1708e8b070060b448c1eca8c238e3a4f20af Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 10 Mar 2025 18:44:24 -0700
Subject: [PATCH 3/3] Navbar logout url

---
 ui/litellm-dashboard/src/app/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 2569b22c45..e796444514 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -215,6 +215,7 @@ export default function CreateKeyPage() {
               userEmail={userEmail}
               setProxySettings={setProxySettings}
               proxySettings={proxySettings}
+              accessToken={accessToken}
             />
             <div className="flex flex-1 overflow-auto">
               <div className="mt-8">