feat: cập nhật giao diện tour hiển thị mô tả trên banner

.continue/config.yaml

@@ -0,0 +1,8 @@
+name: Local Config
+version: 1.0.0
+schema: v1
+models:
+  - name: Autodetect
+    provider: lmstudio
+    model: AUTODETECT
+    apiBase: http://192.168.1.12:1234/v1/

.kilo/kilo.jsonc

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://app.kilo.ai/config.json"
+}

AddMemberModal.tsx

@@ -1,184 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { X, Search, UserPlus, Loader2, Shield, ShieldAlert } from 'lucide-react';
-
-interface AddMemberModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  tourId: string;
-}
-
-export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose, tourId }) => {
-  const [query, setQuery] = useState('');
-  const [users, setUsers] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<string | null>(null);
-  const [role, setRole] = useState<'OWNER' | 'MANAGER' | 'MEMBER' | 'MEMBER_NO_FINANCE' | 'VIEWER_ONLY'>('MEMBER');
-  const [submitting, setSubmitting] = useState(false);
-  const [fetchError, setFetchError] = useState('');
-  const [submitError, setSubmitError] = useState('');
-
-  const fetchUsers = async () => {
-    setLoading(true);
-    setFetchError('');
-    try {
-      const API_BASE = `http://${window.location.hostname}:3001`;
-      const res = await fetch(`${API_BASE}/api/v1/users?q=${encodeURIComponent(query)}`, {
-        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
-      });
-      if (!res.ok) throw new Error('Không thể tải danh sách người dùng');
-      const data = await res.json();
-      setUsers(data);
-    } catch (err: any) {
-      setFetchError(err.message || 'Không thể tải danh sách người dùng');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (!isOpen) return;
-    fetchUsers();
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (!isOpen) {
-      setQuery('');
-      setSelectedUser(null);
-      setRole('MEMBER');
-      setFetchError('');
-    }
-  }, [isOpen]);
-
-  const handleAdd = async () => {
-    if (!selectedUser) return;
-    setSubmitting(true);
-    try {
-      const API_BASE = `http://${window.location.hostname}:3001`;
-      const res = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${localStorage.getItem('token')}`,
-        },
-        body: JSON.stringify({ userId: selectedUser, role }),
-      });
-      if (!res.ok) {
-        const data = await res.json();
-        throw new Error(data.message || 'Thêm thành viên thất bại');
-      }
-      onClose();
-    } catch (err: any) {
-      alert(err.message);
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  if (!isOpen) return null;
-
-  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 flex flex-col max-h-[90vh]">
-        <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" /> Thêm thành viên
-            </h2>
-            <p className="text-xs text-gray-500">Chọn người dùng và phân quyền cho tour này.</p>
-          </div>
-          <button onClick={onClose} className="p-2 hover:bg-gray-200 rounded-full transition-colors">
-            <X className="w-5 h-5 text-gray-400" />
-          </button>
-        </div>
-
-        <div className="p-5 space-y-4">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-            <input
-              className="w-full pl-9 pr-4 py-2.5 bg-gray-50 border border-gray-100 rounded-xl outline-none text-sm"
-              placeholder="Tìm theo tên hoặc email..."
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              onBlur={fetchUsers}
-            />
-          </div>
-
-          <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>
-
-          <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>
-            )}
-            {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">
-                {users.map((u) => {
-                  const isSelected = selectedUser === u.id;
-                  return (
-                    <button
-                      key={u.id}
-                      onClick={() => setSelectedUser(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'
-                      }`}
-                    >
-                      <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>
-                    </button>
-                  );
-                })}
-                {!loading && users.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 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 thêm...' : 'Thêm vào tour'}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};

CreateTourModal.tsx

@@ -1,82 +0,0 @@
-import React, { useState } from 'react';
-import { X, Map as MapIcon, Loader2 } from 'lucide-react';
-import { useTourStore } from './useTourStore.js';
-
-export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolean, onClose: () => void, onSuccess: (tour: any) => void }) => {
-  const [title, setTitle] = useState('');
-  const [startDate, setStartDate] = useState('');
-  const [endDate, setEndDate] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const createTour = useTourStore(state => state.createTour);
-
-  if (!isOpen) return null;
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsLoading(true);
-    try {
-      const tour = await createTour({ title, startDate, endDate });
-      onSuccess(tour);
-      onClose();
-    } catch (error) {
-      alert('Lỗi khi tạo tour');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  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-8">
-        <div className="flex justify-between items-center mb-6">
-          <h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
-            <MapIcon className="w-6 h-6 text-blue-600" /> Tạo Tour mới
-          </h2>
-          <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
-            <X className="w-6 h-6 text-gray-400" />
-          </button>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <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"
-              value={title}
-              onChange={e => setTitle(e.target.value)}
-              placeholder="VD: Khám phá Đà Lạt"
-            />
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <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"
-                value={startDate}
-                onChange={e => setStartDate(e.target.value)}
-              />
-            </div>
-            <div>
-              <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"
-                value={endDate}
-                onChange={e => setEndDate(e.target.value)}
-              />
-            </div>
-          </div>
-          <button 
-            disabled={isLoading}
-            className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg transition-all flex items-center justify-center gap-2"
-          >
-            {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Xác nhận tạo Tour'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-};

ExpenseManager.tsx

@@ -1,77 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Wallet, Users, Info } from 'lucide-react';
-import { useTourStore } from './useTourStore.js';
-
-export const ExpenseManager = () => {
-  const { legs } = useTourStore();
-  const [adults, setAdults] = useState(2);
-  const [children, setChildren] = useState(1);
-  const [discount, setDiscount] = useState(30);
-
-  const totals = useMemo(() => {
-    const totalAmount = legs.reduce((acc, leg) => 
-      acc + leg.expenses.reduce((lAcc: number, exp: any) => lAcc + Number(exp.amount), 0), 0
-    );
-
-    const childRateFactor = 1 - (discount / 100);
-    const weightedCount = adults + (children * childRateFactor);
-    const adultPrice = totalAmount / weightedCount;
-    const childPrice = adultPrice * childRateFactor;
-
-    return {
-      total: totalAmount,
-      adultPrice: Math.round(adultPrice),
-      childPrice: Math.round(childPrice)
-    };
-  }, [legs, adults, children, discount]);
-
-  return (
-    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
-      <div className="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
-        <div className="flex items-center gap-2 mb-6 text-blue-600">
-          <Users className="w-5 h-5" />
-          <h3 className="font-bold">Cấu hình thành viên</h3>
-        </div>
-        <div className="grid grid-cols-3 gap-4">
-          <div>
-            <label className="text-xs text-gray-400 block mb-1">Người lớn</label>
-            <input type="number" value={adults} onChange={e => setAdults(Number(e.target.value))} className="w-full p-2 bg-gray-50 rounded-lg border-none focus:ring-2 focus:ring-blue-500" />
-          </div>
-          <div>
-            <label className="text-xs text-gray-400 block mb-1">Trẻ em</label>
-            <input type="number" value={children} onChange={e => setChildren(Number(e.target.value))} className="w-full p-2 bg-gray-50 rounded-lg border-none focus:ring-2 focus:ring-blue-500" />
-          </div>
-          <div>
-            <label className="text-xs text-gray-400 block mb-1">Giảm trẻ em (%)</label>
-            <input type="number" value={discount} onChange={e => setDiscount(Number(e.target.value))} className="w-full p-2 bg-gray-50 rounded-lg border-none focus:ring-2 focus:ring-blue-500" />
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-blue-600 rounded-2xl p-6 text-white shadow-lg shadow-blue-200">
-        <div className="flex justify-between items-start mb-8">
-          <div>
-            <p className="text-blue-100 text-sm">Tổng chi phí chuyến đi</p>
-            <h2 className="text-3xl font-bold mt-1">{totals.total.toLocaleString()} VND</h2>
-          </div>
-          <Wallet className="w-8 h-8 opacity-20" />
-        </div>
-        <div className="grid grid-cols-2 gap-4 border-t border-blue-500 pt-6">
-          <div>
-            <p className="text-blue-100 text-xs uppercase tracking-wider font-semibold">Mỗi người lớn</p>
-            <p className="text-xl font-bold">{totals.adultPrice.toLocaleString()}đ</p>
-          </div>
-          <div>
-            <p className="text-blue-100 text-xs uppercase tracking-wider font-semibold">Mỗi trẻ em (-{discount}%)</p>
-            <p className="text-xl font-bold">{totals.childPrice.toLocaleString()}đ</p>
-          </div>
-        </div>
-      </div>
-      
-      <div className="flex items-center gap-2 text-gray-400 text-xs px-2">
-        <Info className="w-4 h-4" />
-        <p>Chi phí được tự động tính toán dựa trên hóa đơn của các chặng.</p>
-      </div>
-    </div>
-  );
-};

backend/dist/prisma/prisma.service.d.ts

@@ -0,0 +1,7 @@
+import { OnModuleInit, OnModuleDestroy } from '@nestjs/common';
+import { PrismaClient } from '@prisma/client';
+export declare class PrismaService extends PrismaClient implements OnModuleInit, OnModuleDestroy {
+    constructor();
+    onModuleInit(): Promise<void>;
+    onModuleDestroy(): Promise<void>;
+}

backend/dist/prisma/prisma.service.js

@@ -0,0 +1,34 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrismaService = void 0;
+const common_1 = require("@nestjs/common");
+const client_1 = require("@prisma/client");
+const adapter_pg_1 = require("@prisma/adapter-pg");
+const pg_1 = require("pg");
+let PrismaService = class PrismaService extends client_1.PrismaClient {
+    constructor() {
+        console.log('--- [PRISMA CHECK] ---');
+        console.log('DATABASE_URL nhận được:', process.env.DATABASE_URL ? 'ĐÃ ĐỌC THÀNH CÔNG ✔️' : 'VẪN BỊ UNDEFINED ❌');
+        console.log('----------------------');
+        const pool = new pg_1.Pool({ connectionString: process.env.DATABASE_URL });
+        const adapter = new adapter_pg_1.PrismaPg(pool);
+        super({ adapter });
+    }
+    async onModuleInit() { await this.$connect(); }
+    async onModuleDestroy() { await this.$disconnect(); }
+};
+exports.PrismaService = PrismaService;
+exports.PrismaService = PrismaService = __decorate([
+    (0, common_1.Injectable)(),
+    __metadata("design:paramtypes", [])
+], PrismaService);
+//# sourceMappingURL=prisma.service.js.map

backend/dist/prisma/prisma.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prisma.service.js","sourceRoot":"","sources":["../../prisma/prisma.service.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAA2E;AAC3E,2CAA8C;AAC9C,mDAA8C;AAC9C,2BAA0B;AAGnB,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,qBAAY;IAC7C;QACE,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACtC,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC;QACjH,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACtC,MAAM,IAAI,GAAG,IAAI,SAAI,CAAC,EAAE,gBAAgB,EAAE,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC;QACtE,MAAM,OAAO,GAAG,IAAI,qBAAQ,CAAC,IAAI,CAAC,CAAC;QACnC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;IACrB,CAAC;IAED,KAAK,CAAC,YAAY,KAAK,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC/C,KAAK,CAAC,eAAe,KAAK,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;CACtD,CAAA;AAZY,sCAAa;wBAAb,aAAa;IADzB,IAAA,mBAAU,GAAE;;GACA,aAAa,CAYzB"}

backend/dist/src/auth/admin.guard.d.ts

@@ -0,0 +1,7 @@
+import { CanActivate, ExecutionContext } from '@nestjs/common';
+import { PrismaService } from '../../prisma/prisma.service';
+export declare class AdminGuard implements CanActivate {
+    private prisma;
+    constructor(prisma: PrismaService);
+    canActivate(context: ExecutionContext): Promise<boolean>;
+}

backend/dist/src/auth/admin.guard.js

@@ -0,0 +1,40 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdminGuard = void 0;
+const common_1 = require("@nestjs/common");
+const prisma_service_1 = require("../../prisma/prisma.service");
+let AdminGuard = class AdminGuard {
+    constructor(prisma) {
+        this.prisma = prisma;
+    }
+    async canActivate(context) {
+        const request = context.switchToHttp().getRequest();
+        const user = request.user;
+        if (!user || !user.id) {
+            throw new common_1.ForbiddenException('Yêu cầu xác thực không hợp lệ. Vui lòng đăng nhập.');
+        }
+        const dbUser = await this.prisma.user.findUnique({
+            where: { id: user.id },
+            select: { isAdmin: true, isBlocked: true },
+        });
+        if (!dbUser || !dbUser.isAdmin || dbUser.isBlocked) {
+            throw new common_1.ForbiddenException('Truy cập bị từ chối. Bạn không có quyền quản trị viên hệ thống.');
+        }
+        return true;
+    }
+};
+exports.AdminGuard = AdminGuard;
+exports.AdminGuard = AdminGuard = __decorate([
+    (0, common_1.Injectable)(),
+    __metadata("design:paramtypes", [prisma_service_1.PrismaService])
+], AdminGuard);
+//# sourceMappingURL=admin.guard.js.map

backend/dist/src/auth/admin.guard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin.guard.js","sourceRoot":"","sources":["../../../src/auth/admin.guard.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAA+F;AAC/F,gEAA4D;AAGrD,IAAM,UAAU,GAAhB,MAAM,UAAU;IACrB,YAAoB,MAAqB;QAArB,WAAM,GAAN,MAAM,CAAe;IAAG,CAAC;IAE7C,KAAK,CAAC,WAAW,CAAC,OAAyB;QACzC,MAAM,OAAO,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC,UAAU,EAAE,CAAC;QAGpD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QAE1B,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YACtB,MAAM,IAAI,2BAAkB,CAAC,oDAAoD,CAAC,CAAC;QACrF,CAAC;QAGD,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;YAC/C,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE;YACtB,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE;SAC3C,CAAC,CAAC;QAEH,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC;YACnD,MAAM,IAAI,2BAAkB,CAAC,iEAAiE,CAAC,CAAC;QAClG,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAzBY,gCAAU;qBAAV,UAAU;IADtB,IAAA,mBAAU,GAAE;qCAEiB,8BAAa;GAD9B,UAAU,CAyBtB"}

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

@@ -0,0 +1,4 @@
+declare const JwtAuthGuard_base: import("@nestjs/passport").Type<import("@nestjs/passport").IAuthGuard>;
+export declare class JwtAuthGuard extends JwtAuthGuard_base {
+}
+export {};

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

@@ -0,0 +1,18 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JwtAuthGuard = void 0;
+const common_1 = require("@nestjs/common");
+const passport_1 = require("@nestjs/passport");
+let JwtAuthGuard = class JwtAuthGuard extends (0, passport_1.AuthGuard)('jwt') {
+};
+exports.JwtAuthGuard = JwtAuthGuard;
+exports.JwtAuthGuard = JwtAuthGuard = __decorate([
+    (0, common_1.Injectable)()
+], JwtAuthGuard);
+//# sourceMappingURL=jwt-auth.guard.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,19 @@
+import { PrismaService } from '../../prisma/prisma.service';
+declare const JwtStrategy_base: new (...args: any) => any;
+export declare class JwtStrategy extends JwtStrategy_base {
+    private prisma;
+    constructor(prisma: PrismaService);
+    validate(payload: any): Promise<{
+        id: string;
+        email: string;
+        passwordHash: string;
+        name: string | null;
+        phone: string | null;
+        address: string | null;
+        avatar: string | null;
+        createdAt: Date;
+        isAdmin: boolean;
+        isBlocked: boolean;
+    }>;
+}
+export {};

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

@@ -0,0 +1,41 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JwtStrategy = void 0;
+const common_1 = require("@nestjs/common");
+const passport_1 = require("@nestjs/passport");
+const passport_jwt_1 = require("passport-jwt");
+const prisma_service_1 = require("../../prisma/prisma.service");
+let JwtStrategy = class JwtStrategy extends (0, passport_1.PassportStrategy)(passport_jwt_1.Strategy) {
+    constructor(prisma) {
+        super({
+            jwtFromRequest: passport_jwt_1.ExtractJwt.fromAuthHeaderAsBearerToken(),
+            ignoreExpiration: false,
+            secretOrKey: process.env.JWT_SECRET || 'super-secret',
+        });
+        this.prisma = prisma;
+    }
+    async validate(payload) {
+        const user = await this.prisma.user.findUnique({
+            where: { id: payload.sub },
+        });
+        if (!user) {
+            throw new common_1.UnauthorizedException('Người dùng không tồn tại hoặc phiên làm việc hết hạn');
+        }
+        return user;
+    }
+};
+exports.JwtStrategy = JwtStrategy;
+exports.JwtStrategy = JwtStrategy = __decorate([
+    (0, common_1.Injectable)(),
+    __metadata("design:paramtypes", [prisma_service_1.PrismaService])
+], JwtStrategy);
+//# sourceMappingURL=jwt.strategy.js.map

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

@@ -0,0 +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"}

backend/dist/src/common/rbac.middleware.d.ts

@@ -0,0 +1,7 @@
+import { CanActivate, ExecutionContext } from '@nestjs/common';
+import { PrismaService } from '../../prisma/prisma.service';
+export declare class TourRoleGuard implements CanActivate {
+    private prisma;
+    constructor(prisma: PrismaService);
+    canActivate(context: ExecutionContext): Promise<boolean>;
+}

backend/dist/src/common/rbac.middleware.js

@@ -0,0 +1,58 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TourRoleGuard = void 0;
+const common_1 = require("@nestjs/common");
+const prisma_service_1 = require("../../prisma/prisma.service");
+let TourRoleGuard = class TourRoleGuard {
+    constructor(prisma) {
+        this.prisma = prisma;
+    }
+    async canActivate(context) {
+        const request = context.switchToHttp().getRequest();
+        const user = request.user;
+        const tourId = request.params.id || request.params.tourId;
+        const path = request.url;
+        if (!user || !tourId) {
+            throw new common_1.ForbiddenException("Thông tin xác thực hoặc mã Tour không hợp lệ.");
+        }
+        if (path.includes('/join-requests') && request.method === 'POST' && (!request.params.requestId || /\/join-requests\/[^/]+\/(accept|reject)$/.test(path))) {
+            request.tourParticipation = null;
+            return true;
+        }
+        const participation = await this.prisma.tourParticipant.findUnique({
+            where: {
+                tourId_userId: {
+                    tourId: tourId,
+                    userId: user.id,
+                },
+            },
+        });
+        if (!participation) {
+            throw new common_1.ForbiddenException("Bạn không phải là thành viên của tour này.");
+        }
+        request.tourParticipation = participation;
+        const role = participation.role;
+        const isPlanPath = path.includes('/plans');
+        const isExpensePath = path.includes('/expenses');
+        if ((role === 'MEMBER_NO_FINANCE' || role === 'VIEWER_ONLY') &&
+            (isPlanPath || isExpensePath)) {
+            throw new common_1.ForbiddenException("Bạn không có quyền xem kế hoạch và chi phí của tour này.");
+        }
+        return true;
+    }
+};
+exports.TourRoleGuard = TourRoleGuard;
+exports.TourRoleGuard = TourRoleGuard = __decorate([
+    (0, common_1.Injectable)(),
+    __metadata("design:paramtypes", [prisma_service_1.PrismaService])
+], TourRoleGuard);
+//# sourceMappingURL=rbac.middleware.js.map

backend/dist/src/common/rbac.middleware.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rbac.middleware.js","sourceRoot":"","sources":["../../../src/common/rbac.middleware.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAA+F;AAC/F,gEAA4D;AAGrD,IAAM,aAAa,GAAnB,MAAM,aAAa;IACxB,YAAoB,MAAqB;QAArB,WAAM,GAAN,MAAM,CAAe;IAAG,CAAC;IAE7C,KAAK,CAAC,WAAW,CAAC,OAAyB;QACzC,MAAM,OAAO,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC,UAAU,EAAE,CAAC;QACpD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QAE1B,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;QAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC;QAEzB,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACrB,MAAM,IAAI,2BAAkB,CAAC,+CAA+C,CAAC,CAAC;QAChF,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,MAAM,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,IAAI,0CAA0C,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;YACzJ,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC;YACjC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC;YACjE,KAAK,EAAE;gBACL,aAAa,EAAE;oBACb,MAAM,EAAE,MAAM;oBACd,MAAM,EAAE,IAAI,CAAC,EAAE;iBAChB;aACF;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,MAAM,IAAI,2BAAkB,CAAC,4CAA4C,CAAC,CAAC;QAC7E,CAAC;QAED,OAAO,CAAC,iBAAiB,GAAG,aAAa,CAAC;QAE1C,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAEjD,IACE,CAAC,IAAI,KAAK,mBAAmB,IAAI,IAAI,KAAK,aAAa,CAAC;YACxD,CAAC,UAAU,IAAI,aAAa,CAAC,EAC7B,CAAC;YACD,MAAM,IAAI,2BAAkB,CAAC,0DAA0D,CAAC,CAAC;QAC3F,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AA/CY,sCAAa;wBAAb,aAAa;IADzB,IAAA,mBAAU,GAAE;qCAEiB,8BAAa;GAD9B,aAAa,CA+CzB"}

backend/dist/src/main.d.ts

@@ -0,0 +1 @@
+import 'reflect-metadata';

backend/nest-cli.json

@@ -1,8 +1,10 @@
 {
   "$schema": "https://json.schemastore.org/nest-cli",
   "collection": "@nestjs/schematics",
-  "sourceRoot": ".",
+  "sourceRoot": "src",
   "compilerOptions": {
-    "deleteOutDir": true
+    "deleteOutDir": true,
+    "assets": ["**/*.prisma", "schema.sql"], 
+    "watchAssets": true
   }
 }

backend/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "backend",
+  "version": "0.0.1",
+  "scripts": {
+    "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",
+    "db:seed": "node --loader ts-node/esm seed.ts"
+  },
+  "devDependencies": {
+    "@nestjs/cli": "^11.0.23",
+    "@types/node": "^20.14.10",
+    "@types/pg": "^8.11.6",
+    "dotenv-cli": "^7.4.2",
+    "prisma": "^5.16.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.3"
+  },
+  "dependencies": {
+    "@nestjs/common": "^11.1.27",
+    "@nestjs/core": "^11.1.27",
+    "@nestjs/jwt": "^11.0.2",
+    "@nestjs/passport": "^11.0.5",
+    "@nestjs/platform-express": "^11.1.27",
+    "@prisma/client": "^5.16.2",
+    "@prisma/adapter-pg": "^5.16.2",
+    "bcrypt": "^6.0.0",
+    "dotenv": "^17.4.2",
+    "passport": "^0.7.0",
+    "passport-jwt": "^4.0.1",
+    "pg": "^8.12.0",
+    "reflect-metadata": "^0.2.2",
+    "rxjs": "^7.8.2"
+  }
+}

backend/prisma/migrations/20260614114952_add_join_request_flow/migration.sql

@@ -0,0 +1,174 @@
+-- CreateEnum
+CREATE TYPE "ParticipantRole" AS ENUM ('OWNER', 'MANAGER', 'MEMBER', 'MEMBER_NO_FINANCE', 'VIEWER_ONLY');
+
+-- CreateEnum
+CREATE TYPE "JoinRequestStatus" AS ENUM ('PENDING', 'ACCEPTED', 'REJECTED');
+
+-- CreateEnum
+CREATE TYPE "ExpenseCategory" AS ENUM ('ACCOMMODATION', 'FOOD', 'TRANSPORT', 'TICKET', 'OTHER');
+
+-- CreateEnum
+CREATE TYPE "LocationStatus" AS ENUM ('PENDING', 'COMPLETED');
+
+-- CreateEnum
+CREATE TYPE "LocationType" AS ENUM ('MOVE', 'VISIT', 'REST', 'EAT');
+
+-- CreateEnum
+CREATE TYPE "PrivacyLevel" AS ENUM ('PUBLIC', 'TOUR_ONLY', 'PRIVATE');
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "passwordHash" TEXT NOT NULL,
+    "name" TEXT,
+    "phone" TEXT,
+    "address" TEXT,
+    "avatar" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isAdmin" BOOLEAN NOT NULL DEFAULT false,
+    "isBlocked" BOOLEAN NOT NULL DEFAULT false,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Tour" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "startDate" TIMESTAMP(3),
+    "endDate" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "totalCost" DECIMAL(15,2) NOT NULL DEFAULT 0,
+    "createdById" TEXT NOT NULL,
+
+    CONSTRAINT "Tour_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "JoinRequest" (
+    "id" TEXT NOT NULL,
+    "tourId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "requestedById" TEXT NOT NULL,
+    "status" "JoinRequestStatus" NOT NULL DEFAULT 'PENDING',
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "JoinRequest_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TourParticipant" (
+    "tourId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "role" "ParticipantRole" NOT NULL DEFAULT 'MEMBER',
+
+    CONSTRAINT "TourParticipant_pkey" PRIMARY KEY ("tourId","userId")
+);
+
+-- CreateTable
+CREATE TABLE "Leg" (
+    "id" TEXT NOT NULL,
+    "tourId" TEXT NOT NULL,
+    "sequence" INTEGER NOT NULL,
+    "note" TEXT,
+
+    CONSTRAINT "Leg_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Location" (
+    "id" TEXT NOT NULL,
+    "legId" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "address" TEXT,
+    "latitude" DOUBLE PRECISION NOT NULL,
+    "longitude" DOUBLE PRECISION NOT NULL,
+    "plannedStart" TIMESTAMP(3),
+    "plannedEnd" TIMESTAMP(3),
+    "actualStart" TIMESTAMP(3),
+    "actualEnd" TIMESTAMP(3),
+    "status" "LocationStatus" NOT NULL DEFAULT 'PENDING',
+    "type" "LocationType" NOT NULL DEFAULT 'VISIT',
+
+    CONSTRAINT "Location_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Expense" (
+    "id" TEXT NOT NULL,
+    "leg_id" TEXT NOT NULL,
+    "location_id" TEXT,
+    "category" "ExpenseCategory" NOT NULL,
+    "amount" DECIMAL(15,2) NOT NULL,
+    "description" TEXT,
+    "note" TEXT,
+    "paid_by_id" TEXT,
+
+    CONSTRAINT "Expense_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Photo" (
+    "id" TEXT NOT NULL,
+    "tourId" TEXT NOT NULL,
+    "locationId" TEXT,
+    "uploaderId" TEXT NOT NULL,
+    "imageUrl" TEXT NOT NULL,
+    "capturedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "metadata" JSONB,
+    "privacy" "PrivacyLevel" NOT NULL DEFAULT 'TOUR_ONLY',
+
+    CONSTRAINT "Photo_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE INDEX "JoinRequest_tourId_status_idx" ON "JoinRequest"("tourId", "status");
+
+-- CreateIndex
+CREATE INDEX "JoinRequest_userId_idx" ON "JoinRequest"("userId");
+
+-- AddForeignKey
+ALTER TABLE "Tour" ADD CONSTRAINT "Tour_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "JoinRequest" ADD CONSTRAINT "JoinRequest_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "JoinRequest" ADD CONSTRAINT "JoinRequest_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "JoinRequest" ADD CONSTRAINT "JoinRequest_requestedById_fkey" FOREIGN KEY ("requestedById") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TourParticipant" ADD CONSTRAINT "TourParticipant_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TourParticipant" ADD CONSTRAINT "TourParticipant_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Leg" ADD CONSTRAINT "Leg_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Location" ADD CONSTRAINT "Location_legId_fkey" FOREIGN KEY ("legId") REFERENCES "Leg"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Expense" ADD CONSTRAINT "Expense_leg_id_fkey" FOREIGN KEY ("leg_id") REFERENCES "Leg"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Expense" ADD CONSTRAINT "Expense_location_id_fkey" FOREIGN KEY ("location_id") REFERENCES "Location"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Expense" ADD CONSTRAINT "Expense_paid_by_id_fkey" FOREIGN KEY ("paid_by_id") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Photo" ADD CONSTRAINT "Photo_tourId_fkey" FOREIGN KEY ("tourId") REFERENCES "Tour"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Photo" ADD CONSTRAINT "Photo_locationId_fkey" FOREIGN KEY ("locationId") REFERENCES "Location"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Photo" ADD CONSTRAINT "Photo_uploaderId_fkey" FOREIGN KEY ("uploaderId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

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

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "Leg" ADD COLUMN     "description" TEXT,
+ADD COLUMN     "endDate" TIMESTAMP(3),
+ADD COLUMN     "startDate" TIMESTAMP(3);

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

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "Tour" ADD COLUMN     "adultCount" INTEGER NOT NULL DEFAULT 1,
+ADD COLUMN     "childCount" INTEGER NOT NULL DEFAULT 0,
+ADD COLUMN     "childDiscount" INTEGER NOT NULL DEFAULT 30;

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

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Tour" ADD COLUMN     "description" TEXT;

backend/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

backend/prisma/prisma.service.ts

@@ -6,6 +6,9 @@ import { Pool } from 'pg';
 @Injectable()
 export class PrismaService extends PrismaClient implements OnModuleInit, OnModuleDestroy {
   constructor() {
+    console.log('--- [PRISMA CHECK] ---');
+    console.log('DATABASE_URL nhận được:', process.env.DATABASE_URL ? 'ĐÃ ĐỌC THÀNH CÔNG ✔️' : 'VẪN BỊ UNDEFINED ❌');
+    console.log('----------------------');
     const pool = new Pool({ connectionString: process.env.DATABASE_URL });
     const adapter = new PrismaPg(pool);
     super({ adapter });

backend/prisma/schema.prisma

@@ -3,10 +3,12 @@
 
 generator client {
   provider = "prisma-client-js"
+  previewFeatures = ["driverAdapters"]
 }
 
 datasource db {
   provider = "postgresql"
+  url      = env("DATABASE_URL")
 }
 
 // --- Enums ---
@@ -19,6 +21,12 @@ enum ParticipantRole {
   VIEWER_ONLY
 }
 
+enum JoinRequestStatus {
+  PENDING
+  ACCEPTED
+  REJECTED
+}
+
 enum ExpenseCategory {
   ACCOMMODATION
   FOOD
@@ -59,28 +67,52 @@ model User {
   isAdmin       Boolean       @default(false)
   isBlocked     Boolean       @default(false)
   
-  createdTours  Tour[]            @relation("TourCreator")
-  tourParticipations TourParticipant[]
-  uploadedPhotos Photo[]
-  paidExpenses  Expense[]         @relation("ExpensePaidBy")
+  createdTours            Tour[]              @relation("TourCreator")
+  tourParticipations      TourParticipant[]
+  requestedJoinRequests   JoinRequest[]      @relation("JoinRequestUser")
+  receivedJoinRequests    JoinRequest[]      @relation("JoinRequester")
+  uploadedPhotos          Photo[]
+  paidExpenses            Expense[]          @relation("ExpensePaidBy")
 }
 
 model Tour {
   id          String       @id @default(uuid())
   title       String
+  description String?
   startDate   DateTime?
   endDate     DateTime?
   createdAt   DateTime     @default(now())
   totalCost   Decimal      @default(0) @db.Decimal(15, 2)
   
+  adultCount    Int        @default(1)
+  childCount    Int        @default(0)
+  childDiscount Int        @default(30)
+  
   createdById String
   creator     User         @relation("TourCreator", fields: [createdById], references: [id])
   
   participants TourParticipant[]
+  joinRequests JoinRequest[]
   legs         Leg[]
   photos       Photo[]
 }
 
+model JoinRequest {
+  id            String           @id @default(uuid())
+  tourId        String
+  userId        String
+  requestedById String
+  status        JoinRequestStatus @default(PENDING)
+  createdAt     DateTime         @default(now())
+
+  tour          Tour         @relation(fields: [tourId], references: [id], onDelete: Cascade)
+  user          User         @relation("JoinRequestUser", fields: [userId], references: [id], onDelete: Cascade)
+  requestedBy   User         @relation("JoinRequester", fields: [requestedById], references: [id], onDelete: Cascade)
+
+  @@index([tourId, status])
+  @@index([userId])
+}
+
 model TourParticipant {
   tourId      String
   userId      String
@@ -97,6 +129,9 @@ model Leg {
   tourId         String
   sequence       Int
   note           String?   @db.Text
+  startDate      DateTime?
+  endDate        DateTime?
+  description    String?   @db.Text
 
   tour           Tour      @relation(fields: [tourId], references: [id], onDelete: Cascade)
   locations      Location[]

backend/src/auth/admin.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable, CanActivate, ExecutionContext, ForbiddenException } from '@nestjs/common';
-import { PrismaService } from './prisma.service.js';
+import { PrismaService } from '../../prisma/prisma.service';
 
 @Injectable()
 export class AdminGuard implements CanActivate {

backend/src/auth/jwt.strategy.ts

@@ -1,7 +1,7 @@
 import { Injectable, UnauthorizedException } from '@nestjs/common';
 import { PassportStrategy } from '@nestjs/passport';
 import { ExtractJwt, Strategy } from 'passport-jwt';
-import { PrismaService } from './prisma.service.js';
+import { PrismaService } from '../../prisma/prisma.service';
 
 @Injectable()
 export class JwtStrategy extends PassportStrategy(Strategy) {

backend/src/common/rbac.middleware.ts

@@ -1,5 +1,5 @@
 import { Injectable, CanActivate, ExecutionContext, ForbiddenException } from '@nestjs/common';
-import { PrismaService } from './prisma.service.js';
+import { PrismaService } from '../../prisma/prisma.service';
 
 @Injectable()
 export class TourRoleGuard implements CanActivate {
@@ -7,9 +7,8 @@ export class TourRoleGuard implements CanActivate {
 
   async canActivate(context: ExecutionContext): Promise<boolean> {
     const request = context.switchToHttp().getRequest();
-    const user = request.user; // Giả sử đã qua AuthGuard (Passport/JWT)
+    const user = request.user;
     
-    // UUID không cần parseInt
     const tourId = request.params.id || request.params.tourId;
     const path = request.url;
 
@@ -17,11 +16,11 @@ export class TourRoleGuard implements CanActivate {
       throw new ForbiddenException("Thông tin xác thực hoặc mã Tour không hợp lệ.");
     }
 
-    /**
-     * TỐI ƯU: Chỉ truy vấn Database 1 lần duy nhất để lấy thông tin thành viên.
-     * Chúng ta lưu kết quả vào request object để các interceptor hoặc controller 
-     * sau này có thể dùng lại mà không cần query lại.
-     */
+    if (path.includes('/join-requests') && request.method === 'POST' && (!request.params.requestId || /\/join-requests\/[^/]+\/(accept|reject)$/.test(path))) {
+      request.tourParticipation = null;
+      return true;
+    }
+
     const participation = await this.prisma.tourParticipant.findUnique({
       where: {
         tourId_userId: {
@@ -35,14 +34,12 @@ export class TourRoleGuard implements CanActivate {
       throw new ForbiddenException("Bạn không phải là thành viên của tour này.");
     }
 
-    // Gắn thông tin vào request để sử dụng ở tầng Controller
     request.tourParticipation = participation;
 
     const role = participation.role;
     const isPlanPath = path.includes('/plans');
     const isExpensePath = path.includes('/expenses');
 
-    // Theo định nghĩa mới: MEMBER_NO_FINANCE và VIEWER_ONLY bị hạn chế
     if (
       (role === 'MEMBER_NO_FINANCE' || role === 'VIEWER_ONLY') &&
       (isPlanPath || isExpensePath)

backend/src/main.ts

@@ -1,14 +1,40 @@
+import * as dotenv from 'dotenv';
+import * as path from 'path';
+
+// Sửa đường dẫn: lùi 2 cấp từ backend/src để ra root monorepo
+const envPath = path.resolve(process.cwd(), '..', '.env');
+dotenv.config({ path: envPath });
+
 import 'reflect-metadata';
 import { NestFactory } from '@nestjs/core';
-import { Module, Controller, Get, Post, Body, Param, Patch, Delete, ParseUUIDPipe, NotFoundException, BadRequestException, UnauthorizedException, UseGuards, Req, Query } from '@nestjs/common';
-import { PrismaService } from './prisma.service.js';
-import 'dotenv/config';
+import { Module, Controller, Get, Post, Body, Param, Patch, Delete, ParseUUIDPipe, NotFoundException, BadRequestException, UnauthorizedException, UseGuards, Req, Query, ForbiddenException } from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
 import * as bcrypt from 'bcrypt';
-import { AdminGuard } from './admin.guard.js';
+import { AdminGuard } from './auth/admin.guard';
 import { JwtModule, JwtService } from '@nestjs/jwt';
-import { JwtAuthGuard } from './jwt-auth.guard.js';
-import { JwtStrategy } from './jwt.strategy.js';
-import { TourRoleGuard } from './rbac.middleware.js';
+import { JwtAuthGuard } from './auth/jwt-auth.guard';
+import { JwtStrategy } from './auth/jwt.strategy';
+import { TourRoleGuard } from './common/rbac.middleware';
+
+async function bootstrap() {
+  if (!process.env.DATABASE_URL) {
+    throw new Error('❌ DATABASE_URL không tồn tại trong biến môi trường! Kiểm tra file .env tại: ' + envPath);
+  }
+
+  // Kiểm tra log xem biến môi trường đã nhận đúng chưa
+  console.log('====================================');
+  console.log('DATABASE_URL:', process.env.DATABASE_URL);
+  console.log('====================================');
+
+  const app = await NestFactory.create(AppModule);
+  app.setGlobalPrefix('api/v1');
+  // Bật CORS để cho phép Frontend kết nối API không bị chặn
+  app.enableCors();
+
+  await app.listen(3001);
+  console.log(`🚀 Server is running on: http://localhost:3001`);
+}
+
 
 @Controller()
 class AppController {
@@ -18,7 +44,7 @@ class AppController {
   }
 }
 
-@Controller('v1/auth')
+@Controller('auth')
 class AuthController {
   constructor(private prisma: PrismaService, private jwtService: JwtService) {}
 
@@ -75,19 +101,22 @@ class AuthController {
   }
 }
 
-@Controller('v1/tours')
+@Controller('tours')
 class TourController {
   constructor(private prisma: PrismaService) {}
 
   @UseGuards(JwtAuthGuard)
   @Post()
   async createTour(@Body() body: any, @Req() req: any) {
-    const { title, startDate, endDate } = body;
+    const { title, startDate, endDate, adultCount, childCount, childDiscount } = body;
     return this.prisma.tour.create({
       data: {
         title,
         startDate: startDate ? new Date(startDate) : null,
         endDate: endDate ? new Date(endDate) : null,
+        adultCount: adultCount || 1,
+        childCount: childCount || 0,
+        childDiscount: childDiscount || 0,
         createdById: req.user.id,
         participants: {
           create: {
@@ -101,6 +130,11 @@ class TourController {
             note: 'Chặng khởi đầu'
           }
         }
+      },
+      include: {
+        participants: {
+          include: { user: { select: { id: true, name: true, email: true } } }
+        }
       }
     });
   }
@@ -290,8 +324,12 @@ class TourController {
       where: { id },
       data: {
         title: body.title,
+        description: body.description,
         startDate: body.startDate ? new Date(body.startDate) : undefined,
         endDate: body.endDate ? new Date(body.endDate) : undefined,
+        adultCount: body.adultCount !== undefined ? Number(body.adultCount) : undefined,
+        childCount: body.childCount !== undefined ? Number(body.childCount) : undefined,
+        childDiscount: body.childDiscount !== undefined ? Number(body.childDiscount) : undefined,
       },
     });
   }
@@ -361,7 +399,7 @@ class TourController {
   async addMember(@Param('tourId', ParseUUIDPipe) tourId: string, @Body() body: { userId: string; role?: string }, @Req() req: any) {
     const validRoles = ['OWNER', 'MANAGER', 'MEMBER', 'MEMBER_NO_FINANCE', 'VIEWER_ONLY'] as const;
     const role = validRoles.includes(body.role as any) ? body.role as 'OWNER' | 'MANAGER' | 'MEMBER' | 'MEMBER_NO_FINANCE' | 'VIEWER_ONLY' : 'MEMBER';
-    
+
     const participation = await this.prisma.tourParticipant.findUnique({
       where: { tourId_userId: { tourId, userId: body.userId } },
     });
@@ -372,6 +410,30 @@ class TourController {
         include: { user: { select: { id: true, name: true, email: true } } },
       });
     }
+
+    let currentRole = req.user.tourParticipation?.role;
+    if (!currentRole) {
+      const participation = await this.prisma.tourParticipant.findUnique({
+        where: { tourId_userId: { tourId, userId: req.user.id } },
+      });
+      currentRole = participation?.role;
+    }
+    if (!currentRole || !(currentRole === 'OWNER' || currentRole === 'MANAGER')) {
+      const joinRequest = await this.prisma.joinRequest.create({
+        data: {
+          tourId,
+          userId: body.userId,
+          requestedById: req.user.id,
+          status: 'PENDING',
+        },
+        include: {
+          user: { select: { id: true, name: true, email: true } },
+          requestedBy: { select: { id: true, name: true, email: true } },
+        },
+      });
+      return { ...joinRequest, pendingApproval: true };
+    }
+
     return this.prisma.tourParticipant.create({
       data: {
         tourId,
@@ -381,9 +443,158 @@ class TourController {
       include: { user: { select: { id: true, name: true, email: true } } },
     });
   }
+
+  @UseGuards(JwtAuthGuard, TourRoleGuard)
+  @Get(':tourId/join-requests')
+  async getJoinRequests(@Param('tourId', ParseUUIDPipe) tourId: string, @Req() req: any) {
+    const requests = await this.prisma.joinRequest.findMany({
+      where: { tourId, status: 'PENDING' },
+      orderBy: { createdAt: 'desc' },
+      include: {
+        user: { select: { id: true, name: true, email: true } },
+        requestedBy: { select: { id: true, name: true, email: true } },
+      },
+    });
+
+    return requests;
+  }
+
+  @UseGuards(JwtAuthGuard, TourRoleGuard)
+  @Post(':tourId/join-requests')
+  async createJoinRequest(@Param('tourId', ParseUUIDPipe) tourId: string, @Body() body: { userId?: string }, @Req() req: any) {
+    const requestingUserId = body.userId || req.user.id;
+
+    const existingParticipation = await this.prisma.tourParticipant.findUnique({
+      where: { tourId_userId: { tourId, userId: requestingUserId } },
+    });
+    if (existingParticipation) {
+      throw new BadRequestException('Người dùng này đã là thành viên của tour.');
+    }
+
+    const pendingRequest = await this.prisma.joinRequest.findFirst({
+      where: { tourId, userId: requestingUserId, status: 'PENDING' },
+    });
+    if (pendingRequest) {
+      return pendingRequest;
+    }
+
+    const joinRequest = await this.prisma.joinRequest.create({
+      data: {
+        tourId,
+        userId: requestingUserId,
+        requestedById: req.user.id,
+        status: 'PENDING',
+      },
+      include: {
+        user: { select: { id: true, name: true, email: true } },
+        requestedBy: { select: { id: true, name: true, email: true } },
+      },
+    });
+
+    return joinRequest;
+  }
+
+  @UseGuards(JwtAuthGuard, TourRoleGuard)
+  @Post(':tourId/join-requests/:requestId/accept')
+  async acceptJoinRequest(@Param('tourId', ParseUUIDPipe) tourId: string, @Param('requestId') requestId: string, @Req() req: any) {
+    let role = req.user.tourParticipation?.role;
+    if (!role) {
+      const participation = await this.prisma.tourParticipant.findUnique({
+        where: { tourId_userId: { tourId, userId: req.user.id } },
+      });
+      role = participation?.role;
+    }
+    if  (!role || !(role === 'OWNER' || role === 'MANAGER')) {
+      throw new ForbiddenException('Bạn không có quyền chấp nhận yêu cầu tham gia.');
+    }
+
+    const joinRequest = await this.prisma.joinRequest.findUnique({
+      where: { id: requestId },
+    });
+    if (!joinRequest || joinRequest.tourId !== tourId) {
+      throw new NotFoundException('Không tìm thấy yêu cầu tham gia.');
+    }
+    if (joinRequest.status !== 'PENDING') {
+      throw new BadRequestException('Yêu cầu này đã được xử lý trước đó.');
+    }
+
+    const existing = await this.prisma.tourParticipant.findUnique({
+      where: { tourId_userId: { tourId, userId: joinRequest.userId } },
+    });
+    if (existing) {
+      await this.prisma.joinRequest.update({
+        where: { id: requestId },
+        data: { status: 'REJECTED' },
+      });
+      return { success: true, message: 'Người dùng đã là thành viên, yêu cầu đã bị từ chối.' };
+    }
+
+    await this.prisma.$transaction([
+      this.prisma.tourParticipant.create({
+        data: {
+          tourId,
+          userId: joinRequest.userId,
+          role: 'MEMBER',
+        },
+      }),
+      this.prisma.joinRequest.update({
+        where: { id: requestId },
+        data: { status: 'ACCEPTED' },
+      }),
+    ]);
+
+    return { success: true, message: 'Đã chấp nhận yêu cầu tham gia.' };
+  }
+
+  @UseGuards(JwtAuthGuard, TourRoleGuard)
+  @Post(':tourId/join-requests/:requestId/reject')
+  async rejectJoinRequest(@Param('tourId', ParseUUIDPipe) tourId: string, @Param('requestId') requestId: string, @Req() req: any) {
+    let role = req.user.tourParticipation?.role;
+    if (!role) {
+      const participation = await this.prisma.tourParticipant.findUnique({
+        where: { tourId_userId: { tourId, userId: req.user.id } },
+      });
+      role = participation?.role;
+    }
+    if (!role || role !== 'OWNER') {
+      throw new ForbiddenException('Bạn không có quyền từ chối yêu cầu tham gia.');
+    }
+
+    const joinRequest = await this.prisma.joinRequest.findUnique({
+      where: { id: requestId },
+    });
+    if (!joinRequest || joinRequest.tourId !== tourId) {
+      throw new NotFoundException('Không tìm thấy yêu cầu tham gia.');
+    }
+    if (joinRequest.status !== 'PENDING') {
+      throw new BadRequestException('Yêu cầu này đã được xử lý trước đó.');
+    }
+
+    await this.prisma.joinRequest.update({
+      where: { id: requestId },
+      data: { status: 'REJECTED' },
+    });
+
+    return { success: true, message: 'Đã từ chối yêu cầu tham gia.' };
+  }
+
+  @UseGuards(JwtAuthGuard, TourRoleGuard)
+  @Delete(':tourId/members/:userId')
+  async removeMember(@Param('tourId', ParseUUIDPipe) tourId: string, @Param('userId', ParseUUIDPipe) userId: string) {
+    const participation = await this.prisma.tourParticipant.findUnique({
+      where: { tourId_userId: { tourId, userId } },
+    });
+    if (!participation) {
+      throw new NotFoundException('Thành viên này không có trong tour');
+    }
+    await this.prisma.tourParticipant.delete({
+      where: { tourId_userId: { tourId, userId } },
+    });
+    return { message: 'Đã xóa thành viên khỏi tour' };
+  }
 }
 
-@Controller('v1/locations')
+@Controller('locations')
 @UseGuards(JwtAuthGuard)
 class LocationController {
   constructor(private prisma: PrismaService) {}
@@ -440,7 +651,7 @@ class LocationController {
   }
 }
 
-@Controller('v1/legs')
+@Controller('legs')
 @UseGuards(JwtAuthGuard)
 class LegController {
   constructor(private prisma: PrismaService) {}
@@ -451,7 +662,10 @@ class LegController {
       where: { id },
       data: {
         note: body.note,
-        sequence: body.sequence
+        sequence: body.sequence,
+        startDate: body.startDate ? new Date(body.startDate) : undefined,
+        endDate: body.endDate ? new Date(body.endDate) : undefined,
+        description: body.description,
       }
     });
   }
@@ -484,7 +698,7 @@ function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: numbe
   return 12742 * Math.asin(Math.sqrt(a)); // 2 * R; R = 6371 km
 }
 
-@Controller('v1/routing')
+@Controller('routing')
 class RoutingController {
   constructor(private prisma: PrismaService) {}
 
@@ -597,7 +811,7 @@ class RoutingController {
   }
 }
 
-@Controller('v1/users')
+@Controller('users')
 class UserController {
   constructor(private prisma: PrismaService) {}
 
@@ -665,18 +879,10 @@ class UserController {
     }),
   ],
   controllers: [AppController, AuthController, TourController, UserController, RoutingController, LegController, LocationController], 
-  providers: [PrismaService, JwtStrategy, TourRoleGuard], 
+  providers: [PrismaService, JwtStrategy, TourRoleGuard, JwtAuthGuard, AdminGuard], 
   exports: [PrismaService] 
 })
 class AppModule {}
 
-async function bootstrap() {
-  const app = await NestFactory.create(AppModule);
-  app.enableCors(); // Cho phép Frontend gọi API
-  app.setGlobalPrefix('api'); // Tất cả API sẽ bắt đầu bằng /api/...
-  
-  const port = process.env.PORT || 3001;
-  await app.listen(port);
-  console.log(`🚀 Server is running on: http://localhost:${port}`);
-}
+
 bootstrap();

backend/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "moduleResolution": "node", // Đảm bảo module resolution là 'node'
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "ES2021",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "skipLibCheck": true,
+    "strictNullChecks": false,
+    "noImplicitAny": false,
+    "strictBindCallApply": false,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": false,
+    "resolveJsonModule": true, // Cho phép import các file .json
+    "esModuleInterop": true,   // Cho phép cú pháp import/export ES Modules với CommonJS
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*"]
+}

components/NotificationModal.tsx

@@ -0,0 +1,208 @@
+import React, { useState } from 'react';
+
+// Types for notification modal
+export interface NotificationModalProps {
+  isOpen: boolean;
+  title?: string;
+  message: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  type?: 'info' | 'success' | 'warning' | 'error';
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+}
+
+// Icon components for different types
+const Icons = {
+  info: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
+      <path d="M12 16v-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <path d="M12 8h.01" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+    </svg>
+  ),
+  success: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
+      <path d="M8 12l2.5 2.5L15.5 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  warning: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} viewBox="0 0 24 24" fill="none">
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke="currentColor" strokeWidth="2" />
+      <line x1="12" y1="9" x2="12" y2="13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <circle cx="12" cy="17" r="1" fill="currentColor" />
+    </svg>
+  ),
+  error: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
+      <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  ),
+};
+
+// Default props
+const defaultProps: Partial<NotificationModalProps> = {
+  title: 'Thông báo',
+  type: 'info',
+  confirmButtonText: 'OK',
+  cancelButtonText: 'Hủy',
+};
+
+export const NotificationModal: React.FC<NotificationModalProps> = ({
+  isOpen,
+  title = defaultProps.title,
+  message,
+  onConfirm,
+  onCancel,
+  type = defaultProps.type,
+  confirmButtonText = defaultProps.confirmButtonText,
+  cancelButtonText = defaultProps.cancelButtonText,
+}) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  // Get colors based on type
+  const getTypeStyles = () => {
+    switch (type) {
+      case 'success':
+        return { bg: '#d4edda', border: '#c3e6cb', text: '#155724' };
+      case 'warning':
+        return { bg: '#fff3cd', border: '#ffeeba', text: '#856404' };
+      case 'error':
+        return { bg: '#f8d7da', border: '#f5c6cb', text: '#721c24' };
+      default:
+        return { bg: '#e2e3e5', border: '#d6d8db', text: '#383d41' };
+    }
+  };
+
+  const styles = getTypeStyles();
+
+  // Animation classes based on state
+  const getAnimationClass = () => {
+    if (!isOpen) return 'opacity-0 translate-y-4';
+    if (isAnimating && onCancel) return 'animate-fade-out';
+    return 'animate-fade-in';
+  };
+
+  // Handle confirm click
+  const handleConfirm = () => {
+    setIsAnimating(true);
+    onConfirm?.();
+    setTimeout(() => setIsAnimating(false), 300);
+  };
+
+  // Handle cancel click
+  const handleCancel = () => {
+    setIsAnimating(true);
+    onCancel?.();
+    setTimeout(() => setIsAnimating(false), 300);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4">
+      <div
+        className={`bg-white rounded-lg shadow-xl max-w-md w-full transform transition-all duration-300 ${getAnimationClass()}`}
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        aria-describedby="modal-message"
+      >
+        {/* Header */}
+        <div className={`p-6 border-b ${styles.border}`}>
+          <div className="flex items-center gap-3">
+            {type === 'success' && <Icons.success className="w-5 h-5 text-green-600" />}
+            {type === 'warning' && <Icons.warning className="w-5 h-5 text-yellow-600" />}
+            {type === 'error' && <Icons.error className="w-5 h-5 text-red-600" />}
+            {type === 'info' && <Icons.info className="w-5 h-5 text-blue-600" />}
+            <h2 id="modal-title" className={`text-xl font-semibold ${styles.text}`}>
+              {title}
+            </h2>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="p-6">
+          <p id="modal-message" className="text-gray-700 leading-relaxed">{message}</p>
+        </div>
+
+        {/* Footer */}
+        <div className={`px-6 py-4 flex justify-end gap-3 border-t ${styles.border}`}>
+          {onCancel && (
+            <button
+              onClick={handleCancel}
+              className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
+            >
+              {cancelButtonText}
+            </button>
+          )}
+          {onConfirm && (
+            <button
+              onClick={handleConfirm}
+              className={`px-4 py-2 text-white rounded-md font-medium transition-colors ${
+                type === 'error'
+                  ? 'bg-red-600 hover:bg-red-700'
+                  : 'bg-blue-600 hover:bg-blue-700'
+              }`}
+            >
+              {confirmButtonText}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Hook for easy usage without props management
+export const useNotificationModal = () => {
+  const [modalState, setModalState] = useState<{
+    isOpen: boolean;
+    title?: string;
+    message: string;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    onConfirm?: () => void;
+    onCancel?: () => void;
+  } | null>(null);
+
+  const openModal = (
+    title: string,
+    message: string,
+    type: 'info' | 'success' | 'warning' | 'error' = 'info',
+    onConfirm?: () => void,
+    onCancel?: () => void,
+  ) => {
+    setModalState({
+      isOpen: true,
+      title,
+      message,
+      type,
+      onConfirm,
+      onCancel,
+    });
+
+    // Auto-close after 5 seconds if no confirm action
+    const timer = setTimeout(() => {
+      if (onCancel) {
+        setModalState((prev) => ({ ...prev, isOpen: false }));
+      }
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  };
+
+  const closeModal = () => {
+    setModalState((prev) => prev ? { ...prev, isOpen: false } : null);
+  };
+
+  return {
+    modalState,
+    openModal,
+    closeModal,
+  };
+};
+
+export default NotificationModal;

dist/AddMemberModal.d.ts

@@ -3,6 +3,29 @@ interface AddMemberModalProps {
     isOpen: boolean;
     onClose: () => void;
     tourId: string;
+    participants?: Array<{
+        userId: string;
+        role: string;
+        user?: {
+            id: string;
+            name: string;
+            email: string;
+        };
+    }>;
+    joinRequests?: Array<{
+        id: string;
+        userId: string;
+        user?: {
+            id: string;
+            name: string;
+            email: string;
+        };
+        status: string;
+        requestedById: string;
+    }>;
+    onRemoveMember?: (userId: string) => Promise<void>;
+    onMemberAdded?: () => void;
+    userRole?: string;
 }
 export declare const AddMemberModal: React.FC<AddMemberModalProps>;
 export {};

dist/AddMemberModal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { X, Search, UserPlus, Loader2, Shield } from 'lucide-react';
-export const AddMemberModal = ({ isOpen, onClose, tourId }) => {
+import { useState, useEffect, useMemo } from 'react';
+import { X, UserPlus, Loader2, Shield, Trash2, Clock } from 'lucide-react';
+export const AddMemberModal = ({ isOpen, onClose, tourId, participants = [], joinRequests = [], onRemoveMember, onMemberAdded, userRole }) => {
     const [query, setQuery] = useState('');
     const [users, setUsers] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -10,6 +10,13 @@ export const AddMemberModal = ({ isOpen, onClose, tourId }) => {
     const [submitting, setSubmitting] = useState(false);
     const [fetchError, setFetchError] = useState('');
     const [submitError, setSubmitError] = useState('');
+    const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+    const [confirmTarget, setConfirmTarget] = useState(null);
+    const [actionLoading, setActionLoading] = useState(null);
+    const participantIds = useMemo(() => new Set(participants.map((p) => p.userId)), [participants]);
+    const requestUserIds = useMemo(() => new Set(joinRequests.map((r) => r.userId)), [joinRequests]);
+    const visibleUsers = useMemo(() => users.filter((u) => !participantIds.has(u.id)), [users, participantIds]);
+    const canCreateDirectly = !userRole || userRole === 'OWNER' || userRole === 'MANAGER';
     const fetchUsers = async () => {
         setLoading(true);
         setFetchError('');
@@ -21,7 +28,7 @@ export const AddMemberModal = ({ isOpen, onClose, tourId }) => {
             if (!res.ok)
                 throw new Error('Không thể tải danh sách người dùng');
             const data = await res.json();
-            setUsers(data);
+            setUsers(Array.isArray(data) ? data : []);
         }
         catch (err) {
             setFetchError(err.message || 'Không thể tải danh sách người dùng');
@@ -41,30 +48,83 @@ export const AddMemberModal = ({ isOpen, onClose, tourId }) => {
             setSelectedUser(null);
             setRole('MEMBER');
             setFetchError('');
+            setSubmitError('');
         }
     }, [isOpen]);
+    const handleRemove = async (userId, memberName) => {
+        if (!onRemoveMember)
+            return;
+        setConfirmTarget({ userId, name: memberName });
+        setIsConfirmOpen(true);
+    };
+    const confirmRemove = async () => {
+        if (!confirmTarget || !onRemoveMember)
+            return;
+        try {
+            await onRemoveMember(confirmTarget.userId);
+        }
+        catch (err) {
+            setSubmitError(err.message || 'Không thể xóa thành viên');
+        }
+        finally {
+            setIsConfirmOpen(false);
+            setConfirmTarget(null);
+        }
+    };
+    const handleRequestAction = async (reqId, action, userName) => {
+        if (!onMemberAdded)
+            return;
+        setActionLoading(reqId);
+        try {
+            const API_BASE = `http://${window.location.hostname}:3001`;
+            const endpoint = action === 'accept'
+                ? `${API_BASE}/api/v1/tours/${tourId}/join-requests/${reqId}/accept`
+                : `${API_BASE}/api/v1/tours/${tourId}/join-requests/${reqId}/reject`;
+            const res = await fetch(endpoint, {
+                method: 'POST',
+                headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` },
+            });
+            if (!res.ok) {
+                const data = await res.json().catch(() => ({}));
+                throw new Error(data.message || data.error || (action === 'accept' ? 'Không thể chấp nhận' : 'Không thể từ chối'));
+            }
+            await onMemberAdded();
+        }
+        catch (err) {
+            alert(err.message || 'Thao tác thất bại');
+        }
+        finally {
+            setActionLoading(null);
+        }
+    };
     const handleAdd = async () => {
         if (!selectedUser)
             return;
         setSubmitting(true);
+        setSubmitError('');
         try {
             const API_BASE = `http://${window.location.hostname}:3001`;
-            const res = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members`, {
+            const endpoint = canCreateDirectly ? `/api/v1/tours/${tourId}/members` : `/api/v1/tours/${tourId}/join-requests`;
+            const body = canCreateDirectly
+                ? { userId: selectedUser, role }
+                : { userId: selectedUser };
+            const res = await fetch(`${API_BASE}${endpoint}`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                     'Authorization': `Bearer ${localStorage.getItem('token')}`,
                 },
-                body: JSON.stringify({ userId: selectedUser, role }),
+                body: JSON.stringify(body),
             });
             if (!res.ok) {
                 const data = await res.json();
-                throw new Error(data.message || 'Thêm thành viên thất bại');
+                throw new Error(data.message || data.error || 'Thao tác thất bại');
             }
+            await onMemberAdded?.();
             onClose();
         }
         catch (err) {
-            alert(err.message);
+            setSubmitError(err.message || 'Thao tác thất bại');
         }
         finally {
             setSubmitting(false);
@@ -72,9 +132,23 @@ export const AddMemberModal = ({ isOpen, onClose, tourId }) => {
     };
     if (!isOpen)
         return null;
-    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/60 backdrop-blur-sm", onClick: onClose }), _jsxs("div", { className: "relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]", children: [_jsxs("div", { className: "p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50", children: [_jsxs("div", { children: [_jsxs("h2", { className: "text-lg font-bold text-gray-900 flex items-center gap-2", children: [_jsx(UserPlus, { className: "w-5 h-5 text-blue-600" }), " Th\u00EAm th\u00E0nh vi\u00EAn"] }), _jsx("p", { className: "text-xs text-gray-500", children: "Ch\u1ECDn ng\u01B0\u1EDDi d\u00F9ng v\u00E0 ph\u00E2n quy\u1EC1n cho tour n\u00E0y." })] }), _jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-200 rounded-full transition-colors", children: _jsx(X, { className: "w-5 h-5 text-gray-400" }) })] }), _jsxs("div", { className: "p-5 space-y-4", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" }), _jsx("input", { className: "w-full pl-9 pr-4 py-2.5 bg-gray-50 border border-gray-100 rounded-xl outline-none text-sm", placeholder: "T\u00ECm theo t\u00EAn ho\u1EB7c email...", value: query, onChange: (e) => setQuery(e.target.value), onBlur: fetchUsers })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-xs font-bold text-gray-700 ml-1", children: "Ph\u00E2n quy\u1EC1n" }), _jsxs("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), children: [_jsx("option", { value: "OWNER", children: "OWNER" }), _jsx("option", { value: "MANAGER", children: "MANAGER" }), _jsx("option", { value: "MEMBER", children: "MEMBER" }), _jsx("option", { value: "MEMBER_NO_FINANCE", children: "MEMBER_NO_FINANCE" }), _jsx("option", { value: "VIEWER_ONLY", children: "VIEWER_ONLY" })] })] }), _jsxs("div", { className: "space-y-2", children: [fetchError && (_jsx("div", { className: "p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100", children: fetchError })), loading ? (_jsx("div", { className: "flex justify-center py-10", children: _jsx(Loader2, { className: "w-8 h-8 animate-spin text-blue-600" }) })) : (_jsxs("div", { className: "space-y-2 max-h-[40vh] overflow-y-auto pr-1", children: [users.map((u) => {
+    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/60 backdrop-blur-sm", onClick: onClose }), _jsxs("div", { className: "relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]", children: [_jsxs("div", { className: "p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50", children: [_jsxs("div", { children: [_jsxs("h2", { className: "text-lg font-bold text-gray-900 flex items-center gap-2", children: [_jsx(UserPlus, { className: "w-5 h-5 text-blue-600" }), " ", canCreateDirectly ? 'Thêm thành viên' : 'Mời tham gia tour'] }), _jsx("p", { className: "text-xs text-gray-500", children: 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.' })] }), _jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-200 rounded-full transition-colors", children: _jsx(X, { className: "w-5 h-5 text-gray-400" }) })] }), _jsxs("div", { className: "p-5 space-y-4", children: [_jsxs("div", { children: [_jsxs("p", { className: "text-[11px] font-bold text-gray-500 mb-2", children: ["Th\u00E0nh vi\u00EAn c\u1EE7a tour (", participants.length, ")"] }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [participants.map((p) => {
+                                                const rawToken = localStorage.getItem('token');
+                                                let currentUserId = null;
+                                                try {
+                                                    const payload = JSON.parse(atob((rawToken || '').split('.')[1]));
+                                                    currentUserId = payload.sub;
+                                                }
+                                                catch {
+                                                    currentUserId = null;
+                                                }
+                                                const isCurrentUser = currentUserId && p.userId === currentUserId;
+                                                const isOwner = p.role === 'OWNER';
+                                                const canRemove = onRemoveMember && !isCurrentUser && !isOwner;
+                                                return (_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsxs("div", { className: "relative", children: [_jsx("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", children: p.user?.name?.charAt(0) || '?' }), canRemove && (_jsx("button", { onClick: () => handleRemove(p.userId, p.user?.name || p.userId), 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", children: _jsx(Trash2, { size: 10 }) }))] }), _jsx("span", { className: "text-[10px] font-semibold text-gray-700 max-w-[72px] truncate", children: p.user?.name || p.userId })] }, p.userId));
+                                            }), participants.length === 0 && (_jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 th\u00E0nh vi\u00EAn n\u00E0o" }))] })] }), joinRequests.length > 0 && (_jsxs("div", { children: [_jsxs("p", { className: "text-[11px] font-bold text-gray-500 mb-2 flex items-center gap-1", children: [_jsx(Clock, { className: "w-3 h-3 text-amber-500" }), " \u0110ang ch\u1EDD ph\u00EA duy\u1EC7t (", joinRequests.length, ")"] }), _jsx("div", { className: "flex flex-wrap gap-3", children: joinRequests.map((req) => (_jsxs("div", { className: "flex flex-col items-center gap-1 relative", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-amber-50 border border-amber-200 flex items-center justify-center text-amber-600 font-bold text-sm overflow-hidden", children: req.user?.name?.charAt(0) || '?' }), _jsxs("div", { className: "absolute -top-1 -right-1 flex", children: [_jsx("button", { type: "button", disabled: actionLoading === req.id, onClick: () => handleRequestAction(req.id, 'accept', req.user?.name || req.userId), 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", children: "+" }), _jsx("button", { type: "button", disabled: actionLoading === req.id, onClick: () => handleRequestAction(req.id, 'reject', req.user?.name || req.userId), 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", children: "x" })] }), _jsx("span", { className: "text-[10px] font-semibold text-gray-700 max-w-[72px] truncate", children: req.user?.name || req.userId }), _jsx("span", { className: "text-[9px] font-bold text-amber-600 bg-amber-100 px-1.5 py-0.5 rounded-full border border-amber-200", children: "PENDING" })] }, req.id))) })] })), canCreateDirectly && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-xs font-bold text-gray-700 ml-1", children: "Ph\u00E2n quy\u1EC1n" }), _jsxs("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), children: [_jsx("option", { value: "OWNER", children: "OWNER" }), _jsx("option", { value: "MANAGER", children: "MANAGER" }), _jsx("option", { value: "MEMBER", children: "MEMBER" }), _jsx("option", { value: "MEMBER_NO_FINANCE", children: "MEMBER_NO_FINANCE" }), _jsx("option", { value: "VIEWER_ONLY", children: "VIEWER_ONLY" })] })] })), _jsxs("div", { className: "space-y-2", children: [fetchError && (_jsx("div", { className: "p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100", children: fetchError })), submitError && (_jsx("div", { className: "p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100", children: submitError })), loading ? (_jsx("div", { className: "flex justify-center py-10", children: _jsx(Loader2, { className: "w-8 h-8 animate-spin text-blue-600" }) })) : (_jsxs("div", { className: "space-y-2 max-h-[40vh] overflow-y-auto pr-1", children: [visibleUsers.map((u) => {
                                                 const isSelected = selectedUser === u.id;
-                                                return (_jsxs("button", { onClick: () => setSelectedUser(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'}`, children: [_jsx("div", { className: "w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold", children: u.name?.charAt(0) || '?' }), _jsxs("div", { className: "flex-1 text-left", children: [_jsx("div", { className: "text-sm font-bold text-gray-900", children: u.name || 'Chưa đặt tên' }), _jsx("div", { className: "text-[11px] text-gray-500", children: u.email }), _jsxs("div", { className: "text-[11px] text-gray-400", children: [u.phone || '', " ", u.address ? `• ${u.address}` : ''] })] }), _jsxs("div", { className: "flex items-center gap-1 text-[10px] font-bold text-gray-500", children: [u.isAdmin ? (_jsx("span", { className: "px-2 py-1 bg-purple-50 text-purple-600 rounded-md border border-purple-100", children: "ADMIN" })) : (_jsx("span", { className: "px-2 py-1 bg-gray-50 text-gray-500 rounded-md border border-gray-100", children: "USER" })), isSelected && _jsx(Shield, { className: "w-3 h-3 text-blue-600" })] })] }, u.id));
-                                            }), !loading && users.length === 0 && (_jsx("div", { className: "text-center py-8 text-sm text-gray-500", children: "Kh\u00F4ng t\u00ECm th\u1EA5y ng\u01B0\u1EDDi d\u00F9ng ph\u00F9 h\u1EE3p" }))] }))] })] }), _jsxs("div", { className: "p-5 border-t border-gray-100 flex justify-end gap-2", children: [_jsx("button", { onClick: onClose, className: "px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors", children: "H\u1EE7y" }), _jsx("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", children: submitting ? 'Đang thêm...' : 'Thêm vào tour' })] })] })] }));
+                                                return (_jsxs("button", { 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' : ''}`, children: [_jsx("div", { className: "w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold", children: u.name?.charAt(0) || '?' }), _jsxs("div", { className: "flex-1 text-left", children: [_jsx("div", { className: "text-sm font-bold text-gray-900", children: u.name || 'Chưa đặt tên' }), _jsx("div", { className: "text-[11px] text-gray-500", children: u.email }), _jsxs("div", { className: "text-[11px] text-gray-400", children: [u.phone || '', " ", u.address ? `• ${u.address}` : ''] })] }), _jsxs("div", { className: "flex items-center gap-1 text-[10px] font-bold text-gray-500", children: [u.isAdmin ? (_jsx("span", { className: "px-2 py-1 bg-purple-50 text-purple-600 rounded-md border border-purple-100", children: "ADMIN" })) : (_jsx("span", { className: "px-2 py-1 bg-gray-50 text-gray-500 rounded-md border border-gray-100", children: "USER" })), isSelected && _jsx(Shield, { className: "w-3 h-3 text-blue-600" })] })] }, u.id));
+                                            }), !loading && visibleUsers.length === 0 && (_jsx("div", { className: "text-center py-8 text-sm text-gray-500", children: "Kh\u00F4ng t\u00ECm th\u1EA5y ng\u01B0\u1EDDi d\u00F9ng ph\u00F9 h\u1EE3p" }))] }))] })] }), _jsxs("div", { className: "p-5 border-t border-gray-100 flex justify-end gap-2", children: [_jsx("button", { onClick: onClose, className: "px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors", children: "H\u1EE7y" }), _jsx("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", children: submitting ? 'Đang xử lý...' : canCreateDirectly ? 'Thêm vào tour' : 'Gửi lời mời' })] })] }), isConfirmOpen && (_jsxs("div", { className: "fixed inset-0 z-[2100] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/70 backdrop-blur-sm", onClick: () => setIsConfirmOpen(false) }), _jsxs("div", { className: "relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5", children: [_jsx("h3", { className: "text-base font-bold text-gray-900", children: "X\u00E1c nh\u1EADn x\u00F3a th\u00E0nh vi\u00EAn" }), _jsxs("p", { className: "mt-2 text-sm text-gray-600", children: ["B\u1EA1n c\u00F3 ch\u1EAFc mu\u1ED1n x\u00F3a ", _jsx("span", { className: "font-semibold text-gray-800", children: confirmTarget?.name }), " kh\u1ECFi tour n\u00E0y?"] }), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx("button", { onClick: () => setIsConfirmOpen(false), className: "px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors", children: "H\u1EE7y" }), _jsx("button", { onClick: confirmRemove, className: "px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold transition-colors", children: "X\u00F3a" })] })] })] }))] }));
 };
 //# sourceMappingURL=AddMemberModal.js.map

dist/ConfirmModal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ConfirmModalProps {
+    isOpen: boolean;
+    title?: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+export declare const ConfirmModal: React.FC<ConfirmModalProps>;
+export {};

dist/ConfirmModal.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ConfirmModal = ({ isOpen, title = 'Xác nhận', message, confirmText = 'Xác nhận', cancelText = 'Hủy', onConfirm, onCancel, }) => {
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: "fixed inset-0 z-[2200] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/70 backdrop-blur-sm", onClick: onCancel }), _jsxs("div", { className: "relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5", children: [_jsx("h3", { className: "text-base font-bold text-gray-900", children: title }), _jsx("p", { className: "mt-2 text-sm text-gray-600", children: message }), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx("button", { onClick: onCancel, className: "px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors", children: cancelText }), _jsx("button", { onClick: onConfirm, className: "px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold transition-colors", children: confirmText })] })] })] }));
+};
+//# sourceMappingURL=ConfirmModal.js.map

dist/ConfirmModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../ConfirmModal.tsx"],"names":[],"mappings":";AAaA,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,MAAM,EACN,KAAK,GAAG,UAAU,EAClB,OAAO,EACP,WAAW,GAAG,UAAU,EACxB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,QAAQ,GACT,EAAE,EAAE;IACH,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,OAAO,CACL,eAAK,SAAS,EAAC,6DAA6D,aAC1E,cAAK,SAAS,EAAC,kDAAkD,EAAC,OAAO,EAAE,QAAQ,GAAI,EACvF,eAAK,SAAS,EAAC,8DAA8D,aAC3E,aAAI,SAAS,EAAC,mCAAmC,YAAE,KAAK,GAAM,EAC9D,YAAG,SAAS,EAAC,4BAA4B,YAAE,OAAO,GAAK,EACvD,eAAK,SAAS,EAAC,6BAA6B,aAC1C,iBAAQ,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAC,0FAA0F,YAC5H,UAAU,GACJ,EACT,iBAAQ,OAAO,EAAE,SAAS,EAAE,SAAS,EAAC,iGAAiG,YACpI,WAAW,GACL,IACL,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}

dist/CreateTourModal.js

@@ -1,30 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { X, Map as MapIcon, Loader2 } from 'lucide-react';
+import { Trash2 } from 'lucide-react';
 import { useTourStore } from './useTourStore.js';
 export const CreateTourModal = ({ isOpen, onClose, onSuccess }) => {
     const [title, setTitle] = useState('');
     const [startDate, setStartDate] = useState('');
     const [endDate, setEndDate] = useState('');
     const [isLoading, setIsLoading] = useState(false);
-    const createTour = useTourStore(state => state.createTour);
+    const createTour = useTourStore((state) => state.createTour);
+    const [members, setMembers] = useState([]);
+    const [query, setQuery] = useState('');
+    const [results, setResults] = useState([]);
+    const [error, setError] = useState('');
     if (!isOpen)
         return null;
+    const searchUsers = async (value) => {
+        setQuery(value);
+        if (!value.trim()) {
+            setResults([]);
+            return;
+        }
+        try {
+            const API_BASE = `http://${window.location.hostname}:3001`;
+            const res = await fetch(`${API_BASE}/api/v1/users?q=${encodeURIComponent(value)}`, {
+                headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
+            });
+            if (!res.ok)
+                throw new Error('Không thể tải người dùng');
+            const data = await res.json();
+            setResults(Array.isArray(data) ? data : []);
+        }
+        catch (e) {
+            setResults([]);
+            setError(e.message || 'Không thể tải người dùng');
+        }
+    };
+    const confirmAddMember = (user) => {
+        setMembers((prev) => (prev.some((m) => m.id === user.id) ? prev : [...prev, user]));
+        setQuery('');
+        setResults([]);
+        setError('');
+    };
+    const removeMember = (userId) => {
+        setMembers((prev) => prev.filter((m) => m.id !== userId));
+    };
     const handleSubmit = async (e) => {
         e.preventDefault();
         setIsLoading(true);
+        setError('');
         try {
-            const tour = await createTour({ title, startDate, endDate });
+            const memberIds = members.map((m) => m.id);
+            const tour = await createTour({ title, startDate, endDate, memberIds });
             onSuccess(tour);
             onClose();
         }
-        catch (error) {
-            alert('Lỗi khi tạo tour');
+        catch (e) {
+            setError(e.message || 'Lỗi khi tạo tour');
         }
         finally {
             setIsLoading(false);
         }
     };
-    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/60 backdrop-blur-sm", onClick: onClose }), _jsxs("div", { className: "relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden p-8", children: [_jsxs("div", { className: "flex justify-between items-center mb-6", children: [_jsxs("h2", { className: "text-2xl font-bold text-gray-900 flex items-center gap-2", children: [_jsx(MapIcon, { className: "w-6 h-6 text-blue-600" }), " T\u1EA1o Tour m\u1EDBi"] }), _jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: _jsx(X, { className: "w-6 h-6 text-gray-400" }) })] }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-1", children: "T\u00EAn Tour" }), _jsx("input", { required: true, 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", value: title, onChange: e => setTitle(e.target.value), placeholder: "VD: Kh\u00E1m ph\u00E1 \u0110\u00E0 L\u1EA1t" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-1", children: "B\u1EAFt \u0111\u1EA7u" }), _jsx("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", value: startDate, onChange: e => setStartDate(e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-1", children: "K\u1EBFt th\u00FAc" }), _jsx("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", value: endDate, onChange: e => setEndDate(e.target.value) })] })] }), _jsx("button", { disabled: isLoading, className: "w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg transition-all flex items-center justify-center gap-2", children: isLoading ? _jsx(Loader2, { className: "w-5 h-5 animate-spin" }) : 'Xác nhận tạo Tour' })] })] })] }));
+    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/60 backdrop-blur-sm", onClick: onClose }), _jsxs("div", { className: "relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden p-6", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("h2", { className: "text-xl font-bold text-gray-900", children: "T\u1EA1o Tour m\u1EDBi" }), _jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: "\u2715" })] }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-1", children: "T\u00EAn Tour" }), _jsx("input", { required: true, 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", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "VD: Kh\u00E1m ph\u00E1 \u0110\u00E0 L\u1EA1t" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-1", children: "B\u1EAFt \u0111\u1EA7u" }), _jsx("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", value: startDate, onChange: (e) => setStartDate(e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-1", children: "K\u1EBFt th\u00FAc" }), _jsx("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", value: endDate, onChange: (e) => setEndDate(e.target.value) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-700 mb-2", children: "Th\u00E0nh vi\u00EAn tham gia" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [members.map((m) => (_jsxs("div", { className: "relative", children: [_jsx("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", children: m.name }), _jsx("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", children: _jsx(Trash2, { size: 12 }) }), _jsx("div", { className: "text-[10px] text-center mt-1 max-w-[70px] truncate", children: m.name })] }, m.id))), _jsxs("div", { className: "relative", children: [_jsx("input", { className: "w-36 px-2 py-1 text-sm border border-gray-200 rounded-lg outline-none", placeholder: "T\u00ECm email...", value: query, onChange: (e) => searchUsers(e.target.value) }), results.length > 0 && (_jsx("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", children: results.map((u) => (_jsxs("button", { type: "button", onClick: () => confirmAddMember(u), className: "w-full text-left px-3 py-2 text-sm hover:bg-blue-50", children: [_jsx("span", { className: "font-bold text-gray-900", children: u.name }), _jsx("span", { className: "block text-xs text-gray-500", children: u.email })] }, u.id))) }))] })] }), error && _jsx("p", { className: "text-xs text-red-600 mt-2", children: error })] }), _jsx("button", { type: "submit", disabled: isLoading, className: "w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg transition-all flex items-center justify-center gap-2", children: isLoading ? 'Đang tạo...' : 'Xác nhận tạo Tour' })] })] })] }));
 };
 //# sourceMappingURL=CreateTourModal.js.map

dist/ExploreMap.js

@@ -70,23 +70,24 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }) => {
     }, []);
     return (_jsxs("div", { className: "h-screen w-full relative", children: [_jsx("button", { onClick: onBack, className: "absolute top-6 left-6 z-[1000] bg-white p-3 rounded-full shadow-xl hover:bg-gray-50 transition-all", children: _jsx(X, { className: "w-6 h-6 text-gray-800" }) }), onLogout && (_jsxs("button", { onClick: onLogout, className: "absolute top-6 right-6 z-[1000] bg-white px-4 py-3 rounded-2xl shadow-xl hover:bg-red-50 hover:text-red-600 transition-all flex items-center gap-2 font-bold text-gray-700", children: [_jsx(LogOut, { className: "w-5 h-5" }), _jsx("span", { className: "hidden sm:inline", children: "\u0110\u0103ng xu\u1EA5t" })] })), user?.isAdmin && (_jsxs("button", { onClick: () => setIsAdminModalOpen(true), className: "absolute top-6 right-40 z-[1000] bg-blue-600 px-4 py-3 rounded-2xl shadow-xl hover:bg-blue-700 text-white transition-all flex items-center gap-2 font-bold", children: [_jsx(Settings, { className: "w-5 h-5" }), _jsx("span", { className: "hidden sm:inline", children: "Qu\u1EA3n l\u00FD h\u1EC7 th\u1ED1ng" })] })), user && (_jsxs("button", { onClick: () => setIsCreateModalOpen(true), className: "absolute top-6 right-80 z-[1000] bg-green-600 px-4 py-3 rounded-2xl shadow-xl hover:bg-green-700 text-white transition-all flex items-center gap-2 font-bold", children: [_jsx(Navigation, { className: "w-5 h-5" }), _jsx("span", { className: "hidden sm:inline", children: "T\u1EA1o Tour m\u1EDBi" })] })), _jsx("div", { className: "absolute top-6 left-20 z-[1000] bg-white/90 backdrop-blur-md px-6 py-3 rounded-2xl shadow-xl border border-white/20 hidden sm:block", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Navigation, { className: "w-4 h-4 text-blue-600" }), _jsx("span", { className: "font-bold text-gray-800", children: "\u0110ang kh\u00E1m ph\u00E1 khu v\u1EF1c c\u1EE7a b\u1EA1n" })] }) }), _jsxs(MapContainer, { center: userPos, zoom: mapZoom, className: "h-full w-full", preferCanvas: true, children: [_jsx(TileLayer, { url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", attribution: '\u00A9 OpenStreetMap contributors' }), _jsx(MapTracker, {}), _jsx(RecenterMap, { position: userPos }), _jsx(MarkerClusterGroup, { chunkedLoading: true, children: publicTours.map((tour) => {
                             const startLoc = tour.legs?.[0]?.locations?.[0];
-                            if (!startLoc)
-                                return null;
                             const tourImage = tour.photos?.[0]?.imageUrl || `https://picsum.photos/seed/${tour.id}/200/200`;
-                            return (_jsx(React.Fragment, { children: _jsx(Marker, { position: [startLoc.latitude, startLoc.longitude], eventHandlers: {
+                            const markerPos = startLoc
+                                ? [startLoc.latitude, startLoc.longitude]
+                                : userPos;
+                            return (_jsx(React.Fragment, { children: _jsx(Marker, { position: markerPos, eventHandlers: {
                                         click: () => onViewTour(tour.id)
                                     }, icon: L.divIcon({
                                         className: 'custom-bubble',
                                         html: `
-                    <div class="relative group">
-                      <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
-                        <img src="${tourImage}" class="w-full h-full object-cover" />
+                      <div class="relative group">
+                        <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
+                          <img src="${tourImage}" class="w-full h-full object-cover" />
+                        </div>
+                        <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
+                          S
+                        </div>
                       </div>
-                      <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
-                        S
-                      </div>
-                    </div>
-                  `,
+                    `,
                                         iconSize: [48, 48],
                                         iconAnchor: [24, 24]
                                     }) }) }, tour.id));

dist/ItineraryTimeline.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { format, differenceInMinutes, parseISO } from 'date-fns';
 import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List } from 'lucide-react';
 import { useTourStore } from './useTourStore.js';
+import { ConfirmModal } from './ConfirmModal.js';
 const TimeVariance = ({ planned, actual }) => {
     if (!actual)
         return null;
@@ -26,6 +28,7 @@ const formatTravelTime = (minutes) => {
 };
 export const ItineraryTimeline = ({ onAddLocation, onEditLocation }) => {
     const { currentTour, legs, optimizeRouting, userRole, addLeg, updateLeg, deleteLeg, initializeLegs, deleteLocation } = useTourStore();
+    const [confirmState, setConfirmState] = useState({ open: false });
     const toggleComplete = async (locationId) => {
         console.log("Toggle status for location:", locationId);
     };
@@ -49,48 +52,64 @@ export const ItineraryTimeline = ({ onAddLocation, onEditLocation }) => {
         }
     };
     const handleDeleteLeg = async (legId) => {
-        if (window.confirm("Bạn có chắc chắn muốn xóa chặng này?")) {
-            try {
-                await deleteLeg(legId);
-            }
-            catch (err) {
-                alert(err.message);
-            }
-        }
+        setConfirmState({
+            open: true,
+            title: 'Xóa chặng',
+            message: 'Bạn có chắc chắn muốn xóa chặng này?',
+            onConfirm: async () => {
+                try {
+                    await deleteLeg(legId);
+                }
+                catch (err) {
+                    alert(err.message);
+                }
+                finally {
+                    setConfirmState({ open: false });
+                }
+            },
+        });
     };
     const handleDeleteLocation = async (id) => {
-        if (window.confirm("Bạn có chắc chắn muốn xóa địa điểm này?")) {
-            try {
-                await deleteLocation(id);
-            }
-            catch (err) {
-                alert(err.message);
-            }
-        }
+        setConfirmState({
+            open: true,
+            title: 'Xóa địa điểm',
+            message: 'Bạn có chắc chắn muốn xóa địa điểm này?',
+            onConfirm: async () => {
+                try {
+                    await deleteLocation(id);
+                }
+                catch (err) {
+                    alert(err.message);
+                }
+                finally {
+                    setConfirmState({ open: false });
+                }
+            },
+        });
     };
-    return (_jsx("div", { className: "max-w-2xl mx-auto p-0 bg-gray-50 min-h-screen", children: _jsxs("div", { className: "px-2 pt-4", children: [legs.length === 0 ? (_jsxs("div", { className: "text-center py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200", children: [_jsx(List, { className: "w-12 h-12 text-gray-300 mx-auto mb-4" }), _jsx("p", { className: "text-gray-500 font-medium", children: "Ch\u01B0a c\u00F3 ch\u1EB7ng n\u00E0o trong l\u1ED9 tr\u00ECnh." })] })) : (legs.map((leg, legIdx) => {
-                    const totalDwellMinutes = leg.locations.reduce((acc, loc) => {
-                        if (loc.plannedStart && loc.plannedEnd) {
-                            return acc + differenceInMinutes(parseISO(loc.plannedEnd), parseISO(loc.plannedStart));
-                        }
-                        return acc;
-                    }, 0);
-                    const prevLegLastLoc = legIdx > 0 ? legs[legIdx - 1]?.locations.slice(-1)[0] : null;
-                    return (_jsxs("div", { className: "relative mb-12 animate-in fade-in slide-in-from-bottom-4 duration-300", children: [_jsxs("div", { className: "sticky top-[136px] z-20 bg-gray-50/90 backdrop-blur-sm flex items-center mb-6 py-2 px-2", children: [_jsxs("div", { className: "font-black text-blue-600 text-xl truncate flex-1 flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm", children: leg.sequence }), leg.note || `Chi tiết Chặng ${leg.sequence}`] }), prevLegLastLoc && (_jsxs("div", { className: "flex items-center gap-1 text-[10px] text-gray-400 uppercase tracking-widest ml-10", children: [_jsx(Navigation, { className: "w-2.5 h-2.5 rotate-90" }), " Ti\u1EBFp n\u1ED1i t\u1EEB ", prevLegLastLoc.name] }))] }), _jsxs("div", { className: "flex items-center gap-2 ml-4", children: [['OWNER', 'MANAGER'].includes(userRole || '') && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => onAddLocation?.(leg.id), className: "p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all", title: "Th\u00EAm \u0111\u1ECBa \u0111i\u1EC3m v\u00E0o ch\u1EB7ng n\u00E0y", children: _jsx(Plus, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => handleEditLeg(leg), className: "p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all", children: _jsx(Edit2, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => handleDeleteLeg(leg.id), className: "p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-all", children: _jsx(Trash2, { className: "w-4 h-4" }) })] })), leg.totalDistance !== undefined && (_jsxs("div", { className: "hidden sm:flex items-center gap-2", children: [_jsxs("div", { className: "text-xs font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-lg border border-blue-100", children: [leg.totalDistance, " km"] }), _jsxs("div", { className: "text-xs font-bold text-gray-500 bg-gray-50 px-2 py-1 rounded-lg border border-gray-100 flex items-center gap-1", children: [_jsx(Clock, { className: "w-3 h-3" }), "~ ", formatTravelTime(Math.round((leg.totalDistance / 35) * 60))] })] })), totalDwellMinutes > 0 && (_jsxs("div", { className: "hidden md:flex text-xs font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-lg border border-amber-100 items-center gap-1", children: [_jsx(Clock, { className: "w-3 h-3" }), "D\u1EEBng: ", formatTravelTime(totalDwellMinutes)] }))] }), ['OWNER', 'MANAGER'].includes(userRole || '') && legs.length > 0 && (_jsxs("button", { onClick: () => optimizeRouting(leg.id), className: "ml-auto flex items-center gap-1.5 text-xs font-bold text-indigo-600 hover:text-indigo-700 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-xl transition-all", children: [_jsx(Zap, { className: "w-3 h-3" }), "T\u1ED1i \u01B0u"] }))] }), _jsx("div", { className: `absolute left-6 top-16 ${legIdx === legs.length - 1 ? 'bottom-0' : 'bottom-[-3.5rem]'} w-0.5 bg-blue-100 -z-0` }), _jsx("div", { className: "ml-2", children: leg.locations.map((location, idx) => {
-                                    const nextLocation = leg.locations[idx + 1] || legs[legIdx + 1]?.locations[0];
-                                    const distanceToNext = nextLocation
-                                        ? calculateDistance(location.latitude, location.longitude, nextLocation.latitude, nextLocation.longitude)
-                                        : null;
-                                    const averageSpeed = 35;
-                                    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) => 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;
-                                    return (_jsxs("div", { children: [_jsxs("div", { className: "relative flex group mb-6", children: [_jsx("div", { className: "z-10 mt-1.5 mr-4", children: _jsx("button", { onClick: () => toggleComplete(location.id), className: `transition-colors duration-200 ${location.status === 'COMPLETED' ? 'text-green-500' : 'text-gray-300 hover:text-blue-500'}`, children: location.status === 'COMPLETED' ? (_jsx(CheckCircle2, { className: "w-8 h-8 bg-white rounded-full" })) : (_jsx(Circle, { className: "w-8 h-8 bg-white rounded-full fill-white" })) }) }), _jsxs("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'}`, children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { children: [isStartPoint && (_jsx("span", { className: "inline-block px-2 py-0.5 bg-green-100 text-green-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider", children: "\u0110i\u1EC3m b\u1EAFt \u0111\u1EA7u" })), isEndPoint && (_jsx("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", children: "\u0110i\u1EC3m k\u1EBFt th\u00FAc" })), _jsx("h3", { className: `font-semibold text-lg ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`, children: location.name }), _jsxs("div", { className: "flex items-center text-sm text-gray-500 mt-1", children: [_jsx(MapPin, { className: "w-3 h-3 mr-1" }), _jsx("span", { className: "truncate max-w-[200px] sm:max-w-md", children: location.address })] }), location.note && (_jsx("div", { className: "mt-2 text-xs text-gray-600 bg-gray-50 p-2 rounded-lg border border-gray-100 italic", children: location.note })), dwellMinutes !== null && (_jsxs("div", { className: "flex items-center text-xs text-amber-600 font-medium mt-1", children: [_jsx(Clock, { className: "w-3 h-3 mr-1" }), _jsxs("span", { children: ["Th\u1EDDi gian d\u1EEBng: ", formatTravelTime(dwellMinutes)] })] })), locationExpense && (_jsxs("div", { className: "mt-2 text-xs text-indigo-600 bg-indigo-50/80 p-2 rounded-lg border border-indigo-100 space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1 font-bold", children: [_jsx(Zap, { className: "w-3 h-3" }), _jsxs("span", { children: ["Chi ph\u00ED: ", Number(locationExpense.amount).toLocaleString(), "\u0111 (", locationExpense.category, ")"] })] }), locationExpense.description && (_jsxs("div", { className: "text-[10px] text-gray-600", children: ["D\u1ECBch v\u1EE5: ", locationExpense.description] })), locationExpense.note && (_jsx("div", { className: "text-[10px] text-gray-500 italic", children: locationExpense.note })), locationExpense.paidBy && (_jsxs("div", { className: "text-[10px] font-semibold text-indigo-700", children: ["\u0110\u00E3 thanh to\u00E1n: ", locationExpense.paidBy.name] }))] }))] }), _jsxs("div", { className: "text-right flex flex-col items-end", children: [_jsxs("div", { className: "flex items-center text-sm font-medium text-blue-600", children: [_jsx(Clock, { className: "w-3 h-3 mr-1" }), location.plannedStart ? format(parseISO(location.plannedStart), 'HH:mm') : '--:--'] }), location.status === 'COMPLETED' && location.actualStart && (_jsxs("div", { className: "text-[10px] text-gray-400 mt-1 italic", children: ["Th\u1EF1c t\u1EBF: ", format(parseISO(location.actualStart), 'HH:mm')] })), ['OWNER', 'MANAGER'].includes(userRole || '') && !isStartPoint && !isEndPoint && (_jsxs("div", { className: "flex gap-1 mt-2", children: [_jsx("button", { onClick: () => onEditLocation?.(location), className: "p-1 text-gray-400 hover:text-blue-600 transition-colors", children: _jsx(Edit2, { className: "w-3.5 h-3.5" }) }), _jsx("button", { onClick: () => handleDeleteLocation(location.id), className: "p-1 text-gray-400 hover:text-red-600 transition-colors", children: _jsx(Trash2, { className: "w-3.5 h-3.5" }) })] }))] })] }), _jsx(TimeVariance, { planned: location.plannedStart || '', actual: location.actualStart || null })] })] }), distanceToNext !== null && travelTimeMinutes !== null && (_jsxs("div", { className: "ml-4 -mt-4 mb-2 flex items-center gap-3", children: [_jsx("div", { className: "w-8 flex justify-center", children: _jsx(Navigation, { className: "w-3 h-3 text-blue-400 rotate-180" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-[10px] font-bold text-blue-500 bg-blue-50 px-2 py-0.5 rounded-full border border-blue-100", children: [distanceToNext.toFixed(2), " km"] }), _jsxs("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", children: [_jsx(Clock, { className: "w-2.5 h-2.5" }), "~ ", formatTravelTime(travelTimeMinutes)] })] })] }))] }, location.id));
-                                }) })] }, leg.id));
-                })), ['OWNER', 'MANAGER'].includes(userRole || '') && (_jsxs("div", { className: "flex flex-col gap-3 pb-20 mt-8", children: [_jsxs("button", { onClick: handleDeclareLegs, className: "w-full py-4 rounded-2xl bg-white text-blue-600 border-2 border-dashed border-blue-200 hover:bg-blue-50 transition-all flex items-center justify-center gap-2 text-sm font-bold", children: [_jsx(List, { className: "w-5 h-5" }), legs.length > 0 ? "Khai báo lại số lượng chặng" : "Bắt đầu bằng việc khai báo số chặng"] }), _jsxs("button", { onClick: handleAddLeg, className: "w-full py-4 rounded-2xl bg-blue-600 text-white shadow-lg shadow-blue-100 hover:bg-blue-700 transition-all flex items-center justify-center gap-2 text-sm font-bold", children: [_jsx(Plus, { className: "w-5 h-5" }), " Th\u00EAm ch\u1EB7ng l\u1EBB v\u00E0o cu\u1ED1i"] })] }))] }) }));
+    return (_jsxs("div", { className: "max-w-2xl mx-auto p-0 bg-gray-50 min-h-screen", children: [_jsxs("div", { className: "px-2 pt-4", children: [legs.length === 0 ? (_jsxs("div", { className: "text-center py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200", children: [_jsx(List, { className: "w-12 h-12 text-gray-300 mx-auto mb-4" }), _jsx("p", { className: "text-gray-500 font-medium", children: "Ch\u01B0a c\u00F3 ch\u1EB7ng n\u00E0o trong l\u1ED9 tr\u00ECnh." })] })) : (legs.map((leg, legIdx) => {
+                        const totalDwellMinutes = leg.locations.reduce((acc, loc) => {
+                            if (loc.plannedStart && loc.plannedEnd) {
+                                return acc + differenceInMinutes(parseISO(loc.plannedEnd), parseISO(loc.plannedStart));
+                            }
+                            return acc;
+                        }, 0);
+                        const prevLegLastLoc = legIdx > 0 ? legs[legIdx - 1]?.locations.slice(-1)[0] : null;
+                        return (_jsxs("div", { className: "relative mb-12 animate-in fade-in slide-in-from-bottom-4 duration-300", children: [_jsxs("div", { className: "sticky top-[136px] z-20 bg-gray-50/90 backdrop-blur-sm flex items-center mb-6 py-2 px-2", children: [_jsxs("div", { className: "font-black text-blue-600 text-xl truncate flex-1 flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm", children: leg.sequence }), leg.note || `Chi tiết Chặng ${leg.sequence}`] }), prevLegLastLoc && (_jsxs("div", { className: "flex items-center gap-1 text-[10px] text-gray-400 uppercase tracking-widest ml-10", children: [_jsx(Navigation, { className: "w-2.5 h-2.5 rotate-90" }), " Ti\u1EBFp n\u1ED1i t\u1EEB ", prevLegLastLoc.name] }))] }), _jsxs("div", { className: "flex items-center gap-2 ml-4", children: [['OWNER', 'MANAGER'].includes(userRole || '') && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => onAddLocation?.(leg.id), className: "p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all", title: "Th\u00EAm \u0111\u1ECBa \u0111i\u1EC3m v\u00E0o ch\u1EB7ng n\u00E0y", children: _jsx(Plus, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => handleEditLeg(leg), className: "p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all", children: _jsx(Edit2, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => handleDeleteLeg(leg.id), className: "p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-all", children: _jsx(Trash2, { className: "w-4 h-4" }) })] })), leg.totalDistance !== undefined && (_jsxs("div", { className: "hidden sm:flex items-center gap-2", children: [_jsxs("div", { className: "text-xs font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-lg border border-blue-100", children: [leg.totalDistance, " km"] }), _jsxs("div", { className: "text-xs font-bold text-gray-500 bg-gray-50 px-2 py-1 rounded-lg border border-gray-100 flex items-center gap-1", children: [_jsx(Clock, { className: "w-3 h-3" }), "~ ", formatTravelTime(Math.round((leg.totalDistance / 35) * 60))] })] })), totalDwellMinutes > 0 && (_jsxs("div", { className: "hidden md:flex text-xs font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-lg border border-amber-100 items-center gap-1", children: [_jsx(Clock, { className: "w-3 h-3" }), "D\u1EEBng: ", formatTravelTime(totalDwellMinutes)] }))] }), ['OWNER', 'MANAGER'].includes(userRole || '') && legs.length > 0 && (_jsxs("button", { onClick: () => optimizeRouting(leg.id), className: "ml-auto flex items-center gap-1.5 text-xs font-bold text-indigo-600 hover:text-indigo-700 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-xl transition-all", children: [_jsx(Zap, { className: "w-3 h-3" }), "T\u1ED1i \u01B0u"] }))] }), _jsx("div", { className: `absolute left-6 top-16 ${legIdx === legs.length - 1 ? 'bottom-0' : 'bottom-[-3.5rem]'} w-0.5 bg-blue-100 -z-0` }), _jsx("div", { className: "ml-2", children: leg.locations.map((location, idx) => {
+                                        const nextLocation = leg.locations[idx + 1] || legs[legIdx + 1]?.locations[0];
+                                        const distanceToNext = nextLocation
+                                            ? calculateDistance(location.latitude, location.longitude, nextLocation.latitude, nextLocation.longitude)
+                                            : null;
+                                        const averageSpeed = 35;
+                                        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) => 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;
+                                        return (_jsxs("div", { children: [_jsxs("div", { className: "relative flex group mb-6", children: [_jsx("div", { className: "z-10 mt-1.5 mr-4", children: _jsx("button", { onClick: () => toggleComplete(location.id), className: `transition-colors duration-200 ${location.status === 'COMPLETED' ? 'text-green-500' : 'text-gray-300 hover:text-blue-500'}`, children: location.status === 'COMPLETED' ? (_jsx(CheckCircle2, { className: "w-8 h-8 bg-white rounded-full" })) : (_jsx(Circle, { className: "w-8 h-8 bg-white rounded-full fill-white" })) }) }), _jsxs("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'}`, children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { children: [isStartPoint && (_jsx("span", { className: "inline-block px-2 py-0.5 bg-green-100 text-green-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider", children: "\u0110i\u1EC3m b\u1EAFt \u0111\u1EA7u" })), isEndPoint && (_jsx("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", children: "\u0110i\u1EC3m k\u1EBFt th\u00FAc" })), _jsx("h3", { className: `font-semibold text-lg ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`, children: location.name }), _jsxs("div", { className: "flex items-center text-sm text-gray-500 mt-1", children: [_jsx(MapPin, { className: "w-3 h-3 mr-1" }), _jsx("span", { className: "truncate max-w-[200px] sm:max-w-md", children: location.address })] }), location.note && (_jsx("div", { className: "mt-2 text-xs text-gray-600 bg-gray-50 p-2 rounded-lg border border-gray-100 italic", children: location.note })), dwellMinutes !== null && (_jsxs("div", { className: "flex items-center text-xs text-amber-600 font-medium mt-1", children: [_jsx(Clock, { className: "w-3 h-3 mr-1" }), _jsxs("span", { children: ["Th\u1EDDi gian d\u1EEBng: ", formatTravelTime(dwellMinutes)] })] })), locationExpense && (_jsxs("div", { className: "mt-2 text-xs text-indigo-600 bg-indigo-50/80 p-2 rounded-lg border border-indigo-100 space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1 font-bold", children: [_jsx(Zap, { className: "w-3 h-3" }), _jsxs("span", { children: ["Chi ph\u00ED: ", Number(locationExpense.amount).toLocaleString(), "\u0111 (", locationExpense.category, ")"] })] }), locationExpense.description && (_jsxs("div", { className: "text-[10px] text-gray-600", children: ["D\u1ECBch v\u1EE5: ", locationExpense.description] })), locationExpense.note && (_jsx("div", { className: "text-[10px] text-gray-500 italic", children: locationExpense.note })), locationExpense.paidBy && (_jsxs("div", { className: "text-[10px] font-semibold text-indigo-700", children: ["\u0110\u00E3 thanh to\u00E1n: ", locationExpense.paidBy.name] }))] }))] }), _jsxs("div", { className: "text-right flex flex-col items-end", children: [_jsxs("div", { className: "flex items-center text-sm font-medium text-blue-600", children: [_jsx(Clock, { className: "w-3 h-3 mr-1" }), location.plannedStart ? format(parseISO(location.plannedStart), 'HH:mm') : '--:--'] }), location.status === 'COMPLETED' && location.actualStart && (_jsxs("div", { className: "text-[10px] text-gray-400 mt-1 italic", children: ["Th\u1EF1c t\u1EBF: ", format(parseISO(location.actualStart), 'HH:mm')] })), ['OWNER', 'MANAGER'].includes(userRole || '') && !isStartPoint && !isEndPoint && (_jsxs("div", { className: "flex gap-1 mt-2", children: [_jsx("button", { onClick: () => onEditLocation?.(location), className: "p-1 text-gray-400 hover:text-blue-600 transition-colors", children: _jsx(Edit2, { className: "w-3.5 h-3.5" }) }), _jsx("button", { onClick: () => handleDeleteLocation(location.id), className: "p-1 text-gray-400 hover:text-red-600 transition-colors", children: _jsx(Trash2, { className: "w-3.5 h-3.5" }) })] }))] })] }), _jsx(TimeVariance, { planned: location.plannedStart || '', actual: location.actualStart || null })] })] }), distanceToNext !== null && travelTimeMinutes !== null && (_jsxs("div", { className: "ml-4 -mt-4 mb-2 flex items-center gap-3", children: [_jsx("div", { className: "w-8 flex justify-center", children: _jsx(Navigation, { className: "w-3 h-3 text-blue-400 rotate-180" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-[10px] font-bold text-blue-500 bg-blue-50 px-2 py-0.5 rounded-full border border-blue-100", children: [distanceToNext.toFixed(2), " km"] }), _jsxs("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", children: [_jsx(Clock, { className: "w-2.5 h-2.5" }), "~ ", formatTravelTime(travelTimeMinutes)] })] })] }))] }, location.id));
+                                    }) })] }, leg.id));
+                    })), ['OWNER', 'MANAGER'].includes(userRole || '') && (_jsxs("div", { className: "flex flex-col gap-3 pb-20 mt-8", children: [_jsxs("button", { onClick: handleDeclareLegs, className: "w-full py-4 rounded-2xl bg-white text-blue-600 border-2 border-dashed border-blue-200 hover:bg-blue-50 transition-all flex items-center justify-center gap-2 text-sm font-bold", children: [_jsx(List, { className: "w-5 h-5" }), legs.length > 0 ? "Khai báo lại số lượng chặng" : "Bắt đầu bằng việc khai báo số chặng"] }), _jsxs("button", { onClick: handleAddLeg, className: "w-full py-4 rounded-2xl bg-blue-600 text-white shadow-lg shadow-blue-100 hover:bg-blue-700 transition-all flex items-center justify-center gap-2 text-sm font-bold", children: [_jsx(Plus, { className: "w-5 h-5" }), " Th\u00EAm ch\u1EB7ng l\u1EBB v\u00E0o cu\u1ED1i"] })] }))] }), _jsx(ConfirmModal, { isOpen: confirmState.open, title: confirmState.title, message: confirmState.message, onConfirm: () => confirmState.onConfirm?.(), onCancel: () => setConfirmState({ open: false }) })] }));
 };
 //# sourceMappingURL=ItineraryTimeline.js.map

dist/TourDetailPage.js

@@ -5,11 +5,13 @@ import { ExpenseManager } from './ExpenseManager.js';
 import { useTourStore } from './useTourStore.js';
 import { AddLocationModal } from './AddLocationModal.js';
 import { AddMemberModal } from './AddMemberModal.js';
+import { ConfirmModal } from './ConfirmModal.js';
+import { NotificationModal, useNotificationModal } from './components/NotificationModal.js';
 import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline } from 'react-leaflet';
 import _MarkerClusterGroup from 'react-leaflet-cluster';
 const MarkerClusterGroup = _MarkerClusterGroup.default || _MarkerClusterGroup;
 import { useMap } from 'react-leaflet';
-import { Map as MapIcon, Wallet, Image as ImageIcon, Calendar, Users, ChevronLeft, Settings, Quote, Plus, List, Map as MapIconLucide, MapPin, Flag } from 'lucide-react';
+import { Map as MapIcon, Wallet, Image as ImageIcon, Calendar, Users, ChevronLeft, Settings, Quote, Plus, List, Map as MapIconLucide, MapPin, Flag, Clock, Check, X } from 'lucide-react';
 import L from 'leaflet';
 delete L.Icon.Default.prototype._getIconUrl;
 L.Icon.Default.mergeOptions({
@@ -97,6 +99,13 @@ export const TourDetailPage = ({ onBack }) => {
     const [isAddMemberOpen, setIsAddMemberOpen] = useState(false);
     const [targetLegId, setTargetLegId] = useState(null);
     const [editingLocation, setEditingLocation] = useState(null);
+    const [selectedMember, setSelectedMember] = useState(null);
+    const [isMemberDetailOpen, setIsMemberDetailOpen] = useState(false);
+    const [joinRequests, setJoinRequests] = useState([]);
+    const [joinRequestActionId, setJoinRequestActionId] = useState(null);
+    const [confirmState, setConfirmState] = useState({ open: false });
+    const { currentTour, legs, fetchTour, fetchPublicTours, publicTours, userRole, mapCenter, setMapCenter, updateTourStartPoint, updateTourEndPoint, initializeLegs, addLocation, addMember, removeMember, fetchJoinRequests, acceptJoinRequest, rejectJoinRequest } = useTourStore();
+    const notificationModal = useNotificationModal();
     const [initialViewState] = useState(() => {
         const saved = localStorage.getItem('map_view_state');
         if (saved) {
@@ -109,8 +118,12 @@ export const TourDetailPage = ({ onBack }) => {
         }
         return null;
     });
-    const { currentTour, legs, fetchTour, fetchPublicTours, publicTours, userRole, mapCenter, setMapCenter, updateTourStartPoint, updateTourEndPoint, initializeLegs, addLocation, addMember } = useTourStore();
     const canEdit = ['OWNER', 'MANAGER'].includes(userRole || '');
+    useEffect(() => {
+        if (currentTour && ['OWNER', 'MANAGER'].includes(userRole || '')) {
+            fetchJoinRequests(currentTour.id).then(setJoinRequests).catch(() => setJoinRequests([]));
+        }
+    }, [currentTour, userRole]);
     const [mapZoom] = useState(initialViewState?.zoom || 13);
     const allLocations = useMemo(() => legs.flatMap(l => l.locations), [legs]);
     useEffect(() => {
@@ -238,7 +251,56 @@ export const TourDetailPage = ({ onBack }) => {
         budget: currentTour?.totalCost ? `${Number(currentTour.totalCost).toLocaleString()} VND` : "0 VND",
         coverImage: currentTour?.photos?.[0]?.imageUrl || "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop"
     };
-    return (_jsxs("div", { className: "min-h-screen bg-gray-50 pb-20", children: [_jsxs("div", { className: "sticky top-0 z-30 bg-white/80 backdrop-blur-md border-b border-gray-100 px-4 py-3 flex items-center justify-between", children: [_jsx("button", { onClick: onBack, className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: _jsx(ChevronLeft, { className: "w-6 h-6 text-gray-600" }) }), _jsx("h1", { className: "text-lg font-bold text-gray-800 truncate px-4", children: tourInfo.title }), _jsx("div", { className: "w-10" }), " "] }), _jsxs("div", { className: "relative min-h-[480px] w-full bg-blue-900 flex flex-col justify-end", children: [_jsx("img", { src: tourInfo.coverImage, className: "absolute inset-0 w-full h-full object-cover opacity-60", alt: "Tour Cover" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" }), _jsx("div", { className: "relative z-10 p-6 text-white pt-28 pb-20", children: _jsxs("div", { className: "max-w-2xl mx-auto space-y-4", children: [_jsx("h2", { className: "text-3xl font-black tracking-tight drop-shadow-md", children: tourInfo.title }), _jsxs("div", { className: "mt-3 text-[11px] sm:text-sm font-bold text-white bg-black/40 backdrop-blur-md px-4 py-2 rounded-xl border border-white/10 inline-flex items-center max-w-full", children: [_jsx("span", { className: "text-white/60 mr-1", children: "L\u1ED9 tr\u00ECnh:" }), _jsx("span", { className: "text-blue-300", children: "\u0110i\u1EC3m xu\u1EA5t ph\u00E1t:" }), _jsx("span", { className: "ml-1 text-white banner-location-text", title: startPoint?.name, children: startPoint?.name || '...' }), _jsx("span", { className: "mx-2 text-white/30", children: "-" }), _jsx("span", { className: "text-green-300", children: "\u0110i\u1EC3m k\u1EBFt th\u00FAc:" }), _jsx("span", { className: "ml-1 text-white banner-location-text", title: endPoint?.name, children: endPoint?.name || '...' })] }), _jsxs("div", { className: "flex flex-wrap gap-4 text-sm font-medium opacity-90", children: [_jsxs("div", { className: "flex items-center bg-black/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/10", children: [_jsx(Calendar, { className: "w-4 h-4 mr-1.5" }), tourInfo.date] }), _jsxs("div", { className: "flex items-center bg-black/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/10", children: [_jsx(Users, { className: "w-4 h-4 mr-1.5" }), tourInfo.membersCount, " th\u00E0nh vi\u00EAn"] })] }), _jsxs("div", { className: "flex items-center gap-2 mt-4", children: [_jsxs("div", { className: "flex -space-x-3", children: [currentTour?.participants?.slice(0, 5).map((p, i) => (_jsx("div", { className: "w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg", children: _jsx("img", { src: `https://i.pravatar.cc/100?u=${p.userId}`, alt: "Avatar" }) }, i))), tourInfo.membersCount > 5 && (_jsxs("div", { className: "w-10 h-10 rounded-full border-2 border-white bg-gray-800 flex items-center justify-center text-[10px] font-bold text-white shadow-lg", children: ["+", tourInfo.membersCount - 5] }))] }), _jsx("button", { onClick: () => {
+    return (_jsxs("div", { className: "min-h-screen bg-gray-50 pb-20", children: [_jsxs("div", { className: "sticky top-0 z-30 bg-white/80 backdrop-blur-md border-b border-gray-100 px-4 py-3 flex items-center justify-between", children: [_jsx("button", { onClick: onBack, className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: _jsx(ChevronLeft, { className: "w-6 h-6 text-gray-600" }) }), _jsx("h1", { className: "text-lg font-bold text-gray-800 truncate px-4", children: tourInfo.title }), _jsx("div", { className: "w-10" }), " "] }), _jsxs("div", { className: "relative min-h-[480px] w-full bg-blue-900 flex flex-col justify-end", children: [_jsx("img", { src: tourInfo.coverImage, className: "absolute inset-0 w-full h-full object-cover opacity-60", alt: "Tour Cover" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" }), _jsx("div", { className: "relative z-10 p-6 text-white pt-28 pb-20", children: _jsxs("div", { className: "max-w-2xl mx-auto space-y-4", children: [_jsx("h2", { className: "text-3xl font-black tracking-tight drop-shadow-md", children: tourInfo.title }), _jsxs("div", { className: "mt-3 text-[11px] sm:text-sm font-bold text-white bg-black/40 backdrop-blur-md px-4 py-2 rounded-xl border border-white/10 inline-flex items-center max-w-full", children: [_jsx("span", { className: "text-white/60 mr-1", children: "L\u1ED9 tr\u00ECnh:" }), _jsx("span", { className: "text-blue-300", children: "\u0110i\u1EC3m xu\u1EA5t ph\u00E1t:" }), _jsx("span", { className: "ml-1 text-white banner-location-text", title: startPoint?.name, children: startPoint?.name || '...' }), _jsx("span", { className: "mx-2 text-white/30", children: "-" }), _jsx("span", { className: "text-green-300", children: "\u0110i\u1EC3m k\u1EBFt th\u00FAc:" }), _jsx("span", { className: "ml-1 text-white banner-location-text", title: endPoint?.name, children: endPoint?.name || '...' })] }), _jsxs("div", { className: "flex flex-wrap gap-4 text-sm font-medium opacity-90", children: [_jsxs("div", { className: "flex items-center bg-black/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/10", children: [_jsx(Calendar, { className: "w-4 h-4 mr-1.5" }), tourInfo.date] }), _jsxs("div", { className: "flex items-center bg-black/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/10", children: [_jsx(Users, { className: "w-4 h-4 mr-1.5" }), tourInfo.membersCount, " th\u00E0nh vi\u00EAn"] })] }), _jsxs("div", { className: "flex items-center gap-2 mt-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [currentTour?.participants?.slice(0, 5).map((p, i) => (_jsx("button", { onClick: () => {
+                                                        setSelectedMember(p);
+                                                        setIsMemberDetailOpen(true);
+                                                    }, className: "w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg hover:scale-110 transition-transform", title: p.user?.name || p.userId, children: _jsx("img", { src: `https://i.pravatar.cc/100?u=${p.userId}`, alt: "Avatar" }) }, p.userId || i))), joinRequests.slice(0, 3).map((req) => (_jsxs("div", { className: "relative group", children: [_jsx("div", { className: "w-10 h-10 rounded-full border-2 border-amber-400 bg-amber-50 flex items-center justify-center text-amber-700 font-bold overflow-hidden shadow-lg", children: req.user?.name?.charAt(0) || '?' }), _jsxs("div", { className: "absolute -top-1 -right-1 flex", children: [_jsx("button", { type: "button", disabled: joinRequestActionId === req.id, onClick: async (e) => {
+                                                                        e.stopPropagation();
+                                                                        if (!currentTour)
+                                                                            return;
+                                                                        setConfirmState({
+                                                                            open: true,
+                                                                            title: 'Chấp nhận yêu cầu',
+                                                                            message: `Chấp nhận ${req.user?.name || req.userId} vào tour?`,
+                                                                            onConfirm: async () => {
+                                                                                setJoinRequestActionId(req.id);
+                                                                                try {
+                                                                                    await acceptJoinRequest(currentTour.id, req.id);
+                                                                                    setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                                                                }
+                                                                                catch (e) {
+                                                                                    notificationModal.openModal('Thông báo', e.message || 'Không thể chấp nhận yêu cầu', 'error');
+                                                                                }
+                                                                                finally {
+                                                                                    setJoinRequestActionId(null);
+                                                                                    setConfirmState({ open: false });
+                                                                                }
+                                                                            },
+                                                                        });
+                                                                    }, 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", children: "+" }), _jsx("button", { type: "button", disabled: joinRequestActionId === req.id, onClick: async (e) => {
+                                                                        e.stopPropagation();
+                                                                        if (!currentTour)
+                                                                            return;
+                                                                        setConfirmState({
+                                                                            open: true,
+                                                                            title: 'Từ chối yêu cầu',
+                                                                            message: `Từ chối ${req.user?.name || req.userId} tham gia tour?`,
+                                                                            onConfirm: async () => {
+                                                                                setJoinRequestActionId(req.id);
+                                                                                try {
+                                                                                    await rejectJoinRequest(currentTour.id, req.id);
+                                                                                    setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                                                                }
+                                                                                catch (e) {
+                                                                                    notificationModal.openModal('Thông báo', e.message || 'Không thể từ chối yêu cầu', 'error');
+                                                                                }
+                                                                                finally {
+                                                                                    setJoinRequestActionId(null);
+                                                                                    setConfirmState({ open: false });
+                                                                                }
+                                                                            },
+                                                                        });
+                                                                    }, 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", children: "x" })] })] }, req.id))), tourInfo.membersCount > 5 && (_jsxs("div", { className: "w-10 h-10 rounded-full border-2 border-white bg-gray-800 flex items-center justify-center text-[10px] font-bold text-white shadow-lg", children: ["+", tourInfo.membersCount - 5] }))] }), _jsx("button", { onClick: () => {
                                                 if (!currentTour)
                                                     return;
                                                 if (canEdit)
@@ -259,11 +321,68 @@ export const TourDetailPage = ({ onBack }) => {
                                                             const isEnd = endPoint?.id === loc.id;
                                                             const icon = isStart ? START_ICON : isEnd ? END_ICON : VISIT_ICON;
                                                             return (_jsx(Marker, { position: [loc.latitude, loc.longitude], icon: icon, children: _jsxs(Popup, { children: [_jsx("div", { className: "font-bold", children: loc.name }), _jsx("div", { className: "text-xs text-gray-500", children: loc.type })] }) }, loc.id));
-                                                        }) })] }), _jsx("div", { className: "absolute top-4 left-4 z-[1000] bg-white/90 backdrop-blur-md p-3 rounded-2xl text-[10px] font-bold text-gray-500 shadow-lg border border-white", children: "M\u1EB9o: Nh\u1EA5n gi\u1EEF (Mobile) ho\u1EB7c Chu\u1ED9t ph\u1EA3i \u0111\u1EC3 ghim \u0111\u1ECBa \u0111i\u1EC3m" })] }))] })), activeTab === 'expense' && (_jsx("div", { className: "animate-in fade-in slide-in-from-bottom-4", children: _jsx(ExpenseManager, {}) })), activeTab === 'photo' && (_jsx("div", { className: "grid grid-cols-3 gap-1.5 animate-in fade-in", children: [1, 2, 3, 4, 5, 6].map((i) => (_jsxs("div", { className: "aspect-square bg-gray-200 rounded-xl overflow-hidden relative group border border-white", children: [_jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" }), _jsx("img", { src: `https://picsum.photos/seed/${i + 10}/400/400`, alt: "Tour photo", className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" })] }, i))) })), activeTab === 'settings' && (_jsxs("div", { className: "p-8 text-center bg-white rounded-3xl border border-dashed border-gray-200 animate-in zoom-in-95", children: [_jsx(Settings, { className: "w-12 h-12 text-gray-300 mx-auto mb-4" }), _jsx("p", { className: "text-gray-500 font-medium", children: "T\u00EDnh n\u0103ng qu\u1EA3n l\u00FD th\u00E0nh vi\u00EAn \u0111ang \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt..." })] }))] })] }), canEdit && (_jsx("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-40", children: _jsx("button", { onClick: () => {
+                                                        }) })] }), _jsx("div", { className: "absolute top-4 left-4 z-[1000] bg-white/90 backdrop-blur-md p-3 rounded-2xl text-[10px] font-bold text-gray-500 shadow-lg border border-white", children: "M\u1EB9o: Nh\u1EA5n gi\u1EEF (Mobile) ho\u1EB7c Chu\u1ED9t ph\u1EA3i \u0111\u1EC3 ghim \u0111\u1ECBa \u0111i\u1EC3m" })] }))] })), activeTab === 'expense' && (_jsx("div", { className: "animate-in fade-in slide-in-from-bottom-4", children: _jsx(ExpenseManager, {}) })), activeTab === 'photo' && (_jsx("div", { className: "grid grid-cols-3 gap-1.5 animate-in fade-in", children: [1, 2, 3, 4, 5, 6].map((i) => (_jsxs("div", { className: "aspect-square bg-gray-200 rounded-xl overflow-hidden relative group border border-white", children: [_jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" }), _jsx("img", { src: `https://picsum.photos/seed/${i + 10}/400/400`, alt: "Tour photo", className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" })] }, i))) })), activeTab === 'settings' && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-6 bg-white rounded-3xl border border-dashed border-gray-200 animate-in zoom-in-95", children: [_jsxs("div", { className: "flex items-center gap-3 mb-4", children: [_jsx(Clock, { className: "w-6 h-6 text-blue-500" }), _jsx("h3", { className: "text-lg font-bold text-gray-900", children: "Y\u00EAu c\u1EA7u tham gia" }), _jsxs("span", { className: "text-xs font-bold text-gray-500 bg-gray-100 px-2 py-1 rounded-full", children: [joinRequests.length, " \u0111ang ch\u1EDD"] })] }), _jsxs("div", { className: "space-y-2", children: [joinRequests.map((req) => (_jsxs("div", { className: "flex items-center justify-between gap-3 p-3 rounded-2xl border border-gray-100 bg-white", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-9 h-9 rounded-full bg-amber-50 border border-amber-200 flex items-center justify-center text-amber-700 font-bold text-sm", children: req.user?.name?.charAt(0) || '?' }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-bold text-gray-800", children: req.user?.name || req.userId }), _jsxs("div", { className: "text-[11px] text-gray-500", children: ["\u0110\u01B0\u1EE3c m\u1EDDi b\u1EDFi ", req.requestedBy?.name, " \u2022 ", new Date(req.createdAt).toLocaleString('vi-VN')] })] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { disabled: joinRequestActionId === req.id, onClick: async () => {
+                                                                            if (!currentTour)
+                                                                                return;
+                                                                            setConfirmState({
+                                                                                open: true,
+                                                                                title: 'Chấp nhận yêu cầu',
+                                                                                message: `Chấp nhận ${req.user?.name || req.userId} vào tour?`,
+                                                                                onConfirm: async () => {
+                                                                                    setJoinRequestActionId(req.id);
+                                                                                    try {
+                                                                                        await acceptJoinRequest(currentTour.id, req.id);
+                                                                                        setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                                                                    }
+                                                                                    catch (e) {
+                                                                                        notificationModal.openModal('Thông báo', e.message || 'Không thể chấp nhận yêu cầu', 'error');
+                                                                                    }
+                                                                                    finally {
+                                                                                        setJoinRequestActionId(null);
+                                                                                        setConfirmState({ open: false });
+                                                                                    }
+                                                                                },
+                                                                            });
+                                                                        }, className: "p-2 rounded-xl bg-green-50 text-green-700 hover:bg-green-100 disabled:opacity-50", "aria-label": "Accept", children: _jsx(Check, { className: "w-4 h-4" }) }), _jsx("button", { disabled: joinRequestActionId === req.id, onClick: async () => {
+                                                                            if (!currentTour)
+                                                                                return;
+                                                                            setConfirmState({
+                                                                                open: true,
+                                                                                title: 'Từ chối yêu cầu',
+                                                                                message: `Từ chối ${req.user?.name || req.userId} tham gia tour?`,
+                                                                                onConfirm: async () => {
+                                                                                    setJoinRequestActionId(req.id);
+                                                                                    try {
+                                                                                        await rejectJoinRequest(currentTour.id, req.id);
+                                                                                        setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                                                                    }
+                                                                                    catch (e) {
+                                                                                        notificationModal.openModal('Thông báo', e.message || 'Không thể từ chối yêu cầu', 'error');
+                                                                                    }
+                                                                                    finally {
+                                                                                        setJoinRequestActionId(null);
+                                                                                        setConfirmState({ open: false });
+                                                                                    }
+                                                                                },
+                                                                            });
+                                                                        }, className: "p-2 rounded-xl bg-red-50 text-red-700 hover:bg-red-100 disabled:opacity-50", "aria-label": "Reject", children: _jsx(X, { className: "w-4 h-4" }) })] })] }, req.id))), joinRequests.length === 0 && (_jsx("div", { className: "text-center py-8 text-sm text-gray-500", children: "Kh\u00F4ng c\u00F3 y\u00EAu c\u1EA7u tham gia n\u00E0o \u0111ang ch\u1EDD ph\u00EA duy\u1EC7t." }))] })] }), _jsxs("div", { className: "p-8 text-center bg-gray-50 rounded-3xl border border-dashed border-gray-200", children: [_jsx(Settings, { className: "w-10 h-10 text-gray-300 mx-auto mb-3" }), _jsx("p", { className: "text-gray-500 font-medium", children: "T\u00EDnh n\u0103ng c\u00E0i \u0111\u1EB7t kh\u00E1c \u0111ang \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt..." })] })] }))] })] }), canEdit && (_jsx("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-40", children: _jsx("button", { onClick: () => {
                         setTargetLegId(null);
                         setEditingLocation(null);
                         if (activeTab === 'plan')
                             setIsAddLocationOpen(true);
-                    }, className: "bg-blue-600 text-white px-6 py-3 rounded-full shadow-lg hover:bg-blue-700 transition-all flex items-center font-bold", children: activeTab === 'plan' ? 'Thêm địa điểm' : activeTab === 'expense' ? 'Thêm chi phí' : 'Đăng ảnh' }) })), currentTour && (_jsx(AddMemberModal, { isOpen: isAddMemberOpen, onClose: () => setIsAddMemberOpen(false), tourId: currentTour.id })), currentTour && (_jsx(AddLocationModal, { isOpen: isAddLocationOpen, onClose: () => setIsAddLocationOpen(false), initialLegId: targetLegId || undefined, editingLocation: editingLocation, tourId: currentTour.id }))] }));
+                    }, className: "bg-blue-600 text-white px-6 py-3 rounded-full shadow-lg hover:bg-blue-700 transition-all flex items-center font-bold", children: activeTab === 'plan' ? 'Thêm địa điểm' : activeTab === 'expense' ? 'Thêm chi phí' : 'Đăng ảnh' }) })), currentTour && (_jsx(AddMemberModal, { isOpen: isAddMemberOpen, onClose: () => setIsAddMemberOpen(false), tourId: currentTour.id, participants: currentTour.participants || [], joinRequests: joinRequests, onRemoveMember: (userId) => removeMember(currentTour.id, userId), onMemberAdded: () => fetchTour(currentTour.id), userRole: userRole || undefined })), currentTour && (_jsx(AddLocationModal, { isOpen: isAddLocationOpen, onClose: () => setIsAddLocationOpen(false), initialLegId: targetLegId || undefined, editingLocation: editingLocation, tourId: currentTour.id })), isMemberDetailOpen && selectedMember && (_jsxs("div", { className: "fixed inset-0 z-[2100] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/60 backdrop-blur-sm", onClick: () => setIsMemberDetailOpen(false) }), _jsxs("div", { className: "relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("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", children: selectedMember.user?.name?.charAt(0) || '?' }), _jsxs("div", { children: [_jsx("div", { className: "text-base font-bold text-gray-900", children: selectedMember.user?.name || 'Chưa đặt tên' }), _jsx("div", { className: "text-xs text-gray-500", children: selectedMember.user?.email }), _jsx("div", { className: "text-[10px] font-semibold text-gray-500", children: selectedMember.role })] })] }), (selectedMember.user?.phone || selectedMember.user?.address) && (_jsxs("div", { className: "mt-3 text-xs text-gray-600 space-y-1", children: [selectedMember.user?.phone && _jsxs("div", { children: ["\uD83D\uDCDE ", selectedMember.user.phone] }), selectedMember.user?.address && _jsxs("div", { children: ["\uD83D\uDCCD ", selectedMember.user.address] })] })), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx("button", { onClick: () => setIsMemberDetailOpen(false), className: "px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100", children: "\u0110\u00F3ng" }), canEdit && selectedMember.role !== 'OWNER' && (_jsx("button", { onClick: async () => {
+                                            if (!currentTour || !selectedMember)
+                                                return;
+                                            try {
+                                                await removeMember(currentTour.id, selectedMember.userId);
+                                                setIsMemberDetailOpen(false);
+                                            }
+                                            catch (e) {
+                                                notificationModal.openModal('Thông báo', 'Không thể xóa thành viên', 'error');
+                                            }
+                                        }, className: "px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold", children: "X\u00F3a" })), canEdit && selectedMember.role === 'OWNER' && (_jsx("button", { onClick: () => {
+                                            setIsMemberDetailOpen(false);
+                                            setIsAddMemberOpen(true);
+                                        }, className: "px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-sm font-bold", children: "M\u1EDDi th\u00EAm ng\u01B0\u1EDDi" }))] })] })] })), _jsx(ConfirmModal, { isOpen: confirmState.open, title: confirmState.title, message: confirmState.message, onConfirm: () => confirmState.onConfirm?.(), onCancel: () => setConfirmState({ open: false }) }), _jsx(NotificationModal, { isOpen: notificationModal.modalState?.isOpen ?? false, title: notificationModal.modalState?.title, message: notificationModal.modalState?.message, type: notificationModal.modalState?.type, onConfirm: () => notificationModal.closeModal() })] }));
 };
 //# sourceMappingURL=TourDetailPage.js.map

dist/components/NotificationModal.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface NotificationModalProps {
+    isOpen: boolean;
+    title?: string;
+    message: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+}
+export declare const NotificationModal: React.FC<NotificationModalProps>;
+export declare const useNotificationModal: () => {
+    modalState: {
+        isOpen: boolean;
+        title?: string;
+        message: string;
+        type?: "info" | "success" | "warning" | "error";
+        onConfirm?: () => void;
+        onCancel?: () => void;
+    };
+    openModal: (title: string, message: string, type?: "info" | "success" | "warning" | "error", onConfirm?: () => void, onCancel?: () => void) => () => void;
+    closeModal: () => void;
+};
+export default NotificationModal;

dist/components/NotificationModal.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+const Icons = {
+    info: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M12 16v-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M12 8h.01", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })] })),
+    success: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M8 12l2.5 2.5L15.5 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })),
+    warning: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z", stroke: "currentColor", strokeWidth: "2" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "17", r: "1", fill: "currentColor" })] })),
+    error: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] })),
+};
+const defaultProps = {
+    title: 'Thông báo',
+    type: 'info',
+    confirmButtonText: 'OK',
+    cancelButtonText: 'Hủy',
+};
+export const NotificationModal = ({ isOpen, title = defaultProps.title, message, onConfirm, onCancel, type = defaultProps.type, confirmButtonText = defaultProps.confirmButtonText, cancelButtonText = defaultProps.cancelButtonText, }) => {
+    const [isAnimating, setIsAnimating] = useState(false);
+    const getTypeStyles = () => {
+        switch (type) {
+            case 'success':
+                return { bg: '#d4edda', border: '#c3e6cb', text: '#155724' };
+            case 'warning':
+                return { bg: '#fff3cd', border: '#ffeeba', text: '#856404' };
+            case 'error':
+                return { bg: '#f8d7da', border: '#f5c6cb', text: '#721c24' };
+            default:
+                return { bg: '#e2e3e5', border: '#d6d8db', text: '#383d41' };
+        }
+    };
+    const styles = getTypeStyles();
+    const getAnimationClass = () => {
+        if (!isOpen)
+            return 'opacity-0 translate-y-4';
+        if (isAnimating && onCancel)
+            return 'animate-fade-out';
+        return 'animate-fade-in';
+    };
+    const handleConfirm = () => {
+        setIsAnimating(true);
+        onConfirm?.();
+        setTimeout(() => setIsAnimating(false), 300);
+    };
+    const handleCancel = () => {
+        setIsAnimating(true);
+        onCancel?.();
+        setTimeout(() => setIsAnimating(false), 300);
+    };
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4", children: _jsxs("div", { className: `bg-white rounded-lg shadow-xl max-w-md w-full transform transition-all duration-300 ${getAnimationClass()}`, role: "alertdialog", "aria-modal": "true", "aria-labelledby": "modal-title", "aria-describedby": "modal-message", children: [_jsx("div", { className: `p-6 border-b ${styles.border}`, children: _jsxs("div", { className: "flex items-center gap-3", children: [type === 'success' && _jsx(Icons.success, { className: "w-5 h-5 text-green-600" }), type === 'warning' && _jsx(Icons.warning, { className: "w-5 h-5 text-yellow-600" }), type === 'error' && _jsx(Icons.error, { className: "w-5 h-5 text-red-600" }), type === 'info' && _jsx(Icons.info, { className: "w-5 h-5 text-blue-600" }), _jsx("h2", { id: "modal-title", className: `text-xl font-semibold ${styles.text}`, children: title })] }) }), _jsx("div", { className: "p-6", children: _jsx("p", { id: "modal-message", className: "text-gray-700 leading-relaxed", children: message }) }), _jsxs("div", { className: `px-6 py-4 flex justify-end gap-3 border-t ${styles.border}`, children: [onCancel && (_jsx("button", { onClick: handleCancel, className: "px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition-colors", children: cancelButtonText })), onConfirm && (_jsx("button", { onClick: handleConfirm, className: `px-4 py-2 text-white rounded-md font-medium transition-colors ${type === 'error'
+                                ? 'bg-red-600 hover:bg-red-700'
+                                : 'bg-blue-600 hover:bg-blue-700'}`, children: confirmButtonText }))] })] }) }));
+};
+export const useNotificationModal = () => {
+    const [modalState, setModalState] = useState(null);
+    const openModal = (title, message, type = 'info', onConfirm, onCancel) => {
+        setModalState({
+            isOpen: true,
+            title,
+            message,
+            type,
+            onConfirm,
+            onCancel,
+        });
+        const timer = setTimeout(() => {
+            if (onCancel) {
+                setModalState((prev) => ({ ...prev, isOpen: false }));
+            }
+        }, 5000);
+        return () => clearTimeout(timer);
+    };
+    const closeModal = () => {
+        setModalState((prev) => prev ? { ...prev, isOpen: false } : null);
+    };
+    return {
+        modalState,
+        openModal,
+        closeModal,
+    };
+};
+export default NotificationModal;
+//# sourceMappingURL=NotificationModal.js.map

dist/main.js

@@ -12,7 +12,7 @@ var __param = (this && this.__param) || function (paramIndex, decorator) {
 };
 import 'reflect-metadata';
 import { NestFactory } from '@nestjs/core';
-import { Module, Controller, Get, Post, Body, Param, Patch, Delete, ParseUUIDPipe, NotFoundException, BadRequestException, UnauthorizedException, UseGuards, Req, Query } from '@nestjs/common';
+import { Module, Controller, Get, Post, Body, Param, Patch, Delete, ParseUUIDPipe, NotFoundException, BadRequestException, UnauthorizedException, UseGuards, Req, Query, ForbiddenException } from '@nestjs/common';
 import { PrismaService } from './prisma.service.js';
 import 'dotenv/config';
 import * as bcrypt from 'bcrypt';
@@ -126,6 +126,11 @@ let TourController = class TourController {
                         note: 'Chặng khởi đầu'
                     }
                 }
+            },
+            include: {
+                participants: {
+                    include: { user: { select: { id: true, name: true, email: true } } }
+                }
             }
         });
     }
@@ -337,6 +342,28 @@ let TourController = class TourController {
                 include: { user: { select: { id: true, name: true, email: true } } },
             });
         }
+        let currentRole = req.user.tourParticipation?.role;
+        if (!currentRole) {
+            const participation = await this.prisma.tourParticipant.findUnique({
+                where: { tourId_userId: { tourId, userId: req.user.id } },
+            });
+            currentRole = participation?.role;
+        }
+        if (!currentRole || !(currentRole === 'OWNER' || currentRole === 'MANAGER')) {
+            const joinRequest = await this.prisma.joinRequest.create({
+                data: {
+                    tourId,
+                    userId: body.userId,
+                    requestedById: req.user.id,
+                    status: 'PENDING',
+                },
+                include: {
+                    user: { select: { id: true, name: true, email: true } },
+                    requestedBy: { select: { id: true, name: true, email: true } },
+                },
+            });
+            return { ...joinRequest, pendingApproval: true };
+        }
         return this.prisma.tourParticipant.create({
             data: {
                 tourId,
@@ -346,6 +373,128 @@ let TourController = class TourController {
             include: { user: { select: { id: true, name: true, email: true } } },
         });
     }
+    async getJoinRequests(tourId, req) {
+        const requests = await this.prisma.joinRequest.findMany({
+            where: { tourId, status: 'PENDING' },
+            orderBy: { createdAt: 'desc' },
+            include: {
+                user: { select: { id: true, name: true, email: true } },
+                requestedBy: { select: { id: true, name: true, email: true } },
+            },
+        });
+        return requests;
+    }
+    async createJoinRequest(tourId, body, req) {
+        const requestingUserId = body.userId || req.user.id;
+        const existingParticipation = await this.prisma.tourParticipant.findUnique({
+            where: { tourId_userId: { tourId, userId: requestingUserId } },
+        });
+        if (existingParticipation) {
+            throw new BadRequestException('Người dùng này đã là thành viên của tour.');
+        }
+        const pendingRequest = await this.prisma.joinRequest.findFirst({
+            where: { tourId, userId: requestingUserId, status: 'PENDING' },
+        });
+        if (pendingRequest) {
+            return pendingRequest;
+        }
+        const joinRequest = await this.prisma.joinRequest.create({
+            data: {
+                tourId,
+                userId: requestingUserId,
+                requestedById: req.user.id,
+                status: 'PENDING',
+            },
+            include: {
+                user: { select: { id: true, name: true, email: true } },
+                requestedBy: { select: { id: true, name: true, email: true } },
+            },
+        });
+        return joinRequest;
+    }
+    async acceptJoinRequest(tourId, requestId, req) {
+        let role = req.user.tourParticipation?.role;
+        if (!role) {
+            const participation = await this.prisma.tourParticipant.findUnique({
+                where: { tourId_userId: { tourId, userId: req.user.id } },
+            });
+            role = participation?.role;
+        }
+        if (!role || !(role === 'OWNER' || role === 'MANAGER')) {
+            throw new ForbiddenException('Bạn không có quyền chấp nhận yêu cầu tham gia.');
+        }
+        const joinRequest = await this.prisma.joinRequest.findUnique({
+            where: { id: requestId },
+        });
+        if (!joinRequest || joinRequest.tourId !== tourId) {
+            throw new NotFoundException('Không tìm thấy yêu cầu tham gia.');
+        }
+        if (joinRequest.status !== 'PENDING') {
+            throw new BadRequestException('Yêu cầu này đã được xử lý trước đó.');
+        }
+        const existing = await this.prisma.tourParticipant.findUnique({
+            where: { tourId_userId: { tourId, userId: joinRequest.userId } },
+        });
+        if (existing) {
+            await this.prisma.joinRequest.update({
+                where: { id: requestId },
+                data: { status: 'REJECTED' },
+            });
+            return { success: true, message: 'Người dùng đã là thành viên, yêu cầu đã bị từ chối.' };
+        }
+        await this.prisma.$transaction([
+            this.prisma.tourParticipant.create({
+                data: {
+                    tourId,
+                    userId: joinRequest.userId,
+                    role: 'MEMBER',
+                },
+            }),
+            this.prisma.joinRequest.update({
+                where: { id: requestId },
+                data: { status: 'ACCEPTED' },
+            }),
+        ]);
+        return { success: true, message: 'Đã chấp nhận yêu cầu tham gia.' };
+    }
+    async rejectJoinRequest(tourId, requestId, req) {
+        let role = req.user.tourParticipation?.role;
+        if (!role) {
+            const participation = await this.prisma.tourParticipant.findUnique({
+                where: { tourId_userId: { tourId, userId: req.user.id } },
+            });
+            role = participation?.role;
+        }
+        if (!role || !(role === 'OWNER' || role === 'MANAGER')) {
+            throw new ForbiddenException('Bạn không có quyền từ chối yêu cầu tham gia.');
+        }
+        const joinRequest = await this.prisma.joinRequest.findUnique({
+            where: { id: requestId },
+        });
+        if (!joinRequest || joinRequest.tourId !== tourId) {
+            throw new NotFoundException('Không tìm thấy yêu cầu tham gia.');
+        }
+        if (joinRequest.status !== 'PENDING') {
+            throw new BadRequestException('Yêu cầu này đã được xử lý trước đó.');
+        }
+        await this.prisma.joinRequest.update({
+            where: { id: requestId },
+            data: { status: 'REJECTED' },
+        });
+        return { success: true, message: 'Đã từ chối yêu cầu tham gia.' };
+    }
+    async removeMember(tourId, userId) {
+        const participation = await this.prisma.tourParticipant.findUnique({
+            where: { tourId_userId: { tourId, userId } },
+        });
+        if (!participation) {
+            throw new NotFoundException('Thành viên này không có trong tour');
+        }
+        await this.prisma.tourParticipant.delete({
+            where: { tourId_userId: { tourId, userId } },
+        });
+        return { message: 'Đã xóa thành viên khỏi tour' };
+    }
 };
 __decorate([
     UseGuards(JwtAuthGuard),
@@ -447,6 +596,54 @@ __decorate([
     __metadata("design:paramtypes", [String, Object, Object]),
     __metadata("design:returntype", Promise)
 ], TourController.prototype, "addMember", null);
+__decorate([
+    UseGuards(JwtAuthGuard, TourRoleGuard),
+    Get(':tourId/join-requests'),
+    __param(0, Param('tourId', ParseUUIDPipe)),
+    __param(1, Req()),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, Object]),
+    __metadata("design:returntype", Promise)
+], TourController.prototype, "getJoinRequests", null);
+__decorate([
+    UseGuards(JwtAuthGuard, TourRoleGuard),
+    Post(':tourId/join-requests'),
+    __param(0, Param('tourId', ParseUUIDPipe)),
+    __param(1, Body()),
+    __param(2, Req()),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, Object, Object]),
+    __metadata("design:returntype", Promise)
+], TourController.prototype, "createJoinRequest", null);
+__decorate([
+    UseGuards(JwtAuthGuard, TourRoleGuard),
+    Post(':tourId/join-requests/:requestId/accept'),
+    __param(0, Param('tourId', ParseUUIDPipe)),
+    __param(1, Param('requestId')),
+    __param(2, Req()),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, String, Object]),
+    __metadata("design:returntype", Promise)
+], TourController.prototype, "acceptJoinRequest", null);
+__decorate([
+    UseGuards(JwtAuthGuard, TourRoleGuard),
+    Post(':tourId/join-requests/:requestId/reject'),
+    __param(0, Param('tourId', ParseUUIDPipe)),
+    __param(1, Param('requestId')),
+    __param(2, Req()),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, String, Object]),
+    __metadata("design:returntype", Promise)
+], TourController.prototype, "rejectJoinRequest", null);
+__decorate([
+    UseGuards(JwtAuthGuard, TourRoleGuard),
+    Delete(':tourId/members/:userId'),
+    __param(0, Param('tourId', ParseUUIDPipe)),
+    __param(1, Param('userId', ParseUUIDPipe)),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, String]),
+    __metadata("design:returntype", Promise)
+], TourController.prototype, "removeMember", null);
 TourController = __decorate([
     Controller('v1/tours'),
     __metadata("design:paramtypes", [PrismaService])

dist/rbac.middleware.js

@@ -21,6 +21,10 @@ let TourRoleGuard = class TourRoleGuard {
         if (!user || !tourId) {
             throw new ForbiddenException("Thông tin xác thực hoặc mã Tour không hợp lệ.");
         }
+        if (path.includes('/join-requests') && request.method === 'POST' && (!request.params.requestId || /\/join-requests\/[^/]+\/(accept|reject)$/.test(path))) {
+            request.tourParticipation = null;
+            return true;
+        }
         const participation = await this.prisma.tourParticipant.findUnique({
             where: {
                 tourId_userId: {

dist/rbac.middleware.js.map

@@ -1 +1 @@
-{"version":3,"file":"rbac.middleware.js","sourceRoot":"","sources":["../rbac.middleware.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAiC,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC/F,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAG7C,IAAM,aAAa,GAAnB,MAAM,aAAa;IACxB,YAAoB,MAAqB;QAArB,WAAM,GAAN,MAAM,CAAe;IAAG,CAAC;IAE7C,KAAK,CAAC,WAAW,CAAC,OAAyB;QACzC,MAAM,OAAO,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC,UAAU,EAAE,CAAC;QACpD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QAG1B,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;QAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC;QAEzB,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACrB,MAAM,IAAI,kBAAkB,CAAC,+CAA+C,CAAC,CAAC;QAChF,CAAC;QAOD,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC;YACjE,KAAK,EAAE;gBACL,aAAa,EAAE;oBACb,MAAM,EAAE,MAAM;oBACd,MAAM,EAAE,IAAI,CAAC,EAAE;iBAChB;aACF;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,MAAM,IAAI,kBAAkB,CAAC,4CAA4C,CAAC,CAAC;QAC7E,CAAC;QAGD,OAAO,CAAC,iBAAiB,GAAG,aAAa,CAAC;QAE1C,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAGjD,IACE,CAAC,IAAI,KAAK,mBAAmB,IAAI,IAAI,KAAK,aAAa,CAAC;YACxD,CAAC,UAAU,IAAI,aAAa,CAAC,EAC7B,CAAC;YACD,MAAM,IAAI,kBAAkB,CAAC,0DAA0D,CAAC,CAAC;QAC3F,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAlDY,aAAa;IADzB,UAAU,EAAE;qCAEiB,aAAa;GAD9B,aAAa,CAkDzB"}
+{"version":3,"file":"rbac.middleware.js","sourceRoot":"","sources":["../rbac.middleware.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAiC,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC/F,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAG7C,IAAM,aAAa,GAAnB,MAAM,aAAa;IACxB,YAAoB,MAAqB;QAArB,WAAM,GAAN,MAAM,CAAe;IAAG,CAAC;IAE7C,KAAK,CAAC,WAAW,CAAC,OAAyB;QACzC,MAAM,OAAO,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC,UAAU,EAAE,CAAC;QACpD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QAE1B,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;QAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC;QAEzB,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACrB,MAAM,IAAI,kBAAkB,CAAC,+CAA+C,CAAC,CAAC;QAChF,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,MAAM,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,IAAI,0CAA0C,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;YACzJ,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC;YACjC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC;YACjE,KAAK,EAAE;gBACL,aAAa,EAAE;oBACb,MAAM,EAAE,MAAM;oBACd,MAAM,EAAE,IAAI,CAAC,EAAE;iBAChB;aACF;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,MAAM,IAAI,kBAAkB,CAAC,4CAA4C,CAAC,CAAC;QAC7E,CAAC;QAED,OAAO,CAAC,iBAAiB,GAAG,aAAa,CAAC;QAE1C,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAEjD,IACE,CAAC,IAAI,KAAK,mBAAmB,IAAI,IAAI,KAAK,aAAa,CAAC;YACxD,CAAC,UAAU,IAAI,aAAa,CAAC,EAC7B,CAAC;YACD,MAAM,IAAI,kBAAkB,CAAC,0DAA0D,CAAC,CAAC;QAC3F,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AA/CY,aAAa;IADzB,UAAU,EAAE;qCAEiB,aAAa;GAD9B,aAAa,CA+CzB"}

dist/useTourStore.d.ts

@@ -23,11 +23,16 @@ interface TourState {
     addMember: (tourId: string, member: {
         userId: string;
         role?: string;
-    }) => Promise<void>;
+    }) => Promise<any>;
+    removeMember: (tourId: string, userId: string) => Promise<void>;
     setActiveLegId: (id: string | null) => void;
     setMapCenter: (pos: [number, number]) => void;
     fetchTour: (id: string) => Promise<void>;
     fetchPublicTours: () => Promise<void>;
+    createJoinRequest: (tourId: string, userId?: string) => Promise<any>;
+    fetchJoinRequests: (tourId: string) => Promise<any[]>;
+    acceptJoinRequest: (tourId: string, requestId: string) => Promise<any>;
+    rejectJoinRequest: (tourId: string, requestId: string) => Promise<any>;
 }
 export declare const useTourStore: import("zustand").UseBoundStore<import("zustand").StoreApi<TourState>>;
 export {};

dist/useTourStore.js

@@ -65,7 +65,13 @@ export const useTourStore = create((set, get) => ({
             },
             body: JSON.stringify(tourData),
         });
-        return await response.json();
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.message || data.error || 'Lỗi khi tạo Tour');
+        }
+        const tour = await response.json();
+        await get().fetchPublicTours();
+        return tour;
     },
     updateTour: async (id, data) => {
         const API_BASE = `http://${window.location.hostname}:3001`;
@@ -242,6 +248,20 @@ export const useTourStore = create((set, get) => ({
             set({ currentTour: { ...currentTour, legs: updatedLegs }, legs: updatedLegs });
         }
     },
+    removeMember: async (tourId, userId) => {
+        const API_BASE = `http://${window.location.hostname}:3001`;
+        const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members/${userId}`, {
+            method: 'DELETE',
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem('token')}`,
+            },
+        });
+        if (!response.ok)
+            throw new Error('Lỗi khi xóa thành viên');
+        const { currentTour } = get();
+        if (currentTour)
+            get().fetchTour(currentTour.id);
+    },
     addMember: async (tourId, member) => {
         const API_BASE = `http://${window.location.hostname}:3001`;
         const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members`, {
@@ -252,8 +272,71 @@ export const useTourStore = create((set, get) => ({
             },
             body: JSON.stringify(member),
         });
-        if (!response.ok)
-            throw new Error('Lỗi khi thêm thành viên');
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.message || data.error || 'Lỗi khi thêm thành viên');
+        }
+        const { currentTour } = get();
+        if (currentTour)
+            get().fetchTour(currentTour.id);
+    },
+    createJoinRequest: async (tourId, userId) => {
+        const API_BASE = `http://${window.location.hostname}:3001`;
+        const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${localStorage.getItem('token')}`
+            },
+            body: JSON.stringify({ userId }),
+        });
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.message || data.error || 'Lỗi khi tạo yêu cầu tham gia');
+        }
+        return response.json();
+    },
+    fetchJoinRequests: async (tourId) => {
+        const API_BASE = `http://${window.location.hostname}:3001`;
+        const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests`, {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem('token')}`
+            }
+        });
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.message || data.error || 'Lỗi khi tải yêu cầu tham gia');
+        }
+        return response.json();
+    },
+    acceptJoinRequest: async (tourId, requestId) => {
+        const API_BASE = `http://${window.location.hostname}:3001`;
+        const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests/${requestId}/accept`, {
+            method: 'POST',
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem('token')}`
+            }
+        });
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.message || data.error || 'Lỗi khi chấp nhận yêu cầu');
+        }
+        const { currentTour } = get();
+        if (currentTour)
+            get().fetchTour(currentTour.id);
+    },
+    rejectJoinRequest: async (tourId, requestId) => {
+        const API_BASE = `http://${window.location.hostname}:3001`;
+        const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests/${requestId}/reject`, {
+            method: 'POST',
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem('token')}`
+            }
+        });
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            throw new Error(data.message || data.error || 'Lỗi khi từ chối yêu cầu');
+        }
         const { currentTour } = get();
         if (currentTour)
             get().fetchTour(currentTour.id);

docs/ARCHITECTURE.md

@@ -4,7 +4,7 @@ Tài liệu này mô tả kiến trúc tổng thể, mô hình dữ liệu và c
 
 ---
         
-## 8. Cấu Trúc Thư Mục (Directory Structure)
+## 1. Cấu Trúc Thư Mục (Directory Structure)
 
 ```text
 /home/locpham/travelplanning/

frontend/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/index.tsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "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",
+    "zustand": "^5.0.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.1",
+    "@types/leaflet": "^1.9.12",
+    "@types/react": "^18.3.12",
+    "@vitejs/plugin-react": "^6.0.2",
+    "autoprefixer": "^10.5.0",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.1",
+    "typescript": "^5.7.0",
+    "vite": "^8.0.16"
+  }
+}

frontend/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
     "@tailwindcss/postcss": {},
-    "autoprefixer": {},
+    autoprefixer: {},
   },
-}
+};

frontend/src/App.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { LandingPage } from './LandingPage.js';
-import { TourDetailPage } from './TourDetailPage.js';
-import { ExploreMap } from './ExploreMap.js';
-import { SignupPage } from './SignupPage.js';
-import { useTourStore } from './useTourStore.js';
+import { LandingPage } from '@/pages/LandingPage';
+import { TourDetailPage } from '@/pages/TourDetailPage';
+import { ExploreMap } from '@/pages/ExploreMap';
+import { SignupPage } from '@/pages/SignupPage';
+import { useTourStore } from '@/store/useTourStore';
 
 const App = () => {
   type View = 'landing' | 'explore' | 'detail' | 'signup';
@@ -14,9 +14,6 @@ const App = () => {
   const fetchTour = useTourStore(state => state.fetchTour);
 
   useEffect(() => {
-    // Tự động xác định địa chỉ IP của Backend dựa trên hostname hiện tại
-    const API_BASE = `http://${window.location.hostname}:3001`;
-
     // Khôi phục phiên đăng nhập từ localStorage
     const savedUser = localStorage.getItem('user');
     if (savedUser) {
@@ -26,7 +23,7 @@ const App = () => {
     setIsUserLoaded(true); // Đánh dấu user đã được load
 
     // Kiểm tra xem hệ thống đã được cài đặt chưa
-    fetch(`${API_BASE}/api/v1/auth/status`)
+    fetch(`/api/v1/auth/status`)
       .then(res => res.ok ? res.json() : Promise.reject())
       .then(data => setIsInitialSetup(!!data.isInitialSetup))
       .catch(() => setIsInitialSetup(false));

frontend/src/components/AddLocationModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { X, MapPin, Loader2, Clock, Map as MapIcon } from 'lucide-react';
-import { useTourStore } from './useTourStore.js';
+import { useTourStore } from '@/store/useTourStore.js';
 import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet';
 import L from 'leaflet';
 

frontend/src/components/AddMemberModal.tsx

@@ -0,0 +1,343 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { X, Search, UserPlus, Loader2, Shield, Trash2, Clock, Check } from 'lucide-react';
+
+interface AddMemberModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  tourId: string;
+  participants?: Array<{ userId: string; role: string; user?: { id: string; name: string; email: string } }>;
+  joinRequests?: Array<{ id: string; userId: string; user?: { id: string; name: string; email: string }; status: string; requestedById: string }>;
+  onRemoveMember?: (userId: string) => Promise<void>;
+  onMemberAdded?: () => void;
+  userRole?: string;
+}
+
+export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose, tourId, participants = [], joinRequests = [], onRemoveMember, onMemberAdded, userRole }) => {
+  const [query, setQuery] = useState('');
+  const [users, setUsers] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<string | null>(null);
+  const [role, setRole] = useState<'OWNER' | 'MANAGER' | 'MEMBER' | 'MEMBER_NO_FINANCE' | 'VIEWER_ONLY'>('MEMBER');
+  const [submitting, setSubmitting] = useState(false);
+  const [fetchError, setFetchError] = useState('');
+  const [submitError, setSubmitError] = useState('');
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+  const [confirmTarget, setConfirmTarget] = useState<{ userId: string; name: string } | null>(null);
+  const [actionLoading, setActionLoading] = useState<string | null>(null);
+
+  const participantIds = useMemo(() => new Set(participants.map((p) => p.userId)), [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 fetchUsers = async () => {
+    setLoading(true);
+    setFetchError('');
+    try {
+      const res = await fetch(`/api/v1/users?q=${encodeURIComponent(query)}`, {
+        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+      });
+      if (!res.ok) throw new Error('Không thể tải danh sách người dùng');
+      const data = await res.json();
+      setUsers(Array.isArray(data) ? data : []);
+    } catch (err: any) {
+      setFetchError(err.message || 'Không thể tải danh sách người dùng');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) return;
+    fetchUsers();
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setQuery('');
+      setSelectedUser(null);
+      setRole('MEMBER');
+      setFetchError('');
+      setSubmitError('');
+    }
+  }, [isOpen]);
+
+  const handleRemove = async (userId: string, memberName: string) => {
+    if (!onRemoveMember) return;
+    setConfirmTarget({ userId, name: memberName });
+    setIsConfirmOpen(true);
+  };
+
+  const confirmRemove = async () => {
+    if (!confirmTarget || !onRemoveMember) return;
+    try {
+      await onRemoveMember(confirmTarget.userId);
+    } catch (err: any) {
+      setSubmitError(err.message || 'Không thể xóa thành viên');
+    } finally {
+      setIsConfirmOpen(false);
+      setConfirmTarget(null);
+    }
+  };
+
+  const handleRequestAction = async (reqId: string, action: 'accept' | 'reject', userName: string) => {
+    if (!onMemberAdded) return;
+    setActionLoading(reqId);
+    try {
+      const endpoint = action === 'accept'
+        ? `/api/v1/tours/${tourId}/join-requests/${reqId}/accept`
+        : `/api/v1/tours/${tourId}/join-requests/${reqId}/reject`;
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` },
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.message || data.error || (action === 'accept' ? 'Không thể chấp nhận' : 'Không thể từ chối'));
+      }
+      await onMemberAdded();
+    } catch (err: any) {
+      alert(err.message || 'Thao tác thất bại');
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleAdd = async () => {
+    if (!selectedUser) return;
+    setSubmitting(true);
+    setSubmitError('');
+    try {
+      const endpoint = canCreateDirectly ? `/api/v1/tours/${tourId}/members` : `/api/v1/tours/${tourId}/join-requests`;
+      const body = canCreateDirectly
+        ? { userId: selectedUser, role }
+        : { userId: selectedUser };
+      const res = await fetch(`${endpoint}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('token')}`,
+        },
+        body: JSON.stringify(body),
+      });
+      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);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  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 flex flex-col max-h-[90vh]">
+        <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'}
+            </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.'}
+            </p>
+          </div>
+          <button onClick={onClose} className="p-2 hover:bg-gray-200 rounded-full transition-colors">
+            <X className="w-5 h-5 text-gray-400" />
+          </button>
+        </div>
+
+        <div className="p-5 space-y-4">
+          <div>
+            <p className="text-[11px] font-bold text-gray-500 mb-2">Thành viên của tour ({participants.length})</p>
+            <div className="flex flex-wrap gap-3">
+              {participants.map((p) => {
+                const rawToken = localStorage.getItem('token');
+                let currentUserId: string | null = null;
+                try {
+                  const payload = JSON.parse(atob((rawToken || '').split('.')[1]));
+                  currentUserId = payload.sub;
+                } catch {
+                  currentUserId = null;
+                }
+                const isCurrentUser = currentUserId && p.userId === currentUserId;
+                const isOwner = p.role === 'OWNER';
+                const canRemove = onRemoveMember && !isCurrentUser && !isOwner;
+                return (
+                  <div key={p.userId} 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) || '?'}
+                      </div>
+                      {canRemove && (
+                        <button
+                          onClick={() => handleRemove(p.userId, p.user?.name || p.userId)}
+                          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">{p.user?.name || p.userId}</span>
+                  </div>
+                );
+              })}
+              {participants.length === 0 && (
+                <span className="text-xs text-gray-400">Chưa có thành viên nào</span>
+              )}
+            </div>
+          </div>
+
+          {joinRequests.length > 0 && (
+            <div>
+              <p className="text-[11px] font-bold text-gray-500 mb-2 flex items-center gap-1">
+                <Clock className="w-3 h-3 text-amber-500" /> Đang chờ phê duyệt ({joinRequests.length})
+              </p>
+              <div className="flex flex-wrap gap-3">
+                {(joinRequests as any[]).map((req) => (
+                  <div key={req.id} className="flex flex-col items-center gap-1 relative">
+                    <div className="w-10 h-10 rounded-full bg-amber-50 border border-amber-200 flex items-center justify-center text-amber-600 font-bold text-sm overflow-hidden">
+                      {req.user?.name?.charAt(0) || '?'}
+                    </div>
+                    <div className="absolute -top-1 -right-1 flex">
+                      <button
+                        type="button"
+                        disabled={actionLoading === req.id}
+                        onClick={() => handleRequestAction(req.id, 'accept', req.user?.name || req.userId)}
+                        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"
+                      >
+                        +
+                      </button>
+                      <button
+                        type="button"
+                        disabled={actionLoading === req.id}
+                        onClick={() => handleRequestAction(req.id, 'reject', req.user?.name || req.userId)}
+                        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"
+                      >
+                        x
+                      </button>
+                    </div>
+                    <span className="text-[10px] font-semibold text-gray-700 max-w-[72px] truncate">{req.user?.name || req.userId}</span>
+                    <span className="text-[9px] font-bold text-amber-600 bg-amber-100 px-1.5 py-0.5 rounded-full border border-amber-200">PENDING</span>
+                  </div>
+                ))}
+              </div>
+            </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>
+          )}
+
+          <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 (
+                    <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 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>
+                    </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 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>
+      </div>
+
+      {isConfirmOpen && (
+        <div className="fixed inset-0 z-[2100] flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-gray-900/70 backdrop-blur-sm" onClick={() => setIsConfirmOpen(false)} />
+          <div className="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5">
+            <h3 className="text-base font-bold text-gray-900">Xác nhận xóa thành viên</h3>
+            <p className="mt-2 text-sm text-gray-600">
+              Bạn có chắc muốn xóa <span className="font-semibold text-gray-800">{confirmTarget?.name}</span> khỏi tour này?
+            </p>
+            <div className="mt-4 flex justify-end gap-2">
+              <button onClick={() => setIsConfirmOpen(false)} className="px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">
+                Hủy
+              </button>
+              <button onClick={confirmRemove} className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold transition-colors">
+                Xóa
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/components/ConfirmModal.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { X } from 'lucide-react';
+
+interface ConfirmModalProps {
+  isOpen: boolean;
+  title?: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const ConfirmModal: React.FC<ConfirmModalProps> = ({
+  isOpen,
+  title = 'Xác nhận',
+  message,
+  confirmText = 'Xác nhận',
+  cancelText = 'Hủy',
+  onConfirm,
+  onCancel,
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[2200] flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-gray-900/70 backdrop-blur-sm" onClick={onCancel} />
+      <div className="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5">
+        <h3 className="text-base font-bold text-gray-900">{title}</h3>
+        <p className="mt-2 text-sm text-gray-600">{message}</p>
+        <div className="mt-4 flex justify-end gap-2">
+          <button onClick={onCancel} className="px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">
+            {cancelText}
+          </button>
+          <button onClick={onConfirm} className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold transition-colors">
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/CreateTourModal.tsx

@@ -0,0 +1,201 @@
+import React, { useState } from 'react';
+import { Trash2, Users } from 'lucide-react';
+import { useTourStore } from '@/store/useTourStore';
+
+export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolean, onClose: () => void, onSuccess: (tour: any) => void }) => {
+  const [title, setTitle] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [adultCount, setAdultCount] = useState(2);
+  const [childCount, setChildCount] = useState(1);
+  const [childDiscount, setChildDiscount] = useState(30);
+  const [isLoading, setIsLoading] = useState(false);
+  const createTour = useTourStore((state) => state.createTour);
+
+  const [members, setMembers] = useState<any[]>([]);
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<any[]>([]);
+  const [error, setError] = useState('');
+
+  if (!isOpen) return null;
+
+  const searchUsers = async (value: string) => {
+    setQuery(value);
+    if (!value.trim()) {
+      setResults([]);
+      return;
+    }
+    try {
+      const res = await fetch(`/api/v1/users?q=${encodeURIComponent(value)}`, {
+        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
+      });
+      if (!res.ok) throw new Error('Không thể tải người dùng');
+      const data = await res.json();
+      setResults(Array.isArray(data) ? data : []);
+    } catch (e: any) {
+      setResults([]);
+      setError(e.message || 'Không thể tải người dùng');
+    }
+  };
+
+  const confirmAddMember = (user: any) => {
+    setMembers((prev) => (prev.some((m) => m.id === user.id) ? prev : [...prev, user]));
+    setQuery('');
+    setResults([]);
+    setError('');
+  };
+
+  const removeMember = (userId: string) => {
+    setMembers((prev) => prev.filter((m) => m.id !== userId));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+    try {
+      const memberIds = members.map((m) => m.id);
+      const tour = await createTour({ 
+        title, 
+        startDate, 
+        endDate, 
+        memberIds,
+        adultCount,
+        childCount,
+        childDiscount
+      });
+      onSuccess(tour);
+      onClose();
+    } catch (e: any) {
+      setError(e.message || 'Lỗi khi tạo tour');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  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">
+          <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">
+          <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"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="VD: Khám phá Đà Lạt"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <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"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+              />
+            </div>
+            <div>
+              <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"
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="bg-blue-50/50 p-4 rounded-2xl border border-blue-100 space-y-3">
+            <div className="flex items-center gap-2 text-blue-600 mb-1">
+              <Users className="w-4 h-4" />
+              <span className="text-xs font-black uppercase tracking-wider">Cơ cấu đoàn & Định mức chi phí</span>
+            </div>
+            <div className="grid grid-cols-3 gap-3">
+              <div>
+                <label className="block text-[10px] font-bold text-gray-500 uppercase mb-1">Người lớn</label>
+                <input type="number" className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
+                  value={adultCount} onChange={e => setAdultCount(Number(e.target.value))} />
+              </div>
+              <div>
+                <label className="block text-[10px] font-bold text-gray-500 uppercase mb-1">Trẻ em</label>
+                <input type="number" className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
+                  value={childCount} onChange={e => setChildCount(Number(e.target.value))} />
+              </div>
+              <div>
+                <label className="block text-[10px] font-bold text-gray-500 uppercase mb-1">Giảm trẻ em %</label>
+                <input type="number" className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
+                  value={childDiscount} onChange={e => setChildDiscount(Number(e.target.value))} />
+              </div>
+            </div>
+            <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>
+            </div>
+            {error && <p className="text-xs text-red-600 mt-2">{error}</p>}
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg transition-all flex items-center justify-center gap-2"
+          >
+            {isLoading ? 'Đang tạo...' : 'Xác nhận tạo Tour'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};

frontend/src/components/ItineraryTimeline.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { format, differenceInMinutes, parseISO } from 'date-fns';
-import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List } from 'lucide-react';
-import { useTourStore } from './useTourStore.js';
+import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List, X, Calendar as CalendarIcon, AlignLeft } from 'lucide-react';
+import { useTourStore } from '@/store/useTourStore';
+import { ConfirmModal } from '@/components/ConfirmModal'; 
 
 const TimeVariance = ({ planned, actual }: { planned: string, actual: string | null }) => {
   if (!actual) return null;
@@ -39,7 +40,30 @@ export const ItineraryTimeline = ({
   onAddLocation, 
   onEditLocation 
 }: { onAddLocation?: (legId: string) => void, onEditLocation?: (location: any) => void }) => {
-  const { currentTour, legs, optimizeRouting, userRole, addLeg, updateLeg, deleteLeg, initializeLegs, deleteLocation } = useTourStore();
+  // 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);
+  const userRole = useTourStore(state => state.userRole);
+  const optimizeRouting = useTourStore(state => state.optimizeRouting);
+  const addLeg = useTourStore(state => state.addLeg);
+  const updateLeg = useTourStore(state => state.updateLeg);
+  const deleteLeg = useTourStore(state => state.deleteLeg);
+  const initializeLegs = useTourStore(state => state.initializeLegs);
+  const deleteLocation = useTourStore(state => state.deleteLocation);
+
+  const [confirmState, setConfirmState] = useState<{ open: boolean; title?: string; message?: string; onConfirm?: () => void }>({ open: false });
+  const [isLegCountModalOpen, setIsLegCountModalOpen] = useState(false);
+  const [tempLegCount, setTempLegCount] = useState(3);
+
+  // State cho Modal sửa chặng
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [editingLegData, setEditingLegData] = useState({ 
+    id: '', 
+    note: '', 
+    description: '', 
+    startDate: '', 
+    endDate: '' 
+  });
 
   const toggleComplete = async (locationId: string) => {
     // Gọi API PATCH /api/v1/locations/:id để cập nhật trạng thái
@@ -54,36 +78,70 @@ export const ItineraryTimeline = ({
   };
 
   const handleDeclareLegs = async () => {
-    const countStr = window.prompt("Chuyến đi này bạn muốn chia làm bao nhiêu chặng?", "3");
-    const count = parseInt(countStr || "0");
-    if (count > 0 && currentTour) {
-      await initializeLegs(currentTour.id, count);
+    setTempLegCount(legs.length > 0 ? legs.length : 3);
+    setIsLegCountModalOpen(true);
+  };
+
+  const confirmDeclareLegs = async () => {
+    if (tempLegCount > 0 && tempLegCount <= 20 && currentTour) {
+      await initializeLegs(currentTour.id, tempLegCount);
     }
+    setIsLegCountModalOpen(false);
   };
 
   const handleEditLeg = async (leg: any) => {
-    const note = window.prompt("Sửa ghi chú chặng:", leg.note || "");
-    if (note !== null) {
-      await updateLeg(leg.id, { note });
+    setEditingLegData({ 
+      id: leg.id, 
+      note: leg.note || "",
+      description: leg.description || "",
+      startDate: leg.startDate ? leg.startDate.split('T')[0] : "",
+      endDate: leg.endDate ? leg.endDate.split('T')[0] : ""
+    });
+    setIsEditModalOpen(true);
+  };
+
+  const saveLegEdit = async () => {
+    if (editingLegData.id) {
+      await updateLeg(editingLegData.id, { 
+        note: editingLegData.note,
+        description: editingLegData.description,
+        startDate: editingLegData.startDate || null,
+        endDate: editingLegData.endDate || null
+      });
+      setIsEditModalOpen(false);
     }
   };
 
   const handleDeleteLeg = async (legId: string) => {
-    if (window.confirm("Bạn có chắc chắn muốn xóa chặng này?")) {
-      try {
-        await deleteLeg(legId);
-      } catch (err: any) {
-        alert(err.message);
-      }
-    }
+    setConfirmState({
+      open: true,
+      title: 'Xóa chặng',
+      message: 'Bạn có chắc chắn muốn xóa chặng này?',
+      onConfirm: async () => {
+        try {
+          await deleteLeg(legId);
+        } catch (err: any) {
+          alert(err.message);
+        } finally {
+          setConfirmState({ open: false });
+        }
+      },
+    });
   };
 
   const handleDeleteLocation = async (id: string) => {
-    if (window.confirm("Bạn có chắc chắn muốn xóa địa điểm này?")) {
-      try {
-        await deleteLocation(id);
-      } catch (err: any) { alert(err.message); }
-    }
+    setConfirmState({
+      open: true,
+      title: 'Xóa địa điểm',
+      message: 'Bạn có chắc chắn muốn xóa địa điểm này?',
+      onConfirm: async () => {
+        try {
+          await deleteLocation(id);
+        } catch (err: any) { alert(err.message); } finally {
+          setConfirmState({ open: false });
+        }
+      },
+    });
   };
 
   return (
@@ -338,6 +396,133 @@ export const ItineraryTimeline = ({
           </div>
         )}
       </div>
+      <ConfirmModal
+        isOpen={confirmState.open}
+        title={confirmState.title}
+        message={confirmState.message}
+        onConfirm={() => confirmState.onConfirm?.()}
+        onCancel={() => setConfirmState({ open: false })}
+      />
+
+      {/* Modal Khai báo số chặng (Popover) */}
+      {isLegCountModalOpen && (
+        <div className="fixed inset-0 z-[4000] flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsLegCountModalOpen(false)} />
+          <div className="relative w-full max-w-sm bg-white rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-xl font-black text-gray-900">Số chặng lộ trình</h3>
+              <button onClick={() => setIsLegCountModalOpen(false)} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
+                <X className="w-5 h-5 text-gray-400" />
+              </button>
+            </div>
+            
+            <p className="text-sm text-gray-500 mb-6 leading-relaxed">
+              Bạn muốn chia chuyến đi này thành bao nhiêu chặng nhỏ? (Tối đa 20 chặng)
+            </p>
+
+            <div className="flex items-center justify-center gap-6 mb-8">
+              <button 
+                onClick={() => setTempLegCount(Math.max(1, tempLegCount - 1))}
+                className="w-12 h-12 rounded-2xl border-2 border-gray-100 flex items-center justify-center text-2xl font-bold text-gray-400 hover:border-blue-200 hover:text-blue-600 transition-all"
+              >
+                -
+              </button>
+              <span className="text-4xl font-black text-blue-600 w-12 text-center">{tempLegCount}</span>
+              <button 
+                onClick={() => setTempLegCount(Math.min(20, tempLegCount + 1))}
+                className="w-12 h-12 rounded-2xl border-2 border-gray-100 flex items-center justify-center text-2xl font-bold text-gray-400 hover:border-blue-200 hover:text-blue-600 transition-all"
+              >
+                +
+              </button>
+            </div>
+
+            <button
+              onClick={confirmDeclareLegs}
+              className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 transition-all active:scale-95"
+            >
+              Xác nhận
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Modal Chỉnh sửa Chặng (Popover) */}
+      {isEditModalOpen && (
+        <div className="fixed inset-0 z-[4000] flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsEditModalOpen(false)} />
+          <div className="relative w-full max-w-md bg-white rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-xl font-black text-gray-900">Chỉnh sửa Chặng</h3>
+              <button onClick={() => setIsEditModalOpen(false)} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
+                <X className="w-5 h-5 text-gray-400" />
+              </button>
+            </div>
+            
+            <div className="space-y-5">
+              <div>
+                <label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Tên chặng</label>
+                <input
+                  type="text"
+                  value={editingLegData.note}
+                  onChange={(e) => setEditingLegData({ ...editingLegData, note: e.target.value })}
+                  placeholder="VD: Ngày 1: Khởi hành"
+                  className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
+                />
+              </div>
+
+              <div>
+                <label className="flex items-center gap-2 text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">
+                  <AlignLeft className="w-3 h-3" /> Mô tả chi tiết
+                </label>
+                <textarea
+                  value={editingLegData.description}
+                  onChange={(e) => setEditingLegData({ ...editingLegData, description: e.target.value })}
+                  placeholder="Mô tả các hoạt động chính trong chặng này..."
+                  className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm min-h-[120px] resize-none"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="flex items-center gap-2 text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">
+                    <CalendarIcon className="w-3 h-3" /> Bắt đầu
+                  </label>
+                  <input
+                    type="date"
+                    value={editingLegData.startDate}
+                    onChange={(e) => setEditingLegData({ ...editingLegData, startDate: e.target.value })}
+                    className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Kết thúc</label>
+                  <input
+                    type="date"
+                    value={editingLegData.endDate}
+                    onChange={(e) => setEditingLegData({ ...editingLegData, endDate: e.target.value })}
+                    className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3 mt-8">
+              <button
+                onClick={() => setIsEditModalOpen(false)}
+                className="py-4 bg-gray-100 hover:bg-gray-200 text-gray-600 font-bold rounded-2xl transition-all active:scale-95"
+              >
+                Hủy
+              </button>
+              <button
+                onClick={saveLegEdit}
+                className="py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 transition-all active:scale-95"
+              >
+                Lưu thay đổi
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

frontend/src/components/LoginModal.tsx

@@ -22,8 +22,7 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
     setIsLoading(true);
 
     try {
-      const API_BASE = `http://${window.location.hostname}:3001`;
-      const response = await fetch(`${API_BASE}/api/v1/auth/login`, {
+      const response = await fetch(`/api/v1/auth/login`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ email, password }),

frontend/src/components/NotificationModal.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { X, CheckCircle, AlertCircle, Info } from 'lucide-react';
+
+interface NotificationModalProps {
+  isOpen: boolean;
+  title?: string;
+  message?: string;
+  type?: 'success' | 'error' | 'info';
+  onConfirm: () => void;
+}
+
+/**
+ * NotificationModal - Component hiển thị thông báo phản hồi cho người dùng
+ */
+export const NotificationModal: React.FC<NotificationModalProps> = ({
+  isOpen,
+  title = 'Thông báo',
+  message,
+  type = 'info',
+  onConfirm,
+}) => {
+  if (!isOpen) return null;
+
+  const icons = {
+    success: <CheckCircle className="w-12 h-12 text-green-500" />,
+    error: <AlertCircle className="w-12 h-12 text-red-500" />,
+    info: <Info className="w-12 h-12 text-blue-500" />,
+  };
+
+  const colors = {
+    success: 'bg-green-600 hover:bg-green-700 shadow-green-100',
+    error: 'bg-red-600 hover:bg-red-700 shadow-red-100',
+    info: 'bg-blue-600 hover:bg-blue-700 shadow-blue-100',
+  };
+
+  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-200" onClick={onConfirm} />
+      
+      {/* Modal Content */}
+      <div className="relative w-full max-w-sm bg-white rounded-[32px] shadow-2xl overflow-hidden p-8 text-center animate-in zoom-in-95 duration-200">
+        <div className="flex justify-center mb-5">
+          {icons[type]}
+        </div>
+        
+        <h2 className="text-xl font-black text-gray-900 mb-2">{title}</h2>
+        <p className="text-gray-500 text-sm leading-relaxed mb-8">
+          {message || "Bạn không được phép gỡ bỏ thành viên này!"}
+        </p>
+        
+        <button
+          onClick={onConfirm}
+          className={`w-full py-4 text-white font-bold rounded-2xl transition-all shadow-lg active:scale-95 ${colors[type]}`}
+        >
+          Đã hiểu
+        </button>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Custom hook để quản lý trạng thái của NotificationModal
+ */
+export const useNotificationModal = () => {
+  const [modalState, setModalState] = useState<{
+    isOpen: boolean;
+    title?: string;
+    message?: string;
+    type?: 'success' | 'error' | 'info';
+  }>({
+    isOpen: false,
+    title: 'Thông báo',
+    message: '',
+    type: 'info',
+  });
+
+  const openModal = (title: string, message: string, type: 'success' | 'error' | 'info' = 'info') => {
+    setModalState({ isOpen: true, title, message, type });
+  };
+
+  const closeModal = () => {
+    setModalState((prev) => ({ ...prev, isOpen: false }));
+  };
+
+  return { modalState, openModal, closeModal };
+};

frontend/src/components/UserManagementModal.tsx

@@ -14,8 +14,7 @@ export const UserManagementModal: React.FC<UserManagementModalProps> = ({ isOpen
   const fetchUsers = async () => {
     setLoading(true);
     try {
-      const API_BASE = `http://${window.location.hostname}:3001`;
-      const response = await fetch(`${API_BASE}/api/v1/users`, {
+      const response = await fetch(`/api/v1/users`, {
         headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
       });
       if (!response.ok) throw new Error('Không thể tải danh sách người dùng');
@@ -34,8 +33,7 @@ export const UserManagementModal: React.FC<UserManagementModalProps> = ({ isOpen
 
   const handleToggleBlock = async (id: string) => {
     try {
-      const API_BASE = `http://${window.location.hostname}:3001`;
-      await fetch(`${API_BASE}/api/v1/users/block/${id}`, {
+      await fetch(`/api/v1/users/block/${id}`, {
         method: 'POST',
         headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
       });
@@ -48,8 +46,7 @@ export const UserManagementModal: React.FC<UserManagementModalProps> = ({ isOpen
   const handleDelete = async (id: string) => {
     if (!confirm('Bạn có chắc chắn muốn xóa người dùng này?')) return;
     try {
-      const API_BASE = `http://${window.location.hostname}:3001`;
-      const res = await fetch(`${API_BASE}/api/v1/users/${id}`, {
+      const res = await fetch(`/api/v1/users/${id}`, {
         method: 'DELETE',
         headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
       });

frontend/src/pages/ExploreMap.tsx

@@ -4,10 +4,10 @@ import _MarkerClusterGroup from 'react-leaflet-cluster';
 const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup;
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
-import { useTourStore } from './useTourStore.js';
+import { useTourStore } from '@/store/useTourStore';
 import { X, Navigation, Image as ImageIcon, LogOut, Settings, Edit2, Trash2 } from 'lucide-react';
-import { UserManagementModal } from './UserManagementModal.js';
-import { CreateTourModal } from './CreateTourModal.js';
+import { UserManagementModal } from '@/components/UserManagementModal';
+import { CreateTourModal } from '../components/CreateTourModal';
 
 // Fix lỗi icon mặc định của Leaflet
 const DefaultIcon = L.icon({
@@ -46,8 +46,11 @@ function MapTracker() {
 }
 
 export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: () => void, onLogout?: () => void, user?: any, onViewTour: (id: string) => void }) => {
-  // Thêm fetchTour vào destructuring từ store
-  const { publicTours, fetchPublicTours, fetchTour, setMapCenter } = useTourStore();
+  // Tối ưu hóa việc lấy dữ liệu từ store bằng selectors để tránh re-render thừa
+  const publicTours = useTourStore(state => state.publicTours);
+  const fetchPublicTours = useTourStore(state => state.fetchPublicTours);
+  const fetchTour = useTourStore(state => state.fetchTour);
+  const setMapCenter = useTourStore(state => state.setMapCenter);
 
   // Khởi tạo vị trí từ localStorage nếu có, nếu không dùng mặc định (TP.HCM)
   const [initialViewState] = useState(() => {
@@ -152,37 +155,37 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: ()
         
         <MarkerClusterGroup chunkedLoading>
           {publicTours.map((tour) => {
-          const startLoc = tour.legs?.[0]?.locations?.[0];
-          if (!startLoc) return null;
+            const startLoc = tour.legs?.[0]?.locations?.[0];
+            const tourImage = tour.photos?.[0]?.imageUrl || `https://picsum.photos/seed/${tour.id}/200/200`;
+            const markerPos = startLoc
+              ? [startLoc.latitude, startLoc.longitude] as [number, number]
+              : userPos;
 
-          const tourImage = tour.photos?.[0]?.imageUrl || `https://picsum.photos/seed/${tour.id}/200/200`;
-
-          return (
-            <React.Fragment key={tour.id}>
-              {/* Tour Marker - Bong bóng chứa thumbnail. Click chuyển vào Dashboard */}
-              <Marker 
-                position={[startLoc.latitude, startLoc.longitude]}
-                eventHandlers={{
-                  click: () => onViewTour(tour.id)
-                }}
-                icon={L.divIcon({
-                  className: 'custom-bubble',
-                  html: `
-                    <div class="relative group">
-                      <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
-                        <img src="${tourImage}" class="w-full h-full object-cover" />
+            return (
+              <React.Fragment key={tour.id}>
+                <Marker
+                  position={markerPos}
+                  eventHandlers={{
+                    click: () => onViewTour(tour.id)
+                  }}
+                  icon={L.divIcon({
+                    className: 'custom-bubble',
+                    html: `
+                      <div class="relative group">
+                        <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
+                          <img src="${tourImage}" class="w-full h-full object-cover" />
+                        </div>
+                        <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
+                          S
+                        </div>
                       </div>
-                      <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
-                        S
-                      </div>
-                    </div>
-                  `,
-                  iconSize: [48, 48],
-                  iconAnchor: [24, 24]
-                })}
-              />
-            </React.Fragment>
-          );
+                    `,
+                    iconSize: [48, 48],
+                    iconAnchor: [24, 24]
+                  })}
+                />
+              </React.Fragment>
+            );
           })}
         </MarkerClusterGroup>
       </MapContainer>

frontend/src/pages/LandingPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { LogIn, Compass, ArrowRight, Map as MapIcon, UserPlus, ShieldCheck } from 'lucide-react';
-import { LoginModal } from './LoginModal.js';
+import { LoginModal } from '../components/LoginModal';
 
 const TRAVEL_IMAGES = [
   "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?auto=format&fit=crop&q=80",

frontend/src/pages/SignupPage.tsx

@@ -29,9 +29,7 @@ export const SignupPage: React.FC<SignupPageProps> = ({ onBack, onSuccess }) =>
 
     setIsLoading(true);
     try {
-      const API_BASE = `http://${window.location.hostname}:3001`;
-      
-      const response = await fetch(`${API_BASE}/api/v1/auth/signup`, {
+      const response = await fetch(`/api/v1/auth/signup`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({

frontend/src/pages/TourDetailPage.tsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { ItineraryTimeline } from './ItineraryTimeline.js';
-import { ExpenseManager } from './ExpenseManager.js';
-import { useTourStore } from './useTourStore.js';
-import { AddLocationModal } from './AddLocationModal.js';
-import { AddMemberModal } from './AddMemberModal.js';
-import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline } from 'react-leaflet';
+import { ItineraryTimeline } from '../components/ItineraryTimeline';
+import { ExpenseManager } from '../components/ExpenseManager';
+import { useTourStore } from '@/store/useTourStore';
+import { AddLocationModal } from '@/components/AddLocationModal';
+import { AddMemberModal } from '../components/AddMemberModal';
+import { ConfirmModal } from '../components/ConfirmModal';
+import { NotificationModal, useNotificationModal } from '@/components/NotificationModal';
+import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline, useMap } from 'react-leaflet';
 import _MarkerClusterGroup from 'react-leaflet-cluster';
 const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup;
-import { useMap } from 'react-leaflet';
 import {
   Map as MapIcon, 
   Wallet, 
@@ -21,7 +22,10 @@ import {
   List,
   Map as MapIconLucide,
   MapPin,
-  Flag
+  Flag,
+  Clock,
+  Check,
+  X
 } from 'lucide-react';
 import L from 'leaflet';
 
@@ -158,12 +162,45 @@ const MapContextMenu = ({ onAction }: { onAction: (action: string, latlng: L.Lat
 };
 
 export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
+  // Tách biệt các state và actions để tối ưu performance - Chuyển lên đầu để tránh lỗi initialization
+  const currentTour = useTourStore(state => state.currentTour);
+  const legs = useTourStore(state => state.legs);
+  const publicTours = useTourStore(state => state.publicTours);
+  const userRole = useTourStore(state => state.userRole);
+  const mapCenter = useTourStore(state => state.mapCenter);
+
   const [activeTab, setActiveTab] = useState<'plan' | 'expense' | 'photo' | 'settings'>('plan');
   const [viewMode, setViewMode] = useState<'map' | 'timeline'>('timeline');
   const [isAddLocationOpen, setIsAddLocationOpen] = useState(false);
   const [isAddMemberOpen, setIsAddMemberOpen] = useState(false);
   const [targetLegId, setTargetLegId] = useState<string | null>(null);
   const [editingLocation, setEditingLocation] = useState<any>(null);
+  const [selectedMember, setSelectedMember] = useState<any>(null);
+  const [isMemberDetailOpen, setIsMemberDetailOpen] = useState(false);
+  const [joinRequests, setJoinRequests] = useState<any[]>([]);
+  const [titleInput, setTitleInput] = useState(currentTour?.title ?? '');
+  const [descriptionInput, setDescriptionInput] = useState(currentTour?.description ?? '');
+  // State cho input số lượng người tham gia
+  const [adultCountInput, setAdultCountInput] = useState(currentTour?.adultCount ?? 0);
+  const [childCountInput, setChildCountInput] = useState(currentTour?.childCount ?? 0);
+  const [childDiscountInput, setChildDiscountInput] = useState(currentTour?.childDiscount ?? 0);
+  const [joinRequestActionId, setJoinRequestActionId] = useState<string | null>(null);
+  const [confirmState, setConfirmState] = useState<{ open: boolean; title?: string; message?: string; onConfirm?: () => void }>({ open: false });
+
+  const fetchTour = useTourStore(state => state.fetchTour);
+  const fetchPublicTours = useTourStore(state => state.fetchPublicTours);
+  const setMapCenter = useTourStore(state => state.setMapCenter);
+  const updateTourStartPoint = useTourStore(state => state.updateTourStartPoint);
+  const updateTourEndPoint = useTourStore(state => state.updateTourEndPoint);
+  const updateTourDetails = useTourStore(state => state.updateTourDetails); // Thêm action này
+  const initializeLegs = useTourStore(state => state.initializeLegs);
+  const addLocation = useTourStore(state => state.addLocation);
+  const removeMember = useTourStore(state => state.removeMember);
+  const fetchJoinRequests = useTourStore(state => state.fetchJoinRequests);
+  const acceptJoinRequest = useTourStore(state => state.acceptJoinRequest);
+  const rejectJoinRequest = useTourStore(state => state.rejectJoinRequest);
+
+  const notificationModal = useNotificationModal();
 
   // Khôi phục vị trí và mức zoom từ localStorage
   const [initialViewState] = useState(() => {
@@ -175,14 +212,16 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
   });
 
   // SỬA LỖI: Sử dụng các selectors riêng lẻ để tránh re-render trang khi mapCenter trong store thay đổi
-  // Gom các store actions/state lại để tối ưu hóa re-render
-  const { 
-    currentTour, legs, fetchTour, fetchPublicTours, publicTours, 
-    userRole, mapCenter, setMapCenter, updateTourStartPoint, 
-    updateTourEndPoint, initializeLegs, addLocation, addMember 
-  } = useTourStore();
 
   const canEdit = ['OWNER', 'MANAGER'].includes(userRole || '');
+  const canInvite = ['OWNER', 'MANAGER', 'MEMBER'].includes(userRole || '');
+  const isOwner = userRole === 'OWNER';
+
+  useEffect(() => {
+    if (currentTour && ['OWNER', 'MANAGER'].includes(userRole || '')) {
+      fetchJoinRequests(currentTour.id).then(setJoinRequests).catch(() => setJoinRequests([]));
+    }
+  }, [currentTour, userRole]);
 
   const [mapZoom] = useState(initialViewState?.zoom || 13);
 
@@ -209,14 +248,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
     }
   }, [publicTours, currentTour, fetchTour]);
 
-  // Hàm xử lý khai báo số chặng
-  const handleDeclareLegs = async () => {
-    const countStr = window.prompt("Chuyến đi này bạn muốn chia làm bao nhiêu chặng?", "3");
-    const count = parseInt(countStr || "0");
-    if (count > 0 && currentTour) {
-      await initializeLegs(currentTour.id, count);
-    }
-  };
+  
 
   // Hàm xử lý các hành động từ Context Menu của bản đồ
   const handleMapAction = async (action: string, latlng: L.LatLng) => {
@@ -309,6 +341,23 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
     }
   };
 
+  // Hàm xử lý cập nhật số lượng người tham gia
+  const handleUpdateTourInfo = async () => {
+    if (!currentTour) return;
+    try {
+      await updateTourDetails(currentTour.id, {
+        title: titleInput,
+        description: descriptionInput,
+        adultCount: adultCountInput,
+        childCount: childCountInput,
+        childDiscount: childDiscountInput,
+      });
+      notificationModal.openModal('Thành công', 'Đã cập nhật thông tin chuyến đi.', 'success');
+      fetchTour(currentTour.id); // Re-fetch tour để cập nhật lại các tính toán liên quan
+    } catch (error: any) {
+      notificationModal.openModal('Lỗi', error.message || 'Không thể cập nhật thông tin.', 'error');
+    }
+  };
   // Xác định Điểm xuất phát và Điểm kết thúc hiển thị dưới widget tài chính
   const startPoint = legs[0]?.locations[0];
   const lastLeg = legs[legs.length - 1];
@@ -324,6 +373,23 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
 
   const hasFinanceAccess = ['OWNER', 'MANAGER', 'MEMBER'].includes(userRole || '');
 
+  // Logic tính toán ngày hiển thị: Ưu tiên ngày của Tour, sau đó đến ngày của các Chặng
+  const tourDateDisplay = useMemo(() => {
+    if (currentTour?.startDate && currentTour?.endDate) {
+      return `${new Date(currentTour.startDate).toLocaleDateString('vi-VN')} - ${new Date(currentTour.endDate).toLocaleDateString('vi-VN')}`;
+    }
+    const firstLeg = legs[0];
+    const lastLeg = legs[legs.length - 1];
+    const start = firstLeg?.startDate;
+    const end = lastLeg?.endDate || lastLeg?.startDate;
+    if (start && end) {
+      return `${new Date(start).toLocaleDateString('vi-VN')} - ${new Date(end).toLocaleDateString('vi-VN')}`;
+    } else if (start) {
+      return `Từ ${new Date(start).toLocaleDateString('vi-VN')}`;
+    }
+    return "Chưa xác định ngày";
+  }, [currentTour, legs]);
+
   const travelQuotes = [
     "Đừng nghe họ nói, hãy tự mình đi xem.",
     "Thế giới là một cuốn sách, và ai không đi du lịch thì chỉ mới đọc được một trang.",
@@ -335,7 +401,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
 
   const tourInfo = {
     title: currentTour?.title || "Hành trình khám phá TP.HCM",
-    date: currentTour?.startDate ? `${new Date(currentTour.startDate).toLocaleDateString('vi-VN')} - ${new Date(currentTour.endDate).toLocaleDateString('vi-VN')}` : "Chưa xác định ngày",
+    date: tourDateDisplay,
     membersCount: currentTour?.participants?.length || 0,
     budget: currentTour?.totalCost ? `${Number(currentTour.totalCost).toLocaleString()} VND` : "0 VND",
     coverImage: currentTour?.photos?.[0]?.imageUrl || "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop"
@@ -366,6 +432,14 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
         <div className="relative z-10 p-6 text-white pt-28 pb-20">
           <div className="max-w-2xl mx-auto space-y-4">
             <h2 className="text-3xl font-black tracking-tight drop-shadow-md">{tourInfo.title}</h2>
+            
+            {currentTour?.description && (
+              <p className="text-sm md:text-base text-white/90 max-w-xl line-clamp-3 md:line-clamp-none bg-black/20 backdrop-blur-sm p-4 rounded-2xl border border-white/10 italic leading-relaxed">
+                <Quote className="w-4 h-4 inline-block mr-2 opacity-50" />
+                {currentTour.description}
+              </p>
+            )}
+
                         {/* Dòng tóm tắt Lộ trình */}
             <div className="mt-3 text-[11px] sm:text-sm font-bold text-white bg-black/40 backdrop-blur-md px-4 py-2 rounded-xl border border-white/10 inline-flex items-center max-w-full">
               <span className="text-white/60 mr-1">Lộ trình:</span>
@@ -391,10 +465,85 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
 
             {/* Member Avatars Stack */}
             <div className="flex items-center gap-2 mt-4">
-              <div className="flex -space-x-3">
+              <div className="flex flex-wrap gap-2">
                 {currentTour?.participants?.slice(0, 5).map((p: any, i: number) => (
-                  <div key={i} className="w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg">
+                  <button
+                    key={p.userId || i}
+                    onClick={() => {
+                      setSelectedMember(p);
+                      setIsMemberDetailOpen(true);
+                    }}
+                    className="w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg hover:scale-110 transition-transform"
+                    title={p.user?.name || p.userId}
+                  >
                     <img src={`https://i.pravatar.cc/100?u=${p.userId}`} alt="Avatar" />
+                  </button>
+                ))}
+                {isOwner && joinRequests.slice(0, 3).map((req: any) => (
+                  <div key={req.id} className="relative group">
+                    <div className="w-10 h-10 rounded-full border-2 border-amber-400 bg-amber-50 flex items-center justify-center text-amber-700 font-bold overflow-hidden shadow-lg">
+                      {req.user?.name?.charAt(0) || '?'}
+                    </div>
+                      <div className="absolute -top-1 -right-1 flex">
+                        <button
+                          type="button"
+                          disabled={joinRequestActionId === req.id}
+                          onClick={async (e) => {
+                            e.stopPropagation();
+                            if (!currentTour) return;
+                            setConfirmState({
+                              open: true,
+                              title: 'Chấp nhận yêu cầu',
+                              message: `Chấp nhận ${req.user?.name || req.userId} vào tour?`,
+                              onConfirm: async () => {
+                                setJoinRequestActionId(req.id);
+                                try {
+                                  await acceptJoinRequest(currentTour.id, req.id);
+                                  setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                } catch (e: any) {
+                                   notificationModal.openModal('Thông báo', e.message || 'Không thể chấp nhận yêu cầu', 'error');
+                                } finally {
+                                  setJoinRequestActionId(null);
+                                  setConfirmState({ open: false });
+                                }
+                              },
+                            });
+                          }}
+                          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"
+                        >
+                          +
+                        </button>
+                        <button
+                          type="button"
+                          disabled={joinRequestActionId === req.id}
+                          onClick={async (e) => {
+                            e.stopPropagation();
+                            if (!currentTour) return;
+                            setConfirmState({
+                              open: true,
+                              title: 'Từ chối yêu cầu',
+                              message: `Từ chối ${req.user?.name || req.userId} tham gia tour?`,
+                              onConfirm: async () => {
+                                setJoinRequestActionId(req.id);
+                                try {
+                                  await rejectJoinRequest(currentTour.id, req.id);
+                                  setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                } catch (e: any) {
+                                   notificationModal.openModal('Thông báo', e.message || 'Không thể từ chối yêu cầu', 'error');
+                                } finally {
+                                  setJoinRequestActionId(null);
+                                  setConfirmState({ open: false });
+                                }
+                              },
+                            });
+                          }}
+                          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"
+                        >
+                          x
+                        </button>
+                      </div>
                   </div>
                 ))}
                 {tourInfo.membersCount > 5 && (
@@ -403,18 +552,18 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                   </div>
                 )}
               </div>
-               <button 
-  onClick={() => {
-                    if (!currentTour) return;
-                    if (canEdit) setIsAddMemberOpen(true);
-                  }}
-  disabled={!canEdit}
-  className={`p-2 rounded-full border backdrop-blur-sm transition-all ml-2 ${
-                    canEdit ? 'bg-white/10 hover:bg-white/20 border-white/20' : 'bg-white/5 border-white/10 opacity-50'
-                  }`}
->
-                 <Plus className="w-4 h-4" />
-               </button>
+              <button
+                onClick={() => {
+                  if (!currentTour) return;
+                  if (canInvite) setIsAddMemberOpen(true);
+                }}
+                disabled={!canInvite}
+                className={`p-2 rounded-full border backdrop-blur-sm transition-all ml-2 ${
+                  canInvite ? 'bg-white/10 hover:bg-white/20 border-white/20' : 'bg-white/5 border-white/10 opacity-50'
+                }`}
+              >
+                <Plus className="w-4 h-4" />
+              </button>
             </div>
           </div>
         </div>
@@ -422,12 +571,15 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
 
       {/* Financial Quick-View Widget or Quote */}
       <div className="max-w-2xl mx-auto -mt-10 px-4 relative z-10">
-        <div className={`rounded-3xl p-6 shadow-2xl transition-all duration-500 ${hasFinanceAccess ? 'bg-indigo-600 text-white shadow-indigo-200' : 'bg-white text-gray-600 border border-gray-100'}`}>
+        <div 
+          onClick={() => hasFinanceAccess && setActiveTab('expense')}
+          className={`rounded-3xl p-6 shadow-2xl transition-all duration-500 ${hasFinanceAccess ? 'bg-indigo-600 text-white shadow-indigo-200 cursor-pointer hover:scale-[1.02] active:scale-95' : 'bg-white text-gray-600 border border-gray-100'}`}
+        >
           <div className="flex justify-between items-center">
             {hasFinanceAccess ? (
               <>
                 <div>
-                  <p className="text-indigo-100 text-xs font-black uppercase tracking-widest mb-1">Tổng chi tiêu hiện tại</p>
+                  <p className="text-indigo-100 text-[10px] font-black uppercase tracking-widest mb-1">Tổng chi tiêu hiện tại (Nhấn để xem chi tiết)</p>
                   <h3 className="text-3xl font-black">{tourInfo.budget}</h3>
                 </div>
                 <div className="p-4 bg-white/10 rounded-2xl backdrop-blur-md"><Wallet className="w-8 h-8" /></div>
@@ -594,9 +746,177 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
           )}
 
           {activeTab === 'settings' && (
-            <div className="p-8 text-center bg-white rounded-3xl border border-dashed border-gray-200 animate-in zoom-in-95">
-              <Settings className="w-12 h-12 text-gray-300 mx-auto mb-4" />
-              <p className="text-gray-500 font-medium">Tính năng quản lý thành viên đang được cập nhật...</p>
+            <div className="space-y-4">
+              <div className="p-6 bg-white rounded-3xl border border-dashed border-gray-200 animate-in zoom-in-95">
+                <div className="flex items-center gap-3 mb-4">
+                  <Clock className="w-6 h-6 text-blue-500" />
+                  <h3 className="text-lg font-bold text-gray-900">Yêu cầu tham gia</h3>
+                  <span className="text-xs font-bold text-gray-500 bg-gray-100 px-2 py-1 rounded-full">{joinRequests.length} đang chờ</span>
+                </div>
+                <div className="space-y-2">
+                  {joinRequests.map((req: any) => (
+                    <div key={req.id} className="flex items-center justify-between gap-3 p-3 rounded-2xl border border-gray-100 bg-white">
+                      <div className="flex items-center gap-3">
+                        <div className="w-9 h-9 rounded-full bg-amber-50 border border-amber-200 flex items-center justify-center text-amber-700 font-bold text-sm">
+                          {req.user?.name?.charAt(0) || '?'}
+                        </div>
+                        <div>
+                          <div className="text-sm font-bold text-gray-800">{req.user?.name || req.userId}</div>
+                          <div className="text-[11px] text-gray-500">
+                            Được mời bởi {req.requestedBy?.name} • {new Date(req.createdAt).toLocaleString('vi-VN')}
+                          </div>
+                        </div>
+                      </div>
+                      {isOwner && <div className="flex gap-2">
+                        <button
+                          disabled={joinRequestActionId === req.id}
+                          onClick={async () => {
+                            if (!currentTour) return;
+                            setConfirmState({
+                              open: true,
+                              title: 'Chấp nhận yêu cầu',
+                              message: `Chấp nhận ${req.user?.name || req.userId} vào tour?`,
+                              onConfirm: async () => {
+                                setJoinRequestActionId(req.id);
+                                try {
+                                  await acceptJoinRequest(currentTour.id, req.id);
+                                  setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                } catch (e: any) {
+                                   notificationModal.openModal('Thông báo', e.message || 'Không thể chấp nhận yêu cầu', 'error');
+                                } finally {
+                                  setJoinRequestActionId(null);
+                                  setConfirmState({ open: false });
+                                }
+                              },
+                            });
+                          }}
+                          className="p-2 rounded-xl bg-green-50 text-green-700 hover:bg-green-100 disabled:opacity-50"
+                          aria-label="Accept"
+                        >
+                          <Check className="w-4 h-4" />
+                        </button>
+                        <button
+                          disabled={joinRequestActionId === req.id}
+                          onClick={async () => {
+                            if (!currentTour) return;
+                            setConfirmState({
+                              open: true,
+                              title: 'Từ chối yêu cầu',
+                              message: `Từ chối ${req.user?.name || req.userId} tham gia tour?`,
+                              onConfirm: async () => {
+                                setJoinRequestActionId(req.id);
+                                try {
+                                  await rejectJoinRequest(currentTour.id, req.id);
+                                  setJoinRequests((prev) => prev.filter((r) => r.id !== req.id));
+                                } catch (e: any) {
+                                   notificationModal.openModal('Thông báo', e.message || 'Không thể từ chối yêu cầu', 'error');
+                                } finally {
+                                  setJoinRequestActionId(null);
+                                  setConfirmState({ open: false });
+                                }
+                              },
+                            });
+                          }}
+                          className="p-2 rounded-xl bg-red-50 text-red-700 hover:bg-red-100 disabled:opacity-50"
+                          aria-label="Reject"
+                        >
+                          <X className="w-4 h-4" />
+                        </button>
+                      </div>}
+                    </div>
+                  ))}
+                  {joinRequests.length === 0 && (
+                    <div className="text-center py-8 text-sm text-gray-500">Không có yêu cầu tham gia nào đang chờ phê duyệt.</div>
+                  )}
+                </div>
+              </div>
+
+              {canEdit && (
+                <div className="p-6 bg-white rounded-3xl border border-gray-100 shadow-sm animate-in zoom-in-95">
+                  <div className="flex items-center gap-3 mb-6">
+                    <Settings className="w-6 h-6 text-blue-500" />
+                    <h3 className="text-lg font-bold text-gray-900">Thông tin cơ bản</h3>
+                  </div>
+                  
+                  <div className="space-y-4 mb-8">
+                    {isOwner && (
+                      <>
+                        <div>
+                          <label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Tiêu đề Tour</label>
+                          <input
+                            type="text"
+                            value={titleInput}
+                            onChange={(e) => setTitleInput(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"
+                            placeholder="Nhập tên chuyến đi..."
+                          />
+                        </div>
+                        <div>
+                          <label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Mô tả chuyến đi</label>
+                          <textarea
+                            value={descriptionInput}
+                            onChange={(e) => setDescriptionInput(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 min-h-[100px] resize-none"
+                            placeholder="Viết vài dòng giới thiệu về hành trình này..."
+                          />
+                        </div>
+                      </>
+                    )}
+
+                  <div className="flex items-center gap-3 mb-4">
+                    <Users className="w-6 h-6 text-purple-500" />
+                    <h3 className="text-md font-bold text-gray-800">Số lượng người tham gia</h3>
+                  </div>
+                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                    <div>
+                      <label htmlFor="adultCount" className="block text-sm font-medium text-gray-700 mb-1">Số lượng người lớn</label>
+                      <input
+                        type="number"
+                        id="adultCount"
+                        value={adultCountInput}
+                        onChange={(e) => setAdultCountInput(Number(e.target.value))}
+                        min="0"
+                        className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-blue-500 focus:border-blue-500"
+                      />
+                    </div>
+                    <div>
+                      <label htmlFor="childCount" className="block text-sm font-medium text-gray-700 mb-1">Số lượng trẻ em</label>
+                      <input
+                        type="number"
+                        id="childCount"
+                        value={childCountInput}
+                        onChange={(e) => setChildCountInput(Number(e.target.value))}
+                        min="0"
+                        className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-blue-500 focus:border-blue-500"
+                      />
+                    </div>
+                    <div>
+                      <label htmlFor="childDiscount" className="block text-sm font-medium text-gray-700 mb-1">Giảm giá trẻ em (%)</label>
+                      <input
+                        type="number"
+                        id="childDiscount"
+                        value={childDiscountInput}
+                        onChange={(e) => setChildDiscountInput(Number(e.target.value))}
+                        min="0"
+                        max="100"
+                        className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-blue-500 focus:border-blue-500"
+                      />
+                    </div>
+                  </div>
+                    <button
+                      onClick={handleUpdateTourInfo}
+                      className="w-full mt-6 px-4 py-4 bg-blue-600 hover:bg-blue-700 text-white font-black uppercase tracking-widest rounded-2xl transition-all shadow-lg shadow-blue-100 active:scale-95"
+                    >
+                      Lưu thay đổi
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              <div className="p-8 text-center bg-gray-50 rounded-3xl border border-dashed border-gray-200">
+                <Settings className="w-10 h-10 text-gray-300 mx-auto mb-3" />
+                <p className="text-gray-500 font-medium">Tính năng cài đặt khác đang được cập nhật...</p>
+              </div>
             </div>
           )}
         </div>
@@ -623,6 +943,11 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
           isOpen={isAddMemberOpen}
           onClose={() => setIsAddMemberOpen(false)}
           tourId={currentTour.id}
+          participants={currentTour.participants || []}
+          joinRequests={joinRequests}
+          onRemoveMember={(userId) => removeMember(currentTour.id, userId)}
+          onMemberAdded={() => fetchTour(currentTour.id)}
+          userRole={userRole || undefined}
         />
       )}
 
@@ -636,6 +961,75 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
           tourId={currentTour.id} 
         />
       )}
+
+      {/* Member Detail Popover */}
+      {isMemberDetailOpen && selectedMember && (
+        <div className="fixed inset-0 z-[2100] flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={() => setIsMemberDetailOpen(false)} />
+          <div className="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5">
+            <div className="flex items-center gap-3">
+              <div className="w-12 h-12 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold">
+                {selectedMember.user?.name?.charAt(0) || '?'}
+              </div>
+              <div>
+                <div className="text-base font-bold text-gray-900">{selectedMember.user?.name || 'Chưa đặt tên'}</div>
+                <div className="text-xs text-gray-500">{selectedMember.user?.email}</div>
+                <div className="text-[10px] font-semibold text-gray-500">{selectedMember.role}</div>
+              </div>
+            </div>
+            {(selectedMember.user?.phone || selectedMember.user?.address) && (
+              <div className="mt-3 text-xs text-gray-600 space-y-1">
+                {selectedMember.user?.phone && <div>📞 {selectedMember.user.phone}</div>}
+                {selectedMember.user?.address && <div>📍 {selectedMember.user.address}</div>}
+              </div>
+            )}
+            <div className="mt-4 flex justify-end gap-2">
+              <button onClick={() => setIsMemberDetailOpen(false)} className="px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100">Đóng</button>
+              {canEdit && selectedMember.role !== 'OWNER' && (
+                <button
+                  onClick={async () => {
+                    if (!currentTour || !selectedMember) return;
+                    try {
+                      await removeMember(currentTour.id, selectedMember.userId);
+                      setIsMemberDetailOpen(false);
+                    } catch (e) {
+                      notificationModal.openModal('Thông báo', 'Không thể xóa thành viên', 'error');
+                    }
+                  }}
+                  className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold"
+                >
+                  Xóa
+                </button>
+              )}
+              {canEdit && selectedMember.role === 'OWNER' && (
+                <button
+                  onClick={() => {
+                    setIsMemberDetailOpen(false);
+                    setIsAddMemberOpen(true);
+                  }}
+                  className="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-sm font-bold"
+                >
+                  Mời thêm người
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+      <ConfirmModal
+        isOpen={confirmState.open}
+        title={confirmState.title}
+        message={confirmState.message}
+        onConfirm={() => confirmState.onConfirm?.()}
+        onCancel={() => setConfirmState({ open: false })}
+      />
+      <NotificationModal
+        isOpen={notificationModal.modalState?.isOpen ?? false}
+        title={notificationModal.modalState?.title}
+        message={notificationModal.modalState?.message}
+        type={notificationModal.modalState?.type}
+        onConfirm={() => notificationModal.closeModal()}
+      />
     </div>
   );
 };

frontend/src/store/useTourStore.ts

@@ -10,6 +10,7 @@ interface TourState {
   setTour: (tour: any) => void;
   updateLegs: (legs: any[]) => void;
   createTour: (tourData: any) => Promise<any>;
+  updateTourDetails: (tourId: string, data: any) => Promise<void>;
   updateTour: (id: string, data: any) => Promise<void>;
   deleteTour: (id: string) => Promise<void>;
   addLeg: (tourId: string, data: any) => Promise<void>;
@@ -22,11 +23,16 @@ interface TourState {
   updateTourStartPoint: (tourId: string, data: any) => Promise<void>;
   updateTourEndPoint: (tourId: string, data: any) => Promise<void>;
   optimizeRouting: (legId: string) => Promise<void>;
-  addMember: (tourId: string, member: { userId: string; role?: string }) => Promise<void>;
+  addMember: (tourId: string, member: { userId: string; role?: string }) => Promise<any>;
+  removeMember: (tourId: string, userId: string) => Promise<void>;
   setActiveLegId: (id: string | null) => void;
   setMapCenter: (pos: [number, number]) => void;
   fetchTour: (id: string) => Promise<void>;
   fetchPublicTours: () => Promise<void>;
+  createJoinRequest: (tourId: string, userId?: string) => Promise<any>;
+  fetchJoinRequests: (tourId: string) => Promise<any[]>;
+  acceptJoinRequest: (tourId: string, requestId: string) => Promise<any>;
+  rejectJoinRequest: (tourId: string, requestId: string) => Promise<any>;
 }
 
 export const useTourStore = create<TourState>((set, get) => ({
@@ -93,7 +99,30 @@ export const useTourStore = create<TourState>((set, get) => ({
       },
       body: JSON.stringify(tourData),
     });
-    return await response.json();
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.message || data.error || 'Lỗi khi tạo Tour');
+    }
+    const tour = await response.json();
+    await get().fetchPublicTours();
+    return tour;
+  },
+  updateTourDetails: async (tourId: string, data: any) => {
+    const API_BASE = `http://${window.location.hostname}:3001`;
+    const token = localStorage.getItem('token');
+    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}`, {
+      method: 'PATCH',
+      headers: { 
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+      },
+      body: JSON.stringify(data),
+    });
+    
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(errorData.message || errorData.error || 'Lỗi khi cập nhật thông tin tour');
+    }
   },
   updateTour: async (id: string, data: any) => {
     const API_BASE = `http://${window.location.hostname}:3001`;
@@ -269,6 +298,18 @@ export const useTourStore = create<TourState>((set, get) => ({
       set({ currentTour: { ...currentTour, legs: updatedLegs }, legs: updatedLegs });
     }
   },
+  removeMember: async (tourId: string, userId: string) => {
+    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members/${userId}`, {
+      method: 'DELETE',
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('token')}`,
+      },
+    });
+    if (!response.ok) throw new Error('Lỗi khi xóa thành viên');
+    const { currentTour } = get();
+    if (currentTour) get().fetchTour(currentTour.id);
+  },
   addMember: async (tourId: string, member: { userId: string; role?: string }) => {
     const API_BASE = `http://${window.location.hostname}:3001`;
     const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members`, {
@@ -279,7 +320,69 @@ export const useTourStore = create<TourState>((set, get) => ({
       },
       body: JSON.stringify(member),
     });
-    if (!response.ok) throw new Error('Lỗi khi thêm thành viên');
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.message || data.error || 'Lỗi khi thêm thành viên');
+    }
+    const { currentTour } = get();
+    if (currentTour) get().fetchTour(currentTour.id);
+  },
+  createJoinRequest: async (tourId: string, userId?: string) => {
+    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${localStorage.getItem('token')}`
+      },
+      body: JSON.stringify({ userId }),
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.message || data.error || 'Lỗi khi tạo yêu cầu tham gia');
+    }
+    return response.json();
+  },
+  fetchJoinRequests: async (tourId: string) => {
+    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('token')}`
+      }
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.message || data.error || 'Lỗi khi tải yêu cầu tham gia');
+    }
+    return response.json();
+  },
+  acceptJoinRequest: async (tourId: string, requestId: string) => {
+    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests/${requestId}/accept`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('token')}`
+      }
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.message || data.error || 'Lỗi khi chấp nhận yêu cầu');
+    }
+    const { currentTour } = get();
+    if (currentTour) get().fetchTour(currentTour.id);
+  },
+  rejectJoinRequest: async (tourId: string, requestId: string) => {
+    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests/${requestId}/reject`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('token')}`
+      }
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.message || data.error || 'Lỗi khi từ chối yêu cầu');
+    }
     const { currentTour } = get();
     if (currentTour) get().fetchTour(currentTour.id);
   },

frontend/tailwind.config.ts

@@ -0,0 +1,14 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+
+export default config;

frontend/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "isolatedModules": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 3002,
+    host: true,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:3001',
+        changeOrigin: true,
+      },
+    },
+  },
+});

package.json

@@ -1,57 +1,26 @@
 {
-  "name": "travel-planning-backend",
+  "name": "travel-planning-monorepo",
   "version": "1.0.0",
-  "description": "Travel Planning Backend with NestJS and Prisma 7",
+  "private": true,
   "type": "module",
+  "workspaces": [
+    "backend",
+    "frontend"
+  ],
   "scripts": {
-    "build": "nest build",
-    "start": "nest start",
-    "start:dev": "nest start --watch",
-    "frontend": "vite",
-    "db:migrate": "npx prisma migrate dev",
-    "db:generate": "npx prisma generate",
-    "db:seed": "npx tsx seed.ts"
-  },
-  "dependencies": {
-    "@nestjs/common": "^11.1.26",
-    "@nestjs/core": "^11.1.26",
-    "@nestjs/jwt": "^11.0.2",
-    "@nestjs/passport": "^11.0.5",
-    "@nestjs/platform-express": "^11.1.26",
-    "@prisma/adapter-pg": "^7.8.0",
-    "@prisma/client": "^7.8.0",
-    "bcrypt": "^5.1.1",
-    "date-fns": "^2.30.0",
-    "dotenv": "^16.3.0",
-    "leaflet": "^1.9.4",
-    "lucide-react": "^0.284.0",
-    "passport": "^0.7.0",
-    "passport-jwt": "^4.0.1",
-    "pg": "^8.11.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-leaflet": "^4.2.1",
-    "react-leaflet-cluster": "^2.1.0",
-    "reflect-metadata": "^0.1.13",
-    "rxjs": "^7.8.1",
-    "zustand": "^5.0.1"
+    "build": "npm run build --workspace=backend && npm run build --workspace=frontend",
+    "start:backend": "npm run start:dev --workspace=backend",
+    "start:frontend": "npm run start:dev --workspace=frontend",
+    "start:dev": "concurrently -n \"BACKEND,FRONTEND\" -c \"magenta,cyan\" \"npm run start:dev --workspace=backend\" \"npm run dev --workspace=frontend\"",
+    "db:migrate": "npm run db:migrate --workspace=backend",
+    "db:generate": "npm run db:generate --workspace=backend",
+    "db:seed": "npm run db:seed --workspace=backend"
   },
   "devDependencies": {
-    "@nestjs/cli": "^10.0.0",
-    "@tailwindcss/postcss": "^4.3.1",
-    "@types/bcrypt": "^5.0.2",
-    "@types/leaflet": "^1.9.12",
-    "@types/node": "^20.0.0",
-    "@types/passport-jwt": "^4.0.1",
-    "@types/pg": "^8.10.0",
-    "@types/react": "^18.3.12",
-    "@vitejs/plugin-react": "^6.0.2",
-    "autoprefixer": "^10.5.0",
-    "postcss": "^8.5.15",
-    "prisma": "^7.8.0",
-    "tailwindcss": "^4.3.1",
-    "tsx": "^4.0.0",
-    "typescript": "^5.7.0",
-    "vite": "^8.0.16"
+    "concurrently": "^8.2.2"
+  },
+  "dependencies": {
+    "jspdf": "^4.2.1",
+    "jspdf-autotable": "^5.0.8"
   }
 }

redir.sh

@@ -0,0 +1,87 @@
+#!/bin/bash
+
+# Ensure the script exits if any command fails
+set -e
+
+echo "Starting monorepo refactoring..."
+
+# --- 1. Create new directories ---
+echo "Creating new directories..."
+
+mkdir -p backend/src/auth
+mkdir -p backend/src/common
+mkdir -p backend/deprecated-migrations
+mkdir -p frontend/src/components
+mkdir -p frontend/src/pages
+mkdir -p frontend/src/store
+mkdir -p docs
+
+echo "Directories created."
+
+# --- 2. Move files to backend/ ---
+echo "Moving backend files..."
+
+mv admin.guard.ts backend/src/auth/
+mv jwt-auth.guard.ts backend/src/auth/
+mv jwt.strategy.ts backend/src/auth/
+mv rbac.middleware.ts backend/src/common/
+mv main.ts backend/src/
+mv nest-cli.json backend/
+mv tsconfig.json backend/
+mv tsconfig.build.json backend/
+mv seed.ts backend/
+
+# Special handling for prisma directory and prisma.service.ts
+# First, move the existing prisma directory to backend/
+mv prisma backend/
+
+# Then, move prisma.service.ts into the newly moved backend/prisma directory
+mv prisma.service.ts backend/prisma/
+
+# Move old migrations (not Prisma's) to deprecated-migrations
+if [ -d "migrations" ]; then
+    mv migrations backend/deprecated-migrations/
+else
+    echo "Warning: 'migrations' directory not found at root. Skipping move."
+fi
+
+# Move schema.sql if it exists and is related to backend
+if [ -f "schema.sql" ]; then
+    mv schema.sql backend/prisma/
+else
+    echo "Warning: 'schema.sql' not found at root. Skipping move."
+fi
+
+echo "Backend files moved."
+
+# --- 3. Move files to frontend/ ---
+echo "Moving frontend files..."
+
+mv App.tsx frontend/src/
+mv CreateTourModal.tsx frontend/src/components/
+mv ExpenseManager.tsx frontend/src/components/ # Assuming this is a component
+mv ExploreMap.tsx frontend/src/pages/ # Assuming this is a page
+mv index.tsx frontend/src/
+mv ItineraryTimeline.tsx frontend/src/components/ # Assuming this is a component
+mv LandingPage.tsx frontend/src/pages/
+mv LoginModal.tsx frontend/src/components/
+mv SignupPage.tsx frontend/src/pages/
+mv TourDetailPage.tsx frontend/src/pages/
+mv useTourStore.ts frontend/src/store/
+mv vite.config.ts frontend/
+mv tailwind.config.ts frontend/
+mv postcss.config.js frontend/
+mv index.css frontend/src/
+
+echo "Frontend files moved."
+
+# --- 4. Move files to docs/ ---
+echo "Moving documentation files..."
+
+mv ARCHITECTURE.md docs/
+mv UITourDesign.md docs/
+
+echo "Documentation files moved."
+
+echo "Monorepo refactoring complete. Please verify the new structure."
+echo "Next, you will need to update import paths and configuration files."

tailwind.config.ts

@@ -1,13 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-export default {
-  content: [
-    "./index.html",
-    "./*.{js,ts,jsx,tsx}",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-} satisfies Config

tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "ignoreDeprecations": "5.0",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "allowImportingTsExtensions": true,
-    "rewriteRelativeImportExtensions": true,
-    "noEmit": false,
-    "jsx": "react-jsx",
-    "declaration": true,
-    "removeComments": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "target": "ES2021",
-    "sourceMap": true,
-    "outDir": "./dist",
-    "incremental": true,
-    "skipLibCheck": true,
-    "strictNullChecks": false,
-    "noImplicitAny": false,
-    "strictBindCallApply": false,
-    "forceConsistentCasingInFileNames": false,
-    "noFallthroughCasesInSwitch": false
-  }
-}

update-def.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+
+# Đảm bảo script dừng nếu có lỗi xảy ra
+set -e
+
+echo "🚀 Đang quét và cập nhật các đường dẫn import cho cấu trúc Monorepo..."
+
+# --- 1. CẬP NHẬT BACKEND (NestJS) ---
+
+# Cập nhật backend/src/main.ts
+# Các Guard/Middleware nay nằm trong auth/ và common/
+sed -i -E "s|from\s+['\"](\./)(admin\.guard\|jwt-auth\.guard\|jwt\.strategy)['\"]|from './auth/\2'|g" backend/src/main.ts
+sed -i -E "s|from\s+['\"](\./)(rbac\.middleware)['\"]|from './common/\2'|g" backend/src/main.ts
+# Đảm bảo Prisma service trỏ đúng về thư mục prisma ở root từ backend/src/
+sed -i -E "s|from\s+['\"](\.\./)+(prisma/prisma\.service)['\"]|from '../../\2'|g" backend/src/main.ts
+
+# Cập nhật các file trong backend/src/auth/ (Guards & Strategies)
+# Từ backend/src/auth/ cần lùi 3 cấp để ra root prisma/
+find backend/src/auth -name "*.ts" -exec sed -i -E "s|from\s+['\"](\.\./)+(prisma/prisma\.service)['\"]|from '../../../\2'|g" {} +
+find backend/src/common -name "*.ts" -exec sed -i -E "s|from\s+['\"](\.\./)+(prisma/prisma\.service)['\"]|from '../../../\2'|g" {} +
+
+
+# --- 2. CẬP NHẬT FRONTEND (React + Vite) ---
+
+# Cập nhật App.tsx (frontend/src/App.tsx)
+# Trỏ vào thư mục pages/ và store/
+sed -i -E "s|from\s+['\"](\./)(LandingPage\|SignupPage\|TourDetailPage\|ExploreMap)['\"]|from './pages/\2'|g" frontend/src/App.tsx
+sed -i -E "s|from\s+['\"](\./)(useTourStore)['\"]|from './store/\2'|g" frontend/src/App.tsx
+
+# Cập nhật các Trang (frontend/src/pages/*.tsx)
+# Các trang cần trỏ tới components/ và store/ nằm ở thư mục anh em
+# Bao gồm: CreateTourModal, LoginModal, ExpenseManager, ItineraryTimeline, AddMemberModal, ConfirmModal, NotificationModal
+find frontend/src/pages -name "*.tsx" -exec sed -i -E "s|from\s+['\"](\./\|@/components/)(CreateTourModal\|LoginModal\|ExpenseManager\|ItineraryTimeline\|AddMemberModal\|ConfirmModal\|NotificationModal)['\"]|from '../components/\2'|g" {} +
+find frontend/src/pages -name "*.tsx" -exec sed -i -E "s|from\s+['\"](\./)(useTourStore)['\"]|from '../store/\2'|g" {} +
+find frontend/src/pages -name "*.tsx" -exec sed -i -E "s|from\s+['\"](\./index\.css)['\"]|from '../index.css'|g" {} +
+
+# Cập nhật các Component (frontend/src/components/*.tsx)
+# Các component/modal cần trỏ tới store/
+find frontend/src/components -name "*.tsx" -exec sed -i -E "s|from\s+['\"](\./)(useTourStore)['\"]|from '../store/\2'|g" {} +
+
+echo "✅ Hoàn tất cập nhật Import Paths."
+echo "💡 Lưu ý: Hãy kiểm tra lại các lỗi đỏ trong VS Code. Nếu bạn có sử dụng Path Alias (như @/components), chúng ta sẽ cấu hình nó ở bước tiếp theo trong tsconfig.json."