Home Dashboard

The Home Dashboard is the main landing page after onboarding, providing a comprehensive overview of the user’s financial status.

Overview

File: lib/app/pages/client/home/home_view.dart

The home view displays:

• Total balance across all wallets
• Income and expense summaries
• Recent transactions list
• Quick action buttons

Components

Overview Card

File: lib/app/pages/client/home/components/_overview_card.dart

Shows financial summary at a glance:

OverviewCardWidget(
  totalBalance: 5000.00,
  totalIncome: 3000.00,
  totalExpense: 1500.00,
  currency: CurrencyMock.usd,
)

Features:

• Large balance display with currency symbol
• Income vs Expense comparison
• Color-coded indicators (green for income, red for expense)
• Percentage change indicators

Recent Transactions

Displays the last 5-10 transactions with:

• Transaction category icon
• Transaction name/notes
• Amount with type indicator
• Date

Architecture

State Management

class HomeView extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final userAsync = ref.watch(authUserServiceProvider);
    final currency = ref.watch(userCurrencyProvider);

    return userAsync.when(
      data: (user) => _buildContent(user, currency),
      loading: () => const HomeSkeleton(),
      error: (err, _) => ErrorWidget(err),
    );
  }
}

Data Flow

1. AuthUserService provides user data including currency
2. Mock data or API provides transactions
3. Calculated totals from transaction lists
4. UI updates automatically when data changes

Calculations

Total Balance

double get totalBalance => wallets.fold(
  0,
  (sum, wallet) => sum + wallet.balance,
);

Income Summary

double get totalIncome => transactions
  .where((t) => t.type == TransactionType.income)
  .fold(0, (sum, t) => sum + t.amount);

Expense Summary

double get totalExpense => transactions
  .where((t) => t.type == TransactionType.expense)
  .fold(0, (sum, t) => sum + t.amount);

UI Layout

┌─────────────────────────────────────┐
│  Overview Card                      │
│  ┌───────────────────────────────┐  │
│  │  Total Balance                │  │
│  │  $5,000.00                    │  │
│  │                               │  │
│  │  Income $3,000  Expense $1,500│  │
│  └───────────────────────────────┘  │
├─────────────────────────────────────┤
│  Recent Transactions                │
│  ┌───────────────────────────────┐  │
│  │  🍔  Food       -$25.00   Dec │  │
│  │  💰  Salary     +$3000.00 Dec │  │
│  │  🚗  Transport  -$50.00   Nov │  │
│  └───────────────────────────────┘  │
├─────────────────────────────────────┤
│  [See All]                          │
└─────────────────────────────────────┘

Customization

Change Displayed Transaction Count

In home_view.dart:

final recentTransactions = transactions.take(10).toList(); // Change to 10

Add New Overview Metrics

Add to OverviewCardWidget:

class OverviewCardWidget extends StatelessWidget {
  final double totalBalance;
  final double totalIncome;
  final double totalExpense;
  final double savingsRate; // Add new metric
  // ...
}

Custom Colors

The overview card uses theme colors automatically. To customize:

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        theme.colorScheme.primary,
        theme.colorScheme.secondary,
      ],
    ),
  ),
)

Best Practices

1. Show loading states while data loads
2. Format currency with correct symbols
3. Limit transactions shown (5-10 max)
4. Use relative dates (“Today”, “Yesterday”)
5. Highlight important metrics (balance)
6. Enable quick actions (add transaction button)

Testing

testWidgets('HomeView displays balance correctly', (tester) async {
  await tester.pumpWidget(
    ProviderScope(
      child: MaterialApp(home: HomeView()),
    ),
  );

  expect(find.text(r'$5,000.00'), findsOneWidget);
  expect(find.text('Total Balance'), findsOneWidget);
});