fix: thêm thành viên ngoài hệ thống vào Tour

backend/change-owner.js

@@ -0,0 +1,39 @@
+const { PrismaClient } = require('@prisma/client');
+const prisma = new PrismaClient();
+
+async function main() {
+  const tourId = '84d84c21-c12b-4a18-9655-043c85f5c0c5';
+  const ownerUserId = '5b2053bb-f523-4a11-817c-f47fef7322bb'; // owner@travel.com
+
+  // Check if owner@travel.com is already a participant
+  const existing = await prisma.tourParticipant.findFirst({
+    where: { tourId, userId: ownerUserId }
+  });
+
+  if (existing) {
+    await prisma.tourParticipant.update({
+      where: { id: existing.id },
+      data: { role: 'OWNER' }
+    });
+    console.log('Updated existing participant to OWNER');
+  } else {
+    // Demote current owner to MEMBER or just keep them
+    const result = await prisma.tourParticipant.create({
+      data: {
+        tourId,
+        userId: ownerUserId,
+        role: 'OWNER'
+      }
+    });
+    console.log('Created new OWNER participant:', result);
+  }
+  
+  // Update tour createdById to ownerUserId
+  await prisma.tour.update({
+    where: { id: tourId },
+    data: { createdById: ownerUserId }
+  });
+  console.log('Updated tour creator to owner@travel.com');
+}
+
+main().catch(console.error).finally(() => prisma.$disconnect());

backend/dist/src/main.js

@@ -555,7 +555,7 @@ let TourController = class TourController {
         this.cacheManager = cacheManager;
     }
     async createTour(body, req) {
-        const { title, description, startDate, endDate, adultCount, childCount, childDiscount, tags } = body;
+        const { title, description, startDate, endDate, adultCount, childCount, childDiscount, tags, members } = body;
         const tour = await this.prisma.tour.create({
             data: {
                 title,
@@ -568,10 +568,19 @@ let TourController = class TourController {
                 childDiscount: childDiscount || 0,
                 createdById: req.user.id,
                 participants: {
-                    create: {
+                    create: [
+                        {
                             userId: req.user.id,
                             role: 'OWNER'
-                    }
+                        },
+                        ...(members && Array.isArray(members)
+                            ? members.map((m) => ({
+                                userId: m.userId || null,
+                                displayName: m.displayName || null,
+                                role: m.role || 'MEMBER'
+                            }))
+                            : [])
+                    ]
                 },
                 legs: {
                     create: {
@@ -610,6 +619,13 @@ let TourController = class TourController {
             }
         }).then(async (loc) => {
             if (body.expenseAmount && Number(body.expenseAmount) > 0) {
+                let paidById = body.paidById || null;
+                if (paidById) {
+                    const userExists = await this.prisma.user.findUnique({ where: { id: paidById } });
+                    if (!userExists) {
+                        paidById = null;
+                    }
+                }
                 await this.prisma.expense.create({
                     data: {
                         amount: Number(body.expenseAmount),
@@ -618,7 +634,7 @@ let TourController = class TourController {
                         legId: loc.legId,
                         description: body.expenseDescription || `Chi phí tại ${loc.name}`,
                         note: body.expenseNote || null,
-                        paidById: body.paidById || null,
+                        paidById,
                     }
                 });
             }
@@ -794,8 +810,10 @@ let TourController = class TourController {
         if (!tour)
             throw new common_1.NotFoundException('Không tìm thấy tour');
         for (const participant of tour.participants) {
+            if (participant.userId) {
                 await this.cacheManager.del(`user-role:${participant.userId}:${id}`);
             }
+        }
         await this.cacheManager.del(`res-to-tour:${id}`);
         for (const leg of tour.legs) {
             await this.cacheManager.del(`res-to-tour:${leg.id}`);
@@ -898,6 +916,25 @@ let TourController = class TourController {
     async addMember(tourId, body, req) {
         const validRoles = ['OWNER', 'MANAGER', 'MEMBER', 'MEMBER_NO_FINANCE', 'VIEWER_ONLY'];
         const role = validRoles.includes(body.role) ? body.role : 'MEMBER';
+        if (body.displayName) {
+            const participation = await this.prisma.tourParticipant.create({
+                data: {
+                    tourId,
+                    role,
+                    displayName: body.displayName,
+                },
+                include: { user: { select: { id: true, name: true, email: true } } },
+            });
+            await Promise.all([
+                this.cacheManager.del(tourId),
+                this.cacheManager.del(`/api/v1/tours/${tourId}`),
+                this.cacheManager.del(`/api/v1/tours/${tourId}/public`),
+            ]);
+            return participation;
+        }
+        if (!body.userId) {
+            throw new common_1.BadRequestException('Vui lòng cung cấp userId hoặc displayName');
+        }
         await this.cacheManager.del(`user-role:${body.userId}:${tourId}`);
         const participation = await this.prisma.tourParticipant.findUnique({
             where: { tourId_userId: { tourId, userId: body.userId } },
@@ -941,7 +978,18 @@ let TourController = class TourController {
         });
     }
     async updateMemberCounts(tourId, userId, body, req) {
-        const isSelf = req.user.id === userId;
+        const participant = await this.prisma.tourParticipant.findFirst({
+            where: {
+                OR: [
+                    { id: userId },
+                    { tourId, userId }
+                ]
+            }
+        });
+        if (!participant) {
+            throw new common_1.NotFoundException('Không tìm thấy thành viên trong tour.');
+        }
+        const isSelf = req.user.id === participant.userId;
         const requesterParticipation = await this.prisma.tourParticipant.findUnique({
             where: { tourId_userId: { tourId, userId: req.user.id } },
         });
@@ -966,14 +1014,16 @@ let TourController = class TourController {
                 data.role = body.role;
             }
         }
+        if (participant.userId) {
+            await this.cacheManager.del(`user-role:${participant.userId}:${tourId}`);
+        }
         await Promise.all([
-            this.cacheManager.del(`user-role:${userId}:${tourId}`),
             this.cacheManager.del(tourId),
             this.cacheManager.del(`/api/v1/tours/${tourId}`),
             this.cacheManager.del(`/api/v1/tours/${tourId}/public`),
         ]);
         return this.prisma.tourParticipant.update({
-            where: { tourId_userId: { tourId, userId } },
+            where: { id: participant.id },
             data,
             include: { user: { select: { id: true, name: true, email: true } } },
         });
@@ -1090,15 +1140,27 @@ let TourController = class TourController {
         return { success: true, message: 'Đã từ chối yêu cầu tham gia.' };
     }
     async removeMember(tourId, userId) {
-        const participation = await this.prisma.tourParticipant.findUnique({
-            where: { tourId_userId: { tourId, userId } },
+        const participant = await this.prisma.tourParticipant.findFirst({
+            where: {
+                OR: [
+                    { id: userId },
+                    { tourId, userId }
+                ]
+            }
         });
-        if (!participation) {
+        if (!participant) {
             throw new common_1.NotFoundException('Thành viên này không có trong tour');
         }
-        await this.cacheManager.del(`user-role:${userId}:${tourId}`);
+        if (participant.userId) {
+            await this.cacheManager.del(`user-role:${participant.userId}:${tourId}`);
+        }
+        await Promise.all([
+            this.cacheManager.del(tourId),
+            this.cacheManager.del(`/api/v1/tours/${tourId}`),
+            this.cacheManager.del(`/api/v1/tours/${tourId}/public`),
+        ]);
         await this.prisma.tourParticipant.delete({
-            where: { tourId_userId: { tourId, userId } },
+            where: { id: participant.id },
         });
         return { message: 'Đã xóa thành viên khỏi tour' };
     }

backend/dist/src/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../../src/main.ts"],"names":[],"mappings":"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 truncated
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../../src/main.ts"],"names":[],"mappings":"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 truncated

backend/prisma/migrations/20260620100240_make_participant_id_primary/migration.sql

@@ -0,0 +1,22 @@
+/*
+  Warnings:
+
+  - The primary key for the `TourParticipant` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - A unique constraint covering the columns `[tourId,userId]` on the table `TourParticipant` will be added. If there are existing duplicate values, this will fail.
+  - The required column `id` was added to the `TourParticipant` table with a prisma-level default value. This is not possible if the table is not empty. Please add this column as optional, then populate it before making it required.
+
+*/
+-- AlterTable
+ALTER TABLE "TourParticipant" DROP CONSTRAINT "TourParticipant_pkey",
+ADD COLUMN     "displayName" TEXT,
+ADD COLUMN     "id" TEXT;
+
+UPDATE "TourParticipant" SET "id" = md5(random()::text);
+
+ALTER TABLE "TourParticipant" ALTER COLUMN "id" SET NOT NULL,
+ALTER COLUMN "userId" DROP NOT NULL;
+
+ALTER TABLE "TourParticipant" ADD CONSTRAINT "TourParticipant_pkey" PRIMARY KEY ("id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TourParticipant_tourId_userId_key" ON "TourParticipant"("tourId", "userId");

backend/src/main.ts

@@ -531,7 +531,7 @@ class TourController {
   @UseGuards(JwtAuthGuard)
   @Post()
   async createTour(@Body() body: any, @Req() req: any) {
-    const { title, description, startDate, endDate, adultCount, childCount, childDiscount, tags } = body;
+    const { title, description, startDate, endDate, adultCount, childCount, childDiscount, tags, members } = body;
     const tour = await this.prisma.tour.create({
       data: {
         title,
@@ -544,10 +544,19 @@ class TourController {
         childDiscount: childDiscount || 0,
         createdById: req.user.id,
         participants: {
-          create: {
+          create: [
+            {
               userId: req.user.id,
               role: 'OWNER'
-          }
+            },
+            ...(members && Array.isArray(members)
+              ? members.map((m: any) => ({
+                  userId: m.userId || null,
+                  displayName: m.displayName || null,
+                  role: m.role || 'MEMBER'
+                }))
+              : [])
+          ]
         },
         legs: {
           create: {
@@ -594,6 +603,13 @@ class TourController {
       }
     }).then(async (loc) => {
       if (body.expenseAmount && Number(body.expenseAmount) > 0) {
+        let paidById = body.paidById || null;
+        if (paidById) {
+          const userExists = await this.prisma.user.findUnique({ where: { id: paidById } });
+          if (!userExists) {
+            paidById = null;
+          }
+        }
         await this.prisma.expense.create({
           data: {
             amount: Number(body.expenseAmount),
@@ -602,7 +618,7 @@ class TourController {
             legId: loc.legId,
             description: body.expenseDescription || `Chi phí tại ${loc.name}`,
             note: body.expenseNote || null,
-            paidById: body.paidById || null,
+            paidById,
           }
         });
       }
@@ -832,8 +848,10 @@ class TourController {
     // --- BẮT ĐẦU DỌN DẸP CACHE ---
     // a. Xóa cache vai trò của tất cả thành viên trong tour này
     for (const participant of tour.participants) {
+      if (participant.userId) {
         await this.cacheManager.del(`user-role:${participant.userId}:${id}`);
       }
+    }
 
     // b. Xóa cache mapping tài nguyên (Leg, Location, Photo) về Tour này
     await this.cacheManager.del(`res-to-tour:${id}`); // Bản thân tour
@@ -961,10 +979,31 @@ class TourController {
   @Roles(ParticipantRole.OWNER, ParticipantRole.MANAGER) // Only owner/manager can add members
   @UseGuards(JwtAuthGuard, TourRoleGuard)
   @Post(':tourId/members')
-  async addMember(@Param('tourId', ParseUUIDPipe) tourId: string, @Body() body: { userId: string; role?: string }, @Req() req: any) {
+  async addMember(@Param('tourId', ParseUUIDPipe) tourId: string, @Body() body: { userId?: string; displayName?: string; role?: string }, @Req() req: any) {
     const validRoles = ['OWNER', 'MANAGER', 'MEMBER', 'MEMBER_NO_FINANCE', 'VIEWER_ONLY'] as const;
     const role = validRoles.includes(body.role as any) ? body.role as 'OWNER' | 'MANAGER' | 'MEMBER' | 'MEMBER_NO_FINANCE' | 'VIEWER_ONLY' : 'MEMBER';
 
+    if (body.displayName) {
+      const participation = await this.prisma.tourParticipant.create({
+        data: {
+          tourId,
+          role,
+          displayName: body.displayName,
+        },
+        include: { user: { select: { id: true, name: true, email: true } } },
+      });
+      await Promise.all([
+        this.cacheManager.del(tourId),
+        this.cacheManager.del(`/api/v1/tours/${tourId}`),
+        this.cacheManager.del(`/api/v1/tours/${tourId}/public`),
+      ]);
+      return participation;
+    }
+
+    if (!body.userId) {
+      throw new BadRequestException('Vui lòng cung cấp userId hoặc displayName');
+    }
+
     // Xóa cache khi thay đổi quyền hạn hoặc thêm thành viên mới
     await this.cacheManager.del(`user-role:${body.userId}:${tourId}`);
 
@@ -1021,7 +1060,19 @@ class TourController {
     @Body() body: { adultCount?: number; childCount?: number; role?: string },
     @Req() req: any
   ) {
-    const isSelf = req.user.id === userId;
+    const participant = await this.prisma.tourParticipant.findFirst({
+      where: {
+        OR: [
+          { id: userId },
+          { tourId, userId }
+        ]
+      }
+    });
+    if (!participant) {
+      throw new NotFoundException('Không tìm thấy thành viên trong tour.');
+    }
+
+    const isSelf = req.user.id === participant.userId;
     
     // Tìm quyền hạn của người gửi yêu cầu trong tour này
     const requesterParticipation = await this.prisma.tourParticipant.findUnique({
@@ -1050,15 +1101,17 @@ class TourController {
     }
 
     // Xóa cache liên quan
+    if (participant.userId) {
+      await this.cacheManager.del(`user-role:${participant.userId}:${tourId}`);
+    }
     await Promise.all([
-      this.cacheManager.del(`user-role:${userId}:${tourId}`),
       this.cacheManager.del(tourId),
       this.cacheManager.del(`/api/v1/tours/${tourId}`),
       this.cacheManager.del(`/api/v1/tours/${tourId}/public`),
     ]);
 
     return this.prisma.tourParticipant.update({
-      where: { tourId_userId: { tourId, userId } },
+      where: { id: participant.id },
       data,
       include: { user: { select: { id: true, name: true, email: true } } },
     });
@@ -1208,17 +1261,29 @@ class TourController {
   @UseGuards(JwtAuthGuard, TourRoleGuard)
   @Delete(':tourId/members/:userId')
   async removeMember(@Param('tourId', ParseUUIDPipe) tourId: string, @Param('userId', ParseUUIDPipe) userId: string) {
-    const participation = await this.prisma.tourParticipant.findUnique({
-      where: { tourId_userId: { tourId, userId } },
+    const participant = await this.prisma.tourParticipant.findFirst({
+      where: {
+        OR: [
+          { id: userId },
+          { tourId, userId }
+        ]
+      }
     });
-    if (!participation) {
+    if (!participant) {
       throw new NotFoundException('Thành viên này không có trong tour');
     }
 
-    await this.cacheManager.del(`user-role:${userId}:${tourId}`);
+    if (participant.userId) {
+      await this.cacheManager.del(`user-role:${participant.userId}:${tourId}`);
+    }
+    await Promise.all([
+      this.cacheManager.del(tourId),
+      this.cacheManager.del(`/api/v1/tours/${tourId}`),
+      this.cacheManager.del(`/api/v1/tours/${tourId}/public`),
+    ]);
 
     await this.prisma.tourParticipant.delete({
-      where: { tourId_userId: { tourId, userId } },
+      where: { id: participant.id },
     });
     return { message: 'Đã xóa thành viên khỏi tour' };
   }

backend/test-add-manual.js

@@ -0,0 +1,28 @@
+async function test() {
+  const loginRes = await fetch('http://localhost:3001/api/v1/auth/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email: 'owner@travel.com', password: '123456' })
+  });
+  const loginData = await loginRes.json();
+  
+  if (loginRes.ok) {
+    const token = loginData.access_token;
+    const tourId = '84d84c21-c12b-4a18-9655-043c85f5c0c5'; // Tour ID from seed
+    const res = await fetch(`http://localhost:3001/api/v1/tours/${tourId}/members`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+      },
+      body: JSON.stringify({ displayName: 'Offline Member X', role: 'MEMBER' })
+    });
+    console.log('Add status:', res.status);
+    const data = await res.json();
+    console.log('Add response:', data);
+  } else {
+    console.error('Login failed:', loginData);
+  }
+}
+
+test().catch(console.error);

backend/test-db.js

@@ -0,0 +1,14 @@
+const { PrismaClient } = require('@prisma/client');
+const prisma = new PrismaClient();
+
+async function main() {
+  const users = await prisma.user.findMany();
+  console.log('--- Users in DB ---');
+  console.log(users);
+  
+  const participants = await prisma.tourParticipant.findMany();
+  console.log('--- Tour Participants in DB ---');
+  console.log(participants);
+}
+
+main().catch(console.error).finally(() => prisma.$disconnect());

backend/test-find-tours.js

@@ -0,0 +1,17 @@
+const { PrismaClient } = require('@prisma/client');
+const prisma = new PrismaClient();
+
+async function main() {
+  const tours = await prisma.tour.findMany({
+    include: {
+      participants: {
+        include: {
+          user: { select: { email: true, name: true } }
+        }
+      }
+    }
+  });
+  console.log(JSON.stringify(tours, null, 2));
+}
+
+main().finally(() => prisma.$disconnect());

backend/test-manual.js

@@ -0,0 +1,36 @@
+const { PrismaClient } = require('@prisma/client');
+const prisma = new PrismaClient();
+
+async function main() {
+  const tourId = '84d84c21-c12b-4a18-9655-043c85f5c0c5'; // Use existing tour ID from seed
+  
+  console.log('Inserting first manual member...');
+  try {
+    const p1 = await prisma.tourParticipant.create({
+      data: {
+        tourId,
+        role: 'MEMBER',
+        displayName: 'Manual Member 1'
+      }
+    });
+    console.log('Inserted:', p1);
+  } catch (err) {
+    console.error('Failed to insert first:', err);
+  }
+
+  console.log('Inserting second manual member...');
+  try {
+    const p2 = await prisma.tourParticipant.create({
+      data: {
+        tourId,
+        role: 'MEMBER',
+        displayName: 'Manual Member 2'
+      }
+    });
+    console.log('Inserted:', p2);
+  } catch (err) {
+    console.error('Failed to insert second:', err);
+  }
+}
+
+main().catch(console.error).finally(() => prisma.$disconnect());

backend/test-search.js

@@ -0,0 +1,22 @@
+async function test() {
+  const loginRes = await fetch('http://localhost:3001/api/v1/auth/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email: 'photomember@travel.com', password: '123456' })
+  });
+  const loginData = await loginRes.json();
+  
+  if (loginRes.ok) {
+    const token = loginData.access_token;
+    const usersRes = await fetch('http://localhost:3001/api/v1/users?q=owner@travel.com', {
+      headers: { 'Authorization': `Bearer ${token}` }
+    });
+    console.log('Users status:', usersRes.status);
+    const usersData = await usersRes.json();
+    console.log('Users data:', usersData);
+  } else {
+    console.error('Login failed:', loginData);
+  }
+}
+
+test().catch(console.error);

frontend/public/tempBase64.code

@@ -0,0 +1 @@
+data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGlmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuYjdjNjRjYywgMjAyNC8wNy8xNi0wNzo1OTo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI2LjAgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNi0wNi0xNVQyMDozNToxMCswNzowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjYtMDYtMjBUMTc6MDk6NTErMDc6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjYtMDYtMjBUMTc6MDk6NTErMDc6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVkYmMzYTlhLTc3YWEtYzY0Yi05MDI0LTU5MjQyZjhkZmM0MCIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmRjYWEyNTZlLWI4ODQtMmY0YS1hZTUzLWUxMjA4OTM1MGY3NyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmFmYmU0M2I3LTcyYjMtY2I0My04NjVkLWM0ZTk1MDE3YTQ2YyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YWZiZTQzYjctNzJiMy1jYjQzLTg2NWQtYzRlOTUwMTdhNDZjIiBzdEV2dDp3aGVuPSIyMDI2LTA2LTE1VDIwOjM1OjEwKzA3OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjYuMCAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmZjZjQzZjRmLWQ3YmYtNmQ0YS05YmVmLTdjNDU1ZDUxODgzMCIgc3RFdnQ6d2hlbj0iMjAyNi0wNi0yMFQxNzowOTo1MSswNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI2LjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1ZGJjM2E5YS03N2FhLWM2NGItOTAyNC01OTI0MmY4ZGZjNDAiIHN0RXZ0OndoZW49IjIwMjYtMDYtMjBUMTc6MDk6NTErMDc6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNi4wIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz53XfMRAAEJh0lEQVR4nOz9d7htx1Univ5GzbXWzunsk7OiJStiOWe3ASeM7aaBhmugyZfU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 truncated

frontend/src/components/AddLocationModal.tsx

@@ -498,12 +498,12 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
                <select className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
                  value={formData.paidById} onChange={e => setFormData({...formData, paidById: e.target.value})}>
                  <option value="">-- Chọn người thanh toán --</option>
-                 {currentTour?.participants?.filter((p: any) => p.user)?.map((p: any) => {
-                   const name = p.user?.name;
+                 {currentTour?.participants?.filter((p: any) => p.user || p.displayName)?.map((p: any) => {
+                   const name = p.user?.name || p.displayName;
                    const email = p.user?.email;
                    const label = [name, email && name ? `(${email})` : email].filter(Boolean).join(' ');
                    return (
-                   <option key={p.userId} value={p.userId}>{label || p.userId}</option>
+                   <option key={p.id} value={p.userId || p.id}>{label || p.userId || p.id}</option>
                    );
                  })}
                </select>

frontend/src/components/AddMemberModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { X, Search, UserPlus, Loader2, Shield, Trash2, Clock, Check } from 'lucide-react';
+import { X, Search, UserPlus, Loader2, Shield, Trash2, Clock } from 'lucide-react';
 import { useConfirm } from '@/hooks/useConfirm';
 import { useNotification } from '@/hooks/useNotification';
 
@@ -7,7 +7,7 @@ interface AddMemberModalProps {
   isOpen: boolean;
   onClose: () => void;
   tourId: string;
-  participants?: Array<{ userId: string; role: string; user?: { id: string; name: string; email: string } }>;
+  participants?: Array<{ id: string; userId?: string | null; role: string; displayName?: string | null; user?: { id: string; name: string; email: string } | null }>;
   joinRequests?: Array<{ id: string; userId: string; user?: { id: string; name: string; email: string }; status: string; requestedById: string }>;
   onRemoveMember?: (userId: string) => Promise<void>;
   onMemberAdded?: () => void;
@@ -29,12 +29,39 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
   const confirm = useConfirm();
   const notify = useNotification();
 
-  const participantIds = useMemo(() => new Set(participants.map((p) => p.userId)), [participants]);
+  const participantIds = useMemo(() => new Set(participants.map((p) => p.userId).filter(Boolean) as string[]), [participants]);
   const requestUserIds = useMemo(() => new Set(joinRequests.map((r) => (r as any).userId)), [joinRequests]);
   const visibleUsers = useMemo(() => users.filter((u) => !participantIds.has(u.id)), [users, participantIds]);
   
   const canCreateDirectly = !userRole || userRole === 'OWNER' || userRole === 'MANAGER';
 
+  const handleManualAdd = async () => {
+    const name = query.trim();
+    if (!name) return;
+    setSubmitting(true);
+    setSubmitError('');
+    try {
+      const res = await fetch(`/api/v1/tours/${tourId}/members`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('token')}`,
+        },
+        body: JSON.stringify({ displayName: name, role }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || data.error || 'Thao tác thất bại');
+      }
+      await onMemberAdded?.();
+      onClose();
+    } catch (err: any) {
+      setSubmitError(err.message || 'Thao tác thất bại');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
   const fetchUsers = async () => {
     setLoading(true);
     setFetchError('');
@@ -87,7 +114,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
     }
   };
 
-  const handleRequestAction = async (reqId: string, action: 'accept' | 'reject', userName: string) => {
+  const handleRequestAction = async (reqId: string, action: 'accept' | 'reject') => {
     if (!onMemberAdded) return;
     setActionLoading(reqId);
     try {
@@ -162,9 +189,9 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
 
         <div className="p-5 space-y-4">
           <div>
-            <p className="text-[11px] font-bold text-gray-500 mb-2">Thành viên của tour ({participants.filter(p => p.user).length})</p>
+            <p className="text-[11px] font-bold text-gray-500 mb-2">Thành viên của tour ({participants.filter(p => p.user || p.displayName).length})</p>
             <div className="flex flex-wrap gap-3">
-              {participants.filter(p => p.user).map((p) => {
+              {participants.filter(p => p.user || p.displayName).map((p) => {
                 const rawToken = localStorage.getItem('token');
                 let currentUserId: string | null = null;
                 try {
@@ -176,15 +203,16 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
                 const isCurrentUser = currentUserId && p.userId === currentUserId;
                 const isOwner = p.role === 'OWNER';
                 const canRemove = onRemoveMember && !isCurrentUser && !isOwner;
+                const memberName = p.user?.name || p.displayName || p.userId || 'Thành viên';
                 return (
-                  <div key={p.userId} className="flex flex-col items-center gap-1">
+                  <div key={p.id} className="flex flex-col items-center gap-1">
                     <div className="relative">
                       <div className="w-10 h-10 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold text-sm overflow-hidden">
-                        {p.user?.name?.charAt(0) || '?'}
+                        {memberName.charAt(0)}
                       </div>
                       {canRemove && (
                         <button
-                          onClick={() => handleRemove(p.userId, p.user?.name || p.userId)}
+                          onClick={() => handleRemove(p.userId || p.id, memberName)}
                           className="absolute -top-1 -right-1 w-4 h-4 bg-gray-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white"
                           aria-label="Remove item"
                         >
@@ -192,7 +220,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
                         </button>
                       )}
                     </div>
-                    <span className="text-[10px] font-semibold text-gray-700 max-w-[72px] truncate">{p.user?.name || p.userId}</span>
+                    <span className="text-[10px] font-semibold text-gray-700 max-w-[72px] truncate">{memberName}</span>
                   </div>
                 );
               })}
@@ -217,7 +245,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
                       <button
                         type="button"
                         disabled={actionLoading === req.id}
-                        onClick={() => handleRequestAction(req.id, 'accept', req.user?.name || req.userId)}
+                        onClick={() => handleRequestAction(req.id, 'accept')}
                         className="w-4 h-4 bg-green-500 hover:bg-green-600 rounded-full flex items-center justify-center text-white text-[10px] leading-none disabled:opacity-50"
                         aria-label="Accept"
                       >
@@ -226,7 +254,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
                       <button
                         type="button"
                         disabled={actionLoading === req.id}
-                        onClick={() => handleRequestAction(req.id, 'reject', req.user?.name || req.userId)}
+                        onClick={() => handleRequestAction(req.id, 'reject')}
                         className="w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white text-[10px] leading-none disabled:opacity-50 -ml-1"
                         aria-label="Reject"
                       >
@@ -293,6 +321,27 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
               <div className="flex justify-center py-10"><Loader2 className="w-8 h-8 animate-spin text-blue-600" /></div>
             ) : (
               <div className="space-y-2 max-h-[40vh] overflow-y-auto pr-1">
+                {query.trim() && canCreateDirectly && (
+                  <button
+                    type="button"
+                    onClick={handleManualAdd}
+                    disabled={submitting}
+                    className="w-full flex items-center gap-3 p-3 rounded-2xl border border-dashed border-blue-300 hover:border-blue-400 bg-blue-50/20 text-blue-700 transition-all text-left mb-2"
+                  >
+                    <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
+                      +
+                    </div>
+                    <div className="flex-1 text-left">
+                      <div className="text-sm font-bold">Thêm thành viên thủ công</div>
+                      <div className="text-[11px] text-gray-500">Thêm "{query.trim()}" trực tiếp vào danh sách thành viên</div>
+                    </div>
+                    {submitting ? (
+                      <Loader2 className="w-4 h-4 animate-spin text-blue-600" />
+                    ) : (
+                      <span className="px-2.5 py-1 bg-blue-600 text-white rounded-xl text-xs font-bold transition-all">Thêm</span>
+                    )}
+                  </button>
+                )}
                 {visibleUsers.map((u) => {
                   const isSelected = selectedUser === u.id;
                   return (

frontend/src/components/CreateTourModal.tsx

@@ -73,13 +73,19 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
     setIsLoading(true);
     setError('');
     try {
-      const memberIds = members.map((m) => m.id);
+      const membersPayload = members.map((m) => {
+        if (m.isManual) {
+          return { displayName: m.name };
+        } else {
+          return { userId: m.id };
+        }
+      });
       const tour = await createTour({ 
         title, 
         description,
         startDate, 
         endDate, 
-        memberIds,
+        members: membersPayload,
         adultCount,
         childCount,
         childDiscount,
@@ -97,18 +103,18 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
   return (
     <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
       <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
-      <div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden p-6">
-        <div className="flex justify-between items-center mb-4">
+      <div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
+        <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
           <h2 className="text-xl font-bold text-gray-900">Tạo Tour mới</h2>
           <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">✕</button>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form onSubmit={handleSubmit} className="p-5 space-y-4 overflow-y-auto flex-1">
           <div>
             <label className="block text-sm font-bold text-gray-700 mb-1">Tên Tour</label>
             <input
               required
-              className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 text-sm"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
               placeholder="VD: Khám phá Đà Lạt"
@@ -170,7 +176,7 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
               <label className="block text-sm font-bold text-gray-700 mb-1">Bắt đầu</label>
               <input
                 type="date"
-                className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                 value={startDate}
                 onChange={(e) => setStartDate(e.target.value)}
               />
@@ -179,7 +185,7 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
               <label className="block text-sm font-bold text-gray-700 mb-1">Kết thúc</label>
               <input
                 type="date"
-                className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                 value={endDate}
                 onChange={(e) => setEndDate(e.target.value)}
               />
@@ -211,50 +217,72 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
             <p className="text-[10px] text-blue-400 italic font-medium">* Dùng để tính toán đơn giá bình quân trong báo cáo chi phí.</p>
           </div>
 
-          <div>
-            <label className="block text-sm font-bold text-gray-700 mb-2">Thành viên tham gia</label>
-            <div className="flex flex-wrap gap-3">
-              {members.map((m) => (
-                <div key={m.id} className="relative">
-                  <div className="w-12 h-12 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold text-sm overflow-hidden">
-                    {m.name}
+          <div className="space-y-2">
+            <label className="block text-sm font-bold text-gray-700">Thành viên tham gia ({members.length})</label>
+            {members.length > 0 && (
+              <div className="flex flex-wrap gap-3 mb-3 p-3 bg-gray-50 rounded-2xl border border-gray-100">
+                {members.map((m) => {
+                  const initial = m.name?.charAt(0) || '?';
+                  return (
+                    <div key={m.id} className="flex flex-col items-center gap-1">
+                      <div className="relative">
+                        <div className="w-10 h-10 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold text-sm overflow-hidden">
+                          {initial}
                         </div>
                         <button
                           type="button"
                           onClick={() => removeMember(m.id)}
-                    className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-gray-500 hover:bg-red-600 text-white flex items-center justify-center transition-colors"
+                          className="absolute -top-1 -right-1 w-4 h-4 bg-gray-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white"
                           aria-label="Remove item"
                         >
-                    <Trash2 size={12} />
+                          <Trash2 size={10} />
                         </button>
-                  <div className="text-[10px] text-center mt-1 max-w-[70px] truncate">{m.name}</div>
                       </div>
-              ))}
+                      <span className="text-[10px] font-semibold text-gray-700 max-w-[72px] truncate">{m.name}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
 
             <div className="relative">
               <input
-                  className="w-36 px-2 py-1 text-sm border border-gray-200 rounded-lg outline-none"
-                  placeholder="Tìm email..."
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 text-sm font-bold text-gray-800"
+                placeholder="Tìm email hoặc nhập tên thành viên ngoài hệ thống..."
                 value={query}
                 onChange={(e) => searchUsers(e.target.value)}
               />
-                {results.length > 0 && (
-                  <div className="absolute top-full left-0 right-0 mt-2 bg-white border border-gray-100 rounded-xl shadow-lg z-10 max-h-60 overflow-y-auto">
-                    {results.map((u) => (
+              {(results.length > 0 || query.trim()) && (
+                <div className="absolute bottom-full mb-2 left-0 right-0 bg-white border border-gray-100 rounded-2xl shadow-xl z-20 max-h-48 overflow-y-auto p-2 space-y-1">
+                  {query.trim() && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const name = query.trim();
+                        setMembers((prev) => (prev.some((m) => m.name.toLowerCase() === name.toLowerCase()) ? prev : [...prev, { id: `manual-${Date.now()}`, name, isManual: true }]));
+                        setQuery('');
+                        setResults([]);
+                      }}
+                      className="w-full text-left px-3 py-2 text-sm hover:bg-blue-50 rounded-xl text-blue-600 font-bold flex items-center gap-2"
+                    >
+                      <span className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-600 text-sm font-black">+</span>
+                      <span>Thêm thành viên ngoài hệ thống: "{query.trim()}"</span>
+                    </button>
+                  )}
+                  {results.filter(u => !members.some(m => m.id === u.id)).map((u) => (
                     <button
                       key={u.id}
                       type="button"
                       onClick={() => confirmAddMember(u)}
-                        className="w-full text-left px-3 py-2 text-sm hover:bg-blue-50"
+                      className="w-full text-left px-3 py-2 text-sm hover:bg-blue-50 rounded-xl flex flex-col"
                     >
-                        <span className="font-bold text-gray-900">{u.name}</span>
-                        <span className="block text-xs text-gray-500">{u.email}</span>
+                      <span className="font-bold text-gray-900">{u.name || 'Chưa đặt tên'}</span>
+                      <span className="text-xs text-gray-500">{u.email}</span>
                     </button>
                   ))}
                 </div>
               )}
             </div>
-            </div>
             {error && <p className="text-xs text-red-600 mt-2">{error}</p>}
           </div>
 

frontend/src/components/ExpenseManager.tsx

@@ -33,7 +33,7 @@ const FamilySizeEditor = ({
     try {
       const nextAdult = type === 'adult' ? newVal : (participant.adultCount ?? 1);
       const nextChild = type === 'child' ? newVal : (participant.childCount ?? 0);
-      await updateMemberFamilyCount(tourId, participant.userId, nextAdult, nextChild);
+      await updateMemberFamilyCount(tourId, participant.userId || participant.id, nextAdult, nextChild);
     } catch (err) {
       console.error("Lỗi khi lưu quy mô gia đình thành viên:", err);
     } finally {
@@ -41,7 +41,7 @@ const FamilySizeEditor = ({
     }
   };
 
-  const isEditable = canManage || currentUserId === participant.userId;
+  const isEditable = canManage || (participant.userId && currentUserId === participant.userId);
 
   if (!isEditable) {
     return <span className="font-bold text-gray-800">{val}</span>;
@@ -218,8 +218,7 @@ export const ExpenseManager = () => {
     const robotoBase64 = "AAEAAAAOAIAAAwBgR0RFRgslCyYAAU70AAAAQEdQT1OW7t6tAAFPNAAAUZJHU1VCLJENOgABoMgAAAQsT1MvMrivKbYAAAFoAAAAYFZETVhu6nZPAAASiAAABeBjbWFwe1eWmQAAGGgAAAh+Z2x5ZnKsuk0AAClMAAD8BGhlYWT3/7sxAAAA7AAAADZoaGVhCywJXgAAASQAAAAkaG10eMBzVnEAAAHIAAAQwGxvY2Hm+KbaAAAg6AAACGJtYXhwBE8BKgAAAUgAAAAgbmFtZfDWLcMAASVQAAAEo3Bvc3RDYN+ZAAEp9AAAJP0AAQAAAAEAAOqeVyxfDzz1AAsIAAAAAADE8BEuAAAAANAzXr36jf3VCTAIcwAAAAkAAgAAAAAAAAABAAAHbP4MAAAJSfqN/dgJMAABAAAAAAAAAAAAAAAAAAAEMAABAAAEMACwABYAeAAFAAEAAAAAAAAAAAAAAAAAAwABAAMEigGQAAUAAAWaBTMAAAEfBZoFMwAAA9EAZgIAAAAAAAAAAAAAAAAA4AAC/1AAIFsAAAAgAAAAAHB5cnMAQAAA//0GAP4AAGYHmgIAIAABn08BAAAEOgWwAAAAIAACAfsAAAAAAAAB+wAAAfsAAAKPAIgE+wBGBH4AbgXcAGkE+QBlAWUAZwK8AIUCyAAmA3IAHASJAE4BkgAdAjUAJQIbAJADTAASBH4AcwR+AKoEfgBdBH4AXgR+ADUEfgCaBH0AgwR+AE0EfgBwBH4AZAHwAIYBsQApBBEASARkAJgELgCGA8cASwcvAGoFOAAcBPsAqQU1AHcFPwCpBIwAqQRsAKkFcwB6BbQAqQItALcEagA1BQQAqQROAKkG/ACpBbQAqQWAAHYFDACpBYAAbQTtAKgEvwBQBMYAMQUwAIwFFwAcBxkAPQUEADkEzgAPBMoAVgIfAJIDSAAoAh8ACQNYAEADnAAEAnkAOQRaAG0EfQCMBDAAXASDAF8EPQBdAscAPAR9AGAEaACMAfEAjQHp/78EDgCNAfEAnAcDAIsEagCMBJAAWwR9AIwEjABfArUAjAQgAF8CnQAJBGkAiAPgACEGAwArA/cAKQPJABYD9wBYArUAQAHzAK8CtQATBXEAgwHzAIsEYQBpBKYAWwW0AGkE2AAfAesAkwToAFoDWABmBkkAWwOTAJMDwQBmBG4AfwZKAFoDqgB4Av0AggRHAGEC7wBCAu8APgKCAHsEiACaA+kAQwIWAJMB+wB0ArkAegOjAHoDwABmBdwAVQY1AFAGOQBvA8kARAd6//IERABZBYEAdgS6AKYEwgCLBsEATgSwAH4EkQBHBIkAWwScAJUFmwAeAfoAmwRzAJoETwAjAioAIwWLAKIEiACRB6EAaQdEAGEB/ACgArn/5AV/AGUEkwBbBZAAjATzAIgCA/+0BDcAYgPEAKkDjQCMA2oAgQHxAI0CrQB5AioAMgPGAHsC/ABeAloAfgAA/TYAAP2GAAD8iwAA/V4AAPwnAe/9OAINALcECwBxAhcAkwRzALEFpAAfBXIAZwU+ADIEkQB4BbUAsgSRAEUFuwBNBYkAWgVSAHEEhQBkBL0AoAQCAC4EiABgBFAAYwQlAG0EiACRBI4AegKXAMMEbgAlA+wAZQTFACkEiACRBE0AZQSIAGAELABRBF0AjwWjAFcFmgBfBpcAegShAHkEQv/aBkgASgX/ACoFZAB7CJkAMQikALEGggA+BbQAsAULAKIGBAAyB0MAGwS/AFAFtACxBakALwUHAE0GLQBTBdkArwV6AJYHhwCwB8AAsAYSABEG6wCyBQUAowVkAJMHJwC3BRgAWQRsAGEEkgCdA1sAmgTUAC4GIAAVBBAAWASeAJwEUgCcBKAAKAXvAJ0EnQCcBJ4AnAPYACgFzQBkBL0AnARZAGcGeACcBp8AkQT3AB4GNgCdBFgAnQRNAGQGiACdBGQALwRo/+cETgBnBskAJwbkAJwEif/9BJ4AnAcIAJwGKwCBBFb/3AcsALgF+QCZBNIAKARGAA8HDADKBgwAvAbRAJMF4QCWCQUAtwfRAJsEJABQA9sATAVyAGcEjABbBQoAFgQDAC4FcgBnBIkAWwcBAJwGJAB+BwkAnAYsAIEFMgB1BEcAZAT9AHQAAPxnAAD8cQAA/WYAAP2kAAD6jQAA+qQEVv/cBRsAqASKAIwEZACiA5AAkQTbALEEBgCRBQkAowR+AJoGjABFBYQAPgfPAKgFtACRCDEAsAb0AJEF7gBxBNMAbQctADQFXAAfBXAAlgRrAIMFcACKBi8APwS+/90FCQCjBFoAmgWyALEEiACRBYcAXQSoAGgEqABpBLcAOgNJADsE9gBXBpQAWQbkAGQGVgA2BSsAMQRKAFMECAB5B8EARAZ1AD8H+wCpBqEAkAT2AHYEHQBlBa0AIwUgAEYFZACWBBQAAAgpAAAEFAAACCkAAAK5AAACCgAAAVwAAAR/AAACMAAAAaIAAADRAAAAAAAABUAAogY/AJADpgANAZkAYAGZADABlwAkAZoAUALUAGgC2wA8AsEAJARpAEYEjwBXArIAigPEAJQFWgCUB6oARAJmAGwCZgBZA6MAOwLvADYDYAB6BKYAWwaRAKcEfgBfBegAewPOAGgIOgCiBQEAZwUXAJgGJgBUBtcAZAbPAGMGagBZBI8AagWOAKkErwBFBJIAqATFAD8IOgBiAgz/sASCAGUEZACYBBEAPgQvAIUECAArAkwAtQKPAG4CAwBcBG4AHwAAAAAIMwBbCDUAXALvAFADC/+iA/P/XgPvAG4DpABbAf0AnwSFABMEUACKBHwAYASAAIoD5gCKA8sAigSsAGME4wCKAegAlwPPACsEVACKA7QAigYCAIoE4wCKBLsAYARcAIoEuwBZBEoAigQgAEMEJgAoBHwAdARnABQGFQAxBFQAJgQrAA0EIwBHBA8AYwQPAJgEDwBOBA8ATgQPADAEDwCABA4AcgQPAEIEDwBgBA8AVQOkAIMC7wB6Au8AQgLvAD4C7wA2Au8AWwLvAFYC7wA6Au8ATwLvAEkDlgCPArUAngNHAIEBkQBnAiUAGwH8/7YEDgBpBDoAHgN5AFcD9ABpBG8AWgTDAGQEiABgBUwAsQUkALIEEwCSBT0AsgQPAJIDnwCBA54AgQR+AE0FfgCDBYEAfgWuAH4FkwCyBeAAfgXjAH4D1QCgBIIAgwRYAA8EzwA+BGsAZQQuAEoEuQCCBQAAeAQgADsEfQCMBDIAXASTAFsEjABbBJ4AWgSNAIwEnABbBDAAXAQ9AF0EfQBgBH4AhQR+AFoFPwCpBYAAdwRaAG0DagCBAfsAAAI1ACUFXQAlBV0AJQSGAAAExgAxAp3/9AU4ABwFOAAcBTgAHAU4ABwFOAAcBTgAHAU4ABwFNQB3BIwAqQSMAKkEjACpBIwAqQIt/+ACLQCwAi3/6QIt/9YFtACpBYAAdgWAAHYFgAB2BYAAdgWAAHYFMACMBTAAjAUwAIwFMACMBM4ADwRaAG0EWgBtBFoAbQRaAG0EWgBtBFoAbQRaAG0EMABcBD0AXQQ9AF0EPQBdBD0AXQH6/8YB+gCWAfr/zwH6/7wEagCMBJAAWwSQAFsEkABbBJAAWwSQAFsEaQCIBGkAiARpAIgEaQCIA8kAFgPJABYFOAAcBFoAbQU4ABwEWgBtBTgAHARaAG0FNQB3BDAAXAU1AHcEMABcBTUAdwQwAFwFNQB3BDAAXAU/AKkFGQBfBIwAqQQ9AF0EjACpBD0AXQSMAKkEPQBdBIwAqQQ9AF0EjACpBD0AXQVzAHoEfQBgBXMAegR9AGAFcwB6BH0AYAVzAHoEfQBgBbQAqQRoAIwCLf+3Afr/nQIt/7YB+v+cAi3/7AH6/9ICLQAJAfH/+gItAKoGlwC3A9oAjQRqADUCA/+0BQQAqQQOAI0ETgChAfEAkwROAKkB8QBXBE4AqQKHAJwETgCpAs0AnAW0AKkEagCMBbQAqQRqAIwFtACpBGoAjARq/84FgAB2BJAAWwWAAHYEkABbBYAAdgSQAFsE7QCoArUAjATtAKgCtQBTBO0AqAK1AGMEvwBQBCAAXwS/AFAEIABfBL8AUAQgAF8EvwBQBCAAXwS/AFAEIABfBMYAMQKdAAkExgAxAp0ACQTGADECxQAJBTAAjARpAIgFMACMBGkAiAUwAIwEaQCIBTAAjARpAIgFMACMBGkAiAUwAIwEaQCIBxkAPQYDACsEzgAPA8kAFgTOAA8EygBWA/cAWATKAFYD9wBYBMoAVgP3AFgHev/yBsEATgWBAHYEiQBbBID/wQSA/8EEJgAoBIUAEwSFABMEhQATBIUAEwSFABMEhQATBIUAEwR8AGAD5gCKA+YAigPmAIoD5gCKAej/vgHoAI4B6P/HAej/tATjAIoEuwBgBLsAYAS7AGAEuwBgBLsAYAR8AHQEfAB0BHwAdAR8AHQEKwANBIUAEwSFABMEhQATBHwAYAR8AGAEfABgBHwAYASAAIoD5gCKA+YAigPmAIoD5gCKA+YAigSsAGMErABjBKwAYwSsAGME4wCKAej/lQHo/5QB6P/KAej/4wHoAIkDzwArBFQAigO0AIIDtACKA7QAigO0AIoE4wCKBOMAigTjAIoEuwBgBLsAYAS7AGAESgCKBEoAigRKAIoEIABDBCAAQwQgAEMEIABDBCYAKAQmACgEfAB0BHwAdAR8AHQEfAB0BHwAdAR8AHQGFQAxBCsADQQrAA0EIwBHBCMARwQjAEcIQABDBTgAHATw//AGGP/+ApEABAWUAD0FMv94BWYAMwKX/5sFOAAcBPsAqQSMAKkEygBWBbQAqQItALcFBACpBvwAqQW0AKkFgAB2BQwAqQTGADEEzgAPBQQAOQIt/9YEzgAPBIUAZARQAGMEiACRApcAwwRdAI8EcwCaBJAAWwSIAJoD4AAhA/cAKQKX/+YEXQCPBJAAWwRdAI8Gl
Line truncated
 
     // Khai báo chuỗi Base64 của Logo (Thay bằng chuỗi thực tế của bạn)
-    const logoBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABOYAAATmCAYAAACF/K4qAABhWmNhQlgAAGFaanVtYgAAAB5qdW1kYzJwYQARABCAAACqADibcQNjMnBhAAAAYTRqdW1iAAAAR2p1bWRjMm1hABEAEIAAAKoAOJtxA3VybjpjMnBhOjEzNjdiNmM2LTM3OGEtNDI4NS04MDQ3LWFlZDdmMTdhNTc5MgAAABf9anVtYgAAAClqdW1kYzJhcwARABCAAACqADibcQNjMnBhLmFzc2VydGlvbnMAAAAJ0Wp1bWIAAAA7anVtZEDLDDK7ikidpwsq1vR/Q2kTYzJwYS5pY29uAAAAABhjMnNoHZq1WZC6p5QbWpi+ZFlYSAAAABdiZmRiAGltYWdlL3N2Zyt4bWwAAAAJd2JpZGI8c3ZnIHdpZHRoPSI3MTYiIGhlaWdodD0iNzE2IiB2aWV3Qm94PSIwIDAgNzE2IDcxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUwOC43NDkgMzE3LjM5OUM1MTYuNzc3IDI4Ny4zMTQgNTA4Ljk5MSAyNTMuODg0IDQ4NS4zODkgMjMwLjI4MkM0NjEuNzg4IDIwNi42ODEgNDI4LjM2IDE5OC44OTUgMzk4LjI3MyAyMDYuOTIzQzM3Ni4yMzEgMTg0LjkyOCAzNDMuMzkgMTc0Ljk1NiAzMTEuMTQ4IDE4My41OTZDMjc4LjkwNiAxOTIuMjM0IDI1NS40NSAyMTcuMjkyIDI0Ny4zNiAyNDcuMzYxQzIxNy4yOTEgMjU1LjQ1MSAxOTIuMjMzIDI3OC45MSAxODMuNTk1IDMxMS4xNDlDMTc0Ljk1NyAzNDMuMzkxIDE4NC45MjcgMzc2LjIzMiAyMDYuOTI0IDM5OC4yNzRDMTk4Ljg5NiA0MjguMzU5IDIwNi42ODMgNDYxLjc4OSAyMzAuMjg0IDQ4NS4zOTFDMjUzLjg4NSA1MDguOTkyIDI4Ny4zMTMgNTE2Ljc3OSAzMTcuNDAxIDUwOC43NUMzMzkuNDQyIDUzMC43NDUgMzcyLjI4NiA1NDAuNzE3IDQwNC41MjUgNTMyLjA3OUM0MzYuNzY3IDUyMy40NDEgNDYwLjIyMyA0OTguMzg0IDQ2OC4zMTMgNDY4LjMxNUM0OTguMzgzIDQ2MC4yMjQgNTIzLjQ0IDQzNi43NjYgNTMyLjA3OCA0MDQuNTI2QzU0MC43MTYgMzcyLjI4NSA1MzAuNzQ3IDMzOS40NDMgNTA4Ljc0OSAzMTcuNDAyVjMxNy4zOTlaTTQ3MC44OTkgMjQ0Ljc3NkM0ODYuODkyIDI2MC43NyA0OTMuNDg4IDI4Mi42MDEgNDkwLjY4NyAzMDMuNDEyTDQxNS41NzcgMjYwLjA0NkM0MTIuNDExIDI1OC4yMTggNDA4LjUwOSAyNTguMjE4IDQwNS4zNDUgMjYwLjA0NkwzMTcuNDAxIDMxMC44MlYyNzcuNTI2QzMxNy40MDEgMjc1LjE5MSAzMTguNjUyIDI3My4wMDUgMzIwLjY3NiAyNzEuODM3TDM4Ny42NDQgMjMzLjE3NEM0MTQuMTc4IDIxOC4zNTMgNDQ4LjM0NiAyMjIuMjIzIDQ3MC45MDEgMjQ0Ljc3Nkg0NzAuODk5Wk0zNTcuODM3IDMxMS4xNDRMMzk4LjI3NSAzMzQuNDkxVjM4MS4xODVMMzU3LjgzNyA0MDQuNTMyTDMxNy4zOTggMzgxLjE4NVYzMzQuNDkxTDM1Ny44MzcgMzExLjE0NFpNMjY0Ljc3NiAyNjkuNjkzQzI2NS4yMDcgMjM5LjMwNSAyODUuNjQ0IDIxMS42NDkgMzE2LjQ1MyAyMDMuMzkzQzMzOC4zIDE5Ny41NCAzNjAuNTA1IDIwMi43NDQgMzc3LjEyNyAyMTUuNTczTDMwMi4wMTQgMjU4LjkzN0MyOTguODQ4IDI2MC43NjQgMjk2Ljg5OCAyNjQuMTQ0IDI5Ni44OTggMjY3Ljc5OFYzNjkuMzQ2TDI2OC4wNjUgMzUyLjY5OUMyNjYuMDQzIDM1MS41MzEgMjY0Ljc3NiAzNDkuMzUzIDI2NC43NzYgMzQ3LjAxN1YyNjkuNjkxVjI2OS42OTNaTTIwMy4zOTEgMzE2LjQ1NEMyMDkuMjQ0IDI5NC42MDggMjI0Ljg1NCAyNzcuOTc4IDI0NC4yNzYgMjY5Ljk5OVYzNTYuNzNDMjQ0LjI3NiAzNjAuMzg0IDI0Ni4yMjYgMzYzLjc2MyAyNDkuMzkyIDM2NS41OTFMMzM3LjMzNyA0MTYuMzY1TDMwOC41MDMgNDMzLjAxM0MzMDYuNDgxIDQzNC4xODEgMzAzLjk2MSA0MzQuMTg4IDMwMS45MzkgNDMzLjAyTDIzNC45NzEgMzk0LjM1N0MyMDguODY4IDM3OC43ODkgMTk1LjEzOCAzNDcuMjYxIDIwMy4zOTEgMzE2LjQ1NFpNMjQ0Ljc3NSA0NzAuOUMyMjguNzgxIDQ1NC45MDYgMjIyLjE4NiA0MzMuMDc1IDIyNC45ODYgNDEyLjI2NEwzMDAuMDk2IDQ1NS42M0MzMDMuMjYzIDQ1Ny40NTcgMzA3LjE2NCA0NTcuNDU3IDMxMC4zMjggNDU1LjYzTDM5OC4yNzMgNDA0Ljg1NlY0MzguMTQ5QzM5OC4yNzMgNDQwLjQ4NSAzOTcuMDIyIDQ0Mi42NzEgMzk0Ljk5NyA0NDMuODM5TDMyOC4wMjkgNDgyLjUwMkMzMDEuNDk1IDQ5Ny4zMjIgMjY3LjMyNyA0OTMuNDUyIDI0NC43NzIgNDcwLjlIMjQ0Ljc3NVpNNDUwLjg5NyA0NDUuOTgyQzQ1MC40NjYgNDc2LjM3MSA0MzAuMDI5IDUwNC4wMjcgMzk5LjIyIDUxMi4yODNDMzc3LjM3MyA1MTguMTM2IDM1NS4xNjggNTEyLjkzMiAzMzguNTQ3IDUwMC4xMDJMNDEzLjY1OSA0NTYuNzM4QzQxNi44MjYgNDU0LjkxMSA0MTguNzc1IDQ1MS41MzIgNDE4Ljc3NSA0NDcuODc3VjM0Ni4zMjlMNDQ3LjYwOSAzNjIuOTc3QzQ0OS42MzEgMzY0LjE0NSA0NTAuODk3IDM2Ni4zMjMgNDUwLjg5NyAzNjguNjU5VjQ0NS45ODVWNDQ1Ljk4MlpNNTEyLjI4MiAzOTkuMjIxQzUwNi40MjkgNDIxLjA2OCA0OTAuODE5IDQzNy42OTcgNDcxLjM5NyA0NDUuNjc2VjM1OC45NDZDNDcxLjM5NyAzNTUuMjkyIDQ2OS40NDggMzUxLjkxMiA0NjYuMjgxIDM1MC4wODVMMzc4LjMzNiAyOTkuMzExTDQwNy4xNyAyODIuNjYzQzQwOS4xOTIgMjgxLjQ5NSA0MTEuNzEyIDI4MS40ODcgNDEzLjczNCAyODIuNjU1TDQ4MC43MDIgMzIxLjMxOEM1MDYuODA1IDMzNi44ODcgNTIwLjUzNiAzNjguNDE1IDUxMi4yODIgMzk5LjIyMVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgoAAAF+anVtYgAAAEFqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmFjdGlvbnMudjIAAAAAGGMyc2g7YYO7307xodbf7Zi6r1+jAAABNWNib3KhZ2FjdGlvbnODpGZhY3Rpb25sYzJwYS5jcmVhdGVkZHdoZW7AdDIwMjYtMDYtMTVUMDA6MDA6MDBabXNvZnR3YXJlQWdlbnSiZG5hbWVpZ3B0LWltYWdlZ3ZlcnNpb25jMi4wcWRpZ2l0YWxTb3VyY2VUeXBleEZodHRwOi8vY3YuaXB0Yy5vcmcvbmV3c2NvZGVzL2RpZ2l0YWxzb3VyY2V0eXBlL3RyYWluZWRBbGdvcml0aG1pY01lZGlhomZhY3Rpb25uYzJwYS5jb252ZXJ0ZWRkd2hlbsB0MjAyNi0wNi0xNVQwMDowMDowMFqiZmFjdGlvbngYYzJwYS53YXRlcm1hcmtlZC51bmJvdW5kZHdoZW7AdDIwMjYtMDYtMTVUMDA6MDA6MDBaAAALump1bWIAAABJanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5jZXJ0aWZpY2F0ZS1zdGF0dXMAAAAAGGMyc2hJy8qAy+KVn4acV4lEAUlgAAALaWNib3KhaG9jc3BWYWxzgnkFhE1JSUVId29CQUtDQ0JCZ3dnZ1FVQmdrckJnRUZCUWN3QVFFRWdnUUZNSUlFQVRDQm9xSVdCQlFQTm45dEpqYnFjeTdCUUg0VkR5NVpmeVpVY1JnUE1qQXlOakEyTVRNd05qRTNNakZhTUhjd2RUQk5NQWtHQlNzT0F3SWFCUUFFRkQ1TWZJNVFDNGRzY3hXK3IyNlg2aER1bENESkJCVERzeVNXTkpPaFdlcFNHR3VlRitDcHV0YXdUQUlVVXBRbEI0RzFhb2I1TXhkNGNOYU9yZTlpR2tHQUFCZ1BNakF5TmpBMk1UTXdOakUzTVRsYW9CRVlEekl3TWpZd05qSXdNRFl4TnpFNVdqQUtCZ2dxaGtqT1BRUURBZ05KQURCR0FpRUEzaVRyOHRNMC9NQVpqajg4bm1WVDlSaGJQQmZDTVg0ejhIcmF4cHFIZm1ZQ0lRREMyeUZaU3lKMVdYSmd1eTcvK3F6UDJBVnVGcnhka2V3TVNDaWNBTFhnQnFDQ0F3RXdnZ0w5TUlJQytUQ0NBbjZnQXdJQkFnSVVYQVhzWmVtVjkyd2w0TVFWQzJYMm4zaCtQenN3Q2dZSUtvWkl6ajBFQXdNd2dhY3hDekFKQmdOVkJBWVRBbFZUTVJFd0R3WURWUVFJREFoT1pYY2dXVzl5YXpFUk1BOEdBMLine truncated
-
+    const logoBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGlmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuYjdjNjRjYywgMjAyNC8wNy8xNi0wNzo1OTo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI2LjAgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNi0wNi0xNVQyMDozNToxMCswNzowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjYtMDYtMjBUMTc6MDk6NTErMDc6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjYtMDYtMjBUMTc6MDk6NTErMDc6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVkYmMzYTlhLTc3YWEtYzY0Yi05MDI0LTU5MjQyZjhkZmM0MCIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmRjYWEyNTZlLWI4ODQtMmY0YS1hZTUzLWUxMjA4OTM1MGY3NyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmFmYmU0M2I3LTcyYjMtY2I0My04NjVkLWM0ZTk1MDE3YTQ2YyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YWZiZTQzYjctNzJiMy1jYjQzLTg2NWQtYzRlOTUwMTdhNDZjIiBzdEV2dDp3aGVuPSIyMDI2LTA2LTE1VDIwOjM1OjEwKzA3OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjYuMCAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmZjZjQzZjRmLWQ3YmYtNmQ0YS05YmVmLTdjNDU1ZDUxODgzMCIgc3RFdnQ6d2hlbj0iMjAyNi0wNi0yMFQxNzowOTo1MSswNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI2LjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1ZGJjM2E5YS03N2FhLWM2NGItOTAyNC01OTI0MmY4ZGZjNDAiIHN0RXZ0OndoZW49IjIwMjYtMDYtMjBUMTc6MDk6NTErMDc6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNi4wIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz53XfMRAAEJh0lEQVR4nOz9d7htx1Univ5GzbXWzunsk7OiJStiOWe3ASeM7aaBhmugyZfU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 truncated
     // 2. Thêm font vào Virtual File System của jsPDF
     doc.addFileToVFS("Roboto-Regular.ttf", robotoBase64);
 
@@ -280,11 +279,11 @@ export const ExpenseManager = () => {
       ? ["Thành viên", "Vai trò", "Người lớn", "Trẻ em", "Chi phí trách nhiệm", "Đã trả", "Còn lại"]
       : ["Thành viên", "Vai trò", "Chi phí trách nhiệm", "Đã trả", "Còn lại"];
 
-    const memberRows = participants.filter((p: any) => p.user).map((p: any) => {
+    const memberRows = participants.filter((p: any) => p.user || p.displayName).map((p: any) => {
       const pAdults = splitMode === 'family' ? (p.adultCount ?? 1) : 1;
       const pChildren = splitMode === 'family' ? (p.childCount ?? 0) : 0;
       const responsibilityCost = (splitResult.adultPrice * pAdults) + (splitResult.childPrice * pChildren);
-      const amountPaid = stats.participantPaidMap[p.userId] || 0;
+      const amountPaid = stats.participantPaidMap[p.userId || p.id] || 0;
       const remaining = responsibilityCost - amountPaid;
 
       const remainingText = remaining > 0
@@ -293,9 +292,11 @@ export const ExpenseManager = () => {
           ? `Thối lại: ${Math.abs(remaining).toLocaleString()}đ`
           : 'Hoàn thành';
 
+      const displayName = p.user?.name || p.displayName || 'Thành viên';
+
       return splitMode === 'family'
-        ? [p.user.name, p.role, pAdults, pChildren, `${responsibilityCost.toLocaleString()}đ`, `${amountPaid.toLocaleString()}đ`, remainingText]
-        : [p.user.name, p.role, `${responsibilityCost.toLocaleString()}đ`, `${amountPaid.toLocaleString()}đ`, remainingText];
+        ? [displayName, p.role, pAdults, pChildren, `${responsibilityCost.toLocaleString()}đ`, `${amountPaid.toLocaleString()}đ`, remainingText]
+        : [displayName, p.role, `${responsibilityCost.toLocaleString()}đ`, `${amountPaid.toLocaleString()}đ`, remainingText];
     });
 
     autoTable(doc, {
@@ -457,25 +458,28 @@ export const ExpenseManager = () => {
               </tr>
             </thead>
             <tbody className="divide-y divide-gray-50">
-              {participants.filter((p: any) => p.user).length > 0 ? (
-                participants.filter((p: any) => p.user).map((p: any) => {
+              {participants.filter((p: any) => p.user || p.displayName).length > 0 ? (
+                participants.filter((p: any) => p.user || p.displayName).map((p: any) => {
                   const pAdults = splitMode === 'family' ? (p.adultCount ?? 1) : 1;
                   const pChildren = splitMode === 'family' ? (p.childCount ?? 0) : 0;
 
                   const responsibilityCost = (splitResult.adultPrice * pAdults) + (splitResult.childPrice * pChildren);
-                  const amountPaid = stats.participantPaidMap[p.userId] || 0;
+                  const amountPaid = stats.participantPaidMap[p.userId || p.id] || 0;
                   const remaining = responsibilityCost - amountPaid;
 
+                  const displayName = p.user?.name || p.displayName || 'Thành viên';
+                  const email = p.user?.email || 'Thành viên ngoài hệ thống';
+
                   return (
-                    <tr key={p.userId} className="hover:bg-gray-50/50 transition-colors text-sm">
+                    <tr key={p.id} className="hover:bg-gray-50/50 transition-colors text-sm">
                       <td className="px-4 py-4">
                         <div className="flex items-center gap-2.5">
                           <div className="w-8 h-8 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold text-xs">
-                            {p.user.name?.charAt(0) || '?'}
+                            {displayName.charAt(0)}
                           </div>
                           <div className="flex flex-col">
-                            <span className="font-bold text-gray-900">{p.user.name}</span>
-                            <span className="text-[10px] text-gray-400 font-semibold">{p.user.email}</span>
+                            <span className="font-bold text-gray-900">{displayName}</span>
+                            <span className="text-[10px] text-gray-400 font-semibold">{email}</span>
                           </div>
                         </div>
                       </td>

frontend/src/pages/TourDetailPage.tsx

@@ -1411,7 +1411,7 @@ export const TourDetailPage = ({
   const tourInfo = {
     title: currentTour?.title || "Hành trình khám phá TP.HCM",
     date: tourDateDisplay,
-    membersCount: currentTour?.participants?.filter((p: any) => p.user)?.length || 0,
+    membersCount: currentTour?.participants?.filter((p: any) => p.user || p.displayName)?.length || 0,
     budget: currentTour?.totalCost ? `${Number(currentTour.totalCost).toLocaleString()} VND` : "0 VND",
     coverImage: getMostLikedPhoto(currentTour?.photos || [])?.imageUrl || "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop"
   };
@@ -1507,19 +1507,26 @@ export const TourDetailPage = ({
             {/* Member Avatars Stack */}
             <div className="flex items-center gap-2 mt-4">
               <div className="flex flex-wrap gap-2"> {/* Always show participants */}
-                {currentTour?.participants?.filter((p: any) => p.user)?.slice(0, 5).map((p: any, i: number) => (
+                {currentTour?.participants?.filter((p: any) => p.user || p.displayName)?.slice(0, 5).map((p: any) => {
+                  const memberName = p.user?.name || p.displayName || 'Thành viên';
+                  return (
                     <button
-                    key={p.userId || i}
+                      key={p.id}
                       onClick={() => {
                         setSelectedMember(p);
                         setIsMemberDetailOpen(true);
                       }}
                       className="w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg hover:scale-110 transition-transform"
-                    title={p.user?.name || p.userId}
+                      title={memberName}
                     >
+                      {p.user ? (
                         <img src={`https://i.pravatar.cc/100?u=${p.userId}`} alt="Avatar" />
+                      ) : (
+                        <span>{memberName.charAt(0)}</span>
+                      )}
                     </button>
-                ))}
+                  );
+                })}
                 {isOwner && !isPublicView && joinRequests.slice(0, 3).map((req: any) => ( // Hide join requests in public view
                   <div key={req.id} className="relative group">
                     <div className="w-10 h-10 rounded-full border-2 border-amber-400 bg-amber-50 flex items-center justify-center text-amber-700 font-bold overflow-hidden shadow-lg">
@@ -1589,18 +1596,16 @@ export const TourDetailPage = ({
                   </div>
                 )}
               </div>
-              {!isPublicView && ( // Hide add member button in public view
+              {!isPublicView && canInvite && (
                 <button
                   onClick={() => {
                     if (!currentTour) return;
-                    if (canInvite) setIsAddMemberOpen(true);
+                    setIsAddMemberOpen(true);
                   }}
-                  disabled={!canInvite}
-                  className={`p-2 rounded-full border backdrop-blur-sm transition-all ml-2 ${
-                    canInvite ? 'bg-white/10 hover:bg-white/20 border-white/20' : 'bg-white/5 border-white/10 opacity-50'
-                  }`}
+                  className="flex items-center gap-1.5 px-3 py-2 rounded-full border border-white/20 bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition-all ml-2 shadow-md hover:scale-105 active:scale-95"
                 >
-                  <Plus className="w-4 h-4" />
+                  <Plus className="w-3.5 h-3.5" />
+                  Thêm thành viên
                 </button>
               )}
             </div>
@@ -2796,11 +2801,11 @@ export const TourDetailPage = ({
           <div className="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold">
-                {selectedMember.user?.name?.charAt(0) || '?'}
+                {selectedMember.user?.name?.charAt(0) || selectedMember.displayName?.charAt(0) || '?'}
               </div>
               <div>
-                <div className="text-base font-bold text-gray-900">{selectedMember.user?.name || 'Chưa đặt tên'}</div>
-                <div className="text-xs text-gray-500">{selectedMember.user?.email}</div>
+                <div className="text-base font-bold text-gray-900">{selectedMember.user?.name || selectedMember.displayName || 'Chưa đặt tên'}</div>
+                <div className="text-xs text-gray-500">{selectedMember.user?.email || 'Thành viên ngoài hệ thống'}</div>
                 <div className="text-[10px] font-semibold text-gray-500">{selectedMember.role}</div>
               </div>
             </div>
@@ -2817,7 +2822,7 @@ export const TourDetailPage = ({
                   onClick={async () => {
                     if (!currentTour || !selectedMember) return;
                     try {
-                      await removeMember(currentTour.id, selectedMember.userId);
+                      await removeMember(currentTour.id, selectedMember.userId || selectedMember.id);
                       setIsMemberDetailOpen(false);
                     } catch (e) {
                         notify({ title: 'Thông báo', message: 'Không thể xóa thành viên', type: 'error' });

frontend/src/store/useTourStore.ts

@@ -23,7 +23,7 @@ interface TourState {
   updateTourStartPoint: (tourId: string, data: any) => Promise<void>;
   updateTourEndPoint: (tourId: string, data: any) => Promise<void>;
   optimizeRouting: (legId: string) => Promise<void>;
-  addMember: (tourId: string, member: { userId: string; role?: string }) => Promise<any>;
+  addMember: (tourId: string, member: { userId?: string; displayName?: string; role?: string }) => Promise<any>;
   removeMember: (tourId: string, userId: string) => Promise<void>;
   updateMemberFamilyCount: (tourId: string, userId: string, adultCount: number, childCount: number) => Promise<void>;
   setActiveLegId: (id: string | null) => void;
@@ -314,7 +314,7 @@ export const useTourStore = create<TourState>((set, get) => ({
     const { currentTour } = get();
     if (currentTour) get().fetchTour(currentTour.id);
   },
-  addMember: async (tourId: string, member: { userId: string; role?: string }) => {
+  addMember: async (tourId: string, member: { userId?: string; displayName?: string; role?: string }) => {
     const response = await fetch(`/api/v1/tours/${tourId}/members`, {
       method: 'POST',
       headers: {