Frontend first draft

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