fix: lướt xem ảnh ở màn hình index của người dùng public

.antigravityignore

@@ -0,0 +1,13 @@
+node_modules/
+server/node_modules/
+
+# Bỏ qua cấu hình hệ thống và Git
+.git/
+.idea/
+.vscode/
+
+# Bỏ qua các file log và build
+*.log
+dist/
+build/
+out/

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "continue.enableConsole": true
+    "continue.enableConsole": true,
+    "remote.autoForwardPortsFallback": 0
 }

PROMPT_IMAGE_PANNING.md

@@ -0,0 +1,79 @@
+# To AI Agent: Implement Mobile Horizontal Image Panning Component
+
+## 1. Context & Objective
+We are developing a travel application. We need to implement a mobile-first image viewer component. 
+**CRITICAL REQUIREMENT:** When a user swipes/drags horizontally on mobile, the UI must NOT switch to the next image. Instead, it must smoothly scroll/pan horizontally to reveal the hidden, unexposed parts of the *same* wide/panoramic image.
+
+---
+
+## 2. Technical Stack & Scope
+- **Target Platform:** Mobile Web / Responsive (Touch-friendly).
+- **Preferred Method:** CSS-First approach utilizing Viewport Overflow (for optimal GPU performance and native inertia scrolling).
+- **Avoid:** Do NOT use global slider libraries (like standard Swiper/Slick) if they force image switching behavior.
+
+---
+
+## 3. UI/UX Specifications
+
+### A. DOM Structure
+- A wrapper/container acting as the "window view" (`.image-pan-container`).
+- The target wide/panoramic image (`.image-pan-element`).
+
+### B. CSS Rules & Constraints
+1. **Container (`.image-pan-container`):**
+   - Must have a fixed width (e.g., `100vw` or `100%` of parent).
+   - Must set `overflow-x: auto` and `overflow-y: hidden` to enable horizontal touch scrolling only.
+   - Must enable smooth scrolling (`scroll-behavior: smooth`) and native touch momentum (`-webkit-overflow-scrolling: touch`).
+   - **Crucial:** Hide the native scrollbar across all major browsers (Webkit, Firefox, IE/Edge) to make it look like a native mobile app feature.
+
+2. **Image Element (`.image-pan-element`):**
+   - Must fit the container's height perfectly (`height: 100%`).
+   - Width must be calculated automatically based on aspect ratio (`width: auto`).
+   - Must override any global framework styles: enforce `max-width: none !important`.
+   - Do NOT use `object-fit: cover` as it will crop the scrolling data.
+
+---
+
+## 4. Reference Code Blueprint
+
+Use the following snippet as a baseline for your implementation:
+
+```html
+<div class="image-pan-container">
+  <img src="YOUR_PANORAMIC_IMAGE_URL" class="image-pan-element" alt="Panoramic View" />
+</div>
+
+/* Styling Architecture */
+.image-pan-container {
+  width: 100%;
+  height: 400px; /* Adjust height based on project guidelines */
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Hide scrollbars entirely */
+.image-pan-container::-webkit-scrollbar {
+  display: none;
+}
+.image-pan-container {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.image-pan-element {
+  height: 100%;
+  width: auto;
+  max-width: none !important;
+  display: block;
+}
+
+5. Acceptance Criteria
+[ ] The wide photo fills the component height and overflows horizontally without distortion.
+
+[ ] Users can smoothly swipe left/right with their fingers to view all details of the photo.
+
+[ ] No desktop/mobile scrollbars are visible during the interaction.
+
+[ ] Ensure max-width override is active so Tailwind or other CSS frameworks don't crush the image width to 100%.

backend/.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+npm-debug.log
+.env
+.git
+.gitignore

backend/Dockerfile

@@ -0,0 +1,38 @@
+FROM node:20-alpine AS base
+
+# Install openssl for Prisma
+RUN apk add --no-cache openssl
+
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+COPY prisma ./prisma/
+
+# Development stage
+FROM base AS development
+RUN npm install
+COPY . .
+RUN npx prisma generate
+EXPOSE 3001
+CMD ["npm", "run", "start:dev"]
+
+# Build stage for production
+FROM base AS build
+RUN npm install
+COPY . .
+RUN npx prisma generate
+RUN npm run build
+RUN npm prune --production
+
+# Production stage
+FROM node:20-alpine AS production
+RUN apk add --no-cache openssl
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+COPY --from=build /usr/src/app/node_modules ./node_modules
+COPY --from=build /usr/src/app/dist ./dist
+COPY --from=build /usr/src/app/prisma ./prisma
+
+EXPOSE 3001
+CMD ["node", "dist/src/main.js"]

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/auth/jwt-auth.guard.d.ts

@@ -1,4 +1,8 @@
 declare const JwtAuthGuard_base: import("@nestjs/passport").Type<import("@nestjs/passport").IAuthGuard>;
 export declare class JwtAuthGuard extends JwtAuthGuard_base {
 }
+declare const JwtAuthGuardNoAnonymous_base: import("@nestjs/passport").Type<import("@nestjs/passport").IAuthGuard>;
+export declare class JwtAuthGuardNoAnonymous extends JwtAuthGuardNoAnonymous_base {
+    handleRequest(err: any, user: any, info: any): any;
+}
 export {};

backend/dist/src/auth/jwt-auth.guard.js

@@ -6,13 +6,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JwtAuthGuard = void 0;
+exports.JwtAuthGuardNoAnonymous = exports.JwtAuthGuard = void 0;
 const common_1 = require("@nestjs/common");
 const passport_1 = require("@nestjs/passport");
+const common_2 = require("@nestjs/common");
 let JwtAuthGuard = class JwtAuthGuard extends (0, passport_1.AuthGuard)('jwt') {
 };
 exports.JwtAuthGuard = JwtAuthGuard;
 exports.JwtAuthGuard = JwtAuthGuard = __decorate([
     (0, common_1.Injectable)()
 ], JwtAuthGuard);
+let JwtAuthGuardNoAnonymous = class JwtAuthGuardNoAnonymous extends (0, passport_1.AuthGuard)('jwt') {
+    handleRequest(err, user, info) {
+        if (err || !user) {
+            throw err || new common_2.UnauthorizedException('Phiên làm việc không hợp lệ hoặc đã hết hạn');
+        }
+        if (user.isAnonymous) {
+            throw new common_2.UnauthorizedException('Tài khoản khách không có quyền truy cập tính năng này. Vui lòng đăng ký tài khoản để tiếp tục.');
+        }
+        return user;
+    }
+};
+exports.JwtAuthGuardNoAnonymous = JwtAuthGuardNoAnonymous;
+exports.JwtAuthGuardNoAnonymous = JwtAuthGuardNoAnonymous = __decorate([
+    (0, common_1.Injectable)()
+], JwtAuthGuardNoAnonymous);
 //# sourceMappingURL=jwt-auth.guard.js.map

backend/dist/src/auth/jwt-auth.guard.js.map

@@ -1 +1 @@
-{"version":3,"file":"jwt-auth.guard.js","sourceRoot":"","sources":["../../../src/auth/jwt-auth.guard.ts"],"names":[],"mappings":";;;;;;;;;AAAA,2CAA4C;AAC5C,+CAA6C;AAGtC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,IAAA,oBAAS,EAAC,KAAK,CAAC;CAAG,CAAA;AAAxC,oCAAY;uBAAZ,YAAY;IADxB,IAAA,mBAAU,GAAE;GACA,YAAY,CAA4B"}
+{"version":3,"file":"jwt-auth.guard.js","sourceRoot":"","sources":["../../../src/auth/jwt-auth.guard.ts"],"names":[],"mappings":";;;;;;;;;AAAA,2CAA4C;AAC5C,+CAA6C;AAC7C,2CAAuD;AAGhD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,IAAA,oBAAS,EAAC,KAAK,CAAC;CAAG,CAAA;AAAxC,oCAAY;uBAAZ,YAAY;IADxB,IAAA,mBAAU,GAAE;GACA,YAAY,CAA4B;AAI9C,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,IAAA,oBAAS,EAAC,KAAK,CAAC;IAC3D,aAAa,CAAC,GAAQ,EAAE,IAAS,EAAE,IAAS;QAC1C,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YACjB,MAAM,GAAG,IAAI,IAAI,8BAAqB,CAAC,6CAA6C,CAAC,CAAC;QACxF,CAAC;QAGD,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,IAAI,8BAAqB,CAAC,gGAAgG,CAAC,CAAC;QACpI,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAbY,0DAAuB;kCAAvB,uBAAuB;IADnC,IAAA,mBAAU,GAAE;GACA,uBAAuB,CAanC"}

backend/dist/src/auth/jwt.strategy.d.ts

@@ -5,8 +5,8 @@ export declare class JwtStrategy extends JwtStrategy_base {
     constructor(prisma: PrismaService);
     validate(payload: any): Promise<{
         id: string;
-        email: string;
-        passwordHash: string;
+        email: string | null;
+        passwordHash: string | null;
         name: string | null;
         phone: string | null;
         address: string | null;
@@ -14,6 +14,7 @@ export declare class JwtStrategy extends JwtStrategy_base {
         createdAt: Date;
         isAdmin: boolean;
         isBlocked: boolean;
+        isAnonymous: boolean;
     }>;
 }
 export {};

backend/dist/src/auth/jwt.strategy.js.map

@@ -1 +1 @@
-{"version":3,"file":"jwt.strategy.js","sourceRoot":"","sources":["../../../src/auth/jwt.strategy.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAAmE;AACnE,+CAAoD;AACpD,+CAAoD;AACpD,gEAA4D;AAGrD,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,IAAA,2BAAgB,EAAC,uBAAQ,CAAC;IACzD,YAAoB,MAAqB;QACvC,KAAK,CAAC;YACJ,cAAc,EAAE,yBAAU,CAAC,2BAA2B,EAAE;YACxD,gBAAgB,EAAE,KAAK;YACvB,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,UAAU,IAAI,cAAc;SACtD,CAAC,CAAC;QALe,WAAM,GAAN,MAAM,CAAe;IAMzC,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,OAAY;QACzB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;YAC7C,KAAK,EAAE,EAAE,EAAE,EAAE,OAAO,CAAC,GAAG,EAAE;SAC3B,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,IAAI,8BAAqB,CAAC,sDAAsD,CAAC,CAAC;QAC1F,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AApBY,kCAAW;sBAAX,WAAW;IADvB,IAAA,mBAAU,GAAE;qCAEiB,8BAAa;GAD9B,WAAW,CAoBvB"}
+{"version":3,"file":"jwt.strategy.js","sourceRoot":"","sources":["../../../src/auth/jwt.strategy.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAAmE;AACnE,+CAAoD;AACpD,+CAAoD;AACpD,gEAA4D;AAGrD,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,IAAA,2BAAgB,EAAC,uBAAQ,CAAC;IACzD,YAAoB,MAAqB;QACvC,KAAK,CAAC;YACJ,cAAc,EAAE,yBAAU,CAAC,2BAA2B,EAAE;YACxD,gBAAgB,EAAE,KAAK;YACvB,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,UAAU,IAAI,cAAc;SACtD,CAAC,CAAC;QALe,WAAM,GAAN,MAAM,CAAe;IAMzC,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,OAAY;QACzB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;YAC7C,KAAK,EAAE,EAAE,EAAE,EAAE,OAAO,CAAC,GAAG,EAAE;SAC3B,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,IAAI,8BAAqB,CAAC,sDAAsD,CAAC,CAAC;QAC1F,CAAC;QAID,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAtBY,kCAAW;sBAAX,WAAW;IADvB,IAAA,mBAAU,GAAE;qCAEiB,8BAAa;GAD9B,WAAW,CAsBvB"}

backend/dist/src/main.d.ts

@@ -6,6 +6,18 @@ import { ParticipantRole } from '@prisma/client';
 import { Reflector } from '@nestjs/core';
 import { CanActivate, ExecutionContext } from '@nestjs/common';
 import { Cache } from 'cache-manager';
+export declare class CommentGateway implements OnGatewayConnection {
+    server: Server;
+    handleConnection(client: Socket): void;
+    handleJoinTour(client: Socket, tourId: string): void;
+    handleJoinPhoto(client: Socket, photoId: string): void;
+    notifyNewComment(tourId: string, data: any): void;
+    notifyNewPhotoComment(photoId: string, data: any): void;
+    handleJoinUser(client: Socket, userId: string): void;
+    notifyNewMessage(receiverId: string, data: any): void;
+    notifyConnectionAccepted(requesterId: string, data: any): void;
+    notifyJoinRequestAccepted(userId: string, data: any): void;
+}
 export declare const ROLES_KEY = "roles";
 export declare const Roles: (...roles: ParticipantRole[]) => import("@nestjs/common").CustomDecorator<string>;
 export declare class TourRoleGuard implements CanActivate {
@@ -15,9 +27,9 @@ export declare class TourRoleGuard implements CanActivate {
     constructor(reflector: Reflector, prisma: PrismaService, cacheManager: Cache);
     canActivate(context: ExecutionContext): Promise<boolean>;
 }
-export declare class CommentGateway implements OnGatewayConnection {
-    server: Server;
-    handleConnection(client: Socket): void;
-    handleJoinTour(client: Socket, tourId: string): void;
-    notifyNewComment(tourId: string, data: any): void;
+export declare class EmailService {
+    private transporter;
+    constructor();
+    sendOTP(email: string, otp: string): Promise<any>;
+    sendTourInvitation(email: string, tourTitle: string, inviteLink: string): Promise<any>;
 }

backend/nest.log

@@ -0,0 +1,80 @@
+
+> backend@0.0.1 start:dev
+> nest start --watch
+
+[10:46:05 PM] Starting compilation in watch mode...
+
+[10:46:08 PM] Found 0 errors. Watching for file changes.
+
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [NestFactory] Starting Nest application...
+--- [PRISMA CHECK] ---
+DATABASE_URL nhận được: ĐÃ ĐỌC THÀNH CÔNG ✔️
+----------------------
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [InstanceLoader] ConfigHostModule dependencies initialized +40ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [InstanceLoader] JwtModule dependencies initialized +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [InstanceLoader] ConfigModule dependencies initialized +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [InstanceLoader] CacheModule dependencies initialized +15ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [InstanceLoader] AppModule dependencies initialized +2ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [WebSocketsController] CommentGateway subscribed to the "joinTour" message +11ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [WebSocketsController] CommentGateway subscribed to the "joinPhoto" message +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RoutesResolver] AppController {/api/v1}: +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1, GET} route +2ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RoutesResolver] AuthController {/api/v1/auth}: +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/auth/convert-guest, POST} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/auth/create-guest, POST} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/auth/status, GET} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/auth/login, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/auth/signup/request, POST} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/auth/signup/verify, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RoutesResolver] PublicTourController {/api/v1/tours}: +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:id/public, GET} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RoutesResolver] TourController {/api/v1/tours}: +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours, POST} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:tourId/locations, POST} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:tourId/start-point, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:tourId/end-point, POST} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:tourId/legs/batch, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:tourId/legs, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:id, PATCH} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:id, DELETE} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/explore, GET} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:id, GET} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:tourId/members, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:tourId/join-requests, GET} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:tourId/join-requests, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:tourId/join-requests/:requestId/accept, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:tourId/join-requests/:requestId/reject, POST} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:tourId/members/:userId, DELETE} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/tours/:tourId/photos, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RoutesResolver] UserController {/api/v1/users}: +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/users, GET} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/users/me/photos, GET} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/users/:id, PATCH} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/users/:id, DELETE} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/users/block/:id, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RoutesResolver] RoutingController {/api/v1/routing}: +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/routing/optimize/:legId, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RoutesResolver] LegController {/api/v1/legs}: +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/legs/:id, PATCH} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/legs/:id, DELETE} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RoutesResolver] LocationController {/api/v1/locations}: +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/locations/:id, PATCH} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/locations/:id, DELETE} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RoutesResolver] CommentController {/api/v1/locations}: +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/locations/:locationId/comments, GET} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/locations/:locationId/comments, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RoutesResolver] PhotoController {/api/v1/photos}: +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/photos/upload-anonymous, POST} route +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/photos/:id, DELETE} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RoutesResolver] PublicPhotoController {/api/v1/public-photos}: +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/public-photos, GET} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/public-photos/:photoId/comments, GET} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/public-photos/:photoId/comments, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RoutesResolver] AdminOtpController {/api/v1/admin/otp}: +1ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/admin/otp/send, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [RouterExplorer] Mapped {/api/v1/admin/otp/verify, POST} route +0ms
+[Nest] 2108058  - 06/19/2026, 10:46:09 PM     LOG [NestApplication] Nest application successfully started +16ms
+🚀 Server is running on: http://localhost:3001
+[EmailService] ✅ Kết nối SMTP thành công. Sẵn sàng gửi mail.
+[WS] Client connected: sIV1IoQvXb-xaa9iAAAC
+[WS] Client sIV1IoQvXb-xaa9iAAAC joined room: photo_557913e6-fcb4-4dae-8cff-a6ff52da3386

backend/package.json

@@ -2,6 +2,7 @@
   "name": "backend",
   "version": "0.0.1",
   "scripts": {
+    "build": "nest build",
     "start:dev": "nest start --watch",
     "db:generate": "dotenv -e ../.env -- prisma generate --schema=prisma/schema.prisma",
     "db:migrate": "dotenv -e ../.env -- prisma migrate dev --schema=prisma/schema.prisma",
@@ -21,6 +22,7 @@
   "dependencies": {
     "@nestjs/cache-manager": "^3.1.3",
     "@nestjs/common": "^11.1.27",
+    "@nestjs/config": "^4.0.4",
     "@nestjs/core": "^11.1.27",
     "@nestjs/jwt": "^11.0.2",
     "@nestjs/passport": "^11.0.5",
@@ -33,6 +35,9 @@
     "cache-manager": "^7.2.8",
     "cache-manager-redis-yet": "^5.1.5",
     "dotenv": "^17.4.2",
+    "exifr": "^7.1.3",
+    "heic-convert": "^2.1.0",
+    "nodemailer": "^9.0.1",
     "passport": "^0.7.0",
     "passport-jwt": "^4.0.1",
     "pg": "^8.12.0",

backend/prisma/migrations/20260619014336_feat_anonymous_users/migration.sql

@@ -0,0 +1,15 @@
+-- DropForeignKey
+ALTER TABLE "Photo" DROP CONSTRAINT "Photo_tourId_fkey";
+
+-- AlterTable
+ALTER TABLE "Photo" ADD COLUMN     "originalUrl" TEXT,
+ALTER COLUMN "tourId" DROP NOT NULL,
+ALTER COLUMN "imageUrl" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "isAnonymous" BOOLEAN NOT NULL DEFAULT false,
+ALTER COLUMN "email" DROP NOT NULL,
+ALTER COLUMN "passwordHash" DROP NOT NULL;
+
+-- AddForeignKey
+ALTER TABLE "Photo" ADD CONSTRAINT "Photo_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE SET NULL ON UPDATE CASCADE;

backend/prisma/migrations/20260619150345_/migration.sql

@@ -0,0 +1,6 @@
+-- AlterTable
+ALTER TABLE "Comment" ADD COLUMN     "photoId" TEXT,
+ALTER COLUMN "locationId" DROP NOT NULL;
+
+-- AddForeignKey
+ALTER TABLE "Comment" ADD CONSTRAINT "Comment_photoId_fkey" FOREIGN KEY ("photoId") REFERENCES "Photo"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/migrations/20260620084450_add_location_createdat/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Location" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;

backend/prisma/migrations/20260620092922_add_participant_family_counts/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "TourParticipant" ADD COLUMN     "adultCount" INTEGER NOT NULL DEFAULT 1,
+ADD COLUMN     "childCount" INTEGER NOT NULL DEFAULT 0;

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/prisma/migrations/20260620110709_add_tour_invitations/migration.sql

@@ -0,0 +1,21 @@
+-- CreateTable
+CREATE TABLE "TourInvitation" (
+    "id" TEXT NOT NULL,
+    "tourId" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "role" "ParticipantRole" NOT NULL DEFAULT 'MEMBER',
+    "token" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "expiredAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "TourInvitation_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TourInvitation_token_key" ON "TourInvitation"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TourInvitation_tourId_email_key" ON "TourInvitation"("tourId", "email");
+
+-- AddForeignKey
+ALTER TABLE "TourInvitation" ADD CONSTRAINT "TourInvitation_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/migrations/20260621010152_init_connections/migration.sql

@@ -0,0 +1,57 @@
+-- CreateEnum
+CREATE TYPE "ConnectionStatus" AS ENUM ('PENDING', 'ACCEPTED', 'REJECTED');
+
+-- CreateEnum
+CREATE TYPE "ConnectionType" AS ENUM ('FRIEND', 'FAMILY');
+
+-- CreateTable
+CREATE TABLE "UserConnection" (
+    "id" TEXT NOT NULL,
+    "requesterId" TEXT NOT NULL,
+    "receiverId" TEXT NOT NULL,
+    "status" "ConnectionStatus" NOT NULL DEFAULT 'PENDING',
+    "type" "ConnectionType" NOT NULL DEFAULT 'FRIEND',
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "UserConnection_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DirectMessage" (
+    "id" TEXT NOT NULL,
+    "senderId" TEXT NOT NULL,
+    "receiverId" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "DirectMessage_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "UserConnection_requesterId_idx" ON "UserConnection"("requesterId");
+
+-- CreateIndex
+CREATE INDEX "UserConnection_receiverId_idx" ON "UserConnection"("receiverId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "UserConnection_requesterId_receiverId_key" ON "UserConnection"("requesterId", "receiverId");
+
+-- CreateIndex
+CREATE INDEX "DirectMessage_senderId_idx" ON "DirectMessage"("senderId");
+
+-- CreateIndex
+CREATE INDEX "DirectMessage_receiverId_idx" ON "DirectMessage"("receiverId");
+
+-- AddForeignKey
+ALTER TABLE "UserConnection" ADD CONSTRAINT "UserConnection_requesterId_fkey" FOREIGN KEY ("requesterId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UserConnection" ADD CONSTRAINT "UserConnection_receiverId_fkey" FOREIGN KEY ("receiverId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "DirectMessage" ADD CONSTRAINT "DirectMessage_senderId_fkey" FOREIGN KEY ("senderId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "DirectMessage" ADD CONSTRAINT "DirectMessage_receiverId_fkey" FOREIGN KEY ("receiverId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/migrations/20260621020327_add_tour_chat/migration.sql

@@ -0,0 +1,31 @@
+-- AlterTable
+ALTER TABLE "DirectMessage" ADD COLUMN     "attachmentUrl" TEXT,
+ADD COLUMN     "latitude" DOUBLE PRECISION,
+ADD COLUMN     "longitude" DOUBLE PRECISION;
+
+-- CreateTable
+CREATE TABLE "TourMessage" (
+    "id" TEXT NOT NULL,
+    "tourId" TEXT NOT NULL,
+    "senderId" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "attachmentUrl" TEXT,
+    "latitude" DOUBLE PRECISION,
+    "longitude" DOUBLE PRECISION,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "TourMessage_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "TourMessage_tourId_idx" ON "TourMessage"("tourId");
+
+-- CreateIndex
+CREATE INDEX "TourMessage_senderId_idx" ON "TourMessage"("senderId");
+
+-- AddForeignKey
+ALTER TABLE "TourMessage" ADD CONSTRAINT "TourMessage_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TourMessage" ADD CONSTRAINT "TourMessage_senderId_fkey" FOREIGN KEY ("senderId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/migrations/20260621051731_add_new_features/migration.sql

@@ -0,0 +1,73 @@
+-- CreateTable
+CREATE TABLE "WordFilter" (
+    "id" TEXT NOT NULL,
+    "word" TEXT NOT NULL,
+    "replacement" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "WordFilter_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ModerationSetting" (
+    "id" TEXT NOT NULL,
+    "blockNsfw" BOOLEAN NOT NULL DEFAULT false,
+    "blurFaces" BOOLEAN NOT NULL DEFAULT false,
+
+    CONSTRAINT "ModerationSetting_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TourRating" (
+    "id" TEXT NOT NULL,
+    "tourId" TEXT NOT NULL,
+    "targetUserId" TEXT NOT NULL,
+    "raterUserId" TEXT NOT NULL,
+    "honesty" INTEGER NOT NULL DEFAULT 5,
+    "transparency" INTEGER NOT NULL DEFAULT 5,
+    "enthusiasm" INTEGER NOT NULL DEFAULT 5,
+    "cheerfulness" INTEGER NOT NULL DEFAULT 5,
+    "seriousness" INTEGER NOT NULL DEFAULT 5,
+    "planning" INTEGER NOT NULL DEFAULT 5,
+    "survival" INTEGER NOT NULL DEFAULT 5,
+    "averageScore" DOUBLE PRECISION NOT NULL DEFAULT 5.0,
+    "comment" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "TourRating_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TourShare" (
+    "id" TEXT NOT NULL,
+    "tourId" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "isEnabled" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "TourShare_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "WordFilter_word_key" ON "WordFilter"("word");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TourRating_tourId_targetUserId_raterUserId_key" ON "TourRating"("tourId", "targetUserId", "raterUserId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TourShare_tourId_key" ON "TourShare"("tourId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TourShare_token_key" ON "TourShare"("token");
+
+-- AddForeignKey
+ALTER TABLE "TourRating" ADD CONSTRAINT "TourRating_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TourRating" ADD CONSTRAINT "TourRating_targetUserId_fkey" FOREIGN KEY ("targetUserId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TourRating" ADD CONSTRAINT "TourRating_raterUserId_fkey" FOREIGN KEY ("raterUserId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TourShare" ADD CONSTRAINT "TourShare_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/migrations/20260621074611_add_business_report/migration.sql

@@ -0,0 +1,16 @@
+-- CreateTable
+CREATE TABLE "BusinessReport" (
+    "id" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "phone" TEXT,
+    "email" TEXT,
+    "address" TEXT,
+    "latitude" DOUBLE PRECISION,
+    "longitude" DOUBLE PRECISION,
+    "reason" TEXT NOT NULL,
+    "isBlacklisted" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "BusinessReport_pkey" PRIMARY KEY ("id")
+);

backend/prisma/migrations/20260621121002_add_notes_and_trash_retention/migration.sql

@@ -0,0 +1,49 @@
+-- AlterTable
+ALTER TABLE "ModerationSetting" ADD COLUMN     "trashRetentionDays" INTEGER NOT NULL DEFAULT 30;
+
+-- AlterTable
+ALTER TABLE "Photo" ADD COLUMN     "deletedAt" TIMESTAMP(3),
+ADD COLUMN     "isDeleted" BOOLEAN NOT NULL DEFAULT false;
+
+-- AlterTable
+ALTER TABLE "Tour" ADD COLUMN     "deletedAt" TIMESTAMP(3),
+ADD COLUMN     "isDeleted" BOOLEAN NOT NULL DEFAULT false;
+
+-- CreateTable
+CREATE TABLE "TourNote" (
+    "id" TEXT NOT NULL,
+    "tourId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "isDeleted" BOOLEAN NOT NULL DEFAULT false,
+    "deletedAt" TIMESTAMP(3),
+
+    CONSTRAINT "TourNote_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "RecommendedLocation" (
+    "id" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "phone" TEXT,
+    "email" TEXT,
+    "address" TEXT,
+    "latitude" DOUBLE PRECISION,
+    "longitude" DOUBLE PRECISION,
+    "description" TEXT NOT NULL,
+    "stars" INTEGER NOT NULL DEFAULT 5,
+    "isApproved" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "RecommendedLocation_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "TourNote" ADD CONSTRAINT "TourNote_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TourNote" ADD CONSTRAINT "TourNote_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/migrations/20260622012027_add_photo_flagging/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "Photo" ADD COLUMN     "flaggedAt" TIMESTAMP(3),
+ADD COLUMN     "flaggedReason" TEXT,
+ADD COLUMN     "isFlagged" BOOLEAN NOT NULL DEFAULT false;

backend/prisma/schema.prisma

@@ -57,8 +57,8 @@ enum PrivacyLevel {
 
 model User {
   id            String        @id @default(uuid())
-  email         String        @unique
-  passwordHash  String
+  email         String?       @unique
+  passwordHash  String?
   name          String?
   phone         String?
   address       String?
@@ -66,6 +66,7 @@ model User {
   createdAt     DateTime      @default(now())
   isAdmin       Boolean       @default(false)
   isBlocked     Boolean       @default(false)
+  isAnonymous   Boolean       @default(false)
   
   createdTours            Tour[]              @relation("TourCreator")
   tourParticipations      TourParticipant[]
@@ -74,7 +75,14 @@ model User {
   uploadedPhotos          Photo[]
   paidExpenses            Expense[]          @relation("ExpensePaidBy")
   comments                Comment[]
-
+  sentConnections         UserConnection[]   @relation("ConnectionRequester")
+  receivedConnections     UserConnection[]   @relation("ConnectionReceiver")
+  sentMessages            DirectMessage[]    @relation("MessageSender")
+  receivedMessages        DirectMessage[]    @relation("MessageReceiver")
+  tourMessages            TourMessage[]
+  receivedRatings         TourRating[]        @relation("RatedUser")
+  sentRatings             TourRating[]        @relation("RatingUser")
+  tourNotes               TourNote[]
 }
 
 model Tour {
@@ -98,6 +106,13 @@ model Tour {
   joinRequests JoinRequest[]
   legs         Leg[]
   photos       Photo[]
+  invitations  TourInvitation[]
+  tourMessages TourMessage[]
+  ratings      TourRating[]
+  share        TourShare?
+  notes        TourNote[]
+  isDeleted    Boolean      @default(false)
+  deletedAt    DateTime?
 }
 
 model JoinRequest {
@@ -117,14 +132,18 @@ model JoinRequest {
 }
 
 model TourParticipant {
+  id          String          @id @default(uuid())
   tourId      String
-  userId      String
+  userId      String?
   role        ParticipantRole @default(MEMBER)
+  displayName String?
+  adultCount  Int             @default(1)
+  childCount  Int             @default(0)
 
   tour        Tour         @relation(fields: [tourId], references: [id], onDelete: Cascade)
-  user        User         @relation(fields: [userId], references: [id], onDelete: Cascade)
+  user        User?        @relation(fields: [userId], references: [id], onDelete: Cascade)
 
-  @@id([tourId, userId])
+  @@unique([tourId, userId])
 }
 
 model Leg {
@@ -161,6 +180,8 @@ model Location {
   expenses        Expense[]
   photos          Photo[]
   comments        Comment[]
+
+  createdAt       DateTime  @default(now())
 }
 
 model Expense {
@@ -188,18 +209,194 @@ model Photo {
   capturedAt   DateTime     @default(now())
   metadata     Json?
   privacy      PrivacyLevel @default(TOUR_ONLY)
+  isFlagged    Boolean      @default(false)
+  flaggedReason String?
+  flaggedAt    DateTime?
 
   tour         Tour?        @relation(fields: [tourId], references: [id], onDelete: SetNull)
   location     Location?    @relation(fields: [locationId], references: [id], onDelete: SetNull)
   uploader     User         @relation(fields: [uploaderId], references: [id])
+  comments     Comment[]
+  isDeleted    Boolean      @default(false)
+  deletedAt    DateTime?
 }
 
 model Comment {
   id         String   @id @default(uuid())
   content    String
   createdAt  DateTime @default(now())
-  locationId String
-  location   Location @relation(fields: [locationId], references: [id], onDelete: Cascade)
+  locationId String?
+  location   Location? @relation(fields: [locationId], references: [id], onDelete: Cascade)
+  photoId    String?
+  photo      Photo?    @relation(fields: [photoId], references: [id], onDelete: Cascade)
   userId     String
   user       User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
+
+model TourInvitation {
+  id        String   @id @default(uuid())
+  tourId    String
+  email     String
+  role      ParticipantRole @default(MEMBER)
+  token     String   @unique
+  createdAt DateTime @default(now())
+  expiredAt DateTime
+  tour      Tour     @relation(fields: [tourId], references: [id], onDelete: Cascade)
+
+  @@unique([tourId, email])
+}
+
+enum ConnectionStatus {
+  PENDING
+  ACCEPTED
+  REJECTED
+}
+
+enum ConnectionType {
+  FRIEND
+  FAMILY
+}
+
+model UserConnection {
+  id           String           @id @default(uuid())
+  requesterId  String
+  receiverId   String
+  status       ConnectionStatus @default(PENDING)
+  type         ConnectionType   @default(FRIEND)
+  createdAt    DateTime         @default(now())
+  updatedAt    DateTime         @updatedAt
+
+  requester    User             @relation("ConnectionRequester", fields: [requesterId], references: [id], onDelete: Cascade)
+  receiver     User             @relation("ConnectionReceiver", fields: [receiverId], references: [id], onDelete: Cascade)
+
+  @@unique([requesterId, receiverId])
+  @@index([requesterId])
+  @@index([receiverId])
+}
+
+model DirectMessage {
+  id            String   @id @default(uuid())
+  senderId      String
+  receiverId    String
+  content       String   @db.Text
+  attachmentUrl String?
+  latitude      Float?
+  longitude     Float?
+  createdAt     DateTime @default(now())
+  updatedAt     DateTime @updatedAt
+
+  sender        User     @relation("MessageSender", fields: [senderId], references: [id], onDelete: Cascade)
+  receiver      User     @relation("MessageReceiver", fields: [receiverId], references: [id], onDelete: Cascade)
+
+  @@index([senderId])
+  @@index([receiverId])
+}
+
+model TourMessage {
+  id            String   @id @default(uuid())
+  tourId        String
+  senderId      String
+  content       String   @db.Text
+  attachmentUrl String?
+  latitude      Float?
+  longitude     Float?
+  createdAt     DateTime @default(now())
+  updatedAt     DateTime @updatedAt
+
+  tour          Tour     @relation(fields: [tourId], references: [id], onDelete: Cascade)
+  sender        User     @relation(fields: [senderId], references: [id], onDelete: Cascade)
+
+  @@index([tourId])
+  @@index([senderId])
+}
+
+model WordFilter {
+  id          String   @id @default(uuid())
+  word        String   @unique
+  replacement String
+  createdAt   DateTime @default(now())
+}
+
+model ModerationSetting {
+  id                 String  @id @default(uuid())
+  blockNsfw          Boolean @default(false)
+  blurFaces          Boolean @default(false)
+  trashRetentionDays Int     @default(30)
+}
+
+model TourRating {
+  id           String   @id @default(uuid())
+  tourId       String
+  targetUserId String
+  raterUserId  String
+  honesty      Int      @default(5)
+  transparency Int      @default(5)
+  enthusiasm   Int      @default(5)
+  cheerfulness Int      @default(5)
+  seriousness  Int      @default(5)
+  planning     Int      @default(5)
+  survival     Int      @default(5)
+  averageScore Float    @default(5.0)
+  comment      String?  @db.Text
+  createdAt    DateTime @default(now())
+
+  tour       Tour @relation(fields: [tourId], references: [id], onDelete: Cascade)
+  targetUser User @relation("RatedUser", fields: [targetUserId], references: [id], onDelete: Cascade)
+  raterUser  User @relation("RatingUser", fields: [raterUserId], references: [id], onDelete: Cascade)
+
+  @@unique([tourId, targetUserId, raterUserId])
+}
+
+model TourShare {
+  id        String   @id @default(uuid())
+  tourId    String   @unique
+  token     String   @unique @default(uuid())
+  isEnabled Boolean  @default(true)
+  createdAt DateTime @default(now())
+
+  tour      Tour     @relation(fields: [tourId], references: [id], onDelete: Cascade)
+}
+
+model BusinessReport {
+  id            String   @id @default(uuid())
+  type          String   // e.g. "USER", "RESTAURANT", "HOTEL", "HOMESTAY"
+  name          String
+  phone         String?
+  email         String?
+  address       String?
+  latitude      Float?
+  longitude     Float?
+  reason        String   @db.Text
+  isBlacklisted Boolean  @default(false)
+  createdAt     DateTime @default(now())
+}
+
+model TourNote {
+  id        String    @id @default(uuid())
+  tourId    String
+  tour      Tour      @relation(fields: [tourId], references: [id], onDelete: Cascade)
+  userId    String
+  user      User      @relation(fields: [userId], references: [id], onDelete: Cascade)
+  title     String
+  content   String    @db.Text
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+  isDeleted Boolean   @default(false)
+  deletedAt DateTime?
+}
+
+model RecommendedLocation {
+  id          String   @id @default(uuid())
+  type        String   // e.g. "RESTAURANT", "HOTEL", "HOMESTAY"
+  name        String
+  phone       String?
+  email       String?
+  address     String?
+  latitude    Float?
+  longitude   Float?
+  description String   @db.Text
+  stars       Int      @default(5)
+  isApproved  Boolean  @default(false)
+  createdAt   DateTime @default(now())
+}
+

backend/scratch/check-users.ts

@@ -0,0 +1,19 @@
+import { PrismaClient } from '@prisma/client';
+import { PrismaPg } from '@prisma/adapter-pg';
+import { Pool } from 'pg';
+import * as dotenv from 'dotenv';
+import * as path from 'path';
+
+const envPath = path.resolve(process.cwd(), '..', '.env');
+dotenv.config({ path: envPath });
+
+const pool = new Pool({ connectionString: process.env.DATABASE_URL });
+const adapter = new PrismaPg(pool);
+const prisma = new PrismaClient({ adapter });
+
+async function main() {
+  const users = await prisma.user.findMany();
+  console.log('USERS:', users);
+}
+
+main().finally(() => pool.end());

backend/src/auth/jwt-auth.guard.ts

@@ -1,5 +1,23 @@
 import { Injectable } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
+import { UnauthorizedException } from '@nestjs/common';
 
 @Injectable()
-export class JwtAuthGuard extends AuthGuard('jwt') {}
+export class JwtAuthGuard extends AuthGuard('jwt') {}
+
+// Guard that rejects anonymous/guest users - used for dashboard and sensitive endpoints
+@Injectable()
+export class JwtAuthGuardNoAnonymous extends AuthGuard('jwt') {
+  handleRequest(err: any, user: any, info: any) {
+    if (err || !user) {
+      throw err || new UnauthorizedException('Phiên làm việc không hợp lệ hoặc đã hết hạn');
+    }
+
+    // Reject anonymous/temporary users
+    if (user.isAnonymous) {
+      throw new UnauthorizedException('Tài khoản khách không có quyền truy cập tính năng này. Vui lòng đăng ký tài khoản để tiếp tục.');
+    }
+
+    return user;
+  }
+}

backend/src/auth/jwt.strategy.ts

@@ -22,6 +22,8 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
       throw new UnauthorizedException('Người dùng không tồn tại hoặc phiên làm việc hết hạn');
     }
 
+    // Note: We allow anonymous users to pass JWT validation
+    // Individual endpoints decide whether to accept anonymous users based on their guard
     return user;
   }
 }

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);

docker-compose-old.yml

@@ -0,0 +1,73 @@
+services:
+  postgres:
+    image: postgres:15-alpine
+    container_name: yotrip-db
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: password
+      POSTGRES_DB: travel_db
+    ports:
+      - "5432:5432"
+    volumes:
+      - pg_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres -d travel_db"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+  redis:
+    image: redis:7-alpine
+    container_name: yotrip-redis
+    ports:
+      - "6379:6379"
+
+  backend:
+    build:
+      context: ./backend
+      target: development
+    container_name: yotrip-backend
+    command: >
+      sh -c "npx prisma migrate dev --schema=prisma/schema.prisma && npm run start:dev"
+    ports:
+      - "3001:3001"
+    volumes:
+      - ./backend:/usr/src/app
+      - /usr/src/app/node_modules
+    environment:
+      DATABASE_URL: "postgresql://postgres:password@postgres:5432/travel_db?schema=public"
+      REDIS_URL: "redis://redis:6379"
+      PORT: 3001
+      ADMIN_SECRET_KEY: "yotrip_secret_admin_key"
+      JWT_SECRET: "super-secret"
+      FRONTEND_URL: "http://localhost:5173"
+      NODE_ENV: development
+      SMTP_HOST: "${SMTP_HOST}"
+      SMTP_PORT: "${SMTP_PORT}"
+      SMTP_SECURE: "${SMTP_SECURE}"
+      SMTP_USER: "${SMTP_USER}"
+      SMTP_PASS: "${SMTP_PASS}"
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_started
+
+  frontend:
+    build:
+      context: ./frontend
+      target: development
+    container_name: yotrip-frontend
+    command: npm run dev -- --host 0.0.0.0
+    ports:
+      - "5173:5173"
+    volumes:
+      - ./frontend:/usr/src/app
+      - /usr/src/app/node_modules
+    environment:
+      VITE_API_URL: "http://localhost:3001"
+    depends_on:
+      - backend
+
+volumes:
+  pg_data:

docker-compose.prod.yml

@@ -0,0 +1,68 @@
+services:
+  postgres:
+    image: postgres:15-alpine
+    container_name: yotrip-db-prod
+    restart: always
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: password
+      POSTGRES_DB: travel_db
+    volumes:
+      - pg_data_prod:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres -d travel_db"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+  redis:
+    image: redis:7-alpine
+    container_name: yotrip-redis-prod
+    restart: always
+
+  backend:
+    build:
+      context: ./backend
+      target: production
+    container_name: yotrip-backend-prod
+    restart: always
+    command: >
+      sh -c "npx prisma migrate deploy --schema=prisma/schema.prisma && node dist/src/main.js"
+    ports:
+      - "3001:3001"
+    volumes:
+      - ./backend/uploads:/usr/src/app/uploads
+    environment:
+      DATABASE_URL: "postgresql://postgres:password@postgres:5432/travel_db?schema=public"
+      REDIS_URL: "redis://redis:6379"
+      PORT: 3001
+      ADMIN_SECRET_KEY: "${ADMIN_SECRET_KEY}"
+      JWT_SECRET: "super-secret"
+      FRONTEND_URL: "${FRONTEND_URL}"
+      NODE_ENV: production
+      SMTP_HOST: "${SMTP_HOST}"
+      SMTP_PORT: "${SMTP_PORT}"
+      SMTP_SECURE: "${SMTP_SECURE}"
+      SMTP_USER: "${SMTP_USER}"
+      SMTP_PASS: "${SMTP_PASS}"
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_started
+
+  frontend:
+    build:
+      context: ./frontend
+      target: production
+      args:
+        - VITE_GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
+    container_name: yotrip-frontend-prod
+    restart: always
+    ports:
+      - "3002:80"
+    depends_on:
+      - backend
+
+volumes:
+  pg_data_prod:

docker-compose.yml

@@ -0,0 +1,68 @@
+services:
+  postgres:
+    image: postgres:15-alpine
+    container_name: yotrip-db-prod
+    restart: always
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: password
+      POSTGRES_DB: travel_db
+    volumes:
+      - pg_data_prod:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres -d travel_db"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+  redis:
+    image: redis:7-alpine
+    container_name: yotrip-redis-prod
+    restart: always
+
+  backend:
+    build:
+      context: ./backend
+      target: production
+    container_name: yotrip-backend-prod
+    restart: always
+    command: >
+      sh -c "npx prisma migrate deploy --schema=prisma/schema.prisma && node dist/src/main.js"
+    ports:
+      - "3001:3001"
+    volumes:
+      - ./backend/uploads:/usr/src/app/uploads
+    environment:
+      DATABASE_URL: "postgresql://postgres:password@postgres:5432/travel_db?schema=public"
+      REDIS_URL: "redis://redis:6379"
+      PORT: 3001
+      ADMIN_SECRET_KEY: "${ADMIN_SECRET_KEY}"
+      JWT_SECRET: "super-secret"
+      FRONTEND_URL: "${FRONTEND_URL}"
+      NODE_ENV: production
+      SMTP_HOST: "${SMTP_HOST}"
+      SMTP_PORT: "${SMTP_PORT}"
+      SMTP_SECURE: "${SMTP_SECURE}"
+      SMTP_USER: "${SMTP_USER}"
+      SMTP_PASS: "${SMTP_PASS}"
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_started
+
+  frontend:
+    build:
+      context: ./frontend
+      target: production
+      args:
+        - VITE_GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
+    container_name: yotrip-frontend-prod
+    restart: always
+    ports:
+      - "3002:80"
+    depends_on:
+      - backend
+
+volumes:
+  pg_data_prod:

frontend/.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+npm-debug.log
+.env
+.git
+.gitignore

frontend/Dockerfile

@@ -0,0 +1,28 @@
+FROM node:22-alpine AS base
+
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+
+# Development stage
+FROM base AS development
+RUN npm install
+COPY . .
+EXPOSE 5173
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
+
+# Build stage for production
+FROM base AS build
+ARG VITE_GOOGLE_CLIENT_ID
+ENV VITE_GOOGLE_CLIENT_ID=$VITE_GOOGLE_CLIENT_ID
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Production stage using Nginx
+FROM nginx:1.25-alpine AS production
+COPY --from=build /usr/src/app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/dist/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
+    <title>Travel Planner</title>
+    <script type="module" crossorigin src="/assets/index-Chfn55jq.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-D_50XTpY.css">
+  </head>
+<body>
+    <div id="root"></div>
+  </body>
+</html>

frontend/index.html

@@ -2,11 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
     <title>Travel Planner</title>
   </head>
-  <body>
+<body>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
   </body>

frontend/nginx.conf

@@ -0,0 +1,43 @@
+server {
+    listen 80;
+    server_name yotrip.labz.io.vn localhost;
+    client_max_body_size 50M;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Proxy API requests to backend
+    location /api/v1/ {
+        proxy_pass http://backend:3001;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+
+    # Serve uploaded files from backend
+    location /uploads/ {
+        proxy_pass http://backend:3001;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+
+    # Proxy WebSocket connection
+    location /socket.io/ {
+        proxy_pass http://backend:3001;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "Upgrade";
+        proxy_set_header Host $host;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}

frontend/package.json

@@ -10,12 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "date-fns": "^4.4.0",
+    "jspdf": "^4.2.1",
+    "jspdf-autotable": "^5.0.8",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.284.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
+    "react-quill": "^2.0.0",
+    "react-quill-new": "^3.8.3",
     "socket.io-client": "^4.8.3",
     "zustand": "^5.0.1"
   },
@@ -23,6 +28,7 @@
     "@tailwindcss/postcss": "^4.3.1",
     "@types/leaflet": "^1.9.12",
     "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^6.0.2",
     "autoprefixer": "^10.5.0",
     "postcss": "^8.5.15",

frontend/src/App.tsx

@@ -1,55 +1,110 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { LandingPage } from './pages/LandingPage';
 import { ExploreMap } from './pages/ExploreMap';
 import { TourDetailPage } from './pages/TourDetailPage';
-import { SignupPage } from './pages/SignupPage';
+import SignupPage from './pages/SignupPage';
 import { MyPhotosPage } from './pages/MyPhotosPage';
-import { useTourStore } from './store/useTourStore';
+import { MyNotePage } from './pages/MyNotePage';
+import { JoinTourPage } from './pages/JoinTourPage';
+import { MemberDashboard } from './pages/MemberDashboard';
+import { AdminDashboard } from './pages/AdminDashboard';
+import { ShareJourneyPage } from './pages/ShareJourneyPage';
 import { ConfirmProvider } from './hooks/useConfirm';
 import { NotificationProvider } from './hooks/useNotification';
 
 function App() {
   const params = new URLSearchParams(window.location.search);
   const viewTourId = params.get('viewTour');
+  const pathParts = window.location.pathname.split('/');
+  const isJourneyShare = pathParts[1] === 'journey' && pathParts[2];
+  const journeyTokenVal = isJourneyShare ? pathParts[2] : null;
 
   const [user, setUser] = useState<any>(null);
-  const [currentPage, setCurrentPage] = useState<'landing' | 'explore' | 'tourDetail' | 'signup' | 'myPhotos'>(viewTourId ? 'tourDetail' : 'landing');
+  const [shareJourneyToken, setShareJourneyToken] = useState<string | null>(journeyTokenVal);
+  const [currentPage, setCurrentPage] = useState<'landing' | 'dashboard' | 'admin' | 'explore' | 'tourDetail' | 'signup' | 'myPhotos' | 'notes' | 'joinTour' | 'shareJourney'>(
+    journeyTokenVal ? 'shareJourney' : (viewTourId ? 'tourDetail' : (window.location.pathname === '/join-tour' || params.has('token') ? 'joinTour' : 'landing'))
+  );
   const [currentTourId, setCurrentTourId] = useState<string | null>(viewTourId);
   const [isPublicTourView, setIsPublicTourView] = useState(!!viewTourId);
-
-  // Lấy action từ store
-  const fetchTour = useTourStore(state => state.fetchTour);
-  const fetchPublicTourDetails = useTourStore(state => state.fetchPublicTourDetails);
+  const [previousPage, setPreviousPage] = useState<'explore' | 'dashboard' | 'landing'>('explore');
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     const viewTourId = params.get('viewTour');
+    const isJoinTour = window.location.pathname === '/join-tour' || params.has('token');
+    const pathParts = window.location.pathname.split('/');
+    const journeyToken = pathParts[1] === 'journey' && pathParts[2] ? pathParts[2] : null;
 
-    if (viewTourId) {
-      // Không gọi replaceState ngay để tránh mất ID khi component re-render hoặc refresh
-    } else {
-      // Kiểm tra đăng nhập bình thường nếu không có tham số viewTour
-      const token = localStorage.getItem('token');
-      const storedUser = localStorage.getItem('user');
-      if (token && storedUser) {
-        try {
-          setUser(JSON.parse(storedUser));
-          setCurrentPage('explore'); // Chuyển đến bản đồ khám phá nếu đã đăng nhập
-        } catch (e) {
-          console.error("Lỗi khi phân tích dữ liệu người dùng từ localStorage", e);
-          localStorage.removeItem('token');
-          localStorage.removeItem('user');
-          setCurrentPage('landing'); // Quay về trang Landing nếu dữ liệu lỗi
-        }
-      } else {
-        setCurrentPage('landing'); // Quay về trang Landing nếu chưa đăng nhập
+    // Check if user just finished uploading from a public tour
+    const fromPublicUpload = localStorage.getItem('fromPublicUpload');
+    if (fromPublicUpload) {
+      localStorage.removeItem('fromPublicUpload');
+      setCurrentPage('landing');
+      return;
+    }
+
+    // Khôi phục thông tin đăng nhập nếu có
+    const token = localStorage.getItem('token');
+    const guestToken = localStorage.getItem('guest_token');
+    const storedUser = localStorage.getItem('user');
+    const storedGuestUser = localStorage.getItem('guest_user');
+    
+    let loggedInUser = null;
+    if (token && storedUser) {
+      try {
+        loggedInUser = JSON.parse(storedUser);
+        setUser(loggedInUser);
+      } catch (e) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('user');
       }
     }
-  }, []); // Chỉ chạy một lần khi component mount
+
+    if (journeyToken) {
+      setShareJourneyToken(journeyToken);
+      setCurrentPage('shareJourney');
+    } else if (isJoinTour) {
+      setCurrentPage('joinTour');
+    } else if (viewTourId) {
+      setCurrentPage('tourDetail');
+    } else {
+      // CRITICAL: Check for guest token FIRST - guests should NEVER access dashboard
+      // regardless of whether they also have other tokens
+      if (guestToken) {
+        setCurrentPage('landing');
+      } else if (loggedInUser) {
+        // Real authenticated user (no guest token)
+        if (loggedInUser.isAdmin) {
+          setCurrentPage('admin');
+        } else {
+          setCurrentPage('dashboard');
+        }
+      } else {
+        setCurrentPage('landing');
+      }
+    }
+  }, []);
 
   const handleLoginSuccess = (loggedInUser: any) => {
     setUser(loggedInUser);
-    setCurrentPage('explore');
+    
+    // Nếu có pending token, ta vẫn giữ ở trang joinTour để nó tự động thực hiện join
+    const pendingInviteToken = localStorage.getItem('pendingInviteToken');
+    if (pendingInviteToken) {
+      setCurrentPage('joinTour');
+    } else if (loggedInUser.isAdmin) {
+      // Nếu là admin, chuyển đến admin dashboard
+      setCurrentPage('admin');
+    } else {
+      // Only set to dashboard if this is a real user (has token), not a guest
+      const token = localStorage.getItem('token');
+      const guestToken = localStorage.getItem('guest_token');
+      if (token && !guestToken) {
+        setCurrentPage('dashboard');
+      } else {
+        setCurrentPage('landing');
+      }
+    }
   };
 
   const handleLogout = () => {
@@ -59,53 +114,169 @@ function App() {
     setCurrentPage('landing');
   };
 
-  const handleViewTour = (tourId: string) => {
+  const handleViewTour = (tourId: string, fromPage?: 'explore' | 'dashboard') => {
     setCurrentTourId(tourId);
     setIsPublicTourView(false); // Không phải chế độ công khai nếu đến từ bản đồ khám phá
+    setPreviousPage(fromPage || (currentPage === 'dashboard' ? 'dashboard' : 'explore'));
     setCurrentPage('tourDetail');
   };
 
   const handleBackFromTourDetail = () => {
+    // Check if this was a public view BEFORE clearing the flag
+    const wasPublicView = isPublicTourView;
+    
     setCurrentTourId(null);
     setIsPublicTourView(false);
-    // Quay về trang khám phá nếu đã đăng nhập, ngược lại quay về Landing
-    if (user) {
-      setCurrentPage('explore');
+    
+    // If user was viewing a public tour, redirect to index/landing page
+    // Otherwise redirect based on authentication and previous page
+    if (wasPublicView) {
+      // Public tour view - always redirect to index/landing
+      setCurrentPage('landing');
+    } else if (user) {
+      // Authenticated user viewing their own tour - go back to previous page
+      setCurrentPage(previousPage);
     } else {
+      // Not authenticated and not public view - go to landing
       setCurrentPage('landing');
     }
   };
 
   const handleBackFromSignup = () => {
-    setCurrentPage('landing');
+    const pendingInviteToken = localStorage.getItem('pendingInviteToken');
+    if (pendingInviteToken) {
+      setCurrentPage('joinTour');
+    } else {
+      setCurrentPage('landing');
+    }
   };
 
   const handleSignupSuccess = () => {
-    setCurrentPage('landing'); // Quay về trang Landing sau khi đăng ký thành công
+    // Sau khi đăng ký, ta có thể tự động đăng nhập hoặc quay lại landing/joinTour
+    const pendingInviteToken = localStorage.getItem('pendingInviteToken');
+    const token = localStorage.getItem('token');
+    const storedUser = localStorage.getItem('user');
+
+    if (token && storedUser) {
+      try {
+        const loggedInUser = JSON.parse(storedUser);
+        setUser(loggedInUser);
+        if (pendingInviteToken) {
+          setCurrentPage('joinTour');
+        } else {
+          setCurrentPage('dashboard');
+        }
+        return;
+      } catch (e) {}
+    }
+
+    if (pendingInviteToken) {
+      setCurrentPage('joinTour');
+    } else {
+      setCurrentPage('landing');
+    }
+  };
+
+  const handleBackFromExplore = () => {
+    // Only allow real users (with token, not guest_token)
+    const token = localStorage.getItem('token');
+    const guestToken = localStorage.getItem('guest_token');
+    const isRealUser = token && !guestToken;
+    
+    if (user && isRealUser) {
+      setCurrentPage('dashboard');
+    } else {
+      setCurrentPage('landing');
+    }
+  };
+
+  const handleGoToDashboard = () => {
+    // Only allow real users (with token, not guest_token)
+    const token = localStorage.getItem('token');
+    const guestToken = localStorage.getItem('guest_token');
+    const isRealUser = token && !guestToken;
+    
+    if (user && isRealUser) {
+      setPreviousPage('explore');
+      setCurrentPage('dashboard');
+    } else {
+      setCurrentPage('landing');
+    }
+  };
+
+  const handleGoToHome = () => {
+    window.history.pushState({}, '', '/');
+    setShareJourneyToken(null);
+    const token = localStorage.getItem('token');
+    const guestToken = localStorage.getItem('guest_token');
+    // Only real authenticated users can access dashboard, not guests
+    const isRealUser = token && !guestToken;
+    setCurrentPage(isRealUser ? 'dashboard' : 'landing');
   };
 
   return (
     <ConfirmProvider>
       <NotificationProvider>
       {(() => {
+        if (currentPage === 'admin') {
+          return (
+            <AdminDashboard
+              user={user}
+              onNavigate={setCurrentPage}
+            />
+          );
+        }
+
+        if (currentPage === 'dashboard') {
+          // SECURITY: Prevent any guest from accessing dashboard
+          const guestToken = localStorage.getItem('guest_token');
+          if (guestToken) {
+            console.warn('[App] Guest user attempted to access dashboard - forcing redirect to landing');
+            setCurrentPage('landing');
+            return (
+              <LandingPage 
+                onLoginSuccess={handleLoginSuccess} 
+                onGoToSignup={() => setCurrentPage('signup')}
+              />
+            );
+          }
+          
+          return (
+            <MemberDashboard
+              user={user}
+              onLogout={handleLogout}
+              onExploreTours={() => setCurrentPage('explore')}
+              onViewTour={handleViewTour}
+              onOpenMyPhotos={() => setCurrentPage('myPhotos')}
+            />
+          );
+        }
+
         if (currentPage === 'tourDetail') {
           return (
             <TourDetailPage
               tourId={currentTourId!} 
               onBack={handleBackFromTourDetail}
               isPublicView={isPublicTourView}
+              onOpenNotes={() => setCurrentPage('notes')}
             />
           );
         }
 
+        if (currentPage === 'notes') {
+          return <MyNotePage tourId={currentTourId!} onBack={() => setCurrentPage('tourDetail')} />;
+        }
+
         if (currentPage === 'explore') {
           return (
             <ExploreMap 
-              onBack={handleBackFromTourDetail} 
+              onBack={handleBackFromExplore} 
               onLogout={handleLogout} 
               user={user} 
               onViewTour={handleViewTour} 
               onOpenMyPhotos={() => setCurrentPage('myPhotos')}
+              onLoginSuccess={handleLoginSuccess}
+              onGoToDashboard={handleGoToDashboard}
             />
           );
         }
@@ -120,6 +291,33 @@ function App() {
           return <SignupPage onBack={handleBackFromSignup} onSuccess={handleSignupSuccess} />;
         }
 
+        if (currentPage === 'joinTour') {
+          return (
+            <JoinTourPage
+              onLoginSuccess={handleLoginSuccess}
+              onGoToSignup={() => setCurrentPage('signup')}
+              onViewTour={(tourId) => {
+                setCurrentTourId(tourId);
+                setIsPublicTourView(false);
+                setCurrentPage('tourDetail');
+              }}
+              onGoToHome={() => {
+                const loggedIn = !!localStorage.getItem('token');
+                setCurrentPage(loggedIn ? 'explore' : 'landing');
+              }}
+            />
+          );
+        }
+
+        if (currentPage === 'shareJourney') {
+          return (
+            <ShareJourneyPage
+              token={shareJourneyToken!}
+              onGoToHome={handleGoToHome}
+            />
+          );
+        }
+
         return <LandingPage onContinue={() => setCurrentPage('explore')} onGoToSignup={() => setCurrentPage('signup')} onGoToMap={() => setCurrentPage('explore')} onLoginSuccess={handleLoginSuccess} isInitialSetup={false} />;
       })()}
       </NotificationProvider>

frontend/src/components/AddLocationModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { format, parseISO } from 'date-fns';
-import { X, MapPin, Loader2, Clock, Map as MapIcon, Navigation, Search } from 'lucide-react';
+import { X, MapPin, Loader2, Map as MapIcon, Navigation, Search } from 'lucide-react';
 import { useTourStore } from '@/store/useTourStore';
 import { useNotification } from '@/hooks/useNotification';
 import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet';
@@ -61,7 +61,7 @@ const MapPicker = ({ onPick, center }: { onPick: (latlng: L.LatLng) => void, cen
   );
 };
 
-export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editingLocation, isPublicView = false }: { isOpen: boolean, onClose: () => void, tourId: string, initialLegId?: string, editingLocation?: any, isPublicView?: boolean }) => {
+export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editingLocation, isStartPoint = false, isEndPoint = false, isPublicView = false, onSuccess }: { isOpen: boolean, onClose: () => void, tourId: string, initialLegId?: string, editingLocation?: any, isStartPoint?: boolean, isEndPoint?: boolean, isPublicView?: boolean, onSuccess?: () => void }) => {
   const [formData, setFormData] = useState({
     name: '',
     address: '',
@@ -85,7 +85,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
   const searchTimeout = useRef<any>(null);
   
   // Gom các selector lại để giảm số lượng Hook gọi nội bộ và tăng hiệu năng
-  const { legs, addLocation, updateLocation, mapCenter, currentTour, userRole } = useTourStore();
+  const { legs, addLocation, updateLocation, updateTourStartPoint, updateTourEndPoint, mapCenter, currentTour, userRole } = useTourStore();
   const notify = useNotification();
 
   // 1. Luôn khai báo Hook ở cấp cao nhất, không đặt code logic/return giữa các Hook
@@ -108,7 +108,9 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
           expenseDescription: expense?.description || '',
           expenseNote: expense?.note || '',
           paidById: expense?.paidById || '',
-          plannedStart: editingLocation.plannedStart ? editingLocation.plannedStart.slice(0, 16) : '',
+          plannedStart: isStartPoint 
+            ? (editingLocation.plannedEnd ? editingLocation.plannedEnd.slice(0, 16) : '')
+            : (editingLocation.plannedStart ? editingLocation.plannedStart.slice(0, 16) : ''),
           plannedEnd: editingLocation.plannedEnd ? editingLocation.plannedEnd.slice(0, 16) : ''
         });
       } else {
@@ -130,22 +132,36 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
     [formData.latitude, formData.longitude]
   );
 
-  // Tự động cập nhật vị trí bản đồ theo chặng được chọn (Lấy điểm cuối của chặng đó làm tham chiếu)
+  // Tự động cập nhật vị trí bản đồ theo chặng được chọn (Lấy điểm cuối của chặng trước/hiện tại làm tham chiếu tiếp nối)
   useEffect(() => {
     if (isOpen && !editingLocation && formData.legId && !formData.name) {
       const selectedLeg = legs.find(l => l.id === formData.legId);
       
-      if (selectedLeg && selectedLeg.locations && selectedLeg.locations.length > 0) {
-        // Di chuyển đến địa điểm cuối cùng của chặng để người dùng thấy điểm nối tiếp
-        const lastLoc = selectedLeg.locations[selectedLeg.locations.length - 1];
-        setFormData(prev => ({
-          ...prev,
-          latitude: lastLoc.latitude,
-          longitude: lastLoc.longitude
-        }));
-      } else {
-        // Nếu chặng chưa có điểm nào, mặc định dùng vị trí trung tâm hiện tại của tour
-        setFormData(prev => ({ ...prev, latitude: mapCenter[0], longitude: mapCenter[1] }));
+      if (selectedLeg) {
+        if (selectedLeg.locations && selectedLeg.locations.length > 0) {
+          // Di chuyển đến địa điểm cuối cùng của chặng hiện tại để người dùng thấy điểm nối tiếp
+          const lastLoc = selectedLeg.locations[selectedLeg.locations.length - 1];
+          setFormData(prev => ({
+            ...prev,
+            latitude: lastLoc.latitude,
+            longitude: lastLoc.longitude
+          }));
+        } else {
+          // Chặng trống -> Lấy địa điểm cuối của chặng trước làm tọa độ tiếp nối
+          const currentLegIdx = legs.findIndex(l => l.id === formData.legId);
+          const prevLeg = currentLegIdx > 0 ? legs[currentLegIdx - 1] : null;
+          if (prevLeg && prevLeg.locations && prevLeg.locations.length > 0) {
+            const lastLoc = prevLeg.locations[prevLeg.locations.length - 1];
+            setFormData(prev => ({
+              ...prev,
+              latitude: lastLoc.latitude,
+              longitude: lastLoc.longitude
+            }));
+          } else {
+            // Nếu không có chặng trước hoặc chặng trước trống, mặc định dùng vị trí trung tâm hiện tại của tour
+            setFormData(prev => ({ ...prev, latitude: mapCenter[0], longitude: mapCenter[1] }));
+          }
+        }
       }
     }
   }, [formData.legId, isOpen, editingLocation, legs, mapCenter]);
@@ -153,8 +169,13 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
   // 2. Thực hiện các tính toán và hàm xử lý
   const currentLegId = formData.legId || (legs.length > 0 ? legs[0].id : '');
   const targetLeg = legs.find(l => l.id === currentLegId);
-  const titleText = editingLocation ? `Sửa địa điểm: ${editingLocation.name}` : (initialLegId ? `Thêm địa điểm cho ${targetLeg?.note || `Chặng ${targetLeg?.sequence}`}` : 'Thêm địa điểm mới');
-  const buttonText = editingLocation ? 'Cập nhật thay đổi' : (initialLegId ? 'Xác nhận thêm vào chặng' : 'Thêm địa điểm');
+  const titleText = isStartPoint ? 'Thiết lập Điểm xuất phát' : 
+                   isEndPoint ? 'Thiết lập Điểm kết thúc' :
+                   editingLocation ? `Sửa địa điểm: ${editingLocation.name}` : 
+                   (initialLegId ? `Thêm địa điểm cho ${targetLeg?.note || `Chặng ${targetLeg?.sequence}`}` : 'Thêm địa điểm mới');
+  const buttonText = isStartPoint ? 'Xác nhận Điểm xuất phát' : 
+                    isEndPoint ? 'Xác nhận Điểm kết thúc' :
+                    editingLocation ? 'Cập nhật thay đổi' : (initialLegId ? 'Xác nhận thêm vào chặng' : 'Thêm địa điểm');
 
   const handleSearchLocation = (query: string) => {
     setFormData(prev => ({ ...prev, name: query }));
@@ -281,19 +302,41 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
     e.preventDefault();
     setIsLoading(true);
     try {
-      const payload: any = {
-        ...formData,
-        expenseAmount: formData.expenseAmount.replace(/\./g, ''), // Loại bỏ dấu chấm trước khi gửi
-        legId: currentLegId,
-        latitude: parseFloat(formData.latitude as any),
-        longitude: parseFloat(formData.longitude as any),
-      };
-
-      if (editingLocation) {
-        await updateLocation(editingLocation.id, payload);
+      if (isStartPoint) {
+        await updateTourStartPoint(tourId, {
+          name: formData.name || "Điểm xuất phát",
+          latitude: parseFloat(formData.latitude as any),
+          longitude: parseFloat(formData.longitude as any),
+          plannedEnd: formData.plannedStart,
+        });
+      } else if (isEndPoint) {
+        await updateTourEndPoint(tourId, {
+          name: formData.name || "Điểm kết thúc",
+          latitude: parseFloat(formData.latitude as any),
+          longitude: parseFloat(formData.longitude as any),
+          plannedStart: formData.plannedStart,
+        });
       } else {
-        await addLocation(tourId, payload);
+        const payload: any = {
+          ...formData,
+          expenseAmount: formData.expenseAmount.replace(/\./g, ''), // Loại bỏ dấu chấm trước khi gửi
+          legId: currentLegId,
+          latitude: parseFloat(formData.latitude as any),
+          longitude: parseFloat(formData.longitude as any),
+        };
+
+        if (editingLocation) {
+          await updateLocation(editingLocation.id, payload);
+        } else {
+          await addLocation(tourId, payload);
+        }
       }
+      notify({ 
+        title: 'Thành công', 
+        message: isStartPoint ? 'Đã thiết lập điểm xuất phát.' : isEndPoint ? 'Đã thiết lập điểm kết thúc.' : editingLocation ? 'Đã cập nhật địa điểm.' : 'Đã thêm địa điểm mới.', 
+        type: 'success' 
+      });
+      onSuccess?.(); // Gọi callback onSuccess sau khi thành công
       onClose();
     } catch (error) {
       notify({ title: 'Lỗi', message: 'Lỗi khi lưu địa điểm', type: 'error' });
@@ -370,8 +413,8 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
             </div>
           </div>
 
-          <MapContainer center={currentCoords} zoom={13} className="h-full w-full" zoomControl={false}>
-            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+          <MapContainer center={currentCoords} zoom={13} className="h-full w-full" zoomControl={false} attributionControl={false}>
+            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="" />
             <Marker position={currentCoords} />
             <MapPicker center={currentCoords} onPick={handlePickLocation} />
           </MapContainer>
@@ -455,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?.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;
@@ -15,7 +15,8 @@ interface AddMemberModalProps {
   isPublicView?: boolean; // New prop to indicate public view
 }
 
-export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose, tourId, participants = [], joinRequests = [], onRemoveMember, onMemberAdded, userRole }) => {
+export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose, tourId, participants = [], joinRequests = [], onRemoveMember, onMemberAdded, userRole, isPublicView }) => {
+  const [activeTab, setActiveTab] = useState<'search' | 'email'>('search');
   const [query, setQuery] = useState('');
   const [users, setUsers] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
@@ -26,14 +27,49 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
   const [submitError, setSubmitError] = useState('');
   const [actionLoading, setActionLoading] = useState<string | null>(null);
 
+  // Trạng thái cho tab mời qua email
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [inviteRole, setInviteRole] = useState<'OWNER' | 'MANAGER' | 'MEMBER' | 'MEMBER_NO_FINANCE' | 'VIEWER_ONLY'>('MEMBER');
+  const [inviteLoading, setInviteLoading] = useState(false);
+  const [inviteError, setInviteError] = useState('');
+  const [inviteSuccess, setInviteSuccess] = useState('');
+
   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 canInviteByEmail = 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);
@@ -52,10 +88,44 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
     }
   };
 
+  const handleSendInvite = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!inviteEmail.trim()) return;
+    setInviteLoading(true);
+    setInviteError('');
+    setInviteSuccess('');
+    try {
+      const res = await fetch(`/api/v1/tours/${tourId}/invitations`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('token')}`,
+        },
+        body: JSON.stringify({ email: inviteEmail.trim(), role: inviteRole }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.message || 'Gửi lời mời thất bại');
+      }
+      setInviteSuccess(`Lời mời đã được gửi thành công đến ${inviteEmail}!`);
+      setInviteEmail('');
+      notify({ title: 'Thành công', message: `Lời mời đã gửi tới ${inviteEmail}`, type: 'success' });
+      await onMemberAdded?.();
+    } catch (err: any) {
+      setInviteError(err.message || 'Thao tác thất bại');
+    } finally {
+      setInviteLoading(false);
+    }
+  };
+
   useEffect(() => {
-    if (!isOpen) return;
-    fetchUsers();
-  }, [isOpen]);
+    if (!isOpen || activeTab !== 'search') return;
+    const delayDebounceFn = setTimeout(() => {
+      fetchUsers();
+    }, 300);
+
+    return () => clearTimeout(delayDebounceFn);
+  }, [query, isOpen, activeTab]);
 
   useEffect(() => {
     if (!isOpen) {
@@ -64,10 +134,15 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
       setRole('MEMBER');
       setFetchError('');
       setSubmitError('');
+      setInviteEmail('');
+      setInviteRole('MEMBER');
+      setInviteError('');
+      setInviteSuccess('');
+      setActiveTab('search');
     }
   }, [isOpen]);
 
-  const handleRemove = async (userId: string, memberName: string) => {
+  const handleRemove = async (memberIdOrUserId: string, memberName: string) => {
     if (!onRemoveMember) return;
     const isConfirmed = await confirm({
       title: 'Xóa thành viên',
@@ -76,14 +151,14 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
 
     if (isConfirmed) {
       try {
-        await onRemoveMember(userId);
+        await onRemoveMember(memberIdOrUserId);
       } catch (err: any) {
         setSubmitError(err.message || 'Không thể xóa thành viên');
       }
     }
   };
 
-  const handleRequestAction = async (reqId: string, action: 'accept' | 'reject', userName: string) => {
+  const handleRequestAction = async (reqId: string, action: 'accept' | 'reject') => {
     if (!onMemberAdded) return;
     setActionLoading(reqId);
     try {
@@ -145,10 +220,10 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
         <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
           <div>
             <h2 className="text-lg font-bold text-gray-900 flex items-center gap-2">
-              <UserPlus className="w-5 h-5 text-blue-600" /> {canCreateDirectly ? 'Thêm thành viên' : 'Mời tham gia tour'}
+              <UserPlus className="w-5 h-5 text-blue-600" /> {canCreateDirectly ? 'Thành viên hành trình' : 'Mời tham gia tour'}
             </h2>
             <p className="text-xs text-gray-500">
-              {canCreateDirectly ? 'Chọn người dùng và phân quyền cho tour này.' : 'Mời sẽ được gửi và chờ người quản lý phê duyệt.'}
+              {canCreateDirectly ? 'Quản lý, thêm thành viên và mời người khác tham gia.' : 'Mời sẽ được gửi và chờ người quản lý phê duyệt.'}
             </p>
           </div>
           <button onClick={onClose} className="p-2 hover:bg-gray-200 rounded-full transition-colors">
@@ -156,11 +231,37 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
           </button>
         </div>
 
-        <div className="p-5 space-y-4">
+        {canInviteByEmail && (
+          <div className="flex border-b border-gray-100 bg-gray-50/30">
+            <button
+              onClick={() => setActiveTab('search')}
+              className={`flex-1 py-3 text-center text-sm font-bold border-b-2 transition-all ${
+                activeTab === 'search'
+                  ? 'border-blue-600 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              Tìm thành viên
+            </button>
+            <button
+              onClick={() => setActiveTab('email')}
+              className={`flex-1 py-3 text-center text-sm font-bold border-b-2 transition-all ${
+                activeTab === 'email'
+                  ? 'border-blue-600 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              Mời qua Email
+            </button>
+          </div>
+        )}
+
+        <div className="p-5 space-y-4 overflow-y-auto flex-1">
+          {/* Danh sách thành viên hiện tại */}
           <div>
-            <p className="text-[11px] font-bold text-gray-500 mb-2">Thành viên của tour ({participants.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.map((p) => {
+              {participants.filter(p => p.user || p.displayName).map((p) => {
                 const rawToken = localStorage.getItem('token');
                 let currentUserId: string | null = null;
                 try {
@@ -172,15 +273,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"
                         >
@@ -188,7 +290,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>
                 );
               })}
@@ -198,6 +300,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
             </div>
           </div>
 
+          {/* Danh sách chờ duyệt */}
           {joinRequests.length > 0 && (
             <div>
               <p className="text-[11px] font-bold text-gray-500 mb-2 flex items-center gap-1">
@@ -213,7 +316,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"
                       >
@@ -222,7 +325,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"
                       >
@@ -237,87 +340,190 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
             </div>
           )}
 
-          {canCreateDirectly && (
-            <div className="space-y-1.5">
-              <label className="text-xs font-bold text-gray-700 ml-1">Phân quyền</label>
-              <select
-                className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm"
-                value={role}
-                onChange={(e) => setRole(e.target.value as any)}
-              >
-                <option value="OWNER">OWNER</option>
-                <option value="MANAGER">MANAGER</option>
-                <option value="MEMBER">MEMBER</option>
-                <option value="MEMBER_NO_FINANCE">MEMBER_NO_FINANCE</option>
-                <option value="VIEWER_ONLY">VIEWER_ONLY</option>
-              </select>
-            </div>
-          )}
+          <hr className="border-gray-100" />
 
-          <div className="space-y-2">
-            {fetchError && (
-              <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
-                {fetchError}
-              </div>
-            )}
-            {submitError && (
-              <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
-                {submitError}
-              </div>
-            )}
-            {loading ? (
-              <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">
-                {visibleUsers.map((u) => {
-                  const isSelected = selectedUser === u.id;
-                  return (
+          {activeTab === 'search' ? (
+            <div className="space-y-4">
+              {canCreateDirectly && (
+                <div className="space-y-1.5">
+                  <label className="text-xs font-bold text-gray-700 ml-1">Phân quyền khi thêm</label>
+                  <select
+                    className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm font-bold text-gray-800"
+                    value={role}
+                    onChange={(e) => setRole(e.target.value as any)}
+                  >
+                    <option value="OWNER">OWNER</option>
+                    <option value="MANAGER">MANAGER</option>
+                    <option value="MEMBER">MEMBER</option>
+                    <option value="MEMBER_NO_FINANCE">MEMBER_NO_FINANCE</option>
+                    <option value="VIEWER_ONLY">VIEWER_ONLY</option>
+                  </select>
+                </div>
+              )}
+
+              <div className="space-y-2">
+                <div className="relative mb-2">
+                  <input
+                    type="text"
+                    placeholder="Tìm kiếm theo tên hoặc địa chỉ email..."
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    className="w-full pl-10 pr-10 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm font-bold text-gray-800"
+                  />
+                  <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500" />
+                  {query && (
                     <button
-                      key={u.id}
-                      onClick={() => setSelectedUser(u.id)}
-                      disabled={requestUserIds.has(u.id)}
-                      className={`w-full flex items-center gap-3 p-3 rounded-2xl border transition-all ${
-                        isSelected ? 'border-blue-500 bg-blue-50/60' : 'border-gray-100 hover:border-blue-200'
-                      } ${requestUserIds.has(u.id) ? 'opacity-60' : ''}`}
+                      type="button"
+                      onClick={() => setQuery('')}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 hover:bg-gray-200 rounded-full text-gray-400 transition-colors"
                     >
-                      <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
-                        {u.name?.charAt(0) || '?'}
-                      </div>
-                      <div className="flex-1 text-left">
-                        <div className="text-sm font-bold text-gray-900">{u.name || 'Chưa đặt tên'}</div>
-                        <div className="text-[11px] text-gray-500">{u.email}</div>
-                        <div className="text-[11px] text-gray-400">{u.phone || ''} {u.address ? `• ${u.address}` : ''}</div>
-                      </div>
-                      <div className="flex items-center gap-1 text-[10px] font-bold text-gray-500">
-                        {u.isAdmin ? (
-                          <span className="px-2 py-1 bg-purple-50 text-purple-600 rounded-md border border-purple-100">ADMIN</span>
-                        ) : (
-                          <span className="px-2 py-1 bg-gray-50 text-gray-500 rounded-md border border-gray-100">USER</span>
-                        )}
-                        {isSelected && <Shield className="w-3 h-3 text-blue-600" />}
-                      </div>
+                      <X className="w-4 h-4" />
                     </button>
-                  );
-                })}
-                {!loading && visibleUsers.length === 0 && (
-                  <div className="text-center py-8 text-sm text-gray-500">Không tìm thấy người dùng phù hợp</div>
+                  )}
+                </div>
+
+                {fetchError && (
+                  <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
+                    {fetchError}
+                  </div>
+                )}
+                {submitError && (
+                  <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
+                    {submitError}
+                  </div>
+                )}
+                {loading ? (
+                  <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-[30vh] 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 (
+                        <button
+                          key={u.id}
+                          onClick={() => setSelectedUser(u.id)}
+                          disabled={requestUserIds.has(u.id)}
+                          className={`w-full flex items-center gap-3 p-3 rounded-2xl border transition-all ${
+                            isSelected ? 'border-blue-500 bg-blue-50/60' : 'border-gray-100 hover:border-blue-200'
+                          } ${requestUserIds.has(u.id) ? 'opacity-60' : ''}`}
+                        >
+                          <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
+                            {u.name?.charAt(0) || '?'}
+                          </div>
+                          <div className="flex-1 text-left">
+                            <div className="text-sm font-bold text-gray-900">{u.name || 'Chưa đặt tên'}</div>
+                            <div className="text-[11px] text-gray-500">{u.email}</div>
+                          </div>
+                          <div className="flex items-center gap-1 text-[10px] font-bold text-gray-500">
+                            {isSelected && <Shield className="w-3 h-3 text-blue-600" />}
+                          </div>
+                        </button>
+                      );
+                    })}
+                    {!loading && visibleUsers.length === 0 && (
+                      <div className="text-center py-8 text-sm text-gray-500">Không tìm thấy người dùng phù hợp</div>
+                    )}
+                  </div>
                 )}
               </div>
-            )}
-          </div>
-        </div>
+              <div className="flex justify-end gap-2 pt-2">
+                <button onClick={onClose} className="px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">
+                  Hủy
+                </button>
+                <button
+                  disabled={!selectedUser || submitting}
+                  onClick={handleAdd}
+                  className="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-xl text-sm font-bold transition-all"
+                >
+                  {submitting ? 'Đang xử lý...' : canCreateDirectly ? 'Thêm vào tour' : 'Gửi lời mời'}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <form onSubmit={handleSendInvite} className="space-y-4">
+              <div className="space-y-1.5">
+                <label className="text-xs font-bold text-gray-700 ml-1">Email người nhận</label>
+                <input
+                  required
+                  type="email"
+                  placeholder="nhap.email@example.com"
+                  value={inviteEmail}
+                  onChange={(e) => setInviteEmail(e.target.value)}
+                  className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm font-bold text-gray-800"
+                />
+              </div>
 
-        <div className="p-5 border-t border-gray-100 flex justify-end gap-2">
-          <button onClick={onClose} className="px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">
-            Hủy
-          </button>
-          <button
-            disabled={!selectedUser || submitting}
-            onClick={handleAdd}
-            className="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-xl text-sm font-bold transition-all"
-          >
-            {submitting ? 'Đang xử lý...' : canCreateDirectly ? 'Thêm vào tour' : 'Gửi lời mời'}
-          </button>
+              <div className="space-y-1.5">
+                <label className="text-xs font-bold text-gray-700 ml-1">Vai trò trong Tour</label>
+                <select
+                  className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm font-bold text-gray-800"
+                  value={inviteRole}
+                  onChange={(e) => setInviteRole(e.target.value as any)}
+                >
+                  <option value="MEMBER">MEMBER (Thành viên tài chính)</option>
+                  <option value="MEMBER_NO_FINANCE">MEMBER_NO_FINANCE (Thành viên phi tài chính)</option>
+                  <option value="MANAGER">MANAGER (Đồng quản trị viên)</option>
+                  <option value="VIEWER_ONLY">VIEWER_ONLY (Chỉ xem thông tin)</option>
+                </select>
+              </div>
+
+              {inviteError && (
+                <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
+                  {inviteError}
+                </div>
+              )}
+              {inviteSuccess && (
+                <div className="p-3 bg-green-50 text-green-700 rounded-xl text-xs font-bold border border-green-100">
+                  {inviteSuccess}
+                </div>
+              )}
+
+              <div className="flex justify-end gap-2 pt-2">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors"
+                >
+                  Đóng
+                </button>
+                <button
+                  type="submit"
+                  disabled={inviteLoading || !inviteEmail}
+                  className="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-xl text-sm font-bold transition-all flex items-center gap-2"
+                >
+                  {inviteLoading ? (
+                    <>
+                      Đang gửi...
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                    </>
+                  ) : (
+                    'Gửi thư mời'
+                  )}
+                </button>
+              </div>
+            </form>
+          )}
         </div>
       </div>
     </div>

frontend/src/components/AddPhotoModal.tsx

@@ -2,18 +2,22 @@ import React, { useState, useRef } from 'react';
 import { X, Upload, Image as ImageIcon, Loader2 } from 'lucide-react';
 import { useNotification } from '@/hooks/useNotification';
 import { useTourStore } from '@/store/useTourStore';
+import { processImageModeration } from '@/hooks/useImageModeration';
+import { compressImage } from '../utils/image';
 
 interface AddPhotoModalProps {
   isOpen: boolean;
   onClose: () => void;
   tourId: string;
   onSuccess?: () => void;
+  isPublicView?: boolean;
 }
 
-export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, tourId, onSuccess }) => {
+export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, tourId, onSuccess, isPublicView }) => {
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [previews, setPreviews] = useState<string[]>([]);
   const [isUploading, setIsUploading] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const notify = useNotification();
   const fetchTour = useTourStore(state => state.fetchTour);
@@ -26,34 +30,55 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
       const newValidFiles: File[] = [];
       const newValidPreviews: string[] = [];
 
-      for (const file of files) {
-        // 1. Kiểm tra cơ bản: Tệp có dung lượng hay không
-        if (!file || file.size === 0) {
-          notify({ title: 'Lỗi tệp', message: `Tệp ${file.name} trống hoặc không khả dụng.`, type: 'error' });
-          continue;
+      setIsProcessing(true);
+      notify({ title: 'Đang kiểm duyệt...', message: 'Đang kiểm tra và lọc hình ảnh của bạn...', type: 'info' });
+
+      try {
+        for (const file of files) {
+          // 1. Kiểm tra cơ bản: Tệp có dung lượng hay không
+          if (!file || file.size === 0) {
+            notify({ title: 'Lỗi tệp', message: `Tệp ${file.name} trống hoặc không khả dụng.`, type: 'error' });
+            continue;
+          }
+
+          // Nén ảnh trước
+          const compressedFile = await compressImage(file);
+ 
+          // 2. Chạy kiểm duyệt hình ảnh
+          const moderationResult = await processImageModeration(compressedFile);
+          if (moderationResult.blocked) {
+            notify({ title: 'Ảnh bị từ chối', message: `Ảnh ${file.name} chứa nội dung không phù hợp và bị chặn.`, type: 'error' });
+            continue;
+          }
+
+          const processedFile = moderationResult.file;
+          const previewUrl = URL.createObjectURL(processedFile);
+
+          // 3. Kiểm tra tính toàn vẹn: Thử load ảnh vào bộ nhớ để xác nhận file "tồn tại" và đọc được
+          const isValidImage = await new Promise<boolean>((resolve) => {
+            const img = new Image();
+            img.onload = () => resolve(true);
+            img.onerror = () => resolve(false);
+            img.src = previewUrl;
+          });
+
+          if (isValidImage) {
+            newValidFiles.push(processedFile);
+            newValidPreviews.push(previewUrl);
+          } else {
+            URL.revokeObjectURL(previewUrl); // Thu hồi ngay nếu không hợp lệ
+            notify({ title: 'Lỗi ảnh', message: `Không thể đọc nội dung ảnh: ${file.name}. Vui lòng kiểm tra lại file.`, type: 'error' });
+          }
         }
 
-        const previewUrl = URL.createObjectURL(file);
-
-        // 2. Kiểm tra tính toàn vẹn: Thử load ảnh vào bộ nhớ để xác nhận file "tồn tại" và đọc được
-        const isValidImage = await new Promise<boolean>((resolve) => {
-          const img = new Image();
-          img.onload = () => resolve(true);
-          img.onerror = () => resolve(false);
-          img.src = previewUrl;
-        });
-
-        if (isValidImage) {
-          newValidFiles.push(file);
-          newValidPreviews.push(previewUrl);
-        } else {
-          URL.revokeObjectURL(previewUrl); // Thu hồi ngay nếu không hợp lệ
-          notify({ title: 'Lỗi ảnh', message: `Không thể đọc nội dung ảnh: ${file.name}. Vui lòng kiểm tra lại file.`, type: 'error' });
-        }
+        setSelectedFiles(prev => [...prev, ...newValidFiles]);
+        setPreviews(prev => [...prev, ...newValidPreviews]);
+      } catch (err) {
+        console.error('File checking error:', err);
+        notify({ title: 'Lỗi', message: 'Lỗi trong quá trình kiểm duyệt ảnh.', type: 'error' });
+      } finally {
+        setIsProcessing(false);
       }
-
-      setSelectedFiles(prev => [...prev, ...newValidFiles]);
-      setPreviews(prev => [...prev, ...newValidPreviews]);
     }
   };
 
@@ -70,11 +95,32 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
 
     setIsUploading(true);
     try {
+      // Lấy tọa độ hiện tại của người dùng làm dự phòng nếu ảnh EXIF không có GPS
+      const location = await Promise.race([
+        new Promise<GeolocationPosition | null>((resolve) => {
+          if (!navigator.geolocation) {
+            resolve(null);
+          } else {
+            navigator.geolocation.getCurrentPosition(
+              (pos) => resolve(pos),
+              () => resolve(null),
+              { timeout: 4000, enableHighAccuracy: true }
+            );
+          }
+        }),
+        new Promise<null>((resolve) => setTimeout(() => resolve(null), 4500))
+      ]);
+
       const formData = new FormData();
       selectedFiles.forEach(file => {
         formData.append('images', file);
       });
 
+      if (location) {
+        formData.append('latitude', location.coords.latitude.toString());
+        formData.append('longitude', location.coords.longitude.toString());
+      }
+
       const response = await fetch(`/api/v1/tours/${tourId}/photos`, {
         method: 'POST',
         headers: {
@@ -91,13 +137,28 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
         type: 'success'
       });
       
-      fetchTour(tourId); 
-      if (onSuccess) onSuccess();
-      onClose();
       // Giải phóng bộ nhớ sau khi hoàn tất
       previews.forEach(url => URL.revokeObjectURL(url));
       setSelectedFiles([]);
       setPreviews([]);
+      
+      // Refresh tour data (applies to both authenticated and public users)
+      // This ensures newly uploaded photos appear immediately without requiring a page reload
+      fetchTour(tourId);
+      if (onSuccess) onSuccess();
+      
+      // For public users: redirect to landing page after upload (after data refresh)
+      // For authenticated users: close modal and show updated tour
+      if (isPublicView) {
+        onClose();
+        // Give time for tour data to refresh before redirecting
+        setTimeout(() => {
+          localStorage.setItem('fromPublicUpload', 'true');
+          window.location.href = '/';
+        }, 1500);
+      } else {
+        onClose();
+      }
     } catch (error) {
       notify({
         title: 'Lỗi',
@@ -109,6 +170,7 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
     }
   };
 
+
   return (
     <div className="fixed inset-0 z-[2500] flex items-center justify-center p-4">
       <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
@@ -156,10 +218,19 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
           )}
 
           <button 
-            disabled={isUploading || selectedFiles.length === 0}
+            disabled={isUploading || isProcessing || selectedFiles.length === 0}
             className="w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white font-black uppercase tracking-widest rounded-2xl flex items-center justify-center gap-2 shadow-lg shadow-blue-100 transition-all active:scale-95"
           >
-            {isUploading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Xác nhận tải lên'}
+            {isUploading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : isProcessing ? (
+              <>
+                <Loader2 className="w-5 h-5 animate-spin" />
+                Đang xử lý ảnh...
+              </>
+            ) : (
+              'Xác nhận tải lên'
+            )}
           </button>
         </form>
       </div>

frontend/src/components/CommentModal.tsx

@@ -2,14 +2,14 @@ import React, { useState, useEffect } from 'react';
 import { X, Send, MessageSquare, User, Loader2, Trash2 } from 'lucide-react';
 import { io } from 'socket.io-client';
 import { useTourStore } from '@/store/useTourStore';
-import { useConfirm } from '@/hooks/useConfirm';
+import { ConfirmModal } from './ConfirmModal';
 
 interface Comment {
   id: string;
   userName: string;
   content: string;
   createdAt: string;
-  userId: string;
+  userId?: string;
 }
 
 interface CommentModalProps {
@@ -26,7 +26,7 @@ export const CommentModal: React.FC<CommentModalProps> = ({ isOpen, onClose, loc
   const [comments, setComments] = useState<Comment[]>([]);
   const [newComment, setNewComment] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const confirm = useConfirm();
+  const [confirmState, setConfirmState] = useState({ open: false, commentId: '' });
 
   const userRole = useTourStore(state => state.userRole);
   const currentUserId = React.useMemo(() => {
@@ -81,7 +81,8 @@ export const CommentModal: React.FC<CommentModalProps> = ({ isOpen, onClose, loc
             id: newCommentData.id,
             userName: newCommentData.user?.name || 'Ẩn danh',
             content: newCommentData.content,
-            createdAt: newCommentData.createdAt
+            createdAt: newCommentData.createdAt,
+            userId: newCommentData.userId || newCommentData.user?.id
           }];
         });
       }

frontend/src/components/CoordinateSelectModal.tsx

@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from 'react';
+import { X, MapPin, Search, Loader2 } from 'lucide-react';
+import { MapContainer, TileLayer, Marker, useMap, useMapEvents } from 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { useTranslation } from '../hooks/useTranslation';
+
+// Fix Leaflet default marker icon bug
+const DefaultIcon = L.icon({
+  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+});
+
+interface CoordinateSelectModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialLat?: number;
+  initialLng?: number;
+  onSelect: (lat: number, lng: number) => void;
+}
+
+function MapClickEvents({ onClick }: { onClick: (lat: number, lng: number) => void }) {
+  useMapEvents({
+    click: (e) => {
+      onClick(e.latlng.lat, e.latlng.lng);
+    }
+  });
+  return null;
+}
+
+function MapInvalidator() {
+  const map = useMap();
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      map.invalidateSize();
+    }, 250);
+    return () => clearTimeout(timer);
+  }, [map]);
+  return null;
+}
+
+function RecenterMap({ position }: { position: [number, number] }) {
+  const map = useMap();
+  useEffect(() => {
+    map.setView(position, map.getZoom());
+  }, [position, map]);
+  return null;
+}
+
+export const CoordinateSelectModal: React.FC<CoordinateSelectModalProps> = ({
+  isOpen,
+  onClose,
+  initialLat,
+  initialLng,
+  onSelect
+}) => {
+  const { t } = useTranslation();
+  const defaultCenter: [number, number] = [10.7769, 106.7009]; // TP.HCM default
+  const [position, setPosition] = useState<[number, number]>(defaultCenter);
+  const [hasSelected, setHasSelected] = useState(false);
+
+  // Search States
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<any[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      if (typeof initialLat === 'number' && typeof initialLng === 'number' && !isNaN(initialLat) && !isNaN(initialLng)) {
+        setPosition([initialLat, initialLng]);
+        setHasSelected(true);
+      } else {
+        setPosition(defaultCenter);
+        setHasSelected(false);
+      }
+      setSearchQuery('');
+      setSearchResults([]);
+    }
+  }, [isOpen, initialLat, initialLng]);
+
+  if (!isOpen) return null;
+
+  const handleMapClick = (lat: number, lng: number) => {
+    setPosition([lat, lng]);
+    setHasSelected(true);
+  };
+
+  const handleConfirm = () => {
+    onSelect(position[0], position[1]);
+    onClose();
+  };
+
+  const handleSearch = async () => {
+    if (!searchQuery.trim()) return;
+    setIsSearching(true);
+    try {
+      const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery)}&accept-language=vi&limit=5`);
+      if (res.ok) {
+        const data = await res.json();
+        setSearchResults(data);
+      }
+    } catch (e) {
+      console.error('Error during Nominatim search:', e);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  const handleSelectResult = (place: any) => {
+    const lat = parseFloat(place.lat);
+    const lng = parseFloat(place.lon);
+    setPosition([lat, lng]);
+    setHasSelected(true);
+    setSearchResults([]);
+    setSearchQuery(place.display_name);
+  };
+
+  return (
+    <div className="fixed inset-0 z-[6000] flex items-center justify-center p-4 animate-in fade-in duration-200">
+      {/* Backdrop */}
+      <div 
+        className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      {/* Content */}
+      <div className="relative w-full max-w-2xl h-[550px] bg-white dark:bg-slate-900 rounded-3xl shadow-2xl overflow-hidden flex flex-col border border-gray-100 dark:border-slate-800 animate-in zoom-in-95 duration-200">
+        {/* Header */}
+        <div className="p-4 border-b border-gray-100 dark:border-slate-800/80 flex items-center justify-between bg-white dark:bg-slate-900 shrink-0">
+          <div className="flex items-center gap-2">
+            <MapPin className="w-5 h-5 text-blue-500" />
+            <div className="text-left">
+              <h3 className="font-extrabold text-sm text-gray-900 dark:text-white">{t('chooseLocationMap')}</h3>
+              <p className="text-[10px] text-gray-400 font-bold uppercase tracking-wider">{t('clickMapSelectCoords')}</p>
+            </div>
+          </div>
+          <button 
+            onClick={onClose}
+            className="p-1.5 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-full transition-all text-gray-400 hover:text-gray-650"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Map Body */}
+        <div className="flex-1 bg-gray-50 dark:bg-slate-950 relative min-h-[300px]" style={{ zIndex: 10 }}>
+          
+          {/* Floating Search Panel */}
+          <div className="absolute top-4 left-4 right-4 sm:right-auto z-[1000] sm:w-80 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md rounded-2xl border border-slate-150 dark:border-slate-800 shadow-xl p-2 flex flex-col gap-1.5">
+            <div className="flex items-center gap-2">
+              <div className="flex-1 relative flex items-center">
+                <input
+                  type="text"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                  placeholder={t('searchPlaceholder')}
+                  className="w-full bg-slate-50 dark:bg-slate-800 border-0 outline-none rounded-xl pl-8 pr-3 py-2 text-xs text-slate-800 dark:text-slate-100"
+                />
+                <Search className="w-3.5 h-3.5 text-slate-400 absolute left-2.5" />
+              </div>
+              <button
+                type="button"
+                onClick={handleSearch}
+                disabled={isSearching}
+                className="bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-bold px-3 py-2 rounded-xl text-xs transition-all active:scale-95 shrink-0 flex items-center gap-1"
+              >
+                {isSearching ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : t('confirm')}
+              </button>
+            </div>
+
+            {searchResults.length > 0 && (
+              <div className="max-h-48 overflow-y-auto divide-y divide-gray-100 dark:divide-slate-800/50 bg-white dark:bg-slate-900 rounded-xl border border-slate-150 dark:border-slate-800 shadow-inner">
+                {searchResults.map((r, i) => (
+                  <button
+                    key={i}
+                    type="button"
+                    onClick={() => handleSelectResult(r)}
+                    className="w-full text-left px-3 py-2.5 text-[10px] text-gray-700 dark:text-slate-350 hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors truncate block"
+                    title={r.display_name}
+                  >
+                    {r.display_name}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <MapContainer
+            center={position}
+            zoom={13}
+            attributionControl={false}
+            style={{ width: '100%', height: '100%', zIndex: 1 }}
+          >
+            <TileLayer
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            <MapClickEvents onClick={handleMapClick} />
+            <MapInvalidator />
+            <RecenterMap position={position} />
+            {hasSelected && (
+              <Marker position={position} icon={DefaultIcon} />
+            )}
+          </MapContainer>
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-gray-100 dark:border-slate-800/80 flex items-center justify-between bg-white dark:bg-slate-900 shrink-0">
+          <div className="text-xs text-gray-500 dark:text-slate-400">
+            {hasSelected ? (
+              <span className="font-semibold text-gray-700 dark:text-slate-200">
+                {t('coordsLabel')}: {position[0].toFixed(6)}, {position[1].toFixed(6)}
+              </span>
+            ) : (
+              <span className="italic text-gray-400 dark:text-slate-500">{t('noCoordsSelected')}</span>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 border border-gray-200 dark:border-slate-800 hover:bg-gray-50 dark:hover:bg-slate-800 text-gray-700 dark:text-slate-300 rounded-xl text-xs font-bold transition-all animate-fade-in"
+            >
+              {t('cancel')}
+            </button>
+            <button
+              onClick={handleConfirm}
+              disabled={!hasSelected}
+              className="px-5 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-200 disabled:text-gray-400 dark:disabled:bg-slate-800 dark:disabled:text-slate-650 disabled:cursor-not-allowed text-white rounded-xl text-xs font-bold transition-all shadow-md shadow-blue-500/10"
+            >
+              {t('confirm')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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,49 +217,71 @@ 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>
-                  <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"
-                    aria-label="Remove item"
-                  >
-                    <Trash2 size={12} />
-                  </button>
-                  <div className="text-[10px] text-center mt-1 max-w-[70px] truncate">{m.name}</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..."
-                  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) => (
-                      <button
-                        key={u.id}
-                        type="button"
-                        onClick={() => confirmAddMember(u)}
-                        className="w-full text-left px-3 py-2 text-sm hover:bg-blue-50"
-                      >
-                        <span className="font-bold text-gray-900">{u.name}</span>
-                        <span className="block text-xs text-gray-500">{u.email}</span>
-                      </button>
-                    ))}
-                  </div>
-                )}
+          <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-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={10} />
+                        </button>
+                      </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-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 || 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 rounded-xl flex flex-col"
+                    >
+                      <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>
             {error && <p className="text-xs text-red-600 mt-2">{error}</p>}
           </div>

frontend/src/components/ItineraryTimeline.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { format, differenceInMinutes, parseISO } from 'date-fns';
-import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List, X, Calendar as CalendarIcon, AlignLeft, MessageSquare } from 'lucide-react';
+import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List, X, Calendar as CalendarIcon, AlignLeft, MessageSquare, FileText, Flag } from 'lucide-react';
 import { useTourStore } from '@/store/useTourStore';
 import { useConfirm } from '@/hooks/useConfirm';
 import { useNotification } from '@/hooks/useNotification';
@@ -41,8 +41,18 @@ const formatTravelTime = (minutes: number) => {
 export const ItineraryTimeline = ({
   onAddLocation, 
   onEditLocation,
+  onQuickNote,
+  onNavigate,
+  onSuccess,
   isPublicView = false
-}: { onAddLocation?: (legId: string) => void, onEditLocation?: (location: any) => void, isPublicView?: boolean }) => {
+}: { 
+  onAddLocation?: (legId: string, isStart?: boolean, isEnd?: boolean) => void, 
+  onEditLocation?: (location: any) => void, 
+  onQuickNote?: (name: string) => void,
+  onNavigate?: (location: any) => void,
+  onSuccess?: () => void,
+  isPublicView?: boolean 
+}) => {
   // Tối ưu hóa selectors để chỉ lắng nghe những thay đổi cần thiết
   const currentTour = useTourStore(state => state.currentTour);
   const legs = useTourStore(state => state.legs);
@@ -53,7 +63,6 @@ export const ItineraryTimeline = ({
   // Removed: const { isPublicView } = useTourStore(state => state); // isPublicView is passed as a prop
   const deleteLeg = useTourStore(state => state.deleteLeg);
   const initializeLegs = useTourStore(state => state.initializeLegs);
-  const fetchTour = useTourStore(state => state.fetchTour);
   const deleteLocation = useTourStore(state => state.deleteLocation);
 
   // Khai báo logic canEdit để sử dụng trong toàn bộ component
@@ -70,9 +79,9 @@ export const ItineraryTimeline = ({
   // Tối ưu hóa: Cập nhật UI ngay lập tức bằng cách can thiệp vào State của Store
   const handleCommentIncrement = (locationId: string) => {
     const currentLegs = useTourStore.getState().legs;
-    const updatedLegs = currentLegs.map(leg => ({
+    const updatedLegs = currentLegs.map((leg: any) => ({
       ...leg,
-      locations: leg.locations.map(loc => 
+      locations: leg.locations.map((loc: any) => 
         loc.id === locationId 
           ? { ...loc, _count: { ...loc._count, comments: (loc._count?.comments || 0) + 1 } }
           : loc
@@ -84,9 +93,9 @@ export const ItineraryTimeline = ({
 
   const handleCommentDecrement = (locationId: string) => {
     const currentLegs = useTourStore.getState().legs;
-    const updatedLegs = currentLegs.map(leg => ({
+    const updatedLegs = currentLegs.map((leg: any) => ({
       ...leg,
-      locations: leg.locations.map(loc => 
+      locations: leg.locations.map((loc: any) => 
         loc.id === locationId 
           ? { ...loc, _count: { ...loc._count, comments: Math.max(0, (loc._count?.comments || 1) - 1) } }
           : loc
@@ -105,9 +114,10 @@ export const ItineraryTimeline = ({
     endDate: '' 
   });
 
-  const toggleComplete = async (locationId: string) => {
-    // Gọi API PATCH /api/v1/locations/:id để cập nhật trạng thái
-    console.log("Toggle status for location:", locationId);
+  const handleStatusClick = (location: any) => {
+    if (onNavigate) {
+      onNavigate(location);
+    }
   };
 
   const handleAddLeg = async () => {
@@ -160,6 +170,7 @@ export const ItineraryTimeline = ({
     if (isConfirmed) {
       try {
         await deleteLeg(legId);
+        onSuccess?.();
       } catch (err: any) {
         notify({ title: 'Lỗi', message: err.message, type: 'error' });
       }
@@ -174,14 +185,22 @@ export const ItineraryTimeline = ({
     if (isConfirmed) {
       try {
         await deleteLocation(id);
+        onSuccess?.();
       } catch (err: any) {
         notify({ title: 'Lỗi', message: err.message, type: 'error' });
       }
     }
   };
 
+  // Tạo mảng phẳng tất cả địa điểm để tính toán quãng đường liên tục giữa các chặng
+  const allLocations = useMemo(() => legs.flatMap(l => l.locations), [legs]);
+
+  useEffect(() => {
+    console.log("ItineraryTimeline: Legs updated", legs);
+  }, [legs]);
+
   return (
-    <div className="max-w-2xl mx-auto p-0 bg-gray-50 min-h-screen">
+    <div id="itinerary-timeline-print-zone" className="max-w-2xl mx-auto p-0 bg-gray-50 min-h-screen">
       <div className="px-2 pt-4">
         {legs.length === 0 ? (
           <div className="text-center py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200">
@@ -230,7 +249,7 @@ export const ItineraryTimeline = ({
                       {canEdit && (
                         <>
                           <button 
-                            onClick={() => onAddLocation?.(leg.id)}
+                            onClick={() => onAddLocation?.(leg.id, legIdx === 0 && leg.locations.length === 0)}
                             className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all"
                             title="Thêm địa điểm vào chặng này"
                           >
@@ -284,24 +303,69 @@ export const ItineraryTimeline = ({
                   <div className={`absolute left-6 top-16 ${legIdx === legs.length - 1 ? 'bottom-0' : 'bottom-[-3.5rem]'} w-0.5 bg-blue-100 -z-0`} />
 
                   <div className="ml-2">
-                    {leg.locations.map((location, idx) => {
-                      // Logic quan trọng: Gán điểm cuối chặng này nối với điểm đầu chặng sau
-                      const nextLocation = leg.locations[idx + 1] || legs[legIdx + 1]?.locations[0];
-                      const distanceToNext = nextLocation 
-                        ? calculateDistance(location.latitude, location.longitude, nextLocation.latitude, nextLocation.longitude)
+                    {/* Nút thêm nhanh "Điểm xuất phát" cho Chặng 1 nếu chưa có */}
+                    {legIdx === 0 && !leg.locations.some((loc: any) => loc.plannedStart && new Date(loc.plannedStart).getTime() === 0) && (
+                      <div className="relative flex group mb-6 opacity-80 hover:opacity-100 transition-opacity">
+                        <div className="z-10 mt-1.5 mr-4">
+                          <div className="w-8 h-8 bg-white rounded-full border-2 border-dashed border-blue-200 flex items-center justify-center text-blue-400">
+                            <MapPin className="w-4 h-4" />
+                          </div>
+                        </div>
+                        <button 
+                          onClick={() => onAddLocation?.(leg.id, true)}
+                          className="flex-1 bg-blue-50/20 p-4 rounded-xl border border-dashed border-blue-100 hover:border-blue-400 hover:bg-blue-50 transition-all flex items-center justify-between group"
+                        >
+                          <div className="text-left">
+                            <span className="inline-block px-2 py-0.5 bg-blue-50 text-blue-600 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm xuất phát</span>
+                            <h3 className="font-bold text-gray-400 text-sm italic">Nhấn để ghim điểm bắt đầu cho Tour...</h3>
+                          </div>
+                          <Plus className="w-5 h-5 text-blue-500 group-hover:scale-110 transition-transform" />
+                        </button>
+                      </div>
+                    )}
+
+                    {/* Nút thêm nhanh "Điểm kết thúc" cho Chặng cuối nếu chưa có */}
+                    {legIdx === legs.length - 1 && !legs.some((l: any) => l.locations.some((loc: any) => loc.plannedEnd && new Date(loc.plannedEnd).getTime() === 0)) && (
+                      <div className="relative flex group mb-6 opacity-80 hover:opacity-100 transition-opacity">
+                        <div className="z-10 mt-1.5 mr-4">
+                          <div className="w-8 h-8 bg-white rounded-full border-2 border-dashed border-red-200 flex items-center justify-center text-red-400">
+                            <Flag className="w-4 h-4" />
+                          </div>
+                        </div>
+                        <button 
+                          onClick={() => onAddLocation?.(leg.id, false, true)}
+                          className="flex-1 bg-red-50/20 p-4 rounded-xl border border-dashed border-red-100 hover:border-red-400 hover:bg-red-50 transition-all flex items-center justify-between group"
+                        >
+                          <div className="text-left">
+                            <span className="inline-block px-2 py-0.5 bg-red-50 text-red-600 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span>
+                            <h3 className="font-bold text-gray-400 text-sm italic">Nhấn để ghim điểm kết thúc cho Tour...</h3>
+                          </div>
+                          <Plus className="w-5 h-5 text-red-500 group-hover:scale-110 transition-transform" />
+                        </button>
+                      </div>
+                    )}
+
+                    {leg.locations.map((location: any) => {
+                      // Tìm vị trí của điểm này trong toàn bộ hành trình
+                      const globalIdx = allLocations.findIndex((loc: any) => loc.id === location.id);
+                      const prevLocation = globalIdx > 0 ? allLocations[globalIdx - 1] : null;
+                      
+                      const distanceFromPrev = prevLocation 
+                        ? calculateDistance(prevLocation.latitude, prevLocation.longitude, location.latitude, location.longitude)
                         : null;
 
-                      const averageSpeed = 35; // km/h
-                      const travelTimeMinutes = distanceToNext ? Math.round((distanceToNext / averageSpeed) * 60) : null;
-
-                      const dwellMinutes = (location.plannedStart && location.plannedEnd)
-                        ? differenceInMinutes(parseISO(location.plannedEnd), parseISO(location.plannedStart))
-                        : null;
-                        
                       const locationExpense = leg.expenses?.find((e: any) => e.locationId === location.id);
 
-                      const isStartPoint = legs[0]?.id === leg.id && idx === 0;
-                      const isEndPoint = legs[legs.length - 1]?.id === leg.id && idx === leg.locations.length - 1;
+                      // Nhận diện điểm mốc dựa trên timestamp đặc biệt (0) thay vì chỉ số mảng
+                      const isStartPoint = location.plannedStart && new Date(location.plannedStart).getTime() === 0;
+                      const isEndPoint = location.plannedEnd && new Date(location.plannedEnd).getTime() === 0;
+
+                      const plannedTimeStr = isStartPoint ? location.plannedEnd : location.plannedStart;
+                      const hasValidPlannedTime = plannedTimeStr && new Date(plannedTimeStr).getTime() !== 0;
+
+                      const dwellMinutes = (location.plannedStart && location.plannedEnd && !isStartPoint && !isEndPoint)
+                        ? differenceInMinutes(parseISO(location.plannedEnd), parseISO(location.plannedStart))
+                        : null;
 
                       return (
                         <div key={location.id}>
@@ -309,7 +373,7 @@ export const ItineraryTimeline = ({
                             {/* Timeline Node */}
                             <div className="z-10 mt-1.5 mr-4">
                               <button 
-                                onClick={() => toggleComplete(location.id)}
+                                onClick={() => handleStatusClick(location)}
                                 className={`transition-colors duration-200 ${location.status === 'COMPLETED' ? 'text-green-500' : 'text-gray-300 hover:text-blue-500'}`}
                               >
                                 {location.status === 'COMPLETED' ? (
@@ -321,9 +385,12 @@ export const ItineraryTimeline = ({
                             </div>
 
                             {/* Card Content */}
-                            <div className={`flex-1 bg-white p-4 rounded-xl border transition-all duration-200 ${
-                              location.status === 'COMPLETED' ? 'border-green-100 bg-green-50/30' : 'border-gray-100 shadow-sm hover:shadow-md'
-                            }`}>
+                            <div 
+                              onClick={() => onNavigate?.(location)}
+                              className={`flex-1 bg-white p-4 rounded-xl border transition-all duration-200 cursor-pointer ${
+                                location.status === 'COMPLETED' ? 'border-green-100 bg-green-50/30' : 'border-gray-100 shadow-sm hover:shadow-md'
+                              }`}
+                            >
                               <div className="flex justify-between items-start">
                                 <div>
                                   {isStartPoint && (
@@ -332,7 +399,13 @@ export const ItineraryTimeline = ({
                                   {isEndPoint && (
                                     <span className="inline-block px-2 py-0.5 bg-red-100 text-red-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span>
                                   )}
-                                  <h3 className={`font-semibold text-lg ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`}>
+                                  <h3 
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      onNavigate?.(location);
+                                    }}
+                                    className={`font-semibold text-lg cursor-pointer hover:text-blue-600 transition-colors select-none ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`}
+                                  >
                                     {location.name}
                                   </h3>
                                   <div className="flex items-center text-sm text-gray-500 mt-1">
@@ -369,33 +442,60 @@ export const ItineraryTimeline = ({
                                    )}
                                 </div>
                                 
-                                <div className="text-right flex flex-col items-end">
-                                  <button
-                                    onClick={() => {
-                                      setCommentLocationId(location.id);
-                                      setCommentLocationName(location.name);
-                                      setIsCommentModalOpen(true);
-                                    }}
-                                    className="flex items-center gap-1 px-2 py-1 bg-gray-50 hover:bg-blue-50 text-gray-400 hover:text-blue-600 rounded-lg text-[10px] font-bold transition-all border border-gray-100 hover:border-blue-100 mb-2"
-                                  >
-                                    <MessageSquare className="w-3 h-3" />
-                                    BÌNH LUẬN {location._count?.comments > 0 && `(${location._count.comments})`}
-                                  </button>
+                                <div className="text-right flex flex-col items-end" onClick={(e) => e.stopPropagation()}>
+                                  <div className="flex gap-1 mb-2">
+                                    {onQuickNote && !isPublicView && (
+                                      <button
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          onQuickNote(location.name);
+                                        }}
+                                        className="flex items-center gap-1 px-2 py-1 bg-amber-50 hover:bg-amber-100 text-amber-600 rounded-lg text-[10px] font-bold transition-all border border-amber-100"
+                                        title="Ghi chú nhanh"
+                                      >
+                                        <FileText className="w-3 h-3" />
+                                      </button>
+                                    )}
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setCommentLocationId(location.id);
+                                        setCommentLocationName(location.name);
+                                        setIsCommentModalOpen(true);
+                                      }}
+                                      className="flex items-center gap-1 px-2 py-1 bg-gray-50 hover:bg-blue-50 text-gray-400 hover:text-blue-600 rounded-lg text-[10px] font-bold transition-all border border-gray-100 hover:border-blue-100"
+                                    >
+                                      <MessageSquare className="w-3 h-3" />
+                                      {location._count?.comments > 0 && `(${location._count.comments})`}
+                                    </button>
+                                  </div>
                                   <div className="flex items-center text-sm font-black text-blue-600">
                                     <Clock className="w-3 h-3 mr-1" />
-                                    {location.plannedStart ? format(parseISO(location.plannedStart), 'HH:mm') : '--:--'}
+                                    {hasValidPlannedTime ? format(parseISO(plannedTimeStr), 'HH:mm') : '--:--'}
                                   </div>
                                   {location.status === 'COMPLETED' && location.actualStart && (
                                     <div className="text-[10px] text-gray-400 mt-1 italic">
                                       Thực tế: {format(parseISO(location.actualStart), 'HH:mm')}
                                     </div>
                                   )}
-                                  {canEdit && !isStartPoint && !isEndPoint && ( // Only show edit/delete if canEdit
+                                  {canEdit && ( // Allow editing and deleting of all locations if user has edit permissions
                                     <div className="flex gap-1 mt-2">
-                                      <button onClick={() => onEditLocation?.(location)} className="p-1 text-gray-400 hover:text-blue-600 transition-colors">
+                                      <button 
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          onEditLocation?.(location);
+                                        }}
+                                        className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
+                                      >
                                         <Edit2 className="w-3.5 h-3.5" />
                                       </button>
-                                      <button onClick={() => handleDeleteLocation(location.id)} className="p-1 text-gray-400 hover:text-red-600 transition-colors">
+                                      <button 
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          handleDeleteLocation(location.id);
+                                        }}
+                                        className="p-1 text-gray-400 hover:text-red-600 transition-colors"
+                                      >
                                         <Trash2 className="w-3.5 h-3.5" />
                                       </button>
                                     </div>
@@ -404,22 +504,17 @@ export const ItineraryTimeline = ({
                               </div>
 
                               {/* Logic tính toán độ lệch thời gian */}
-                              <TimeVariance planned={location.plannedStart || ''} actual={location.actualStart || null} />
+                              <TimeVariance planned={hasValidPlannedTime ? plannedTimeStr : ''} actual={location.actualStart || null} />
                             </div>
                           </div>
 
-                          {distanceToNext !== null && travelTimeMinutes !== null && (
-                            <div className="ml-4 -mt-4 mb-2 flex items-center gap-3">
-                              <div className="w-8 flex justify-center">
-                                <Navigation className="w-3 h-3 text-blue-400 rotate-180" />
-                              </div>
-                              <div className="flex items-center gap-2">
-                                <span className="text-[10px] font-bold text-blue-500 bg-blue-50 px-2 py-0.5 rounded-full border border-blue-100">
-                                  {distanceToNext.toFixed(2)} km
-                                </span>
-                                <span className="text-[10px] font-bold text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100 flex items-center gap-1">
-                                  <Clock className="w-2.5 h-2.5" />
-                                  ~ {formatTravelTime(travelTimeMinutes)}
+                          {/* Hiển thị quãng đường di chuyển từ điểm trước ĐẾN điểm hiện tại */}
+                          {distanceFromPrev !== null && distanceFromPrev > 0 && (
+                            <div className="ml-14 -mt-4 mb-6 flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-500">
+                              <div className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-600 rounded-xl border border-blue-100 shadow-sm">
+                                <Navigation className="w-3 h-3 rotate-45" />
+                                <span className="text-[10px] font-black uppercase tracking-tighter">
+                                  +{distanceFromPrev.toFixed(1)} km từ {prevLocation?.name.split(',')[0]}
                                 </span>
                               </div>
                             </div>

frontend/src/components/JoinTourLoginModal.tsx

@@ -0,0 +1,330 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Mail, Lock, ArrowRight, Loader2, LogIn } from 'lucide-react';
+import { useNotification } from '@/hooks/useNotification';
+
+interface JoinTourLoginModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  inviteToken: string;
+  onJoinSuccess?: (user: any, tourData: any) => void;
+  onSwitchToSignup?: () => void;
+}
+
+export const JoinTourLoginModal: React.FC<JoinTourLoginModalProps> = ({ 
+  isOpen, 
+  onClose, 
+  inviteToken,
+  onJoinSuccess,
+  onSwitchToSignup
+}) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const notify = useNotification();
+  
+  // Ref to store the latest inviteToken to avoid stale closure issue
+  const inviteTokenRef = useRef(inviteToken);
+  useEffect(() => {
+    inviteTokenRef.current = inviteToken;
+  }, [inviteToken]);
+
+  const handleGoogleLogin = async (googleResponse: any) => {
+    setError('');
+    setIsLoading(true);
+    try {
+      const response = await fetch(`/api/v1/auth/google`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ credential: googleResponse.credential }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.message || 'Đăng nhập Google thất bại');
+      }
+
+      localStorage.setItem('token', data.access_token);
+      localStorage.setItem('user', JSON.stringify(data.user));
+      
+      // Use the latest inviteToken from ref
+      let currentToken = inviteTokenRef.current;
+      console.log('[JoinTourLogin] Attempting to join with token:', currentToken?.substring(0, 10) + '...');
+      
+      // Also check pendingInviteToken as fallback
+      let pendingToken = localStorage.getItem('pendingInviteToken');
+      
+      // If no token found, try to get from URL
+      if (!currentToken && !pendingToken) {
+        const params = new URLSearchParams(window.location.search);
+        const urlToken = params.get('token');
+        if (urlToken) {
+          currentToken = urlToken;
+          localStorage.setItem('pendingInviteToken', urlToken);
+          console.log('[JoinTourLogin] Using token from URL params:', urlToken.substring(0, 10) + '...');
+        }
+      }
+      
+      const tokenToUse = currentToken || pendingToken;
+      
+      if (!tokenToUse) {
+        console.error('[JoinTourLogin] No invite token available');
+        throw new Error('Không có mã lời mời để tham gia tour');
+      }
+
+      try {
+        const joinRes = await fetch(`/api/v1/tours/join-by-token`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${data.access_token}`,
+          },
+          body: JSON.stringify({ token: tokenToUse }),
+        });
+        
+        console.log('[JoinTourLogin] Join response status:', joinRes.status);
+        const joinData = await joinRes.json().catch(() => ({}));
+        
+        if (joinRes.ok) {
+          console.log('[JoinTourLogin] Join successful');
+          notify({
+            title: 'Thành công',
+            message: joinData.message || 'Bạn đã gia nhập tour!',
+            type: 'success'
+          });
+          localStorage.removeItem('pendingInviteToken');
+          if (onJoinSuccess) {
+            onJoinSuccess(data.user, joinData);
+          }
+          onClose();
+        } else {
+          // Token invalid or expired - clear it and show error
+          console.log('[JoinTourLogin] Token invalid, clearing from storage');
+          localStorage.removeItem('pendingInviteToken');
+          // Email mismatch or other error
+          const errorMessage = joinData.message || `Không thể gia nhập tour (HTTP ${joinRes.status})`;
+          console.error('[JoinTourLogin] Join failed:', errorMessage);
+          setError(`Lỗi gia nhập tour: ${errorMessage}`);
+          setIsLoading(false);
+        }
+      } catch (e: any) {
+        console.error('[JoinTourLogin] Join exception:', e);
+        setError(`Lỗi khi gia nhập: ${e.message}`);
+        setIsLoading(false);
+      }
+    } catch (err: any) {
+      console.error('[JoinTourLogin] Google login error:', err);
+      setError(err.message);
+      setIsLoading(false);
+    }
+  };
+
+  const handleEmailPasswordJoin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    try {
+      const response = await fetch(`/api/v1/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.message || 'Đăng nhập thất bại');
+      }
+
+      localStorage.setItem('token', data.access_token);
+      localStorage.setItem('user', JSON.stringify(data.user));
+      
+      // Use the latest inviteToken from ref
+      const tokenToUse = inviteTokenRef.current || localStorage.getItem('pendingInviteToken');
+      
+      try {
+        const joinRes = await fetch(`/api/v1/tours/join-by-token`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${data.access_token}`,
+          },
+          body: JSON.stringify({ token: tokenToUse }),
+        });
+
+        const joinData = await joinRes.json().catch(() => ({}));
+        
+        if (joinRes.ok) {
+          notify({
+            title: 'Thành công',
+            message: joinData.message || 'Bạn đã gia nhập tour!',
+            type: 'success'
+          });
+          localStorage.removeItem('pendingInviteToken');
+          if (onJoinSuccess) {
+            onJoinSuccess(data.user, joinData);
+          }
+          onClose();
+        } else {
+          const errorMessage = joinData.message || 'Không thể gia nhập tour';
+          setError(`Lỗi gia nhập tour: ${errorMessage}`);
+          setIsLoading(false);
+        }
+      } catch (e: any) {
+        setError(`Lỗi khi gia nhập: ${e.message}`);
+        setIsLoading(false);
+      }
+    } catch (err: any) {
+      console.error('[JoinTourLogin] Login error:', err);
+      setError(err.message);
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const timer = setTimeout(() => {
+      if (typeof window !== 'undefined' && (window as any).google) {
+        try {
+          (window as any).google.accounts.id.initialize({
+            client_id: (import.meta as any).env.VITE_GOOGLE_CLIENT_ID || '864264639911-dummyid.apps.googleusercontent.com',
+            callback: handleGoogleLogin,
+          });
+          
+          (window as any).google.accounts.id.renderButton(
+            document.getElementById('google-signin-btn-join-tour'),
+            { theme: 'outline', size: 'large', width: '380' }
+          );
+        } catch (e) {
+          console.error('Lỗi khởi tạo Google Sign-in:', e);
+        }
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[3000] flex items-center justify-center p-4 bg-black/50">
+      <div className="w-full max-w-md bg-white rounded-[32px] shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
+        {/* Header */}
+        <div className="relative h-32 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 overflow-hidden">
+          <div className="absolute inset-0 opacity-10">
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_50%,rgba(255,255,255,.3)_0%,transparent_50%)]" />
+          </div>
+          <button
+            onClick={onClose}
+            className="absolute top-4 right-4 z-10 p-2 hover:bg-white/20 rounded-full transition-colors"
+          >
+            <X className="w-5 h-5 text-white" />
+          </button>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <LogIn className="w-12 h-12 text-white opacity-80" />
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-8">
+          <h2 className="text-3xl font-bold text-gray-900 mb-2 text-center">
+            Gia nhập tour
+          </h2>
+          <p className="text-center text-gray-600 mb-6">
+            Đăng nhập để tham gia chuyến du lịch này
+          </p>
+
+          {error && (
+            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+              {error}
+            </div>
+          )}
+
+          {/* Google OAuth Button */}
+          <div className="mb-6 flex justify-center">
+            <div id="google-signin-btn-join-tour" className="w-full" />
+          </div>
+
+          <div className="relative mb-6">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-200" />
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-2 bg-white text-gray-500">Hoặc</span>
+            </div>
+          </div>
+
+          {/* Email/Password Form */}
+          <form onSubmit={handleEmailPasswordJoin} className="space-y-4">
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-2">
+                Email
+              </label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="your@email.com"
+                  required
+                  className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-2">
+                Mật khẩu
+              </label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Nhập mật khẩu"
+                  required
+                  className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+                />
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold py-3 rounded-lg hover:shadow-lg transition-all disabled:opacity-50 flex items-center justify-center gap-2"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                  Đang gia nhập...
+                </>
+              ) : (
+                <>
+                  <ArrowRight className="w-5 h-5" />
+                  Gia nhập tour
+                </>
+              )}
+            </button>
+          </form>
+
+          {/* Signup Link */}
+          <div className="mt-6 text-center text-sm text-gray-600">
+            Chưa có tài khoản?{' '}
+            <button
+              onClick={() => {
+                onClose();
+                if (onSwitchToSignup) onSwitchToSignup();
+              }}
+              className="font-semibold text-blue-500 hover:text-blue-600 transition"
+            >
+              Đăng ký tại đây
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/LoginModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { X, Mail, Lock, ArrowRight, Loader2 } from 'lucide-react';
 
 interface LoginModalProps {
@@ -14,6 +14,117 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
+  const handleGoogleLogin = async (googleResponse: any) => {
+    setError('');
+    setIsLoading(true);
+    try {
+      const response = await fetch(`/api/v1/auth/google`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ credential: googleResponse.credential }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.message || 'Đăng nhập Google thất bại');
+      }
+
+      localStorage.setItem('token', data.access_token);
+      localStorage.setItem('user', JSON.stringify(data.user));
+      // Remove guest tokens to ensure clean real user session
+      localStorage.removeItem('guest_token');
+      localStorage.removeItem('guest_user');
+      console.log('[OAuth] Google login successful');
+
+      // Check if there's a pending invite token to join tour
+      // Try localStorage first, then fallback to URL parameter
+      let pendingInviteToken = localStorage.getItem('pendingInviteToken');
+      console.log('[OAuth] pendingInviteToken from localStorage:', pendingInviteToken ? pendingInviteToken.substring(0, 20) + '...' : 'none');
+      
+      // If no token in localStorage, try to get from URL (in case of race condition)
+      if (!pendingInviteToken) {
+        const params = new URLSearchParams(window.location.search);
+        const urlToken = params.get('token');
+        if (urlToken) {
+          pendingInviteToken = urlToken;
+          localStorage.setItem('pendingInviteToken', urlToken);
+          console.log('[OAuth] Using token from URL params:', urlToken.substring(0, 20) + '...');
+        }
+      }
+      
+      if (pendingInviteToken) {
+        try {
+          const joinRes = await fetch(`/api/v1/tours/join-by-token`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${data.access_token}`,
+            },
+            body: JSON.stringify({ token: pendingInviteToken }),
+          });
+          const joinData = await joinRes.json().catch(() => ({}));
+          if (joinRes.ok) {
+            localStorage.removeItem('pendingInviteToken');
+            if (onLoginSuccess) {
+              onLoginSuccess(data.user);
+            }
+            onClose();
+          } else {
+            // If invitation is invalid/expired, clear it and redirect to dashboard
+            console.log('[OAuth] Token invalid or expired, clearing and redirecting to dashboard');
+            localStorage.removeItem('pendingInviteToken');
+            if (onLoginSuccess) {
+              onLoginSuccess(data.user);
+            }
+            onClose();
+          }
+        } catch (joinErr: any) {
+          console.error('[OAuth] Join tour after login failed:', joinErr);
+          localStorage.removeItem('pendingInviteToken');
+          // Still redirect to dashboard on error
+          if (onLoginSuccess) {
+            onLoginSuccess(data.user);
+          }
+          onClose();
+        }
+      } else {
+        // Regular login - no auto-join for tour
+        if (onLoginSuccess) {
+          onLoginSuccess(data.user);
+        }
+        onClose();
+      }
+    } catch (err: any) {
+      console.error('[OAuth] Login error:', err);
+      setError(err.message);
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const timer = setTimeout(() => {
+      if (typeof window !== 'undefined' && (window as any).google) {
+        try {
+          (window as any).google.accounts.id.initialize({
+            client_id: (import.meta as any).env.VITE_GOOGLE_CLIENT_ID || '864264639911-dummyid.apps.googleusercontent.com',
+            callback: handleGoogleLogin,
+          });
+          
+          (window as any).google.accounts.id.renderButton(
+            document.getElementById('google-signin-btn-login'),
+            { theme: 'outline', size: 'large', width: '380' }
+          );
+        } catch (e) {
+          console.error('Lỗi khởi tạo Google Sign-in:', e);
+        }
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [isOpen]);
+
   if (!isOpen) return null;
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -36,7 +147,11 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
       // Lưu phiên đăng nhập
       localStorage.setItem('token', data.access_token);
       localStorage.setItem('user', JSON.stringify(data.user));
-      
+      localStorage.removeItem('guest_token');
+      localStorage.removeItem('guest_user');
+      console.log('[LoginModal] Email/password login successful');
+
+      // Regular login - no auto-join for tour
       if (onLoginSuccess) {
         onLoginSuccess(data.user);
       }
@@ -57,7 +172,7 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
       />
       
       {/* Modal Content */}
-      <div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300">
+      <div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden max-h-[90vh] overflow-y-auto animate-in zoom-in-95 duration-300">
         <div className="p-8 sm:p-10">
           <div className="flex justify-between items-start mb-8">
             <div>
@@ -80,12 +195,12 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
 
           <form className="space-y-6" onSubmit={handleSubmit}>
             <div className="space-y-2">
-              <label className="text-sm font-semibold text-gray-700 ml-1">Email</label>
+              <label className="text-sm font-semibold text-gray-700 ml-1">Tài khoản hoặc Email</label>
               <div className="relative group">
                 <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-blue-500 transition-colors" />
                 <input 
-                  type="email" 
-                  placeholder="name@example.com"
+                  type="text" 
+                  placeholder="admin hoặc email..."
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   required
@@ -122,6 +237,15 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
             </button>
           </form>
 
+          <div className="relative my-6 flex items-center justify-center">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-200"></div>
+            </div>
+            <span className="relative px-3 bg-white text-xs font-bold text-gray-400 uppercase">Hoặc</span>
+          </div>
+
+          <div id="google-signin-btn-login" className="w-full flex justify-center"></div>
+
           <div className="mt-10 pt-8 border-t border-gray-100 text-center">
             <p className="text-gray-500">
               Chưa có tài khoản?{' '}

frontend/src/components/MembersTab.tsx

@@ -0,0 +1,510 @@
+import React, { useState, useMemo } from 'react';
+import { 
+  Users, User, Shield, ShieldAlert, ShieldCheck, Mail, Trash2, 
+  Clock, Check, X, GitMerge, ArrowRight, Search, Plus, Sparkles 
+} from 'lucide-react';
+import { useTourStore } from '@/store/useTourStore';
+import { useConfirm } from '@/hooks/useConfirm';
+import { useNotification } from '@/hooks/useNotification';
+
+interface MembersTabProps {
+  tourId: string;
+  participants: any[];
+  joinRequests: any[];
+  userRole: string | null;
+  canManage: boolean;
+  isOwner: boolean;
+  onRemoveMember: (memberIdOrUserId: string) => Promise<void>;
+  onRefresh: () => void;
+  onOpenAddMember?: () => void;
+}
+
+export const MembersTab: React.FC<MembersTabProps> = ({
+  tourId,
+  participants,
+  joinRequests: initialJoinRequests,
+  canManage,
+  isOwner,
+  onRemoveMember,
+  onRefresh,
+  onOpenAddMember
+}) => {
+  const confirm = useConfirm();
+  const notify = useNotification();
+  
+  const acceptJoinRequest = useTourStore(state => state.acceptJoinRequest);
+  const rejectJoinRequest = useTourStore(state => state.rejectJoinRequest);
+  
+  const [joinRequests, setJoinRequests] = useState<any[]>(initialJoinRequests);
+  const [mergingId, setMergingId] = useState<string | null>(null);
+  const [joinRequestActionId, setJoinRequestActionId] = useState<string | null>(null);
+  const [assigningManualMember, setAssigningManualMember] = useState<any | null>(null);
+  const [systemSearchQuery, setSystemSearchQuery] = useState('');
+
+  // Sync state with props
+  React.useEffect(() => {
+    setJoinRequests(initialJoinRequests);
+  }, [initialJoinRequests]);
+
+  // Separate system vs manual members
+  const systemMembers = useMemo(() => {
+    return participants.filter((p: any) => p.userId && p.user);
+  }, [participants]);
+
+  const manualMembers = useMemo(() => {
+    return participants.filter((p: any) => !p.userId && p.displayName);
+  }, [participants]);
+
+  // Auto-detect duplicate matches based on case-insensitive names
+  const duplicateMatches = useMemo(() => {
+    const matches: Array<{ manual: any; system: any }> = [];
+    manualMembers.forEach((m: any) => {
+      const match = systemMembers.find((s: any) => {
+        return s.user.name.trim().toLowerCase() === m.displayName.trim().toLowerCase();
+      });
+      if (match) {
+        matches.push({ manual: m, system: match });
+      }
+    });
+    return matches;
+  }, [systemMembers, manualMembers]);
+
+  // Filter system members for manual merge modal
+  const filteredSystemMembersForMerge = useMemo(() => {
+    if (!systemSearchQuery.trim()) return systemMembers;
+    return systemMembers.filter((s: any) => 
+      s.user.name.toLowerCase().includes(systemSearchQuery.toLowerCase()) ||
+      (s.user.email && s.user.email.toLowerCase().includes(systemSearchQuery.toLowerCase()))
+    );
+  }, [systemMembers, systemSearchQuery]);
+
+  // Handle merging logic
+  const handleMerge = async (manualParticipantId: string, systemUserId: string, manualName: string, systemName: string) => {
+    const isConfirmed = await confirm({
+      title: 'Hợp nhất thành viên',
+      message: `Bạn có chắc muốn hợp nhất thành viên thủ công "${manualName}" vào tài khoản "${systemName}"? Bản ghi thủ công sẽ bị xóa và các dữ liệu liên quan sẽ được gộp.`
+    });
+    if (!isConfirmed) return;
+
+    setMergingId(manualParticipantId);
+    try {
+      const res = await fetch(`/api/v1/tours/${tourId}/members/merge`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('token')}`
+        },
+        body: JSON.stringify({
+          manualParticipantId,
+          systemUserId
+        })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.message || 'Hợp nhất thất bại.');
+      }
+      notify({ title: 'Thành công', message: 'Hợp nhất thành viên thành công!', type: 'success' });
+      setAssigningManualMember(null);
+      onRefresh();
+    } catch (e: any) {
+      notify({ title: 'Lỗi', message: e.message || 'Không thể hợp nhất', type: 'error' });
+    } finally {
+      setMergingId(null);
+    }
+  };
+
+  const getRoleBadge = (role: string) => {
+    switch (role) {
+      case 'OWNER':
+        return (
+          <span className="flex items-center gap-1 px-2.5 py-1 rounded-full bg-red-50 text-red-700 border border-red-100 text-[10px] font-bold">
+            <ShieldAlert className="w-3 h-3 text-red-500" /> Trưởng đoàn
+          </span>
+        );
+      case 'MANAGER':
+        return (
+          <span className="flex items-center gap-1 px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 border border-blue-100 text-[10px] font-bold">
+            <ShieldCheck className="w-3 h-3 text-blue-500" /> Phó đoàn
+          </span>
+        );
+      case 'MEMBER':
+        return (
+          <span className="flex items-center gap-1 px-2.5 py-1 rounded-full bg-green-50 text-green-700 border border-green-100 text-[10px] font-bold">
+            <Shield className="w-3 h-3 text-green-500" /> Thành viên
+          </span>
+        );
+      case 'MEMBER_NO_FINANCE':
+        return (
+          <span className="flex items-center gap-1 px-2.5 py-1 rounded-full bg-gray-50 text-gray-600 border border-gray-100 text-[10px] font-bold">
+            <Shield className="w-3 h-3 text-gray-400" /> Thành viên (Không xem quỹ)
+          </span>
+        );
+      default:
+        return (
+          <span className="flex items-center gap-1 px-2.5 py-1 rounded-full bg-gray-100 text-gray-600 text-[10px] font-semibold">
+            {role}
+          </span>
+        );
+    }
+  };
+
+  // Get current user id to prevent self-deletion
+  const getCurrentUserId = () => {
+    const rawToken = localStorage.getItem('token');
+    if (!rawToken) return null;
+    try {
+      const payload = JSON.parse(atob(rawToken.split('.')[1]));
+      return payload.sub;
+    } catch {
+      return null;
+    }
+  };
+  const currentUserId = getCurrentUserId();
+
+  return (
+    <div className="space-y-6">
+      {/* Header and Actions */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white p-5 rounded-3xl border border-gray-100 shadow-sm animate-in fade-in duration-300">
+        <div>
+          <h2 className="text-xl font-bold text-gray-900 flex items-center gap-2">
+            <Users className="w-6 h-6 text-indigo-600" /> Quản lý thành viên
+          </h2>
+          <p className="text-xs text-gray-500 mt-1">
+            Quản lý thành viên hệ thống, thành viên thủ công và các yêu cầu tham gia chuyến đi.
+          </p>
+        </div>
+        {canManage && onOpenAddMember && (
+          <button
+            onClick={onOpenAddMember}
+            className="flex items-center gap-1.5 px-4 py-2.5 rounded-2xl bg-indigo-600 hover:bg-indigo-700 active:scale-95 text-white font-bold text-xs transition-all shadow-md shadow-indigo-100"
+          >
+            <Plus className="w-4 h-4" />
+            Thêm & Mời thành viên
+          </button>
+        )}
+      </div>
+
+      {/* Auto-detect duplicates alert */}
+      {duplicateMatches.length > 0 && (
+        <div className="p-5 bg-amber-50 rounded-3xl border border-amber-200/60 text-amber-900 space-y-3 shadow-sm animate-in slide-in-from-top-4 duration-300">
+          <div className="flex items-center gap-2">
+            <Sparkles className="w-5 h-5 text-amber-500 animate-pulse" />
+            <h4 className="font-bold text-sm">Phát hiện trùng lặp tự động</h4>
+          </div>
+          <p className="text-xs text-amber-700">
+            Hệ thống phát hiện có thành viên được tạo thủ công trùng tên với tài khoản hệ thống mới gia nhập. Bạn nên gộp họ lại để đồng bộ thông tin chặng đi và chi phí.
+          </p>
+          <div className="space-y-2 mt-2">
+            {duplicateMatches.map((match) => (
+              <div 
+                key={match.manual.id} 
+                className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-3 bg-white rounded-2xl border border-amber-200 shadow-sm text-xs"
+              >
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="font-bold text-gray-800">Thành viên thủ công: "{match.manual.displayName}"</span>
+                  <ArrowRight className="w-3.5 h-3.5 text-amber-500" />
+                  <span className="font-bold text-indigo-700">Tài khoản hệ thống: "{match.system.user.name}"</span>
+                </div>
+                <button
+                  disabled={mergingId === match.manual.id}
+                  onClick={() => handleMerge(match.manual.id, match.system.userId, match.manual.displayName, match.system.user.name)}
+                  className="px-3.5 py-1.5 bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white font-bold rounded-xl transition-all text-[11px] self-end sm:self-auto flex items-center gap-1"
+                >
+                  <GitMerge className="w-3.5 h-3.5" />
+                  {mergingId === match.manual.id ? 'Đang xử lý...' : 'Gán & Hợp nhất'}
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Pending requests */}
+      {joinRequests.length > 0 && (
+        <div className="p-5 bg-white rounded-3xl border border-gray-100 shadow-sm space-y-4 animate-in fade-in duration-300">
+          <div className="flex items-center gap-3">
+            <Clock className="w-5 h-5 text-indigo-500 animate-pulse" />
+            <h3 className="text-sm font-bold text-gray-900">Yêu cầu tham gia chờ duyệt</h3>
+            <span className="text-xs font-bold text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">{joinRequests.length}</span>
+          </div>
+          <div className="grid gap-3 sm:grid-cols-2">
+            {joinRequests.map((req: any) => (
+              <div key={req.id} className="flex items-center justify-between gap-3 p-3.5 rounded-2xl border border-gray-100 bg-gray-50/50">
+                <div className="flex items-center gap-3">
+                  <div className="w-9 h-9 rounded-full bg-indigo-50 border border-indigo-100 flex items-center justify-center text-indigo-700 font-bold text-sm">
+                    {req.user?.name?.charAt(0) || '?'}
+                  </div>
+                  <div>
+                    <div className="text-xs font-bold text-gray-800">{req.user?.name || req.userId}</div>
+                    <div className="text-[10px] text-gray-500 mt-0.5">
+                      {req.user?.email}
+                    </div>
+                  </div>
+                </div>
+                {isOwner && (
+                  <div className="flex gap-1.5 shrink-0">
+                    <button
+                      disabled={joinRequestActionId === req.id}
+                      onClick={async () => {
+                        const isConfirmed = await confirm({
+                          title: 'Chấp nhận yêu cầu',
+                          message: `Chấp nhận ${req.user?.name || req.userId} vào tour?`
+                        });
+                        if (!isConfirmed) return;
+                        setJoinRequestActionId(req.id);
+                        try {
+                          await acceptJoinRequest(tourId, req.id);
+                          setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                          onRefresh();
+                        } catch (e: any) {
+                          notify({ title: 'Lỗi', message: e.message || 'Không thể chấp nhận yêu cầu', type: 'error' });
+                        } finally {
+                          setJoinRequestActionId(null);
+                        }
+                      }}
+                      className="p-1.5 rounded-xl bg-green-50 hover:bg-green-100 text-green-700 transition-colors disabled:opacity-50"
+                      title="Chấp nhận"
+                    >
+                      <Check className="w-4 h-4" />
+                    </button>
+                    <button
+                      disabled={joinRequestActionId === req.id}
+                      onClick={async () => {
+                        const isConfirmed = await confirm({
+                          title: 'Từ chối yêu cầu',
+                          message: `Từ chối ${req.user?.name || req.userId} tham gia tour?`
+                        });
+                        if (!isConfirmed) return;
+                        setJoinRequestActionId(req.id);
+                        try {
+                          await rejectJoinRequest(tourId, req.id);
+                          setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                          onRefresh();
+                        } catch (e: any) {
+                          notify({ title: 'Lỗi', message: e.message || 'Không thể từ chối yêu cầu', type: 'error' });
+                        } finally {
+                          setJoinRequestActionId(null);
+                        }
+                      }}
+                      className="p-1.5 rounded-xl bg-red-50 hover:bg-red-100 text-red-700 transition-colors disabled:opacity-50"
+                      title="Từ chối"
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Main Members Grid */}
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* System Accounts */}
+        <div className="p-5 bg-white rounded-3xl border border-gray-100 shadow-sm space-y-4 flex flex-col">
+          <div className="flex justify-between items-center">
+            <h3 className="text-sm font-bold text-gray-900 flex items-center gap-2">
+              <span className="w-2 h-2 rounded-full bg-green-500"></span>
+              Thành viên hệ thống ({systemMembers.length})
+            </h3>
+          </div>
+          <div className="space-y-2.5 flex-1 max-h-[400px] overflow-y-auto pr-1">
+            {systemMembers.map((member: any) => {
+              const isCurrentUser = currentUserId && member.userId === currentUserId;
+              const isMemberOwner = member.role === 'OWNER';
+              const canRemove = canManage && !isCurrentUser && !isMemberOwner;
+              
+              return (
+                <div key={member.id} className="flex items-center justify-between p-3 bg-gray-50/50 rounded-2xl border border-gray-100/50 hover:border-gray-200 transition-all">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-full bg-indigo-50 border border-indigo-100 flex items-center justify-center text-indigo-700 font-bold text-sm">
+                      {member.user.name.charAt(0)}
+                    </div>
+                    <div>
+                      <div className="text-xs font-bold text-gray-800 flex items-center gap-1.5">
+                        {member.user.name}
+                        {isCurrentUser && <span className="text-[9px] bg-indigo-100 text-indigo-700 font-black px-1.5 py-0.5 rounded-md">Tôi</span>}
+                      </div>
+                      <div className="text-[10px] text-gray-500 flex items-center gap-1 mt-0.5">
+                        <Mail className="w-3 h-3 text-gray-400" />
+                        {member.user.email}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {getRoleBadge(member.role)}
+                    {canRemove && (
+                      <button
+                        onClick={async () => {
+                          const isConfirmed = await confirm({
+                            title: 'Xóa thành viên',
+                            message: `Bạn có chắc chắn muốn xóa thành viên "${member.user.name}" khỏi hành trình?`
+                          });
+                          if (isConfirmed) {
+                            try {
+                              await onRemoveMember(member.userId);
+                              notify({ title: 'Thành công', message: 'Đã xóa thành viên', type: 'success' });
+                            } catch (e: any) {
+                              notify({ title: 'Lỗi', message: e.message || 'Không thể xóa thành viên', type: 'error' });
+                            }
+                          }
+                        }}
+                        className="p-1.5 hover:bg-red-50 text-gray-400 hover:text-red-600 rounded-xl transition-all"
+                        title="Xóa thành viên"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Manual Members */}
+        <div className="p-5 bg-white rounded-3xl border border-gray-100 shadow-sm space-y-4 flex flex-col">
+          <div className="flex justify-between items-center">
+            <h3 className="text-sm font-bold text-gray-900 flex items-center gap-2">
+              <span className="w-2 h-2 rounded-full bg-amber-500"></span>
+              Thành viên thủ công ({manualMembers.length})
+            </h3>
+          </div>
+          <div className="space-y-2.5 flex-1 max-h-[400px] overflow-y-auto pr-1">
+            {manualMembers.map((member: any) => {
+              const canRemove = canManage;
+              return (
+                <div key={member.id} className="flex items-center justify-between p-3 bg-gray-50/50 rounded-2xl border border-gray-100/50 hover:border-gray-200 transition-all">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-full bg-amber-50 border border-amber-100 flex items-center justify-center text-amber-700 font-bold text-sm">
+                      {member.displayName.charAt(0)}
+                    </div>
+                    <div>
+                      <div className="text-xs font-bold text-gray-800">
+                        {member.displayName}
+                      </div>
+                      <div className="text-[10px] text-gray-400 mt-0.5">
+                        Tạo ngoài hệ thống
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {getRoleBadge(member.role)}
+                    {canManage && (
+                      <button
+                        onClick={() => setAssigningManualMember(member)}
+                        className="flex items-center gap-1 px-2.5 py-1 rounded-xl bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-[10px] font-bold transition-all border border-indigo-100"
+                        title="Hợp nhất với tài khoản hệ thống"
+                      >
+                        <GitMerge className="w-3 h-3" />
+                        Gán tài khoản
+                      </button>
+                    )}
+                    {canRemove && (
+                      <button
+                        onClick={async () => {
+                          const isConfirmed = await confirm({
+                            title: 'Xóa thành viên',
+                            message: `Bạn có chắc chắn muốn xóa thành viên thủ công "${member.displayName}"?`
+                          });
+                          if (isConfirmed) {
+                            try {
+                              await onRemoveMember(member.id);
+                              notify({ title: 'Thành công', message: 'Đã xóa thành viên', type: 'success' });
+                            } catch (e: any) {
+                              notify({ title: 'Lỗi', message: e.message || 'Không thể xóa thành viên', type: 'error' });
+                            }
+                          }
+                        }}
+                        className="p-1.5 hover:bg-red-50 text-gray-400 hover:text-red-600 rounded-xl transition-all"
+                        title="Xóa thành viên"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+            {manualMembers.length === 0 && (
+              <div className="h-full flex flex-col items-center justify-center text-center py-10 text-gray-400">
+                <User className="w-8 h-8 opacity-40 mb-2" />
+                <span className="text-xs">Chưa có thành viên thủ công nào</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Manual Merge Modal Selector */}
+      {assigningManualMember && (
+        <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={() => setAssigningManualMember(null)} />
+          <div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh] animate-in zoom-in-95 duration-200">
+            <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+              <div>
+                <h3 className="text-md font-bold text-gray-900 flex items-center gap-2">
+                  <GitMerge className="w-5 h-5 text-indigo-600" /> Gán tài khoản hệ thống
+                </h3>
+                <p className="text-xs text-gray-500 mt-1">
+                  Chọn một tài khoản hệ thống để gán cho thành viên thủ công <strong>"{assigningManualMember.displayName}"</strong>.
+                </p>
+              </div>
+              <button 
+                onClick={() => setAssigningManualMember(null)} 
+                className="p-1.5 hover:bg-gray-100 rounded-full transition-colors"
+              >
+                <X className="w-5 h-5 text-gray-400" />
+              </button>
+            </div>
+
+            {/* Search Bar */}
+            <div className="p-4 border-b border-gray-100">
+              <div className="relative">
+                <Search className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                <input
+                  type="text"
+                  placeholder="Tìm tài khoản hệ thống theo tên hoặc email..."
+                  value={systemSearchQuery}
+                  onChange={(e) => setSystemSearchQuery(e.target.value)}
+                  className="w-full pl-9 pr-4 py-2 border border-gray-200 rounded-xl text-xs outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100 transition-all"
+                />
+              </div>
+            </div>
+
+            {/* System accounts list */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-2">
+              {filteredSystemMembersForMerge.map((systemMember: any) => (
+                <button
+                  key={systemMember.id}
+                  disabled={mergingId === assigningManualMember.id}
+                  onClick={() => handleMerge(assigningManualMember.id, systemMember.userId, assigningManualMember.displayName, systemMember.user.name)}
+                  className="w-full flex items-center justify-between p-3 hover:bg-indigo-50/50 active:bg-indigo-50 border border-gray-100 hover:border-indigo-100 rounded-2xl text-left transition-all"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-9 h-9 rounded-full bg-indigo-50 border border-indigo-100 flex items-center justify-center text-indigo-700 font-bold text-xs shrink-0">
+                      {systemMember.user.name.charAt(0)}
+                    </div>
+                    <div className="min-w-0">
+                      <div className="text-xs font-bold text-gray-800 truncate">{systemMember.user.name}</div>
+                      <div className="text-[10px] text-gray-500 truncate mt-0.5">{systemMember.user.email}</div>
+                    </div>
+                  </div>
+                  <div className="shrink-0">
+                    <ArrowRight className="w-4 h-4 text-gray-400" />
+                  </div>
+                </button>
+              ))}
+              {filteredSystemMembersForMerge.length === 0 && (
+                <div className="py-10 text-center text-gray-400 text-xs">
+                  Không tìm thấy tài khoản hệ thống phù hợp.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/components/NotificationModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { X, CheckCircle, AlertCircle, Info } from 'lucide-react';
+import { CheckCircle, AlertCircle, Info } from 'lucide-react';
 
 interface NotificationModalProps {
   isOpen: boolean;

frontend/src/components/PublicPhotoModal.tsx

@@ -0,0 +1,834 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Send, MessageSquare, User, Loader2, Calendar, MapPin, Download, Edit, Heart, Trash2 } from 'lucide-react';
+import { io } from 'socket.io-client';
+import { CoordinateSelectModal } from './CoordinateSelectModal';
+import { useTranslation } from '../hooks/useTranslation';
+
+interface Comment {
+  id: string;
+  userName: string;
+  content: string;
+  createdAt: string;
+  userId: string;
+}
+
+interface PublicPhotoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  photo: {
+    id: string;
+    imageUrl: string;
+    originalUrl?: string;
+    capturedAt: string;
+    metadata?: {
+      lat?: number;
+      lng?: number;
+      title?: string;
+      description?: string;
+    };
+    uploader?: {
+      id: string;
+      name: string;
+    };
+    uploaderId?: string;
+  };
+  photoGroup?: any[];
+  onSelectPhoto?: (photo: any) => void;
+  onLoginSuccess?: (user: any) => void;
+  onUpdatePhoto?: (updatedPhoto: any) => void;
+}
+
+export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
+  isOpen,
+  onClose,
+  photo,
+  photoGroup = [],
+  onSelectPhoto,
+  onLoginSuccess,
+  onUpdatePhoto
+}) => {
+  const { t } = useTranslation();
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [newComment, setNewComment] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+  const commentsEndRef = useRef<HTMLDivElement>(null);
+
+  const [currentUser, setCurrentUser] = useState<any>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState('');
+  const [editDescription, setEditDescription] = useState('');
+  const [editLat, setEditLat] = useState<number | ''>('');
+  const [editLng, setEditLng] = useState<number | ''>('');
+  const [isSavingEdit, setIsSavingEdit] = useState(false);
+  const [isMapOpen, setIsMapOpen] = useState(false);
+  const [resolvedAddress, setResolvedAddress] = useState<string>('');
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const isLoggedIn = !!localStorage.getItem('token') && !localStorage.getItem('guest_token');
+
+  useEffect(() => {
+    const lat = photo?.metadata?.lat;
+    const lng = photo?.metadata?.lng;
+    if (typeof lat === 'number' && typeof lng === 'number') {
+      setResolvedAddress('Đang xác định địa điểm...');
+      fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&accept-language=vi`)
+        .then(res => {
+          if (!res.ok) throw new Error();
+          return res.json();
+        })
+        .then(data => {
+          if (data && data.display_name) {
+            const shortAddress = data.display_name.split(',').slice(0, 3).join(',').trim();
+            setResolvedAddress(shortAddress || data.display_name);
+          } else {
+            setResolvedAddress(`${lat.toFixed(4)}, ${lng.toFixed(4)}`);
+          }
+        })
+        .catch(() => {
+          setResolvedAddress(`${lat.toFixed(4)}, ${lng.toFixed(4)}`);
+        });
+    } else {
+      setResolvedAddress('Chưa xác định tọa độ');
+    }
+  }, [photo?.id, photo?.metadata?.lat, photo?.metadata?.lng]);
+
+  const checkCurrentUser = () => {
+    const userStr = localStorage.getItem('user') || localStorage.getItem('guest_user');
+    if (userStr) {
+      try {
+        setCurrentUser(JSON.parse(userStr));
+      } catch (e) {}
+    } else {
+      setCurrentUser(null);
+    }
+  };
+
+  useEffect(() => {
+    checkCurrentUser();
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (photo) {
+      setEditTitle(photo.metadata?.title || '');
+      setEditDescription(photo.metadata?.description || '');
+      setEditLat(photo.metadata?.lat ?? '');
+      setEditLng(photo.metadata?.lng ?? '');
+      setIsEditing(false); // Reset editing mode when selected photo changes
+    }
+  }, [photo]);
+
+  const handleSaveEdit = async () => {
+    if (editLat !== '' && (isNaN(editLat) || editLat < -90 || editLat > 90)) {
+      alert('Vĩ độ không hợp lệ (-90 đến 90)');
+      return;
+    }
+    if (editLng !== '' && (isNaN(editLng) || editLng < -180 || editLng > 180)) {
+      alert('Kinh độ không hợp lệ (-180 đến 180)');
+      return;
+    }
+
+    setIsSavingEdit(true);
+    try {
+      const token = localStorage.getItem('token') || localStorage.getItem('guest_token');
+      const res = await fetch(`/api/v1/photos/${photo.id}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify({
+          title: editTitle,
+          description: editDescription,
+          latitude: editLat === '' ? undefined : editLat,
+          longitude: editLng === '' ? undefined : editLng
+        })
+      });
+
+      if (res.ok) {
+        const updatedPhoto = await res.json();
+        setIsEditing(false);
+        if (onUpdatePhoto) {
+          onUpdatePhoto(updatedPhoto);
+        }
+      } else {
+        const err = await res.json();
+        alert(err.message || 'Lỗi khi cập nhật thông tin ảnh.');
+      }
+    } catch (error) {
+      console.error('Lỗi khi cập nhật thông tin ảnh:', error);
+      alert('Không thể kết nối đến máy chủ.');
+    } finally {
+      setIsSavingEdit(false);
+    }
+  };
+
+  const likedUserIds = photo.metadata && Array.isArray((photo.metadata as any).likedUserIds)
+    ? (photo.metadata as any).likedUserIds
+    : [];
+  const isLiked = currentUser && likedUserIds.includes(currentUser.id);
+  const likeCount = likedUserIds.length;
+
+  const handleToggleLike = async () => {
+    let token = localStorage.getItem('token') || localStorage.getItem('guest_token');
+    let userObj = currentUser;
+
+    if (!token) {
+      try {
+        const guestRes = await fetch('/api/v1/auth/create-guest', { method: 'POST' });
+        if (guestRes.ok) {
+          const guestData = await guestRes.json();
+          token = guestData.access_token;
+          userObj = guestData.user;
+          localStorage.setItem('token', token!);
+          localStorage.setItem('user', JSON.stringify(userObj));
+          if (onLoginSuccess) {
+            onLoginSuccess(userObj);
+          }
+          setCurrentUser(userObj);
+        } else {
+          return;
+        }
+      } catch (e) {
+        console.error('Không thể tạo phiên khách:', e);
+        return;
+      }
+    }
+
+    try {
+      const res = await fetch(`/api/v1/photos/${photo.id}/toggle-like`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (res.ok) {
+        const updatedPhoto = await res.json();
+        if (onUpdatePhoto) {
+          onUpdatePhoto(updatedPhoto);
+        }
+      }
+    } catch (error) {
+      console.error('Lỗi khi thích ảnh:', error);
+    }
+  };
+
+
+  const fetchComments = async () => {
+    setIsLoading(true);
+    try {
+      const res = await fetch(`/api/v1/public-photos/${photo.id}/comments`);
+      if (res.ok) {
+        const data = await res.json();
+        setComments(
+          data.map((c: any) => ({
+            id: c.id,
+            userName: c.user?.name || 'Ẩn danh',
+            content: c.content,
+            createdAt: c.createdAt,
+            userId: c.userId
+          }))
+        );
+      }
+    } catch (error) {
+      console.error('Lỗi khi tải bình luận:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen || !photo.id) return;
+
+    fetchComments();
+
+    const socket = io();
+    socket.emit('joinPhoto', photo.id);
+
+    socket.on('photoCommentAdded', (newCommentData: any) => {
+      if (newCommentData.photoId === photo.id) {
+        setComments(prev => {
+          if (prev.find(c => c.id === newCommentData.id)) return prev;
+          return [
+            ...prev,
+            {
+              id: newCommentData.id,
+              userName: newCommentData.user?.name || 'Ẩn danh',
+              content: newCommentData.content,
+              createdAt: newCommentData.createdAt,
+              userId: newCommentData.userId
+            }
+          ];
+        });
+      }
+    });
+
+    socket.on('photoCommentDeleted', (deleted: any) => {
+      if (deleted.photoId === photo.id) {
+        setComments(prev => prev.filter(c => c.id !== deleted.id));
+      }
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, [isOpen, photo.id]);
+
+  useEffect(() => {
+    commentsEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [comments]);
+
+  const handleSend = async () => {
+    if (!newComment.trim()) return;
+
+    setIsSending(true);
+    try {
+      let token = localStorage.getItem('token');
+      let currentUser = JSON.parse(localStorage.getItem('user') || 'null');
+
+      // Nếu chưa có token, tự động tạo tài khoản khách
+      if (!token) {
+        const guestRes = await fetch('/api/v1/auth/create-guest', { method: 'POST' });
+        if (!guestRes.ok) throw new Error('Không thể tạo tài khoản khách tự động.');
+        const guestData = await guestRes.json();
+        token = guestData.access_token;
+        currentUser = guestData.user;
+        localStorage.setItem('guest_token', token!);
+        localStorage.setItem('guest_user', JSON.stringify(currentUser));
+        localStorage.setItem('token', token!);
+        localStorage.setItem('user', JSON.stringify(currentUser));
+        
+        if (onLoginSuccess) {
+          onLoginSuccess(currentUser);
+        }
+      }
+
+      let res = await fetch(`/api/v1/public-photos/${photo.id}/comments`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify({ content: newComment })
+      });
+ 
+      if (res.status === 401) {
+        console.warn('Token invalid or expired. Creating a new guest user and retrying comment...');
+        localStorage.removeItem('guest_token');
+        localStorage.removeItem('guest_user');
+        localStorage.removeItem('token');
+        localStorage.removeItem('user');
+
+        const guestRes = await fetch('/api/v1/auth/create-guest', { method: 'POST' });
+        if (!guestRes.ok) throw new Error('Không thể tạo lại phiên khách.');
+        const guestData = await guestRes.json();
+        token = guestData.access_token;
+        currentUser = guestData.user;
+        localStorage.setItem('guest_token', token!);
+        localStorage.setItem('guest_user', JSON.stringify(currentUser));
+        localStorage.setItem('token', token!);
+        localStorage.setItem('user', JSON.stringify(currentUser));
+
+        if (onLoginSuccess) {
+          onLoginSuccess(currentUser);
+        }
+
+        res = await fetch(`/api/v1/public-photos/${photo.id}/comments`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${token}`
+          },
+          body: JSON.stringify({ content: newComment })
+        });
+      }
+
+      if (res.ok) {
+        setNewComment('');
+        fetchComments();
+      } else {
+        const err = await res.json();
+        console.error('Lỗi khi gửi bình luận:', err.message);
+      }
+    } catch (error) {
+      console.error('Lỗi khi gửi bình luận:', error);
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  const handleDeleteComment = async (commentId: string) => {
+    if (!confirm(t('confirmDeleteComment') || 'Bạn có chắc chắn muốn xóa bình luận này không?')) return;
+    try {
+      const token = localStorage.getItem('token') || localStorage.getItem('guest_token');
+      const res = await fetch(`/api/v1/public-photos/comments/${commentId}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+      if (res.ok) {
+        setComments(prev => prev.filter(c => c.id !== commentId));
+      } else {
+        const err = await res.json();
+        alert(err.message || 'Lỗi khi xóa bình luận.');
+      }
+    } catch (error) {
+      console.error('Lỗi khi xóa bình luận:', error);
+      alert('Không thể kết nối đến máy chủ.');
+    }
+  };
+
+  const isAuthorized = currentUser?.isAdmin || 
+    (currentUser && photo.uploader && currentUser.id === photo.uploader.id) ||
+    (currentUser && photo.uploaderId && currentUser.id === photo.uploaderId);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[5000] md:flex md:items-center md:justify-center md:p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-300"
+        onClick={(e) => {
+          e.stopPropagation();
+          onClose();
+        }}
+      />
+
+      {/* Container */}
+      <div 
+        className="fixed inset-0 overflow-y-auto flex flex-col bg-slate-900 text-slate-100 md:relative md:inset-auto md:overflow-hidden md:rounded-[32px] md:shadow-2xl md:border md:border-slate-800 md:w-full md:max-w-5xl md:h-[85vh] md:flex-row animate-in zoom-in-95 duration-300"
+        onClick={(e) => e.stopPropagation()}
+      >
+        
+        {/* Close Button Mobile/Desktop */}
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose();
+          }}
+          className="fixed md:absolute top-[calc(1rem+env(safe-area-inset-top,0px))] right-4 md:top-4 md:right-4 z-50 p-2 bg-slate-950/60 hover:bg-slate-800/80 border border-slate-700/50 rounded-full text-slate-300 hover:text-white transition-colors"
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        {/* Left Side: Photo Detail */}
+        <div className="relative w-full md:w-3/5 md:h-full bg-slate-950 flex flex-col overflow-hidden group shrink-0">
+          
+          {/* Photo wrapper for mobile view (handles top overlay name and bottom-right like) */}
+          <div className="relative w-full flex items-center justify-center md:absolute md:inset-0 md:flex md:items-center md:justify-center bg-slate-950">
+            {/* Mobile Only: Uploader details overlay */}
+            <div className="absolute top-[calc(0.75rem+env(safe-area-inset-top,0px))] left-4 z-40 md:hidden flex items-center gap-2 bg-slate-950/70 backdrop-blur-md px-2.5 py-1.5 rounded-full border border-slate-700/50">
+              <div className="w-5 h-5 rounded-full bg-emerald-500/20 flex items-center justify-center">
+                <User className="w-3 h-3 text-emerald-400" />
+              </div>
+              <span className="text-xs text-slate-200 max-w-[120px] truncate">
+                {photo.uploader?.name || 'Ẩn danh'}
+              </span>
+            </div>
+
+            {/* Like Button Overlay */}
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                handleToggleLike();
+              }}
+              className="absolute bottom-4 right-4 z-40 flex items-center gap-1.5 bg-slate-950/70 hover:bg-slate-900/80 border border-slate-700/50 text-slate-200 hover:text-white font-bold py-1.5 px-3 rounded-full transition-all active:scale-95 text-[11px] backdrop-blur-md md:absolute md:top-[calc(1rem+env(safe-area-inset-top,0px))] md:left-4 md:bottom-auto md:right-auto"
+              title={isLiked ? "Bỏ thích" : "Thích"}
+            >
+              <Heart className={`w-4 h-4 transition-colors ${
+                isLiked ? 'text-rose-500 fill-rose-500 animate-in zoom-in-75' : 'text-slate-350 hover:text-rose-450'
+              }`} />
+              <span>{likeCount}</span>
+            </button>
+
+            <a
+              href={`${window.location.origin}/api/v1/public-photos/${photo.id}/share`}
+              className="w-full h-auto max-h-[85vh] object-contain cursor-zoom-in md:h-full md:max-h-none flex items-center justify-center relative"
+              onClick={(e) => {
+                e.preventDefault();
+                setIsFullscreen(true);
+              }}
+            >
+              <img
+                src={photo.imageUrl}
+                alt="Public Map Upload"
+                onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+                onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+                className={`w-full h-auto max-h-[85vh] object-contain md:h-full md:max-h-none select-none ${
+                  !isLoggedIn ? 'pointer-events-none' : ''
+                }`}
+                draggable={false}
+              />
+              {/* Shield overlay to prevent Save Image As on right-click / long press for non-owners */}
+              {(!isAuthorized || !isLoggedIn) && (
+                <div className="absolute inset-0 bg-transparent select-none z-10" />
+              )}
+            </a>
+          </div>
+
+          {/* Info & Timeline overlay inside photo panel */}
+          <div className="relative z-20 p-6 bg-slate-900 border-b border-slate-800/60 md:absolute md:bottom-0 md:left-0 md:right-0 md:bg-gradient-to-t md:from-black/60 md:via-black/20 md:to-transparent md:border-b-0 flex flex-col gap-4">
+            
+            {/* Timeline scroll */}
+            {photoGroup && photoGroup.length > 1 && (
+              <div className="flex flex-col gap-2 border-b border-slate-800/80 pb-3 relative z-20">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
+                  <span className="inline-block w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping"></span>
+                  Lịch sử ảnh tại vị trí này ({photoGroup.length})
+                </span>
+                <div className="flex gap-3 overflow-x-auto no-scrollbar py-1 relative z-20">
+                  {photoGroup.map((p) => {
+                    const isActive = p.id === photo.id;
+                    return (
+                      <button
+                        key={p.id}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onSelectPhoto?.(p);
+                        }}
+                        className={`relative w-12 h-12 rounded-xl overflow-hidden border-2 transition-all active:scale-95 shrink-0 ${
+                          isActive ? 'border-emerald-500 scale-110 shadow-lg' : 'border-slate-700 hover:border-slate-500'
+                        }`}
+                      >
+                        <img 
+                          src={p.imageUrl} 
+                          alt="Timeline thumbnail" 
+                          onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+                          onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+                          className={`w-full h-full object-cover ${
+                            !isLoggedIn ? 'pointer-events-none' : ''
+                          }`} 
+                        />
+                        <div className="absolute bottom-0 inset-x-0 bg-slate-950/70 text-[8px] text-center font-bold text-slate-300 py-0.5">
+                          {new Date(p.capturedAt).toLocaleDateString('vi-VN', { month: '2-digit', day: '2-digit' })}
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            {isEditing ? (
+              <div className="flex flex-col gap-3 bg-slate-900/95 border border-slate-800 p-4 rounded-2xl animate-in slide-in-from-bottom-2">
+                <h4 className="text-xs font-black uppercase tracking-wider text-emerald-400">Chỉnh sửa thông tin ảnh</h4>
+                
+                <div className="space-y-2">
+                  <div>
+                    <label className="block text-[9px] uppercase font-bold tracking-wider text-slate-400 mb-1">Tiêu đề</label>
+                    <input
+                      type="text"
+                      value={editTitle}
+                      onChange={(e) => setEditTitle(e.target.value)}
+                      placeholder="Nhập tiêu đề cho ảnh..."
+                      className="w-full bg-slate-850 border border-slate-700/60 text-slate-100 rounded-xl px-3 py-2 text-base md:text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-[9px] uppercase font-bold tracking-wider text-slate-400 mb-1">Mô tả</label>
+                    <textarea
+                      value={editDescription}
+                      onChange={(e) => setEditDescription(e.target.value)}
+                      placeholder="Mô tả bức ảnh này..."
+                      rows={2}
+                      className="w-full bg-slate-850 border border-slate-700/60 text-slate-100 rounded-xl px-3 py-2 text-base md:text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500 resize-none"
+                    />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2">
+                    <div>
+                      <label className="block text-[9px] uppercase font-bold tracking-wider text-slate-400 mb-1">Vĩ độ</label>
+                      <input
+                        type="number"
+                        step="any"
+                        value={editLat}
+                        onChange={(e) => setEditLat(e.target.value === '' ? '' : parseFloat(e.target.value))}
+                        placeholder="Vĩ độ..."
+                        className="w-full bg-slate-850 border border-slate-700/60 text-slate-100 rounded-xl px-3 py-2 text-base md:text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-[9px] uppercase font-bold tracking-wider text-slate-400 mb-1">Kinh độ</label>
+                      <input
+                        type="number"
+                        step="any"
+                        value={editLng}
+                        onChange={(e) => setEditLng(e.target.value === '' ? '' : parseFloat(e.target.value))}
+                        placeholder="Kinh độ..."
+                        className="w-full bg-slate-850 border border-slate-700/60 text-slate-100 rounded-xl px-3 py-2 text-base md:text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="flex justify-start">
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setIsMapOpen(true);
+                      }}
+                      className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-800 hover:bg-slate-750 border border-slate-700/50 text-slate-300 hover:text-white rounded-xl text-[10px] font-bold transition-all"
+                    >
+                      <MapPin className="w-3.5 h-3.5 text-rose-500" />
+                      Chọn trên bản đồ
+                    </button>
+                  </div>
+                </div>
+
+                <div className="flex justify-end gap-2 mt-2">
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIsEditing(false);
+                    }}
+                    disabled={isSavingEdit}
+                    className="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-xs font-bold transition-all"
+                  >
+                    Hủy
+                  </button>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleSaveEdit();
+                    }}
+                    disabled={isSavingEdit}
+                    className="flex items-center gap-1 px-4 py-1.5 bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-800 disabled:opacity-50 text-white rounded-lg text-xs font-bold transition-all"
+                  >
+                    {isSavingEdit ? (
+                      <>
+                        <Loader2 className="w-3 h-3 animate-spin" />
+                        Đang lưu...
+                      </>
+                    ) : (
+                      'Lưu lại'
+                    )}
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <>
+                {/* Title & Description display */}
+                <div className="flex justify-between items-start gap-4">
+                  <div className="flex-1 min-w-0">
+                    {photo.metadata?.title ? (
+                      <h4 className="text-sm font-black text-white tracking-tight leading-snug break-words">
+                        {photo.metadata.title}
+                      </h4>
+                    ) : (
+                      <span className="text-[10px] text-slate-500 italic block mb-1">Chưa có tiêu đề</span>
+                    )}
+                    {photo.metadata?.description ? (
+                      <p className="text-xs text-slate-300 leading-relaxed mt-1 max-h-20 overflow-y-auto no-scrollbar break-words">
+                        {photo.metadata.description}
+                      </p>
+                    ) : (
+                      <span className="text-[10px] text-slate-500 italic block mt-1">Chưa có mô tả</span>
+                    )}
+                  </div>
+                  {isAuthorized && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setIsEditing(true);
+                      }}
+                      className="p-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700/50 rounded-xl text-slate-300 hover:text-white transition-all shrink-0"
+                      title="Chỉnh sửa thông tin"
+                    >
+                      <Edit className="w-3.5 h-3.5" />
+                    </button>
+                  )}
+                </div>
+
+                {/* Photo Metadata */}
+                <div className="flex flex-wrap items-center justify-between gap-4 border-t border-slate-800/80 pt-3 text-xs text-slate-350">
+                  <div className="space-y-1 text-left">
+                    <div className="flex items-center gap-1.5 text-slate-400">
+                      <Calendar className="w-3.5 h-3.5" />
+                      Ngày chụp: {new Date(photo.capturedAt).toLocaleDateString('vi-VN', {
+                        day: '2-digit',
+                        month: '2-digit',
+                        year: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit'
+                      })}
+                    </div>
+                    <div className="flex items-center gap-1.5 text-slate-400" title={photo.metadata?.lat && photo.metadata?.lng ? `${photo.metadata.lat.toFixed(6)}, ${photo.metadata.lng.toFixed(6)}` : ''}>
+                      <MapPin className="w-3.5 h-3.5 text-rose-500" />
+                      Địa điểm: {resolvedAddress}
+                    </div>
+                    <div className="hidden md:flex items-center gap-1.5 text-xs text-emerald-400">
+                      <User className="w-3.5 h-3.5" />
+                      Người đăng: {photo.uploader?.name || 'Ẩn danh'}
+                    </div>
+                  </div>
+                  {isAuthorized && photo.originalUrl && (
+                    <a
+                      href={photo.originalUrl}
+                      download
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1.5 bg-slate-800/80 hover:bg-slate-700/80 border border-slate-700/50 text-slate-200 hover:text-white font-bold py-1 px-3 rounded-full transition-all active:scale-95 text-[10px]"
+                    >
+                      <Download className="w-3.5 h-3.5 text-emerald-500" />
+                      Tải ảnh gốc
+                    </a>
+                  )}
+                </div>
+              </>
+            )}
+
+            <style>{`
+              .no-scrollbar::-webkit-scrollbar {
+                display: none;
+              }
+              .no-scrollbar {
+                -ms-overflow-style: none;
+                scrollbar-width: none;
+              }
+            `}</style>
+          </div>
+        </div>
+
+        {/* Right Side: Comments */}
+        <div className="w-full md:w-2/5 md:flex-1 md:min-h-0 flex flex-col bg-slate-900 border-t md:border-t-0 md:border-l border-slate-800">
+          
+          {/* Comments Header */}
+          <div className="hidden md:block p-6 border-b border-slate-800">
+            <div>
+              <h3 className="text-lg font-black tracking-tight text-white flex items-center gap-2">
+                <MessageSquare className="w-5 h-5 text-emerald-500" />
+                {t('commentSectionTitle')}
+              </h3>
+              <p className="text-xs text-slate-400 mt-1">Ảnh chia sẻ công khai trên bản đồ</p>
+            </div>
+          </div>
+
+          {/* Comments list scroll area */}
+          <div className="md:flex-1 md:overflow-y-auto p-6 space-y-4 bg-slate-900/50">
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center py-12 text-slate-500 gap-2">
+                <Loader2 className="w-8 h-8 animate-spin text-emerald-500" />
+                <span className="text-xs font-semibold">{t('loading')}</span>
+              </div>
+            ) : comments.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-16 text-slate-500 gap-3">
+                <div className="p-4 bg-slate-800/40 rounded-full text-slate-600">
+                  <MessageSquare className="w-8 h-8" />
+                </div>
+                <span className="text-sm font-semibold italic">Chưa có bình luận nào. Hãy bắt đầu cuộc trò chuyện!</span>
+              </div>
+            ) : (
+              comments.map((c) => {
+                return (
+                  <div key={c.id} className="flex gap-3 items-start animate-in fade-in slide-in-from-bottom-2 duration-200">
+                    <div className="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700/60">
+                      <User className="w-4.5 h-4.5 text-slate-400" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="bg-slate-800/55 p-3.5 rounded-2xl rounded-tl-none border border-slate-800 shadow-lg">
+                        <div className="flex justify-between items-center mb-1">
+                          <span className="text-xs font-black text-slate-200 truncate">{c.userName}</span>
+                          <div className="flex items-center gap-2">
+                            <span className="text-[9px] font-medium text-slate-500">
+                              {new Date(c.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                            </span>
+                            {(currentUser?.isAdmin || 
+                              currentUser?.id === c.userId || 
+                              currentUser?.id === photo.uploaderId || 
+                              currentUser?.id === photo.uploader?.id) && (
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleDeleteComment(c.id);
+                                }}
+                                className="text-slate-500 hover:text-rose-500 transition-colors p-0.5"
+                                title={t('delete') || "Xóa"}
+                              >
+                                <Trash2 className="w-3.5 h-3.5" />
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                        <p className="text-sm text-slate-300 leading-relaxed break-words">{c.content}</p>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })
+            )}
+
+            <div ref={commentsEndRef} />
+          </div>
+
+          {/* Comment Input Area */}
+          <div className="sticky bottom-0 md:static p-4 bg-slate-950 md:bg-slate-950/40 border-t border-slate-800/80 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] md:pb-4 z-40">
+            <div className="relative flex items-center gap-2">
+              <input
+                type="text"
+                value={newComment}
+                onChange={(e) => setNewComment(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && !isSending && handleSend()}
+                placeholder="Viết bình luận công khai..."
+                className="flex-1 bg-slate-800/65 border border-slate-700/70 text-slate-100 placeholder-slate-500 rounded-2xl px-4 py-3 text-base md:text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all"
+                disabled={isSending}
+              />
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleSend();
+                }}
+                disabled={!newComment.trim() || isSending}
+                className="p-3 bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-800 disabled:opacity-40 text-white rounded-2xl transition-all active:scale-95 shadow-lg shadow-emerald-950/30 flex items-center justify-center"
+              >
+                {isSending ? (
+                  <Loader2 className="w-4.5 h-4.5 animate-spin" />
+                ) : (
+                  <Send className="w-4.5 h-4.5" />
+                )}
+              </button>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+      <CoordinateSelectModal
+        isOpen={isMapOpen}
+        onClose={() => setIsMapOpen(false)}
+        initialLat={typeof editLat === 'number' ? editLat : undefined}
+        initialLng={typeof editLng === 'number' ? editLng : undefined}
+        onSelect={(lat, lng) => {
+          setEditLat(lat);
+          setEditLng(lng);
+        }}
+      />
+
+      {isFullscreen && (
+        <div
+          className="fixed inset-0 z-[9999] bg-black/95 flex items-center justify-center cursor-zoom-out animate-in fade-in duration-200"
+          onClick={() => setIsFullscreen(false)}
+        >
+          <button
+            onClick={() => setIsFullscreen(false)}
+            className="fixed top-6 right-6 p-3 bg-black/50 hover:bg-black/75 border border-white/10 rounded-full text-white transition-colors z-[10000]"
+          >
+            <X className="w-6 h-6" />
+          </button>
+          <img
+            src={photo.imageUrl}
+            alt="Fullscreen photo"
+            onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+            onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+            className={`max-w-full max-h-full object-contain select-none animate-in zoom-in-95 duration-200 ${
+              !isLoggedIn ? 'pointer-events-none' : ''
+            }`}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/components/ReportBusinessModal.tsx

@@ -0,0 +1,288 @@
+import React, { useState } from 'react';
+import { X, ShieldAlert, MapPin, Loader2, Phone, Mail, AlertTriangle } from 'lucide-react';
+import { useTranslation } from '../hooks/useTranslation';
+
+interface ReportBusinessModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialLatitude?: number;
+  initialLongitude?: number;
+}
+
+export const ReportBusinessModal: React.FC<ReportBusinessModalProps> = ({
+  isOpen,
+  onClose,
+  initialLatitude,
+  initialLongitude
+}) => {
+  const { t } = useTranslation();
+  const [type, setType] = useState('RESTAURANT');
+  const [name, setName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState('');
+  const [address, setAddress] = useState('');
+  const [latitude, setLatitude] = useState(initialLatitude ? String(initialLatitude) : '');
+  const [longitude, setLongitude] = useState(initialLongitude ? String(initialLongitude) : '');
+  const [reason, setReason] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setLatitude(initialLatitude ? String(initialLatitude) : '');
+      setLongitude(initialLongitude ? String(initialLongitude) : '');
+      setSuccess(false);
+      setError('');
+    }
+  }, [isOpen, initialLatitude, initialLongitude]);
+
+  if (!isOpen) return null;
+
+  const handleGetCurrentLocation = () => {
+    if (!navigator.geolocation) {
+      setError('Trình duyệt không hỗ trợ định vị GPS.');
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLatitude(String(position.coords.latitude.toFixed(6)));
+        setLongitude(String(position.coords.longitude.toFixed(6)));
+      },
+      () => {
+        setError('Không thể lấy vị trí hiện tại. Vui lòng bật định vị GPS.');
+      }
+    );
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    try {
+      const response = await fetch(`/api/v1/reports`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type,
+          name,
+          phone: phone || null,
+          email: email || null,
+          address: address || null,
+          latitude: latitude ? parseFloat(latitude) : null,
+          longitude: longitude ? parseFloat(longitude) : null,
+          reason,
+        }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.message || 'Gửi báo cáo thất bại.');
+      }
+
+      setSuccess(true);
+      setTimeout(() => {
+        onClose();
+        // Reset form
+        setName('');
+        setPhone('');
+        setEmail('');
+        setAddress('');
+        setLatitude('');
+        setLongitude('');
+        setReason('');
+      }, 2000);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[3000] flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div 
+        className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-300"
+        onClick={onClose}
+      />
+
+      {/* Content Container */}
+      <div className="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300 flex flex-col max-h-[90vh]">
+        
+        {/* Header */}
+        <div className="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-red-50 text-red-500 rounded-xl">
+              <ShieldAlert className="w-6 h-6" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-gray-900">{t('reportModalTitle')}</h2>
+              <p className="text-xs text-gray-500 mt-0.5">Báo cáo các hành vi không lành mạnh hoặc lừa đảo kinh doanh.</p>
+            </div>
+          </div>
+          <button 
+            onClick={onClose}
+            className="p-2 hover:bg-gray-100 rounded-full transition-colors text-gray-400 hover:text-gray-600"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {success ? (
+          <div className="p-10 flex flex-col items-center justify-center text-center space-y-4">
+            <div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center shadow-lg animate-bounce">
+              <ShieldAlert className="w-8 h-8" />
+            </div>
+            <h3 className="text-xl font-bold text-gray-900">{t('success')}!</h3>
+            <p className="text-sm text-gray-500 max-w-sm">{t('reportSuccess')}</p>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="p-6 space-y-4 overflow-y-auto flex-1 text-left">
+            {error && (
+              <div className="p-4 bg-red-50 text-red-600 rounded-2xl text-xs font-bold flex items-center gap-2">
+                <AlertTriangle className="w-4 h-4 shrink-0" />
+                <span>{error}</span>
+              </div>
+            )}
+
+            {/* Loại hình */}
+            <div className="space-y-1.5">
+              <label className="text-xs font-bold text-gray-500 uppercase tracking-wider">{t('businessType')} *</label>
+              <select
+                value={type}
+                onChange={(e) => setType(e.target.value)}
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all text-sm font-bold text-gray-800"
+              >
+                <option value="USER">{t('typeUser')}</option>
+                <option value="RESTAURANT">{t('typeRestaurant')}</option>
+                <option value="HOTEL">{t('typeHotel')}</option>
+                <option value="HOMESTAY">{t('typeHomestay')}</option>
+              </select>
+            </div>
+
+            {/* Tên */}
+            <div className="space-y-1.5">
+              <label className="text-xs font-bold text-gray-500 uppercase tracking-wider">{t('businessName')} *</label>
+              <input
+                type="text"
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="VD: Nhà hàng ABC, Homestay X..."
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all text-sm text-gray-800"
+              />
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {/* Số điện thoại */}
+              <div className="space-y-1.5">
+                <label className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
+                  <Phone className="w-3.5 h-3.5 text-gray-400" /> {t('businessPhone')}
+                </label>
+                <input
+                  type="tel"
+                  value={phone}
+                  onChange={(e) => setPhone(e.target.value)}
+                  placeholder="0987xxxxxx"
+                  className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all text-sm text-gray-800"
+                />
+              </div>
+
+              {/* Email */}
+              <div className="space-y-1.5">
+                <label className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
+                  <Mail className="w-3.5 h-3.5 text-gray-400" /> {t('businessEmail')}
+                </label>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="contact@business.com"
+                  className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all text-sm text-gray-800"
+                />
+              </div>
+            </div>
+
+            {/* Địa chỉ */}
+            <div className="space-y-1.5">
+              <label className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
+                <MapPin className="w-3.5 h-3.5 text-gray-400" /> {t('businessAddress')}
+              </label>
+              <input
+                type="text"
+                value={address}
+                onChange={(e) => setAddress(e.target.value)}
+                placeholder="VD: 123 Đường Trần Phú, Đà Lạt..."
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all text-sm text-gray-800"
+              />
+            </div>
+
+            {/* Tọa độ địa lý */}
+            <div className="space-y-1.5 bg-blue-50/50 p-4 rounded-2xl border border-blue-100">
+              <div className="flex justify-between items-center mb-2">
+                <span className="text-xs font-bold text-blue-700 uppercase tracking-wider flex items-center gap-1.5">
+                  📍 Vị trí địa lý (Tùy chọn)
+                </span>
+                <button
+                  type="button"
+                  onClick={handleGetCurrentLocation}
+                  className="text-xs font-bold text-blue-600 hover:text-blue-700 hover:underline flex items-center gap-1"
+                >
+                  Lấy vị trí GPS hiện tại
+                </button>
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-[10px] font-bold text-gray-400 uppercase mb-1">Vĩ độ (Latitude)</label>
+                  <input
+                    type="number"
+                    step="any"
+                    value={latitude}
+                    onChange={(e) => setLatitude(e.target.value)}
+                    placeholder="11.9404"
+                    className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-xs text-gray-800"
+                  />
+                </div>
+                <div>
+                  <label className="block text-[10px] font-bold text-gray-400 uppercase mb-1">Kinh độ (Longitude)</label>
+                  <input
+                    type="number"
+                    step="any"
+                    value={longitude}
+                    onChange={(e) => setLongitude(e.target.value)}
+                    placeholder="108.4382"
+                    className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-xs text-gray-800"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Lý do */}
+            <div className="space-y-1.5">
+              <label className="text-xs font-bold text-gray-500 uppercase tracking-wider">{t('reportReason')} *</label>
+              <textarea
+                required
+                rows={3}
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+                placeholder="Hãy mô tả hành vi không đàng hoàng, lừa đảo hoặc gian dối của cơ sở/người dùng này..."
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all resize-none text-sm text-gray-800"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full py-4 bg-red-600 hover:bg-red-700 text-white font-bold rounded-2xl shadow-lg shadow-red-100 transition-all flex items-center justify-center gap-2 active:scale-[0.98] disabled:opacity-50"
+            >
+              {isLoading ? 'Đang gửi...' : t('submitReport')}
+              {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : <ShieldAlert className="w-5 h-5" />}
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+};

frontend/src/components/TourChat.tsx

@@ -0,0 +1,655 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { io, Socket } from 'socket.io-client';
+import { Send, MessageSquare, Loader2, Image as ImageIcon, MapPin, Download, X } from 'lucide-react';
+import { useNotification } from '@/hooks/useNotification';
+
+interface TourChatProps {
+  tourId: string;
+}
+
+export const TourChat: React.FC<TourChatProps> = ({ tourId }) => {
+  const notify = useNotification();
+  const [messages, setMessages] = useState<any[]>([]);
+  const [newMessage, setNewMessage] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [selectedImage, setSelectedImage] = useState<File | null>(null);
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [attachedLocation, setAttachedLocation] = useState<{ latitude: number; longitude: number } | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isLocating, setIsLocating] = useState(false);
+
+  const [participants, setParticipants] = useState<any[]>([]);
+  const [showMentionList, setShowMentionList] = useState(false);
+  const [mentionSearch, setMentionSearch] = useState('');
+  const [mentionIndex, setMentionIndex] = useState(0);
+  const [taggedUserIds, setTaggedUserIds] = useState<string[]>([]);
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const socketRef = useRef<Socket | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const mentionRef = useRef<HTMLDivElement>(null);
+
+  const getHeaders = () => ({
+    'Authorization': `Bearer ${localStorage.getItem('token')}`,
+    'Content-Type': 'application/json'
+  });
+
+  const currentUserId = (() => {
+    try {
+      const token = localStorage.getItem('token');
+      if (!token) return null;
+      const base64Url = token.split('.')[1];
+      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+      const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join(''));
+      const parsed = JSON.parse(jsonPayload);
+      return parsed.sub || parsed.id;
+    } catch (e) {
+      return null;
+    }
+  })();
+
+  // Fetch tour details to get participants (excluding current user)
+  useEffect(() => {
+    const fetchTourDetails = async () => {
+      try {
+        const res = await fetch(`/api/v1/tours/${tourId}`, { headers: getHeaders() });
+        if (res.ok) {
+          const data = await res.json();
+          if (data && data.participants) {
+            const memberList = data.participants
+              .map((p: any) => p.user)
+              .filter((u: any) => u && u.id !== currentUserId);
+            setParticipants(memberList);
+          }
+        }
+      } catch (err) {
+        console.error('Lỗi khi tải thông tin thành viên tour:', err);
+      }
+    };
+    if (tourId && currentUserId) {
+      fetchTourDetails();
+    }
+  }, [tourId, currentUserId]);
+
+  // Click outside to close mention dropdown
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (mentionRef.current && !mentionRef.current.contains(e.target as Node)) {
+        setShowMentionList(false);
+      }
+    };
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => document.removeEventListener('mousedown', handleOutsideClick);
+  }, []);
+
+  const filteredParticipants = participants.filter(p =>
+    p.name.toLowerCase().includes(mentionSearch.toLowerCase())
+  );
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setNewMessage(value);
+
+    const selectionStart = e.target.selectionStart || 0;
+    const textBeforeCursor = value.slice(0, selectionStart);
+    
+    const lastAtIndex = textBeforeCursor.lastIndexOf('@');
+    if (lastAtIndex !== -1) {
+      const textAfterAt = textBeforeCursor.slice(lastAtIndex + 1);
+      if (!textAfterAt.includes(' ')) {
+        setShowMentionList(true);
+        setMentionSearch(textAfterAt);
+        setMentionIndex(0);
+        return;
+      }
+    }
+    setShowMentionList(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!showMentionList) return;
+    const filtered = filteredParticipants;
+    if (filtered.length === 0) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setMentionIndex(prev => (prev + 1) % filtered.length);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setMentionIndex(prev => (prev - 1 + filtered.length) % filtered.length);
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      insertMention(filtered[mentionIndex]);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      setShowMentionList(false);
+    }
+  };
+
+  const insertMention = (member: { id: string; name: string }) => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    const selectionStart = input.selectionStart || 0;
+    const textBeforeCursor = newMessage.slice(0, selectionStart);
+    const textAfterCursor = newMessage.slice(selectionStart);
+
+    const lastAtIndex = textBeforeCursor.lastIndexOf('@');
+    if (lastAtIndex !== -1) {
+      const newTextBeforeCursor = textBeforeCursor.slice(0, lastAtIndex) + `@${member.name} `;
+      const updatedValue = newTextBeforeCursor + textAfterCursor;
+      
+      setNewMessage(updatedValue);
+      setShowMentionList(false);
+      
+      if (!taggedUserIds.includes(member.id)) {
+        setTaggedUserIds(prev => [...prev, member.id]);
+      }
+      
+      setTimeout(() => {
+        input.focus();
+        const cursorPosition = newTextBeforeCursor.length;
+        input.setSelectionRange(cursorPosition, cursorPosition);
+      }, 0);
+    }
+  };
+
+  // Fetch past messages
+  useEffect(() => {
+    const fetchMessages = async () => {
+      try {
+        const res = await fetch(`/api/v1/tours/${tourId}/messages`, { headers: getHeaders() });
+        if (res.ok) {
+          const data = await res.json();
+          setMessages(data || []);
+        }
+      } catch (err) {
+        console.error('Lỗi khi tải tin nhắn:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMessages();
+  }, [tourId]);
+
+  // Connect to socket and listen for tour messages
+  useEffect(() => {
+    const socket = io();
+    socketRef.current = socket;
+
+    socket.on('connect', () => {
+      socket.emit('joinTour', tourId);
+    });
+
+    socket.on('tourMessageReceived', (data: any) => {
+      if (data.tourId === tourId) {
+        setMessages(prev => [...prev, data.message]);
+      }
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, [tourId]);
+
+  // Autoscroll chat to bottom
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Compress image to 2K (max 2048px longest side)
+  const compressImageTo2K = (file: File): Promise<Blob> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = (event) => {
+        const img = new Image();
+        img.src = event.target?.result as string;
+        img.onload = () => {
+          const MAX_DIM = 2048;
+          let width = img.width;
+          let height = img.height;
+
+          if (width > MAX_DIM || height > MAX_DIM) {
+            if (width > height) {
+              height = Math.round((height * MAX_DIM) / width);
+              width = MAX_DIM;
+            } else {
+              width = Math.round((width * MAX_DIM) / height);
+              height = MAX_DIM;
+            }
+          }
+
+          const canvas = document.createElement('canvas');
+          canvas.width = width;
+          canvas.height = height;
+          const ctx = canvas.getContext('2d');
+          if (!ctx) {
+            resolve(file);
+            return;
+          }
+          ctx.drawImage(img, 0, 0, width, height);
+          canvas.toBlob(
+            (blob) => {
+              if (blob) {
+                resolve(blob);
+              } else {
+                resolve(file);
+              }
+            },
+            'image/jpeg',
+            0.85
+          );
+        };
+        img.onerror = (err) => reject(err);
+      };
+      reader.onerror = (err) => reject(err);
+    });
+  };
+
+  // Handle Image Selection
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setSelectedImage(file);
+      setImagePreview(URL.createObjectURL(file));
+    }
+  };
+
+  // Handle Location Sharing
+  const handleGetLocation = () => {
+    if (!navigator.geolocation) {
+      notify({
+        title: 'Không hỗ trợ',
+        message: 'Trình duyệt của bạn không hỗ trợ định vị GPS.',
+        type: 'error'
+      });
+      return;
+    }
+
+    setIsLocating(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setAttachedLocation({
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude
+        });
+        notify({
+          title: 'Gắn vị trí thành công',
+          message: 'Vị trí hiện tại đã được đính kèm vào tin nhắn.',
+          type: 'success'
+        });
+        setIsLocating(false);
+      },
+      (error) => {
+        console.error('Lỗi định vị:', error);
+        notify({
+          title: 'Lỗi GPS',
+          message: 'Không thể lấy vị trí hiện tại của bạn. Hãy kiểm tra quyền truy cập.',
+          type: 'error'
+        });
+        setIsLocating(false);
+      },
+      { enableHighAccuracy: true, timeout: 10000 }
+    );
+  };
+
+  // Upload image to backend
+  const uploadImage = async (file: File): Promise<string | null> => {
+    try {
+      setIsUploading(true);
+      // Compress first
+      const compressedBlob = await compressImageTo2K(file);
+      const formData = new FormData();
+      formData.append('image', compressedBlob, 'compressed.jpg');
+
+      const res = await fetch('/api/v1/upload', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('token')}`
+        },
+        body: formData
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        return data.url;
+      }
+      return null;
+    } catch (err) {
+      console.error('Lỗi upload ảnh:', err);
+      return null;
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  // Send Tour Message
+  const handleSendMessage = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+    if (!newMessage.trim() && !selectedImage && !attachedLocation) return;
+
+    let attachmentUrl = undefined;
+    if (selectedImage) {
+      attachmentUrl = await uploadImage(selectedImage);
+      if (!attachmentUrl) {
+        notify({
+          title: 'Lỗi',
+          message: 'Không thể tải ảnh đính kèm lên server.',
+          type: 'error'
+        });
+        return;
+      }
+    }
+
+    const actualTaggedUserIds = taggedUserIds.filter(userId => {
+      const member = participants.find(p => p.id === userId);
+      if (!member || !member.name) return false;
+      
+      const cleanMessage = newMessage.toLowerCase();
+      const nameLower = member.name.toLowerCase();
+      
+      // Try exact match first
+      if (cleanMessage.includes(`@${nameLower}`)) return true;
+      
+      // Try match without parentheses (e.g. "Lộc Phạm (Chủ Tour)" -> "Lộc Phạm")
+      const nameWithoutParentheses = member.name.split('(')[0].trim().toLowerCase();
+      if (nameWithoutParentheses && cleanMessage.includes(`@${nameWithoutParentheses}`)) return true;
+      
+      return false;
+    });
+
+    const payload = {
+      content: newMessage,
+      attachmentUrl,
+      latitude: attachedLocation?.latitude,
+      longitude: attachedLocation?.longitude,
+      taggedUserIds: actualTaggedUserIds
+    };
+
+    // Reset input fields immediately
+    setNewMessage('');
+    setSelectedImage(null);
+    setImagePreview(null);
+    setAttachedLocation(null);
+    setTaggedUserIds([]);
+
+    try {
+      const res = await fetch(`/api/v1/tours/${tourId}/messages`, {
+        method: 'POST',
+        headers: getHeaders(),
+        body: JSON.stringify(payload)
+      });
+
+      if (!res.ok) {
+        notify({
+          title: 'Lỗi',
+          message: 'Gửi tin nhắn thất bại.',
+          type: 'error'
+        });
+      }
+    } catch (err) {
+      console.error('Lỗi gửi tin nhắn:', err);
+    }
+  };
+
+  // Download image file helper
+  const handleDownloadImage = async (url: string, id: string) => {
+    try {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const blobUrl = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = blobUrl;
+      link.download = `tour-chat-photo-${id}.jpg`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(blobUrl);
+    } catch (error) {
+      console.error('Lỗi tải ảnh:', error);
+      window.open(url, '_blank');
+    }
+  };
+
+  // currentUserId is defined at the top
+
+  return (
+    <div className="bg-white border border-gray-150 rounded-2xl shadow-lg overflow-hidden flex flex-col h-[500px]">
+      {/* Chat Header */}
+      <div className="p-4 border-b border-gray-150 flex items-center gap-2 bg-gray-50/50">
+        <MessageSquare className="w-5 h-5 text-blue-500" />
+        <div>
+          <h3 className="text-sm font-bold text-gray-800">Trò chuyện nhóm hành trình</h3>
+          <p className="text-[10px] text-gray-400 font-medium">Nơi trao đổi thông tin, hình ảnh và định vị giữa các thành viên</p>
+        </div>
+      </div>
+
+      {/* Messages list */}
+      <div className="flex-1 p-4 overflow-y-auto flex flex-col gap-3 min-h-0 bg-slate-50/20">
+        {loading ? (
+          <div className="flex-1 flex items-center justify-center text-gray-400 text-xs gap-1.5">
+            <Loader2 className="w-4 h-4 animate-spin text-blue-500" /> Đang tải tin nhắn...
+          </div>
+        ) : messages.length === 0 ? (
+          <div className="flex-1 flex flex-col items-center justify-center text-gray-450 text-xs italic gap-1.5">
+            <MessageSquare className="w-8 h-8 text-gray-300" />
+            <span className="text-gray-400">Chưa có tin nhắn nào trong phòng chat nhóm này.</span>
+          </div>
+        ) : (
+          messages.map((msg) => {
+            const isMe = msg.senderId === currentUserId;
+            const initials = msg.sender?.name
+              ? msg.sender.name.split(' ').map((n: string) => n[0]).slice(0, 2).join('').toUpperCase()
+              : 'U';
+
+            return (
+              <div 
+                key={msg.id}
+                className={`flex gap-2 max-w-[80%] ${isMe ? 'self-end flex-row-reverse' : 'self-start'}`}
+              >
+                {!isMe && (
+                  <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-blue-500 to-indigo-500 flex items-center justify-center font-bold text-[10px] text-white shadow-sm shrink-0">
+                    {msg.sender?.avatar ? (
+                      <img src={msg.sender.avatar} alt={msg.sender.name} className="w-full h-full rounded-full object-cover" />
+                    ) : initials}
+                  </div>
+                )}
+                <div className={`flex flex-col ${isMe ? 'items-end' : 'items-start'}`}>
+                  {!isMe && (
+                    <span className="text-[10px] font-bold text-gray-500 mb-0.5 ml-1">
+                      {msg.sender?.name || 'Thành viên'}
+                    </span>
+                  )}
+                  <div className={`p-3 rounded-2xl text-xs font-medium leading-relaxed flex flex-col gap-1.5 relative group ${
+                    isMe 
+                      ? 'bg-blue-600 text-white rounded-tr-none' 
+                      : 'bg-white text-gray-700 rounded-tl-none border border-gray-150 shadow-sm'
+                  }`}>
+                    {/* Attachment Image */}
+                    {msg.attachmentUrl && (
+                      <div className="relative rounded-lg overflow-hidden border border-black/5 max-w-xs group/img">
+                        <img 
+                          src={msg.attachmentUrl} 
+                          alt="Đính kèm" 
+                          className="w-full max-h-48 object-cover hover:brightness-95 transition-all"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => handleDownloadImage(msg.attachmentUrl, msg.id)}
+                          className="absolute bottom-2 right-2 p-1.5 bg-black/60 hover:bg-black/80 text-white rounded-md transition-all shadow-md flex items-center justify-center"
+                          title="Tải ảnh này về máy"
+                        >
+                          <Download className="w-3.5 h-3.5" />
+                        </button>
+                      </div>
+                    )}
+
+                    {/* GPS Location badge */}
+                    {msg.latitude !== undefined && msg.latitude !== null && (
+                      <a 
+                        href={`https://www.google.com/maps/search/?api=1&query=${msg.latitude},${msg.longitude}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-[11px] font-bold transition-all border ${
+                          isMe 
+                            ? 'bg-blue-700 border-blue-600 text-blue-100 hover:bg-blue-800' 
+                            : 'bg-gray-100 border-gray-200 text-gray-750 hover:bg-gray-200'
+                        }`}
+                      >
+                        <MapPin className="w-3.5 h-3.5 text-rose-500 shrink-0 animate-bounce" />
+                        <div className="flex flex-col text-left">
+                          <span>Vị trí hiện tại</span>
+                          <span className="text-[9px] opacity-75">{msg.latitude.toFixed(6)}, {msg.longitude.toFixed(6)}</span>
+                        </div>
+                      </a>
+                    )}
+
+                    {/* Content text */}
+                    {msg.content && <p className="whitespace-pre-wrap break-words">{msg.content}</p>}
+                  </div>
+                  <span className="text-[8px] text-gray-400 font-bold mt-1 px-1">
+                    {new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                  </span>
+                </div>
+              </div>
+            );
+          })
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Previews (Image & GPS Location) */}
+      {(imagePreview || attachedLocation) && (
+        <div className="px-4 py-2 border-t border-gray-150 bg-gray-50/80 flex flex-wrap gap-2">
+          {imagePreview && (
+            <div className="relative w-16 h-16 rounded-lg overflow-hidden border border-gray-200 shadow-sm">
+              <img src={imagePreview} alt="Preview" className="w-full h-full object-cover" />
+              <button
+                type="button"
+                onClick={() => {
+                  setSelectedImage(null);
+                  setImagePreview(null);
+                }}
+                className="absolute top-0.5 right-0.5 p-0.5 bg-black/60 hover:bg-black text-white rounded-full transition-all"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </div>
+          )}
+          {attachedLocation && (
+            <div className="flex items-center gap-1.5 bg-rose-50 border border-rose-200 rounded-lg px-2.5 py-1 text-xs text-rose-700 font-bold">
+              <MapPin className="w-3.5 h-3.5 text-rose-500 animate-pulse" />
+              <span>Đã đính kèm GPS</span>
+              <button
+                type="button"
+                onClick={() => setAttachedLocation(null)}
+                className="hover:text-rose-950 transition-colors ml-1"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Chat Input wrapper */}
+      <div className="relative">
+        {/* Mention list dropdown */}
+        {showMentionList && filteredParticipants.length > 0 && (
+          <div 
+            ref={mentionRef} 
+            className="absolute bottom-full left-3 right-3 mb-2 bg-white border border-gray-200 rounded-xl shadow-xl max-h-40 overflow-y-auto z-50 flex flex-col py-1"
+          >
+            {filteredParticipants.map((member, index) => (
+              <button
+                key={member.id}
+                type="button"
+                onClick={() => insertMention(member)}
+                className={`px-3 py-2 text-left text-xs font-semibold flex items-center gap-2 transition-colors ${
+                  index === mentionIndex 
+                    ? 'bg-blue-50 text-blue-700' 
+                    : 'text-gray-700 hover:bg-gray-50'
+                }`}
+              >
+                <div className="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center font-bold text-[9px] text-blue-600">
+                  {member.name.split(' ').map((n: string) => n[0]).slice(0, 2).join('').toUpperCase()}
+                </div>
+                <span>{member.name}</span>
+                <span className="text-[10px] text-gray-400 font-medium font-mono">@{member.name}</span>
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Chat Input form */}
+        <form 
+          onSubmit={handleSendMessage}
+          className="p-3 border-t border-gray-150 bg-gray-50 flex gap-2 items-center"
+        >
+          <input 
+            type="file"
+            accept="image/*"
+            ref={fileInputRef}
+            onChange={handleImageChange}
+            className="hidden"
+          />
+          
+          {/* Attach photo button */}
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className="p-2.5 bg-white border border-gray-200 hover:bg-gray-50 text-gray-500 rounded-xl transition-all shadow-sm active:scale-95 flex items-center justify-center shrink-0"
+            title="Đính kèm hình ảnh"
+          >
+            <ImageIcon className="w-4 h-4 text-blue-500" />
+          </button>
+
+          {/* Share current GPS button */}
+          <button
+            type="button"
+            onClick={handleGetLocation}
+            disabled={isLocating}
+            className={`p-2.5 bg-white border border-gray-200 hover:bg-gray-50 text-gray-500 rounded-xl transition-all shadow-sm active:scale-95 flex items-center justify-center shrink-0 ${
+              isLocating ? 'animate-pulse' : ''
+            }`}
+            title="Chia sẻ vị trí GPS hiện tại"
+          >
+            {isLocating ? (
+              <Loader2 className="w-4 h-4 animate-spin text-rose-500" />
+            ) : (
+              <MapPin className="w-4 h-4 text-rose-500" />
+            )}
+          </button>
+
+          <input
+            type="text"
+            ref={inputRef}
+            value={newMessage}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            placeholder={isUploading ? "Đang tải ảnh lên..." : "Nhập nội dung tin nhắn..."}
+            disabled={isUploading}
+            className="flex-1 bg-white border border-gray-200 rounded-xl py-2.5 px-3 text-xs text-gray-800 placeholder-gray-400 outline-none focus:border-blue-500 transition-all shadow-inner disabled:bg-gray-100 disabled:cursor-not-allowed"
+          />
+
+          <button
+            type="submit"
+            disabled={isUploading || (!newMessage.trim() && !selectedImage && !attachedLocation)}
+            className="p-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl transition-all shadow-md active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
+          >
+            {isUploading ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <Send className="w-4 h-4" />
+            )}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};