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

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [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)
 
 

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

@@ -17,6 +17,7 @@ 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';
@@ -24,6 +25,9 @@ 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';
 
+import '../models/dashboard_widget.dart';
+import '../utils/dashboard_layout_storage.dart';
+
 final String currencySymbol = r'$';
 
 String _formatCurrency(double value) {
@@ -35,9 +39,189 @@ String _formatCurrency(double value) {
   return format.format(value);
 }
 
-class HomeScreen extends StatelessWidget {
+class HomeScreen extends StatefulWidget {
   const HomeScreen({Key? key}) : super(key: key);
 
+  @override
+  State<HomeScreen> createState() => _HomeScreenState();
+}
+
+class _HomeScreenState extends State<HomeScreen> {
+  final DashboardLayoutStorage _layoutStorage = DashboardLayoutStorage();
+  List<String>? _mobileOrder;
+  bool _mobileOrderLoaded = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadMobileOrder();
+  }
+
+  Future<void> _loadMobileOrder() async {
+    final saved = await _layoutStorage.loadOrder();
+    if (!mounted) return;
+    setState(() {
+      _mobileOrder = saved;
+      _mobileOrderLoaded = true;
+    });
+  }
+
+  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 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(() {
+          _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),
+          ),
+      ],
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final authProvider = Provider.of<AuthProvider>(context, listen: false);
@@ -101,82 +285,105 @@ class HomeScreen extends StatelessWidget {
                 ? 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(
-                                    context, viewModel)),
-                            const SizedBox(width: 16),
-                            Expanded(
+                    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(
+                                  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(
+                                  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(
+                                  'Cash Transactions',
+                                  viewModel.cashTransactions,
+                                ),
+                              ),
+                              const SizedBox(width: 16),
+                              Expanded(
                                 child: _buildRecentTransactionsList(
-                                    'RBC Transactions',
-                                    viewModel.rbcTransactions)),
-                            const SizedBox(width: 16),
-                            Expanded(
+                                  'RBC Transactions',
+                                  viewModel.rbcTransactions,
+                                ),
+                              ),
+                              const SizedBox(width: 16),
+                              Expanded(
                                 child: _buildRecentTransactionsList(
-                                    'BMO Transactions',
-                                    viewModel.bmoTransactions)),
-                            const SizedBox(width: 16),
-                            Expanded(
+                                  '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(
+                                  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(
+                                  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,
-                            )),
-                          ],
-                        ),
-                      ],
+                                  formKey: viewModel.salaryFormKey,
+                                  onTransactionSuccess: viewModel.fetchData,
+                                  token: token,
+                                ),
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
                     ),
                   ),
             floatingActionButton: FloatingActionButton(

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@marcos_feitoza/personal-finance-frontend-feature-dashboard",
-    "version": "1.2.0",
+    "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: