Improved json auto save & budget mobile UI

lib/app.dart

@@ -2,7 +2,7 @@ import 'package:dynamic_color/dynamic_color.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
-import 'package:tunas/clients/storage/storage_client.dart';
+import 'package:tunas/clients/storage/json_storage_client.dart';
 import 'package:tunas/pages/home/home_page.dart';
 import 'package:tunas/repositories/json/json_repository.dart';
 import 'package:tunas/repositories/metadata/metadata_repository.dart';
@@ -30,7 +30,7 @@ class AppView extends StatefulWidget {
 }
 
 class _AppViewState extends State<AppView> {
-  late final StorageClient _storageClient;
+  late final JsonStorageClient _storageClient;
   late final JsonRepository _jsonRepository;
   late final TransactionsRepository _transactionsRepository;
   late final MetadataRepository _metadataRepository;
@@ -39,13 +39,15 @@ class _AppViewState extends State<AppView> {
   void initState() {
     super.initState();
 
-    _storageClient = StorageClient();
+    _storageClient = JsonStorageClient();
     _jsonRepository = JsonRepository(storageClient: _storageClient);
     _transactionsRepository = TransactionsRepository(jsonRepository: _jsonRepository);
     _metadataRepository = MetadataRepository(jsonRepository: _jsonRepository);
     
     _transactionsRepository.loadTransactions();
     _metadataRepository.loadMetadata();
+
+    _metadataRepository.getSettingsStream().listen((event) => setState(() {}));
   }
 
   @override
@@ -66,11 +68,11 @@ class _AppViewState extends State<AppView> {
             darkColorScheme = darkDynamic.harmonized();
           } else {
             lightColorScheme = ColorScheme.fromSeed(
-              seedColor: const Color.fromARGB(1, 5, 236, 55),
+              seedColor: const Color.fromARGB(255, 103, 6, 231),
             );
 
             darkColorScheme = ColorScheme.fromSeed(
-              seedColor: const Color.fromARGB(1, 5, 236, 55),
+              seedColor: const Color.fromARGB(255, 103, 6, 231),
               brightness: Brightness.dark,
             );
           }
@@ -79,6 +81,7 @@ class _AppViewState extends State<AppView> {
             title: 'Tunas',
             theme: ThemeData(colorScheme: lightColorScheme),
             darkTheme: ThemeData(colorScheme: darkColorScheme),
+            themeMode: _metadataRepository.getSettings().themeMode,
             initialRoute: '/home',
             routes: {
               '/home':(context) => const HomePage(),

lib/clients/storage/json_storage_client.dart

@@ -2,7 +2,8 @@ import 'dart:io';
 
 import 'package:path_provider/path_provider.dart';
 
-class StorageClient {
+class JsonStorageClient {
+
   save(String filename, String data) async {
     File file = await _getJson(filename);
     await file.writeAsString(data);

lib/domains/account/account_bloc.dart

@@ -55,6 +55,7 @@ class AccountBloc extends Bloc<AccountEvent, AccountState> {
     on<AccountEditLabel>(_onAccountEditLabel);
     on<AccountEditSaving>(_onAccountEditSaving);
     on<AccountEditColor>(_onAccountEditColor);
+    on<ClearData>(_onClearData);
 
     _metadataRepository
       .getAccountsStream()
@@ -123,13 +124,13 @@ class AccountBloc extends Bloc<AccountEvent, AccountState> {
         })
         .toList();
 
-      await _metadataRepository.deleteMetadata();
+      _metadataRepository.deleteMetadata();
-      await _transactionsRepository.deleteTransactions();
+      _transactionsRepository.deleteTransactions();
 
-      await _metadataRepository.saveAccounts(accounts.values.toList());
+      _metadataRepository.saveAccounts(accounts.values.toList());
-      await _metadataRepository.saveBudgets([]);
+      _metadataRepository.saveBudgets([]);
-      await _metadataRepository.saveCategories(categoriesMap.values.toList());
+      _metadataRepository.saveCategories(categoriesMap.values.toList());
-      await _transactionsRepository.saveTransactions(transactions);
+      _transactionsRepository.saveTransactions(transactions);
     }
   }
 
@@ -141,7 +142,7 @@ class AccountBloc extends Bloc<AccountEvent, AccountState> {
     );
   }
 
-  _onAccountAdd(AccountAdd event, Emitter<AccountState> emit) async {
+  _onAccountAdd(AccountAdd event, Emitter<AccountState> emit) {
     String uuid = const Uuid().v8();
     Account account = Account(
       label: 'Account $uuid',
@@ -149,11 +150,11 @@ class AccountBloc extends Bloc<AccountEvent, AccountState> {
       saving: false
     );
     emit(
-      state.copyWith(await _saveAccount(account))
+      state.copyWith(_saveAccount(account))
     );
   }
 
-  _onAcountRemove(AccountRemove event, Emitter<AccountState> emit) async {
+  _onAcountRemove(AccountRemove event, Emitter<AccountState> emit) {
     Account accountToRemove = event.account;
     List<Account> accounts = state.accounts;
     List<Transaction> transactions = _transactionsRepository.getTransactions();
@@ -165,33 +166,33 @@ class AccountBloc extends Bloc<AccountEvent, AccountState> {
       accounts.removeWhere((account) => account.label == accountToRemove.label);
       emit(AccountRemoveSucess());
       emit(
-        state.copyWith(await _metadataRepository.saveAccounts(accounts))
+        state.copyWith(_metadataRepository.saveAccounts(accounts))
       );
     }
   }
 
-  _onAccountEditLabel(AccountEditLabel event, Emitter<AccountState> emit) async {
+  _onAccountEditLabel(AccountEditLabel event, Emitter<AccountState> emit) {
     Account account = event.account;
     // TODO check for existance, rename every transaction
   }
 
-  _onAccountEditSaving(AccountEditSaving event, Emitter<AccountState> emit) async {
+  _onAccountEditSaving(AccountEditSaving event, Emitter<AccountState> emit) {
     Account account = event.account;
     account.saving = event.saving;
     emit(
-      state.copyWith(await _saveAccount(account))
+      state.copyWith(_saveAccount(account))
     );
   }
 
-  _onAccountEditColor(AccountEditColor event, Emitter<AccountState> emit) async {
+  _onAccountEditColor(AccountEditColor event, Emitter<AccountState> emit) {
     Account account = event.account;
     account.color = event.color;
     emit(
-      state.copyWith(await _saveAccount(account))
+      state.copyWith(_saveAccount(account))
     );
   }
 
-  Future<List<Account>> _saveAccount(Account accountToSave) async {
+  List<Account> _saveAccount(Account accountToSave) {
     List<Account> accounts = _metadataRepository.getAccounts();
 
     try {
@@ -206,7 +207,12 @@ class AccountBloc extends Bloc<AccountEvent, AccountState> {
       }
     }
 
-    await _metadataRepository.saveAccounts(accounts);
+    _metadataRepository.saveAccounts(accounts);
     return accounts;
   }
+
+  FutureOr<void> _onClearData(ClearData event, Emitter<AccountState> emit) {
+    _metadataRepository.deleteMetadata();
+    _transactionsRepository.deleteTransactions();
+  }
 }

lib/domains/account/account_event.dart

@@ -7,6 +7,10 @@ sealed class AccountEvent extends Equatable {
   List<Object> get props => [];
 }
 
+final class ClearData extends AccountEvent {
+  const ClearData();
+}
+
 final class AccountImportCSV extends AccountEvent {
   const AccountImportCSV();
 }

lib/domains/budget/budget_bloc.dart

@@ -4,55 +4,66 @@ import 'package:equatable/equatable.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:tunas/repositories/metadata/models/budget.dart';
 import 'package:tunas/repositories/metadata/metadata_repository.dart';
+import 'package:tunas/repositories/transactions/transactions_repository.dart';
 
 part 'budget_event.dart';
 part 'budget_state.dart';
 
 class BudgetBloc extends Bloc<BudgetEvent, BudgetState> {
   final MetadataRepository _metadataRepository;
+  final TransactionsRepository _transactionsRepository;
+  Timer? setValueTimer;
 
-  BudgetBloc({required MetadataRepository metadataRepository}) : _metadataRepository = metadataRepository, super(const BudgetState())  {
+  BudgetBloc({required MetadataRepository metadataRepository, required TransactionsRepository transactionsRepository}) : _metadataRepository = metadataRepository, _transactionsRepository = transactionsRepository, super(const BudgetState())  {
     on<BudgetsLoad>(_onBudgetsLoad);
     on<BudgetAdd>(_onBudgetAdd);
     on<BudgetRemove>(_onBudgetRemove);
     on<BudgetSetValue>(_onBudgetSetValue);
+    on<BudgetSetLabel>(_onBudgetSetLabel);
     on<BudgetCompareNext>(_onBudgetCompareNext);
     on<BudgetComparePrevious>(_onBudgetComparePrevious);
+    on<BudgetSetCompare>(_onBudgetSetCompare);
+    on<BudgetSetInitial>(_onBudgetSetInitial);
 
     _metadataRepository
       .getBudgetsStream()
       .listen((budgets) => add(BudgetsLoad(budgets)));
+
+    _transactionsRepository
+      .getTransactionsStream()
+      .listen((transactions) => add(BudgetSetCompare()));
   }
 
   _onBudgetsLoad(
     BudgetsLoad event, Emitter<BudgetState> emit
   ) {
-    emit(state.copyWith(
+    emit(_computeState(event.budgets, null));
-      budgets: event.budgets,
-    ));
   }
 
-  FutureOr<void> _onBudgetAdd(BudgetAdd event, Emitter<BudgetState> emit) async {
+  FutureOr<void> _onBudgetAdd(BudgetAdd event, Emitter<BudgetState> emit) {
     Budget budget = Budget(
       label: event.label,
     );
 
-    emit(_computeState(await _saveBudget(budget)));
+    List<Budget> budgets = _computeBudgets(budget);
+    _saveBudget(budgets);
+    emit(_computeState(budgets, null));
   }
 
-  FutureOr<void> _onBudgetRemove(BudgetRemove event, Emitter<BudgetState> emit) async {
+  FutureOr<void> _onBudgetRemove(BudgetRemove event, Emitter<BudgetState> emit) {
     List<Budget> budgets = _metadataRepository.getBudgets();
     Budget budgetToRemove = event.budget;
 
     budgets.removeWhere((budget) => budget.label == budgetToRemove.label);
-    emit(_computeState(await _metadataRepository.saveBudgets(budgets)));
+    emit(_computeState(_metadataRepository.saveBudgets(budgets), null));
   }
 
-  FutureOr<void> _onBudgetSetValue(BudgetSetValue event, Emitter<BudgetState> emit) async {
+  void _onBudgetSetValue(BudgetSetValue event, Emitter<BudgetState> emit) {
     Budget budgetToUpdate = event.budget;
+    double newValue = event.value;
 
     if (state.remainingBudget - (event.value - budgetToUpdate.value) < 0) {
-      return;
+      newValue = event.budget.value + state.remainingBudget;
     }
 
     // if (state.remainingBudget - event.value < 0 && state.remainingBudget < 10) {
@@ -60,18 +71,112 @@ class BudgetBloc extends Bloc<BudgetEvent, BudgetState> {
     // } else {
     //   budgetToUpdate.value = event.value;
     // }
-    budgetToUpdate.value = event.value;
+    budgetToUpdate.value = newValue;
+    List<Budget> budgets = _computeBudgets(budgetToUpdate);
+    emit(_computeState(budgets, null));
 
-    emit(_computeState(await _saveBudget(budgetToUpdate)));
+    setValueTimer?.cancel();
+    setValueTimer = Timer(
+      const Duration(milliseconds: 100), 
+      () {
+        _saveBudget(budgets);
+      }
+    );
   }
 
-  FutureOr<void> _onBudgetCompareNext(BudgetCompareNext event, Emitter<BudgetState> emit) {
+  void _onBudgetSetLabel(BudgetSetLabel event, Emitter<BudgetState> emit) {
+    Budget budgetToUpdate = event.budget;
+
+    budgetToUpdate.label = event.label;
+    List<Budget> budgets = _computeBudgets(budgetToUpdate);
+    _saveBudget(budgets);
+    emit(_computeState(budgets, null));
   }
 
-  FutureOr<void> _onBudgetComparePrevious(BudgetComparePrevious event, Emitter<BudgetState> emit) {
+  void _onBudgetCompareNext(BudgetCompareNext event, Emitter<BudgetState> emit) {
+    num compareMonth = state.compareMonth;
+    num compareYear = state.compareYear;
+    if (state.compareMonth == 12) {
+      compareMonth = 1;
+      compareYear++;
+    } else {
+      compareMonth++;
     }
 
-  Future<List<Budget>> _saveBudget(Budget budgetToSave) async {
+    if (state.lastDate != null && state.lastDate!.isBefore(DateTime(compareYear.toInt(), compareMonth.toInt()))) {
+      return;
+    }
+
+    final compareResult = _computeCompareBudget(state.budgets, compareYear, compareMonth);
+    emit(state.copyWith(
+      compareBudgets: compareResult.$1,
+      otherBudgets: compareResult.$2,
+      compareMonth: compareMonth,
+      compareYear: compareYear,
+    ));
+  }
+
+  void _onBudgetComparePrevious(BudgetComparePrevious event, Emitter<BudgetState> emit) {
+    num compareMonth = state.compareMonth;
+    num compareYear = state.compareYear;
+    if (state.compareMonth == 1) {
+      compareMonth = 12;
+      compareYear--;
+    } else {
+      compareMonth--;
+    }
+
+    if (state.firstDate != null && state.firstDate!.isAfter(DateTime(compareYear.toInt(), compareMonth.toInt()))) {
+      return;
+    }
+
+    final compareResult = _computeCompareBudget(state.budgets, compareYear, compareMonth);
+    emit(state.copyWith(
+      compareBudgets: compareResult.$1,
+      otherBudgets: compareResult.$2,
+      compareMonth: compareMonth,
+      compareYear: compareYear,
+    ));
+  }
+
+  _onBudgetSetCompare(BudgetSetCompare event, Emitter<BudgetState> emit) {
+    DateTime firstDate = DateTime.now();
+    DateTime lastDate = DateTime.fromMicrosecondsSinceEpoch(0);
+
+    for (var transaction in _transactionsRepository.getTransactions()) {
+      if (firstDate.compareTo(transaction.date) > 0) {
+        firstDate = transaction.date;
+      }
+
+      if (lastDate.compareTo(transaction.date) < 0) {
+        lastDate = transaction.date;
+      }
+    }
+
+    num compareMonth = state.compareMonth;
+    num compareYear = state.compareYear;
+
+    if (compareMonth == 1 && compareYear == 2000) {
+      compareMonth = lastDate.month;
+      compareYear = lastDate.year;
+    }
+
+    final compareResult = _computeCompareBudget(state.budgets, compareYear, compareMonth);
+    emit(state.copyWith(
+      firstDate: firstDate,
+      lastDate: lastDate,
+      compareMonth: compareMonth,
+      compareYear: compareYear,
+      compareBudgets: compareResult.$1,
+      otherBudgets: compareResult.$2,
+    )); 
+  }
+
+  void _onBudgetSetInitial(BudgetSetInitial event, Emitter<BudgetState> emit) {
+    emit(_computeState(state.budgets, event.value));
+  }
+
+  List<Budget> _computeBudgets(Budget budgetToSave) {
     List<Budget> budgets = _metadataRepository.getBudgets();
 
     try {
@@ -85,14 +190,52 @@ class BudgetBloc extends Bloc<BudgetEvent, BudgetState> {
       }
     }
 
-    // _metadataRepository.saveBudgets(budgets);
     return budgets;
   }
 
-  BudgetState _computeState(List<Budget> budgets) {
+  List<Budget> _saveBudget(List<Budget> budgets) {
+    return _metadataRepository.saveBudgets(budgets);
+  }
+
+  (List<Budget> compareBudgets, List<Budget> otherBudgets) _computeCompareBudget(List<Budget> budgets, num year, num month) {
+    Map<String, Budget> compareBudgetMap = { for (var budget in budgets) budget.label : Budget(label: budget.label)};
+    Budget otherBudget = Budget(label: 'Hors budget');
+    Map<String, Budget> otherBudgetMap = {};
+    List<Budget> compareBudgets = [];
+    _transactionsRepository.getTransactions()
+      .where((transaction) => transaction.value < 0 && transaction.date.year == year && transaction.date.month == month)
+      .forEach((transaction) {
+        Budget? budget = compareBudgetMap[transaction.category];
+        if (budget == null) {
+          otherBudget.value += transaction.value.abs();
+          Budget? otherBudgetFromMap = otherBudgetMap[transaction.category];
+          if (otherBudgetFromMap == null) {
+            otherBudgetMap[transaction.category] = Budget(label: transaction.category, value: transaction.value.abs());
+          } else {
+            otherBudgetFromMap.value += transaction.value.abs();
+          }
+        } else {
+          budget.value += transaction.value.abs();
+        }
+      });
+
+    compareBudgets.addAll(compareBudgetMap.values);
+    compareBudgets.add(otherBudget);
+    return (compareBudgets, otherBudgetMap.values.toList()..sort((a, b) => b.value.compareTo(a.value)));
+  }
+
+  BudgetState _computeState(List<Budget> budgets, double? initialBudget) {
+    final compareResult = _computeCompareBudget(state.budgets, state.compareYear, state.compareMonth);
+    
+    final budgetValues = budgets.map((budget) => budget.value);
+    final budgetReducedValues = budgetValues.isEmpty ? 0 : budgetValues.reduce((value, element) => value + element);
+
     return state.copyWith(
       budgets: budgets,
-      remainingBudget: state.initialBudget - budgets.map((budget) => budget.value).reduce((value, element) => value + element),
+      initialBudget: (initialBudget ?? state.initialBudget),
+      remainingBudget: (initialBudget ?? state.initialBudget) - budgetReducedValues,
+      compareBudgets: compareResult.$1,
+      otherBudgets: compareResult.$2,
     );
   }
 }

lib/domains/budget/budget_event.dart

@@ -43,5 +43,24 @@ final class BudgetSetValue extends BudgetEvent {
   List<Object> get props => [budget, value];
 }
 
+final class BudgetSetLabel extends BudgetEvent {
+  final Budget budget;
+  final String label;
+
+  const BudgetSetLabel(this.budget, this.label);
+
+  @override
+  List<Object> get props => [budget, label];
+}
+
 final class BudgetCompareNext extends BudgetEvent {}
 final class BudgetComparePrevious extends BudgetEvent {}
+final class BudgetSetCompare extends BudgetEvent {}
+final class BudgetSetInitial extends BudgetEvent {
+  final double value;
+
+  const BudgetSetInitial(this.value);
+
+  @override
+  List<Object> get props => [value];
+}

lib/domains/budget/budget_state.dart

@@ -5,21 +5,46 @@ final class BudgetState {
   final double initialBudget;
   final double remainingBudget;
 
+  final List<Budget> compareBudgets;
+  final List<Budget> otherBudgets;
+  final num compareYear;
+  final num compareMonth;
+  final DateTime? firstDate;
+  final DateTime? lastDate;
+
   const BudgetState({
     this.budgets = const [],
     this.initialBudget = 2300.0,
     this.remainingBudget = 2300.0,
+    this.compareBudgets = const [],
+    this.otherBudgets = const [],
+    this.compareYear = 2000,
+    this.compareMonth = 1,
+    this.firstDate,
+    this.lastDate,
   });
 
   BudgetState copyWith({
     List<Budget>? budgets,
     double? initialBudget,
     double? remainingBudget,
+    List<Budget>? compareBudgets,
+    List<Budget>? otherBudgets,
+    num? compareYear,
+    num? compareMonth,
+    DateTime? firstDate,
+    DateTime? lastDate,
   }) {
     return BudgetState(
       budgets: budgets ?? this.budgets,
       initialBudget: initialBudget ?? this.initialBudget,
       remainingBudget: remainingBudget ?? this.remainingBudget,
+      compareBudgets: compareBudgets ?? this.compareBudgets,
+      otherBudgets: otherBudgets ?? this.otherBudgets,
+      compareYear: compareYear ?? this.compareYear,
+      compareMonth: compareMonth ?? this.compareMonth,
+      firstDate: firstDate ?? this.firstDate,
+      lastDate: lastDate ?? this.lastDate,
     );
   }
 }

lib/domains/category/category_bloc.dart

@@ -42,29 +42,29 @@ class CategoryBloc extends Bloc<CategoryEvent, CategoryState> {
     emit(_computeState(event.categories));
   }
 
-  FutureOr<void> _onCategoryEditColor(CategoryEditColor event, Emitter<CategoryState> emit) async {
+  FutureOr<void> _onCategoryEditColor(CategoryEditColor event, Emitter<CategoryState> emit) {
     Category category = event.category;
     category.color = event.color;
-    emit(_computeState(await _saveCategory(category)));
+    emit(_computeState(_saveCategory(category)));
   }
 
-  FutureOr<void> _onCategoryEditTransfert(CategoryEditTransfert event, Emitter<CategoryState> emit) async {
+  FutureOr<void> _onCategoryEditTransfert(CategoryEditTransfert event, Emitter<CategoryState> emit) {
     Category category = event.category;
     category.transfert = event.transfert;
-    emit(_computeState(await _saveCategory(category)));
+    emit(_computeState(_saveCategory(category)));
   }
 
-  FutureOr<void> _onCategoryEditEssential(CategoryEditEssential event, Emitter<CategoryState> emit) async {
+  FutureOr<void> _onCategoryEditEssential(CategoryEditEssential event, Emitter<CategoryState> emit) {
     Category category = event.category;
     category.essential = event.essential;
-    emit(_computeState(await _saveCategory(category)));
+    emit(_computeState(_saveCategory(category)));
   }
 
-  FutureOr<void> _onCategoryEditLabel(CategoryEditLabel event, Emitter<CategoryState> emit) async {
+  FutureOr<void> _onCategoryEditLabel(CategoryEditLabel event, Emitter<CategoryState> emit) {
     // TODO check for existance, rename every transaction
   }
 
-  FutureOr<void> _onCategoryRemove(CategoryRemove event, Emitter<CategoryState> emit) async {
+  FutureOr<void> _onCategoryRemove(CategoryRemove event, Emitter<CategoryState> emit) {
     CategoryState originalCategoryState = state.copyWith();
     Category categoryToRemove = event.category;
     List<Category> categories = state.categories;
@@ -76,21 +76,21 @@ class CategoryBloc extends Bloc<CategoryEvent, CategoryState> {
     } else {
       categories.removeWhere((category) => category.label == categoryToRemove.label);
       emit(CategoryRemoveSucess());
-      emit(_computeState(await _metadataRepository.saveCategories(categories)));
+      emit(_computeState(_metadataRepository.saveCategories(categories)));
     }
   }
 
-  FutureOr<void> _onCategoryAdd(CategoryAdd event, Emitter<CategoryState> emit) async {
+  FutureOr<void> _onCategoryAdd(CategoryAdd event, Emitter<CategoryState> emit) {
     String uuid = const Uuid().v8();
     Category category = Category(
       label: 'Category $uuid',
       color: 'FF74feff',
     );
 
-    emit(_computeState(await _saveCategory(category)));
+    emit(_computeState(_saveCategory(category)));
   }
 
-  _saveCategory(Category categoryToSave) async {
+  List<Category> _saveCategory(Category categoryToSave) {
     List<Category> categories = _metadataRepository.getCategories();
 
     try {
@@ -106,7 +106,7 @@ class CategoryBloc extends Bloc<CategoryEvent, CategoryState> {
       }
     }
 
-    await _metadataRepository.saveCategories(categories);
+    _metadataRepository.saveCategories(categories);
     return categories;
   }
 

lib/domains/settings/settings_bloc.dart

@@ -0,0 +1,36 @@
+import 'dart:async';
+
+import 'package:equatable/equatable.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:tunas/repositories/metadata/metadata_repository.dart';
+import 'package:tunas/repositories/metadata/models/settings.dart';
+
+part 'settings_event.dart';
+part 'settings_state.dart';
+
+class SettingsBloc extends Bloc<SettingsEvent, SettingsState> {
+  final MetadataRepository _metadataRepository;
+
+  SettingsBloc({required MetadataRepository metadataRepository}) : _metadataRepository = metadataRepository, super(const SettingsState()) {
+    on<SettingsLoad>(_onSettingsLoad);
+    on<SetThemeMode>(_onSetThemeMode);
+
+    _metadataRepository
+      .getSettingsStream()
+      .listen((settings) => add(SettingsLoad(settings)));
+  }
+
+  FutureOr<void> _onSettingsLoad(SettingsLoad event, Emitter<SettingsState> emit) {
+    emit(state.copyWith(
+      themeMode: event.settings.themeMode,
+    ));
+  }
+
+  FutureOr<void> _onSetThemeMode(SetThemeMode event, Emitter<SettingsState> emit) {
+    _metadataRepository.saveSettings(Settings(themeMode: event.themeMode));
+    emit(state.copyWith(
+      themeMode: event.themeMode,
+    ));
+  }
+}

lib/domains/settings/settings_event.dart

@@ -0,0 +1,20 @@
+part of 'settings_bloc.dart';
+
+sealed class SettingsEvent extends Equatable {
+  const SettingsEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class SettingsLoad extends SettingsEvent {
+  final Settings settings;
+
+  const SettingsLoad(this.settings);
+}
+
+final class SetThemeMode extends SettingsEvent {
+  final ThemeMode themeMode;
+
+  const SetThemeMode(this.themeMode);
+}

lib/domains/settings/settings_state.dart

@@ -0,0 +1,17 @@
+part of 'settings_bloc.dart';
+
+class SettingsState {
+  final ThemeMode themeMode;
+
+  const SettingsState({
+    this.themeMode = ThemeMode.system,
+  });
+
+  SettingsState copyWith({
+    ThemeMode? themeMode,
+  }) {
+    return SettingsState(
+      themeMode: themeMode ?? this.themeMode,
+    );
+  }
+}

lib/domains/transaction/transaction_bloc.dart

@@ -145,7 +145,7 @@ class TransactionBloc extends Bloc<TransactionEvent, TransactionState> {
 
   _onTransactionAddDialog(
     TransactionAdd event, Emitter<TransactionState> emit
-  ) async {
+  ) {
     if (state.isValid) {
       List<Transaction> transactions = state.transactions;
       Transaction? currentTransaction = state.currentTransaction;
@@ -163,7 +163,7 @@ class TransactionBloc extends Bloc<TransactionEvent, TransactionState> {
       ));
       final computeResult = _computeTransactionLine(transactions);
 
-      await _transactionsRepository.saveTransactions(transactions);
+      _transactionsRepository.saveTransactions(transactions);
       
       emit(state.copyWith(
         currentTransaction: null,
@@ -208,13 +208,13 @@ class TransactionBloc extends Bloc<TransactionEvent, TransactionState> {
 
   _onTransactionDeleteCurrent(
     TransactionDeleteCurrent event, Emitter<TransactionState> emit
-  ) async {
+  ) {
     Transaction? currentTransaction = state.currentTransaction;
     if (currentTransaction != null) {
       List<Transaction> transactions = state.transactions;
       transactions.removeWhere((transaction) => transaction.uuid == currentTransaction.uuid);
       final computeResult = _computeTransactionLine(transactions);
-      await _transactionsRepository.saveTransactions(transactions);
+      _transactionsRepository.saveTransactions(transactions);
       emit(state.copyWith(
         currentTransaction: null,
         transactionDate: const TransactionDate.pure(),

lib/pages/budgets/widgets/budget_cards.dart

@@ -0,0 +1,124 @@
+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/repositories/metadata/models/budget.dart';
+
+class BudgetCards extends StatelessWidget {
+  const BudgetCards({super.key});
+
+  List<Widget> _computeBudgetsCompare(BuildContext context, List<Budget> targetBudgets, List<Budget> realBudgets) {
+    List<Widget> list = [
+      const Text('Budget'),
+      Container(
+        margin: const EdgeInsets.only(bottom: 10),
+        decoration: BoxDecoration(
+          border: Border(
+            bottom: BorderSide(
+              width: 2,
+              color: Theme.of(context).colorScheme.onPrimaryContainer
+            )
+          )
+        ),
+      )
+    ];
+
+    list.addAll(targetBudgets.map((budget) => Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Row(
+          children: [
+            Container(width: 5),
+            Text(budget.label),
+          ],
+        ),
+        Text(
+          '${NumberFormat("#00").format(budget.value.abs())}/${NumberFormat("#00 €").format(realBudgets.firstWhere((rbudget) => rbudget.label == budget.label).value.abs())}',
+          style: const TextStyle(
+            fontFamily: 'NovaMono',
+          )
+        )
+      ],
+    )));
+    return list;
+  }
+
+  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) {
+    bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
+    return BlocBuilder<BudgetBloc, BudgetState>(
+      builder: (context, state) => Column(
+        children: [
+          Container(
+            width: smallVerticalScreen ? null : 300,
+            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: _computeBudgetsCompare(context, state.budgets, state.compareBudgets),
+              ),
+            ) 
+          ),
+          Container(
+            width: smallVerticalScreen ? null : 300,
+            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),
+              ),
+            ) 
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/budgets/widgets/budget_comparator.dart

@@ -0,0 +1,50 @@
+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/budgets/widgets/budget_cards.dart';
+import 'package:tunas/pages/budgets/widgets/budget_compare_selector.dart';
+import 'package:tunas/pages/budgets/widgets/budget_radar.dart';
+import 'package:tunas/pages/common/titled_container.dart';
+
+class BudgetComparator extends StatelessWidget {
+  const BudgetComparator({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
+    return BlocBuilder<BudgetBloc, BudgetState>(
+      builder: (context, state) => TitledContainer(
+        title: 'Compare', 
+        child: smallVerticalScreen 
+        ? const Column(
+          children: [
+            BudgetCompareSelector(),
+            SizedBox(
+              height: 500,
+              child: BudgetRadar(),
+            ),
+            SizedBox(
+              height: 10,
+            ),
+            SizedBox(
+              height: 500,
+              child: BudgetCards(),
+            ),
+          ],
+        )
+        : const Column(
+          children: [
+            BudgetCompareSelector(),
+            Row(
+              children: [
+                BudgetCards(),
+                BudgetRadar(),
+              ],
+            )
+          ]
+        ),
+      )
+    );
+  }
+}

lib/pages/budgets/widgets/budget_compare_selector.dart

@@ -0,0 +1,28 @@
+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';
+
+class BudgetCompareSelector extends StatelessWidget {
+  const BudgetCompareSelector({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<BudgetBloc, BudgetState>(
+      builder: (context, state) => 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)
+          ),
+        ],
+      )
+    );
+  }
+}

lib/pages/budgets/widgets/budget_line.dart

@@ -0,0 +1,124 @@
+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/repositories/metadata/models/budget.dart';
+import 'package:tunas/repositories/metadata/models/category.dart';
+
+class BudgetLine extends StatelessWidget {
+  final Budget budget;
+
+  const BudgetLine({super.key, required this.budget});
+
+  Widget _largeScreenLine(BuildContext context, List<Category> categories, double initialBudget, double remainingBudget) {
+    return 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: categories.map((e) => DropdownMenuItem(value: e.label, child: Text(e.label))).toList(),
+                ),
+              ),
+              const SizedBox(width: 30),
+              IconButton(
+                onPressed: () => context.read<BudgetBloc>().add(BudgetSetValue(budget, budget.value.round().toDouble() - 1)),
+                icon: const Icon(Icons.remove_circle)
+              ),
+              Text(
+                NumberFormat('####000 €', 'fr_FR').format(budget.value),
+                style: const TextStyle(
+                  fontFamily: 'NovaMono',
+                  fontWeight: FontWeight.bold,
+                  fontSize: 15,
+                )
+              ),
+              IconButton(
+                onPressed: () => context.read<BudgetBloc>().add(BudgetSetValue(budget, budget.value.round().toDouble() + 1)),
+                icon: const Icon(Icons.add_circle)
+              ),
+              const SizedBox(width: 5),
+            ],
+          )
+        ),
+        Expanded(
+          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),
+        ),
+      ]
+    );
+  }
+
+  Widget _smallScreenLine(BuildContext context, List<Category> categories, double initialBudget, double remainingBudget) {
+    return Column(
+      children: [
+        Row(
+          children: [
+            Expanded(
+              child: DropdownButtonFormField<String>(
+                value: budget.label,
+                onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetLabel(budget, value!)),
+                items: categories.map((e) => DropdownMenuItem(value: e.label, child: Text(e.label))).toList(),
+              ),
+            ),
+            const SizedBox(width: 30),
+            Text(
+              NumberFormat('####000 €', 'fr_FR').format(budget.value),
+              style: const TextStyle(
+                fontFamily: 'NovaMono',
+                fontWeight: FontWeight.bold,
+                fontSize: 15,
+              )
+            ),
+            IconButton(
+              onPressed: () => context.read<BudgetBloc>().add(BudgetSetValue(budget, budget.value.round().toDouble() - 1)),
+              icon: const Icon(Icons.remove_circle)
+            ),
+            IconButton(
+              onPressed: () => context.read<BudgetBloc>().add(BudgetSetValue(budget, budget.value.round().toDouble() + 1)),
+              icon: const Icon(Icons.add_circle)
+            ),
+            IconButton(
+              onPressed: () => context.read<BudgetBloc>().add(BudgetRemove(budget)),
+              icon: const Icon(Icons.delete),
+            ),
+          ],
+        ),
+        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())),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final categoryState = context.watch<CategoryBloc>().state;
+    bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
+    return BlocBuilder<BudgetBloc, BudgetState>(
+      builder: (context, state) => smallVerticalScreen 
+        ? _smallScreenLine(context, categoryState.categories, state.initialBudget, state.remainingBudget) 
+        : _largeScreenLine(context, categoryState.categories, state.initialBudget, state.remainingBudget),
+    );
+  }
+}

lib/pages/budgets/widgets/budget_maker.dart

@@ -0,0 +1,91 @@
+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/budgets/widgets/budget_line.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) {
+    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) => BudgetLine(budget: budget)).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(
+        mainAxisAlignment: MainAxisAlignment.end,
+        children: [
+          Text(
+            '${NumberFormat('#####00 €', 'fr_FR').format(remainingBudget)} remaining  ',
+            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/budget_radar.dart

@@ -0,0 +1,67 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:tunas/domains/budget/budget_bloc.dart';
+import 'package:tunas/repositories/metadata/models/budget.dart';
+
+class BudgetRadar extends StatelessWidget {
+  const BudgetRadar({super.key});
+
+  List<RadarDataSet> _computeDataSet(BuildContext context, List<Budget> targetBudgets, List<Budget> realBudgets) {
+    if (realBudgets.isEmpty || targetBudgets.isEmpty) {
+      return [RadarDataSet(dataEntries: [const RadarEntry(value: 1), const RadarEntry(value: 2), const RadarEntry(value: 3)])];
+    }
+
+    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 [realDataSet, targetDataSet];
+  }
+
+  RadarChartTitle _computeDataSetTitle(int index, List<Budget> realBudgets) {
+    return RadarChartTitle(text: realBudgets[index].label);
+  }
+
+  bool canShowData(List<Budget> targetBudgets, List<Budget> realBudgets) {
+    return realBudgets.length >= 3 && targetBudgets.length >= 3;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<BudgetBloc, BudgetState>(
+      builder: (context, state) => canShowData(state.budgets, state.compareBudgets) ? 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),
+            )
+          ),
+        )
+      )
+      : const Text('No data to show'),
+    );
+  }
+}

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/pages/budgets/widgets/budget_comparator.dart';
-import 'package:tunas/repositories/metadata/models/budget.dart';
+import 'package:tunas/pages/budgets/widgets/budget_maker.dart';
-import 'package:uuid/uuid.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(
+          BudgetMaker(),
-            title: 'Prepare',
+          BudgetComparator(),
-            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)
-                          ),
-                        ],
-                      ),
-                    ],
-                  )
-                )
-              ],
-            ),
-          ),
         ],
       )
     );

lib/pages/data/data_page.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:tunas/pages/data/widgets/account_settings.dart';
 import 'package:tunas/pages/data/widgets/categories_settings.dart';
 import 'package:tunas/pages/data/widgets/import_settings.dart';
+import 'package:tunas/pages/data/widgets/settings_settings.dart';
 
 class DataPage extends StatelessWidget {
   const DataPage({super.key});
@@ -25,6 +26,7 @@ class DataPage extends StatelessWidget {
                 fontSize: 35,
               ),
             ),
+            SettingsSettings(),
             ImportSettings(),
             AccountSettings(),
             CategoriesSettings(),

lib/pages/data/widgets/import_settings.dart

@@ -12,25 +12,36 @@ class ImportSettings extends StatelessWidget {
       builder: (context, state) => TitledContainer(
         title: "Import",
         child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            FilledButton(
+            FilledButton.icon(
+              onPressed: () => context.read<AccountBloc>().add(const ClearData()),
+              label: const Text('ClearData'),
+              icon: const Icon(Icons.delete_forever),
+            ),
+            const SizedBox(height: 5),
+            FilledButton.tonalIcon(
               onPressed: () => context.read<AccountBloc>().add(const AccountImportCSV()),
-              child: const Text('Import CSV')
+              label: const Text('Import CSV'),
+              icon: const Icon(Icons.upload_file),
             ),
             const SizedBox(height: 5),
-            FilledButton(
+            FilledButton.tonalIcon(
               onPressed: () => context.read<AccountBloc>().add(const AccountImportJSON()),
-              child: const Text('Import JSON')
+              label: const Text('Import JSON'),
+              icon: const Icon(Icons.upload_file),
             ),
             const SizedBox(height: 5),
-            FilledButton(
+            FilledButton.tonalIcon(
               onPressed: () => context.read<AccountBloc>().add(const AccountExportCSV()),
-              child: const Text('Export CSV')
+              label: const Text('Export CSV'),
+              icon: const Icon(Icons.download),
             ),
             const SizedBox(height: 5),
-            FilledButton(
+            FilledButton.tonalIcon(
               onPressed: () => context.read<AccountBloc>().add(const AccountExportJSON()),
-              child: const Text('Export JSON')
+              label: const Text('Export JSON'),
+              icon: const Icon(Icons.download),
             ),
           ],
         ),

lib/pages/data/widgets/settings_settings.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:tunas/domains/settings/settings_bloc.dart';
+import 'package:tunas/pages/common/titled_container.dart';
+
+class SettingsSettings extends StatelessWidget {
+  const SettingsSettings({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<SettingsBloc, SettingsState>(
+      builder: (context, state) => TitledContainer(
+        title: "Theme",
+        child: Column(
+          children: [
+            SegmentedButton<ThemeMode>(
+              segments: const [
+                ButtonSegment(
+                  value: ThemeMode.system,
+                  icon: Icon(Icons.settings)
+                ),
+                ButtonSegment(
+                  value: ThemeMode.light,
+                  icon: Icon(Icons.light_mode)
+                ),
+                ButtonSegment(
+                  value: ThemeMode.dark,
+                  icon: Icon(Icons.dark_mode)
+                ),
+              ],
+              selected: {state.themeMode},
+              onSelectionChanged: (themeMode) => context.read<SettingsBloc>().add(SetThemeMode(themeMode.first)),
+            )
+          ],
+        ),
+      )
+    );
+  }
+}

lib/pages/home/home_page.dart

@@ -4,6 +4,7 @@ import 'package:tunas/domains/account/account_bloc.dart';
 import 'package:tunas/domains/budget/budget_bloc.dart';
 import 'package:tunas/domains/category/category_bloc.dart';
 import 'package:tunas/domains/charts/chart_bloc.dart';
+import 'package:tunas/domains/settings/settings_bloc.dart';
 import 'package:tunas/domains/transaction/transaction_bloc.dart';
 import 'package:tunas/pages/budgets/budgets_page.dart';
 import 'package:tunas/pages/data/data_page.dart';
@@ -93,8 +94,9 @@ class HomePage extends StatelessWidget {
         BlocProvider(create: (context) => AccountBloc(metadataRepository: RepositoryProvider.of<MetadataRepository>(context), transactionsRepository: RepositoryProvider.of<TransactionsRepository>(context))),
         BlocProvider(create: (context) => TransactionBloc(transactionsRepository: RepositoryProvider.of<TransactionsRepository>(context))),
         BlocProvider(create: (context) => CategoryBloc(metadataRepository: RepositoryProvider.of<MetadataRepository>(context), transactionsRepository: RepositoryProvider.of<TransactionsRepository>(context))),
-        BlocProvider(create: (context) => BudgetBloc(metadataRepository: RepositoryProvider.of<MetadataRepository>(context))),
+        BlocProvider(create: (context) => BudgetBloc(metadataRepository: RepositoryProvider.of<MetadataRepository>(context), transactionsRepository: RepositoryProvider.of<TransactionsRepository>(context))),
         BlocProvider(create: (context) => ChartBloc(metadataRepository: RepositoryProvider.of<MetadataRepository>(context), transactionsRepository: RepositoryProvider.of<TransactionsRepository>(context))),
+        BlocProvider(create: (context) => SettingsBloc(metadataRepository: RepositoryProvider.of<MetadataRepository>(context))),
       ],
       child: DefaultTabController(
         length: 4,

lib/pages/transactions/widgets/transactions_header.dart

@@ -60,6 +60,7 @@ class TransactionsHeader extends StatelessWidget {
       decoration: BoxDecoration(
         border: Border(
           bottom: BorderSide(
+            width: 2,
             color: Theme.of(context).colorScheme.onPrimaryContainer
           )
         )

lib/repositories/json/json_repository.dart

@@ -1,19 +1,31 @@
+import 'dart:async';
 import 'dart:convert';
 
-import 'package:tunas/clients/storage/storage_client.dart';
+import 'package:tunas/clients/storage/json_storage_client.dart';
 import 'package:tunas/repositories/json/models/json.dart';
 
 class JsonRepository {
   String accountFile = 'tunas_main_account.json';
 
-  final StorageClient _storageClient;
+  final JsonStorageClient _storageClient;
+
+  Map<String, Timer> saveTimerMap = {};
 
   JsonRepository({
     required storageClient,
   }) : _storageClient = storageClient;
 
-  saveJson(Json json) async {
+  void saveJson(Json json) {
-    await _storageClient.save(json.getJsonFileName(), jsonEncode(json.toJson()));
+    Timer? saveTimer = saveTimerMap[json.getJsonFileName()];
+
+    if (saveTimer != null) {
+      saveTimer.cancel();
+    }
+
+    saveTimer = Timer(const Duration(milliseconds: 500), () {
+      saveTimerMap.remove(json.getJsonFileName());
+      _storageClient.save(json.getJsonFileName(), jsonEncode(json.toJson()));
+    });
   }
 
   Future<T> loadJson<T extends Json>(Json json, JsonFactory<T> jsonFactory) async {

lib/repositories/metadata/metadata_repository.dart

@@ -4,6 +4,7 @@ import 'package:tunas/repositories/metadata/models/budget.dart';
 import 'package:tunas/repositories/metadata/models/category.dart';
 import 'package:tunas/repositories/metadata/models/account.dart';
 import 'package:tunas/repositories/metadata/models/metadata.dart';
+import 'package:tunas/repositories/metadata/models/settings.dart';
 
 class MetadataRepository {
 
@@ -11,6 +12,7 @@ class MetadataRepository {
   final _categoriesController = BehaviorSubject<List<Category>>.seeded(const []);
   final _budgetController = BehaviorSubject<List<Budget>>.seeded(const []);
   final _accountController = BehaviorSubject<List<Account>>.seeded(const []);
+  final _settingsController = BehaviorSubject<Settings>.seeded(const Settings());
 
   MetadataRepository({
     required jsonRepository,
@@ -40,45 +42,62 @@ class MetadataRepository {
     return _accountController.asBroadcastStream();
   }
 
+  Settings getSettings() {
+    return _settingsController.value;
+  }
+
+  Stream<Settings> getSettingsStream() {
+    return _settingsController.asBroadcastStream();
+  }
+
   void loadMetadata() async {
     Metadata metadata = await _jsonRepository.loadJson(Metadata(), MetadataFactory());
     _broadcastMetadata(metadata);
   }
 
-  Future<List<Category>> saveCategories(List<Category> categories) async {
+  List<Category> saveCategories(List<Category> categories) {
     Metadata metadata = _constructMetadataFromControllers();
     metadata.categories = categories;
-    await _jsonRepository.saveJson(metadata);
+    _jsonRepository.saveJson(metadata);
     _categoriesController.add(categories);
     return categories;
   }
 
-  Future<List<Budget>> saveBudgets(List<Budget> budgets) async {
+  List<Budget> saveBudgets(List<Budget> budgets) {
     Metadata metadata = _constructMetadataFromControllers();
     metadata.budgets = budgets;
-    await _jsonRepository.saveJson(metadata);
+    _jsonRepository.saveJson(metadata);
     _budgetController.add(budgets);
     return budgets;
   }
 
-  Future<List<Account>> saveAccounts(List<Account> accounts) async {
+  List<Account> saveAccounts(List<Account> accounts) {
     Metadata metadata = _constructMetadataFromControllers();
     metadata.accounts = accounts;
-    await _jsonRepository.saveJson(metadata);
+    _jsonRepository.saveJson(metadata);
     _accountController.add(accounts);
     return accounts;
   }
 
-  deleteMetadata() async {
+  Settings saveSettings(Settings settings) {
+    Metadata metadata = _constructMetadataFromControllers();
+    metadata.settings = settings;
+    _jsonRepository.saveJson(metadata);
+    _settingsController.add(settings);
+    return settings;
+  }
+
+  void deleteMetadata() {
     Metadata metadata = Metadata();
-    await _jsonRepository.saveJson(metadata);
+    _jsonRepository.saveJson(metadata);
     _broadcastMetadata(metadata);
   }
 
-  _broadcastMetadata(Metadata metadata) {
+  void _broadcastMetadata(Metadata metadata) {
     _categoriesController.add(metadata.categories);
     _budgetController.add(metadata.budgets);
     _accountController.add(metadata.accounts);
+    _settingsController.add(metadata.settings);
   }
 
   Metadata _constructMetadataFromControllers() {
@@ -86,6 +105,7 @@ class MetadataRepository {
       categories: _categoriesController.value,
       budgets: _budgetController.value,
       accounts: _accountController.value,
+      settings: _settingsController.value,
     );
   }
 }

lib/repositories/metadata/models/metadata.dart

@@ -2,16 +2,19 @@ import 'package:tunas/repositories/metadata/models/budget.dart';
 import 'package:tunas/repositories/metadata/models/category.dart';
 import 'package:tunas/repositories/json/models/json.dart';
 import 'package:tunas/repositories/metadata/models/account.dart';
+import 'package:tunas/repositories/metadata/models/settings.dart';
 
 class Metadata implements Json {
   List<Budget> budgets;
   List<Category> categories;
   List<Account> accounts;
+  Settings settings;
 
   Metadata({
     this.budgets = const [],
     this.categories = const [],
     this.accounts = const [],
+    this.settings = const Settings(),
   });
 
   @override

lib/repositories/metadata/models/settings.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+
+class Settings {
+  final ThemeMode themeMode;
+
+  const Settings({
+    this.themeMode = ThemeMode.system,
+  });
+
+  factory Settings.fromJson(Map<String, dynamic> json) {
+    return Settings(
+      themeMode: ThemeMode.values.byName(json['themeMode']),
+    );
+  }
+
+  Map<String, String> toJson() => {
+    'themeMode': themeMode.name,
+  };
+}

lib/repositories/transactions/transactions_repository.dart

@@ -20,20 +20,20 @@ class TransactionsRepository {
     return _transactionsController.asBroadcastStream();
   }
 
-  loadTransactions() async {
+  Future<void> loadTransactions() async {
     Transactions transactions = await _jsonRepository.loadJson(Transactions(), TransactionsFactory());
     _transactionsController.add(transactions.transactions);
   }
 
-  saveTransactions(List<Transaction> transactionsList) async {
+  void saveTransactions(List<Transaction> transactionsList) {
     Transactions transactions = Transactions(transactions: transactionsList);
-    await _jsonRepository.saveJson(transactions);
+    _jsonRepository.saveJson(transactions);
     _transactionsController.add(transactionsList);
   }
 
-  deleteTransactions() async {
+  void deleteTransactions() {
     Transactions transactions = Transactions();
-    await _jsonRepository.saveJson(transactions);
+    _jsonRepository.saveJson(transactions);
     _transactionsController.add([]);
   }
 }