🏢 Multi-Tenant SaaS: Org-Registrierung + Admin Panel UI

src/router/index.ts

@@ -10,6 +10,18 @@ const router = createRouter({
       component: () => import('@/views/LoginView.vue'),
       meta: { guest: true }
     },
+    {
+      path: '/register',
+      name: 'register-org',
+      component: () => import('@/views/RegisterOrgView.vue'),
+      meta: { guest: true }
+    },
+    {
+      path: '/admin',
+      name: 'admin',
+      component: () => import('@/views/AdminDashboardView.vue'),
+      meta: { requiresAuth: true }
+    },
     {
       path: '/',
       component: () => import('@/components/layout/AppLayout.vue'),

src/views/AdminDashboardView.vue

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { api } from '@/api'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const loading = ref(true)
+const error = ref('')
+const stats = ref({
+  org_count: 0,
+  user_count: 0,
+  order_count: 0,
+  timesheet_count: 0
+})
+const organizations = ref<any[]>([])
+const selectedOrg = ref<any>(null)
+const orgDetails = ref<any>(null)
+const showOrgModal = ref(false)
+
+// Broadcast
+const broadcastMessage = ref('')
+const broadcastType = ref('info')
+const broadcasting = ref(false)
+
+onMounted(async () => {
+  await loadDashboard()
+})
+
+async function loadDashboard() {
+  loading.value = true
+  error.value = ''
+  
+  try {
+    const [dashRes, orgsRes] = await Promise.all([
+      api.get<any>('/admin/dashboard'),
+      api.get<any>('/admin/organizations')
+    ])
+    
+    stats.value = dashRes.data.stats
+    organizations.value = orgsRes.data.organizations
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Laden fehlgeschlagen'
+    if (error.value.includes('Super-Admin')) {
+      router.push('/')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function viewOrg(org: any) {
+  selectedOrg.value = org
+  showOrgModal.value = true
+  
+  try {
+    const res = await api.get<any>(`/admin/organizations/${org.id}`)
+    orgDetails.value = res.data
+  } catch (e) {
+    console.error('Load org details failed:', e)
+  }
+}
+
+async function impersonate(userId: string) {
+  if (!confirm('Als dieser User einloggen?')) return
+  
+  try {
+    const res = await api.post<any>(`/admin/impersonate/${userId}`)
+    
+    // Store token and redirect
+    localStorage.setItem('accessToken', res.data.token)
+    localStorage.setItem('impersonating', 'true')
+    window.location.href = '/'
+  } catch (e) {
+    alert('Impersonation fehlgeschlagen: ' + (e instanceof Error ? e.message : 'Unbekannter Fehler'))
+  }
+}
+
+async function sendBroadcast() {
+  if (!broadcastMessage.value.trim()) return
+  if (!confirm('Nachricht an alle Organisationen senden?')) return
+  
+  broadcasting.value = true
+  
+  try {
+    await api.post('/admin/broadcast', {
+      message: broadcastMessage.value,
+      type: broadcastType.value
+    })
+    alert('Broadcast gesendet!')
+    broadcastMessage.value = ''
+  } catch (e) {
+    alert('Fehler: ' + (e instanceof Error ? e.message : 'Unbekannt'))
+  } finally {
+    broadcasting.value = false
+  }
+}
+
+function formatDate(date: string) {
+  return new Date(date).toLocaleDateString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric'
+  })
+}
+
+function getPlanBadge(plan: string) {
+  const plans: Record<string, string> = {
+    free: 'badge bg-gray-100 text-gray-800',
+    starter: 'badge bg-blue-100 text-blue-800',
+    business: 'badge bg-purple-100 text-purple-800',
+    enterprise: 'badge bg-yellow-100 text-yellow-800'
+  }
+  return plans[plan] || plans.free
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
+    <!-- Header -->
+    <header class="bg-white dark:bg-gray-800 shadow">
+      <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <span class="text-2xl">🛡️</span>
+          <h1 class="text-xl font-bold text-gray-900 dark:text-white">
+            SeCu Admin Panel
+          </h1>
+        </div>
+        <router-link to="/" class="btn btn-secondary text-sm">
+          ← Zurück zur App
+        </router-link>
+      </div>
+    </header>
+
+    <main class="max-w-7xl mx-auto px-4 py-8">
+      <!-- Loading -->
+      <div v-if="loading" class="text-center py-12">
+        <p class="text-gray-500">Lädt...</p>
+      </div>
+
+      <!-- Error -->
+      <div v-else-if="error" class="card bg-red-50 text-red-700 text-center">
+        {{ error }}
+      </div>
+
+      <!-- Content -->
+      <div v-else class="space-y-6">
+        <!-- Stats -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div class="card">
+            <div class="text-3xl font-bold text-primary-600">{{ stats.org_count }}</div>
+            <div class="text-sm text-gray-500">Organisationen</div>
+          </div>
+          <div class="card">
+            <div class="text-3xl font-bold text-green-600">{{ stats.user_count }}</div>
+            <div class="text-sm text-gray-500">Benutzer</div>
+          </div>
+          <div class="card">
+            <div class="text-3xl font-bold text-blue-600">{{ stats.order_count }}</div>
+            <div class="text-sm text-gray-500">Aufträge</div>
+          </div>
+          <div class="card">
+            <div class="text-3xl font-bold text-purple-600">{{ stats.timesheet_count }}</div>
+            <div class="text-sm text-gray-500">Stundenzettel</div>
+          </div>
+        </div>
+
+        <!-- Broadcast -->
+        <div class="card">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            📢 Broadcast an alle Kunden
+          </h2>
+          <div class="flex gap-4">
+            <select v-model="broadcastType" class="input w-32">
+              <option value="info">Info</option>
+              <option value="warning">Warnung</option>
+              <option value="success">Erfolg</option>
+            </select>
+            <input 
+              v-model="broadcastMessage"
+              type="text"
+              class="input flex-1"
+              placeholder="Nachricht eingeben..."
+            />
+            <button 
+              @click="sendBroadcast"
+              :disabled="broadcasting || !broadcastMessage.trim()"
+              class="btn btn-primary"
+            >
+              {{ broadcasting ? 'Sendet...' : 'Senden' }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Organizations Table -->
+        <div class="card">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            🏢 Organisationen
+          </h2>
+          
+          <div class="overflow-x-auto">
+            <table class="w-full">
+              <thead class="text-left text-sm text-gray-500 border-b dark:border-gray-700">
+                <tr>
+                  <th class="pb-3 font-medium">Organisation</th>
+                  <th class="pb-3 font-medium">Slug</th>
+                  <th class="pb-3 font-medium">Plan</th>
+                  <th class="pb-3 font-medium">Users</th>
+                  <th class="pb-3 font-medium">Aufträge</th>
+                  <th class="pb-3 font-medium">Erstellt</th>
+                  <th class="pb-3 font-medium"></th>
+                </tr>
+              </thead>
+              <tbody class="divide-y dark:divide-gray-700">
+                <tr v-for="org in organizations" :key="org.id" class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                  <td class="py-3 font-medium text-gray-900 dark:text-white">
+                    {{ org.name }}
+                  </td>
+                  <td class="py-3 text-gray-500">{{ org.slug }}</td>
+                  <td class="py-3">
+                    <span :class="getPlanBadge(org.settings?.plan || 'free')">
+                      {{ org.settings?.plan || 'free' }}
+                    </span>
+                  </td>
+                  <td class="py-3 text-gray-500">{{ org.user_count }}</td>
+                  <td class="py-3 text-gray-500">{{ org.order_count }}</td>
+                  <td class="py-3 text-gray-500">{{ formatDate(org.created_at) }}</td>
+                  <td class="py-3">
+                    <button @click="viewOrg(org)" class="text-primary-600 hover:text-primary-800 text-sm">
+                      Details →
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <!-- Org Details Modal -->
+    <div v-if="showOrgModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-2xl w-full max-h-[80vh] overflow-y-auto">
+        <div class="p-6">
+          <div class="flex items-center justify-between mb-6">
+            <h2 class="text-xl font-bold text-gray-900 dark:text-white">
+              {{ selectedOrg?.name }}
+            </h2>
+            <button @click="showOrgModal = false" class="text-gray-400 hover:text-gray-600">
+              ✕
+            </button>
+          </div>
+          
+          <div v-if="orgDetails" class="space-y-6">
+            <!-- Stats -->
+            <div class="grid grid-cols-3 gap-4">
+              <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 text-center">
+                <div class="text-2xl font-bold">{{ orgDetails.users?.length || 0 }}</div>
+                <div class="text-sm text-gray-500">Benutzer</div>
+              </div>
+              <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 text-center">
+                <div class="text-2xl font-bold">{{ orgDetails.stats?.order_count || 0 }}</div>
+                <div class="text-sm text-gray-500">Aufträge</div>
+              </div>
+              <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 text-center">
+                <div class="text-2xl font-bold">{{ orgDetails.stats?.timesheet_count || 0 }}</div>
+                <div class="text-sm text-gray-500">Stundenzettel</div>
+              </div>
+            </div>
+            
+            <!-- Users -->
+            <div>
+              <h3 class="font-semibold text-gray-900 dark:text-white mb-3">Benutzer</h3>
+              <div class="space-y-2">
+                <div 
+                  v-for="user in orgDetails.users" 
+                  :key="user.id"
+                  class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"
+                >
+                  <div>
+                    <div class="font-medium text-gray-900 dark:text-white">
+                      {{ user.first_name }} {{ user.last_name }}
+                      <span v-if="!user.active" class="text-red-500 text-sm">(inaktiv)</span>
+                    </div>
+                    <div class="text-sm text-gray-500">{{ user.email }} • {{ user.role }}</div>
+                  </div>
+                  <button 
+                    @click="impersonate(user.id)"
+                    class="text-sm text-primary-600 hover:text-primary-800"
+                  >
+                    Als User einloggen
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="text-center py-8 text-gray-500">
+            Lädt...
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/views/RegisterOrgView.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { api } from '@/api'
+
+const router = useRouter()
+
+// Form state
+const step = ref(1)
+const loading = ref(false)
+const error = ref('')
+const slugChecking = ref(false)
+const slugAvailable = ref<boolean | null>(null)
+
+// Org data
+const orgName = ref('')
+const orgSlug = ref('')
+
+// Admin data
+const adminEmail = ref('')
+const adminPassword = ref('')
+const adminPasswordConfirm = ref('')
+const adminFirstName = ref('')
+const adminLastName = ref('')
+const adminPhone = ref('')
+
+// Auto-generate slug from name
+watch(orgName, (name) => {
+  if (name && !orgSlug.value) {
+    orgSlug.value = name
+      .toLowerCase()
+      .replace(/[äöüß]/g, c => ({ ä: 'ae', ö: 'oe', ü: 'ue', ß: 'ss' }[c] || c))
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '')
+      .slice(0, 30)
+  }
+})
+
+// Check slug availability
+let slugTimeout: number
+watch(orgSlug, async (slug) => {
+  clearTimeout(slugTimeout)
+  slugAvailable.value = null
+  
+  if (slug.length < 3) return
+  
+  slugChecking.value = true
+  slugTimeout = setTimeout(async () => {
+    try {
+      const res = await fetch(`${import.meta.env.VITE_API_URL || '/api'}/organizations/check/${slug}`)
+      const data = await res.json()
+      slugAvailable.value = data.available
+    } catch {
+      slugAvailable.value = null
+    }
+    slugChecking.value = false
+  }, 500)
+})
+
+const canProceedStep1 = computed(() => 
+  orgName.value.length >= 2 && 
+  orgSlug.value.length >= 3 && 
+  slugAvailable.value === true
+)
+
+const canProceedStep2 = computed(() =>
+  adminEmail.value.includes('@') &&
+  adminPassword.value.length >= 8 &&
+  adminPassword.value === adminPasswordConfirm.value &&
+  adminFirstName.value.length >= 2 &&
+  adminLastName.value.length >= 2
+)
+
+async function submit() {
+  if (!canProceedStep2.value) return
+  
+  error.value = ''
+  loading.value = true
+  
+  try {
+    await api.post('/organizations/register', {
+      name: orgName.value,
+      slug: orgSlug.value,
+      admin_email: adminEmail.value,
+      admin_password: adminPassword.value,
+      admin_first_name: adminFirstName.value,
+      admin_last_name: adminLastName.value,
+      admin_phone: adminPhone.value || undefined
+    })
+    
+    // Redirect to login with success message
+    router.push({ 
+      name: 'login', 
+      query: { 
+        registered: 'true',
+        org: orgSlug.value,
+        email: adminEmail.value
+      }
+    })
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Registrierung fehlgeschlagen'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4">
+    <div class="max-w-lg w-full">
+      <!-- Logo -->
+      <div class="text-center mb-8">
+        <h1 class="text-4xl font-bold text-primary-600">🔐 SeCu</h1>
+        <p class="mt-2 text-gray-600 dark:text-gray-400">Organisation registrieren</p>
+      </div>
+
+      <!-- Progress -->
+      <div class="flex items-center justify-center mb-8">
+        <div class="flex items-center">
+          <div :class="['w-10 h-10 rounded-full flex items-center justify-center text-white font-bold',
+                        step >= 1 ? 'bg-primary-600' : 'bg-gray-300']">1</div>
+          <div :class="['w-24 h-1 mx-2', step >= 2 ? 'bg-primary-600' : 'bg-gray-300']"></div>
+          <div :class="['w-10 h-10 rounded-full flex items-center justify-center font-bold',
+                        step >= 2 ? 'bg-primary-600 text-white' : 'bg-gray-300 text-gray-600']">2</div>
+        </div>
+      </div>
+
+      <div class="card">
+        <!-- Step 1: Organization -->
+        <div v-if="step === 1">
+          <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">
+            Ihre Organisation
+          </h2>
+          
+          <div class="space-y-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Firmenname *
+              </label>
+              <input
+                v-model="orgName"
+                type="text"
+                class="input"
+                placeholder="z.B. Muster Sicherheit GmbH"
+              />
+            </div>
+            
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                URL-Kürzel *
+              </label>
+              <div class="flex items-center gap-2">
+                <input
+                  v-model="orgSlug"
+                  type="text"
+                  class="input"
+                  placeholder="muster-sicherheit"
+                />
+                <span v-if="slugChecking" class="text-gray-400">⏳</span>
+                <span v-else-if="slugAvailable === true" class="text-green-500">✓</span>
+                <span v-else-if="slugAvailable === false" class="text-red-500">✗</span>
+              </div>
+              <p class="mt-1 text-xs text-gray-500">
+                Wird für den Login verwendet. Nur Kleinbuchstaben und Bindestriche.
+              </p>
+              <p v-if="slugAvailable === false" class="mt-1 text-xs text-red-500">
+                Dieses Kürzel ist bereits vergeben.
+              </p>
+            </div>
+          </div>
+          
+          <div class="mt-6 flex justify-between">
+            <router-link to="/login" class="btn btn-secondary">
+              ← Zurück zum Login
+            </router-link>
+            <button 
+              @click="step = 2" 
+              :disabled="!canProceedStep1"
+              class="btn btn-primary"
+            >
+              Weiter →
+            </button>
+          </div>
+        </div>
+
+        <!-- Step 2: Admin Account -->
+        <div v-if="step === 2">
+          <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">
+            Administrator-Konto
+          </h2>
+          
+          <form @submit.prevent="submit" class="space-y-4">
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Vorname *
+                </label>
+                <input v-model="adminFirstName" type="text" class="input" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Nachname *
+                </label>
+                <input v-model="adminLastName" type="text" class="input" />
+              </div>
+            </div>
+            
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                E-Mail *
+              </label>
+              <input v-model="adminEmail" type="email" class="input" />
+            </div>
+            
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Telefon
+              </label>
+              <input v-model="adminPhone" type="tel" class="input" placeholder="Optional" />
+            </div>
+            
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Passwort *
+              </label>
+              <input v-model="adminPassword" type="password" class="input" placeholder="Mindestens 8 Zeichen" />
+            </div>
+            
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Passwort bestätigen *
+              </label>
+              <input v-model="adminPasswordConfirm" type="password" class="input" />
+              <p v-if="adminPassword && adminPasswordConfirm && adminPassword !== adminPasswordConfirm" 
+                 class="mt-1 text-xs text-red-500">
+                Passwörter stimmen nicht überein
+              </p>
+            </div>
+            
+            <div v-if="error" class="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm">
+              {{ error }}
+            </div>
+            
+            <div class="mt-6 flex justify-between">
+              <button type="button" @click="step = 1" class="btn btn-secondary">
+                ← Zurück
+              </button>
+              <button 
+                type="submit" 
+                :disabled="!canProceedStep2 || loading"
+                class="btn btn-primary"
+              >
+                {{ loading ? 'Wird erstellt...' : 'Organisation erstellen' }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+      
+      <!-- Info -->
+      <div class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
+        <p>Nach der Registrierung können Sie sofort loslegen.</p>
+        <p class="mt-1">Kostenlos starten • Keine Kreditkarte nötig</p>
+      </div>
+    </div>
+  </div>
+</template>