feat: tạo hook useConfirm.tsx để dùng chung toàn hệ thống

feat: cho phép người dùng và người quản lí xóa bình luận
fix: tìm kiếm địa điểm với cách gõ tên trên bản đồ
2026-06-16 12:29:09 +07:00 · 2026-06-16 12:21:44 +07:00 · 2026-06-16 12:15:01 +07:00 · 2026-06-16 11:37:21 +07:00 · 2026-06-16 11:21:43 +07:00 · 2026-06-16 11:15:39 +07:00
82 changed files with 6340 additions and 3198 deletions
@@ -1,91 +0,0 @@
 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';
 const App = () => {
  type View = 'landing' | 'explore' | 'detail' | 'signup';
  const [view, setView] = useState<View>('landing');
  const [isInitialSetup, setIsInitialSetup] = useState(false);
  const [user, setUser] = useState<any>(null);
  const [isUserLoaded, setIsUserLoaded] = useState(false); // Trạng thái để biết user đã được load từ localStorage chưa
  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) {
      const parsedUser = JSON.parse(savedUser);
      setUser(parsedUser);
    }
    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`)
      .then(res => res.ok ? res.json() : Promise.reject())
      .then(data => setIsInitialSetup(!!data.isInitialSetup))
      .catch(() => setIsInitialSetup(false));
  }, []); // Chạy một lần khi component mount
  // Effect để xử lý chuyển hướng nếu user đã đăng nhập và đang ở trang landing
  useEffect(() => {
    if (isUserLoaded && user && view === 'landing') {
      setView('explore');
    }
  }, [isUserLoaded, user, view]);
  const handleLoginSuccess = (userData: any) => {
    setUser(userData);
  };
  const handleLogout = () => {
    localStorage.removeItem('user');
    localStorage.removeItem('token');
    setUser(null);
    setView('landing');
  };
  return (
    <div className="app-container">
      {view === 'landing' && (
        <LandingPage 
          isInitialSetup={isInitialSetup}
          onContinue={() => setView('explore')} 
          onGoToSignup={() => setView('signup')} 
          onGoToMap={() => setView('explore')}
          onLoginSuccess={handleLoginSuccess}
        />
      )}
      {view === 'signup' && (
        <SignupPage 
          onBack={() => setView('landing')} 
          onSuccess={() => setView('landing')} 
        />
      )}
      {view === 'explore' && (
        <ExploreMap 
          onBack={() => setView('landing')} 
          onLogout={user ? handleLogout : undefined}
          user={user}
          onViewTour={(id) => {
            fetchTour(id);
            setView('detail');
          }}
        />
      )}
      {view === 'detail' && (
        <TourDetailPage onBack={() => setView('explore')} />
      )}
    </div>
  );
 };
 export default App;
@@ -1,42 +0,0 @@
 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>
  );
 };
@@ -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>
  );
 };
@@ -1,204 +0,0 @@
 import React, { useEffect, useState } from 'react';
 import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents } from 'react-leaflet';
 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 { X, Navigation, Image as ImageIcon, LogOut, Settings, Edit2, Trash2 } from 'lucide-react';
 import { UserManagementModal } from './UserManagementModal.js';
 import { CreateTourModal } from './CreateTourModal.js';
 // Fix lỗi icon mặc định của Leaflet
 const DefaultIcon = L.icon({
  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
 });
 L.Marker.prototype.options.icon = DefaultIcon;
 // Component Helper để cập nhật tâm bản đồ khi vị trí người dùng thay đổi
 function RecenterMap({ position }: { position: [number, number] }) {
  const map = useMap();
  useEffect(() => {
    map.setView(position, map.getZoom());
  }, [position, map]);
  return null;
 }
 // Component Helper để theo dõi sự di chuyển của người dùng trên bản đồ
 function MapTracker() {
  const setMapCenter = useTourStore(state => state.setMapCenter);
  useMapEvents({
    moveend: (e) => {
      const map = e.target;
      const center = map.getCenter();
      const zoom = map.getZoom();
      const coords: [number, number] = [center.lat, center.lng];
      setMapCenter(coords);
      // Lưu vị trí và mức zoom vào localStorage để sử dụng cho lần sau
      localStorage.setItem('map_view_state', JSON.stringify({ center: coords, zoom }));
    },
  });
  return null;
 }
 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();
  // 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(() => {
    const saved = localStorage.getItem('map_view_state');
    if (saved) {
      try { return JSON.parse(saved); } catch (e) { return null; }
    }
    return null;
  });
  const [userPos, setUserPos] = useState<[number, number]>(initialViewState?.center || [10.7769, 106.7009]);
  const [mapZoom] = useState(initialViewState?.zoom || 13);
  const [isAdminModalOpen, setIsAdminModalOpen] = useState(false);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  useEffect(() => {
    fetchPublicTours();
    // Nếu không có vị trí lưu từ trước, mới yêu cầu lấy vị trí hiện tại của thiết bị
    if (!initialViewState) {
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          const posArray: [number, number] = [pos.coords.latitude, pos.coords.longitude];
          setUserPos(posArray);
          setMapCenter(posArray);
        },
        () => console.log("Không thể lấy vị trí người dùng")
      );
    } else {
      // Cập nhật store để đồng bộ với vị trí khởi tạo từ cache
      setMapCenter(initialViewState.center);
    }
  }, []);
  return (
    <div className="h-screen w-full relative">
      {/* Nút quay lại */}
      <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"
      >
        <X className="w-6 h-6 text-gray-800" />
      </button>
      {/* Nút đăng xuất - Chỉ hiển thị khi có user login */}
      {onLogout && (
        <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"
        >
          <LogOut className="w-5 h-5" />
          <span className="hidden sm:inline">Đăng xuất</span>
        </button>
      )}
      {/* Nút quản lý người dùng cho Admin */}
      {user?.isAdmin && (
        <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"
        >
          <Settings className="w-5 h-5" />
          <span className="hidden sm:inline">Quản lý hệ thống</span>
        </button>
      )}
      {/* Nút tạo Tour mới */}
      {user && (
        <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"
        >
          <Navigation className="w-5 h-5" />
          <span className="hidden sm:inline">Tạo Tour mới</span>
        </button>
      )}
      {/* Header Overlay */}
      <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">
        <div className="flex items-center gap-2">
          <Navigation className="w-4 h-4 text-blue-600" />
          <span className="font-bold text-gray-800">Đang khám phá khu vực của bạn</span>
        </div>
      </div>
      <MapContainer 
        center={userPos} 
        zoom={mapZoom} 
        className="h-full w-full"
        preferCanvas={true}
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; OpenStreetMap contributors'
        />
        {/* Theo dõi di chuyển bản đồ */}
        <MapTracker />
        {/* Tự động di chuyển bản đồ đến vị trí người dùng khi tìm thấy tọa độ */}
        <RecenterMap position={userPos} />
        <MarkerClusterGroup chunkedLoading>
          {publicTours.map((tour) => {
            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;
            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>
                    `,
                    iconSize: [48, 48],
                    iconAnchor: [24, 24]
                  })}
                />
              </React.Fragment>
            );
          })}
        </MarkerClusterGroup>
      </MapContainer>
      {/* Admin Modal */}
      <UserManagementModal isOpen={isAdminModalOpen} onClose={() => setIsAdminModalOpen(false)} />
      {/* Create Tour Modal */}
      <CreateTourModal 
        isOpen={isCreateModalOpen} 
        onClose={() => setIsCreateModalOpen(false)} 
        onSuccess={(tour) => {
          fetchTour(tour.id);
          onViewTour(tour.id);
        }}
      />
    </div>
  );
 };
@@ -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>;
 }
@@ -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
@@ -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"}
@@ -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>;
 }
@@ -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
@@ -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"}
@@ -0,0 +1,4 @@
 declare const JwtAuthGuard_base: import("@nestjs/passport").Type<import("@nestjs/passport").IAuthGuard>;
 export declare class JwtAuthGuard extends JwtAuthGuard_base {
 }
 export {};
@@ -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
@@ -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"}
@@ -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 {};
@@ -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
@@ -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"}
@@ -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>;
 }
@@ -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
@@ -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"}
@@ -0,0 +1,9 @@
 import 'reflect-metadata';
 import { OnGatewayConnection } from '@nestjs/websockets';
 import { Server, Socket } from 'socket.io';
 export declare class CommentGateway implements OnGatewayConnection {
    server: Server;
    handleConnection(client: Socket): void;
    handleJoinTour(client: Socket, tourId: string): void;
    notifyNewComment(tourId: string, data: any): void;
 }
@@ -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
  }
 }
@@ -0,0 +1,40 @@
 {
  "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": "dotenv -e ../.env -- tsx seed.ts"
  },
  "devDependencies": {
    "@nestjs/cli": "^11.0.23",
    "@types/bcrypt": "^5.0.2",
    "@types/node": "^20.14.10",
    "@types/pg": "^8.11.6",
    "dotenv-cli": "^7.4.2",
    "prisma": "^5.16.2",
    "ts-node": "^10.9.2",
    "tsx": "^4.19.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",
    "@nestjs/platform-socket.io": "^11.1.27",
    "@nestjs/websockets": "^11.1.27",
    "@prisma/adapter-pg": "^5.16.2",
    "@prisma/client": "^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",
    "socket.io": "^4.8.3"
  }
 }
@@ -0,0 +1,4 @@
 -- AlterTable
 ALTER TABLE "Leg" ADD COLUMN     "description" TEXT,
 ADD COLUMN     "endDate" TIMESTAMP(3),
 ADD COLUMN     "startDate" TIMESTAMP(3);
@@ -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;
@@ -0,0 +1,2 @@
 -- AlterTable
 ALTER TABLE "Tour" ADD COLUMN     "description" TEXT;
@@ -0,0 +1,16 @@
 -- CreateTable
 CREATE TABLE "Comment" (
    "id" TEXT NOT NULL,
    "content" TEXT NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "locationId" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    CONSTRAINT "Comment_pkey" PRIMARY KEY ("id")
 );
 -- AddForeignKey
 ALTER TABLE "Comment" ADD CONSTRAINT "Comment_locationId_fkey" FOREIGN KEY ("locationId") REFERENCES "Location"("id") ON DELETE CASCADE ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE "Comment" ADD CONSTRAINT "Comment_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
@@ -0,0 +1,2 @@
 -- AlterTable
 ALTER TABLE "Tour" ADD COLUMN     "tags" TEXT[];
@@ -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"
@@ -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 });
@@ -3,10 +3,12 @@
 generator client {
  provider = "prisma-client-js"
  previewFeatures = ["driverAdapters"]
 }
 datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
 }
 // --- Enums ---
@@ -71,16 +73,24 @@ model User {
  receivedJoinRequests    JoinRequest[]      @relation("JoinRequester")
  uploadedPhotos          Photo[]
  paidExpenses            Expense[]          @relation("ExpensePaidBy")
  comments                Comment[]
 }
 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)
  tags        String[]
  createdById String
  creator     User         @relation("TourCreator", fields: [createdById], references: [id])
@@ -122,6 +132,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[]
@@ -147,6 +160,7 @@ model Location {
  leg             Leg       @relation(fields: [legId], references: [id], onDelete: Cascade)
  expenses        Expense[]
  photos          Photo[]
  comments        Comment[]
 }
 model Expense {
@@ -178,3 +192,13 @@ model Photo {
  location     Location?    @relation(fields: [locationId], references: [id], onDelete: SetNull)
  uploader     User         @relation(fields: [uploaderId], references: [id])
 }
 model Comment {
  id         String   @id @default(uuid())
  content    String
  createdAt  DateTime @default(now())
  locationId String
  location   Location @relation(fields: [locationId], references: [id], onDelete: Cascade)
  userId     String
  user       User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
@@ -1,8 +1,12 @@
 import { PrismaClient } from '@prisma/client';
 import { PrismaPg } from '@prisma/adapter-pg';
 import { Pool } from 'pg';
-import 'dotenv/config';
+import * as dotenv from 'dotenv';
-import * as bcrypt from 'bcrypt';
+import * as path from 'path';
 import bcrypt from 'bcrypt';
 const envPath = path.resolve(process.cwd(), '..', '.env');
 dotenv.config({ path: envPath });
 const pool = new Pool({ connectionString: process.env.DATABASE_URL });
 const adapter = new PrismaPg(pool);
@@ -90,6 +94,25 @@ async function main() {
    },
  });
  console.log('--- Đang tạo bình luận mẫu... ---');
  const dinhDocLap = await prisma.location.findFirst({ where: { name: 'Dinh Độc Lập' } });
  if (dinhDocLap) {
    await prisma.comment.createMany({
      data: [
        {
          content: 'Chỗ này rất đẹp, giàu giá trị lịch sử!',
          locationId: dinhDocLap.id,
          userId: owner.id,
        },
        {
          content: 'Nên đi vào buổi sáng cho mát mẻ mọi người nhé.',
          locationId: dinhDocLap.id,
          userId: photoMember.id,
        }
      ],
    });
  }
  console.log('--- Seed dữ liệu hoàn tất! ---');
  console.log(`Email đăng nhập Owner: ${owner.email}`);
  console.log(`Email đăng nhập Photo Only: ${photoMember.email}`);
@@ -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 {
@@ -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) {
@@ -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 {
@@ -1,14 +1,42 @@
 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, ForbiddenException } from '@nestjs/common';
+import { Module, Controller, Get, Post, Body, Param, Patch, Delete, ParseUUIDPipe, NotFoundException, BadRequestException, UnauthorizedException, UseGuards, Req, Query, ForbiddenException, Injectable } from '@nestjs/common';
-import { PrismaService } from './prisma.service.js';
+import { WebSocketGateway, WebSocketServer, SubscribeMessage, OnGatewayConnection, OnGatewayDisconnect } from '@nestjs/websockets';
-import 'dotenv/config';
+import { Server, Socket } from 'socket.io';
 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 { JwtAuthGuard } from './auth/jwt-auth.guard';
-import { JwtStrategy } from './jwt.strategy.js';
+import { JwtStrategy } from './auth/jwt.strategy';
-import { TourRoleGuard } from './rbac.middleware.js';
+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 +46,7 @@ class AppController {
  }
 }
-@Controller('v1/auth')
+@Controller('auth')
 class AuthController {
  constructor(private prisma: PrismaService, private jwtService: JwtService) {}
@@ -75,19 +103,64 @@ class AuthController {
  }
 }
-@Controller('v1/tours')
+@Controller('tours') // Controller mới để xử lý các tour công khai
 class PublicTourController {
  constructor(private prisma: PrismaService) {}
  @Get(':id/public')
  async getPublicTourDetails(@Param('id', ParseUUIDPipe) id: string) {
    const tour = await this.prisma.tour.findUnique({
      where: { id },
      include: {
        participants: {
          include: {
            user: {
              select: { id: true, name: true, email: true }
            }
          }
        },
        photos: true,
        legs: {
          orderBy: { sequence: 'asc' },
          include: {
            expenses: {
              include: {
                location: { select: { name: true, plannedStart: true } },
                paidBy: { select: { name: true } }
              }
            },
            locations: { 
              orderBy: { plannedStart: 'asc' },
              include: { _count: { select: { comments: true } } }
            },
          },
        },
      },
    });
    if (!tour) throw new NotFoundException(`Không tìm thấy Tour`);
    return tour;
  }
 }
@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, description, startDate, endDate, adultCount, childCount, childDiscount, tags } = body;
    return this.prisma.tour.create({
      data: {
        title,
        description,
        startDate: startDate ? new Date(startDate) : null,
        endDate: endDate ? new Date(endDate) : null,
        tags: tags || [],
        adultCount: adultCount || 1,
        childCount: childCount || 0,
        childDiscount: childDiscount || 0,
        createdById: req.user.id,
        participants: {
          create: {
@@ -295,8 +368,13 @@ class TourController {
      where: { id },
      data: {
        title: body.title,
        description: body.description,
        startDate: body.startDate ? new Date(body.startDate) : undefined,
        tags: body.tags,
        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,
      },
    });
  }
@@ -323,11 +401,18 @@ class TourController {
      },
      take: 20,
      include: {
        participants: {
          where: { userId: req.user.id },
          select: { role: true }
        },
        photos: { take: 1 },
        legs: {
          orderBy: { sequence: 'asc' },
          include: {
-            locations: { orderBy: { plannedStart: 'asc' } }
+            locations: { 
              orderBy: { plannedStart: 'asc' },
              include: { _count: { select: { comments: true } } }
            }
          }
        }
      }
@@ -351,7 +436,16 @@ class TourController {
        legs: {
          orderBy: { sequence: 'asc' },
          include: {
-            locations: { orderBy: { plannedStart: 'asc' } },
+            expenses: {
              include: {
                location: { select: { name: true, plannedStart: true } },
                paidBy: { select: { name: true } }
              }
            },
            locations: { 
              orderBy: { plannedStart: 'asc' },
              include: { _count: { select: { comments: true } } }
            },
          },
        },
      },
@@ -471,7 +565,7 @@ class TourController {
      });
      role = participation?.role;
    }
-    if (!role || !(role === 'OWNER' || role === 'MANAGER')) {
+    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.');
    }
@@ -523,7 +617,7 @@ class TourController {
      });
      role = participation?.role;
    }
-    if (!role || !(role === 'OWNER' || role === 'MANAGER')) {
+    if (!role || role !== 'OWNER') {
      throw new ForbiddenException('Bạn không có quyền từ chối yêu cầu tham gia.');
    }
@@ -561,7 +655,7 @@ class TourController {
  }
 }
-@Controller('v1/locations')
+@Controller('locations')
@UseGuards(JwtAuthGuard)
 class LocationController {
  constructor(private prisma: PrismaService) {}
@@ -618,7 +712,7 @@ class LocationController {
  }
 }
-@Controller('v1/legs')
+@Controller('legs')
@UseGuards(JwtAuthGuard)
 class LegController {
  constructor(private prisma: PrismaService) {}
@@ -629,7 +723,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,
      }
    });
  }
@@ -662,7 +759,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) {}
@@ -775,7 +872,7 @@ class RoutingController {
  }
 }
-@Controller('v1/users')
+@Controller('users')
 class UserController {
  constructor(private prisma: PrismaService) {}
@@ -835,26 +932,90 @@ class UserController {
  }
 }
@WebSocketGateway({ cors: { origin: '*' } })
 export class CommentGateway implements OnGatewayConnection {
  @WebSocketServer() server: Server;
  handleConnection(client: Socket) {
    console.log(`[WS] Client connected: ${client.id}`);
  }
  @SubscribeMessage('joinTour')
  handleJoinTour(client: Socket, tourId: string) {
    client.join(`tour_${tourId}`);
    console.log(`[WS] Client ${client.id} joined room: tour_${tourId}`);
  }
  notifyNewComment(tourId: string, data: any) {
    // Gửi thông báo tới tất cả client trong phòng của Tour này
    this.server.to(`tour_${tourId}`).emit('commentAdded', data);
  }
 }
@Controller('locations')
 class CommentController {
  constructor(
    private prisma: PrismaService,
    private commentGateway: CommentGateway
  ) {}
  @Get(':locationId/comments')
  // Cho phép khách xem bình luận mà không cần đăng nhập
  async getComments(@Param('locationId', ParseUUIDPipe) locationId: string) {
    return this.prisma.comment.findMany({
      where: { locationId },
      include: {
        user: { select: { name: true } }
      },
      orderBy: { createdAt: 'asc' }
    });
  }
  @UseGuards(JwtAuthGuard)
  @Post(':locationId/comments')
  async addComment(
    @Param('locationId', ParseUUIDPipe) locationId: string,
    @Body() body: { content: string },
    @Req() req: any
  ) {
    const comment = await this.prisma.comment.create({
      data: {
        content: body.content,
        locationId,
        userId: req.user.id
      },
      include: { user: { select: { name: true } } }
    });
    // Tìm tourId để gửi thông báo vào đúng phòng
    const location = await this.prisma.location.findUnique({
      where: { id: locationId },
      include: { leg: { select: { tourId: true } } }
    });
    if (location?.leg?.tourId) {
      this.commentGateway.notifyNewComment(location.leg.tourId, {
        ...comment,
        locationId // Gửi kèm locationId để UI biết điểm nào cần tăng số lượng
      });
    }
    return comment;
  }
 }
@Module({
  imports: [
    JwtModule.register({
      secret: process.env.JWT_SECRET || 'super-secret',
      signOptions: { expiresIn: '1d' },
-    }),
+    }) as any,
  ],
-  controllers: [AppController, AuthController, TourController, UserController, RoutingController, LegController, LocationController], 
+  controllers: [AppController, AuthController, PublicTourController, TourController, UserController, RoutingController, LegController, LocationController, CommentController], 
-  providers: [PrismaService, JwtStrategy, TourRoleGuard], 
+  providers: [PrismaService, JwtStrategy, TourRoleGuard, JwtAuthGuard, AdminGuard, CommentGateway], 
  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();
@@ -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/**/*"]
 }
@@ -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/
@@ -3,10 +3,11 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <title>Travel Planner</title>
  </head>
  <body>
    <div id="root"></div>
-    <script type="module" src="/index.tsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
  </body>
 </html>
@@ -0,0 +1,33 @@
 {
  "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",
    "socket.io-client": "^4.8.3",
    "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"
  }
 }
@@ -1,6 +1,6 @@
 export default {
  plugins: {
    "@tailwindcss/postcss": {},
-    "autoprefixer": {},
+    autoprefixer: {},
  },
-}
+};
@@ -0,0 +1,112 @@
 import React, { useState, useEffect } from 'react';
 import { LandingPage } from './pages/LandingPage';
 import { ExploreMap } from './pages/ExploreMap';
 import { TourDetailPage } from './pages/TourDetailPage';
 import { SignupPage } from './pages/SignupPage';
 import { useTourStore } from './store/useTourStore';
 import { ConfirmProvider } from './hooks/useConfirm';
 function App() {
  const params = new URLSearchParams(window.location.search);
  const viewTourId = params.get('viewTour');
  const [user, setUser] = useState<any>(null);
  const [currentPage, setCurrentPage] = useState<'landing' | 'explore' | 'tourDetail' | 'signup'>(viewTourId ? 'tourDetail' : 'landing');
  const [currentTourId, setCurrentTourId] = useState<string | null>(viewTourId);
  const [isPublicTourView, setIsPublicTourView] = useState(!!viewTourId);
  // Lấy action từ store
  const fetchTour = useTourStore(state => state.fetchTour);
  const fetchPublicTourDetails = useTourStore(state => state.fetchPublicTourDetails);
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const viewTourId = params.get('viewTour');
    if (viewTourId) {
      // Không gọi replaceState ngay để tránh mất ID khi component re-render hoặc refresh
    } else {
      // Kiểm tra đăng nhập bình thường nếu không có tham số viewTour
      const token = localStorage.getItem('token');
      const storedUser = localStorage.getItem('user');
      if (token && storedUser) {
        try {
          setUser(JSON.parse(storedUser));
          setCurrentPage('explore'); // Chuyển đến bản đồ khám phá nếu đã đăng nhập
        } catch (e) {
          console.error("Lỗi khi phân tích dữ liệu người dùng từ localStorage", e);
          localStorage.removeItem('token');
          localStorage.removeItem('user');
          setCurrentPage('landing'); // Quay về trang Landing nếu dữ liệu lỗi
        }
      } else {
        setCurrentPage('landing'); // Quay về trang Landing nếu chưa đăng nhập
      }
    }
  }, []); // Chỉ chạy một lần khi component mount
  const handleLoginSuccess = (loggedInUser: any) => {
    setUser(loggedInUser);
    setCurrentPage('explore');
  };
  const handleLogout = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    setUser(null);
    setCurrentPage('landing');
  };
  const handleViewTour = (tourId: string) => {
    setCurrentTourId(tourId);
    setIsPublicTourView(false); // Không phải chế độ công khai nếu đến từ bản đồ khám phá
    setCurrentPage('tourDetail');
  };
  const handleBackFromTourDetail = () => {
    setCurrentTourId(null);
    setIsPublicTourView(false);
    // Quay về trang khám phá nếu đã đăng nhập, ngược lại quay về Landing
    if (user) {
      setCurrentPage('explore');
    } else {
      setCurrentPage('landing');
    }
  };
  const handleBackFromSignup = () => {
    setCurrentPage('landing');
  };
  const handleSignupSuccess = () => {
    setCurrentPage('landing'); // Quay về trang Landing sau khi đăng ký thành công
  };
  return (
    <ConfirmProvider>
      {(() => {
        if (currentPage === 'tourDetail') {
          return (
            <TourDetailPage
              tourId={currentTourId!} 
              onBack={handleBackFromTourDetail}
              isPublicView={isPublicTourView}
            />
          );
        }
        if (currentPage === 'explore') {
          return <ExploreMap onBack={handleBackFromTourDetail} onLogout={handleLogout} user={user} onViewTour={handleViewTour} />;
        }
        if (currentPage === 'signup') {
          return <SignupPage onBack={handleBackFromSignup} onSuccess={handleSignupSuccess} />;
        }
        return <LandingPage onContinue={() => setCurrentPage('explore')} onGoToSignup={() => setCurrentPage('signup')} onGoToMap={() => setCurrentPage('explore')} onLoginSuccess={handleLoginSuccess} isInitialSetup={false} />;
      })()}
    </ConfirmProvider>
  );
 }
 export default App;
@@ -1,6 +1,7 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { X, MapPin, Loader2, Clock, Map as MapIcon } from 'lucide-react';
+import { format, parseISO } from 'date-fns';
-import { useTourStore } from './useTourStore.js';
+import { X, MapPin, Loader2, Clock, Map as MapIcon, Navigation, Search } from 'lucide-react';
 import { useTourStore } from '@/store/useTourStore';
 import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet';
 import L from 'leaflet';
@@ -59,7 +60,7 @@ const MapPicker = ({ onPick, center }: { onPick: (latlng: L.LatLng) => void, cen
  );
 };
-export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editingLocation }: { isOpen: boolean, onClose: () => void, tourId: string, initialLegId?: string, editingLocation?: any }) => {
+export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editingLocation, isPublicView = false }: { isOpen: boolean, onClose: () => void, tourId: string, initialLegId?: string, editingLocation?: any, isPublicView?: boolean }) => {
  const [formData, setFormData] = useState({
    name: '',
    address: '',
@@ -77,9 +78,13 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
    plannedEnd: ''
  });
  const [isLoading, setIsLoading] = useState(false);
  const [searchResults, setSearchResults] = useState<any[]>([]);
  const [hasNoResults, setHasNoResults] = useState(false);
  const [isSearching, setIsSearching] = useState(false);
  const searchTimeout = useRef<any>(null);
  // Gom các selector lại để giảm số lượng Hook gọi nội bộ và tăng hiệu năng
-  const { legs, addLocation, updateLocation, mapCenter, currentTour } = useTourStore();
+  const { legs, addLocation, updateLocation, mapCenter, currentTour, userRole } = useTourStore();
  // 1. Luôn khai báo Hook ở cấp cao nhất, không đặt code logic/return giữa các Hook
  useEffect(() => {
@@ -96,7 +101,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
          type: editingLocation.type || 'VISIT',
          legId: editingLocation.legId || '',
          note: editingLocation.note || '',
-          expenseAmount: expense?.amount?.toString() || '',
+          expenseAmount: expense?.amount ? Number(expense.amount).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") : '',
          expenseCategory: expense?.category || 'OTHER',
          expenseDescription: expense?.description || '',
          expenseNote: expense?.note || '',
@@ -117,11 +122,31 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
    }
  }, [initialLegId, editingLocation, isOpen]);
  // Memoize tọa độ để tránh việc bản đồ tự động reset tâm khi re-render (ví dụ khi gõ tìm kiếm)
  const currentCoords = useMemo<[number, number]>(
    () => [formData.latitude, formData.longitude],
    [formData.latitude, formData.longitude]
  );
  // Tự động cập nhật vị trí bản đồ theo chặng được chọn (Lấy điểm cuối của chặng đó làm tham chiếu)
  useEffect(() => {
-    if (isOpen && !formData.name) {
+    if (isOpen && !editingLocation && formData.legId && !formData.name) {
-      setFormData(prev => ({ ...prev, latitude: mapCenter[0], longitude: mapCenter[1] }));
+      const selectedLeg = legs.find(l => l.id === formData.legId);
      if (selectedLeg && selectedLeg.locations && selectedLeg.locations.length > 0) {
        // Di chuyển đến địa điểm cuối cùng của chặng để người dùng thấy điểm nối tiếp
        const lastLoc = selectedLeg.locations[selectedLeg.locations.length - 1];
        setFormData(prev => ({
          ...prev,
          latitude: lastLoc.latitude,
          longitude: lastLoc.longitude
        }));
      } else {
        // Nếu chặng chưa có điểm nào, mặc định dùng vị trí trung tâm hiện tại của tour
        setFormData(prev => ({ ...prev, latitude: mapCenter[0], longitude: mapCenter[1] }));
      }
    }
-  }, [isOpen, mapCenter]);
+  }, [formData.legId, isOpen, editingLocation, legs, mapCenter]);
  // 2. Thực hiện các tính toán và hàm xử lý
  const currentLegId = formData.legId || (legs.length > 0 ? legs[0].id : '');
@@ -129,6 +154,55 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
  const titleText = editingLocation ? `Sửa địa điểm: ${editingLocation.name}` : (initialLegId ? `Thêm địa điểm cho ${targetLeg?.note || `Chặng ${targetLeg?.sequence}`}` : 'Thêm địa điểm mới');
  const buttonText = editingLocation ? 'Cập nhật thay đổi' : (initialLegId ? 'Xác nhận thêm vào chặng' : 'Thêm địa điểm');
  const handleSearchLocation = (query: string) => {
    setFormData(prev => ({ ...prev, name: query }));
    if (searchTimeout.current) clearTimeout(searchTimeout.current);
    if (query.trim().length < 2) {
      setSearchResults([]);
      setIsSearching(false);
      setHasNoResults(false);
      return;
    }
    setIsSearching(true);
    setHasNoResults(false);
    searchTimeout.current = setTimeout(async () => {
      try {
        // Loại bỏ countrycodes=vn để tìm kiếm rộng hơn, thêm namedetails=1 để lấy tên chính xác
        const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=15&addressdetails=1&namedetails=1&accept-language=vi`, {
          headers: {
            'Accept-Language': 'vi'
          }
        });
        const data = await res.json();
        setSearchResults(data);
        setHasNoResults(data.length === 0);
      } catch (e) {
        console.error("Lỗi tìm kiếm địa điểm:", e);
      } finally {
        setIsSearching(false);
      }
    }, 500);
  };
  const selectSearchResult = (result: any) => {
    const lat = parseFloat(result.lat);
    const lon = parseFloat(result.lon);
    // Ưu tiên lấy tên từ namedetails nếu có, nếu không lấy phần đầu của display_name
    const locationName = result.namedetails?.name || result.display_name.split(',')[0];
    setFormData(prev => ({
      ...prev,
      name: locationName,
      address: result.display_name,
      latitude: lat,
      longitude: lon
    }));
    setSearchResults([]);
  };
  const handlePickLocation = async (latlng: L.LatLng) => {
    setFormData(prev => ({ ...prev, latitude: latlng.lat, longitude: latlng.lng }));
@@ -146,8 +220,60 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
    } catch (e) {}
  };
  const handleUseCurrentLocation = () => {
    if (!navigator.geolocation) {
      alert("Trình duyệt hoặc thiết bị của bạn không hỗ trợ định vị GPS.");
      return;
    }
    // Kiểm tra môi trường Secure Context (HTTPS) - Bắt buộc cho Geolocation trên Mobile
    if (!window.isSecureContext) {
      alert("Tính năng định vị GPS yêu cầu kết nối bảo mật (HTTPS). Nếu bạn đang truy cập qua địa chỉ IP, vui lòng sử dụng HTTPS hoặc Localhost.");
      return;
    }
    navigator.geolocation.getCurrentPosition(
      async (pos) => {
        const latlng = L.latLng(pos.coords.latitude, pos.coords.longitude);
        const now = new Date();
        const formattedTime = format(now, "yyyy-MM-dd'T'HH:mm");
        setFormData(prev => ({
          ...prev,
          latitude: latlng.lat,
          longitude: latlng.lng,
          plannedStart: formattedTime
        }));
        // Tự động thực hiện reverse geocoding để lấy tên địa điểm và địa chỉ
        handlePickLocation(latlng);
      },
      (err) => {
        let errorMessage = "Không thể lấy vị trí: ";
        switch(err.code) {
          case err.PERMISSION_DENIED:
            errorMessage += "Bạn đã từ chối quyền truy cập vị trí.";
            break;
          case err.POSITION_UNAVAILABLE:
            errorMessage += "Thông tin vị trí không khả dụng.";
            break;
          case err.TIMEOUT:
            errorMessage += "Hết thời gian chờ yêu cầu định vị.";
            break;
          default: errorMessage += err.message;
        }
        alert(errorMessage);
      },
      {
        enableHighAccuracy: true, // Ưu tiên dùng GPS thay vì Wifi/Cell tower
        timeout: 10000,           // Chờ tối đa 10 giây
        maximumAge: 0             // Không dùng vị trí cũ trong cache
      }
    );
  };
  // 3. Early return phải nằm SAU tất cả các khai báo Hook
-  if (!isOpen) return null;
+  if (!isOpen || isPublicView) return null; // Do not render if public view
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
@@ -155,6 +281,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
    try {
      const payload: any = {
        ...formData,
        expenseAmount: formData.expenseAmount.replace(/\./g, ''), // Loại bỏ dấu chấm trước khi gửi
        legId: currentLegId,
        latitude: parseFloat(formData.latitude as any),
        longitude: parseFloat(formData.longitude as any),
@@ -188,21 +315,79 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
        {/* Mini Map Picker */}
        <div className="h-48 w-full rounded-2xl overflow-hidden mb-6 border border-gray-100 relative shadow-inner group">
-          <MapContainer center={[formData.latitude, formData.longitude]} zoom={13} className="h-full w-full">
+          <MapContainer center={currentCoords} zoom={13} className="h-full w-full">
            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-            <Marker position={[formData.latitude, formData.longitude]} />
+            <Marker position={currentCoords} />
-            <MapPicker center={[formData.latitude, formData.longitude]} onPick={handlePickLocation} />
+            <MapPicker center={currentCoords} onPick={handlePickLocation} />
          </MapContainer>
          <div className="absolute bottom-2 left-2 z-[1000] bg-white/90 backdrop-blur-sm px-2 py-1 rounded-lg text-[10px] font-black text-gray-500 shadow-sm border border-gray-100">
            CHUỘT PHẢI ĐỂ CHỌN VỊ TRÍ
          </div>
        </div>
        {/* Nút lấy vị trí và thời gian hiện tại - Chỉ dành cho OWNER/MANAGER khi thêm mới */}
        {!editingLocation && (userRole === 'OWNER' || userRole === 'MANAGER') && (
          <button
            type="button"
            onClick={handleUseCurrentLocation}
            className="w-full mb-6 py-4 bg-indigo-50 hover:bg-indigo-100 text-indigo-600 rounded-2xl flex items-center justify-center gap-2 text-xs font-black uppercase tracking-widest border border-indigo-100 transition-all active:scale-95 shadow-sm"
          >
            <Navigation className="w-4 h-4 fill-current" /> Sử dụng vị trí & thời gian hiện tại
          </button>
        )}
        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
+          <div className="relative">
            <label className="block text-sm font-bold text-gray-700 mb-1">Tên địa điểm</label>
-            <input required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
+            <div className="relative group">
-              value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} />
+              <input 
                required 
                placeholder="Gõ để tìm kiếm địa điểm..."
                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 transition-all" 
                value={formData.name} 
                onChange={e => handleSearchLocation(e.target.value)} 
              />
              <div className="absolute right-4 top-1/2 -translate-y-1/2">
                {isSearching ? (
                  <Loader2 className="w-4 h-4 animate-spin text-blue-500" />
                ) : formData.name ? (
                  <button type="button" onClick={() => { setFormData({...formData, name: ''}); setSearchResults([]); setHasNoResults(false); }} className="hover:text-red-500 transition-colors">
                    <X className="w-4 h-4 text-gray-400" />
                  </button>
                ) : (
                  <Search className="w-4 h-4 text-gray-300" />
                )}
              </div>
            </div>
            {(searchResults.length > 0 || hasNoResults) && (
              <div className="absolute z-[5000] left-0 right-0 mt-2 bg-white border border-gray-200 rounded-2xl shadow-2xl overflow-hidden max-h-64 overflow-y-auto animate-in slide-in-from-top-2 duration-200">
                {hasNoResults ? (
                  <div className="px-4 py-6 text-center text-gray-400 text-sm italic">
                    Không tìm thấy địa điểm nào phù hợp...
                  </div>
                ) : (
                  searchResults.map((result, idx) => (
                    <button
                      key={idx}
                      type="button"
                      onClick={(e) => { e.preventDefault(); e.stopPropagation(); selectSearchResult(result); }}
                      className="w-full text-left px-4 py-3 hover:bg-blue-50 border-b border-gray-50 last:border-0 transition-all flex flex-col gap-0.5"
                    >
                      <div className="flex items-center justify-between gap-2">
                        <div className="font-bold text-sm text-gray-900 line-clamp-1">
                          {result.namedetails?.name || result.display_name.split(',')[0]}
                        </div>
                        {result.type && (
                          <span className="text-[9px] font-black uppercase text-blue-400 bg-blue-50 px-1.5 py-0.5 rounded border border-blue-100 shrink-0">{result.type}</span>
                        )}
                      </div>
                      <div className="text-[10px] text-gray-500 line-clamp-2 leading-tight">{result.display_name}</div>
                    </button>
                  ))
                )}
              </div>
            )}
          </div>
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Địa chỉ</label>
@@ -220,9 +405,13 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-bold text-gray-600 mb-1">Số tiền (VNĐ)</label>
-                <input type="number" className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
+                <input type="text" className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
                  placeholder="0"
-                  value={formData.expenseAmount} onChange={e => setFormData({...formData, expenseAmount: e.target.value})} />
+                  value={formData.expenseAmount} onChange={e => {
                    const rawValue = e.target.value.replace(/\D/g, ""); // Chỉ lấy số
                    const formattedValue = rawValue.replace(/\B(?=(\d{3})+(?!\d))/g, "."); // Thêm dấu chấm
                    setFormData({...formData, expenseAmount: formattedValue});
                  }} />
              </div>
              <div>
                <label className="block text-xs font-bold text-gray-600 mb-1">Loại dịch vụ</label>
@@ -269,7 +458,10 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
            <select required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none"
              value={currentLegId} onChange={e => setFormData({...formData, legId: e.target.value})}>
              {legs.map(leg => (
-                <option key={leg.id} value={leg.id}>Chặng {leg.sequence}: {leg.note || 'Không có tên'}</option>
+                <option key={leg.id} value={leg.id}>
                  Chặng {leg.sequence}: {leg.note || 'Không có tên'} 
                  {leg.startDate ? ` (${format(parseISO(leg.startDate), 'dd/MM')})` : ''}
                </option>
              ))}
            </select>
          </div>
@@ -9,7 +9,8 @@ interface AddMemberModalProps {
  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;
+  userRole?: string; // User's role in the tour
  isPublicView?: boolean; // New prop to indicate public view
 }
 export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose, tourId, participants = [], joinRequests = [], onRemoveMember, onMemberAdded, userRole }) => {
@@ -28,15 +29,14 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
  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 API_BASE = `http://${window.location.hostname}:3001`;
+      const res = await fetch(`/api/v1/users?q=${encodeURIComponent(query)}`, {
      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');
@@ -86,10 +86,9 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
    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/v1/tours/${tourId}/join-requests/${reqId}/accept`
-        : `${API_BASE}/api/v1/tours/${tourId}/join-requests/${reqId}/reject`;
+        : `/api/v1/tours/${tourId}/join-requests/${reqId}/reject`;
      const res = await fetch(endpoint, {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` },
@@ -111,12 +110,11 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
    setSubmitting(true);
    setSubmitError('');
    try {
      const API_BASE = `http://${window.location.hostname}:3001`;
      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}`, {
+      const res = await fetch(`${endpoint}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
@@ -137,7 +135,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
    }
  };
-  if (!isOpen) return null;
+  if (!isOpen || isPublicView) return null; // Do not render if public view
  return (
    <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
@@ -0,0 +1,217 @@
 import React, { useState, useEffect } from 'react';
 import { X, Send, MessageSquare, User, Loader2, Trash2 } from 'lucide-react';
 import { io } from 'socket.io-client';
 import { useTourStore } from '@/store/useTourStore';
 import { useConfirm } from '@/hooks/useConfirm';
 interface Comment {
  id: string;
  userName: string;
  content: string;
  createdAt: string;
  userId: string;
 }
 interface CommentModalProps {
  isOpen: boolean;
  onClose: () => void;
  locationId: string;
  locationName: string;
  onCommentAdded?: () => void; // Callback to update comment count on parent
  onCommentDeleted?: () => void;
  isPublicView?: boolean; // New prop to indicate public view
 }
 export const CommentModal: React.FC<CommentModalProps> = ({ isOpen, onClose, locationId, locationName, onCommentAdded, onCommentDeleted, isPublicView = false }) => {
  const [comments, setComments] = useState<Comment[]>([]);
  const [newComment, setNewComment] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const confirm = useConfirm();
  const userRole = useTourStore(state => state.userRole);
  const currentUserId = React.useMemo(() => {
    try {
      const user = JSON.parse(localStorage.getItem('user') || '{}');
      return user.id;
    } catch { return null; }
  }, []);
  const fetchComments = async () => {
    setIsLoading(true);
    try {
      const token = localStorage.getItem('token');
      const headers: Record<string, string> = {};
      if (token) headers['Authorization'] = `Bearer ${token}`;
      const res = await fetch(`/api/v1/locations/${locationId}/comments`, {
        headers
      });
      if (res.ok) {
        const data = await res.json();
        setComments(data.map((c: any) => ({
          id: c.id,
          userName: c.user?.name || 'Ẩn danh',
          content: c.content,
          createdAt: c.createdAt,
          userId: c.userId
        })));
      }
    } catch (error) {
      console.error('Lỗi khi tải bình luận:', error);
    } finally {
      setIsLoading(false);
    }
  };
  useEffect(() => {
    if (!isOpen || !locationId) return;
    fetchComments();
    // Lắng nghe bình luận mới qua Proxy (không cần hardcode URL)
    const socket = io();
    socket.emit('joinTour', 'global'); // Hoặc logic join cụ thể
    socket.on('commentAdded', (newCommentData: any) => {
      if (newCommentData.locationId === locationId) {
        setComments(prev => {
          // Tránh trùng lặp nếu chính mình gửi
          if (prev.find(c => c.id === newCommentData.id)) return prev;
          return [...prev, {
            id: newCommentData.id,
            userName: newCommentData.user?.name || 'Ẩn danh',
            content: newCommentData.content,
            createdAt: newCommentData.createdAt
          }];
        });
      }
    });
    return () => { socket.disconnect(); };
  }, [isOpen, locationId]);
  const handleSend = async () => {
    if (!newComment.trim()) return;
    try {
      const res = await fetch(`/api/v1/locations/${locationId}/comments`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify({ content: newComment })
      });
      if (res.ok) {
        setNewComment('');
        fetchComments();
        onCommentAdded?.();
      }
    } catch (error) {
      console.error('Lỗi khi gửi bình luận:', error);
    }
  };
  const handleDelete = async (commentId: string) => {
    try {
      const res = await fetch(`/api/v1/locations/comments/${commentId}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      });
      if (res.ok) {
        setComments(prev => prev.filter(c => c.id !== commentId));
        onCommentDeleted?.();
      }
    } catch (error) {
      console.error('Lỗi khi xóa bình luận:', error);
    }
  };
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 z-[5000] 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={onClose} />
      <div className="relative w-full max-w-md bg-white rounded-[32px] shadow-2xl overflow-hidden flex flex-col max-h-[80vh] animate-in zoom-in-95 duration-200">
        {/* Header */}
        <div className="p-6 border-b border-gray-100 flex justify-between items-center bg-white sticky top-0 z-10">
          <div>
            <h3 className="text-xl font-black text-gray-900 flex items-center gap-2">
              <MessageSquare className="w-5 h-5 text-blue-600" />
              Bình luận
            </h3>
            <p className="text-xs text-gray-500 font-bold uppercase tracking-widest mt-1 truncate max-w-[250px]">{locationName}</p>
          </div>
          <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
            <X className="w-5 h-5 text-gray-400" />
          </button>
        </div>
        {/* Comment List */}
        <div className="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50/50">
          {isLoading ? (
            <div className="flex justify-center py-10"><Loader2 className="w-6 h-6 animate-spin text-blue-600" /></div>
          ) : comments.length === 0 ? (
            <div className="text-center py-10 text-gray-400 italic text-sm">Chưa có bình luận nào.</div>
          ) : (
            comments.map((c) => (
              <div key={c.id} className="flex gap-3 animate-in slide-in-from-left-2 duration-300">
                <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 border border-blue-200">
                  <User className="w-4 h-4 text-blue-600" />
                </div>
                <div className="flex-1">
                  <div className="bg-white p-3 rounded-2xl rounded-tl-none border border-gray-100 shadow-sm">
                    <div className="flex justify-between items-start mb-1">
                      <p className="text-xs font-black text-gray-900">{c.userName}</p>
                      {(userRole === 'OWNER' || userRole === 'MANAGER' || c.userId === currentUserId) && (
                        <button 
                          onClick={() => setConfirmState({ open: true, commentId: c.id })} 
                          className="text-gray-400 hover:text-red-500 transition-colors"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      )}
                    </div>
                    <p className="text-sm text-gray-600 leading-relaxed">{c.content}</p>
                  </div>
                  <p className="text-[10px] text-gray-400 mt-1 ml-1 font-medium">
                    {new Date(c.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                  </p>
                </div>
              </div>
            ))
          )}
        </div>
        {/* Input Area */}
        <div className="p-4 bg-white border-t border-gray-100">
          <div className="relative flex items-center gap-2">
            <input
              type="text"
              value={newComment}
              onChange={(e) => setNewComment(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleSend()}
              placeholder={isPublicView ? 'Đăng nhập để bình luận...' : 'Viết bình luận...'}
              className="flex-1 bg-gray-50 border border-gray-200 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
            />
            <button onClick={handleSend} disabled={!newComment.trim() || isPublicView} className="p-3 bg-blue-600 text-white rounded-2xl hover:bg-blue-700 disabled:opacity-50 disabled:bg-gray-300 transition-all active:scale-95 shadow-lg shadow-blue-100">
              <Send className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>
      <ConfirmModal
        isOpen={confirmState.open}
        title="Xóa bình luận"
        message="Bạn có chắc chắn muốn xóa bình luận này không? Hành động này sẽ không thể hoàn tác."
        onConfirm={() => {
          handleDelete(confirmState.commentId);
          setConfirmState({ open: false, commentId: '' });
        }}
        onCancel={() => setConfirmState({ open: false, commentId: '' })}
      />
    </div>
  );
 };
@@ -0,0 +1,53 @@
 import React from 'react';
 import { AlertTriangle, X } from 'lucide-react';
 interface ConfirmModalProps {
  isOpen: boolean;
  title?: string;
  message?: string;
  onConfirm: () => void;
  onCancel: () => void;
 }
 export const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, title, message, onConfirm, onCancel }) => {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 z-[6000] 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={onCancel} />
      {/* Modal Content */}
      <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-4">
          <div className="w-12 h-12 rounded-2xl bg-red-50 flex items-center justify-center text-red-500 shadow-inner">
            <AlertTriangle className="w-6 h-6" />
          </div>
          <button onClick={onCancel} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
            <X className="w-5 h-5 text-gray-400" />
          </button>
        </div>
        <h3 className="text-xl font-black text-gray-900 mb-2">{title || 'Xác nhận'}</h3>
        <p className="text-sm text-gray-500 mb-8 leading-relaxed">
          {message || 'Bạn có chắc chắn muốn thực hiện hành động này không?'}
        </p>
        <div className="grid grid-cols-2 gap-3">
          <button
            onClick={onCancel}
            className="py-4 bg-gray-100 hover:bg-gray-200 text-gray-600 font-bold rounded-2xl transition-all active:scale-95"
          >
            Hủy bỏ
          </button>
          <button
            onClick={onConfirm}
            className="py-4 bg-red-600 hover:bg-red-700 text-white font-bold rounded-2xl shadow-lg shadow-red-100 transition-all active:scale-95"
          >
            Xác nhận
          </button>
        </div>
      </div>
    </div>
  );
 };
@@ -1,14 +1,22 @@
 import React, { useState } from 'react';
-import { Trash2 } from 'lucide-react';
+import { Trash2, Users, Tag as TagIcon } from 'lucide-react';
-import { useTourStore } from './useTourStore.js';
+import { useTourStore } from '@/store/useTourStore';
 export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolean, onClose: () => void, onSuccess: (tour: any) => void }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = 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 availableTags = ['Văn hóa', 'Mạo hiểm', 'Nghỉ dưỡng', 'Thư giãn', 'Ẩm thực', 'Khám phá', 'Gia đình'];
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const [customTag, setCustomTag] = useState('');
  const [members, setMembers] = useState<any[]>([]);
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<any[]>([]);
@@ -23,8 +31,7 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
      return;
    }
    try {
-      const API_BASE = `http://${window.location.hostname}:3001`;
+      const res = await fetch(`/api/v1/users?q=${encodeURIComponent(value)}`, {
      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');
@@ -47,13 +54,37 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
    setMembers((prev) => prev.filter((m) => m.id !== userId));
  };
  const toggleTag = (tag: string) => {
    setSelectedTags(prev => 
      prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag]
    );
  };
  const addCustomTag = () => {
    const tag = customTag.trim();
    if (tag && !selectedTags.includes(tag)) {
      setSelectedTags([...selectedTags, tag]);
      setCustomTag('');
    }
  };
  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 });
+      const tour = await createTour({ 
        title, 
        description,
        startDate, 
        endDate, 
        memberIds,
        adultCount,
        childCount,
        childDiscount,
        tags: selectedTags
      });
      onSuccess(tour);
      onClose();
    } catch (e: any) {
@@ -84,6 +115,56 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
            />
          </div>
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-2 flex items-center gap-2">
              <TagIcon className="w-4 h-4" /> Phân loại Tour
            </label>
            <div className="flex flex-wrap gap-2">
              {availableTags.map(tag => (
                <button
                  key={tag}
                  type="button"
                  onClick={() => toggleTag(tag)}
                  className={`px-3 py-1.5 rounded-full text-xs font-bold transition-all border ${
                    selectedTags.includes(tag) 
                      ? 'bg-blue-600 text-white border-blue-600 shadow-md shadow-blue-100' 
                      : 'bg-white text-gray-500 border-gray-200 hover:border-blue-300'
                  }`}
                >
                  {tag}
                </button>
              ))}
            </div>
            <div className="flex gap-2 mt-3">
              <input
                type="text"
                value={customTag}
                onChange={(e) => setCustomTag(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), addCustomTag())}
                placeholder="Thêm nhãn tùy chỉnh..."
                className="flex-1 px-3 py-2 bg-gray-50 border border-gray-100 rounded-xl text-xs outline-none focus:ring-2 focus:ring-blue-500"
              />
              <button
                type="button"
                onClick={addCustomTag}
                className="px-4 py-2 bg-blue-50 text-blue-600 rounded-xl text-xs font-bold hover:bg-blue-100 transition-all"
              >
                Thêm
              </button>
            </div>
          </div>
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Mô tả chuyến đi</label>
            <textarea
              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 resize-none text-sm"
              rows={3}
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Viết vài dòng giới thiệu về hành trình..."
            />
          </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>
@@ -105,6 +186,31 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
            </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">
@@ -1,8 +1,9 @@
-import React, { useState } 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 { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List, X, Calendar as CalendarIcon, AlignLeft, MessageSquare } from 'lucide-react';
-import { useTourStore } from './useTourStore.js';
+import { useTourStore } from '@/store/useTourStore';
-import { ConfirmModal } from './ConfirmModal.js';
+import { ConfirmModal } from '@/components/ConfirmModal'; 
 import { CommentModal } from '@/components/CommentModal';
 const TimeVariance = ({ planned, actual }: { planned: string, actual: string | null }) => {
  if (!actual) return null;
@@ -36,12 +37,71 @@ const formatTravelTime = (minutes: number) => {
  return mins > 0 ? `${hours} giờ ${mins} phút` : `${hours} giờ`;
 };
-export const ItineraryTimeline = ({ 
+export const ItineraryTimeline = ({
  onAddLocation, 
-  onEditLocation 
+  onEditLocation,
-}: { onAddLocation?: (legId: string) => void, onEditLocation?: (location: any) => void }) => {
+  isPublicView = false
-  const { currentTour, legs, optimizeRouting, userRole, addLeg, updateLeg, deleteLeg, initializeLegs, deleteLocation } = useTourStore();
+}: { onAddLocation?: (legId: string) => void, onEditLocation?: (location: any) => void, isPublicView?: boolean }) => {
  // Tối ưu hóa selectors để chỉ lắng nghe những thay đổi cần thiết
  const currentTour = useTourStore(state => state.currentTour);
  const legs = useTourStore(state => state.legs);
  const userRole = useTourStore(state => state.userRole);
  const optimizeRouting = useTourStore(state => state.optimizeRouting);
  const addLeg = useTourStore(state => state.addLeg);
  const updateLeg = useTourStore(state => state.updateLeg);
  // Removed: const { isPublicView } = useTourStore(state => state); // isPublicView is passed as a prop
  const deleteLeg = useTourStore(state => state.deleteLeg);
  const initializeLegs = useTourStore(state => state.initializeLegs);
  const fetchTour = useTourStore(state => state.fetchTour);
  const deleteLocation = useTourStore(state => state.deleteLocation);
  // Khai báo logic canEdit để sử dụng trong toàn bộ component
  const canEdit = isPublicView ? false : ['OWNER', 'MANAGER'].includes(userRole || '');
  const [confirmState, setConfirmState] = useState<{ open: boolean; title?: string; message?: string; onConfirm?: () => void }>({ open: false });
  const [isLegCountModalOpen, setIsLegCountModalOpen] = useState(false);
  const [tempLegCount, setTempLegCount] = useState(3);
  const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
  const [commentLocationId, setCommentLocationId] = useState('');
  const [commentLocationName, setCommentLocationName] = useState('');
  // Tối ưu hóa: Cập nhật UI ngay lập tức bằng cách can thiệp vào State của Store
  const handleCommentIncrement = (locationId: string) => {
    const currentLegs = useTourStore.getState().legs;
    const updatedLegs = currentLegs.map(leg => ({
      ...leg,
      locations: leg.locations.map(loc => 
        loc.id === locationId 
          ? { ...loc, _count: { ...loc._count, comments: (loc._count?.comments || 0) + 1 } }
          : loc
      )
    }));
    // Dùng setState của Zustand để cập nhật một phần dữ liệu
    useTourStore.setState({ legs: updatedLegs });
  };
  const handleCommentDecrement = (locationId: string) => {
    const currentLegs = useTourStore.getState().legs;
    const updatedLegs = currentLegs.map(leg => ({
      ...leg,
      locations: leg.locations.map(loc => 
        loc.id === locationId 
          ? { ...loc, _count: { ...loc._count, comments: Math.max(0, (loc._count?.comments || 1) - 1) } }
          : loc
      )
    }));
    useTourStore.setState({ legs: updatedLegs });
  };
  // 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
@@ -56,17 +116,37 @@ 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");
+    setTempLegCount(legs.length > 0 ? legs.length : 3);
-    const count = parseInt(countStr || "0");
+    setIsLegCountModalOpen(true);
-    if (count > 0 && currentTour) {
+  };
-      await initializeLegs(currentTour.id, count);
+
  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 || "");
+    setEditingLegData({ 
-    if (note !== null) {
+      id: leg.id, 
-      await updateLeg(leg.id, { note });
+      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);
    }
  };
@@ -128,10 +208,19 @@ export const ItineraryTimeline = ({
                  <div className="sticky top-[136px] z-20 bg-gray-50/90 backdrop-blur-sm flex items-center mb-6 py-2 px-2">
                    <div className="font-black text-blue-600 text-xl truncate flex-1 flex flex-col gap-1">
                      <div className="flex items-center gap-2">
-                      <span className="bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm">
+                        <span className="bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm shrink-0">
-                        {leg.sequence}
+                          {leg.sequence}
-                      </span>
+                        </span>
-                      {leg.note || `Chi tiết Chặng ${leg.sequence}`}
+                        <div className="flex flex-col overflow-hidden">
                          <span className="truncate leading-tight">{leg.note || `Chi tiết Chặng ${leg.sequence}`}</span>
                          {leg.startDate && (
                            <span className="text-[10px] text-gray-400 font-black uppercase tracking-wider flex items-center gap-1 mt-0.5">
                              <CalendarIcon className="w-2.5 h-2.5" />
                              {format(parseISO(leg.startDate), 'dd/MM/yyyy')}
                              {leg.endDate && leg.endDate !== leg.startDate && ` - ${format(parseISO(leg.endDate), 'dd/MM/yyyy')}`}
                            </span>
                          )}
                        </div>
                      </div>
                      {prevLegLastLoc && (
                        <div className="flex items-center gap-1 text-[10px] text-gray-400 uppercase tracking-widest ml-10">
@@ -140,7 +229,7 @@ export const ItineraryTimeline = ({
                      )}
                    </div>
                    <div className="flex items-center gap-2 ml-4">
-                      {['OWNER', 'MANAGER'].includes(userRole || '') && (
+                      {canEdit && (
                        <>
                          <button 
                            onClick={() => onAddLocation?.(leg.id)}
@@ -174,7 +263,7 @@ export const ItineraryTimeline = ({
                        </div>
                      </div>
                    )}
-                      {totalDwellMinutes > 0 && (
+                      {totalDwellMinutes > 0 && ( // Always show dwell time
                        <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">
                          <Clock className="w-3 h-3" />
                          Dừng: {formatTravelTime(totalDwellMinutes)}
@@ -189,7 +278,7 @@ export const ItineraryTimeline = ({
                        <Zap className="w-3 h-3" />
                        Tối ưu
                      </button>
-                    )}
+                    )} {/* Only show optimize button if canEdit */}
                  </div>
                  {/* Vertical Line for the whole leg */}
@@ -267,7 +356,7 @@ export const ItineraryTimeline = ({
                                     <div className="mt-2 text-xs text-indigo-600 bg-indigo-50/80 p-2 rounded-lg border border-indigo-100 space-y-1">
                                       <div className="flex items-center gap-1 font-bold">
                                         <Zap className="w-3 h-3" />
-                                         <span>Chi phí: {Number(locationExpense.amount).toLocaleString()}đ ({locationExpense.category})</span>
+                                         <span>Chi phí: {Number(locationExpense.amount).toLocaleString()}đ</span>
                                       </div>
                                       {locationExpense.description && (
                                         <div className="text-[10px] text-gray-600">Dịch vụ: {locationExpense.description}</div>
@@ -283,7 +372,18 @@ export const ItineraryTimeline = ({
                                </div>
                                <div className="text-right flex flex-col items-end">
-                                  <div className="flex items-center text-sm font-medium text-blue-600">
+                                  <button
                                    onClick={() => {
                                      setCommentLocationId(location.id);
                                      setCommentLocationName(location.name);
                                      setIsCommentModalOpen(true);
                                    }}
                                    className="flex items-center gap-1 px-2 py-1 bg-gray-50 hover:bg-blue-50 text-gray-400 hover:text-blue-600 rounded-lg text-[10px] font-bold transition-all border border-gray-100 hover:border-blue-100 mb-2"
                                  >
                                    <MessageSquare className="w-3 h-3" />
                                    BÌNH LUẬN {location._count?.comments > 0 && `(${location._count.comments})`}
                                  </button>
                                  <div className="flex items-center text-sm font-black text-blue-600">
                                    <Clock className="w-3 h-3 mr-1" />
                                    {location.plannedStart ? format(parseISO(location.plannedStart), 'HH:mm') : '--:--'}
                                  </div>
@@ -292,7 +392,7 @@ export const ItineraryTimeline = ({
                                      Thực tế: {format(parseISO(location.actualStart), 'HH:mm')}
                                    </div>
                                  )}
-                                  {['OWNER', 'MANAGER'].includes(userRole || '') && !isStartPoint && !isEndPoint && (
+                                  {canEdit && !isStartPoint && !isEndPoint && ( // Only show edit/delete if canEdit
                                    <div className="flex gap-1 mt-2">
                                      <button onClick={() => onEditLocation?.(location)} className="p-1 text-gray-400 hover:text-blue-600 transition-colors">
                                        <Edit2 className="w-3.5 h-3.5" />
@@ -336,7 +436,7 @@ export const ItineraryTimeline = ({
        )}
        {/* Actions at the bottom of the list */}
-        {['OWNER', 'MANAGER'].includes(userRole || '') && (
+        {canEdit && ( // Only show these buttons if canEdit
          <div className="flex flex-col gap-3 pb-20 mt-8">
            <button
              onClick={handleDeclareLegs}
@@ -361,6 +461,135 @@ export const ItineraryTimeline = ({
        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>
      )}
      <CommentModal
        isOpen={isCommentModalOpen}
        onClose={() => setIsCommentModalOpen(false)}
        locationId={commentLocationId}
        locationName={commentLocationName}
        isPublicView={isPublicView}
        onCommentAdded={() => handleCommentIncrement(commentLocationId)}
        onCommentDeleted={() => handleCommentDecrement(commentLocationId)}
      />
    </div>
  );
 };
@@ -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/v1/auth/login`, {
      const response = await fetch(`${API_BASE}/api/v1/auth/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password }),
@@ -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 };
 };
@@ -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/v1/users`, {
      const response = await fetch(`${API_BASE}/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/v1/users/block/${id}`, {
      await fetch(`${API_BASE}/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/v1/users/${id}`, {
      const res = await fetch(`${API_BASE}/api/v1/users/${id}`, {
        method: 'DELETE',
        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
      });
@@ -0,0 +1,212 @@
 import React, { useState, useEffect } from 'react';
 import { X, Send, MessageSquare, User, Loader2, Trash2 } from 'lucide-react';
 import { io } from 'socket.io-client';
 import { useTourStore } from '@/store/useTourStore';
 import { useConfirm } from '@/hooks/useConfirm';
 interface Comment {
  id: string;
  userName: string;
  content: string;
  createdAt: string;
  userId: string;
 }
 interface CommentModalProps {
  isOpen: boolean;
  onClose: () => void;
  locationId: string;
  locationName: string;
  onCommentAdded?: () => void; // Callback to update comment count on parent
  onCommentDeleted?: () => void;
  isPublicView?: boolean; // New prop to indicate public view
 }
 export const CommentModal: React.FC<CommentModalProps> = ({ isOpen, onClose, locationId, locationName, onCommentAdded, onCommentDeleted, isPublicView = false }) => {
  const [comments, setComments] = useState<Comment[]>([]);
  const [newComment, setNewComment] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const confirm = useConfirm();
  const userRole = useTourStore(state => state.userRole);
  const currentUserId = React.useMemo(() => {
    try {
      const user = JSON.parse(localStorage.getItem('user') || '{}');
      return user.id;
    } catch { return null; }
  }, []);
  const fetchComments = async () => {
    setIsLoading(true);
    try {
      const token = localStorage.getItem('token');
      const headers: Record<string, string> = {};
      if (token) headers['Authorization'] = `Bearer ${token}`;
      const res = await fetch(`/api/v1/locations/${locationId}/comments`, {
        headers
      });
      if (res.ok) {
        const data = await res.json();
        setComments(data.map((c: any) => ({
          id: c.id,
          userName: c.user?.name || 'Ẩn danh',
          content: c.content,
          createdAt: c.createdAt,
          userId: c.userId
        })));
      }
    } catch (error) {
      console.error('Lỗi khi tải bình luận:', error);
    } finally {
      setIsLoading(false);
    }
  };
  useEffect(() => {
    if (!isOpen || !locationId) return;
    fetchComments();
    // Lắng nghe bình luận mới qua Proxy (không cần hardcode URL)
    const socket = io();
    socket.emit('joinTour', 'global'); // Hoặc logic join cụ thể
    socket.on('commentAdded', (newCommentData: any) => {
      if (newCommentData.locationId === locationId) {
        setComments(prev => {
          // Tránh trùng lặp nếu chính mình gửi
          if (prev.find(c => c.id === newCommentData.id)) return prev;
          return [...prev, {
            id: newCommentData.id,
            userName: newCommentData.user?.name || 'Ẩn danh',
            content: newCommentData.content,
            createdAt: newCommentData.createdAt
          }];
        });
      }
    });
    return () => { socket.disconnect(); };
  }, [isOpen, locationId]);
  const handleSend = async () => {
    if (!newComment.trim()) return;
    try {
      const res = await fetch(`/api/v1/locations/${locationId}/comments`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify({ content: newComment })
      });
      if (res.ok) {
        setNewComment('');
        fetchComments();
        onCommentAdded?.();
      }
    } catch (error) {
      console.error('Lỗi khi gửi bình luận:', error);
    }
  };
  const handleDelete = async (commentId: string) => {
    try {
      const res = await fetch(`/api/v1/locations/comments/${commentId}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      });
      if (res.ok) {
        setComments(prev => prev.filter(c => c.id !== commentId));
        onCommentDeleted?.();
      }
    } catch (error) {
      console.error('Lỗi khi xóa bình luận:', error);
    }
  };
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 z-[5000] 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={onClose} />
      <div className="relative w-full max-w-md bg-white rounded-[32px] shadow-2xl overflow-hidden flex flex-col max-h-[80vh] animate-in zoom-in-95 duration-200">
        {/* Header */}
        <div className="p-6 border-b border-gray-100 flex justify-between items-center bg-white sticky top-0 z-10">
          <div>
            <h3 className="text-xl font-black text-gray-900 flex items-center gap-2">
              <MessageSquare className="w-5 h-5 text-blue-600" />
              Bình luận
            </h3>
            <p className="text-xs text-gray-500 font-bold uppercase tracking-widest mt-1 truncate max-w-[250px]">{locationName}</p>
          </div>
          <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
            <X className="w-5 h-5 text-gray-400" />
          </button>
        </div>
        {/* Comment List */}
        <div className="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50/50">
          {isLoading ? (
            <div className="flex justify-center py-10"><Loader2 className="w-6 h-6 animate-spin text-blue-600" /></div>
          ) : comments.length === 0 ? (
            <div className="text-center py-10 text-gray-400 italic text-sm">Chưa có bình luận nào.</div>
          ) : (
            comments.map((c) => (
              <div key={c.id} className="flex gap-3 animate-in slide-in-from-left-2 duration-300">
                <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 border border-blue-200">
                  <User className="w-4 h-4 text-blue-600" />
                </div>
                <div className="flex-1">
                  <div className="bg-white p-3 rounded-2xl rounded-tl-none border border-gray-100 shadow-sm">
                    <div className="flex justify-between items-start mb-1">
                      <p className="text-xs font-black text-gray-900">{c.userName}</p>
                      {(userRole === 'OWNER' || userRole === 'MANAGER' || c.userId === currentUserId) && (
                        <button
                          onClick={async () => {
                            const isConfirmed = await confirm({
                              title: 'Xóa bình luận',
                              message: 'Bạn có chắc chắn muốn xóa bình luận này không? Hành động này sẽ không thể hoàn tác.'
                            });
                            if (isConfirmed) handleDelete(c.id);
                          }}
                          className="text-gray-400 hover:text-red-500 transition-colors"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      )}
                    </div>
                    <p className="text-sm text-gray-600 leading-relaxed">{c.content}</p>
                  </div>
                  <p className="text-[10px] text-gray-400 mt-1 ml-1 font-medium">
                    {new Date(c.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                  </p>
                </div>
              </div>
            ))
          )}
        </div>
        {/* Input Area */}
        <div className="p-4 bg-white border-t border-gray-100">
          <div className="relative flex items-center gap-2">
            <input
              type="text"
              value={newComment}
              onChange={(e) => setNewComment(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleSend()}
              placeholder={isPublicView ? 'Đăng nhập để bình luận...' : 'Viết bình luận...'}
              className="flex-1 bg-gray-50 border border-gray-200 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
            />
            <button onClick={handleSend} disabled={!newComment.trim() || isPublicView} className="p-3 bg-blue-600 text-white rounded-2xl hover:bg-blue-700 disabled:opacity-50 disabled:bg-gray-300 transition-all active:scale-95 shadow-lg shadow-blue-100">
              <Send className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
 };
@@ -0,0 +1,359 @@
 import React, { useEffect, useState } from 'react';
 import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents, Tooltip } from 'react-leaflet';
 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 '@/store/useTourStore';
 import { X, Navigation, Image as ImageIcon, LogOut, Settings, Edit2, Trash2, Share2, Filter, Tag as TagIcon } from 'lucide-react';
 import { UserManagementModal } from '@/components/UserManagementModal';
 import { NotificationModal, useNotificationModal } from '@/components/NotificationModal';
 import { CreateTourModal } from '../components/CreateTourModal';
 // Fix lỗi icon mặc định của Leaflet
 const DefaultIcon = L.icon({
  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
 });
 L.Marker.prototype.options.icon = DefaultIcon;
 // Component Helper để cập nhật tâm bản đồ khi vị trí người dùng thay đổi
 function RecenterMap({ position }: { position: [number, number] }) {
  const map = useMap();
  useEffect(() => {
    map.setView(position, map.getZoom());
  }, [position, map]);
  return null;
 }
 // Component Helper để đóng menu khi tương tác với bản đồ
 function MapEvents({ onMapAction }: { onMapAction: () => void }) {
  useMapEvents({
    click: onMapAction,
    movestart: onMapAction,
    dragstart: onMapAction,
  });
  return null;
 }
 // Component Helper để theo dõi sự di chuyển của người dùng trên bản đồ
 function MapTracker() {
  const setMapCenter = useTourStore(state => state.setMapCenter);
  useMapEvents({
    moveend: (e) => {
      const map = e.target;
      const center = map.getCenter();
      const zoom = map.getZoom();
      const coords: [number, number] = [center.lat, center.lng];
      setMapCenter(coords);
      // Lưu vị trí và mức zoom vào localStorage để sử dụng cho lần sau
      localStorage.setItem('map_view_state', JSON.stringify({ center: coords, zoom }));
    },
  });
  return null;
 }
 export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: () => void, onLogout?: () => void, user?: any, onViewTour: (id: string) => void }) => {
  // 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);
  const notificationModal = useNotificationModal();
  // 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(() => {
    const saved = localStorage.getItem('map_view_state');
    if (saved) {
      try { return JSON.parse(saved); } catch (e) { return null; }
    }
    return null;
  });
  const [userPos, setUserPos] = useState<[number, number]>(initialViewState?.center || [10.7769, 106.7009]);
  const [mapZoom] = useState(initialViewState?.zoom || 13);
  const [isAdminModalOpen, setIsAdminModalOpen] = useState(false);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [selectedFilterTag, setSelectedFilterTag] = useState<string | null>(null);
  const availableTags = ['Văn hóa', 'Mạo hiểm', 'Nghỉ dưỡng', 'Thư giãn', 'Ẩm thực', 'Khám phá', 'Gia đình'];
  // Tổng hợp nhãn từ danh sách Tour đang có để hiển thị bộ lọc đầy đủ (bao gồm cả nhãn tùy chỉnh)
  const allFilterTags = React.useMemo(() => {
    const tagsSet = new Set(availableTags);
    publicTours.forEach(tour => {
      tour.tags?.forEach((tag: string) => tagsSet.add(tag));
    });
    return Array.from(tagsSet);
  }, [publicTours]);
  // State cho menu chuột phải chia sẻ
  const [shareMenu, setShareMenu] = useState<{ x: number, y: number, id: string, title: string, canShare: boolean } | null>(null);
  const handleShare = (id: string, title: string) => {
    const shareUrl = `${window.location.origin}?viewTour=${id}`;
    if (navigator.share) {
      navigator.share({
        title: title,
        text: `Khám phá hành trình du lịch: ${title}`,
        url: shareUrl,
      }).catch(() => {});
    } else if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(shareUrl).then(() => {
        notificationModal.openModal('Thành công', 'Đã sao chép liên kết chuyến đi vào bộ nhớ tạm. Bạn có thể gửi cho bạn bè ngay!', 'success');
      });
    } else {
      // Giải pháp dự phòng cho môi trường không có HTTPS
      const textArea = document.createElement("textarea");
      textArea.value = shareUrl;
      document.body.appendChild(textArea);
      textArea.select();
      try {
        document.execCommand('copy');
        notificationModal.openModal('Thành công', 'Đã sao chép liên kết chuyến đi vào bộ nhớ tạm. Bạn có thể gửi cho bạn bè ngay!', 'success');
      } catch (err) {}
      document.body.removeChild(textArea);
    }
    setShareMenu(null);
  };
  const filteredTours = React.useMemo(() => {
    if (!selectedFilterTag) return publicTours;
    return publicTours.filter(tour => tour.tags?.includes(selectedFilterTag));
  }, [publicTours, selectedFilterTag]);
  useEffect(() => {
    // Chỉ fetch dữ liệu khi người dùng đã đăng nhập và có token
    if (user || localStorage.getItem('token')) {
      fetchPublicTours();
    }
    // Nếu không có vị trí lưu từ trước, mới yêu cầu lấy vị trí hiện tại của thiết bị
    if (!initialViewState) {
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          const posArray: [number, number] = [pos.coords.latitude, pos.coords.longitude];
          setUserPos(posArray);
          setMapCenter(posArray);
        },
        () => console.log("Không thể lấy vị trí người dùng")
      );
    } else {
      // Cập nhật store để đồng bộ với vị trí khởi tạo từ cache
      setMapCenter(initialViewState.center);
    }
  }, []);
  return (
    <div className="h-screen w-full relative">
      {/* Nút quay lại */}
      <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"
      >
        <X className="w-6 h-6 text-gray-800" />
      </button>
      {/* Nút đăng xuất - Chỉ hiển thị khi có user login */}
      {onLogout && (
        <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"
        >
          <LogOut className="w-5 h-5" />
          <span className="hidden sm:inline">Đăng xuất</span>
        </button>
      )}
      {/* Nút quản lý người dùng cho Admin */}
      {user?.isAdmin && (
        <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"
        >
          <Settings className="w-5 h-5" />
          <span className="hidden sm:inline">Quản lý hệ thống</span>
        </button>
      )}
      {/* Nút tạo Tour mới */}
      {user && (
        <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"
        >
          <Navigation className="w-5 h-5" />
          <span className="hidden sm:inline">Tạo Tour mới</span>
        </button>
      )}
      {/* Header Overlay */}
      <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">
        <div className="flex items-center gap-2">
          <Navigation className="w-4 h-4 text-blue-600" />
          <span className="font-bold text-gray-800">Đang khám phá khu vực của bạn</span>
        </div>
      </div>
      {/* Bộ lọc theo Tag */}
      <div className="absolute top-24 left-6 z-[1000] flex flex-col gap-2 pointer-events-none">
        <div className="bg-white/90 backdrop-blur-md p-2 rounded-2xl shadow-xl border border-white/20 pointer-events-auto flex flex-col gap-2 max-w-[200px]">
          <div className="flex items-center gap-2 px-2 py-1 border-b border-gray-100 mb-1">
            <Filter className="w-3.5 h-3.5 text-blue-600" />
            <span className="text-[11px] font-black uppercase text-gray-500 tracking-wider">Lọc theo loại</span>
          </div>
          <div className="flex flex-wrap gap-1.5">
            <button 
              onClick={() => setSelectedFilterTag(null)}
              className={`px-2.5 py-1 rounded-lg text-[10px] font-bold transition-all ${!selectedFilterTag ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'}`}
            >
              Tất cả
            </button>
            {allFilterTags.map(tag => (
              <button 
                key={tag}
                onClick={() => setSelectedFilterTag(tag === selectedFilterTag ? null : tag)}
                className={`px-2.5 py-1 rounded-lg text-[10px] font-bold transition-all ${selectedFilterTag === tag ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'}`}
              >
                {tag}
              </button>
            ))}
          </div>
        </div>
      </div>
      <MapContainer 
        center={userPos} 
        zoom={mapZoom} 
        className="h-full w-full"
        preferCanvas={true}
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; OpenStreetMap contributors'
        />
        {/* Theo dõi di chuyển bản đồ */}
        <MapTracker />
        {/* Đóng menu khi tương tác bản đồ */}
        <MapEvents onMapAction={() => setShareMenu(null)} />
        {/* Tự động di chuyển bản đồ đến vị trí người dùng khi tìm thấy tọa độ */}
        <RecenterMap position={userPos} />
        <MarkerClusterGroup chunkedLoading>
          {filteredTours.map((tour) => {
            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;
            return (
                <Marker
                  key={tour.id}
                  position={markerPos}
                  eventHandlers={{
                    click: () => onViewTour(tour.id),
                    contextmenu: (e) => {
                      // Kiểm tra quyền chia sẻ (OWNER, MANAGER, MEMBER)
                      const role = tour.participants?.[0]?.role;
                      const canShare = ['OWNER', 'MANAGER', 'MEMBER'].includes(role);
                      // Hiển thị menu tại vị trí chuột
                      setShareMenu({
                        x: e.containerPoint.x,
                        y: e.containerPoint.y,
                        id: tour.id,
                        title: tour.title,
                        canShare
                      });
                    }
                  }}
                  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" onerror="this.src='https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=100'"/>
                        </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]
                  })}
                >
                  <Tooltip direction="top" offset={[0, -20]} opacity={1}>
                    <div className="p-1 max-w-[180px]">
                      <div className="font-black text-blue-600 text-[11px] mb-0.5 uppercase tracking-tight truncate">{tour.title}</div>
                      {tour.tags && tour.tags.length > 0 && (
                        <div className="flex flex-wrap gap-1 mb-1">
                          {tour.tags.map((tag: string) => (
                            <span key={tag} className="px-1.5 py-0.5 bg-blue-50 text-blue-500 rounded text-[8px] font-bold border border-blue-100">{tag}</span>
                          ))}
                        </div>
                      )}
                      {tour.description && (
                        <div className="text-[10px] text-gray-500 line-clamp-2 leading-tight italic">
                          {tour.description}
                        </div>
                      )}
                    </div>
                  </Tooltip>
                </Marker>
            );
          })}
        </MarkerClusterGroup>
      </MapContainer>
      {/* Context Menu Chia sẻ */}
      {shareMenu && (
        <div 
          className="absolute z-[2000] bg-white rounded-2xl shadow-2xl border border-gray-100 py-2 w-48 animate-in zoom-in-95 duration-200"
          style={{ top: shareMenu.y, left: shareMenu.x }}
          onClick={(e) => e.stopPropagation()}
        >
          {shareMenu.canShare ? (
            <button 
              onClick={() => handleShare(shareMenu.id, shareMenu.title)}
              className="w-full text-left px-4 py-2 hover:bg-blue-50 text-sm font-bold text-gray-700 flex items-center gap-2 transition-colors"
            >
              <Share2 className="w-4 h-4 text-blue-600" /> Sao chép liên kết
            </button>
          ) : (
            <div className="px-4 py-2 text-xs text-gray-400 italic">Bạn không có quyền chia sẻ tour này</div>
          )}
        </div>
      )}
      {/* Admin Modal */}
      <UserManagementModal isOpen={isAdminModalOpen} onClose={() => setIsAdminModalOpen(false)} />
      {/* Create Tour Modal */}
      <CreateTourModal 
        isOpen={isCreateModalOpen} 
        onClose={() => setIsCreateModalOpen(false)} 
        onSuccess={(tour) => {
          fetchTour(tour.id);
          onViewTour(tour.id);
        }}
      />
      <NotificationModal
        isOpen={notificationModal.modalState?.isOpen ?? false}
        title={notificationModal.modalState?.title}
        message={notificationModal.modalState?.message}
        type={notificationModal.modalState?.type}
        onConfirm={() => notificationModal.closeModal()}
      />
    </div>
  );
 };
@@ -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",
@@ -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/v1/auth/signup`, {
      const response = await fetch(`${API_BASE}/api/v1/auth/signup`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
@@ -1,15 +1,16 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { ItineraryTimeline } from './ItineraryTimeline.js';
+import { io } from 'socket.io-client';
-import { ExpenseManager } from './ExpenseManager.js';
+import { ItineraryTimeline } from '../components/ItineraryTimeline';
-import { useTourStore } from './useTourStore.js';
+import { ExpenseManager } from '../components/ExpenseManager';
-import { AddLocationModal } from './AddLocationModal.js';
+import { useTourStore } from '@/store/useTourStore';
-import { AddMemberModal } from './AddMemberModal.js';
+import { AddLocationModal } from '@/components/AddLocationModal';
-import { ConfirmModal } from './ConfirmModal.js';
+import { AddMemberModal } from '../components/AddMemberModal';
-import { NotificationModal, useNotificationModal } from './components/NotificationModal.js';
+import { ConfirmModal } from '../components/ConfirmModal';
-import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline } from 'react-leaflet';
+import { NotificationModal, useNotificationModal } from '@/components/NotificationModal';
 import { CommentModal } from '@/components/CommentModal';
 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, 
@@ -26,7 +27,10 @@ import {
  Flag,
  Clock,
  Check,
-  X
+  X,
  MessageSquare,
  Share2,
  Tag as TagIcon
 } from 'lucide-react';
 import L from 'leaflet';
@@ -162,7 +166,14 @@ const MapContextMenu = ({ onAction }: { onAction: (action: string, latlng: L.Lat
  );
 };
-export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
+export const TourDetailPage = ({ onBack, tourId, isPublicView = false }: { onBack: () => void, tourId: string, isPublicView?: boolean }) => {
  // 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);
@@ -172,15 +183,70 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
  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 [tagsInput, setTagsInput] = useState<string[]>(currentTour?.tags ?? []);
  const [customTag, setCustomTag] = useState('');
  const availableTags = ['Văn hóa', 'Mạo hiểm', 'Nghỉ dưỡng', 'Thư giãn', 'Ẩm thực', 'Khám phá', 'Gia đình'];
  const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
  const [commentLocationId, setCommentLocationId] = useState('');
  const [commentLocationName, setCommentLocationName] = useState('');
  const [joinRequestActionId, setJoinRequestActionId] = useState<string | null>(null);
  const [confirmState, setConfirmState] = useState<{ open: boolean; title?: string; message?: string; onConfirm?: () => void }>({ open: false });
-  const { 
+  const fetchTour = useTourStore(state => state.fetchTour);
-    currentTour, legs, fetchTour, fetchPublicTours, publicTours, 
+  const fetchPublicTourDetails = useTourStore(state => state.fetchPublicTourDetails); // New action
-    userRole, mapCenter, setMapCenter, updateTourStartPoint, 
+  
-    updateTourEndPoint, initializeLegs, addLocation, addMember, removeMember,
+  useEffect(() => {
-    fetchJoinRequests, acceptJoinRequest, rejectJoinRequest
+    if (currentTour) {
-  } = useTourStore();
+      setTagsInput(currentTour.tags || []);
    }
  }, [currentTour]);
  // Hàm tối ưu để cập nhật số lượng bình luận mà không cần fetch lại toàn bộ Tour
  const handleCommentIncrement = (locationId: string) => {
    const currentLegs = useTourStore.getState().legs;
    const updatedLegs = currentLegs.map(leg => ({
      ...leg,
      locations: leg.locations.map(loc => 
        loc.id === locationId 
          ? { ...loc, _count: { ...loc._count, comments: (loc._count?.comments || 0) + 1 } }
          : loc
      )
    }));
    // Cập nhật trực tiếp vào Store
    useTourStore.setState({ legs: updatedLegs });
  };
  const handleCommentDecrement = (locationId: string) => {
    const currentLegs = useTourStore.getState().legs;
    const updatedLegs = currentLegs.map(leg => ({
      ...leg,
      locations: leg.locations.map(loc => 
        loc.id === locationId 
          ? { ...loc, _count: { ...loc._count, comments: Math.max(0, (loc._count?.comments || 1) - 1) } }
          : loc
      )
    }));
    useTourStore.setState({ legs: updatedLegs });
  };
  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();
@@ -194,15 +260,21 @@ 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
-
+  // Nếu là public view, không có quyền chỉnh sửa
-  const canEdit = ['OWNER', 'MANAGER'].includes(userRole || '');
+  const canEdit = isPublicView ? false : ['OWNER', 'MANAGER'].includes(userRole || '');
  const canInvite = isPublicView ? false : ['OWNER', 'MANAGER', 'MEMBER'].includes(userRole || '');
  const isOwner = isPublicView ? false : userRole === 'OWNER';
  const canShare = isPublicView || ['OWNER', 'MANAGER', 'MEMBER'].includes(userRole || '');
  useEffect(() => {
-    if (currentTour && ['OWNER', 'MANAGER'].includes(userRole || '')) {
+    if (isPublicView) {
      fetchPublicTourDetails(tourId);
    } else if (currentTour && ['OWNER', 'MANAGER'].includes(userRole || '')) {
      fetchJoinRequests(currentTour.id).then(setJoinRequests).catch(() => setJoinRequests([]));
    }
-  }, [currentTour, userRole]);
+    // Fetch tour details when tourId changes or public view status changes
-
+    if (tourId) { isPublicView ? fetchPublicTourDetails(tourId) : fetchTour(tourId); }
  }, [tourId, isPublicView, userRole]); // Add tourId to dependencies
  const [mapZoom] = useState(initialViewState?.zoom || 13);
  // Memoize danh sách tọa độ để MapTourBounds không bị trigger thừa
@@ -212,31 +284,69 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
    if (initialViewState) {
      setMapCenter(initialViewState.center);
    }
-    const loadData = async () => {
+    // This useEffect is for initial load, but we now have tourId prop
-      // Nếu chưa có tour nào trong store, thử tải danh sách public trước
+    // The fetching logic is moved to the useEffect above that depends on tourId and isPublicView
-      if (publicTours.length === 0) {
+    // So this useEffect can be simplified or removed if its only purpose was initial data load.
-        await fetchPublicTours();
+    // if (publicTours.length === 0 && !isPublicView) { // Only fetch public tours if not in public view and not already loaded
-      }
+    //   fetchPublicTours();
-    };
+    // }
-    loadData();
+  }, [initialViewState]); // Removed publicTours, currentTour, fetchPublicTours, fetchTour from dependencies
  }, []);
  useEffect(() => {
    // Lấy tour đầu tiên từ danh sách khám phá để hiển thị demo
    if (publicTours.length > 0 && !currentTour) {
      fetchTour(publicTours[0].id);
    }
  }, [publicTours, currentTour, fetchTour]);
-  // Hàm xử lý khai báo số chặng
+  const handleShare = () => {
-  const handleDeclareLegs = async () => {
+    if (!currentTour) return;
-    const countStr = window.prompt("Chuyến đi này bạn muốn chia làm bao nhiêu chặng?", "3");
+    // Tạo link với query param ?viewTour=...
-    const count = parseInt(countStr || "0");
+    const shareUrl = `${window.location.origin}?viewTour=${currentTour.id}`;
-    if (count > 0 && currentTour) {
+    if (navigator.share) {
-      await initializeLegs(currentTour.id, count);
+      navigator.share({
        title: currentTour.title,
        url: shareUrl,
      }).catch(() => {});
    } else if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(shareUrl).then(() => {
        notificationModal.openModal('Thành công', 'Đã sao chép liên kết chia sẻ chuyến đi!', 'success');
      });
    } else {
      // Giải pháp dự phòng cho môi trường không có HTTPS (truy cập qua IP)
      const textArea = document.createElement("textarea");
      textArea.value = shareUrl;
      document.body.appendChild(textArea);
      textArea.select();
      try {
        document.execCommand('copy');
        notificationModal.openModal('Thành công', 'Đã sao chép liên kết chia sẻ chuyến đi!', 'success');
      } catch (err) {}
      document.body.removeChild(textArea);
    }
  };
  // Thiết lập kết nối WebSocket Real-time
  useEffect(() => {
    if (!currentTour) return;
    const socket = io(); // Kết nối qua Proxy của Vite (cùng origin)
    socket.on('connect', () => {
      socket.emit('joinTour', currentTour.id);
    });
    socket.on('commentAdded', (data: any) => {
      // Cập nhật UI ngay lập tức khi bất kỳ ai bình luận
      handleCommentIncrement(data.locationId);
    });
    return () => { socket.disconnect(); };
  }, [currentTour?.id]);
  // This useEffect is for initial demo loading, might not be needed if tourId is always passed
  // useEffect(() => {
  //   if (publicTours.length > 0 && !currentTour && !isPublicView) {
  //     fetchTour(publicTours[0].id);
  //   }
  // }, [publicTours, currentTour, fetchTour, isPublicView]);
  // Hàm xử lý các hành động từ Context Menu của bản đồ
  const handleMapAction = async (action: string, latlng: L.LatLng) => {
    // Bước 1: Lấy tọa độ (lat, lng) tại vị trí click (đã nhận qua tham số latlng)
@@ -328,6 +438,24 @@ 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,
        tags: tagsInput
      });
      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];
@@ -343,6 +471,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.",
@@ -354,7 +499,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"
@@ -367,12 +512,20 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
        <button onClick={onBack} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
          <ChevronLeft className="w-6 h-6 text-gray-600" />
        </button>
-        <h1 className="text-lg font-bold text-gray-800 truncate px-4">
+        <h1 className="text-lg font-bold text-gray-800 truncate px-4 flex-1 text-center">
          {tourInfo.title}
        </h1>
-        <div className="w-10" /> {/* Spacer */}
+        {/* Nút chia sẻ: Chỉ dành cho OWNER, MANAGER, MEMBER */}
        {canShare && (
          <button 
            onClick={handleShare}
            className="p-2 hover:bg-blue-50 text-blue-600 rounded-full transition-colors"
            title="Chia sẻ tour"
          >
            <Share2 className="w-5 h-5" />
          </button>
        )}
      </div>
      {/* Tour Header Info */}
      <div className="relative min-h-[480px] w-full bg-blue-900 flex flex-col justify-end">
        <img 
@@ -385,6 +538,26 @@ 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>
            {/* Nhãn hiển thị ngay dưới Tiêu đề */}
            {currentTour?.tags && currentTour.tags.length > 0 && (
              <div className="flex flex-wrap gap-2 pt-1">
                {currentTour.tags.map((tag: string) => (
                  <span key={tag} className="px-2.5 py-1 bg-white/20 backdrop-blur-md border border-white/30 rounded-lg text-[10px] font-black uppercase tracking-wider">
                    {tag}
                  </span>
                ))}
              </div>
            )}
            {/* Mô tả hiển thị dưới Nhãn */}
            {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>
@@ -410,7 +583,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
            {/* Member Avatars Stack */}
            <div className="flex items-center gap-2 mt-4">
-              <div className="flex flex-wrap gap-2">
+              <div className="flex flex-wrap gap-2"> {/* Always show participants */}
                {currentTour?.participants?.slice(0, 5).map((p: any, i: number) => (
                  <button
                    key={p.userId || i}
@@ -424,7 +597,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                    <img src={`https://i.pravatar.cc/100?u=${p.userId}`} alt="Avatar" />
                  </button>
                ))}
-                {joinRequests.slice(0, 3).map((req: any) => (
+                {isOwner && !isPublicView && joinRequests.slice(0, 3).map((req: any) => ( // Hide join requests in public view
                  <div key={req.id} className="relative group">
                    <div className="w-10 h-10 rounded-full border-2 border-amber-400 bg-amber-50 flex items-center justify-center text-amber-700 font-bold overflow-hidden shadow-lg">
                      {req.user?.name?.charAt(0) || '?'}
@@ -497,18 +670,20 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                  </div>
                )}
              </div>
-              <button
+              {!isPublicView && ( // Hide add member button in public view
-                onClick={() => {
+                <button
-                  if (!currentTour) return;
+                  onClick={() => {
-                  if (canEdit) setIsAddMemberOpen(true);
+                    if (!currentTour) return;
-                }}
+                    if (canInvite) setIsAddMemberOpen(true);
-                disabled={!canEdit}
+                  }}
-                className={`p-2 rounded-full border backdrop-blur-sm transition-all ml-2 ${
+                  disabled={!canInvite}
-                  canEdit ? 'bg-white/10 hover:bg-white/20 border-white/20' : 'bg-white/5 border-white/10 opacity-50'
+                  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>
+                  <Plus className="w-4 h-4" />
                </button>
              )}
            </div>
          </div>
        </div>
@@ -516,17 +691,20 @@ 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 // Always show quote if public view, otherwise show financial widget if has access
          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>
              </>
-            ) : (
+            ) : ( // If no finance access or is public view, show quote
              <div className="flex items-start gap-4 py-2">
                <Quote className="w-8 h-8 text-blue-500 opacity-30 flex-shrink-0" />
                <p className="italic text-lg font-medium leading-relaxed">"{randomQuote}"</p>
@@ -570,7 +748,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as any)}
-              className={`flex-1 flex items-center justify-center py-3 rounded-xl text-sm font-semibold transition-all ${
+              className={`flex-1 flex items-center justify-center py-3 rounded-xl text-sm font-semibold transition-all ${tab.id === 'settings' && isPublicView ? 'hidden' : ''} ${ // Hide settings tab in public view
                activeTab === tab.id 
                  ? 'bg-blue-50 text-blue-600 shadow-sm' 
                  : 'text-gray-400 hover:text-gray-500 hover:bg-gray-50'
@@ -614,7 +792,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                  setTargetLegId(loc.legId);
                  setMapCenter([loc.latitude, loc.longitude]);
                  setIsAddLocationOpen(true);
-                }} />
+                }} isPublicView={isPublicView} />
              ) : (
                <div className="h-[60vh] w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white relative">
                  <MapContainer 
@@ -624,7 +802,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                    preferCanvas={true}
                  >
                    <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-                    {canEdit && <MapContextMenu onAction={handleMapAction} />}
+                    {canEdit && !isPublicView && <MapContextMenu onAction={handleMapAction} />} {/* Hide map context menu in public view */}
                    {/* Tự động đóng khung Start và End khi dữ liệu thay đổi */}
                    <MapTourBounds locations={allLocations} />
@@ -650,8 +828,21 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                        return (
                          <Marker key={loc.id} position={[loc.latitude, loc.longitude]} icon={icon}>
                            <Popup>
-                              <div className="font-bold">{loc.name}</div>
+                              <div className="p-1">
-                              <div className="text-xs text-gray-500">{loc.type}</div>
+                                <div className="font-bold text-gray-900">{loc.name}</div>
                                <div className="text-[10px] text-gray-500 mb-2 uppercase tracking-tight">{loc.type}</div>
                                <button
                                  onClick={() => {
                                    setCommentLocationId(loc.id);
                                    setCommentLocationName(loc.name);
                                    setIsCommentModalOpen(true);
                                  }}
                                  className="w-full flex items-center justify-center gap-1.5 py-1.5 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg text-[10px] font-black transition-all border border-blue-100"
                                >
                                  <MessageSquare className="w-3 h-3" />
                                  BÌNH LUẬN {loc._count?.comments > 0 && `(${loc._count.comments})`}
                                </button>
                              </div>
                            </Popup>
                          </Marker>
                        );
@@ -659,7 +850,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                    </MarkerClusterGroup>
                  </MapContainer>
                  <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">
-                    Mẹo: Nhấn giữ (Mobile) hoặc Chuột phải để ghim địa điểm
+                    {isPublicView ? 'Xem chi tiết lộ trình' : 'Mẹo: Nhấn giữ (Mobile) hoặc Chuột phải để ghim địa điểm'}
                  </div>
                </div>
              )}
@@ -687,7 +878,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
            </div>
          )}
-          {activeTab === 'settings' && (
+          {activeTab === 'settings' && !isPublicView && ( // Hide settings tab in public view
            <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">
@@ -709,7 +900,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                          </div>
                        </div>
                      </div>
-                      <div className="flex gap-2">
+                      {isOwner && <div className="flex gap-2">
                        <button
                          disabled={joinRequestActionId === req.id}
                          onClick={async () => {
@@ -764,7 +955,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                        >
                          <X className="w-4 h-4" />
                        </button>
-                      </div>
+                      </div>}
                    </div>
                  ))}
                  {joinRequests.length === 0 && (
@@ -772,6 +963,129 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                  )}
                </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>
                  <div>
                    <label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1 flex items-center gap-2">
                      <TagIcon className="w-3 h-3" /> Phân loại Tour
                    </label>
                    <div className="flex flex-wrap gap-2">
                      {availableTags.map(tag => (
                        <button
                          key={tag}
                          type="button"
                          onClick={() => setTagsInput(prev => prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag])}
                          className={`px-3 py-1.5 rounded-xl text-xs font-bold transition-all border ${
                            tagsInput.includes(tag) 
                              ? 'bg-blue-600 text-white border-blue-600' 
                              : 'bg-white text-gray-500 border-gray-200 hover:border-blue-300'
                          }`}
                        >
                          {tag}
                        </button>
                      ))}
                    </div>
                    <div className="flex gap-2 mt-3">
                      <input
                        type="text"
                        value={customTag}
                        onChange={(e) => setCustomTag(e.target.value)}
                        onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), setTagsInput(prev => customTag.trim() && !prev.includes(customTag.trim()) ? [...prev, customTag.trim()] : prev), setCustomTag(''))}
                        placeholder="Thêm nhãn tùy chỉnh..."
                        className="flex-1 px-4 py-2.5 bg-gray-50 border border-gray-100 rounded-xl text-sm outline-none focus:ring-2 focus:ring-blue-500"
                      />
                      <button
                        type="button"
                        onClick={() => { if (customTag.trim() && !tagsInput.includes(customTag.trim())) { setTagsInput([...tagsInput, customTag.trim()]); setCustomTag(''); } }}
                        className="px-4 py-2 bg-blue-50 text-blue-600 rounded-xl text-xs font-bold hover:bg-blue-100 transition-all border border-blue-100"
                      >
                        Thêm
                      </button>
                    </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>
@@ -782,7 +1096,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
      </div>
      {/* Floating Action Button (Mobile) */}
-      {canEdit && (
+      {canEdit && !isPublicView && ( // Hide floating action button in public view
        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-40">
          <button 
            onClick={() => {
@@ -807,6 +1121,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
          onRemoveMember={(userId) => removeMember(currentTour.id, userId)}
          onMemberAdded={() => fetchTour(currentTour.id)}
          userRole={userRole || undefined}
          isPublicView={isPublicView} // Pass isPublicView
        />
      )}
@@ -818,6 +1133,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
          initialLegId={targetLegId || undefined}
          editingLocation={editingLocation}
          tourId={currentTour.id} 
          isPublicView={isPublicView} // Pass isPublicView
        />
      )}
@@ -889,6 +1205,15 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
        type={notificationModal.modalState?.type}
        onConfirm={() => notificationModal.closeModal()}
      />
      <CommentModal
        isOpen={isCommentModalOpen}
        onClose={() => setIsCommentModalOpen(false)}
        locationId={commentLocationId}
        locationName={commentLocationName}
        isPublicView={isPublicView} // Pass isPublicView
        onCommentAdded={() => handleCommentIncrement(commentLocationId)}
        onCommentDeleted={() => handleCommentDecrement(commentLocationId)}
      />
    </div>
  );
 };
@@ -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>;
@@ -27,6 +28,7 @@ interface TourState {
  setActiveLegId: (id: string | null) => void;
  setMapCenter: (pos: [number, number]) => void;
  fetchTour: (id: string) => Promise<void>;
  fetchPublicTourDetails: (tourId: string) => Promise<void>;
  fetchPublicTours: () => Promise<void>;
  createJoinRequest: (tourId: string, userId?: string) => Promise<any>;
  fetchJoinRequests: (tourId: string) => Promise<any[]>;
@@ -46,10 +48,9 @@ export const useTourStore = create<TourState>((set, get) => ({
  setActiveLegId: (id) => set({ activeLegId: id }),
  setMapCenter: (pos) => set({ mapCenter: pos }),
  fetchTour: async (id: string) => {
    const API_BASE = `http://${window.location.hostname}:3001`;
    const token = localStorage.getItem('token');
    try {
-      const response = await fetch(`${API_BASE}/api/v1/tours/${id}`, {
+      const response = await fetch(`/api/v1/tours/${id}`, {
        headers: { 'Authorization': `Bearer ${token}` }
      });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
@@ -74,11 +75,10 @@ export const useTourStore = create<TourState>((set, get) => ({
    }
  },
  fetchPublicTours: async () => {
    const API_BASE = `http://${window.location.hostname}:3001`;
    const token = localStorage.getItem('token');
    if (!token) return;
-    const response = await fetch(`${API_BASE}/api/v1/tours/explore`, {
+    const response = await fetch(`/api/v1/tours/explore`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
@@ -88,9 +88,27 @@ export const useTourStore = create<TourState>((set, get) => ({
    const data = await response.json();
    set({ publicTours: data });
  },
  fetchPublicTourDetails: async (tourId: string) => {
    try {
      // Reset state cũ trước khi tải dữ liệu mới
      set({ currentTour: null, legs: [], userRole: 'VIEWER_ONLY' });
      const response = await fetch(`/api/v1/tours/${tourId}/public`);
      if (!response.ok) throw new Error('Không thể tải tour công khai');
      const data = await response.json();
      const legs = data.legs || [];
      set({ 
        currentTour: data, 
        legs, 
        userRole: 'VIEWER_ONLY',
        activeLegId: legs.length > 0 ? legs[0].id : null 
      });
    } catch (err: any) {
      console.error('Lỗi khi tải tour công khai:', err);
    }
  },
  createTour: async (tourData: any) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/tours`, {
    const response = await fetch(`${API_BASE}/api/v1/tours`, {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
@@ -106,9 +124,24 @@ export const useTourStore = create<TourState>((set, get) => ({
    await get().fetchPublicTours();
    return tour;
  },
  updateTourDetails: async (tourId: string, data: any) => {
    const token = localStorage.getItem('token');
    const response = await fetch(`/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`;
+    const response = await fetch(`/api/v1/tours/${id}`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${id}`, {
      method: 'PATCH',
      headers: { 
        'Content-Type': 'application/json',
@@ -122,8 +155,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    get().fetchPublicTours();
  },
  deleteTour: async (id: string) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/tours/${id}`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${id}`, {
      method: 'DELETE',
      headers: { 
        'Authorization': `Bearer ${localStorage.getItem('token')}`
@@ -139,8 +171,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    get().fetchPublicTours();
  },
  addLeg: async (tourId: string, data: any) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/tours/${tourId}/legs`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/legs`, {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
@@ -152,8 +183,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    get().fetchTour(tourId);
  },
  initializeLegs: async (tourId: string, count: number) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/tours/${tourId}/legs/batch`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/legs/batch`, {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
@@ -165,8 +195,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    await get().fetchTour(tourId);
  },
  updateLeg: async (legId: string, data: any) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/legs/${legId}`, {
    const response = await fetch(`${API_BASE}/api/v1/legs/${legId}`, {
      method: 'PATCH',
      headers: { 
        'Content-Type': 'application/json',
@@ -180,8 +209,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    if (currentTour) get().fetchTour(currentTour.id);
  },
  deleteLeg: async (legId: string) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/legs/${legId}`, {
    const response = await fetch(`${API_BASE}/api/v1/legs/${legId}`, {
      method: 'DELETE',
      headers: { 
        'Authorization': `Bearer ${localStorage.getItem('token')}`
@@ -196,8 +224,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    if (currentTour) get().fetchTour(currentTour.id);
  },
  addLocation: async (tourId: string, locationData: any) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/tours/${tourId}/locations`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/locations`, {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
@@ -210,8 +237,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    get().fetchTour(tourId);
  },
  updateLocation: async (locationId: string, data: any) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/locations/${locationId}`, {
    const response = await fetch(`${API_BASE}/api/v1/locations/${locationId}`, {
      method: 'PATCH',
      headers: { 
        'Content-Type': 'application/json',
@@ -225,8 +251,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    if (currentTour) get().fetchTour(currentTour.id);
  },
  deleteLocation: async (locationId: string) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/locations/${locationId}`, {
    const response = await fetch(`${API_BASE}/api/v1/locations/${locationId}`, {
      method: 'DELETE',
      headers: { 
        'Authorization': `Bearer ${localStorage.getItem('token')}`
@@ -238,8 +263,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    if (currentTour) get().fetchTour(currentTour.id);
  },
  updateTourStartPoint: async (tourId: string, data: any) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/tours/${tourId}/start-point`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/start-point`, {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
@@ -253,8 +277,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    await get().fetchTour(tourId);
  },
  updateTourEndPoint: async (tourId: string, data: any) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/tours/${tourId}/end-point`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/end-point`, {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
@@ -266,8 +289,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    await get().fetchTour(tourId);
  },
  optimizeRouting: async (legId: string) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/routing/optimize/${legId}`, {
    const response = await fetch(`${API_BASE}/api/v1/routing/optimize/${legId}`, {
      method: 'POST'
    });
    const { locations, totalDistance } = await response.json();
@@ -281,8 +303,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    }
  },
  removeMember: async (tourId: string, userId: string) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/tours/${tourId}/members/${userId}`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members/${userId}`, {
      method: 'DELETE',
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -293,8 +314,7 @@ export const useTourStore = create<TourState>((set, 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/v1/tours/${tourId}/members`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/members`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
@@ -310,8 +330,7 @@ export const useTourStore = create<TourState>((set, 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/v1/tours/${tourId}/join-requests`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
@@ -326,8 +345,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    return response.json();
  },
  fetchJoinRequests: async (tourId: string) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/tours/${tourId}/join-requests`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests`, {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
@@ -339,8 +357,7 @@ export const useTourStore = create<TourState>((set, get) => ({
    return response.json();
  },
  acceptJoinRequest: async (tourId: string, requestId: string) => {
-    const API_BASE = `http://${window.location.hostname}:3001`;
+    const response = await fetch(`/api/v1/tours/${tourId}/join-requests/${requestId}/accept`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests/${requestId}/accept`, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
@@ -354,8 +371,7 @@ export const useTourStore = create<TourState>((set, 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/v1/tours/${tourId}/join-requests/${requestId}/reject`, {
    const response = await fetch(`${API_BASE}/api/v1/tours/${tourId}/join-requests/${requestId}/reject`, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
@@ -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;
@@ -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" }]
 }
@@ -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"]
 }
@@ -0,0 +1,45 @@
 import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import fs from 'fs';
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
  // Nạp các biến môi trường từ thư mục gốc
  const env = loadEnv(mode, path.resolve(__dirname, '..'), '');
  // Cấu hình HTTPS nếu tìm thấy file chứng chỉ (ví dụ đặt tại thư mục gốc của dự án)
  const httpsConfig = fs.existsSync('../key.pem') && fs.existsSync('../cert.pem')
    ? {
        key: fs.readFileSync('../key.pem'),
        cert: fs.readFileSync('../cert.pem'),
      }
    : undefined;
  return {
    plugins: [react()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
    server: {
      port: 3002,
      host: true,
      // Cho phép các host từ file .env
      allowedHosts: env.ALLOWED_HOSTS ? env.ALLOWED_HOSTS.split(',') : true,
      https: httpsConfig,
      proxy: {
        '/api': {
          target: 'http://localhost:3001',
          changeOrigin: true,
        },
        '/socket.io': {
          target: 'http://localhost:3001',
          ws: true,
          changeOrigin: true,
        },
      },
    },
  };
 });
@@ -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",
+    "build": "npm run build --workspace=backend && npm run build --workspace=frontend",
-    "start": "nest start",
+    "start:backend": "npm run start:dev --workspace=backend",
-    "start:dev": "nest start --watch",
+    "start:frontend": "npm run start:dev --workspace=frontend",
-    "frontend": "vite",
+    "start:dev": "concurrently -n \"BACKEND,FRONTEND\" -c \"magenta,cyan\" \"npm run start:dev --workspace=backend\" \"npm run dev --workspace=frontend\"",
-    "db:migrate": "npx prisma migrate dev",
+    "db:migrate": "npm run db:migrate --workspace=backend",
-    "db:generate": "npx prisma generate",
+    "db:generate": "npm run db:generate --workspace=backend",
-    "db:seed": "npx tsx seed.ts"
+    "db:seed": "npm run db:seed --workspace=backend"
  },
  "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"
  },
  "devDependencies": {
-    "@nestjs/cli": "^10.0.0",
+    "concurrently": "^8.2.2"
-    "@tailwindcss/postcss": "^4.3.1",
+  },
-    "@types/bcrypt": "^5.0.2",
+  "dependencies": {
-    "@types/leaflet": "^1.9.12",
+    "jspdf": "^4.2.1",
-    "@types/node": "^20.0.0",
+    "jspdf-autotable": "^5.0.8"
    "@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"
  }
 }
@@ -1,3 +0,0 @@
 # Please do not edit this file manually
 # It should be added in your version-control system (e.g., Git)
 provider = "postgresql"
@@ -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."
@@ -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
@@ -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
  }
 }
@@ -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."
@@ -0,0 +1,60 @@
 import React, { createContext, useContext, useState, useCallback } from 'react';
 import { ConfirmModal } from '../components/ConfirmModal';
 interface ConfirmOptions {
  title?: string;
  message?: string;
 }
 const ConfirmContext = createContext<((options: ConfirmOptions) => Promise<boolean>) | undefined>(undefined);
 export const ConfirmProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [state, setState] = useState<{
    isOpen: boolean;
    title?: string;
    message?: string;
    resolve?: (value: boolean) => void;
  }>({ isOpen: false });
  const confirm = useCallback((options: ConfirmOptions) => {
    return new Promise<boolean>((resolve) => {
      setState({
        isOpen: true,
        title: options.title,
        message: options.message,
        resolve,
      });
    });
  }, []);
  const handleConfirm = () => {
    const resolve = state.resolve;
    setState({ isOpen: false, resolve: undefined });
    resolve?.(true);
  };
  const handleCancel = () => {
    const resolve = state.resolve;
    setState({ isOpen: false, resolve: undefined });
    resolve?.(false);
  };
  return (
    <ConfirmContext.Provider value={confirm}>
      {children}
      <ConfirmModal
        isOpen={state.isOpen}
        title={state.title}
        message={state.message}
        onConfirm={handleConfirm}
        onCancel={handleCancel}
      />
    </ConfirmContext.Provider>
  );
 };
 export const useConfirm = () => {
  const confirm = useContext(ConfirmContext);
  if (!confirm) throw new Error('useConfirm must be used within a ConfirmProvider');
  return confirm;
 };
@@ -1,11 +0,0 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 export default defineConfig({
  plugins: [react()],
  server: {
    port: 3002, // Thay đổi cổng thành 5173 (mặc định của Vite) hoặc cổng khác bạn muốn
    strictPort: true,
    host: true,
  },
 });
Author	SHA1	Message	Date
3dtours	29d39ae7b0	feat: tạo hook useConfirm.tsx để dùng chung toàn hệ thống	2026-06-16 12:29:09 +07:00
3dtours	047170d4be	feat: cho phép người dùng và người quản lí xóa bình luận	2026-06-16 12:21:44 +07:00
3dtours	fc96ee9eb8	fix: tìm kiếm địa điểm với cách gõ tên trên bản đồ	2026-06-16 12:15:01 +07:00
3dtours	0a584a13c7	feat: tìm kiếm địa điểm trên bản đồ	2026-06-16 11:37:21 +07:00
3dtours	f78c72ad60	fix: hiển thị mô tả và tên của hành trình có thêm tags	2026-06-16 11:21:43 +07:00
3dtours	8cca4a83ca	fix: tags không có trong csdl gây nên lỗi crash backend	2026-06-16 11:15:39 +07:00
3dtours	bc49e081c6	feat: cho phép lấy thời gian và địa điểm hiện tại để gán cho điểm	2026-06-16 10:55:18 +07:00
3dtours	9e26aabce6	Sửa lỗi hiển thị chi phí ở điểm của chặng	2026-06-16 10:36:38 +07:00
3dtours	3e1a5db1a6	Sửa lỗi hiển thị bảng liệt kê chi phí	2026-06-16 10:28:33 +07:00
3dtours	baa83aad8a	Sửa lỗi người nhận được line xem được nội dung Tour nhưng không xem được bình luận	2026-06-16 09:56:59 +07:00
3dtours	302a82e887	Sửa lỗi người nhận được liên kết chia sẻ không xem được nội dung Tour	2026-06-16 09:54:32 +07:00
3dtours	63da413b3c	Sửa lỗi OWNER, MANAGER không thể chia sẻ link	2026-06-16 09:33:15 +07:00
3dtours	02c493f7e0	Thêm tính năng click chuột phải vào bong bóng để lấy link chia sẻ	2026-06-16 08:46:45 +07:00
3dtours	b939fc959d	Thêm tính năng hiển thị tooltip trên bong bóng Tour	2026-06-16 08:35:48 +07:00
3dtours	5464d90948	Thêm tính năng bình luận ở mỗi điểm của chặng	2026-06-16 08:27:54 +07:00
3dtours	c5530f36df	feat: cập nhật giao diện tour hiển thị mô tả trên banner	2026-06-15 21:28:41 +07:00
3dtours	dcaf71032c	Cài đặt tính năng thay đổi tên và mô tả tour	2026-06-15 21:22:05 +07:00
3dtours	aec9112064	Cài đặt tính năng người quản lí cập nhật số người tham gia	2026-06-15 20:55:36 +07:00
3dtours	8dac79fc4b	Cài đặt tính năng người quản lí có thể khai báo số lượng người tham gia	2026-06-15 20:52:43 +07:00
3dtours	75cf96898c	Cài đặt tính năng in bảng thống kê ra pdf	2026-06-15 20:43:32 +07:00
3dtours	f52580717f	Cài đặt tính năng hiển thị chi phí	2026-06-15 20:20:34 +07:00
3dtours	879f20985c	Chỉnh sửa ngày của hành trình là ngày của chặng đầu tiên và chặng hoàn thành	2026-06-15 19:57:54 +07:00
3dtours	4edfd0eb59	Sửa lỗi chỉnh sửa tiêu đề chặng và ngày giờ của chặng	2026-06-15 19:53:58 +07:00
3dtours	55f0a8e775	Sửa lỗi không thể khai báo số lượng chặng	2026-06-15 19:42:45 +07:00
3dtours	7812d1395b	Sửa lỗi thành viên có thể gửi lời mời các users khác	2026-06-15 19:38:07 +07:00
3dtours	c9ef98b2ff	Sửa lỗi không truy cập IP từ ngoài	2026-06-15 19:31:03 +07:00
3dtours	71f4aa9ecd	Sửa lỗi frontend không load dược danh sách thêm thành viên	2026-06-15 18:27:54 +07:00
3dtours	34e2af8825	Sửa lỗi frontend không kết nối với backend	2026-06-15 18:25:37 +07:00
3dtours	4716b841dc	Sửa lỗi tái cấu trúc thư mục và khai báo import	2026-06-15 16:31:28 +07:00
3dtours	967f6b4f6a	Phục hồi lại và chuẩn bị tái cấu trúc thư mục	2026-06-15 15:00:37 +07:00
		`@@ -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"}
		`@@ -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"}
		`@@ -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"}`
		`@@ -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"}
		`@@ -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"}
		`@@ -0,0 +1,2 @@`
							`-- AlterTable`
							`ALTER TABLE "Tour" ADD COLUMN "description" TEXT;`
		`@@ -0,0 +1,2 @@`
							`-- AlterTable`
							`ALTER TABLE "Tour" ADD COLUMN "tags" TEXT[];`