Merge pull request #15418 from BerriAI/litellm_ui_teams_refactor_2

LiteLLM Dashboard Teams UI refactor

ui/litellm-dashboard/src/app/(dashboard)/README.md

@@ -0,0 +1,53 @@
+# Contributing to the LiteLLM UI
+
+The LiteLLM UI is currently being refactored/rewritten to reduce development friction. Please read this document to understand what's expected for new contributions.
+
+The project follows strict NextJS file structure. All pages on the site (determined by the sidebar) are contained in their own folder, and routing is automatically handled by NextJS based on the file structure. 
+
+For example, NextJS will automatically render the admin settings page when the user visits `/settings/admin-settings`
+
+```
+.
+├── settings
+    ├── admin-settings
+        └── page.tsx
+```
+
+You can use parenthesis around directory names to hide them from the user route, for example `(dashboard)`, while still getting the benefits of `layout` and file structure.
+
+### File Structure
+Every page must follow the following file structure pattern.
+```
+├── teams
+│   ├── TeamsView.tsx
+│   ├── components
+│   │   ├── TeamsFilters.tsx
+│   │   ├── TeamsHeaderTabs.tsx
+│   │   ├── TeamsTable
+│   │   │   ├── ModelsCell.tsx
+│   │   │   └── TeamsTable.tsx
+│   │   └── modals
+│   │       ├── CreateTeamModal.tsx
+│   │       └── DeleteTeamModal.tsx
+│   ├── hooks
+│   │   └── useFetchTeams.ts
+│   └── page.tsx
+```
+
+### Component  Files
+
+All component files should ideally be as dumb as possible. Their only job should be to take the data they need from hooks or props and render them to the UI. If a component file becomes too large (over `300` lines or so), **please break it down** into smaller components.
+
+A component should only be placed where it will be used. For example, if a component will only be used by the `teams` page, it should belong in the `teams/components` folder. 
+
+**Common components should be moved to the lowest common ancestor components folder.**
+
+### Hooks
+
+All hooks should be pure `.ts` files in a dedicated `hooks` folder unless they serve as context managers.
+
+**Common hooks should be moved to the lowest common ancestor hooks folder.**
+
+### Utils
+
+Any pure `.ts` functions that you need in order to process data should be placed in a local `utils.ts` file.

ui/litellm-dashboard/src/app/page.tsx

@@ -40,6 +40,7 @@ import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { cx } from "@/lib/cva.config";
 import useFeatureFlags from "@/hooks/useFeatureFlags";
 import SidebarProvider from "@/app/(dashboard)/components/SidebarProvider";
+import OldTeams from "@/components/OldTeams";
 
 function getCookie(name: string) {
   // Safer cookie read + decoding; handles '=' inside values
@@ -376,7 +377,7 @@ export default function CreateKeyPage() {
                     setKeys={setKeys}
                   />
                 ) : page == "teams" ? (
-                  <TeamsView
+                  <OldTeams
                     teams={teams}
                     setTeams={setTeams}
                     accessToken={accessToken}
@@ -384,6 +385,7 @@ export default function CreateKeyPage() {
                     userRole={userRole}
                     organizations={organizations}
                     premiumUser={premiumUser}
+                    searchParams={searchParams}
                   />
                 ) : page == "organizations" ? (
                   <Organizations