travelplanning/task.md

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

• [Database] Thêm model UserConnection và DirectMessage vào schema.prisma và chạy db:migrate
• [Backend] Tạo các API quản lý kết nối (connections) và tin nhắn (messages) cùng WebSocket Gateway
• [Frontend] Sửa luồng redirect sau khi đăng nhập/đăng ký bằng Google trong App.tsx
• [Frontend] Sửa vị trí tâm neo bong bóng Tour (iconSize & iconAnchor) trong ExploreMap.tsx
• [Frontend] Thêm màu viền (xanh, đỏ, trắng) và tooltip phân loại Tour trên bản đồ khám phá
• [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
• [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)

• [Frontend] Cập nhật giao diện MyPhotosPage.tsx thành Dark Slate theme để đồng bộ với dashboard
• [Frontend] Tích hợp trực tiếp MyPhotosPage vào tab Thư viện ảnh trong MemberDashboard.tsx
• [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
• [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á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

• [Backend] Thêm notifyConnectionAccepted và notifyJoinRequestAccepted vào CommentGateway trong main.ts
• [Backend] Inject CommentGateway và trigger notifyConnectionAccepted trong ConnectionController
• [Backend] Inject CommentGateway và trigger notifyJoinRequestAccepted trong TourController
• [Frontend] Thêm event listeners (connectionAccepted, joinRequestAccepted) vào socket hook trong MemberDashboard.tsx
• 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)

• [Frontend] Khởi tạo yêu cầu quyền Notification hệ thống khi mount và tạo helper showSystemNotification
• [Frontend] Khai báo các state unreadChatSenders và unreadTourSenders cùng helper isMemberOfMyTours
• [Frontend] Cập nhật event listener messageReceived để kích hoạt push notification và set các state chưa đọc
• [Frontend] Hiển thị Badge thông báo trên các tab/menu button và danh sách chat liên hệ
• [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á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)

• [Database] Cập nhật schema.prisma (thêm TourMessage và các trường DirectMessage), chạy db migration
• [Backend] Thêm UploadController, cập nhật DirectMessageController và tạo TourMessageController trong main.ts
• [Frontend] Viết component TourChat.tsx (nén canvas 2K, tải ảnh, lấy vị trí GPS)
• [Frontend] Tích hợp tab Trò chuyện và sự kiện socket vào TourDetailPage.tsx
• [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á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

• [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)
• [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)
• [Frontend] Thêm chức năng tag @ thành viên trong component TourChat.tsx
• [Frontend] Thêm nút Bật/Tắt thông báo đẩy & logic Mute trong MemberDashboard.tsx
• 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