Languages

The languages that ship

Every label, button, table heading, chart legend, form message and page title exists in both languages, and so does the AI assistant's interface.

How the language is chosen

• The language is the first part of every address: /en/dashboard/users/all, /ar/dashboard/users/all.
• An address without a language, such as /, is sent to its page in the last language used, or in English the first time, and / itself to the dashboard. src/proxy.ts does this, and remembers the language in a cookie.
• The language menu in the header, a flag with its code, switches language and keeps you on the same page.
• The dashboard sends the language with every request, so the API's messages, such as a sign-in error, come back in the same language.

Right to left

On /ar, a small script in src/app/layout.tsx sets lang="ar" and dir="rtl" on the page before it is drawn, so the whole layout mirrors from the first frame: the sidebar moves to the right, and the cards, tables and menus read from right to left.

The components use logical Tailwind classes that follow the direction, such as ms-2, pe-4, start-0 and text-start. When you add markup, use these instead of ml-*, pr-*, left-* or text-left, or the Arabic page comes out wrong.

Where the texts live

In the dashboard's folder, the texts are split by area under messages/, each folder with an en.json and an ar.json:

The API's messages

The API answers in the language of the request's Accept-Language header, English or Arabic, and in English for any other. Its texts are in back-end/src/i18n/translations/en/ and ar/, one file per module. Countries, permissions and app settings carry both languages in the database.

Change a text

• Change the value in the English file and the matching one in the Arabic file. Keep the keys the same in both.
• A key missing from one file shows its name in place of the text on that language's page.
• Words in curly braces, such as {count}, are filled in by the app. Keep them as they are.

The dashboard's own Arabic labels

When you write about the dashboard in Arabic, use the labels it shows:

Add a language

1. 01

   Add its code in the three locale lists

   Add the language code to locales in src/config/i18n.ts, in src/proxy.ts and in src/app/[locale]/layout.tsx. For French:

   src/config/i18n.tsCopy

   export const locales = ['en', 'ar', 'fr'] as const
2. 02

   Add its message files

   In every folder under messages/ that holds an en.json, copy it under the new code and translate the values. Keep every key and every word in curly braces.
3. 03

   Add it to the language menu

   Add it to languages in src/components/LanguageSwitcher.tsx, with its code and a flag from country-flag-icons, such as { code: "fr", country: "FR" as const, Flag: FR } with FR added to the flags import.
4. 04

   Set its direction, if it needs one

   Only Arabic is treated as right to left. For another right-to-left language, add its code to RTL_LOCALES in src/app/layout.tsx and extend the locale === "ar" checks, starting with src/hooks/locale/useDirection.ts.

Restart yarn dev, or build again, and the new language answers at its own address. The API keeps answering it in English until you add its own translations in back-end/src/i18n/, where supportedLocales in i18n.service.ts lists the languages it loads.