Manage Translations

This guide covers managing multi-language content in CHRIS.

Overview

CHRIS supports four languages:

Translations are stored in the database and can be managed by administrators.

How Translations Work

Translation Keys

Each translatable string has a key following the pattern:

category.descriptiveName

Examples:

• common.save - "Save" button text
• leaveRequests.submitRequest - "Submit Request" button
• employees.addEmployee - "Add Employee" header

Fallback Chain

If a translation is missing:

1. Try the requested language
2. Fall back to English
3. Fall back to Croatian
4. Show the key itself

View Translations

Navigate to Settings > Translations:

• See all translation keys in a table
• Filter by category
• Search for specific keys
• View translations in all languages

Edit a Translation

Single Translation

1. Find the translation key in the list
2. Click Edit
3. Update the text for each language:
   • Croatian (required)
   • English (required)
   • Russian
   • Hindi
4. Click Save

Tips for Good Translations

• Keep translations concise for UI elements
• Maintain consistent terminology
• Consider text expansion (German is ~30% longer than English)
• Test in the UI after saving

Add a New Translation

When adding new features that need translation:

Step 1: Create the Key

1. Go to Settings > Translations
2. Click Add Translation
3. Enter the key following the naming convention:

   category.descriptiveName
   

Step 2: Enter Translations

Step 3: Use in Code

Reference the key in React components:

import { useLanguage } from '@/contexts/LanguageContext';

function MyComponent() {
  const { t } = useLanguage();
  return <button>{t('common.save')}</button>;
}

Translation Categories

Organize translations by category:

Bulk Operations

Export Translations

Export all translations for review or backup:

1. Go to Settings > Translations
2. Click Export
3. Download the CSV file

The CSV includes:

• Key
• Category
• Croatian text
• English text
• Russian text
• Hindi text

Import Translations

Update multiple translations at once:

1. Download the export CSV as a template
2. Edit translations in the CSV
3. Click Import
4. Upload the modified CSV
5. Review changes and confirm

!!! warning "Import Caution" Importing overwrites existing translations. Always backup first.

Database Structure

Translations are stored in the translations table:

Adding a New Language

To add a fifth language:

Database Migration

ALTER TABLE translations ADD COLUMN german TEXT;

Update LanguageContext

1. Add the language to supported languages
2. Update the fallback chain
3. Add the language picker option

Translate All Keys

1. Export existing translations
2. Add the new language column
3. Translate all keys
4. Import the updated file

Best Practices

Key Naming

✓ common.save
✓ leaveRequests.submitRequest
✓ employees.roleEmployee

✗ save (too generic)
✗ submitLeaveRequest (inconsistent format)
✗ EMPLOYEES_ROLE (wrong case)

Translation Quality

1. Native speakers: Have native speakers review translations
2. Context: Provide context for translators (where is this shown?)
3. Consistency: Use the same term for the same concept
4. Testing: Test translations in the actual UI

Missing Translations

Check for missing translations:

SELECT key
FROM translations
WHERE russian IS NULL OR hindi IS NULL;

Troubleshooting

Translation Not Showing

1. Verify the key exists in the database
2. Check for typos in the key
3. Clear browser cache
4. Refresh the page

Wrong Language Displayed

1. Check the language picker selection
2. Verify browser language preferences
3. Check the translation exists for that language

Special Characters

Ensure proper encoding:

• Database should use UTF-8
• CSV exports should be UTF-8
• Hindi and Russian need Unicode support