Idiomas

Los idiomas incluidos

Cada etiqueta, botón, encabezado de tabla, leyenda de gráfico, mensaje de formulario y título de página existe en los dos idiomas, y también la interfaz del asistente de IA.

Cómo se elige el idioma

• El idioma es la primera parte de cada dirección: /en/dashboard/users/all, /ar/dashboard/users/all.
• Una dirección sin idioma, como /, se envía a su página en el último idioma usado, o en inglés la primera vez, y / en sí al panel. src/proxy.ts hace esto y recuerda el idioma en una cookie.
• El menú de idioma del encabezado, una bandera con su código, cambia el idioma y te mantiene en la misma página.
• El panel envía el idioma con cada petición, así que los mensajes de la API, como un error de inicio de sesión, vuelven en el mismo idioma.

De derecha a izquierda

En /ar, un pequeño script en src/app/layout.tsx define lang="ar" y dir="rtl" en la página antes de dibujarla, así que todo el diseño se refleja desde el primer fotograma: la barra lateral pasa a la derecha, y las tarjetas, tablas y menús se leen de derecha a izquierda.

Los componentes usan clases lógicas de Tailwind que siguen la dirección, como ms-2, pe-4, start-0 y text-start. Cuando añadas código, usa estas en lugar de ml-*, pr-*, left-* o text-left, o la página en árabe se verá mal.

Dónde están los textos

En la carpeta del panel, los textos se dividen por áreas bajo messages/, cada carpeta con un en.json y un ar.json:

Los mensajes de la API

La API responde en el idioma de la cabecera Accept-Language de la petición, inglés o árabe, y en inglés para cualquier otro. Sus textos están en back-end/src/i18n/translations/en/ y ar/, un archivo por módulo. Los países, los permisos y los ajustes de la aplicación llevan los dos idiomas en la base de datos.

Cambia un texto

• Cambia el valor en el archivo en inglés y el correspondiente en el archivo en árabe. Mantén las mismas claves en ambos.
• Si falta una clave en un archivo, la página de ese idioma muestra su nombre en lugar del texto.
• Las palabras entre llaves, como {count}, las rellena la aplicación. Déjalas tal cual.

Las etiquetas en árabe del propio panel

Cuando escribas sobre el panel en árabe, usa las etiquetas que muestra:

Añade un idioma

1. 01

   Añade su código a las tres listas de idiomas

   Añade el código del idioma a locales en src/config/i18n.ts, en src/proxy.ts y en src/app/[locale]/layout.tsx. Para el francés:

   src/config/i18n.tsCopiar

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

   Añade sus archivos de mensajes

   En cada carpeta bajo messages/ que tenga un en.json, cópialo con el nuevo código y traduce los valores. Conserva cada clave y cada palabra entre llaves.
3. 03

   Añádelo al menú de idioma

   Añádelo a languages en src/components/LanguageSwitcher.tsx, con su código y una bandera de country-flag-icons, como { code: "fr", country: "FR" as const, Flag: FR } con FR añadido a la importación de banderas.
4. 04

   Define su dirección, si la necesita

   Solo el árabe se trata como de derecha a izquierda. Para otro idioma de derecha a izquierda, añade su código a RTL_LOCALES en src/app/layout.tsx y amplía las comprobaciones locale === "ar", empezando por src/hooks/locale/useDirection.ts.

Reinicia yarn dev, o construye de nuevo, y el nuevo idioma responde en su propia dirección. La API sigue respondiéndole en inglés hasta que añadas sus propias traducciones en back-end/src/i18n/, donde supportedLocales en i18n.service.ts lista los idiomas que carga.