ISSUE-WAVE-001: Implement Internationalization System (i18n)

[davidmelendez]

ISSUE-WAVE-001: Implement Internationalization System (i18n)

✨ Issue Request

Implement multilingual support in Tokasa through an internationalization system based on JSON files per language. Users will be able to change the language and all texts will update automatically.

📌 Description

This issue addresses the implementation of a translation system for Tokasa, with initial support for Spanish and English. JSON files per language will be created containing all text translations. The application should change texts to the language selected by the user without reloading the page and save the language preference in localStorage.

Scope: The implementation will be applied only to the /dashboard/admin page to maintain a clear and manageable scope.

🛠️ Steps to Reproduce (if applicable)

Not applicable; this is a new i18n functionality.

🖼️ Screenshots (if applicable)

Not applicable as this is a code implementation, but screenshots of the language selector can be added in future updates.

🎯 Expected Behavior

The solution should:

1. 🔹 Allow changing language from the UI through a selector in /dashboard/admin.
2. 🔹 Reflect language change instantly without page reload.
3. 🔹 Maintain language preference between sessions using localStorage.
4. 🔹 Provide fallback to English if any translation is missing (base language).
5. 🔹 Ensure all visible texts in the admin page are translated.

🚀 Suggested Solution / Feature Request

Setup

• Install react-i18next and i18next.
• Create /src/locales/ folder.
• Configure i18n.ts file.

Translation Files

• Create es.json with all texts in Spanish.
• Create en.json with all texts in English.
• Map existing hardcoded texts.

Implementation

• Configure i18n in main.tsx.
• Replace hardcoded texts with t('key').
• Create LanguageSelector component.
• Save language preference in localStorage.

Texts to Translate (Only /dashboard/admin page)

• Admin dashboard navigation and menus.
• Administration form buttons and labels.
• Admin-specific success/error messages.
• Admin interface titles and descriptions.
• Administrative panel tooltips and help.

📝 File Structure

src/
├── locales/
│   ├── es.json
│   └── en.json
├── i18n.ts
└── components/
    └── LanguageSelector.tsx

📌 Additional Notes

• Default language should be English (en).
• Implementation will be limited only to /dashboard/admin page to maintain a manageable scope.
• System should be prepared for future expansions to other pages.
• Ensure support for future language expansions.
• PR description must include: Close ISSUE-WAVE-001: Implement Internationalization System (i18n) #16

⚠️ Before Applying

Please read this guide: https://github.com/tokasa-starknet/ToKasa/blob/main/CONTRIBUTING.md