feat(frontend): Add roles

legalconsenthub/components/InviteMemberModal.vue

@@ -1,26 +1,44 @@
 <template>
-  <UModal v-model:open="open" title="Invite Member" description="Invite a member to your organization">
-    <UButton icon="i-lucide-mail-plus" variant="outline" size="sm" @click="open = true"> Invite Member </UButton>
+  <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"
+    >
+      Mitglied einladen
+    </UButton>
 
     <template #body>
       <UForm :state="form" class="space-y-4" @submit="handleSubmit">
-        <UFormField label="Email" name="email">
-          <UInput v-model="form.email" type="email" placeholder="Email" class="w-full" />
+        <UFormField label="E-Mail" name="email">
+          <UInput v-model="form.email" type="email" placeholder="E-Mail" class="w-full" />
         </UFormField>
 
-        <UFormField label="Role" name="role">
+        <UFormField label="Rolle" name="role">
           <USelect
             v-model="form.role"
-            :items="roleOptions"
-            placeholder="Select a role"
+            :items="availableRoles"
+            placeholder="Rolle auswählen"
             value-key="value"
             class="w-full"
-          />
+          >
+            <template #option="{ option }">
+              <div class="flex items-center gap-2">
+                <UIcon :name="option.icon" :class="`text-${option.color}-500`" />
+                <div>
+                  <div class="font-medium">{{ option.label }}</div>
+                  <div class="text-xs text-gray-500">{{ option.description }}</div>
+                </div>
+              </div>
+            </template>
+          </USelect>
         </UFormField>
 
         <div class="flex justify-end">
           <UButton type="submit" :loading="loading">
-            {{ loading ? 'Inviting...' : 'Invite' }}
+            {{ loading ? 'Einladen...' : 'Einladen' }}
           </UButton>
         </div>
       </UForm>
@@ -29,10 +47,9 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  organization: ActiveOrganization
-}>()
+import { ROLES, type LegalRole } from '~/server/utils/permissions'
 
+const { canInviteMembers } = usePermissions()
 const { inviteMember } = useBetterAuth()
 
 const open = ref(false)
@@ -40,26 +57,68 @@ const loading = ref(false)
 
 const form = ref({
   email: '',
-  role: 'member'
+  role: ROLES.EMPLOYEE as LegalRole
 })
 
-const roleOptions = [
-  { label: 'Admin', value: 'admin' },
-  { label: 'Member', value: 'member' }
-]
+const availableRoles = computed(() => {
+  return Object.values(ROLES).map(role => {
+    const roleInfo = getRoleInfo(role)
+    return {
+      label: roleInfo.name,
+      value: role,
+      description: roleInfo.description,
+      color: roleInfo.color,
+      icon: roleInfo.icon
+    }
+  })
+})
 
-watch(open, (val) => {
+function getRoleInfo(role: LegalRole) {
+  const roleInfo = {
+    [ROLES.EMPLOYER]: {
+      name: 'Arbeitgeber',
+      description: 'Kann Anträge genehmigen und Vereinbarungen unterzeichnen',
+      color: 'blue',
+      icon: 'i-lucide-briefcase'
+    },
+    [ROLES.EMPLOYEE]: {
+      name: 'Arbeitnehmer',
+      description: 'Kann eigene Anträge einsehen und kommentieren',
+      color: 'green',
+      icon: 'i-lucide-user'
+    },
+    [ROLES.WORKS_COUNCIL_MEMBER]: {
+      name: 'Betriebsrat',
+      description: 'Kann Anträge prüfen und Vereinbarungen unterzeichnen',
+      color: 'purple',
+      icon: 'i-lucide-users'
+    },
+    [ROLES.ADMIN]: {
+      name: 'Administrator',
+      description: 'Vollzugriff auf Organisationsverwaltung',
+      color: 'red',
+      icon: 'i-lucide-settings'
+    }
+  }
+
+  return roleInfo[role] || { name: role, description: '', color: 'gray', icon: 'i-lucide-circle' }
+}
+
+watch(open, (val: boolean) => {
   if (val) {
-    form.value = { email: '', role: 'member' }
+    form.value = {
+      email: '',
+      role: ROLES.EMPLOYEE
+    }
   }
 })
 
 async function handleSubmit() {
   loading.value = true
   try {
-    await inviteMember(form.value.email, form.value.role as 'member' | 'admin')
+    await inviteMember(form.value.email, form.value.role)
     open.value = false
-    useToast().add({ title: 'Invitation sent', color: 'success' })
+    useToast().add({ title: 'Einladung gesendet', color: 'success' })
   } finally {
     loading.value = false
   }