- Balance
+ {t(I18nKey.PAYMENT$MANAGE_CREDITS)}
{!isLoading && (
${Number(balance).toFixed(2)}
diff --git a/frontend/src/components/features/settings/api-key-modal-base.tsx b/frontend/src/components/features/settings/api-key-modal-base.tsx
new file mode 100644
index 000000000000..43d8ba89f028
--- /dev/null
+++ b/frontend/src/components/features/settings/api-key-modal-base.tsx
@@ -0,0 +1,33 @@
+import React, { ReactNode } from "react";
+import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
+
+interface ApiKeyModalBaseProps {
+ isOpen: boolean;
+ title: string;
+ width?: string;
+ children: ReactNode;
+ footer: ReactNode;
+}
+
+export function ApiKeyModalBase({
+ isOpen,
+ title,
+ width = "500px",
+ children,
+ footer,
+}: ApiKeyModalBaseProps) {
+ if (!isOpen) return null;
+
+ return (
+
+
+
{title}
+ {children}
+
{footer}
+
+ );
+}
diff --git a/frontend/src/components/features/settings/api-keys-manager.tsx b/frontend/src/components/features/settings/api-keys-manager.tsx
new file mode 100644
index 000000000000..2490d4bce04f
--- /dev/null
+++ b/frontend/src/components/features/settings/api-keys-manager.tsx
@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+import { BrandButton } from "#/components/features/settings/brand-button";
+import { LoadingSpinner } from "#/components/shared/loading-spinner";
+import { ApiKey, CreateApiKeyResponse } from "#/api/api-keys";
+import { displayErrorToast } from "#/utils/custom-toast-handlers";
+import { CreateApiKeyModal } from "./create-api-key-modal";
+import { DeleteApiKeyModal } from "./delete-api-key-modal";
+import { NewApiKeyModal } from "./new-api-key-modal";
+import { useApiKeys } from "#/hooks/query/use-api-keys";
+
+export function ApiKeysManager() {
+ const { t } = useTranslation();
+ const { data: apiKeys = [], isLoading, error } = useApiKeys();
+ const [createModalOpen, setCreateModalOpen] = useState(false);
+ const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+ const [keyToDelete, setKeyToDelete] = useState
(null);
+ const [newlyCreatedKey, setNewlyCreatedKey] =
+ useState(null);
+ const [showNewKeyModal, setShowNewKeyModal] = useState(false);
+
+ // Display error toast if the query fails
+ if (error) {
+ displayErrorToast(t(I18nKey.ERROR$GENERIC));
+ }
+
+ const handleKeyCreated = (newKey: CreateApiKeyResponse) => {
+ setNewlyCreatedKey(newKey);
+ setCreateModalOpen(false);
+ setShowNewKeyModal(true);
+ };
+
+ const handleCloseCreateModal = () => {
+ setCreateModalOpen(false);
+ };
+
+ const handleCloseDeleteModal = () => {
+ setDeleteModalOpen(false);
+ setKeyToDelete(null);
+ };
+
+ const handleCloseNewKeyModal = () => {
+ setShowNewKeyModal(false);
+ setNewlyCreatedKey(null);
+ };
+
+ const formatDate = (dateString: string | null) => {
+ if (!dateString) return "Never";
+ return new Date(dateString).toLocaleString();
+ };
+
+ return (
+ <>
+
+
+ setCreateModalOpen(true)}
+ >
+ {t(I18nKey.SETTINGS$CREATE_API_KEY)}
+
+
+
+
+ {t(I18nKey.SETTINGS$API_KEYS_DESCRIPTION)}
+
+
+ {isLoading && (
+
+
+
+ )}
+ {!isLoading && Array.isArray(apiKeys) && apiKeys.length > 0 && (
+
+
+
+
+ |
+ {t(I18nKey.SETTINGS$NAME)}
+ |
+
+ {t(I18nKey.SETTINGS$CREATED_AT)}
+ |
+
+ {t(I18nKey.SETTINGS$LAST_USED)}
+ |
+
+ {t(I18nKey.SETTINGS$ACTIONS)}
+ |
+
+
+
+ {apiKeys.map((key) => (
+
+ | {key.name} |
+
+ {formatDate(key.created_at)}
+ |
+
+ {formatDate(key.last_used_at)}
+ |
+
+
+ |
+
+ ))}
+
+
+
+ )}
+
+
+ {t(I18nKey.SETTINGS$CREATE_API_KEY_DESCRIPTION)}
+
+
setNewKeyName(value)}
+ className="w-full mt-4"
+ type="text"
+ />
+
+
+ {t(I18nKey.SETTINGS$DELETE_API_KEY_CONFIRMATION, {
+ name: keyToDelete.name,
+ })}
+
+
+
{t(I18nKey.SETTINGS$API_KEY_WARNING)}
+
+ {newlyCreatedKey.key}
+
+