initial budget ui on the provider

src/app/[orgId]/settings/ai-providers/[providerId]/budget/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { SettingsContainer } from "@app/components/Settings";
+import { BudgetsEditor } from "@app/components/BudgetsEditor";
+import { useAiProviderContext } from "@app/hooks/useAiProviderContext";
+import { useTranslations } from "next-intl";
+
+export default function AiProviderBudgetPage() {
+    const { provider } = useAiProviderContext();
+    const t = useTranslations();
+
+    return (
+        <SettingsContainer>
+            <BudgetsEditor
+                orgId={provider.orgId}
+                scope={{ type: "provider", id: provider.providerId }}
+                title={t("aiProviderBudgetSettings")}
+                description={t("aiProviderBudgetSettingsDescription")}
+            />
+        </SettingsContainer>
+    );
+}

src/app/[orgId]/settings/ai-providers/[providerId]/layout.tsx

@@ -76,6 +76,10 @@ export default async function AiProviderLayout({ children, params }: Props) {
         {
             title: t("aiProviderAuthSettings"),
             href: "/{orgId}/settings/ai-providers/{providerId}/authentication"
+        },
+        {
+            title: t("aiProviderBudgetSettings"),
+            href: "/{orgId}/settings/ai-providers/{providerId}/budget"
         }
     ];