Frontend first draft

frontend/pweb/lib/pages/2fa/error_message.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+
+
+class ErrorMessage extends StatelessWidget {
+  final String error;
+
+  const ErrorMessage({super.key, required this.error});
+
+  @override
+  Widget build(BuildContext context) => Text(
+    error,
+    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+      color: Theme.of(context).colorScheme.error,
+    ),
+  );
+}

frontend/pweb/lib/pages/2fa/input.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+import 'package:pin_code_fields/pin_code_fields.dart';
+
+
+class TwoFactorCodeInput extends StatelessWidget {
+  final void Function(String) onCompleted;
+
+  const TwoFactorCodeInput({super.key, required this.onCompleted});
+
+  @override
+  Widget build(BuildContext context) => Center(
+    child: ConstrainedBox(
+      constraints: const BoxConstraints(maxWidth: 300),
+      child: PinCodeTextField(
+        length: 6,
+        appContext: context,
+        autoFocus: true,
+        keyboardType: TextInputType.number,
+        animationType: AnimationType.fade,
+        pinTheme: PinTheme(
+          shape: PinCodeFieldShape.box,
+          borderRadius: BorderRadius.circular(4),
+          fieldHeight: 48,
+          fieldWidth: 40,
+          inactiveColor: Theme.of(context).dividerColor,
+          activeColor: Theme.of(context).colorScheme.primary,
+          selectedColor: Theme.of(context).colorScheme.primary,
+        ),
+        onCompleted: onCompleted,
+        onChanged: (_) {},
+      ),
+    ),
+  );
+}

frontend/pweb/lib/pages/2fa/page.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/pages/2fa/error_message.dart';
+import 'package:pweb/pages/2fa/input.dart';
+import 'package:pweb/pages/2fa/prompt.dart';
+import 'package:pweb/pages/2fa/resend.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+import 'package:provider/provider.dart';
+import 'package:pweb/providers/two_factor.dart';
+
+
+
+class TwoFactorCodePage extends StatelessWidget {
+  final VoidCallback onVerificationSuccess;
+
+  const TwoFactorCodePage({
+    super.key,
+    required this.onVerificationSuccess,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<TwoFactorProvider>(
+      builder: (context, provider, child) {
+        if (provider.verificationSuccess) {
+          WidgetsBinding.instance.addPostFrameCallback((_) {
+            onVerificationSuccess();
+          });
+        }
+
+        return Scaffold(
+          appBar: AppBar(title: const Text('')),
+          body: Padding(
+            padding: const EdgeInsets.all(24),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                const TwoFactorPromptText(),
+                const SizedBox(height: 32),
+                TwoFactorCodeInput(
+                  onCompleted: (code) => provider.submitCode(code),
+                ),
+                const SizedBox(height: 24),
+                if (provider.isSubmitting)
+                  const Center(child: CircularProgressIndicator())
+                else
+                  const ResendCodeButton(),
+                if (provider.hasError) ...[
+                  const SizedBox(height: 12),
+                  ErrorMessage(error: AppLocalizations.of(context)!.twoFactorError),
+                ],
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

frontend/pweb/lib/pages/2fa/prompt.dart

@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class TwoFactorPromptText extends StatelessWidget {
+  const TwoFactorPromptText({super.key});
+
+  @override
+  Widget build(BuildContext context) => Text(
+    AppLocalizations.of(context)!.twoFactorPrompt,
+    style: Theme.of(context).textTheme.bodyLarge,
+    textAlign: TextAlign.center,
+  );
+}

frontend/pweb/lib/pages/2fa/resend.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class ResendCodeButton extends StatelessWidget {
+  const ResendCodeButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final localizations = AppLocalizations.of(context)!;
+
+    return TextButton(
+      onPressed: () {
+        // TODO: Add resend logic
+      },
+      style: TextButton.styleFrom(
+        padding: EdgeInsets.zero,
+        minimumSize: const Size(0, 0),
+        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+        alignment: Alignment.centerLeft,
+        foregroundColor: theme.colorScheme.primary,
+        textStyle: theme.textTheme.bodyMedium?.copyWith(
+          decoration: TextDecoration.underline,
+        ),
+      ),
+      child: Text(localizations.twoFactorResend),
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/form/method_tile.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+
+import 'package:pweb/pages/payment_methods/form.dart';
+import 'package:pweb/pages/payment_methods/icon.dart';
+
+
+class AdressBookPaymentMethodTile extends StatefulWidget {
+  final PaymentType type;
+  final String title;
+  final Map<PaymentType, Object?> methods;
+  final ValueChanged<Object?> onChanged;
+
+  final double spacingM;
+  final double spacingS;
+  final double sizeM;
+  final TextStyle? titleTextStyle;
+
+  const AdressBookPaymentMethodTile({
+    super.key,
+    required this.type,
+    required this.title,
+    required this.methods,
+    required this.onChanged,
+    this.spacingM = 12,
+    this.spacingS = 8,
+    this.sizeM = 20,
+    this.titleTextStyle,
+  });
+
+  @override
+  State<AdressBookPaymentMethodTile> createState() => _AdressBookPaymentMethodTileState();
+}
+
+class _AdressBookPaymentMethodTileState extends State<AdressBookPaymentMethodTile> {
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final isAdded = widget.methods.containsKey(widget.type);
+
+    return ExpansionTile(
+      title: Row(
+        children: [
+          Icon(
+            iconForPaymentType(widget.type), 
+            size: widget.sizeM,
+            color: isAdded 
+              ? theme.colorScheme.primary 
+              : theme.colorScheme.onSurface,
+          ),
+          SizedBox(width: widget.spacingS),
+          Text(
+            widget.title,
+            style: widget.titleTextStyle ??
+                theme.textTheme.titleMedium?.copyWith(
+                  fontWeight: FontWeight.bold,
+                  color: isAdded ? theme.colorScheme.primary : null,
+                ),
+          ),
+        ],
+      ),
+      trailing: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (isAdded)
+            IconButton(
+              icon: Icon(Icons.delete, color: theme.colorScheme.error),
+              onPressed: () {
+                widget.onChanged(null);
+              },
+            ),
+          Icon(
+            isAdded ? Icons.check_circle : Icons.add_circle_outline,
+            color: isAdded ? theme.colorScheme.primary : null,
+          ),
+        ],
+      ),
+      children: [
+        PaymentMethodForm(
+          key: ValueKey(widget.type),
+          selectedType: widget.type,
+          initialData: widget.methods[widget.type],
+          onChanged: widget.onChanged,
+        ),
+        SizedBox(height: widget.spacingM),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/form/page.dart

@@ -0,0 +1,109 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/methods/card.dart';
+import 'package:pshared/models/payment/methods/iban.dart';
+import 'package:pshared/models/payment/methods/russian_bank.dart';
+import 'package:pshared/models/payment/methods/wallet.dart';
+import 'package:pshared/models/payment/type.dart';
+import 'package:pshared/models/recipient/recipient.dart';
+import 'package:pshared/models/recipient/status.dart';
+import 'package:pshared/models/recipient/type.dart';
+
+import 'package:pweb/pages/address_book/form/view.dart';
+import 'package:pweb/services/amplitude.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class AdressBookRecipientForm extends StatefulWidget {
+  final Recipient? recipient;
+  final ValueChanged<Recipient?>? onSaved;
+
+  const AdressBookRecipientForm({super.key, this.recipient, this.onSaved});
+
+  @override
+  State<AdressBookRecipientForm> createState() => _AdressBookRecipientFormState();
+}
+
+class _AdressBookRecipientFormState extends State<AdressBookRecipientForm> {
+  final _formKey = GlobalKey<FormState>();
+  late TextEditingController _nameCtrl;
+  late TextEditingController _emailCtrl;
+  RecipientType _type = RecipientType.internal;
+  RecipientStatus _status = RecipientStatus.ready;
+  final Map<PaymentType, Object?> _methods = {};
+
+  @override
+  void initState() {
+    super.initState();
+    final r = widget.recipient;
+    _nameCtrl = TextEditingController(text: r?.name ?? "");
+    _emailCtrl = TextEditingController(text: r?.email ?? "");
+    _type = r?.type ?? RecipientType.internal;
+    _status = r?.status ?? RecipientStatus.ready;
+
+    if (r?.card != null) _methods[PaymentType.card] = r!.card;
+    if (r?.iban != null) _methods[PaymentType.iban] = r!.iban;
+    if (r?.wallet != null) _methods[PaymentType.wallet] = r!.wallet;
+    if (r?.bank != null) _methods[PaymentType.bankAccount] = r!.bank;
+  }
+
+  //TODO Change when registration is ready
+  void _save() {
+    if (!_formKey.currentState!.validate() || _methods.isEmpty) {
+      AmplitudeService.recipientAddCompleted(
+        _type,
+        _status,
+        _methods.keys.toSet(),
+      );
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: Text(AppLocalizations.of(context)!.recipientFormRule),
+        ),
+      );
+      return;
+    }
+
+    final recipient = Recipient(
+      name: _nameCtrl.text,
+      email: _emailCtrl.text,
+      type: _type,
+      status: _status,
+      avatarUrl: null,
+      card: _methods[PaymentType.card] as CardPaymentMethod?,
+      iban: _methods[PaymentType.iban] as IbanPaymentMethod?,
+      wallet: _methods[PaymentType.wallet] as WalletPaymentMethod?,
+      bank: _methods[PaymentType.bankAccount] as RussianBankAccountPaymentMethod?,
+    );
+
+    widget.onSaved?.call(recipient);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FormView(
+      formKey: _formKey,
+      nameCtrl: _nameCtrl,
+      emailCtrl: _emailCtrl,
+      type: _type,
+      status: _status,
+      methods: _methods,
+      onTypeChanged: (t) => setState(() => _type = t),
+      onStatusChanged: (s) => setState(() => _status = s),
+      onMethodsChanged: (type, data) {
+        setState(() {
+          if (data != null) {
+            _methods[type] = data;
+          } else {
+            _methods.remove(type);
+          }
+        });
+      },
+      onSave: _save,
+      isEditing: widget.recipient != null,
+      onBack: () {
+        widget.onSaved?.call(null);
+      },
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/form/view.dart

@@ -0,0 +1,124 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+import 'package:pshared/models/recipient/status.dart';
+import 'package:pshared/models/recipient/type.dart';
+
+import 'package:pweb/utils/payment/label.dart';
+import 'package:pweb/pages/address_book/form/method_tile.dart';
+import 'package:pweb/pages/address_book/form/widgets/button.dart';
+import 'package:pweb/pages/address_book/form/widgets/email_field.dart';
+import 'package:pweb/pages/address_book/form/widgets/header.dart';
+import 'package:pweb/pages/address_book/form/widgets/name_field.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class FormView extends StatelessWidget {
+  final GlobalKey<FormState> formKey;
+  final TextEditingController nameCtrl;
+  final TextEditingController emailCtrl;
+  final RecipientType type;
+  final RecipientStatus status;
+  final Map<PaymentType, Object?> methods;
+  final ValueChanged<RecipientType> onTypeChanged;
+  final ValueChanged<RecipientStatus> onStatusChanged;
+  final void Function(PaymentType, Object?) onMethodsChanged;
+  final VoidCallback onSave;
+  final bool isEditing;
+  final VoidCallback onBack;
+
+  final double maxWidth;
+  final double elevation;
+  final double borderRadius;
+  final EdgeInsetsGeometry padding;
+  final double spacingHeader;
+  final double spacingFields;
+  final double spacingDivider;
+  final double spacingSave;
+  final double spacingBottom;
+  final TextStyle? titleTextStyle;
+
+  const FormView({
+    super.key,
+    required this.formKey,
+    required this.nameCtrl,
+    required this.emailCtrl,
+    required this.type,
+    required this.status,
+    required this.methods,
+    required this.onTypeChanged,
+    required this.onStatusChanged,
+    required this.onMethodsChanged,
+    required this.onSave,
+    required this.isEditing,
+    required this.onBack,
+    this.maxWidth = 500,
+    this.elevation = 4,
+    this.borderRadius = 16,
+    this.padding = const EdgeInsets.all(20),
+    this.spacingHeader = 20,
+    this.spacingFields = 12,
+    this.spacingDivider = 40,
+    this.spacingSave = 30,
+    this.spacingBottom = 16,
+    this.titleTextStyle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Align(
+      alignment: Alignment.topCenter,
+      child: ConstrainedBox(
+        constraints: BoxConstraints(maxWidth: maxWidth),
+        child: Material(
+          elevation: elevation,
+          borderRadius: BorderRadius.circular(borderRadius),
+          color: theme.colorScheme.onSecondary,
+          child: Padding(
+            padding: padding,
+            child: Form(
+              key: formKey,
+              child: SingleChildScrollView(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    HeaderWidget(
+                      isEditing: isEditing,
+                      onBack: onBack,
+                    ),
+                    SizedBox(height: spacingHeader),
+                    NameField(controller: nameCtrl),
+                    SizedBox(height: spacingFields),
+                    EmailField(controller: emailCtrl),
+                    Divider(height: spacingDivider),
+                    Text(
+                      AppLocalizations.of(context)!.choosePaymentMethod,
+                      style: titleTextStyle ??
+                          theme.textTheme.titleMedium
+                              ?.copyWith(fontWeight: FontWeight.bold),
+                    ),
+                    SizedBox(height: spacingFields),
+                    ...PaymentType.values.map(
+                      (p) => AdressBookPaymentMethodTile(
+                        type: p,
+                        title: getPaymentTypeLabel(context, p),
+                        methods: methods,
+                        onChanged: (data) => onMethodsChanged(p, data),
+                      ),
+                    ),
+                    SizedBox(height: spacingSave),
+                    SaveButton(onSave: onSave),
+                    SizedBox(height: spacingBottom),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/form/widgets/button.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class SaveButton extends StatelessWidget {
+  final VoidCallback onSave;
+
+  final double width;
+  final double height;
+  final double borderRadius;
+  final String? text;
+  final TextStyle? textStyle;
+
+  const SaveButton({
+    super.key,
+    required this.onSave,
+    this.width = 200,
+    this.height = 45,
+    this.borderRadius = 12,
+    this.text,
+    this.textStyle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Center(
+      child: SizedBox(
+        width: width,
+        height: height,
+        child: InkWell(
+          borderRadius: BorderRadius.circular(borderRadius),
+          onTap: onSave,
+          child: Container(
+            decoration: BoxDecoration(
+              color: theme.colorScheme.primary,
+              borderRadius: BorderRadius.circular(borderRadius),
+            ),
+            child: Center(
+              child: Text(
+                text ?? AppLocalizations.of(context)!.saveRecipient,
+                style: textStyle ??
+                    theme.textTheme.labelLarge?.copyWith(
+                      color: theme.colorScheme.onPrimary,
+                      fontWeight: FontWeight.w600,
+                    ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/form/widgets/choice_chips.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+
+
+class ChoiceChips<T> extends StatelessWidget {
+  final String label;
+  final List<T> values;
+  final T selected;
+  final ValueChanged<T> onChanged;
+
+  final double spacing;
+  final double runSpacing;
+  final double labelSpacing;
+
+  const ChoiceChips({
+    super.key,
+    required this.label,
+    required this.values,
+    required this.selected,
+    required this.onChanged,
+    this.spacing = 8,
+    this.runSpacing = 8,
+    this.labelSpacing = 8,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          label,
+          style: theme.textTheme.titleMedium!.copyWith(fontWeight: FontWeight.bold),
+        ),
+        SizedBox(height: labelSpacing),
+        Wrap(
+          spacing: spacing,
+          runSpacing: runSpacing,
+          children: values.map((v) {
+            final isSelected = v == selected;
+            return ChoiceChip(
+              selectedColor: theme.colorScheme.primary,
+              backgroundColor: theme.colorScheme.onSecondary,
+              showCheckmark: false,
+              label: Text(
+                v.toString().split('.').last,
+                style: TextStyle(
+                  color: isSelected
+                      ? theme.colorScheme.onSecondary
+                      : theme.colorScheme.inverseSurface,
+                ),
+              ),
+              selected: isSelected,
+              onSelected: (_) => onChanged(v),
+            );
+          }).toList(),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/form/widgets/email_field.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class EmailField extends StatelessWidget {
+  final TextEditingController controller;
+
+  final double borderRadius;
+  final EdgeInsetsGeometry contentPadding;
+
+  const EmailField({
+    super.key,
+    required this.controller,
+    this.borderRadius = 12,
+    this.contentPadding = const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final loc = AppLocalizations.of(context)!;
+
+    return TextFormField(
+      controller: controller,
+      decoration: InputDecoration(
+        labelText: loc.username,
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(borderRadius),
+        ),
+        contentPadding: contentPadding,
+      ),
+      validator: (v) =>
+          v == null || v.isEmpty ? loc.usernameErrorInvalid : null,
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/form/widgets/header.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class HeaderWidget extends StatelessWidget {
+  final bool isEditing;
+  final VoidCallback? onBack;
+
+  final double spacing;
+  final TextStyle? textStyle;
+
+  const HeaderWidget({
+    super.key,
+    required this.isEditing,
+    this.onBack,
+    this.spacing = 8,
+    this.textStyle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final l10n = AppLocalizations.of(context)!;
+
+    return Row(
+      children: [
+        IconButton(
+          icon: const Icon(Icons.arrow_back),
+          color: theme.colorScheme.primary,
+          onPressed: onBack,
+        ),
+        SizedBox(width: spacing),
+        Text(
+          isEditing ? l10n.editRecipient : l10n.addRecipient,
+          style: textStyle ??
+              theme.textTheme.headlineSmall?.copyWith(
+                fontWeight: FontWeight.bold,
+              ),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/form/widgets/name_field.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class NameField extends StatelessWidget {
+  final TextEditingController controller;
+
+  final double borderRadius;
+  final EdgeInsetsGeometry contentPadding;
+
+  const NameField({
+    super.key,
+    required this.controller,
+    this.borderRadius = 12,
+    this.contentPadding = const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final loc = AppLocalizations.of(context)!;
+
+    return TextFormField(
+      controller: controller,
+      decoration: InputDecoration(
+        labelText: loc.recipientName,
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(borderRadius),
+        ),
+        contentPadding: contentPadding,
+      ),
+      validator: (v) => v == null || v.isEmpty ? loc.enterRecipientName : null,
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/page/filter_button.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/recipient/filter.dart';
+
+
+class RecipientFilterButton extends StatelessWidget {
+  final String text;
+  final RecipientFilter filter;
+  final RecipientFilter selected;
+  final ValueChanged<RecipientFilter> onTap;
+
+  const RecipientFilterButton({
+    super.key,
+    required this.text,
+    required this.filter,
+    required this.selected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final isSelected = selected == filter;
+    final theme = Theme.of(context).colorScheme;
+
+    return ElevatedButton(
+      onPressed: () => onTap(filter),
+      style: ButtonStyle(
+        backgroundColor: WidgetStateProperty.all(Colors.transparent),
+        overlayColor: WidgetStateProperty.all(Colors.transparent),
+        shadowColor: WidgetStateProperty.all(Colors.transparent),
+        elevation: WidgetStateProperty.all(0),
+      ),
+      child: IntrinsicWidth(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Text(
+              text,
+              style: TextStyle(
+                fontSize: 20,
+                color: isSelected
+                    ? theme.onPrimaryContainer
+                    : theme.onPrimaryContainer.withAlpha(60),
+              ),
+            ),
+            SizedBox(
+              height: 2,
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  color: isSelected
+                      ? theme.primary
+                      : theme.onPrimaryContainer.withAlpha(60),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/page/header.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class RecipientAddressBookHeader extends StatelessWidget {
+  final VoidCallback onAddRecipient;
+
+  const RecipientAddressBookHeader({super.key, required this.onAddRecipient});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context).colorScheme;
+    final l10 = AppLocalizations.of(context)!;
+    return Padding(
+      padding: const EdgeInsets.all(20.0),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            l10.recipients,
+            style: Theme.of(context).textTheme.titleLarge!.copyWith(
+                  fontSize: 28,
+                  fontWeight: FontWeight.bold,
+                ),
+          ),
+          TextButton.icon(
+            onPressed: onAddRecipient,
+            style: ButtonStyle(
+              backgroundColor: WidgetStateProperty.all(theme.primary),
+              shadowColor: WidgetStateProperty.all(theme.onPrimaryContainer),
+              elevation: WidgetStateProperty.all(2),
+              shape: WidgetStateProperty.all(
+                RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+              ),
+            ),
+            icon: Icon(Icons.add, color: theme.onSecondary),
+            label: Text(l10.addRecipient, style: TextStyle(color: theme.onSecondary)),
+          ),
+        ],
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/page/list.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/address_book/page/recipient/item.dart';
+
+
+class RecipientAddressBookList extends StatelessWidget {
+  final List<Recipient> filteredRecipients;
+  final ValueChanged<Recipient>? onSelected;
+  final ValueChanged<Recipient>? onEdit;
+  final ValueChanged<Recipient>? onDelete;
+
+  const RecipientAddressBookList({
+    super.key,
+    required this.filteredRecipients,
+    this.onSelected,
+    this.onEdit,
+    this.onDelete,
+  });
+
+  @override
+Widget build(BuildContext context) {
+  return ListView.builder(
+    itemCount: filteredRecipients.length,
+    itemBuilder: (context, index) {
+      final recipient = filteredRecipients[index];
+      return Padding(
+        padding: const EdgeInsets.symmetric(vertical: 6.0), 
+        child: RecipientAddressBookItem(
+          recipient: recipient,
+          onTap: () => onSelected?.call(recipient),
+          onEdit: () => onEdit?.call(recipient),
+          onDelete: () => onDelete?.call(recipient),
+        ),
+      );
+    },
+  );
+}
+}

frontend/pweb/lib/pages/address_book/page/page.dart

@@ -0,0 +1,102 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pshared/models/recipient/filter.dart';
+import 'package:pweb/pages/address_book/page/filter_button.dart';
+import 'package:pweb/pages/address_book/page/header.dart';
+import 'package:pweb/pages/address_book/page/list.dart';
+import 'package:pweb/pages/address_book/page/search.dart';
+import 'package:pweb/providers/recipient.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class RecipientAddressBookPage extends StatelessWidget {
+  final ValueChanged<Recipient> onRecipientSelected;
+  final VoidCallback onAddRecipient;
+  final ValueChanged<Recipient>? onEditRecipient;
+
+  const RecipientAddressBookPage({
+    super.key,
+    required this.onRecipientSelected,
+    required this.onAddRecipient,
+    this.onEditRecipient,
+  });
+
+  static const double _expandedHeight = 550;
+  static const double _paddingAll = 16;
+  static const double _bigBox = 30;
+  static const double _smallBox = 20;
+
+
+  @override
+  Widget build(BuildContext context) {
+    
+    final loc = AppLocalizations.of(context)!;
+    final provider = context.watch<RecipientProvider>(); 
+
+    if (provider.isLoading) {
+      return const Center(child: CircularProgressIndicator()); //TODO This should be in the provider
+    }
+
+    if (provider.error != null) {
+      return Center(child: Text('Error: ${provider.error}'));
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        RecipientAddressBookHeader(onAddRecipient: onAddRecipient),
+        const SizedBox(height: _smallBox),
+        RecipientSearchField(
+          controller: TextEditingController(text: provider.query),
+          focusNode: FocusNode(),
+          onChanged: provider.setQuery,
+        ),
+        const SizedBox(height: _bigBox),
+        Row(
+          children: [
+            RecipientFilterButton(
+              text: loc.allStatus,
+              filter: RecipientFilter.all,
+              selected: provider.selectedFilter,
+              onTap: provider.setFilter,
+            ),
+            RecipientFilterButton(
+              text: loc.readyStatus,
+              filter: RecipientFilter.ready,
+              selected: provider.selectedFilter,
+              onTap: provider.setFilter,
+            ),
+            RecipientFilterButton(
+              text: loc.registeredStatus,
+              filter: RecipientFilter.registered,
+              selected: provider.selectedFilter,
+              onTap: provider.setFilter,
+            ),
+            RecipientFilterButton(
+              text: loc.notRegisteredStatus,
+              filter: RecipientFilter.notRegistered,
+              selected: provider.selectedFilter,
+              onTap: provider.setFilter,
+            ),
+          ],
+        ),
+        SizedBox(
+          height: _expandedHeight,
+          child: Padding(
+            padding: const EdgeInsets.all(_paddingAll),
+            child: RecipientAddressBookList(
+              filteredRecipients: provider.filteredRecipients,
+              onEdit: (recipient) => onEditRecipient?.call(recipient),
+              onSelected: onRecipientSelected,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/page/recipient/actions.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+
+
+class RecipientActions extends StatelessWidget {
+  final VoidCallback onEdit;
+  final VoidCallback onDelete;
+
+  const RecipientActions({super.key, required this.onEdit, required this.onDelete});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        IconButton(icon: Icon(Icons.edit, color: Theme.of(context).colorScheme.primary), onPressed: onEdit),
+        IconButton(icon: Icon(Icons.delete, color: Theme.of(context).colorScheme.error), onPressed: onDelete),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/page/recipient/info_column.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+
+class RecipientInfoColumn extends StatelessWidget {
+  final String name;
+  final String email;
+
+  const RecipientInfoColumn({super.key, required this.name, required this.email});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(name, style: Theme.of(context).textTheme.titleMedium!.copyWith(fontSize: 19)),
+        Text(email, style: Theme.of(context).textTheme.bodyMedium),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/page/recipient/info_row.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+
+import 'package:pweb/pages/payment_methods/icon.dart';
+import 'package:pweb/utils/payment/label.dart';
+
+
+class RecipientAddressBookInfoRow extends StatelessWidget {
+  final PaymentType type;
+  final String value;
+
+  final double spacingWidth;
+  final double spacingHeight;
+  final double iconSize;
+  final double titleFontSize;
+  final double valueFontSize;
+  final TextStyle? textStyle;
+
+  const RecipientAddressBookInfoRow({
+    super.key,
+    required this.type,
+    required this.value,
+    this.spacingWidth = 8.0,
+    this.spacingHeight = 2.0,
+    this.iconSize = 20.0,
+    this.titleFontSize = 16.0,
+    this.valueFontSize = 12.0,
+    this.textStyle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final style = textStyle ?? Theme.of(context).textTheme.bodySmall!;
+
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Icon(iconForPaymentType(type), size: iconSize),
+        SizedBox(width: spacingWidth),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              getPaymentTypeLabel(context, type),
+              style: style.copyWith(fontSize: titleFontSize),
+            ),
+            SizedBox(height: spacingHeight),
+            Text(
+              value,
+              style: style.copyWith(fontSize: valueFontSize),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/page/recipient/item.dart

@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/address_book/page/recipient/actions.dart';
+import 'package:pweb/pages/address_book/page/recipient/info_column.dart';
+import 'package:pweb/pages/address_book/page/recipient/payment_row.dart';
+import 'package:pweb/pages/address_book/page/recipient/status.dart';
+import 'package:pweb/pages/dashboard/payouts/single/adress_book/avatar.dart';
+
+
+class RecipientAddressBookItem extends StatefulWidget {
+  final Recipient recipient;
+  final VoidCallback onTap;
+  final VoidCallback onEdit;
+  final VoidCallback onDelete;
+
+  final double borderRadius;
+  final double elevation;
+  final EdgeInsetsGeometry padding;
+  final double spacingDotAvatar;
+  final double spacingAvatarInfo;
+  final double spacingBottom;
+  final double avatarRadius;
+
+  const RecipientAddressBookItem({
+    super.key,
+    required this.recipient,
+    required this.onTap,
+    required this.onEdit,
+    required this.onDelete,
+    this.borderRadius = 12,
+    this.elevation = 4,
+    this.padding = const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+    this.spacingDotAvatar = 8,
+    this.spacingAvatarInfo = 16,
+    this.spacingBottom = 10,
+    this.avatarRadius = 24,
+  });
+
+  @override
+  State<RecipientAddressBookItem> createState() => _RecipientAddressBookItemState();
+}
+
+class _RecipientAddressBookItemState extends State<RecipientAddressBookItem> {
+  bool _isHovered = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final recipient = widget.recipient;
+
+    return MouseRegion(
+      onEnter: (_) => setState(() => _isHovered = true),
+      onExit: (_) => setState(() => _isHovered = false),
+      child: InkWell(
+        onTap: widget.onTap,
+        child: Card(
+          shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(widget.borderRadius)),
+          elevation: widget.elevation,
+          color: Theme.of(context).colorScheme.onSecondary,
+          child: Padding(
+            padding: widget.padding,
+            child: Column(
+              children: [
+                Row(
+                  children: [
+                    RecipientStatusDot(status: recipient.status),
+                    SizedBox(width: widget.spacingDotAvatar),
+                    RecipientAvatar(
+                      name: recipient.name,
+                      avatarUrl: recipient.avatarUrl,
+                      isVisible: false,
+                      avatarRadius: widget.avatarRadius,
+                    ),
+                    SizedBox(width: widget.spacingAvatarInfo),
+                    Expanded(
+                      child: RecipientInfoColumn(
+                        name: recipient.name,
+                        email: recipient.email,
+                      ),
+                    ),
+                    if (_isHovered)
+                      RecipientActions(
+                          onEdit: widget.onEdit, onDelete: widget.onDelete),
+                  ],
+                ),
+                SizedBox(height: widget.spacingBottom),
+                RecipientPaymentRow(recipient: recipient),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/page/recipient/payment_row.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/address_book/page/recipient/info_row.dart';
+
+
+class RecipientPaymentRow extends StatelessWidget {
+  final Recipient recipient;
+  final double spacing;
+
+  const RecipientPaymentRow({
+    super.key, 
+    required this.recipient, 
+    this.spacing = 18
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      spacing: spacing,
+      children: [
+        if (recipient.bank?.accountNumber.isNotEmpty ?? false)
+          RecipientAddressBookInfoRow(
+            type: PaymentType.bankAccount, 
+            value: recipient.bank!.accountNumber
+          ),
+        if (recipient.card?.pan.isNotEmpty ?? false)
+          RecipientAddressBookInfoRow(
+            type: PaymentType.card, 
+            value: recipient.card!.pan
+          ),
+        if (recipient.iban?.iban.isNotEmpty ?? false)
+          RecipientAddressBookInfoRow(
+            type: PaymentType.iban, 
+            value: recipient.iban!.iban
+          ),
+        if (recipient.wallet?.walletId.isNotEmpty ?? false)
+          RecipientAddressBookInfoRow(
+            type: PaymentType.wallet, 
+            value: recipient.wallet!.walletId
+          ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/page/recipient/status.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/recipient/status.dart';
+
+
+class RecipientStatusDot extends StatelessWidget {
+  final RecipientStatus status;
+
+  const RecipientStatusDot({super.key, required this.status});
+
+  @override
+  Widget build(BuildContext context) {
+    Color color;
+    switch (status) {
+      case RecipientStatus.ready:
+        color = Colors.green;
+        break;
+      case RecipientStatus.notRegistered:
+        color = Theme.of(context).colorScheme.error;
+        break;
+      case RecipientStatus.registered:
+        color = Colors.yellow;
+        break;
+    }
+
+    return Container(
+      width: 12,
+      height: 12,
+      decoration: BoxDecoration(shape: BoxShape.circle, color: color),
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/page/search.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class RecipientSearchField extends StatelessWidget {
+  final TextEditingController controller;
+  final ValueChanged<String> onChanged;
+  final FocusNode? focusNode;
+
+  const RecipientSearchField({
+    super.key,
+    required this.controller,
+    required this.onChanged,
+    this.focusNode,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+
+    return TextField(
+      controller: controller,
+      focusNode: focusNode,
+      decoration: InputDecoration(
+        prefixIcon: const Icon(Icons.search), 
+        hintText: l10n.searchHint,
+        border: const OutlineInputBorder(),
+        fillColor: Theme.of(context).colorScheme.onSecondary,
+        filled: true,
+        suffixIcon: IconButton(
+          icon: const Icon(Icons.clear),
+          onPressed: () {
+            controller.clear();
+            onChanged('');
+            focusNode?.unfocus();
+          },
+        ),
+      ),
+      onChanged: onChanged,
+    );
+
+  }
+}

frontend/pweb/lib/pages/dashboard/buttons/balance/add_funds.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+
+class BalanceAddFunds extends StatelessWidget {
+  final VoidCallback onTopUp;
+
+  const BalanceAddFunds({
+    super.key,
+    required this.onTopUp,
+  });
+
+  static const double _borderRadius = 5.0;
+  static const double _iconSize = 24.0;
+  static const double _paddingVertical = 2.0;
+  static const double _spacingSmall = 3.0;
+  static const double _spacingMedium = 5.0;
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return InkWell(
+      onTap: onTopUp,
+      borderRadius: BorderRadius.circular(_borderRadius),
+      hoverColor: colorScheme.primaryContainer,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: _paddingVertical),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const SizedBox(width: _spacingSmall),
+            Icon(
+              Icons.add_circle,
+              color: colorScheme.primary,
+              size: _iconSize,
+            ),
+            const SizedBox(width: _spacingMedium),
+            Text(
+              'Add funds',
+              style: textTheme.bodyMedium?.copyWith(
+                color: colorScheme.primary,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+            const SizedBox(width: _spacingSmall),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/buttons/balance/amount.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import 'package:pweb/models/wallet.dart';
+import 'package:pweb/utils/currency.dart';
+
+
+class BalanceAmount extends StatelessWidget {
+  final Wallet wallet;
+  final VoidCallback onToggleVisibility;
+
+  const BalanceAmount({
+    super.key,
+    required this.wallet,
+    required this.onToggleVisibility,
+  });
+
+  static const double _iconSpacing = 12.0;
+  static const double _iconSize = 24.0;
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+    final colorScheme = Theme.of(context).colorScheme;
+    final currencyBalance = currencyCodeToSymbol(wallet.currency);
+
+    return Row(
+      children: [
+        Text(
+          wallet.isHidden ? '•••• $currencyBalance' : '${wallet.balance.toStringAsFixed(2)} $currencyBalance',
+          style: textTheme.headlineSmall?.copyWith(
+            fontWeight: FontWeight.bold,
+            color: colorScheme.onSurface,
+          ),
+        ),
+        const SizedBox(width: _iconSpacing),
+        GestureDetector(
+          onTap: onToggleVisibility,
+          child: Icon(
+            wallet.isHidden ? Icons.visibility_off : Icons.visibility,
+            size: _iconSize,
+            color: colorScheme.onSurface,
+          ),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/buttons/balance/balance.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pweb/pages/dashboard/buttons/balance/carousel.dart';
+import 'package:pweb/providers/wallets.dart';
+
+
+class BalanceWidget extends StatelessWidget {
+  const BalanceWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final walletsProvider = context.watch<WalletsProvider>();
+    
+    if (walletsProvider.isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+    
+    final wallets = walletsProvider.wallets;
+    
+    if (wallets == null || wallets.isEmpty) {
+      return const Center(child: Text('No wallets available'));
+    }
+
+    return 
+      WalletCarousel(
+        wallets: wallets,
+        onWalletChanged: walletsProvider.selectWallet,
+      );
+  }
+}

frontend/pweb/lib/pages/dashboard/buttons/balance/card.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pweb/models/wallet.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/add_funds.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/amount.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/config.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/header.dart';
+import 'package:pweb/providers/wallets.dart';
+
+
+class WalletCard extends StatelessWidget {
+  final Wallet wallet;
+
+  const WalletCard({
+    super.key,
+    required this.wallet,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      color: Theme.of(context).colorScheme.onSecondary,
+      elevation: WalletCardConfig.elevation,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(WalletCardConfig.borderRadius),
+      ),
+      child: Padding(
+        padding: WalletCardConfig.contentPadding,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            BalanceHeader(
+              walletName: wallet.name,
+              walletId: wallet.walletUserID,
+            ),
+            BalanceAmount(
+              wallet: wallet,
+              onToggleVisibility: () {
+                context.read<WalletsProvider>().toggleVisibility(wallet.id);
+              },
+            ),
+            BalanceAddFunds(
+              onTopUp: () {
+                // TODO: Implement top-up functionality
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/buttons/balance/carousel.dart

@@ -0,0 +1,113 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pweb/models/wallet.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/card.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/config.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/indicator.dart';
+import 'package:pweb/providers/carousel.dart';
+
+
+class WalletCarousel extends StatefulWidget {
+  final List<Wallet> wallets;
+  final ValueChanged<Wallet> onWalletChanged;
+
+  const WalletCarousel({
+    super.key,
+    required this.wallets,
+    required this.onWalletChanged,
+  });
+
+  @override
+  State<WalletCarousel> createState() => _WalletCarouselState();
+}
+
+class _WalletCarouselState extends State<WalletCarousel> {
+  late final PageController _pageController;
+  int _currentPage = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    _pageController = PageController(
+      viewportFraction: WalletCardConfig.viewportFraction,
+    );
+  }
+
+  @override
+  void dispose() {
+    _pageController.dispose();
+    super.dispose();
+  }
+
+  void _onPageChanged(int index) {
+    setState(() {
+      _currentPage = index;
+    });
+    context.read<CarouselIndexProvider>().updateIndex(index);
+    widget.onWalletChanged(widget.wallets[index]);
+  }
+
+  void _goToPreviousPage() {
+    if (_currentPage > 0) {
+      _pageController.animateToPage(
+        _currentPage - 1,
+        duration: const Duration(milliseconds: 300),
+        curve: Curves.easeInOut,
+      );
+    }
+  }
+
+  void _goToNextPage() {
+    if (_currentPage < widget.wallets.length - 1) {
+      _pageController.animateToPage(
+        _currentPage + 1,
+        duration: const Duration(milliseconds: 300),
+        curve: Curves.easeInOut,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        SizedBox(
+          height: WalletCardConfig.cardHeight,
+          child: PageView.builder(
+            controller: _pageController,
+            physics: const NeverScrollableScrollPhysics(),
+            itemCount: widget.wallets.length,
+            onPageChanged: _onPageChanged,
+            itemBuilder: (context, index) {
+              return Padding(
+                padding: WalletCardConfig.cardPadding,
+                child: WalletCard(wallet: widget.wallets[index]),
+              );
+            },
+          ),
+        ),
+        const SizedBox(height: 16),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            IconButton(
+              onPressed: _currentPage > 0 ? _goToPreviousPage : null,
+              icon: const Icon(Icons.arrow_back),
+            ),
+            const SizedBox(width: 16),
+            CarouselIndicator(itemCount: widget.wallets.length),
+            const SizedBox(width: 16),
+            IconButton(
+              onPressed: _currentPage < widget.wallets.length - 1 
+                  ? _goToNextPage 
+                  : null,
+              icon: const Icon(Icons.arrow_forward),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/buttons/balance/config.dart

@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart';
+
+
+abstract class WalletCardConfig {
+  static const double cardHeight = 130.0;
+  static const double elevation = 4.0;
+  static const double borderRadius = 16.0;
+  static const double viewportFraction = 0.9;
+  
+  static const EdgeInsets cardPadding = EdgeInsets.symmetric(horizontal: 8);
+  static const EdgeInsets contentPadding = EdgeInsets.all(16);
+  
+  static const double dotSize = 8.0;
+  static const EdgeInsets dotMargin = EdgeInsets.symmetric(horizontal: 4);
+}

frontend/pweb/lib/pages/dashboard/buttons/balance/header.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+
+class BalanceHeader extends StatelessWidget {
+  final String walletName;
+  final String walletId;
+
+  const BalanceHeader({
+    super.key,
+    required this.walletName,
+    required this.walletId,
+  });
+
+  static const double _spacing = 8.0;
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Row(
+      children: [
+        Text(
+          walletName,
+          style: textTheme.titleMedium?.copyWith(
+            color: colorScheme.onSurface,
+          ),
+        ),
+        const SizedBox(width: _spacing),
+        Text(
+          walletId,
+          style: textTheme.bodySmall?.copyWith(
+            color: colorScheme.onSurface,
+          ),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/buttons/balance/indicator.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/config.dart';
+
+import 'package:pweb/providers/carousel.dart';
+
+
+class CarouselIndicator extends StatelessWidget {
+  final int itemCount;
+
+  const CarouselIndicator({
+    super.key,
+    required this.itemCount,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final currentIndex = context.watch<CarouselIndexProvider>().currentIndex;
+    
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: List.generate(
+        itemCount,
+        (index) => _Dot(isActive: currentIndex == index),
+      ),
+    );
+  }
+}
+
+class _Dot extends StatelessWidget {
+  final bool isActive;
+
+  const _Dot({required this.isActive});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: WalletCardConfig.dotSize,
+      height: WalletCardConfig.dotSize,
+      margin: WalletCardConfig.dotMargin,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: isActive
+            ? Theme.of(context).colorScheme.primary
+            : Theme.of(context).colorScheme.primary.withAlpha(60),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/buttons/buttons.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+
+
+class TransactionRefButton extends StatelessWidget {
+  final VoidCallback onTap;
+  final bool isActive;
+  final String label;
+  final IconData icon;
+
+  const TransactionRefButton({
+    super.key,
+    required this.onTap,
+    required this.isActive,
+    required this.label,
+    required this.icon,
+  });
+
+  static const double _horizontalPadding = 10.0;
+  static const double _verticalPadding = 5.0;
+  static const double _iconSize = 24.0;
+  static const double _spacing = 10.0;
+  static const double _borderRadius = 12.0;
+  static const FontWeight _fontWeight = FontWeight.w400;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context).colorScheme;
+
+    final backgroundColor = isActive ? theme.primary : theme.onSecondary;
+    final foregroundColor = isActive ? theme.onPrimary : theme.onPrimaryContainer;
+    final hoverColor = isActive ? theme.primary : theme.secondaryContainer;
+
+    return Material(
+      color: backgroundColor,
+      elevation: 4,
+      borderRadius: BorderRadius.circular(_borderRadius),
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(_borderRadius),
+        hoverColor: hoverColor,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: _horizontalPadding,
+            vertical: _verticalPadding,
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(
+                label,
+                style: Theme.of(context).textTheme.titleSmall?.copyWith(
+                      fontWeight: _fontWeight,
+                      color: foregroundColor,
+                    ),
+              ),
+              const SizedBox(width: _spacing),
+              Icon(
+                icon,
+                color: foregroundColor,
+                size: _iconSize,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/dashboard.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/dashboard/buttons/balance/balance.dart';
+import 'package:pweb/pages/dashboard/buttons/buttons.dart';
+import 'package:pweb/pages/dashboard/payouts/multiple/title.dart';
+import 'package:pweb/pages/dashboard/payouts/multiple/widget.dart';
+import 'package:pweb/pages/dashboard/payouts/single/widget.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class AppSpacing {
+  static const double small = 10;
+  static const double medium = 16;
+  static const double large = 20;
+}
+
+class DashboardPage extends StatefulWidget {
+  final ValueChanged<Recipient> onRecipientSelected;
+  final void Function(PaymentType type) onGoToPaymentWithoutRecipient;
+
+  const DashboardPage({
+    super.key,
+    required this.onRecipientSelected,
+    required this.onGoToPaymentWithoutRecipient,
+  });
+
+  @override
+  State<DashboardPage> createState() => _DashboardPageState();
+}
+
+class _DashboardPageState extends State<DashboardPage> {
+  bool _showContainerSingle = true;
+  bool _showContainerMultiple = false;
+
+  void _setActive(bool single) {
+    setState(() {
+      _showContainerSingle = single;
+      _showContainerMultiple = !single;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: SingleChildScrollView(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Row(
+              children: [
+                Expanded(
+                  flex: 0,
+                  child: TransactionRefButton(
+                    onTap: () => _setActive(true),
+                    isActive: _showContainerSingle,
+                    label: AppLocalizations.of(context)!.sendSingle,
+                    icon: Icons.person_add,
+                  ),
+                ),
+                const SizedBox(width: AppSpacing.small),
+                Expanded(
+                  flex: 0,
+                  child: TransactionRefButton(
+                    onTap: () => _setActive(false),
+                    isActive: _showContainerMultiple,
+                    label: AppLocalizations.of(context)!.sendMultiple,
+                    icon: Icons.group_add,
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: AppSpacing.medium),
+            BalanceWidget(),
+            const SizedBox(height: AppSpacing.small),
+            if (_showContainerMultiple) TitleMultiplePayout(),
+            const SizedBox(height: AppSpacing.medium),
+            if (_showContainerSingle)
+              SinglePayoutForm(
+                onRecipientSelected: widget.onRecipientSelected,
+                onGoToPayment: widget.onGoToPaymentWithoutRecipient,
+              ),
+            if (_showContainerMultiple) MultiplePayoutForm(),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/organization/button.dart

@@ -0,0 +1,12 @@
+import 'package:flutter/material.dart';
+
+
+class OrganizationButton extends StatelessWidget {
+  const OrganizationButton({super.key});
+
+  @override
+  Widget build(BuildContext context) => IconButton(
+    icon: Icon(Icons.person),
+    onPressed: null,
+  );
+}

frontend/pweb/lib/pages/dashboard/payouts/multiple/csv.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class UploadCSVSection extends StatelessWidget {
+  const UploadCSVSection({super.key});
+
+  static const double _verticalSpacing = 10;
+  static const double _iconTextSpacing = 5;
+  static const double _buttonVerticalPadding = 12;
+  static const double _buttonHorizontalPadding = 24;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final l10n = AppLocalizations.of(context)!;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            const Icon(Icons.upload),
+            const SizedBox(width: _iconTextSpacing),
+            Text(
+              l10n.uploadCSV,
+              style: theme.textTheme.bodyLarge?.copyWith(
+                fontSize: 18,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: _verticalSpacing),
+        Container(
+          height: 140,
+          decoration: BoxDecoration(
+            border: Border.all(color: theme.colorScheme.outline),
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: Center(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Icon(Icons.upload_file, size: 36, color: theme.colorScheme.primary),
+                const SizedBox(height: 8),
+                ElevatedButton(
+                  onPressed: () {},
+                  style: ElevatedButton.styleFrom(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: _buttonHorizontalPadding,
+                      vertical: _buttonVerticalPadding,
+                    ),
+                  ),
+                  child: Text(l10n.upload),
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  l10n.hintUpload,
+                  style: const TextStyle(fontSize: 12),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/multiple/form.dart

@@ -0,0 +1,13 @@
+class MultiplePayoutRow {
+  final String token;
+  final String amount;
+  final String currency;
+  final String comment;
+
+  const MultiplePayoutRow({
+    required this.token,
+    required this.amount,
+    required this.currency,
+    required this.comment,
+  });
+}

frontend/pweb/lib/pages/dashboard/payouts/multiple/history.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+import 'package:pweb/providers/upload_history.dart';
+
+
+class UploadHistorySection extends StatelessWidget {
+  const UploadHistorySection({super.key});
+
+  static const double _smallBox = 5;
+  static const double _radius = 6;
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = context.watch<UploadHistoryProvider>();
+    final theme = Theme.of(context);
+    final l10 = AppLocalizations.of(context)!;
+    
+
+    if (provider.isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+    if (provider.error != null) {
+      return Text("Error: ${provider.error}");
+    }
+    final items = provider.data ?? [];
+
+    return Column(
+      children: [
+        Row(
+          children: [
+            const Icon(Icons.history),
+            const SizedBox(width: _smallBox),
+            Text(l10.uploadHistory, style: theme.textTheme.bodyLarge),
+          ],
+        ),
+        DataTable(
+          columns: [
+            DataColumn(label: Text(l10.fileNameColumn)),
+            DataColumn(label: Text(l10.colStatus)),
+            DataColumn(label: Text(l10.dateColumn)),
+            DataColumn(label: Text(l10.details)),
+          ],
+          rows: items.map((file) {
+            final isError = file.status == "Error";
+            final statusColor = isError ? Colors.red : Colors.green;
+            return DataRow(
+              cells: [
+                DataCell(Text(file.name)),
+                DataCell(Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                  decoration: BoxDecoration(
+                    color: statusColor.withAlpha(20),
+                    borderRadius: BorderRadius.circular(_radius),
+                  ),
+                  child: Text(file.status, style: TextStyle(color: statusColor)),
+                )),
+                DataCell(Text(file.time)),
+                DataCell(TextButton(onPressed: () {}, child: Text(l10.showDetails))),
+              ],
+            );
+          }).toList(),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/multiple/sample.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+import 'package:pweb/pages/dashboard/payouts/multiple/form.dart';
+
+
+class FileFormatSampleSection extends StatelessWidget {
+  const FileFormatSampleSection({super.key});
+
+  static final List<MultiplePayoutRow> sampleRows = [
+    MultiplePayoutRow(token: "d921...161", amount: "500", currency: "RUB", comment: "cashback001"),
+    MultiplePayoutRow(token: "d921...162", amount: "100", currency: "USD", comment: "cashback002"),
+    MultiplePayoutRow(token: "d921...163", amount: "120", currency: "EUR", comment: "cashback003"),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final l10n = AppLocalizations.of(context)!;
+
+    final titleStyle = theme.textTheme.bodyLarge?.copyWith(
+      fontSize: 18,
+      fontWeight: FontWeight.w600,
+    );
+
+    final linkStyle = theme.textTheme.bodyMedium?.copyWith(
+      color: theme.colorScheme.primary,
+    );
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Row(
+          children: [
+            const Icon(Icons.filter_list),
+            const SizedBox(width: 5),
+            Text(l10n.exampleTitle, style: titleStyle),
+          ],
+        ),
+        const SizedBox(height: 12),
+        _buildDataTable(l10n),
+        const SizedBox(height: 10),
+        TextButton(
+          onPressed: () {},
+          style: TextButton.styleFrom(padding: EdgeInsets.zero),
+          child: Text(l10n.downloadSampleCSV, style: linkStyle),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildDataTable(AppLocalizations l10n) {
+    return DataTable(
+      columnSpacing: 20,
+      columns: [
+        DataColumn(label: Text(l10n.tokenColumn)),
+        DataColumn(label: Text(l10n.amount)),
+        DataColumn(label: Text(l10n.currency)),
+        DataColumn(label: Text(l10n.comment)),
+      ],
+      rows: sampleRows.map((row) {
+        return DataRow(cells: [
+          DataCell(Text(row.token)),
+          DataCell(Text(row.amount)),
+          DataCell(Text(row.currency)),
+          DataCell(Text(row.comment)),
+        ]);
+      }).toList(),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/multiple/title.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class TitleMultiplePayout extends StatelessWidget {
+  const TitleMultiplePayout({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: [
+        Text(
+          AppLocalizations.of(context)!.multiplePayout,
+          style: theme.textTheme.titleLarge,
+        ),
+        const SizedBox(width: 20),
+        Text(
+          AppLocalizations.of(context)!.howItWorks,
+          style: theme.textTheme.bodyLarge!.copyWith(
+            color: theme.colorScheme.primary,
+          ),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/multiple/widget.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/pages/dashboard/payouts/multiple/csv.dart';
+import 'package:pweb/pages/dashboard/payouts/multiple/history.dart';
+import 'package:pweb/pages/dashboard/payouts/multiple/sample.dart';
+
+
+class MultiplePayoutForm extends StatelessWidget {
+  const MultiplePayoutForm({super.key});
+
+  static const double _spacing = 12;
+  static const double _bottomSpacing = 40;
+
+  static final List<Widget> _cards = const [
+    FileFormatSampleSection(),
+    UploadCSVSection(),
+    UploadHistorySection(),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        for (int i = 0; i < _cards.length; i++) ...[
+          _StyledCard(child: _cards[i]),
+          if (i < _cards.length - 1) const SizedBox(height: _spacing),
+        ],
+        const SizedBox(height: _bottomSpacing),
+      ],
+    );
+  }
+}
+
+class _StyledCard extends StatelessWidget {
+  final Widget child;
+  const _StyledCard({required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return SizedBox(
+      width: double.infinity,
+      child: Card(
+        margin: const EdgeInsets.all(1),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(12),
+        ),
+        elevation: 4,
+        color: theme.colorScheme.onSecondary,
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: child,
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/payment_form.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pweb/providers/mock_payment.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PaymentFormWidget extends StatelessWidget {
+  const PaymentFormWidget({super.key});
+
+  static const double _smallSpacing = 5;
+  static const double _mediumSpacing = 10;
+  static const double _largeSpacing = 16;
+  static const double _extraSpacing = 15;
+
+  String _formatAmount(double amount) => amount.toStringAsFixed(2);
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = Provider.of<MockPaymentProvider>(context);
+    final theme = Theme.of(context);
+    final loc = AppLocalizations.of(context)!;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(loc.details, style: theme.textTheme.titleMedium),
+        const SizedBox(height: _smallSpacing),
+
+        TextField(
+          keyboardType: const TextInputType.numberWithOptions(decimal: true),
+          decoration: InputDecoration(
+            labelText: loc.amount,
+            border: const OutlineInputBorder(),
+          ),
+          onChanged: (val) {
+            final parsed = double.tryParse(val.replaceAll(',', '.')) ?? 0.0;
+            provider.setAmount(parsed);
+          },
+        ),
+
+        const SizedBox(height: _mediumSpacing),
+
+        Row(
+          spacing: _mediumSpacing,
+          children: [
+            Text(loc.recipientPaysFee, style: theme.textTheme.titleMedium),
+            Switch(
+              value: !provider.payerCoversFee,
+              onChanged: (val) => provider.setPayerCoversFee(!val),
+            ),
+          ],
+        ),
+
+        const SizedBox(height: _largeSpacing),
+
+        Align(
+          alignment: Alignment.center,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              _SummaryRow(label: loc.sentAmount(_formatAmount(provider.amount)), style: theme.textTheme.titleMedium),
+              _SummaryRow(label: loc.fee(_formatAmount(provider.fee)), style: theme.textTheme.titleMedium),
+              _SummaryRow(label: loc.recipientWillReceive(_formatAmount(provider.recipientGets)), style: theme.textTheme.titleMedium),
+
+              const SizedBox(height: _extraSpacing),
+
+              _SummaryRow(
+                label: loc.total(_formatAmount(provider.total)),
+                style: theme.textTheme.titleMedium!.copyWith(fontWeight: FontWeight.w600),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _SummaryRow extends StatelessWidget {
+  final String label;
+  final TextStyle? style;
+
+  const _SummaryRow({required this.label, this.style});
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(label, style: style);
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/single/adress_book/avatar.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/utils/initials.dart';
+
+
+class RecipientAvatar extends StatelessWidget {
+  final String name;
+  final String? avatarUrl;
+  final double avatarRadius;
+  final TextStyle? nameStyle;
+  final bool isVisible;
+
+  static const double _verticalSpacing = 5;
+
+  const RecipientAvatar({
+    super.key,
+    required this.name,
+    this.avatarUrl,
+    required this.avatarRadius,
+    this.nameStyle,
+    required this.isVisible,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final textColor = Theme.of(context).colorScheme.onPrimary;
+
+    return Column(
+      children: [
+        CircleAvatar(
+          radius: avatarRadius,
+          backgroundImage: avatarUrl != null ? NetworkImage(avatarUrl!) : null,
+          backgroundColor: Theme.of(context).colorScheme.primary,
+          child: avatarUrl == null
+              ? Text(
+                  getInitials(name),
+                  style: TextStyle(
+                    color: textColor,
+                    fontSize: avatarRadius * 0.8,
+                  ),
+                )
+              : null,
+        ),
+        const SizedBox(height: _verticalSpacing),
+        if (isVisible)
+          Text(
+            name,
+            overflow: TextOverflow.ellipsis,
+            style: nameStyle ?? Theme.of(context).textTheme.bodyMedium?.copyWith(fontSize: 14),
+          ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/single/adress_book/long_list/info_row.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+class PaymentInfoRow extends StatelessWidget {
+  final String label;
+  final String value;
+
+  const PaymentInfoRow({
+    super.key,
+    required this.label,
+    required this.value,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Text(label, style: Theme.of(context).textTheme.bodySmall),
+        const SizedBox(width: 8),
+        Text(value, style: Theme.of(context).textTheme.bodySmall),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/single/adress_book/long_list/item.dart

@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/dashboard/payouts/single/adress_book/avatar.dart';
+import 'package:pweb/pages/dashboard/payouts/single/adress_book/long_list/info_row.dart';
+import 'package:pweb/utils/payment/label.dart';
+
+
+class RecipientItem extends StatelessWidget {
+  final Recipient recipient;
+  final VoidCallback onTap;
+
+  static const double _horizontalPadding = 16.0;
+  static const double _verticalPadding = 8.0;
+  static const double _avatarRadius = 20;
+  static const double _spacingWidth = 12;
+
+  const RecipientItem({
+    super.key,
+    required this.recipient,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: _horizontalPadding,
+          vertical: _verticalPadding,
+        ),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Expanded(
+              child: ListTile(
+                contentPadding: EdgeInsets.zero,
+                leading: RecipientAvatar(
+                  isVisible: false,
+                  name: recipient.name,
+                  avatarUrl: recipient.avatarUrl,
+                  avatarRadius: _avatarRadius,
+                  nameStyle: Theme.of(context).textTheme.bodyMedium,
+                ),
+                title: Text(recipient.name),
+                subtitle: Text(recipient.email),
+              ),
+            ),
+            const SizedBox(width: _spacingWidth),
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.end,
+              children: [
+                if (recipient.bank?.accountNumber.isNotEmpty == true)
+                  PaymentInfoRow(
+                    label: getPaymentTypeLabel(context, PaymentType.bankAccount),
+                    value: recipient.bank!.accountNumber,
+                  ),
+                if (recipient.card?.pan.isNotEmpty == true)
+                  PaymentInfoRow(
+                    label: getPaymentTypeLabel(context, PaymentType.card),
+                    value: recipient.card!.pan,
+                  ),
+                if (recipient.iban?.iban.isNotEmpty == true)
+                  PaymentInfoRow(
+                    label: getPaymentTypeLabel(context, PaymentType.iban),
+                    value: recipient.iban!.iban,
+                  ),
+                if (recipient.wallet?.walletId.isNotEmpty == true)
+                  PaymentInfoRow(
+                    label: getPaymentTypeLabel(context, PaymentType.wallet),
+                    value: recipient.wallet!.walletId,
+                  ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/single/adress_book/long_list/long_list.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/dashboard/payouts/single/adress_book/long_list/item.dart';
+
+
+class LongListAdressBookPayout extends StatelessWidget {
+  final List<Recipient> filteredRecipients;
+  final ValueChanged<Recipient>? onSelected;
+
+  const LongListAdressBookPayout({
+    super.key,
+    required this.filteredRecipients,
+     this.onSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      itemCount: filteredRecipients.length,
+      itemBuilder: (context, index) {
+        final recipient = filteredRecipients[index];
+        return RecipientItem(
+          recipient: recipient,
+          onTap: () => onSelected!(recipient),
+        );
+      },
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/single/adress_book/short_list.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/recipient/recipient.dart';
+import 'package:pweb/pages/dashboard/payouts/single/adress_book/avatar.dart';
+
+
+class ShortListAdressBookPayout extends StatelessWidget {
+  final List<Recipient> recipients;
+  final ValueChanged<Recipient> onSelected;
+
+  const ShortListAdressBookPayout({
+    super.key,
+    required this.recipients,
+    required this.onSelected,
+  });
+
+  static const double _avatarRadius = 20;
+  static const double _avatarSize = 80;
+  static const EdgeInsets _padding = EdgeInsets.symmetric(horizontal: 10, vertical: 8);
+  static const TextStyle _nameStyle = TextStyle(fontSize: 12);
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Row(
+        children: recipients.map((recipient) {
+          return Padding(
+            padding: _padding,
+            child: InkWell(
+              borderRadius: BorderRadius.circular(5),
+              hoverColor: Theme.of(context).colorScheme.primaryContainer,
+              onTap: () => onSelected(recipient),
+              child: SizedBox(
+                height: _avatarSize,
+                width: _avatarSize,
+                child: RecipientAvatar(
+                  isVisible: true,
+                  name: recipient.name,
+                  avatarUrl: recipient.avatarUrl,
+                  avatarRadius: _avatarRadius,
+                  nameStyle: _nameStyle,
+                ),
+              ),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/single/adress_book/widget.dart

@@ -0,0 +1,103 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/address_book/page/search.dart';
+import 'package:pweb/pages/dashboard/payouts/single/adress_book/long_list/long_list.dart';
+import 'package:pweb/pages/dashboard/payouts/single/adress_book/short_list.dart';
+import 'package:pweb/providers/recipient.dart';
+
+
+class AdressBookPayout extends StatefulWidget {
+  final ValueChanged<Recipient> onSelected;
+
+  const AdressBookPayout({
+    super.key,
+    required this.onSelected,
+  });
+
+  @override
+  State<AdressBookPayout> createState() => _AdressBookPayoutState();
+}
+
+class _AdressBookPayoutState extends State<AdressBookPayout> {
+  static const double _expandedHeight = 400;
+  static const double _collapsedHeight = 200;
+  static const double _cardMargin = 1;
+  static const double _paddingAll = 16;
+  static const double _spacingBetween = 16;
+
+  final FocusNode _searchFocusNode = FocusNode();
+  late final TextEditingController _searchController;
+
+  bool get _isExpanded => _searchFocusNode.hasFocus;
+
+  @override
+  void initState() {
+    super.initState();
+    final provider = context.read<RecipientProvider>();
+    _searchController = TextEditingController(text: provider.query);
+
+    _searchController.addListener(() {
+      provider.setQuery(_searchController.text);
+    });
+  }
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    _searchFocusNode.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = context.watch<RecipientProvider>();
+
+    if (provider.isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (provider.error != null) {
+      return Center(child: Text('Error: ${provider.error}'));
+    }
+
+    return SizedBox(
+      height: _isExpanded ? _expandedHeight : _collapsedHeight,
+      child: Card(
+        margin: const EdgeInsets.all(_cardMargin),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(12),
+        ),
+        elevation: 4,
+        color: Theme.of(context).colorScheme.onSecondary,
+        child: Padding(
+          padding: const EdgeInsets.all(_paddingAll),
+          child: Column(
+            children: [
+              RecipientSearchField(
+                controller: _searchController,
+                focusNode: _searchFocusNode,
+                onChanged: (_) {},
+              ),
+              const SizedBox(height: _spacingBetween),
+              Expanded(
+                child: _isExpanded
+                    ? LongListAdressBookPayout(
+                        filteredRecipients: provider.filteredRecipients,
+                        onSelected: widget.onSelected,
+                      )
+                    : ShortListAdressBookPayout(
+                        recipients: provider.recipients,
+                        onSelected: widget.onSelected,
+                      ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/single/form/details.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+
+import 'package:pweb/pages/payment_methods/form.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PaymentDetailsSection extends StatelessWidget {
+  final bool isFormVisible;
+  final bool isEditable;
+  final VoidCallback? onToggle;
+  final PaymentType? selectedType;
+  final Object? data;
+
+  const PaymentDetailsSection({
+    super.key,
+    required this.isFormVisible,
+    this.onToggle,
+    required this.selectedType,
+    required this.data,
+    required this.isEditable,
+  });
+
+  static const double toggleSpacing = 8.0;
+  static const double formVisibleSpacing = 30.0;
+  static const double formHiddenSpacing = 20.0;
+  static const Duration animationDuration = Duration(milliseconds: 200);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final loc = AppLocalizations.of(context)!;
+
+    final toggleIcon = isFormVisible ? Icons.expand_less : Icons.expand_more;
+    final toggleText = isFormVisible ? loc.hideDetails : loc.showDetails;
+
+    return Column(
+      children: [
+        if (!isEditable && onToggle != null)
+          TextButton.icon(
+            onPressed: onToggle,
+            icon: Icon(toggleIcon, color: theme.colorScheme.primary),
+            label: Text(
+              toggleText,
+              style: TextStyle(color: theme.colorScheme.primary),
+            ),
+          ),
+        const SizedBox(height: toggleSpacing),
+        AnimatedCrossFade(
+          duration: animationDuration,
+          crossFadeState: isFormVisible
+              ? CrossFadeState.showFirst
+              : CrossFadeState.showSecond,
+          firstChild: PaymentMethodForm(
+            key: const ValueKey('formVisible'),
+            isEditable: isEditable,
+            selectedType: selectedType,
+            onChanged: (_) {},
+            initialData: data,
+          ),
+          secondChild: const SizedBox.shrink(key: ValueKey('formHidden')),
+        ),
+        SizedBox(height: isFormVisible ? formVisibleSpacing : formHiddenSpacing),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/single/form/header.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/dashboard/payouts/single/adress_book/avatar.dart';
+
+
+class RecipientHeader extends StatelessWidget{
+  final Recipient recipient;
+
+  const RecipientHeader({super.key, required this.recipient});
+
+  final double _avatarRadius = 20;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return ListTile(
+      contentPadding: EdgeInsets.zero,
+      leading: RecipientAvatar(
+        isVisible: false,
+        name: recipient.name,
+        avatarUrl: recipient.avatarUrl,
+        avatarRadius: _avatarRadius,
+        nameStyle: Theme.of(context).textTheme.bodyMedium,
+      ),
+      title: Text(recipient.name, style: theme.textTheme.titleLarge),
+      subtitle: Text(recipient.email, style: theme.textTheme.bodyLarge),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/single/new_recipient/payout.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+
+import 'package:pweb/pages/dashboard/payouts/single/new_recipient/type.dart';
+
+
+class SinglePayout extends StatelessWidget {
+  final void Function(PaymentType type) onGoToPayment;
+
+  static const double _cardPadding = 30.0;
+  static const double _dividerPaddingVertical = 12.0;
+  static const double _cardBorderRadius = 12.0;
+  static const double _dividerThickness = 1.0;
+
+  const SinglePayout({super.key, required this.onGoToPayment});
+
+  @override
+  Widget build(BuildContext context) {
+    final paymentTypes = PaymentType.values;
+    final dividerColor = Theme.of(context).dividerColor;
+
+    return SizedBox(
+      width: double.infinity,
+      child: Card(
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(_cardBorderRadius),
+        ),
+        elevation: 4,
+        color: Theme.of(context).colorScheme.onSecondary,
+        child: Padding(
+          padding: const EdgeInsets.all(_cardPadding),
+          child: Column(
+            children: [
+              for (int i = 0; i < paymentTypes.length; i++) ...[
+                PaymentTypeTile(
+                  type: paymentTypes[i],
+                  onSelected: onGoToPayment,
+                ),
+                if (i < paymentTypes.length - 1)
+                  Padding(
+                    padding: const EdgeInsets.symmetric(vertical: _dividerPaddingVertical),
+                    child: Divider(thickness: _dividerThickness, color: dividerColor),
+                  ),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/single/new_recipient/type.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+
+import 'package:pweb/pages/payment_methods/icon.dart';
+import 'package:pweb/utils/payment/label.dart';
+
+
+class PaymentTypeTile extends StatelessWidget {
+  final PaymentType type;
+  final void Function(PaymentType type) onSelected;
+
+  const PaymentTypeTile({
+    super.key,
+    required this.type,
+    required this.onSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final label = getPaymentTypeLabel(context, type);
+
+    return InkWell(
+      borderRadius: BorderRadius.circular(8),
+      onTap: () => onSelected(type),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 8),
+        child: Row(
+          children: [
+            Icon(iconForPaymentType(type), size: 24),
+            const SizedBox(width: 12),
+            Text(
+              label,
+              style: Theme.of(context).textTheme.bodyMedium,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/dashboard/payouts/single/widget.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/dashboard/payouts/single/adress_book/widget.dart';
+import 'package:pweb/pages/dashboard/payouts/single/new_recipient/payout.dart';
+
+
+class SinglePayoutForm extends StatelessWidget {
+  final ValueChanged<Recipient> onRecipientSelected;
+  final void Function(PaymentType type) onGoToPayment;
+
+  const SinglePayoutForm({
+    super.key,
+    required this.onRecipientSelected,
+    required this.onGoToPayment,
+  });
+
+  static const double _spacingBetweenAddressAndForm = 20.0;
+  static const double _bottomSpacing = 40.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        AdressBookPayout(onSelected: onRecipientSelected),
+        const SizedBox(height: _spacingBetweenAddressAndForm),
+        SinglePayout(onGoToPayment: onGoToPayment),
+        const SizedBox(height: _bottomSpacing),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/errors/error.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/app/router/pages.dart';
+import 'package:pweb/widgets/vspacer.dart';
+import 'package:pweb/utils/error_handler.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class ErrorPage extends StatelessWidget {
+  final String title;
+  final String errorMessage;
+  final String errorHint;
+
+  const ErrorPage({ 
+    super.key, 
+    required this.title,
+    required this.errorMessage, 
+    required this.errorHint,
+  });
+
+  @override
+  Widget build(BuildContext context) => Center(
+    child: Padding(
+      padding: const EdgeInsets.all(16.0),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(Icons.error_outline, size: 72, color: Theme.of(context).colorScheme.error),
+          const VSpacer(),
+          Text(
+            title,
+            style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Theme.of(context).colorScheme.error),
+            textAlign: TextAlign.center,
+          ),
+          const VSpacer(multiplier: 0.5),
+          ListTile(
+            title: Text(errorMessage, textAlign: TextAlign.center, style: Theme.of(context).textTheme.titleLarge),
+            subtitle: Text(errorHint, textAlign: TextAlign.center, style: Theme.of(context).textTheme.bodySmall),
+          ),
+          const VSpacer(multiplier: 1.5),
+          TextButton(
+            onPressed: () => navigate(context, Pages.root),
+            child: Text(AppLocalizations.of(context)!.goToMainPage),
+          ),
+        ],
+      ),
+    ),
+  );
+}
+
+Widget exceptionToErrorPage({
+  required BuildContext context,
+  required String title,
+  required String errorMessage,
+  required Object exception,
+}) => ErrorPage(
+  title: title, 
+  errorMessage: errorMessage, 
+  errorHint: ErrorHandler.handleError(context, exception),
+);

frontend/pweb/lib/pages/errors/not_found.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/pages/errors/error.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class NotFoundPage extends StatelessWidget {
+  const NotFoundPage({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+    body: ErrorPage(
+      title: AppLocalizations.of(context)!.errorPageNotFoundTitle,
+      errorMessage: AppLocalizations.of(context)!.errorPageNotFoundMessage,
+      errorHint: AppLocalizations.of(context)!.errorPageNotFoundHint,
+    ),
+  );
+}

frontend/pweb/lib/pages/loader.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/pages/loaders/account.dart';
+import 'package:pweb/pages/loaders/permissions.dart';
+
+
+class PageViewLoader extends StatelessWidget {
+  final Widget child;
+
+  const PageViewLoader({super.key, required this.child});
+
+  @override
+  Widget build(BuildContext context) => AccountLoader(
+    child: PermissionsLoader(
+      child: child,
+    ),
+  );
+}
+

frontend/pweb/lib/pages/loaders/account.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/provider/account.dart';
+
+import 'package:pweb/app/router/pages.dart';
+import 'package:pweb/widgets/error/snackbar.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class AccountLoader extends StatelessWidget {
+  final Widget child;
+
+  const AccountLoader({super.key, required this.child});
+
+  @override
+  Widget build(BuildContext context) => Consumer<AccountProvider>(builder: (context, provider, _) {
+    if (provider.isLoading) return const Center(child: CircularProgressIndicator());
+    if (provider.error != null) {
+      postNotifyUserOfErrorX(
+        context: context, 
+        errorSituation: AppLocalizations.of(context)!.errorLogin, 
+        exception: provider.error!,
+      );
+      navigateAndReplace(context, Pages.login);
+    }
+    if ((provider.error == null) && (provider.account == null)) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        provider.restore();
+      });
+      return const Center(child: CircularProgressIndicator());
+    }
+    return child;
+  });
+}
+

frontend/pweb/lib/pages/loaders/organization.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/provider/organizations.dart';
+
+import 'package:pweb/app/router/pages.dart';
+import 'package:pweb/widgets/error/snackbar.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class OrganizationLoader extends StatelessWidget {
+  final Widget child;
+
+  const OrganizationLoader({super.key, required this.child});
+
+  @override
+  Widget build(BuildContext context) => Consumer<OrganizationsProvider>(builder: (context, provider, _) {
+    if (provider.isLoading) return const Center(child: CircularProgressIndicator());
+    if (provider.error != null) {
+      postNotifyUserOfErrorX(
+        context: context, 
+        errorSituation: AppLocalizations.of(context)!.errorLogin, 
+        exception: provider.error!,
+      );
+      navigateAndReplace(context, Pages.login);
+    }
+    if ((provider.error == null) && (!provider.isOrganizationSet)) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        provider.load();
+      });
+      return const Center(child: CircularProgressIndicator());
+    }
+    return child;
+  });
+}

frontend/pweb/lib/pages/loaders/permissions.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/provider/permissions.dart';
+
+import 'package:pweb/app/router/pages.dart';
+import 'package:pweb/widgets/error/snackbar.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PermissionsLoader extends StatelessWidget {
+  final Widget child;
+
+  const PermissionsLoader({super.key, required this.child});
+
+  @override
+  Widget build(BuildContext context) => Consumer<PermissionsProvider>(builder: (context, provider, _) {
+    if (provider.isLoading) return const Center(child: CircularProgressIndicator());
+    if (provider.error != null) {
+      postNotifyUserOfErrorX(
+        context: context, 
+        errorSituation: AppLocalizations.of(context)!.errorLogin, 
+        exception: provider.error!,
+      );
+      navigateAndReplace(context, Pages.login);
+    }
+    if ((provider.error == null) && (provider.permissions.isEmpty)) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        provider.load();
+      });
+      return const Center(child: CircularProgressIndicator());
+    }
+    return child;
+  });
+}

frontend/pweb/lib/pages/login/app_bar.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/widgets/locale.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class LoginAppBar extends StatelessWidget implements PreferredSizeWidget {
+  const LoginAppBar({super.key});
+
+  @override
+  Widget build(BuildContext context) => AppBar(
+    automaticallyImplyLeading: false,
+    actions: const [
+      LocaleChangerDropdown(availableLocales: AppLocalizations.supportedLocales),
+    ],
+  );
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+}

frontend/pweb/lib/pages/login/buttons.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/pages/login/login.dart';
+import 'package:pweb/pages/login/signup.dart';
+import 'package:pweb/widgets/hspacer.dart';
+
+
+class ButtonsRow extends StatelessWidget {
+  final Future<String?> Function() login;
+  final VoidCallback onSignUp;
+  final bool isEnabled;
+
+  const ButtonsRow({
+    super.key,
+    required this.login,
+    required this.onSignUp,
+    required this.isEnabled,
+  });
+
+  @override
+  Widget build(BuildContext context) => Row(
+    children: [
+      LoginButton(onPressed: isEnabled ? () => login() : null),
+      SignupButton(onPressed: onSignUp),
+      HSpacer(multiplier: 0.25),
+    ],
+  );
+}

frontend/pweb/lib/pages/login/form.dart

@@ -0,0 +1,106 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/provider/pfe/provider.dart';
+
+import 'package:pweb/app/router/pages.dart';
+import 'package:pweb/pages/login/buttons.dart';
+import 'package:pweb/pages/login/header.dart';
+import 'package:pweb/widgets/constrained_form.dart';
+import 'package:pweb/widgets/password/hint/short.dart';
+import 'package:pweb/widgets/password/password.dart';
+import 'package:pweb/widgets/username.dart';
+import 'package:pweb/widgets/vspacer.dart';
+import 'package:pweb/widgets/error/snackbar.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class LoginForm extends StatefulWidget {
+  const LoginForm({super.key});
+
+  @override
+  State<LoginForm> createState() => _LoginFormState();
+}
+
+class _LoginFormState extends State<LoginForm> {
+  final TextEditingController _usernameController = TextEditingController();
+  final TextEditingController _passwordController = TextEditingController();
+  final _formKey = GlobalKey<FormState>();
+
+  // ValueNotifiers for validation state
+  final ValueNotifier<bool> _isUsernameAcceptable = ValueNotifier<bool>(false);
+  final ValueNotifier<bool> _isPasswordAcceptable = ValueNotifier<bool>(false);
+
+  Future<String?> _login(BuildContext context, VoidCallback onLogin, void Function(Object e) onError) async {
+    final pfeProvider = Provider.of<PfeProvider>(context, listen: false);
+
+    try {
+      // final account = await pfeProvider.login(
+      //   email: _usernameController.text,
+      //   password: _passwordController.text,
+      // );
+      onLogin();
+      return 'ok';
+    } catch (e) {
+      onError(pfeProvider.error == null ? e : pfeProvider.error!);
+    }
+    return null;
+  }
+
+  @override
+  void dispose() {
+    _usernameController.dispose();
+    _passwordController.dispose();
+    _isUsernameAcceptable.dispose();
+    _isPasswordAcceptable.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) => Align(
+    alignment: Alignment.center,
+    child: ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: 400, maxHeight: 300),
+      child: Card(
+      child: ConstrainedForm(
+        formKey: _formKey,
+        children: [
+          const LoginHeader(),
+          const VSpacer(multiplier: 1.5),
+          UsernameField(
+            controller: _usernameController,
+            onValid: (isValid) => _isUsernameAcceptable.value = isValid,
+          ),
+          VSpacer(),
+          defaulRulesPasswordField(
+            context,
+            controller: _passwordController,
+            validationRuleBuilder: (rules, value) => shortValidation(context, rules, value),
+            onValid: (isValid) => _isPasswordAcceptable.value = isValid,
+          ),
+          VSpacer(multiplier: 2.0),
+          ValueListenableBuilder<bool>(
+            valueListenable: _isUsernameAcceptable,
+            builder: (context, isUsernameValid, child) => ValueListenableBuilder<bool>(
+              valueListenable: _isPasswordAcceptable,
+              builder: (context, isPasswordValid, child) => ButtonsRow(
+                onSignUp: () => navigate(context, Pages.signup),
+                login: () => _login(
+                  context, 
+                  () => navigateAndReplace(context, Pages.sfactor),
+                  (e) => postNotifyUserOfErrorX(
+                    context: context, 
+                    errorSituation: AppLocalizations.of(context)!.errorLogin, 
+                    exception: e,
+                  ),
+                ),
+                isEnabled: isUsernameValid && isPasswordValid,
+              ),
+            ),
+          ),
+        ],
+      ),
+    )));
+  }

frontend/pweb/lib/pages/login/header.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:pweb/config/constants.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+import 'package:pweb/widgets/hspacer.dart';
+import 'package:pweb/widgets/logo.dart';
+
+
+class LoginHeader extends StatelessWidget {
+  const LoginHeader({super.key});
+
+  @override
+  Widget build(BuildContext context) => Row(
+    children: [
+      const ServiceLogo(size: 36),
+      const HSpacer(multiplier: 0.75),
+      Text(
+        '${AppConfig.appName} ${AppLocalizations.of(context)!.login}',
+        style: Theme.of(context).textTheme.titleLarge,
+        textAlign: TextAlign.center,
+      ),
+    ],
+  );
+}

frontend/pweb/lib/pages/login/login.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/provider/account.dart';
+
+import 'package:pweb/widgets/vspacer.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class LoginButton extends StatelessWidget {
+  final VoidCallback? onPressed;
+
+  const LoginButton({
+    super.key,
+    required this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) => Consumer<AccountProvider>(builder: (context, provider, _) => ElevatedButton(
+    onPressed: provider.isLoading ? null : onPressed,
+    child: 
+      Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (provider.isLoading) 
+            ...[
+              SizedBox(
+                width: 20,
+                height: 20,
+                child: CircularProgressIndicator(),
+              ),
+              VSpacer(multiplier: 0.25),
+            ],
+          Text(AppLocalizations.of(context)!.login),
+        ],
+      ),
+  ));
+}

frontend/pweb/lib/pages/login/page.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/pages/login/app_bar.dart';
+import 'package:pweb/pages/login/form.dart';
+import 'package:pweb/pages/with_footer.dart';
+
+
+class LoginPage extends StatelessWidget {
+  const LoginPage({super.key});
+
+  @override
+  Widget build(BuildContext context) => PageWithFooter(
+    appBar: const LoginAppBar(),
+    child: LoginForm(),
+  );
+}

frontend/pweb/lib/pages/login/signup.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class SignupButton extends StatelessWidget {
+  final VoidCallback? onPressed;
+
+  const SignupButton({
+    super.key,
+    required this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+      onPressed: onPressed,
+      child: Text(AppLocalizations.of(context)!.signup),
+    );
+  }
+}

frontend/pweb/lib/pages/payment_methods/add/card.dart

@@ -0,0 +1,112 @@
+import 'package:flutter/material.dart';
+
+import 'package:flutter_multi_formatter/flutter_multi_formatter.dart';
+
+import 'package:pshared/models/payment/methods/card.dart';
+
+import 'package:pweb/utils/text_field_styles.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class CardFormMinimal extends StatefulWidget {
+  final void Function(CardPaymentMethod) onChanged;
+  final CardPaymentMethod? initialData;
+  final bool isEditable;
+
+  const CardFormMinimal({
+    super.key,
+    required this.onChanged,
+    this.initialData,
+    required this.isEditable,
+  });
+
+  @override
+  State<CardFormMinimal> createState() => _CardFormMinimalState();
+}
+
+class _CardFormMinimalState extends State<CardFormMinimal> {
+  final _formKey = GlobalKey<FormState>();
+  late TextEditingController _panController;
+  late TextEditingController _firstNameController;
+  late TextEditingController _lastNameController;
+
+  @override
+  void initState() {
+    super.initState();
+    _panController = TextEditingController(text: widget.initialData?.pan ?? '');
+    _firstNameController = TextEditingController(text: widget.initialData?.firstName ?? '');
+    _lastNameController = TextEditingController(text: widget.initialData?.lastName ?? '');
+
+    WidgetsBinding.instance.addPostFrameCallback((_) => _emitIfValid());
+  }
+
+  void _emitIfValid() {
+    if (_formKey.currentState?.validate() ?? false) {
+      widget.onChanged(
+        CardPaymentMethod(
+          pan: _panController.text.replaceAll(' ', ''),
+          firstName: _firstNameController.text,
+          lastName: _lastNameController.text,
+        ),
+      );
+    }
+  }
+
+  @override
+  void didUpdateWidget(covariant CardFormMinimal oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.initialData == null && oldWidget.initialData != null) {
+      _panController.clear();
+      _firstNameController.clear();
+      _lastNameController.clear();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return Form(
+      key: _formKey,
+      onChanged: _emitIfValid,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _panController,
+            decoration: getInputDecoration(context, l10n.cardNumber, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            keyboardType: TextInputType.number,
+            inputFormatters: [CreditCardNumberInputFormatter()],
+            validator: (v) => (v == null || v.replaceAll(' ', '').length < 12) ? l10n.enterCardNumber : null,
+          ),
+          const SizedBox(height: 12),
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _firstNameController,
+            decoration: getInputDecoration(context, l10n.firstName, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (v) => (v == null || v.isEmpty) ? l10n.enterFirstName : null,
+          ),
+          const SizedBox(height: 12),
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _lastNameController,
+            decoration: getInputDecoration(context, l10n.lastName, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (v) => (v == null || v.isEmpty) ? l10n.enterLastName : null,
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _panController.dispose();
+    _firstNameController.dispose();
+    _lastNameController.dispose();
+    super.dispose();
+  }
+}

frontend/pweb/lib/pages/payment_methods/add/iban.dart

@@ -0,0 +1,122 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/methods/iban.dart';
+
+import 'package:pweb/utils/text_field_styles.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class IbanForm extends StatefulWidget {
+  final void Function(IbanPaymentMethod) onChanged;
+  final IbanPaymentMethod? initialData;
+  final bool isEditable;
+
+  const IbanForm({
+    super.key,
+    required this.onChanged,
+    this.initialData,
+    required this.isEditable,
+  });
+
+  @override
+  State<IbanForm> createState() => _IbanFormState();
+}
+
+class _IbanFormState extends State<IbanForm> {
+  final _formKey = GlobalKey<FormState>();
+  late TextEditingController _ibanController;
+  late TextEditingController _accountHolderController;
+  late TextEditingController _bicController;
+  late TextEditingController _bankNameController;
+
+  @override
+  void initState() {
+    super.initState();
+    _ibanController = TextEditingController(text: widget.initialData?.iban ?? '');
+    _accountHolderController = TextEditingController(text: widget.initialData?.accountHolder ?? '');
+    _bicController = TextEditingController(text: widget.initialData?.bic ?? '');
+    _bankNameController = TextEditingController(text: widget.initialData?.bankName ?? '');
+
+    WidgetsBinding.instance.addPostFrameCallback((_) => _emitIfValid());
+  }
+
+  void _emitIfValid() {
+    if (_formKey.currentState?.validate() ?? false) {
+      widget.onChanged(
+        IbanPaymentMethod(
+          iban: _ibanController.text,
+          accountHolder: _accountHolderController.text,
+          bic: _bicController.text,
+          bankName: _bankNameController.text,
+        ),
+      );
+    }
+  }
+
+  @override
+  void didUpdateWidget(covariant IbanForm oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.initialData == null && oldWidget.initialData != null) {
+      _ibanController.clear();
+      _accountHolderController.clear();
+      _bicController.clear();
+      _bankNameController.clear();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+
+    return Form(
+      key: _formKey,
+      onChanged: _emitIfValid,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _ibanController,
+            decoration: getInputDecoration(context, l10n.iban, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (val) => (val == null || val.isEmpty) ? l10n.enterIban : null,
+          ),
+          const SizedBox(height: 12),
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _accountHolderController,
+            decoration: getInputDecoration(context, l10n.accountHolder, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (val) => (val == null || val.isEmpty) ? l10n.enterAccountHolder : null,
+          ),
+          const SizedBox(height: 12),
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _bicController,
+            decoration: getInputDecoration(context, l10n.bic, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (val) => (val == null || val.isEmpty) ? l10n.enterBic : null,
+          ),
+          const SizedBox(height: 12),
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _bankNameController,
+            decoration: getInputDecoration(context, l10n.bankName, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (val) => (val == null || val.isEmpty) ? l10n.enterBankName : null,
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _ibanController.dispose();
+    _accountHolderController.dispose();
+    _bicController.dispose();
+    _bankNameController.dispose();
+    super.dispose();
+  }
+}

frontend/pweb/lib/pages/payment_methods/add/method_selector.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+import 'package:pweb/utils/payment/label.dart';
+
+
+class PaymentMethodTypeSelector extends StatelessWidget {
+  final PaymentType? value;
+  final ValueChanged<PaymentType?> onChanged;
+
+  const PaymentMethodTypeSelector({
+    super.key,
+    required this.value,
+    required this.onChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+
+    return DropdownButtonFormField<PaymentType>(
+      value: value,
+      decoration: InputDecoration(labelText: l10n.paymentType),
+      items: PaymentType.values.map((type) {
+        final label = getPaymentTypeLabel(context, type);
+        return DropdownMenuItem(value: type, child: Text(label));
+      }).toList(),
+      onChanged: onChanged,
+      validator: (val) => val == null ? l10n.selectPaymentType : null,
+    );
+  }
+}

frontend/pweb/lib/pages/payment_methods/add/russian_bank.dart

@@ -0,0 +1,162 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/methods/russian_bank.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+import 'package:pweb/utils/text_field_styles.dart';
+
+
+class RussianBankForm extends StatefulWidget {
+  final void Function(RussianBankAccountPaymentMethod) onChanged;
+  final RussianBankAccountPaymentMethod? initialData;
+  final bool isEditable;
+
+  const RussianBankForm({
+    super.key,
+    required this.onChanged,
+    this.initialData,
+    required this.isEditable,
+  });
+
+  @override
+  State<RussianBankForm> createState() => _RussianBankFormState();
+}
+
+class _RussianBankFormState extends State<RussianBankForm> {
+  final _formKey = GlobalKey<FormState>();
+
+  late final TextEditingController _recipientNameController;
+  late final TextEditingController _innController;
+  late final TextEditingController _kppController;
+  late final TextEditingController _bankNameController;
+  late final TextEditingController _bikController;
+  late final TextEditingController _accountNumberController;
+  late final TextEditingController _correspondentAccountController;
+
+  @override
+  void initState() {
+    super.initState();
+    _recipientNameController = TextEditingController(text: widget.initialData?.recipientName ?? '');
+    _innController = TextEditingController(text: widget.initialData?.inn ?? '');
+    _kppController = TextEditingController(text: widget.initialData?.kpp ?? '');
+    _bankNameController = TextEditingController(text: widget.initialData?.bankName ?? '');
+    _bikController = TextEditingController(text: widget.initialData?.bik ?? '');
+    _accountNumberController = TextEditingController(text: widget.initialData?.accountNumber ?? '');
+    _correspondentAccountController = TextEditingController(text: widget.initialData?.correspondentAccount ?? '');
+
+    WidgetsBinding.instance.addPostFrameCallback((_) => _emitIfValid());
+  }
+
+  void _emitIfValid() {
+    if (_formKey.currentState?.validate() ?? false) {
+      widget.onChanged(
+        RussianBankAccountPaymentMethod(
+          recipientName: _recipientNameController.text,
+          inn: _innController.text,
+          kpp: _kppController.text,
+          bankName: _bankNameController.text,
+          bik: _bikController.text,
+          accountNumber: _accountNumberController.text,
+          correspondentAccount: _correspondentAccountController.text,
+        ),
+      );
+    }
+  }
+
+  @override
+  void didUpdateWidget(covariant RussianBankForm oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.initialData == null && oldWidget.initialData != null) {
+      _recipientNameController.clear();
+      _innController.clear();
+      _kppController.clear();
+      _bankNameController.clear();
+      _bikController.clear();
+      _accountNumberController.clear();
+      _correspondentAccountController.clear();
+    }
+  }
+
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+
+    return Form(
+      key: _formKey,
+      onChanged: _emitIfValid,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _recipientNameController,
+            decoration: getInputDecoration(context, l10n.recipientName, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (val) => (val == null || val.isEmpty) ? l10n.enterRecipientName : null,
+          ),
+          const SizedBox(height: 12),
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _innController,
+            decoration: getInputDecoration(context, l10n.inn, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (val) => (val == null || val.isEmpty) ? l10n.enterInn : null,
+          ),
+          const SizedBox(height: 12),
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _kppController,
+            decoration: getInputDecoration(context, l10n.kpp, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (val) => (val == null || val.isEmpty) ? l10n.enterKpp : null,
+          ),
+          const SizedBox(height: 12),
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _bankNameController,
+            decoration: getInputDecoration(context, l10n.bankName, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (val) => (val == null || val.isEmpty) ? l10n.enterBankName : null,
+          ),
+          const SizedBox(height: 12),
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _bikController,
+            decoration: getInputDecoration(context, l10n.bik, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (val) => (val == null || val.isEmpty) ? l10n.enterBik : null,
+          ),
+          const SizedBox(height: 12),
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _accountNumberController,
+            decoration: getInputDecoration(context, l10n.accountNumber, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (val) => (val == null || val.isEmpty) ? l10n.enterAccountNumber : null,
+          ),
+          const SizedBox(height: 12),
+          TextFormField(
+            readOnly: !widget.isEditable,
+            controller: _correspondentAccountController,
+            decoration: getInputDecoration(context, l10n.correspondentAccount, widget.isEditable),
+            style: getTextFieldStyle(context, widget.isEditable),
+            validator: (val) => (val == null || val.isEmpty) ? l10n.enterCorrespondentAccount : null,
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _recipientNameController.dispose();
+    _innController.dispose();
+    _kppController.dispose();
+    _bankNameController.dispose();
+    _bikController.dispose();
+    _accountNumberController.dispose();
+    _correspondentAccountController.dispose();
+    super.dispose();
+  }
+}

frontend/pweb/lib/pages/payment_methods/add/wallet.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/methods/wallet.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+import 'package:pweb/utils/text_field_styles.dart';
+
+
+class WalletForm extends StatefulWidget {
+  final void Function(WalletPaymentMethod) onChanged;
+  final WalletPaymentMethod? initialData;
+  final bool isEditable;
+
+  const WalletForm({
+    super.key,
+    required this.onChanged,
+    this.initialData,
+    required this.isEditable,
+  });
+
+  @override
+  State<WalletForm> createState() => _WalletFormState();
+}
+
+class _WalletFormState extends State<WalletForm> {
+  late TextEditingController _walletIdController;
+
+  @override
+  void initState() {
+    super.initState();
+    _walletIdController = TextEditingController(text: widget.initialData?.walletId);
+  }
+
+  void _emit() {
+    if (_walletIdController.text.isNotEmpty) {
+      widget.onChanged(WalletPaymentMethod(walletId: _walletIdController.text));
+    } else {
+    }
+  }
+
+  @override
+  void didUpdateWidget(covariant WalletForm oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.initialData == null && oldWidget.initialData != null) {
+      _walletIdController.clear();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+
+    return TextFormField(
+      readOnly: !widget.isEditable,
+      controller: _walletIdController,
+      decoration: getInputDecoration(context, l10n.walletId, widget.isEditable),
+      style: getTextFieldStyle(context, widget.isEditable),
+      onChanged: (_) => _emit(),
+      validator: (val) => (val?.isEmpty ?? true) ? l10n.enterWalletId : null,
+    );
+  }
+}

frontend/pweb/lib/pages/payment_methods/add/widget.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+
+import 'package:pweb/pages/payment_methods/add/method_selector.dart';
+import 'package:pweb/pages/payment_methods/form.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class AddPaymentMethodDialog extends StatefulWidget {
+  const AddPaymentMethodDialog({super.key});
+
+  @override
+  State<AddPaymentMethodDialog> createState() => _AddPaymentMethodDialogState();
+}
+
+class _AddPaymentMethodDialogState extends State<AddPaymentMethodDialog> {
+  final _formKey = GlobalKey<FormState>();
+  PaymentType? _selectedType;
+
+  // Holds current result from the selected form
+  Object? _currentMethod;
+
+  void _submit() {
+    if (_formKey.currentState!.validate()) {
+      _formKey.currentState!.save();
+
+      if (_currentMethod case final Object method) {
+        Navigator.of(context).pop(method);
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+
+    return AlertDialog(
+      title: Text(l10n.addPaymentMethod),
+      content: Form(
+        key: _formKey,
+        child: SingleChildScrollView(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              PaymentMethodTypeSelector(
+                value: _selectedType,
+                onChanged: (val) => setState(() {
+                  _selectedType = val;
+                  _currentMethod = null;
+                }),
+              ),
+              const SizedBox(height: 16),
+              if (_selectedType != null)
+                PaymentMethodForm(
+                  selectedType: _selectedType,
+                  onChanged: (val) => _currentMethod = val,
+                ),
+            ],
+          ),
+        ),
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => Navigator.of(context).pop(),
+          child: Text(l10n.cancel),
+        ),
+        ElevatedButton(
+          onPressed: _submit,
+          child: Text(l10n.add),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/payment_methods/delete_confirmation.dart

@@ -0,0 +1,23 @@
+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>(
+    context: context,
+    builder: (_) => AlertDialog(
+      title: Text(l10n.delete),
+      content: Text(l10n.deletePaymentConfirmation),
+      actions: [
+        TextButton(
+          onPressed: () => Navigator.of(context).pop(false),
+          child: Text(l10n.cancel),
+        ),
+        ElevatedButton(
+          onPressed: () => Navigator.of(context).pop(true),
+          child: Text(l10n.delete),
+        ),
+      ],
+    ),
+  ) ?? false;
+}

frontend/pweb/lib/pages/payment_methods/form.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/methods/card.dart';
+import 'package:pshared/models/payment/methods/iban.dart';
+import 'package:pshared/models/payment/methods/russian_bank.dart';
+import 'package:pshared/models/payment/methods/wallet.dart';
+import 'package:pshared/models/payment/type.dart';
+
+import 'package:pweb/pages/payment_methods/add/card.dart';
+import 'package:pweb/pages/payment_methods/add/iban.dart';
+import 'package:pweb/pages/payment_methods/add/russian_bank.dart';
+import 'package:pweb/pages/payment_methods/add/wallet.dart';
+
+
+class PaymentMethodForm extends StatelessWidget {
+  final PaymentType? selectedType;
+  final ValueChanged<Object?> onChanged;
+  final Object? initialData;
+  final bool isEditable;
+
+  const PaymentMethodForm({
+    super.key,
+    required this.selectedType,
+    required this.onChanged,
+    this.initialData,
+    this.isEditable = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return switch (selectedType) {
+      PaymentType.card => CardFormMinimal(
+        onChanged: onChanged,
+        initialData: initialData as CardPaymentMethod?,
+        isEditable: isEditable,
+      ),
+      PaymentType.iban => IbanForm(
+        onChanged: onChanged,
+        initialData: initialData as IbanPaymentMethod?,
+        isEditable: isEditable,
+      ),
+      PaymentType.wallet => WalletForm(
+        onChanged: onChanged,
+        initialData: initialData as WalletPaymentMethod?,
+        isEditable: isEditable,
+      ),
+      PaymentType.bankAccount => RussianBankForm(
+        onChanged: onChanged,
+        initialData: initialData as RussianBankAccountPaymentMethod?,
+        isEditable: isEditable,
+      ),
+      _ => const SizedBox.shrink(),
+    };
+  }
+}

frontend/pweb/lib/pages/payment_methods/icon.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+
+
+IconData iconForPaymentType(PaymentType type) {
+  switch (type) {
+    case PaymentType.bankAccount:
+      return Icons.account_balance;
+    case PaymentType.iban:
+      return Icons.language;
+    case PaymentType.wallet:
+      return Icons.account_balance_wallet;
+    case PaymentType.card:
+      return Icons.credit_card;
+  }
+}

frontend/pweb/lib/pages/payment_methods/page.dart

@@ -0,0 +1,232 @@
+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_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});
+
+  @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();
+      });
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    // Initial values
+    _availableTypes = {};
+    _selectedType = widget.type ?? PaymentType.bankAccount;
+  }
+
+  @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;
+
+    // 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),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/payment_methods/title.dart

@@ -0,0 +1,100 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/pages/payment_methods/icon.dart';
+import 'package:pshared/models/payment/methods/type.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+class PaymentMethodTile extends StatelessWidget {
+  const PaymentMethodTile({
+    super.key,
+    required this.method,
+    required this.index,
+    required this.makeMain,
+    required this.toggleEnabled,
+    required this.edit,
+    required this.delete,
+  });
+
+  final PaymentMethod method;
+  final int index;
+  final VoidCallback makeMain;
+  final ValueChanged<bool> toggleEnabled;
+  final VoidCallback edit;
+  final VoidCallback delete;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final theme = Theme.of(context);
+
+    return Opacity(
+      opacity: method.isEnabled ? 1 : 0.5,
+      child: Card(
+        margin: const EdgeInsets.symmetric(vertical: 4),
+        elevation: 0,
+        child: ListTile(
+          key: ValueKey(method.id),
+          leading: Icon(iconForPaymentType(method.type)),
+          onTap: makeMain,
+          title: Row(
+            children: [
+              Expanded(child: Text(method.label)),
+              Text(
+                method.details,
+                style: theme.textTheme.bodySmall,
+              ),
+            ],
+          ),
+          trailing: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              _buildMakeMainButton(context),
+              _buildEnabledSwitch(),
+              _buildPopupMenu(l10n),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildMakeMainButton(BuildContext context) {
+    final theme = Theme.of(context);
+    return IconButton(
+      tooltip: 'Make main',
+      icon: Icon(
+        method.isMain ? Icons.star : Icons.star_outline,
+        color: method.isMain ? theme.colorScheme.primary : null,
+      ),
+      onPressed: makeMain,
+    );
+  }
+
+  Widget _buildEnabledSwitch() {
+    return Switch.adaptive(
+      value: method.isEnabled,
+      onChanged: toggleEnabled,
+    );
+  }
+
+  Widget _buildPopupMenu(AppLocalizations l10n) {
+    return PopupMenuButton<String>(
+      tooltip: l10n.moreActions,
+      onSelected: (value) {
+        switch (value) {
+          case 'edit':
+            edit();
+            break;
+          case 'delete':
+            delete();
+            break;
+        }
+      },
+      itemBuilder: (_) => [
+        PopupMenuItem(value: 'edit', child: Text(l10n.edit)),
+        PopupMenuItem(value: 'delete', child: Text(l10n.delete)),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/methods/advanced.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PaymentConfigAdvanced extends StatelessWidget {
+  const PaymentConfigAdvanced({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+
+    return ExpansionTile(
+      title: Text(l10n.advanced),
+      tilePadding: const EdgeInsets.symmetric(horizontal: 16),
+      childrenPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      children: [Text(l10n.fallbackExplanation)],
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/methods/controller.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/models/payment/methods/data.dart';
+import 'package:pshared/models/payment/methods/type.dart';
+
+import 'package:pweb/providers/payment_methods.dart';
+import 'package:pweb/pages/payment_methods/add/widget.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PaymentConfigController {
+  final BuildContext context;
+
+  PaymentConfigController(this.context);
+
+  void loadMethods() {
+    context.read<PaymentMethodsProvider>().loadMethods();
+  }
+
+  Future<void> addMethod() async {
+    await showDialog<PaymentMethodData>(
+      context: context,
+      builder: (_) => const AddPaymentMethodDialog(),
+    );
+    loadMethods();
+  }
+
+  Future<void> editMethod(PaymentMethod method) async {
+    // TODO: implement edit functionality
+  }
+
+  Future<void> deleteMethod(PaymentMethod method) async {
+    final l10n = AppLocalizations.of(context)!;
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (_) => AlertDialog(
+        title: Text(l10n.delete),
+        content: Text(l10n.deletePaymentConfirmation),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.pop(context, false),
+            child: Text(l10n.cancel),
+          ),
+          ElevatedButton(
+            onPressed: () => Navigator.pop(context, true),
+            child: Text(l10n.delete),
+          ),
+        ],
+      ),
+    );
+
+    if (confirmed == true) {
+      context.read<PaymentMethodsProvider>().deleteMethod(method);
+    }
+  }
+
+  void toggleEnabled(PaymentMethod method, bool value) {
+    context.read<PaymentMethodsProvider>().toggleEnabled(method, value);
+  }
+
+  void makeMain(PaymentMethod method) {
+    context.read<PaymentMethodsProvider>().makeMain(method);
+  }
+
+  void reorder(int oldIndex, int newIndex) {
+    context.read<PaymentMethodsProvider>().reorderMethods(oldIndex, newIndex);
+  }
+}

frontend/pweb/lib/pages/payment_page/methods/header.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PaymentConfigHeader extends StatelessWidget {
+  final VoidCallback onAdd;
+  const PaymentConfigHeader({super.key, required this.onAdd});
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final theme = Theme.of(context);
+
+    return Column(
+      children: [
+        Text(
+          l10n.paymentConfigTitle,
+          style: theme.textTheme.headlineSmall,
+          textAlign: TextAlign.center,
+        ),
+        const SizedBox(height: 4),
+        Text(l10n.paymentConfigSubtitle, textAlign: TextAlign.center),
+        const SizedBox(height: 12),
+        SizedBox(
+          width: double.infinity,
+          child: OutlinedButton.icon(
+            icon: const Icon(Icons.add),
+            label: Text(l10n.addPaymentMethod),
+            onPressed: onAdd,
+          ),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/methods/list.dart

@@ -0,0 +1,40 @@
+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/providers/payment_methods.dart';
+
+
+class PaymentConfigList extends StatelessWidget {
+  final PaymentConfigController controller;
+  const PaymentConfigList({super.key, required this.controller});
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = context.watch<PaymentMethodsProvider>();
+
+    return ReorderableListView.builder(
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      itemCount: provider.methods.length,
+      onReorder: controller.reorder,
+      itemBuilder: (context, index) {
+        final method = provider.methods[index];
+        return ReorderableDragStartListener(
+          key: Key(method.id),
+          index: index,
+          child: PaymentMethodTile(
+            method: method,
+            index: index,
+            makeMain: () => controller.makeMain(method),
+            toggleEnabled: (v) => controller.toggleEnabled(method, v),
+            edit: () => controller.editMethod(method),
+            delete: () => controller.deleteMethod(method),
+          ),
+        );
+      },
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/methods/widget.dart

@@ -0,0 +1,50 @@
+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';
+
+
+class MethodsWidget extends StatefulWidget {
+  const MethodsWidget({super.key});
+
+  @override
+  State<MethodsWidget> createState() => _MethodsWidgetState();
+}
+
+class _MethodsWidgetState extends State<MethodsWidget> {
+  late final PaymentConfigController controller;
+
+  @override
+  void initState() {
+    super.initState();
+    controller = PaymentConfigController(context);
+    controller.loadMethods();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Card(
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      elevation: theme.cardTheme.elevation ?? 4,
+      color: theme.colorScheme.onSecondary,
+      child: SafeArea(
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              PaymentConfigHeader(onAdd: controller.addMethod),
+              const SizedBox(height: 12),
+              PaymentConfigList(controller: controller),
+              const SizedBox(height: 12),
+              const PaymentConfigAdvanced(),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/page.dart

@@ -0,0 +1,37 @@
+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/providers/payment_methods.dart';
+
+
+class PaymentConfigPage extends StatelessWidget {
+  final Function(Wallet) onWalletTap;
+
+  const PaymentConfigPage({super.key, required this.onWalletTap});
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = context.watch<PaymentMethodsProvider>();
+
+    if (provider.isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (provider.error != null) {
+      return Center(child: Text('Error: ${provider.error}'));
+    }
+
+    return Column(
+      children: [
+        MethodsWidget(),
+        Expanded(
+          child: WalletWidgets(onWalletTap: onWalletTap),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/wallet/card.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import 'package:pweb/models/wallet.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/amount.dart';
+import 'package:pweb/providers/wallets.dart';
+import 'package:pweb/utils/currency.dart';
+
+
+class WalletCard extends StatelessWidget {
+  final Wallet wallet;
+  final VoidCallback onTap;
+
+  const WalletCard({super.key, required this.wallet, required this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    
+    return Card(
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      elevation: theme.cardTheme.elevation ?? 4,
+      color: theme.colorScheme.onSecondary,
+      child: InkWell(
+        borderRadius: BorderRadius.circular(12),
+        onTap: onTap,
+        child: Container(
+          padding: const EdgeInsets.only(left: 50, top: 16, bottom: 16),
+          child: Row(
+            spacing: 3,
+            children: [
+              CircleAvatar(
+                radius: 24,
+                child: Icon(iconForCurrencyType(wallet.currency), size: 28),
+              ),
+              const SizedBox(width: 16),
+              Expanded(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    BalanceAmount(
+                      wallet: wallet,
+                      onToggleVisibility: () {
+                        context.read<WalletsProvider>().toggleVisibility(wallet.id);
+                      },
+                    ),
+                    Text(
+                      wallet.name,
+                      style: theme.textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.w500),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/wallet/edit/buttons/buttons.dart

@@ -0,0 +1,51 @@
+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/providers/wallets.dart';
+import 'package:pweb/utils/dimensions.dart';
+
+
+class ButtonsWalletWidget extends StatelessWidget {
+  const ButtonsWalletWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = context.watch<WalletsProvider>();
+    final wallet = provider.wallets?.first;
+
+    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(
+        mainAxisAlignment: MainAxisAlignment.spaceAround,
+        children: [
+          Expanded(
+            child: SendPayoutButton(),
+          ),
+          VerticalDivider(
+            color: Theme.of(context).colorScheme.primary,
+            thickness: 1,
+            width: 10,
+          ),
+          Expanded(
+            child: TopUpButton(),
+          ),
+        ],
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/wallet/edit/buttons/save.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/models/wallet.dart';
+import 'package:pweb/utils/dimensions.dart';
+
+
+class SaveWalletButton extends StatelessWidget {
+  final Wallet wallet;
+  final TextEditingController nameController;
+  final TextEditingController balanceController;
+  final VoidCallback onSave; // Changed to VoidCallback
+
+  const SaveWalletButton({
+    super.key,
+    required this.wallet,
+    required this.nameController,
+    required this.balanceController,
+    required this.onSave, // Now matches _saveWallet signature
+  });
+
+  @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: onSave, // Directly use onSave now
+          child: Container(
+            decoration: BoxDecoration(
+              color: theme.colorScheme.primary,
+              borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
+            ),
+            child: Center(
+              child: Text(
+                'Save',
+                style: theme.textTheme.bodyLarge?.copyWith(
+                  color: theme.colorScheme.onSecondary,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/wallet/edit/buttons/send.dart

@@ -0,0 +1,29 @@
+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'),
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/wallet/edit/buttons/top_up.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+
+class TopUpButton extends StatelessWidget{
+  const TopUpButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      style: ElevatedButton.styleFrom(
+        shadowColor: null,
+        elevation: 0,
+      ),
+      onPressed: () {
+        ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text('Add functionality')),
+        );
+      },
+      child: Text('Top Up Balance'),
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/wallet/edit/fields.dart

@@ -0,0 +1,50 @@
+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';
+import 'package:pweb/utils/currency.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)),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/wallet/edit/header.dart

@@ -0,0 +1,122 @@
+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;
+//                         });
+//                       },
+//                     ),
+//                   ],
+//                 ),
+//         ),
+//       ],
+//     );
+//   }
+// }

frontend/pweb/lib/pages/payment_page/wallet/edit/page.dart

@@ -0,0 +1,55 @@
+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),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/payment_page/wallet/wigets.dart

@@ -0,0 +1,49 @@
+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/providers/wallets.dart';
+
+
+class WalletWidgets extends StatelessWidget {
+  final Function(Wallet) onWalletTap;
+
+  const WalletWidgets({super.key, required this.onWalletTap});
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = context.watch<WalletsProvider>();
+
+    final wallets = provider.wallets;
+
+    if (wallets == null) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    return GridView.builder(
+      scrollDirection: Axis.vertical,
+      physics: AlwaysScrollableScrollPhysics(),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 2,
+        mainAxisSpacing: 12,
+        crossAxisSpacing: 12,
+        childAspectRatio: 3,
+      ),
+      itemCount: wallets.length,
+      itemBuilder: (context, index) {
+        final wallet = wallets[index];
+        return Padding(
+          padding: const EdgeInsets.symmetric(vertical: 6.0),
+          child: WalletCard(
+            wallet: wallet,
+            onTap: () {
+              onWalletTap(wallet);
+            },
+          ),
+        );
+      },
+    );
+  }
+}

frontend/pweb/lib/pages/report/charts/distribution.dart

@@ -0,0 +1,103 @@
+import 'package:flutter/material.dart';
+
+import 'package:syncfusion_flutter_charts/charts.dart';
+
+import 'package:pshared/models/payment/operation.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PayoutDistributionChart extends StatelessWidget {
+  final List<OperationItem> operations;
+  const PayoutDistributionChart({super.key, required this.operations});
+
+  @override
+  Widget build(BuildContext context) {
+    // 1) Aggregate sums
+    final sums = <String, double>{};
+    for (var op in operations) {
+      final name = op.name ?? AppLocalizations.of(context)!.unknown;
+      sums[name] = (sums[name] ?? 0) + op.amount;
+    }
+    if (sums.isEmpty) {
+      return Center(child: Text(AppLocalizations.of(context)!.noPayouts));
+    }
+
+    // 2) Build chart data
+    final data = sums.entries
+        .map((e) => _ChartData(e.key, e.value))
+        .toList();
+
+    // 3) Build a simple horizontal legend
+    final palette = [
+      Theme.of(context).colorScheme.primary,
+      Theme.of(context).colorScheme.secondary,
+      Theme.of(context).colorScheme.tertiary ?? Colors.grey,
+      Theme.of(context).colorScheme.primaryContainer,
+      Theme.of(context).colorScheme.secondaryContainer,
+    ];
+    final legendItems = List<Widget>.generate(data.length, (i) {
+      return Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(Icons.circle, size: 10, color: palette[i % palette.length]),
+          const SizedBox(width: 4),
+          Text(data[i].label, style: Theme.of(context).textTheme.bodySmall),
+          if (i < data.length - 1) const SizedBox(width: 12),
+        ],
+      );
+    });
+
+    return Card(
+      margin: const EdgeInsets.all(16),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      elevation: 2,
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Row(
+          children: [
+            // Pie takes 2/3 of the width
+            Expanded(
+              flex: 2,
+              child: SfCircularChart(
+                legend: Legend(isVisible: false),
+                tooltipBehavior: TooltipBehavior(enable: true),
+                series: <PieSeries<_ChartData, String>>[
+                  PieSeries<_ChartData, String>(
+                    dataSource: data,
+                    xValueMapper: (d, _) => d.label,
+                    yValueMapper: (d, _) => d.value,
+                    dataLabelMapper: (d, _) =>
+                        '${(d.value / sums.values.fold(0, (a, b) => a + b) * 100).toStringAsFixed(1)}%',
+                    dataLabelSettings: const DataLabelSettings(
+                      isVisible: true,
+                      labelPosition: ChartDataLabelPosition.inside,
+                    ),
+                    radius: '100%',
+                  )
+                ],
+              ),
+            ),
+
+            const SizedBox(width: 16),
+
+            // Legend takes 1/3
+            Expanded(
+              flex: 1,
+              child: SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                child: Column(spacing: 4.0, mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: legendItems),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _ChartData {
+  final String label;
+  final double value;
+  _ChartData(this.label, this.value);
+}

frontend/pweb/lib/pages/report/charts/status.dart

@@ -0,0 +1,91 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+import 'package:syncfusion_flutter_charts/charts.dart';
+
+import 'package:pshared/models/payment/status.dart';
+import 'package:pshared/models/payment/operation.dart';
+
+
+class StatusChart extends StatelessWidget {
+  final List<OperationItem> operations;
+
+  const StatusChart({super.key, required this.operations});
+
+  @override
+  Widget build(BuildContext context) {
+    // 1) Compute counts
+    final counts = <OperationStatus, int>{};
+    for (var op in operations) {
+      counts[op.status] = (counts[op.status] ?? 0) + 1;
+    }
+    final items = counts.entries
+        .map((e) => _ChartData(e.key, e.value.toDouble()))
+        .toList();
+    final maxCount = items.map((e) => e.count.toInt()).fold<int>(0, max);
+
+    final theme = Theme.of(context);
+    final barColor = theme.colorScheme.secondary;
+    final caption = theme.textTheme.labelMedium;
+
+    return SizedBox(
+      height: 200,
+      child: Card(
+        margin: const EdgeInsets.all(16),
+        elevation: 2,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(12),
+        ),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
+          child: SfCartesianChart(
+            // ─── Axes ─────────────────────────────────────────
+            primaryXAxis: CategoryAxis(
+              labelStyle: caption,
+              majorGridLines: const MajorGridLines(width: 0),
+            ),
+            primaryYAxis: NumericAxis(
+              minimum: 0,
+              maximum: (maxCount + 1).toDouble(),
+              interval: 1,
+              labelStyle: caption,
+              majorGridLines: MajorGridLines(
+                color: theme.dividerColor.withAlpha(76),
+                width: 1,
+                dashArray: <double>[4, 2],
+              ),
+            ),
+
+            // ─── Enable tooltips ───────────────────────────────
+            legend: Legend(isVisible: false),
+            tooltipBehavior: TooltipBehavior(
+              enable: true,
+              header: '',                // omit series name in header
+              format: 'point.x : point.y', // e.g. "Init : 2"
+            ),
+
+            // ─── Bar series with tooltip enabled ───────────────
+            series: <ColumnSeries<_ChartData, String>>[
+              ColumnSeries<_ChartData, String>(
+                dataSource: items,
+                xValueMapper: (d, _) => d.status.localized(context),
+                yValueMapper: (d, _) => d.count,
+                color: barColor,
+                width: 0.6,
+                borderRadius: const BorderRadius.all(Radius.circular(4)),
+                enableTooltip: true,  // <— turn on for this series
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _ChartData {
+  final OperationStatus status;
+  final double count;
+  _ChartData(this.status, this.count);
+}

frontend/pweb/lib/pages/report/page.dart

@@ -0,0 +1,170 @@
+// 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: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';
+
+
+class OperationHistoryPage extends StatefulWidget {
+  const OperationHistoryPage({super.key});
+
+  @override
+  State<OperationHistoryPage> createState() => _OperationHistoryPageState();
+}
+
+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();
+    });
+  }
+
+  Future<void> _pickRange() async {
+    final now = DateTime.now();
+    final initial = _range ??
+        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);
+    }
+  }
+
+  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,
+              children: [
+                Expanded(child: StatusChart(operations: _allOps)),
+                Expanded(child: PayoutDistributionChart(operations: _allOps)),
+              ],
+            ),
+          ),
+          OperationFilters(
+            selectedRange: _range,
+            selectedStatuses: _statuses,
+            onPickRange: _pickRange,
+            onToggleStatus: _toggleStatus,
+            onApply: _applyFilter,
+          ),
+          OperationsTable(
+            operations: _filtered,
+            showFileNameColumn:
+                _allOps.any((op) => op.fileName != null),
+          ),
+        ],
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/report/table/badge.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+
+import 'package:badges/badges.dart' as badges;
+
+import 'package:pshared/models/payment/status.dart';
+
+
+class OperationStatusBadge extends StatelessWidget {
+  final OperationStatus status;
+
+  const OperationStatusBadge({super.key, required this.status});
+
+  Color _badgeColor(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    switch (status) {
+      case OperationStatus.processing:
+        return scheme.primary;
+      case OperationStatus.success:
+        return scheme.secondary;
+      case OperationStatus.error:
+        return scheme.error;
+    }
+  }
+
+  Color _textColor(Color background) {
+    // computeLuminance returns 0 for black, 1 for white
+    return background.computeLuminance() > 0.5 ? Colors.black : Colors.white;
+  }  
+
+  @override
+  Widget build(BuildContext context) {
+    final label = status.localized(context);
+    final bg = _badgeColor(context);
+    final fg = _textColor(bg);
+
+    return badges.Badge(
+      badgeStyle: badges.BadgeStyle(
+        shape: badges.BadgeShape.square,
+        badgeColor: bg,
+        borderRadius: BorderRadius.circular(12),      // fully rounded
+        padding: const EdgeInsets.symmetric(
+          horizontal: 6, vertical: 2                     // tighter padding
+        ),
+      ),
+      badgeContent: Text(
+        label.toUpperCase(),                           // or keep sentence case
+        style: TextStyle(
+          color: fg,
+          fontSize: 11,                                 // smaller text
+          fontWeight: FontWeight.w500,                  // medium weight
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/report/table/filters.dart

@@ -0,0 +1,125 @@
+import 'package:flutter/material.dart';
+import 'package:badges/badges.dart' as badges; // Make sure to add badges package in pubspec.yaml
+import 'package:pshared/models/payment/status.dart';
+import 'package:pshared/utils/localization.dart';
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+class OperationFilters extends StatelessWidget {
+  final DateTimeRange? selectedRange;
+  final Set<String> selectedStatuses;
+  final VoidCallback onPickRange;
+  final VoidCallback onApply;
+  final ValueChanged<String> onToggleStatus;
+
+  const OperationFilters({
+    super.key,
+    required this.selectedRange,
+    required this.selectedStatuses,
+    required this.onPickRange,
+    required this.onApply,
+    required this.onToggleStatus,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+
+    return Card(
+      margin: const EdgeInsets.all(16),
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(12),
+      ),
+      elevation: 2,
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              l10n.filters,
+              style: Theme.of(context).textTheme.bodyLarge,
+            ),
+            const SizedBox(height: 12),
+            GestureDetector(
+              onTap: onPickRange,
+              child: Row(
+                children: [
+                  Icon(Icons.date_range_outlined, color: Theme.of(context).primaryColor),
+                  const SizedBox(width: 8),
+                  Expanded(
+                    child: Text(
+                      selectedRange == null
+                          ? l10n.selectPeriod
+                          : '${dateToLocalFormat(context, selectedRange!.start)} – ${dateToLocalFormat(context, selectedRange!.end)}',
+                      style: TextStyle(
+                        color: selectedRange == null
+                            ? Colors.grey
+                            : Colors.black87,
+                      ),
+                    ),
+                  ),
+                  Icon(Icons.keyboard_arrow_down, color: Colors.grey),
+                ],
+              ),
+            ),
+            const SizedBox(height: 16),
+            Wrap(
+              spacing: 12,
+              runSpacing: 8,
+              children: [
+                OperationStatus.success.localized(context), 
+                OperationStatus.processing.localized(context), 
+                OperationStatus.error.localized(context),
+              ].map((status) {
+                final isSelected = selectedStatuses.contains(status);
+                return GestureDetector(
+                  onTap: () => onToggleStatus(status),
+                  child: badges.Badge(
+                    badgeAnimation: badges.BadgeAnimation.fade(),
+                    badgeStyle: badges.BadgeStyle(
+                      shape: badges.BadgeShape.square,
+                      badgeColor: isSelected
+                          ? Theme.of(context).primaryColor
+                          : Colors.grey.shade300,
+                      borderRadius: BorderRadius.circular(8),
+                    ),
+                    badgeContent: Padding(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 8,
+                        vertical: 4,
+                      ),
+                      child: Text(
+                        l10n.status(status),
+                        style: TextStyle(
+                          color: isSelected ? Colors.white : Colors.black87,
+                          fontSize: 14,
+                        ),
+                      ),
+                    ),
+                  ),
+                );
+              }).toList(),
+            ),
+            const SizedBox(height: 24),
+            Align(
+              alignment: Alignment.centerRight,
+              child: ElevatedButton(
+                onPressed: onApply,
+                style: ElevatedButton.styleFrom(
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 24,
+                    vertical: 12,
+                  ),
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                ),
+                child: Text(l10n.apply),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/report/table/row.dart

@@ -0,0 +1,23 @@
+// operation_row.dart
+import 'package:flutter/material.dart';
+import 'package:pshared/models/payment/operation.dart';
+import 'package:pweb/pages/report/table/badge.dart';
+
+class OperationRow {
+  static DataRow build(OperationItem op, BuildContext context) {
+    return DataRow(cells: [
+      DataCell(OperationStatusBadge(status: op.status)),
+      DataCell(Text(op.fileName ?? '')),
+      DataCell(Text('${op.amount.toStringAsFixed(2)} ${op.currency}')),
+      DataCell(Text('${op.toAmount.toStringAsFixed(2)} ${op.toCurrency}')),
+      DataCell(Text(op.payId)),
+      DataCell(Text(op.cardNumber ?? '-')),
+      DataCell(Text(op.name)),
+      DataCell(Text(
+        '${TimeOfDay.fromDateTime(op.date).format(context)}\n'
+        '${op.date.toLocal().toIso8601String().split("T").first}',
+      )),
+      DataCell(Text(op.comment)),
+    ]);
+  }
+}

frontend/pweb/lib/pages/report/table/widget.dart

@@ -0,0 +1,63 @@
+// operations_table.dart
+import 'package:flutter/material.dart';
+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;
+
+  const OperationsTable({
+    super.key,
+    required this.operations,
+    required this.showFileNameColumn,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+
+    return Expanded(
+      child: SingleChildScrollView(
+        child: DataTable(
+          columnSpacing: 24,
+          headingTextStyle: const TextStyle(
+            fontWeight: FontWeight.bold,
+          ),
+          columns: [
+            DataColumn(label: Text(l10n.statusColumn)),
+            DataColumn(label: Text(l10n.fileNameColumn)),
+            DataColumn(label: Text(l10n.amountColumn)),
+            DataColumn(label: Text(l10n.toAmountColumn)),
+            DataColumn(label: Text(l10n.payIdColumn)),
+            DataColumn(label: Text(l10n.cardNumberColumn)),
+            DataColumn(label: Text(l10n.nameColumn)),
+            DataColumn(label: Text(l10n.dateColumn)),
+            DataColumn(label: Text(l10n.commentColumn)),
+          ],
+          rows: List.generate(
+            operations.length,
+            (index) {
+              final op = operations[index];
+              // Alternate row colors
+              final color = WidgetStateProperty.resolveWith<Color?>((states) {
+                return index.isEven
+                  ? Theme.of(context).colorScheme.surfaceContainerHighest
+                  : null;
+              });
+
+              // Use the DataRow built by OperationRow and extract its cells
+              final row = OperationRow.build(op, context);
+              return DataRow.byIndex(
+                index: index,
+                color: color,
+                cells: row.cells,
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/settings/profile/account/avatar.dart

@@ -0,0 +1,107 @@
+import 'package:flutter/material.dart';
+
+//import 'package:provider/provider.dart';
+
+import 'package:image_picker/image_picker.dart';
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class AvatarTile extends StatefulWidget {
+  final String? avatarUrl;
+  final String title;
+  final String description;
+  final String errorText;
+
+  const AvatarTile({
+    super.key,
+    required this.avatarUrl,
+    required this.title,
+    required this.description,
+    required this.errorText,
+  });
+
+  @override
+  State<AvatarTile> createState() => _AvatarTileState();
+}
+
+class _AvatarTileState extends State<AvatarTile> {
+  static const double _avatarSize = 96.0;
+  static const double _iconSize = 32.0;
+  static const double _titleSpacing = 4.0;
+  static const String _placeholderAsset = 'assets/images/avatar_placeholder.png';
+
+  bool _isHovering = false;
+
+  Future<void> _pickImage() async {
+    final picker = ImagePicker();
+    final file = await picker.pickImage(source: ImageSource.gallery);
+    if (file != null) {
+      debugPrint('Selected new avatar: ${file.path}');
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final loc = AppLocalizations.of(context)!;
+    final safeUrl =
+        widget.avatarUrl?.trim().isNotEmpty == true ? widget.avatarUrl : null;
+    final theme = Theme.of(context);
+
+    return Column(
+      children: [
+        MouseRegion(
+          onEnter: (_) => setState(() => _isHovering = true),
+          onExit: (_) => setState(() => _isHovering = false),
+          child: GestureDetector(
+            onTap: _pickImage,
+            child: Stack(
+              alignment: Alignment.center,
+              children: [
+                ClipOval(
+                  child: safeUrl != null
+                      ? Image.network(
+                          safeUrl,
+                          width: _avatarSize,
+                          height: _avatarSize,
+                          fit: BoxFit.cover,
+                          errorBuilder: (_, __, ___) => _buildPlaceholder(),
+                        )
+                      : _buildPlaceholder(),
+                ),
+                if (_isHovering)
+                  ClipOval(
+                    child: Container(
+                      width: _avatarSize,
+                      height: _avatarSize,
+                      color: theme.colorScheme.primary.withAlpha(90),
+                      child: Icon(
+                        Icons.camera_alt,
+                        color: theme.colorScheme.onSecondary,
+                        size: _iconSize,
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        ),
+        SizedBox(height: _titleSpacing),
+        Text(
+          loc.avatarHint,
+          style: theme.textTheme.bodySmall?.copyWith(
+            color: theme.colorScheme.onSecondary,
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildPlaceholder() {
+    return Image.asset(
+      _placeholderAsset,
+      width: _avatarSize,
+      height: _avatarSize,
+      fit: BoxFit.cover,
+    );
+  }
+}