feat(frontend): TypeScript-Monorepo mit Terminal-UI für Effigenix ERP

Monorepo-Setup (pnpm workspaces) mit vier shared Packages und einer TUI-App:

Shared Packages:
- @effigenix/types: TypeScript-DTOs (UserDTO, RoleDTO, AuthDTO, Enums)
- @effigenix/config: API-Konfiguration und Shared Constants
- @effigenix/validation: Zod-Schemas für Username, E-Mail und Passwort
- @effigenix/api-client: axios-Client mit JWT-Handling (proaktiver + reaktiver
  Token-Refresh), AuthInterceptor, ErrorInterceptor, Resources für auth/users/roles

TUI (apps/cli, Ink 5 / React):
- Authentication: Login/Logout, Session-Restore beim Start, JWT-Refresh
- User Management: Liste, Anlage (Zod-Inline-Validation), Detailansicht,
  Passwort ändern, Sperren/Entsperren mit ConfirmDialog
- Role Management: Liste, Detailansicht, Zuweisen/Entfernen per RoleSelectList (↑↓)
- UX: SuccessDisplay (Auto-Dismiss 3 s), ConfirmDialog (J/N),
  FormInput mit Inline-Fehlern, StatusBar mit API-URL
- Layout: Fullscreen-Modus (alternate screen buffer), Header mit eingeloggtem User
- Tests: vitest + ink-testing-library (15 Tests)

frontend/apps/cli/src/components/users/ChangePasswordScreen.tsx

@@ -0,0 +1,153 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useNavigation } from '../../state/navigation-context.js';
+import { client } from '../../utils/api-client.js';
+import { FormInput } from '../shared/FormInput.js';
+import { LoadingSpinner } from '../shared/LoadingSpinner.js';
+import { ErrorDisplay } from '../shared/ErrorDisplay.js';
+import { SuccessDisplay } from '../shared/SuccessDisplay.js';
+import { passwordSchema } from '@effigenix/validation';
+
+type Field = 'currentPassword' | 'newPassword' | 'confirmPassword';
+const FIELDS: Field[] = ['currentPassword', 'newPassword', 'confirmPassword'];
+
+function errorMessage(err: unknown): string {
+  return err instanceof Error ? err.message : 'Unbekannter Fehler';
+}
+
+export function ChangePasswordScreen() {
+  const { params, back } = useNavigation();
+  const userId = params['userId'] ?? '';
+
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [activeField, setActiveField] = useState<Field>('currentPassword');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  useInput((_input, key) => {
+    if (loading) return;
+    if (key.tab || key.downArrow) {
+      setActiveField((f) => {
+        const idx = FIELDS.indexOf(f);
+        return FIELDS[(idx + 1) % FIELDS.length] ?? f;
+      });
+    }
+    if (key.upArrow) {
+      setActiveField((f) => {
+        const idx = FIELDS.indexOf(f);
+        return FIELDS[(idx - 1 + FIELDS.length) % FIELDS.length] ?? f;
+      });
+    }
+    if (key.escape) {
+      back();
+    }
+  });
+
+  const handleSubmit = async () => {
+    setError(null);
+
+    if (!currentPassword.trim() || !newPassword.trim() || !confirmPassword.trim()) {
+      setError('Alle Felder sind Pflichtfelder.');
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError('Das neue Passwort und die Bestätigung stimmen nicht überein.');
+      return;
+    }
+
+    const passwordResult = passwordSchema.safeParse(newPassword.trim());
+    if (!passwordResult.success) {
+      setError(passwordResult.error.errors[0]?.message ?? 'Ungültiges Passwort');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await client.users.changePassword(userId, {
+        currentPassword: currentPassword.trim(),
+        newPassword: newPassword.trim(),
+      });
+      setSuccess(true);
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleFieldSubmit = (field: Field) => (_value: string) => {
+    const idx = FIELDS.indexOf(field);
+    if (idx < FIELDS.length - 1) {
+      setActiveField(FIELDS[idx + 1] ?? field);
+    } else {
+      void handleSubmit();
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box flexDirection="column" alignItems="center" paddingY={2}>
+        <LoadingSpinner label="Passwort wird geändert..." />
+      </Box>
+    );
+  }
+
+  if (success) {
+    return (
+      <Box flexDirection="column" alignItems="center" paddingY={2}>
+        <SuccessDisplay message="Passwort erfolgreich geändert." onDismiss={() => back()} />
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text color="cyan" bold>
+        Passwort ändern
+      </Text>
+
+      {error && (
+        <ErrorDisplay message={error} onDismiss={() => setError(null)} />
+      )}
+
+      <Box flexDirection="column" gap={1} width={60}>
+        <FormInput
+          label="Aktuelles Passwort *"
+          value={currentPassword}
+          onChange={setCurrentPassword}
+          onSubmit={handleFieldSubmit('currentPassword')}
+          focus={activeField === 'currentPassword'}
+          mask="*"
+          placeholder="••••••••"
+        />
+        <FormInput
+          label="Neues Passwort * (min. 8 Zeichen)"
+          value={newPassword}
+          onChange={setNewPassword}
+          onSubmit={handleFieldSubmit('newPassword')}
+          focus={activeField === 'newPassword'}
+          mask="*"
+          placeholder="••••••••"
+        />
+        <FormInput
+          label="Neues Passwort bestätigen *"
+          value={confirmPassword}
+          onChange={setConfirmPassword}
+          onSubmit={handleFieldSubmit('confirmPassword')}
+          focus={activeField === 'confirmPassword'}
+          mask="*"
+          placeholder="••••••••"
+        />
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color="gray" dimColor>
+          Tab/↑↓ Feld wechseln · Enter auf letztem Feld speichern · Escape Abbrechen
+        </Text>
+      </Box>
+    </Box>
+  );
+}