complete budget page

lib/pages/budgets/widgets/budget_comparator.dart

@@ -0,0 +1,135 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:intl/intl.dart';
+import 'package:tunas/domains/budget/budget_bloc.dart';
+import 'package:tunas/pages/common/titled_container.dart';
+import 'package:tunas/repositories/metadata/models/budget.dart';
+
+class BudgetComparator extends StatelessWidget {
+  const BudgetComparator({super.key});
+
+  List<RadarDataSet> _computeDataSet(BuildContext context, List<Budget> targetBudgets, List<Budget> realBudgets) {
+    RadarDataSet targetDataSet = RadarDataSet(
+      fillColor: Theme.of(context).colorScheme.primary.withAlpha(100),
+      borderColor: Theme.of(context).colorScheme.primary,
+      entryRadius: 5,
+      dataEntries: targetBudgets.map((budget) => RadarEntry(value: budget.value)).toList(),
+    );
+    if (realBudgets.isNotEmpty) {
+      targetDataSet.dataEntries.add(const RadarEntry(value: 0));
+    }
+    RadarDataSet realDataSet = RadarDataSet(
+      fillColor: Theme.of(context).colorScheme.onPrimary.withAlpha(100),
+      borderColor: Theme.of(context).colorScheme.onPrimary,
+      entryRadius: 8,
+      dataEntries: realBudgets.map((budget) => RadarEntry(value: budget.value)).toList(),
+    );
+    return realBudgets.isEmpty ? [RadarDataSet(dataEntries: [const RadarEntry(value: 1), const RadarEntry(value: 2), const RadarEntry(value: 3)])] : [realDataSet, targetDataSet];
+  }
+
+  RadarChartTitle _computeDataSetTitle(int index, List<Budget> realBudgets) {
+    return realBudgets.isEmpty ? const RadarChartTitle(text: 'No data') : RadarChartTitle(text: realBudgets[index].label);
+  }
+
+  List<Widget> _computeOtherBudgets(BuildContext context, List<Budget> otherBudgets) {
+    List<Widget> list = [
+      const Text('Hors budget'),
+      Container(
+        margin: const EdgeInsets.only(bottom: 10),
+        decoration: BoxDecoration(
+          border: Border(
+            bottom: BorderSide(
+              width: 2,
+              color: Theme.of(context).colorScheme.onPrimaryContainer
+            )
+          )
+        ),
+      )
+    ];
+
+    list.addAll(otherBudgets.map((budget) => Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Row(
+          children: [
+            Container(width: 5),
+            Text(budget.label),
+          ],
+        ),
+        Text(
+          NumberFormat("#00 €").format(budget.value.abs()),
+          style: const TextStyle(
+            fontFamily: 'NovaMono',
+          )
+        )
+      ],
+    )));
+    return list;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<BudgetBloc, BudgetState>(
+      builder: (context, state) => TitledContainer(
+        title: 'Compare', 
+        child: Column(
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                IconButton(
+                  onPressed: () => context.read<BudgetBloc>().add(BudgetComparePrevious()),
+                  icon: const Icon(Icons.skip_previous)
+                ),
+                Text('${NumberFormat('00', 'fr_FR').format(state.compareMonth)} - ${state.compareYear}'),
+                IconButton(
+                  onPressed: () => context.read<BudgetBloc>().add(BudgetCompareNext()),
+                  icon: const Icon(Icons.skip_next)
+                ),
+              ],
+            ),
+            Row(
+              children: [
+                Container(
+                  height: 300,
+                  width: 250,
+                  padding: const EdgeInsets.all(10),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(5),
+                    color: Theme.of(context).colorScheme.secondaryContainer
+                  ),
+                  child: SingleChildScrollView(
+                    scrollDirection: Axis.vertical,
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: _computeOtherBudgets(context, state.otherBudgets),
+                    ),
+                  ) 
+                ),
+                Expanded(
+                  child: AspectRatio(
+                    aspectRatio: 1.3,
+                    child: RadarChart(
+                      RadarChartData(
+                        titlePositionPercentageOffset: 0.15,
+                        tickBorderData: BorderSide(color: Theme.of(context).colorScheme.secondary, width: 1),
+                        gridBorderData: BorderSide(color: Theme.of(context).colorScheme.secondary, width: 2),
+                        radarBorderData: BorderSide(color: Theme.of(context).colorScheme.secondary, width: 3),
+                        radarBackgroundColor: Theme.of(context).colorScheme.secondaryContainer.withAlpha(100),
+                        radarShape: RadarShape.circle,
+                        dataSets: _computeDataSet(context, state.budgets, state.compareBudgets),
+                        getTitle: (index, angle) => _computeDataSetTitle(index, state.compareBudgets),
+                      )
+                    ),
+                  )
+                ),
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/budgets/widgets/budget_maker.dart

@@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:intl/intl.dart';
+import 'package:tunas/domains/budget/budget_bloc.dart';
+import 'package:tunas/domains/category/category_bloc.dart';
+import 'package:tunas/pages/common/titled_container.dart';
+import 'package:tunas/repositories/metadata/models/budget.dart';
+
+class BudgetMaker extends StatelessWidget {
+  const BudgetMaker({super.key});
+
+  List<Widget> _computeBudgetLines(BuildContext context, List<Budget> budgets, double initialBudget, double remainingBudget) {
+    final categoryState = context.watch<CategoryBloc>().state;
+    List<Widget> list = [];
+
+    list.add(
+      Container(
+        margin: const EdgeInsets.only(top: 5, bottom: 5),
+        padding: const EdgeInsets.only(bottom: 10),
+        child: Flex(
+          direction: Axis.horizontal,
+          children: [Expanded(
+          child: 
+            TextFormField(
+              keyboardType: const TextInputType.numberWithOptions(decimal: false),
+              decoration: InputDecoration(
+                icon: const Icon(Icons.euro),
+                hintText: '\$\$\$',
+                border: OutlineInputBorder(
+                  borderRadius: BorderRadius.circular(5),
+                ),
+              ),
+              initialValue: initialBudget.toString(),
+              onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetInitial(double.parse(value)))
+            )
+          
+        )]
+      ))
+    );
+
+    list.addAll(budgets.map((budget) => Row(
+        children: [
+          Expanded(
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Expanded(
+                  child: DropdownButtonFormField<String>(
+                    value: budget.label,
+                    onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetLabel(budget, value!)),
+                    items: categoryState.categories.map((e) => DropdownMenuItem(value: e.label, child: Text(e.label))).toList(),
+                  ),
+                ),
+                const SizedBox(width: 20),
+                Text(
+                  NumberFormat('####000 €', 'fr_FR').format(budget.value),
+                  style: const TextStyle(
+                    fontFamily: 'NovaMono',
+                    fontWeight: FontWeight.bold,
+                    fontSize: 15,
+                  )
+                ),
+              ],
+            )
+          ),
+          Expanded(
+            child: SliderTheme(
+              data: const SliderThemeData(),
+              child: Slider(
+                min: 0,
+                max: initialBudget,
+                label: budget.value.round().toString(),
+                value: budget.value,
+                secondaryTrackValue: remainingBudget + budget.value,
+                onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetValue(budget, value.round().toDouble())),
+              ),
+            )
+          ),
+          IconButton(
+            onPressed: () => context.read<BudgetBloc>().add(BudgetRemove(budget)),
+            icon: const Icon(Icons.delete),
+          ),
+        ],
+    )).toList());
+
+    list.add(
+      Container(
+        margin: const EdgeInsets.only(top: 25, bottom: 5),
+        decoration: BoxDecoration(
+          border: Border(
+            bottom: BorderSide(
+              width: 2,
+              color: Theme.of(context).colorScheme.onPrimaryContainer
+            )
+          )
+        ),
+      )
+    );
+
+    list.add(
+      Row(
+        children: [
+          Text(
+            '   Remaining ${NumberFormat('#####00 €', 'fr_FR').format(remainingBudget)} out of ${NumberFormat('#####00 €', 'fr_FR').format(initialBudget)}',
+            style: const TextStyle(
+              fontFamily: 'NovaMono',
+              fontWeight: FontWeight.bold,
+              fontSize: 15,
+            )
+          )
+        ],
+      )
+    );
+    return list;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final categoryState = context.watch<CategoryBloc>().state;
+    return BlocBuilder<BudgetBloc, BudgetState>(
+      builder: (context, state) => TitledContainer(
+        title: 'Prepare',
+        action: IconButton(
+          onPressed: () => context.read<BudgetBloc>().add(BudgetAdd(categoryState.categories.first.label)),
+          icon: const Icon(Icons.add),
+        ),
+        child: Column(
+          children: _computeBudgetLines(context, state.budgets, state.initialBudget, state.remainingBudget),
+        ),
+      )
+    );
+  }
+}

lib/pages/budgets/widgets/month_distribution.dart

@@ -1,102 +1,20 @@
-import 'package:fl_chart/fl_chart.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:intl/intl.dart';
 import 'package:tunas/domains/budget/budget_bloc.dart';
-import 'package:tunas/pages/common/titled_container.dart';
-import 'package:tunas/repositories/metadata/models/budget.dart';
-import 'package:uuid/uuid.dart';
+import 'package:tunas/pages/budgets/widgets/budget_comparator.dart';
+import 'package:tunas/pages/budgets/widgets/budget_maker.dart';
 
 class MonthDistribution extends StatelessWidget {
   const MonthDistribution({super.key});
 
-  List<Widget> _computeBudgetLines(BuildContext context, List<Budget> budgets, double initialBudget, double remainingBudget) {
-    List<Widget> list = [
-      Text('Money to spare: ${NumberFormat('#####00.00 €', 'fr_FR').format(remainingBudget)} € / $initialBudget €'),
-    ];
-
-    list.addAll(budgets.map((budget) => Row(
-      children: [
-        Expanded(
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              Text(budget.label),
-              Text(NumberFormat('#####00.00 €', 'fr_FR').format(budget.value)),
-            ],
-          )
-        ),
-        Expanded(
-          child: SliderTheme(
-            data: SliderThemeData(
-
-            ),
-            child: Slider(
-              min: 0,
-              max: initialBudget,
-              label: budget.value.round().toString(),
-              value: budget.value,
-              secondaryTrackValue: remainingBudget + budget.value,
-              onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetValue(budget, value)),
-            ),
-          )
-        )
-      ],
-    )).toList());
-    return list;
-  }
-
   @override
   Widget build(BuildContext context) {
+    
     return BlocBuilder<BudgetBloc, BudgetState>(
-      builder: (context, state) => Column(
+      builder: (context, state) => const Column(
         children: [
-          TitledContainer(
-            title: 'Prepare',
-            action: IconButton(
-              onPressed: () => context.read<BudgetBloc>().add(BudgetAdd(const Uuid().v8())),
-              icon: const Icon(Icons.add),
-            ),
-            child: Column(
-              children: _computeBudgetLines(context, state.budgets, state.initialBudget, state.remainingBudget),
-            ),
-          ),
-          TitledContainer(
-            title: 'Compare', 
-            height: 500,
-            child: Row(
-              children: [
-                Expanded(
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Text('Budget'),
-                    ],
-                  ),
-                ),
-                Expanded(
-                  child: Column(
-                    children: [
-                      Row(
-                        children: [
-                          IconButton(
-                            onPressed: () => {},
-                            icon: const Icon(Icons.skip_previous)
-                          ),
-                          Text('Fev 2024'),
-                          IconButton(
-                            onPressed: () => {},
-                            icon: const Icon(Icons.skip_next)
-                          ),
-                        ],
-                      ),
-                    ],
-                  )
-                )
-              ],
-            ),
-          ),
+          BudgetMaker(),
+          BudgetComparator(),
         ],
       )
     );