feat: Display presigned avatar URLs for recent users on the dashboard.

src/app/dashboard/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { usersService, User } from '@/services';
+import { usersService, User, uploadService } from '@/services';
 import Link from 'next/link';
 
 export default function DashboardPage() {
@@ -13,6 +13,7 @@ export default function DashboardPage() {
   });
   const [isLoading, setIsLoading] = useState(true);
   const [recentUsers, setRecentUsers] = useState<User[]>([]);
+  const [avatarUrls, setAvatarUrls] = useState<Record<string, string>>({});
 
   useEffect(() => {
     fetchDashboardData();
@@ -29,7 +30,23 @@ export default function DashboardPage() {
         agents: users.filter((u) => u.role === 'AGENT').length,
         pendingUsers: users.filter((u) => u.status === 'PENDING_VERIFICATION').length,
       });
-      setRecentUsers(users.slice(0, 5));
+      const recent = users.slice(0, 5);
+      setRecentUsers(recent);
+
+      // Fetch presigned URLs for avatars
+      const urls: Record<string, string> = {};
+      await Promise.all(
+        recent.map(async (user) => {
+          if (user.profile?.avatar && uploadService.isS3Key(user.profile.avatar)) {
+            try {
+              urls[user.id] = await uploadService.getPresignedDownloadUrl(user.profile.avatar);
+            } catch {
+              // Ignore errors for individual avatar fetches
+            }
+          }
+        })
+      );
+      setAvatarUrls(urls);
     } catch (err) {
       console.error('Failed to fetch dashboard data:', err);
     } finally {
@@ -204,10 +221,10 @@ export default function DashboardPage() {
                     <td className="px-6 py-4 whitespace-nowrap">
                       <div className="flex items-center">
                         <div className="flex-shrink-0 h-10 w-10">
-                          {user.profile?.avatar ? (
+                          {avatarUrls[user.id] ? (
                             <img
                               className="h-10 w-10 rounded-full object-cover"
-                              src={user.profile.avatar}
+                              src={avatarUrls[user.id]}
                               alt=""
                             />
                           ) : (