Frontend first draft

frontend/pweb/lib/widgets/sidebar/user.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/widgets/sidebar/destinations.dart';
+
+
+class UserProfileCard extends StatelessWidget {
+  final ThemeData theme;
+  final String? avatarUrl;
+  final String? userName;
+  final PayoutDestination selected;
+  final void Function(PayoutDestination) onSelected;
+
+  const UserProfileCard({
+    super.key,
+    required this.theme,
+    required this.avatarUrl,
+    required this.userName,
+    required this.selected,
+    required this.onSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    bool isSelected = selected == PayoutDestination.settings; 
+    final backgroundColor = isSelected
+        ? theme.colorScheme.primaryContainer
+        : Colors.transparent;
+
+    return Material(
+      elevation: 4,
+      borderRadius: BorderRadius.circular(14),
+      color: theme.colorScheme.onSecondary,
+      child: InkWell(
+        borderRadius: BorderRadius.circular(14),
+        onTap: () => onSelected(PayoutDestination.settings),
+        child: Container(
+          height: 80,
+          width: 320,
+          decoration: BoxDecoration(
+            color: backgroundColor,
+            borderRadius: BorderRadius.circular(14),
+          ),
+          padding: const EdgeInsets.only(top: 15.0, left: 30, right: 20, bottom: 15),
+          child: Row(
+            spacing: 5,
+            children: [
+              CircleAvatar(
+                radius: 20,
+                foregroundImage: avatarUrl != null ? NetworkImage(avatarUrl!) : null,
+                child: avatarUrl == null ? const Icon(Icons.person, size: 28) : null,
+              ),
+              const SizedBox(width: 8),
+              Flexible(
+                child: Text(
+                  userName ?? 'User Name',
+                  style: theme.textTheme.bodyLarge?.copyWith(
+                    fontSize: 20,
+                    fontWeight: FontWeight.w500,
+                  ),
+                  maxLines: 2,
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}