feat(App): update Finlytic Flutter app UI and blocs

FinlyticApp/lib/features/admin/bloc/admin_bloc.dart

@@ -0,0 +1,47 @@
+import 'dart:async';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import '../repositories/admin_repository.dart';
+import 'admin_event.dart';
+import 'admin_state.dart';
+
+export 'admin_event.dart';
+export 'admin_state.dart';
+
+class AdminBloc extends Bloc<AdminEvent, AdminState> {
+  final AdminRepository repository;
+
+  AdminBloc({required this.repository}) : super(AdminInitial()) {
+    on<FetchAdminUsers>(_onFetchUsers);
+    on<CreateAdminUser>(_onCreateUser);
+    on<UpdateAdminUser>(_onUpdateUser);
+  }
+
+  Future<void> _onFetchUsers(FetchAdminUsers event, Emitter<AdminState> emit) async {
+    emit(AdminLoading());
+    try {
+      final users = await repository.fetchUsers();
+      emit(AdminLoaded(users));
+    } catch (e) {
+      emit(const AdminError("Fehler beim Laden der Admin-Nutzer."));
+    }
+  }
+
+  Future<void> _onCreateUser(CreateAdminUser event, Emitter<AdminState> emit) async {
+    try {
+      await repository.createUser(event.dto);
+      add(FetchAdminUsers());
+    } catch (e) {
+      emit(AdminError(e.toString()));
+    }
+  }
+
+  Future<void> _onUpdateUser(UpdateAdminUser event, Emitter<AdminState> emit) async {
+    try {
+      await repository.updateUser(event.id, event.dto);
+      add(FetchAdminUsers());
+    } catch (e) {
+      emit(const AdminError("Nutzer konnte nicht aktualisiert werden."));
+    }
+  }
+}

FinlyticApp/lib/features/admin/bloc/admin_event.dart

@@ -0,0 +1,31 @@
+import 'package:equatable/equatable.dart';
+import '../models/admin_create_user_request_dto.dart';
+import '../models/admin_update_user_request_dto.dart';
+
+abstract class AdminEvent extends Equatable {
+  const AdminEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class FetchAdminUsers extends AdminEvent {}
+
+class CreateAdminUser extends AdminEvent {
+  final AdminCreateUserRequestDto dto;
+
+  const CreateAdminUser(this.dto);
+
+  @override
+  List<Object?> get props => [dto];
+}
+
+class UpdateAdminUser extends AdminEvent {
+  final String id;
+  final AdminUpdateUserRequestDto dto;
+
+  const UpdateAdminUser(this.id, this.dto);
+
+  @override
+  List<Object?> get props => [id, dto];
+}

FinlyticApp/lib/features/admin/bloc/admin_state.dart

@@ -0,0 +1,31 @@
+import 'package:equatable/equatable.dart';
+import 'package:finlytic_app/features/admin/models/admin_user_model.dart';
+
+abstract class AdminState extends Equatable {
+  const AdminState();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class AdminInitial extends AdminState {}
+
+class AdminLoading extends AdminState {}
+
+class AdminLoaded extends AdminState {
+  final List<AdminUserModel> users;
+
+  const AdminLoaded(this.users);
+
+  @override
+  List<Object?> get props => [users];
+}
+
+class AdminError extends AdminState {
+  final String message;
+
+  const AdminError(this.message);
+
+  @override
+  List<Object?> get props => [message];
+}

FinlyticApp/lib/features/admin/models/admin_create_user_request_dto.dart

@@ -0,0 +1,22 @@
+class AdminCreateUserRequestDto {
+  final String email;
+  final String password;
+  final String fullName;
+  final String role;
+
+  AdminCreateUserRequestDto({
+    required this.email,
+    required this.password,
+    required this.fullName,
+    required this.role,
+  });
+
+  Map<String, dynamic> toJson() {
+    return {
+      'email': email,
+      'password': password,
+      'fullName': fullName,
+      'role': role,
+    };
+  }
+}

FinlyticApp/lib/features/admin/models/admin_update_user_request_dto.dart

@@ -0,0 +1,16 @@
+class AdminUpdateUserRequestDto {
+  final String role;
+  final bool isActive;
+
+  AdminUpdateUserRequestDto({
+    required this.role,
+    required this.isActive,
+  });
+
+  Map<String, dynamic> toJson() {
+    return {
+      'role': role,
+      'isActive': isActive,
+    };
+  }
+}

FinlyticApp/lib/features/admin/models/admin_user_model.dart

@@ -0,0 +1,40 @@
+import 'package:equatable/equatable.dart';
+
+class AdminUserModel extends Equatable {
+  final String id;
+  final String email;
+  final String fullName;
+  final String role;
+  final bool isActive;
+
+  const AdminUserModel({
+    required this.id,
+    required this.email,
+    required this.fullName,
+    required this.role,
+    required this.isActive,
+  });
+
+  factory AdminUserModel.fromJson(Map<String, dynamic> json) {
+    return AdminUserModel(
+      id: json['id']?.toString() ?? '',
+      email: json['email']?.toString() ?? '',
+      fullName: json['fullName']?.toString() ?? json['name']?.toString() ?? '',
+      role: json['role']?.toString() ?? 'User',
+      isActive: json['isActive'] == true || json['IsActive'] == true,
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'id': id,
+      'email': email,
+      'fullName': fullName,
+      'role': role,
+      'isActive': isActive,
+    };
+  }
+
+  @override
+  List<Object?> get props => [id, email, fullName, role, isActive];
+}

FinlyticApp/lib/features/admin/repositories/admin_repository.dart

@@ -0,0 +1,38 @@
+import 'package:finlytic_app/core/network/api_client.dart';
+import 'package:finlytic_app/features/admin/models/admin_user_model.dart';
+import 'package:finlytic_app/features/admin/models/admin_create_user_request_dto.dart';
+import 'package:finlytic_app/features/admin/models/admin_update_user_request_dto.dart';
+
+class AdminRepository {
+  final ApiClient apiClient;
+
+  AdminRepository({required this.apiClient});
+
+  Future<List<AdminUserModel>> fetchUsers() async {
+    try {
+      final res = await apiClient.get('/api/v1/admin/users');
+      if (res.statusCode == 200 && res.data != null) {
+        final List<dynamic> data = res.data;
+        return data.map((json) => AdminUserModel.fromJson(json)).toList();
+      }
+      return [];
+    } catch (e) {
+      print('Error fetching admin users: $e');
+      throw Exception('Nutzer konnten nicht geladen werden');
+    }
+  }
+
+  Future<void> createUser(AdminCreateUserRequestDto dto) async {
+    final res = await apiClient.post('/api/v1/admin/users', data: dto.toJson());
+    if (res.statusCode != 200 && res.statusCode != 201) {
+      throw Exception('Erstellen fehlgeschlagen');
+    }
+  }
+
+  Future<void> updateUser(String id, AdminUpdateUserRequestDto dto) async {
+    final res = await apiClient.put('/api/v1/admin/users/$id', data: dto.toJson());
+    if (res.statusCode != 200) {
+      throw Exception('Aktualisieren fehlgeschlagen');
+    }
+  }
+}

FinlyticApp/lib/features/admin/views/admin_users_screen.dart

@@ -0,0 +1,421 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import '../../../core/network/api_client.dart';
+import '../../../core/network/signalr_service.dart';
+import '../../../core/theme/app_theme.dart';
+import '../../../core/widgets/glass_container.dart';
+import '../../../core/widgets/status_badge.dart';
+import '../models/admin_update_user_request_dto.dart';
+import '../models/admin_user_model.dart';
+import '../bloc/admin_bloc.dart';
+import '../repositories/admin_repository.dart';
+import '../widgets/admin_kpi_header.dart';
+import '../widgets/create_user_dialog.dart';
+import '../widgets/edit_user_dialog.dart';
+
+import '../widgets/system_diagnostics_widget.dart';
+
+/// Role-Restricted Admin Panel Screen managing users, service settings, and system health.
+class AdminUsersScreen extends StatelessWidget {
+  final ApiClient apiClient;
+  final SignalRService? signalRService;
+
+  const AdminUsersScreen({
+    super.key,
+    required this.apiClient,
+    this.signalRService,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => AdminBloc(
+        repository: AdminRepository(apiClient: apiClient),
+      )..add(FetchAdminUsers()),
+      child: _AdminUsersScreenContent(
+        apiClient: apiClient,
+        signalRService: signalRService,
+      ),
+    );
+  }
+}
+
+class _AdminUsersScreenContent extends StatefulWidget {
+  final ApiClient apiClient;
+  final SignalRService? signalRService;
+
+  const _AdminUsersScreenContent({
+    required this.apiClient,
+    this.signalRService,
+  });
+
+  @override
+  State<_AdminUsersScreenContent> createState() => _AdminUsersScreenContentState();
+}
+
+class _AdminUsersScreenContentState extends State<_AdminUsersScreenContent> with SingleTickerProviderStateMixin {
+  late TabController _tabController;
+  String _searchQuery = '';
+  String _roleFilter = 'Alle';
+
+  @override
+  void initState() {
+    super.initState();
+    _tabController = TabController(length: 2, vsync: this);
+  }
+
+  @override
+  void dispose() {
+    _tabController.dispose();
+    super.dispose();
+  }
+
+  void _openCreateUser(BuildContext context) async {
+    final res = await showDialog(context: context, builder: (_) => const CreateUserDialog());
+    if (res != null && context.mounted) {
+      context.read<AdminBloc>().add(CreateAdminUser(res));
+    }
+  }
+
+  void _openEditUser(BuildContext context, AdminUserModel user) async {
+    final res = await showDialog(context: context, builder: (_) => EditUserDialog(user: user));
+    if (res != null && context.mounted) {
+      context.read<AdminBloc>().add(UpdateAdminUser(user.id, res as AdminUpdateUserRequestDto));
+    }
+  }
+
+  void _toggleUserActiveStatus(BuildContext context, AdminUserModel user, bool newActive) {
+    final dto = AdminUpdateUserRequestDto(role: user.role, isActive: newActive);
+    context.read<AdminBloc>().add(UpdateAdminUser(user.id, dto));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.transparent,
+      body: BlocBuilder<AdminBloc, AdminState>(
+        builder: (context, state) {
+          final users = state is AdminLoaded ? state.users : <AdminUserModel>[];
+
+          return Padding(
+            padding: const EdgeInsets.all(20),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                // Top Header Ribbon
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Row(
+                          children: [
+                            Container(
+                              padding: const EdgeInsets.all(8),
+                              decoration: BoxDecoration(
+                                color: AppTheme.primaryEmerald.withValues(alpha: 0.15),
+                                borderRadius: BorderRadius.circular(10),
+                                border: Border.all(color: AppTheme.primaryEmerald.withValues(alpha: 0.3)),
+                              ),
+                              child: Icon(Icons.admin_panel_settings_rounded, color: AppTheme.primaryEmerald, size: 22),
+                            ),
+                            const SizedBox(width: 12),
+                            const Text(
+                              'Admin Control Panel',
+                              style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, letterSpacing: -0.5),
+                            ),
+                          ],
+                        ),
+                        const SizedBox(height: 4),
+                        Text(
+                          'Zentrales Management für Nutzer, Mikrodienste & MQTT System-Bus',
+                          style: TextStyle(fontSize: 12, color: AppTheme.textSecondary),
+                        ),
+                      ],
+                    ),
+                    ElevatedButton.icon(
+                      onPressed: () => _openCreateUser(context),
+                      icon: const Icon(Icons.person_add_outlined, size: 18),
+                      label: const Text('Nutzer Anlegen', style: TextStyle(fontWeight: FontWeight.bold)),
+                      style: ElevatedButton.styleFrom(
+                        backgroundColor: AppTheme.primaryEmerald,
+                        foregroundColor: Colors.black,
+                        padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
+                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+                      ),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 16),
+
+                // KPI Header Metrics
+                AdminKpiHeader(
+                  users: users,
+                  signalRService: widget.signalRService,
+                ),
+                const SizedBox(height: 16),
+
+                // Tab Selector Ribbon
+                Container(
+                  decoration: BoxDecoration(
+                    color: AppTheme.glassSurface,
+                    borderRadius: BorderRadius.circular(14),
+                    border: Border.all(color: AppTheme.glassBorder),
+                  ),
+                  child: TabBar(
+                    controller: _tabController,
+                    indicatorColor: AppTheme.primaryEmerald,
+                    indicatorSize: TabBarIndicatorSize.tab,
+                    labelColor: AppTheme.primaryEmerald,
+                    unselectedLabelColor: AppTheme.textMuted,
+                    labelStyle: const TextStyle(fontWeight: FontWeight.bold, fontSize: 13),
+                    indicator: BoxDecoration(
+                      color: AppTheme.primaryEmerald.withValues(alpha: 0.15),
+                      borderRadius: BorderRadius.circular(12),
+                      border: Border.all(color: AppTheme.primaryEmerald.withValues(alpha: 0.4)),
+                    ),
+                    tabs: const [
+                      Tab(icon: Icon(Icons.people_alt_outlined, size: 18), text: 'Nutzerverwaltung'),
+                      Tab(icon: Icon(Icons.monitor_heart_outlined, size: 18), text: 'System-Diagnose & MQTT'),
+                    ],
+                  ),
+                ),
+                const SizedBox(height: 16),
+
+                // Tab Content View
+                Expanded(
+                  child: TabBarView(
+                    controller: _tabController,
+                    children: [
+                      // Tab 1: User Management with Filter & Actions
+                      _buildUserManagementTab(context, state, users),
+
+                      // Tab 2: System Diagnostics & Microservices Health
+                      SystemDiagnosticsWidget(
+                        signalRService: widget.signalRService,
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildUserManagementTab(BuildContext context, AdminState state, List<AdminUserModel> allUsers) {
+    if (state is AdminLoading) {
+      return Center(child: CircularProgressIndicator(color: AppTheme.primaryEmerald));
+    }
+
+    if (state is AdminError) {
+      return Center(
+        child: GlassContainer(
+          padding: const EdgeInsets.all(24),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(Icons.error_outline_rounded, color: AppTheme.accentRed, size: 40),
+              const SizedBox(height: 12),
+              Text(state.message, style: TextStyle(color: AppTheme.textPrimary, fontWeight: FontWeight.bold)),
+              const SizedBox(height: 16),
+              ElevatedButton(
+                onPressed: () => context.read<AdminBloc>().add(FetchAdminUsers()),
+                style: ElevatedButton.styleFrom(backgroundColor: AppTheme.primaryEmerald, foregroundColor: Colors.black),
+                child: const Text('Erneut versuchen'),
+              ),
+            ],
+          ),
+        ),
+      );
+    }
+
+    // Apply Search Query & Role Filter
+    final filteredUsers = allUsers.where((u) {
+      final matchesSearch = u.fullName.toLowerCase().contains(_searchQuery.toLowerCase()) ||
+          u.email.toLowerCase().contains(_searchQuery.toLowerCase());
+      final matchesRole = _roleFilter == 'Alle' || u.role.toLowerCase() == _roleFilter.toLowerCase();
+      return matchesSearch && matchesRole;
+    }).toList();
+
+    return Column(
+      children: [
+        // Filter Bar (Search Field & Role Filter Chips)
+        Row(
+          children: [
+            Expanded(
+              child: TextField(
+                onChanged: (val) => setState(() => _searchQuery = val),
+                decoration: InputDecoration(
+                  hintText: 'Benutzer nach Name oder E-Mail suchen...',
+                  prefixIcon: Icon(Icons.search_rounded, color: AppTheme.textMuted),
+                  suffixIcon: _searchQuery.isNotEmpty
+                      ? IconButton(
+                          icon: const Icon(Icons.clear, size: 18),
+                          onPressed: () => setState(() => _searchQuery = ''),
+                        )
+                      : null,
+                ),
+              ),
+            ),
+            const SizedBox(width: 12),
+            SingleChildScrollView(
+              scrollDirection: Axis.horizontal,
+              child: Row(
+                children: ['Alle', 'Admin', 'Premium', 'User'].map((role) {
+                  final isSelected = _roleFilter == role;
+                  return Padding(
+                    padding: const EdgeInsets.only(right: 6),
+                    child: ChoiceChip(
+                      label: Text(role),
+                      selected: isSelected,
+                      selectedColor: AppTheme.primaryEmerald,
+                      backgroundColor: AppTheme.glassSurface,
+                      labelStyle: TextStyle(
+                        color: isSelected ? Colors.black : AppTheme.textSecondary,
+                        fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+                        fontSize: 12,
+                      ),
+                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+                      side: BorderSide(color: isSelected ? AppTheme.primaryEmerald : AppTheme.glassBorder),
+                      onSelected: (val) {
+                        if (val) setState(() => _roleFilter = role);
+                      },
+                    ),
+                  );
+                }).toList(),
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: 14),
+
+        // User Cards List
+        Expanded(
+          child: filteredUsers.isEmpty
+              ? Center(
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Icon(Icons.person_search_outlined, size: 48, color: AppTheme.textMuted),
+                      const SizedBox(height: 12),
+                      Text(
+                        'Keine passenden Benutzer gefunden.',
+                        style: TextStyle(color: AppTheme.textMuted, fontSize: 14),
+                      ),
+                    ],
+                  ),
+                )
+              : ListView.builder(
+                  itemCount: filteredUsers.length,
+                  itemBuilder: (context, index) {
+                    final u = filteredUsers[index];
+                    final String role = u.role;
+                    final bool isActive = u.isActive;
+
+                    final Color roleColor = role == 'Admin'
+                        ? const Color(0xFFA855F7)
+                        : role == 'Premium'
+                            ? AppTheme.primaryEmerald
+                            : AppTheme.accentCyan;
+
+                    final String initials = _getInitials(u.fullName.isNotEmpty ? u.fullName : u.email);
+
+                    return GlassContainer(
+                      margin: const EdgeInsets.only(bottom: 10),
+                      padding: const EdgeInsets.all(14),
+                      child: Row(
+                        children: [
+                          // Avatar Initials Circle
+                          Container(
+                            width: 42,
+                            height: 42,
+                            alignment: Alignment.center,
+                            decoration: BoxDecoration(
+                              color: roleColor.withValues(alpha: 0.2),
+                              shape: BoxShape.circle,
+                              border: Border.all(color: roleColor, width: 1.5),
+                            ),
+                            child: Text(
+                              initials,
+                              style: TextStyle(fontWeight: FontWeight.bold, color: roleColor, fontSize: 14),
+                            ),
+                          ),
+                          const SizedBox(width: 14),
+
+                          // User Name & Email
+                          Expanded(
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                Row(
+                                  children: [
+                                    Text(
+                                      u.fullName.isNotEmpty ? u.fullName : u.email,
+                                      style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
+                                    ),
+                                    const SizedBox(width: 8),
+                                    StatusBadge(label: role, color: roleColor),
+                                  ],
+                                ),
+                                const SizedBox(height: 2),
+                                Text(
+                                  u.email,
+                                  style: TextStyle(fontSize: 12, color: AppTheme.textSecondary),
+                                ),
+                              ],
+                            ),
+                          ),
+
+                          // Active/Inactive Quick Switch Toggle
+                          Row(
+                            children: [
+                              Column(
+                                crossAxisAlignment: CrossAxisAlignment.end,
+                                children: [
+                                  Text(
+                                    isActive ? 'Aktiv' : 'Gesperrt',
+                                    style: TextStyle(
+                                      fontSize: 12,
+                                      fontWeight: FontWeight.bold,
+                                      color: isActive ? AppTheme.primaryEmerald : AppTheme.accentRed,
+                                    ),
+                                  ),
+                                ],
+                              ),
+                              const SizedBox(width: 8),
+                              Switch(
+                                value: isActive,
+                                activeThumbColor: AppTheme.primaryEmerald,
+                                onChanged: (val) => _toggleUserActiveStatus(context, u, val),
+                              ),
+                              const SizedBox(width: 8),
+                              IconButton.filledTonal(
+                                icon: const Icon(Icons.edit_outlined, size: 18),
+                                tooltip: 'Benutzer Bearbeiten',
+                                onPressed: () => _openEditUser(context, u),
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
+                    );
+                  },
+                ),
+        ),
+      ],
+    );
+  }
+
+  String _getInitials(String name) {
+    if (name.isEmpty) return 'U';
+    final parts = name.trim().split(' ');
+    if (parts.length >= 2) {
+      return '${parts[0][0]}${parts[1][0]}'.toUpperCase();
+    }
+    return name.substring(0, name.length >= 2 ? 2 : 1).toUpperCase();
+  }
+}

FinlyticApp/lib/features/admin/views/service_detail_screen.dart

@@ -0,0 +1,257 @@
+import 'package:flutter/material.dart';
+
+import '../../../core/network/api_client.dart';
+import '../../../core/theme/app_theme.dart';
+import '../../../core/widgets/glass_container.dart';
+import '../../../core/widgets/status_badge.dart';
+
+class ServiceDetailScreen extends StatefulWidget {
+  final String serviceName;
+  final ApiClient apiClient;
+
+  const ServiceDetailScreen({super.key, required this.serviceName, required this.apiClient});
+
+  @override
+  State<ServiceDetailScreen> createState() => _ServiceDetailScreenState();
+}
+
+class _ServiceDetailScreenState extends State<ServiceDetailScreen> {
+  bool _isLoading = true;
+  bool _isSaving = false;
+  String _error = '';
+  List<dynamic> _settings = [];
+  final Map<String, TextEditingController> _controllers = {};
+
+  @override
+  void initState() {
+    super.initState();
+    _fetchServiceDetails();
+  }
+
+  @override
+  void dispose() {
+    for (var ctrl in _controllers.values) {
+      ctrl.dispose();
+    }
+    super.dispose();
+  }
+
+  Future<void> _fetchServiceDetails() async {
+    try {
+      final res = await widget.apiClient.get('/api/v1/admin/settings');
+      if (res.statusCode == 200 && res.data != null) {
+        final groupedSettings = res.data as Map<String, dynamic>;
+        final serviceSettings = groupedSettings[widget.serviceName] ?? [];
+        
+        setState(() {
+          _settings = serviceSettings;
+          for (var s in _settings) {
+            final key = s['key']?.toString() ?? '';
+            final val = s['value']?.toString() ?? '';
+            if (!_controllers.containsKey(key)) {
+              _controllers[key] = TextEditingController(text: val);
+            } else {
+              _controllers[key]!.text = val;
+            }
+          }
+          _isLoading = false;
+        });
+      } else {
+        throw Exception('Failed to load settings');
+      }
+    } catch (e) {
+      setState(() {
+        _error = e.toString();
+        _isLoading = false;
+      });
+    }
+  }
+
+  Future<void> _saveSettings() async {
+    setState(() => _isSaving = true);
+    try {
+      final payload = <String, String>{};
+      _controllers.forEach((k, v) {
+        payload[k] = v.text;
+      });
+
+      final res = await widget.apiClient.put(
+        '/api/v1/admin/settings/${widget.serviceName}',
+        data: payload,
+      );
+
+      if (res.statusCode == 200 || res.statusCode == 204) {
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Row(
+                children: [
+                  const Icon(Icons.check_circle_outline, color: Colors.black),
+                  const SizedBox(width: 8),
+                  Expanded(
+                    child: Text(
+                      'Einstellungen für ${widget.serviceName} gespeichert & via MQTT synchronisiert.',
+                      style: const TextStyle(color: Colors.black, fontWeight: FontWeight.w600),
+                    ),
+                  ),
+                ],
+              ),
+              backgroundColor: AppTheme.primaryEmerald,
+              behavior: SnackBarBehavior.floating,
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+            ),
+          );
+        }
+      } else {
+        throw Exception('Server returned status code ${res.statusCode}');
+      }
+    } catch (e) {
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Fehler beim Speichern: $e'),
+            backgroundColor: AppTheme.accentRed,
+            behavior: SnackBarBehavior.floating,
+          ),
+        );
+      }
+    } finally {
+      if (mounted) setState(() => _isSaving = false);
+    }
+  }
+
+  String _formatLabel(String key) {
+    return key
+        .replaceAll(RegExp(r'(?<!^)(?=[A-Z])'), ' ')
+        .replaceAll('Minutes', '(Minuten)')
+        .replaceAll('Seconds', '(Sekunden)')
+        .replaceAll('Hours', '(Stunden)')
+        .replaceAll('Days', '(Tage)')
+        .replaceAll('Limit', 'Grenzwert')
+        .replaceAll('Period', 'Periode')
+        .replaceAll('Percentage', '(%)')
+        .replaceAll('Multiplier', 'Multiplikator');
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: AppTheme.darkBackground,
+      appBar: AppBar(
+        backgroundColor: Colors.transparent,
+        elevation: 0,
+        title: Text('${widget.serviceName} Details', style: const TextStyle(fontWeight: FontWeight.bold)),
+      ),
+      body: _isLoading
+          ? const Center(child: CircularProgressIndicator())
+          : _error.isNotEmpty
+              ? Center(child: Text(_error, style: const TextStyle(color: Colors.red)))
+              : SingleChildScrollView(
+                  padding: const EdgeInsets.all(24),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      GlassContainer(
+                        padding: const EdgeInsets.all(24),
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Row(
+                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                              children: [
+                                const Text('Einstellungen & Konfiguration', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
+                                StatusBadge(label: 'MQTT Sync', color: AppTheme.primaryEmerald),
+                              ],
+                            ),
+                            const SizedBox(height: 16),
+                            const Divider(color: Colors.white10),
+                            const SizedBox(height: 16),
+                            if (_settings.isEmpty)
+                              const Text('Keine spezifischen Einstellungen gefunden.')
+                            else
+                              ..._settings.map((s) {
+                                final key = s['key']?.toString() ?? '';
+                                final desc = s['description']?.toString() ?? '';
+                                final controller = _controllers[key];
+                                if (controller == null) return const SizedBox.shrink();
+
+                                final isBoolean = controller.text.toLowerCase() == 'true' || controller.text.toLowerCase() == 'false';
+
+                                if (isBoolean) {
+                                  final boolVal = controller.text.toLowerCase() == 'true';
+                                  return Container(
+                                    margin: const EdgeInsets.only(bottom: 12),
+                                    padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
+                                    decoration: BoxDecoration(
+                                      color: AppTheme.glassSurface,
+                                      borderRadius: BorderRadius.circular(12),
+                                      border: Border.all(color: AppTheme.glassBorder),
+                                    ),
+                                    child: SwitchListTile(
+                                      contentPadding: EdgeInsets.zero,
+                                      title: Text(_formatLabel(key), style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 14)),
+                                      subtitle: desc.isNotEmpty ? Text(desc, style: TextStyle(fontSize: 11, color: AppTheme.textMuted)) : null,
+                                      value: boolVal,
+                                      activeThumbColor: AppTheme.primaryEmerald,
+                                      onChanged: (val) => setState(() => controller.text = val.toString()),
+                                    ),
+                                  );
+                                }
+
+                                return Padding(
+                                  padding: const EdgeInsets.only(bottom: 14),
+                                  child: TextField(
+                                    controller: controller,
+                                    style: const TextStyle(color: Colors.white),
+                                    decoration: InputDecoration(
+                                      labelText: _formatLabel(key),
+                                      helperText: desc.isNotEmpty ? desc : null,
+                                      helperMaxLines: 2,
+                                      prefixIcon: Icon(Icons.tune_outlined, size: 18, color: AppTheme.primaryEmerald),
+                                    ),
+                                  ),
+                                );
+                              }).toList(),
+
+                            const SizedBox(height: 12),
+                            if (_settings.isNotEmpty)
+                              SizedBox(
+                                width: double.infinity,
+                                child: ElevatedButton.icon(
+                                  onPressed: _isSaving ? null : _saveSettings,
+                                  icon: _isSaving
+                                      ? const SizedBox(width: 16, height: 16, child: CircularProgressIndicator(strokeWidth: 2, color: Colors.black))
+                                      : const Icon(Icons.save_outlined),
+                                  label: Text(
+                                    _isSaving ? 'Speichere & Sende via MQTT...' : 'Einstellungen Speichern',
+                                    style: const TextStyle(fontWeight: FontWeight.bold),
+                                  ),
+                                  style: ElevatedButton.styleFrom(
+                                    backgroundColor: AppTheme.primaryEmerald,
+                                    foregroundColor: Colors.black,
+                                    padding: const EdgeInsets.symmetric(vertical: 14),
+                                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+                                  ),
+                                ),
+                              ),
+                          ],
+                        ),
+                      ),
+                      const SizedBox(height: 24),
+                      GlassContainer(
+                        padding: const EdgeInsets.all(24),
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            const Text('Statistiken', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
+                            const SizedBox(height: 16),
+                            const Text('Live-Statistiken werden noch implementiert...', style: TextStyle(fontStyle: FontStyle.italic, color: Colors.white54)),
+                          ],
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+    );
+  }
+}

FinlyticApp/lib/features/admin/widgets/admin_kpi_header.dart

@@ -0,0 +1,224 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import '../../../core/network/signalr_service.dart';
+import '../../../core/theme/app_theme.dart';
+import '../../../core/widgets/glass_container.dart';
+import '../models/admin_user_model.dart';
+
+/// Modern KPI Header Card Row for Admin Panel Dashboard Overview.
+/// Displays real-time live metrics for Users, Administrators, Microservices Health, and MQTT Bus.
+/// Continuously updates live EXCLUSIVELY over SignalR WebSockets (`/hubs/health`).
+class AdminKpiHeader extends StatefulWidget {
+  final List<AdminUserModel> users;
+  final SignalRService? signalRService;
+
+  const AdminKpiHeader({
+    super.key,
+    required this.users,
+    this.signalRService,
+  });
+
+  @override
+  State<AdminKpiHeader> createState() => _AdminKpiHeaderState();
+}
+
+class _AdminKpiHeaderState extends State<AdminKpiHeader> {
+  int? _totalServices;
+  int? _onlineServices;
+  bool _mqttConnected = false;
+  StreamSubscription<List<Map<String, dynamic>>>? _healthSub;
+
+  @override
+  void initState() {
+    super.initState();
+
+    if (widget.signalRService != null) {
+      _healthSub = widget.signalRService!.healthStream.listen((data) {
+        if (mounted && data.isNotEmpty) {
+          final int total = data.length;
+          final int online = data.where((item) => item['status']?.toString().toLowerCase() == 'online').length;
+          setState(() {
+            _totalServices = total;
+            _onlineServices = online;
+            _mqttConnected = online > 0;
+          });
+        }
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _healthSub?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final totalUsers = widget.users.length;
+    final activeUsers = widget.users.where((u) => u.isActive).length;
+    final adminCount = widget.users.where((u) => u.role.toLowerCase() == 'admin').length;
+    final isMobile = MediaQuery.of(context).size.width < 700;
+
+    final String servicesValue = _totalServices != null ? '$_onlineServices / $_totalServices' : 'SignalR...';
+
+    final String servicesSubtitle = (_onlineServices == _totalServices && _totalServices != null && _totalServices! > 0
+        ? 'Alle Dienste online (WebSocket)'
+        : (_onlineServices != null ? '$_onlineServices von $_totalServices erreichbar' : 'Verbinde WebSocket...'));
+
+    final Color servicesColor = (_onlineServices == _totalServices && _totalServices != null && _totalServices! > 0)
+        ? AppTheme.primaryEmerald
+        : (_onlineServices != null && _onlineServices! > 0 ? AppTheme.accentCyan : AppTheme.accentRed);
+
+    final cards = [
+      _KpiCard(
+        title: 'Benutzer Gesamt',
+        value: totalUsers.toString(),
+        subtitle: '$activeUsers aktiv • ${totalUsers - activeUsers} gesperrt',
+        icon: Icons.people_alt_rounded,
+        accentColor: AppTheme.primaryEmerald,
+      ),
+      _KpiCard(
+        title: 'Administratoren',
+        value: adminCount.toString(),
+        subtitle: 'Vollzugriff auf System',
+        icon: Icons.admin_panel_settings_rounded,
+        accentColor: const Color(0xFFA855F7), // Purple accent
+      ),
+      _KpiCard(
+        title: 'Mikrodienste',
+        value: servicesValue,
+        subtitle: servicesSubtitle,
+        icon: Icons.dns_rounded,
+        accentColor: servicesColor,
+        showPulse: _onlineServices != null && _onlineServices! > 0,
+      ),
+      _KpiCard(
+        title: 'MQTT Live-Bus',
+        value: _mqttConnected ? 'Aktiv' : 'Offline',
+        subtitle: _mqttConnected ? 'SignalR & RPC Bereit' : 'Warte auf WebSocket',
+        icon: Icons.sensors_rounded,
+        accentColor: _mqttConnected ? const Color(0xFF10B981) : AppTheme.accentRed,
+      ),
+    ];
+
+    if (isMobile) {
+      return GridView.count(
+        crossAxisCount: 2,
+        shrinkWrap: true,
+        physics: const NeverScrollableScrollPhysics(),
+        crossAxisSpacing: 10,
+        mainAxisSpacing: 10,
+        childAspectRatio: 1.5,
+        children: cards,
+      );
+    }
+
+    return Row(
+      children: cards
+          .map((card) => Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 4),
+                  child: card,
+                ),
+              ))
+          .toList(),
+    );
+  }
+}
+
+class _KpiCard extends StatelessWidget {
+  final String title;
+  final String value;
+  final String subtitle;
+  final IconData icon;
+  final Color accentColor;
+  final bool showPulse;
+
+  const _KpiCard({
+    required this.title,
+    required this.value,
+    required this.subtitle,
+    required this.icon,
+    required this.accentColor,
+    this.showPulse = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GlassContainer(
+      padding: const EdgeInsets.all(14),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                title,
+                style: TextStyle(
+                  fontSize: 12,
+                  fontWeight: FontWeight.w600,
+                  color: AppTheme.textMuted,
+                ),
+              ),
+              Container(
+                padding: const EdgeInsets.all(6),
+                decoration: BoxDecoration(
+                  color: accentColor.withValues(alpha: 0.15),
+                  shape: BoxShape.circle,
+                  border: Border.all(color: accentColor.withValues(alpha: 0.3)),
+                ),
+                child: Icon(icon, size: 16, color: accentColor),
+              ),
+            ],
+          ),
+          const SizedBox(height: 6),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.baseline,
+            textBaseline: TextBaseline.alphabetic,
+            children: [
+              Text(
+                value,
+                style: TextStyle(
+                  fontSize: 22,
+                  fontWeight: FontWeight.bold,
+                  color: AppTheme.textPrimary,
+                  letterSpacing: -0.5,
+                ),
+              ),
+              if (showPulse) ...[
+                const SizedBox(width: 8),
+                Container(
+                  width: 8,
+                  height: 8,
+                  decoration: BoxDecoration(
+                    color: AppTheme.primaryEmerald,
+                    shape: BoxShape.circle,
+                    boxShadow: [
+                      BoxShadow(
+                        color: AppTheme.primaryEmerald.withValues(alpha: 0.6),
+                        blurRadius: 6,
+                        spreadRadius: 2,
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ],
+          ),
+          const SizedBox(height: 4),
+          Text(
+            subtitle,
+            style: TextStyle(
+              fontSize: 11,
+              color: AppTheme.textSecondary,
+            ),
+            overflow: TextOverflow.ellipsis,
+          ),
+        ],
+      ),
+    );
+  }
+}

FinlyticApp/lib/features/admin/widgets/create_user_dialog.dart

@@ -0,0 +1,198 @@
+import 'package:flutter/material.dart';
+import '../../../core/theme/app_theme.dart';
+import '../../../core/widgets/glass_container.dart';
+import '../models/admin_create_user_request_dto.dart';
+
+/// Modal dialog for creating new user accounts by Admin.
+class CreateUserDialog extends StatefulWidget {
+  const CreateUserDialog({super.key});
+
+  @override
+  State<CreateUserDialog> createState() => _CreateUserDialogState();
+}
+
+class _CreateUserDialogState extends State<CreateUserDialog> {
+  final _emailController = TextEditingController();
+  final _passwordController = TextEditingController();
+  final _nameController = TextEditingController();
+  String _selectedRole = 'User';
+  bool _obscurePassword = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      backgroundColor: AppTheme.cardSurface,
+      insetPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 24),
+      child: GlassContainer(
+        borderRadius: 20,
+        padding: const EdgeInsets.all(24),
+        child: SingleChildScrollView(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                children: [
+                  Container(
+                    padding: const EdgeInsets.all(8),
+                    decoration: BoxDecoration(
+                      color: AppTheme.primaryEmerald.withValues(alpha: 0.15),
+                      shape: BoxShape.circle,
+                      border: Border.all(color: AppTheme.primaryEmerald.withValues(alpha: 0.3)),
+                    ),
+                    child: Icon(Icons.person_add_outlined, color: AppTheme.primaryEmerald, size: 20),
+                  ),
+                  const SizedBox(width: 12),
+                  const Text(
+                    'Neuen Benutzer Anlegen',
+                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 16),
+              const Divider(color: Colors.white10),
+              const SizedBox(height: 16),
+              TextField(
+                controller: _nameController,
+                decoration: const InputDecoration(
+                  labelText: 'Vollständiger Name',
+                  prefixIcon: Icon(Icons.badge_outlined, size: 20),
+                ),
+              ),
+              const SizedBox(height: 12),
+              TextField(
+                controller: _emailController,
+                keyboardType: TextInputType.emailAddress,
+                decoration: const InputDecoration(
+                  labelText: 'E-Mail Adresse',
+                  prefixIcon: Icon(Icons.email_outlined, size: 20),
+                ),
+              ),
+              const SizedBox(height: 12),
+              TextField(
+                controller: _passwordController,
+                obscureText: _obscurePassword,
+                decoration: InputDecoration(
+                  labelText: 'Passwort',
+                  prefixIcon: const Icon(Icons.lock_outline, size: 20),
+                  suffixIcon: IconButton(
+                    icon: Icon(_obscurePassword ? Icons.visibility_outlined : Icons.visibility_off_outlined, size: 20),
+                    onPressed: () => setState(() => _obscurePassword = !_obscurePassword),
+                  ),
+                ),
+              ),
+              const SizedBox(height: 16),
+              Text(
+                'Benutzerrolle Zuweisen',
+                style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: AppTheme.textSecondary),
+              ),
+              const SizedBox(height: 8),
+              Row(
+                children: [
+                  _RoleChip(
+                    role: 'User',
+                    label: 'User',
+                    isSelected: _selectedRole == 'User',
+                    onTap: () => setState(() => _selectedRole = 'User'),
+                  ),
+                  const SizedBox(width: 8),
+                  _RoleChip(
+                    role: 'Premium',
+                    label: 'Premium',
+                    isSelected: _selectedRole == 'Premium',
+                    onTap: () => setState(() => _selectedRole = 'Premium'),
+                  ),
+                  const SizedBox(width: 8),
+                  _RoleChip(
+                    role: 'Admin',
+                    label: 'Admin',
+                    isSelected: _selectedRole == 'Admin',
+                    onTap: () => setState(() => _selectedRole = 'Admin'),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 24),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
+                  TextButton(
+                    onPressed: () => Navigator.pop(context),
+                    child: Text('Abbrechen', style: TextStyle(color: AppTheme.textMuted)),
+                  ),
+                  const SizedBox(width: 8),
+                  ElevatedButton(
+                    onPressed: () {
+                      if (_emailController.text.trim().isEmpty) return;
+                      Navigator.pop(context, AdminCreateUserRequestDto(
+                        email: _emailController.text.trim(),
+                        password: _passwordController.text.trim(),
+                        fullName: _nameController.text.trim(),
+                        role: _selectedRole,
+                      ));
+                    },
+                    style: ElevatedButton.styleFrom(
+                      backgroundColor: AppTheme.primaryEmerald,
+                      foregroundColor: Colors.black,
+                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+                    ),
+                    child: const Text('Nutzer Anlegen', style: TextStyle(fontWeight: FontWeight.bold)),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _RoleChip extends StatelessWidget {
+  final String role;
+  final String label;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  const _RoleChip({
+    required this.role,
+    required this.label,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final Color roleColor = role == 'Admin'
+        ? const Color(0xFFA855F7)
+        : role == 'Premium'
+            ? AppTheme.primaryEmerald
+            : AppTheme.accentCyan;
+
+    return Expanded(
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(10),
+        child: Container(
+          padding: const EdgeInsets.symmetric(vertical: 10),
+          alignment: Alignment.center,
+          decoration: BoxDecoration(
+            color: isSelected ? roleColor.withValues(alpha: 0.2) : AppTheme.glassSurface,
+            borderRadius: BorderRadius.circular(10),
+            border: Border.all(
+              color: isSelected ? roleColor : AppTheme.glassBorder,
+              width: isSelected ? 1.5 : 1,
+            ),
+          ),
+          child: Text(
+            label,
+            style: TextStyle(
+              fontSize: 12,
+              fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+              color: isSelected ? AppTheme.textPrimary : AppTheme.textSecondary,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

FinlyticApp/lib/features/admin/widgets/edit_user_dialog.dart

@@ -0,0 +1,199 @@
+import 'package:flutter/material.dart';
+import '../../../core/theme/app_theme.dart';
+import '../../../core/widgets/glass_container.dart';
+import '../models/admin_user_model.dart';
+import '../models/admin_update_user_request_dto.dart';
+
+/// Modal dialog for editing user role or active status by Admin.
+class EditUserDialog extends StatefulWidget {
+  final AdminUserModel user;
+
+  const EditUserDialog({super.key, required this.user});
+
+  @override
+  State<EditUserDialog> createState() => _EditUserDialogState();
+}
+
+class _EditUserDialogState extends State<EditUserDialog> {
+  late String _role;
+  late bool _isActive;
+
+  @override
+  void initState() {
+    super.initState();
+    _role = widget.user.role.isNotEmpty ? widget.user.role : 'User';
+    _isActive = widget.user.isActive;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final String email = widget.user.email;
+    final String name = widget.user.fullName;
+
+    return Dialog(
+      backgroundColor: Colors.transparent,
+      insetPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 24),
+      child: GlassContainer(
+        borderRadius: 20,
+        padding: const EdgeInsets.all(24),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Container(
+                  padding: const EdgeInsets.all(8),
+                  decoration: BoxDecoration(
+                    color: AppTheme.accentCyan.withValues(alpha: 0.15),
+                    shape: BoxShape.circle,
+                    border: Border.all(color: AppTheme.accentCyan.withValues(alpha: 0.3)),
+                  ),
+                  child: Icon(Icons.manage_accounts_outlined, color: AppTheme.accentCyan, size: 20),
+                ),
+                const SizedBox(width: 12),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        name.isNotEmpty ? name : 'Benutzer Bearbeiten',
+                        style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                      Text(
+                        email,
+                        style: TextStyle(fontSize: 12, color: AppTheme.textSecondary),
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: 16),
+            const Divider(color: Colors.white10),
+            const SizedBox(height: 16),
+            Text(
+              'Rolle Ändern',
+              style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: AppTheme.textSecondary),
+            ),
+            const SizedBox(height: 8),
+            Row(
+              children: [
+                _RoleChip(
+                  role: 'User',
+                  label: 'User',
+                  isSelected: _role == 'User',
+                  onTap: () => setState(() => _role = 'User'),
+                ),
+                const SizedBox(width: 8),
+                _RoleChip(
+                  role: 'Premium',
+                  label: 'Premium',
+                  isSelected: _role == 'Premium',
+                  onTap: () => setState(() => _role = 'Premium'),
+                ),
+                const SizedBox(width: 8),
+                _RoleChip(
+                  role: 'Admin',
+                  label: 'Admin',
+                  isSelected: _role == 'Admin',
+                  onTap: () => setState(() => _role = 'Admin'),
+                ),
+              ],
+            ),
+            const SizedBox(height: 16),
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+              decoration: BoxDecoration(
+                color: AppTheme.glassSurface,
+                borderRadius: BorderRadius.circular(12),
+                border: Border.all(color: AppTheme.glassBorder),
+              ),
+              child: SwitchListTile(
+                contentPadding: EdgeInsets.zero,
+                title: const Text('Konto Status', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 14)),
+                subtitle: Text(_isActive ? 'Aktiv (Zugriff gewährt)' : 'Gesperrt (Zugriff verweigert)',
+                    style: TextStyle(fontSize: 12, color: _isActive ? AppTheme.primaryEmerald : AppTheme.accentRed)),
+                value: _isActive,
+                activeThumbColor: AppTheme.primaryEmerald,
+                onChanged: (val) => setState(() => _isActive = val),
+              ),
+            ),
+            const SizedBox(height: 24),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                TextButton(
+                  onPressed: () => Navigator.pop(context),
+                  child: Text('Abbrechen', style: TextStyle(color: AppTheme.textMuted)),
+                ),
+                const SizedBox(width: 8),
+                ElevatedButton(
+                  onPressed: () => Navigator.pop(context, AdminUpdateUserRequestDto(role: _role, isActive: _isActive)),
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: AppTheme.primaryEmerald,
+                    foregroundColor: Colors.black,
+                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+                  ),
+                  child: const Text('Speichern', style: TextStyle(fontWeight: FontWeight.bold)),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _RoleChip extends StatelessWidget {
+  final String role;
+  final String label;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  const _RoleChip({
+    required this.role,
+    required this.label,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final Color roleColor = role == 'Admin'
+        ? const Color(0xFFA855F7)
+        : role == 'Premium'
+            ? AppTheme.primaryEmerald
+            : AppTheme.accentCyan;
+
+    return Expanded(
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(10),
+        child: Container(
+          padding: const EdgeInsets.symmetric(vertical: 10),
+          alignment: Alignment.center,
+          decoration: BoxDecoration(
+            color: isSelected ? roleColor.withValues(alpha: 0.2) : AppTheme.glassSurface,
+            borderRadius: BorderRadius.circular(10),
+            border: Border.all(
+              color: isSelected ? roleColor : AppTheme.glassBorder,
+              width: isSelected ? 1.5 : 1,
+            ),
+          ),
+          child: Text(
+            label,
+            style: TextStyle(
+              fontSize: 12,
+              fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+              color: isSelected ? AppTheme.textPrimary : AppTheme.textSecondary,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

FinlyticApp/lib/features/admin/widgets/pipeline_settings_widget.dart

@@ -0,0 +1,416 @@
+import 'package:flutter/material.dart';
+import '../../../core/network/api_client.dart';
+import '../../../core/theme/app_theme.dart';
+import '../../../core/widgets/glass_container.dart';
+import '../../../core/widgets/status_badge.dart';
+
+/// Service Metadata Info used for Admin Config Navigation
+class ServiceConfigMeta {
+  final String key;
+  final String displayName;
+  final String description;
+  final IconData icon;
+  final Color accentColor;
+
+  const ServiceConfigMeta({
+    required this.key,
+    required this.displayName,
+    required this.description,
+    required this.icon,
+    required this.accentColor,
+  });
+}
+
+/// Centralized Service Configuration Management Widget for Admin Panel.
+class PipelineSettingsWidget extends StatefulWidget {
+  final ApiClient? apiClient;
+
+  const PipelineSettingsWidget({super.key, this.apiClient});
+
+  @override
+  State<PipelineSettingsWidget> createState() => _PipelineSettingsWidgetState();
+}
+
+class _PipelineSettingsWidgetState extends State<PipelineSettingsWidget> {
+  String _selectedServiceKey = 'FinlyticAssets';
+  bool _isLoading = false;
+  bool _isSaving = false;
+
+  static const List<ServiceConfigMeta> _services = [
+    ServiceConfigMeta(
+      key: 'FinlyticAssets',
+      displayName: 'Asset Katalog & Logos',
+      description: 'Verwaltet ISIN Asset-Stammdaten & Trade Republic Logo Fetcher',
+      icon: Icons.inventory_2_outlined,
+      accentColor: Color(0xFF00E5FF),
+    ),
+    ServiceConfigMeta(
+      key: 'FinlyticNews',
+      displayName: 'News Scraper & AI',
+      description: 'RSS Web Scraper Intervall & Entwurf-Retention',
+      icon: Icons.newspaper_outlined,
+      accentColor: Color(0xFF3B82F6),
+    ),
+    ServiceConfigMeta(
+      key: 'FinlyticTechnicalAnalysis',
+      displayName: 'Technische Analyse',
+      description: 'EMA/SMA Perioden, RSI Grenzwerte & Supertrend Multiplikator',
+      icon: Icons.show_chart_outlined,
+      accentColor: Color(0xFF8B5CF6),
+    ),
+    ServiceConfigMeta(
+      key: 'FinlyticSentiment',
+      displayName: 'Sentiment NLP',
+      description: 'NLP Vertrauens-Schwellenwerte & Text-Batching',
+      icon: Icons.psychology_outlined,
+      accentColor: Color(0xFFEC4899),
+    ),
+    ServiceConfigMeta(
+      key: 'FinlyticAnalyzer',
+      displayName: 'Analyzer Signal Engine',
+      description: 'Scraper Cron-Schedule & Minimaler Signal-Score',
+      icon: Icons.analytics_outlined,
+      accentColor: Color(0xFFF59E0B),
+    ),
+    ServiceConfigMeta(
+      key: 'FinlyticTrades',
+      displayName: 'Trade Manager',
+      description: 'ATR Stop-Loss Multiplikator, Risiko-Prozente & Positionen',
+      icon: Icons.candlestick_chart_outlined,
+      accentColor: Color(0xFF10B981),
+    ),
+    ServiceConfigMeta(
+      key: 'FinlyticFundamentals',
+      displayName: 'Fundamentaldaten',
+      description: 'Cache TTL Dauer & Yahoo Finance Fallback',
+      icon: Icons.corporate_fare_outlined,
+      accentColor: Color(0xFF06B6D4),
+    ),
+  ];
+
+  final Map<String, Map<String, TextEditingController>> _controllers = {
+    'FinlyticAssets': {
+      'TradeRepublicMaxRequestPageSize': TextEditingController(text: '100'),
+      'AssetUpdateTypeDelay': TextEditingController(text: '0'),
+      'BatchAssetUpdateDelay': TextEditingController(text: '5'),
+    },
+    'FinlyticNews': {
+      'ScrapingIntervalMinutes': TextEditingController(text: '15'),
+      'PollingFrequencyMinutes': TextEditingController(text: '15'),
+      'ArticleRetentionDays': TextEditingController(text: '90'),
+      'DefaultPageSize': TextEditingController(text: '20'),
+    },
+    'FinlyticTechnicalAnalysis': {
+      'EmaShortPeriod': TextEditingController(text: '20'),
+      'SmaMediumPeriod': TextEditingController(text: '50'),
+      'SmaLongPeriod': TextEditingController(text: '200'),
+      'RsiOverboughtLimit': TextEditingController(text: '70'),
+      'RsiOversoldLimit': TextEditingController(text: '30'),
+      'SupertrendMultiplier': TextEditingController(text: '3.0'),
+    },
+    'FinlyticSentiment': {
+      'MinConfidenceScore': TextEditingController(text: '0.70'),
+      'MaxBatchSize': TextEditingController(text: '50'),
+    },
+    'FinlyticAnalyzer': {
+      'ScanCronSchedule': TextEditingController(text: '0 */1 * * *'),
+      'MinSignalScore': TextEditingController(text: '75'),
+      'EnableLog_MqttHealthPing': TextEditingController(text: 'false'),
+      'EnableLog_MqttGeneral': TextEditingController(text: 'true'),
+      'EnableLog_AnalyzerAuto': TextEditingController(text: 'true'),
+      'EnableLog_AnalyzerManual': TextEditingController(text: 'true'),
+      'EnableLog_DatabaseOps': TextEditingController(text: 'true'),
+    },
+    'FinlyticTrades': {
+      'AtrStopLossMultiplier': TextEditingController(text: '1.5'),
+      'RiskPerTradePercentage': TextEditingController(text: '1.0'),
+      'MaxOpenPositions': TextEditingController(text: '5'),
+    },
+    'FinlyticFundamentals': {
+      'CacheTtlHours': TextEditingController(text: '24'),
+      'EnableYahooFallback': TextEditingController(text: 'true'),
+    },
+  };
+
+  @override
+  void initState() {
+    super.initState();
+    _fetchSettings();
+  }
+
+  Future<void> _fetchSettings() async {
+    if (widget.apiClient == null) return;
+
+    setState(() => _isLoading = true);
+    try {
+      final res = await widget.apiClient!.get('/api/v1/admin/settings');
+      if (res.statusCode == 200 && res.data is Map) {
+        final Map<String, dynamic> data = Map<String, dynamic>.from(res.data);
+        data.forEach((svc, items) {
+          if (items is List) {
+            _controllers.putIfAbsent(svc, () => {});
+            for (var item in items) {
+              final key = item['key']?.toString();
+              final val = item['value']?.toString();
+              if (key != null && val != null) {
+                if (_controllers[svc]!.containsKey(key)) {
+                  _controllers[svc]![key]!.text = val;
+                } else {
+                  _controllers[svc]![key] = TextEditingController(text: val);
+                }
+              }
+            }
+          }
+        });
+      }
+    } catch (_) {
+      // Retain standard default in-memory values
+    } finally {
+      if (mounted) setState(() => _isLoading = false);
+    }
+  }
+
+  Future<void> _saveSettings() async {
+    setState(() => _isSaving = true);
+    try {
+      final currentSvcControllers = _controllers[_selectedServiceKey] ?? {};
+      final payload = <String, String>{};
+      currentSvcControllers.forEach((k, v) {
+        payload[k] = v.text;
+      });
+
+      if (widget.apiClient != null) {
+        await widget.apiClient!.put('/api/v1/admin/settings/$_selectedServiceKey', data: payload);
+      }
+
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Row(
+              children: [
+                const Icon(Icons.check_circle_outline, color: Colors.black),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: Text(
+                    'Einstellungen für $_selectedServiceKey gespeichert & via MQTT synchronisiert.',
+                    style: const TextStyle(color: Colors.black, fontWeight: FontWeight.w600),
+                  ),
+                ),
+              ],
+            ),
+            backgroundColor: AppTheme.primaryEmerald,
+            behavior: SnackBarBehavior.floating,
+            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+          ),
+        );
+      }
+    } catch (ex) {
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Fehler beim Speichern: $ex'),
+            backgroundColor: AppTheme.accentRed,
+            behavior: SnackBarBehavior.floating,
+          ),
+        );
+      }
+    } finally {
+      if (mounted) setState(() => _isSaving = false);
+    }
+  }
+
+
+  @override
+  Widget build(BuildContext context) {
+    final activeService = _services.firstWhere((s) => s.key == _selectedServiceKey, orElse: () => _services.first);
+    final activeControllers = _controllers[_selectedServiceKey] ?? {};
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        // Service Selection Ribbon
+        SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          child: Row(
+            children: _services.map((svc) {
+              final isSelected = svc.key == _selectedServiceKey;
+              return Padding(
+                padding: const EdgeInsets.only(right: 8, bottom: 12),
+                child: InkWell(
+                  onTap: () => setState(() => _selectedServiceKey = svc.key),
+                  borderRadius: BorderRadius.circular(12),
+                  child: Container(
+                    padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
+                    decoration: BoxDecoration(
+                      color: isSelected ? svc.accentColor.withValues(alpha: 0.15) : AppTheme.glassSurface,
+                      borderRadius: BorderRadius.circular(12),
+                      border: Border.all(
+                        color: isSelected ? svc.accentColor : AppTheme.glassBorder,
+                        width: isSelected ? 1.5 : 1,
+                      ),
+                    ),
+                    child: Row(
+                      children: [
+                        Icon(svc.icon, size: 18, color: isSelected ? svc.accentColor : AppTheme.textMuted),
+                        const SizedBox(width: 8),
+                        Text(
+                          svc.displayName,
+                          style: TextStyle(
+                            fontSize: 13,
+                            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+                            color: isSelected ? AppTheme.textPrimary : AppTheme.textSecondary,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              );
+            }).toList(),
+          ),
+        ),
+        const SizedBox(height: 8),
+
+        // Service Details & Config Panel
+        GlassContainer(
+          padding: const EdgeInsets.all(20),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Row(
+                    children: [
+                      Container(
+                        padding: const EdgeInsets.all(10),
+                        decoration: BoxDecoration(
+                          color: activeService.accentColor.withValues(alpha: 0.15),
+                          borderRadius: BorderRadius.circular(10),
+                          border: Border.all(color: activeService.accentColor.withValues(alpha: 0.3)),
+                        ),
+                        child: Icon(activeService.icon, color: activeService.accentColor, size: 22),
+                      ),
+                      const SizedBox(width: 14),
+                      Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            activeService.displayName,
+                            style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
+                          ),
+                          Text(
+                            activeService.description,
+                            style: TextStyle(fontSize: 12, color: AppTheme.textSecondary),
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                  if (_isLoading)
+                    SizedBox(width: 18, height: 18, child: CircularProgressIndicator(strokeWidth: 2, color: AppTheme.primaryEmerald))
+                  else
+                    StatusBadge(label: 'MQTT Sync', color: AppTheme.primaryEmerald),
+                ],
+              ),
+              const SizedBox(height: 16),
+              const Divider(color: Colors.white10),
+              const SizedBox(height: 16),
+
+              // Parameter Input List
+              ...activeControllers.entries.map((entry) {
+                final keyName = entry.key;
+                final controller = entry.value;
+                final isBoolean = controller.text.toLowerCase() == 'true' || controller.text.toLowerCase() == 'false';
+
+                if (isBoolean) {
+                  final boolVal = controller.text.toLowerCase() == 'true';
+                  return Container(
+                    margin: const EdgeInsets.only(bottom: 12),
+                    padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
+                    decoration: BoxDecoration(
+                      color: AppTheme.glassSurface,
+                      borderRadius: BorderRadius.circular(12),
+                      border: Border.all(color: AppTheme.glassBorder),
+                    ),
+                    child: SwitchListTile(
+                      contentPadding: EdgeInsets.zero,
+                      title: Text(_formatLabel(keyName), style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 14)),
+                      //subtitle: Text('Schlüssel: $keyName', style: TextStyle(fontSize: 11, color: AppTheme.textMuted)),
+                      value: boolVal,
+                      activeThumbColor: activeService.accentColor,
+                      onChanged: (val) => setState(() => controller.text = val.toString()),
+                    ),
+                  );
+                }
+
+                return Padding(
+                  padding: const EdgeInsets.only(bottom: 14),
+                  child: Row(
+                    children: [
+                      Expanded(
+                        child: TextField(
+                          controller: controller,
+                          decoration: InputDecoration(
+                            labelText: _formatLabel(keyName),
+                            //helperText: 'Schlüssel: $keyName',
+                            prefixIcon: Icon(Icons.tune_outlined, size: 18, color: activeService.accentColor),
+                          ),
+                        ),
+                      ),
+                      /*if (isNumeric) ...[
+                        const SizedBox(width: 8),
+                        IconButton.filledTonal(
+                          icon: const Icon(Icons.remove, size: 18),
+                          onPressed: () => setState(() => _adjustNumericValue(controller, -1.0, isDouble: isDouble)),
+                        ),
+                        IconButton.filledTonal(
+                          icon: const Icon(Icons.add, size: 18),
+                          onPressed: () => setState(() => _adjustNumericValue(controller, 1.0, isDouble: isDouble)),
+                        ),
+                      ],*/
+                    ],
+                  ),
+                );
+              }),
+
+              const SizedBox(height: 12),
+              SizedBox(
+                width: double.infinity,
+                child: ElevatedButton.icon(
+                  onPressed: _isSaving ? null : _saveSettings,
+                  icon: _isSaving
+                      ? const SizedBox(width: 16, height: 16, child: CircularProgressIndicator(strokeWidth: 2, color: Colors.black))
+                      : const Icon(Icons.save_outlined),
+                  label: Text(
+                    _isSaving ? 'Speichere & Sende via MQTT...' : 'Einstellungen für ${activeService.displayName} Speichern',
+                    style: const TextStyle(fontWeight: FontWeight.bold),
+                  ),
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: AppTheme.primaryEmerald,
+                    foregroundColor: Colors.black,
+                    padding: const EdgeInsets.symmetric(vertical: 14),
+                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  String _formatLabel(String key) {
+    return key
+        .replaceAll(RegExp(r'(?<!^)(?=[A-Z])'), ' ')
+        .replaceAll('Minutes', '(Minuten)')
+        .replaceAll('Seconds', '(Sekunden)')
+        .replaceAll('Hours', '(Stunden)')
+        .replaceAll('Days', '(Tage)')
+        .replaceAll('Limit', 'Grenzwert')
+        .replaceAll('Period', 'Periode')
+        .replaceAll('Percentage', '(%)')
+        .replaceAll('Multiplier', 'Multiplikator');
+  }
+}

FinlyticApp/lib/features/admin/widgets/system_diagnostics_widget.dart

@@ -0,0 +1,257 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import '../../../core/network/api_client.dart';
+import '../../../core/network/signalr_service.dart';
+import '../../../core/theme/app_theme.dart';
+import '../../../core/widgets/glass_container.dart';
+import '../../../core/widgets/status_badge.dart';
+import '../views/service_detail_screen.dart';
+
+/// Real-Time System Diagnostics Widget driven EXCLUSIVELY over SignalR WebSockets (`/hubs/health`).
+/// ZERO REST HTTP API calls are performed.
+class SystemDiagnosticsWidget extends StatefulWidget {
+  final SignalRService? signalRService;
+
+  const SystemDiagnosticsWidget({
+    super.key,
+    this.signalRService,
+  });
+
+  @override
+  State<SystemDiagnosticsWidget> createState() => _SystemDiagnosticsWidgetState();
+}
+
+class _SystemDiagnosticsWidgetState extends State<SystemDiagnosticsWidget> {
+  List<Map<String, dynamic>> _serviceStatuses = [];
+  StreamSubscription<List<Map<String, dynamic>>>? _healthSub;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.signalRService != null) {
+      _healthSub = widget.signalRService!.healthStream.listen((data) {
+        if (mounted) {
+          setState(() {
+            _serviceStatuses = data;
+          });
+        }
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _healthSub?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final int totalCount = _serviceStatuses.length;
+    final int onlineCount = _serviceStatuses.where((s) => s['status']?.toString().toLowerCase() == 'online').length;
+    final bool isWsConnected = widget.signalRService?.isConnected ?? false;
+
+    return SingleChildScrollView(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // WebSocket Status Banner
+          GlassContainer(
+            padding: const EdgeInsets.all(16),
+            child: Row(
+              children: [
+                Container(
+                  padding: const EdgeInsets.all(10),
+                  decoration: BoxDecoration(
+                    color: AppTheme.primaryEmerald.withValues(alpha: 0.15),
+                    shape: BoxShape.circle,
+                    border: Border.all(color: AppTheme.primaryEmerald.withValues(alpha: 0.3)),
+                  ),
+                  child: Icon(Icons.sensors_rounded, color: AppTheme.primaryEmerald, size: 22),
+                ),
+                const SizedBox(width: 14),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Row(
+                        children: [
+                          const Text(
+                            'SignalR WebSocket Live-Diagnose',
+                            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
+                          ),
+                          const SizedBox(width: 8),
+                          Container(
+                            width: 8,
+                            height: 8,
+                            decoration: BoxDecoration(
+                              color: isWsConnected ? AppTheme.primaryEmerald : AppTheme.accentRed,
+                              shape: BoxShape.circle,
+                              boxShadow: [
+                                BoxShadow(
+                                  color: (isWsConnected ? AppTheme.primaryEmerald : AppTheme.accentRed).withValues(alpha: 0.8),
+                                  blurRadius: 6,
+                                  spreadRadius: 2,
+                                ),
+                              ],
+                            ),
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 2),
+                      Text(
+                        '100% über SignalR WebSockets (/hubs/health). Keine HTTP API Anfragen.',
+                        style: TextStyle(fontSize: 12, color: AppTheme.textSecondary),
+                      ),
+                    ],
+                  ),
+                ),
+                const SizedBox(width: 10),
+                Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                  decoration: BoxDecoration(
+                    color: (onlineCount == totalCount && totalCount > 0 ? AppTheme.primaryEmerald : AppTheme.accentCyan).withValues(alpha: 0.2),
+                    borderRadius: BorderRadius.circular(10),
+                    border: Border.all(color: (onlineCount == totalCount && totalCount > 0 ? AppTheme.primaryEmerald : AppTheme.accentCyan).withValues(alpha: 0.4)),
+                  ),
+                  child: Text(
+                    totalCount > 0 ? '$onlineCount / $totalCount Online' : 'Verbinde WebSocket...',
+                    style: TextStyle(
+                      color: onlineCount == totalCount && totalCount > 0 ? AppTheme.primaryEmerald : AppTheme.accentCyan,
+                      fontWeight: FontWeight.bold,
+                      fontSize: 13,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+          const SizedBox(height: 16),
+
+          const Text(
+            'Echtzeit Dienststatus (SignalR Push)',
+            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
+          ),
+          const SizedBox(height: 12),
+
+          if (_serviceStatuses.isEmpty)
+            Padding(
+              padding: const EdgeInsets.symmetric(vertical: 40),
+              child: Center(
+                child: Column(
+                  children: [
+                    CircularProgressIndicator(color: AppTheme.primaryEmerald),
+                    const SizedBox(height: 16),
+                    Text('Warte auf SignalR WebSocket Daten von /hubs/health...', style: TextStyle(color: AppTheme.textMuted, fontSize: 13)),
+                  ],
+                ),
+              ),
+            )
+          else
+            GridView.builder(
+              shrinkWrap: true,
+              physics: const NeverScrollableScrollPhysics(),
+              itemCount: _serviceStatuses.length,
+              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: MediaQuery.of(context).size.width > 900 ? 2 : 1,
+                childAspectRatio: 2.7,
+                crossAxisSpacing: 12,
+                mainAxisSpacing: 12,
+              ),
+              itemBuilder: (context, index) {
+                final svc = _serviceStatuses[index];
+                final String name = svc['name']?.toString() ?? 'Unbekannt';
+                final String type = svc['type']?.toString() ?? '';
+                final String status = svc['status']?.toString() ?? 'Offline';
+                final bool isOnline = status.toLowerCase() == 'online';
+                final String portInfo = svc['port']?.toString() ?? 'MQTT Only';
+                final String db = svc['db']?.toString() ?? 'PostgreSQL';
+
+                return InkWell(
+                  onTap: () {
+                    final apiClient = context.read<ApiClient>();
+                    Navigator.push(
+                      context,
+                      MaterialPageRoute(
+                        builder: (_) => ServiceDetailScreen(serviceName: name, apiClient: apiClient),
+                      ),
+                    );
+                  },
+                  borderRadius: BorderRadius.circular(20),
+                  child: GlassContainer(
+                    padding: const EdgeInsets.all(14),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Row(
+                            children: [
+                              Icon(
+                                name == 'FinlyticBackend' ? Icons.hub_outlined : Icons.dns_outlined,
+                                size: 18,
+                                color: isOnline ? AppTheme.primaryEmerald : AppTheme.accentRed,
+                              ),
+                              const SizedBox(width: 8),
+                              Text(
+                                name,
+                                style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+                              ),
+                            ],
+                          ),
+                          StatusBadge(
+                            label: status,
+                            color: isOnline ? AppTheme.primaryEmerald : AppTheme.accentRed,
+                          ),
+                        ],
+                      ),
+                      Text(
+                        type,
+                        style: TextStyle(fontSize: 12, color: AppTheme.textSecondary),
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                      const Divider(height: 10, color: Colors.white10),
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Row(
+                            children: [
+                              Icon(Icons.storage_outlined, size: 12, color: AppTheme.textMuted),
+                              const SizedBox(width: 4),
+                              Text(
+                                db,
+                                style: TextStyle(fontSize: 11, color: AppTheme.textMuted),
+                              ),
+                            ],
+                          ),
+                          Row(
+                            children: [
+                              Icon(name == 'FinlyticBackend' ? Icons.language_outlined : Icons.cable_outlined,
+                                  size: 12, color: AppTheme.accentCyan),
+                              const SizedBox(width: 4),
+                              Text(
+                                portInfo,
+                                style: TextStyle(
+                                  fontSize: 11,
+                                  color: name == 'FinlyticBackend' ? AppTheme.primaryEmerald : AppTheme.accentCyan,
+                                  fontWeight: FontWeight.w600,
+                                ),
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
+                      ],
+                    ),
+                  ),
+                );
+              },
+            ),
+        ],
+      ),
+    );
+  }
+}