From 9a503980c4edab7ed00179e228e160969b50de6b Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 3 Feb 2024 11:58:13 -0800
Subject: [PATCH 1/4] (feat) ui - show username on dashboard

---
 ui/litellm-dashboard/src/app/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/app/globals.css b/ui/litellm-dashboard/src/app/globals.css
index 12ff7cd519f..30f3a326bb4 100644
--- a/ui/litellm-dashboard/src/app/globals.css
+++ b/ui/litellm-dashboard/src/app/globals.css
@@ -4,7 +4,7 @@
 
 :root {
   --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
+  --background-start-rgb: 255, 255, 255;
   --background-end-rgb: 255, 255, 255;
 }
 

From cb7f6bc3a143892f7efa2e5f09069d925456353d Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 3 Feb 2024 11:58:44 -0800
Subject: [PATCH 2/4] (fix) cleanup navbar

---
 .../src/components/navbar.tsx                 | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index ebba1e20989..ba251786287 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -1,7 +1,17 @@
+"use client";
+
 import Link from 'next/link';
 import Image from 'next/image'
 import React, { useState } from 'react';
+import { useSearchParams } from "next/navigation";
+import { Button, Text, Metric,Title, TextInput, Grid, Col } from "@tremor/react";
 function Navbar() {
+    const searchParams = useSearchParams();
+
+    const userID = searchParams.get("userID");
+
+    console.log("User ID:", userID);
+
     return (
         <nav className="left-0 right-0 top-0 flex justify-between items-center h-12">
             <div className="text-left mx-4 my-2 absolute top-0 left-0">
@@ -12,13 +22,11 @@ function Navbar() {
             </div>
             </div>
             <div className="text-right mx-4 my-2 absolute top-0 right-0">
-            <a href="https://docs.litellm.ai/docs/" target="_blank" rel="noopener noreferrer">
-                <button className="border border-gray-800 rounded-lg text-gray-800 text-xl px-4 py-1 rounded p-1 mr-2 text-center">Docs</button>
-            </a>
-            <a href="https://calendly.com/d/4mp-gd3-k5k/berriai-1-1-onboarding-litellm-hosted-version" target="_blank" rel="noopener noreferrer">
-                <button className="border border-gray-800 rounded-lg text-gray-800 text-xl px-4 py-1 rounded p-1 text-center">Schedule Demo</button>
-            </a>
+                <Button color='transparent'>
+                <Title>{userID}</Title>
+                </Button>
             </div>
+            
         </nav>
     )
 }

From 1a8bfbca6ae7930cc8aa4c284e623e107e890030 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 3 Feb 2024 12:09:10 -0800
Subject: [PATCH 3/4] (feat) display userID on navbar

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

diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index ba251786287..75b5ada9be4 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -5,11 +5,14 @@ import Image from 'next/image'
 import React, { useState } from 'react';
 import { useSearchParams } from "next/navigation";
 import { Button, Text, Metric,Title, TextInput, Grid, Col } from "@tremor/react";
-function Navbar() {
+
+// Define the props type
+interface NavbarProps {
+    userID: string | null;
+}
+const Navbar: React.FC<NavbarProps> = ({ userID }) => {
     const searchParams = useSearchParams();
-
-    const userID = searchParams.get("userID");
-
+    const token = searchParams.get("token");
     console.log("User ID:", userID);
 
     return (
@@ -22,7 +25,7 @@ function Navbar() {
             </div>
             </div>
             <div className="text-right mx-4 my-2 absolute top-0 right-0">
-                <Button color='transparent'>
+                <Button color="white">
                 <Title>{userID}</Title>
                 </Button>
             </div>

From 1dcb8c8097d804d2867894f6a054f87791003e9c Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 3 Feb 2024 12:09:49 -0800
Subject: [PATCH 4/4] (feat) view userID on navbar

---
 ui/litellm-dashboard/src/app/page.tsx                |  3 +--
 ui/litellm-dashboard/src/components/networking.tsx   |  3 ++-
 .../src/components/user_dashboard.tsx                | 12 ++++++++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index f475c5e316a..f806050c6be 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -4,8 +4,7 @@ import UserDashboard from "../components/user_dashboard";
 const CreateKeyPage = () => {
   return (
     <Suspense fallback={<div>Loading...</div>}>
-    <div className="flex min-h-screen flex-col items-center">
-      <Navbar />
+    <div className="flex min-h-screen flex-col ">
       <UserDashboard />
     </div>
     </Suspense>
diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index 6384005c1af..7859c6a8cd9 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -3,7 +3,8 @@
  */
 import { message } from 'antd';
 
-const proxyBaseUrl = null
+// const proxyBaseUrl = null;
+const proxyBaseUrl = "http://localhost:4000" // http://localhost:4000
 
 export const keyCreateCall = async (
   accessToken: string,
diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx
index 4a0a72e189d..db09cd8d1b7 100644
--- a/ui/litellm-dashboard/src/components/user_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx
@@ -5,10 +5,12 @@ 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 Navbar from "./navbar";
 import { useSearchParams } from "next/navigation";
 import { jwtDecode } from "jwt-decode";
 
-const proxyBaseUrl = null
+// const proxyBaseUrl = null;
+const proxyBaseUrl = "http://localhost:4000" // http://localhost:4000
 
 const UserDashboard = () => {
   const [data, setData] = useState<null | any[]>(null); // Keep the initialization of state here
@@ -67,7 +69,11 @@ const UserDashboard = () => {
 
   
   return (
-    <Grid numItems={1} className="gap-0 p-10 h-[75vh] w-full">
+    <div>
+      <Navbar
+        userID={userID}
+      />
+      <Grid numItems={1} className="gap-0 p-10 h-[75vh] w-full">
       <Col numColSpan={1}>
         <ViewKeyTable
           userID={userID}
@@ -83,6 +89,8 @@ const UserDashboard = () => {
         />
       </Col>
     </Grid>
+    </div>
+
   );
 };