Multiple Wallet support, history of each wallet and updated payment page

2025-11-21 19:22:23 +03:00
parent 4c64a8d6e6
commit 87636a7ec3
68 changed files with 2154 additions and 701 deletions
--- a/frontend/pweb/lib/pages/payment_methods/add/card.dart
+++ b/frontend/pweb/lib/pages/payment_methods/add/card.dart
@@ -56,10 +56,21 @@ class _CardFormMinimalState extends State<CardFormMinimal> {
  @override
  void didUpdateWidget(covariant CardFormMinimal oldWidget) {
    super.didUpdateWidget(oldWidget);
-    if (widget.initialData == null && oldWidget.initialData != null) {
+    final newData = widget.initialData;
+    final oldData = oldWidget.initialData;
+
+    if (newData == null && oldData != null) {
      _panController.clear();
      _firstNameController.clear();
      _lastNameController.clear();
+      return;
+    }
+
+    if (newData != null && newData != oldData) {
+      _panController.text = newData.pan;
+      _firstNameController.text = newData.firstName;
+      _lastNameController.text = newData.lastName;
+      WidgetsBinding.instance.addPostFrameCallback((_) => _emitIfValid());
    }
  }

--- a/frontend/pweb/lib/pages/payment_methods/add/iban.dart
+++ b/frontend/pweb/lib/pages/payment_methods/add/iban.dart
@@ -57,11 +57,23 @@ class _IbanFormState extends State<IbanForm> {
  @override
  void didUpdateWidget(covariant IbanForm oldWidget) {
    super.didUpdateWidget(oldWidget);
-    if (widget.initialData == null && oldWidget.initialData != null) {
+    final newData = widget.initialData;
+    final oldData = oldWidget.initialData;
+
+    if (newData == null && oldData != null) {
      _ibanController.clear();
      _accountHolderController.clear();
      _bicController.clear();
      _bankNameController.clear();
+      return;
+    }
+
+    if (newData != null && newData != oldData) {
+      _ibanController.text = newData.iban;
+      _accountHolderController.text = newData.accountHolder;
+      _bicController.text = newData.bic ?? '';
+      _bankNameController.text = newData.bankName ?? '';
+      WidgetsBinding.instance.addPostFrameCallback((_) => _emitIfValid());
    }
  }

--- a/frontend/pweb/lib/pages/payment_methods/add/russian_bank.dart
+++ b/frontend/pweb/lib/pages/payment_methods/add/russian_bank.dart
@@ -66,7 +66,10 @@ class _RussianBankFormState extends State<RussianBankForm> {
  @override
  void didUpdateWidget(covariant RussianBankForm oldWidget) {
    super.didUpdateWidget(oldWidget);
-    if (widget.initialData == null && oldWidget.initialData != null) {
+    final newData = widget.initialData;
+    final oldData = oldWidget.initialData;
+
+    if (newData == null && oldData != null) {
      _recipientNameController.clear();
      _innController.clear();
      _kppController.clear();
@@ -74,6 +77,18 @@ class _RussianBankFormState extends State<RussianBankForm> {
      _bikController.clear();
      _accountNumberController.clear();
      _correspondentAccountController.clear();
+      return;
+    }
+
+    if (newData != null && newData != oldData) {
+      _recipientNameController.text = newData.recipientName;
+      _innController.text = newData.inn;
+      _kppController.text = newData.kpp;
+      _bankNameController.text = newData.bankName;
+      _bikController.text = newData.bik;
+      _accountNumberController.text = newData.accountNumber;
+      _correspondentAccountController.text = newData.correspondentAccount;
+      WidgetsBinding.instance.addPostFrameCallback((_) => _emitIfValid());
    }
  }

--- a/frontend/pweb/lib/pages/payment_methods/add/wallet.dart
+++ b/frontend/pweb/lib/pages/payment_methods/add/wallet.dart
@@ -41,8 +41,16 @@ class _WalletFormState extends State<WalletForm> {
  @override
  void didUpdateWidget(covariant WalletForm oldWidget) {
    super.didUpdateWidget(oldWidget);
-    if (widget.initialData == null && oldWidget.initialData != null) {
+    final newData = widget.initialData;
+    final oldData = oldWidget.initialData;
+
+    if (newData == null && oldData != null) {
      _walletIdController.clear();
+      return;
+    }
+
+    if (newData != null && newData != oldData) {
+      _walletIdController.text = newData.walletId;
    }
  }

--- a/frontend/pweb/lib/pages/payment_methods/delete_confirmation.dart
+++ b/frontend/pweb/lib/pages/payment_methods/delete_confirmation.dart
@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
+
 import 'package:pweb/generated/i18n/app_localizations.dart';

+
 Future<bool> showDeleteConfirmationDialog(BuildContext context) async {
  final l10n = AppLocalizations.of(context)!;
  return await showDialog<bool>(
--- a/frontend/pweb/lib/pages/payment_methods/header.dart
+++ b/frontend/pweb/lib/pages/payment_methods/header.dart
@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/utils/dimensions.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PaymentHeader extends StatelessWidget {
+
+  const PaymentHeader({super.key});
+  
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final dimensions = AppDimensions();
+
+    return Row(
+      children: [
+        Icon(
+          Icons.send_rounded, 
+          color: theme.colorScheme.primary, 
+          size: dimensions.iconSizeLarge
+        ),
+        SizedBox(width: dimensions.spacingSmall),
+        Text(
+          AppLocalizations.of(context)!.sendTo,
+          style: theme.textTheme.headlineSmall?.copyWith(
+            fontWeight: FontWeight.bold
+          ),
+        ),
+      ],
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/method_selector.dart
+++ b/frontend/pweb/lib/pages/payment_methods/method_selector.dart
@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/methods/type.dart';
+
+import 'package:pweb/providers/payment_methods.dart';
+import 'package:pweb/utils/payment/dropdown.dart';
+
+
+class PaymentMethodSelector extends StatelessWidget {
+  final PaymentMethodsProvider methodsProvider;
+  final ValueChanged<PaymentMethod> onMethodChanged;
+
+  const PaymentMethodSelector({
+    super.key,
+    required this.methodsProvider,
+    required this.onMethodChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return PaymentMethodDropdown(
+      methods: methodsProvider.methods,
+      initialValue: methodsProvider.selectedMethod,
+      onChanged: onMethodChanged,
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/page.dart
+++ b/frontend/pweb/lib/pages/payment_methods/page.dart
@@ -1,232 +1,120 @@
-import 'package:amplitude_flutter/amplitude.dart';
 import 'package:flutter/material.dart';

 import 'package:provider/provider.dart';

-import 'package:pshared/models/payment/type.dart';
 import 'package:pshared/models/recipient/recipient.dart';

-import 'package:pweb/pages/dashboard/payouts/payment_form.dart';
-import 'package:pweb/pages/dashboard/payouts/single/form/details.dart';
-import 'package:pweb/pages/dashboard/payouts/single/form/header.dart';
+import 'package:pweb/providers/payment_flow_provider.dart';
+import 'package:pweb/pages/payment_methods/widgets/payment_page_body.dart';
+import 'package:pweb/providers/page_selector.dart';
 import 'package:pweb/providers/payment_methods.dart';
 import 'package:pweb/providers/recipient.dart';
-import 'package:pweb/services/amplitude.dart';
-import 'package:pweb/utils/dimensions.dart';
-import 'package:pweb/utils/payment/dropdown.dart';
-import 'package:pweb/utils/payment/selector_type.dart';
-
-import 'package:pweb/generated/i18n/app_localizations.dart';
-import 'package:pweb/widgets/sidebar/destinations.dart';
-
-
-//TODO: decide whether to make AppDimensions universal for the whole app or leave it as it is - unique for this page alone


 class PaymentPage extends StatefulWidget {
-  final PaymentType? type;
  final ValueChanged<Recipient?>? onBack;

-  const PaymentPage({super.key, this.type, this.onBack});
+  const PaymentPage({super.key, this.onBack});

  @override
  State<PaymentPage> createState() => _PaymentPageState();
 }

 class _PaymentPageState extends State<PaymentPage> {
-  late Map<PaymentType, Object> _availableTypes;
-  late PaymentType _selectedType;
-  bool _isFormVisible = false;
-
-  @override
-  void didChangeDependencies() {
-    super.didChangeDependencies();
-    final recipientProvider = context.watch<RecipientProvider>();
-    final methodsProvider = context.watch<PaymentMethodsProvider>();
-    final recipient = recipientProvider.selectedRecipient;
-
-    // Initialize available types based on whether we have a recipient
-    if (recipient != null) {
-      // We have a recipient - use their payment methods
-      _availableTypes = {
-        if (recipient.card != null) PaymentType.card: recipient.card!,
-        if (recipient.iban != null) PaymentType.iban: recipient.iban!,
-        if (recipient.wallet != null) PaymentType.wallet: recipient.wallet!,
-        if (recipient.bank != null) PaymentType.bankAccount: recipient.bank!,
-      };
-      
-      // Set selected type if it's available, otherwise use first available type
-      if (_availableTypes.containsKey(_selectedType)) {
-        // Keep current selection if valid
-      } else if (_availableTypes.isNotEmpty) {
-        _selectedType = _availableTypes.keys.first;
-      } else {
-        // Fallback if recipient has no payment methods
-        _selectedType = PaymentType.bankAccount;
-      }
-    } else {
-      // No recipient - we're creating a new payment from scratch
-      _availableTypes = {};
-      _selectedType = widget.type ?? PaymentType.bankAccount;
-      _isFormVisible = true; // Always show form when creating new payment
-    }
-
-    // Load payment methods if not already loaded
-    if (methodsProvider.methods.isEmpty && !methodsProvider.isLoading) {
-      WidgetsBinding.instance.addPostFrameCallback((_) {
-        methodsProvider.loadMethods();
-      });
-    }
-  }
+  late final TextEditingController _searchController;
+  late final FocusNode _searchFocusNode;
+  late final PaymentFlowProvider _flowProvider;

  @override
  void initState() {
    super.initState();
-    // Initial values
-    _availableTypes = {};
-    _selectedType = widget.type ?? PaymentType.bankAccount;
+    _searchController = TextEditingController();
+    _searchFocusNode = FocusNode();
+    final pageSelector = context.read<PageSelectorProvider>();
+    _flowProvider = PaymentFlowProvider(
+      initialType: pageSelector.getDefaultPaymentType(),
+    );
+
+    WidgetsBinding.instance.addPostFrameCallback((_) => _initializePaymentPage());
+  }
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    _searchFocusNode.dispose();
+    _flowProvider.dispose();
+    super.dispose();
+  }
+
+  void _initializePaymentPage() {
+    final pageSelector = context.read<PageSelectorProvider>();
+    final methodsProvider = context.read<PaymentMethodsProvider>();
+    final recipientProvider = context.read<RecipientProvider>();
+
+    pageSelector.handleWalletAutoSelection();
+
+    if (methodsProvider.methods.isEmpty && !methodsProvider.isLoading) {
+      methodsProvider.loadMethods();
+    }
+
+    if (recipientProvider.recipients.isEmpty && !recipientProvider.isLoading) {
+      recipientProvider.loadRecipients();
+    }
+
+    _flowProvider.syncWithSelector(pageSelector);
+  }
+
+  void _handleSearchChanged(String query) {
+    context.read<RecipientProvider>().setQuery(query);
+  }
+
+  void _handleRecipientSelected(Recipient recipient) {
+    final pageSelector = context.read<PageSelectorProvider>();
+    final recipientProvider = context.read<RecipientProvider>();
+
+    recipientProvider.selectRecipient(recipient);
+    pageSelector.selectRecipient(recipient);
+    _flowProvider.reset(pageSelector);
+    _clearSearchField();
+  }
+
+  void _handleRecipientCleared() {
+    final pageSelector = context.read<PageSelectorProvider>();
+    final recipientProvider = context.read<RecipientProvider>();
+
+    recipientProvider.selectRecipient(null);
+    pageSelector.selectRecipient(null);
+    _flowProvider.reset(pageSelector);
+    _clearSearchField();
+  }
+
+  void _clearSearchField() {
+    _searchController.clear();
+    _searchFocusNode.unfocus();
+    context.read<RecipientProvider>().setQuery('');
+  }
+
+  void _handleSendPayment() {
+    // TODO: Handle Payment logic
+    // AmplitudeService.paymentInitiated();
  }

  @override
  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final dimensions = AppDimensions();
-    final recipientProvider = context.watch<RecipientProvider>();
-    final methodsProvider = context.watch<PaymentMethodsProvider>();
-    final recipient = recipientProvider.selectedRecipient;
+    final pageSelector = context.watch<PageSelectorProvider>();
+    _flowProvider.syncWithSelector(pageSelector);

-    // Show loading state for payment methods
-    if (methodsProvider.isLoading) {
-      return const Center(child: CircularProgressIndicator());
-    }
-
-    // Show error state for payment methods
-    if (methodsProvider.error != null) {
-      return Center(
-        child: Text('Error: ${methodsProvider.error}'),
-      );
-    }
-
-    return Align(
-      alignment: Alignment.topCenter,
-      child: ConstrainedBox(
-        constraints: BoxConstraints(maxWidth: dimensions.maxContentWidth),
-        child: Material(
-          elevation: dimensions.elevationSmall,
-          borderRadius: BorderRadius.circular(dimensions.borderRadiusMedium),
-          color: theme.colorScheme.onSecondary,
-          child: Padding(
-            padding: EdgeInsets.all(dimensions.paddingLarge),
-            child: SingleChildScrollView(
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  // Back button
-                  Align(
-                    alignment: Alignment.topLeft,
-                    child: IconButton(
-                      icon: const Icon(Icons.arrow_back),
-                      onPressed: () {
-                        widget.onBack?.call(recipient);
-                      },
-                    ),
-                  ),
-                  SizedBox(height: dimensions.paddingSmall),
-                  
-                  // Header
-                  Row(
-                    children: [
-                      Icon(
-                        Icons.send_rounded, 
-                        color: theme.colorScheme.primary, 
-                        size: dimensions.iconSizeLarge
-                      ),
-                      SizedBox(width: dimensions.spacingSmall),
-                      Text(
-                        AppLocalizations.of(context)!.sendTo,
-                        style: theme.textTheme.headlineSmall?.copyWith(
-                          fontWeight: FontWeight.bold
-                        ),
-                      ),
-                    ],
-                  ),
-                  SizedBox(height: dimensions.paddingXXLarge),
-
-                  // Payment method dropdown (user's payment methods)
-                  PaymentMethodDropdown(
-                    methods: methodsProvider.methods,
-                    initialValue: methodsProvider.selectedMethod,
-                    onChanged: (method) {
-                      methodsProvider.selectMethod(method);
-                    },
-                  ),
-                  SizedBox(height: dimensions.paddingXLarge),
-
-                  // Recipient section (only show if we have a recipient)
-                  if (recipient != null) ...[
-                    RecipientHeader(recipient: recipient),
-                    SizedBox(height: dimensions.paddingMedium),
-                    
-                    // Payment type selector (recipient's payment methods)
-                    if (_availableTypes.isNotEmpty)
-                      PaymentTypeSelector(
-                        availableTypes: _availableTypes,
-                        selectedType: _selectedType,
-                        onSelected: (type) => setState(() => _selectedType = type),
-                      ),
-                    SizedBox(height: dimensions.paddingMedium),
-                  ],
-
-                  // Payment details section
-                  PaymentDetailsSection(
-                    isFormVisible: recipient == null || _isFormVisible,
-                    onToggle: recipient != null 
-                        ? () => setState(() => _isFormVisible = !_isFormVisible)
-                        : null, // No toggle when creating new payment
-                    selectedType: _selectedType,
-                    data: _availableTypes[_selectedType],
-                    isEditable: recipient == null,
-                  ),
-
-                  const PaymentFormWidget(),
-
-                  SizedBox(height: dimensions.paddingXXXLarge),
-
-                  Center(
-                    child: SizedBox(
-                      width: dimensions.buttonWidth,
-                      height: dimensions.buttonHeight,
-                      child: InkWell(
-                        borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
-                        onTap: () =>
-                          // TODO: Handle Payment logic
-                          AmplitudeService.pageOpened(PayoutDestination.payment), //TODO: replace with payment event
-                        child: Container(
-                          decoration: BoxDecoration(
-                            color: theme.colorScheme.primary,
-                            borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
-                          ),
-                          child: Center(
-                            child: Text(
-                              AppLocalizations.of(context)!.send,
-                              style: theme.textTheme.bodyLarge?.copyWith(
-                                color: theme.colorScheme.onSecondary,
-                                fontWeight: FontWeight.w600,
-                              ),
-                            ),
-                          ),
-                        ),
-                      ),
-                    ),
-                  ),
-                  SizedBox(height: dimensions.paddingLarge),
-                ],
-              ),
-            ),
-          ),
-        ),
+    return ChangeNotifierProvider.value(
+      value: _flowProvider,
+      child: PaymentPageBody(
+        onBack: widget.onBack,
+        searchController: _searchController,
+        searchFocusNode: _searchFocusNode,
+        onSearchChanged: _handleSearchChanged,
+        onRecipientSelected: _handleRecipientSelected,
+        onRecipientCleared: _handleRecipientCleared,
+        onSend: _handleSendPayment,
      ),
    );
  }
-}
+}
--- a/frontend/pweb/lib/pages/payment_methods/payment_details.dart
+++ b/frontend/pweb/lib/pages/payment_methods/payment_details.dart
@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+
+
+class PaymentDetailsSection extends StatelessWidget {
+  final bool isFormVisible;
+  final VoidCallback? onToggle;
+  final PaymentType selectedType;
+  final Object? data;
+  final bool isEditable;
+
+  const PaymentDetailsSection({
+    super.key,
+    required this.isFormVisible,
+    this.onToggle,
+    required this.selectedType,
+    required this.data,
+    required this.isEditable,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+
+    return PaymentDetailsSection(
+      isFormVisible: isFormVisible,
+      onToggle: onToggle,
+      selectedType: selectedType,
+      data: data,
+      isEditable: isEditable,
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/send_button.dart
+++ b/frontend/pweb/lib/pages/payment_methods/send_button.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/utils/dimensions.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class SendButton extends StatelessWidget {
+  final VoidCallback onPressed;
+
+  const SendButton({super.key, required this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final dimensions = AppDimensions();
+
+    return Center(
+      child: SizedBox(
+        width: dimensions.buttonWidth,
+        height: dimensions.buttonHeight,
+        child: InkWell(
+          borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
+          onTap: onPressed,
+          child: Container(
+            decoration: BoxDecoration(
+              color: theme.colorScheme.primary,
+              borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
+            ),
+            child: Center(
+              child: Text(
+                AppLocalizations.of(context)!.send,
+                style: theme.textTheme.bodyLarge?.copyWith(
+                  color: theme.colorScheme.onSecondary,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/widgets/payment_info_section.dart
+++ b/frontend/pweb/lib/pages/payment_methods/widgets/payment_info_section.dart
@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/payment_methods/form.dart';
+import 'package:pweb/pages/payment_methods/widgets/section_title.dart';
+import 'package:pweb/providers/page_selector.dart';
+import 'package:pweb/providers/payment_flow_provider.dart';
+import 'package:pweb/utils/dimensions.dart';
+import 'package:pweb/utils/payment/selector_type.dart';
+
+
+class PaymentInfoSection extends StatelessWidget {
+  final AppDimensions dimensions;
+  final PageSelectorProvider pageSelector;
+  final PaymentFlowProvider flowProvider;
+  final Recipient? recipient;
+
+  const PaymentInfoSection({
+    super.key,
+    required this.dimensions,
+    required this.pageSelector,
+    required this.flowProvider,
+    required this.recipient,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final hasRecipient = recipient != null;
+    final availableTypes = hasRecipient
+        ? pageSelector.getAvailablePaymentTypes()
+        : {for (final type in PaymentType.values) type: type};
+
+    if (hasRecipient && availableTypes.isEmpty) {
+      return const Text('This recipient has no available payment details.');
+    }
+
+    final selectedType = flowProvider.selectedType;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const SectionTitle('Payment info'),
+        SizedBox(height: dimensions.paddingSmall),
+        PaymentTypeSelector(
+          availableTypes: availableTypes,
+          selectedType: selectedType,
+          onSelected: (type) => flowProvider.selectType(
+            type,
+            resetManualData: !hasRecipient,
+          ),
+        ),
+        SizedBox(height: dimensions.paddingMedium),
+        PaymentMethodForm(
+          selectedType: selectedType,
+          onChanged: (data) {
+            if (!hasRecipient) {
+              flowProvider.setManualPaymentData(data);
+            }
+          },
+          initialData: hasRecipient ? availableTypes[selectedType] : flowProvider.manualPaymentData,
+          isEditable: !hasRecipient,
+        ),
+      ],
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/widgets/payment_page_body.dart
+++ b/frontend/pweb/lib/pages/payment_methods/widgets/payment_page_body.dart
@@ -0,0 +1,144 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/payment_methods/header.dart';
+import 'package:pweb/pages/payment_methods/method_selector.dart';
+import 'package:pweb/pages/payment_methods/send_button.dart';
+import 'package:pweb/pages/dashboard/payouts/payment_form.dart';
+import 'package:pweb/pages/payment_methods/widgets/payment_info_section.dart';
+import 'package:pweb/pages/payment_methods/widgets/recipient_section.dart';
+import 'package:pweb/pages/payment_methods/widgets/section_title.dart';
+import 'package:pweb/providers/page_selector.dart';
+import 'package:pweb/providers/payment_flow_provider.dart';
+import 'package:pweb/providers/payment_methods.dart';
+import 'package:pweb/providers/recipient.dart';
+import 'package:pweb/utils/dimensions.dart';
+
+
+class PaymentPageBody extends StatelessWidget {
+  final ValueChanged<Recipient?>? onBack;
+  final TextEditingController searchController;
+  final FocusNode searchFocusNode;
+  final ValueChanged<String> onSearchChanged;
+  final ValueChanged<Recipient> onRecipientSelected;
+  final VoidCallback onRecipientCleared;
+  final VoidCallback onSend;
+
+  const PaymentPageBody({
+    super.key,
+    required this.onBack,
+    required this.searchController,
+    required this.searchFocusNode,
+    required this.onSearchChanged,
+    required this.onRecipientSelected,
+    required this.onRecipientCleared,
+    required this.onSend,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final dimensions = AppDimensions();
+    final pageSelector = context.watch<PageSelectorProvider>();
+    final methodsProvider = context.watch<PaymentMethodsProvider>();
+    final recipientProvider = context.watch<RecipientProvider>();
+    final flowProvider = context.watch<PaymentFlowProvider>();
+    final recipient = pageSelector.selectedRecipient;
+
+    if (methodsProvider.isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (methodsProvider.error != null) {
+      return Center(child: Text('Error: ${methodsProvider.error}'));
+    }
+
+    return Align(
+      alignment: Alignment.topCenter,
+      child: ConstrainedBox(
+        constraints: BoxConstraints(maxWidth: dimensions.maxContentWidth),
+        child: Material(
+          elevation: dimensions.elevationSmall,
+          borderRadius: BorderRadius.circular(dimensions.borderRadiusMedium),
+          color: Theme.of(context).colorScheme.onSecondary,
+          child: Padding(
+            padding: EdgeInsets.all(dimensions.paddingLarge),
+            child: SingleChildScrollView(
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  PaymentBackButton(onBack: onBack, pageSelector: pageSelector),
+                  SizedBox(height: dimensions.paddingSmall),
+                  PaymentHeader(),
+                  SizedBox(height: dimensions.paddingXXLarge),
+
+                  const SectionTitle('Source of funds'),
+                  SizedBox(height: dimensions.paddingSmall),
+                  PaymentMethodSelector(
+                    methodsProvider: methodsProvider,
+                    onMethodChanged: methodsProvider.selectMethod,
+                  ),
+                  SizedBox(height: dimensions.paddingXLarge),
+
+                  RecipientSection(
+                    recipient: recipient,
+                    dimensions: dimensions,
+                    recipientProvider: recipientProvider,
+                    searchController: searchController,
+                    searchFocusNode: searchFocusNode,
+                    onSearchChanged: onSearchChanged,
+                    onRecipientSelected: onRecipientSelected,
+                    onRecipientCleared: onRecipientCleared,
+                  ),
+
+                  SizedBox(height: dimensions.paddingXLarge),
+
+                  PaymentInfoSection(
+                    dimensions: dimensions,
+                    pageSelector: pageSelector,
+                    flowProvider: flowProvider,
+                    recipient: recipient,
+                  ),
+
+                  SizedBox(height: dimensions.paddingLarge),
+                  const PaymentFormWidget(),
+
+                  SizedBox(height: dimensions.paddingXXXLarge),
+                  SendButton(onPressed: onSend),
+                  SizedBox(height: dimensions.paddingLarge),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class PaymentBackButton extends StatelessWidget {
+  final ValueChanged<Recipient?>? onBack;
+  final PageSelectorProvider pageSelector;
+
+  const PaymentBackButton({
+    super.key,
+    required this.onBack,
+    required this.pageSelector,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+      alignment: Alignment.topLeft,
+      child: IconButton(
+        icon: const Icon(Icons.arrow_back),
+        onPressed: () {
+          onBack?.call(pageSelector.selectedRecipient);
+          pageSelector.goBackFromPayment();
+        },
+      ),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/widgets/recipient_section.dart
+++ b/frontend/pweb/lib/pages/payment_methods/widgets/recipient_section.dart
@@ -0,0 +1,187 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/address_book/page/search.dart';
+import 'package:pweb/pages/payment_methods/widgets/section_title.dart';
+import 'package:pweb/providers/recipient.dart';
+import 'package:pweb/utils/dimensions.dart';
+
+
+class RecipientSection extends StatelessWidget {
+  final Recipient? recipient;
+  final AppDimensions dimensions;
+  final RecipientProvider recipientProvider;
+  final TextEditingController searchController;
+  final FocusNode searchFocusNode;
+  final ValueChanged<String> onSearchChanged;
+  final ValueChanged<Recipient> onRecipientSelected;
+  final VoidCallback onRecipientCleared;
+
+  const RecipientSection({
+    super.key,
+    required this.recipient,
+    required this.dimensions,
+    required this.recipientProvider,
+    required this.searchController,
+    required this.searchFocusNode,
+    required this.onSearchChanged,
+    required this.onRecipientSelected,
+    required this.onRecipientCleared,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (recipient != null) {
+      return SelectedRecipientCard(
+        dimensions: dimensions,
+        recipient: recipient!,
+        onClear: onRecipientCleared,
+      );
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const SectionTitle('Recipient'),
+        SizedBox(height: dimensions.paddingSmall),
+        RecipientSearchField(
+          controller: searchController,
+          onChanged: onSearchChanged,
+          focusNode: searchFocusNode,
+        ),
+        if (recipientProvider.query.isNotEmpty) ...[
+          SizedBox(height: dimensions.paddingMedium),
+          RecipientSearchResults(
+            dimensions: dimensions,
+            recipientProvider: recipientProvider,
+            onRecipientSelected: onRecipientSelected,
+          ),
+        ],
+      ],
+    );
+  }
+}
+
+class SelectedRecipientCard extends StatelessWidget {
+  final AppDimensions dimensions;
+  final Recipient recipient;
+  final VoidCallback onClear;
+
+  const SelectedRecipientCard({
+    super.key,
+    required this.dimensions,
+    required this.recipient,
+    required this.onClear,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Container(
+      width: double.infinity,
+      padding: EdgeInsets.all(dimensions.paddingMedium),
+      decoration: BoxDecoration(
+        color: theme.colorScheme.surfaceVariant.withOpacity(0.4),
+        borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const SectionTitle('Recipient'),
+          SizedBox(height: dimensions.paddingSmall),
+          Row(
+            children: [
+              CircleAvatar(
+                child: Text(recipient.name.substring(0, 1).toUpperCase()),
+              ),
+              SizedBox(width: dimensions.paddingMedium),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(recipient.name, style: theme.textTheme.titleMedium),
+                    if (recipient.email.isNotEmpty)
+                      Text(
+                        recipient.email,
+                        style: theme.textTheme.bodyMedium?.copyWith(
+                          color: theme.colorScheme.onSurface.withOpacity(0.7),
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+              TextButton(
+                onPressed: onClear,
+                child: const Text('Choose another recipient'),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class RecipientSearchResults extends StatelessWidget {
+  final AppDimensions dimensions;
+  final RecipientProvider recipientProvider;
+  final ValueChanged<Recipient> onRecipientSelected;
+
+  const RecipientSearchResults({
+    super.key,
+    required this.dimensions,
+    required this.recipientProvider,
+    required this.onRecipientSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (recipientProvider.isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (recipientProvider.error != null) {
+      return Text(
+        recipientProvider.error!,
+        style: TextStyle(color: Theme.of(context).colorScheme.error),
+      );
+    }
+
+    if (recipientProvider.recipients.isEmpty) {
+      return const Text('No recipients yet.');
+    }
+
+    final results = recipientProvider.filteredRecipients;
+
+    if (results.isEmpty) {
+      return const Text('No recipients found for this query.');
+    }
+
+    return ConstrainedBox(
+      constraints: const BoxConstraints(maxHeight: 240),
+      child: ListView.separated(
+        shrinkWrap: true,
+        itemCount: results.length,
+        separatorBuilder: (_, __) => SizedBox(height: dimensions.paddingSmall),
+        itemBuilder: (context, index) {
+          final recipient = results[index];
+          return ListTile(
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
+            ),
+            tileColor: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.2),
+            leading: CircleAvatar(
+              child: Text(recipient.name.substring(0, 1).toUpperCase()),
+            ),
+            title: Text(recipient.name),
+            subtitle: Text(recipient.email),
+            trailing: const Icon(Icons.arrow_forward_ios_rounded, size: 16),
+            onTap: () => onRecipientSelected(recipient),
+          );
+        },
+      ),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/widgets/section_title.dart
+++ b/frontend/pweb/lib/pages/payment_methods/widgets/section_title.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+
+class SectionTitle extends StatelessWidget {
+  final String title;
+
+  const SectionTitle(this.title, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      title,
+      style: Theme.of(context).textTheme.titleMedium?.copyWith(
+            fontWeight: FontWeight.w600,
+          ),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_page/wallet/edit/buttons/send.dart
+++ b/frontend/pweb/lib/pages/payment_page/wallet/edit/buttons/send.dart
@@ -1,29 +0,0 @@
-import 'package:flutter/material.dart';
-
-import 'package:provider/provider.dart';
-
-import 'package:pweb/models/wallet.dart';
-import 'package:pweb/providers/wallets.dart';
-
-
-class SendPayoutButton extends StatelessWidget {
-
-  const SendPayoutButton({
-    super.key,
-  });
-
-
-  @override
-  Widget build(BuildContext context) {
-    return ElevatedButton(
-      style: ElevatedButton.styleFrom(
-        shadowColor: null,
-        elevation: 0,
-      ),
-      onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
-        const SnackBar(content: Text('Add functionality')),
-      ),
-      child: Text('Send Payout'),
-    );
-  }
-}
--- a/frontend/pweb/lib/pages/payment_page/wallet/edit/fields.dart
+++ b/frontend/pweb/lib/pages/payment_page/wallet/edit/fields.dart
@@ -1,49 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-
-import 'package:provider/provider.dart';
-
-import 'package:pweb/pages/dashboard/buttons/balance/amount.dart';
-import 'package:pweb/providers/wallets.dart';
-
-
-class WalletEditFields extends StatelessWidget {
-
-  const WalletEditFields({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-     final wallet = context.watch<WalletsProvider>().wallets?.first;
-
-    if (wallet == null) {
-      return const SizedBox.shrink();
-    }
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Row(
-          children: [
-           BalanceAmount(
-              wallet: wallet,
-              onToggleVisibility: () {
-                context.read<WalletsProvider>().toggleVisibility(wallet.id);
-              },
-            ),
-          ],
-        ),
-        const SizedBox(height: 8),
-        Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          children: [
-            Text(wallet.walletUserID, style: Theme.of(context).textTheme.bodyLarge),
-            IconButton(
-              icon: Icon(Icons.copy), 
-              iconSize: 18,
-              onPressed: () => Clipboard.setData(ClipboardData(text: wallet.walletUserID)),
-            ),
-          ],
-        ),
-      ],
-    );
-  }
-}
--- a/frontend/pweb/lib/pages/payment_page/wallet/edit/header.dart
+++ b/frontend/pweb/lib/pages/payment_page/wallet/edit/header.dart
@@ -1,122 +0,0 @@
-import 'package:flutter/material.dart';
-
-import 'package:provider/provider.dart';
-
-import 'package:pweb/utils/currency.dart';
-import 'package:pweb/utils/dimensions.dart';
-import 'package:pweb/providers/wallets.dart';
-
-
-// class WalletEditHeader extends StatefulWidget {
-//   const WalletEditHeader({super.key});
-
-//   @override
-//   State<WalletEditHeader> createState() => _WalletEditHeaderState();
-// }
-
-// class _WalletEditHeaderState extends State<WalletEditHeader> {
-//   bool _isEditing = false;
-//   late TextEditingController _controller;
-
-//   @override
-//   void initState() {
-//     super.initState();
-//     _controller = TextEditingController();
-//   }
-
-//   @override
-//   void dispose() {
-//     _controller.dispose();
-//     super.dispose();
-//   }
-
-//   @override
-//   Widget build(BuildContext context) {
-//     final provider = context.watch<WalletsProvider>();
-//     final currentWallet = provider.getWalletById(provider.wallets!.id);
-
-
-//     if (wallet == null) {
-//       return const SizedBox.shrink();
-//     }
-
-//     final theme = Theme.of(context);
-//     final dimensions = AppDimensions();
-
-//     if (!_isEditing) {
-//       _controller.text = wallet.name;
-//     }
-
-//     return Row(
-//       spacing: 8,
-//       mainAxisAlignment: MainAxisAlignment.spaceBetween,
-//       children: [
-//         Icon(
-//           iconForCurrencyType(wallet.currency),
-//           color: theme.colorScheme.primary,
-//           size: dimensions.iconSizeLarge,
-//         ),
-
-//         Expanded(
-//           child: !_isEditing
-//               ? Row(
-//                   children: [
-//                     Expanded(
-//                       child: Text(
-//                         wallet.name,
-//                         style: theme.textTheme.headlineMedium!.copyWith(
-//                           fontWeight: FontWeight.bold,),
-//                       ),
-//                     ),
-//                     IconButton(
-//                       icon: const Icon(Icons.edit),
-//                       onPressed: () {
-//                         setState(() {
-//                           _isEditing = true;
-//                         });
-//                       },
-//                     ),
-//                   ],
-//                 )
-//               : Row(
-//                   children: [
-//                     Expanded(
-//                       child: TextFormField(
-//                         controller: _controller,
-//                         decoration: const InputDecoration(
-//                           border: OutlineInputBorder(),
-//                           isDense: true,
-//                           hintText: 'Wallet name',
-//                         ),
-//                       ),
-//                     ),
-//                     IconButton(
-//                       icon: const Icon(Icons.check),
-//                       color: theme.colorScheme.primary,
-//                       onPressed: () async {
-//                         provider.updateName(wallet.id, _controller.text);
-//                         await provider.updateWallet(wallet.copyWith(name: _controller.text));
-//                         ScaffoldMessenger.of(context).showSnackBar(
-//                           const SnackBar(content: Text('Wallet name saved')),
-//                         );
-//                         setState(() {
-//                           _isEditing = false;
-//                         });
-//                       },
-//                     ),
-//                     IconButton(
-//                       icon: const Icon(Icons.close),
-//                       onPressed: () {
-//                         _controller.text = wallet.name;
-//                         setState(() {
-//                           _isEditing = false;
-//                         });
-//                       },
-//                     ),
-//                   ],
-//                 ),
-//         ),
-//       ],
-//     );
-//   }
-// }
--- a/frontend/pweb/lib/pages/payment_page/wallet/edit/page.dart
+++ b/frontend/pweb/lib/pages/payment_page/wallet/edit/page.dart
@@ -1,55 +0,0 @@
-import 'package:flutter/material.dart';
-
-import 'package:pweb/models/wallet.dart';
-import 'package:pweb/pages/payment_page/wallet/edit/buttons/buttons.dart';
-import 'package:pweb/pages/payment_page/wallet/edit/fields.dart';
-import 'package:pweb/utils/dimensions.dart';
-
-
-class WalletEditPage extends StatelessWidget {
-  final Wallet wallet;
-  final VoidCallback onBack;
-
-  const WalletEditPage({super.key, required this.wallet, required this.onBack});
-
-  @override
-  Widget build(BuildContext context) {
-    final dimensions = AppDimensions();
-
-    return Align(
-      alignment: Alignment.topCenter,
-      child: ConstrainedBox(
-        constraints: BoxConstraints(maxWidth: dimensions.maxContentWidth),
-        child: Material(
-          elevation: dimensions.elevationSmall,
-          color: Theme.of(context).colorScheme.onSecondary,
-          borderRadius: BorderRadius.circular(dimensions.borderRadiusMedium),
-          child: Padding(
-            padding: EdgeInsets.all(dimensions.paddingLarge),
-            child: SingleChildScrollView(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  IconButton(
-                    icon: const Icon(Icons.arrow_back),
-                    onPressed: onBack,
-                  ),
-
-                  // WalletEditHeader(),
-
-                  WalletEditFields(),
-
-                  const SizedBox(height: 24),
-
-                  ButtonsWalletWidget(),
-
-                  const SizedBox(height: 24),
-                ],
-              ),
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
--- a/frontend/pweb/lib/pages/payment_page/methods/advanced.dart
+++ b/frontend/pweb/lib/pages/payment_page/methods/advanced.dart
--- a/frontend/pweb/lib/pages/payment_page/methods/controller.dart
+++ b/frontend/pweb/lib/pages/payment_page/methods/controller.dart
--- a/frontend/pweb/lib/pages/payment_page/methods/header.dart
+++ b/frontend/pweb/lib/pages/payment_page/methods/header.dart
--- a/frontend/pweb/lib/pages/payment_page/methods/list.dart
+++ b/frontend/pweb/lib/pages/payment_page/methods/list.dart
@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';

 import 'package:pweb/pages/payment_methods/title.dart';
-import 'package:pweb/pages/payment_page/methods/controller.dart';
+import 'package:pweb/pages/payout_page/methods/controller.dart';
 import 'package:pweb/providers/payment_methods.dart';


--- a/frontend/pweb/lib/pages/payment_page/methods/widget.dart
+++ b/frontend/pweb/lib/pages/payment_page/methods/widget.dart
@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';

-import 'package:pweb/pages/payment_page/methods/advanced.dart';
-import 'package:pweb/pages/payment_page/methods/controller.dart';
-import 'package:pweb/pages/payment_page/methods/header.dart';
-import 'package:pweb/pages/payment_page/methods/list.dart';
+import 'package:pweb/pages/payout_page/methods/advanced.dart';
+import 'package:pweb/pages/payout_page/methods/controller.dart';
+import 'package:pweb/pages/payout_page/methods/header.dart';
+import 'package:pweb/pages/payout_page/methods/list.dart';


 class MethodsWidget extends StatefulWidget {
--- a/frontend/pweb/lib/pages/payment_page/page.dart
+++ b/frontend/pweb/lib/pages/payment_page/page.dart
@@ -3,8 +3,8 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:pweb/models/wallet.dart';

-import 'package:pweb/pages/payment_page/methods/widget.dart';
-import 'package:pweb/pages/payment_page/wallet/wigets.dart';
+import 'package:pweb/pages/payout_page/methods/widget.dart';
+import 'package:pweb/pages/payout_page/wallet/wigets.dart';
 import 'package:pweb/providers/payment_methods.dart';


--- a/frontend/pweb/lib/pages/payment_page/wallet/card.dart
+++ b/frontend/pweb/lib/pages/payment_page/wallet/card.dart
--- a/frontend/pweb/lib/pages/payment_page/wallet/edit/buttons/buttons.dart
+++ b/frontend/pweb/lib/pages/payment_page/wallet/edit/buttons/buttons.dart
@@ -1,9 +1,10 @@
 import 'package:flutter/material.dart';
+
 import 'package:provider/provider.dart';
-import 'package:pweb/pages/payment_page/wallet/edit/buttons/send.dart';
-import 'package:pweb/pages/payment_page/wallet/edit/buttons/top_up.dart';
+
+import 'package:pweb/pages/payout_page/wallet/edit/buttons/send.dart';
+import 'package:pweb/pages/payout_page/wallet/edit/buttons/top_up.dart';
 import 'package:pweb/providers/wallets.dart';
-import 'package:pweb/utils/dimensions.dart';


 class ButtonsWalletWidget extends StatelessWidget {
@@ -16,21 +17,7 @@ class ButtonsWalletWidget extends StatelessWidget {

    if (wallet == null) return const SizedBox.shrink();

-    final dimensions = AppDimensions();
-
-    return Container(
-      decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surfaceBright,
-        borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
-        boxShadow: [
-          BoxShadow(
-            color: Theme.of(context).colorScheme.primary.withAlpha(50),
-            blurRadius: 4,
-            offset: const Offset(0, 2),
-          ),
-        ],
-      ),
-      child: Row(
+    return Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Expanded(
@@ -45,7 +32,6 @@ class ButtonsWalletWidget extends StatelessWidget {
            child: TopUpButton(),
          ),
        ],
-      ),
    );
  }
 }
--- a/frontend/pweb/lib/pages/payment_page/wallet/edit/buttons/save.dart
+++ b/frontend/pweb/lib/pages/payment_page/wallet/edit/buttons/save.dart
--- a/frontend/pweb/lib/pages/payout_page/wallet/edit/buttons/send.dart
+++ b/frontend/pweb/lib/pages/payout_page/wallet/edit/buttons/send.dart
@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:pweb/providers/page_selector.dart';
+import 'package:pweb/providers/wallets.dart';
+
+
+class SendPayoutButton extends StatelessWidget {
+  const SendPayoutButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      style: ElevatedButton.styleFrom(
+        shadowColor: null,
+        elevation: 0,
+      ),
+      onPressed: () {
+        final pageSelectorProvider = context.read<PageSelectorProvider>();
+        final walletsProvider = context.read<WalletsProvider>();
+        final wallet = walletsProvider.selectedWallet;
+        
+        if (wallet != null) {
+          pageSelectorProvider.startPaymentFromWallet(wallet);
+        }
+      },
+      child: Text('Send Payout'),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_page/wallet/edit/buttons/top_up.dart
+++ b/frontend/pweb/lib/pages/payment_page/wallet/edit/buttons/top_up.dart
--- a/frontend/pweb/lib/pages/payout_page/wallet/edit/fields.dart
+++ b/frontend/pweb/lib/pages/payout_page/wallet/edit/fields.dart
@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pweb/pages/dashboard/buttons/balance/amount.dart';
+import 'package:pweb/providers/wallets.dart';
+
+
+class WalletEditFields extends StatelessWidget {
+  const WalletEditFields({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<WalletsProvider>(
+      builder: (context, provider, child) {
+        final wallet = provider.selectedWallet;
+        
+        if (wallet == null) {
+          return SizedBox.shrink();
+        }
+
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                BalanceAmount(
+                  wallet: wallet,
+                  onToggleVisibility: () {
+                    context.read<WalletsProvider>().toggleVisibility(wallet.id);
+                  },
+                ),
+              ],
+            ),
+            const SizedBox(height: 8),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(wallet.walletUserID, style: Theme.of(context).textTheme.bodyLarge),
+                IconButton(
+                  icon: Icon(Icons.copy), 
+                  iconSize: 18,
+                  onPressed: () => Clipboard.setData(ClipboardData(text: wallet.walletUserID)),
+                ),
+              ],
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payout_page/wallet/edit/header.dart
+++ b/frontend/pweb/lib/pages/payout_page/wallet/edit/header.dart
@@ -0,0 +1,113 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pweb/providers/wallets.dart';
+
+
+class WalletEditHeader extends StatefulWidget {
+  const WalletEditHeader({super.key});
+
+  @override
+  State<WalletEditHeader> createState() => _WalletEditHeaderState();
+}
+
+class _WalletEditHeaderState extends State<WalletEditHeader> {
+  bool _isEditing = false;
+  late TextEditingController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = TextEditingController();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = context.watch<WalletsProvider>();
+    final wallet = provider.selectedWallet;
+    
+    if (wallet == null) {
+      return SizedBox.shrink();
+    }
+
+    final theme = Theme.of(context);
+
+    if (!_isEditing) {
+      _controller.text = wallet.name;
+    }
+
+    return Row(
+      spacing: 8,
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Expanded(
+          child: !_isEditing
+              ? Row(
+                  children: [
+                    Expanded(
+                      child: Text(
+                        wallet.name,
+                        style: theme.textTheme.headlineMedium!.copyWith(
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ),
+                    IconButton(
+                      icon: const Icon(Icons.edit),
+                      onPressed: () {
+                        setState(() {
+                          _isEditing = true;
+                        });
+                      },
+                    ),
+                  ],
+                )
+              : Row(
+                  children: [
+                    Expanded(
+                      child: TextFormField(
+                        controller: _controller,
+                        decoration: const InputDecoration(
+                          border: OutlineInputBorder(),
+                          isDense: true,
+                          hintText: 'Wallet name',
+                        ),
+                      ),
+                    ),
+                    IconButton(
+                      icon: const Icon(Icons.check),
+                      color: theme.colorScheme.primary,
+                      onPressed: () async {
+                        provider.updateName(wallet.id, _controller.text);
+                        await provider.updateWallet(wallet.copyWith(name: _controller.text));
+                        ScaffoldMessenger.of(context).showSnackBar(
+                          const SnackBar(content: Text('Wallet name saved')),
+                        );
+                        setState(() {
+                          _isEditing = false;
+                        });
+                      },
+                    ),
+                    IconButton(
+                      icon: const Icon(Icons.close),
+                      onPressed: () {
+                        _controller.text = wallet.name;
+                        setState(() {
+                          _isEditing = false;
+                        });
+                      },
+                    ),
+                  ],
+                ),
+        ),
+      ],
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payout_page/wallet/edit/page.dart
+++ b/frontend/pweb/lib/pages/payout_page/wallet/edit/page.dart
@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pweb/pages/payout_page/wallet/edit/buttons/buttons.dart';
+import 'package:pweb/pages/payout_page/wallet/edit/fields.dart';
+import 'package:pweb/pages/payout_page/wallet/edit/header.dart';
+import 'package:pweb/pages/payout_page/wallet/history/history.dart';
+import 'package:pweb/providers/wallets.dart';
+import 'package:pweb/utils/dimensions.dart';
+
+
+class WalletEditPage extends StatelessWidget {
+  final VoidCallback onBack;
+
+  const WalletEditPage({super.key, required this.onBack});
+
+  @override
+  Widget build(BuildContext context) {
+    final dimensions = AppDimensions();
+
+    return Consumer<WalletsProvider>(
+      builder: (context, provider, child) {
+        final wallet = provider.selectedWallet;
+        
+        if (wallet == null) {
+          return Center(child: Text('Кошелёк не выбран'));
+        }
+
+        return Align(
+          alignment: Alignment.topCenter,
+          child: Column(
+            children: [
+              ConstrainedBox(
+                constraints: BoxConstraints(maxWidth: dimensions.maxContentWidth),
+                child: Material(
+                  elevation: dimensions.elevationSmall,
+                  color: Theme.of(context).colorScheme.onSecondary,
+                  borderRadius: BorderRadius.circular(dimensions.borderRadiusMedium),
+                  child: Padding(
+                    padding: EdgeInsets.all(dimensions.paddingLarge),
+                    child: SingleChildScrollView(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          IconButton(
+                            icon: const Icon(Icons.arrow_back),
+                            onPressed: onBack,
+                          ),
+                          WalletEditHeader(),
+                          WalletEditFields(),
+                          const SizedBox(height: 24),
+                          ButtonsWalletWidget(),
+                          const SizedBox(height: 24),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+              const SizedBox(height: 24),
+              Expanded(
+                child: SingleChildScrollView(
+                  child: WalletHistory(wallet: wallet),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payout_page/wallet/history/chip.dart
+++ b/frontend/pweb/lib/pages/payout_page/wallet/history/chip.dart
@@ -0,0 +1,48 @@
+
+import 'package:flutter/material.dart';
+
+import 'package:pweb/models/wallet_transaction.dart';
+
+
+class TypeChip extends StatelessWidget {
+  final WalletTransactionType type;
+
+  const TypeChip({super.key, required this.type});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final isTopUp = type == WalletTransactionType.topUp;
+    final bg = isTopUp
+        ? theme.colorScheme.secondaryContainer
+        : theme.colorScheme.errorContainer;
+
+    final fg = bg.computeLuminance() > 0.5 ? Colors.black : Colors.white;
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
+      decoration: BoxDecoration(
+        color: bg,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(
+            isTopUp ? Icons.arrow_downward_rounded : Icons.arrow_upward_rounded,
+            size: 16,
+            color: fg,
+          ),
+          const SizedBox(width: 6),
+          Text(
+            type.label(context),
+            style: TextStyle(
+              color: fg,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payout_page/wallet/history/filters.dart
+++ b/frontend/pweb/lib/pages/payout_page/wallet/history/filters.dart
@@ -0,0 +1,94 @@
+
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/status.dart';
+import 'package:pshared/utils/localization.dart';
+
+import 'package:pweb/models/wallet_transaction.dart';
+import 'package:pweb/providers/wallet_transactions.dart';
+
+
+class WalletHistoryFilters extends StatelessWidget {
+  final WalletTransactionsProvider provider;
+  final VoidCallback onPickRange;
+
+  const WalletHistoryFilters({
+    super.key,
+    required this.provider,
+    required this.onPickRange,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Card(
+      elevation: 2,
+      color: theme.colorScheme.onSecondary,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  'Wallet activity',
+                  style: theme.textTheme.titleMedium,
+                ),
+                if (provider.hasFilters)
+                  TextButton(
+                    onPressed: provider.resetFilters,
+                    child: const Text('Reset'),
+                  ),
+              ],
+            ),
+            const SizedBox(height: 12),
+            Wrap(
+              spacing: 8,
+              runSpacing: 8,
+              children: WalletTransactionType.values.map((type) {
+                final isSelected = provider.selectedTypes.contains(type);
+                return FilterChip(
+                  label: Text(type.label(context)),
+                  selected: isSelected,
+                  onSelected: (_) => provider.toggleType(type),
+                  pressElevation: 0,
+                );
+              }).toList(),
+            ),
+            const SizedBox(height: 8),
+            Wrap(
+              spacing: 8,
+              runSpacing: 8,
+              children: OperationStatus.values.map((status) {
+                final isSelected = provider.selectedStatuses.contains(status);
+                return FilterChip(
+                  label: Text(status.localized(context)),
+                  selected: isSelected,
+                  onSelected: (_) => provider.toggleStatus(status),
+                  pressElevation: 0,
+                );
+              }).toList(),
+            ),
+            const SizedBox(height: 12),
+            Align(
+              alignment: Alignment.centerRight,
+              child: OutlinedButton.icon(
+                onPressed: onPickRange,
+                icon: const Icon(Icons.date_range_outlined),
+                label: Text(
+                  provider.dateRange == null
+                      ? 'Select period'
+                      : '${dateToLocalFormat(context, provider.dateRange!.start)} – ${dateToLocalFormat(context, provider.dateRange!.end)}',
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payout_page/wallet/history/history.dart
+++ b/frontend/pweb/lib/pages/payout_page/wallet/history/history.dart
@@ -0,0 +1,116 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pweb/models/wallet.dart';
+import 'package:pweb/pages/payout_page/wallet/history/filters.dart';
+import 'package:pweb/pages/payout_page/wallet/history/table.dart';
+import 'package:pweb/providers/wallet_transactions.dart';
+
+
+class WalletHistory extends StatefulWidget {
+  final Wallet wallet;
+
+  const WalletHistory({super.key, required this.wallet});
+
+  @override
+  State<WalletHistory> createState() => _WalletHistoryState();
+}
+
+class _WalletHistoryState extends State<WalletHistory> {
+  @override
+  void initState() {
+    super.initState();
+    _load();
+  }
+
+  @override
+  void didUpdateWidget(covariant WalletHistory oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.wallet.id != widget.wallet.id) {
+      _load();
+    }
+  }
+
+  void _load() {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      context
+          .read<WalletTransactionsProvider>()
+          .load(walletId: widget.wallet.id);
+    });
+  }
+
+  Future<void> _pickRange() async {
+    final provider = context.read<WalletTransactionsProvider>();
+    final now = DateTime.now();
+    final initial = provider.dateRange ??
+        DateTimeRange(
+          start: now.subtract(const Duration(days: 30)),
+          end: now,
+        );
+
+    final picked = await showDateRangePicker(
+      context: context,
+      firstDate: now.subtract(const Duration(days: 365)),
+      lastDate: now.add(const Duration(days: 1)),
+      initialDateRange: initial,
+    );
+
+    if (picked != null) {
+      provider.setDateRange(picked);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Consumer<WalletTransactionsProvider>(
+      builder: (context, provider, child) {
+        if (provider.isLoading) {
+          return const Padding(
+            padding: EdgeInsets.all(16.0),
+            child: Center(child: CircularProgressIndicator()),
+          );
+        }
+
+        if (provider.error != null) {
+          return Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Failed to load history',
+                  style: theme.textTheme.titleMedium!
+                      .copyWith(color: theme.colorScheme.error),
+                ),
+                const SizedBox(height: 8),
+                Text(provider.error!),
+                const SizedBox(height: 8),
+                OutlinedButton(
+                  onPressed: _load,
+                  child: const Text('Retry'),
+                ),
+              ],
+            ),
+          );
+        }
+
+        final transactions = provider.filteredTransactions;
+
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            WalletHistoryFilters(
+              provider: provider,
+              onPickRange: _pickRange,
+            ),
+            const SizedBox(height: 12),
+            WalletTransactionsTable(transactions: transactions),
+          ],
+        );
+      },
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payout_page/wallet/history/table.dart
+++ b/frontend/pweb/lib/pages/payout_page/wallet/history/table.dart
@@ -0,0 +1,88 @@
+
+import 'package:flutter/material.dart';
+
+import 'package:pweb/models/wallet_transaction.dart';
+import 'package:pweb/pages/payout_page/wallet/history/chip.dart';
+import 'package:pweb/pages/report/table/badge.dart';
+import 'package:pweb/utils/currency.dart';
+
+
+class WalletTransactionsTable extends StatelessWidget {
+  final List<WalletTransaction> transactions;
+
+  const WalletTransactionsTable({super.key, required this.transactions});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    if (transactions.isEmpty) {
+      return Card(
+        color: theme.colorScheme.onSecondary,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+        child: const Padding(
+          padding: EdgeInsets.all(16),
+          child: Text('No history yet'),
+        ),
+      );
+    }
+
+    return Card(
+      color: theme.colorScheme.onSecondary,
+      elevation: 2,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      child: Padding(
+        padding: const EdgeInsets.all(12),
+        child: SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          child: DataTable(
+            columnSpacing: 18,
+            headingTextStyle: const TextStyle(fontWeight: FontWeight.w600),
+            columns: const [
+              DataColumn(label: Text('Status')),
+              DataColumn(label: Text('Type')),
+              DataColumn(label: Text('Amount')),
+              DataColumn(label: Text('Balance')),
+              DataColumn(label: Text('Counterparty')),
+              DataColumn(label: Text('Date')),
+              DataColumn(label: Text('Comment')),
+            ],
+            rows: List.generate(
+              transactions.length,
+              (index) {
+                final tx = transactions[index];
+                final color = WidgetStateProperty.resolveWith<Color?>(
+                  (states) => index.isEven
+                      ? theme.colorScheme.surfaceContainerHighest
+                      : null,
+                );
+
+                return DataRow.byIndex(
+                  index: index,
+                  color: color,
+                  cells: [
+                    DataCell(OperationStatusBadge(status: tx.status)),
+                    DataCell(TypeChip(type: tx.type)),
+                    DataCell(Text(
+                        '${tx.type.sign}${tx.amount.toStringAsFixed(2)} ${currencyCodeToSymbol(tx.currency)}')),
+                    DataCell(Text(
+                      tx.balanceAfter == null
+                          ? '-'
+                          : '${tx.balanceAfter!.toStringAsFixed(2)} ${currencyCodeToSymbol(tx.currency)}',
+                    )),
+                    DataCell(Text(tx.counterparty ?? '-')),
+                    DataCell(Text(
+                      '${TimeOfDay.fromDateTime(tx.date).format(context)}\n'
+                      '${tx.date.toLocal().toIso8601String().split("T").first}',
+                    )),
+                    DataCell(Text(tx.description)),
+                  ],
+                );
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_page/wallet/wigets.dart
+++ b/frontend/pweb/lib/pages/payment_page/wallet/wigets.dart
@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:pweb/models/wallet.dart';

-import 'package:pweb/pages/payment_page/wallet/card.dart';
+import 'package:pweb/pages/payout_page/wallet/card.dart';
 import 'package:pweb/providers/wallets.dart';


--- a/frontend/pweb/lib/pages/report/page.dart
+++ b/frontend/pweb/lib/pages/report/page.dart
@@ -1,13 +1,12 @@
-// operation_history_page.dart
 import 'package:flutter/material.dart';

-import 'package:pshared/models/payment/operation.dart';
-import 'package:pshared/models/payment/status.dart';
+import 'package:provider/provider.dart';

 import 'package:pweb/pages/report/charts/distribution.dart';
 import 'package:pweb/pages/report/charts/status.dart';
 import 'package:pweb/pages/report/table/filters.dart';
 import 'package:pweb/pages/report/table/widget.dart';
+import 'package:pweb/providers/operatioins.dart';


 class OperationHistoryPage extends StatefulWidget {
@@ -18,153 +17,95 @@ class OperationHistoryPage extends StatefulWidget {
 }

 class _OperationHistoryPageState extends State<OperationHistoryPage> {
-  // Mock data
-  final List<OperationItem> _allOps = [
-    OperationItem(
-      status: OperationStatus.error,
-      fileName: 'cards_payout_sample_june.csv',
-      amount: 10,
-      currency: 'EUR',
-      toAmount: 10,
-      toCurrency: 'EUR',
-      payId: '860163800',
-      cardNumber: null,
-      name: 'John Snow',
-      date: DateTime(2025, 7, 14, 19, 59, 2),
-      comment: 'EUR visa',
-    ),
-    OperationItem(
-      status: OperationStatus.processing,
-      fileName: 'cards_payout_sample_june.csv',
-      amount: 10,
-      currency: 'EUR',
-      toAmount: 10,
-      toCurrency: 'EUR',
-      payId: '860163700',
-      cardNumber: null,
-      name: 'Baltasar Gelt',
-      date: DateTime(2025, 7, 14, 19, 59, 2),
-      comment: 'EUR master',
-    ),
-    OperationItem(
-      status: OperationStatus.error,
-      fileName: 'cards_payout_sample_june.csv',
-      amount: 10,
-      currency: 'EUR',
-      toAmount: 10,
-      toCurrency: 'EUR',
-      payId: '40000000****0077',
-      cardNumber: '40000000****0077',
-      name: 'John Snow',
-      date: DateTime(2025, 7, 14, 19, 23, 22),
-      comment: 'EUR visa',
-    ),
-    OperationItem(
-      status: OperationStatus.success,
-      fileName: null,
-      amount: 10,
-      currency: 'EUR',
-      toAmount: 10,
-      toCurrency: 'EUR',
-      payId: '54133300****0019',
-      cardNumber: '54133300****0019',
-      name: 'Baltasar Gelt',
-      date: DateTime(2025, 7, 14, 19, 23, 21),
-      comment: 'EUR master',
-    ),
-    OperationItem(
-      status: OperationStatus.success,
-      fileName: null,
-      amount: 130,
-      currency: 'EUR',
-      toAmount: 130,
-      toCurrency: 'EUR',
-      payId: '54134300****0019',
-      cardNumber: '54153300****0019',
-      name: 'Ivan Brokov',
-      date: DateTime(2025, 7, 15, 19, 23, 21),
-      comment: 'EUR master 2',
-    ),
-  ];
-  DateTimeRange? _range;
-  final Set<String> _statuses = {};
-  late List<OperationItem> _filtered;
-
  @override
  void initState() {
    super.initState();
-    _filtered = List.from(_allOps);
-  }
-
-  void _applyFilter() {
-    setState(() {
-      _filtered = _allOps.where((op) {
-        final okStatus = _statuses.isEmpty || _statuses.contains(op.status.localized(context));
-        final okRange = _range == null ||
-            (op.date.isAfter(_range!.start.subtract(const Duration(seconds: 1))) &&
-                op.date.isBefore(_range!.end.add(const Duration(seconds: 1))));
-        return okStatus && okRange;
-      }).toList();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      context.read<OperationProvider>().loadOperations();
    });
  }

  Future<void> _pickRange() async {
+    final provider = context.read<OperationProvider>();
    final now = DateTime.now();
-    final initial = _range ??
+    final initial = provider.dateRange ??
        DateTimeRange(
          start: now.subtract(const Duration(days: 30)),
          end: now,
        );
+    
    final picked = await showDateRangePicker(
      context: context,
      firstDate: DateTime(2000),
      lastDate: now.add(const Duration(days: 1)),
      initialDateRange: initial,
    );
+    
    if (picked != null) {
-      setState(() => _range = picked);
+      provider.setDateRange(picked);
    }
  }

-  void _toggleStatus(String status) {
-    setState(() {
-      if (_statuses.contains(status)) _statuses.remove(status);
-      else _statuses.add(status);
-    });
-  }
-
  @override
  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(16.0),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        spacing: 16,
-        children: [
-          SizedBox(
-            height: 200, // same height for both
-            child: Row(
-              spacing: 16,
+    return Consumer<OperationProvider>(
+      builder: (context, provider, child) {
+        if (provider.isLoading) {
+          return const Center(child: CircularProgressIndicator());
+        }
+        
+        if (provider.error != null) {
+          return Center(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
              children: [
-                Expanded(child: StatusChart(operations: _allOps)),
-                Expanded(child: PayoutDistributionChart(operations: _allOps)),
+                Text('Error: ${provider.error}'),
+                ElevatedButton(
+                  onPressed: () => provider.loadOperations(),
+                  child: const Text('Retry'),
+                ),
              ],
            ),
+          );
+        }
+        
+        return Padding(
+          padding: const EdgeInsets.all(16.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            spacing: 16,
+            children: [
+              SizedBox(
+                height: 200,
+                child: Row(
+                  spacing: 16,
+                  children: [
+                    Expanded(
+                      child: StatusChart(operations: provider.allOperations),
+                    ),
+                    Expanded(
+                      child: PayoutDistributionChart(
+                        operations: provider.allOperations,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              OperationFilters(
+                selectedRange: provider.dateRange,
+                selectedStatuses: provider.selectedStatuses,
+                onPickRange: _pickRange,
+                onToggleStatus: provider.toggleStatus,
+                onApply: () => provider.applyFilters(context),
+              ),
+              OperationsTable(
+                operations: provider.filteredOperations,
+                showFileNameColumn: provider.hasFileName,
+              ),
+            ],
          ),
-          OperationFilters(
-            selectedRange: _range,
-            selectedStatuses: _statuses,
-            onPickRange: _pickRange,
-            onToggleStatus: _toggleStatus,
-            onApply: _applyFilter,
-          ),
-          OperationsTable(
-            operations: _filtered,
-            showFileNameColumn:
-                _allOps.any((op) => op.fileName != null),
-          ),
-        ],
-      ),
+        );
+      },
    );
  }
-}
+}
--- a/frontend/pweb/lib/pages/report/table/widget.dart
+++ b/frontend/pweb/lib/pages/report/table/widget.dart
@@ -4,6 +4,7 @@ import 'package:pshared/models/payment/operation.dart';
 import 'package:pweb/generated/i18n/app_localizations.dart';
 import 'package:pweb/pages/report/table/row.dart';

+
 class OperationsTable extends StatelessWidget {
  final List<OperationItem> operations;
  final bool showFileNameColumn;
@@ -21,7 +22,7 @@ class OperationsTable extends StatelessWidget {
    return Expanded(
      child: SingleChildScrollView(
        child: DataTable(
-          columnSpacing: 24,
+          columnSpacing: 20,
          headingTextStyle: const TextStyle(
            fontWeight: FontWeight.bold,
          ),