feat: enhance TranslationJobViewComponent layout and improve token display formatting

Author: yaroslav8765

custom/TranslationJobViewComponent.vue

@@ -1,12 +1,18 @@
+
 <template>
-  <div class="flex flex-col w-full min-w-96">
-    <p>{{ t('Total tokens will be used for translation:') }} <span class="font-bold"> {{ props.job.state?.totalTranslationTokenCost || 0 }}</span></p>
-    <p>{{ t('Total translation token used:') }} <span class="font-bold"> {{ props.job.state?.totalUsedTokens || 0 }}</span></p>
-  </div>
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-3">
+      <div class="flex items-center space-x-1">
+        <span class=" text-gray-500">{{ t('Total tokens will be used for translation:') }}</span>
+        <span class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ new Number(props.job.state?.totalTranslationTokenCost).toLocaleString() || 0 }}</span>
+      </div>
+      <div class="flex items-center space-x-1">
+        <span class=" text-gray-500">{{ t('Total translation token used:') }}</span>
+        <span class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ new Number(props.job.state?.totalUsedTokens).toLocaleString() || 0 }}</span>
+      </div>
+    </div>
 </template>
 
 
-
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n();

index.ts

@@ -574,12 +574,13 @@ export default class I18nPlugin extends AdminForthPlugin {
 
     const backgroundJobsPlugin = this.adminforth.getPluginByClassName<any>('BackgroundJobsPlugin');
 
-    let totalUsedTokens = await backgroundJobsPlugin.getJobField(jobId, 'totalUsedTokens');
-
-    totalUsedTokens += promptCost;
-
-    await backgroundJobsPlugin.setJobField(jobId, 'totalUsedTokens', totalUsedTokens);
-
+    backgroundJobsPlugin.updateJobFieldsAtomicly(jobId, async () => {
+      // do all set / get fields in this function to make state update atomic and there is no conflicts when 2 tasks in parallel do get before set.
+      // don't do long awaits in this callback, since it has exclusive lock.
+      let totalUsedTokens = await backgroundJobsPlugin.getJobField(jobId, 'totalUsedTokens');
+      totalUsedTokens += promptCost;
+      await backgroundJobsPlugin.setJobField(jobId, 'totalUsedTokens', totalUsedTokens);
+    })
 
 
     try {