Frontend first draft

frontend/pweb/lib/widgets/employee/avatar/provider.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/provider/accounts/employees.dart';
+
+import 'package:pweb/widgets/employee/avatar/widget.dart';
+
+
+class EmployeeAvatarProvider extends StatelessWidget {
+  final String? employeeRef;
+  final double? radius;
+
+  const EmployeeAvatarProvider({
+    super.key, 
+    this.employeeRef,
+    this.radius,
+  });
+
+  @override
+  Widget build(BuildContext context) => Consumer<EmployeesProvider>(builder: (context, provider, _) => EmployeeAvatar(
+    radius: radius,
+    avatarUrl: provider.getEmployee(employeeRef)?.avatarUrl,
+    employeeName: provider.getEmployee(employeeRef)?.name ?? '',
+  ));
+}

frontend/pweb/lib/widgets/employee/avatar/widget.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+
+import 'package:cached_network_image/cached_network_image.dart';
+
+import 'package:pshared/utils/name_initials.dart';
+
+
+class EmployeeAvatar extends StatelessWidget {
+  final String? avatarUrl;
+  final String employeeName;
+  final double? radius;
+
+  const EmployeeAvatar({
+    super.key, 
+    this.avatarUrl,
+    required this.employeeName,
+    this.radius,
+  });
+
+  @override
+  Widget build(BuildContext context) => CircleAvatar(
+    radius: radius,
+    backgroundColor: Theme.of(context).colorScheme.primary.withAlpha(26),
+    backgroundImage: avatarUrl != null ? CachedNetworkImageProvider(avatarUrl!) : null,
+    child: avatarUrl == null 
+      ? Text(getNameInitials(employeeName), style: Theme.of(context).textTheme.bodyMedium)
+      : null,
+  );
+}

frontend/pweb/lib/widgets/employee/provider.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/provider/accounts/employees.dart';
+
+import 'package:pweb/widgets/employee/tile.dart';
+
+
+class EmployeeTileProvider extends StatelessWidget {
+  final String? employeeRef;
+  final double? avatarRadius;
+  final Widget? trailing;
+
+  const EmployeeTileProvider({super.key, required this.employeeRef, this.avatarRadius, this.trailing});
+
+  @override
+  Widget build(BuildContext context) => Consumer<EmployeesProvider>(builder: (context, provider, _) {
+    if (provider.isLoading) return const Center(child:  CircularProgressIndicator());
+    return EmployeeTile.fromEmployee(
+      context: context, 
+      employee: provider.getEmployee(employeeRef), 
+      avatarRadius: avatarRadius,
+    );
+  });
+}

frontend/pweb/lib/widgets/employee/tile.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/account/account.dart';
+
+import 'package:pweb/widgets/employee/avatar/widget.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class EmployeeTile extends StatelessWidget {
+  final String name;
+  final String? avatarUrl;
+  final double? avatarRadius;
+  final Widget? trailing;
+
+  const EmployeeTile({super.key, required this.name, this.avatarUrl, this.avatarRadius, this.trailing});
+
+  factory EmployeeTile.fromEmployee({
+    required BuildContext context, 
+    Account? employee, 
+    double? avatarRadius
+  }) => EmployeeTile(
+    name: employee?.name ?? AppLocalizations.of(context)!.unknown,
+    avatarUrl: employee?.avatarUrl,
+    avatarRadius: avatarRadius,
+  );
+
+  @override
+  Widget build(BuildContext context) => ListTile(
+    leading: EmployeeAvatar(avatarUrl: avatarUrl, employeeName: name, radius: avatarRadius),
+    title: Text(name),
+    trailing: trailing,
+  );
+}