feat(beneficiaries): Use displayName in detail page header

- Add displayName field to Beneficiary type (computed: customName || name)
- Populate displayName in getAllBeneficiaries and getWellNuoBeneficiary API calls
- Update detail page header to use beneficiary.displayName
- Update MockDashboard to use displayName

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/(tabs)/beneficiaries/[id]/index.tsx

@@ -403,7 +403,7 @@ export default function BeneficiaryDetailScreen() {
               </View>
             )}
           </TouchableOpacity>
-          <Text style={styles.headerTitle}>{beneficiary.customName || beneficiary.name}</Text>
+          <Text style={styles.headerTitle}>{beneficiary.displayName}</Text>
         </View>
 
         <BeneficiaryMenu
@@ -499,7 +499,7 @@ export default function BeneficiaryDetailScreen() {
                 />
               }
             >
-              <MockDashboard beneficiaryName={beneficiary.customName || beneficiary.name} />
+              <MockDashboard beneficiaryName={beneficiary.displayName} />
             </ScrollView>
           )}
         </View>

contexts/BeneficiaryContext.tsx

@@ -65,6 +65,7 @@ export function BeneficiaryProvider({ children }: { children: React.ReactNode })
     const newBeneficiary: Beneficiary = {
       id: Date.now(), // Use timestamp as unique ID
       name: beneficiaryData.name.trim(),
+      displayName: beneficiaryData.name.trim(), // For UI display
       address: beneficiaryData.address?.trim(),
       avatar: beneficiaryData.avatar,
       status: 'offline',

services/api.ts

@@ -536,6 +536,7 @@ class ApiService {
       {
         id: 1,
         name: 'Julia Smith',
+        displayName: 'Julia Smith',
         status: 'online',
         relationship: 'Mother',
         last_activity: '2 min ago',
@@ -550,6 +551,7 @@ class ApiService {
       {
         id: 2,
         name: 'Robert Johnson',
+        displayName: 'Robert Johnson',
         status: 'offline',
         relationship: 'Father',
         last_activity: '1 hour ago',
@@ -583,6 +585,7 @@ class ApiService {
     const beneficiary: Beneficiary = {
       id: deploymentId,
       name: data.name,
+      displayName: data.name, // For UI display
       avatar: getAvatarForBeneficiary(deploymentId),
       status: isRecent ? 'online' : 'offline',
       address: data.address,
@@ -674,6 +677,7 @@ class ApiService {
         id: item.id,
         name: item.name || item.email,
         customName: item.customName || null, // User's custom name for this beneficiary
+        displayName: item.customName || item.name || item.email, // For UI display
         avatar: item.avatarUrl || undefined, // Use uploaded avatar from server
         status: 'offline' as const,
         email: item.email,
@@ -727,6 +731,7 @@ class ApiService {
         id: data.id,
         name: data.name || data.email,
         customName: data.customName || null, // User's custom name for this beneficiary
+        displayName: data.customName || data.name || data.email, // For UI display
         avatar: data.avatarUrl || undefined,
         status: 'offline' as const,
         email: data.email,
@@ -823,6 +828,7 @@ class ApiService {
       const beneficiary: Beneficiary = {
         id: result.beneficiary.id,
         name: result.beneficiary.name || '',
+        displayName: result.beneficiary.name || '', // For UI display
         status: 'offline' as const,
       };
 

types/index.ts

@@ -84,6 +84,7 @@ export interface Beneficiary {
   id: number;
   name: string;
   customName?: string | null;  // User's custom display name (e.g., "Mom", "Dad")
+  displayName: string;         // Computed: customName || name (for UI display)
   avatar?: string;
   device_id?: string;
   status: 'online' | 'offline';