From bfa908ac9ac067edab62eb5aa18039e7b5ef0a48 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 21 Nov 2025 13:51:14 +0100
Subject: [PATCH] Refactor localization handling in SeasonSelector and
 TeamManagementView to utilize the new i18n import method. Update German
 localization by removing escaped characters from placeholders for improved
 clarity and consistency in rendering. Ensure all translation calls are
 updated to use the new method for better maintainability.

---
 frontend/src/components/SeasonSelector.vue    |   4 +-
 frontend/src/i18n/index.js                    |   2 +-
 frontend/src/i18n/locales/de.json             |  10 +-
 .../src/views/MemberTransferSettingsView.vue  |  15 ++-
 frontend/src/views/TeamManagementView.vue     | 121 +++++++++---------
 5 files changed, 78 insertions(+), 74 deletions(-)

diff --git a/frontend/src/components/SeasonSelector.vue b/frontend/src/components/SeasonSelector.vue
index a7c0688..e4f76fb 100644
--- a/frontend/src/components/SeasonSelector.vue
+++ b/frontend/src/components/SeasonSelector.vue
@@ -66,7 +66,7 @@
 <script>
 import { ref, computed, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
-import { useI18n } from 'vue-i18n';
+import i18n from '../i18n';
 import apiClient from '../apiClient.js';
 
 import InfoDialog from './InfoDialog.vue';
@@ -90,7 +90,7 @@ export default {
   emits: ['update:modelValue', 'season-change'],
   setup(props, { emit }) {
     const store = useStore();
-    const { t } = useI18n();
+    const t = (key, params) => i18n.global.t(key, params);
     
     // Dialog States
     const infoDialog = ref({
diff --git a/frontend/src/i18n/index.js b/frontend/src/i18n/index.js
index 335f39f..f68dee1 100644
--- a/frontend/src/i18n/index.js
+++ b/frontend/src/i18n/index.js
@@ -107,7 +107,7 @@ const i18n = createI18n({
     'fil': fil,
   },
   legacy: true, // Use Options API mode (required for $t in templates with Options API)
-  // globalInjection is not needed with legacy: true
+  // globalInjection is automatically enabled with legacy: true
 });
 
 /**
diff --git a/frontend/src/i18n/locales/de.json b/frontend/src/i18n/locales/de.json
index b318b98..2139e54 100644
--- a/frontend/src/i18n/locales/de.json
+++ b/frontend/src/i18n/locales/de.json
@@ -882,19 +882,19 @@
     "bulkMode": "Bulk-Import-Modus (alle Mitglieder auf einmal übertragen)",
     "bulkModeHint": "Wenn aktiviert, werden alle Mitglieder in einem Request als Array übertragen.",
     "importTemplate": "Template aus vollständigem Beispiel importieren",
-    "importTemplatePlaceholder": "Fügen Sie hier ein vollständiges Beispiel-Template ein, z.B.:\n__BRACE_OPEN__\n  __QUOTE__members__QUOTE__: [\n    __BRACE_OPEN__\n      __QUOTE__firstName__QUOTE__: __QUOTE__Max__QUOTE__,\n      __QUOTE__lastName__QUOTE__: __QUOTE__Mustermann__QUOTE__,\n      __QUOTE__email__QUOTE__: __QUOTE__max@example.com__QUOTE__\n    __BRACE_CLOSE__\n  ]\n__BRACE_CLOSE__",
+    "importTemplatePlaceholder": "Fügen Sie hier ein vollständiges Beispiel-Template ein, z.B.:\nLBRACE\n  DQUOTEmembersDQUOTE: [\n    LBRACE\n      DQUOTEfirstNameDQUOTE: DQUOTEMaxDQUOTE,\n      DQUOTElastNameDQUOTE: DQUOTEMustermannDQUOTE,\n      DQUOTEemailDQUOTE: DQUOTEmaxATexample.comDQUOTE\n    RBRACE\n  ]\nRBRACE",
     "analyzeAndImport": "Template analysieren und importieren",
     "importTemplateHint": "Fügen Sie ein vollständiges Beispiel-Template (mit Beispiel-Mitgliedern) ein. Das System erkennt automatisch das Mitglied-Template und das Bulk-Wrapper-Template.",
     "bulkWrapperTemplate": "Bulk-Wrapper-Template (optional)",
     "bulkWrapperWhat": "Was ist ein Bulk-Wrapper-Template?",
-    "bulkWrapperDescription": "Optional können Sie die äußere Struktur definieren, in die die Mitglieder-Array eingefügt wird. Verwenden Sie __PLACEHOLDER_MEMBERS__ als Platzhalter für das Array der Mitglieder.",
+    "bulkWrapperDescription": "Optional können Sie die äußere Struktur definieren, in die die Mitglieder-Array eingefügt wird. Verwenden Sie PLACEHOLDER_MEMBERS als Platzhalter für das Array der Mitglieder.",
     "example": "Beispiel",
     "bulkWrapperNote": "Hinweis: Wenn kein Wrapper-Template angegeben wird, wird automatisch ein members-Array verwendet.",
     "availablePlaceholders": "Verfügbare Platzhalter",
     "membersArray": "Mitglieder-Array",
     "transferTemplate": "Übertragungs-Template",
     "templateWhat": "Was ist ein Template?",
-    "templateDescription": "Das Template definiert das Format, in dem die Mitgliederdaten an das externe System übertragen werden. Verwenden Sie Platzhalter wie __PLACEHOLDER_FIRSTNAME__, um die Daten automatisch zu ersetzen.",
+    "templateDescription": "Das Template definiert das Format, in dem die Mitgliederdaten an das externe System übertragen werden. Verwenden Sie Platzhalter wie PLACEHOLDER_FIRSTNAME, um die Daten automatisch zu ersetzen.",
     "exampleJson": "Beispiel für JSON-Format (empfohlen)",
     "exampleXml": "Beispiel für XML-Format",
     "exampleFormData": "Beispiel für Form-Data Format",
@@ -1201,8 +1201,8 @@
     "pending": "Ausstehend",
     "notAppeared": "Nicht angetreten",
     "bothTeamsAppeared": "Beide Mannschaften angetreten",
-    "homeTeamNotAppeared": "Heimmannschaft ({team}) nicht angetreten",
-    "guestTeamNotAppeared": "Gastmannschaft ({team}) nicht angetreten",
+    "homeTeamNotAppeared": "Heimmannschaft {team} nicht angetreten",
+    "guestTeamNotAppeared": "Gastmannschaft {team} nicht angetreten",
     "playSystem": "Spielsystem",
     "pinInput": "PIN-Eingabe",
     "homePin": "PIN Heimverein",
diff --git a/frontend/src/views/MemberTransferSettingsView.vue b/frontend/src/views/MemberTransferSettingsView.vue
index 1b23514..729faf2 100644
--- a/frontend/src/views/MemberTransferSettingsView.vue
+++ b/frontend/src/views/MemberTransferSettingsView.vue
@@ -374,8 +374,8 @@ address={{address}}`;
       try {
         const text = this.$t('memberTransfer.bulkWrapperDescription');
         if (typeof text === 'string') {
-          // Ersetze __PLACEHOLDER_MEMBERS__ durch {{members}}
-          return text.replace(/__PLACEHOLDER_MEMBERS__/g, '{{members}}');
+          // Ersetze PLACEHOLDER_MEMBERS durch {{members}}
+          return text.replace(/PLACEHOLDER_MEMBERS/g, '{{members}}');
         }
         return 'Optional können Sie die äußere Struktur definieren, in die die Mitglieder-Array eingefügt wird. Verwenden Sie {{members}} als Platzhalter für das Array der Mitglieder.';
       } catch (e) {
@@ -394,8 +394,8 @@ address={{address}}`;
       try {
         const text = this.$t('memberTransfer.templateDescription');
         if (typeof text === 'string') {
-          // Ersetze __PLACEHOLDER_FIRSTNAME__ durch {{firstName}}
-          return text.replace(/__PLACEHOLDER_FIRSTNAME__/g, '{{firstName}}');
+          // Ersetze PLACEHOLDER_FIRSTNAME durch {{firstName}}
+          return text.replace(/PLACEHOLDER_FIRSTNAME/g, '{{firstName}}');
         }
         return 'Das Template definiert das Format, in dem die Mitgliederdaten an das externe System übertragen werden. Verwenden Sie Platzhalter wie {{firstName}}, um die Daten automatisch zu ersetzen.';
       } catch (e) {
@@ -416,9 +416,10 @@ address={{address}}`;
         if (typeof text === 'string') {
           // Ersetze die Platzhalter durch geschweifte Klammern und Anführungszeichen
           return text
-            .replace(/__BRACE_OPEN__/g, '{')
-            .replace(/__BRACE_CLOSE__/g, '}')
-            .replace(/__QUOTE__/g, '"');
+            .replace(/LBRACE/g, '{')
+            .replace(/RBRACE/g, '}')
+            .replace(/DQUOTE/g, '"')
+            .replace(/AT/g, '@');
         }
         return `Fügen Sie hier ein vollständiges Beispiel-Template ein, z.B.:\n{\n  "members": [\n    {\n      "firstName": "Max",\n      "lastName": "Mustermann",\n      "email": "max@example.com"\n    }\n  ]\n}`;
       } catch (e) {
diff --git a/frontend/src/views/TeamManagementView.vue b/frontend/src/views/TeamManagementView.vue
index 749bd22..1036945 100644
--- a/frontend/src/views/TeamManagementView.vue
+++ b/frontend/src/views/TeamManagementView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>{{ $t('teamManagement.title') }}</h2>
+    <h2>{{ t('teamManagement.title') }}</h2>
     
     <SeasonSelector 
       v-model="selectedSeasonId" 
@@ -11,24 +11,24 @@
     <!-- Automatische Jobs Info -->
     <div v-if="schedulerJobs.rating_updates || schedulerJobs.match_results" class="scheduler-jobs-info">
       <div class="job-info" v-if="schedulerJobs.rating_updates?.lastRun">
-        <span class="job-label">🔄 {{ $t('teamManagement.ratingUpdates') }}:</span>
+        <span class="job-label">🔄 {{ t('teamManagement.ratingUpdates') }}:</span>
         <span class="job-details">
-          {{ $t('teamManagement.lastRun') }}: {{ formatJobDate(schedulerJobs.rating_updates.lastRun) }}
+          {{ t('teamManagement.lastRun') }}: {{ formatJobDate(schedulerJobs.rating_updates.lastRun) }}
           <span v-if="schedulerJobs.rating_updates.updatedCount !== null" class="job-count">
-            ({{ schedulerJobs.rating_updates.updatedCount }} {{ $t('teamManagement.updated') }})
+            ({{ schedulerJobs.rating_updates.updatedCount }} {{ t('teamManagement.updated') }})
           </span>
-          <span v-if="!schedulerJobs.rating_updates.success" class="job-error">⚠️ {{ $t('teamManagement.error') }}</span>
+          <span v-if="!schedulerJobs.rating_updates.success" class="job-error">⚠️ {{ t('teamManagement.error') }}</span>
         </span>
       </div>
       <div class="job-info" v-if="schedulerJobs.match_results?.lastRun">
         <div class="job-header">
-          <span class="job-label">📊 {{ $t('teamManagement.matchResults') }}:</span>
+          <span class="job-label">📊 {{ t('teamManagement.matchResults') }}:</span>
           <span class="job-details">
-            {{ $t('teamManagement.lastRun') }}: {{ formatJobDate(schedulerJobs.match_results.lastRun) }}
+            {{ t('teamManagement.lastRun') }}: {{ formatJobDate(schedulerJobs.match_results.lastRun) }}
             <span v-if="schedulerJobs.match_results.fetchedCount !== null" class="job-count">
-              ({{ schedulerJobs.match_results.fetchedCount }} {{ $t('teamManagement.fetched') }})
+              ({{ schedulerJobs.match_results.fetchedCount }} {{ t('teamManagement.fetched') }})
             </span>
-            <span v-if="!schedulerJobs.match_results.success" class="job-error">⚠️ {{ $t('teamManagement.error') }}</span>
+            <span v-if="!schedulerJobs.match_results.success" class="job-error">⚠️ {{ t('teamManagement.error') }}</span>
           </span>
         </div>
         <div v-if="schedulerJobs.match_results.teamDetails && schedulerJobs.match_results.teamDetails.length > 0" class="team-details">
@@ -45,9 +45,9 @@
       <div class="toggle-new-team">
         <span @click="toggleNewTeam">
           <span class="add">{{ teamFormIsOpen ? '-' : '+' }}</span>
-          {{ teamToEdit === null ? $t('teamManagement.newTeam') : $t('teamManagement.editTeam') }}
+          {{ teamToEdit === null ? t('teamManagement.newTeam') : t('teamManagement.editTeam') }}
         </span>
-        <button v-if="teamToEdit !== null" @click="resetToNewTeam">{{ $t('teamManagement.createNewTeam') }}</button>
+        <button v-if="teamToEdit !== null" @click="resetToNewTeam">{{ t('teamManagement.createNewTeam') }}</button>
       </div>
       
       <div v-if="teamFormIsOpen" class="new-team-form">
@@ -55,14 +55,14 @@
           <!-- Linke Spalte: Grundeinstellungen -->
           <div class="basic-settings">
             <label>
-              <span>{{ $t('teamManagement.teamName') }}:</span> 
-              <input type="text" v-model="newTeamName" :placeholder="$t('teamManagement.teamNamePlaceholder')">
+              <span>{{ t('teamManagement.teamName') }}:</span> 
+              <input type="text" v-model="newTeamName" :placeholder="t('teamManagement.teamNamePlaceholder')">
             </label>
             
             <label>
-              <span>{{ $t('teamManagement.league') }}:</span>
+              <span>{{ t('teamManagement.league') }}:</span>
               <select v-model="newLeagueId">
-                <option value="">{{ $t('teamManagement.noLeague') }}</option>
+                <option value="">{{ t('teamManagement.noLeague') }}</option>
                 <option v-for="league in filteredLeagues" :key="league.id" :value="league.id">
                   {{ league.name }}
                 </option>
@@ -71,39 +71,39 @@
             
             <div class="form-actions">
               <button @click="addNewTeam" :disabled="!newTeamName.trim()">
-                {{ teamToEdit ? $t('teamManagement.change') : $t('teamManagement.createAndEdit') }}
+                {{ teamToEdit ? t('teamManagement.change') : t('teamManagement.createAndEdit') }}
               </button>
               <button @click="resetNewTeam" v-if="teamToEdit === null" class="cancel-action">
-                {{ $t('teamManagement.clearFields') }}
+                {{ t('teamManagement.clearFields') }}
               </button>
               <button @click="resetToNewTeam" v-if="teamToEdit !== null" class="cancel-action">
-                {{ $t('teamManagement.createNewTeam') }}
+                {{ t('teamManagement.createNewTeam') }}
               </button>
             </div>
             
             <!-- Spieler-Statistik -->
             <div v-if="teamToEdit && teamToEdit.leagueId" class="player-stats">
               <div class="stats-header">
-                <span class="section-title">📊 {{ $t('teamManagement.playerStats') }}</span>
+                <span class="section-title">📊 {{ t('teamManagement.playerStats') }}</span>
                 <button @click="refreshPlayerStats" :disabled="loadingStats" class="btn-sm">
                   {{ loadingStats ? '⏳' : '🔄' }}
                 </button>
               </div>
               
-              <div v-if="loadingStats" class="loading-stats">{{ $t('teamManagement.loadingStats') }}</div>
+              <div v-if="loadingStats" class="loading-stats">{{ t('teamManagement.loadingStats') }}</div>
               
               <div v-else-if="playerStats.length === 0" class="no-stats">
-                {{ $t('teamManagement.noPlayerStats') }}
+                {{ t('teamManagement.noPlayerStats') }}
               </div>
               
               <table v-else class="stats-table">
                 <thead>
                   <tr>
-                    <th>{{ $t('teamManagement.player') }}</th>
-                    <th :title="$t('teamManagement.qttr')">(Q)TTR</th>
-                    <th :title="$t('teamManagement.seasonFull')">{{ $t('teamManagement.season') }}</th>
-                    <th :title="isSecondHalf ? $t('teamManagement.secondHalfFull') : $t('teamManagement.firstHalfFull')">
-                      {{ isSecondHalf ? $t('teamManagement.secondHalf') : $t('teamManagement.firstHalf') }}
+                    <th>{{ t('teamManagement.player') }}</th>
+                    <th :title="t('teamManagement.qttr')">(Q)TTR</th>
+                    <th :title="t('teamManagement.seasonFull')">{{ t('teamManagement.season') }}</th>
+                    <th :title="isSecondHalf ? t('teamManagement.secondHalfFull') : t('teamManagement.firstHalfFull')">
+                      {{ isSecondHalf ? t('teamManagement.secondHalf') : t('teamManagement.firstHalf') }}
                     </th>
                   </tr>
                 </thead>
@@ -128,40 +128,40 @@
           <div v-if="teamToEdit" class="advanced-settings">
             <!-- Upload-Buttons -->
             <div class="upload-actions compact">
-                <span class="section-title">📋 {{ $t('teamManagement.documents') }}</span>
+                <span class="section-title">📋 {{ t('teamManagement.documents') }}</span>
               <div class="upload-buttons-compact">
                 <button @click="uploadCodeList" class="btn-upload-sm">
-                  📋 {{ $t('teamManagement.codeList') }}
+                  📋 {{ t('teamManagement.codeList') }}
                 </button>
                 <button @click="uploadPinList" class="btn-upload-sm">
-                  🔐 {{ $t('teamManagement.pinList') }}
+                  🔐 {{ t('teamManagement.pinList') }}
                 </button>
               </div>
             </div>
             
             <!-- Automatische Jobs Info für dieses Team -->
             <div v-if="getTeamJobInfo(teamToEdit)" class="team-job-info compact">
-                <span class="section-title">🔄 {{ $t('teamManagement.automaticJobs') }}</span>
+                <span class="section-title">🔄 {{ t('teamManagement.automaticJobs') }}</span>
               <div v-if="getTeamJobInfo(teamToEdit).lastRun" class="team-job-details">
                 <div class="team-job-item">
-                  <span class="team-job-label">{{ $t('teamManagement.lastUpdated') }}:</span>
+                  <span class="team-job-label">{{ t('teamManagement.lastUpdated') }}:</span>
                   <span class="team-job-value">{{ formatJobDate(getTeamJobInfo(teamToEdit).lastRun) }}</span>
                 </div>
                 <div v-if="getTeamJobInfo(teamToEdit).success !== null" class="team-job-item">
-                  <span class="team-job-label">{{ $t('teamManagement.status') }}:</span>
-                  <span v-if="getTeamJobInfo(teamToEdit).success" class="team-job-status success">✓ {{ $t('teamManagement.successful') }}</span>
-                  <span v-else class="team-job-status error">✗ {{ $t('teamManagement.error') }}</span>
+                  <span class="team-job-label">{{ t('teamManagement.status') }}:</span>
+                  <span v-if="getTeamJobInfo(teamToEdit).success" class="team-job-status success">✓ {{ t('teamManagement.successful') }}</span>
+                  <span v-else class="team-job-status error">✗ {{ t('teamManagement.error') }}</span>
                 </div>
               </div>
               <div v-else class="team-job-details">
-                <span class="team-job-no-data">{{ $t('teamManagement.noAutomaticUpdate') }}</span>
+                <span class="team-job-no-data">{{ t('teamManagement.noAutomaticUpdate') }}</span>
               </div>
             </div>
             
             <!-- MyTischtennis URL Konfiguration -->
             <div class="mytischtennis-config compact">
               <div class="mytischtennis-header-compact">
-                <span class="section-title">🏓 {{ $t('teamManagement.myTischtennis') }}</span>
+                <span class="section-title">🏓 {{ t('teamManagement.myTischtennis') }}</span>
                 <div class="status-inline">
                   <span v-if="getMyTischtennisStatus(teamToEdit).complete" class="badge-sm complete">✓</span>
                   <span v-else-if="getMyTischtennisStatus(teamToEdit).partial" class="badge-sm partial">⚠</span>
@@ -182,7 +182,7 @@
                   type="text" 
                   v-model="myTischtennisUrl" 
                   @keyup.enter="parseMyTischtennisUrl"
-                  :placeholder="$t('teamManagement.myTischtennisUrlPlaceholder')"
+                  :placeholder="t('teamManagement.myTischtennisUrlPlaceholder')"
                   class="compact-url-input"
                   :disabled="parsingUrl"
                 >
@@ -198,10 +198,10 @@
     </div>
 
     <div class="teams-list">
-      <h3>{{ $t('teamManagement.teams') }} ({{ teams.length }}) - {{ $t('teamManagement.season') }} {{ currentSeason?.season || $t('teamManagement.seasonUnknown') }}</h3>
+      <h3>{{ t('teamManagement.teams') }} ({{ teams.length }}) - {{ t('teamManagement.season') }} {{ currentSeason?.season || t('teamManagement.seasonUnknown') }}</h3>
       
       <div v-if="teams.length === 0" class="no-teams">
-        <p>{{ $t('teamManagement.noTeamsYet') }}</p>
+        <p>{{ t('teamManagement.noTeamsYet') }}</p>
       </div>
       
       <div v-else class="teams-grid">
@@ -214,10 +214,10 @@
           <div class="team-header">
             <h4>{{ team.name }}</h4>
             <div class="team-actions">
-              <button @click.stop="editTeam(team)" class="btn-edit" :title="$t('teamManagement.edit')">
+              <button @click.stop="editTeam(team)" class="btn-edit" :title="t('teamManagement.edit')">
                 ✏️
               </button>
-              <button @click.stop="deleteTeam(team)" class="btn-delete" :title="$t('teamManagement.delete')">
+              <button @click.stop="deleteTeam(team)" class="btn-delete" :title="t('teamManagement.delete')">
                 🗑️
               </button>
             </div>
@@ -225,17 +225,17 @@
           
           <div class="team-info">
             <div class="info-row">
-              <span class="label">{{ $t('teamManagement.league') }}:</span>
+              <span class="label">{{ t('teamManagement.league') }}:</span>
               <span class="value">
-                {{ team.league ? team.league.name : $t('teamManagement.noAssignment') }}
+                {{ team.league ? team.league.name : t('teamManagement.noAssignment') }}
               </span>
             </div>
             <div class="info-row">
-              <span class="label">{{ $t('teamManagement.season') }}:</span>
-              <span class="value">{{ team.season?.season || $t('teamManagement.unknown') }}</span>
+              <span class="label">{{ t('teamManagement.season') }}:</span>
+              <span class="value">{{ team.season?.season || t('teamManagement.unknown') }}</span>
             </div>
             <div class="info-row">
-              <span class="label">{{ $t('teamManagement.created') }}:</span>
+              <span class="label">{{ t('teamManagement.created') }}:</span>
               <span class="value">{{ formatDate(team.createdAt) }}</span>
             </div>
             
@@ -243,13 +243,13 @@
             <div class="info-row mytischtennis-status">
               <span class="label">🏓 MyTischtennis:</span>
               <span v-if="getMyTischtennisStatus(team).complete" class="status-badge complete" :title="getMyTischtennisStatus(team).tooltip">
-                ✓ {{ $t('teamManagement.fullyConfigured') }}
+                ✓ {{ t('teamManagement.fullyConfigured') }}
               </span>
               <span v-else-if="getMyTischtennisStatus(team).partial" class="status-badge partial" :title="getMyTischtennisStatus(team).tooltip">
-                ⚠ {{ $t('teamManagement.partiallyConfigured') }}
+                ⚠ {{ t('teamManagement.partiallyConfigured') }}
               </span>
               <span v-else class="status-badge missing" :title="getMyTischtennisStatus(team).tooltip">
-                ✗ {{ $t('teamManagement.notConfigured') }}
+                ✗ {{ t('teamManagement.notConfigured') }}
               </span>
             </div>
             
@@ -263,20 +263,20 @@
                     {{ getTeamJobInfo(team).success ? '✓' : '✗' }}
                   </span>
                 </span>
-                <span v-else class="team-job-no-data">{{ $t('teamManagement.never') }}</span>
+                <span v-else class="team-job-no-data">{{ t('teamManagement.never') }}</span>
               </span>
             </div>
           </div>
           
           <!-- PDF-Dokumente Icons -->
           <div class="team-documents">
-            <div class="documents-label">{{ $t('teamManagement.documents') }}:</div>
+            <div class="documents-label">{{ t('teamManagement.documents') }}:</div>
             <div class="document-icons">
               <button 
                 v-if="getTeamDocuments(team.id, 'code_list').length > 0"
                 @click.stop="showPDFDialog(team.id, 'code_list')"
                 class="document-icon code-list-icon"
-                :title="$t('teamManagement.showCodeList')"
+                :title="t('teamManagement.showCodeList')"
               >
                 📋
               </button>
@@ -284,7 +284,7 @@
                 v-if="getTeamDocuments(team.id, 'pin_list').length > 0"
                 @click.stop="showPDFDialog(team.id, 'pin_list')"
                 class="document-icon pin-list-icon"
-                :title="$t('teamManagement.showPinList')"
+                :title="t('teamManagement.showPinList')"
               >
                 🔐
               </button>
@@ -343,6 +343,7 @@ import { useStore } from 'vuex';
 import SeasonSelector from '../components/SeasonSelector.vue';
 import apiClient from '../apiClient.js';
 import { getSafeErrorMessage, getSafeMessage } from '../utils/errorMessages.js';
+import i18n from '../i18n';
 
 import InfoDialog from '../components/InfoDialog.vue';
 import ConfirmDialog from '../components/ConfirmDialog.vue';
@@ -357,6 +358,7 @@ export default {
         ConfirmDialog},
   setup() {
     const store = useStore();
+    const t = (key, params) => i18n.global.t(key, params);
     
     // Dialog States
     const infoDialog = ref({
@@ -590,7 +592,7 @@ export default {
     };
     
     const formatJobDate = (dateString) => {
-      if (!dateString) return 'Nie';
+      if (!dateString) return t('myTischtennisAccount.never');
       const date = new Date(dateString);
       const now = new Date();
       const diffMs = now - date;
@@ -598,11 +600,11 @@ export default {
       const diffHours = Math.floor(diffMs / 3600000);
       const diffDays = Math.floor(diffMs / 86400000);
       
-      if (diffMins < 1) return 'gerade eben';
-      if (diffMins < 60) return `vor ${diffMins} Min.`;
-      if (diffHours < 24) return `vor ${diffHours} Std.`;
-      if (diffDays === 1) return 'gestern';
-      if (diffDays < 7) return `vor ${diffDays} Tagen`;
+      if (diffMins < 1) return t('myTischtennisAccount.justNow');
+      if (diffMins < 60) return t('myTischtennisAccount.minutesAgo', { count: diffMins });
+      if (diffHours < 24) return t('myTischtennisAccount.hoursAgo', { count: diffHours });
+      if (diffDays === 1) return t('myTischtennisAccount.yesterday');
+      if (diffDays < 7) return t('myTischtennisAccount.daysAgo', { count: diffDays });
       
       // Format: DD.MM.YYYY HH:MM
       return date.toLocaleDateString('de-DE', {
@@ -1276,6 +1278,7 @@ export default {
     };
     
     return {
+      t,
       infoDialog,
       confirmDialog,
       showInfo,