rework ui

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;
-    final currentIndex = pictures.indexWhere((p) => p.id == _selectedPicture.id);
-    final hasPrevious = currentIndex > 0;
-    final hasNext = currentIndex < pictures.length - 1;
+    return Scaffold(
+      body: Container(
+        color: _generalStyle.pageBackgroundColor,
+        child: Padding(
+          padding: const EdgeInsets.only(top: 8.0, left: 50.0, right: 50.0, bottom: 8.0),
+          child: _body(context),
+        ),
+      ),
+    );
+  }
 
-    return Stack(
+  Widget _body(BuildContext context) {
+    final pictures = widget.customerDto.pictures;
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.start,
       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),
-            child: _body(context),
-          ),
-        ),
-        // Left navigation button
-        if (hasPrevious)
-          Positioned(
-            left: 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_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(),
-            ),
-          ),
+        PageHeaderWidget(text: widget.customerDto.name),
+        CustomerBackButton(path: GlobalRouter.pathCustomer),
+        const SizedBox(height: 24),
+        Expanded(
+          child: _mainWidget(context),
         ),
+        _bottomNavigationWidget(pictures),
       ],
     );
   }
 
-  void _navigateToPicture(int index) {
-    final pictures = widget.customerDto.pictures;
-    if (index >= 0 && index < pictures.length) {
-      setState(() {
-        _selectedPicture = pictures[index];
-      });
-    }
-  }
-
-  Widget _body(BuildContext context) {
+  Widget _mainWidget(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];
+      });
+    }
+  }
 }