@marcos_feitoza/personal-finance-frontend-feature-dashboard 1.1.2 → 1.2.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [1.2.1](https://github.com/MarcosOps/personal-finance-frontend-feature-dashboard/compare/v1.2.0...v1.2.1) (2026-01-30)
+
+
+### Bug Fixes
+
+* Reorder no mobile ([1342ce5](https://github.com/MarcosOps/personal-finance-frontend-feature-dashboard/commit/1342ce51d9f0c1b4ea2fc684dfe756d1835b252e))
+* Web responsivo (mobile/tablet/resize) ([9ad887a](https://github.com/MarcosOps/personal-finance-frontend-feature-dashboard/commit/9ad887ae839e6bb70edfe2f50877f00dc36d4851))
+
+# [1.2.0](https://github.com/MarcosOps/personal-finance-frontend-feature-dashboard/compare/v1.1.2...v1.2.0) (2026-01-29)
+
+
+### Bug Fixes
+
+* add revoke token ([9d4febb](https://github.com/MarcosOps/personal-finance-frontend-feature-dashboard/commit/9d4febb18f932dae3c853656cb08ba9e3ab53ca5))
+
+
+### Features
+
+* add useer profile ([f3e410a](https://github.com/MarcosOps/personal-finance-frontend-feature-dashboard/commit/f3e410aea7852115e5be40199d3cd24e95205812))
+* new AppTheme process ([5538715](https://github.com/MarcosOps/personal-finance-frontend-feature-dashboard/commit/55387150f8271f898e8309dfc0c3f1dc8ee66661))
+
 ## [1.1.2](https://github.com/MarcosOps/personal-finance-frontend-feature-dashboard/compare/v1.1.1...v1.1.2) (2025-12-06)
 
 

package/lib/models/dashboard_widget.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/widgets.dart';
+
+/// A lightweight definition of a dashboard card/widget.
+///
+/// The goal is to make the dashboard layout data-driven so we can:
+/// - reorder widgets (mobile MVP)
+/// - persist order locally
+/// - later allow hide/show and desktop grid reorder
+class DashboardWidgetDefinition {
+  final String id;
+  final String title;
+  final WidgetBuilder builder;
+
+  const DashboardWidgetDefinition({
+    required this.id,
+    required this.title,
+    required this.builder,
+  });
+}

package/lib/screens/home_screen.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:personal_finance_frontend_core_ui/widgets/salary_form.dart';
 import 'package:personal_finance_frontend_core_ui/widgets/expense_form.dart';
 import 'package:personal_finance_frontend_core_ui/widgets/investment_form.dart';
@@ -14,24 +13,20 @@ import 'package:personal_finance_frontend_feature_reports/screens/move_money_rep
 import 'package:personal_finance_frontend_feature_investments/screens/investment_account_screen.dart';
 import 'package:personal_finance_frontend_feature_investments/screens/rrsp_sun_life_screen.dart';
 import 'package:personal_finance_frontend_feature_investments/screens/crypto_account_screen.dart';
-import 'package:personal_finance_frontend_feature_charts/viewmodels/salary_chart_viewmodel.dart';
-import 'package:personal_finance_frontend_feature_reports/viewmodels/expense_report_viewmodel.dart';
-import 'package:personal_finance_frontend_core_services/services/transaction_service.dart';
-import 'package:personal_finance_frontend_core_ui/utils/currency_input_formatter.dart';
-import 'package:personal_finance_frontend_core_services/models/payment_method.dart';
 import 'package:intl/intl.dart';
 import 'package:personal_finance_frontend_feature_management/screens/reconciliation_screen.dart';
 import 'package:personal_finance_frontend_core_ui/widgets/app_widgets.dart';
 import 'package:personal_finance_frontend_core_ui/utils/theme_notifier.dart';
+import 'package:personal_finance_frontend_core_ui/utils/app_responsive.dart';
 import 'package:personal_finance_frontend_core_services/providers/auth_provider.dart';
 import 'package:personal_finance_frontend_core_ui/widgets/user_profile_avatar.dart';
+import 'package:personal_finance_frontend_feature_profile/screens/profile_screen.dart';
+import '../viewmodels/dashboard_viewmodel.dart';
+import 'package:personal_finance_frontend_core_ui/utils/currency_input_formatter.dart';
+import 'package:personal_finance_frontend_core_ui/theme/app_colors.dart';
 
-class HomeScreen extends StatefulWidget {
-  const HomeScreen({Key? key}) : super(key: key);
-
-  @override
-  _HomeScreenState createState() => _HomeScreenState();
-}
+import '../models/dashboard_widget.dart';
+import '../utils/dashboard_layout_storage.dart';
 
 final String currencySymbol = r'$';
 
@@ -39,131 +34,377 @@ String _formatCurrency(double value) {
   final format = NumberFormat.currency(
     symbol: currencySymbol,
     decimalDigits: 2,
-    locale: 'en_US', // garante vírgula de milhar e ponto decimal no padrão US
+    locale: 'en_US',
   );
   return format.format(value);
 }
 
+class HomeScreen extends StatefulWidget {
+  const HomeScreen({Key? key}) : super(key: key);
+
+  @override
+  State<HomeScreen> createState() => _HomeScreenState();
+}
+
 class _HomeScreenState extends State<HomeScreen> {
-  final _salaryFormKey = GlobalKey<FormState>();
-  final _expenseFormKey = GlobalKey<FormState>();
-  final _investmentFormKey = GlobalKey<FormState>();
-
-  final _rbcCashController = TextEditingController();
-  final _wealthsimpleCashController = TextEditingController();
-  final _rbcCardController = TextEditingController();
-  final _bmoCardController = TextEditingController();
-
-  final TransactionService _transactionService = TransactionService();
-  double _totalIncome = 0.0;
-  double _totalExpenses = 0.0;
-  double _rbcUnpaidExpenses = 0.0;
-  double _bmoUnpaidExpenses = 0.0;
-
-  List<Map<String, dynamic>> _cashTransactions = [];
-  List<Map<String, dynamic>> _rbcTransactions = [];
-  List<Map<String, dynamic>> _bmoTransactions = [];
-  List<Map<String, dynamic>> _investments = [];
-  Map<String, double> _accountBalances = {};
-
-  bool _isLoading = true;
-  String? _selectedMenu;
-
-  final List<String> _investmentAccountNames = [
-    'TFSA',
-    'RRSP Wealthsimple',
-    'Non-Registered',
-    'Crypto'
-  ];
+  final DashboardLayoutStorage _layoutStorage = DashboardLayoutStorage();
+  List<String>? _mobileOrder;
+  bool _mobileOrderLoaded = false;
 
   @override
   void initState() {
     super.initState();
-    // Fetch data after the first frame is built
-    WidgetsBinding.instance.addPostFrameCallback((_) => _fetchData());
-  }
-
-  @override
-  void dispose() {
-    _rbcCashController.dispose();
-    _wealthsimpleCashController.dispose();
-    _rbcCardController.dispose();
-    _bmoCardController.dispose();
-    super.dispose();
+    _loadMobileOrder();
   }
 
-  Future<void> _fetchData() async {
+  Future<void> _loadMobileOrder() async {
+    final saved = await _layoutStorage.loadOrder();
     if (!mounted) return;
-    final authProvider = Provider.of<AuthProvider>(context, listen: false);
-    final token = authProvider.token;
-
     setState(() {
-      _isLoading = true;
+      _mobileOrder = saved;
+      _mobileOrderLoaded = true;
     });
-    try {
-      // Fetch all balances, including the definitive cash balance from the backend
-      final cashBalanceFuture =
-          _transactionService.getAccountBalance('CASH', token: token);
-      final investmentBalanceFutures = _investmentAccountNames
-          .map((name) =>
-              _transactionService.getAccountBalance(name, token: token))
-          .toList();
-
-      final otherFutures = <Future<dynamic>>[
-        _transactionService.getSummaryByPaymentMethod(token: token),
-        _transactionService.fetchTransactions(
-            paymentMethod: 'CASH', limit: 10, token: token),
-        _transactionService.fetchTransactions(
-            paymentMethod: 'RBC', limit: 10, token: token),
-        _transactionService.fetchTransactions(
-            paymentMethod: 'BMO', limit: 10, token: token),
-        _transactionService.getInvestments(token: token),
-      ];
-
-      // Await all futures
-      final allInvestmentBalances = await Future.wait(investmentBalanceFutures);
-      final cashBalance = await cashBalanceFuture;
-      final otherResults = await Future.wait(otherFutures);
-
-      // Safely build the account balances map
-      _accountBalances = {'CASH': cashBalance};
-      for (int i = 0; i < _investmentAccountNames.length; i++) {
-        _accountBalances[_investmentAccountNames[i]] = allInvestmentBalances[i];
+  }
+
+  List<DashboardWidgetDefinition> _defaultMobileWidgets(
+    BuildContext context,
+    DashboardViewModel viewModel,
+    String? token,
+  ) {
+    return [
+      DashboardWidgetDefinition(
+        id: 'cash_balance',
+        title: 'Cash Balance',
+        builder: (context) => _buildCashBalanceCard(context, viewModel),
+      ),
+      DashboardWidgetDefinition(
+        id: 'rbc_balance',
+        title: 'RBC Balance',
+        builder: (context) => _buildCreditCardBalanceCard(
+          context,
+          viewModel,
+          'RBC Balance',
+          viewModel.rbcCardController,
+          viewModel.rbcUnpaidExpenses,
+        ),
+      ),
+      DashboardWidgetDefinition(
+        id: 'bmo_balance',
+        title: 'BMO Balance',
+        builder: (context) => _buildCreditCardBalanceCard(
+          context,
+          viewModel,
+          'BMO Balance',
+          viewModel.bmoCardController,
+          viewModel.bmoUnpaidExpenses,
+        ),
+      ),
+      DashboardWidgetDefinition(
+        id: 'cash_tx',
+        title: 'Cash Transactions',
+        builder: (context) => _buildRecentTransactionsList(
+          'Cash Transactions',
+          viewModel.cashTransactions,
+        ),
+      ),
+      DashboardWidgetDefinition(
+        id: 'rbc_tx',
+        title: 'RBC Transactions',
+        builder: (context) => _buildRecentTransactionsList(
+          'RBC Transactions',
+          viewModel.rbcTransactions,
+        ),
+      ),
+      DashboardWidgetDefinition(
+        id: 'bmo_tx',
+        title: 'BMO Transactions',
+        builder: (context) => _buildRecentTransactionsList(
+          'BMO Transactions',
+          viewModel.bmoTransactions,
+        ),
+      ),
+      DashboardWidgetDefinition(
+        id: 'expense_form',
+        title: 'New Expense',
+        builder: (context) => ExpenseForm(
+          formKey: viewModel.expenseFormKey,
+          onTransactionSuccess: viewModel.fetchData,
+          token: token,
+        ),
+      ),
+      DashboardWidgetDefinition(
+        id: 'investment_form',
+        title: 'Move Money / Investment',
+        builder: (context) => InvestmentForm(
+          formKey: viewModel.investmentFormKey,
+          accountBalances: viewModel.accountBalances,
+          cashBalance: viewModel.appCalculatedCash,
+          onTransactionSuccess: viewModel.fetchData,
+          token: token,
+        ),
+      ),
+      DashboardWidgetDefinition(
+        id: 'salary_form',
+        title: 'New Salary',
+        builder: (context) => SalaryForm(
+          formKey: viewModel.salaryFormKey,
+          onTransactionSuccess: viewModel.fetchData,
+          token: token,
+        ),
+      ),
+    ];
+  }
+
+  List<DashboardWidgetDefinition> _applyOrder(
+    List<DashboardWidgetDefinition> defaults,
+    List<String>? order,
+  ) {
+    if (order == null || order.isEmpty) return defaults;
+
+    final byId = {for (final w in defaults) w.id: w};
+    final ordered = <DashboardWidgetDefinition>[];
+
+    // Keep only known ids
+    for (final id in order) {
+      final w = byId[id];
+      if (w != null) ordered.add(w);
+    }
+
+    // Append new widgets that weren't in the stored order
+    for (final w in defaults) {
+      if (!ordered.any((x) => x.id == w.id)) {
+        ordered.add(w);
       }
+    }
+
+    return ordered;
+  }
+
+  Widget _buildReorderableMobileDashboard(
+    BuildContext context,
+    DashboardViewModel viewModel,
+    String? token,
+  ) {
+    if (!_mobileOrderLoaded) {
+      return const Center(child: CircularProgressIndicator());
+    }
 
-      final pmSummary = otherResults[0] as List<Map<String, dynamic>>;
-      _rbcUnpaidExpenses = 0.0;
-      _bmoUnpaidExpenses = 0.0;
-      for (var item in pmSummary) {
-        final paymentMethod =
-            (item['payment_method'] as String?)?.toUpperCase();
-              if (paymentMethod == 'RBC') {
-                _rbcUnpaidExpenses += double.tryParse(item['unpaid_amount']?.toString() ?? '0.0') ?? 0.0;
-              } else if (paymentMethod == 'BMO') {
-                _bmoUnpaidExpenses += double.tryParse(item['unpaid_amount']?.toString() ?? '0.0') ?? 0.0;
-              }      }
-
-      _cashTransactions = otherResults[1] as List<Map<String, dynamic>>;
-      _rbcTransactions = otherResults[2] as List<Map<String, dynamic>>;
-      _bmoTransactions = otherResults[3] as List<Map<String, dynamic>>;
-      _investments = otherResults[4] as List<Map<String, dynamic>>;
-    } catch (e) {
-      print('Error fetching data: $e');
-    } finally {
-      if (mounted) {
+    final defaults = _defaultMobileWidgets(context, viewModel, token);
+    final widgets = _applyOrder(defaults, _mobileOrder);
+
+    // ReorderableListView must be scrollable itself.
+    // We are already inside a SingleChildScrollView in the Scaffold body.
+    // So we disable its scroll and let the parent handle scroll.
+    return ReorderableListView(
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      onReorder: (oldIndex, newIndex) async {
+        final list = List<DashboardWidgetDefinition>.from(widgets);
+        if (newIndex > oldIndex) newIndex -= 1;
+        final item = list.removeAt(oldIndex);
+        list.insert(newIndex, item);
+
+        final ids = list.map((w) => w.id).toList();
         setState(() {
-          _isLoading = false;
+          _mobileOrder = ids;
         });
-      }
-    }
+
+        await _layoutStorage.saveOrder(ids);
+      },
+      children: [
+        for (final w in widgets)
+          Padding(
+            key: ValueKey(w.id),
+            padding: const EdgeInsets.only(bottom: 16.0),
+            child: w.builder(context),
+          ),
+      ],
+    );
   }
 
-  Widget _buildMainMenu(BuildContext context) {
+  @override
+  Widget build(BuildContext context) {
+    final authProvider = Provider.of<AuthProvider>(context, listen: false);
+    final token = authProvider.token;
+
+    return ChangeNotifierProvider(
+      create: (_) => DashboardViewModel(token),
+      child: Consumer<DashboardViewModel>(
+        builder: (context, viewModel, child) {
+          return Scaffold(
+            appBar: AppBar(
+              title: const Text('Personal Finance Dashboard'),
+              actions: [
+                PopupMenuButton<String>(
+                  onSelected: (value) {
+                    if (value == 'profile') {
+                      Navigator.push(
+                        context,
+                        MaterialPageRoute(
+                            builder: (context) => const ProfileScreen()),
+                      );
+                    } else if (value == 'theme') {
+                      final themeNotifier =
+                          Provider.of<ThemeNotifier>(context, listen: false);
+                      final newTheme =
+                          themeNotifier.themeMode == ThemeMode.dark
+                              ? ThemeMode.light
+                              : ThemeMode.dark;
+                      themeNotifier.setThemeMode(newTheme);
+                    } else if (value == 'logout') {
+                      Provider.of<AuthProvider>(context, listen: false)
+                          .logout();
+                      Navigator.of(context).pushNamedAndRemoveUntil('/', (route) => false);
+                    }
+                  },
+                  itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
+                    const PopupMenuItem<String>(
+                      value: 'profile',
+                      child: Text('My Profile'),
+                    ),
+                    const PopupMenuItem<String>(
+                      value: 'theme',
+                      child: Text('Toggle Theme'),
+                    ),
+                    const PopupMenuItem<String>(
+                      value: 'logout',
+                      child: Text('Logout'),
+                    ),
+                  ],
+                  child: const UserProfileAvatar(),
+                ),
+                const SizedBox(width: 10),
+              ],
+            ),
+            drawer: Drawer(
+              child: viewModel.selectedMenu == null
+                  ? _buildMainMenu(context, viewModel)
+                  : _buildSubMenu(context, viewModel),
+            ),
+            body: viewModel.isLoading
+                ? const Center(child: CircularProgressIndicator())
+                : SingleChildScrollView(
+                    padding: const EdgeInsets.all(16.0),
+                    child: ResponsiveBuilder(
+                      // Mobile: stack sections vertically (single column)
+                      mobile: (context) => _buildReorderableMobileDashboard(
+                        context,
+                        viewModel,
+                        token,
+                      ),
+
+                      // Desktop (and tablet fallback): keep the wide dashboard layout.
+                      desktop: (context) => Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Row(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Expanded(
+                                child: _buildCashBalanceCard(context, viewModel),
+                              ),
+                              const SizedBox(width: 16),
+                              Expanded(
+                                child: _buildCreditCardBalanceCard(
+                                  context,
+                                  viewModel,
+                                  'RBC Balance',
+                                  viewModel.rbcCardController,
+                                  viewModel.rbcUnpaidExpenses,
+                                ),
+                              ),
+                              const SizedBox(width: 16),
+                              Expanded(
+                                child: _buildCreditCardBalanceCard(
+                                  context,
+                                  viewModel,
+                                  'BMO Balance',
+                                  viewModel.bmoCardController,
+                                  viewModel.bmoUnpaidExpenses,
+                                ),
+                              ),
+                            ],
+                          ),
+                          const SizedBox(height: 16),
+                          Row(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Expanded(
+                                child: _buildRecentTransactionsList(
+                                  'Cash Transactions',
+                                  viewModel.cashTransactions,
+                                ),
+                              ),
+                              const SizedBox(width: 16),
+                              Expanded(
+                                child: _buildRecentTransactionsList(
+                                  'RBC Transactions',
+                                  viewModel.rbcTransactions,
+                                ),
+                              ),
+                              const SizedBox(width: 16),
+                              Expanded(
+                                child: _buildRecentTransactionsList(
+                                  'BMO Transactions',
+                                  viewModel.bmoTransactions,
+                                ),
+                              ),
+                              const SizedBox(width: 16),
+                              Expanded(
+                                child: ExpenseForm(
+                                  formKey: viewModel.expenseFormKey,
+                                  onTransactionSuccess: viewModel.fetchData,
+                                  token: token,
+                                ),
+                              ),
+                            ],
+                          ),
+                          const SizedBox(height: 16),
+                          Row(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Expanded(
+                                child: InvestmentForm(
+                                  formKey: viewModel.investmentFormKey,
+                                  accountBalances: viewModel.accountBalances,
+                                  cashBalance: viewModel.appCalculatedCash,
+                                  onTransactionSuccess: viewModel.fetchData,
+                                  token: token,
+                                ),
+                              ),
+                              const SizedBox(width: 16),
+                              Expanded(
+                                child: SalaryForm(
+                                  formKey: viewModel.salaryFormKey,
+                                  onTransactionSuccess: viewModel.fetchData,
+                                  token: token,
+                                ),
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+            floatingActionButton: FloatingActionButton(
+              onPressed: viewModel.fetchData,
+              tooltip: 'Refresh Data',
+              child: const Icon(Icons.refresh),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildMainMenu(BuildContext context, DashboardViewModel viewModel) {
     return ListView(
       padding: EdgeInsets.zero,
       children: <Widget>[
         const DrawerHeader(
           decoration: BoxDecoration(
+            // TODO(UI): replace hardcoded color with a theme token (e.g. theme.colorScheme.primary)
+            // or a semantic token in AppColors if needed.
             color: Colors.blue,
           ),
           child: Text(
@@ -177,53 +418,37 @@ class _HomeScreenState extends State<HomeScreen> {
         ListTile(
           leading: const Icon(Icons.assessment),
           title: const Text('Investments'),
-          onTap: () {
-            setState(() {
-              _selectedMenu = 'investments';
-            });
-          },
+          onTap: () => viewModel.setMenu('investments'),
         ),
         ListTile(
           leading: const Icon(Icons.description),
           title: const Text('Reports'),
-          onTap: () {
-            setState(() {
-              _selectedMenu = 'reports';
-            });
-          },
+          onTap: () => viewModel.setMenu('reports'),
         ),
         ListTile(
           leading: const Icon(Icons.bar_chart),
           title: const Text('Charts'),
-          onTap: () {
-            setState(() {
-              _selectedMenu = 'charts';
-            });
-          },
+          onTap: () => viewModel.setMenu('charts'),
         ),
         ListTile(
           leading: const Icon(Icons.settings),
           title: const Text('Management'),
-          onTap: () {
-            setState(() {
-              _selectedMenu = 'management';
-            });
-          },
+          onTap: () => viewModel.setMenu('management'),
         ),
       ],
     );
   }
 
-  Widget _buildSubMenu(BuildContext context) {
+  Widget _buildSubMenu(BuildContext context, DashboardViewModel viewModel) {
     List<Widget> items;
     String title;
 
-    switch (_selectedMenu) {
+    switch (viewModel.selectedMenu) {
       case 'investments':
         title = 'Investments';
         items = [
-          ..._investmentAccountNames.map((accountName) {
-            final balance = _accountBalances[accountName] ?? 0.0;
+          ...viewModel.investmentAccountNames.map((accountName) {
+            final balance = viewModel.accountBalances[accountName] ?? 0.0;
             final formattedBalance = _formatCurrency(balance);
             return ListTile(
               title: Text('  $accountName - $formattedBalance'),
@@ -350,7 +575,7 @@ class _HomeScreenState extends State<HomeScreen> {
                 context,
                 MaterialPageRoute(
                     builder: (context) => const ManageTransactionsScreen()),
-              ).then((_) => _fetchData());
+              ).then((_) => viewModel.fetchData());
             },
           ),
           ListTile(
@@ -380,11 +605,7 @@ class _HomeScreenState extends State<HomeScreen> {
           backgroundColor: Theme.of(context).primaryColor,
           leading: IconButton(
             icon: const Icon(Icons.arrow_back),
-            onPressed: () {
-              setState(() {
-                _selectedMenu = null;
-              });
-            },
+            onPressed: () => viewModel.setMenu(null),
           ),
           automaticallyImplyLeading: false,
         ),
@@ -393,129 +614,10 @@ class _HomeScreenState extends State<HomeScreen> {
     );
   }
 
-  @override
-  Widget build(BuildContext context) {
-    final double totalUserCash =
-        CurrencyInputFormatter.unformat(_rbcCashController.text) +
-            CurrencyInputFormatter.unformat(_wealthsimpleCashController.text);
-
-    final double appCalculatedCash = _accountBalances['CASH'] ?? 0.0;
-    final token = Provider.of<AuthProvider>(context, listen: false).token;
-
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('Personal Finance Dashboard'),
-        actions: [
-          const UserProfileAvatar(),
-          Consumer<ThemeNotifier>(
-            builder: (context, themeNotifier, child) {
-              return IconButton(
-                icon: Icon(themeNotifier.themeMode == ThemeMode.dark
-                    ? Icons.dark_mode
-                    : Icons.light_mode),
-                onPressed: () {
-                  themeNotifier.setThemeMode(
-                      themeNotifier.themeMode == ThemeMode.dark
-                          ? ThemeMode.light
-                          : ThemeMode.dark);
-                },
-              );
-            },
-          ),
-          IconButton(
-            icon: const Icon(Icons.logout),
-            onPressed: () {
-              Provider.of<AuthProvider>(context, listen: false).logout();
-            },
-          ),
-        ],
-      ),
-      drawer: Drawer(
-        child: _selectedMenu == null
-            ? _buildMainMenu(context)
-            : _buildSubMenu(context),
-      ),
-      body: _isLoading
-          ? const Center(child: CircularProgressIndicator())
-          : SingleChildScrollView(
-              padding: const EdgeInsets.all(16.0),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Row(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Expanded(
-                          child: _buildCashBalanceCard(
-                              totalUserCash, appCalculatedCash)),
-                      const SizedBox(width: 16),
-                      Expanded(
-                          child: _buildCreditCardBalanceCard('RBC Balance',
-                              _rbcCardController, _rbcUnpaidExpenses)),
-                      const SizedBox(width: 16),
-                      Expanded(
-                          child: _buildCreditCardBalanceCard('BMO Balance',
-                              _bmoCardController, _bmoUnpaidExpenses)),
-                    ],
-                  ),
-                  const SizedBox(height: 16),
-                  Row(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Expanded(
-                          child: _buildRecentTransactionsList(
-                              'Cash Transactions', _cashTransactions)),
-                      const SizedBox(width: 16),
-                      Expanded(
-                          child: _buildRecentTransactionsList(
-                              'RBC Transactions', _rbcTransactions)),
-                      const SizedBox(width: 16),
-                      Expanded(
-                          child: _buildRecentTransactionsList(
-                              'BMO Transactions', _bmoTransactions)),
-                      const SizedBox(width: 16),
-                      Expanded(
-                          child: ExpenseForm(
-                        formKey: _expenseFormKey,
-                        onTransactionSuccess: _fetchData,
-                        token: token,
-                      )),
-                    ],
-                  ),
-                  const SizedBox(height: 16),
-                  Row(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Expanded(
-                          child: InvestmentForm(
-                        formKey: _investmentFormKey,
-                        accountBalances: _accountBalances,
-                        cashBalance: appCalculatedCash,
-                        onTransactionSuccess: _fetchData,
-                        token: token,
-                      )),
-                      const SizedBox(width: 16),
-                      Expanded(
-                          child: SalaryForm(
-                        formKey: _salaryFormKey,
-                        onTransactionSuccess: _fetchData,
-                        token: token,
-                      )),
-                    ],
-                  ),
-                ],
-              ),
-            ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _fetchData,
-        tooltip: 'Refresh Data',
-        child: const Icon(Icons.refresh),
-      ),
-    );
-  }
-
-  Widget _buildCashBalanceCard(double totalUserCash, double appCalculatedCash) {
-    final double difference = totalUserCash - appCalculatedCash;
+  Widget _buildCashBalanceCard(
+      BuildContext context, DashboardViewModel viewModel) {
+    final double difference =
+        viewModel.totalUserCash - viewModel.appCalculatedCash;
 
     String differenceLabel = 'Balance is correct';
     Color differenceColor = Theme.of(context).colorScheme.secondary;
@@ -523,11 +625,12 @@ class _HomeScreenState extends State<HomeScreen> {
 
     if (difference > 0.01) {
       differenceLabel = 'Missing Income:';
-      differenceColor = Colors.green;
+      // Use semantic color token instead of hardcoded Colors.green
+      differenceColor = AppColors.success;
       differenceText = '+${_formatCurrency(difference)}';
     } else if (difference < -0.01) {
       differenceLabel = 'Missing Expenses:';
-      differenceColor = Colors.red;
+      differenceColor = AppColors.error;
     }
 
     return AppFormCard(
@@ -535,17 +638,17 @@ class _HomeScreenState extends State<HomeScreen> {
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          _buildBalanceTextField(_rbcCashController, 'RBC Bank Balance'),
+          _buildBalanceTextField(viewModel.rbcCashController, 'RBC Bank Balance'),
           const SizedBox(height: 12),
           _buildBalanceTextField(
-              _wealthsimpleCashController, 'Wealthsimple Balance'),
+              viewModel.wealthsimpleCashController, 'Wealthsimple Balance'),
           const SizedBox(height: 16),
           const Divider(),
           const SizedBox(height: 10),
-          _buildResultRow(
-              'Manual Entry Balance:', '${_formatCurrency(totalUserCash)}'),
-          _buildResultRow(
-              'Calculated Balance:', '${_formatCurrency(appCalculatedCash)}'),
+          _buildResultRow('Manual Entry Balance:',
+              '${_formatCurrency(viewModel.totalUserCash)}'),
+          _buildResultRow('Calculated Balance:',
+              '${_formatCurrency(viewModel.appCalculatedCash)}'),
           const SizedBox(height: 10),
           _buildResultRow(differenceLabel, differenceText,
               isHighlighted: true, color: differenceColor),
@@ -555,7 +658,11 @@ class _HomeScreenState extends State<HomeScreen> {
   }
 
   Widget _buildCreditCardBalanceCard(
-      String title, TextEditingController controller, double appExpenses) {
+      BuildContext context,
+      DashboardViewModel viewModel,
+      String title,
+      TextEditingController controller,
+      double appExpenses) {
     final double userBalance = CurrencyInputFormatter.unformat(controller.text);
     final double difference = appExpenses - userBalance;
 
@@ -565,11 +672,11 @@ class _HomeScreenState extends State<HomeScreen> {
 
     if (difference > 0.01) {
       differenceLabel = 'Missing Refund:';
-      differenceColor = Colors.green;
+      differenceColor = AppColors.success;
       differenceText = '+${_formatCurrency(difference)}';
     } else if (difference < -0.01) {
       differenceLabel = 'Missing Expenses:';
-      differenceColor = Colors.red;
+      differenceColor = AppColors.error;
     }
 
     return AppFormCard(
@@ -605,7 +712,8 @@ class _HomeScreenState extends State<HomeScreen> {
                     builder: (context) =>
                         ReconciliationScreen(paymentMethod: paymentMethod),
                   ),
-                ).then((_) => _fetchData()); // Refresh data when returning
+                ).then((_) =>
+                    viewModel.fetchData()); // Refresh data when returning
               },
               child: const Text('Reconcile'),
             ),
@@ -627,7 +735,6 @@ class _HomeScreenState extends State<HomeScreen> {
       ),
       keyboardType: const TextInputType.numberWithOptions(decimal: true),
       inputFormatters: [CurrencyInputFormatter()],
-      onChanged: (value) => setState(() {}),
     );
   }
 
@@ -659,13 +766,14 @@ class _HomeScreenState extends State<HomeScreen> {
               children: transactions.map((transaction) {
                 final date = DateFormat('MM/dd')
                     .format(DateTime.parse(transaction['date']));
-                final amount = (double.tryParse(transaction['amount']?.toString() ?? '0.0') ?? 0.0)
-                    .toStringAsFixed(2);
+                final amount =
+                    (double.tryParse(transaction['amount']?.toString() ?? '0.0') ?? 0.0)
+                        .toStringAsFixed(2);
                 final subcategory =
                     transaction['subcategory'] ?? 'No subcategory';
                 final type = transaction['type'] == 'debit' ? '-' : '+';
                 final color =
-                    transaction['type'] == 'debit' ? Colors.red : Colors.green;
+                    transaction['type'] == 'debit' ? AppColors.error : AppColors.success;
 
                 return Padding(
                   padding: const EdgeInsets.symmetric(vertical: 4.0),

package/lib/utils/dashboard_layout_storage.dart

@@ -0,0 +1,21 @@
+import 'package:shared_preferences/shared_preferences.dart';
+
+/// Local persistence for dashboard widget order.
+///
+/// MVP: store a list of widget IDs in SharedPreferences.
+/// If nothing is stored yet, we fall back to the default order.
+class DashboardLayoutStorage {
+  static const _key = 'dashboard_widget_order_v1';
+
+  Future<List<String>?> loadOrder() async {
+    final prefs = await SharedPreferences.getInstance();
+    final list = prefs.getStringList(_key);
+    if (list == null || list.isEmpty) return null;
+    return list;
+  }
+
+  Future<void> saveOrder(List<String> ids) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setStringList(_key, ids);
+  }
+}

package/lib/viewmodels/dashboard_viewmodel.dart

@@ -12,6 +12,11 @@ class DashboardViewModel extends ChangeNotifier {
   final rbcCardController = TextEditingController();
   final bmoCardController = TextEditingController();
 
+  // Form Keys
+  final expenseFormKey = GlobalKey<FormState>();
+  final investmentFormKey = GlobalKey<FormState>();
+  final salaryFormKey = GlobalKey<FormState>();
+
   // State variables
   bool _isLoading = true;
   String? _selectedMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@marcos_feitoza/personal-finance-frontend-feature-dashboard",
-    "version": "1.1.2",
+    "version": "1.2.1",
     "publishConfig": {
         "access": "public"
     },

package/pubspec.yaml

@@ -11,6 +11,7 @@ dependencies:
     sdk: flutter
   intl: ^0.17.0
   provider: ^6.0.0
+  shared_preferences: ^2.0.0
   personal_finance_frontend_core_services:
     path: ../personal-finance-frontend-core-services
   personal_finance_frontend_core_ui:
@@ -23,6 +24,8 @@ dependencies:
     path: ../personal-finance-frontend-feature-investments
   personal_finance_frontend_feature_management:
     path: ../personal-finance-frontend-feature-management
+  personal_finance_frontend_feature_profile:
+    path: ../personal-finance-frontend-feature-profile
 
 dev_dependencies:
   flutter_test: