Update home_view.dart

extensive additions to home view:
balance, chart timespans, transactions

trackeroo/lib/frontend/views/home_view.dart

 import 'package:flutter/material.dart';
 import 'package:fl_chart/fl_chart.dart';
+import 'package:trackeroo/frontend/utils/transaction_listtile.dart';
+import 'package:trackeroo/logic/models/category.dart';
+import 'package:trackeroo/logic/models/transaction.dart';
 
-class HomeView extends StatelessWidget {
+enum Timespan { daily, weekly, monthly, yearly, all }
+
+class HomeView extends StatefulWidget {
   const HomeView({super.key});
 
+  @override
+  State<HomeView> createState() => _HomeViewState();
+}
+
+class _HomeViewState extends State<HomeView> {
+  Transaction trn = Transaction(title: "Bus Ticket VVS", amount: -5.32, category: Category(title: "ÖPNV", icon: Icons.directions_bus, color: Colors.yellow), dueDate: DateTime.now());
+  Transaction trp = Transaction(title: "Gehalt", amount: 1300, category: Category(title: "Arbeitgeber", icon: Icons.apartment_rounded, color: Colors.green), dueDate: DateTime.now());
+
+  Timespan timespanView = Timespan.monthly;
+
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return SingleChildScrollView(
+      child: Padding(
         padding: const EdgeInsets.all(16.0),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: <Widget>[
+            const Text(
+              'Balance',
+              style: TextStyle(
+                fontSize: 14.0,
+                fontWeight: FontWeight.bold
+              ),
+            ),
+            const SizedBox(height: 5.0),
+            const Text(
+              '4932.32 €',
+              style: TextStyle(
+                fontSize: 40.0,
+                fontWeight: FontWeight.w300
+              ),
+            ),
+            const SizedBox(height: 10.0),
+            const Text(
+              'Overview',
+              style: TextStyle(
+                fontSize: 14.0,
+                fontWeight: FontWeight.bold
+              ),
+            ),
+            const SizedBox(height: 5.0),
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
@@ -34,11 +75,11 @@ class HomeView extends StatelessWidget {
                       PieChartData(
                         centerSpaceRadius: 50.0,
                         sections: [
-                        PieChartSectionData(value: 1245.42),
-                        PieChartSectionData(value: 734.53),
-                        PieChartSectionData(value: 67.4),
-                        PieChartSectionData(value: 1.0),
-                        PieChartSectionData(value: 850.4)
+                          buildPieChartSection(context, 93.302),
+                          buildPieChartSection(context, 43.302),
+                          buildPieChartSection(context, 104.302),
+                          buildPieChartSection(context, 120.302),
+                          buildPieChartSection(context, 110.302)
                         ]
                       )
                     ),
@@ -58,12 +99,71 @@ class HomeView extends StatelessWidget {
                 ),
               ],
             ),
-          Text(
-            'Home Page',
-            style: Theme.of(context).textTheme.headlineMedium,
+            const SizedBox(height: 10.0),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                FilterChip(
+                  onSelected: (value) => setState(() {
+                    timespanView = Timespan.daily;
+                  }),
+                  label: const Text('Daily'),
+                  selected: timespanView == Timespan.daily
+                ),
+                FilterChip(
+                  onSelected: (value) => setState(() {
+                    timespanView = Timespan.weekly;
+                  }),
+                  label: const Text('Weekly'),
+                  selected: timespanView == Timespan.weekly
+                ),
+                FilterChip(
+                  onSelected: (value) => setState(() {
+                    timespanView = Timespan.monthly;
+                  }),
+                  label: const Text('Montly'),
+                  selected: timespanView == Timespan.monthly
+                ),
+                FilterChip(
+                  onSelected: (value) => setState(() {
+                    timespanView = Timespan.yearly;
+                  }),
+                  label: const Text('Yearly'),
+                  selected: timespanView == Timespan.yearly,
+                ),
+                FilterChip(
+                  onSelected: (value) => setState(() {
+                    timespanView = Timespan.all;
+                  }),
+                  label: const Text('All'),
+                  selected: timespanView == Timespan.all
+                )
+              ],
+            ),
+            const SizedBox(height: 20.0),
+            const Text(
+              'Transactions',
+              style: TextStyle(
+                fontSize: 14.0,
+                fontWeight: FontWeight.bold
               ),
+            ),
+            const SizedBox(height: 5.0),
+            TransactionListtile(transaction: trn),
+            TransactionListtile(transaction: trn),
+            TransactionListtile(transaction: trn),
+            TransactionListtile(transaction: trp),
+            TransactionListtile(transaction: trn)
           ],
         ),
+      ),
+    );
+  }
+
+  PieChartSectionData buildPieChartSection(BuildContext context, double value) {
+    return PieChartSectionData(
+      value: value,
+      color: Theme.of(context).colorScheme.secondaryContainer
     );
   }
 }