⚠️ Potential issue | 🟠 Major

Add safeguards for undefined user.id in fallback chain.

The type definition allows id to be optional (id?: string), but the fallback logic assumes at least user.id will always be present. If all three fields (name, email, id) are undefined or null, this will result in:

• Avatar URL: https://api.dub.co/og/avatar/undefined (broken image)
• Alt text: undefined (accessibility violation)
• Display text: undefined (blank/confusing UI)

Consider one of these approaches:

Option 1: Add a guard to ensure at least id exists

-        {user && (
+        {user?.id && (
          <img
            src={user.image || `${OG_AVATAR_URL}${user.id}`}
            alt={user.name ?? user.email ?? user.id}
            className="size-5 shrink-0 rounded-full"
          />
        )}

Option 2: Add a fallback string constant

-            src={user.image || `${OG_AVATAR_URL}${user.id}`}
-            alt={user.name ?? user.email ?? user.id}
+            src={user.image || `${OG_AVATAR_URL}${user.id ?? 'unknown'}`}
+            alt={user.name ?? user.email ?? user.id ?? 'Unknown user'}

Apply similar changes to lines 41-43 for the display text.

Also applies to: 84-85

In
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/payout-paid-cell.tsx
around lines 37-43 (and also apply to 84-85), the fallback chain assumes user.id
exists which can yield "undefined" in the avatar URL, alt text, and display
text; fix this by adding a safe fallback constant (e.g., const FALLBACK_NAME =
"Unknown user") and use it for alt and display text when name, email, and id are
all falsy, and build the avatar src only when user.image exists or user.id is
defined (otherwise use a default avatar URL without interpolating undefined);
update the three usages (src, alt, and visible text) to use these guarded
fallbacks.