(feat) view role on ui

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

@@ -9,14 +9,13 @@ import { Button, Text, Metric,Title, TextInput, Grid, Col } from "@tremor/react"
 // Define the props type
 interface NavbarProps {
     userID: string | null;
+    userRole: string | null;
 }
-const Navbar: React.FC<NavbarProps> = ({ userID }) => {
+const Navbar: React.FC<NavbarProps> = ({ userID, userRole }) => {
-    const searchParams = useSearchParams();
-    const token = searchParams.get("token");
     console.log("User ID:", userID);
 
     return (
-        <nav className="left-0 right-0 top-0 flex justify-between items-center h-12">
+        <nav className="left-0 right-0 top-0 flex justify-between items-center h-12 mb-4">
             <div className="text-left mx-4 my-2 absolute top-0 left-0">
                 <div className="flex flex-col items-center">
                 <Link href="/">
@@ -27,6 +26,7 @@ const Navbar: React.FC<NavbarProps> = ({ userID }) => {
             <div className="text-right mx-4 my-2 absolute top-0 right-0">
                 <Button color="white">
                 <Title>{userID}</Title>
+                <Text>Role: {userRole}</Text>
                 </Button>
             </div>
             

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

@@ -20,8 +20,26 @@ const UserDashboard = () => {
 
   const token = searchParams.get("token");
   const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [userRole, setUserRole] = useState<string | null>(null);
 
 
+  function formatUserRole(userRole: string) {
+    if (!userRole) {
+      return "Undefined Role";
+    }
+  
+    switch (userRole.toLowerCase()) {
+      case "app_owner":
+        return "App Owner";
+      case "admin":
+        return "Admin";
+      case "app_user":
+        return "App User";
+      default:
+        return "Unknown Role";
+    }
+  }
+
   // Moved useEffect inside the component and used a condition to run fetch only if the params are available
   useEffect(() => {
     if (token){
@@ -33,8 +51,16 @@ const UserDashboard = () => {
         console.log("Decoded key:", decoded.key);
         // set accessToken
         setAccessToken(decoded.key);
-      }
 
+        // check if userRole is defined
+        if (decoded.user_role) {
+          const formattedUserRole = formatUserRole(decoded.user_role);
+          console.log("Decoded user_role:", formattedUserRole);
+          setUserRole(formattedUserRole);
+        } else {
+          console.log("User role not defined");
+        }
+      }
     }
     if (userID && accessToken  && !data) {
       const fetchData = async () => {
@@ -72,6 +98,7 @@ const UserDashboard = () => {
     <div>
       <Navbar
         userID={userID}
+        userRole={userRole}
       />
       <Grid numItems={1} className="gap-0 p-10 h-[75vh] w-full">
       <Col numColSpan={1}>