diff --git a/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsDetailsPage.tsx b/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsDetailsPage.tsx
index ae0cd8cd61b..77bd6ea021d 100644
--- a/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsDetailsPage.tsx
+++ b/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsDetailsPage.tsx
@@ -17,6 +17,7 @@ import {
} from "antd";
import { ArrowLeftIcon, BotIcon, EditIcon, KeyIcon, LayersIcon, ServerIcon, UsersIcon } from "lucide-react";
import { useState } from "react";
+import { useTranslation } from "react-i18next";
import DefaultProxyAdminTag from "../common_components/DefaultProxyAdminTag";
import { AccessGroupEditModal } from "./AccessGroupsModal/AccessGroupEditModal";
@@ -29,6 +30,7 @@ interface AccessGroupDetailProps {
}
export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailProps) {
+ const { t } = useTranslation();
const { data: accessGroup, isLoading } = useAccessGroupDetails(accessGroupId);
const { token } = theme.useToken();
const [isEditModalVisible, setIsEditModalVisible] = useState(false);
@@ -61,7 +63,7 @@ export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailPr
}}
>
} onClick={onBack} type="text" style={{ marginBottom: 16 }} />
-
+
);
}
@@ -85,7 +87,7 @@ export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailPr
label: (
- Models
+ {t("accessGroups.accessGroupsDetailsPage.tabModels")}
{modelIds?.length}
),
@@ -103,7 +105,7 @@ export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailPr
)}
/>
) : (
-
+
),
},
{
@@ -111,7 +113,7 @@ export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailPr
label: (
- MCP Servers
+ {t("accessGroups.accessGroupsDetailsPage.tabMcpServers")}
{mcpServerIds?.length}
),
@@ -129,7 +131,7 @@ export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailPr
)}
/>
) : (
-
+
),
},
{
@@ -137,7 +139,7 @@ export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailPr
label: (
- Agents
+ {t("accessGroups.accessGroupsDetailsPage.tabAgents")}
{agentIds?.length}
),
@@ -155,7 +157,7 @@ export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailPr
)}
/>
) : (
-
+
),
},
];
@@ -183,29 +185,29 @@ export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailPr
} onClick={handleEdit}>
- Edit Access Group
+ {t("accessGroups.accessGroupsDetailsPage.editButton")}
{/* Group Details */}
-
- {accessGroup.description || "—"}
-
+
+ {accessGroup.description || "—"}
+
{new Date(accessGroup.created_at).toLocaleString()}
{accessGroup.created_by && (
- {"by"}
+ {t("accessGroups.accessGroupsDetailsPage.by")}
)}
-
+
{new Date(accessGroup.updated_at).toLocaleString()}
{accessGroup.updated_by && (
- {"by"}
+ {t("accessGroups.accessGroupsDetailsPage.by")}
)}
@@ -221,14 +223,16 @@ export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailPr
title={
- Attached Keys
+ {t("accessGroups.accessGroupsDetailsPage.attachedKeys")}
{keyIds?.length}
}
extra={
keyIds?.length > MAX_PREVIEW ? (
) : null
}
@@ -244,7 +248,10 @@ export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailPr
))}
) : (
-
+
)}
@@ -253,14 +260,16 @@ export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailPr
title={
- Attached Teams
+ {t("accessGroups.accessGroupsDetailsPage.attachedTeams")}
{teamIds?.length}
}
extra={
teamIds?.length > MAX_PREVIEW ? (
) : null
}
@@ -276,7 +285,10 @@ export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailPr
))}
) : (
-
+
)}
diff --git a/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsModal/AccessGroupBaseForm.tsx b/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsModal/AccessGroupBaseForm.tsx
index 72b89e34301..0ca0da19bc1 100644
--- a/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsModal/AccessGroupBaseForm.tsx
+++ b/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsModal/AccessGroupBaseForm.tsx
@@ -4,6 +4,7 @@ import { ModelSelect } from "@/components/ModelSelect/ModelSelect";
import type { FormInstance } from "antd";
import { Form, Input, Select, Space, Tabs } from "antd";
import { BotIcon, InfoIcon, LayersIcon, ServerIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
const { TextArea } = Input;
@@ -21,6 +22,7 @@ interface AccessGroupBaseFormProps {
}
export function AccessGroupBaseForm({ form, isNameDisabled = false }: AccessGroupBaseFormProps) {
+ const { t } = useTranslation();
const { data: agentsData } = useAgents();
const { data: mcpServersData } = useMCPServers();
@@ -32,25 +34,25 @@ export function AccessGroupBaseForm({ form, isNameDisabled = false }: AccessGrou
label: (
- General Info
+ {t("accessGroups.accessGroupBaseForm.tabGeneralInfo")}
),
children: (
-
+
-
-
+
+
),
@@ -60,12 +62,12 @@ export function AccessGroupBaseForm({ form, isNameDisabled = false }: AccessGrou
label: (
- Models
+ {t("accessGroups.accessGroupBaseForm.tabModels")}
),
children: (
-
+
- MCP Servers
+ {t("accessGroups.accessGroupBaseForm.tabMcpServers")}
),
children: (
-
+