From 6948a63e07f0ab566c04236c57747be18ca7744e Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Fri, 27 Mar 2026 15:36:47 +0530
Subject: [PATCH] refactor: improve user avatar rendering by always displaying
 initials and handling image load errors.

---
 src/app/dashboard/page.tsx            | 26 +++++++++++++-------------
 src/app/dashboard/users/[id]/page.tsx | 17 ++++++++---------
 src/app/dashboard/users/page.tsx      | 26 +++++++++++++-------------
 3 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index c223e5b..b8be342 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -221,19 +221,19 @@ 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">
-                          {avatarUrls[user.id] ? (
-                            <img
-                              className="h-10 w-10 rounded-full object-cover"
-                              src={avatarUrls[user.id]}
-                              alt=""
-                            />
-                          ) : (
-                            <div className="h-10 w-10 rounded-full bg-[#e8f0ee] flex items-center justify-center">
-                              <span className="text-[#00293d] font-medium text-sm font-fractul">
-                                {user.profile?.firstName?.[0] || user.email[0].toUpperCase()}
-                              </span>
-                            </div>
-                          )}
+                          <div className="h-10 w-10 rounded-full bg-[#e8f0ee] flex items-center justify-center relative overflow-hidden">
+                            <span className="text-[#00293d] font-medium text-sm font-fractul">
+                              {user.profile?.firstName?.[0] || user.email[0].toUpperCase()}
+                            </span>
+                            {avatarUrls[user.id] && (
+                              <img
+                                className="absolute inset-0 h-10 w-10 rounded-full object-cover"
+                                src={avatarUrls[user.id]}
+                                alt=""
+                                onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                              />
+                            )}
+                          </div>
                         </div>
                         <div className="ml-4">
                           <div className="text-sm font-medium text-[#00293d] font-serif">
diff --git a/src/app/dashboard/users/[id]/page.tsx b/src/app/dashboard/users/[id]/page.tsx
index cb466da..4c21e3e 100644
--- a/src/app/dashboard/users/[id]/page.tsx
+++ b/src/app/dashboard/users/[id]/page.tsx
@@ -313,15 +313,14 @@ export default function UserDetailPage() {
           <div className="flex items-center">
             {/* Avatar */}
             <div className="flex-shrink-0 h-20 w-20">
-              {avatarUrl ? (
-                <img className="h-20 w-20 rounded-full object-cover" src={avatarUrl} alt="" />
-              ) : (
-                <div className="h-20 w-20 rounded-full bg-[#e8f0ee] flex items-center justify-center">
-                  <span className="text-[#666666] font-medium text-2xl">
-                    {user.profile?.firstName?.[0] || user.email[0].toUpperCase()}
-                  </span>
-                </div>
-              )}
+              <div className="h-20 w-20 rounded-full bg-[#e8f0ee] flex items-center justify-center relative overflow-hidden">
+                <span className="text-[#666666] font-medium text-2xl">
+                  {user.profile?.firstName?.[0] || user.email[0].toUpperCase()}
+                </span>
+                {avatarUrl && (
+                  <img className="absolute inset-0 h-20 w-20 rounded-full object-cover" src={avatarUrl} alt="" onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
+                )}
+              </div>
             </div>
 
             {/* Name & Email */}
diff --git a/src/app/dashboard/users/page.tsx b/src/app/dashboard/users/page.tsx
index 553a58a..6dd3c6a 100644
--- a/src/app/dashboard/users/page.tsx
+++ b/src/app/dashboard/users/page.tsx
@@ -207,19 +207,19 @@ export default function UsersPage() {
                     <td className="px-6 py-4 whitespace-nowrap">
                       <div className="flex items-center">
                         <div className="flex-shrink-0 h-10 w-10">
-                          {avatarUrls[user.id] ? (
-                            <img
-                              className="h-10 w-10 rounded-full object-cover"
-                              src={avatarUrls[user.id]}
-                              alt=""
-                            />
-                          ) : (
-                            <div className="h-10 w-10 rounded-full bg-[#e8f0ee] flex items-center justify-center">
-                              <span className="text-[#666666] font-medium text-sm">
-                                {user.profile?.firstName?.[0] || user.email[0].toUpperCase()}
-                              </span>
-                            </div>
-                          )}
+                          <div className="h-10 w-10 rounded-full bg-[#e8f0ee] flex items-center justify-center relative overflow-hidden">
+                            <span className="text-[#666666] font-medium text-sm">
+                              {user.profile?.firstName?.[0] || user.email[0].toUpperCase()}
+                            </span>
+                            {avatarUrls[user.id] && (
+                              <img
+                                className="absolute inset-0 h-10 w-10 rounded-full object-cover"
+                                src={avatarUrls[user.id]}
+                                alt=""
+                                onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                              />
+                            )}
+                          </div>
                         </div>
                         <div className="ml-4">
                           <div className="text-sm font-medium text-[#00293d]">