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

@ -10,7 +10,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 19l-7-7 7-7"></path>
</svg>
Back to All Users
{{ _('Back to All Users') }}
</a>
</div>
@ -25,16 +25,16 @@
<div class="flex-1">
<h1 class="text-xl font-bold text-gray-900">{{ user.name }}</h1>
<p class="text-gray-500">
ID: {{ user.id }} | Identification: {{ user.identification or 'N/A' }}
{{ _('ID') }}: {{ user.id }} | {{ _('Identification') }}: {{ user.identification or _('N/A') }}
</p>
<div class="flex gap-4 mt-2">
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-green-500 rounded-full"></span>
<span class="text-sm text-gray-600">{{ active_count }} Active Loans</span>
<span class="text-sm text-gray-600">{{ active_count }} {{ _('Active Loans') }}</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-gray-400 rounded-full"></span>
<span class="text-sm text-gray-600">{{ returned_count }} Returned</span>
<span class="text-sm text-gray-600">{{ returned_count }} {{ _('Returned') }}</span>
</div>
</div>
</div>
@ -42,13 +42,13 @@
{% if user.email %}
<a href="mailto:{{ user.email }}"
class="px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm hover:bg-blue-200">
Email
{{ _('Email') }}
</a>
{% endif %}
{% if user.phone %}
<a href="tel:{{ user.phone }}"
class="px-3 py-1 bg-purple-100 text-purple-700 rounded-lg text-sm hover:bg-purple-200">
Call
{{ _('Call') }}
</a>
{% endif %}
</div>
@ -58,7 +58,7 @@
<!-- Loan History -->
<div class="bg-white rounded-lg shadow">
<div class="p-6 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-800">Loan History</h2>
<h2 class="text-lg font-semibold text-gray-800">{{ _('Loan History') }}</h2>
</div>
{% if loans %}
@ -67,16 +67,16 @@
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Tablet
{{ _('Tablet') }}
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Loan Date
{{ _('Loan Date') }}
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Return Date
{{ _('Return Date') }}
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
{{ _('Status') }}
</th>
</tr>
</thead>
@ -88,14 +88,14 @@
<div class="text-sm text-gray-500">{{ loan.serial_number }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ loan.loan_date[:10] if loan.loan_date else 'N/A' }}
{{ loan.loan_date[:10] if loan.loan_date else _('N/A') }}
{{ loan.loan_date[11:16] if loan.loan_date else '' }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{% if loan.return_date %}
{{ loan.return_date[:10] }} {{ loan.return_date[11:16] }}
{% else %}
<span class="text-gray-400 italic">Not returned</span>
<span class="text-gray-400 italic">{{ _('Not returned') }}</span>
{% endif %}
</td>
<td class="px-6 py-4 whitespace-nowrap">
@ -118,7 +118,7 @@
<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>
<p>No loan history for this user</p>
<p>{{ _('No loan history for this user') }}</p>
</div>
{% endif %}
</div>