diff --git a/packages/console/src/pages/TenantSettings/DevTenantNotification/index.tsx b/packages/console/src/pages/TenantSettings/DevTenantNotification/index.tsx
new file mode 100644
index 000000000..7af1fd4ff
--- /dev/null
+++ b/packages/console/src/pages/TenantSettings/DevTenantNotification/index.tsx
@@ -0,0 +1,40 @@
+/**
+ * @file Since dev tenant does not have the subscription and billing history tabs,
+ * we use this component to render the usage notification for dev tenants.
+ */
+
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { TenantsContext } from '@/contexts/TenantsProvider';
+import InlineNotification from '@/ds-components/InlineNotification';
+
+type Props = {
+ readonly className?: string;
+};
+
+function DevTenantNotification({ className }: Props) {
+ const { currentTenant } = useContext(TenantsContext);
+ const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+ if (!currentTenant) {
+ return null;
+ }
+
+ const {
+ usage: { tokenUsage },
+ quota: { tokenLimit },
+ } = currentTenant;
+
+ if (tokenLimit === null || tokenUsage < tokenLimit) {
+ return null;
+ }
+
+ return (
+
+ {t('subscription.token_usage_notification.dev_plan_exceeded')}
+
+ );
+}
+
+export default DevTenantNotification;
diff --git a/packages/console/src/pages/TenantSettings/index.module.scss b/packages/console/src/pages/TenantSettings/index.module.scss
index 4b3206caf..2d75ed9db 100644
--- a/packages/console/src/pages/TenantSettings/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/index.module.scss
@@ -14,3 +14,7 @@
.tabs {
margin: _.unit(4) 0;
}
+
+.notification {
+ margin-top: _.unit(4);
+}
diff --git a/packages/console/src/pages/TenantSettings/index.tsx b/packages/console/src/pages/TenantSettings/index.tsx
index 1e9b013cc..f4e0de6ba 100644
--- a/packages/console/src/pages/TenantSettings/index.tsx
+++ b/packages/console/src/pages/TenantSettings/index.tsx
@@ -8,6 +8,7 @@ import DynamicT from '@/ds-components/DynamicT';
import TabNav, { TabNavItem } from '@/ds-components/TabNav';
import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
+import DevTenantNotification from './DevTenantNotification';
import styles from './index.module.scss';
function TenantSettings() {
@@ -23,6 +24,7 @@ function TenantSettings() {
subtitle="tenants.description"
className={styles.cardTitle}
/>
+ {isDevTenant && }
diff --git a/packages/phrases/src/locales/en/translation/admin-console/subscription/index.ts b/packages/phrases/src/locales/en/translation/admin-console/subscription/index.ts
index 7b0812f8a..a349ba31f 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/subscription/index.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/subscription/index.ts
@@ -71,9 +71,10 @@ const subscription = {
usage,
token_usage_notification: {
exceeded:
- 'You have exceeded your token usage limit. Users will not be able to access the Logto service properly. Please upgrade your plan to premium promptly to avoid any inconvenience.',
+ 'You have exceeded 100% of your quota limit. Users will no longer be able to log in properly. Please upgrade immediately to avoid any inconvenience.',
close_to_limit:
- 'You almost reached your token usage limit. Logto will stop granting tokens when the limit is reached. Please upgrade your plan to premium to avoid any inconvenience.',
+ 'You almost reached your token usage limit. Logto will stop granting token if your usage exceeds 100%. Please upgrade your plan to avoid any inconvenience. Logto will stop granting tokens if your usage exceeds 100%.',
+ dev_plan_exceeded: "This tenant has reached the token limit per Logto's entity limit policy.",
},
};