Frontend first draft

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),
+    );
+  }
+}