From 0ceb7d0892826d3532e05c3ad4eaa27763614c27 Mon Sep 17 00:00:00 2001
From: Jamie Curnow <jc@jc21.com>
Date: Wed, 5 Nov 2025 12:33:13 +1000
Subject: [PATCH] Fix #4838 when showing avatars of deleted users

---
 .../src/components/Table/Formatter/GravatarFormatter.tsx    | 6 ++++--
 frontend/src/pages/Access/Table.tsx                         | 5 ++++-
 frontend/src/pages/AuditLog/Table.tsx                       | 2 +-
 frontend/src/pages/Certificates/Table.tsx                   | 2 +-
 frontend/src/pages/Nginx/DeadHosts/Table.tsx                | 2 +-
 frontend/src/pages/Nginx/ProxyHosts/Table.tsx               | 2 +-
 frontend/src/pages/Nginx/RedirectionHosts/Table.tsx         | 2 +-
 frontend/src/pages/Nginx/Streams/Table.tsx                  | 2 +-
 8 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Table/Formatter/GravatarFormatter.tsx b/frontend/src/components/Table/Formatter/GravatarFormatter.tsx
index 9b7bed95..58b820ba 100644
--- a/frontend/src/components/Table/Formatter/GravatarFormatter.tsx
+++ b/frontend/src/components/Table/Formatter/GravatarFormatter.tsx
@@ -1,5 +1,7 @@
+const defaultImg = "/images/default-avatar.jpg";
+
 interface Props {
-	url: string;
+	url?: string;
 	name?: string;
 }
 export function GravatarFormatter({ url, name }: Props) {
@@ -9,7 +11,7 @@ export function GravatarFormatter({ url, name }: Props) {
 				title={name}
 				className="avatar avatar-2 me-2"
 				style={{
-					backgroundImage: `url(${url})`,
+					backgroundImage: `url(${url || defaultImg})`,
 				}}
 			/>
 		</div>
diff --git a/frontend/src/pages/Access/Table.tsx b/frontend/src/pages/Access/Table.tsx
index b20919ef..433c077b 100644
--- a/frontend/src/pages/Access/Table.tsx
+++ b/frontend/src/pages/Access/Table.tsx
@@ -21,7 +21,10 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 		() => [
 			columnHelper.accessor((row: any) => row.owner, {
 				id: "owner",
-				cell: (info: any) => <GravatarFormatter url={info.getValue().avatar} name={info.getValue().name} />,
+				cell: (info: any) => {
+					const value = info.getValue();
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
+				},
 				meta: {
 					className: "w-1",
 				},
diff --git a/frontend/src/pages/AuditLog/Table.tsx b/frontend/src/pages/AuditLog/Table.tsx
index 25c4abd5..f61809a5 100644
--- a/frontend/src/pages/AuditLog/Table.tsx
+++ b/frontend/src/pages/AuditLog/Table.tsx
@@ -18,7 +18,7 @@ export default function Table({ data, isFetching, onSelectItem }: Props) {
 				id: "user.avatar",
 				cell: (info: any) => {
 					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
 				meta: {
 					className: "w-1",
diff --git a/frontend/src/pages/Certificates/Table.tsx b/frontend/src/pages/Certificates/Table.tsx
index ce816f9b..7eaeb777 100644
--- a/frontend/src/pages/Certificates/Table.tsx
+++ b/frontend/src/pages/Certificates/Table.tsx
@@ -31,7 +31,7 @@ export default function Table({ data, isFetching, onDelete, onRenew, onDownload,
 				id: "owner",
 				cell: (info: any) => {
 					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
 				meta: {
 					className: "w-1",
diff --git a/frontend/src/pages/Nginx/DeadHosts/Table.tsx b/frontend/src/pages/Nginx/DeadHosts/Table.tsx
index 78699535..f8a1a275 100644
--- a/frontend/src/pages/Nginx/DeadHosts/Table.tsx
+++ b/frontend/src/pages/Nginx/DeadHosts/Table.tsx
@@ -31,7 +31,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 				id: "owner",
 				cell: (info: any) => {
 					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
 				meta: {
 					className: "w-1",
diff --git a/frontend/src/pages/Nginx/ProxyHosts/Table.tsx b/frontend/src/pages/Nginx/ProxyHosts/Table.tsx
index cfbd29f6..aec9ffd8 100644
--- a/frontend/src/pages/Nginx/ProxyHosts/Table.tsx
+++ b/frontend/src/pages/Nginx/ProxyHosts/Table.tsx
@@ -32,7 +32,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 				id: "owner",
 				cell: (info: any) => {
 					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
 				meta: {
 					className: "w-1",
diff --git a/frontend/src/pages/Nginx/RedirectionHosts/Table.tsx b/frontend/src/pages/Nginx/RedirectionHosts/Table.tsx
index ece00bd6..6ac41523 100644
--- a/frontend/src/pages/Nginx/RedirectionHosts/Table.tsx
+++ b/frontend/src/pages/Nginx/RedirectionHosts/Table.tsx
@@ -31,7 +31,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 				id: "owner",
 				cell: (info: any) => {
 					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
 				meta: {
 					className: "w-1",
diff --git a/frontend/src/pages/Nginx/Streams/Table.tsx b/frontend/src/pages/Nginx/Streams/Table.tsx
index b7246565..4b9ff7d6 100644
--- a/frontend/src/pages/Nginx/Streams/Table.tsx
+++ b/frontend/src/pages/Nginx/Streams/Table.tsx
@@ -31,7 +31,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 				id: "owner",
 				cell: (info: any) => {
 					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
 				meta: {
 					className: "w-1",