feat(translations): add i18n translations for modular dashboards (#15004)

## What?
Added internationalization (i18n) support for the Modular Dashboards
feature, allowing dashboard widgets and UI elements to be translated
into different languages.
Also updated the automatic translation script to use the more efficient
and cost-effective GPT-4.1 model instead of GPT-4. (i thinks this is
must-have)

## Why?
The Modular Dashboards feature previously had almost no translation
support, making it inaccessible for non-English Payload CMS users.
This was particularly important for international communities who need
localized admin interfaces.


Additionally, the translation automation script was using the expensive
GPT-4 model, which quickly exhausted OpenAI API credits during
translation work.

## How?
Added new translation keys to all buttons & error inside Modular
Dashboard. Translated all keys

Translation Script Update:
Changed model from gpt-4 to gpt-4.1 in the automatic translation script
Maintained same translation quality while significantly reducing API
costs (multiple times cheaper)

## Testing:
Verified translations load correctly in different locales ( uk/en ) in
`pnpm dev dashboard`

## Screenshots

<img width="539" height="250" alt="image"
src="https://github.com/user-attachments/assets/898b3618-e4ec-4f9e-9bb2-294eabd8aff5"
/>
<img width="685" height="215" alt="image"
src="https://github.com/user-attachments/assets/c0024ca3-f31b-4e7d-b707-adfefa7ca190"
/>


<img width="830" height="399" alt="image"
src="https://github.com/user-attachments/assets/ca6cd857-e0dd-47b0-8b36-6242396f2c73"
/>
<img width="792" height="311" alt="image"
src="https://github.com/user-attachments/assets/19edcc53-648e-4ecd-8a48-8c03174c67bc"
/>

---------

Co-authored-by: German Jablonski <43938777+GermanJablo@users.noreply.github.com>

Author: VeiaG

packages/next/src/views/Dashboard/Default/ModularDashboard/DashboardStepNav.tsx

@@ -77,22 +77,19 @@ export function DashboardBreadcrumbDropdown(props: {
   const { isEditing, onCancel, onEditClick, onResetLayout, onSaveChanges, widgetsDrawerSlug } =
     props
   const { t } = useTranslation()
+
   if (isEditing) {
     return (
       <div className="dashboard-breadcrumb-dropdown__editing">
-        <span>
-          {t('general:editing')} {t('general:dashboard')}
-        </span>
+        <span>{t('dashboard:editingDashboard')}</span>
         <div className="dashboard-breadcrumb-dropdown__actions">
           <DrawerToggler className="drawer-toggler--unstyled" slug={widgetsDrawerSlug}>
             <Button buttonStyle="pill" el="span" size="small">
-              {t('fields:addLabel', {
-                label: '+',
-              })}
+              {t('dashboard:addButton')}
             </Button>
           </DrawerToggler>
           <Button buttonStyle="pill" onClick={onSaveChanges} size="small">
-            {t('general:saveChanges')}
+            {t('fields:saveChanges')}
           </Button>
           <Button buttonStyle="pill" onClick={onCancel} size="small">
             {t('general:cancel')}
@@ -103,8 +100,8 @@ export function DashboardBreadcrumbDropdown(props: {
   }
 
   const options = [
-    { label: `${t('general:edit')} ${t('general:dashboard')}`, value: 'edit' },
-    { label: `${t('general:reset')} ${t('general:layout')}`, value: 'reset' },
+    { label: t('dashboard:editDashboard'), value: 'edit' },
+    { label: t('dashboard:resetLayout'), value: 'reset' },
   ]
 
   const handleChange = (selectedOption: Option | Option[]) => {

packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx

@@ -143,10 +143,7 @@ export function ModularDashboardClient({
         >
           {currentLayout?.length === 0 && (
             <div className="modular-dashboard__empty">
-              <p>
-                There are no widgets on your dashboard. You can add them from the "Dashboard" menu
-                located in the top bar.
-              </p>
+              <p>{t('dashboard:noItems')}</p>
             </div>
           )}
           {currentLayout?.map((widget, _index) => (

packages/next/src/views/Dashboard/Default/ModularDashboard/index.scss

@@ -275,7 +275,8 @@
         position: absolute;
         top: 100%;
         left: 0;
-        min-width: 150px;
+        min-width: max-content;
+        width: max-content;
         z-index: 9999;
         border-radius: 4px;
         padding: 5px;

packages/next/src/views/Dashboard/Default/ModularDashboard/useDashboardLayout.ts

@@ -8,6 +8,7 @@ import {
   useModal,
   usePreferences,
   useServerFunctions,
+  useTranslation,
 } from '@payloadcms/ui'
 import { PREFERENCE_KEYS } from 'payload/shared'
 import React, { useCallback, useEffect, useState } from 'react'
@@ -25,6 +26,7 @@ export function useDashboardLayout(initialLayout: WidgetInstanceClient[]) {
   const { openModal } = useModal()
   const cancelModalSlug = 'cancel-dashboard-changes'
   const { serverFunction } = useServerFunctions()
+  const { t } = useTranslation()
 
   // Sync state when initialLayout prop changes (e.g., when query params change and server component re-renders)
   useEffect(() => {
@@ -42,7 +44,7 @@ export function useDashboardLayout(initialLayout: WidgetInstanceClient[]) {
       await setLayoutPreference(layoutData)
     } catch {
       setIsEditing(true)
-      toast.error('Failed to save layout')
+      toast.error(t('error:failedToSaveLayout'))
     }
   }, [setLayoutPreference, currentLayout])
 
@@ -58,7 +60,7 @@ export function useDashboardLayout(initialLayout: WidgetInstanceClient[]) {
       setCurrentLayout(result.layout)
       setIsEditing(false)
     } catch {
-      toast.error('Failed to reset layout')
+      toast.error(t('error:failedToResetLayout'))
     }
   }, [setLayoutPreference, serverFunction])
 
@@ -211,9 +213,9 @@ export function useDashboardLayout(initialLayout: WidgetInstanceClient[]) {
   )
 
   const cancelModal = React.createElement(ConfirmationModal, {
-    body: 'You have unsaved changes to your dashboard layout. Are you sure you want to discard them?',
-    confirmLabel: 'Discard',
-    heading: 'Discard changes?',
+    body: t('dashboard:discardMessage'),
+    confirmLabel: t('dashboard:discardConfirmLabel'),
+    heading: t('dashboard:discardTitle'),
     modalSlug: cancelModalSlug,
     onConfirm: performCancel,
   })

packages/translations/src/clientKeys.ts

@@ -65,6 +65,14 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'dashboard:addWidget',
   'dashboard:deleteWidget',
   'dashboard:searchWidgets',
+  'dashboard:editDashboard',
+  'dashboard:editingDashboard',
+  'dashboard:resetLayout',
+  'dashboard:addButton',
+  'dashboard:discardConfirmLabel',
+  'dashboard:discardMessage',
+  'dashboard:discardTitle',
+  'dashboard:noItems',
 
   'error:autosaving',
   'error:correctInvalidFields',
@@ -98,6 +106,8 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'error:revertingDocument',
   'error:problemUploadingFile',
   'error:restoringTitle',
+  'error:failedToSaveLayout',
+  'error:failedToResetLayout',
 
   'fields:addLabel',
   'fields:addLink',

packages/translations/src/languages/ar.ts

@@ -80,8 +80,18 @@ export const arTranslations: DefaultTranslationsObject = {
       'إن لم تطلب هذا ، يرجى تجاهل هذا البريد الإلكتروني وستبقى كلمة مرورك ذاتها بدون تغيير.',
   },
   dashboard: {
+    addButton: 'اضف +',
     addWidget: 'أضف الواجهة البيانية',
     deleteWidget: 'حذف الودجت {{id}}',
+    discardConfirmLabel: 'تجاهل',
+    discardMessage:
+      'لديك تغييرات غير محفوظة في تخطيط لوحة التحكم الخاصة بك. هل أنت متأكد أنك تريد التخلي عنها؟',
+    discardTitle: 'هل تريد التخلص من التغييرات؟',
+    editDashboard: 'تعديل لوحة التحكم',
+    editingDashboard: 'لوحة تحرير',
+    noItems:
+      'لا توجد أدوات على لوحة التحكم الخاصة بك. يمكنك إضافتها من القائمة "لوحة التحكم" الموجودة في الشريط العلوي.',
+    resetLayout: 'إعادة تعيين التخطيط',
     searchWidgets: 'ابحث عن الأدوات...',
   },
   error: {
@@ -94,6 +104,8 @@ export const arTranslations: DefaultTranslationsObject = {
     documentNotFound:
       'لم يتم العثور على المستند بالمعرف {{id}}. قد يكون قد تم حذفه أو لم يكن موجودًا أصلاً ، أو قد لا يكون لديك الوصول إليه.',
     emailOrPasswordIncorrect: 'البريد الإلكتروني أو كلمة المرور المقدمة غير صحيحة.',
+    failedToResetLayout: 'فشل في إعادة تعيين التخطيط.',
+    failedToSaveLayout: 'فشل في حفظ التخطيط.',
     followingFieldsInvalid_one: 'الحقل التالي غير صالح:',
     followingFieldsInvalid_other: 'الحقول التالية غير صالحة:',
     incorrectCollection: 'مجموعة غير صحيحة',

packages/translations/src/languages/az.ts

@@ -80,8 +80,18 @@ export const azTranslations: DefaultTranslationsObject = {
       'Əgər siz bunu tələb etməmisinizsə, lütfən, bu e-poçtu nəzərə almayın və şifrəniz dəyişilməz qalacaq.',
   },
   dashboard: {
+    addButton: 'Əlavə et +',
     addWidget: 'Vidjet əlavə et',
     deleteWidget: 'Vidgeti silin {{id}}',
+    discardConfirmLabel: 'Atılma',
+    discardMessage:
+      'Sizin panel düzenlemənizdə saxlanmamış dəyişikliklər var. Onları ləğvetmək istədiyinizə əminsinizmi?',
+    discardTitle: 'Dəyişiklikləri ləğv edin?',
+    editDashboard: 'İdarə Panelini Redaktə Et',
+    editingDashboard: 'Redaktə Paneli',
+    noItems:
+      'Sizin panelinizdə heç bir vidjet yoxdur. Siz onları yuxarıdaki çubuqda yerləşən "Panel" menyusundan əlavə edə bilərsiniz.',
+    resetLayout: 'Düzəni sıfırlama',
     searchWidgets: 'Widgetləri axtarın...',
   },
   error: {
@@ -94,6 +104,8 @@ export const azTranslations: DefaultTranslationsObject = {
     documentNotFound:
       '{{id}} ID-li sənəd tapılmadı. Bu, onun silinmiş və ya heç vaxt mövcud olmamış ola bilər və ya sizin ona giriş hüququnuz olmayabilir.',
     emailOrPasswordIncorrect: 'Təqdim olunan e-poçt və ya şifrə yanlışdır.',
+    failedToResetLayout: 'Düzeni sıfırlamaq uğursuz oldu.',
+    failedToSaveLayout: 'Dizaynı saxlamaq alınmadı.',
     followingFieldsInvalid_one: 'Aşağıdakı sahə yanlışdır:',
     followingFieldsInvalid_other: 'Aşağıdaki sahələr yanlışdır:',
     incorrectCollection: 'Yanlış Kolleksiya',

packages/translations/src/languages/bg.ts

@@ -80,8 +80,18 @@ export const bgTranslations: DefaultTranslationsObject = {
       'Ако не си заявил това, игнорирай този имейл и паролата ти ще остане непроменена.',
   },
   dashboard: {
+    addButton: 'Добавете +',
     addWidget: 'Добави джаджа',
     deleteWidget: 'Изтрийте джаджа {{id}}',
+    discardConfirmLabel: 'Отхвърляне',
+    discardMessage:
+      'Имате незапазени промени в оформлението на таблото си. Сигурни ли сте, че искате да ги отхвърлите?',
+    discardTitle: 'Отхвърляне на промените?',
+    editDashboard: 'Редактирай таблото',
+    editingDashboard: 'Редактиране на таблото',
+    noItems:
+      'Няма джаджи на таблото ви. Можете да ги добавите от менюто "Табло", което е разположено в горната лента.',
+    resetLayout: 'Рестартирай Оформлението',
     searchWidgets: 'Търсене на джаджи...',
   },
   error: {
@@ -94,6 +104,8 @@ export const bgTranslations: DefaultTranslationsObject = {
     documentNotFound:
       'Документът с ID {{id}} не можа да бъде намерен. Възможно е да е бил изтрит или никога да не е съществувал или може би нямате достъп до него.',
     emailOrPasswordIncorrect: 'Имейлът или паролата не са правилни.',
+    failedToResetLayout: 'Неуспешно нулиране на оформлението.',
+    failedToSaveLayout: 'Неуспешно запазване на оформлението.',
     followingFieldsInvalid_one: 'Следното поле е некоректно:',
     followingFieldsInvalid_other: 'Следните полета са некоректни:',
     incorrectCollection: 'Грешна колекция',

packages/translations/src/languages/bnBd.ts

@@ -80,8 +80,18 @@ export const bnBdTranslations: DefaultTranslationsObject = {
       'আপনি যদি এটি অনুরোধ না করে থাকেন, তাহলে এই ইমেইলটি উপেক্ষা করুন এবং আপনার পাসওয়ার্ড অপরিবর্তিত থাকবে।',
   },
   dashboard: {
+    addButton: 'যোগ করুন +',
     addWidget: 'উইজেট যোগ করুন',
     deleteWidget: 'উইজেট মুছে ফেলুন {{id}}',
+    discardConfirmLabel: 'বাতিল করুন',
+    discardMessage:
+      'আপনার ড্যাশবোর্ড লেআউটে আপনার অসংরক্ষিত পরিবর্তনগুলি রয়েছে। আপনি কি নিশ্চিত যে আপনি তা বাতিল করতে চান?',
+    discardTitle: 'পরিবর্তনগুলি বাতিল করবেন?',
+    editDashboard: 'ড্যাশবোর্ড সম্পাদনা করুন',
+    editingDashboard: 'ড্যাশবোর্ড সম্পাদনা করুন',
+    noItems:
+      'আপনার ড্যাশবোর্ডে কোনো উইজেট নেই। আপনি তা শীর্ষ বারে অবস্থিত "ড্যাশবোর্ড" মেনু থেকে যোগ করতে পারেন।',
+    resetLayout: 'লেআউট রিসেট করুন',
     searchWidgets: 'উইজেটগুলি অনুসন্ধান করুন...',
   },
   error: {
@@ -94,6 +104,8 @@ export const bnBdTranslations: DefaultTranslationsObject = {
     documentNotFound:
       'আইডি {{id}} এর সাথে সম্পর্কিত ডকুমেন্টটি পাওয়া যাচ্ছে না। এটি মোছা হয়েছে বা কখনই না থাকতে পারে, অথবা আপনার এর প্রবেশাধিকার না থ',
     emailOrPasswordIncorrect: 'প্রদত্ত ইমেইল বা পাসওয়ার্ড ভুল।',
+    failedToResetLayout: 'লেআউট রিসেট করতে ব্যর্থ হয়েছে।',
+    failedToSaveLayout: 'লেআউট সংরক্ষণ করতে ব্যর্থ হয়েছে।',
     followingFieldsInvalid_one: 'নিম্নলিখিত ক্ষেত্রটি অবৈধ:',
     followingFieldsInvalid_other: 'নিম্নলিখিত ক্ষেত্রগুলি অবৈধ:',
     incorrectCollection: 'ভুল সংগ্রহ',

packages/translations/src/languages/bnIn.ts

@@ -80,8 +80,18 @@ export const bnInTranslations: DefaultTranslationsObject = {
       'আপনি যদি এটি অনুরোধ না করে থাকেন, তাহলে এই ইমেইলটি উপেক্ষা করুন এবং আপনার পাসওয়ার্ড অপরিবর্তিত থাকবে।',
   },
   dashboard: {
+    addButton: 'যোগ করুন +',
     addWidget: 'উইজেট যোগ করুন',
     deleteWidget: 'উইজেট মুছুন {{id}}',
+    discardConfirmLabel: 'বাতিল করুন',
+    discardMessage:
+      'আপনার ড্যাশবোর্ড লেআউটে আপনার অসংরক্ষিত পরিবর্তনগুলি রয়েছে। আপনি কি নিশ্চিত যে আপনি তাদের খারিজ করতে চান?',
+    discardTitle: 'পরিবর্তন বাতিল করবেন?',
+    editDashboard: 'ড্যাশবোর্ড সম্পাদনা করুন',
+    editingDashboard: 'ড্যাশবোর্ড সম্পাদনা করা',
+    noItems:
+      'আপনার ড্যাশবোর্ডে কোন উইজেট নেই। আপনি তাদেরকে শীর্ষ বারে অবস্থিত "ড্যাশবোর্ড" মেনু থেকে যোগ করতে পারেন।',
+    resetLayout: 'লেআউট পুনরায় সেট করুন',
     searchWidgets: 'উইজেট অনুসন্ধান করুন...',
   },
   error: {
@@ -94,6 +104,8 @@ export const bnInTranslations: DefaultTranslationsObject = {
     documentNotFound:
       'ID সহ {{id}} ডকুমেন্টটি পাওয়া যায়নি। এটি মুছে ফেলা হতে পারে বা কখনই ছিল না, অথবা আপনার এটির অ্যাক্সেস নেই।',
     emailOrPasswordIncorrect: 'প্রদত্ত ইমেইল বা পাসওয়ার্ড ভুল।',
+    failedToResetLayout: 'লেআউট পুনরায় সেট করতে ব্যর্থ হয়েছে।',
+    failedToSaveLayout: 'লেআউট সংরক্ষণ করতে ব্যর্থ।',
     followingFieldsInvalid_one: 'নিম্নলিখিত ক্ষেত্রটি অবৈধ:',
     followingFieldsInvalid_other: 'নিম্নলিখিত ক্ষেত্রগুলি অবৈধ:',
     incorrectCollection: 'ভুল সংগ্রহ',