hidden dashboard routing, dev and build env files

Author: ARajan1084

ui/litellm-dashboard/.env.development

@@ -0,0 +1,2 @@
+NODE_ENV=development
+NEXT_PUBLIC_BASE_URL=""

ui/litellm-dashboard/.env.production

@@ -0,0 +1,2 @@
+NODE_ENV=production
+NEXT_PUBLIC_BASE_URL="ui/"

ui/litellm-dashboard/src/app/dashboard/components/Sidebar2.tsx renamed to ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx

@@ -46,6 +46,21 @@ interface MenuItem {
   icon?: React.ReactNode;
 }
 
+/** ---------- Base URL helpers ---------- */
+/** Normalizes NEXT_PUBLIC_BASE_URL into either "" or "/something" (no trailing slash). */
+const getBasePath = () => {
+  const raw = process.env.NEXT_PUBLIC_BASE_URL ?? "";
+  const trimmed = raw.replace(/^\/+|\/+$/g, ""); // strip leading/trailing slashes
+  return trimmed ? `/${trimmed}` : "";
+};
+
+/** Joins base path with a relative path like "virtual-keys" or "/virtual-keys" -> "/base/virtual-keys" */
+const withBase = (relativePath: string) => {
+  const base = getBasePath(); // "" or "/ui" (no trailing slash)
+  const rel = relativePath.replace(/^\/+/, ""); // drop any leading slash
+  return `${base}/${rel}`.replace(/\/{2,}/g, "/"); // collapse accidental doubles
+};
+
 const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelectedKey, collapsed = false }) => {
   const menuItems: MenuItem[] = [
     { key: "1", page: "api-keys", label: "Virtual Keys", icon: <KeyOutlined style={{ fontSize: 18 }} /> },
@@ -217,25 +232,31 @@ const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelect
     return "1";
   };
 
+  // Match Virtual Keys path with base prefix (e.g., "/virtual-keys" or "/ui/virtual-keys")
+  const virtualKeysPath = withBase("virtual-keys");
+
   const selectedMenuKey =
-    pathname === "/dashboard/virtual-keys"
+    pathname === virtualKeysPath
       ? "1"
       : pageParam
         ? findMenuItemKey(pageParam)
         : defaultSelectedKey
           ? findMenuItemKey(defaultSelectedKey)
           : "1";
 
-  // Root-only routing helper: always replace everything after the domain
-  const rootWithPage = (p: string) => ({ pathname: "/", query: { page: p } });
+  // Root-only routing helper: always replace everything after the domain, honoring base path
+  const rootWithPage = (p: string) => ({
+    pathname: getBasePath() || "/",
+    query: { page: p },
+  });
 
   // Convert to AntD Menu items:
-  // - "Virtual Keys" still routes to /virtual-keys
-  // - All other items (and children) route to "/?page=<page>"
+  // - "Virtual Keys" routes to "/<BASE>/virtual-keys"
+  // - All other items (and children) route to "/<BASE>/?page=<page>"
   const antdItems = filteredMenuItems.map((item) => {
     const isVirtualKeys = item.key === "1";
     const label = isVirtualKeys ? (
-      <Link href="/virtual-keys">Virtual Keys</Link>
+      <Link href={withBase("virtual-keys")}>Virtual Keys</Link>
     ) : (
       <Link href={rootWithPage(item.page)}>{item.label}</Link>
     );

ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
+import Sidebar from "@/components/leftnav";
+import React from "react";
+import useFeatureFlags from "@/hooks/useFeatureFlags";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+interface SidebarProviderProps {
+  defaultSelectedKey: string;
+  sidebarCollapsed: boolean;
+  setPage: (page: string) => void;
+}
+
+const SidebarProvider = ({ defaultSelectedKey, sidebarCollapsed, setPage }: SidebarProviderProps) => {
+  const { accessToken, userRole } = useAuthorized();
+  const { refactoredUIFlag, setRefactoredUIFlag } = useFeatureFlags();
+
+  return refactoredUIFlag ? (
+    <Sidebar2 accessToken={accessToken} userRole={userRole} />
+  ) : (
+    <Sidebar
+      accessToken={accessToken}
+      setPage={setPage}
+      userRole={userRole}
+      defaultSelectedKey={defaultSelectedKey}
+      collapsed={sidebarCollapsed}
+    />
+  );
+};
+
+export default SidebarProvider;

ui/litellm-dashboard/src/app/dashboard/components/modals/CreateUserModal.tsx renamed to ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx

@@ -29,9 +29,9 @@ import {
 } from "@/components/networking";
 import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
 import BulkCreateUsersButton from "@/components/bulk_create_users_button";
-import { fetchTeams } from "@/app/dashboard/virtual-keys/networking";
-import useTeams from "@/app/dashboard/virtual-keys/hooks/useTeams";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import { fetchTeams } from "@/app/(dashboard)/virtual-keys/networking";
+import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 // Helper function to generate UUID compatible across all environments
 const generateUUID = (): string => {

ui/litellm-dashboard/src/app/dashboard/hooks/useAuthorized.ts renamed to ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts

@@ -3,8 +3,8 @@
 import React from "react";
 import Navbar from "@/components/navbar";
 import { ThemeProvider } from "@/contexts/ThemeContext";
-import Sidebar2 from "@/app/dashboard/components/Sidebar2";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const { accessToken, userRole } = useAuthorized();

ui/litellm-dashboard/src/app/dashboard/layout.tsx renamed to ui/litellm-dashboard/src/app/(dashboard)/layout.tsx

@@ -6,9 +6,9 @@ import { Modal, Form } from "antd";
 import { getPossibleUserRoles, Organization } from "@/components/networking";
 import { rolesWithWriteAccess } from "@/utils/roles";
 import { Team } from "@/components/key_team_helpers/key_list";
-import CreateKeyModal from "@/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyModal";
-import CreateUserModal from "@/app/dashboard/components/modals/CreateUserModal";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import CreateKeyModal from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyModal";
+import CreateUserModal from "@/app/(dashboard)/components/modals/CreateUserModal";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 interface CreateKeyProps {
   team: Team | null;

ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKey.tsx renamed to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKey.tsx

@@ -17,7 +17,7 @@ import SchemaFormFields from "@/components/common_components/check_openapi_schem
 import { Team } from "@/components/key_team_helpers/key_list";
 import React from "react";
 import { DefaultOptionType } from "rc-select/lib/Select";
-import { ModelAliases } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/types";
+import { ModelAliases } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/types";
 
 export interface OptionalSettingsSectionProps {
   form: FormInstance;