Implemented Reports Screen and some Icon details

ac_web/lib/Layouts/MobileView.dart

@@ -1,5 +1,6 @@
 import 'package:ac_web/Pages/AgentAvailabilities.dart';
 import 'package:ac_web/Pages/LatestReports.dart';
+import 'package:ac_web/Pages/Reports.dart';
 import 'package:flutter/material.dart';
 
 class MobileView extends StatefulWidget {
@@ -38,8 +39,8 @@ class MobileViewState extends State<MobileView> {
       ),
       body: <Widget>[
 
-        // Homepage
+        // Reports grouped by their type
-        Text("Homepage"),
+        Reports(),
 
         // Eighteen
         LatestReports(),

ac_web/lib/Pages/ReportDetails.dart

@@ -1,6 +1,6 @@
-import 'package:ac_web/Api/Dtos/EReportType.dart';
 import 'package:ac_web/Api/Dtos/ReportDto.dart';
 import 'package:ac_web/Widgets/MarkdownText.dart';
+import 'package:ac_web/Widgets/ReportTypeIcons.dart';
 import 'package:flutter/material.dart';
 
 /// Page that shows every detail of a single report, including the full text.
@@ -25,9 +25,13 @@ class ReportDetails extends StatelessWidget{
           spacing: 12,
           children: [
             Row(
-              spacing: 8,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              spacing: 16,
               children: [
-                Icon(_iconOf(report.type)),
+                CircleAvatar(
+                  backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+                  child: Icon(report.type.icon, color: Theme.of(context).colorScheme.onSurface),
+                ),
                 Expanded(
                   child: Text(
                     report.title.isEmpty ? "Untitled Report" : report.title,
@@ -79,22 +83,6 @@ class ReportDetails extends StatelessWidget{
     return "${timestamp.day}. ${_monthNames[timestamp.month - 1]} ${timestamp.year}, $hour:$minute";
   }
 
-  static IconData _iconOf(EReportType type) {
-    switch(type){
-      case EReportType.log:
-        return Icons.receipt_long;
-      case EReportType.codeReview:
-        return Icons.code;
-      case EReportType.projectPlan:
-        return Icons.assignment;
-      case EReportType.research:
-        return Icons.science;
-      case EReportType.newspaper:
-        return Icons.newspaper;
-      case EReportType.unknown:
-        return Icons.question_mark;
-    }
-  }
 
   static const List<String> _monthNames = <String>[
     "January",

ac_web/lib/Pages/Reports.dart

@@ -0,0 +1,76 @@
+import 'package:ac_web/Api/Dtos/EReportType.dart';
+import 'package:ac_web/Pages/ReportsByType.dart';
+import 'package:ac_web/Widgets/LatestReportHeader.dart';
+import 'package:ac_web/Widgets/ReportTypeIcons.dart';
+import 'package:flutter/material.dart';
+
+/// Overview page that lists every available report type as a button.
+class Reports extends StatelessWidget {
+  const Reports({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+
+    List<Widget> widgets = <Widget>[];
+
+    widgets.add(LatestReportHeader(text: "Reports", bigHeader: true,));
+    widgets.add(const SizedBox(height: 8));
+
+    for (final EReportType type in EReportType.values) {
+      widgets.add(_buildButton(context, type));
+    }
+
+    return ListView(
+      padding: EdgeInsetsGeometry.all(8),
+      children: widgets,
+    );
+  }
+
+  Widget _buildButton(BuildContext context, EReportType type) {
+
+    final ColorScheme colors = Theme.of(context).colorScheme;
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 6),
+      child: Material(
+        color: colors.surfaceContainerHighest,
+        borderRadius: BorderRadius.circular(12),
+        clipBehavior: Clip.antiAlias,
+        child: InkWell(
+          onTap: () => _openType(context, type),
+          child: Padding(
+            padding: const EdgeInsets.all(16),
+            child: Row(
+              children: <Widget>[
+                CircleAvatar(
+                  backgroundColor: colors.inversePrimary,
+                  child: Icon(type.icon, color: colors.onSurface),
+                ),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: Text(
+                    type.displayName,
+                    style: const TextStyle(
+                      fontSize: 18,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                ),
+                const Icon(Icons.chevron_right),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Opens a page that only shows the reports of the given type.
+  void _openType(BuildContext context, EReportType type) {
+    Navigator.of(context).push(
+      MaterialPageRoute<void>(
+        builder: (context) => ReportsByType(type: type),
+      ),
+    );
+  }
+}

ac_web/lib/Pages/ReportsByType.dart

@@ -0,0 +1,32 @@
+import 'package:ac_web/Api/Dtos/EReportType.dart';
+import 'package:ac_web/Widgets/LatestReportColumn.dart';
+import 'package:ac_web/Widgets/ReportTypeIcons.dart';
+import 'package:flutter/material.dart';
+
+/// Shows all reports of a single [EReportType], grouped by day just like the
+/// latest reports page.
+class ReportsByType extends StatelessWidget {
+  const ReportsByType({super.key, required this.type});
+
+  final EReportType type;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        title: Row(
+          children: <Widget>[
+            Icon(type.icon),
+            const SizedBox(width: 8),
+            Text(type.displayName),
+          ],
+        ),
+      ),
+      body: LatestReportColumn(
+        title: type.displayName,
+        filterType: type,
+      ),
+    );
+  }
+}

ac_web/lib/Widgets/LatestReportColumn.dart

@@ -4,10 +4,17 @@ import 'package:ac_web/Api/Dtos/ReportDto.dart';
 import 'package:ac_web/Pages/ReportDetails.dart';
 import 'package:ac_web/Widgets/LatestReportEntry.dart';
 import 'package:ac_web/Widgets/LatestReportHeader.dart';
+import 'package:ac_web/Widgets/ReportTypeIcons.dart';
 import 'package:flutter/material.dart';
 
 class LatestReportColumn extends StatefulWidget{
-  const LatestReportColumn({super.key});
+  const LatestReportColumn({super.key, this.title = "Latest Reports", this.filterType});
+
+  /// Headline drawn above the first day header.
+  final String title;
+
+  /// When set, only reports of this type are shown.
+  final EReportType? filterType;
 
   @override
   State<LatestReportColumn> createState() => _LatestReportColumnState();
@@ -38,7 +45,13 @@ class _LatestReportColumnState extends State<LatestReportColumn>{
         }
 
         // The list of reports fetched from the ReportsController.
-        final List<ReportDto> reports = snapshot.data ?? <ReportDto>[];
+        List<ReportDto> reports = snapshot.data ?? <ReportDto>[];
+
+        if (widget.filterType != null) {
+          reports = reports
+              .where((report) => report.type == widget.filterType)
+              .toList();
+        }
 
         return _buildList(reports);
       },
@@ -49,8 +62,19 @@ class _LatestReportColumnState extends State<LatestReportColumn>{
 
     List<Widget> widgets = <Widget>[];
 
+    if (reports.isEmpty) {
+      return ListView(
+        padding: EdgeInsetsGeometry.all(8),
+        children: <Widget>[
+          LatestReportHeader(text: widget.title, bigHeader: true,),
+          const SizedBox(height: 16),
+          const Text("No reports available."),
+        ],
+      );
+    }
+
     // Title Entry
-    widgets.add(LatestReportHeader(text: "Latest Reports", bigHeader: true,));
+    widgets.add(LatestReportHeader(text: widget.title, bigHeader: true,));
 
     DateTime? lastDay;
 
@@ -67,23 +91,7 @@ class _LatestReportColumnState extends State<LatestReportColumn>{
 
       final ReportDto report = reports[i];
 
-      IconData icon;
+      final IconData icon = reports[i].type.icon;
-
-      switch(reports[i].type){
-
-        case EReportType.log:
-          icon = Icons.receipt_long;
-        case EReportType.codeReview:
-          icon = Icons.code;
-        case EReportType.projectPlan:
-          icon = Icons.assignment;
-        case EReportType.research:
-          icon = Icons.science;
-        case EReportType.newspaper:
-          icon = Icons.newspaper;
-        case EReportType.unknown:
-          icon = Icons.question_mark;
-      }
 
       widgets.add(LatestReportEntry(
         text: reports[i].title,

ac_web/lib/Widgets/LatestReportEntry.dart

@@ -31,7 +31,10 @@ class LatestReportEntry extends StatelessWidget{
           child: Container(
             child: Row(
               children: [
-                Icon(icon),
+                CircleAvatar(
+                  backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+                  child: Icon(icon, color: Theme.of(context).colorScheme.onSurface),
+                ),
                 Expanded(
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
@@ -53,8 +56,8 @@ class LatestReportEntry extends StatelessWidget{
                   ),
                 ),
               ],
-              crossAxisAlignment: CrossAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.center,
-              spacing: 8,
+              spacing: 16,
             ),
             margin: EdgeInsetsGeometry.all(16),
           ),

ac_web/lib/Widgets/ReportTypeIcons.dart

@@ -0,0 +1,23 @@
+import 'package:ac_web/Api/Dtos/EReportType.dart';
+import 'package:flutter/material.dart';
+
+/// Icons used for the different report types, so that every page draws a
+/// report type the same way.
+extension ReportTypeIcons on EReportType {
+  IconData get icon {
+    switch (this) {
+      case EReportType.log:
+        return Icons.receipt_long;
+      case EReportType.codeReview:
+        return Icons.code;
+      case EReportType.projectPlan:
+        return Icons.assignment;
+      case EReportType.research:
+        return Icons.science;
+      case EReportType.newspaper:
+        return Icons.newspaper;
+      case EReportType.unknown:
+        return Icons.question_mark;
+    }
+  }
+}