redone admin

added branches

frontend/pages/administration/tenants/[id].vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import type { AdminTenant, AdminUser } from "~/composables/useAdmin"
+
+const auth = useAuthStore()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const admin = useAdmin()
+
+const tenantId = Number(route.params.id)
+const loading = ref(true)
+const saving = ref(false)
+const creatingUser = ref(false)
+const createUserModalOpen = ref(false)
+const createdUserPassword = ref("")
+
+const tenantForm = ref<AdminTenant | null>(null)
+const assignedUsers = ref<AdminUser[]>([])
+const createUserForm = ref({
+  email: "",
+  password: "",
+  first_name: "",
+  last_name: "",
+  is_admin: false,
+  multiTenant: false,
+})
+
+const fetchTenant = async () => {
+  loading.value = true
+
+  try {
+    const overview = await admin.getOverview()
+    const tenant = overview.tenants.find((entry) => entry.id === tenantId)
+
+    if (!tenant) {
+      toast.add({ title: "Tenant nicht gefunden", color: "red" })
+      await router.push("/administration/tenants")
+      return
+    }
+
+    tenantForm.value = { ...tenant }
+    assignedUsers.value = overview.users.filter((user) => user.tenant_ids.includes(tenantId))
+  } catch (err: any) {
+    console.error("[administration/tenants/show]", err)
+    toast.add({
+      title: "Tenant konnte nicht geladen werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+const saveTenant = async () => {
+  if (!tenantForm.value || saving.value) return
+
+  saving.value = true
+
+  try {
+    await admin.updateTenant(tenantForm.value.id, {
+      name: tenantForm.value.name,
+      short: tenantForm.value.short,
+    })
+
+    await fetchTenant()
+    await auth.fetchMe()
+
+    toast.add({ title: "Tenant gespeichert", color: "green" })
+  } catch (err: any) {
+    console.error("[administration/tenants/save]", err)
+    toast.add({
+      title: "Tenant konnte nicht gespeichert werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+const createTenantUser = async () => {
+  if (!tenantForm.value || creatingUser.value) return
+
+  creatingUser.value = true
+
+  try {
+    const response = await admin.createUser(createUserForm.value)
+    const createdUserId = response?.user?.id
+
+    if (!createdUserId) {
+      throw new Error("Benutzer konnte nach dem Anlegen nicht zugeordnet werden.")
+    }
+
+    await admin.updateUserAccess(createdUserId, {
+      tenant_ids: [tenantForm.value.id],
+      role_assignments: [],
+      profile_defaults: {
+        first_name: createUserForm.value.first_name,
+        last_name: createUserForm.value.last_name,
+      },
+      profile_assignments: [
+        {
+          tenant_id: tenantForm.value.id,
+          profile_id: null,
+        },
+      ],
+    })
+
+    createdUserPassword.value = response.initialPassword || ""
+    createUserModalOpen.value = false
+    createUserForm.value = {
+      email: "",
+      password: "",
+      first_name: "",
+      last_name: "",
+      is_admin: false,
+      multiTenant: false,
+    }
+
+    await fetchTenant()
+
+    toast.add({
+      title: "Benutzer angelegt",
+      description: "Der Benutzer wurde direkt diesem Tenant zugeordnet und das Profil wurde erstellt.",
+      color: "green",
+    })
+  } catch (err: any) {
+    console.error("[administration/tenants/create-user]", err)
+    toast.add({
+      title: "Benutzer konnte nicht angelegt werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    creatingUser.value = false
+  }
+}
+
+onMounted(async () => {
+  if (!auth.user?.is_admin) {
+    await router.push("/")
+    return
+  }
+
+  await fetchTenant()
+})
+</script>
+
+<template>
+  <UDashboardNavbar title="Administration: Tenants">
+    <template #left>
+      <UButton icon="i-heroicons-chevron-left" variant="outline" @click="router.push('/administration/tenants')">
+        Tenants
+      </UButton>
+    </template>
+    <template #right>
+      <UButton icon="i-heroicons-user-plus" variant="soft" @click="createUserModalOpen = true">
+        Benutzer anlegen
+      </UButton>
+      <UButton color="primary" :loading="saving" @click="saveTenant">
+        Speichern
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardPanelContent>
+    <UCard v-if="!loading && tenantForm">
+      <div class="flex items-start justify-between gap-4 mb-6">
+        <div>
+          <h2 class="text-xl font-semibold">{{ tenantForm.name }}</h2>
+          <p class="text-sm text-gray-500">Tenant-ID {{ tenantForm.id }}</p>
+        </div>
+      </div>
+
+      <USeparator label="Tenant" />
+
+      <UForm :state="tenantForm" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+        <UFormField label="Name">
+          <UInput v-model="tenantForm.name" />
+        </UFormField>
+
+        <UFormField label="Kürzel">
+          <UInput v-model="tenantForm.short" />
+        </UFormField>
+      </UForm>
+    </UCard>
+
+    <UCard v-if="!loading && tenantForm" class="mt-3">
+      <USeparator label="Zugeordnete Benutzer" />
+
+      <UTable
+        :data="assignedUsers"
+        :columns="normalizeTableColumns([
+          { key: 'display_name', label: 'Benutzer' },
+          { key: 'email', label: 'E-Mail' }
+        ])"
+        :on-select="(row) => router.push(`/administration/users/${row.original?.id || row.id}`)"
+        class="mt-4"
+      />
+    </UCard>
+
+    <USkeleton v-if="loading" class="h-80" />
+  </UDashboardPanelContent>
+
+  <UModal v-model:open="createUserModalOpen">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="text-lg font-semibold">Benutzer in Tenant anlegen</div>
+        </template>
+
+        <UForm :state="createUserForm" class="space-y-4" @submit.prevent="createTenantUser">
+          <UFormField label="Tenant">
+            <UInput :model-value="tenantForm?.name || ''" readonly />
+          </UFormField>
+
+          <UFormField label="E-Mail">
+            <UInput v-model="createUserForm.email" type="email" />
+          </UFormField>
+
+          <UFormField label="Initialpasswort">
+            <UInput v-model="createUserForm.password" placeholder="Leer lassen für automatisches Passwort" />
+          </UFormField>
+
+          <UFormField label="Vorname für Profil">
+            <UInput v-model="createUserForm.first_name" />
+          </UFormField>
+
+          <UFormField label="Nachname für Profil">
+            <UInput v-model="createUserForm.last_name" />
+          </UFormField>
+
+          <UFormField label="Administrative Freigabe">
+            <div class="flex items-center gap-3 h-10">
+              <USwitch v-model="createUserForm.is_admin" />
+              <span class="text-sm text-gray-600">Benutzer darf die Administration öffnen</span>
+            </div>
+          </UFormField>
+
+          <UFormField label="Multi-Tenant">
+            <div class="flex items-center gap-3 h-10">
+              <USwitch v-model="createUserForm.multiTenant" />
+              <span class="text-sm text-gray-600">Weitere Tenant-Zuordnungen sind erlaubt</span>
+            </div>
+          </UFormField>
+
+          <UAlert
+            title="Automatische Zuordnung"
+            description="Der Benutzer wird nach dem Anlegen direkt diesem Tenant zugeordnet und bekommt dort automatisch ein Profil mit den angegebenen Stammdaten."
+            color="primary"
+            variant="soft"
+          />
+
+          <div class="flex justify-end gap-3 pt-2">
+            <UButton color="gray" variant="soft" @click="createUserModalOpen = false">
+              Abbrechen
+            </UButton>
+            <UButton type="submit" color="primary" :loading="creatingUser">
+              Benutzer anlegen
+            </UButton>
+          </div>
+        </UForm>
+      </UCard>
+    </template>
+  </UModal>
+
+  <div class="mx-5 mb-5">
+    <UAlert
+      v-if="createdUserPassword"
+      title="Initialpasswort für neuen Benutzer"
+      :description="createdUserPassword"
+      color="amber"
+      variant="soft"
+      close-button
+      @close="createdUserPassword = ''"
+    />
+  </div>
+</template>

frontend/pages/administration/tenants/index.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import type { AdminTenant } from "~/composables/useAdmin"
+
+const auth = useAuthStore()
+const toast = useToast()
+const router = useRouter()
+const admin = useAdmin()
+
+const loading = ref(true)
+const creatingTenant = ref(false)
+const createTenantModalOpen = ref(false)
+const tenants = ref<AdminTenant[]>([])
+const searchString = ref("")
+
+const createTenantForm = ref({
+  name: "",
+  short: "",
+})
+
+const templateColumns = [
+  { key: "name", label: "Tenant" },
+  { key: "short", label: "Kürzel" },
+  { key: "user_count", label: "Benutzer" },
+]
+
+const filteredRows = computed(() => {
+  const search = searchString.value.trim().toLowerCase()
+  if (!search) return tenants.value
+
+  return tenants.value.filter((tenant) =>
+    [tenant.name, tenant.short]
+      .filter(Boolean)
+      .some((value) => String(value).toLowerCase().includes(search))
+  )
+})
+
+const fetchTenants = async () => {
+  loading.value = true
+
+  try {
+    const overview = await admin.getOverview()
+    tenants.value = overview.tenants
+  } catch (err: any) {
+    console.error("[administration/tenants/index]", err)
+    toast.add({
+      title: "Tenants konnten nicht geladen werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+const createTenant = async () => {
+  if (creatingTenant.value) return
+
+  creatingTenant.value = true
+
+  try {
+    const response = await admin.createTenant(createTenantForm.value)
+
+    createTenantModalOpen.value = false
+    createTenantForm.value = {
+      name: "",
+      short: "",
+    }
+
+    await fetchTenants()
+
+    toast.add({
+      title: "Tenant angelegt",
+      description: "Standardordner und Datei-Tags wurden erstellt.",
+      color: "green",
+    })
+
+    if (response.tenant?.id) {
+      await router.push(`/administration/tenants/${response.tenant.id}`)
+    }
+  } catch (err: any) {
+    console.error("[administration/tenants/create]", err)
+    toast.add({
+      title: "Tenant konnte nicht angelegt werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    creatingTenant.value = false
+  }
+}
+
+onMounted(async () => {
+  if (!auth.user?.is_admin) {
+    await router.push("/")
+    return
+  }
+
+  await fetchTenants()
+})
+</script>
+
+<template>
+  <UDashboardNavbar title="Administration: Tenants" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+        v-model="searchString"
+        icon="i-heroicons-magnifying-glass"
+        placeholder="Tenants suchen"
+        class="hidden lg:block"
+      />
+      <UButton icon="i-heroicons-plus" @click="createTenantModalOpen = true">
+        Tenant
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UTable
+    :data="filteredRows"
+    :columns="normalizeTableColumns(templateColumns)"
+    :loading="loading"
+    :on-select="(row) => router.push(`/administration/tenants/${row.original?.id || row.id}`)"
+    :empty="{ icon: 'i-heroicons-building-office-2', label: 'Keine Tenants gefunden' }"
+  />
+
+  <UModal v-model:open="createTenantModalOpen">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="text-lg font-semibold">Tenant anlegen</div>
+        </template>
+
+        <UForm :state="createTenantForm" class="space-y-4" @submit.prevent="createTenant">
+          <UFormField label="Name">
+            <UInput v-model="createTenantForm.name" />
+          </UFormField>
+
+          <UFormField label="Kürzel">
+            <UInput v-model="createTenantForm.short" />
+          </UFormField>
+
+          <UAlert
+            title="Seed-Daten"
+            description="Beim Anlegen werden Standard-Datei-Tags sowie Systemordner mit Jahresunterordnern erstellt."
+            color="primary"
+            variant="soft"
+          />
+
+          <div class="flex justify-end gap-3 pt-2">
+            <UButton color="gray" variant="soft" @click="createTenantModalOpen = false">
+              Abbrechen
+            </UButton>
+            <UButton type="submit" color="primary" :loading="creatingTenant">
+              Tenant anlegen
+            </UButton>
+          </div>
+        </UForm>
+      </UCard>
+    </template>
+  </UModal>
+</template>

frontend/pages/administration/users/[id].vue

@@ -0,0 +1,330 @@
+<script setup lang="ts">
+import type { AdminRole, AdminUser, AdminUserProfile } from "~/composables/useAdmin"
+
+const auth = useAuthStore()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const admin = useAdmin()
+
+const userId = route.params.id as string
+const loading = ref(true)
+const saving = ref(false)
+
+const userForm = ref<AdminUser | null>(null)
+const roles = ref<AdminRole[]>([])
+const tenants = ref<{ id: number; name: string; short: string }[]>([])
+const unassignedProfiles = ref<AdminUserProfile[]>([])
+
+const tenantOptions = computed(() =>
+  tenants.value.map((tenant) => ({
+    label: `${tenant.name} (${tenant.short})`,
+    value: tenant.id,
+  }))
+)
+
+const getRoleOptionsForTenant = (tenantId: number) =>
+  roles.value
+    .filter((role) => role.tenant_id === null || role.tenant_id === tenantId)
+    .map((role) => ({
+      label: role.tenant_id === null ? `${role.name} (global)` : role.name,
+      value: role.id,
+    }))
+
+const getFreeProfilesForTenant = (tenantId: number) =>
+  unassignedProfiles.value.filter((profile) => profile.tenant_id === tenantId)
+
+const normalizeUserAssignments = () => {
+  if (!userForm.value) return
+
+  const uniqueTenantIds = Array.from(new Set((userForm.value.tenant_ids || []).map(Number))).sort((a, b) => a - b)
+  const assignmentsByTenant = new Map<number, string>()
+  const profileAssignmentByTenant = new Map<number, string | null>()
+
+  for (const assignment of userForm.value.role_assignments || []) {
+    if (!uniqueTenantIds.includes(Number(assignment.tenant_id))) continue
+    if (assignmentsByTenant.has(Number(assignment.tenant_id))) continue
+    assignmentsByTenant.set(Number(assignment.tenant_id), assignment.role_id)
+  }
+
+  for (const assignment of userForm.value.profile_assignments || []) {
+    if (!uniqueTenantIds.includes(Number(assignment.tenant_id))) continue
+    profileAssignmentByTenant.set(Number(assignment.tenant_id), assignment.profile_id || null)
+  }
+
+  userForm.value.tenant_ids = uniqueTenantIds
+  userForm.value.role_assignments = uniqueTenantIds
+    .map((tenantId) => {
+      const roleId = assignmentsByTenant.get(tenantId)
+      return roleId ? { tenant_id: tenantId, role_id: roleId } : null
+    })
+    .filter(Boolean) as { tenant_id: number; role_id: string }[]
+  userForm.value.profile_assignments = uniqueTenantIds.map((tenantId) => ({
+    tenant_id: tenantId,
+    profile_id: profileAssignmentByTenant.get(tenantId) || null,
+  }))
+}
+
+const updateUserTenants = (tenantIds: number[] = []) => {
+  if (!userForm.value) return
+  userForm.value.tenant_ids = tenantIds
+  normalizeUserAssignments()
+}
+
+const setRoleForTenant = (tenantId: number, roleId?: string | null) => {
+  if (!userForm.value) return
+  userForm.value.role_assignments = (userForm.value.role_assignments || []).filter((assignment) => assignment.tenant_id !== tenantId)
+  if (roleId) {
+    userForm.value.role_assignments.push({ tenant_id: tenantId, role_id: roleId })
+  }
+}
+
+const getRoleForTenant = (tenantId: number) =>
+  userForm.value?.role_assignments?.find((assignment) => assignment.tenant_id === tenantId)?.role_id || null
+
+const setProfileAssignmentForTenant = (tenantId: number, profileId?: string | null) => {
+  if (!userForm.value) return
+  userForm.value.profile_assignments = (userForm.value.profile_assignments || []).filter((assignment) => assignment.tenant_id !== tenantId)
+  userForm.value.profile_assignments.push({
+    tenant_id: tenantId,
+    profile_id: profileId || null,
+  })
+}
+
+const getProfileAssignmentForTenant = (tenantId: number) =>
+  userForm.value?.profile_assignments?.find((assignment) => assignment.tenant_id === tenantId)?.profile_id || null
+
+const fetchUser = async () => {
+  loading.value = true
+
+  try {
+    const overview = await admin.getOverview()
+    roles.value = overview.roles
+    tenants.value = overview.tenants
+    unassignedProfiles.value = overview.unassignedProfiles
+
+    const user = overview.users.find((entry) => entry.id === userId)
+    if (!user) {
+      toast.add({ title: "Benutzer nicht gefunden", color: "red" })
+      await router.push("/administration/users")
+      return
+    }
+
+    userForm.value = {
+      ...user,
+      profile_defaults: { ...user.profile_defaults },
+      tenant_ids: [...user.tenant_ids],
+      role_assignments: [...user.role_assignments],
+      profile_assignments: [...(user.profile_assignments || [])],
+      profiles: [...user.profiles],
+    }
+    normalizeUserAssignments()
+  } catch (err: any) {
+    console.error("[administration/users/show]", err)
+    toast.add({
+      title: "Benutzer konnte nicht geladen werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+const saveUser = async () => {
+  if (!userForm.value || saving.value) return
+
+  saving.value = true
+  normalizeUserAssignments()
+
+  try {
+    await admin.updateUser(userForm.value.id, {
+      email: userForm.value.email,
+      multiTenant: userForm.value.multiTenant,
+      must_change_password: userForm.value.must_change_password,
+      is_admin: userForm.value.is_admin,
+    })
+
+    await admin.updateUserAccess(userForm.value.id, {
+      tenant_ids: userForm.value.tenant_ids,
+      role_assignments: userForm.value.role_assignments,
+      profile_defaults: userForm.value.profile_defaults,
+      profile_assignments: userForm.value.profile_assignments,
+    })
+
+    await fetchUser()
+    await auth.fetchMe()
+
+    toast.add({ title: "Benutzer gespeichert", color: "green" })
+  } catch (err: any) {
+    console.error("[administration/users/save]", err)
+    toast.add({
+      title: "Benutzer konnte nicht gespeichert werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(async () => {
+  if (!auth.user?.is_admin) {
+    await router.push("/")
+    return
+  }
+
+  await fetchUser()
+})
+</script>
+
+<template>
+  <UDashboardNavbar title="Administration: Benutzer">
+    <template #left>
+      <UButton icon="i-heroicons-chevron-left" variant="outline" @click="router.push('/administration/users')">
+        Benutzer
+      </UButton>
+    </template>
+    <template #right>
+      <UButton color="primary" :loading="saving" @click="saveUser">
+        Speichern
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardPanelContent>
+    <UCard v-if="!loading && userForm">
+      <div class="flex items-start justify-between gap-4 mb-6">
+        <div>
+          <h2 class="text-xl font-semibold">{{ userForm.display_name }}</h2>
+          <p class="text-sm text-gray-500">{{ userForm.email }}</p>
+        </div>
+      </div>
+
+      <USeparator label="Benutzer" />
+
+      <UForm :state="userForm" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+        <UFormField label="E-Mail">
+          <UInput v-model="userForm.email" />
+        </UFormField>
+
+        <UFormField label="Profil Vorname">
+          <UInput v-model="userForm.profile_defaults.first_name" />
+        </UFormField>
+
+        <UFormField label="Profil Nachname">
+          <UInput v-model="userForm.profile_defaults.last_name" />
+        </UFormField>
+
+        <UFormField label="Tenants">
+          <USelectMenu
+            :model-value="userForm.tenant_ids"
+            :items="tenantOptions"
+            value-key="value"
+            label-key="label"
+            multiple
+            @update:model-value="updateUserTenants"
+          />
+        </UFormField>
+
+        <UFormField label="Administrative Freigabe">
+          <div class="flex items-center gap-3 h-10">
+            <USwitch v-model="userForm.is_admin" />
+            <span class="text-sm text-gray-600">Darf Administrationsseiten und Admin-API nutzen</span>
+          </div>
+        </UFormField>
+
+        <UFormField label="Multi-Tenant">
+          <div class="flex items-center gap-3 h-10">
+            <USwitch v-model="userForm.multiTenant" />
+            <span class="text-sm text-gray-600">Mehrere Tenant-Zuordnungen erlauben</span>
+          </div>
+        </UFormField>
+
+        <UFormField label="Passwortwechsel erzwingen">
+          <div class="flex items-center gap-3 h-10">
+            <USwitch v-model="userForm.must_change_password" />
+            <span class="text-sm text-gray-600">Beim nächsten Login muss das Passwort geändert werden</span>
+          </div>
+        </UFormField>
+      </UForm>
+    </UCard>
+
+    <UCard v-if="!loading && userForm" class="mt-3">
+      <USeparator label="Rollen und Profile" />
+
+      <div v-if="userForm.tenant_ids.length" class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+        <UCard
+          v-for="tenantId in userForm.tenant_ids"
+          :key="tenantId"
+          class="border border-gray-200"
+        >
+          <div class="space-y-3">
+            <div>
+              <div class="font-medium">
+                {{ tenants.find((tenant) => tenant.id === tenantId)?.name || `Tenant ${tenantId}` }}
+              </div>
+              <div class="text-sm text-gray-500">
+                {{ tenants.find((tenant) => tenant.id === tenantId)?.short || "" }}
+              </div>
+            </div>
+
+            <UFormField label="Rolle">
+              <USelectMenu
+                :model-value="getRoleForTenant(tenantId)"
+                :items="getRoleOptionsForTenant(tenantId)"
+                value-key="value"
+                label-key="label"
+                placeholder="Rolle auswählen"
+                @update:model-value="(value) => setRoleForTenant(tenantId, value)"
+              />
+            </UFormField>
+
+            <UFormField label="Freies Profil">
+              <USelectMenu
+                :model-value="getProfileAssignmentForTenant(tenantId)"
+                :items="[
+                  { label: 'Neues Profil erzeugen', value: null },
+                  ...getFreeProfilesForTenant(tenantId).map((profile) => ({
+                    label: profile.full_name || `${profile.first_name} ${profile.last_name}`,
+                    value: profile.id,
+                  }))
+                ]"
+                value-key="value"
+                label-key="label"
+                placeholder="Profil auswählen"
+                @update:model-value="(value) => setProfileAssignmentForTenant(tenantId, value)"
+              />
+            </UFormField>
+          </div>
+        </UCard>
+      </div>
+
+      <UAlert
+        v-else-if="!loading"
+        title="Keine Tenant-Zuordnung"
+        description="Weise dem Benutzer zuerst mindestens einen Tenant zu."
+        color="amber"
+        variant="soft"
+        class="mt-4"
+      />
+    </UCard>
+
+    <UCard v-if="!loading && userForm" class="mt-3">
+      <USeparator label="Profile im System" />
+
+      <div class="flex flex-wrap gap-2 mt-4">
+        <UBadge
+          v-for="profile in userForm.profiles"
+          :key="profile.id"
+          variant="subtle"
+          color="gray"
+        >
+          {{ profile.full_name || `${profile.first_name} ${profile.last_name}` }} · Tenant {{ profile.tenant_id }}
+        </UBadge>
+      </div>
+    </UCard>
+
+    <USkeleton v-if="loading" class="h-80" />
+  </UDashboardPanelContent>
+</template>

frontend/pages/administration/users/index.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import type { AdminUser } from "~/composables/useAdmin"
+
+const auth = useAuthStore()
+const toast = useToast()
+const router = useRouter()
+const admin = useAdmin()
+
+const loading = ref(true)
+const creatingUser = ref(false)
+const createUserModalOpen = ref(false)
+const createdUserPassword = ref("")
+const users = ref<AdminUser[]>([])
+const searchString = ref("")
+
+const createUserForm = ref({
+  email: "",
+  password: "",
+  first_name: "",
+  last_name: "",
+  is_admin: false,
+  multiTenant: true,
+})
+
+const templateColumns = [
+  { key: "display_name", label: "Benutzer" },
+  { key: "email", label: "E-Mail" },
+  { key: "tenant_count", label: "Tenants" },
+  { key: "is_admin", label: "Admin" },
+]
+
+const filteredRows = computed(() => {
+  const search = searchString.value.trim().toLowerCase()
+  const rows = users.value.map((user) => ({
+    ...user,
+    tenant_count: user.tenant_ids.length,
+    is_admin: user.is_admin ? "Ja" : "Nein",
+  }))
+
+  if (!search) return rows
+
+  return rows.filter((row) =>
+    [row.display_name, row.email]
+      .filter(Boolean)
+      .some((value) => String(value).toLowerCase().includes(search))
+  )
+})
+
+const fetchUsers = async () => {
+  loading.value = true
+
+  try {
+    const overview = await admin.getOverview()
+    users.value = overview.users
+  } catch (err: any) {
+    console.error("[administration/users/index]", err)
+    toast.add({
+      title: "Benutzer konnten nicht geladen werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+const createUser = async () => {
+  if (creatingUser.value) return
+
+  creatingUser.value = true
+
+  try {
+    const response = await admin.createUser(createUserForm.value)
+
+    createdUserPassword.value = response.initialPassword || ""
+    createUserModalOpen.value = false
+    createUserForm.value = {
+      email: "",
+      password: "",
+      first_name: "",
+      last_name: "",
+      is_admin: false,
+      multiTenant: true,
+    }
+
+    await fetchUsers()
+
+    toast.add({
+      title: "Benutzer angelegt",
+      description: createdUserPassword.value ? `Initialpasswort: ${createdUserPassword.value}` : undefined,
+      color: "green",
+    })
+
+    if (response.user?.id) {
+      await router.push(`/administration/users/${response.user.id}`)
+    }
+  } catch (err: any) {
+    console.error("[administration/users/create]", err)
+    toast.add({
+      title: "Benutzer konnte nicht angelegt werden",
+      description: err?.data?.error || err?.message || "Unbekannter Fehler",
+      color: "red",
+    })
+  } finally {
+    creatingUser.value = false
+  }
+}
+
+onMounted(async () => {
+  if (!auth.user?.is_admin) {
+    await router.push("/")
+    return
+  }
+
+  await fetchUsers()
+})
+</script>
+
+<template>
+  <UDashboardNavbar title="Administration: Benutzer" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+        v-model="searchString"
+        icon="i-heroicons-magnifying-glass"
+        placeholder="Benutzer suchen"
+        class="hidden lg:block"
+      />
+      <UButton icon="i-heroicons-plus" @click="createUserModalOpen = true">
+        Benutzer
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UTable
+    :data="filteredRows"
+    :columns="normalizeTableColumns(templateColumns)"
+    :loading="loading"
+    :on-select="(row) => router.push(`/administration/users/${row.original?.id || row.id}`)"
+    :empty="{ icon: 'i-heroicons-users', label: 'Keine Benutzer gefunden' }"
+  />
+
+  <UModal v-model:open="createUserModalOpen">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="text-lg font-semibold">Benutzer anlegen</div>
+        </template>
+
+        <UForm :state="createUserForm" class="space-y-4" @submit.prevent="createUser">
+          <UFormField label="E-Mail">
+            <UInput v-model="createUserForm.email" type="email" />
+          </UFormField>
+
+          <UFormField label="Initialpasswort">
+            <UInput v-model="createUserForm.password" placeholder="Leer lassen für automatisches Passwort" />
+          </UFormField>
+
+          <UFormField label="Vorname für neues Profil">
+            <UInput v-model="createUserForm.first_name" />
+          </UFormField>
+
+          <UFormField label="Nachname für neues Profil">
+            <UInput v-model="createUserForm.last_name" />
+          </UFormField>
+
+          <UFormField label="Administrative Freigabe">
+            <div class="flex items-center gap-3 h-10">
+              <USwitch v-model="createUserForm.is_admin" />
+              <span class="text-sm text-gray-600">Benutzer darf die Administration öffnen</span>
+            </div>
+          </UFormField>
+
+          <UFormField label="Multi-Tenant">
+            <div class="flex items-center gap-3 h-10">
+              <USwitch v-model="createUserForm.multiTenant" />
+              <span class="text-sm text-gray-600">Mehrere Tenant-Zuordnungen erlauben</span>
+            </div>
+          </UFormField>
+
+          <div class="flex justify-end gap-3 pt-2">
+            <UButton color="gray" variant="soft" @click="createUserModalOpen = false">
+              Abbrechen
+            </UButton>
+            <UButton type="submit" color="primary" :loading="creatingUser">
+              Benutzer anlegen
+            </UButton>
+          </div>
+        </UForm>
+      </UCard>
+    </template>
+  </UModal>
+
+  <div class="mx-5 mb-5">
+    <UAlert
+      v-if="createdUserPassword"
+      title="Initialpasswort für neuen Benutzer"
+      :description="createdUserPassword"
+      color="amber"
+      variant="soft"
+      close-button
+      @close="createdUserPassword = ''"
+    />
+  </div>
+</template>