@marcos_feitoza/personal-finance-frontend-feature-investments 1.1.0 → 1.1.2

package/lib/screens/investment_account_screen.dart

@@ -1,59 +1,137 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
-import 'package:personal_finance_frontend_core_services/services/stock_service.dart';
-import 'package:personal_finance_frontend_core_services/services/transaction_service.dart';
-import 'package:personal_finance_frontend_core_ui/widgets/trade_form.dart';
-import 'package:personal_finance_frontend_core_ui/widgets/dividend_log_form.dart';
-import 'package:personal_finance_frontend_core_ui/widgets/app_widgets.dart';
 import 'package:provider/provider.dart';
 import 'package:personal_finance_frontend_core_services/providers/auth_provider.dart';
 import 'package:personal_finance_frontend_core_ui/utils/app_dialogs.dart';
+import 'package:personal_finance_frontend_core_ui/widgets/trade_form.dart';
+import 'package:personal_finance_frontend_core_ui/widgets/dividend_log_form.dart';
+import 'package:personal_finance_frontend_core_ui/widgets/app_widgets.dart';
+import '../viewmodels/investment_account_viewmodel.dart';
 
-class InvestmentAccountScreen extends StatefulWidget {
+class InvestmentAccountScreen extends StatelessWidget {
   final String accountName;
   final bool showDividends;
 
-  const InvestmentAccountScreen(
-      {Key? key, required this.accountName, this.showDividends = true})
-      : super(key: key);
+  const InvestmentAccountScreen({
+    Key? key,
+    required this.accountName,
+    this.showDividends = true,
+  }) : super(key: key);
 
   @override
-  _InvestmentAccountScreenState createState() =>
-      _InvestmentAccountScreenState();
-}
-
-class _InvestmentAccountScreenState extends State<InvestmentAccountScreen> {
-  final TransactionService _transactionService = TransactionService();
-  final StockService _stockService = StockService();
-
-  List<Map<String, dynamic>> _trades = [];
-  List<Map<String, dynamic>> _dividends = [];
-  List<Map<String, dynamic>> _assets = [];
-  List<Map<String, dynamic>> _portfolioSummary = [];
-  Map<String, double> _livePrices = {};
-  double _cashBalance = 0.0;
-  double _accountTotalValue = 0.0;
-  double _totalPortfolioBookCost = 0.0;
-  bool _isLoading = true;
-  bool _isFetchingPrices = false;
-  String? _selectedSymbolForFilter;
-  String? _token;
+  Widget build(BuildContext context) {
+    final authProvider = Provider.of<AuthProvider>(context, listen: false);
 
-  @override
-  void initState() {
-    super.initState();
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      final authProvider = Provider.of<AuthProvider>(context, listen: false);
-      setState(() {
-        _token = authProvider.token;
-      });
-      _fetchData();
-    });
+    return ChangeNotifierProvider(
+      create: (_) => InvestmentAccountViewModel(
+        accountName: accountName,
+        showDividends: showDividends,
+        token: authProvider.token,
+      ),
+      child: Consumer<InvestmentAccountViewModel>(
+        builder: (context, viewModel, child) {
+          return Scaffold(
+            appBar: AppBar(
+              title: Text('$accountName Portfolio'),
+              actions: [
+                Center(
+                  child: Padding(
+                    padding: const EdgeInsets.only(right: 16.0),
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      crossAxisAlignment: CrossAxisAlignment.end,
+                      children: [
+                        Text(
+                          'Total Portfolio: ${_formatCurrency(viewModel.accountTotalValue)}',
+                          style: const TextStyle(
+                              fontSize: 16, fontWeight: FontWeight.bold),
+                        ),
+                        Text(
+                          'Account Balance: ${_formatCurrency(viewModel.cashBalance)}',
+                          style: const TextStyle(fontSize: 12),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+                IconButton(
+                  icon: const Icon(Icons.refresh),
+                  onPressed: viewModel.fetchData,
+                  tooltip: 'Refresh Data',
+                ),
+              ],
+            ),
+            body: viewModel.isLoading
+                ? const Center(child: CircularProgressIndicator())
+                : RefreshIndicator(
+                    onRefresh: viewModel.fetchData,
+                    child: SingleChildScrollView(
+                      physics: const AlwaysScrollableScrollPhysics(),
+                      padding: const EdgeInsets.all(16.0),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.stretch,
+                        children: [
+                          Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            children: [
+                              Text('Portfolio Summary (Sintético)',
+                                  style:
+                                      Theme.of(context).textTheme.titleLarge),
+                              if (viewModel.isFetchingPrices)
+                                const SizedBox(
+                                  height: 20,
+                                  width: 20,
+                                  child: CircularProgressIndicator(
+                                      strokeWidth: 2.0),
+                                ),
+                            ],
+                          ),
+                          _buildSinteticoTable(context, viewModel),
+                          const SizedBox(height: 24),
+                          Row(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Expanded(
+                                child: TradeForm(
+                                  accountName: accountName,
+                                  portfolioSummary: viewModel.portfolioSummary,
+                                  assets: viewModel.assets,
+                                  onTradeCreated: (_) => viewModel.fetchData(),
+                                  token: viewModel.token,
+                                ),
+                              ),
+                              if (showDividends) ...[
+                                const SizedBox(width: 16),
+                                Expanded(
+                                  child: DividendLogForm(
+                                    investmentAccount: accountName,
+                                    assets: viewModel.assets,
+                                    onDividendLogged: viewModel.fetchData,
+                                    token: viewModel.token,
+                                  ),
+                                ),
+                              ],
+                            ],
+                          ),
+                          const SizedBox(height: 24),
+                          Text('Trade History (Analítico)',
+                              style: Theme.of(context).textTheme.titleLarge),
+                          const SizedBox(height: 8),
+                          _buildAnaliticoFilter(context, viewModel),
+                          const SizedBox(height: 8),
+                          _buildAnaliticoTable(context, viewModel),
+                        ],
+                      ),
+                    ),
+                  ),
+          );
+        },
+      ),
+    );
   }
 
-  String currencySymbol = r'$';
-
   String _formatCurrency(double value) {
+    String currencySymbol = r'$';
     return '$currencySymbol${value.toStringAsFixed(2)}';
   }
 
@@ -71,287 +149,16 @@ class _InvestmentAccountScreenState extends State<InvestmentAccountScreen> {
     return parts.join(' ');
   }
 
-  Future<void> _fetchData() async {
-    if (_token == null) return;
-    setState(() => _isLoading = true);
-    try {
-      final futures = <Future>[
-        _transactionService.getTrades(investmentAccount: widget.accountName, token: _token),
-        _transactionService.getAccountBalance(widget.accountName, token: _token),
-        _transactionService.getAssets(investmentAccount: widget.accountName, token: _token),
-        _transactionService.getTotalPortfolioBookCost(token: _token),
-      ];
-      if (widget.showDividends) {
-        futures.add(_transactionService.getDividends(
-            investmentAccount: widget.accountName, token: _token));
-      }
-      final results = await Future.wait(futures);
-
-      final trades = results[0] as List<Map<String, dynamic>>;
-      final balance = results[1] as double;
-      final assets = results[2] as List<Map<String, dynamic>>;
-      final totalPortfolioBookCost = results[3] as double;
-      final dividends = widget.showDividends
-          ? results[4] as List<Map<String, dynamic>>
-          : <Map<String, dynamic>>[];
-
-      final summaryData = _calculatePortfolioSummary(trades, dividends);
-
-      setState(() {
-        _trades = trades;
-        _dividends = dividends;
-        _cashBalance = balance;
-        _assets = assets;
-        _portfolioSummary = summaryData['summary'];
-        _accountTotalValue = summaryData['total_value'] + _cashBalance;
-        _totalPortfolioBookCost = totalPortfolioBookCost;
-      });
-
-      if (mounted) await _fetchLivePrices();
-    } catch (e) {
-      if (mounted)
-        ScaffoldMessenger.of(context)
-            .showSnackBar(SnackBar(content: Text('Error fetching data: $e')));
-    } finally {
-      if (mounted) setState(() => _isLoading = false);
-    }
-  }
-
-  Future<void> _fetchLivePrices() async {
-    if (_portfolioSummary.isEmpty || !mounted) return;
-    setState(() => _isFetchingPrices = true);
-
-    final symbolsToFetch = _portfolioSummary
+  Widget _buildAnaliticoFilter(
+      BuildContext context, InvestmentAccountViewModel viewModel) {
+    final symbols = viewModel.portfolioSummary
         .map((p) => p['symbol'] as String)
-        .where((s) => s.isNotEmpty)
+        .toSet()
         .toList();
-
-    if (symbolsToFetch.isEmpty) {
-      setState(() => _isFetchingPrices = false);
-      return;
-    }
-
-    final livePrices = await _stockService.getLivePrices(symbolsToFetch);
-
-    if (!mounted) return;
-
-    double newTotalValue = _cashBalance;
-    for (final position in _portfolioSummary) {
-      final shares = double.parse(position['shares'].toString());
-      final livePrice = livePrices[position['symbol']];
-      if (livePrice != null) {
-        newTotalValue += shares * livePrice;
-      } else {
-        // If live price is not available, use book cost as a fallback for market value
-        newTotalValue += (position['book_cost'] as num?)?.toDouble() ?? 0.0;
-      }
-    }
-
-    setState(() {
-      _livePrices = livePrices;
-      _accountTotalValue = newTotalValue;
-      _isFetchingPrices = false;
-    });
-  }
-
-  Map<String, dynamic> _calculatePortfolioSummary(
-      List<Map<String, dynamic>> trades, List<Map<String, dynamic>> dividends) {
-    Map<String, dynamic> summary = {};
-    double accountTotalBookCost = 0;
-
-    Map<String, double> dividendSummary = {};
-    if (widget.showDividends) {
-      for (var dividend in dividends) {
-        final asset = dividend['asset'];
-        if (asset != null && asset['symbol'] != null) {
-          String symbol = asset['symbol'];
-          double amount = double.parse(dividend['amount'].toString());
-          dividendSummary.update(symbol, (value) => value + amount,
-              ifAbsent: () => amount);
-        }
-      }
-    }
-
-    for (var trade in trades) {
-      final asset = trade['asset'];
-      if (asset == null || asset['symbol'] == null) continue;
-      String symbol = asset['symbol'];
-
-      double shares = double.parse(trade['shares'].toString());
-      double price = double.parse(trade['price'].toString());
-      String tradeType = trade['trade_type'];
-      DateTime tradeDate = DateTime.parse(trade['date']);
-
-      if (!summary.containsKey(symbol)) {
-        summary[symbol] = {
-          'symbol': symbol,
-          'name': asset['name'] ?? symbol,
-          'industry': asset['industry'] ?? 'N/A',
-          'shares': 0.0,
-          'book_cost': 0.0, // Renamed from total_cost for clarity
-          'total_dividends': dividendSummary[symbol] ?? 0.0,
-          'first_trade_date': tradeDate,
-          'last_activity_date': tradeDate,
-        };
-      } else {
-        if (tradeDate.isBefore(summary[symbol]['first_trade_date'])) {
-          summary[symbol]['first_trade_date'] = tradeDate;
-        }
-        if (tradeDate.isAfter(summary[symbol]['last_activity_date'])) {
-          summary[symbol]['last_activity_date'] = tradeDate;
-        }
-      }
-
-      if (tradeType == 'buy') {
-        summary[symbol]['shares'] += shares;
-        summary[symbol]['book_cost'] += shares * price;
-      } else if (tradeType == 'sell') {
-        double originalShares = summary[symbol]['shares'];
-        if (originalShares > 0) {
-          double avgPrice = summary[symbol]['book_cost'] / originalShares;
-          summary[symbol]['book_cost'] -= shares * avgPrice;
-        }
-        summary[symbol]['shares'] -= shares;
-      }
-    }
-
-    summary.removeWhere((key, value) => value['shares'] < 0.01);
-
-    accountTotalBookCost =
-        summary.values.fold(0.0, (sum, item) => sum + item['book_cost']);
-
-    List<Map<String, dynamic>> result = [];
-    summary.forEach((symbol, data) {
-      double shares = data['shares'];
-      double bookCost = data['book_cost'];
-      double totalDividends = data['total_dividends'];
-
-      data['avg_price'] = (shares > 0) ? bookCost / shares : 0.0;
-      data['account_allocation_percent'] = (accountTotalBookCost > 0)
-          ? (bookCost / accountTotalBookCost) * 100
-          : 0.0;
-      data['portfolio_allocation_percent'] = (_totalPortfolioBookCost > 0)
-          ? (bookCost / _totalPortfolioBookCost) * 100
-          : 0.0;
-      
-      // Calculate Market Value, Unrealized P/L, Total Return
-      final livePrice = _livePrices[symbol];
-      double marketValue = livePrice != null ? shares * livePrice : bookCost; // Fallback to bookCost if no live price
-      double unrealizedPL = marketValue - bookCost;
-      double totalReturn = unrealizedPL + totalDividends;
-
-      data['market_value'] = marketValue;
-      data['unrealized_pl'] = unrealizedPL;
-      data['total_return'] = totalReturn;
-
-      data['percent_unrealized_pl'] = (bookCost > 0) ? (unrealizedPL / bookCost) * 100 : 0.0;
-      data['percent_total_return'] = (bookCost > 0) ? (totalReturn / bookCost) * 100 : 0.0;
-
-      result.add(data);
-    });
-
-    return {'summary': result, 'total_value': accountTotalBookCost};
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('${widget.accountName} Portfolio'),
-        actions: [
-          Center(
-            child: Padding(
-              padding: const EdgeInsets.only(right: 16.0),
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                crossAxisAlignment: CrossAxisAlignment.end,
-                children: [
-                  Text(
-                      'Total Portfolio: ${_formatCurrency(_accountTotalValue)}',
-                      style: const TextStyle(
-                          fontSize: 16, fontWeight: FontWeight.bold)),
-                  Text('Account Balance: ${_formatCurrency(_cashBalance)}',
-                      style: const TextStyle(fontSize: 12)),
-                ],
-              ),
-            ),
-          ),
-          IconButton(
-              icon: const Icon(Icons.refresh),
-              onPressed: _fetchData,
-              tooltip: 'Refresh Data'),
-        ],
-      ),
-      body: _isLoading
-          ? const Center(child: CircularProgressIndicator())
-          : RefreshIndicator(
-              onRefresh: _fetchData,
-              child: SingleChildScrollView(
-                physics: const AlwaysScrollableScrollPhysics(),
-                padding: const EdgeInsets.all(16.0),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  children: [
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      children: [
-                        Text('Portfolio Summary (Sintético)',
-                            style: Theme.of(context).textTheme.titleLarge),
-                        if (_isFetchingPrices)
-                          const SizedBox(
-                              height: 20,
-                              width: 20,
-                              child:
-                                  CircularProgressIndicator(strokeWidth: 2.0)),
-                      ],
-                    ),
-                    _buildSinteticoTable(),
-                    const SizedBox(height: 24),
-                    Row(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Expanded(
-                            child: TradeForm(
-                                accountName: widget.accountName,
-                                portfolioSummary: _portfolioSummary,
-                                assets: _assets,
-                                onTradeCreated: (_) => _fetchData(),
-                                token: _token,
-                            )),
-                        if (widget.showDividends) ...[
-                          const SizedBox(width: 16),
-                          Expanded(
-                            child: DividendLogForm(
-                              investmentAccount: widget.accountName,
-                              assets: _assets,
-                              onDividendLogged: () => _fetchData(),
-                              token: _token,
-                            ),
-                          ),
-                        ],
-                      ],
-                    ),
-                    const SizedBox(height: 24),
-                    Text('Trade History (Analítico)',
-                        style: Theme.of(context).textTheme.titleLarge),
-                    const SizedBox(height: 8),
-                    _buildAnaliticoFilter(),
-                    const SizedBox(height: 8),
-                    _buildAnaliticoTable(),
-                  ],
-                ),
-              ),
-            ),
-    );
-  }
-
-  Widget _buildAnaliticoFilter() {
-    final symbols =
-        _portfolioSummary.map((p) => p['symbol'] as String).toSet().toList();
     return Padding(
       padding: const EdgeInsets.only(bottom: 8.0),
       child: AppDropdown<String?>(
-        value: _selectedSymbolForFilter,
+        value: viewModel.selectedSymbolForFilter,
         hint: 'Filter by Symbol',
         items: [
           const DropdownMenuItem<String?>(
@@ -359,18 +166,21 @@ class _InvestmentAccountScreenState extends State<InvestmentAccountScreen> {
           ...symbols.map((symbol) =>
               DropdownMenuItem<String?>(value: symbol, child: Text(symbol))),
         ],
-        onChanged: (String? newValue) =>
-            setState(() => _selectedSymbolForFilter = newValue),
+        onChanged: (String? newValue) => viewModel.setSymbolFilter(newValue),
       ),
     );
   }
 
-  Widget _buildSinteticoTable() {
-    if (_portfolioSummary.isEmpty)
+  Widget _buildSinteticoTable(
+      BuildContext context, InvestmentAccountViewModel viewModel) {
+    if (viewModel.portfolioSummary.isEmpty) {
       return const Center(
-          child: Padding(
-              padding: EdgeInsets.all(16.0),
-              child: Text('No positions held.')));
+        child: Padding(
+          padding: EdgeInsets.all(16.0),
+          child: Text('No positions held.'),
+        ),
+      );
+    }
 
     return SingleChildScrollView(
       scrollDirection: Axis.horizontal,
@@ -385,7 +195,7 @@ class _InvestmentAccountScreenState extends State<InvestmentAccountScreen> {
           const DataColumn(label: Text('Market Value')),
           const DataColumn(label: Text('Unrealized P/L')),
           const DataColumn(label: Text('% P/L')),
-          if (widget.showDividends) ...[
+          if (showDividends) ...[
             const DataColumn(label: Text('Dividends')),
             const DataColumn(label: Text('Total Return')),
             const DataColumn(label: Text('% Total Return')),
@@ -393,26 +203,27 @@ class _InvestmentAccountScreenState extends State<InvestmentAccountScreen> {
           const DataColumn(label: Text('Account %')),
           const DataColumn(label: Text('Portfolio %')),
         ],
-        rows: _portfolioSummary.map((position) {
+        rows: viewModel.portfolioSummary.map((position) {
           final symbol = position['symbol'] as String;
           final shares = position['shares'] as double;
           final avgPrice = position['avg_price'] as double;
           final bookCost = position['book_cost'] as double;
-          final livePrice = _livePrices[symbol];
+          final livePrice = viewModel.livePrices[symbol];
           final marketValue = position['market_value'] as double;
           final unrealizedPL = position['unrealized_pl'] as double;
-          final percentUnrealizedPL = position['percent_unrealized_pl'] as double;
+          final percentUnrealizedPL =
+              position['percent_unrealized_pl'] as double;
           final totalDividends = position['total_dividends'] as double;
           final totalReturn = position['total_return'] as double;
-          final percentTotalReturn = position['percent_total_return'] as double;
-          final accountAllocationPercent = position['account_allocation_percent'] as double;
-          final portfolioAllocationPercent = position['portfolio_allocation_percent'] as double;
+          final percentTotalReturn =
+              position['percent_total_return'] as double;
+          final accountAllocationPercent =
+              position['account_allocation_percent'] as double;
+          final portfolioAllocationPercent =
+              position['portfolio_allocation_percent'] as double;
 
-
-          final plColor =
-              (unrealizedPL ?? 0) >= 0 ? Colors.green : Colors.red;
-          final totalReturnColor =
-              (totalReturn ?? 0) >= 0 ? Colors.green : Colors.red;
+          final plColor = unrealizedPL >= 0 ? Colors.green : Colors.red;
+          final totalReturnColor = totalReturn >= 0 ? Colors.green : Colors.red;
 
           return DataRow(cells: [
             DataCell(Text(symbol)),
@@ -423,12 +234,17 @@ class _InvestmentAccountScreenState extends State<InvestmentAccountScreen> {
                 ? Text(_formatCurrency(livePrice))
                 : const Text('N/A')),
             DataCell(Text(_formatCurrency(marketValue))),
-            DataCell(Text(_formatCurrency(unrealizedPL), style: TextStyle(color: plColor))),
-            DataCell(Text('${percentUnrealizedPL.toStringAsFixed(2)}%', style: TextStyle(color: plColor))),
-            if (widget.showDividends) ...[
+            DataCell(
+                Text(_formatCurrency(unrealizedPL),
+                    style: TextStyle(color: plColor))),
+            DataCell(Text('${percentUnrealizedPL.toStringAsFixed(2)}%',
+                style: TextStyle(color: plColor))),
+            if (showDividends) ...[
               DataCell(Text(_formatCurrency(totalDividends))),
-              DataCell(Text(_formatCurrency(totalReturn), style: TextStyle(color: totalReturnColor))),
-              DataCell(Text('${percentTotalReturn.toStringAsFixed(2)}%', style: TextStyle(color: totalReturnColor))),
+              DataCell(Text(_formatCurrency(totalReturn),
+                  style: TextStyle(color: totalReturnColor))),
+              DataCell(Text('${percentTotalReturn.toStringAsFixed(2)}%',
+                  style: TextStyle(color: totalReturnColor))),
             ],
             DataCell(Text('${accountAllocationPercent.toStringAsFixed(2)}%')),
             DataCell(Text('${portfolioAllocationPercent.toStringAsFixed(2)}%')),
@@ -438,37 +254,40 @@ class _InvestmentAccountScreenState extends State<InvestmentAccountScreen> {
     );
   }
 
-  Widget _buildAnaliticoTable() {
-    if (_trades.isEmpty)
+  Widget _buildAnaliticoTable(
+      BuildContext context, InvestmentAccountViewModel viewModel) {
+    if (viewModel.trades.isEmpty) {
       return const Center(
-          child: Padding(
-              padding: EdgeInsets.all(16.0), child: Text('No trades found.')));
+        child: Padding(
+          padding: EdgeInsets.all(16.0),
+          child: Text('No trades found.'),
+        ),
+      );
+    }
 
     final List<Map<String, dynamic>> filteredTrades =
-        _selectedSymbolForFilter == null
-            ? _trades
-            : _trades
+        viewModel.selectedSymbolForFilter == null
+            ? viewModel.trades
+            : viewModel.trades
                 .where((trade) =>
-                    trade['asset']?['symbol'] == _selectedSymbolForFilter)
+                    trade['asset']?['symbol'] ==
+                    viewModel.selectedSymbolForFilter)
                 .toList();
 
-    if (filteredTrades.isEmpty)
+    if (filteredTrades.isEmpty) {
       return const Center(
-          child: Padding(
-              padding: EdgeInsets.all(16.0),
-              child: Text('No trades match the selected symbol.')));
+        child: Padding(
+          padding: EdgeInsets.all(16.0),
+          child: Text('No trades match the selected symbol.'),
+        ),
+      );
+    }
 
     final sortedTrades = List<Map<String, dynamic>>.from(filteredTrades)
       ..sort((a, b) {
-        final idA = int.tryParse(a['id']?.toString() ?? '');
-        final idB = int.tryParse(b['id']?.toString() ?? '');
-        if (idA != null && idB != null) return idB.compareTo(idA);
-        try {
-          return DateTime.parse(b['date'] as String)
-              .compareTo(DateTime.parse(a['date'] as String));
-        } catch (e) {
-          return 0;
-        }
+        final dateA = DateTime.parse(a['date'] as String);
+        final dateB = DateTime.parse(b['date'] as String);
+        return dateB.compareTo(dateA);
       });
 
     return DataTable(
@@ -484,7 +303,7 @@ class _InvestmentAccountScreenState extends State<InvestmentAccountScreen> {
         DataColumn(label: Text('Return')),
         DataColumn(label: Text('% Return')),
         DataColumn(label: Text('Book Cost')),
-        DataColumn(label: Text('Actions')), // New column for actions
+        DataColumn(label: Text('Actions')),
       ],
       rows: sortedTrades.map((trade) {
         final double shares = double.parse(trade['shares'].toString());
@@ -493,8 +312,8 @@ class _InvestmentAccountScreenState extends State<InvestmentAccountScreen> {
         final tradeDate = DateTime.parse(trade['date'] as String);
         final tradeAge = DateTime.now().difference(tradeDate);
         final symbol = trade['asset']?['symbol'] ?? '';
-        final livePrice = _livePrices[symbol];
-        final int tradeId = trade['id'] as int; // Get trade ID
+        final livePrice = viewModel.livePrices[symbol];
+        final int tradeId = trade['id'] as int;
 
         double? tradeReturnValue, tradePercentageReturn, tradeBookCost;
 
@@ -502,8 +321,9 @@ class _InvestmentAccountScreenState extends State<InvestmentAccountScreen> {
           final currentMarketValue = livePrice * shares;
           tradeReturnValue = currentMarketValue - total;
           tradeBookCost = currentMarketValue;
-          if (total > 0)
+          if (total > 0) {
             tradePercentageReturn = (tradeReturnValue / total) * 100;
+          }
         }
 
         final returnColor =
@@ -520,22 +340,28 @@ class _InvestmentAccountScreenState extends State<InvestmentAccountScreen> {
               ? Text(_formatCurrency(livePrice))
               : const Text('N/A')),
           DataCell(Text(_formatCurrency(total))),
-          DataCell(tradeReturnValue != null
-              ? Text(_formatCurrency(tradeReturnValue),
-                  style: TextStyle(color: returnColor))
-              : const Text('N/A')),
-          DataCell(tradePercentageReturn != null
-              ? Text('${tradePercentageReturn.toStringAsFixed(2)}%',
-                  style: TextStyle(color: returnColor))
-              : const Text('N/A')),
-          DataCell(tradeBookCost != null
-              ? Text(_formatCurrency(tradeBookCost),
-                  style: TextStyle(color: returnColor))
-              : const Text('N/A')),
+          DataCell(
+            tradeReturnValue != null
+                ? Text(_formatCurrency(tradeReturnValue),
+                    style: TextStyle(color: returnColor))
+                : const Text('N/A'),
+          ),
+          DataCell(
+            tradePercentageReturn != null
+                ? Text('${tradePercentageReturn.toStringAsFixed(2)}%',
+                    style: TextStyle(color: returnColor))
+                : const Text('N/A'),
+          ),
+          DataCell(
+            tradeBookCost != null
+                ? Text(_formatCurrency(tradeBookCost),
+                    style: TextStyle(color: returnColor))
+                : const Text('N/A'),
+          ),
           DataCell(
             IconButton(
               icon: const Icon(Icons.delete, color: Colors.red),
-              onPressed: () => _confirmAndDeleteTrade(tradeId),
+              onPressed: () => _confirmAndDeleteTrade(context, viewModel, tradeId),
               tooltip: 'Delete Trade',
             ),
           ),
@@ -543,32 +369,21 @@ class _InvestmentAccountScreenState extends State<InvestmentAccountScreen> {
       }).toList(),
     );
   }
-  
-  Future<void> _confirmAndDeleteTrade(int tradeId) async {
-    final bool? confirm = await AppDialogs.showDeleteConfirmationDialog(context, 'this trade');
+
+  Future<void> _confirmAndDeleteTrade(BuildContext context,
+      InvestmentAccountViewModel viewModel, int tradeId) async {
+    final bool? confirm =
+        await AppDialogs.showDeleteConfirmationDialog(context, 'this trade');
 
     if (confirm == true) {
-      if (_token == null) {
+      final success = await viewModel.deleteTrade(tradeId);
+      if (ScaffoldMessenger.of(context).mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
-          const SnackBar(content: Text('Authentication token not available.')),
-        );
-        return;
-      }
-      try {
-        final success = await _transactionService.deleteTrade(tradeId, token: _token);
-        if (success) {
-          ScaffoldMessenger.of(context).showSnackBar(
-            const SnackBar(content: Text('Trade deleted successfully.')),
-          );
-          _fetchData(); // Refresh data after deletion
-        } else {
-          ScaffoldMessenger.of(context).showSnackBar(
-            const SnackBar(content: Text('Failed to delete trade.')),
-          );
-        }
-      } catch (e) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(content: Text('Error deleting trade: $e')),
+          SnackBar(
+            content: Text(success
+                ? 'Trade deleted successfully.'
+                : 'Failed to delete trade.'),
+          ),
         );
       }
     }