diff --git a/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx b/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
index 42f1e84c25..d8ab6b7f3f 100644
--- a/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
@@ -3,6 +3,7 @@
import { useState, useEffect, useMemo, useCallback, memo } from "react";
import { Card, Button, Input, Modal, CardSkeleton } from "@/shared/components";
import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+import { useTranslations } from "next-intl";
// Constants for validation
const MAX_KEY_NAME_LENGTH = 100;
@@ -70,6 +71,8 @@ interface Model {
type ProviderGroup = [provider: string, models: Model[]];
export default function ApiManagerPageClient() {
+ const t = useTranslations("apiManager");
+ const tc = useTranslations("common");
const [keys, setKeys] = useState([]);
const [allModels, setAllModels] = useState([]);
const [loading, setLoading] = useState(true);
@@ -193,7 +196,7 @@ export default function ApiManagerPageClient() {
return;
}
- if (!confirm("Delete this API key?")) return;
+ if (!confirm(t("deleteConfirm"))) return;
setIsSubmitting(true);
clearError();
@@ -332,7 +335,7 @@ export default function ApiManagerPageClient() {
{keys.length}
-
Total Keys
+
{t("totalKeys")}
@@ -348,7 +351,7 @@ export default function ApiManagerPageClient() {
.length
}
- Restricted
+ {t("restricted")}
@@ -361,7 +364,7 @@ export default function ApiManagerPageClient() {
{Object.values(usageStats).reduce((sum, s) => sum + s.totalRequests, 0)}
- Total Requests
+ {t("totalRequests")}
@@ -374,7 +377,7 @@ export default function ApiManagerPageClient() {
{allModels.length}
-
Models Available
+
{t("modelsAvailable")}
@@ -385,13 +388,11 @@ export default function ApiManagerPageClient() {
-
API Key Management
-
- Create and manage API keys for authenticating requests to your endpoint
-
+
{t("keyManagement")}
+
{t("keyManagementDesc")}
@@ -404,42 +405,40 @@ export default function ApiManagerPageClient() {
vpn_key
-
Registered Keys
+
{t("registeredKeys")}
- {keys.length} {keys.length === 1 ? "key" : "keys"} registered
+ {keys.length}{" "}
+ {keys.length === 1
+ ? t("keyRegistered", { count: keys.length })
+ : t("keysRegistered", { count: keys.length })}
-
- Each key isolates usage tracking and can be revoked independently. Keys are masked after
- creation for security.
-
+ {t("keysSecurityNote")}
{keys.length === 0 ? (
vpn_key
-
No API keys yet
-
- Create your first API key to authenticate requests to your endpoint
-
+
{t("noKeys")}
+
{t("noKeysDesc")}
) : (
{/* Table Header */}
-
Name
-
Key
-
Permissions
-
Usage
-
Created
-
Actions
+
{t("name")}
+
{t("key")}
+
{t("permissions")}
+
{t("usage")}
+
{t("created")}
+
{t("actions")}
{/* Table Rows */}
@@ -489,21 +488,21 @@ export default function ApiManagerPageClient() {
className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-green-500/10 text-green-600 dark:text-green-400 text-xs font-medium hover:bg-green-500/20 transition-colors"
>
lock_open
- All models
+ {t("allModels")}
)}
{stats?.totalRequests ?? 0}{" "}
- reqs
+ {t("reqs")}
{stats?.lastUsed ? (
Last: {new Date(stats.lastUsed).toLocaleDateString()}
) : (
- Never used
+ {t("neverUsed")}
)}
@@ -539,28 +538,23 @@ export default function ApiManagerPageClient() {
lightbulb
-
Usage Tips
+
{t("usageTips")}
-
check
-
- Use API keys in the{" "}
-
Authorization{" "}
- header as{" "}
- Bearer YOUR_KEY
-
+ {t("tipAuth")}
-
check
- Keys are only shown once during creation — store them securely
+ {t("tipSecure")}
-
check
- Create separate keys for different clients or environments
+ {t("tipSeparate")}
-
check
- Restrict keys to specific models for better security and cost control
+ {t("tipRestrict")}
@@ -570,7 +564,7 @@ export default function ApiManagerPageClient() {
{/* Add Key Modal */}
{
setShowAddModal(false);
setNewKeyName("");
@@ -578,16 +572,16 @@ export default function ApiManagerPageClient() {
>
-
+
setNewKeyName(e.target.value)}
- placeholder="e.g., Production Key, Development Key"
+ placeholder={t("keyNamePlaceholder")}
autoFocus
/>
-
- Choose a descriptive name to identify this key's purpose
-
+
{t("keyNameDesc")}
{/* Created Key Modal */}
- setCreatedKey(null)}>
+ setCreatedKey(null)}>
@@ -617,11 +611,9 @@ export default function ApiManagerPageClient() {
- Key created successfully!
-
-
- Copy and store this key now — it won't be shown again.
+ {t("keyCreatedSuccess")}
+
{t("keyCreatedNote")}
@@ -632,7 +624,7 @@ export default function ApiManagerPageClient() {
icon={copied === "created_key" ? "check" : "content_copy"}
onClick={() => copy(createdKey, "created_key")}
>
- {copied === "created_key" ? "Copied!" : "Copy"}
+ {copied === "created_key" ? tc("copied") : tc("copy")}