update

lib/app/app.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import 'router.dart';
+import 'theme.dart';
+
+class App extends StatelessWidget {
+  const App({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp.router(
+      title: 'Finance Tracker',
+      debugShowCheckedModeBanner: false,
+      theme: buildAppTheme(),
+      routerConfig: appRouter,
+    );
+  }
+}

lib/app/router.dart

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import '../features/dashboard/screen.dart';
+import '../features/add_transaction/screen.dart';
+import '../features/categories/screen.dart';
+
+final _shellKey = GlobalKey<NavigatorState>();
+
+final appRouter = GoRouter(
+  initialLocation: '/dashboard',
+  routes: [
+    ShellRoute(
+      navigatorKey: _shellKey,
+      builder: (context, state, child) => AppShell(child: child),
+      routes: [
+        GoRoute(
+          path: '/dashboard',
+          pageBuilder: (context, state) => const NoTransitionPage(
+            child: DashboardScreen(),
+          ),
+        ),
+        GoRoute(
+          path: '/categories',
+          pageBuilder: (context, state) => const NoTransitionPage(
+            child: CategoriesScreen(),
+          ),
+        ),
+      ],
+    ),
+    GoRoute(
+      path: '/add',
+      builder: (context, state) => const AddTransactionScreen(),
+    ),
+  ],
+);
+
+class AppShell extends StatelessWidget {
+  final Widget child;
+  const AppShell({super.key, required this.child});
+
+  int _locationToIndex(BuildContext context) {
+    final location = GoRouterState.of(context).uri.toString();
+    if (location.startsWith('/categories')) return 1;
+    return 0;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final idx = _locationToIndex(context);
+    return Scaffold(
+      body: child,
+      floatingActionButton: FloatingActionButton(
+        onPressed: () => context.push('/add'),
+        backgroundColor: const Color(0xFF7C6DED),
+        child: const Icon(Icons.add, color: Colors.white),
+      ),
+      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
+      bottomNavigationBar: NavigationBar(
+        selectedIndex: idx,
+        onDestinationSelected: (i) {
+          if (i == 0) context.go('/dashboard');
+          if (i == 1) context.go('/categories');
+        },
+        destinations: const [
+          NavigationDestination(
+            icon: Icon(Icons.dashboard_outlined),
+            selectedIcon: Icon(Icons.dashboard_rounded),
+            label: 'Dashboard',
+          ),
+          NavigationDestination(
+            icon: Icon(Icons.pie_chart_outline_rounded),
+            selectedIcon: Icon(Icons.pie_chart_rounded),
+            label: 'Categories',
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/app/theme.dart

@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import '../core/constants.dart';
+
+ThemeData buildAppTheme() {
+  final base = ThemeData.dark(useMaterial3: true);
+  final textTheme = GoogleFonts.poppinsTextTheme(base.textTheme).apply(
+    bodyColor: AppColors.textPrimary,
+    displayColor: AppColors.textPrimary,
+  );
+
+  return base.copyWith(
+    textTheme: textTheme,
+    scaffoldBackgroundColor: AppColors.background,
+    colorScheme: const ColorScheme.dark(
+      surface: AppColors.surface,
+      primary: AppColors.accent,
+      secondary: AppColors.accent,
+      onPrimary: Colors.white,
+      onSurface: AppColors.textPrimary,
+    ),
+    cardTheme: CardThemeData(
+      color: AppColors.surface,
+      elevation: 0,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(16),
+      ),
+      margin: EdgeInsets.zero,
+    ),
+    appBarTheme: AppBarTheme(
+      backgroundColor: AppColors.background,
+      elevation: 0,
+      centerTitle: false,
+      titleTextStyle: GoogleFonts.poppins(
+        color: AppColors.textPrimary,
+        fontSize: 20,
+        fontWeight: FontWeight.w600,
+      ),
+      iconTheme: const IconThemeData(color: AppColors.textPrimary),
+    ),
+    navigationBarTheme: NavigationBarThemeData(
+      backgroundColor: AppColors.surface,
+      indicatorColor: AppColors.accent.withOpacity(0.2),
+      labelTextStyle: WidgetStateProperty.resolveWith((states) {
+        if (states.contains(WidgetState.selected)) {
+          return GoogleFonts.poppins(
+            color: AppColors.accent,
+            fontSize: 12,
+            fontWeight: FontWeight.w600,
+          );
+        }
+        return GoogleFonts.poppins(
+          color: AppColors.textSecondary,
+          fontSize: 12,
+        );
+      }),
+      iconTheme: WidgetStateProperty.resolveWith((states) {
+        if (states.contains(WidgetState.selected)) {
+          return const IconThemeData(color: AppColors.accent);
+        }
+        return const IconThemeData(color: AppColors.textSecondary);
+      }),
+    ),
+    inputDecorationTheme: InputDecorationTheme(
+      filled: true,
+      fillColor: AppColors.surface,
+      border: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(12),
+        borderSide: const BorderSide(color: AppColors.divider),
+      ),
+      enabledBorder: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(12),
+        borderSide: const BorderSide(color: AppColors.divider),
+      ),
+      focusedBorder: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(12),
+        borderSide: const BorderSide(color: AppColors.accent, width: 1.5),
+      ),
+      labelStyle: const TextStyle(color: AppColors.textSecondary),
+      hintStyle: const TextStyle(color: AppColors.textSecondary),
+    ),
+    elevatedButtonTheme: ElevatedButtonThemeData(
+      style: ElevatedButton.styleFrom(
+        backgroundColor: AppColors.accent,
+        foregroundColor: Colors.white,
+        minimumSize: const Size(double.infinity, 52),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(14),
+        ),
+        textStyle: GoogleFonts.poppins(
+          fontSize: 16,
+          fontWeight: FontWeight.w600,
+        ),
+      ),
+    ),
+    dividerTheme: const DividerThemeData(
+      color: AppColors.divider,
+      thickness: 1,
+    ),
+  );
+}

lib/core/constants.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+class AppColors {
+  static const background = Color(0xFF0F0F14);
+  static const surface = Color(0xFF1A1A24);
+  static const accent = Color(0xFF7C6DED);
+  static const income = Color(0xFF4CAF8C);
+  static const expense = Color(0xFFE05C6B);
+  static const textPrimary = Color(0xFFEEEEF5);
+  static const textSecondary = Color(0xFF8888A0);
+  static const divider = Color(0xFF2A2A38);
+}
+
+class AppCategories {
+  static const all = ['Food', 'Transport', 'Shopping', 'Health', 'Other'];
+
+  static const icons = {
+    'Food': Icons.restaurant_rounded,
+    'Transport': Icons.directions_car_rounded,
+    'Shopping': Icons.shopping_bag_rounded,
+    'Health': Icons.favorite_rounded,
+    'Other': Icons.category_rounded,
+  };
+
+  static const colors = {
+    'Food': Color(0xFFFF8C69),
+    'Transport': Color(0xFF69B4FF),
+    'Shopping': Color(0xFFFFD369),
+    'Health': Color(0xFF69FFB4),
+    'Other': Color(0xFFB469FF),
+  };
+}

lib/features/add_transaction/provider.dart

@@ -0,0 +1,55 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../shared/models/transaction.dart';
+
+class AddTransactionState {
+  final double? amount;
+  final String category;
+  final TransactionType type;
+  final DateTime date;
+  final String note;
+  final bool isSubmitting;
+
+  const AddTransactionState({
+    this.amount,
+    this.category = 'Food',
+    this.type = TransactionType.expense,
+    required this.date,
+    this.note = '',
+    this.isSubmitting = false,
+  });
+
+  AddTransactionState copyWith({
+    double? amount,
+    String? category,
+    TransactionType? type,
+    DateTime? date,
+    String? note,
+    bool? isSubmitting,
+  }) =>
+      AddTransactionState(
+        amount: amount ?? this.amount,
+        category: category ?? this.category,
+        type: type ?? this.type,
+        date: date ?? this.date,
+        note: note ?? this.note,
+        isSubmitting: isSubmitting ?? this.isSubmitting,
+      );
+}
+
+class AddTransactionNotifier extends StateNotifier<AddTransactionState> {
+  AddTransactionNotifier()
+      : super(AddTransactionState(date: DateTime.now()));
+
+  void setAmount(double? v) => state = state.copyWith(amount: v);
+  void setCategory(String v) => state = state.copyWith(category: v);
+  void setType(TransactionType v) => state = state.copyWith(type: v);
+  void setDate(DateTime v) => state = state.copyWith(date: v);
+  void setNote(String v) => state = state.copyWith(note: v);
+  void setSubmitting(bool v) => state = state.copyWith(isSubmitting: v);
+  void reset() => state = AddTransactionState(date: DateTime.now());
+}
+
+final addTransactionProvider =
+    StateNotifierProvider.autoDispose<AddTransactionNotifier, AddTransactionState>(
+  (ref) => AddTransactionNotifier(),
+);

lib/features/add_transaction/screen.dart

@@ -0,0 +1,357 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:intl/intl.dart';
+import 'package:uuid/uuid.dart';
+import '../../core/constants.dart';
+import '../../shared/models/transaction.dart';
+import '../dashboard/provider.dart';
+import 'provider.dart';
+
+const _uuid = Uuid();
+
+class AddTransactionScreen extends ConsumerStatefulWidget {
+  const AddTransactionScreen({super.key});
+
+  @override
+  ConsumerState<AddTransactionScreen> createState() =>
+      _AddTransactionScreenState();
+}
+
+class _AddTransactionScreenState extends ConsumerState<AddTransactionScreen> {
+  final _formKey = GlobalKey<FormState>();
+  final _amountController = TextEditingController();
+  final _noteController = TextEditingController();
+
+  @override
+  void dispose() {
+    _amountController.dispose();
+    _noteController.dispose();
+    super.dispose();
+  }
+
+  Future<void> _submit() async {
+    if (!_formKey.currentState!.validate()) return;
+    final state = ref.read(addTransactionProvider);
+    ref.read(addTransactionProvider.notifier).setSubmitting(true);
+
+    final tx = Transaction(
+      id: _uuid.v4(),
+      amount: state.amount!,
+      category: state.category,
+      type: state.type,
+      date: state.date,
+      note: state.note.isEmpty ? null : state.note,
+    );
+
+    await ref.read(transactionsProvider.notifier).add(tx);
+    ref.read(addTransactionProvider.notifier).setSubmitting(false);
+
+    if (mounted) context.pop();
+  }
+
+  Future<void> _pickDate() async {
+    final state = ref.read(addTransactionProvider);
+    final picked = await showDatePicker(
+      context: context,
+      initialDate: state.date,
+      firstDate: DateTime(2000),
+      lastDate: DateTime.now(),
+      builder: (context, child) => Theme(
+        data: Theme.of(context).copyWith(
+          colorScheme: const ColorScheme.dark(
+            primary: AppColors.accent,
+            surface: AppColors.surface,
+          ),
+        ),
+        child: child!,
+      ),
+    );
+    if (picked != null) {
+      ref.read(addTransactionProvider.notifier).setDate(picked);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final state = ref.watch(addTransactionProvider);
+
+    return Scaffold(
+      backgroundColor: AppColors.background,
+      appBar: AppBar(
+        title: const Text('Add Transaction'),
+        leading: IconButton(
+          icon: const Icon(Icons.close_rounded),
+          onPressed: () => context.pop(),
+        ),
+      ),
+      body: SafeArea(
+        child: Form(
+          key: _formKey,
+          child: ListView(
+            padding: const EdgeInsets.all(20),
+            children: [
+              // Type toggle
+              _TypeToggle(
+                selected: state.type,
+                onChanged: (t) =>
+                    ref.read(addTransactionProvider.notifier).setType(t),
+              ),
+              const SizedBox(height: 24),
+
+              // Amount
+              _SectionLabel('Amount'),
+              const SizedBox(height: 8),
+              TextFormField(
+                controller: _amountController,
+                keyboardType: const TextInputType.numberWithOptions(decimal: true),
+                inputFormatters: [
+                  FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,2}')),
+                ],
+                style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                      color: AppColors.textPrimary,
+                      fontWeight: FontWeight.w600,
+                    ),
+                decoration: const InputDecoration(
+                  prefixText: '\$ ',
+                  prefixStyle: TextStyle(
+                    color: AppColors.textSecondary,
+                    fontSize: 20,
+                    fontWeight: FontWeight.w600,
+                  ),
+                  hintText: '0.00',
+                ),
+                onChanged: (v) {
+                  final parsed = double.tryParse(v);
+                  ref.read(addTransactionProvider.notifier).setAmount(parsed);
+                },
+                validator: (v) {
+                  if (v == null || v.isEmpty) return 'Enter an amount';
+                  if (double.tryParse(v) == null) return 'Invalid amount';
+                  if (double.parse(v) <= 0) return 'Amount must be > 0';
+                  return null;
+                },
+              ),
+              const SizedBox(height: 20),
+
+              // Category
+              _SectionLabel('Category'),
+              const SizedBox(height: 8),
+              _CategoryPicker(
+                selected: state.category,
+                onChanged: (c) =>
+                    ref.read(addTransactionProvider.notifier).setCategory(c),
+              ),
+              const SizedBox(height: 20),
+
+              // Date
+              _SectionLabel('Date'),
+              const SizedBox(height: 8),
+              InkWell(
+                onTap: _pickDate,
+                borderRadius: BorderRadius.circular(12),
+                child: Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+                  decoration: BoxDecoration(
+                    color: AppColors.surface,
+                    borderRadius: BorderRadius.circular(12),
+                    border: Border.all(color: AppColors.divider),
+                  ),
+                  child: Row(
+                    children: [
+                      const Icon(Icons.calendar_today_rounded,
+                          color: AppColors.textSecondary, size: 18),
+                      const SizedBox(width: 10),
+                      Text(
+                        DateFormat('MMMM d, yyyy').format(state.date),
+                        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                              color: AppColors.textPrimary,
+                            ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+              const SizedBox(height: 20),
+
+              // Note
+              _SectionLabel('Note (optional)'),
+              const SizedBox(height: 8),
+              TextFormField(
+                controller: _noteController,
+                maxLines: 2,
+                decoration: const InputDecoration(
+                  hintText: 'Add a note...',
+                ),
+                onChanged: (v) =>
+                    ref.read(addTransactionProvider.notifier).setNote(v),
+              ),
+              const SizedBox(height: 32),
+
+              ElevatedButton(
+                onPressed: state.isSubmitting ? null : _submit,
+                child: state.isSubmitting
+                    ? const SizedBox(
+                        height: 20,
+                        width: 20,
+                        child: CircularProgressIndicator(
+                          strokeWidth: 2,
+                          color: Colors.white,
+                        ),
+                      )
+                    : const Text('Save Transaction'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _SectionLabel extends StatelessWidget {
+  final String text;
+  const _SectionLabel(this.text);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      text,
+      style: Theme.of(context).textTheme.bodySmall?.copyWith(
+            color: AppColors.textSecondary,
+            fontWeight: FontWeight.w600,
+            letterSpacing: 0.5,
+          ),
+    );
+  }
+}
+
+class _TypeToggle extends StatelessWidget {
+  final TransactionType selected;
+  final ValueChanged<TransactionType> onChanged;
+  const _TypeToggle({required this.selected, required this.onChanged});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: AppColors.surface,
+        borderRadius: BorderRadius.circular(14),
+        border: Border.all(color: AppColors.divider),
+      ),
+      child: Row(
+        children: [
+          _TypeOption(
+            label: 'Expense',
+            icon: Icons.arrow_upward_rounded,
+            color: AppColors.expense,
+            isSelected: selected == TransactionType.expense,
+            onTap: () => onChanged(TransactionType.expense),
+          ),
+          _TypeOption(
+            label: 'Income',
+            icon: Icons.arrow_downward_rounded,
+            color: AppColors.income,
+            isSelected: selected == TransactionType.income,
+            onTap: () => onChanged(TransactionType.income),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _TypeOption extends StatelessWidget {
+  final String label;
+  final IconData icon;
+  final Color color;
+  final bool isSelected;
+  final VoidCallback onTap;
+  const _TypeOption({
+    required this.label,
+    required this.icon,
+    required this.color,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: GestureDetector(
+        onTap: onTap,
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 200),
+          padding: const EdgeInsets.symmetric(vertical: 14),
+          decoration: BoxDecoration(
+            color: isSelected ? color.withOpacity(0.15) : Colors.transparent,
+            borderRadius: BorderRadius.circular(13),
+          ),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Icon(icon, color: isSelected ? color : AppColors.textSecondary, size: 18),
+              const SizedBox(width: 6),
+              Text(
+                label,
+                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                      color: isSelected ? color : AppColors.textSecondary,
+                      fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
+                    ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _CategoryPicker extends StatelessWidget {
+  final String selected;
+  final ValueChanged<String> onChanged;
+  const _CategoryPicker({required this.selected, required this.onChanged});
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      spacing: 8,
+      runSpacing: 8,
+      children: AppCategories.all.map((cat) {
+        final isSelected = cat == selected;
+        final color = AppCategories.colors[cat] ?? AppColors.accent;
+        final icon = AppCategories.icons[cat] ?? Icons.category_rounded;
+        return GestureDetector(
+          onTap: () => onChanged(cat),
+          child: AnimatedContainer(
+            duration: const Duration(milliseconds: 200),
+            padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
+            decoration: BoxDecoration(
+              color: isSelected ? color.withOpacity(0.2) : AppColors.surface,
+              borderRadius: BorderRadius.circular(12),
+              border: Border.all(
+                color: isSelected ? color : AppColors.divider,
+                width: isSelected ? 1.5 : 1,
+              ),
+            ),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(icon, color: isSelected ? color : AppColors.textSecondary, size: 16),
+                const SizedBox(width: 6),
+                Text(
+                  cat,
+                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                        color: isSelected ? color : AppColors.textSecondary,
+                        fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
+                      ),
+                ),
+              ],
+            ),
+          ),
+        );
+      }).toList(),
+    );
+  }
+}

lib/features/categories/provider.dart

@@ -0,0 +1,14 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../shared/models/transaction.dart';
+import '../dashboard/provider.dart';
+
+final categoryExpenseProvider = Provider<Map<String, double>>((ref) {
+  final txs = ref.watch(transactionsProvider)
+      .where((t) => t.type == TransactionType.expense);
+
+  final map = <String, double>{};
+  for (final t in txs) {
+    map[t.category] = (map[t.category] ?? 0) + t.amount;
+  }
+  return map;
+});

lib/features/categories/screen.dart

@@ -0,0 +1,294 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:intl/intl.dart';
+import '../../core/constants.dart';
+import 'provider.dart';
+
+final _currencyFmt = NumberFormat.currency(symbol: '\$', decimalDigits: 2);
+
+class CategoriesScreen extends ConsumerStatefulWidget {
+  const CategoriesScreen({super.key});
+
+  @override
+  ConsumerState<CategoriesScreen> createState() => _CategoriesScreenState();
+}
+
+class _CategoriesScreenState extends ConsumerState<CategoriesScreen> {
+  int _touchedIndex = -1;
+
+  @override
+  Widget build(BuildContext context) {
+    final data = ref.watch(categoryExpenseProvider);
+    final total = data.values.fold(0.0, (a, b) => a + b);
+
+    return Scaffold(
+      backgroundColor: AppColors.background,
+      body: SafeArea(
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(20, 24, 20, 0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                'Categories',
+                style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                      fontWeight: FontWeight.w700,
+                      color: AppColors.textPrimary,
+                    ),
+              ),
+              Text(
+                'Expense breakdown',
+                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                      color: AppColors.textSecondary,
+                    ),
+              ),
+              const SizedBox(height: 24),
+              if (data.isEmpty)
+                const Expanded(child: _EmptyState())
+              else
+                Expanded(
+                  child: ListView(
+                    children: [
+                      _PieChartCard(
+                        data: data,
+                        total: total,
+                        touchedIndex: _touchedIndex,
+                        onTouch: (i) => setState(() => _touchedIndex = i),
+                      ),
+                      const SizedBox(height: 20),
+                      ...data.entries.map((e) => Padding(
+                            padding: const EdgeInsets.only(bottom: 10),
+                            child: _CategoryRow(
+                              category: e.key,
+                              amount: e.value,
+                              total: total,
+                            ),
+                          )),
+                      const SizedBox(height: 80),
+                    ],
+                  ),
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _PieChartCard extends StatelessWidget {
+  final Map<String, double> data;
+  final double total;
+  final int touchedIndex;
+  final ValueChanged<int> onTouch;
+
+  const _PieChartCard({
+    required this.data,
+    required this.total,
+    required this.touchedIndex,
+    required this.onTouch,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final entries = data.entries.toList();
+
+    return Container(
+      padding: const EdgeInsets.all(20),
+      decoration: BoxDecoration(
+        color: AppColors.surface,
+        borderRadius: BorderRadius.circular(20),
+        border: Border.all(color: AppColors.divider),
+      ),
+      child: Column(
+        children: [
+          SizedBox(
+            height: 220,
+            child: Stack(
+              alignment: Alignment.center,
+              children: [
+                PieChart(
+                  PieChartData(
+                    pieTouchData: PieTouchData(
+                      touchCallback: (event, response) {
+                        if (!event.isInterestedForInteractions ||
+                            response == null ||
+                            response.touchedSection == null) {
+                          onTouch(-1);
+                          return;
+                        }
+                        onTouch(response.touchedSection!.touchedSectionIndex);
+                      },
+                    ),
+                    sectionsSpace: 3,
+                    centerSpaceRadius: 60,
+                    sections: List.generate(entries.length, (i) {
+                      final isTouched = i == touchedIndex;
+                      final cat = entries[i].key;
+                      final val = entries[i].value;
+                      final color = AppCategories.colors[cat] ?? AppColors.accent;
+                      return PieChartSectionData(
+                        color: color,
+                        value: val,
+                        title: isTouched
+                            ? '${(val / total * 100).toStringAsFixed(1)}%'
+                            : '',
+                        radius: isTouched ? 60 : 50,
+                        titleStyle: const TextStyle(
+                          fontSize: 13,
+                          fontWeight: FontWeight.w700,
+                          color: Colors.white,
+                        ),
+                      );
+                    }),
+                  ),
+                ),
+                Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Text(
+                      'Total',
+                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                            color: AppColors.textSecondary,
+                          ),
+                    ),
+                    Text(
+                      _currencyFmt.format(total),
+                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                            color: AppColors.textPrimary,
+                            fontWeight: FontWeight.w700,
+                          ),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _CategoryRow extends StatelessWidget {
+  final String category;
+  final double amount;
+  final double total;
+  const _CategoryRow({
+    required this.category,
+    required this.amount,
+    required this.total,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final color = AppCategories.colors[category] ?? AppColors.accent;
+    final icon = AppCategories.icons[category] ?? Icons.category_rounded;
+    final pct = total > 0 ? amount / total : 0.0;
+
+    return Container(
+      padding: const EdgeInsets.all(14),
+      decoration: BoxDecoration(
+        color: AppColors.surface,
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(color: AppColors.divider),
+      ),
+      child: Column(
+        children: [
+          Row(
+            children: [
+              Container(
+                padding: const EdgeInsets.all(8),
+                decoration: BoxDecoration(
+                  color: color.withOpacity(0.15),
+                  borderRadius: BorderRadius.circular(10),
+                ),
+                child: Icon(icon, color: color, size: 18),
+              ),
+              const SizedBox(width: 12),
+              Expanded(
+                child: Text(
+                  category,
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                        fontWeight: FontWeight.w600,
+                        color: AppColors.textPrimary,
+                      ),
+                ),
+              ),
+              Text(
+                _currencyFmt.format(amount),
+                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                      color: AppColors.expense,
+                      fontWeight: FontWeight.w700,
+                    ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 10),
+          ClipRRect(
+            borderRadius: BorderRadius.circular(4),
+            child: LinearProgressIndicator(
+              value: pct,
+              backgroundColor: AppColors.divider,
+              valueColor: AlwaysStoppedAnimation<Color>(color),
+              minHeight: 6,
+            ),
+          ),
+          const SizedBox(height: 4),
+          Align(
+            alignment: Alignment.centerRight,
+            child: Text(
+              '${(pct * 100).toStringAsFixed(1)}%',
+              style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                    color: AppColors.textSecondary,
+                  ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _EmptyState extends StatelessWidget {
+  const _EmptyState();
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Container(
+            padding: const EdgeInsets.all(24),
+            decoration: const BoxDecoration(
+              color: AppColors.surface,
+              shape: BoxShape.circle,
+            ),
+            child: const Icon(
+              Icons.pie_chart_outline_rounded,
+              size: 48,
+              color: AppColors.textSecondary,
+            ),
+          ),
+          const SizedBox(height: 16),
+          Text(
+            'No expense data',
+            style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                  color: AppColors.textPrimary,
+                  fontWeight: FontWeight.w600,
+                ),
+          ),
+          const SizedBox(height: 6),
+          Text(
+            'Add some expenses to see the breakdown',
+            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                  color: AppColors.textSecondary,
+                ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/dashboard/provider.dart

@@ -0,0 +1,62 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import '../../shared/models/transaction.dart';
+import '../../shared/services/storage_service.dart';
+
+final sharedPreferencesProvider = Provider<SharedPreferences>((ref) {
+  throw UnimplementedError('Override in main');
+});
+
+final storageServiceProvider = Provider<StorageService>((ref) {
+  return StorageService(ref.watch(sharedPreferencesProvider));
+});
+
+final transactionsProvider =
+    StateNotifierProvider<TransactionsNotifier, List<Transaction>>((ref) {
+  final storage = ref.watch(storageServiceProvider);
+  return TransactionsNotifier(storage);
+});
+
+class TransactionsNotifier extends StateNotifier<List<Transaction>> {
+  final StorageService _storage;
+
+  TransactionsNotifier(this._storage) : super(_storage.loadTransactions());
+
+  Future<void> add(Transaction transaction) async {
+    await _storage.addTransaction(transaction);
+    state = _storage.loadTransactions();
+  }
+
+  Future<void> delete(String id) async {
+    await _storage.deleteTransaction(id);
+    state = _storage.loadTransactions();
+  }
+}
+
+// Derived providers
+final totalBalanceProvider = Provider<double>((ref) {
+  final txs = ref.watch(transactionsProvider);
+  return txs.fold(0.0, (sum, t) {
+    return t.type == TransactionType.income ? sum + t.amount : sum - t.amount;
+  });
+});
+
+final totalIncomeProvider = Provider<double>((ref) {
+  return ref
+      .watch(transactionsProvider)
+      .where((t) => t.type == TransactionType.income)
+      .fold(0.0, (sum, t) => sum + t.amount);
+});
+
+final totalExpenseProvider = Provider<double>((ref) {
+  return ref
+      .watch(transactionsProvider)
+      .where((t) => t.type == TransactionType.expense)
+      .fold(0.0, (sum, t) => sum + t.amount);
+});
+
+final recentTransactionsProvider = Provider<List<Transaction>>((ref) {
+  final txs = List<Transaction>.from(ref.watch(transactionsProvider));
+  txs.sort((a, b) => b.date.compareTo(a.date));
+  return txs.take(20).toList();
+});

lib/features/dashboard/screen.dart

@@ -0,0 +1,327 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:intl/intl.dart';
+import '../../core/constants.dart';
+import '../../shared/models/transaction.dart';
+import 'provider.dart';
+
+final _currencyFmt = NumberFormat.currency(symbol: '\$', decimalDigits: 2);
+
+class DashboardScreen extends ConsumerWidget {
+  const DashboardScreen({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final balance = ref.watch(totalBalanceProvider);
+    final income = ref.watch(totalIncomeProvider);
+    final expense = ref.watch(totalExpenseProvider);
+    final recent = ref.watch(recentTransactionsProvider);
+
+    return Scaffold(
+      backgroundColor: AppColors.background,
+      body: SafeArea(
+        child: CustomScrollView(
+          slivers: [
+            SliverToBoxAdapter(
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(20, 24, 20, 0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      'My Finances',
+                      style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                            fontWeight: FontWeight.w700,
+                            color: AppColors.textPrimary,
+                          ),
+                    ),
+                    Text(
+                      DateFormat('MMMM yyyy').format(DateTime.now()),
+                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                            color: AppColors.textSecondary,
+                          ),
+                    ),
+                    const SizedBox(height: 24),
+                    _BalanceCard(balance: balance),
+                    const SizedBox(height: 16),
+                    _SummaryRow(income: income, expense: expense),
+                    const SizedBox(height: 28),
+                    Text(
+                      'Recent Transactions',
+                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                            fontWeight: FontWeight.w600,
+                            color: AppColors.textPrimary,
+                          ),
+                    ),
+                    const SizedBox(height: 12),
+                  ],
+                ),
+              ),
+            ),
+            if (recent.isEmpty)
+              const SliverFillRemaining(
+                hasScrollBody: false,
+                child: _EmptyState(),
+              )
+            else
+              SliverPadding(
+                padding: const EdgeInsets.fromLTRB(20, 0, 20, 100),
+                sliver: SliverList(
+                  delegate: SliverChildBuilderDelegate(
+                    (context, i) => Padding(
+                      padding: const EdgeInsets.only(bottom: 10),
+                      child: _TransactionTile(transaction: recent[i], ref: ref),
+                    ),
+                    childCount: recent.length,
+                  ),
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _BalanceCard extends StatelessWidget {
+  final double balance;
+  const _BalanceCard({required this.balance});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.all(24),
+      decoration: BoxDecoration(
+        gradient: const LinearGradient(
+          colors: [Color(0xFF7C6DED), Color(0xFF5A4FBF)],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        ),
+        borderRadius: BorderRadius.circular(20),
+        boxShadow: [
+          BoxShadow(
+            color: AppColors.accent.withOpacity(0.3),
+            blurRadius: 20,
+            offset: const Offset(0, 8),
+          ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'Total Balance',
+            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                  color: Colors.white70,
+                ),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            _currencyFmt.format(balance),
+            style: Theme.of(context).textTheme.headlineMedium?.copyWith(
+                  color: Colors.white,
+                  fontWeight: FontWeight.w700,
+                  letterSpacing: -0.5,
+                ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _SummaryRow extends StatelessWidget {
+  final double income;
+  final double expense;
+  const _SummaryRow({required this.income, required this.expense});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Expanded(child: _SummaryCard(label: 'Income', amount: income, color: AppColors.income, icon: Icons.arrow_downward_rounded)),
+        const SizedBox(width: 12),
+        Expanded(child: _SummaryCard(label: 'Expenses', amount: expense, color: AppColors.expense, icon: Icons.arrow_upward_rounded)),
+      ],
+    );
+  }
+}
+
+class _SummaryCard extends StatelessWidget {
+  final String label;
+  final double amount;
+  final Color color;
+  final IconData icon;
+  const _SummaryCard({required this.label, required this.amount, required this.color, required this.icon});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: AppColors.surface,
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(color: AppColors.divider),
+      ),
+      child: Row(
+        children: [
+          Container(
+            padding: const EdgeInsets.all(8),
+            decoration: BoxDecoration(
+              color: color.withOpacity(0.15),
+              borderRadius: BorderRadius.circular(10),
+            ),
+            child: Icon(icon, color: color, size: 18),
+          ),
+          const SizedBox(width: 10),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(label, style: Theme.of(context).textTheme.bodySmall?.copyWith(color: AppColors.textSecondary)),
+                const SizedBox(height: 2),
+                Text(
+                  _currencyFmt.format(amount),
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                        color: color,
+                        fontWeight: FontWeight.w600,
+                      ),
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _TransactionTile extends StatelessWidget {
+  final Transaction transaction;
+  final WidgetRef ref;
+  const _TransactionTile({required this.transaction, required this.ref});
+
+  @override
+  Widget build(BuildContext context) {
+    final isIncome = transaction.type == TransactionType.income;
+    final color = isIncome ? AppColors.income : AppColors.expense;
+    final catColor = AppCategories.colors[transaction.category] ?? AppColors.accent;
+    final catIcon = AppCategories.icons[transaction.category] ?? Icons.category_rounded;
+
+    return Dismissible(
+      key: Key(transaction.id),
+      direction: DismissDirection.endToStart,
+      background: Container(
+        alignment: Alignment.centerRight,
+        padding: const EdgeInsets.only(right: 20),
+        decoration: BoxDecoration(
+          color: AppColors.expense.withOpacity(0.15),
+          borderRadius: BorderRadius.circular(16),
+        ),
+        child: const Icon(Icons.delete_outline_rounded, color: AppColors.expense),
+      ),
+      onDismissed: (_) => ref.read(transactionsProvider.notifier).delete(transaction.id),
+      child: Container(
+        padding: const EdgeInsets.all(14),
+        decoration: BoxDecoration(
+          color: AppColors.surface,
+          borderRadius: BorderRadius.circular(16),
+          border: Border.all(color: AppColors.divider),
+        ),
+        child: Row(
+          children: [
+            Container(
+              padding: const EdgeInsets.all(10),
+              decoration: BoxDecoration(
+                color: catColor.withOpacity(0.15),
+                borderRadius: BorderRadius.circular(12),
+              ),
+              child: Icon(catIcon, color: catColor, size: 20),
+            ),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    transaction.category,
+                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                          fontWeight: FontWeight.w600,
+                          color: AppColors.textPrimary,
+                        ),
+                  ),
+                  if (transaction.note != null && transaction.note!.isNotEmpty)
+                    Text(
+                      transaction.note!,
+                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                            color: AppColors.textSecondary,
+                          ),
+                      overflow: TextOverflow.ellipsis,
+                    )
+                  else
+                    Text(
+                      DateFormat('MMM d, yyyy').format(transaction.date),
+                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                            color: AppColors.textSecondary,
+                          ),
+                    ),
+                ],
+              ),
+            ),
+            Text(
+              '${isIncome ? '+' : '-'}${_currencyFmt.format(transaction.amount)}',
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                    color: color,
+                    fontWeight: FontWeight.w700,
+                  ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _EmptyState extends StatelessWidget {
+  const _EmptyState();
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Container(
+            padding: const EdgeInsets.all(24),
+            decoration: BoxDecoration(
+              color: AppColors.surface,
+              shape: BoxShape.circle,
+            ),
+            child: const Icon(
+              Icons.receipt_long_rounded,
+              size: 48,
+              color: AppColors.textSecondary,
+            ),
+          ),
+          const SizedBox(height: 16),
+          Text(
+            'No transactions yet',
+            style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                  color: AppColors.textPrimary,
+                  fontWeight: FontWeight.w600,
+                ),
+          ),
+          const SizedBox(height: 6),
+          Text(
+            'Tap + to add your first transaction',
+            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                  color: AppColors.textSecondary,
+                ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/main.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'app/app.dart';
+import 'features/dashboard/provider.dart';
+
+void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+  final prefs = await SharedPreferences.getInstance();
+
+  runApp(
+    ProviderScope(
+      overrides: [
+        sharedPreferencesProvider.overrideWithValue(prefs),
+      ],
+      child: const App(),
+    ),
+  );
+}

lib/shared/models/transaction.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/foundation.dart';
+
+enum TransactionType { income, expense }
+
+@immutable
+class Transaction {
+  final String id;
+  final double amount;
+  final String category;
+  final TransactionType type;
+  final DateTime date;
+  final String? note;
+
+  const Transaction({
+    required this.id,
+    required this.amount,
+    required this.category,
+    required this.type,
+    required this.date,
+    this.note,
+  });
+
+  factory Transaction.fromJson(Map<String, dynamic> json) => Transaction(
+        id: json['id'] as String,
+        amount: (json['amount'] as num).toDouble(),
+        category: json['category'] as String,
+        type: TransactionType.values.firstWhere(
+          (e) => e.name == json['type'],
+        ),
+        date: DateTime.parse(json['date'] as String),
+        note: json['note'] as String?,
+      );
+
+  Map<String, dynamic> toJson() => {
+        'id': id,
+        'amount': amount,
+        'category': category,
+        'type': type.name,
+        'date': date.toIso8601String(),
+        'note': note,
+      };
+
+  Transaction copyWith({
+    String? id,
+    double? amount,
+    String? category,
+    TransactionType? type,
+    DateTime? date,
+    String? note,
+  }) =>
+      Transaction(
+        id: id ?? this.id,
+        amount: amount ?? this.amount,
+        category: category ?? this.category,
+        type: type ?? this.type,
+        date: date ?? this.date,
+        note: note ?? this.note,
+      );
+}

lib/shared/services/storage_service.dart

@@ -0,0 +1,36 @@
+import 'dart:convert';
+import 'package:shared_preferences/shared_preferences.dart';
+import '../models/transaction.dart';
+
+class StorageService {
+  static const _key = 'transactions';
+
+  final SharedPreferences _prefs;
+
+  StorageService(this._prefs);
+
+  List<Transaction> loadTransactions() {
+    final raw = _prefs.getString(_key);
+    if (raw == null) return [];
+    final list = jsonDecode(raw) as List<dynamic>;
+    return list
+        .map((e) => Transaction.fromJson(e as Map<String, dynamic>))
+        .toList();
+  }
+
+  Future<void> saveTransactions(List<Transaction> transactions) async {
+    final encoded = jsonEncode(transactions.map((t) => t.toJson()).toList());
+    await _prefs.setString(_key, encoded);
+  }
+
+  Future<void> addTransaction(Transaction transaction) async {
+    final list = loadTransactions();
+    list.add(transaction);
+    await saveTransactions(list);
+  }
+
+  Future<void> deleteTransaction(String id) async {
+    final list = loadTransactions()..removeWhere((t) => t.id == id);
+    await saveTransactions(list);
+  }
+}