feat: add user management UI (create, edit, activate/deactivate)

- New UserFormModal component for creating and editing users
- AdminUsersPage: add "Neuer Benutzer" button, actions column
- German role labels, toggle activate/deactivate from table
- Uses React Query mutations with query invalidation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/frontend/src/admin/AdminUsersPage.tsx

@@ -1,5 +1,7 @@
-import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
 import api from '../api/client';
+import { UserFormModal } from './UserFormModal';
 
 interface User {
   id: string;
@@ -22,7 +24,31 @@ interface UsersResponse {
   };
 }
 
+const ROLE_LABELS: Record<string, string> = {
+  USER: 'Benutzer',
+  TENANT_ADMIN: 'Mandanten-Admin',
+  PLATFORM_ADMIN: 'Plattform-Admin',
+};
+
+const ROLE_COLORS: Record<string, { bg: string; color: string }> = {
+  PLATFORM_ADMIN: { bg: '#dbeafe', color: '#1e40af' },
+  TENANT_ADMIN: { bg: '#fef3c7', color: '#92400e' },
+  USER: { bg: '#f3f4f6', color: '#374151' },
+};
+
+const thStyle: React.CSSProperties = {
+  padding: '0.75rem 1rem',
+  textAlign: 'left',
+  fontSize: '0.75rem',
+  textTransform: 'uppercase',
+  color: 'var(--color-text-muted)',
+};
+
 export function AdminUsersPage() {
+  const queryClient = useQueryClient();
+  const [isCreateModalOpen, setCreateModalOpen] = useState(false);
+  const [editingUser, setEditingUser] = useState<User | null>(null);
+
   const { data, isLoading, error } = useQuery<UsersResponse>({
     queryKey: ['admin', 'users'],
     queryFn: async () => {
@@ -31,6 +57,14 @@ export function AdminUsersPage() {
     },
   });
 
+  const toggleActiveMutation = useMutation({
+    mutationFn: ({ id, isActive }: { id: string; isActive: boolean }) =>
+      api.patch(`/users/${id}`, { isActive }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
+    },
+  });
+
   if (isLoading) return <p>Laden...</p>;
   if (error) return <p style={{ color: 'var(--color-error)' }}>Fehler beim Laden der Benutzer</p>;
 
@@ -38,9 +72,26 @@ export function AdminUsersPage() {
     <div>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
         <h1 style={{ fontSize: '1.5rem', fontWeight: 600 }}>Benutzerverwaltung</h1>
-        <span style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-          {data?.meta.total ?? 0} Benutzer gesamt
+          <span style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem' }}>
-        </span>
+            {data?.meta.total ?? 0} Benutzer gesamt
+          </span>
+          <button
+            onClick={() => setCreateModalOpen(true)}
+            style={{
+              padding: '0.5rem 1rem',
+              background: 'var(--color-primary)',
+              color: 'white',
+              border: 'none',
+              borderRadius: 'var(--radius-sm)',
+              fontSize: '0.875rem',
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}
+          >
+            + Neuer Benutzer
+          </button>
+        </div>
       </div>
 
       <div style={{
@@ -53,54 +104,106 @@ export function AdminUsersPage() {
         <table style={{ width: '100%', borderCollapse: 'collapse' }}>
           <thead>
             <tr style={{ borderBottom: '1px solid var(--color-border)', background: 'var(--color-bg)' }}>
-              <th style={{ padding: '0.75rem 1rem', textAlign: 'left', fontSize: '0.75rem', textTransform: 'uppercase', color: 'var(--color-text-muted)' }}>Name</th>
+              <th style={thStyle}>Name</th>
-              <th style={{ padding: '0.75rem 1rem', textAlign: 'left', fontSize: '0.75rem', textTransform: 'uppercase', color: 'var(--color-text-muted)' }}>E-Mail</th>
+              <th style={thStyle}>E-Mail</th>
-              <th style={{ padding: '0.75rem 1rem', textAlign: 'left', fontSize: '0.75rem', textTransform: 'uppercase', color: 'var(--color-text-muted)' }}>Rolle</th>
+              <th style={thStyle}>Rolle</th>
-              <th style={{ padding: '0.75rem 1rem', textAlign: 'left', fontSize: '0.75rem', textTransform: 'uppercase', color: 'var(--color-text-muted)' }}>Status</th>
+              <th style={thStyle}>Status</th>
-              <th style={{ padding: '0.75rem 1rem', textAlign: 'left', fontSize: '0.75rem', textTransform: 'uppercase', color: 'var(--color-text-muted)' }}>Letzter Login</th>
+              <th style={thStyle}>Letzter Login</th>
+              <th style={thStyle}>Aktionen</th>
             </tr>
           </thead>
           <tbody>
-            {data?.data.map((user) => (
+            {data?.data.map((user) => {
-              <tr key={user.id} style={{ borderBottom: '1px solid var(--color-border)' }}>
+              const roleStyle = ROLE_COLORS[user.role] ?? ROLE_COLORS.USER;
-                <td style={{ padding: '0.75rem 1rem', fontSize: '0.875rem' }}>
+              return (
-                  {user.firstName} {user.lastName}
+                <tr key={user.id} style={{ borderBottom: '1px solid var(--color-border)' }}>
-                </td>
+                  <td style={{ padding: '0.75rem 1rem', fontSize: '0.875rem' }}>
-                <td style={{ padding: '0.75rem 1rem', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
+                    {user.firstName} {user.lastName}
-                  {user.email}
+                  </td>
-                </td>
+                  <td style={{ padding: '0.75rem 1rem', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
-                <td style={{ padding: '0.75rem 1rem' }}>
+                    {user.email}
-                  <span style={{
+                  </td>
-                    display: 'inline-block',
+                  <td style={{ padding: '0.75rem 1rem' }}>
-                    padding: '0.125rem 0.5rem',
+                    <span style={{
-                    borderRadius: '9999px',
+                      display: 'inline-block',
-                    fontSize: '0.75rem',
+                      padding: '0.125rem 0.5rem',
-                    fontWeight: 500,
+                      borderRadius: '9999px',
-                    background: user.role === 'PLATFORM_ADMIN' ? '#dbeafe' : '#f3f4f6',
+                      fontSize: '0.75rem',
-                    color: user.role === 'PLATFORM_ADMIN' ? '#1e40af' : '#374151',
+                      fontWeight: 500,
-                  }}>
+                      background: roleStyle.bg,
-                    {user.role}
+                      color: roleStyle.color,
-                  </span>
+                    }}>
-                </td>
+                      {ROLE_LABELS[user.role] ?? user.role}
-                <td style={{ padding: '0.75rem 1rem' }}>
+                    </span>
-                  <span style={{
+                  </td>
-                    display: 'inline-block',
+                  <td style={{ padding: '0.75rem 1rem' }}>
-                    width: 8,
+                    <span style={{
-                    height: 8,
+                      display: 'inline-block',
-                    borderRadius: '50%',
+                      width: 8,
-                    background: user.isActive ? 'var(--color-success)' : 'var(--color-error)',
+                      height: 8,
-                    marginRight: '0.375rem',
+                      borderRadius: '50%',
-                  }} />
+                      background: user.isActive ? 'var(--color-success)' : 'var(--color-error)',
-                  <span style={{ fontSize: '0.875rem' }}>{user.isActive ? 'Aktiv' : 'Inaktiv'}</span>
+                      marginRight: '0.375rem',
-                </td>
+                    }} />
-                <td style={{ padding: '0.75rem 1rem', fontSize: '0.875rem', color: 'var(--color-text-muted)' }}>
+                    <span style={{ fontSize: '0.875rem' }}>{user.isActive ? 'Aktiv' : 'Inaktiv'}</span>
-                  {user.lastLogin ? new Date(user.lastLogin).toLocaleDateString('de-DE') : 'Nie'}
+                  </td>
-                </td>
+                  <td style={{ padding: '0.75rem 1rem', fontSize: '0.875rem', color: 'var(--color-text-muted)' }}>
-              </tr>
+                    {user.lastLogin ? new Date(user.lastLogin).toLocaleDateString('de-DE') : 'Nie'}
-            ))}
+                  </td>
+                  <td style={{ padding: '0.75rem 1rem' }}>
+                    <div style={{ display: 'flex', gap: '0.5rem' }}>
+                      <button
+                        onClick={() => setEditingUser(user)}
+                        style={{
+                          padding: '0.25rem 0.625rem',
+                          fontSize: '0.8125rem',
+                          background: 'transparent',
+                          border: '1px solid var(--color-border)',
+                          borderRadius: 'var(--radius-sm)',
+                          cursor: 'pointer',
+                          color: 'var(--color-text-secondary)',
+                        }}
+                      >
+                        Bearbeiten
+                      </button>
+                      <button
+                        onClick={() => toggleActiveMutation.mutate({ id: user.id, isActive: !user.isActive })}
+                        disabled={toggleActiveMutation.isPending}
+                        style={{
+                          padding: '0.25rem 0.625rem',
+                          fontSize: '0.8125rem',
+                          background: 'transparent',
+                          border: `1px solid ${user.isActive ? '#fecaca' : '#bbf7d0'}`,
+                          borderRadius: 'var(--radius-sm)',
+                          cursor: 'pointer',
+                          color: user.isActive ? 'var(--color-error)' : 'var(--color-success)',
+                        }}
+                      >
+                        {user.isActive ? 'Deaktivieren' : 'Aktivieren'}
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
           </tbody>
         </table>
       </div>
+
+      {/* Modal: Neuen Benutzer anlegen */}
+      <UserFormModal
+        isOpen={isCreateModalOpen}
+        onClose={() => setCreateModalOpen(false)}
+        onSuccess={() => setCreateModalOpen(false)}
+      />
+
+      {/* Modal: Benutzer bearbeiten */}
+      <UserFormModal
+        isOpen={!!editingUser}
+        onClose={() => setEditingUser(null)}
+        user={editingUser}
+        onSuccess={() => setEditingUser(null)}
+      />
     </div>
   );
 }

packages/frontend/src/admin/UserFormModal.tsx

@@ -0,0 +1,341 @@
+import { useState, useEffect, type FormEvent } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Modal } from '../components/Modal';
+import api from '../api/client';
+
+interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+  isActive: boolean;
+  lastLogin: string | null;
+  createdAt: string;
+}
+
+interface UserFormModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  user?: User | null;
+  onSuccess: () => void;
+}
+
+const ROLE_OPTIONS = [
+  { value: 'USER', label: 'Benutzer' },
+  { value: 'TENANT_ADMIN', label: 'Mandanten-Admin' },
+  { value: 'PLATFORM_ADMIN', label: 'Plattform-Admin' },
+];
+
+const ROLE_LABELS: Record<string, string> = {
+  USER: 'Benutzer',
+  TENANT_ADMIN: 'Mandanten-Admin',
+  PLATFORM_ADMIN: 'Plattform-Admin',
+};
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  padding: '0.625rem 0.75rem',
+  border: '1px solid var(--color-border)',
+  borderRadius: 'var(--radius-sm)',
+  fontSize: '0.9375rem',
+  outline: 'none',
+  boxSizing: 'border-box',
+};
+
+const inputDisabledStyle: React.CSSProperties = {
+  ...inputStyle,
+  background: '#f3f4f6',
+  color: 'var(--color-text-muted)',
+  cursor: 'not-allowed',
+};
+
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  fontSize: '0.875rem',
+  fontWeight: 500,
+  color: 'var(--color-text)',
+  marginBottom: '0.25rem',
+};
+
+export function UserFormModal({ isOpen, onClose, user, onSuccess }: UserFormModalProps) {
+  const isEditMode = !!user;
+  const queryClient = useQueryClient();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [role, setRole] = useState('USER');
+  const [isActive, setIsActive] = useState(true);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+
+  useEffect(() => {
+    if (isOpen) {
+      setError('');
+      setSuccess('');
+      if (user) {
+        setEmail(user.email);
+        setFirstName(user.firstName);
+        setLastName(user.lastName);
+        setRole(user.role);
+        setIsActive(user.isActive);
+        setPassword('');
+      } else {
+        setEmail('');
+        setPassword('');
+        setFirstName('');
+        setLastName('');
+        setRole('USER');
+        setIsActive(true);
+      }
+    }
+  }, [isOpen, user]);
+
+  const createMutation = useMutation({
+    mutationFn: (data: { email: string; password: string; firstName: string; lastName: string; role: string }) =>
+      api.post('/users', data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
+      setSuccess('Benutzer wurde erfolgreich angelegt.');
+      setTimeout(() => onSuccess(), 1000);
+    },
+    onError: (err: unknown) => {
+      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
+      setError(message ?? 'Fehler beim Anlegen des Benutzers.');
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: (data: { firstName: string; lastName: string; isActive: boolean }) =>
+      api.patch(`/users/${user!.id}`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
+      setSuccess('Änderungen wurden gespeichert.');
+      setTimeout(() => onSuccess(), 1000);
+    },
+    onError: (err: unknown) => {
+      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
+      setError(message ?? 'Fehler beim Speichern der Änderungen.');
+    },
+  });
+
+  const isLoading = createMutation.isPending || updateMutation.isPending;
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setSuccess('');
+
+    if (!firstName.trim() || !lastName.trim()) {
+      setError('Vor- und Nachname sind Pflichtfelder.');
+      return;
+    }
+
+    if (isEditMode) {
+      updateMutation.mutate({ firstName: firstName.trim(), lastName: lastName.trim(), isActive });
+    } else {
+      if (!email.trim()) {
+        setError('E-Mail-Adresse ist ein Pflichtfeld.');
+        return;
+      }
+      if (password.length < 8) {
+        setError('Passwort muss mindestens 8 Zeichen lang sein.');
+        return;
+      }
+      createMutation.mutate({
+        email: email.trim(),
+        password,
+        firstName: firstName.trim(),
+        lastName: lastName.trim(),
+        role,
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={isEditMode ? 'Benutzer bearbeiten' : 'Neuen Benutzer anlegen'}
+      maxWidth="480px"
+    >
+      <form onSubmit={handleSubmit}>
+        {error && (
+          <div style={{
+            padding: '0.625rem 0.75rem',
+            marginBottom: '1rem',
+            background: '#fef2f2',
+            color: 'var(--color-error)',
+            border: '1px solid #fecaca',
+            borderRadius: 'var(--radius-sm)',
+            fontSize: '0.875rem',
+          }}>
+            {error}
+          </div>
+        )}
+
+        {success && (
+          <div style={{
+            padding: '0.625rem 0.75rem',
+            marginBottom: '1rem',
+            background: '#f0fdf4',
+            color: 'var(--color-success)',
+            border: '1px solid #bbf7d0',
+            borderRadius: 'var(--radius-sm)',
+            fontSize: '0.875rem',
+          }}>
+            {success}
+          </div>
+        )}
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.875rem' }}>
+          {/* E-Mail */}
+          <div>
+            <label style={labelStyle}>E-Mail *</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={isEditMode}
+              style={isEditMode ? inputDisabledStyle : inputStyle}
+              placeholder="max.mustermann@beispiel.de"
+              required={!isEditMode}
+            />
+          </div>
+
+          {/* Passwort (nur Anlegen) */}
+          {!isEditMode && (
+            <div>
+              <label style={labelStyle}>Passwort *</label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                style={inputStyle}
+                placeholder="Mindestens 8 Zeichen"
+                minLength={8}
+                maxLength={128}
+                required
+              />
+            </div>
+          )}
+
+          {/* Vorname + Nachname nebeneinander */}
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
+            <div>
+              <label style={labelStyle}>Vorname *</label>
+              <input
+                type="text"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                style={inputStyle}
+                placeholder="Vorname"
+                maxLength={100}
+                required
+              />
+            </div>
+            <div>
+              <label style={labelStyle}>Nachname *</label>
+              <input
+                type="text"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                style={inputStyle}
+                placeholder="Nachname"
+                maxLength={100}
+                required
+              />
+            </div>
+          </div>
+
+          {/* Rolle */}
+          <div>
+            <label style={labelStyle}>Rolle</label>
+            {isEditMode ? (
+              <input
+                type="text"
+                value={ROLE_LABELS[role] ?? role}
+                disabled
+                style={inputDisabledStyle}
+              />
+            ) : (
+              <select
+                value={role}
+                onChange={(e) => setRole(e.target.value)}
+                style={inputStyle}
+              >
+                {ROLE_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            )}
+          </div>
+
+          {/* Aktiv-Status (nur Bearbeiten) */}
+          {isEditMode && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+              <input
+                type="checkbox"
+                id="isActive"
+                checked={isActive}
+                onChange={(e) => setIsActive(e.target.checked)}
+                style={{ width: 16, height: 16, cursor: 'pointer' }}
+              />
+              <label htmlFor="isActive" style={{ fontSize: '0.875rem', cursor: 'pointer', color: 'var(--color-text)' }}>
+                Benutzer ist aktiv
+              </label>
+            </div>
+          )}
+        </div>
+
+        {/* Buttons */}
+        <div style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          gap: '0.75rem',
+          marginTop: '1.5rem',
+          paddingTop: '1rem',
+          borderTop: '1px solid var(--color-border)',
+        }}>
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={isLoading}
+            style={{
+              padding: '0.5rem 1rem',
+              background: 'transparent',
+              border: '1px solid var(--color-border)',
+              borderRadius: 'var(--radius-sm)',
+              fontSize: '0.875rem',
+              cursor: 'pointer',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            Abbrechen
+          </button>
+          <button
+            type="submit"
+            disabled={isLoading}
+            style={{
+              padding: '0.5rem 1rem',
+              background: 'var(--color-primary)',
+              color: 'white',
+              border: 'none',
+              borderRadius: 'var(--radius-sm)',
+              fontSize: '0.875rem',
+              fontWeight: 600,
+              cursor: isLoading ? 'wait' : 'pointer',
+              opacity: isLoading ? 0.7 : 1,
+            }}
+          >
+            {isLoading ? 'Speichern...' : isEditMode ? 'Speichern' : 'Anlegen'}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}