# Nhiệm vụ: Sửa giao diện Bong bóng Tour & Kết nối Thành viên

- [x] [Database] Thêm model `UserConnection` và `DirectMessage` vào schema.prisma và chạy db:migrate
- [x] [Backend] Tạo các API quản lý kết nối (`connections`) và tin nhắn (`messages`) cùng WebSocket Gateway
- [x] [Frontend] Sửa luồng redirect sau khi đăng nhập/đăng ký bằng Google trong App.tsx
- [x] [Frontend] Sửa vị trí tâm neo bong bóng Tour (iconSize & iconAnchor) trong ExploreMap.tsx
- [x] [Frontend] Thêm màu viền (xanh, đỏ, trắng) và tooltip phân loại Tour trên bản đồ khám phá
- [x] [Frontend] Chặn click trái đối với tour viền xanh; cài đặt touchstart/contextmenu để xin join bằng nhấn giữ/click phải
- [x] [Frontend] Xây dựng trang Dashboard thành viên (`MemberDashboard.tsx`) tích hợp chat box, quản lý kết nối bạn bè/gia đình, quản lý tour và ảnh cá nhân

## Giai đoạn 2: Sửa đổi giao diện Dashboard Thành viên (Desktop & Mobile)
- [x] [Frontend] Cập nhật giao diện MyPhotosPage.tsx thành Dark Slate theme để đồng bộ với dashboard
- [x] [Frontend] Tích hợp trực tiếp MyPhotosPage vào tab Thư viện ảnh trong MemberDashboard.tsx
- [x] [Frontend] Sửa giao diện Desktop của MemberDashboard.tsx: căn giữa h-[90vh], chỉnh màu thẻ tour, và sửa đè viền Mạng lưới kết nối
- [x] [Frontend] Sửa giao diện Mobile của MemberDashboard.tsx: thiết lập hiển thị fullscreen menu các nút, và quay lại menu từ các trang chi tiết/chat
- [x] Xác minh toàn bộ tính năng và lỗi hiển thị trên cả desktop và điện thoại di động

## Giai đoạn 3: Realtime Notification qua WebSockets
- [x] [Backend] Thêm notifyConnectionAccepted và notifyJoinRequestAccepted vào CommentGateway trong main.ts
- [x] [Backend] Inject CommentGateway và trigger notifyConnectionAccepted trong ConnectionController
- [x] [Backend] Inject CommentGateway và trigger notifyJoinRequestAccepted trong TourController
- [x] [Frontend] Thêm event listeners (connectionAccepted, joinRequestAccepted) vào socket hook trong MemberDashboard.tsx
- [x] Xác minh các sự kiện thông báo thời gian thực trên giao diện người dùng

## Giai đoạn 4: Notification Badges & System Push Notifications (Mobile/Desktop)
- [x] [Frontend] Khởi tạo yêu cầu quyền Notification hệ thống khi mount và tạo helper showSystemNotification
- [x] [Frontend] Khai báo các state unreadChatSenders và unreadTourSenders cùng helper isMemberOfMyTours
- [x] [Frontend] Cập nhật event listener messageReceived để kích hoạt push notification và set các state chưa đọc
- [x] [Frontend] Hiển thị Badge thông báo trên các tab/menu button và danh sách chat liên hệ
- [x] [Frontend] Xử lý xóa trạng thái chưa đọc khi chọn chat user hoặc click tab Hành trình của tôi
- [x] Xác minh hiển thị Badge và thông báo đẩy hệ thống thành công trên cả desktop/mobile

## Giai đoạn 5: Trò chuyện Nhóm Hành trình & Đính kèm (Ảnh nén 2K + Vị trí GPS)
- [x] [Database] Cập nhật schema.prisma (thêm TourMessage và các trường DirectMessage), chạy db migration
- [x] [Backend] Thêm UploadController, cập nhật DirectMessageController và tạo TourMessageController trong main.ts
- [x] [Frontend] Viết component TourChat.tsx (nén canvas 2K, tải ảnh, lấy vị trí GPS)
- [x] [Frontend] Tích hợp tab Trò chuyện và sự kiện socket vào TourDetailPage.tsx
- [x] [Frontend] Nâng cấp giao diện chat trong MemberDashboard.tsx (nén canvas 2K, tải ảnh, GPS, và badge tour chat)
- [x] Xác minh biên dịch TypeScript và chạy các kịch bản kiểm thử trò chuyện trực tiếp/nhóm thành công

## Giai đoạn 6: Nhắc tên (@Mention) trong Chat & Tắt thông báo
- [x] [Frontend] Sửa lỗi hiển thị bong bóng tour trên bản đồ bằng cách quét tất cả chặng (ExploreMap.tsx)
- [x] [Backend] Cập nhật API gửi tin nhắn nhóm tour để nhận taggedUserIds và gửi socket notification riêng (main.ts)
- [x] [Frontend] Thêm chức năng tag @ thành viên trong component TourChat.tsx
- [x] [Frontend] Thêm nút Bật/Tắt thông báo đẩy & logic Mute trong MemberDashboard.tsx
- [x] Xác minh biên dịch TypeScript và chạy các kịch bản kiểm thử tag & mute thành công
