rework ui

hartmann-foto-documentation-app/src/main/java/marketing/heyday/hartmann/fotodocumentation/core/model/Picture.java

@@ -40,7 +40,10 @@ public class Picture extends AbstractDateEntity {
 	@Basic(fetch = FetchType.LAZY)
 	private String comment;
 
+	@Column(name = "evaluation")
+	private Integer evaluation;
 
+	@Column
 	private String category;
 
 	@Column(name = "image")
@@ -83,7 +86,13 @@ public class Picture extends AbstractDateEntity {
 		this.comment = comment;
 	}
 
+	public Integer getEvaluation() {
+		return evaluation;
+	}
 
+	public void setEvaluation(Integer evaluation) {
+		this.evaluation = evaluation;
+	}
 
 	public String getCategory() {
 		return category;
@@ -125,6 +134,10 @@ public class Picture extends AbstractDateEntity {
 	public static class Builder {
 		private Picture instance = new Picture();
 		
+		public Builder(){
+			instance.evaluation = 0;
+		}
+
 		public Builder username(String username) {
 			instance.setUsername(username);
 			return this;

hartmann-foto-documentation-app/src/main/java/marketing/heyday/hartmann/fotodocumentation/rest/vo/PictureValue.java

@@ -16,12 +16,12 @@ import marketing.heyday.hartmann.fotodocumentation.core.model.Picture;
  */
 
 @Schema(name = "Picture")
-public record PictureValue(Long id, String comment, String category, String image, Date pictureDate, String username) {
+public record PictureValue(Long id, String comment, String category, String image, Date pictureDate, String username, Integer evaluation) {
 
 	public static PictureValue builder(Picture picture) {
 		if (picture == null) {
 			return null;
 		}
-		return new PictureValue(picture.getPictureId(), picture.getComment(), picture.getCategory(), picture.getImage(), picture.getPictureDate(), picture.getUsername());
+		return new PictureValue(picture.getPictureId(), picture.getComment(), picture.getCategory(), picture.getImage(), picture.getPictureDate(), picture.getUsername(), picture.getEvaluation());
 	}
 }

hartmann-foto-documentation-app/src/main/resources/marketing/heyday/hartmann/fotodocumentation/core/db/migration/V3__evaluation.sql

@@ -0,0 +1,8 @@
+
+-- picture
+
+alter table picture add column evaluation bigint;
+
+update picture set evaluation = 0;
+
+alter table picture alter column evaluation set not null;

hartmann-foto-documentation-frontend/lib/dto/picture_dto.dart

@@ -5,11 +5,12 @@ class PictureDto {
   final String? comment;
   final String? category;
   final String image;
+  final int evaluation;
   final DateTime pictureDate;
   final String? username;
 
   PictureDto(
-      {required this.id, required this.comment, required this.category, required this.image, required this.pictureDate, required this.username});
+      {required this.id, required this.comment, required this.category, required this.image, required this.evaluation, required this.pictureDate, required this.username});
 
   /// Create from JSON response
   factory PictureDto.fromJson(Map<String, dynamic> json) {
@@ -18,6 +19,7 @@ class PictureDto {
       comment: json['comment'] as String?,
       category: json['category'] as String?,
       image: json['image'] as String,
+      evaluation: json["evaluation"] as int,
       pictureDate: DateTimeUtils.toDateTime(json['pictureDate']) ?? DateTime.now(),
       username: json['username'] as String?
     );

hartmann-foto-documentation-frontend/lib/l10n/app_de.arb

@@ -16,7 +16,7 @@
     "@loginLoginButtonLabel": {
         "description": "Login Button Label"
     },
-    "loginTitle": "BILDERUPLOAD",
+    "loginTitle": "FOTO-DOKU",
     "@loginTitle": {
         "description": "Login page title"
     },
@@ -88,7 +88,7 @@
     "@customerListHeaderLastDateSuffix": {
         "description": "Customer list table header for ladt date"
     },
-    "customerListHeadline": "BILDERUPLOAD",
+    "customerListHeadline": "FOTO-DOKU",
     "@customerListHeadline": {
         "description": "Customer list page headline"
     },

hartmann-foto-documentation-frontend/lib/l10n/app_localizations.dart

@@ -121,7 +121,7 @@ abstract class AppLocalizations {
   /// Login page title
   ///
   /// In de, this message translates to:
-  /// **'BILDERUPLOAD'**
+  /// **'FOTO-DOKU'**
   String get loginTitle;
 
   /// Login error message for invalid credentials
@@ -211,7 +211,7 @@ abstract class AppLocalizations {
   /// Customer list page headline
   ///
   /// In de, this message translates to:
-  /// **'BILDERUPLOAD'**
+  /// **'FOTO-DOKU'**
   String get customerListHeadline;
 
   /// Empty customer list message

hartmann-foto-documentation-frontend/lib/l10n/app_localizations_de.dart

@@ -21,7 +21,7 @@ class AppLocalizationsDe extends AppLocalizations {
   String get loginLoginButtonLabel => 'Einloggen';
 
   @override
-  String get loginTitle => 'BILDERUPLOAD';
+  String get loginTitle => 'FOTO-DOKU';
 
   @override
   String get loginErrorMessage => 'Falscher Benutzername oder Passwort';
@@ -71,7 +71,7 @@ class AppLocalizationsDe extends AppLocalizations {
   String get customerListHeaderLastDateSuffix => ' (zuletzt aktualisiert)';
 
   @override
-  String get customerListHeadline => 'BILDERUPLOAD';
+  String get customerListHeadline => 'FOTO-DOKU';
 
   @override
   String get customerListEmpty => 'Keine Ergebnisse gefunden';

hartmann-foto-documentation-frontend/lib/pages/customer/back_button.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:fotodocumentation/pages/ui_utils/general_style.dart';
+import 'package:fotodocumentation/utils/di_container.dart';
+import 'package:go_router/go_router.dart';
+
+import 'package:fotodocumentation/l10n/app_localizations.dart';
+
+class CustomerBackButton extends StatelessWidget {
+  GeneralStyle get _generalStyle => DiContainer.get();
+
+  final String path;
+
+  const CustomerBackButton({super.key, required this.path});
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton.icon(
+      onPressed: () => context.go(path),
+      icon: Icon(
+        Icons.chevron_left,
+        color: _generalStyle.secondaryTextLabelColor,
+        size: 24,
+      ),
+      label: Text(
+        AppLocalizations.of(context)!.backButtonLabel,
+        style: TextStyle(
+          fontFamily: _generalStyle.fontFamily,
+          fontWeight: FontWeight.normal,
+          fontSize: 16,
+          color: _generalStyle.secondaryTextLabelColor,
+        ),
+      ),
+      style: ElevatedButton.styleFrom(
+        backgroundColor: Colors.white,
+        elevation: 0,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(8),
+        ),
+      ),
+    );
+  }
+}

hartmann-foto-documentation-frontend/lib/pages/customer/customer_list_widget.dart

@@ -59,15 +59,12 @@ class _CustomerListWidgetState extends State<CustomerListWidget> {
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             PageHeaderWidget(text: AppLocalizations.of(context)!.customerListHeadline),
-            _abcHeaderBar(),
+            //_abcHeaderBar(),
-            FractionallySizedBox(
+            const SizedBox(width: 48),
-              widthFactor: 0.5,
+            SearchBarWidget(
-              alignment: Alignment.centerLeft,
-              child: SearchBarWidget(
               searchController: _searchController,
               onSearch: (text) async => actionSearch(text),
             ),
-            ),
             Expanded(
               child: _customerListWidget(),
             ),
@@ -227,14 +224,14 @@ class _CustomerListWidgetState extends State<CustomerListWidget> {
   }
 
   Future<void> _actionSelect(BuildContext context, CustomerListDto dto) async {
-    context.go("${GlobalRouter.pathCustomer}/${dto.id}");
+    context.push("${GlobalRouter.pathCustomer}/${dto.id}");
   }
 
   void _reloadData() {
     _dtos = _customerController.getAll(_searchController.text, _selectedLetter ?? "");
     setState(() {});
   }
-
+/*
   Widget _abcHeaderBar() {
     const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
     return Padding(
@@ -271,5 +268,5 @@ class _CustomerListWidgetState extends State<CustomerListWidget> {
         }).toList(),
       ),
     );
-  }
+  }*/
 }

hartmann-foto-documentation-frontend/lib/pages/customer/customer_widget.dart

@@ -3,6 +3,7 @@ import 'dart:convert' show base64Decode;
 import 'package:flutter/material.dart';
 import 'package:fotodocumentation/controller/picture_controller.dart';
 import 'package:fotodocumentation/dto/picture_dto.dart';
+import 'package:fotodocumentation/pages/customer/back_button.dart';
 import 'package:fotodocumentation/pages/customer/picture_delete_dialog.dart';
 
 import 'package:go_router/go_router.dart';
@@ -91,20 +92,24 @@ class _CustomerWidgetState extends State<CustomerWidget> {
     }
 
     var subText = AppLocalizations.of(context)!.customerWidgetCustomerNumberPrefix(dto.customerNumber);
-    return Padding(
+    return Column(
-      padding: const EdgeInsets.all(8.0),
-      child: Column(
       mainAxisAlignment: MainAxisAlignment.start,
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         PageHeaderWidget(text: dto.name, subText: subText),
-          _backButton(context),
+        CustomerBackButton(path: GlobalRouter.pathHome),
+        //_backButton(context),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: [
+            _downloadButton(context),
+          ],
+        ),
         const SizedBox(height: 24),
         Expanded(
           child: _customerWidget(dto),
         ),
       ],
-      ),
     );
   }
 
@@ -170,6 +175,16 @@ class _CustomerWidgetState extends State<CustomerWidget> {
               ),
             ),
           ),
+          Expanded(
+            flex: 1,
+            child: Align(
+              alignment: Alignment.centerLeft,
+              child: Text(
+                'Bewertung',
+                style: headerStyle,
+              ),
+            ),
+          ),
           Expanded(
             flex: 2,
             child: Align(
@@ -180,7 +195,7 @@ class _CustomerWidgetState extends State<CustomerWidget> {
               ),
             ),
           ),
-          const SizedBox(width: 48),
+          const SizedBox(width: 96),
         ],
       ),
     );
@@ -194,6 +209,7 @@ class _CustomerWidgetState extends State<CustomerWidget> {
     );
 
     final dateStr = _dateFormat.format(pictureDto.pictureDate);
+    final evaluationColor = _generalStyle.evaluationColor(); // FIXME: set to color from DB
     return InkWell(
       key: Key("table_row_${customerDto.id}"),
       onTap: () => _actionSelect(context, customerDto, pictureDto),
@@ -201,7 +217,7 @@ class _CustomerWidgetState extends State<CustomerWidget> {
         padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.start,
-          crossAxisAlignment: CrossAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             Expanded(
               flex: 1,
@@ -223,6 +239,20 @@ class _CustomerWidgetState extends State<CustomerWidget> {
                 child: Text(pictureDto.comment ?? "", style: dataStyle),
               ),
             ),
+            Expanded(
+              flex: 1,
+              child: Align(
+                alignment: Alignment.centerLeft,
+                child: Container(
+                  width: 20,
+                  height: 20,
+                  decoration: BoxDecoration(
+                    color: evaluationColor,
+                    shape: BoxShape.circle,
+                  ),
+                ),
+              ),
+            ),
             Expanded(
               flex: 2,
               child: Align(
@@ -230,6 +260,17 @@ class _CustomerWidgetState extends State<CustomerWidget> {
                 child: Text(dateStr, style: dataStyle),
               ),
             ),
+            SizedBox(
+              width: 48,
+              child: IconButton(
+                key: Key("table_row_download_${pictureDto.id}"),
+                icon: Icon(
+                  Icons.file_download_outlined,
+                  color: _generalStyle.loginFormTextLabelColor,
+                ),
+                onPressed: () => _actionDelete(context, customerDto, pictureDto),
+              ),
+            ),
             SizedBox(
               width: 48,
               child: IconButton(
@@ -247,45 +288,9 @@ class _CustomerWidgetState extends State<CustomerWidget> {
     );
   }
 
-  Future<void> _actionDelete(BuildContext context, CustomerDto customerDto, PictureDto pictureDto) async {
-    final confirmed = await showDialog<bool>(
-      context: context,
-      builder: (BuildContext context) {
-        return PictureDeleteDialog();
-      },
-    );
-
-    if (confirmed == true) {
-      _pictureController.delete(pictureDto);
-      setState(() {
-        _dto = _customerController.get(id: widget.customerId);
-      });
-    }
-  }
-
-  Future<void> _actionSelect(BuildContext context, CustomerDto customerDto, PictureDto pictureDto) async {
-    showDialog(
-      context: context,
-      builder: (BuildContext context) {
-        return Dialog(
-          backgroundColor: _generalStyle.pageBackgroundColor,
-          insetPadding: const EdgeInsets.all(24),
-          child: ClipRRect(
-            borderRadius: BorderRadius.circular(12),
-            child: SizedBox(
-              width: MediaQuery.of(context).size.width * 0.9,
-              height: MediaQuery.of(context).size.height * 0.9,
-              child: PictureWidget(customerDto: customerDto, pictureDto: pictureDto),
-            ),
-          ),
-        );
-      },
-    );
-  }
-
   Widget _backButton(BuildContext context) {
     return ElevatedButton.icon(
-      onPressed: () => context.go(GlobalRouter.pathHome),
+      onPressed: () => context.push(GlobalRouter.pathHome),
       icon: Icon(
         Icons.chevron_left,
         color: _generalStyle.secondaryTextLabelColor,
@@ -309,4 +314,56 @@ class _CustomerWidgetState extends State<CustomerWidget> {
       ),
     );
   }
+
+  Widget _downloadButton(BuildContext context) {
+    return ElevatedButton.icon(
+      key: Key("download_all_button"),
+      onPressed: () => _actionDownload(context),
+      iconAlignment: IconAlignment.end,
+      icon: Icon(
+        Icons.file_download_outlined,
+        color: _generalStyle.primaryButtonTextColor,
+        size: 24,
+      ),
+      label: Text(
+        "Alle herunterladen",
+        style: TextStyle(
+          fontFamily: _generalStyle.fontFamily,
+          fontWeight: FontWeight.bold,
+          fontSize: 16,
+          color: _generalStyle.primaryButtonTextColor,
+        ),
+      ),
+      style: ElevatedButton.styleFrom(
+        backgroundColor: _generalStyle.secondaryWidgetBackgroundColor,
+        elevation: 0,
+        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+        shape: const StadiumBorder(),
+      ),
+    );
+  }
+
+  Future<void> _actionDelete(BuildContext context, CustomerDto customerDto, PictureDto pictureDto) async {
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (BuildContext context) {
+        return PictureDeleteDialog();
+      },
+    );
+
+    if (confirmed == true) {
+      _pictureController.delete(pictureDto);
+      setState(() {
+        _dto = _customerController.get(id: widget.customerId);
+      });
+    }
+  }
+
+  Future<void> _actionSelect(BuildContext context, CustomerDto customerDto, PictureDto pictureDto) async {
+    context.go(GlobalRouter.pathPicture, extra: PictureWidgetHolder(customerDto, pictureDto));
+  }
+
+  Future<void> _actionDownload(BuildContext context) async {
+    // FIXME: implement a download from the export
+  }
 }

hartmann-foto-documentation-frontend/lib/pages/customer/picture_widget.dart

@@ -3,11 +3,21 @@ import 'dart:convert' show base64Decode;
 import 'package:flutter/material.dart';
 import 'package:fotodocumentation/dto/customer_dto.dart';
 import 'package:fotodocumentation/dto/picture_dto.dart';
+import 'package:fotodocumentation/pages/customer/customer_back_button.dart';
 import 'package:fotodocumentation/pages/customer/picture_fullscreen_dialog.dart';
+import 'package:fotodocumentation/pages/ui_utils/component/page_header_widget.dart';
 import 'package:fotodocumentation/pages/ui_utils/general_style.dart';
 import 'package:fotodocumentation/utils/di_container.dart';
+import 'package:fotodocumentation/utils/global_router.dart';
 import 'package:intl/intl.dart';
 
+class PictureWidgetHolder {
+  final CustomerDto customerDto;
+  final PictureDto pictureDto;
+
+  const PictureWidgetHolder(this.customerDto, this.pictureDto);
+}
+
 class PictureWidget extends StatefulWidget {
   final CustomerDto customerDto;
   final PictureDto pictureDto;
@@ -27,7 +37,7 @@ class _PictureWidgetState extends State<PictureWidget> {
   @override
   void initState() {
     super.initState();
-    _dateFormat = DateFormat('dd MMMM yyyy');
+    _dateFormat = DateFormat('dd.MM.yyyy, hh:mm');
     _selectedPicture = widget.pictureDto;
   }
 
@@ -39,117 +49,35 @@ class _PictureWidgetState extends State<PictureWidget> {
 
   @override
   Widget build(BuildContext context) {
-    final pictures = widget.customerDto.pictures;
+    return Scaffold(
-    final currentIndex = pictures.indexWhere((p) => p.id == _selectedPicture.id);
+      body: Container(
-    final hasPrevious = currentIndex > 0;
-    final hasNext = currentIndex < pictures.length - 1;
-
-    return Stack(
-      children: [
-        Container(
-          width: double.infinity,
-          height: double.infinity,
         color: _generalStyle.pageBackgroundColor,
         child: Padding(
-            padding: const EdgeInsets.only(top: 50.0, left: 50.0, right: 50.0, bottom: 8.0),
+          padding: const EdgeInsets.only(top: 8.0, left: 50.0, right: 50.0, bottom: 8.0),
           child: _body(context),
         ),
       ),
-        // Left navigation button
+    );
-        if (hasPrevious)
+  }
-          Positioned(
+
-            left: 0,
+  Widget _body(BuildContext context) {
-            top: 0,
+    final pictures = widget.customerDto.pictures;
-            bottom: 0,
+    return Column(
-            child: GestureDetector(
+      mainAxisAlignment: MainAxisAlignment.start,
-              onTap: () => _navigateToPicture(currentIndex - 1),
+      crossAxisAlignment: CrossAxisAlignment.start,
-              child: MouseRegion(
+      children: [
-                cursor: SystemMouseCursors.click,
+        PageHeaderWidget(text: widget.customerDto.name),
-                child: Container(
+        CustomerBackButton(path: GlobalRouter.pathCustomer),
-                  width: 50,
+        const SizedBox(height: 24),
-                  color: Colors.transparent,
+        Expanded(
-                  child: Center(
+          child: _mainWidget(context),
-                    child: Container(
-                      decoration: BoxDecoration(
-                        color: _generalStyle.primaryButtonBackgroundColor,
-                        shape: BoxShape.circle,
-                      ),
-                      child: Padding(
-                        padding: const EdgeInsets.all(8.0),
-                        child: Icon(
-                          Icons.chevron_left,
-                          color: _generalStyle.primaryButtonTextColor,
-                          size: 32,
-                        ),
-                      ),
-                    ),
-                  ),
-                ),
-              ),
-            ),
-          ),
-        // Right navigation button
-        if (hasNext)
-          Positioned(
-            right: 0,
-            top: 0,
-            bottom: 0,
-            child: GestureDetector(
-              onTap: () => _navigateToPicture(currentIndex + 1),
-              child: MouseRegion(
-                cursor: SystemMouseCursors.click,
-                child: Container(
-                  width: 50,
-                  color: Colors.transparent,
-                  child: Center(
-                    child: Container(
-                      decoration: BoxDecoration(
-                        color: _generalStyle.primaryButtonBackgroundColor,
-                        shape: BoxShape.circle,
-                      ),
-                      child: Padding(
-                        padding: const EdgeInsets.all(8.0),
-                        child: Icon(
-                          Icons.chevron_right,
-                          color: _generalStyle.primaryButtonTextColor,
-                          size: 32,
-                        ),
-                      ),
-                    ),
-                  ),
-                ),
-              ),
-            ),
-          ),
-        // Close button
-        Positioned(
-          top: 16,
-          right: 16,
-          child: Container(
-            decoration: BoxDecoration(
-              color: _generalStyle.primaryButtonBackgroundColor,
-              shape: BoxShape.circle,
-            ),
-            child: IconButton(
-              icon: Icon(Icons.close, color: _generalStyle.primaryButtonTextColor, size: 24),
-              onPressed: () => Navigator.of(context).pop(),
-            ),
-          ),
         ),
+        _bottomNavigationWidget(pictures),
       ],
     );
   }
 
-  void _navigateToPicture(int index) {
+  Widget _mainWidget(BuildContext context) {
-    final pictures = widget.customerDto.pictures;
-    if (index >= 0 && index < pictures.length) {
-      setState(() {
-        _selectedPicture = pictures[index];
-      });
-    }
-  }
-
-  Widget _body(BuildContext context) {
     return LayoutBuilder(
       builder: (context, constraints) {
         final isNarrow = constraints.maxWidth < 800;
@@ -222,7 +150,7 @@ class _PictureWidgetState extends State<PictureWidget> {
 
     return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
       Text(
-        "INFORMATIONEN",
+        _dateFormat.format(dto.pictureDate),
         style: TextStyle(
           fontWeight: FontWeight.bold,
           fontSize: 44,
@@ -230,20 +158,7 @@ class _PictureWidgetState extends State<PictureWidget> {
           color: _generalStyle.primaryTextLabelColor,
         ),
       ),
-      Padding(
+      
-        padding: const EdgeInsets.only(top: 20.0),
-        child: Text(
-          "APOTHEKE",
-          style: labelStyle,
-        ),
-      ),
-      Padding(
-        padding: const EdgeInsets.only(top: 4.0),
-        child: Text(
-          widget.customerDto.name,
-          style: contentStyle,
-        ),
-      ),
       Padding(
         padding: const EdgeInsets.only(top: 20.0),
         child: Text(
@@ -258,20 +173,6 @@ class _PictureWidgetState extends State<PictureWidget> {
           style: contentStyle,
         ),
       ),
-      Padding(
-        padding: const EdgeInsets.only(top: 20.0),
-        child: Text(
-          "DATUM",
-          style: labelStyle,
-        ),
-      ),
-      Padding(
-        padding: const EdgeInsets.only(top: 4.0),
-        child: Text(
-          _dateFormat.format(dto.pictureDate),
-          style: contentStyle,
-        ),
-      ),
       Padding(
         padding: const EdgeInsets.only(top: 20.0),
         child: Text(
@@ -281,13 +182,9 @@ class _PictureWidgetState extends State<PictureWidget> {
       ),
       Padding(
         padding: const EdgeInsets.only(top: 4.0),
-        child: Container(
+        child: SizedBox(
           width: double.infinity,
           height: 150,
-          decoration: BoxDecoration(
-            border: Border.all(color: _generalStyle.secondaryTextLabelColor.withValues(alpha: 0.3)),
-            borderRadius: BorderRadius.circular(8),
-          ),
           child: Scrollbar(
             controller: _commentScrollController,
             thumbVisibility: true,
@@ -304,4 +201,73 @@ class _PictureWidgetState extends State<PictureWidget> {
       ),
     ]);
   }
+
+  // Bottom navigation buttons
+  Widget _bottomNavigationWidget(List<PictureDto> pictures) {
+    final currentIndex = pictures.indexWhere((p) => p.id == _selectedPicture.id);
+    final hasPrevious = currentIndex > 0;
+    final hasNext = currentIndex < pictures.length - 1;
+
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 24.0),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          // Previous button
+          IconButton(
+            onPressed: hasPrevious ? () => _actionNavigateToPicture(currentIndex - 1) : null,
+            icon: Icon(Icons.chevron_left, color: _generalStyle.nextTextColor, size: 32),
+          ),
+          const SizedBox(width: 24),
+          // Picture counter text
+          Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: Text(
+                  '${currentIndex + 1}',
+                  style: TextStyle(
+                    fontFamily: _generalStyle.fontFamily,
+                    fontSize: 16,
+                    fontWeight: FontWeight.bold,
+                    color: _generalStyle.nextTextColor,
+                  ),
+                ),
+              ),
+              const SizedBox(width: 8),
+              Text(
+                'von ${pictures.length}',
+                style: TextStyle(
+                  fontFamily: _generalStyle.fontFamily,
+                  fontSize: 16,
+                  fontWeight: FontWeight.normal,
+                  color: _generalStyle.nextTextColor,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(width: 24),
+          // Next button
+          IconButton(
+            onPressed: hasNext ? () => _actionNavigateToPicture(currentIndex + 1) : null,
+            icon: Icon(Icons.chevron_right, color: _generalStyle.nextTextColor, size: 32),
+          ),
+        ],
+      ),
+    );
+  }
+
+  void _actionNavigateToPicture(int index) {
+    final pictures = widget.customerDto.pictures;
+    if (index >= 0 && index < pictures.length) {
+      setState(() {
+        _selectedPicture = pictures[index];
+      });
+    }
+  }
 }

hartmann-foto-documentation-frontend/lib/pages/login/login_widget.dart

@@ -101,60 +101,20 @@ class _LoginWidgetState extends State<LoginWidget> {
                           ),
                           const SizedBox(height: 40),
                           if (_error != null) ...[
-                            Center(
+                            _errorWidget(),
-                              child: Text(
-                                _error!,
-                                style: TextStyle(
-                                  color: _generalStyle.errorColor,
-                                  fontWeight: FontWeight.bold,
-                                  fontSize: 16,
-                                  fontFamily: _generalStyle.fontFamily,
-                                ),
-                              ),
-                            ),
                             const SizedBox(height: 40),
                           ],
                           TextFormField(
                             key: Key("username"),
                             controller: _usernameController,
-                            decoration: InputDecoration(
+                            decoration: _formFieldInputDecoration(AppLocalizations.of(context)!.loginUsernameTFLabel),
-                              border: OutlineInputBorder(
-                                borderRadius: BorderRadius.circular(8),
-                                borderSide: _error != null ? BorderSide(color: _generalStyle.errorColor) : BorderSide(),
-                              ),
-                              enabledBorder: _error != null
-                                  ? OutlineInputBorder(
-                                      borderRadius: BorderRadius.circular(8),
-                                      borderSide: BorderSide(color: _generalStyle.errorColor),
-                                    )
-                                  : null,
-                              labelText: AppLocalizations.of(context)!.loginUsernameTFLabel.toUpperCase(),
-                              labelStyle: TextStyle(color: _generalStyle.primaryTextLabelColor, fontFamily: _generalStyle.fontFamily),
-                              floatingLabelBehavior: FloatingLabelBehavior.always,
-                              contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-                            ),
                           ),
                           const SizedBox(height: 25),
                           TextFormField(
                             key: Key("password"),
                             controller: _passwordController,
                             obscureText: true,
-                            decoration: InputDecoration(
+                            decoration: _formFieldInputDecoration(AppLocalizations.of(context)!.loginPasswordTFLabel),
-                              border: OutlineInputBorder(
-                                borderRadius: BorderRadius.circular(8),
-                                borderSide: _error != null ? BorderSide(color: _generalStyle.errorColor) : BorderSide(),
-                              ),
-                              enabledBorder: _error != null
-                                  ? OutlineInputBorder(
-                                      borderRadius: BorderRadius.circular(8),
-                                      borderSide: BorderSide(color: _generalStyle.errorColor),
-                                    )
-                                  : null,
-                              labelText: AppLocalizations.of(context)!.loginPasswordTFLabel.toUpperCase(),
-                              labelStyle: TextStyle(color: _generalStyle.primaryTextLabelColor, fontFamily: _generalStyle.fontFamily),
-                              floatingLabelBehavior: FloatingLabelBehavior.always,
-                              contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-                            ),
                           ),
                           const SizedBox(height: 25),
                           Center(
@@ -186,6 +146,46 @@ class _LoginWidgetState extends State<LoginWidget> {
     );
   }
 
+  Widget _errorWidget() {
+    return Center(
+      child: Text(
+        _error!,
+        style: TextStyle(
+          color: _generalStyle.errorColor,
+          fontWeight: FontWeight.bold,
+          fontSize: 16,
+          fontFamily: _generalStyle.fontFamily,
+        ),
+      ),
+    );
+  }
+
+  InputDecoration _formFieldInputDecoration(String text) {
+    var formLabelTextStyle = TextStyle(
+      color: _generalStyle.loginFormTextLabelColor,
+      fontFamily: _generalStyle.fontFamily,
+      fontSize: 14,
+      fontStyle: FontStyle.normal,
+      fontWeight: FontWeight.normal,
+    );
+    return InputDecoration(
+      border: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(8),
+        borderSide: _error != null ? BorderSide(color: _generalStyle.errorColor) : BorderSide(),
+      ),
+      enabledBorder: _error != null
+          ? OutlineInputBorder(
+              borderRadius: BorderRadius.circular(8),
+              borderSide: BorderSide(color: _generalStyle.errorColor),
+            )
+          : null,
+      labelText: text.toUpperCase(),
+      labelStyle: formLabelTextStyle,
+      floatingLabelBehavior: FloatingLabelBehavior.always,
+      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+    );
+  }
+
   Future<void> _actionSubmit(BuildContext context) async {
     String username = _usernameController.text;
     String password = _passwordController.text;

hartmann-foto-documentation-frontend/lib/pages/ui_utils/component/page_header_widget.dart

@@ -1,8 +1,14 @@
 import 'package:flutter/material.dart';
+import 'package:fotodocumentation/utils/login_credentials.dart';
+import 'package:go_router/go_router.dart';
+
 import 'package:fotodocumentation/pages/ui_utils/general_style.dart';
 import 'package:fotodocumentation/utils/di_container.dart';
+import 'package:fotodocumentation/utils/global_router.dart';
 
 class PageHeaderWidget extends StatelessWidget {
+  LoginCredentials get loginCredentials => DiContainer.get();
+
   final String text;
   final String subText;
 
@@ -30,6 +36,7 @@ class PageHeaderWidget extends StatelessWidget {
                 ),
               ),
               const Spacer(),
+              _logoutButton(context),
               Image.asset(
                 'assets/images/logo.png',
                 height: 48,
@@ -52,4 +59,34 @@ class PageHeaderWidget extends StatelessWidget {
       ),
     );
   }
+
+  Widget _logoutButton(BuildContext context) {
+    return ElevatedButton.icon(
+      onPressed: () {
+        loginCredentials.logout();
+        context.go(GlobalRouter.pathLogin);
+      },
+      icon: Icon(
+        Icons.logout_rounded,
+        color: _generalStyle.secondaryTextLabelColor,
+        size: 24,
+      ),
+      label: Text(
+        "logout",
+        style: TextStyle(
+          fontFamily: _generalStyle.fontFamily,
+          fontWeight: FontWeight.normal,
+          fontSize: 16,
+          color: _generalStyle.secondaryTextLabelColor,
+        ),
+      ),
+      style: ElevatedButton.styleFrom(
+        backgroundColor: Colors.white,
+        elevation: 0,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(8),
+        ),
+      ),
+    );
+  }
 }

hartmann-foto-documentation-frontend/lib/pages/ui_utils/general_style.dart

@@ -1,6 +1,15 @@
 import 'package:flutter/material.dart';
 
 abstract interface class GeneralStyle {
+  Color? evaluationColor({int value = 0});
+
+  Color get evaluationGoodColor;
+  Color get evaluationMiddleColor;
+  Color get evaluationBadColor;
+
+  Color get nextTextColor;
+
+  Color get loginFormTextLabelColor;
 
   Color get primaryTextLabelColor;
   Color get secondaryTextLabelColor;
@@ -18,11 +27,36 @@ abstract interface class GeneralStyle {
 }
 
 class GeneralStyleImpl implements GeneralStyle {
+  @override
+  Color? evaluationColor({int value = 0}) {
+    switch (value) {
+      case 1:
+        return evaluationGoodColor;
+      case 2:
+        return evaluationMiddleColor;
+      case 3:
+        return evaluationBadColor;
+    }
+    return null;
+  }
+
+  @override
+  Color get evaluationGoodColor => Colors.green;
+
+  @override
+  Color get evaluationMiddleColor => Colors.yellow;
+
+  @override
+  Color get evaluationBadColor => Colors.red;
+
+  @override
+  Color get loginFormTextLabelColor => const Color(0xFF001689);
+
   @override
   Color get primaryTextLabelColor => const Color(0xFF0045FF);
 
   @override
-  Color get secondaryTextLabelColor => const Color(0xFF2F2F2F);
+  Color get secondaryTextLabelColor => const Color(0xFF5B5B5B); //2F2F2F
 
   @override
   Color get primaryButtonBackgroundColor => const Color(0xFF0045FF);
@@ -36,6 +70,9 @@ class GeneralStyleImpl implements GeneralStyle {
   @override
   Color get pageBackgroundColor => const Color(0xFFF5F5F5);
 
+  @override
+  Color get nextTextColor => const Color(0xFF757575);
+
   @override
   Color get errorColor => const Color(0xFFFF0000);
 

hartmann-foto-documentation-frontend/lib/utils/global_router.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:fotodocumentation/main.dart';
 import 'package:fotodocumentation/pages/customer/customer_list_widget.dart';
 import 'package:fotodocumentation/pages/customer/customer_widget.dart';
+import 'package:fotodocumentation/pages/customer/picture_widget.dart';
 import 'package:fotodocumentation/pages/login/login_widget.dart';
 import 'package:fotodocumentation/utils/di_container.dart';
 import 'package:fotodocumentation/utils/login_credentials.dart';
@@ -16,6 +17,7 @@ class GlobalRouter {
 
   static final String pathHome = "/home";
   static final String pathCustomer = "/customer";
+  static final String pathPicture = "/picture";
   static final String pathLogin = "/login";
 
   static final GoRouter router = createRouter(pathHome);
@@ -45,6 +47,13 @@ class GlobalRouter {
             return CustomerWidget(customerId: id ?? -1);
           },
         ),
+        GoRoute(
+          path: pathPicture,
+          builder: (context, state) {
+            PictureWidgetHolder holder = state.extra as PictureWidgetHolder;
+            return PictureWidget(customerDto: holder.customerDto, pictureDto: holder.pictureDto);
+          },
+        ),
       ],
       redirect: (context, state) {
         var uriStr = state.uri.toString();

hartmann-foto-documentation-frontend/lib/utils/login_credentials.dart

@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:fotodocumentation/utils/di_container.dart';
+import 'package:fotodocumentation/utils/jwt_token_storage.dart';
 
 abstract class LoginCredentials extends ChangeNotifier {
   String get fullname;
@@ -9,6 +11,8 @@ abstract class LoginCredentials extends ChangeNotifier {
 }
 
 class LoginCredentialsImpl extends LoginCredentials {
+  JwtTokenStorage get jwtTokenStorage => DiContainer.get();
+
   bool loggedIn = false;
 
   @override
@@ -24,6 +28,8 @@ class LoginCredentialsImpl extends LoginCredentials {
   @override
   void logout() {
     loggedIn = false;
+
+    jwtTokenStorage.clearTokens;
     notifyListeners();
   }
 }

hartmann-foto-documentation-frontend/test/controller/picture_controller_test.dart

@@ -35,7 +35,7 @@ void _testDelete(PictureController controller, int response, bool expected) asyn
 
   when(client.delete(Uri.parse('http://localhost:8080/api/picture/4'), headers: {"Accept-Language": "en-US"})).thenAnswer((_) async => http.Response("", response));
 
-  var dto = await controller.delete(PictureDto(id: 4, image: "", pictureDate: DateTime.now(), category: "", comment: "", username: ""));
+  var dto = await controller.delete(PictureDto(id: 4, image: "", pictureDate: DateTime.now(), category: "", comment: "", evaluation: 1, username: ""));
   expect(dto, expected);
 }
 

hartmann-foto-documentation-frontend/test/pages/picture_widget_test.dart

@@ -31,6 +31,7 @@ void main() {
       image: _testImage,
       pictureDate: DateTime(2024, 1, 15),
       username: 'user1',
+      evaluation: 1,
     );
 
     pictureDto2 = PictureDto(
@@ -40,6 +41,7 @@ void main() {
       image: _testImage,
       pictureDate: DateTime(2024, 2, 20),
       username: 'user2',
+      evaluation: 1,
     );
 
     pictureDto3 = PictureDto(
@@ -49,6 +51,7 @@ void main() {
       image: _testImage,
       pictureDate: DateTime(2024, 3, 25),
       username: 'user3',
+      evaluation: 1,
     );
 
     customerDto = CustomerDto(
@@ -111,7 +114,7 @@ void main() {
       expect(find.text('KOMMENTAR'), findsOneWidget);
     });
 
-    testWidgets('shows close button', (WidgetTester tester) async {
+    testWidgets('shows both navigation buttons at bottom', (WidgetTester tester) async {
       setScreenSize(tester, 1024, 1024);
 
       await pumpApp(
@@ -120,25 +123,12 @@ void main() {
       );
       await tester.pumpAndSettle();
 
-      // Verify close button icon exists
+      // Both navigation buttons should always be visible at the bottom
-      expect(find.byIcon(Icons.close), findsOneWidget);
+      expect(find.byIcon(Icons.chevron_left), findsOneWidget);
-    });
-
-    testWidgets('shows right navigation button when there are more pictures', (WidgetTester tester) async {
-      setScreenSize(tester, 1024, 1024);
-
-      await pumpApp(
-        tester,
-        PictureWidget(customerDto: customerDto, pictureDto: pictureDto1),
-      );
-      await tester.pumpAndSettle();
-
-      // First picture should have right navigation (chevron_right), no left navigation
       expect(find.byIcon(Icons.chevron_right), findsOneWidget);
-      expect(find.byIcon(Icons.chevron_left), findsNothing);
     });
 
-    testWidgets('shows left navigation button when not on first picture', (WidgetTester tester) async {
+    testWidgets('shows both navigation buttons when on middle picture', (WidgetTester tester) async {
       setScreenSize(tester, 1024, 1024);
 
       await pumpApp(
@@ -147,12 +137,12 @@ void main() {
       );
       await tester.pumpAndSettle();
 
-      // Middle picture should have both navigation buttons
+      // Both navigation buttons should be visible
       expect(find.byIcon(Icons.chevron_left), findsOneWidget);
       expect(find.byIcon(Icons.chevron_right), findsOneWidget);
     });
 
-    testWidgets('shows only left navigation on last picture', (WidgetTester tester) async {
+    testWidgets('shows both navigation buttons on last picture', (WidgetTester tester) async {
       setScreenSize(tester, 1024, 1024);
 
       await pumpApp(
@@ -161,9 +151,9 @@ void main() {
       );
       await tester.pumpAndSettle();
 
-      // Last picture should have left navigation, no right navigation
+      // Both navigation buttons should be visible (right one is disabled)
       expect(find.byIcon(Icons.chevron_left), findsOneWidget);
-      expect(find.byIcon(Icons.chevron_right), findsNothing);
+      expect(find.byIcon(Icons.chevron_right), findsOneWidget);
     });
 
     testWidgets('navigates to next picture when right button is tapped', (WidgetTester tester) async {
@@ -208,7 +198,7 @@ void main() {
       expect(find.text('Second picture comment'), findsNothing);
     });
 
-    testWidgets('shows no navigation buttons when only one picture', (WidgetTester tester) async {
+    testWidgets('shows disabled navigation buttons when only one picture', (WidgetTester tester) async {
       setScreenSize(tester, 1024, 1024);
 
       final singlePictureCustomer = CustomerDto(
@@ -224,9 +214,9 @@ void main() {
       );
       await tester.pumpAndSettle();
 
-      // No navigation buttons should be shown
+      // Both navigation buttons should be shown but disabled
-      expect(find.byIcon(Icons.chevron_left), findsNothing);
+      expect(find.byIcon(Icons.chevron_left), findsOneWidget);
-      expect(find.byIcon(Icons.chevron_right), findsNothing);
+      expect(find.byIcon(Icons.chevron_right), findsOneWidget);
     });
 
     testWidgets('opens fullscreen dialog when image is tapped', (WidgetTester tester) async {