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/__tests__/hooks/useRoles.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import type { RoleDTO } from '@effigenix/api-client';
+
+vi.mock('../../utils/api-client.js', () => ({
+  client: {
+    roles: {
+      list: vi.fn(),
+    },
+  },
+}));
+
+const { client } = await import('../../utils/api-client.js');
+
+const mockRoles: RoleDTO[] = [
+  { id: '1', name: 'ADMIN', permissions: [] },
+  { id: '2', name: 'USER', permissions: [] },
+];
+
+describe('useRoles – api-client integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('client.roles.list resolves with roles', async () => {
+    vi.mocked(client.roles.list).mockResolvedValue(mockRoles);
+    const result = await client.roles.list();
+    expect(result).toEqual(mockRoles);
+  });
+
+  it('client.roles.list rejects with error', async () => {
+    vi.mocked(client.roles.list).mockRejectedValue(new Error('Netzwerkfehler'));
+    await expect(client.roles.list()).rejects.toThrow('Netzwerkfehler');
+  });
+
+  it('error message extraction from Error instance', () => {
+    const err: unknown = new Error('Verbindungsfehler');
+    const msg = err instanceof Error ? err.message : 'Unbekannter Fehler';
+    expect(msg).toBe('Verbindungsfehler');
+  });
+
+  it('error message fallback for non-Error', () => {
+    const err: unknown = 'string error';
+    const msg = err instanceof Error ? err.message : 'Unbekannter Fehler';
+    expect(msg).toBe('Unbekannter Fehler');
+  });
+});

frontend/apps/cli/src/__tests__/shared/ConfirmDialog.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import React from 'react';
+import { ConfirmDialog } from '../../components/shared/ConfirmDialog.js';
+
+describe('ConfirmDialog', () => {
+  it('renders the message', () => {
+    const { lastFrame } = render(
+      React.createElement(ConfirmDialog, {
+        message: 'Benutzer sperren?',
+        onConfirm: vi.fn(),
+        onCancel: vi.fn(),
+      }),
+    );
+    expect(lastFrame()).toContain('Benutzer sperren?');
+  });
+
+  it('renders J/N hint', () => {
+    const { lastFrame } = render(
+      React.createElement(ConfirmDialog, {
+        message: 'Test?',
+        onConfirm: vi.fn(),
+        onCancel: vi.fn(),
+      }),
+    );
+    expect(lastFrame()).toContain('[J]');
+    expect(lastFrame()).toContain('[N]');
+  });
+
+  it('renders Bestätigung label', () => {
+    const { lastFrame } = render(
+      React.createElement(ConfirmDialog, {
+        message: 'Aktion bestätigen?',
+        onConfirm: vi.fn(),
+        onCancel: vi.fn(),
+      }),
+    );
+    expect(lastFrame()).toContain('Bestätigung');
+  });
+});

frontend/apps/cli/src/__tests__/shared/ErrorDisplay.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'ink-testing-library';
+import React from 'react';
+import { ErrorDisplay } from '../../components/shared/ErrorDisplay.js';
+
+describe('ErrorDisplay', () => {
+  it('renders the error message', () => {
+    const { lastFrame } = render(React.createElement(ErrorDisplay, { message: 'Test-Fehler' }));
+    expect(lastFrame()).toContain('Test-Fehler');
+  });
+
+  it('renders without onDismiss without throwing', () => {
+    expect(() => render(React.createElement(ErrorDisplay, { message: 'Fehler' }))).not.toThrow();
+  });
+
+  it('does not render dismiss hint when onDismiss is absent', () => {
+    const { lastFrame } = render(React.createElement(ErrorDisplay, { message: 'Fehler' }));
+    expect(lastFrame()).not.toContain('Schließen');
+  });
+
+  it('renders dismiss hint when onDismiss is provided', () => {
+    const { lastFrame } = render(
+      React.createElement(ErrorDisplay, { message: 'Fehler', onDismiss: () => undefined }),
+    );
+    expect(lastFrame()).toContain('Schließen');
+  });
+});

frontend/apps/cli/src/__tests__/shared/SuccessDisplay.test.tsx

@@ -0,0 +1,53 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import React, { act } from 'react';
+import { SuccessDisplay } from '../../components/shared/SuccessDisplay.js';
+
+describe('SuccessDisplay', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders the success message', () => {
+    const onDismiss = vi.fn();
+    const { lastFrame } = render(
+      React.createElement(SuccessDisplay, { message: 'Aktion erfolgreich.', onDismiss }),
+    );
+    expect(lastFrame()).toContain('Aktion erfolgreich.');
+  });
+
+  it('renders with green Erfolg label', () => {
+    const onDismiss = vi.fn();
+    const { lastFrame } = render(
+      React.createElement(SuccessDisplay, { message: 'Ok', onDismiss }),
+    );
+    expect(lastFrame()).toContain('Erfolg');
+  });
+
+  it('calls onDismiss after 3 seconds', async () => {
+    const onDismiss = vi.fn();
+    await act(async () => {
+      render(React.createElement(SuccessDisplay, { message: 'Ok', onDismiss }));
+    });
+    expect(onDismiss).not.toHaveBeenCalled();
+    await act(async () => {
+      vi.advanceTimersByTime(3000);
+    });
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+
+  it('does not call onDismiss before 3 seconds', async () => {
+    const onDismiss = vi.fn();
+    await act(async () => {
+      render(React.createElement(SuccessDisplay, { message: 'Ok', onDismiss }));
+    });
+    await act(async () => {
+      vi.advanceTimersByTime(2999);
+    });
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+});