feat: enhance member management features; add quick stats and search capabilities

packages/features/member-management/src/components/member-avatar.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Avatar, AvatarFallback } from '@kit/ui/avatar';
+import { cn } from '@kit/ui/utils';
+
+interface MemberAvatarProps {
+  firstName: string;
+  lastName: string;
+  size?: 'default' | 'sm' | 'lg';
+  className?: string;
+}
+
+function getInitials(firstName: string, lastName: string): string {
+  const f = firstName.trim().charAt(0).toUpperCase();
+  const l = lastName.trim().charAt(0).toUpperCase();
+  return `${f}${l}`;
+}
+
+function getColorClass(firstName: string, lastName: string): string {
+  const name = `${firstName}${lastName}`;
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const colors = [
+    'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+    'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+    'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300',
+    'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+    'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300',
+    'bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300',
+    'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300',
+    'bg-teal-100 text-teal-700 dark:bg-teal-900 dark:text-teal-300',
+  ];
+  return colors[Math.abs(hash) % colors.length]!;
+}
+
+export function MemberAvatar({
+  firstName,
+  lastName,
+  size = 'default',
+  className,
+}: MemberAvatarProps) {
+  const initials = getInitials(firstName, lastName);
+  const colorClass = getColorClass(firstName, lastName);
+
+  return (
+    <Avatar size={size} className={cn('rounded-full', className)}>
+      <AvatarFallback className={cn('rounded-full font-medium', colorClass)}>
+        {initials}
+      </AvatarFallback>
+    </Avatar>
+  );
+}