Frontend first draft

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