feat(#22): Use translation keys in files

legalconsenthub/app/pages/administration.vue

@@ -1,7 +1,7 @@
 <template>
   <UDashboardPanel id="administration">
     <template #header>
-      <UDashboardNavbar title="Administration - JSON Template Editor" :ui="{ right: 'gap-3' }">
+      <UDashboardNavbar :title="$t('templates.editorTitle')" :ui="{ right: 'gap-3' }">
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
@@ -10,21 +10,21 @@
           <UButton
             v-if="hasUnsavedChanges"
             icon="i-lucide-rotate-ccw"
-            label="Zurücksetzen"
+            :label="$t('templates.reset')"
             color="neutral"
             variant="outline"
             @click="resetEditor"
           />
           <UButton
             icon="i-lucide-file-plus"
-            label="Neue Vorlage"
+            :label="$t('templates.newTemplate')"
             color="neutral"
             variant="outline"
             @click="createNewTemplate"
           />
           <UButton
             icon="i-lucide-save"
-            label="Speichern"
+            :label="$t('common.save')"
             :disabled="!hasUnsavedChanges || !isValidJson"
             :loading="isSaving"
             @click="saveTemplate"
@@ -40,17 +40,17 @@
             <div>
               <h3 class="font-semibold text-lg">{{ currentTemplate.name }}</h3>
               <p class="text-sm text-muted mt-1">
-                Zuletzt bearbeitet am {{ formatDate(new Date(currentTemplate.modifiedAt)) }}
+                {{ $t('templates.lastModified') }} {{ formatDate(new Date(currentTemplate.modifiedAt)) }}
               </p>
             </div>
-            <UBadge v-if="hasUnsavedChanges" label="Ungespeicherte Änderungen" color="warning" variant="subtle" />
+            <UBadge v-if="hasUnsavedChanges" :label="$t('templates.unsavedChanges')" color="warning" variant="subtle" />
           </div>
         </UCard>
 
         <UCard v-else class="mb-4">
           <div class="text-center py-4">
             <UIcon name="i-lucide-info" class="size-8 text-muted mx-auto mb-2" />
-            <p class="text-muted">Keine Vorlage gefunden. Erstellen Sie eine neue Vorlage.</p>
+            <p class="text-muted">{{ $t('templates.noTemplateFound') }}</p>
           </div>
         </UCard>
 
@@ -70,8 +70,8 @@
           v-if="!isValidJson"
           color="error"
           icon="i-lucide-alert-circle"
-          title="Ungültiges JSON"
-          description="Das JSON-Format ist ungültig. Bitte korrigieren Sie die Syntax."
+          :title="$t('templates.invalidJson')"
+          :description="$t('templates.invalidJsonDescription')"
         />
       </div>
     </template>
@@ -92,6 +92,7 @@ const colorMode = useColorMode()
 const { hasRole } = usePermissions()
 const { getAllApplicationFormTemplates, updateApplicationFormTemplate, createApplicationFormTemplate } =
   await useApplicationFormTemplate()
+const { t: $t } = useI18n()
 
 if (!hasRole('CHIEF_EXECUTIVE_OFFICER') && !hasRole('IT_DEPARTMENT')) {
   await navigateTo('/')
@@ -194,8 +195,8 @@ function createNewTemplate() {
 async function saveTemplate() {
   if (!isValidJson.value) {
     toast.add({
-      title: 'Fehler',
-      description: 'Das JSON-Format ist ungültig.',
+      title: $t('common.error'),
+      description: $t('templates.invalidJsonDescription'),
       color: 'error'
     })
     return
@@ -210,15 +211,15 @@ async function saveTemplate() {
     if (currentTemplate.value?.id) {
       currentTemplate.value = await updateApplicationFormTemplate(currentTemplate.value.id, dataWithDates)
       toast.add({
-        title: 'Erfolg',
-        description: 'Vorlage erfolgreich aktualisiert.',
+        title: $t('common.success'),
+        description: $t('templates.updated'),
         color: 'success'
       })
     } else {
       currentTemplate.value = await createApplicationFormTemplate(dataWithDates)
       toast.add({
-        title: 'Erfolg',
-        description: 'Vorlage erfolgreich erstellt.',
+        title: $t('common.success'),
+        description: $t('templates.created'),
         color: 'success'
       })
     }
@@ -230,8 +231,8 @@ async function saveTemplate() {
     await refreshNuxtData('applicationFormTemplates')
   } catch (error) {
     toast.add({
-      title: 'Fehler',
-      description: 'Fehler beim Speichern der Vorlage.',
+      title: $t('common.error'),
+      description: $t('templates.saveError'),
       color: 'error'
     })
     console.error('Error saving template:', error)
@@ -242,7 +243,7 @@ async function saveTemplate() {
 
 onBeforeRouteLeave((to, from, next) => {
   if (hasUnsavedChanges.value) {
-    const answer = window.confirm('Sie haben ungespeicherte Änderungen. Möchten Sie die Seite wirklich verlassen?')
+    const answer = window.confirm($t('templates.unsavedWarning'))
     if (answer) {
       next()
     } else {