feat(ui): i18n for budget windows editor

ui/litellm-dashboard/src/components/key_team_helpers/BudgetWindowsEditor.tsx

@@ -1,16 +1,34 @@
 import { Button, InputNumber, Select } from "antd";
-import React from "react";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import type { TFunction } from "i18next";
 
 export interface BudgetWindowEntry {
   budget_duration: string;
   max_budget: number | null;
 }
 
-export const BUDGET_WINDOW_OPTIONS = [
-  { value: "1h", label: "Hourly", resetHint: "Resets every hour" },
-  { value: "24h", label: "Daily", resetHint: "Resets daily at midnight UTC" },
-  { value: "7d", label: "Weekly", resetHint: "Resets every Sunday at midnight UTC" },
-  { value: "30d", label: "Monthly", resetHint: "Resets on the 1st of every month at midnight UTC" },
+const getBudgetWindowOptions = (t: TFunction) => [
+  {
+    value: "1h",
+    label: t("keyTeamHelpers.budgetWindowsEditor.hourly"),
+    resetHint: t("keyTeamHelpers.budgetWindowsEditor.resetsEveryHour"),
+  },
+  {
+    value: "24h",
+    label: t("keyTeamHelpers.budgetWindowsEditor.daily"),
+    resetHint: t("keyTeamHelpers.budgetWindowsEditor.resetsDailyMidnight"),
+  },
+  {
+    value: "7d",
+    label: t("keyTeamHelpers.budgetWindowsEditor.weekly"),
+    resetHint: t("keyTeamHelpers.budgetWindowsEditor.resetsWeeklySunday"),
+  },
+  {
+    value: "30d",
+    label: t("keyTeamHelpers.budgetWindowsEditor.monthly"),
+    resetHint: t("keyTeamHelpers.budgetWindowsEditor.resetsMonthly"),
+  },
 ];
 
 interface BudgetWindowsEditorProps {
@@ -19,6 +37,9 @@ interface BudgetWindowsEditorProps {
 }
 
 export function BudgetWindowsEditor({ value, onChange }: BudgetWindowsEditorProps) {
+  const { t } = useTranslation();
+  const budgetWindowOptions = useMemo(() => getBudgetWindowOptions(t), [t]);
+
   const addWindow = () => {
     onChange([...value, { budget_duration: "24h", max_budget: null }]);
   };
@@ -35,7 +56,7 @@ export function BudgetWindowsEditor({ value, onChange }: BudgetWindowsEditorProp
   return (
     <div>
       {value.map((window, idx) => {
-        const hint = BUDGET_WINDOW_OPTIONS.find((o) => o.value === window.budget_duration)?.resetHint;
+        const hint = budgetWindowOptions.find((o) => o.value === window.budget_duration)?.resetHint;
         return (
           <div key={idx} style={{ marginBottom: 12 }}>
             <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
@@ -43,7 +64,7 @@ export function BudgetWindowsEditor({ value, onChange }: BudgetWindowsEditorProp
                 value={window.budget_duration}
                 onChange={(v) => updateWindow(idx, "budget_duration", v)}
                 style={{ width: 130 }}
-                options={BUDGET_WINDOW_OPTIONS.map((o) => ({ value: o.value, label: o.label }))}
+                options={budgetWindowOptions.map((o) => ({ value: o.value, label: o.label }))}
               />
               <InputNumber
                 step={0.01}
@@ -51,7 +72,7 @@ export function BudgetWindowsEditor({ value, onChange }: BudgetWindowsEditorProp
                 precision={2}
                 value={window.max_budget ?? undefined}
                 onChange={(v) => updateWindow(idx, "max_budget", v ?? null)}
-                placeholder="Max spend ($)"
+                placeholder={t("keyTeamHelpers.budgetWindowsEditor.maxSpendPlaceholder")}
                 style={{ width: 160 }}
                 prefix="$"
               />
@@ -70,7 +91,7 @@ export function BudgetWindowsEditor({ value, onChange }: BudgetWindowsEditorProp
           addWindow();
         }}
       >
-        + Add Budget Window
+        {t("keyTeamHelpers.budgetWindowsEditor.addBudgetWindow")}
       </Button>
     </div>
   );

ui/litellm-dashboard/src/locales/en.json

@@ -8395,5 +8395,19 @@
       "descNewUserInvitation": "An email will be sent to the email address of the user when a new user is created",
       "descGeneric": "Receive an email notification when {{words}}"
     }
+  },
+  "keyTeamHelpers": {
+    "budgetWindowsEditor": {
+      "hourly": "Hourly",
+      "daily": "Daily",
+      "weekly": "Weekly",
+      "monthly": "Monthly",
+      "resetsEveryHour": "Resets every hour",
+      "resetsDailyMidnight": "Resets daily at midnight UTC",
+      "resetsWeeklySunday": "Resets every Sunday at midnight UTC",
+      "resetsMonthly": "Resets on the 1st of every month at midnight UTC",
+      "maxSpendPlaceholder": "Max spend ($)",
+      "addBudgetWindow": "+ Add Budget Window"
+    }
   }
 }

ui/litellm-dashboard/src/locales/zh-CN.json

@@ -8395,5 +8395,19 @@
       "descNewUserInvitation": "当新用户创建时，将向该用户的邮件地址发送一封邮件",
       "descGeneric": "当 {{words}} 时接收邮件通知"
     }
+  },
+  "keyTeamHelpers": {
+    "budgetWindowsEditor": {
+      "hourly": "每小时",
+      "daily": "每日",
+      "weekly": "每周",
+      "monthly": "每月",
+      "resetsEveryHour": "每小时重置",
+      "resetsDailyMidnight": "每日 UTC 零点重置",
+      "resetsWeeklySunday": "每周日 UTC 零点重置",
+      "resetsMonthly": "每月 1 日 UTC 零点重置",
+      "maxSpendPlaceholder": "最大花费 ($)",
+      "addBudgetWindow": "+ 添加预算窗口"
+    }
   }
 }