Frontend first draft

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