docs(self_serve.md): cleanup docs on how to onboard new users + teams

docs/my-website/docs/proxy/self_serve.md

@@ -173,3 +173,23 @@ export PROXY_LOGOUT_URL="https://www.google.com"
 <Image img={require('../../img/ui_logout.png')}  style={{ width: '400px', height: 'auto' }} />
 
 
+### Set max budget for internal users 
+
+Automatically apply budget per internal user when they sign up
+
+```yaml
+litellm_settings:
+  max_internal_user_budget: 10
+```
+
+This sets a max budget of $10 USD for internal users when they sign up. 
+
+This budget only applies to personal keys created by that user - seen under `Default Team` on the UI. 
+
+<Image img={require('../../img/max_budget_for_internal_users.png')}  style={{ width: '500px', height: 'auto' }} />
+
+This budget does not apply to keys created under non-default teams.
+
+### Set max budget for teams
+
+[**Go Here**](./team_budgets.md)

docs/my-website/docs/proxy/ui.md

@@ -53,6 +53,12 @@ UI_PASSWORD=langchain        # password to sign in on UI
 
 On accessing the LiteLLM UI, you will be prompted to enter your username, password
 
+## Invite-other users 
+
+Allow others to create/delete their own keys. 
+
+[**Go Here**](./self_serve.md)
+
 ## ✨ Enterprise Features
 
 Features here are behind a commercial license in our `/enterprise` folder. [**See Code**](https://github.com/BerriAI/litellm/tree/main/enterprise)

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

@@ -45,32 +45,33 @@ interface ViewUserSpendProps {
 const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userRole, accessToken, userSpend, selectedTeam }) => {
     console.log(`userSpend: ${userSpend}`)
     let [spend, setSpend] = useState(userSpend !== null ? userSpend : 0.0);
-    const [maxBudget, setMaxBudget] = useState(0.0);
+    const [maxBudget, setMaxBudget] = useState(selectedTeam ? selectedTeam.max_budget : null);
+    console.log(`maxBudget: ${maxBudget}, selectedTeam.max_budget: ${selectedTeam.max_budget}, selectedTeam: ${JSON.stringify(selectedTeam)}`)
     const [userModels, setUserModels] = useState([]);
     useEffect(() => {
       const fetchData = async () => {
         if (!accessToken || !userID || !userRole) {
           return;
         }
-        if (userRole === "Admin" && userSpend == null) {
-          try {
-            const globalSpend = await getTotalSpendCall(accessToken);
-            if (globalSpend) {
-              if (globalSpend.spend) {
-                setSpend(globalSpend.spend);
-              } else {
-                setSpend(0.0);
-              }
-              if (globalSpend.max_budget) {
-                setMaxBudget(globalSpend.max_budget);
-              } else {
-                setMaxBudget(0.0);
-              }
-            }
-          } catch (error) {
-            console.error("Error fetching global spend data:", error);
-          }
-        }
+        // if (userRole === "Admin" && userSpend == null) {
+        //   try {
+        //     const globalSpend = await getTotalSpendCall(accessToken);
+        //     if (globalSpend) {
+        //       if (globalSpend.spend) {
+        //         setSpend(globalSpend.spend);
+        //       } else {
+        //         setSpend(0.0);
+        //       }
+        //       if (globalSpend.max_budget) {
+        //         setMaxBudget(globalSpend.max_budget);
+        //       } else {
+        //         setMaxBudget(null);
+        //       }
+        //     }
+        //   } catch (error) {
+        //     console.error("Error fetching global spend data:", error);
+        //   }
+        // }
       };
       const fetchUserModels = async () => {
         try {
@@ -102,6 +103,11 @@ const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userRole, accessT
         setSpend(userSpend)
       }
     }, [userSpend])
+    useEffect(() => {
+      if (selectedTeam && selectedTeam.max_budget !== maxBudget) {
+        setMaxBudget(selectedTeam.max_budget);
+      }
+    }, [selectedTeam, maxBudget]);
 
     // logic to decide what models to display
     let modelsToDisplay = [];
@@ -127,14 +133,24 @@ const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userRole, accessT
     console.log(`spend in view user spend: ${spend}`)
     return (
       <div className="flex items-center">
+       <div className="flex justify-between gap-x-6">
         <div>
           <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
-            Total Spend{" "}
+            Total Spend
           </p>
           <p className="text-2xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">
             ${roundedSpend}
           </p>
         </div>
+        <div>
+          <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
+            Max Budget
+          </p>
+          <p className="text-2xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">
+            {displayMaxBudget}
+          </p>
+        </div>
+      </div>
         {/* <div className="ml-auto">
           <Accordion>
             <AccordionHeader><Text>Team Models</Text></AccordionHeader>