From 5f63514fe0824951d93a43df2a05717afcebdaa8 Mon Sep 17 00:00:00 2001
From: FluxKit <flux@kronos-soulution.de>
Date: Wed, 25 Feb 2026 10:03:46 +0000
Subject: [PATCH] feat: add team management UI

- New UsersView for managing organization members
- Role badges with colors (CEO, CRM Admin, Manager, User)
- Create/invite users, edit, deactivate, delete, reset password
- Navigation only visible for owner/admin roles
---
 .gitignore                |   1 +
 src/layouts/AppLayout.vue |  16 +-
 src/router/index.js       |   6 +
 src/views/UsersView.vue   | 434 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 455 insertions(+), 2 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 src/views/UsersView.vue

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c2658d7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 7c8de93..4c1d36c 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 
@@ -9,7 +9,7 @@ const auth = useAuthStore()
 const sidebarOpen = ref(false)
 const isMobile = ref(false)
 
-const navItems = [
+const baseNavItems = [
   { name: 'Dashboard', path: '/', icon: 'chart-pie' },
   { name: 'Kontakte', path: '/contacts', icon: 'users' },
   { name: 'Firmen', path: '/companies', icon: 'building-office' },
@@ -17,6 +17,15 @@ const navItems = [
   { name: 'Aktivitäten', path: '/activities', icon: 'clipboard-list' },
 ]
 
+// Team nav item only for admin/owner
+const navItems = computed(() => {
+  const items = [...baseNavItems]
+  if (auth.user?.role === 'owner' || auth.user?.role === 'admin') {
+    items.push({ name: 'Team', path: '/team', icon: 'user-group' })
+  }
+  return items
+})
+
 function checkMobile() {
   isMobile.value = window.innerWidth < 768
   if (!isMobile.value) {
@@ -145,6 +154,9 @@ function isActive(path) {
           <svg v-if="item.icon === 'clipboard-list'" class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
           </svg>
+          <svg v-if="item.icon === 'user-group'" class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+          </svg>
           <span>{{ item.name }}</span>
         </RouterLink>
       </nav>
diff --git a/src/router/index.js b/src/router/index.js
index 9e87c25..9eec8f1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -57,6 +57,12 @@ const routes = [
         path: 'settings',
         name: 'Settings',
         component: () => import('@/views/SettingsView.vue')
+      },
+      {
+        path: 'team',
+        name: 'Team',
+        component: () => import('@/views/UsersView.vue'),
+        meta: { roles: ['owner', 'admin'] }
       }
     ]
   },
diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue
new file mode 100644
index 0000000..224f992
--- /dev/null
+++ b/src/views/UsersView.vue
@@ -0,0 +1,434 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import api from '@/lib/api'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+const users = ref([])
+const loading = ref(true)
+const showModal = ref(false)
+const editingUser = ref(null)
+const saving = ref(false)
+const error = ref(null)
+const successMessage = ref(null)
+
+// Form data
+const form = ref({
+  email: '',
+  password: '',
+  firstName: '',
+  lastName: '',
+  role: 'user'
+})
+
+// Current user can create these roles
+const availableRoles = computed(() => {
+  if (auth.user?.role === 'owner') {
+    return [
+      { value: 'admin', label: 'CRM Admin' },
+      { value: 'manager', label: 'Manager' },
+      { value: 'user', label: 'Nutzer' }
+    ]
+  }
+  // Admin can only create manager/user
+  return [
+    { value: 'manager', label: 'Manager' },
+    { value: 'user', label: 'Nutzer' }
+  ]
+})
+
+const roleLabels = {
+  owner: 'CEO',
+  admin: 'CRM Admin',
+  manager: 'Manager',
+  user: 'Nutzer'
+}
+
+const roleColors = {
+  owner: 'bg-yellow-500/20 text-yellow-400',
+  admin: 'bg-purple-500/20 text-purple-400',
+  manager: 'bg-blue-500/20 text-blue-400',
+  user: 'bg-gray-500/20 text-gray-400'
+}
+
+async function loadUsers() {
+  loading.value = true
+  try {
+    const response = await api.get('/api/v1/users')
+    users.value = response.data.data.users
+  } catch (e) {
+    error.value = e.response?.data?.error?.message || 'Fehler beim Laden der Benutzer'
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreateModal() {
+  editingUser.value = null
+  form.value = {
+    email: '',
+    password: '',
+    firstName: '',
+    lastName: '',
+    role: 'user'
+  }
+  error.value = null
+  showModal.value = true
+}
+
+function openEditModal(user) {
+  editingUser.value = user
+  form.value = {
+    email: user.email,
+    password: '',
+    firstName: user.firstName,
+    lastName: user.lastName,
+    role: user.role
+  }
+  error.value = null
+  showModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+  editingUser.value = null
+  error.value = null
+}
+
+async function saveUser() {
+  saving.value = true
+  error.value = null
+  
+  try {
+    if (editingUser.value) {
+      // Update existing user
+      const updateData = {
+        firstName: form.value.firstName,
+        lastName: form.value.lastName,
+        role: form.value.role
+      }
+      await api.put(`/api/v1/users/${editingUser.value.id}`, updateData)
+      successMessage.value = 'Benutzer erfolgreich aktualisiert'
+    } else {
+      // Create new user
+      await api.post('/api/v1/users', form.value)
+      successMessage.value = 'Benutzer erfolgreich erstellt'
+    }
+    
+    closeModal()
+    await loadUsers()
+    
+    setTimeout(() => { successMessage.value = null }, 3000)
+  } catch (e) {
+    error.value = e.response?.data?.error?.message || 'Fehler beim Speichern'
+  } finally {
+    saving.value = false
+  }
+}
+
+async function toggleUserActive(user) {
+  try {
+    await api.put(`/api/v1/users/${user.id}`, { isActive: !user.isActive })
+    await loadUsers()
+    successMessage.value = user.isActive ? 'Benutzer deaktiviert' : 'Benutzer aktiviert'
+    setTimeout(() => { successMessage.value = null }, 3000)
+  } catch (e) {
+    error.value = e.response?.data?.error?.message || 'Fehler beim Aktualisieren'
+  }
+}
+
+async function deleteUser(user) {
+  if (!confirm(`Möchten Sie "${user.firstName} ${user.lastName}" wirklich löschen?`)) {
+    return
+  }
+  
+  try {
+    await api.delete(`/api/v1/users/${user.id}`)
+    await loadUsers()
+    successMessage.value = 'Benutzer erfolgreich gelöscht'
+    setTimeout(() => { successMessage.value = null }, 3000)
+  } catch (e) {
+    error.value = e.response?.data?.error?.message || 'Fehler beim Löschen'
+  }
+}
+
+async function resetPassword(user) {
+  const password = prompt('Neues Passwort eingeben (mind. 8 Zeichen):')
+  if (!password || password.length < 8) {
+    if (password) {
+      error.value = 'Passwort muss mindestens 8 Zeichen haben'
+    }
+    return
+  }
+  
+  try {
+    await api.post(`/api/v1/users/${user.id}/reset-password`, { password })
+    successMessage.value = 'Passwort erfolgreich zurückgesetzt'
+    setTimeout(() => { successMessage.value = null }, 3000)
+  } catch (e) {
+    error.value = e.response?.data?.error?.message || 'Fehler beim Zurücksetzen'
+  }
+}
+
+// Check if current user can manage this user
+function canManage(user) {
+  if (user.role === 'owner') return false
+  if (auth.user?.role === 'owner') return true
+  if (auth.user?.role === 'admin' && ['manager', 'user'].includes(user.role)) return true
+  return false
+}
+
+onMounted(() => {
+  loadUsers()
+})
+</script>
+
+<template>
+  <div class="p-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+      <div>
+        <h1 class="text-2xl font-bold text-white">Team-Verwaltung</h1>
+        <p class="text-pulse-muted mt-1">Verwalte die Benutzer deiner Organisation</p>
+      </div>
+      <button 
+        @click="openCreateModal"
+        class="btn btn-primary flex items-center gap-2"
+      >
+        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+        </svg>
+        Benutzer einladen
+      </button>
+    </div>
+
+    <!-- Success Message -->
+    <div v-if="successMessage" class="mb-4 p-4 bg-green-500/20 border border-green-500/50 rounded-lg text-green-400">
+      {{ successMessage }}
+    </div>
+
+    <!-- Error Message -->
+    <div v-if="error && !showModal" class="mb-4 p-4 bg-red-500/20 border border-red-500/50 rounded-lg text-red-400">
+      {{ error }}
+    </div>
+
+    <!-- Role Legend -->
+    <div class="mb-6 flex flex-wrap gap-4 text-sm">
+      <div class="flex items-center gap-2">
+        <span :class="['px-2 py-1 rounded text-xs font-medium', roleColors.owner]">CEO</span>
+        <span class="text-pulse-muted">Sieht alles, volle Kontrolle</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span :class="['px-2 py-1 rounded text-xs font-medium', roleColors.admin]">CRM Admin</span>
+        <span class="text-pulse-muted">Sieht alles, kann Benutzer verwalten</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span :class="['px-2 py-1 rounded text-xs font-medium', roleColors.manager]">Manager</span>
+        <span class="text-pulse-muted">Team-Zugriff</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span :class="['px-2 py-1 rounded text-xs font-medium', roleColors.user]">Nutzer</span>
+        <span class="text-pulse-muted">Eigene Daten</span>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
+    </div>
+
+    <!-- Users Table -->
+    <div v-else class="bg-pulse-card rounded-xl border border-pulse-border overflow-hidden">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-pulse-border">
+            <th class="text-left px-6 py-4 text-pulse-muted font-medium text-sm">Benutzer</th>
+            <th class="text-left px-6 py-4 text-pulse-muted font-medium text-sm">Rolle</th>
+            <th class="text-left px-6 py-4 text-pulse-muted font-medium text-sm">Status</th>
+            <th class="text-left px-6 py-4 text-pulse-muted font-medium text-sm">Letzter Login</th>
+            <th class="text-right px-6 py-4 text-pulse-muted font-medium text-sm">Aktionen</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr 
+            v-for="user in users" 
+            :key="user.id"
+            class="border-b border-pulse-border last:border-0 hover:bg-pulse-hover transition-colors"
+          >
+            <td class="px-6 py-4">
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-full bg-primary-600 flex items-center justify-center text-white font-medium">
+                  {{ user.firstName?.[0] || 'U' }}
+                </div>
+                <div>
+                  <p class="font-medium text-white">{{ user.firstName }} {{ user.lastName }}</p>
+                  <p class="text-sm text-pulse-muted">{{ user.email }}</p>
+                </div>
+              </div>
+            </td>
+            <td class="px-6 py-4">
+              <span :class="['px-3 py-1 rounded-full text-xs font-medium', roleColors[user.role]]">
+                {{ roleLabels[user.role] }}
+              </span>
+            </td>
+            <td class="px-6 py-4">
+              <span v-if="user.isActive" class="flex items-center gap-2 text-green-400">
+                <div class="w-2 h-2 rounded-full bg-green-400"></div>
+                Aktiv
+              </span>
+              <span v-else class="flex items-center gap-2 text-gray-400">
+                <div class="w-2 h-2 rounded-full bg-gray-400"></div>
+                Inaktiv
+              </span>
+            </td>
+            <td class="px-6 py-4 text-pulse-muted text-sm">
+              {{ user.lastLoginAt ? new Date(user.lastLoginAt).toLocaleDateString('de-DE') : 'Nie' }}
+            </td>
+            <td class="px-6 py-4">
+              <div v-if="canManage(user)" class="flex items-center justify-end gap-2">
+                <button 
+                  @click="openEditModal(user)"
+                  class="p-2 text-pulse-muted hover:text-white transition-colors"
+                  title="Bearbeiten"
+                >
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                  </svg>
+                </button>
+                <button 
+                  @click="toggleUserActive(user)"
+                  class="p-2 text-pulse-muted hover:text-yellow-400 transition-colors"
+                  :title="user.isActive ? 'Deaktivieren' : 'Aktivieren'"
+                >
+                  <svg v-if="user.isActive" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                  </svg>
+                  <svg v-else class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </button>
+                <button 
+                  @click="resetPassword(user)"
+                  class="p-2 text-pulse-muted hover:text-blue-400 transition-colors"
+                  title="Passwort zurücksetzen"
+                >
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+                  </svg>
+                </button>
+                <button 
+                  @click="deleteUser(user)"
+                  class="p-2 text-pulse-muted hover:text-red-400 transition-colors"
+                  title="Löschen"
+                >
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                </button>
+              </div>
+              <div v-else class="text-right text-pulse-muted text-sm">
+                {{ user.id === auth.user?.id ? 'Du' : '—' }}
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Create/Edit Modal -->
+    <div v-if="showModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div class="bg-pulse-card rounded-xl border border-pulse-border w-full max-w-md">
+        <div class="flex items-center justify-between px-6 py-4 border-b border-pulse-border">
+          <h2 class="text-lg font-semibold text-white">
+            {{ editingUser ? 'Benutzer bearbeiten' : 'Neuen Benutzer einladen' }}
+          </h2>
+          <button @click="closeModal" class="text-pulse-muted hover:text-white">
+            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        
+        <form @submit.prevent="saveUser" class="p-6 space-y-4">
+          <!-- Error in modal -->
+          <div v-if="error" class="p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-400 text-sm">
+            {{ error }}
+          </div>
+
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <label class="block text-sm text-pulse-muted mb-1">Vorname</label>
+              <input 
+                v-model="form.firstName"
+                type="text"
+                required
+                class="w-full px-3 py-2 bg-pulse-bg border border-pulse-border rounded-lg text-white focus:border-primary-500 focus:outline-none"
+              />
+            </div>
+            <div>
+              <label class="block text-sm text-pulse-muted mb-1">Nachname</label>
+              <input 
+                v-model="form.lastName"
+                type="text"
+                required
+                class="w-full px-3 py-2 bg-pulse-bg border border-pulse-border rounded-lg text-white focus:border-primary-500 focus:outline-none"
+              />
+            </div>
+          </div>
+
+          <div v-if="!editingUser">
+            <label class="block text-sm text-pulse-muted mb-1">E-Mail</label>
+            <input 
+              v-model="form.email"
+              type="email"
+              required
+              class="w-full px-3 py-2 bg-pulse-bg border border-pulse-border rounded-lg text-white focus:border-primary-500 focus:outline-none"
+            />
+          </div>
+
+          <div v-if="!editingUser">
+            <label class="block text-sm text-pulse-muted mb-1">Passwort</label>
+            <input 
+              v-model="form.password"
+              type="password"
+              required
+              minlength="8"
+              placeholder="Mind. 8 Zeichen"
+              class="w-full px-3 py-2 bg-pulse-bg border border-pulse-border rounded-lg text-white focus:border-primary-500 focus:outline-none"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm text-pulse-muted mb-1">Rolle</label>
+            <select 
+              v-model="form.role"
+              :disabled="editingUser?.role === 'owner'"
+              class="w-full px-3 py-2 bg-pulse-bg border border-pulse-border rounded-lg text-white focus:border-primary-500 focus:outline-none disabled:opacity-50"
+            >
+              <option v-for="role in availableRoles" :key="role.value" :value="role.value">
+                {{ role.label }}
+              </option>
+            </select>
+          </div>
+
+          <div class="flex justify-end gap-3 pt-4">
+            <button 
+              type="button"
+              @click="closeModal"
+              class="px-4 py-2 text-pulse-muted hover:text-white transition-colors"
+            >
+              Abbrechen
+            </button>
+            <button 
+              type="submit"
+              :disabled="saving"
+              class="btn btn-primary"
+            >
+              {{ saving ? 'Speichern...' : (editingUser ? 'Speichern' : 'Einladen') }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>