From b4bcc7143c7c0becc13070130913f0d2fabd3351 Mon Sep 17 00:00:00 2001 From: Achintya Rajan Date: Thu, 9 Oct 2025 17:39:29 -0700 Subject: [PATCH] Update README.md --- .../src/app/(dashboard)/README.md | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/ui/litellm-dashboard/src/app/(dashboard)/README.md b/ui/litellm-dashboard/src/app/(dashboard)/README.md index 532dbd65fad..c913431fc5b 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/README.md +++ b/ui/litellm-dashboard/src/app/(dashboard)/README.md @@ -15,6 +15,25 @@ For example, NextJS will automatically render the admin settings page when the u 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. @@ -25,7 +44,7 @@ A component should only be placed where it will be used. For example, if a compo ### Hooks -All hooks should be pure `.ts` files unless they serve as context managers. +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.**