feat: tíng năng trò chuyện giữa các thành viên và tin nhắn trực tiếp cho bạn bè

frontend/src/pages/ExploreMap.tsx

@@ -5,9 +5,10 @@ const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerCluste
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { useTourStore } from '@/store/useTourStore';
-import { X, Navigation, Image as ImageIcon, LogOut, Settings, Share2, Filter, MapPin, Loader2, UserPlus, Clock } from 'lucide-react';
+import { X, Navigation, Image as ImageIcon, LogOut, Settings, Share2, Filter, MapPin, Loader2, UserPlus, Clock, ChevronLeft } from 'lucide-react';
 import { UserManagementModal } from '@/components/UserManagementModal';
 import { useNotification } from '@/hooks/useNotification';
+import { useConfirm } from '@/hooks/useConfirm';
 import { CreateTourModal } from '../components/CreateTourModal';
 import { PublicPhotoModal } from '../components/PublicPhotoModal';
 
@@ -65,6 +66,80 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
   const setMapCenter = useTourStore(state => state.setMapCenter);
 
   const notify = useNotification();
+  const confirm = useConfirm();
+
+  // Refs for mobile long-press detection
+  const touchTimerRef = React.useRef<any>(null);
+  const touchMovedRef = React.useRef<boolean>(false);
+
+  // Phân loại trạng thái Tour dựa vào thời gian
+  const getTourStatus = (tour: any) => {
+    const now = new Date();
+    const startDate = tour.startDate ? new Date(tour.startDate) : null;
+    const endDate = tour.endDate ? new Date(tour.endDate) : null;
+    if (endDate && endDate < now) {
+      return { color: 'white', borderClass: 'border-white', label: 'Hành trình đã kết thúc' };
+    }
+    if (startDate && endDate && startDate <= now && endDate >= now) {
+      return { color: 'red', borderClass: 'border-rose-500', label: 'Hành trình đang diễn ra' };
+    }
+    return { color: 'green', borderClass: 'border-emerald-500', label: 'Hành trình mới tạo' };
+  };
+
+  const triggerJoinConfirmation = async (tour: any) => {
+    const currentUserId = user?.id;
+    const myParticipant = tour.participants?.find((p: any) => p.userId === currentUserId);
+    if (myParticipant) {
+      notify({
+        title: 'Thông báo',
+        message: 'Bạn đã là thành viên của hành trình này.',
+        type: 'info'
+      });
+      return;
+    }
+    const hasPendingRequest = tour.joinRequests && tour.joinRequests.length > 0;
+    if (hasPendingRequest) {
+      notify({
+        title: 'Thông báo',
+        message: 'Bạn đã gửi yêu cầu tham gia hành trình này và đang chờ duyệt.',
+        type: 'info'
+      });
+      return;
+    }
+
+    const isConfirmed = await confirm({
+      title: 'Yêu cầu tham gia Tour',
+      message: `Bạn có chắc chắn muốn gửi yêu cầu tham gia vào tour "${tour.title}" không?`
+    });
+
+    if (isConfirmed) {
+      try {
+        const res = await fetch(`/api/v1/tours/${tour.id}/join-requests`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${localStorage.getItem('token')}`
+          }
+        });
+        const data = await res.json();
+        if (!res.ok) {
+          throw new Error(data.message || 'Gửi yêu cầu tham gia thất bại.');
+        }
+        notify({
+          title: 'Thành công',
+          message: 'Đã gửi yêu cầu tham gia tour. Vui lòng chờ chủ tour duyệt.',
+          type: 'success'
+        });
+        fetchPublicTours();
+      } catch (err: any) {
+        notify({
+          title: 'Lỗi',
+          message: err.message || 'Không thể gửi yêu cầu tham gia.',
+          type: 'error'
+        });
+      }
+    }
+  };
 
   // 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(() => {
@@ -328,7 +403,7 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
             className="w-11 h-11 flex items-center justify-center bg-white rounded-full shadow-xl hover:bg-gray-50 transition-all border border-gray-100 shrink-0"
             title="Quay lại"
           >
-            <X className="w-6 h-6 text-gray-800" />
+            <ChevronLeft className="w-6 h-6 text-gray-800" />
           </button>
 
           {/* Nút lọc Tag và Dropdown */}
@@ -487,43 +562,92 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
         
         <MarkerClusterGroup key={`cluster-${filteredTours.length}`} chunkedLoading>
           {filteredTours.map((tour) => {
-            const startLoc = tour.legs?.[0]?.locations?.[0];
+            let startLoc = null;
+            if (tour.legs && tour.legs.length > 0) {
+              for (const leg of tour.legs) {
+                if (leg.locations && leg.locations.length > 0) {
+                  startLoc = leg.locations[0];
+                  break;
+                }
+              }
+            }
             const tourImage = tour.photos?.[0]?.imageUrl || `https://picsum.photos/seed/${tour.id}/200/200`;
             const markerPos = startLoc
               ? [startLoc.latitude, startLoc.longitude] as [number, number]
               : userPos;
+            const status = getTourStatus(tour);
 
             return (
                 <Marker
                   key={tour.id}
                   position={markerPos}
                   eventHandlers={{
-                    click: () => onViewTour(tour.id),
-                    contextmenu: (e) => {
-                      const currentUserId = user?.id;
-                      const myParticipant = tour.participants?.find((p: any) => p.userId === currentUserId);
-                      const isParticipant = !!myParticipant;
-                      const myRole = myParticipant?.role;
-                      const canShare = isParticipant && ['OWNER', 'MANAGER', 'MEMBER'].includes(myRole);
-                      const hasPendingRequest = tour.joinRequests && tour.joinRequests.length > 0;
+                    click: () => {
+                      if (status.color === 'green') {
+                        notify({
+                          title: 'Thông báo',
+                          message: 'Đây là hành trình mới tạo. Vui lòng nhấn chuột phải (hoặc nhấn giữ trên màn hình điện thoại) để gửi yêu cầu tham gia.',
+                          type: 'info'
+                        });
+                      } else {
+                        onViewTour(tour.id);
+                      }
+                    },
+                    contextmenu: (e: any) => {
+                      if (status.color === 'green') {
+                        triggerJoinConfirmation(tour);
+                      } else {
+                        const currentUserId = user?.id;
+                        const myParticipant = tour.participants?.find((p: any) => p.userId === currentUserId);
+                        const isParticipant = !!myParticipant;
+                        const myRole = myParticipant?.role;
+                        const canShare = isParticipant && ['OWNER', 'MANAGER', 'MEMBER'].includes(myRole);
+                        const hasPendingRequest = tour.joinRequests && tour.joinRequests.length > 0;
 
-                      // 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,
-                        isParticipant,
-                        hasPendingRequest
-                      });
+                        // 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,
+                          isParticipant,
+                          hasPendingRequest
+                        });
+                      }
+                    },
+                    touchstart: () => {
+                      if (status.color === 'green') {
+                        if (touchTimerRef.current) {
+                          clearTimeout(touchTimerRef.current);
+                        }
+                        touchMovedRef.current = false;
+                        touchTimerRef.current = setTimeout(() => {
+                          if (!touchMovedRef.current) {
+                            triggerJoinConfirmation(tour);
+                          }
+                        }, 700);
+                      }
+                    },
+                    touchend: () => {
+                      if (touchTimerRef.current) {
+                        clearTimeout(touchTimerRef.current);
+                        touchTimerRef.current = null;
+                      }
+                    },
+                    touchmove: () => {
+                      touchMovedRef.current = true;
+                      if (touchTimerRef.current) {
+                        clearTimeout(touchTimerRef.current);
+                        touchTimerRef.current = null;
+                      }
                     }
-                  }}
+                  } as any}
                   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">
+                      <div class="relative group w-14 h-14">
+                        <div class="w-14 h-14 rounded-full border-4 ${status.borderClass} shadow-lg overflow-hidden transition-transform group-hover:scale-110 flex items-center justify-center bg-gray-100">
                           <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">
@@ -531,13 +655,13 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
                         </div>
                       </div>
                     `,
-                    iconSize: [48, 48],
-                    iconAnchor: [24, 24]
+                    iconSize: [56, 56],
+                    iconAnchor: [28, 28]
                   })}
                 >
-                  <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>
+                  <Tooltip direction="top" offset={[0, -28]} opacity={1}>
+                    <div className="p-1.5 max-w-[180px]">
+                      <div className="font-black text-blue-600 text-[11px] mb-1 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) => (
@@ -546,10 +670,17 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
                         </div>
                       )}
                       {tour.description && (
-                        <div className="text-[10px] text-gray-500 line-clamp-2 leading-tight italic">
+                        <div className="text-[10px] text-gray-500 line-clamp-2 leading-tight italic mb-1.5">
                           {tour.description}
                         </div>
                       )}
+                      <div className="flex items-center gap-1.5 pt-1 border-t border-gray-100">
+                        <span className={`w-2 h-2 rounded-full ${
+                          status.color === 'green' ? 'bg-emerald-500' :
+                          status.color === 'red' ? 'bg-rose-500' : 'bg-gray-400'
+                        }`} />
+                        <span className="text-[9px] font-bold text-gray-600">{status.label}</span>
+                      </div>
                     </div>
                   </Tooltip>
                 </Marker>

frontend/src/pages/MyPhotosPage.tsx

@@ -16,10 +16,10 @@ const getMostLikedPhoto = (photos: any[]) => {
 export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
   const [photos, setPhotos] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [selectedTourIdForPhoto, setSelectedTourIdForPhoto] = useState<string | 'all'>('all'); // Changed from filterTourId
+  const [selectedTourIdForPhoto, setSelectedTourIdForPhoto] = useState<string | 'all'>('all');
   const [filterDate, setFilterDate] = useState<string>('');
-  const [selectedPhotoForDisplay, setSelectedPhotoForDisplay] = useState<any | null>(null); // New state for large photo display
-  const [sortOrder, setSortOrder] = useState<'newest' | 'oldest'>('newest'); // 'newest' by default
+  const [selectedPhotoForDisplay, setSelectedPhotoForDisplay] = useState<any | null>(null);
+  const [sortOrder, setSortOrder] = useState<'newest' | 'oldest'>('newest');
   const notify = useNotification();
   const confirm = useConfirm();
 
@@ -100,9 +100,7 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
       const updatedPhoto = await response.json();
       notify({ title: 'Thành công', message: 'Thông tin ảnh đã được cập nhật.', type: 'success' });
       
-      // Update photos list
       setPhotos(prev => prev.map(p => p.id === updatedPhoto.id ? { ...p, metadata: updatedPhoto.metadata } : p));
-      // Update selectedPhotoForDisplay
       setSelectedPhotoForDisplay((prev: any) => prev ? ({ ...prev, metadata: updatedPhoto.metadata }) : null);
       setIsEditing(false);
     } catch (error) {
@@ -171,7 +169,6 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
     fetchPhotos();
   }, []);
 
-  // Lấy danh sách các Tour duy nhất để hiển thị trong bộ lọc
   const toursWithPhotos = useMemo(() => {
     const tourMap = new Map();
     photos.forEach(p => {
@@ -182,36 +179,27 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
     return Array.from(tourMap.values());
   }, [photos]);
 
-  // Logic lọc ảnh tại Frontend
   const filteredPhotos = useMemo(() => {
     let photosToFilter = photos.filter(p => {
       const matchTour = selectedTourIdForPhoto === 'all' || p.tourId === selectedTourIdForPhoto;
-      // So sánh ngày định dạng YYYY-MM-DD
       const photoDate = p.capturedAt ? p.capturedAt.split('T')[0] : '';
       const matchDate = !filterDate || photoDate === filterDate;
       return matchTour && matchDate;
     });
     let sortedPhotos = photosToFilter;
-    // Sắp xếp ảnh
     if (sortOrder === 'newest') {
       sortedPhotos.sort((a, b) => new Date(b.capturedAt).getTime() - new Date(a.capturedAt).getTime());
-    } else { // 'oldest'
+    } else {
       sortedPhotos.sort((a, b) => new Date(a.capturedAt).getTime() - new Date(b.capturedAt).getTime());
     }
     return sortedPhotos;
   }, [photos, selectedTourIdForPhoto, filterDate, sortOrder]);
 
-  // Effect để thiết lập ảnh được chọn hiển thị hoặc reset nếu ảnh hiện tại không còn trong danh sách lọc
   useEffect(() => {
     if (filteredPhotos.length > 0 && (!selectedPhotoForDisplay || !filteredPhotos.some(p => p.id === selectedPhotoForDisplay.id))) {
       setSelectedPhotoForDisplay(getMostLikedPhoto(filteredPhotos));
     } else if (filteredPhotos.length === 0) {
       setSelectedPhotoForDisplay(null);
-    } else if (selectedPhotoForDisplay) {
-      // Nếu ảnh đang chọn vẫn còn trong danh sách lọc, không làm gì cả
-    } else {
-      // Nếu không có ảnh nào để hiển thị
-      setSelectedPhotoForDisplay(null); // No photos to display
     }
   }, [filteredPhotos, selectedPhotoForDisplay]);
 
@@ -234,73 +222,66 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
       if (!response.ok) throw new Error('Failed to delete photo');
 
       notify({ title: 'Thành công', message: 'Ảnh đã được xóa.', type: 'success' });
-      // Cập nhật lại danh sách ảnh sau khi xóa
       setPhotos(prev => prev.filter(p => p.id !== photoId));
-      setSelectedPhotoForDisplay(null); // Reset ảnh đang hiển thị
+      setSelectedPhotoForDisplay(null);
     } catch (error) {
       notify({ title: 'Lỗi', message: 'Không thể xóa ảnh. Vui lòng thử lại.', type: 'error' });
     }
   };
 
-
   return (
-    <div className="min-h-screen bg-gray-50 flex flex-col">
+    <div className="w-full flex flex-col text-slate-100 bg-transparent font-sans">
       {/* Header */}
-      <div className="sticky top-0 z-30 bg-white/80 backdrop-blur-md border-b border-gray-100 px-4 py-4 flex items-center gap-4">
-        <button onClick={onBack} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
-          <ChevronLeft className="w-6 h-6 text-gray-600" />
+      <div className="bg-slate-900/60 backdrop-blur-md border-b border-slate-800/80 px-6 py-4 flex items-center gap-4 rounded-t-3xl">
+        <button onClick={onBack} className="p-2 hover:bg-slate-800 rounded-full transition-colors">
+          <ChevronLeft className="w-6 h-6 text-slate-400 hover:text-white" />
         </button>
         <div>
-          <h1 className="text-xl font-black text-gray-900">Ảnh của tôi</h1>
-          <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Kho lưu trữ ảnh gốc cá nhân</p>
+          <h1 className="text-xl font-black text-white">Ảnh của tôi</h1>
+          <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Kho lưu trữ ảnh gốc cá nhân</p>
         </div>
       </div>
 
-      {/* Filter Bar - Thanh công cụ lọc */}
-      <div className="bg-white border-b border-gray-100 px-6 py-4 flex flex-wrap items-center gap-4 sticky top-[73px] z-20 shadow-sm">
-        <div className="flex items-center gap-2 text-gray-500">
+      {/* Filter Bar */}
+      <div className="bg-slate-900/40 border-b border-slate-800/60 px-6 py-4 flex flex-wrap items-center gap-4 shadow-sm">
+        <div className="flex items-center gap-2 text-slate-400">
           <Filter className="w-4 h-4" />
-          <span className="text-xs font-bold uppercase tracking-wider text-gray-400">Bộ lọc:</span>
+          <span className="text-xs font-bold uppercase tracking-wider">Bộ lọc:</span>
         </div>
         
-        {/* Chỉ báo Tour hiện tại */}
         <div className="relative min-w-[150px]">
-          <div className="px-3 py-2 bg-blue-50 text-blue-600 rounded-xl text-xs font-bold border border-blue-100 truncate max-w-[200px]">
+          <div className="px-3 py-2 bg-slate-800 text-indigo-300 rounded-xl text-xs font-bold border border-slate-700/60 truncate max-w-[200px]">
             {selectedTourIdForPhoto === 'all' ? 'Tất cả hành trình' : toursWithPhotos.find(t => t.id === selectedTourIdForPhoto)?.title || 'Tour đã chọn'}
           </div>
         </div>
 
-        {/* Lọc theo Thời gian */}
         <div className="relative">
           <input
             type="date"
             value={filterDate}
             onChange={(e) => setFilterDate(e.target.value)}
-            className="pl-3 pr-3 py-2 bg-gray-50 border border-gray-100 rounded-xl text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500 transition-all text-gray-700 cursor-pointer"
+            className="pl-3 pr-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-xs font-bold outline-none focus:ring-2 focus:ring-indigo-500/80 transition-all text-slate-200 cursor-pointer"
           />
         </div>
 
-        {/* Lọc theo Sắp xếp */}
         <div className="relative min-w-[120px]">
           <select
             value={sortOrder}
             onChange={(e) => setSortOrder(e.target.value as 'newest' | 'oldest')}
-            className="w-full pl-3 pr-8 py-2 bg-gray-50 border border-gray-100 rounded-xl text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500 transition-all appearance-none cursor-pointer text-gray-700"
+            className="w-full pl-3 pr-8 py-2 bg-slate-950 border border-slate-800 rounded-xl text-xs font-bold outline-none focus:ring-2 focus:ring-indigo-500/80 transition-all appearance-none cursor-pointer text-slate-200"
           >
             <option value="newest">Mới nhất</option>
             <option value="oldest">Cũ nhất</option>
           </select>
-          <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400">
+          <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-500">
             <ChevronLeft className="w-3 h-3 -rotate-90" />
           </div>
         </div>
 
-
-        {/* Reset Filters - Nút xóa nhanh lọc */}
         {(selectedTourIdForPhoto !== 'all' || filterDate) && (
           <button
             onClick={() => { setSelectedTourIdForPhoto('all'); setFilterDate(''); }}
-            className="flex items-center gap-1.5 px-3 py-2 text-xs font-bold text-red-500 hover:bg-red-50 rounded-xl transition-all"
+            className="flex items-center gap-1.5 px-3 py-2 text-xs font-bold text-rose-400 hover:bg-rose-950/20 rounded-xl transition-all"
           >
             <X className="w-3.5 h-3.5" />
             Xóa lọc
@@ -308,29 +289,35 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
         )}
 
         <div className="ml-auto">
-          <p className="text-[10px] font-black text-gray-400 uppercase tracking-tighter">
-            Kết quả: <span className="text-blue-600">{filteredPhotos.length}</span> / {photos.length} ảnh
+          <p className="text-[10px] font-black text-slate-400 uppercase tracking-tighter">
+            Kết quả: <span className="text-indigo-400">{filteredPhotos.length}</span> / {photos.length} ảnh
           </p>
         </div>
       </div>
 
-      <div className="flex-1 p-6 max-w-5xl mx-auto w-full">
+      <div className="flex-1 p-6 w-full max-w-7xl mx-auto">
         {isLoading ? (
-          <div className="flex flex-col items-center justify-center py-20 text-gray-400">
-            <Loader2 className="w-10 h-10 animate-spin mb-4" />
-            <p className="font-bold">Đang tải kho ảnh...</p>
+          <div className="flex flex-col items-center justify-center py-20 text-slate-400">
+            <Loader2 className="w-10 h-10 animate-spin mb-4 text-indigo-500" />
+            <p className="font-bold text-sm">Đang tải kho ảnh...</p>
+          </div>
+        ) : photos.length === 0 ? (
+          <div className="py-24 text-center bg-slate-900/30 rounded-[40px] border-2 border-dashed border-slate-800/80">
+            <ImageIcon className="w-16 h-16 text-slate-700 mx-auto mb-4" />
+            <h3 className="text-xl font-bold text-slate-400">Chưa có ảnh nào</h3>
+            <p className="text-sm text-slate-500">Hãy tham gia các chuyến đi và lưu lại khoảnh khắc nhé!</p>
           </div>
         ) : ( 
           <div className="animate-in fade-in">
-            <div className="flex flex-col md:flex-row gap-4">
+            <div className="flex flex-col md:flex-row gap-6">
               {/* Left Column: Tour List */}
-              <div className="md:w-1/4 bg-white rounded-2xl shadow-lg border border-gray-100 p-4 flex-shrink-0">
-                <h3 className="text-sm font-bold text-gray-800 mb-3">Tour của bạn</h3>
+              <div className="md:w-1/4 bg-slate-900/50 rounded-2xl border border-slate-800/60 p-4 flex-shrink-0">
+                <h3 className="text-xs font-black uppercase text-slate-400 tracking-wider mb-3">Hành trình của bạn</h3>
                 <div className="space-y-2">
                   <button
                     onClick={() => { setSelectedTourIdForPhoto('all'); setSelectedPhotoForDisplay(null); }}
-                    className={`w-full text-left px-3 py-2 rounded-xl text-xs font-bold transition-all ${
-                      selectedTourIdForPhoto === 'all' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                    className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold transition-all ${
+                      selectedTourIdForPhoto === 'all' ? 'bg-indigo-650 text-white shadow-md' : 'bg-slate-800/60 text-slate-300 hover:bg-slate-800'
                     }`}
                   >
                     Tất cả ảnh
@@ -339,9 +326,10 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
                     <button
                       key={tour.id}
                       onClick={() => { setSelectedTourIdForPhoto(tour.id); setSelectedPhotoForDisplay(null); }}
-                      className={`w-full text-left px-3 py-2 rounded-xl text-xs font-bold transition-all ${
-                        selectedTourIdForPhoto === tour.id ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                      className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold transition-all truncate ${
+                        selectedTourIdForPhoto === tour.id ? 'bg-indigo-650 text-white shadow-md' : 'bg-slate-800/60 text-slate-300 hover:bg-slate-800'
                       }`}
+                      title={tour.title}
                     >
                       {tour.title}
                     </button>
@@ -350,87 +338,84 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
               </div>
 
               {/* Right Column: Large Photo Display */}
-              <div className="md:flex-1 bg-white rounded-2xl shadow-lg border border-gray-100 p-4 flex flex-col items-center justify-center min-h-[300px]">
+              <div className="md:flex-1 bg-slate-900/50 rounded-2xl border border-slate-800/60 p-4 flex flex-col items-center justify-center min-h-[350px]">
                 {selectedPhotoForDisplay ? (
                   <div className="relative w-full h-full flex flex-col items-center justify-center">
-                    <div className="relative overflow-hidden rounded-xl shadow-md max-w-full max-h-[calc(100vh-350px)] group">
+                    <div className="relative overflow-hidden rounded-xl shadow-lg max-w-full max-h-[calc(100vh-380px)] group">
                       <img
                         src={selectedPhotoForDisplay.imageUrl || selectedPhotoForDisplay.originalUrl}
-                        alt="Selected Photo"
-                        className="max-w-full max-h-[calc(100vh-350px)] object-contain cursor-zoom-in"
+                        alt="Selected"
+                        className="max-w-full max-h-[calc(100vh-380px)] object-contain cursor-zoom-in"
                         onClick={() => setIsFullscreen(true)}
                       />
                       
-                      {/* Overlays (Only show when not editing) */}
                       {!isEditing && (
                         <>
-                          {/* Like (Heart) button overlay */}
+                          {/* Like Button */}
                           <button
                             onClick={handleToggleLike}
-                            className="absolute top-4 left-4 z-10 flex items-center gap-1.5 bg-black/60 hover:bg-black/75 border border-white/10 text-white font-bold py-1.5 px-3 rounded-full transition-all active:scale-95 text-[11px] backdrop-blur-md"
+                            className="absolute top-4 left-4 z-10 flex items-center gap-1.5 bg-slate-950/80 hover:bg-slate-950 border border-slate-800/60 text-white font-bold py-1.5 px-3 rounded-full transition-all active:scale-95 text-[11px] backdrop-blur-md"
                             title={isLiked ? "Bỏ thích" : "Thích"}
                           >
                             <Heart className={`w-4 h-4 transition-colors ${
-                              isLiked ? 'text-rose-500 fill-rose-500 animate-in zoom-in-75' : 'text-gray-300 hover:text-rose-450'
+                              isLiked ? 'text-rose-500 fill-rose-500' : 'text-gray-300'
                             }`} />
                             <span>{likeCount}</span>
                           </button>
 
-                          {/* Delete button overlay */}
+                          {/* Delete Button */}
                           <button
                             onClick={(e) => {
                               e.stopPropagation();
                               handleDeletePhoto(selectedPhotoForDisplay.id);
                             }}
-                            className="absolute top-4 right-4 z-10 p-2 bg-black/60 hover:bg-red-600 border border-white/10 text-white rounded-full transition-all active:scale-95 backdrop-blur-md"
+                            className="absolute top-4 right-4 z-10 p-2 bg-slate-950/80 hover:bg-rose-650 border border-slate-800/60 text-white rounded-full transition-all active:scale-95 backdrop-blur-md"
                             title="Xóa ảnh này"
                           >
                             <Trash2 className="w-4 h-4" />
                           </button>
 
-                          {/* Bottom metadata details gradient panel overlay */}
-                          <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent p-6 text-white flex flex-col gap-2 text-left">
+                          {/* Metadata Overlay */}
+                          <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-slate-950 via-slate-950/45 to-transparent p-6 text-white flex flex-col gap-2 text-left">
                             <div className="flex justify-between items-start gap-4">
                               <div className="flex-1 min-w-0">
                                 {selectedPhotoForDisplay.metadata?.title ? (
-                                  <h3 className="text-base font-extrabold text-white break-words drop-shadow-md">
+                                  <h3 className="text-sm font-extrabold text-white break-words drop-shadow-md">
                                     {selectedPhotoForDisplay.metadata.title}
                                   </h3>
                                 ) : (
-                                  <span className="text-xs text-gray-350 italic block mb-1 drop-shadow-md">Chưa có tiêu đề</span>
+                                  <span className="text-xs text-slate-400 italic block mb-1">Chưa có tiêu đề</span>
                                 )}
                                 {selectedPhotoForDisplay.metadata?.description ? (
-                                  <p className="text-xs text-gray-250 leading-relaxed mt-1 break-words drop-shadow-sm max-h-16 overflow-y-auto no-scrollbar">
+                                  <p className="text-xs text-slate-300 leading-relaxed mt-1 break-words max-h-16 overflow-y-auto no-scrollbar">
                                     {selectedPhotoForDisplay.metadata.description}
                                   </p>
                                 ) : (
-                                  <span className="text-[11px] text-gray-350 italic block mt-1 drop-shadow-sm">Chưa có mô tả</span>
+                                  <span className="text-[11px] text-slate-400 italic block mt-1">Chưa có mô tả</span>
                                 )}
                               </div>
                               
-                              {/* Edit Button Overlay */}
                               <button
                                 onClick={() => setIsEditing(true)}
-                                className="p-2 bg-white/10 hover:bg-white/20 border border-white/15 rounded-xl text-white hover:text-gray-200 transition-all shrink-0 backdrop-blur-sm"
+                                className="p-2 bg-slate-800 hover:bg-slate-800 border border-slate-700/50 rounded-xl text-white transition-all shrink-0"
                                 title="Chỉnh sửa thông tin"
                               >
-                                <Edit className="w-4 h-4" />
+                                <Edit className="w-4 h-4 text-indigo-400" />
                               </button>
                             </div>
 
-                            {/* Additional metadata info inside bottom overlay */}
-                            <div className="flex flex-wrap items-center justify-between gap-4 border-t border-white/10 pt-3 text-xs text-gray-200">
+                            <div className="flex flex-wrap items-center justify-between gap-4 border-t border-slate-800/80 pt-3 text-xs text-slate-300">
                               <div className="space-y-1">
-                                <div className="flex items-center gap-2 text-gray-300 text-[10px] font-bold uppercase tracking-wider">
-                                  <Calendar className="w-3.5 h-3.5" />
-                                  Ngày chụp: {new Date(selectedPhotoForDisplay.capturedAt).toLocaleDateString('vi-VN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+                                <div className="flex items-center gap-2 text-slate-450 text-[10px] font-bold uppercase tracking-wider">
+                                  <Calendar className="w-3.5 h-3.5 text-indigo-450" />
+                                  Ngày chụp: {new Date(selectedPhotoForDisplay.capturedAt).toLocaleDateString('vi-VN')}
                                 </div>
-                                <div className="flex items-center gap-2 font-bold" title={selectedPhotoForDisplay.metadata?.lat && selectedPhotoForDisplay.metadata?.lng ? `${selectedPhotoForDisplay.metadata.lat.toFixed(6)}, ${selectedPhotoForDisplay.metadata.lng.toFixed(6)}` : ''}>
+                                <div className="flex items-center gap-2 font-bold text-slate-205">
                                   <MapPin className="w-3.5 h-3.5 text-rose-500" />
                                   Địa điểm: {resolvedAddress}
                                 </div>
                                 {selectedPhotoForDisplay.tour?.title && (
-                                  <div className="text-[10px] text-gray-400">
+                                  <div className="text-[10px] text-slate-400">
                                     Hành trình: {selectedPhotoForDisplay.tour.title}
                                   </div>
                                 )}
@@ -440,9 +425,9 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
                                 <a 
                                   href={selectedPhotoForDisplay.originalUrl} 
                                   download 
-                                  className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold uppercase tracking-widest text-[9px] transition-all shadow-md active:scale-95 shrink-0"
+                                  className="flex items-center gap-2 px-3.5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold uppercase tracking-wider text-[9px] transition-all shadow-md active:scale-95 shrink-0"
                                 >
-                                  <Download className="w-3.5 h-3.5 animate-pulse" /> Tải ảnh gốc
+                                  <Download className="w-3.5 h-3.5" /> Tải ảnh gốc
                                 </a>
                               )}
                             </div>
@@ -453,53 +438,53 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
 
                     {isEditing && (
                       <div className="mt-6 w-full flex flex-col gap-4 px-2">
-                        <div className="space-y-3 bg-gray-50 border border-gray-150 p-4 rounded-2xl w-full">
-                          <h4 className="text-xs font-black uppercase tracking-wider text-blue-605">Chỉnh sửa thông tin ảnh</h4>
+                        <div className="space-y-3 bg-slate-950/40 border border-slate-800/80 p-4 rounded-2xl w-full">
+                          <h4 className="text-xs font-black uppercase tracking-wider text-indigo-400">Chỉnh sửa thông tin ảnh</h4>
                           
                           <div className="space-y-2">
                             <div>
-                              <label className="block text-[10px] uppercase font-bold tracking-wider text-gray-500 mb-1">Tiêu đề</label>
+                              <label className="block text-[10px] uppercase font-bold tracking-wider text-slate-450 mb-1">Tiêu đề</label>
                               <input
                                 type="text"
                                 value={editTitle}
                                 onChange={(e) => setEditTitle(e.target.value)}
                                 placeholder="Nhập tiêu đề..."
-                                className="w-full bg-white border border-gray-200 text-gray-800 rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
+                                className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500"
                               />
                             </div>
 
                             <div>
-                              <label className="block text-[10px] uppercase font-bold tracking-wider text-gray-500 mb-1">Mô tả</label>
+                              <label className="block text-[10px] uppercase font-bold tracking-wider text-slate-455 mb-1">Mô tả</label>
                               <textarea
                                 value={editDescription}
                                 onChange={(e) => setEditDescription(e.target.value)}
                                 placeholder="Nhập mô tả..."
                                 rows={2}
-                                className="w-full bg-white border border-gray-200 text-gray-800 rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent resize-none"
+                                className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 resize-none"
                               />
                             </div>
 
                             <div className="grid grid-cols-2 gap-2">
                               <div>
-                                <label className="block text-[10px] uppercase font-bold tracking-wider text-gray-500 mb-1">Vĩ độ</label>
+                                <label className="block text-[10px] uppercase font-bold tracking-wider text-slate-455 mb-1">Vĩ độ</label>
                                 <input
                                   type="number"
                                   step="any"
                                   value={editLat}
                                   onChange={(e) => setEditLat(e.target.value === '' ? '' : parseFloat(e.target.value))}
                                   placeholder="Vĩ độ..."
-                                  className="w-full bg-white border border-gray-200 text-gray-800 rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
+                                  className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2 text-xs focus:outline-none"
                                 />
                               </div>
                               <div>
-                                <label className="block text-[10px] uppercase font-bold tracking-wider text-gray-500 mb-1">Kinh độ</label>
+                                <label className="block text-[10px] uppercase font-bold tracking-wider text-slate-455 mb-1">Kinh độ</label>
                                 <input
                                   type="number"
                                   step="any"
                                   value={editLng}
                                   onChange={(e) => setEditLng(e.target.value === '' ? '' : parseFloat(e.target.value))}
                                   placeholder="Kinh độ..."
-                                  className="w-full bg-white border border-gray-200 text-gray-800 rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
+                                  className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2 text-xs focus:outline-none"
                                 />
                               </div>
                             </div>
@@ -509,7 +494,7 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
                             <button
                               type="button"
                               onClick={() => setIsMapOpen(true)}
-                              className="flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700 hover:text-gray-900 rounded-xl text-[10px] font-bold transition-all"
+                              className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 rounded-xl text-[10px] font-bold transition-all"
                             >
                               <MapPin className="w-3.5 h-3.5 text-rose-500" />
                               Chọn trên bản đồ
@@ -520,14 +505,14 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
                             <button
                               onClick={() => setIsEditing(false)}
                               disabled={isSavingEdit}
-                              className="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg text-xs font-bold transition-all"
+                              className="px-3 py-1.5 bg-slate-800 hover:bg-slate-750 text-slate-300 rounded-lg text-xs font-bold transition-all"
                             >
                               Hủy
                             </button>
                             <button
                               onClick={handleSaveEdit}
                               disabled={isSavingEdit}
-                              className="flex items-center gap-1 px-4 py-1.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-lg text-xs font-bold transition-all"
+                              className="flex items-center gap-1 px-4 py-1.5 bg-indigo-650 hover:bg-indigo-600 disabled:opacity-50 text-white rounded-lg text-xs font-bold transition-all"
                             >
                               {isSavingEdit ? (
                                 <>
@@ -544,26 +529,26 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
                     )}
                   </div>
                 ) : (
-                  <div className="text-center text-gray-400 py-20">
+                  <div className="text-center text-slate-500 py-20">
                     <ImageIcon className="w-16 h-16 mx-auto mb-4 opacity-20" />
-                    <p className="text-lg font-bold">Chọn một tấm ảnh để xem</p>
+                    <p className="text-base font-bold">Chọn một tấm ảnh để xem</p>
                   </div>
                 )}
               </div>
             </div>
 
             {/* Bottom Row: Thumbnails */}
-            <div className="mt-4 bg-white rounded-2xl shadow-lg border border-gray-100 p-4">
+            <div className="mt-6 bg-slate-900/50 rounded-2xl border border-slate-800/60 p-4">
               <div className="flex items-center justify-between mb-4 px-1">
-                <h3 className="text-xs font-black text-gray-400 uppercase tracking-widest">Kho ảnh ({filteredPhotos.length})</h3>
+                <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest">Kho ảnh ({filteredPhotos.length})</h3>
               </div>
-              <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-3 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
+              <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-3 max-h-[250px] overflow-y-auto pr-2 custom-scrollbar">
                 {filteredPhotos.map((photo: any) => (
                   <div
                     key={photo.id}
                     onClick={() => setSelectedPhotoForDisplay(photo)}
-                    className={`aspect-square bg-gray-100 rounded-xl overflow-hidden relative group border-2 transition-all cursor-pointer ${
-                      selectedPhotoForDisplay?.id === photo.id ? 'border-blue-500 scale-[0.98]' : 'border-transparent hover:border-blue-200'
+                    className={`aspect-square bg-slate-950 rounded-xl overflow-hidden relative group border-2 transition-all cursor-pointer ${
+                      selectedPhotoForDisplay?.id === photo.id ? 'border-indigo-505 border-indigo-500 scale-[0.98]' : 'border-transparent hover:border-slate-700'
                     }`}
                   >
                     <img
@@ -576,14 +561,7 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
               </div>
             </div>
           </div>
-         ) }
-         <div className="h-4"></div>
-          <div className="py-32 text-center bg-white rounded-[40px] border-2 border-dashed border-gray-100">
-            <ImageIcon className="w-16 h-16 text-gray-200 mx-auto mb-4" />
-            <h3 className="text-xl font-bold text-gray-400">Chưa có ảnh nào</h3>
-            <p className="text-sm text-gray-300">Hãy tham gia các chuyến đi và lưu lại khoảnh khắc nhé!</p>
-          </div>
-        {}
+        )}
       </div>
       <CoordinateSelectModal
         isOpen={isMapOpen}
@@ -609,7 +587,7 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
           </button>
           <img
             src={selectedPhotoForDisplay.imageUrl || selectedPhotoForDisplay.originalUrl}
-            alt="Fullscreen photo"
+            alt="Fullscreen"
             className="max-w-full max-h-full object-contain select-none animate-in zoom-in-95 duration-200"
           />
         </div>

frontend/src/pages/TourDetailPage.tsx

@@ -10,6 +10,7 @@ import { useConfirm } from '@/hooks/useConfirm';
 import { useNotification } from '@/hooks/useNotification';
 import { CommentModal } from '@/components/CommentModal';
 import { AddPhotoModal } from '@/components/AddPhotoModal'; 
+import { TourChat } from '../components/TourChat';
 import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline, useMap, Tooltip } from 'react-leaflet';
 import _MarkerClusterGroup from 'react-leaflet-cluster';
 const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup;
@@ -361,8 +362,14 @@ export const TourDetailPage = ({
   const [userSpeed, setUserSpeed] = useState<number | null>(null); // Tốc độ di chuyển từ GPS
 
   // Di chuyển khai báo state lên trên useEffect để tránh lỗi "before initialization"
-  const [activeTab, setActiveTab] = useState<'plan' | 'expense' | 'photo' | 'settings' | 'members'>('plan');
+  const [activeTab, setActiveTab] = useState<'plan' | 'expense' | 'photo' | 'settings' | 'members' | 'chat'>(() => {
+    const defaultTab = localStorage.getItem('tour_detail_default_tab');
+    localStorage.removeItem('tour_detail_default_tab');
+    if (defaultTab === 'chat') return 'chat';
+    return 'plan';
+  });
   const [mergingId, setMergingId] = useState<string | null>(null);
+  const [unreadChatCount, setUnreadChatCount] = useState(0);
   const [viewMode, setViewMode] = useState<'map' | 'timeline'>('timeline');
   const [isHeadingMode, setIsHeadingMode] = useState(false);
   const [mapRotation, setMapRotation] = useState(0);
@@ -1137,8 +1144,14 @@ export const TourDetailPage = ({
       handleCommentIncrement(data.locationId);
     });
 
+    socket.on('tourMessageReceived', (data: any) => {
+      if (data.tourId === currentTour.id && activeTab !== 'chat') {
+        setUnreadChatCount(prev => prev + 1);
+      }
+    });
+
     return () => { socket.disconnect(); };
-  }, [currentTour?.id]);
+  }, [currentTour?.id, activeTab]);
 
   // This useEffect is for initial demo loading, might not be needed if tourId is always passed
   // useEffect(() => {
@@ -1400,6 +1413,7 @@ export const TourDetailPage = ({
     { id: 'plan', label: 'Lộ trình', icon: MapIcon, visible: true },
     { id: 'expense', label: 'Chi phí', icon: Wallet, visible: ['OWNER', 'MANAGER', 'MEMBER'].includes(userRole || '') },
     { id: 'photo', label: 'Ảnh', icon: ImageIcon, visible: true },
+    { id: 'chat', label: 'Trò chuyện', icon: MessageSquare, visible: !!userRole, hasBadge: unreadChatCount > 0, badgeCount: unreadChatCount },
     { id: 'members', label: 'Thành viên', icon: Users, visible: canManage },
     { id: 'settings', label: 'Cài đặt', icon: Settings, visible: userRole === 'OWNER' },
   ].filter(t => t.visible);
@@ -1744,8 +1758,11 @@ export const TourDetailPage = ({
           {tabs.map((tab) => (
             <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 ${tab.id === 'settings' && isPublicView ? 'hidden' : ''} ${ // Hide settings tab in public view
+              onClick={() => {
+                setActiveTab(tab.id as any);
+                if (tab.id === 'chat') setUnreadChatCount(0);
+              }}
+              className={`flex-1 flex items-center justify-center py-3 rounded-xl text-sm font-semibold transition-all relative ${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'
@@ -1753,6 +1770,11 @@ export const TourDetailPage = ({
             >
               <tab.icon className={`w-4 h-4 mr-2 ${activeTab === tab.id ? 'scale-110' : ''}`} />
               {tab.label}
+              {tab.hasBadge && tab.badgeCount !== undefined && tab.badgeCount > 0 && (
+                <span className="absolute -top-1 -right-1.5 bg-red-500 text-white text-[9px] font-black rounded-full px-1.5 py-0.5 animate-bounce shadow-md">
+                  {tab.badgeCount}
+                </span>
+              )}
             </button>
           ))}
         </div>
@@ -2667,6 +2689,11 @@ export const TourDetailPage = ({
               onOpenAddMember={() => setIsAddMemberOpen(true)}
             />
           )}
+          {activeTab === 'chat' && currentTour && (
+            <div className="animate-in fade-in slide-in-from-bottom-2">
+              <TourChat tourId={currentTour.id} />
+            </div>
+          )}
         </div>
       </div>