feat(i18n): add Spanish localization support with Flask-Babel

- Add Flask-Babel for internationalization
- Configure app for Spanish (default) and English
- Add language switcher in navigation
- Wrap all UI text in templates with gettext()
- Create translation directory structure
- Add complete Spanish translations (58 strings)
- Add English translations (template)
- Compile .po to .mo files
- Add extract_translations.py script for future updates
- Add compile_translations.py script

Spanish is now the default language, with English available via ?lang=en

Translated strings include:
- Navigation (Home, Add Tablet, Add User, etc.)
- User Loans interface (Search, Filter, Status, etc.)
- Table headers (User, Tablet, Serial Number, etc.)
- Buttons (Loan, Return, Search, etc.)
- Messages (No users found, No active loans, etc.)
- All UI text across all templates
This commit is contained in:
ijuanes 2026-06-20 09:58:13 +01:00
parent db7e9591e1
commit 34dd3ca937
13 changed files with 1020 additions and 110 deletions

View file

@ -7,19 +7,19 @@
<thead class="bg-green-600 text-white">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
User
{{ _('User') }}
</th>
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
Identification
{{ _('Identification') }}
</th>
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
Active Loans
{{ _('Active Loans') }}
</th>
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
Last Loan Date
{{ _('Last Loan Date') }}
</th>
<th class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider">
Actions
{{ _('Actions') }}
</th>
</tr>
</thead>
@ -30,7 +30,7 @@
<div class="font-medium text-gray-900">{{ user.name }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-gray-500">
{{ user.identification or 'N/A' }}
{{ user.identification or _('N/A') }}
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
@ -41,12 +41,12 @@
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ user.last_loan_date or 'Never' }}
{{ user.last_loan_date or _('Never') }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
<a href="/user_loans/{{ user.id }}"
class="text-green-600 hover:text-green-800 font-medium">
View Details
{{ _('View Details') }}
</a>
</td>
</tr>
@ -60,9 +60,9 @@
<nav class="flex items-center justify-between pt-4" aria-label="Table navigation">
<div class="flex items-center space-x-2">
<span class="text-sm text-gray-500">
Showing <span class="font-medium text-gray-900">{{ (page - 1) * per_page + 1 }}</span>
to <span class="font-medium text-gray-900">{{ min(page * per_page, total_users) }}</span>
of <span class="font-medium text-gray-900">{{ total_users }}</span> users
{{ _('Showing') }} <span class="font-medium text-gray-900">{{ (page - 1) * per_page + 1 }}</span>
{{ _('to') }} <span class="font-medium text-gray-900">{{ min(page * per_page, total_users) }}</span>
{{ _('of') }} <span class="font-medium text-gray-900">{{ total_users }}</span> {{ _('users') }}
</span>
</div>
@ -77,11 +77,11 @@
hx-include="[name='search'], [name='status']"
class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700"
>
Previous
{{ _('Previous') }}
</a>
{%- else %}
<span class="px-3 py-2 ml-0 leading-tight text-gray-300 bg-white border border-gray-300 rounded-l-lg cursor-not-allowed">
Previous
{{ _('Previous') }}
</span>
{%- endif %}
@ -168,11 +168,11 @@
hx-include="[name='search'], [name='status']"
class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700"
>
Next
{{ _('Next') }}
</a>
{%- else %}
<span class="px-3 py-2 leading-tight text-gray-300 bg-white border border-gray-300 rounded-r-lg cursor-not-allowed">
Next
{{ _('Next') }}
</span>
{%- endif %}
</div>
@ -186,21 +186,21 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
<h3 class="text-lg font-medium text-gray-900 mb-2">No users found</h3>
<h3 class="text-lg font-medium text-gray-900 mb-2">{{ _('No users found') }}</h3>
<p class="text-gray-500 mb-4">
{% if search %}
No users match your search for "{{ search }}"
{{ _('No users match your search for') }} "{{ search }}"
{% elif status == 'with_loans' %}
No users have active loans
{{ _('No users have active loans') }}
{% elif status == 'no_loans' %}
All users have at least one active loan
{{ _('All users have at least one active loan') }}
{% else %}
There are no users in the system yet
{{ _('There are no users in the system yet') }}
{% endif %}
</p>
<a href="/user_loans"
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 transition-colors">
Clear Filters
{{ _('Clear Filters') }}
</a>
</div>
{%- endif %}