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

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