feat(frontend): Use i18n, type fixes

legalconsenthub/components/InviteMemberModal.vue

@@ -1,12 +1,6 @@
 <template>
   <UModal v-model:open="open" title="Mitglied einladen" description="Laden Sie ein Mitglied zu Ihrer Organisation ein">
-    <UButton
-      v-if="canInviteMembers"
-      icon="i-lucide-mail-plus"
-      variant="outline"
-      size="sm"
-      @click="open = true"
-    >
+    <UButton v-if="canInviteMembers" icon="i-lucide-mail-plus" variant="outline" size="sm" @click="open = true">
       Mitglied einladen
     </UButton>
 
@@ -60,8 +54,10 @@ const form = ref({
   role: ROLES.EMPLOYEE as LegalRole
 })
 
+const { t } = useI18n()
+
 const availableRoles = computed(() => {
-  return Object.values(ROLES).map(role => {
+  return Object.values(ROLES).map((role) => {
     const roleInfo = getRoleInfo(role)
     return {
       label: roleInfo.name,
@@ -76,25 +72,25 @@ const availableRoles = computed(() => {
 function getRoleInfo(role: LegalRole) {
   const roleInfo = {
     [ROLES.EMPLOYER]: {
-      name: 'Arbeitgeber',
+      name: t('roles.employer'),
       description: 'Kann Anträge genehmigen und Vereinbarungen unterzeichnen',
       color: 'blue',
       icon: 'i-lucide-briefcase'
     },
     [ROLES.EMPLOYEE]: {
-      name: 'Arbeitnehmer',
+      name: t('roles.employee'),
       description: 'Kann eigene Anträge einsehen und kommentieren',
       color: 'green',
       icon: 'i-lucide-user'
     },
     [ROLES.WORKS_COUNCIL_MEMBER]: {
-      name: 'Betriebsrat',
+      name: t('roles.worksCouncilMember'),
       description: 'Kann Anträge prüfen und Vereinbarungen unterzeichnen',
       color: 'purple',
       icon: 'i-lucide-users'
     },
     [ROLES.ADMIN]: {
-      name: 'Administrator',
+      name: t('roles.admin'),
       description: 'Vollzugriff auf Organisationsverwaltung',
       color: 'red',
       icon: 'i-lucide-settings'