From dee9ddbcd9e2776a93cb18814093d9b538456420 Mon Sep 17 00:00:00 2001
From: Bayarbold8 <bayarbold187@gmail.com>
Date: Mon, 8 Jan 2024 18:30:55 +0800
Subject: [PATCH 1/6] created translation file and keys for components and
 routes

---
 addon/components/api-event/data.hbs           |   4 +-
 addon/components/api-event/details.hbs        |   8 +-
 addon/components/api-request-log/details.hbs  |  12 +-
 .../api-request-log/query-params.hbs          |   4 +-
 .../api-request-log/request-body.hbs          |   2 +-
 .../api-request-log/request-headers.hbs       |   4 +-
 .../api-request-log/response-body.hbs         |   4 +-
 addon/components/modals/api-key-form.hbs      |  14 +--
 .../modals/listen-custom-channel.hbs          |   2 +-
 .../components/modals/rename-api-key-form.hbs |   2 +-
 addon/components/modals/roll-api-key-form.hbs |  20 ++--
 addon/components/modals/webhook-form.hbs      |  16 +--
 addon/templates/api-keys/index.hbs            |  14 +--
 addon/templates/application.hbs               |  14 +--
 addon/templates/events/index.hbs              |   2 +-
 addon/templates/events/view.hbs               |   2 +-
 addon/templates/logs/index.hbs                |   2 +-
 addon/templates/logs/view.hbs                 |   2 +-
 addon/templates/sockets/index.hbs             |   4 +-
 addon/templates/sockets/view.hbs              |   8 +-
 addon/templates/webhooks/index.hbs            |   4 +-
 addon/templates/webhooks/view.hbs             |   8 +-
 translations/en-us.yaml                       | 104 +++++++++++++++++-
 23 files changed, 179 insertions(+), 77 deletions(-)

diff --git a/addon/components/api-event/data.hbs b/addon/components/api-event/data.hbs
index 85462d3..857e54a 100644
--- a/addon/components/api-event/data.hbs
+++ b/addon/components/api-event/data.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title="Event data" @open={{true}} @pad={{true}} @panelTitleClass="text-sm" @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.components.api-event.data.title"}} @open={{true}} @pad={{true}} @panelTitleClass="text-sm" @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiEvent.data}}
         <CodeBlock @code={{or @apiEvent.dataJson ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-600">
-                No event data
+                {{t "developers.components.api-event.data.no-data"}}
             </span>
         </div>
     {{/if}}
diff --git a/addon/components/api-event/details.hbs b/addon/components/api-event/details.hbs
index 764b211..073cedf 100644
--- a/addon/components/api-event/details.hbs
+++ b/addon/components/api-event/details.hbs
@@ -1,9 +1,9 @@
-<ContentPanel @prefixTitle="Event" @title={{@apiEvent.event}} @prefixTitleRight={{@apiEvent.public_id}} @titleContainerClass="flex-col" @panelTitleClass="text-sm" @prefixTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
+<ContentPanel @prefixTitle={{t "developers.components.api-event.details.prefixTitle"}} @title={{@apiEvent.event}} @prefixTitleRight={{@apiEvent.public_id}} @titleContainerClass="flex-col" @panelTitleClass="text-sm" @prefixTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
     <table class="border-none table-fixed dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
         <tbody>
             <tr>
                 <td class="w-40">
-                    Date
+                    {{t "developers.common.date"}}
                 </td>
                 <td>
                     {{@apiEvent.createdAt}}
@@ -11,7 +11,7 @@
             </tr>
             <tr>
                 <td>
-                    Source
+                    {{t "developers.common.source"}}
                 </td>
                 <td>
                     {{@apiEvent.source}}
@@ -19,7 +19,7 @@
             </tr>
             <tr>
                 <td>
-                    Description
+                    {{t "developers.components.api-events.details.description"}}
                 </td>
                 <td>
                     {{@apiEvent.description}}
diff --git a/addon/components/api-request-log/details.hbs b/addon/components/api-request-log/details.hbs
index b2750d5..a985c53 100644
--- a/addon/components/api-request-log/details.hbs
+++ b/addon/components/api-request-log/details.hbs
@@ -1,9 +1,9 @@
-<ContentPanel @prefixTitle="Request" @title={{@apiRequest.description}} @titleStatus={{@apiRequest.status_code}} @prefixTitleRight={{@apiRequest.public_id}} @titleContainerClass="flex-col" @panelTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleClass="text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
+<ContentPanel @prefixTitle={{t "developers.components.api-request-log.details.prefixTitle"}} @title={{@apiRequest.description}} @titleStatus={{@apiRequest.status_code}} @prefixTitleRight={{@apiRequest.public_id}} @titleContainerClass="flex-col" @panelTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleClass="text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
     <table class="border-none table-fixed dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
         <tbody>
             <tr>
                 <td class="w-40">
-                    Time
+                    {{t "developers.common.time"}}
                 </td>
                 <td>
                     {{@apiRequest.createdAt}}
@@ -11,7 +11,7 @@
             </tr>
             <tr>
                 <td class="w-40">
-                    Duration
+                    {{t "developers.components.api-request-log.details.duration"}}
                 </td>
                 <td>
                     {{format-milliseconds @apiRequest.duration}}
@@ -19,7 +19,7 @@
             </tr>
             <tr>
                 <td>
-                    IP Address
+                    {{t "developers.components.api-request-log.details.ip-address"}}
                 </td>
                 <td>
                     {{@apiRequest.ip_address}}
@@ -27,7 +27,7 @@
             </tr>
             <tr>
                 <td>
-                    Version
+                    {{t "developers.common.version"}}
                 </td>
                 <td>
                     {{@apiRequest.version}}
@@ -35,7 +35,7 @@
             </tr>
             <tr>
                 <td>
-                    Source
+                    {{t "developers.common.source"}}
                 </td>
                 <td>
                     {{@apiRequest.source}}
diff --git a/addon/components/api-request-log/query-params.hbs b/addon/components/api-request-log/query-params.hbs
index 838a361..bdc9548 100644
--- a/addon/components/api-request-log/query-params.hbs
+++ b/addon/components/api-request-log/query-params.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title="Request query parameters" @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.components.api-request-log.query-params.title"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiRequest.query_params}}
         <CodeBlock @code={{or (json-stringify @apiRequest.query_params) ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-400">
-                No query parameters
+                {{t "developers.components.api-request-log.query-params.no-parameters"}}
             </span>
         </div>
     {{/if}}
diff --git a/addon/components/api-request-log/request-body.hbs b/addon/components/api-request-log/request-body.hbs
index fe58330..eb4ada1 100644
--- a/addon/components/api-request-log/request-body.hbs
+++ b/addon/components/api-request-log/request-body.hbs
@@ -4,7 +4,7 @@
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-400">
-                No request {{@apiRequest.method}} body
+                {{t "developers.components.api-request-log.request-body.no-request" htmlSafe=true method=@apiRequest.method}}
             </span>
         </div>
     {{/if}}
diff --git a/addon/components/api-request-log/request-headers.hbs b/addon/components/api-request-log/request-headers.hbs
index 3d095c8..808e36c 100644
--- a/addon/components/api-request-log/request-headers.hbs
+++ b/addon/components/api-request-log/request-headers.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title="Request headers" @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.components.api-request-log.request-headers.title"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiRequest.request_headers}}
         <CodeBlock @code={{or (json-stringify @apiRequest.request_headers) ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-400">
-                No request HEADERS
+                {{t "developers.components.api-request-log.request-headers.no-headers"}}
             </span>
         </div>
     {{/if}}
diff --git a/addon/components/api-request-log/response-body.hbs b/addon/components/api-request-log/response-body.hbs
index 498e06f..b2bfd76 100644
--- a/addon/components/api-request-log/response-body.hbs
+++ b/addon/components/api-request-log/response-body.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title="Response body" @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.components.api-request-log.response-body.title"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiRequest.response_body}}
         <CodeBlock @code={{or (json-stringify @apiRequest.response_body) ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-400">
-                No response body
+                {{t "developers.components.api-request-log.response-body.no-response-body"}}
             </span>
         </div>
     {{/if}}
diff --git a/addon/components/modals/api-key-form.hbs b/addon/components/modals/api-key-form.hbs
index 0b38957..bc22f71 100644
--- a/addon/components/modals/api-key-form.hbs
+++ b/addon/components/modals/api-key-form.hbs
@@ -2,7 +2,7 @@
     <div class="modal-body-container">
         <div class="input-group">
             <label>
-                Name
+                {{t "developers.common.Name"}}
             </label>
             <Input @value={{options.apiKey.name}} @type="text" aria-label="API Key Name" class="w-full form-input" placeholder="Enter a nickname or environment name for API Key" />
         </div>
@@ -11,7 +11,7 @@
 
             <select class="w-full mb-1 form-select" aria-label="API Key Expiration Date" {{on "change" @options.setExpiration}}>
                 <option selected disabled>
-                    Select an expiration date...
+                    {{t " developers.modals.api-key-form.select-expiration-date"}}
                 </option>
                 {{#each @options.expirationOptions as |opt|}}
                     <option value={{opt}}>
@@ -20,7 +20,7 @@
                 {{/each}}
             </select>
             <p class="text-xs dark:text-gray-100">
-                Once this key expires, you can't perform any actions with it.
+                {{t "developers.components.modals.api-key-form.key-expires"}}
             </p>
         </div>
 
@@ -33,17 +33,17 @@
         <div class="flex flex-col input-group">
             {{#if @options.testMode}}
                 <Badge @status="test">
-                    Test Key
+                    {{t "developers.components.modals.api-key-form.test-key"}}
                 </Badge>
                 <p class="block my-2 text-sm text-blue-500 dark:text-blue-300">
-                    You are creating a test environment key, use this for testing environments.
+                    {{t "developers.components.modals.api-keys-form.testing-environments"}}
                 </p>
             {{else}}
                 <Badge @status="live">
-                    Live Key
+                    {{t "developers.components.modals.api-keys-form.live-key"}}
                 </Badge>
                 <p class="block my-2 text-sm text-blue-500 dark:text-blue-300">
-                    You are creating a live environment key, use this for production environments.
+                    {{t "developers.components.modals.api-keys-form.production-environments"}}
                 </p>
             {{/if}}
         </div>
diff --git a/addon/components/modals/listen-custom-channel.hbs b/addon/components/modals/listen-custom-channel.hbs
index 1708865..41ee442 100644
--- a/addon/components/modals/listen-custom-channel.hbs
+++ b/addon/components/modals/listen-custom-channel.hbs
@@ -1,5 +1,5 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} as |options|>
     <div class="modal-body-container">
-        <InputGroup @name="Event channel ID" @value={{@options.channelId}} @helpText="Input the socket channel identifier you want to listen on" />
+        <InputGroup @name={{t "developers.components.modals.listen-custom-channel.name"}} @value={{@options.channelId}} @helpText={{t "developers.components.modals.listen-custom-channel.helpText"}} />
     </div>
 </Modal::Default>
\ No newline at end of file
diff --git a/addon/components/modals/rename-api-key-form.hbs b/addon/components/modals/rename-api-key-form.hbs
index 56df415..703c576 100644
--- a/addon/components/modals/rename-api-key-form.hbs
+++ b/addon/components/modals/rename-api-key-form.hbs
@@ -2,7 +2,7 @@
     <div class="modal-body-container">
         <div class="input-group">
             <label>
-                Name
+                {{t "developers.components.common.name"}}
             </label>
             <Input @value={{options.apiKey.name}} @type="text" aria-label="API Key Name" class="w-full form-input" placeholder="Enter a nickname or environment name for API Key" />
         </div>
diff --git a/addon/components/modals/roll-api-key-form.hbs b/addon/components/modals/roll-api-key-form.hbs
index c1308d1..b394cfe 100644
--- a/addon/components/modals/roll-api-key-form.hbs
+++ b/addon/components/modals/roll-api-key-form.hbs
@@ -3,14 +3,14 @@
         <div class="flex">
             <div class="w-1/4">
                 <span class="font-semibold dark:text-gray-100">
-                    Key
+                    {{t "developers.components.common.keys"}}
                 </span>
             </div>
             <div class="w-3/4">
                 <div class="mb-2 dark:text-gray-100">
                     {{@options.apiKey.key}}
                 </div>
-                <Button @text="View logs" @size="xs" @icon="arrow-right" @onClick={{fn @options.viewRequestLogs @options.apiKey}} />
+                <Button @text={{t "developers.components.modals.roll-api-key-form.text"}} @size="xs" @icon="arrow-right" @onClick={{fn @options.viewRequestLogs @options.apiKey}} />
             </div>
         </div>
     </div>
@@ -19,7 +19,7 @@
         <div class="flex">
             <div class="w-1/4">
                 <span class="font-semibold dark:text-gray-100">
-                    Last used
+                    {{t "developers.components.modals.roll-api-key-form.last-used"}}
                 </span>
             </div>
             <div class="w-3/4 dark:text-gray-100">
@@ -32,13 +32,13 @@
         <div class="flex">
             <div class="w-1/4">
                 <span class="font-semibold dark:text-gray-100">
-                    Expiration
+                    {{t "developers.components.modals.roll-api-key-form.expiration"}}
                 </span>
             </div>
             <div class="w-3/4">
                 <select class="w-full mb-2 form-select form-input-sm" aria-label="API Key Expiration" {{on "change" @options.setExpiration}}>
                     <option selected disabled>
-                        Select an expiration date...
+                        {{t "developers.components.modals.roll-api-key-form.select-date"}}
                     </option>
                     {{#each @options.expirationOptions as |opt|}}
                         <option value={{opt}}>
@@ -47,7 +47,7 @@
                     {{/each}}
                 </select>
                 <p class="dark:text-gray-100">
-                    Once this key expires, you can't perform any actions with it.
+                    {{t "developers.components.modals.roll-api-key-form.key-expires"}}
                 </p>
             </div>
         </div>
@@ -56,23 +56,23 @@
     <div class="px-5 py-4 border-t border-gray-200 dark:border-gray-800">
         <div class="mt-2 mb-7">
             <div class="font-semibold dark:text-gray-100">
-                Additional authentication required
+                {{t "developers.components.modals.roll-api-key-form.additional-required"}}
             </div>
             <p class="dark:text-white">
-                To continue, please enter your password.
+                {{t "developers.components.modals.roll-api-key-form.enter-password."}}
             </p>
         </div>
 
         <div class="input-group">
             <label>
-                Email
+                {{t "developers.components.modals.roll-api-key-form.email"}}
             </label>
             <Input @type="email" @value={{@options.user.email}} aria-label="User Email" class="w-full form-input" disabled="true" />
         </div>
 
         <div class="input-group">
             <label>
-                Password
+                {{t "developers.components.modals.roll-api-key-form.password"}}
             </label>
             <Input @type="password" @value={{@options.password}} aria-label="User Password" placeholder="Authenticate request using your password" class="w-full form-input" />
         </div>
diff --git a/addon/components/modals/webhook-form.hbs b/addon/components/modals/webhook-form.hbs
index 6f7929e..ef76ec4 100644
--- a/addon/components/modals/webhook-form.hbs
+++ b/addon/components/modals/webhook-form.hbs
@@ -1,23 +1,23 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} as |options|>
     <div class="px-5 border-b border-gray-200 dark:border-gray-800">
         <div class="input-group">
-            <InputLabel @labelText="Endpoint URL" @helpText="The URL Fleetbase should send event callbacks to." @required={{true}} />
+            <InputLabel @labelText="Endpoint URL" @helpText={{t "developers.components.modals.webhook-form.helpText"}} @required={{true}} />
             <Input @value={{options.webhook.url}} @type="url" aria-label="Webhook URL" class="w-full form-input" placeholder="https://" />
         </div>
 
         <div class="input-group">
-            <InputLabel @labelText="Description" @helpText="Optionally add a description for the webhook endpoint." />
-            <Textarea @value={{options.webhook.description}} aria-label="Webhook Description" class="w-full form-input" placeholder="An optional description of what this webhook endpoint is used for." />
+            <InputLabel @labelText="Description" @helpText={{t "developers.components.modals.webhook-form.helpText-endpoint"}} />
+            <Textarea @value={{options.webhook.description}} aria-label="Webhook Description" class="w-full form-input" placeholder={{t "developers.components.modals.webhook-form.placeholder"}} />
         </div>
     </div>
 
     <div class="px-5 pt-4 border-b border-gray-200 dark:border-gray-800">
-        <div class="input-group">
-            <InputLabel @labelText="API Credential" @helpText="Restrict the webhook endpoint to receive callbacks from a specific API key." />
+        <div class="input-group">   
+            <InputLabel @labelText="API Credential" @helpText={{t "developers.components.modals.webhook-form.helpText-apikey"}} />
 
             <select class="w-full form-select" aria-label="API Credential" {{on "change" @options.setApiCredential}}>
                 <option value={{null}} selected>
-                    Receive from all API Credentials...
+                    {{t "developers.components.modals.webhook-form.api-credentials"}}
                 </option>
                 {{#each @options.apiCredentialOptions as |opt|}}
                     <option value={{opt.id}} selected={{eq @options.webhook.api_credential_uuid opt.id}}>
@@ -26,14 +26,14 @@
                 {{/each}}
             </select>
             <InfoBlock class="mt-3">
-                You can select a specific API credential that will be used to trigger callbacks to this webhook endpoint, or you can select "All API Credentials", and the webhook endpoint will receive callbacks regardless the API Credential being used.
+                {{t "developers. components.modals.webhook-form.select-credential"}}
             </InfoBlock>
         </div>
     </div>
 
     <div class="px-5 pt-4 border-b border-gray-200 dark:border-gray-800">
         <div class="input-group">
-            <InputLabel @labelText="Version" @helpText="Select a specific API version to receive callbacks for." />
+            <InputLabel @labelText="Version" @helpText={{t "developers.components.modals.webhook-form."}} />
 
             <select class="w-full form-select" aria-label="API Version" {{on "change" @options.setVersion}}>
                 <option selected disabled>
diff --git a/addon/templates/api-keys/index.hbs b/addon/templates/api-keys/index.hbs
index 6b82bc0..0ac3ebe 100644
--- a/addon/templates/api-keys/index.hbs
+++ b/addon/templates/api-keys/index.hbs
@@ -1,14 +1,14 @@
-<Layout::Section::Header @title="API Keys" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+<Layout::Section::Header @title={{t "developers.api-keys.index.title"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
     <div class="flex items-center mr-3">
-        <Toggle @isToggled={{this.isTestMode}} @onToggle={{this.toggleTestMode}} @label="View test data" @helpText="Toggling view test data will enable the console to display all test data from your sandbox environment." class="mr-1" />
+        <Toggle @isToggled={{this.isTestMode}} @onToggle={{this.toggleTestMode}} @label={{t "developers.api-key.index.label"}} @helpText={{t "developers.api-key.index.helpText"}} class="mr-1" />
         {{#if this.isTestMode}}
             <span class="ml-2">
                 <select class="form-select form-input-sm" aria-label="Select API Key" {{on "change" this.toggleTestKey}}>
                     <option selected disabled>
-                        Select specific key
+                        {{t "developers.api-keys.index.select-key"}}
                     </option>
                     <option value="null" selected={{eq this.testKey null}}>
-                        All test data...
+                        {{t "developers.api-keys.index.test-data"}}
                     </option>
                     {{#each (filter-by 'isTestKey' @model) as |key|}}
                         <option value={{key.id}} selected={{eq this.testKey key.id}}>
@@ -24,14 +24,14 @@
             <div class="next-dd-menu mt-2 mx-0">
                 <div class="px-1">
                     <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteApiCredentials)}}>
-                        Delete API Credentials
+                        {{t "developers.api-keys.index.delete-api"}}
                     </a>
                 </div>
             </div>
         </DropdownButton>
     {{/if}}
-    <Button @type="primary" @icon="plus" @iconPrefix="fas" @text="New" class="mr-2" @onClick={{this.createApiKey}} />
-    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text="Export" @onClick={{this.exportApiKeys}} />
+    <Button @type="primary" @icon="plus" @iconPrefix="fas" @text={{t "developers.common.new"}} class="mr-2" @onClick={{this.createApiKey}} />
+    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text={{t "developers.common.export"}} @onClick={{this.exportApiKeys}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/addon/templates/application.hbs b/addon/templates/application.hbs
index de2e7e7..cdc1615 100644
--- a/addon/templates/application.hbs
+++ b/addon/templates/application.hbs
@@ -1,11 +1,11 @@
 <EmberWormhole @to="sidebar-menu-items">
-    <Layout::Sidebar::Panel @open={{true}} @title="Developers Console">
-        <Layout::Sidebar::Item @route="console.developers.home" @icon="home">Dashboard</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.developers.api-keys" @icon="key">API Keys</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.developers.webhooks" @icon="globe-asia">Webhooks</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.developers.sockets" @icon="plug">WebSockets</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.developers.logs" @icon="file-lines">Logs</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.developers.events" @icon="calendar-day">Events</Layout::Sidebar::Item>
+    <Layout::Sidebar::Panel @open={{true}} @title={{t "developers.application.title"}}>
+        <Layout::Sidebar::Item @route="console.developers.home" @icon="home">{{t "developers.application.sidebar.items.home"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.developers.api-keys" @icon="key">{{t "developers.application.sidebar.items.api-keys"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.developers.webhooks" @icon="globe-asia">{{t "developers.application.sidebar.items.Webhooks"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.developers.sockets" @icon="plug">{{t "developers.application.siderbar.items.WebSockets"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.developers.logs" @icon="file-lines">{{t "developers.application.siderbar.items.Logs"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.developers.events" @icon="calendar-day">{{t "developers.application.siderbar.items.Events"}}</Layout::Sidebar::Item>
     </Layout::Sidebar::Panel>
     
 </EmberWormhole>
diff --git a/addon/templates/events/index.hbs b/addon/templates/events/index.hbs
index 1a573a8..8e07fd1 100644
--- a/addon/templates/events/index.hbs
+++ b/addon/templates/events/index.hbs
@@ -1,4 +1,4 @@
-<Layout::Section::Header @title="Events" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+<Layout::Section::Header @title={{t "developers.events.index.title"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
     <FiltersPicker @columns={{this.columns}} @onApply={{fn this.filters.apply this}} @onClear={{fn this.filters.reset this}} @onFilterClear={{this.filters.clear}} @onChange={{this.filters.set}} @buttonWrapperClass="mr-2" />
     <VisibleColumnPicker @columns={{this.columns}} @onChange={{fn (mut this.columns)}} class="mr-2" />
 </Layout::Section::Header>
diff --git a/addon/templates/events/view.hbs b/addon/templates/events/view.hbs
index cfed1aa..d118061 100644
--- a/addon/templates/events/view.hbs
+++ b/addon/templates/events/view.hbs
@@ -1,5 +1,5 @@
 <Layout::Section::Header @title={{@model.description}}>
-    <Button @icon="long-arrow-left" @iconPrefix="fas" @text="Back" @onClick={{this.goBack}} />
+    <Button @icon="long-arrow-left" @iconPrefix="fas" @text={{t "developers.common.Back"}} @onClick={{this.goBack}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/addon/templates/logs/index.hbs b/addon/templates/logs/index.hbs
index 95efade..1b7ca82 100644
--- a/addon/templates/logs/index.hbs
+++ b/addon/templates/logs/index.hbs
@@ -1,4 +1,4 @@
-<Layout::Section::Header @title="Logs" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+<Layout::Section::Header @title={{t "developers.logs.index.title"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
     <FiltersPicker @columns={{this.columns}} @onApply={{fn this.filters.apply this}} @onClear={{fn this.filters.reset this}} @onFilterClear={{this.filters.clear}} @onChange={{this.filters.set}} @buttonWrapperClass="mr-2" />
     <VisibleColumnPicker @columns={{this.columns}} @onChange={{fn (mut this.columns)}} class="mr-2" />
 </Layout::Section::Header>
diff --git a/addon/templates/logs/view.hbs b/addon/templates/logs/view.hbs
index c844e50..42a9373 100644
--- a/addon/templates/logs/view.hbs
+++ b/addon/templates/logs/view.hbs
@@ -1,5 +1,5 @@
 <Layout::Section::Header @title={{@model.description}} @badge={{@model.status_code}}>
-    <Button @icon="long-arrow-left" @iconPrefix="fas" @text="Back" @onClick={{this.goBack}} />
+    <Button @icon="long-arrow-left" @iconPrefix="fas" @text={{t "developers.common.back"}} @onClick={{this.goBack}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/addon/templates/sockets/index.hbs b/addon/templates/sockets/index.hbs
index 319e40f..93445f5 100644
--- a/addon/templates/sockets/index.hbs
+++ b/addon/templates/sockets/index.hbs
@@ -1,5 +1,5 @@
-<Layout::Section::Header @title="Channels receiving events from your account">
-    <Button @icon="headphones" @type="magic" @iconPrefix="fas" @text="Listen on custom channel" @onClick={{this.listenOnCustomChannel}} />
+<Layout::Section::Header @title={{t "developers.sockets.index.title"}}>
+    <Button @icon="headphones" @type="magic" @iconPrefix="fas" @text= {{t "developers.sockets.index.text"}} @onClick={{this.listenOnCustomChannel}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/addon/templates/sockets/view.hbs b/addon/templates/sockets/view.hbs
index 85a9c52..fcae3d3 100644
--- a/addon/templates/sockets/view.hbs
+++ b/addon/templates/sockets/view.hbs
@@ -1,5 +1,5 @@
 <Layout::Section::Header @title={{@model.name}}>
-    <Button @icon="long-arrow-left" @iconPrefix="fas" @text="Back" @onClick={{this.goBack}} />
+    <Button @icon="long-arrow-left" @iconPrefix="fas" @text={{t "developers.common.back"}} @onClick={{this.goBack}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
@@ -9,14 +9,14 @@
                 <div id="output" class="font-mono rounded-b-md max-h-full p-6 overflow-y-scroll bg-black shadow-inner dark:shadow-none">
                     <div class="flex items-center justify-between mb-4">
                         <div class="block w-1/2 font-mono font-semibold text-green-300">
-                            Output
+                            {{t "developers.sockets.view.output"}}
                         </div>
                         {{#if this.events.length}}
                             <div class="flex items-center justify-end w-1/2 text-sm text-green-300">
                                 <Spinner @iconClass="green-loader" />
 
                                 <span class="ml-2 font-mono">
-                                    Awaiting events...
+                                    {{t "developers.sockets.view.awaiting-events"}}
                                 </span>
                             </div>
                         {{/if}}
@@ -36,7 +36,7 @@
                             <div class="flex items-center mt-6 text-green-300">
                                 <Spinner @iconClass="green-loader" />
                                 <span class="ml-2 font-mono">
-                                    Awaiting events...
+                                    {{t "developers.sockets.view.awaiting-events"}}
                                 </span>
                             </div>
                         {{/each}}
diff --git a/addon/templates/webhooks/index.hbs b/addon/templates/webhooks/index.hbs
index 9a446ec..52e70b2 100644
--- a/addon/templates/webhooks/index.hbs
+++ b/addon/templates/webhooks/index.hbs
@@ -1,5 +1,5 @@
-<Layout::Section::Header @title="Webhooks" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
-    <Button @type="primary" @icon="plus" @iconPrefix="fas" @text="Add new endpoint" class="mr-2" @onClick={{this.createWebhook}} />
+<Layout::Section::Header @title={{t "developers.webhooks.index.title"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <Button @type="primary" @icon="plus" @iconPrefix="fas" @text={{t "developers.webhooks.index.text"}} class="mr-2" @onClick={{this.createWebhook}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/addon/templates/webhooks/view.hbs b/addon/templates/webhooks/view.hbs
index e3c859b..ec89c64 100644
--- a/addon/templates/webhooks/view.hbs
+++ b/addon/templates/webhooks/view.hbs
@@ -1,13 +1,13 @@
 <Layout::Section::Header @title={{@model.url}}>
     {{!-- {{#if @model.isTestMode}}
-        <Button @icon="reply" @text="Send test webhook..." class="mr-2" />
+        <Button @icon="reply" @text={{t "developers.webhooks.view.text"}} class="mr-2" />
     {{/if}} --}}
     {{#if @model.isEnabled}}
-        <Button @icon="ban" @text="Disable..." class="mr-2" @onClick={{fn this.disableWebhook @model}} />
+        <Button @icon="ban" @text={{t "developers.webhooks.view.text"}} class="mr-2" @onClick={{fn this.disableWebhook @model}} />
     {{else}}
-        <Button @icon="ban" @text="Enable..." class="mr-2" @onClick={{fn this.enableWebhook @model}} />
+        <Button @icon="ban" @text={{t "developers.webhooks.view.text-disable"}} class="mr-2" @onClick={{fn this.enableWebhook @model}} />
     {{/if}}
-    <Button @iconPrefix="fas" @icon="times" @text="Delete..." @onClick={{fn this.deleteWebhook @model}} />
+    <Button @iconPrefix="fas" @icon="times" @text={{t "developers.webhooks.view.text-delete"}} @onClick={{fn this.deleteWebhook @model}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index 44808b5..d8dcea1 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -1,2 +1,104 @@
 developers:
-  extension-name: Developers
\ No newline at end of file
+  extension-name: Developers
+  common:
+    new: New
+    export: Export
+    back: Back
+    date: Date  
+    source: Source
+    time: Time 
+    version: Version
+    name: Name
+    key: Key
+  components:
+    api-event: 
+      data: 
+        title: Event data  
+        no-data: No event data
+      details:
+        prefixTitle: Event 
+        description: Description 
+    api-request-log:
+      details:        
+        prefixTitle: Request
+        duration: Duration
+        ip-address: IP Address
+      query-params:
+        title: Request query parameters
+        no-parameters: No query parameters
+      request-headers: 
+        title: Request headers
+        no-headers: No request HEADERS
+      request-body:
+        title: Response body
+        no-response-body: No response body
+    modals:
+      api-key-form: 
+        select-expiration-date: Select an expiration date...
+        key-expires: Once this key expires, you can't perform any actions with it.
+        test-key: Test Key
+        testing-environments: You are creating a test environment key, use this for testing environments.
+        live-key: Live Key
+        production-environments: You are creating a live environment key, use this for production environments.
+      listen-custom-channel:
+        name: Event channel ID
+        helpText: Input the socket channel identifier you want to listen on
+      roll-api-key-form:
+        text: View logs
+        last-used: Last used
+        expiration: Expiration
+        select-date: Select an expiration date...
+        key-expires: Once this key expires, you can't perform any actions with it.
+        additional-required: Additional authentication required
+        enter-password: To continue, please enter your password.
+        email: Email
+        password: Password
+      webhook-form:
+        helpText: The URL Fleetbase should send event callbacks to.
+        helpText-endpoint: Optionally add a description for the webhook endpoint.
+        placeholder: An optional description of what this webhook endpoint is used for.
+        helpText-apikey: Restrict the webhook endpoint to receive callbacks from a specific API key.
+        api-credentials: Receive from all API Credentials...
+        select-credential: You can select a specific API credential that will be used to trigger callbacks to this webhook endpoint, or you can select "All API Credentials", and the webhook endpoint will receive callbacks regardless the API Credential being used.
+        helpText-callback: Select a specific API version to receive callbacks for.
+
+  application:
+    sidebar:
+      title: Developers Console
+      items:
+        home: Dashboard
+        api-keys: API Keys
+        globe: Webhooks
+        plug:  WebSockets
+        logs: Logs
+        events: Events
+  api-keys:
+    index:
+      title: API Keys
+      label: View test data 
+      helpText: Toggling view test data will enable the console to display all test data from your sandbox environment
+      select-key: Select specific key
+      test-data: All test data...
+      delete-api: Delete API Credentials
+  events:
+    index:
+      title: Events
+  logs:
+    index:
+      title: Logs
+  sockets:
+    index:
+      title: Channels receiving events from your account
+      text: Listen on custom channel
+    view:
+      output: Output
+      awaiting-events: Awaiting events...
+  webhooks:
+    index:
+      title: Webhooks
+      text: Add new endpoint
+    view:
+      text: Send test webhook...
+      text-disable: Disable...
+      text-enable: Enable...
+      text-delete: Delete...
\ No newline at end of file

From 7631a65497ecb5a4af450477e0a90f71e3cb4147 Mon Sep 17 00:00:00 2001
From: Bayarbold8 <bayarbold187@gmail.com>
Date: Tue, 9 Jan 2024 14:09:10 +0800
Subject: [PATCH 2/6] add rest of dev-engine and translation files

---
 addon/components/modals/webhook-form.hbs | 14 ++++-----
 addon/components/webhook/attempts.hbs    | 22 +++++++-------
 addon/components/webhook/details.hbs     | 20 ++++++-------
 addon/components/webhook/metrics.hbs     |  8 ++---
 addon/components/widget/api-metrics.hbs  |  2 +-
 translations/en-us.yaml                  | 38 ++++++++++++++++++++++++
 6 files changed, 71 insertions(+), 33 deletions(-)

diff --git a/addon/components/modals/webhook-form.hbs b/addon/components/modals/webhook-form.hbs
index ef76ec4..b8167b8 100644
--- a/addon/components/modals/webhook-form.hbs
+++ b/addon/components/modals/webhook-form.hbs
@@ -37,7 +37,7 @@
 
             <select class="w-full form-select" aria-label="API Version" {{on "change" @options.setVersion}}>
                 <option selected disabled>
-                    Select an API version...
+                    {{t "developers.components.webhook-form.api-version"}}
                 </option>
                 {{#each @options.versionOptions as |opt|}}
                     <option value={{opt}} selected={{eq @options.webhook.version opt}}>
@@ -51,14 +51,14 @@
     <div class="px-5 pt-4">
         <div class="input-group">
             <div class="mb-4">
-                <InputLabel class="mb-2" @labelText="Events to send" @helpText="Explicilty set which events to receive callbacks for." />
+                <InputLabel class="mb-2" @labelText="Events to send" @helpText={{t "developers.components.modals.webhook-form.callback"}} />
 
                 <div class="flex items-start justify-between">
                     <div class="w-1/2">
                         <BasicDropdown @renderInPlace={{true}} as |dd|>
                             <dd.Trigger>
                                 <div class="w-full px-3 py-2 text-sm leading-4 cursor-pointer form-select hover:shadow-sm">
-                                    Select events...
+                                    {{t "developers.components.webhook-form.api.select-events"}}
                                 </div>
                             </dd.Trigger>
                             <dd.Content class="w-full h-48 mt-1 overflow-y-hidden border bg-white border-gray-300 rounded shadow-md dark:border-gray-800 dark:bg-gray-700">
@@ -88,7 +88,7 @@
                         </BasicDropdown>
                     </div>
                     <a href="javascript:;" class="no-underline" {{on "click" @options.clearEvents}}>
-                        Clear
+                        {{t "developers.common.clear"}}
                     </a>
                 </div>
             </div>
@@ -110,12 +110,12 @@
                     <div class="flex items-center justify-center h-full dark:text-gray-100">
                         <div class="flex flex-col items-center justify-center w-2/4 h-full my-8 text-center">
                             <div class="font-semibold">
-                                No events selected
+                                {{t "developers.components.webhook-form.no-selected"}}
                             </div>
                             <p>
-                                Search for events with the dropdown above, or
+                                {{t "developers.components.modals.webhook-form.dropdown"}}
                                 <a href="javascript:;" class="no-underline" {{on "click" @options.receiveAllEvents}}>
-                                    receive all events
+                                    {{t "developers.components.modals.webhook-form.all-events"}}
                                 </a>
                                 .
                             </p>
diff --git a/addon/components/webhook/attempts.hbs b/addon/components/webhook/attempts.hbs
index 0176209..1f70969 100644
--- a/addon/components/webhook/attempts.hbs
+++ b/addon/components/webhook/attempts.hbs
@@ -3,10 +3,10 @@
         <div class="flex items-center">
             <div>
                 <h3 class="mb-1 mr-4 text-xl font-bold dark:text-gray-100">
-                    Webhook attempts
+                    {{t "developers.components.webhook.attempts.webhook-attempts"}}
                 </h3>
                 <p class="dark:text-gray-100 text-sm">
-                    Attempts to send an event to your endpoint in the past 15 days
+                    {{t "developers.components.webhook.attempts.endpoint"}}
                 </p>
             </div>
         </div>
@@ -15,13 +15,13 @@
             <div class="rounded-lg border borer-gray-300 dark:border-gray-700 shadow-sm">
                 <div class="rounded-lg flex items-center justify-between px-2 py-1 text-sm bg-white dark:bg-gray-900">
                     <a href="javascript:;" class="mx-4 no-underline text-gray-400 {{if this.noAttemptStatus "font-semibold text-blue-400"}}" {{on "click" this.changeAttemptStatus}}>
-                        All
+                        {{t "developers.common.all"}}
                     </a>
                     <a href="javascript:;" class="mx-4 no-underline text-gray-400 {{if (eq this.attemptStatus "successful") "font-semibold text-blue-400"}}" {{on "click" (fn this.changeAttemptStatus "successful")}}>
-                        Succeeded
+                        {{t "developers.common.succeeded"}}
                     </a>
                     <a href="javascript:;" class="mx-4 no-underline text-gray-400 {{if (eq this.attemptStatus "failed") "font-semibold text-blue-400"}}" {{on "click" (fn this.changeAttemptStatus "failed")}}>
-                        Failed
+                        {{t "developers.common.failed"}}
                     </a>
                 </div>
             </div>
@@ -36,7 +36,7 @@
                         <tbody>
                             <tr>
                                 <td class="w-64">
-                                    HTTP status code
+                                    {{t "developers.components.webhook.attempts.http-code"}}
                                 </td>
                                 <td>
                                     {{row.status_code}} ({{row.reason_phrase}})
@@ -44,7 +44,7 @@
                             </tr>
                             <tr>
                                 <td class="w-64">
-                                    Response time
+                                    {{t "developers.components.webhook.attempts.response-time"}}
                                 </td>
                                 <td>
                                     {{format-milliseconds row.duration}}
@@ -52,7 +52,7 @@
                             </tr>
                             <tr>
                                 <td>
-                                    Request to your endpoint
+                                    {{t "developers.components.webhook.attempts.request-endpoint"}}
                                 </td>
                                 <td>
                                     {{#if row.api_event.data}}
@@ -60,7 +60,7 @@
                                     {{else}}
                                         <div class="flex items-center justify-center h-24">
                                             <span class="text-sm text-gray-600">
-                                                No request body
+                                                {{t "developers.components.webhook.attempts.no-request-body"}}
                                             </span>
                                         </div>
                                     {{/if}}
@@ -68,7 +68,7 @@
                             </tr>
                             <tr>
                                 <td>
-                                    Response
+                                    {{t "developers.components.webhook.attempts.response"}}
                                 </td>
                                 <td>
                                     {{#if row.response}}
@@ -76,7 +76,7 @@
                                     {{else}}
                                         <div class="flex items-center justify-center h-24">
                                             <span class="text-sm text-gray-600">
-                                                No response body
+                                                {{t "developers.components.webhook.attempts.no-response-body"}}
                                             </span>
                                         </div>
                                     {{/if}}
diff --git a/addon/components/webhook/details.hbs b/addon/components/webhook/details.hbs
index 97b49d3..17d8ee1 100644
--- a/addon/components/webhook/details.hbs
+++ b/addon/components/webhook/details.hbs
@@ -2,12 +2,12 @@
     <div class="content-panel-header">
         <div class="flex items-center">
             <h3 class="mr-4 text-xl font-bold dark:text-gray-100">
-                Webhook details
+                {{t "developers.components.webhook.details.webhook-details"}}
             </h3>
         </div>
 
         <div class="flex items-center section-header-actions">
-            <Button @icon="pencil" @text="Update details..." @onClick={{this.onClickUpdateWebhook}} />
+            <Button @icon="pencil" @text={{t "developers.components.webhook.details.update-details"}} @onClick={{this.onClickUpdateWebhook}} />
         </div>
     </div>
     <div class="text-sm content-panel-body">
@@ -15,7 +15,7 @@
             <tbody>
                 <tr>
                     <td class="w-40">
-                        URL
+                        {{t "developers.common.url"}}
                     </td>
                     <td>
                         {{n-a @webhook.url}}
@@ -23,7 +23,7 @@
                 </tr>
                 <tr>
                     <td>
-                        Description
+                        {{t "developers.common.description"}}
                     </td>
                     <td>
                         {{n-a @webhook.description}}
@@ -31,14 +31,14 @@
                 </tr>
                 <tr>
                     <td>
-                        Event Types
+                        {{t "developers.components.webhook.details.event-types"}}
                     </td>
                     <td>
                         {{#if @webhook.is_listening_on_all_events}}
-                            <Badge @status="warning" @hideStatusDot={{true}} @helpText="You will receive webhooks for new event types as they are added, except for those that require explicit selection. Listening for all event types is usually not necessary and may increase load on your servers.">
+                            <Badge @status="warning" @hideStatusDot={{true}} @helpText={{t "developers.components.webhook.details.helpText"}}>
                                 <FaIcon @icon="exclamation-triangle" />
                                 <span class="ml-2">
-                                    All Events
+                                    {{t "developers.components.webhook.details.all-events"}}
                                 </span>
                             </Badge>
                         {{else}}
@@ -48,14 +48,14 @@
                 </tr>
                 <tr>
                     <td>
-                        API Credential
+                        {{t "developers.components.webhook.details.api-credential"}}
                     </td>
                     <td>
                         {{#if @webhook.receivingFromAllApiCredentials}}
-                            <Badge @status="warning" @hideStatusDot={{true}} @helpText="You will receive webhooks callbacks regardless what API Credential is used to trigger the event.">
+                            <Badge @status="warning" @hideStatusDot={{true}} @helpText={{t "developers.components.webhook.details.helpText-event"}}>
                                 <FaIcon @icon="exclamation-triangle" />
                                 <span class="ml-2">
-                                    Receiving from all API Credentials
+                                    {{t"developers.components.webhook.details.api-credentials"}}
                                 </span>
                             </Badge>
                         {{else}}
diff --git a/addon/components/webhook/metrics.hbs b/addon/components/webhook/metrics.hbs
index 63a2610..d3913ff 100644
--- a/addon/components/webhook/metrics.hbs
+++ b/addon/components/webhook/metrics.hbs
@@ -3,19 +3,19 @@
         <div class="flex items-center text-sm dark:text-gray-100">
             <div class="px-6 py-3 pl-0 mr-3 border-r border-gray-100 dark:border-gray-900">
                 <div class="mb-1">
-                    Status
+                    {{t "developers.common.status"}}
                 </div>
                 <Badge @status={{@webhook.status}} />
             </div>
             <div class="px-6 py-3 mr-3 border-r border-gray-100 dark:border-gray-900">
                 <div class="mb-1">
-                    Mode
+                    {{t "developers.common.mode"}}
                 </div>
                 <Badge @status={{@webhook.mode}} />
             </div>
             <div class="px-6 py-3 mr-3 border-r border-gray-100 dark:border-gray-900">
                 <div class="mb-1">
-                    Version
+                    {{t "developers.common.version"}}
                 </div>
                 <div>
                     {{n-a @webhook.version}}
@@ -23,7 +23,7 @@
             </div>
             <div class="px-6 py-3">
                 <div class="mb-1">
-                    Date Created
+                    {{t "developers.components.webhook.metrics.date-created"}}
                 </div>
                 <div>
                     {{@webhook.createdAt}}
diff --git a/addon/components/widget/api-metrics.hbs b/addon/components/widget/api-metrics.hbs
index da9609e..b69df7d 100644
--- a/addon/components/widget/api-metrics.hbs
+++ b/addon/components/widget/api-metrics.hbs
@@ -1,4 +1,4 @@
-<ContentPanel @title="Monitoring" @open={{or @open true}} @pad={{or @pad false}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.components.widget.api-metrics.titlek"}} @open={{or @open true}} @pad={{or @pad false}} @panelBodyClass="bg-white dark:bg-gray-800">
     <div class="grid grid-cols-1 md:grid-cols-2">
         <div class="w-full border-b border-r border-gray-200 dark:border-gray-900">
             <h4 class="my-3 text-sm font-semibold mx-5">API Requests</h4>
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index d8dcea1..31af3a3 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -10,6 +10,14 @@ developers:
     version: Version
     name: Name
     key: Key
+    clear: Clear
+    all: All 
+    succeeded: Succeeded
+    failed: Failed
+    url: URL
+    description: Description
+    status: Status
+    mode: Mode
   components:
     api-event: 
       data: 
@@ -61,6 +69,36 @@ developers:
         api-credentials: Receive from all API Credentials...
         select-credential: You can select a specific API credential that will be used to trigger callbacks to this webhook endpoint, or you can select "All API Credentials", and the webhook endpoint will receive callbacks regardless the API Credential being used.
         helpText-callback: Select a specific API version to receive callbacks for.
+        api-version: Select an API version...
+        callback: Explicilty set which events to receive callbacks for.
+        select-events: Select events...
+        no-selected: No events selected
+        dropdown: Search for events with the dropdown above, or
+        all-events: receive all events
+    webhook:
+      attempts: 
+        webhook-attempts: Webhook attempts
+        endpoint: Attempts to send an event to your endpoint in the past 15 days
+        http-code: HTTP status code
+        response-time: Response timer
+        request-endpoint: Request to your endpoint
+        no-request-body: No request body
+        response: Response
+        no-response-body: No response body
+      details:
+        webhook-details: Webhook details
+        update-details: Update details...
+        event-types: Event Types
+        helpText: You will receive webhooks for new event types as they are added, except for those that require explicit selection. Listening for all event types is usually not necessary and may increase load on your servers.
+        all-events: All Events
+        api-credential: API Credential
+        helpText-event: You will receive webhooks callbacks regardless what API Credential is used to trigger the event.
+        api-credentials: Receiving from all API Credentials
+      metrics:
+        date-created: Date Created
+    widget:
+      api-metrics:  
+        title: Monitoring
 
   application:
     sidebar:

From 341d01add8a70972d381d63f4688a07d0e801aab Mon Sep 17 00:00:00 2001
From: Bayarbold8 <bayarbold187@gmail.com>
Date: Wed, 10 Jan 2024 17:57:44 +0800
Subject: [PATCH 3/6] fixed mistake on components

---
 addon/components/webhook/details.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addon/components/webhook/details.hbs b/addon/components/webhook/details.hbs
index 17d8ee1..9ca3717 100644
--- a/addon/components/webhook/details.hbs
+++ b/addon/components/webhook/details.hbs
@@ -55,7 +55,7 @@
                             <Badge @status="warning" @hideStatusDot={{true}} @helpText={{t "developers.components.webhook.details.helpText-event"}}>
                                 <FaIcon @icon="exclamation-triangle" />
                                 <span class="ml-2">
-                                    {{t"developers.components.webhook.details.api-credentials"}}
+                                    {{t "developers.components.webhook.details.api-credentials"}}
                                 </span>
                             </Badge>
                         {{else}}

From 7ab6f817041d2826b382e38ca9a7bf3ff20bc80f Mon Sep 17 00:00:00 2001
From: Munkh-erdene Damdinbazar <mmddd@Munkh-erdenes-MacBook-Pro.local>
Date: Thu, 18 Jan 2024 14:37:13 +0800
Subject: [PATCH 4/6] dev-engine completed and translation file

---
 addon/components/api-event/data.hbs           |   4 +-
 addon/components/api-event/details.hbs        |   4 +-
 addon/components/api-request-log/details.hbs  |   6 +-
 .../api-request-log/query-params.hbs          |   4 +-
 .../api-request-log/request-body.hbs          |   4 +-
 .../api-request-log/request-headers.hbs       |   4 +-
 .../api-request-log/response-body.hbs         |   4 +-
 addon/components/modals/api-key-form.hbs      |  24 +-
 .../modals/listen-custom-channel.hbs          |   2 +-
 .../components/modals/rename-api-key-form.hbs |   4 +-
 addon/components/modals/roll-api-key-form.hbs |  26 +--
 addon/components/modals/webhook-form.hbs      |  32 +--
 addon/components/webhook/attempts.hbs         |  16 +-
 addon/components/webhook/attempts.js          |  23 +-
 addon/components/webhook/details.hbs          |  16 +-
 addon/components/webhook/metrics.hbs          |   2 +-
 addon/components/widget/api-metrics.hbs       |  10 +-
 addon/components/widget/api-metrics.js        |  19 +-
 addon/controllers/api-keys/index.js           |  39 ++--
 addon/controllers/events/index.js             |  15 +-
 addon/controllers/logs/index.js               |  21 +-
 addon/controllers/sockets/index.js            |  15 +-
 addon/controllers/sockets/view.js             |  13 +-
 addon/controllers/webhooks/index.js           |  39 ++--
 addon/controllers/webhooks/view.js            |  29 ++-
 addon/templates/api-keys/index.hbs            |   4 +-
 addon/templates/application.hbs               |  10 +-
 addon/templates/events/view.hbs               |   2 +-
 addon/templates/sockets/index.hbs             |   2 +-
 addon/templates/webhooks/index.hbs            |   2 +-
 addon/templates/webhooks/view.hbs             |   8 +-
 translations/en-us.yaml                       | 210 +++++++++++++-----
 32 files changed, 392 insertions(+), 221 deletions(-)

diff --git a/addon/components/api-event/data.hbs b/addon/components/api-event/data.hbs
index 857e54a..8b78d16 100644
--- a/addon/components/api-event/data.hbs
+++ b/addon/components/api-event/data.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title={{t "developers.components.api-event.data.title"}} @open={{true}} @pad={{true}} @panelTitleClass="text-sm" @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.component.api-event.data.title"}} @open={{true}} @pad={{true}} @panelTitleClass="text-sm" @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiEvent.data}}
         <CodeBlock @code={{or @apiEvent.dataJson ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-600">
-                {{t "developers.components.api-event.data.no-data"}}
+                {{t "developers.component.api-event.data.no-data"}}
             </span>
         </div>
     {{/if}}
diff --git a/addon/components/api-event/details.hbs b/addon/components/api-event/details.hbs
index 073cedf..155b92e 100644
--- a/addon/components/api-event/details.hbs
+++ b/addon/components/api-event/details.hbs
@@ -1,4 +1,4 @@
-<ContentPanel @prefixTitle={{t "developers.components.api-event.details.prefixTitle"}} @title={{@apiEvent.event}} @prefixTitleRight={{@apiEvent.public_id}} @titleContainerClass="flex-col" @panelTitleClass="text-sm" @prefixTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
+<ContentPanel @prefixTitle={{t "developers.component.api-event.details.prefixTitle"}} @title={{@apiEvent.event}} @prefixTitleRight={{@apiEvent.public_id}} @titleContainerClass="flex-col" @panelTitleClass="text-sm" @prefixTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
     <table class="border-none table-fixed dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
         <tbody>
             <tr>
@@ -19,7 +19,7 @@
             </tr>
             <tr>
                 <td>
-                    {{t "developers.components.api-events.details.description"}}
+                    {{t "developers.common.description"}}
                 </td>
                 <td>
                     {{@apiEvent.description}}
diff --git a/addon/components/api-request-log/details.hbs b/addon/components/api-request-log/details.hbs
index a985c53..a85a5e5 100644
--- a/addon/components/api-request-log/details.hbs
+++ b/addon/components/api-request-log/details.hbs
@@ -1,4 +1,4 @@
-<ContentPanel @prefixTitle={{t "developers.components.api-request-log.details.prefixTitle"}} @title={{@apiRequest.description}} @titleStatus={{@apiRequest.status_code}} @prefixTitleRight={{@apiRequest.public_id}} @titleContainerClass="flex-col" @panelTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleClass="text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
+<ContentPanel @prefixTitle={{t "developers.component.api-request-log.details.prefixTitle"}} @title={{@apiRequest.description}} @titleStatus={{@apiRequest.status_code}} @prefixTitleRight={{@apiRequest.public_id}} @titleContainerClass="flex-col" @panelTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleClass="text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
     <table class="border-none table-fixed dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
         <tbody>
             <tr>
@@ -11,7 +11,7 @@
             </tr>
             <tr>
                 <td class="w-40">
-                    {{t "developers.components.api-request-log.details.duration"}}
+                    {{t "developers.component.api-request-log.details.duration"}}
                 </td>
                 <td>
                     {{format-milliseconds @apiRequest.duration}}
@@ -19,7 +19,7 @@
             </tr>
             <tr>
                 <td>
-                    {{t "developers.components.api-request-log.details.ip-address"}}
+                    {{t "developers.component.api-request-log.details.ip-address"}}
                 </td>
                 <td>
                     {{@apiRequest.ip_address}}
diff --git a/addon/components/api-request-log/query-params.hbs b/addon/components/api-request-log/query-params.hbs
index bdc9548..e510e8a 100644
--- a/addon/components/api-request-log/query-params.hbs
+++ b/addon/components/api-request-log/query-params.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title={{t "developers.components.api-request-log.query-params.title"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.component.api-request-log.query-params.title"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiRequest.query_params}}
         <CodeBlock @code={{or (json-stringify @apiRequest.query_params) ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-400">
-                {{t "developers.components.api-request-log.query-params.no-parameters"}}
+                {{t "developers.component.api-request-log.query-params.no-parameters"}}
             </span>
         </div>
     {{/if}}
diff --git a/addon/components/api-request-log/request-body.hbs b/addon/components/api-request-log/request-body.hbs
index eb4ada1..c4e6ce3 100644
--- a/addon/components/api-request-log/request-body.hbs
+++ b/addon/components/api-request-log/request-body.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title={{concat "Request " @apiRequest.method " body"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{concat (t "developers.component.api-request-log.request-body.title") @apiRequest.method (t "developers.component.api-request-log.request-body.title-second-part")}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiRequest.request_body}}
         <CodeBlock @code={{or (json-stringify @apiRequest.request_body) ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-400">
-                {{t "developers.components.api-request-log.request-body.no-request" htmlSafe=true method=@apiRequest.method}}
+                {{t "developers.component.api-request-log.request-body.no-request-body" htmlSafe=true method=@apiRequest.method}}
             </span>
         </div>
     {{/if}}
diff --git a/addon/components/api-request-log/request-headers.hbs b/addon/components/api-request-log/request-headers.hbs
index 808e36c..67e99d1 100644
--- a/addon/components/api-request-log/request-headers.hbs
+++ b/addon/components/api-request-log/request-headers.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title={{t "developers.components.api-request-log.request-headers.title"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.component.api-request-log.request-headers.title"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiRequest.request_headers}}
         <CodeBlock @code={{or (json-stringify @apiRequest.request_headers) ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-400">
-                {{t "developers.components.api-request-log.request-headers.no-headers"}}
+                {{t "developers.component.api-request-log.request-headers.no-headers"}}
             </span>
         </div>
     {{/if}}
diff --git a/addon/components/api-request-log/response-body.hbs b/addon/components/api-request-log/response-body.hbs
index b2bfd76..52b41b8 100644
--- a/addon/components/api-request-log/response-body.hbs
+++ b/addon/components/api-request-log/response-body.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title={{t "developers.components.api-request-log.response-body.title"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.component.api-request-log.response-body.title"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiRequest.response_body}}
         <CodeBlock @code={{or (json-stringify @apiRequest.response_body) ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-400">
-                {{t "developers.components.api-request-log.response-body.no-response-body"}}
+                {{t "developers.component.api-request-log.response-body.no-response-body"}}
             </span>
         </div>
     {{/if}}
diff --git a/addon/components/modals/api-key-form.hbs b/addon/components/modals/api-key-form.hbs
index bc22f71..a7b2aaf 100644
--- a/addon/components/modals/api-key-form.hbs
+++ b/addon/components/modals/api-key-form.hbs
@@ -2,16 +2,16 @@
     <div class="modal-body-container">
         <div class="input-group">
             <label>
-                {{t "developers.common.Name"}}
+                {{t "developers.common.name"}}
             </label>
-            <Input @value={{options.apiKey.name}} @type="text" aria-label="API Key Name" class="w-full form-input" placeholder="Enter a nickname or environment name for API Key" />
+            <Input @value={{options.apiKey.name}} @type="text" aria-label={{t "developers.component.modals.api-key-form.api-name-aria-label"}} class="w-full form-input" placeholder={{t "developers.component.modals.api-key-form.name-placeholder"}} />
         </div>
         <div class="input-group">
-            <InputLabel @labelText="Expiration" @helpText="Optionally set an expiry date for this api key." />
+            <InputLabel @labelText={{t "developers.component.modals.api-key-form.expiration-label"}} @helpText={{t "developers.component.modals.api-key-form.expiration-help-text"}} />
 
-            <select class="w-full mb-1 form-select" aria-label="API Key Expiration Date" {{on "change" @options.setExpiration}}>
+            <select class="w-full mb-1 form-select" aria-label={{t "developers.component.modals.api-key-form.api-expiration-aria-label"}} {{on "change" @options.setExpiration}}>
                 <option selected disabled>
-                    {{t " developers.modals.api-key-form.select-expiration-date"}}
+                    {{t "developers.component.modals.api-key-form.select-expiration-date"}}
                 </option>
                 {{#each @options.expirationOptions as |opt|}}
                     <option value={{opt}}>
@@ -20,30 +20,30 @@
                 {{/each}}
             </select>
             <p class="text-xs dark:text-gray-100">
-                {{t "developers.components.modals.api-key-form.key-expires"}}
+                {{t "developers.component.modals.api-key-form.key-expires"}}
             </p>
         </div>
 
         <div class="input-group">
-            <ArrayInput @data={{@options.apiKey.browser_origins}} @placeholder="Enter domain" @onDataChanged={{fn (mut @options.apiKey.browser_origins)}}>
-                <InputLabel @labelText="Allowed Browser Origins" @helpText="Input domains that will dictate the CORS policy for browser request from this api key." />
+            <ArrayInput @data={{@options.apiKey.browser_origins}} @placeholder={{t "developers.component.modals.api-key-form.enter-domain-placeholder"}} @onDataChanged={{fn (mut @options.apiKey.browser_origins)}}>
+                <InputLabel @labelText={{t "developers.component.modals.api-key-form.allowed-browser-label"}} @helpText={{t "developers.component.modals.api-key-form.allowed-browser-help-text"}} />
             </ArrayInput>
         </div>
 
         <div class="flex flex-col input-group">
             {{#if @options.testMode}}
                 <Badge @status="test">
-                    {{t "developers.components.modals.api-key-form.test-key"}}
+                    {{t "developers.component.modals.api-key-form.test-key"}}
                 </Badge>
                 <p class="block my-2 text-sm text-blue-500 dark:text-blue-300">
-                    {{t "developers.components.modals.api-keys-form.testing-environments"}}
+                    {{t "developers.component.modals.api-key-form.testing-environments"}}
                 </p>
             {{else}}
                 <Badge @status="live">
-                    {{t "developers.components.modals.api-keys-form.live-key"}}
+                    {{t "developers.component.modals.api-key-form.live-key"}}
                 </Badge>
                 <p class="block my-2 text-sm text-blue-500 dark:text-blue-300">
-                    {{t "developers.components.modals.api-keys-form.production-environments"}}
+                    {{t "developers.component.modals.api-key-form.production-environments"}}
                 </p>
             {{/if}}
         </div>
diff --git a/addon/components/modals/listen-custom-channel.hbs b/addon/components/modals/listen-custom-channel.hbs
index 41ee442..965c5d1 100644
--- a/addon/components/modals/listen-custom-channel.hbs
+++ b/addon/components/modals/listen-custom-channel.hbs
@@ -1,5 +1,5 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} as |options|>
     <div class="modal-body-container">
-        <InputGroup @name={{t "developers.components.modals.listen-custom-channel.name"}} @value={{@options.channelId}} @helpText={{t "developers.components.modals.listen-custom-channel.helpText"}} />
+        <InputGroup @name={{t "developers.component.modals.listen-custom-channel.name"}} @value={{@options.channelId}} @helpText={{t "developers.component.modals.listen-custom-channel.name-help-text"}} />
     </div>
 </Modal::Default>
\ No newline at end of file
diff --git a/addon/components/modals/rename-api-key-form.hbs b/addon/components/modals/rename-api-key-form.hbs
index 703c576..405e7e9 100644
--- a/addon/components/modals/rename-api-key-form.hbs
+++ b/addon/components/modals/rename-api-key-form.hbs
@@ -2,9 +2,9 @@
     <div class="modal-body-container">
         <div class="input-group">
             <label>
-                {{t "developers.components.common.name"}}
+                {{t "developers.common.name"}}
             </label>
-            <Input @value={{options.apiKey.name}} @type="text" aria-label="API Key Name" class="w-full form-input" placeholder="Enter a nickname or environment name for API Key" />
+            <Input @value={{options.apiKey.name}} @type="text" aria-label={{t "developers.component.modals.rename-api-key-form.api-key-label"}} class="w-full form-input" placeholder={{t "developers.component.modals.rename-api-key-form.api-key-placeholder"}} />
         </div>
     </div>
 </Modal::Default>
\ No newline at end of file
diff --git a/addon/components/modals/roll-api-key-form.hbs b/addon/components/modals/roll-api-key-form.hbs
index b394cfe..df1fa8b 100644
--- a/addon/components/modals/roll-api-key-form.hbs
+++ b/addon/components/modals/roll-api-key-form.hbs
@@ -3,14 +3,14 @@
         <div class="flex">
             <div class="w-1/4">
                 <span class="font-semibold dark:text-gray-100">
-                    {{t "developers.components.common.keys"}}
+                    {{t "developers.common.key"}}
                 </span>
             </div>
             <div class="w-3/4">
                 <div class="mb-2 dark:text-gray-100">
                     {{@options.apiKey.key}}
                 </div>
-                <Button @text={{t "developers.components.modals.roll-api-key-form.text"}} @size="xs" @icon="arrow-right" @onClick={{fn @options.viewRequestLogs @options.apiKey}} />
+                <Button @text={{t "developers.component.modals.roll-api-key-form.view-button-text"}} @size="xs" @icon="arrow-right" @onClick={{fn @options.viewRequestLogs @options.apiKey}} />
             </div>
         </div>
     </div>
@@ -19,7 +19,7 @@
         <div class="flex">
             <div class="w-1/4">
                 <span class="font-semibold dark:text-gray-100">
-                    {{t "developers.components.modals.roll-api-key-form.last-used"}}
+                    {{t "developers.component.modals.roll-api-key-form.last-used"}}
                 </span>
             </div>
             <div class="w-3/4 dark:text-gray-100">
@@ -32,13 +32,13 @@
         <div class="flex">
             <div class="w-1/4">
                 <span class="font-semibold dark:text-gray-100">
-                    {{t "developers.components.modals.roll-api-key-form.expiration"}}
+                    {{t "developers.component.modals.roll-api-key-form.expiration"}}
                 </span>
             </div>
             <div class="w-3/4">
-                <select class="w-full mb-2 form-select form-input-sm" aria-label="API Key Expiration" {{on "change" @options.setExpiration}}>
+                <select class="w-full mb-2 form-select form-input-sm" aria-label={{t "developers.component.modals.roll-api-key-form.api-key-expiration-label"}} {{on "change" @options.setExpiration}}>
                     <option selected disabled>
-                        {{t "developers.components.modals.roll-api-key-form.select-date"}}
+                        {{t "developers.component.modals.roll-api-key-form.select-date"}}
                     </option>
                     {{#each @options.expirationOptions as |opt|}}
                         <option value={{opt}}>
@@ -47,7 +47,7 @@
                     {{/each}}
                 </select>
                 <p class="dark:text-gray-100">
-                    {{t "developers.components.modals.roll-api-key-form.key-expires"}}
+                    {{t "developers.component.modals.roll-api-key-form.key-expires"}}
                 </p>
             </div>
         </div>
@@ -56,25 +56,25 @@
     <div class="px-5 py-4 border-t border-gray-200 dark:border-gray-800">
         <div class="mt-2 mb-7">
             <div class="font-semibold dark:text-gray-100">
-                {{t "developers.components.modals.roll-api-key-form.additional-required"}}
+                {{t "developers.component.modals.roll-api-key-form.additional-required"}}
             </div>
             <p class="dark:text-white">
-                {{t "developers.components.modals.roll-api-key-form.enter-password."}}
+                {{t "developers.component.modals.roll-api-key-form.enter-password"}}
             </p>
         </div>
 
         <div class="input-group">
             <label>
-                {{t "developers.components.modals.roll-api-key-form.email"}}
+                {{t "developers.common.email"}}
             </label>
-            <Input @type="email" @value={{@options.user.email}} aria-label="User Email" class="w-full form-input" disabled="true" />
+            <Input @type="email" @value={{@options.user.email}} aria-label={{t "developers.component.modals.roll-api-key-form.user-email"}} class="w-full form-input" disabled="true" />
         </div>
 
         <div class="input-group">
             <label>
-                {{t "developers.components.modals.roll-api-key-form.password"}}
+                {{t "developers.common.password"}}
             </label>
-            <Input @type="password" @value={{@options.password}} aria-label="User Password" placeholder="Authenticate request using your password" class="w-full form-input" />
+            <Input @type="password" @value={{@options.password}} aria-label={{t "developers.component.modals.roll-api-key-form.user-password"}} placeholder={{t "developers.component.modals.roll-api-key-form.user-password-placeholder"}} class="w-full form-input" />
         </div>
     </div>
 </Modal::Default>
\ No newline at end of file
diff --git a/addon/components/modals/webhook-form.hbs b/addon/components/modals/webhook-form.hbs
index b8167b8..ce2062c 100644
--- a/addon/components/modals/webhook-form.hbs
+++ b/addon/components/modals/webhook-form.hbs
@@ -1,23 +1,23 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} as |options|>
     <div class="px-5 border-b border-gray-200 dark:border-gray-800">
         <div class="input-group">
-            <InputLabel @labelText="Endpoint URL" @helpText={{t "developers.components.modals.webhook-form.helpText"}} @required={{true}} />
-            <Input @value={{options.webhook.url}} @type="url" aria-label="Webhook URL" class="w-full form-input" placeholder="https://" />
+            <InputLabel @labelText={{t "developers.component.modals.webhook-form.endpoint-url"}} @helpText={{t "developers.component.modals.webhook-form.endpoint-url-help-text"}} @required={{true}} />
+            <Input @value={{options.webhook.url}} @type="url" aria-label="Webhook URL" class="w-full form-input" placeholder={{t "developers.component.modals.webhook-form.endpoint-url-placeholder"}} />
         </div>
 
         <div class="input-group">
-            <InputLabel @labelText="Description" @helpText={{t "developers.components.modals.webhook-form.helpText-endpoint"}} />
-            <Textarea @value={{options.webhook.description}} aria-label="Webhook Description" class="w-full form-input" placeholder={{t "developers.components.modals.webhook-form.placeholder"}} />
+            <InputLabel @labelText={{t "developers.component.modals.webhook-form.description-label"}} @helpText={{t "developers.component.modals.webhook-form.description-help-text"}} />
+            <Textarea @value={{options.webhook.description}} aria-label={{t "developers.component.modals.webhook-form.description-aria-label"}} class="w-full form-input" placeholder={{t "developers.component.modals.webhook-form.description-placeholder"}} />
         </div>
     </div>
 
     <div class="px-5 pt-4 border-b border-gray-200 dark:border-gray-800">
         <div class="input-group">   
-            <InputLabel @labelText="API Credential" @helpText={{t "developers.components.modals.webhook-form.helpText-apikey"}} />
+            <InputLabel @labelText={{t "developers.component.modals.webhook-form.api-credential-label"}} @helpText={{t "developers.component.modals.webhook-form.api-credential-help-text"}} />
 
-            <select class="w-full form-select" aria-label="API Credential" {{on "change" @options.setApiCredential}}>
+            <select class="w-full form-select" aria-label={{t "developers.component.modals.webhook-form.api-credential-label"}} {{on "change" @options.setApiCredential}}>
                 <option value={{null}} selected>
-                    {{t "developers.components.modals.webhook-form.api-credentials"}}
+                    {{t "developers.component.modals.webhook-form.api-credential-message"}}
                 </option>
                 {{#each @options.apiCredentialOptions as |opt|}}
                     <option value={{opt.id}} selected={{eq @options.webhook.api_credential_uuid opt.id}}>
@@ -26,18 +26,18 @@
                 {{/each}}
             </select>
             <InfoBlock class="mt-3">
-                {{t "developers. components.modals.webhook-form.select-credential"}}
+                {{t "developers.component.modals.webhook-form.api-credential-infoblock"}}
             </InfoBlock>
         </div>
     </div>
 
     <div class="px-5 pt-4 border-b border-gray-200 dark:border-gray-800">
         <div class="input-group">
-            <InputLabel @labelText="Version" @helpText={{t "developers.components.modals.webhook-form."}} />
+            <InputLabel @labelText={{t "developers.common.version"}} @helpText={{t "developers.component.modals.webhook-form.version-help-text"}} />
 
             <select class="w-full form-select" aria-label="API Version" {{on "change" @options.setVersion}}>
                 <option selected disabled>
-                    {{t "developers.components.webhook-form.api-version"}}
+                    {{t "developers.component.modals.webhook-form.version-message"}}
                 </option>
                 {{#each @options.versionOptions as |opt|}}
                     <option value={{opt}} selected={{eq @options.webhook.version opt}}>
@@ -51,19 +51,19 @@
     <div class="px-5 pt-4">
         <div class="input-group">
             <div class="mb-4">
-                <InputLabel class="mb-2" @labelText="Events to send" @helpText={{t "developers.components.modals.webhook-form.callback"}} />
+                <InputLabel class="mb-2" @labelText={{t "developers.component.modals.webhook-form.events-send-label"}} @helpText={{t "developers.component.modals.webhook-form.events-send-help-text"}} />
 
                 <div class="flex items-start justify-between">
                     <div class="w-1/2">
                         <BasicDropdown @renderInPlace={{true}} as |dd|>
                             <dd.Trigger>
                                 <div class="w-full px-3 py-2 text-sm leading-4 cursor-pointer form-select hover:shadow-sm">
-                                    {{t "developers.components.webhook-form.api.select-events"}}
+                                    {{t "developers.component.modals.webhook-form.select-events"}}
                                 </div>
                             </dd.Trigger>
                             <dd.Content class="w-full h-48 mt-1 overflow-y-hidden border bg-white border-gray-300 rounded shadow-md dark:border-gray-800 dark:bg-gray-700">
                                 <div class="w-full rounded shadow">
-                                    <Input aria-label="Event Search" placeholder="Search..." class="w-full px-3 py-2 text-sm leading-4 border-b border-gray-300 shadow-sm dark:border-gray-800 dark:bg-gray-700 dark:text-gray-100" {{on "keyup" @options.searchEvents}} />
+                                    <Input aria-label={{t "developers.component.modals.webhook-form.event-search-label"}} placeholder={{t "developers.component.modals.webhook-form.event-search-placeholder"}} class="w-full px-3 py-2 text-sm leading-4 border-b border-gray-300 shadow-sm dark:border-gray-800 dark:bg-gray-700 dark:text-gray-100" {{on "keyup" @options.searchEvents}} />
                                     <div class="w-full h-40 pb-2 overflow-y-scroll">
                                         {{#each-in @options.eventOptions as |resourceName events|}}
                                             <div class="">
@@ -110,12 +110,12 @@
                     <div class="flex items-center justify-center h-full dark:text-gray-100">
                         <div class="flex flex-col items-center justify-center w-2/4 h-full my-8 text-center">
                             <div class="font-semibold">
-                                {{t "developers.components.webhook-form.no-selected"}}
+                                {{t "developers.component.modals.webhook-form.no-selected"}}
                             </div>
                             <p>
-                                {{t "developers.components.modals.webhook-form.dropdown"}}
+                                {{t "developers.component.modals.webhook-form.dropdown"}}
                                 <a href="javascript:;" class="no-underline" {{on "click" @options.receiveAllEvents}}>
-                                    {{t "developers.components.modals.webhook-form.all-events"}}
+                                    {{t "developers.component.modals.webhook-form.all-events"}}
                                 </a>
                                 .
                             </p>
diff --git a/addon/components/webhook/attempts.hbs b/addon/components/webhook/attempts.hbs
index 1f70969..5b946b2 100644
--- a/addon/components/webhook/attempts.hbs
+++ b/addon/components/webhook/attempts.hbs
@@ -3,10 +3,10 @@
         <div class="flex items-center">
             <div>
                 <h3 class="mb-1 mr-4 text-xl font-bold dark:text-gray-100">
-                    {{t "developers.components.webhook.attempts.webhook-attempts"}}
+                    {{t "developers.component.webhook.attempts.webhook-header"}}
                 </h3>
                 <p class="dark:text-gray-100 text-sm">
-                    {{t "developers.components.webhook.attempts.endpoint"}}
+                    {{t "developers.component.webhook.attempts.webhook-message"}}
                 </p>
             </div>
         </div>
@@ -36,7 +36,7 @@
                         <tbody>
                             <tr>
                                 <td class="w-64">
-                                    {{t "developers.components.webhook.attempts.http-code"}}
+                                    {{t "developers.component.webhook.attempts.http-code"}}
                                 </td>
                                 <td>
                                     {{row.status_code}} ({{row.reason_phrase}})
@@ -44,7 +44,7 @@
                             </tr>
                             <tr>
                                 <td class="w-64">
-                                    {{t "developers.components.webhook.attempts.response-time"}}
+                                    {{t "developers.component.webhook.attempts.response-time"}}
                                 </td>
                                 <td>
                                     {{format-milliseconds row.duration}}
@@ -52,7 +52,7 @@
                             </tr>
                             <tr>
                                 <td>
-                                    {{t "developers.components.webhook.attempts.request-endpoint"}}
+                                    {{t "developers.component.webhook.attempts.request-endpoint"}}
                                 </td>
                                 <td>
                                     {{#if row.api_event.data}}
@@ -60,7 +60,7 @@
                                     {{else}}
                                         <div class="flex items-center justify-center h-24">
                                             <span class="text-sm text-gray-600">
-                                                {{t "developers.components.webhook.attempts.no-request-body"}}
+                                                {{t "developers.component.webhook.attempts.no-request-body"}}
                                             </span>
                                         </div>
                                     {{/if}}
@@ -68,7 +68,7 @@
                             </tr>
                             <tr>
                                 <td>
-                                    {{t "developers.components.webhook.attempts.response"}}
+                                    {{t "developers.component.webhook.attempts.response"}}
                                 </td>
                                 <td>
                                     {{#if row.response}}
@@ -76,7 +76,7 @@
                                     {{else}}
                                         <div class="flex items-center justify-center h-24">
                                             <span class="text-sm text-gray-600">
-                                                {{t "developers.components.webhook.attempts.no-response-body"}}
+                                                {{t "developers.component.webhook.attempts.no-response-body"}}
                                             </span>
                                         </div>
                                     {{/if}}
diff --git a/addon/components/webhook/attempts.js b/addon/components/webhook/attempts.js
index 3b74155..ee01d9a 100644
--- a/addon/components/webhook/attempts.js
+++ b/addon/components/webhook/attempts.js
@@ -13,6 +13,13 @@ export default class WebhookAttemptsComponent extends Component {
      */
     @service store;
 
+    /**
+     * Inject the `intl` service
+     *
+     * @var {Service}
+     */
+    @service intl;
+
     /**
      * The current viewing webhook status
      *
@@ -48,21 +55,21 @@ export default class WebhookAttemptsComponent extends Component {
      */
     @tracked columns = [
         {
-            label: 'Result',
+            label: this.intl.t('developers.common.result'),
             valuePath: 'result',
             width: '20%',
             cellComponent: 'table/cell/status',
             cellClassNames: 'uppercase expands-row',
         },
-        { label: 'Event Type', valuePath: 'api_event.event', width: '20%' },
+        { label: this.intl.t('developers.common.event-type'), valuePath: 'api_event.event', width: '20%' },
         {
-            label: 'Event ID',
+            label: this.intl.t('developers.common.event-id'),
             valuePath: 'api_event.public_id',
             width: '15%',
             cellComponent: 'click-to-copy',
         },
-        { label: 'Created', valuePath: 'createdAt', width: '20%', align: 'center' },
-        { label: 'Attempt', valuePath: 'attempt', width: '10%' },
+        { label: this.intl.t('developers.common.created'), valuePath: 'createdAt', width: '20%', align: 'center' },
+        { label: this.intl.t('developers.common.attempt'), valuePath: 'attempt', width: '10%' },
         {
             label: '',
             cellComponent: 'table/cell/dropdown',
@@ -77,11 +84,11 @@ export default class WebhookAttemptsComponent extends Component {
             actions: [
                 // { label: 'Resend', action: this.viewWebhookRequestEvent },
                 {
-                    label: 'Copy event ID to clipboard',
+                    label: this.intl.t('developers.component.webhook.attempts.copy-event-id'),
                     fn: this.copyEventIdToClipboard,
                 },
                 {
-                    label: 'View Event',
+                    label: this.intl.t('developers.component.webhook.attempts.view-event'),
                     fn: this.viewWebhookRequestEvent,
                 },
             ],
@@ -161,7 +168,7 @@ export default class WebhookAttemptsComponent extends Component {
      */
     @action copyEventIdToClipboard(webhook) {
         copyToClipboard(webhook.api_event?.public_id).then(() => {
-            this.notifications.info('Event ID copied to clipboard.');
+            this.notifications.info(this.intl.t('developers.component.webhook.attempts.info-message'));
         });
     }
 }
diff --git a/addon/components/webhook/details.hbs b/addon/components/webhook/details.hbs
index 9ca3717..59714dd 100644
--- a/addon/components/webhook/details.hbs
+++ b/addon/components/webhook/details.hbs
@@ -2,12 +2,12 @@
     <div class="content-panel-header">
         <div class="flex items-center">
             <h3 class="mr-4 text-xl font-bold dark:text-gray-100">
-                {{t "developers.components.webhook.details.webhook-details"}}
+                {{t "developers.component.webhook.details.webhook-details"}}
             </h3>
         </div>
 
         <div class="flex items-center section-header-actions">
-            <Button @icon="pencil" @text={{t "developers.components.webhook.details.update-details"}} @onClick={{this.onClickUpdateWebhook}} />
+            <Button @icon="pencil" @text={{t "developers.component.webhook.details.update-details"}} @onClick={{this.onClickUpdateWebhook}} />
         </div>
     </div>
     <div class="text-sm content-panel-body">
@@ -31,14 +31,14 @@
                 </tr>
                 <tr>
                     <td>
-                        {{t "developers.components.webhook.details.event-types"}}
+                        {{t "developers.component.webhook.details.event-types"}}
                     </td>
                     <td>
                         {{#if @webhook.is_listening_on_all_events}}
-                            <Badge @status="warning" @hideStatusDot={{true}} @helpText={{t "developers.components.webhook.details.helpText"}}>
+                            <Badge @status="warning" @hideStatusDot={{true}} @helpText={{t "developers.component.webhook.details.help-text"}}>
                                 <FaIcon @icon="exclamation-triangle" />
                                 <span class="ml-2">
-                                    {{t "developers.components.webhook.details.all-events"}}
+                                    {{t "developers.component.webhook.details.all-events"}}
                                 </span>
                             </Badge>
                         {{else}}
@@ -48,14 +48,14 @@
                 </tr>
                 <tr>
                     <td>
-                        {{t "developers.components.webhook.details.api-credential"}}
+                        {{t "developers.component.webhook.details.api-credential"}}
                     </td>
                     <td>
                         {{#if @webhook.receivingFromAllApiCredentials}}
-                            <Badge @status="warning" @hideStatusDot={{true}} @helpText={{t "developers.components.webhook.details.helpText-event"}}>
+                            <Badge @status="warning" @hideStatusDot={{true}} @helpText={{t "developers.component.webhook.details.help-text-event"}}>
                                 <FaIcon @icon="exclamation-triangle" />
                                 <span class="ml-2">
-                                    {{t "developers.components.webhook.details.api-credentials"}}
+                                    {{t "developers.component.webhook.details.api-credentials"}}
                                 </span>
                             </Badge>
                         {{else}}
diff --git a/addon/components/webhook/metrics.hbs b/addon/components/webhook/metrics.hbs
index d3913ff..9791bb6 100644
--- a/addon/components/webhook/metrics.hbs
+++ b/addon/components/webhook/metrics.hbs
@@ -23,7 +23,7 @@
             </div>
             <div class="px-6 py-3">
                 <div class="mb-1">
-                    {{t "developers.components.webhook.metrics.date-created"}}
+                    {{t "developers.component.webhook.metrics.date-created"}}
                 </div>
                 <div>
                     {{@webhook.createdAt}}
diff --git a/addon/components/widget/api-metrics.hbs b/addon/components/widget/api-metrics.hbs
index b69df7d..1c635a3 100644
--- a/addon/components/widget/api-metrics.hbs
+++ b/addon/components/widget/api-metrics.hbs
@@ -1,19 +1,19 @@
-<ContentPanel @title={{t "developers.components.widget.api-metrics.titlek"}} @open={{or @open true}} @pad={{or @pad false}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.component.widget.api-metrics.title"}} @open={{or @open true}} @pad={{or @pad false}} @panelBodyClass="bg-white dark:bg-gray-800">
     <div class="grid grid-cols-1 md:grid-cols-2">
         <div class="w-full border-b border-r border-gray-200 dark:border-gray-900">
-            <h4 class="my-3 text-sm font-semibold mx-5">API Requests</h4>
+            <h4 class="my-3 text-sm font-semibold mx-5">{{t "developers.component.widget.api-metrics.api-requests"}}</h4>
             <Chart @type="line" @labels={{this.chartLabels}} @datasets={{this.apiRequestData}} @options={{this.chartOptions}} />
         </div>
         <div class="w-full border-b border-gray-200 dark:border-gray-900">
-            <h4 class="my-3 text-sm font-semibold mx-5">API Error Distribution</h4>
+            <h4 class="my-3 text-sm font-semibold mx-5">{{t "developers.component.widget.api-metrics.api-error"}}</h4>
             <Chart @type="line" @labels={{this.chartLabels}} @datasets={{this.apiErrorDistributionData}} @options={{this.chartOptions}} />
         </div>
         <div class="w-full border-b border-r border-gray-200 dark:border-gray-900">
-            <h4 class="my-3 text-sm font-semibold mx-5">Webhooks</h4>
+            <h4 class="my-3 text-sm font-semibold mx-5">{{t "developers.component.widget.api-metrics.webhooks"}}</h4>
             <Chart @type="line" @labels={{this.chartLabels}} @datasets={{this.webhookRequestData}} @options={{this.chartOptions}} />
         </div>
         <div class="w-full border-b border-gray-200 dark:border-gray-900">
-            <h4 class="my-3 text-sm font-semibold mx-5">Webhooks response time</h4>
+            <h4 class="my-3 text-sm font-semibold mx-5">{{t "developers.component.widget.api-metrics.webhooks-response"}}</h4>
             <Chart @type="line" @labels={{this.chartLabels}} @datasets={{this.webhookRequestTimingData}} @options={{this.chartOptions}} />
         </div>
     </div>
diff --git a/addon/components/widget/api-metrics.js b/addon/components/widget/api-metrics.js
index 280ad75..41a4125 100644
--- a/addon/components/widget/api-metrics.js
+++ b/addon/components/widget/api-metrics.js
@@ -7,6 +7,7 @@ import makeDataset from '@fleetbase/ember-core/utils/make-dataset';
 
 export default class WidgetApiMetricsComponent extends Component {
     @service store;
+    @service intl;
     @tracked chartDateEnd = new Date();
     @tracked chartDateStart = startOfDay(sub(new Date(), { days: 7 }));
     @tracked chartOptions = {
@@ -79,7 +80,7 @@ export default class WidgetApiMetricsComponent extends Component {
                     const errorResponses = makeDataset(apiRequestLogs, (req) => !req.status_code.startsWith(2));
 
                     datasets.pushObject({
-                        label: 'success',
+                        label: this.intl.t('developers.component.widget.api-metrics.success-label'),
                         data: successResponses,
                         backgroundColor: ['rgba(16, 185, 129, 0.2)'],
                         borderColor: ['rgba(16, 185, 129, 0.2)'],
@@ -87,7 +88,7 @@ export default class WidgetApiMetricsComponent extends Component {
                     });
 
                     datasets.pushObject({
-                        label: 'error',
+                        label: this.intl.t('developers.component.widget.api-metrics.error-label'),
                         data: errorResponses,
                         backgroundColor: ['rgba(239, 68, 68, 0.2)'],
                         borderColor: ['rgba(239, 68, 68, 0.2)'],
@@ -119,7 +120,7 @@ export default class WidgetApiMetricsComponent extends Component {
                     const deleteErrorResponses = makeDataset(apiRequestLogs, (req) => req.method === 'DELETE');
 
                     datasets.pushObject({
-                        label: 'GET Error',
+                        label: this.intl.t('developers.component.widget.api-metrics.get-error'),
                         data: getErrorResponses,
                         backgroundColor: ['#F87171'],
                         borderColor: ['#F87171'],
@@ -127,7 +128,7 @@ export default class WidgetApiMetricsComponent extends Component {
                     });
 
                     datasets.pushObject({
-                        label: 'POST Error',
+                        label: this.intl.t('developers.component.widget.api-metrics.post-error'),
                         data: postErrorResponses,
                         backgroundColor: ['#EF4444'],
                         borderColor: ['#EF4444'],
@@ -135,7 +136,7 @@ export default class WidgetApiMetricsComponent extends Component {
                     });
 
                     datasets.pushObject({
-                        label: 'PUT Error',
+                        label: this.intl.t('developers.component.widget.api-metrics.put-error'),
                         data: putErrorResponses,
                         backgroundColor: ['#DC2626'],
                         borderColor: ['#DC2626'],
@@ -143,7 +144,7 @@ export default class WidgetApiMetricsComponent extends Component {
                     });
 
                     datasets.pushObject({
-                        label: 'DELETE Error',
+                        label: this.intl.t('developers.component.widget.api-metrics.delete-error'),
                         data: deleteErrorResponses,
                         backgroundColor: ['#B91C1C'],
                         borderColor: ['#B91C1C'],
@@ -172,7 +173,7 @@ export default class WidgetApiMetricsComponent extends Component {
                     const errorResponses = makeDataset(webhookRequestLogs, (req) => !req.status_code.startsWith(2));
 
                     datasets.pushObject({
-                        label: 'success',
+                        label: this.intl.t('developers.component.widget.api-metrics.success-label'),
                         data: successResponses,
                         backgroundColor: ['rgba(16, 185, 129, 0.2)'],
                         borderColor: ['rgba(16, 185, 129, 0.2)'],
@@ -180,7 +181,7 @@ export default class WidgetApiMetricsComponent extends Component {
                     });
 
                     datasets.pushObject({
-                        label: 'error',
+                        label: this.intl.t('developers.component.widget.api-metrics.error-label'),
                         data: errorResponses,
                         backgroundColor: ['rgba(239, 68, 68, 0.2)'],
                         borderColor: ['rgba(239, 68, 68, 0.2)'],
@@ -212,7 +213,7 @@ export default class WidgetApiMetricsComponent extends Component {
                     }));
 
                     datasets.pushObject({
-                        label: 'Duration (ms)',
+                        label: this.intl.t('developers.component.widget.api-metrics.duration-ms'),
                         data,
                         backgroundColor: ['rgba(16, 185, 129, 0.2)'],
                         borderColor: ['rgba(16, 185, 129, 0.2)'],
diff --git a/addon/controllers/api-keys/index.js b/addon/controllers/api-keys/index.js
index 77d6498..e4c05ba 100644
--- a/addon/controllers/api-keys/index.js
+++ b/addon/controllers/api-keys/index.js
@@ -8,6 +8,7 @@ import { timeout } from 'ember-concurrency';
 import { later } from '@ember/runloop';
 import { task } from 'ember-concurrency-decorators';
 import { format as formatDate } from 'date-fns';
+import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 
 export default class ApiKeysIndexController extends Controller {
     /**
@@ -17,6 +18,13 @@ export default class ApiKeysIndexController extends Controller {
      */
     @service currentUser;
 
+    /**
+     * Inject the `intl` service
+     *
+     * @var {Service}
+     */
+    @service intl;
+
     /**
      * Inject the `modalsManager` service
      *
@@ -344,8 +352,10 @@ export default class ApiKeysIndexController extends Controller {
      * @void
      */
     @action renameApiKey(apiKey) {
+        const apiKeyName = getWithDefault(apiKey, 'name', this.intl.t('developers.api-keys.index.untitled'));
+
         this.modalsManager.show('modals/rename-api-key-form', {
-            title: `Rename (${apiKey.name || 'Untitled'}) API Key`,
+            title: this.intl.t('developers.api-keys.index.rename-api-key-title', { apiKeyName }),
             apiKey,
             confirm: (modal, done) => {
                 modal.startLoading();
@@ -353,7 +363,7 @@ export default class ApiKeysIndexController extends Controller {
                 apiKey
                     .save()
                     .then((apiKey) => {
-                        this.notifications.success(`API credential renamed to (${apiKey.name || 'Untitled'}).`);
+                        this.notifications.success(this.intl.t('developers.api-keys.index.rename-api-key-success-message', {apiKeyName}));
                         return done();
                     })
                     .catch((error) => {
@@ -370,16 +380,17 @@ export default class ApiKeysIndexController extends Controller {
      * @void
      */
     @action deleteApiKey(apiKey) {
+        const apiKeyName = getWithDefault(apiKey, 'name', this.intl.t('developers.api-keys.index.untitled'));
         this.modalsManager.confirm({
-            title: `Delete (${apiKey.name || 'Untitled'}) API Key`,
-            body: 'Are you sure you want to delete this API key? All of your data assosciated with this API key will become unreachable. This action cannot be undone.',
+            title: this.intl.t('developers.api-keys.index.delete-api-key-title', {apiKeyName}),
+            body: this.intl.t('developers.api-keys.index.delete-api-key-body'),
             confirm: (modal, done) => {
                 modal.startLoading();
 
                 apiKey
                     .destroyRecord()
                     .then((apiKey) => {
-                        this.notifications.success(`API credential (${apiKey.name || 'Untitled'}) removed.`);
+                        this.notifications.success(this.intl.t('developers.api-keys.index.delete-api-key-title', {apiKeyName}));
                         return this.hostRouter.refresh().finally(() => {
                             done();
                         });
@@ -402,7 +413,7 @@ export default class ApiKeysIndexController extends Controller {
         const selected = this.table.selectedRows;
 
         this.crud.bulkDelete(selected, {
-            acceptButtonText: 'Delete API Credentials',
+            acceptButtonText: this.intl.t('developers.api-keys.index.delete-accept-button-text'),
             onSuccess: () => {
                 this.hostRouter.refresh();
             },
@@ -415,10 +426,12 @@ export default class ApiKeysIndexController extends Controller {
      * @void
      */
     @action rollApiKey(apiKey) {
+        const apiKeyName = getWithDefault(apiKey, 'name', this.intl.t('developers.api-keys.index.untitled'));
+
         this.modalsManager.show('modals/roll-api-key-form', {
-            title: `Roll (${apiKey.name || 'Untitled'}) API Key`,
+            title: this.intl.t('developers.api-keys.index.roll-api-key', {apiKeyName}),
             modalClass: 'roll-key-modal',
-            acceptButtonText: 'Roll API Key',
+            acceptButtonText: this.intl.t('developers.api-keys.index.roll-api-key-button-text'),
             user: this.currentUser.user,
             expirationOptions: this.expirationOptions,
             setExpiration: ({ target }) => {
@@ -439,12 +452,12 @@ export default class ApiKeysIndexController extends Controller {
                         { normalizeToEmberData: true }
                     )
                     .then((apiKey) => {
-                        this.notifications.success(`API credential (${apiKey.name || 'Untitled'}) rolled.`);
+                        this.notifications.success(this.intl.t('developers.api-keys.index.roll-api-key-success-message', {apiKeyName}),);
                         return done();
                     })
                     .catch((error) => {
                         modal.stopLoading();
-                        this.notifications.serverError(error, 'Unable to roll api credentials.');
+                        this.notifications.serverError(error, this.intl.t('developers.api-keys.index.roll-api-key-error-message'));
                     });
             },
         });
@@ -468,8 +481,8 @@ export default class ApiKeysIndexController extends Controller {
      */
     @action exportApiKeys() {
         this.modalsManager.show('modals/export-form', {
-            title: `Export API Credentials`,
-            acceptButtonText: 'Download',
+            title: this.intl.t('developers.api-keys.index.export-api'),
+            acceptButtonText: this.intl.t('developers.api-keys.index.export-api-accept-button-text'),
             formatOptions: ['csv', 'xlsx', 'xls', 'html', 'pdf'],
             format: 'xlsx',
             setFormat: ({ target }) => {
@@ -501,7 +514,7 @@ export default class ApiKeysIndexController extends Controller {
                     })
                     .catch((error) => {
                         modal.stopLoading();
-                        this.notifications.serverError(error, 'Unable to download API credentials export.');
+                        this.notifications.serverError(error, this.intl.t('developers.api-keys.index.export-api-error-message'));
                     });
             },
         });
diff --git a/addon/controllers/events/index.js b/addon/controllers/events/index.js
index 18817f9..b0726b0 100644
--- a/addon/controllers/events/index.js
+++ b/addon/controllers/events/index.js
@@ -15,6 +15,13 @@ export default class EventsIndexController extends BaseController {
      */
     @service filters;
 
+    /**
+     * Inject the `intl` service
+     *
+     * @var {Service}
+     */
+    @service intl;
+
     /**
      * All api versions
      *
@@ -79,13 +86,13 @@ export default class EventsIndexController extends BaseController {
      */
     @tracked columns = [
         {
-            label: 'Event',
+            label: this.intl.t('developers.common.event'),
             valuePath: 'description',
             width: '40%',
             sortable: false,
         },
         {
-            label: 'Code',
+            label: this.intl.t('developers.common.code'),
             valuePath: 'event',
             width: '20%',
             sortable: false,
@@ -94,7 +101,7 @@ export default class EventsIndexController extends BaseController {
             filterOptions: this.webhookEvents,
         },
         {
-            label: 'ID',
+            label: this.intl.t('developers.common.id'),
             valuePath: 'public_id',
             cellComponent: 'click-to-copy',
             width: '20%',
@@ -102,7 +109,7 @@ export default class EventsIndexController extends BaseController {
             sortable: false,
         },
         {
-            label: 'Date',
+            label: this.intl.t('developers.common.date'),
             valuePath: 'createdAt',
             filterParam: 'created_at',
             sortParam: 'created_at',
diff --git a/addon/controllers/logs/index.js b/addon/controllers/logs/index.js
index d5c8df1..63e5aae 100644
--- a/addon/controllers/logs/index.js
+++ b/addon/controllers/logs/index.js
@@ -16,6 +16,13 @@ export default class LogsIndexController extends BaseController {
      */
     @service filters;
 
+    /**
+     * Inject the `intl` service
+     *
+     * @var {Service}
+     */
+    @service intl;
+
     /**
      * All api versions
      *
@@ -101,7 +108,7 @@ export default class LogsIndexController extends BaseController {
      */
     @tracked columns = [
         {
-            label: 'Status',
+            label: this.intl.t('developers.common.status'),
             valuePath: 'status',
             width: '15%',
             sortable: false,
@@ -109,7 +116,7 @@ export default class LogsIndexController extends BaseController {
             cellClassNames: 'uppercase',
         },
         {
-            label: 'ID',
+            label: this.intl.t('developers.common.id'),
             valuePath: 'public_id',
             cellComponent: 'click-to-copy',
             width: '10%',
@@ -117,13 +124,13 @@ export default class LogsIndexController extends BaseController {
             sortable: false,
         },
         {
-            label: 'Description',
+            label: this.intl.t('developers.common.description'),
             valuePath: 'description',
             width: '15%',
             sortable: false,
         },
         {
-            label: 'API Credential',
+            label: this.intl.t('developers.logs.index.api-credential'),
             valuePath: 'api_credential_name',
             cellComponent: 'click-to-copy',
             filterParam: 'key',
@@ -136,7 +143,7 @@ export default class LogsIndexController extends BaseController {
             filterOptions: this.apiCredentials,
         },
         {
-            label: 'HTTP Method',
+            label: this.intl.t('developers.logs.index.http-method'),
             valuePath: 'method',
             width: '8%',
             filterable: true,
@@ -144,7 +151,7 @@ export default class LogsIndexController extends BaseController {
             filterOptions: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
         },
         {
-            label: 'Version',
+            label: this.intl.t('developers.common.version'),
             valuePath: 'version',
             width: '8%',
             filterable: true,
@@ -152,7 +159,7 @@ export default class LogsIndexController extends BaseController {
             filterOptions: this.apiVersions,
         },
         {
-            label: 'Date',
+            label: this.intl.t('developers.common.date'),
             valuePath: 'createdAt',
             filterParam: 'created_at',
             sortParam: 'created_at',
diff --git a/addon/controllers/sockets/index.js b/addon/controllers/sockets/index.js
index f68a035..6ade926 100644
--- a/addon/controllers/sockets/index.js
+++ b/addon/controllers/sockets/index.js
@@ -12,6 +12,13 @@ export default class SocketsIndexController extends BaseController {
      */
     @service modalsManager;
 
+    /**
+     * Inject the `intl` service
+     *
+     * @var {Service}
+     */
+    @service intl;
+
     /**
      * Inject the `notifications` service
      *
@@ -44,7 +51,7 @@ export default class SocketsIndexController extends BaseController {
             width: '12%',
             sortable: false,
             cellComponent: 'table/cell/link-to',
-            linkText: 'Watch Channel',
+            linkText: this.intl.t('developers.sockets.index.link-text'),
             linkClass: 'btn btn-default btn-xs flex flex-row-reverse',
             linkIcon: 'arrow-right',
             linkIconClass: 'ml-2',
@@ -52,7 +59,7 @@ export default class SocketsIndexController extends BaseController {
             cellClassNames: 'no-underline',
         },
         {
-            label: 'Channel',
+            label: this.intl.t('developers.sockets.index.channel'),
             valuePath: 'name',
             width: '88%',
             cellComponent: 'click-to-copy',
@@ -112,8 +119,8 @@ export default class SocketsIndexController extends BaseController {
      */
     @action listenOnCustomChannel() {
         this.modalsManager.show('modals/listen-custom-channel', {
-            title: 'Listen on a custom channel',
-            acceptButtonText: 'Listen',
+            title: this.intl.t('developers.sockets.index.listen-channel-title'),
+            acceptButtonText: this.intl.t('developers.sockets.index.listen-channel-button-text'),
             acceptButtonIcon: 'headphones',
             declineButtonIcon: 'times',
             declineButtonIconPrefix: 'fas',
diff --git a/addon/controllers/sockets/view.js b/addon/controllers/sockets/view.js
index fcd72e1..8d540b4 100644
--- a/addon/controllers/sockets/view.js
+++ b/addon/controllers/sockets/view.js
@@ -12,6 +12,13 @@ export default class SocketsViewController extends Controller {
      */
     @service hostRouter;
 
+    /**
+     * Inject the `intl` service
+     *
+     * @var {Service}
+     */
+    @service intl;
+
     /**
      * Inject the `socket` service
      *
@@ -58,7 +65,7 @@ export default class SocketsViewController extends Controller {
                 // Push an event or notification for socket connection here
                 this.events.pushObject({
                     time: format(new Date(), this.consoleDateFormat),
-                    content: 'Socket connection error!',
+                    content: this.intl.t('developers.sockets.view.socket-connection-error'),
                     color: 'red',
                 });
             }
@@ -71,7 +78,7 @@ export default class SocketsViewController extends Controller {
                 // Push an event or notification for socket connection here
                 this.events.pushObject({
                     time: format(new Date(), this.consoleDateFormat),
-                    content: 'Socket is connected',
+                    content: this.intl.t('developers.sockets.view.socket-connected'),
                     color: 'green',
                 });
             }
@@ -87,7 +94,7 @@ export default class SocketsViewController extends Controller {
                 // Push an event or notification for channel subscription here
                 this.events.pushObject({
                     time: format(new Date(), this.consoleDateFormat),
-                    content: `Socket subscribed to channel '${model.name}'`,
+                    content: this.intl.t('developers.sockets.view.socket-subscribed', {modelName: model.name}),
                     color: 'blue',
                 });
             }
diff --git a/addon/controllers/webhooks/index.js b/addon/controllers/webhooks/index.js
index dc8dae3..855fb79 100644
--- a/addon/controllers/webhooks/index.js
+++ b/addon/controllers/webhooks/index.js
@@ -17,6 +17,13 @@ export default class WebhooksIndexController extends BaseController {
      */
     @service currentUser;
 
+    /**
+     * Inject the `intl` service
+     *
+     * @var {Service}
+     */
+    @service intl;
+
     /**
      * Inject the `modalsManager` service
      *
@@ -126,7 +133,7 @@ export default class WebhooksIndexController extends BaseController {
      */
     @tracked columns = [
         {
-            label: 'URL',
+            label: this.intl.t('developers.common.url'),
             valuePath: 'url',
             width: '40%',
             sortable: false,
@@ -135,21 +142,21 @@ export default class WebhooksIndexController extends BaseController {
             cellClassNames: 'no-underline',
         },
         {
-            label: 'Status',
+            label: this.intl.t('developers.common.status'),
             valuePath: 'status',
             width: '15%',
             sortable: false,
             cellComponent: 'table/cell/status',
         },
         {
-            label: 'Mode',
+            label: this.intl.t('developers.common.mode'),
             valuePath: 'mode',
             width: '15%',
             sortable: false,
             cellComponent: 'table/cell/status',
         },
-        { label: 'Version', valuePath: 'version', width: '10%', sortable: false },
-        { label: 'Created', valuePath: 'createdAt', sortable: false, width: '10%' },
+        { label: this.intl.t('developers.common.version'), valuePath: 'version', width: '10%', sortable: false },
+        { label: this.intl.t('developers.common.created'), valuePath: 'createdAt', sortable: false, width: '10%' },
         {
             label: '',
             cellComponent: 'table/cell/dropdown',
@@ -163,15 +170,15 @@ export default class WebhooksIndexController extends BaseController {
             align: 'right',
             actions: [
                 {
-                    label: 'View Logs',
+                    label: this.intl.t('developers.webhooks.index.view-logs'),
                     fn: this.viewWebhook,
                 },
                 {
-                    label: 'Edit Webhook',
+                    label: this.intl.t('developers.webhooks.index.edit-webhook'),
                     fn: this.editWebhook,
                 },
                 {
-                    label: 'Delete Webhook',
+                    label: this.intl.t('developers.webhooks.index.delete-webhook'),
                     fn: this.deleteWebhook,
                 },
             ],
@@ -218,8 +225,8 @@ export default class WebhooksIndexController extends BaseController {
         });
 
         this.editWebhook(webhook, {
-            title: 'Add a webhook endpoint',
-            acceptButtonText: 'Confirm & Create',
+            title: this.intl.t('developers.webhooks.index.add-webhook'),
+            acceptButtonText: this.intl.t('developers.webhooks.index.add-webhook-button-text'),
             acceptButtonIcon: 'check',
             acceptButtonIconPrefix: 'fas',
             webhook,
@@ -235,8 +242,8 @@ export default class WebhooksIndexController extends BaseController {
      */
     @action editWebhook(webhook, options = {}) {
         this.modalsManager.show('modals/webhook-form', {
-            title: 'Edit webhook endpoint',
-            acceptButtonText: 'Save Changes',
+            title: this.intl.t('developers.webhooks.index.edit-webhook-endpoint'),
+            acceptButtonText: this.intl.t('developers.webhooks.index.edit-webhook-endpoint-button-text'),
             acceptButtonIcon: 'save',
             declineButtonIcon: 'times',
             declineButtonIconPrefix: 'fas',
@@ -287,7 +294,7 @@ export default class WebhooksIndexController extends BaseController {
                 modal.startLoading();
 
                 return webhook.save().then(() => {
-                    this.notifications.success('New Webhook created.');
+                    this.notifications.success(this.intl.t('developers.webhooks.index.new-webhook-success-message'));
                     return this.hostRouter.refresh();
                 });
             },
@@ -304,13 +311,13 @@ export default class WebhooksIndexController extends BaseController {
      */
     @action deleteWebhook(webhook, options = {}) {
         this.modalsManager.confirm({
-            title: `Delete this Webhook Endpoint`,
-            body: 'Are you sure you want to delete this Webhook? All of your data assosciated with this Webhook will become unreachable. This endpoint will also stop receiving future events. This action cannot be undone.',
+            title: this.intl.t('developers.webhooks.index.delete-webhook-endpoint'),
+            body: this.intl.t('developers.webhooks.index.delete-webhook-endpoint-body'),
             confirm: (modal) => {
                 modal.startLoading();
 
                 return webhook.destroyRecord().then(() => {
-                    this.notifications.success(`Webhook endpoint removed.`);
+                    this.notifications.success(this.intl.t('developers.webhooks.index.delete-webhook-success-message'));
                     return this.hostRouter.refresh();
                 });
             },
diff --git a/addon/controllers/webhooks/view.js b/addon/controllers/webhooks/view.js
index acc3444..eb42b89 100644
--- a/addon/controllers/webhooks/view.js
+++ b/addon/controllers/webhooks/view.js
@@ -21,6 +21,13 @@ export default class WebhooksViewController extends BaseController {
      */
     @service modalsManager;
 
+    /**
+     * Inject the `intl` service
+     *
+     * @var {Service}
+     */
+    @service intl;
+
     /**
      * Inject the `notifications` service
      *
@@ -83,7 +90,7 @@ export default class WebhooksViewController extends BaseController {
     @action deleteWebhook(webhook) {
         this.index.deleteWebhook(webhook, {
             onConfirm: () => {
-                this.notifications.success(`Webhook endpoint deleted.`);
+                this.notifications.success(this.intl.t('developers.webhooks.view.webhook-deleted-success-message'));
                 return this.transitionToRoute('webhooks.index');
             },
         });
@@ -96,14 +103,14 @@ export default class WebhooksViewController extends BaseController {
      */
     @action disableWebhook(webhook) {
         this.modalsManager.confirm({
-            title: `Disable a webhook endpoint`,
-            body: 'This webhook endpoint may be temporarily disabled so that it will not receive notifications until it is enabled again. Fleetbase will not retry any notifications that are generated while the endpoint is disabled.',
-            acceptButtonText: 'Disable webhook endpoint',
+            title: this.intl.t('developers.webhooks.view.disable-webhook-title'),
+            body: this.intl.t('developers.webhooks.view.disable-webhook-body'),
+            acceptButtonText: this.intl.t('developers.webhooks.view.disable-webhook-button-text'),
             confirm: (modal) => {
                 modal.startLoading();
                 webhook.set('status', 'disabled');
                 return webhook.save().then(() => {
-                    this.notifications.success(`Webhook disabled.`);
+                    this.notifications.success(this.intl.t('developers.webhooks.view.disable-webhook-success-message'));
                 });
             },
         });
@@ -116,14 +123,14 @@ export default class WebhooksViewController extends BaseController {
      */
     @action enableWebhook(webhook) {
         this.modalsManager.confirm({
-            title: `Enable a webhook endpoint`,
-            body: "This webhook is disabled and no longer receives notifications. This may have been done automatically because we detected an extended period of failures. If you've corrected the issue, you can re-enable the webhook endpoint here. Fleetbase will not retry any notifications that were generated in the intervening period, and if we continue to detect failures on this endpoint, we will disable the endpoint again.",
-            acceptButtonText: 'Enable webhook endpoint',
+            title: this.intl.t('developers.webhooks.view.enable-webhook-title'),
+            body: this.intl.t('developers.webhooks.view.enable-webhook-body'),
+            acceptButtonText: this.intl.t('developers.webhooks.view.enable-webhook-button-text'),
             confirm: (modal) => {
                 modal.startLoading();
                 webhook.set('status', 'enabled');
                 return webhook.save().then(() => {
-                    this.notifications.success(`Webhook enabled.`);
+                    this.notifications.success(this.intl.t('developers.webhooks.view.enable-webhook-success-message'));
                 });
             },
         });
@@ -137,13 +144,13 @@ export default class WebhooksViewController extends BaseController {
      */
     @action updateWebhookDetails(webhook) {
         this.index.editWebhook(webhook, {
-            acceptButtonText: 'Update endpoint',
+            acceptButtonText: this.intl.t('developers.webhooks.view.update-endpoint-button-text'),
             eventOptions: this.groupedApiEvents,
             versionOptions: this.apiVersions,
             apiCredentialOptions: this.apiCredentials,
             confirm: () => {
                 return webhook.save().then(() => {
-                    this.notifications.success('Webhook details updated.');
+                    this.notifications.success(this.intl.t('developers.webhooks.view.update-endpoint-success-message'));
                 });
             },
         });
diff --git a/addon/templates/api-keys/index.hbs b/addon/templates/api-keys/index.hbs
index 0ac3ebe..ef495bf 100644
--- a/addon/templates/api-keys/index.hbs
+++ b/addon/templates/api-keys/index.hbs
@@ -1,6 +1,6 @@
 <Layout::Section::Header @title={{t "developers.api-keys.index.title"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
     <div class="flex items-center mr-3">
-        <Toggle @isToggled={{this.isTestMode}} @onToggle={{this.toggleTestMode}} @label={{t "developers.api-key.index.label"}} @helpText={{t "developers.api-key.index.helpText"}} class="mr-1" />
+        <Toggle @isToggled={{this.isTestMode}} @onToggle={{this.toggleTestMode}} @label={{t "developers.api-keys.index.label"}} @helpText={{t "developers.api-keys.index.help-text"}} class="mr-1" />
         {{#if this.isTestMode}}
             <span class="ml-2">
                 <select class="form-select form-input-sm" aria-label="Select API Key" {{on "change" this.toggleTestKey}}>
@@ -20,7 +20,7 @@
         {{/if}}
     </div>
     {{#if (safe-has this.table "selectedRows")}}
-        <DropdownButton @icon="layer-group" @text="Bulk Action" @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+        <DropdownButton @icon="layer-group" @text={{t "developers.common.bulk-action"}} @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
             <div class="next-dd-menu mt-2 mx-0">
                 <div class="px-1">
                     <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteApiCredentials)}}>
diff --git a/addon/templates/application.hbs b/addon/templates/application.hbs
index cdc1615..7d2cb9a 100644
--- a/addon/templates/application.hbs
+++ b/addon/templates/application.hbs
@@ -1,11 +1,11 @@
 <EmberWormhole @to="sidebar-menu-items">
-    <Layout::Sidebar::Panel @open={{true}} @title={{t "developers.application.title"}}>
+    <Layout::Sidebar::Panel @open={{true}} @title={{t "developers.application.sidebar.title"}}>
         <Layout::Sidebar::Item @route="console.developers.home" @icon="home">{{t "developers.application.sidebar.items.home"}}</Layout::Sidebar::Item>
         <Layout::Sidebar::Item @route="console.developers.api-keys" @icon="key">{{t "developers.application.sidebar.items.api-keys"}}</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.developers.webhooks" @icon="globe-asia">{{t "developers.application.sidebar.items.Webhooks"}}</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.developers.sockets" @icon="plug">{{t "developers.application.siderbar.items.WebSockets"}}</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.developers.logs" @icon="file-lines">{{t "developers.application.siderbar.items.Logs"}}</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.developers.events" @icon="calendar-day">{{t "developers.application.siderbar.items.Events"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.developers.webhooks" @icon="globe-asia">{{t "developers.application.sidebar.items.webhooks"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.developers.sockets" @icon="plug">{{t "developers.application.sidebar.items.websockets"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.developers.logs" @icon="file-lines">{{t "developers.application.sidebar.items.logs"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.developers.events" @icon="calendar-day">{{t "developers.application.sidebar.items.events"}}</Layout::Sidebar::Item>
     </Layout::Sidebar::Panel>
     
 </EmberWormhole>
diff --git a/addon/templates/events/view.hbs b/addon/templates/events/view.hbs
index d118061..f7e353f 100644
--- a/addon/templates/events/view.hbs
+++ b/addon/templates/events/view.hbs
@@ -1,5 +1,5 @@
 <Layout::Section::Header @title={{@model.description}}>
-    <Button @icon="long-arrow-left" @iconPrefix="fas" @text={{t "developers.common.Back"}} @onClick={{this.goBack}} />
+    <Button @icon="long-arrow-left" @iconPrefix="fas" @text={{t "developers.common.back"}} @onClick={{this.goBack}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/addon/templates/sockets/index.hbs b/addon/templates/sockets/index.hbs
index 93445f5..9621aa3 100644
--- a/addon/templates/sockets/index.hbs
+++ b/addon/templates/sockets/index.hbs
@@ -1,5 +1,5 @@
 <Layout::Section::Header @title={{t "developers.sockets.index.title"}}>
-    <Button @icon="headphones" @type="magic" @iconPrefix="fas" @text= {{t "developers.sockets.index.text"}} @onClick={{this.listenOnCustomChannel}} />
+    <Button @icon="headphones" @type="magic" @iconPrefix="fas" @text= {{t "developers.sockets.index.button-text"}} @onClick={{this.listenOnCustomChannel}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/addon/templates/webhooks/index.hbs b/addon/templates/webhooks/index.hbs
index 52e70b2..69e8ad9 100644
--- a/addon/templates/webhooks/index.hbs
+++ b/addon/templates/webhooks/index.hbs
@@ -1,5 +1,5 @@
 <Layout::Section::Header @title={{t "developers.webhooks.index.title"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
-    <Button @type="primary" @icon="plus" @iconPrefix="fas" @text={{t "developers.webhooks.index.text"}} class="mr-2" @onClick={{this.createWebhook}} />
+    <Button @type="primary" @icon="plus" @iconPrefix="fas" @text={{t "developers.webhooks.index.button-text"}} class="mr-2" @onClick={{this.createWebhook}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/addon/templates/webhooks/view.hbs b/addon/templates/webhooks/view.hbs
index ec89c64..5659a93 100644
--- a/addon/templates/webhooks/view.hbs
+++ b/addon/templates/webhooks/view.hbs
@@ -1,13 +1,13 @@
 <Layout::Section::Header @title={{@model.url}}>
     {{!-- {{#if @model.isTestMode}}
-        <Button @icon="reply" @text={{t "developers.webhooks.view.text"}} class="mr-2" />
+        <Button @icon="reply" @text={{t "developers.webhooks.view.send-button-text"}} class="mr-2" />
     {{/if}} --}}
     {{#if @model.isEnabled}}
-        <Button @icon="ban" @text={{t "developers.webhooks.view.text"}} class="mr-2" @onClick={{fn this.disableWebhook @model}} />
+        <Button @icon="ban" @text={{t "developers.webhooks.view.disable-button-text"}} class="mr-2" @onClick={{fn this.disableWebhook @model}} />
     {{else}}
-        <Button @icon="ban" @text={{t "developers.webhooks.view.text-disable"}} class="mr-2" @onClick={{fn this.enableWebhook @model}} />
+        <Button @icon="ban" @text={{t "developers.webhooks.view.enable-button-text"}} class="mr-2" @onClick={{fn this.enableWebhook @model}} />
     {{/if}}
-    <Button @iconPrefix="fas" @icon="times" @text={{t "developers.webhooks.view.text-delete"}} @onClick={{fn this.deleteWebhook @model}} />
+    <Button @iconPrefix="fas" @icon="times" @text={{t "developers.webhooks.view.delete-button-text"}} @onClick={{fn this.deleteWebhook @model}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index 31af3a3..7c87abe 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -1,31 +1,42 @@
 developers:
   extension-name: Developers
   common:
-    new: New
-    export: Export
+    all: All 
+    attempt: Attempt
     back: Back
-    date: Date  
-    source: Source
-    time: Time 
-    version: Version
-    name: Name
-    key: Key
+    bulk-action: Bulk Action
     clear: Clear
-    all: All 
-    succeeded: Succeeded
-    failed: Failed
-    url: URL
+    code: Code
+    created: Created
+    date: Date
     description: Description
-    status: Status
+    email: Email
+    event-id: Event ID
+    event-type: Event Type
+    event: Event
+    export: Export
+    failed: Failed
+    id: ID
+    key: Key
     mode: Mode
-  components:
+    name: Name
+    new: New
+    password: Password
+    result: Result
+    source: Source
+    status: Status
+    succeeded: Succeeded
+    time: Time 
+    url: URL
+    version: Version
+
+  component:
     api-event: 
       data: 
         title: Event data  
         no-data: No event data
       details:
         prefixTitle: Event 
-        description: Description 
     api-request-log:
       details:        
         prefixTitle: Request
@@ -38,47 +49,75 @@ developers:
         title: Request headers
         no-headers: No request HEADERS
       request-body:
+        title: Request
+        title-second-part: body
+        no-request-body: No request {method} body
+      response-body:
         title: Response body
         no-response-body: No response body
     modals:
-      api-key-form: 
+      api-key-form:
+        api-name-aria-label: API Key Name
+        api-expiration-aria-label: API Key Expiration Date
+        name-placeholder: Enter a nickname or environment name for API Key
+        expiration-label: Expiration
+        expiration-help-text: Optionally set an expiry date for this api key.
         select-expiration-date: Select an expiration date...
         key-expires: Once this key expires, you can't perform any actions with it.
+        enter-domain-placeholder: Enter domain
+        allowed-browser-label: Allowed Browser Origins
+        allowed-browser-help-text: Input domains that will dictate the CORS policy for browser request from this api key.
         test-key: Test Key
         testing-environments: You are creating a test environment key, use this for testing environments.
         live-key: Live Key
         production-environments: You are creating a live environment key, use this for production environments.
       listen-custom-channel:
         name: Event channel ID
-        helpText: Input the socket channel identifier you want to listen on
+        name-help-text: Input the socket channel identifier you want to listen on
+      rename-api-key-form:
+        api-key-label: API Key Name
+        api-key-placeholder: Enter a nickname or environment name for API Key
       roll-api-key-form:
-        text: View logs
+        view-button-text: View logs
         last-used: Last used
         expiration: Expiration
+        api-key-expiration-label: API Key Expiration
         select-date: Select an expiration date...
         key-expires: Once this key expires, you can't perform any actions with it.
         additional-required: Additional authentication required
         enter-password: To continue, please enter your password.
-        email: Email
-        password: Password
+        user-email: User Email
+        user-password: User Password
+        user-password-placeholder: Authenticate request using your password
       webhook-form:
-        helpText: The URL Fleetbase should send event callbacks to.
-        helpText-endpoint: Optionally add a description for the webhook endpoint.
-        placeholder: An optional description of what this webhook endpoint is used for.
-        helpText-apikey: Restrict the webhook endpoint to receive callbacks from a specific API key.
-        api-credentials: Receive from all API Credentials...
-        select-credential: You can select a specific API credential that will be used to trigger callbacks to this webhook endpoint, or you can select "All API Credentials", and the webhook endpoint will receive callbacks regardless the API Credential being used.
-        helpText-callback: Select a specific API version to receive callbacks for.
-        api-version: Select an API version...
-        callback: Explicilty set which events to receive callbacks for.
+        endpoint-url: Endpoint URL
+        endpoint-url-help-text: The URL Fleetbase should send event callbacks to.
+        endpoint-url-placeholder: https://
+        description-label: Description
+        description-help-text: Optionally add a description for the webhook endpoint.
+        description-aria-label: Webhook Description
+        description-placeholder: An optional description of what this webhook endpoint is used for.
+        api-credential-label: API Credential
+        api-credential-help-text: Restrict the webhook endpoint to receive callbacks from a specific API key.
+        api-credential-message: Receive from all API Credentials...
+        api-credential-infoblock: You can select a specific API credential that will be used to trigger callbacks to this webhook endpoint, or you can select "All API Credentials", and the webhook endpoint will receive callbacks regardless the API Credential being used.
+        version-help-text: Select a specific API version to receive callbacks for.
+        version-message: Select an API version...
+        events-send-label: Events to send
+        events-send-help-text: Explicilty set which events to receive callbacks for.
         select-events: Select events...
+        event-search-label: Event Search
+        event-search-placeholder: Search...
         no-selected: No events selected
         dropdown: Search for events with the dropdown above, or
         all-events: receive all events
     webhook:
       attempts: 
-        webhook-attempts: Webhook attempts
-        endpoint: Attempts to send an event to your endpoint in the past 15 days
+        copy-event-id: Copy event ID to clipboard
+        view-event: View Event
+        info-message: Event ID copied to clipboard.
+        webhook-header: Webhook attempts
+        webhook-message: Attempts to send an event to your endpoint in the past 15 days
         http-code: HTTP status code
         response-time: Response timer
         request-endpoint: Request to your endpoint
@@ -89,32 +128,60 @@ developers:
         webhook-details: Webhook details
         update-details: Update details...
         event-types: Event Types
-        helpText: You will receive webhooks for new event types as they are added, except for those that require explicit selection. Listening for all event types is usually not necessary and may increase load on your servers.
+        help-text: You will receive webhooks for new event types as they are added, except for those that require explicit selection. Listening for all event types is usually not necessary and may increase load on your servers.
         all-events: All Events
         api-credential: API Credential
-        helpText-event: You will receive webhooks callbacks regardless what API Credential is used to trigger the event.
+        help-text-event: You will receive webhooks callbacks regardless what API Credential is used to trigger the event.
         api-credentials: Receiving from all API Credentials
       metrics:
         date-created: Date Created
     widget:
       api-metrics:  
         title: Monitoring
-
-  application:
-    sidebar:
-      title: Developers Console
-      items:
-        home: Dashboard
-        api-keys: API Keys
-        globe: Webhooks
-        plug:  WebSockets
-        logs: Logs
-        events: Events
+        api-requests: API Requests
+        api-error: API Error Distribution
+        webhooks: Webhooks
+        webhooks-response: Webhooks response time
+        success-label: success
+        error-label: error
+        get-error: GET Error
+        post-error: POST Error
+        put-error: PUT Error
+        delete-error: DELETE Error
+        duration-ms: Duration (ms)
   api-keys:
     index:
+      public-key: Public Key
+      secret-key: Secret Key
+      enviroment: Environment
+      expiry: Expiry
+      last-used: Last Used
+      edit-key: Edit key...
+      roll-key: Roll key...
+      view-logs: View request logs...
+      delete-key: Delete key...
+      new-api-key-title: New API Key
+      new-api-key-message: New API Credentials created.
+      edit-api-key-title: Edit API Key
+      edit-api-key-message: API Credentials changes saved.
+      rename-api-key-title: Rename {apiKeyName} API key
+      untitled: Untitled
+      rename-api-key-success-message: API credential renamed to {apiKeyName}
+      delete-api-key-title: Delete {apiKeyName} API Key
+      delete-api-key-body: Are you sure you want to delete this API key? All of your data assosciated with this API key will become unreachable. This action cannot be undone.
+      delete-api-key-success-message: API credential {apiKeyName} removed.
+      delete-accept-button-text: Delete API Credentials
+      roll-api-key: Roll {apiKeyName} API Key
+      roll-api-key-button-text: Roll API Key
+      roll-api-key-success-message: API credential {apiKeyName} rolled.
+      roll-api-key-error-message: Unable to roll api credentials.
+      export-api: Export API Credentials
+      export-api-accept-button-text: Download
+      export-api-error-message: Unable to download API credentials export.
       title: API Keys
       label: View test data 
-      helpText: Toggling view test data will enable the console to display all test data from your sandbox environment
+      help-text: Toggling view test data will enable the console to display all test data from your sandbox environment
+      select-api-key-aria-label: Select API Key
       select-key: Select specific key
       test-data: All test data...
       delete-api: Delete API Credentials
@@ -123,20 +190,61 @@ developers:
       title: Events
   logs:
     index:
+      api-credential: API Credential
+      http-method: HTTP Method
       title: Logs
   sockets:
     index:
+      link-text: Watch Channel
+      channel: Channel
+      listen-channel-title: Listen on a custom channel
+      listen-channel-button-text: Listen
       title: Channels receiving events from your account
-      text: Listen on custom channel
+      button-text: Listen on custom channel
     view:
+      socket-connection-error: Socket connection error!
+      socket-connected: Socket is connected
+      socket-subscribed: Socket subscribed to channel {modelName}
       output: Output
       awaiting-events: Awaiting events...
   webhooks:
     index:
+      view-logs: View Logs
+      edit-webhook: Edit Webhook
+      delete-webhook: Delete Webhook
+      add-webhook: Add a webhook endpoint
+      add-webhook-button-text: Confirm & Create
+      edit-webhook-endpoint: Edit webhook endpoint
+      edit-webhook-endpoint-button-text: Save Changes
+      new-webhook-success-message: New Webhook created.
+      delete-webhook-endpoint: Delete this Webhook Endpoint
+      delete-webhook-endpoint-body: Are you sure you want to delete this Webhook? All of your data assosciated with this Webhook will become unreachable. This endpoint will also stop receiving future events. This action cannot be undone.
+      delete-webhook-success-message: Webhook endpoint removed.
       title: Webhooks
-      text: Add new endpoint
+      button-text: Add new endpoint
     view:
-      text: Send test webhook...
-      text-disable: Disable...
-      text-enable: Enable...
-      text-delete: Delete...
\ No newline at end of file
+      webhook-deleted-success-message: Webhook endpoint deleted.
+      disable-webhook-title: Disable a webhook endpoint
+      disable-webhook-body: This webhook endpoint may be temporarily disabled so that it will not receive notifications until it is enabled again. Fleetbase will not retry any notifications that are generated while the endpoint is disabled.
+      disable-webhook-button-text: Disable webhook endpoint
+      disable-webhook-success-message: Webhook disabled.
+      enable-webhook-title: Enable a webhook endpoint
+      enable-webhook-body: This webhook is disabled and no longer receives notifications. This may have been done automatically because we detected an extended period of failures. If you've corrected the issue, you can re-enable the webhook endpoint here. Fleetbase will not retry any notifications that were generated in the intervening period, and if we continue to detect failures on this endpoint, we will disable the endpoint again.
+      enable-webhook-button-text: Enable webhook endpoint
+      enable-webhook-success-message: Webhook enabled.
+      update-endpoint-button-text: Update endpoint
+      update-endpoint-success-message: Webhook details updated.
+      send-button-text: Send test webhook...
+      disable-button-text: Disable...
+      enable-button-text: Enable...
+      delete-button-text: Delete...
+  application:
+    sidebar:
+      title: Developers Console
+      items:
+        home: Dashboard
+        api-keys: API Keys
+        webhooks: Webhooks
+        websockets:  WebSockets
+        logs: Logs
+        events: Events
\ No newline at end of file

From 5725f7b998e67ad73e88e646e8db1d824b8c4fa9 Mon Sep 17 00:00:00 2001
From: Munkh-erdene Damdinbazar <mmddd@Munkh-erdenes-MacBook-Pro.local>
Date: Thu, 18 Jan 2024 16:40:57 +0800
Subject: [PATCH 5/6] fixed mistakes on api-keys-index

---
 addon/controllers/api-keys/index.js | 30 ++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/addon/controllers/api-keys/index.js b/addon/controllers/api-keys/index.js
index e4c05ba..be4f916 100644
--- a/addon/controllers/api-keys/index.js
+++ b/addon/controllers/api-keys/index.js
@@ -162,7 +162,7 @@ export default class ApiKeysIndexController extends Controller {
      */
     @tracked columns = [
         {
-            label: 'Name',
+            label: this.intl.t('developers.common.name'),
             valuePath: 'name',
             cellComponent: 'table/cell/anchor',
             action: this.editApiKey,
@@ -170,28 +170,28 @@ export default class ApiKeysIndexController extends Controller {
             sortable: false,
         },
         {
-            label: 'Public Key',
+            label: this.intl.t('developers.api-keys.index.public-key'),
             valuePath: 'key',
             width: '20%',
             sortable: false,
             cellComponent: 'click-to-copy',
         },
         {
-            label: 'Secret Key',
+            label: this.intl.t('developers.api-keys.index.secret-key'),
             valuePath: 'secret',
             width: '20%',
             sortable: false,
             cellComponent: 'click-to-reveal',
         },
         {
-            label: 'Environment',
+            label: this.intl.t('developers.api-keys.index.enviroment'),
             valuePath: 'environment',
             width: '12%',
             sortable: false,
             cellComponent: 'table/cell/status',
         },
         {
-            label: 'Expiry',
+            label: this.intl.t('developers.api-keys.index.expiry'),
             valuePath: 'expiresAt',
             sortable: false,
             width: '10%',
@@ -199,7 +199,7 @@ export default class ApiKeysIndexController extends Controller {
             cellClassNames: 'overflow-visible',
         },
         {
-            label: 'Last Used',
+            label: this.intl.t('developers.api-keys.index.last-used'),
             valuePath: 'lastUsed',
             sortable: false,
             width: '10%',
@@ -207,7 +207,7 @@ export default class ApiKeysIndexController extends Controller {
             cellClassNames: 'overflow-visible',
         },
         {
-            label: 'Created',
+            label: this.intl.t('developers.common.created'),
             valuePath: 'createdAt',
             sortable: false,
             width: '10%',
@@ -226,11 +226,11 @@ export default class ApiKeysIndexController extends Controller {
             width: '10%',
             align: 'right',
             actions: [
-                { label: 'Edit key...', fn: this.editApiKey },
-                { label: 'Roll key...', fn: this.rollApiKey },
-                { label: 'View request logs...', fn: this.viewRequestLogs },
+                { label: this.intl.t('developers.api-keys.index.edit-key'), fn: this.editApiKey },
+                { label: this.intl.t('developers.api-keys.index.roll-key'), fn: this.rollApiKey },
+                { label: this.intl.t('developers.api-keys.index.view-logs'), fn: this.viewRequestLogs },
                 {
-                    label: 'Delete key...',
+                    label: this.intl.t('developers.api-keys.index.delete-key'),
                     fn: this.deleteApiKey,
                     className: 'text-red-700 hover:text-red-800',
                 },
@@ -302,10 +302,10 @@ export default class ApiKeysIndexController extends Controller {
         });
 
         this.editApiKey(apiKey, {
-            title: 'New API Key',
+            title: this.intl.t('developers.api-keys.index.new-api-key-title'),
             acceptButtonIcon: 'check',
             acceptButtonIconPrefix: 'fas',
-            successMessage: 'New API Credentials created.',
+            successMessage: this.intl.t('developers.api-keys.index.new-api-key-message'),
             apiKey,
         });
     }
@@ -317,9 +317,9 @@ export default class ApiKeysIndexController extends Controller {
      */
     @action editApiKey(apiKey, options = {}) {
         this.modalsManager.show('modals/api-key-form', {
-            title: 'Edit API Key',
+            title: this.intl.t('developers.api-keys.index.edit-api-key-title'),
             acceptButtonIcon: 'save',
-            successMessage: 'API Credentials changes saved.',
+            successMessage: this.intl.t('developers.api-keys.index.edit-api-key-message'),
             expirationOptions: this.expirationOptions,
             testMode: this.currentUser.getOption('sandbox') || false,
             apiKey,

From 2882c81b0f841a24a2eb5e02f1daaf96b41d71b6 Mon Sep 17 00:00:00 2001
From: Munkh-erdene Damdinbazar <mmddd@Munkh-erdenes-MacBook-Pro.local>
Date: Wed, 24 Jan 2024 14:41:28 +0800
Subject: [PATCH 6/6] add lint and used lint

---
 addon/controllers/api-keys/index.js | 16 ++++++++--------
 addon/controllers/sockets/view.js   |  2 +-
 package.json                        |  2 ++
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/addon/controllers/api-keys/index.js b/addon/controllers/api-keys/index.js
index be4f916..be7b85b 100644
--- a/addon/controllers/api-keys/index.js
+++ b/addon/controllers/api-keys/index.js
@@ -362,8 +362,8 @@ export default class ApiKeysIndexController extends Controller {
 
                 apiKey
                     .save()
-                    .then((apiKey) => {
-                        this.notifications.success(this.intl.t('developers.api-keys.index.rename-api-key-success-message', {apiKeyName}));
+                    .then(() => {
+                        this.notifications.success(this.intl.t('developers.api-keys.index.rename-api-key-success-message', { apiKeyName }));
                         return done();
                     })
                     .catch((error) => {
@@ -382,15 +382,15 @@ export default class ApiKeysIndexController extends Controller {
     @action deleteApiKey(apiKey) {
         const apiKeyName = getWithDefault(apiKey, 'name', this.intl.t('developers.api-keys.index.untitled'));
         this.modalsManager.confirm({
-            title: this.intl.t('developers.api-keys.index.delete-api-key-title', {apiKeyName}),
+            title: this.intl.t('developers.api-keys.index.delete-api-key-title', { apiKeyName }),
             body: this.intl.t('developers.api-keys.index.delete-api-key-body'),
             confirm: (modal, done) => {
                 modal.startLoading();
 
                 apiKey
                     .destroyRecord()
-                    .then((apiKey) => {
-                        this.notifications.success(this.intl.t('developers.api-keys.index.delete-api-key-title', {apiKeyName}));
+                    .then(() => {
+                        this.notifications.success(this.intl.t('developers.api-keys.index.delete-api-key-title', { apiKeyName }));
                         return this.hostRouter.refresh().finally(() => {
                             done();
                         });
@@ -429,7 +429,7 @@ export default class ApiKeysIndexController extends Controller {
         const apiKeyName = getWithDefault(apiKey, 'name', this.intl.t('developers.api-keys.index.untitled'));
 
         this.modalsManager.show('modals/roll-api-key-form', {
-            title: this.intl.t('developers.api-keys.index.roll-api-key', {apiKeyName}),
+            title: this.intl.t('developers.api-keys.index.roll-api-key', { apiKeyName }),
             modalClass: 'roll-key-modal',
             acceptButtonText: this.intl.t('developers.api-keys.index.roll-api-key-button-text'),
             user: this.currentUser.user,
@@ -451,8 +451,8 @@ export default class ApiKeysIndexController extends Controller {
                         },
                         { normalizeToEmberData: true }
                     )
-                    .then((apiKey) => {
-                        this.notifications.success(this.intl.t('developers.api-keys.index.roll-api-key-success-message', {apiKeyName}),);
+                    .then(() => {
+                        this.notifications.success(this.intl.t('developers.api-keys.index.roll-api-key-success-message', { apiKeyName }));
                         return done();
                     })
                     .catch((error) => {
diff --git a/addon/controllers/sockets/view.js b/addon/controllers/sockets/view.js
index 8d540b4..e887fba 100644
--- a/addon/controllers/sockets/view.js
+++ b/addon/controllers/sockets/view.js
@@ -94,7 +94,7 @@ export default class SocketsViewController extends Controller {
                 // Push an event or notification for channel subscription here
                 this.events.pushObject({
                     time: format(new Date(), this.consoleDateFormat),
-                    content: this.intl.t('developers.sockets.view.socket-subscribed', {modelName: model.name}),
+                    content: this.intl.t('developers.sockets.view.socket-subscribed', { modelName: model.name }),
                     color: 'blue',
                 });
             }
diff --git a/package.json b/package.json
index 09df7cd..d2fbaf5 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
         "lint:hbs:fix": "ember-template-lint . --fix",
         "lint:js": "eslint . --cache",
         "lint:js:fix": "eslint . --fix",
+        "lint:intl": "fleetbase-intl-lint",
         "start": "ember serve",
         "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
         "test:ember": "ember test",
@@ -54,6 +55,7 @@
         "ember-wormhole": "^0.6.0"
     },
     "devDependencies": {
+        "@fleetbase/intl-lint": "^0.0.1",
         "@babel/eslint-parser": "^7.22.15",
         "@babel/plugin-proposal-decorators": "^7.23.2",
         "@ember/optional-features": "^2.0.0",