3dtours/travelplanning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge: giải quyết xung đột env và dashboard giữa 2 máy

Browse Source
This commit is contained in:
3dtours
2026-06-27 12:09:01 +07:00
parent accda67b22 fee2aed2e6
commit 5f49070a98
91 changed files with 5533 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/MemberDashboard.tsx
+273 -283
View File
@@ -1,17 +1,18 @@
import React, { useEffect, useState, useRef } from 'react';
import {
Compass,
Users,
Image as ImageIcon,
MessageSquare,
LogOut,
Search,
Check,
X,
Trash2,
Send,
UserPlus,
import { io, Socket } from 'socket.io-client';
import { Capacitor } from '@capacitor/core';
import {
Compass,
Users,
Image as ImageIcon,
MessageSquare,
LogOut,
Search,
Check,
X,
Trash2,
Send,
UserPlus,
Clock,
ChevronRight,
ChevronLeft,
@@ -110,7 +111,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
const [attachedLocation, setAttachedLocation] = useState<{ latitude: number; longitude: number } | null>(null);
const [isUploading, setIsUploading] = useState(false);
const [isLocating, setIsLocating] = useState(false);
// Emergency share states
const [sharingTour, setSharingTour] = useState<any | null>(null);
const [shareStatus, setShareStatus] = useState<any | null>(null);
@@ -187,7 +188,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
// Send location message to tour chat
const token = localStorage.getItem('token');
const message = `📍 Vị trí hiện tại: ${position.latitude.toFixed(6)}, ${position.longitude.toFixed(6)}\n🔗 Google Maps: https://maps.google.com/?q=${position.latitude},${position.longitude}`;
const res = await fetch(`/api/v1/tours/${tour.id}/messages`, {
method: 'POST',
headers: {
@@ -320,7 +321,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
}
}
};
const fileInputRef = useRef<HTMLInputElement>(null);
const cameraInputRef = useRef<HTMLInputElement>(null);
@@ -344,10 +345,10 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
const isMemberOfMyTours = (senderId: string) => {
if (!publicTours) return false;
const userTours = publicTours.filter(tour =>
const userTours = publicTours.filter(tour =>
tour.participants?.some((p: any) => p.userId === user?.id)
);
return userTours.some(tour =>
return userTours.some(tour =>
tour.participants?.some((p: any) => p.userId === senderId && p.userId !== user?.id)
);
};
@@ -527,8 +528,18 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
useEffect(() => {
if (!user?.id) return;
const handleMessageReceived = (e: Event) => {
const message = (e as CustomEvent).detail;
// Connect to WebSocket using same origin/proxy
const socket = Capacitor.isNativePlatform()
? io(import.meta.env.VITE_BACKEND_URL || 'https://yotrip.labz.io.vn')
: io();
socketRef.current = socket;
socket.on('connect', () => {
console.log('[WS] MemberDashboard connected:', socket.id);
socket.emit('joinUser', user.id);
});
socket.on('messageReceived', (message: any) => {
// If we are actively chatting with the sender of this message
if (activeChatUser && (message.senderId === activeChatUser.id || message.receiverId === activeChatUser.id)) {
setChatMessages(prev => [...prev, message]);
@@ -806,7 +817,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
// Filter tours where the current logged-in user is a participant
const myTours = React.useMemo(() => {
if (!publicTours) return [];
return publicTours.filter(tour =>
return publicTours.filter(tour =>
tour.participants?.some((p: any) => p.userId === user?.id)
);
}, [publicTours, user?.id]);
@@ -819,7 +830,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
}
const isPendingReceived = receivedRequests.find(r => r.requester?.id === targetId);
if (isPendingReceived) return 'Chờ bạn duyệt';
const isPendingSent = sentRequests.find(s => s.receiver?.id === targetId);
if (isPendingSent) return 'Đã gửi yêu cầu';
@@ -827,7 +838,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
};
// Helper function to render a user's initials avatar
const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') => {
const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') => {
const initials = name
? name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase()
: 'U';
@@ -856,9 +867,9 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
<div className="p-6 border-b border-slate-900 flex flex-col items-center text-center bg-slate-900/30">
<div className="relative mb-3">
{user?.avatar ? (
<img
src={user.avatar}
alt={user.name}
<img
src={user.avatar}
alt={user.name}
className="w-20 h-20 rounded-full object-cover border-4 border-slate-800 shadow-xl"
/>
) : (
@@ -876,11 +887,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
type: 'info'
});
}}
className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-95 z-20 ${
muteNotifications
? 'bg-slate-900 border-slate-800 text-slate-400 hover:text-slate-200'
className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-95 z-20 ${muteNotifications
? 'bg-slate-900 border-slate-800 text-slate-400 hover:text-slate-200'
: 'bg-indigo-650 border-indigo-500 text-white hover:bg-indigo-600'
}`}
}`}
title={muteNotifications ? "Bật thông báo đẩy" : "Tắt thông báo đẩy"}
>
{muteNotifications ? (
@@ -931,7 +941,7 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
{/* Explore Map Quick Button */}
<div className="p-4 border-b border-slate-900">
<button
<button
onClick={onExploreTours}
className="w-full py-4 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl font-bold flex items-center justify-center gap-2 shadow-lg active:scale-98 transition-all"
>
@@ -944,11 +954,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
<div className="flex-1 p-4 flex flex-col gap-3">
<button
onClick={() => handleSelectTab('tours')}
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
activeTab === 'tours'
? 'bg-indigo-900/40 border-indigo-500/40'
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'tours'
? 'bg-indigo-900/40 border-indigo-500/40'
: 'bg-slate-850/80 border-slate-700/80'
}`}
}`}
>
<div className="flex items-center gap-3">
<Compass className="w-5 h-5 text-indigo-400" />
@@ -972,11 +981,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
<button
onClick={() => handleSelectTab('photos')}
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
activeTab === 'photos'
? 'bg-indigo-900/40 border-indigo-500/40'
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'photos'
? 'bg-indigo-900/40 border-indigo-500/40'
: 'bg-slate-850/80 border-slate-700/80'
}`}
}`}
>
<div className="flex items-center gap-3">
<ImageIcon className="w-5 h-5 text-indigo-400" />
@@ -998,11 +1006,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
<div className="p-4 flex flex-col gap-3">
<button
onClick={() => handleSelectTab('connections')}
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
activeTab === 'connections'
? 'bg-indigo-900/40 border-indigo-500/40'
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'connections'
? 'bg-indigo-900/40 border-indigo-500/40'
: 'bg-slate-900/60 border-slate-800/60'
}`}
}`}
>
<div className="flex items-center gap-3">
<Users className="w-5 h-5 text-indigo-400" />
@@ -1026,11 +1033,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
<button
onClick={() => handleSelectTab('chats')}
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
activeTab === 'chats'
? 'bg-indigo-900/40 border-indigo-500/40'
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'chats'
? 'bg-indigo-900/40 border-indigo-500/40'
: 'bg-slate-900/60 border-slate-800/60'
}`}
}`}
>
<div className="flex items-center gap-3">
<MessageSquare className="w-5 h-5 text-indigo-400" />
@@ -1069,23 +1075,22 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
);
}
return (
return (
<div className="h-auto min-h-dvh w-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white flex flex-col md:flex-row p-3 sm:p-6 gap-4 sm:gap-6 overflow-x-hidden">
{/* Background Glow */}
<div className="hidden md:block absolute top-0 right-0 w-[500px] h-[500px] bg-indigo-500/5 rounded-full blur-[120px] pointer-events-none z-0"></div>
<div className="hidden md:block absolute bottom-0 left-0 w-[500px] h-[500px] bg-purple-500/5 rounded-full blur-[120px] pointer-events-none z-0"></div>
<div className={`w-full relative z-10 flex overflow-hidden transition-all duration-350 ${
isMobile
? 'flex-col h-full bg-slate-950'
<div className={`w-full relative z-10 flex overflow-hidden transition-all duration-350 ${isMobile
? 'flex-col h-full bg-slate-950'
: 'max-w-7xl h-[90vh] bg-slate-900/30 border border-slate-800/80 shadow-2xl rounded-3xl backdrop-blur-md'
}`}>
}`}>
{/* Mobile Detail Header: Only on Mobile detail mode */}
{showMobileHeader && (
<div className="px-4 py-3.5 bg-slate-900 border-b border-slate-800/80 flex items-center gap-3 shrink-0">
<button
<button
onClick={handleMobileBack}
className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-400 hover:text-white transition-colors"
>
@@ -1108,9 +1113,9 @@ return (
<div className="p-6 border-b border-slate-800/60 flex flex-col items-center text-center">
<div className="relative mb-3 group">
{user?.avatar ? (
<img
src={user.avatar}
alt={user.name}
<img
src={user.avatar}
alt={user.name}
className="w-20 h-20 rounded-full object-cover border-4 border-slate-700/50 shadow-xl group-hover:border-indigo-500 transition-all duration-300"
/>
) : (
@@ -1133,11 +1138,10 @@ return (
type: 'info'
});
}}
className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-90 z-20 ${
muteNotifications
? 'bg-slate-900 border-slate-800 text-slate-400 hover:text-slate-200'
className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-90 z-20 ${muteNotifications
? 'bg-slate-900 border-slate-800 text-slate-400 hover:text-slate-200'
: 'bg-indigo-650 border-indigo-500 text-white hover:bg-indigo-600'
}`}
}`}
title={muteNotifications ? "Bật thông báo đẩy" : "Tắt thông báo đẩy"}
>
{muteNotifications ? (
@@ -1186,7 +1190,7 @@ return (
{/* Quick Nav Links */}
<div className="px-4 py-6 flex flex-col gap-2 border-b border-slate-800/60">
<button
<button
onClick={onExploreTours}
className="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg hover:shadow-indigo-500/20 active:scale-95 transition-all duration-150"
>
@@ -1199,11 +1203,10 @@ return (
<nav className="flex-1 px-3 py-6 flex flex-col gap-1.5 overflow-y-auto">
<button
onClick={() => handleSelectTab('tours')}
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
activeTab === 'tours'
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'tours'
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
: 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
}`}
}`}
>
<div className="flex items-center gap-3">
<Compass className="w-4 h-4" />
@@ -1219,11 +1222,10 @@ return (
<button
onClick={() => handleSelectTab('photos')}
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
activeTab === 'photos'
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'photos'
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
: 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
}`}
}`}
>
<div className="flex items-center gap-3">
<ImageIcon className="w-4 h-4" />
@@ -1239,11 +1241,10 @@ return (
<button
onClick={() => handleSelectTab('chats')}
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
activeTab === 'chats'
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'chats'
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
: 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
}`}
}`}
>
<div className="flex items-center gap-3">
<MessageSquare className="w-4 h-4" />
@@ -1258,11 +1259,10 @@ return (
<button
onClick={() => handleSelectTab('connections')}
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
activeTab === 'connections'
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'connections'
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
: 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
}`}
}`}
>
<div className="flex items-center gap-3">
<Users className="w-4 h-4" />
@@ -1306,12 +1306,11 @@ return (
)}
{/* Tab content renders here */}
<div className={`flex-1 relative z-10 flex flex-col ${
activeTab === 'chats' || activeTab === 'photos'
? 'overflow-hidden p-0'
<div className={`flex-1 relative z-10 flex flex-col ${activeTab === 'chats' || activeTab === 'photos'
? 'overflow-hidden p-0'
: 'p-4 md:p-8 overflow-y-auto'
}`}>
}`}>
{/* TAB 1: MY TOURS */}
{activeTab === 'tours' && (
<div className="animate-in fade-in slide-in-from-bottom-2 duration-300">
@@ -1332,7 +1331,7 @@ return (
</div>
<h3 className="text-lg font-bold mb-1">Chưa có hành trình nào</h3>
<p className="text-sm text-slate-400 mb-6">Bạn chưa tham gia bất kỳ hành trình nào. Hãy bắt đầu bằng cách tìm các hành trình công khai hoặc tạo chuyến đi mới.</p>
<button
<button
onClick={onExploreTours}
className="py-2.5 px-6 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold text-sm shadow-lg shadow-indigo-600/20 transition-all flex items-center gap-2"
>
@@ -1352,11 +1351,11 @@ return (
})();
const participant = tour.participants?.find((p: any) => p.userId === user?.id);
const roleLabel = participant?.role === 'OWNER' ? 'Chủ tour' :
participant?.role === 'MANAGER' ? 'Quản lý' : 'Thành viên';
const roleLabel = participant?.role === 'OWNER' ? 'Chủ tour' :
participant?.role === 'MANAGER' ? 'Quản lý' : 'Thành viên';
return (
<div
<div
key={tour.id}
className="bg-slate-800/90 hover:bg-slate-800 border border-slate-700/60 rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-xl hover:shadow-indigo-950/10 group flex flex-col h-full"
>
@@ -1381,7 +1380,7 @@ return (
<h3 className="text-base font-bold text-white group-hover:text-indigo-400 transition-colors line-clamp-1">
{tour.title}
</h3>
{tour.description && (
<p className="text-xs text-slate-400 line-clamp-2 mt-2 leading-relaxed italic">
{tour.description}
@@ -1443,14 +1442,14 @@ return (
)}
<span>Chụp ảnh</span>
</button>
<button
onClick={() => handleNavigateToItinerary(tour)}
className="flex-1 py-2 px-2 bg-slate-900 hover:bg-slate-800 text-slate-850 hover:text-white rounded-xl text-xs font-bold transition-all border border-slate-800 hover:border-slate-700 flex items-center justify-center gap-1"
>
<span>Chi tiết hành trình</span>
<ChevronRight className="w-3.5 h-3.5" />
</button>
<button
onClick={() => handleNavigateToItinerary(tour)}
className="flex-1 py-2 px-2 bg-slate-900 hover:bg-slate-800 text-slate-850 hover:text-white rounded-xl text-xs font-bold transition-all border border-slate-800 hover:border-slate-700 flex items-center justify-center gap-1"
>
<span>Chi tiết hành trình</span>
<ChevronRight className="w-3.5 h-3.5" />
</button>
</div>
{/* Emergency Share Button - moved to bottom */}
@@ -1502,31 +1501,28 @@ return (
<div className="flex gap-2 border-b border-slate-800/60 pb-3 mb-6">
<button
onClick={() => setConnectionSubTab('list')}
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all ${
connectionSubTab === 'list'
? 'bg-indigo-600 text-white shadow-md'
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all ${connectionSubTab === 'list'
? 'bg-indigo-600 text-white shadow-md'
: 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
}`}
}`}
>
Danh sách kết nối
</button>
<button
onClick={() => setConnectionSubTab('search')}
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${
connectionSubTab === 'search'
? 'bg-indigo-600 text-white shadow-md'
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${connectionSubTab === 'search'
? 'bg-indigo-600 text-white shadow-md'
: 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
}`}
}`}
>
<Search className="w-3.5 h-3.5" /> Tìm thành viên mới
</button>
<button
onClick={() => setConnectionSubTab('pending')}
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all relative ${
connectionSubTab === 'pending'
? 'bg-indigo-600 text-white shadow-md'
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all relative ${connectionSubTab === 'pending'
? 'bg-indigo-600 text-white shadow-md'
: 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
}`}
}`}
>
Yêu cầu chờ duyệt
{receivedRequests.length > 0 && (
@@ -1557,15 +1553,15 @@ return (
{connections.map((conn) => {
const connUser = conn.targetUser;
return (
<div
<div
key={conn.id}
className="bg-slate-900/50 hover:bg-slate-900/70 border border-slate-800/60 rounded-2xl p-5 flex items-center justify-between transition-all"
>
<div className="flex items-center gap-3.5 min-w-0">
{connUser.avatar ? (
<img
src={connUser.avatar}
alt={connUser.name}
<img
src={connUser.avatar}
alt={connUser.name}
className="w-12 h-12 rounded-full object-cover border border-slate-700"
/>
) : (
@@ -1575,11 +1571,10 @@ return (
<h4 className="text-sm font-bold text-white truncate">{connUser.name}</h4>
<p className="text-[10px] text-slate-400 truncate">{connUser.email}</p>
<div className="mt-1.5 flex items-center gap-1.5">
<span className={`px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-wider border ${
conn.type === 'FAMILY'
? 'bg-rose-950/40 text-rose-300 border-rose-900/50'
<span className={`px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-wider border ${conn.type === 'FAMILY'
? 'bg-rose-950/40 text-rose-300 border-rose-900/50'
: 'bg-indigo-950/40 text-indigo-300 border-indigo-900/50'
}`}>
}`}>
{conn.type === 'FAMILY' ? t('familyGroup') : t('friends')}
</span>
</div>
@@ -1661,15 +1656,15 @@ return (
const statusText = getConnectionStatusText(usr.id);
return (
<div
<div
key={usr.id}
className="bg-slate-900/40 border border-slate-800/60 rounded-2xl p-4 flex items-center justify-between hover:bg-slate-900/60 transition-all"
>
<div className="flex items-center gap-3">
{usr.avatar ? (
<img
src={usr.avatar}
alt={usr.name}
<img
src={usr.avatar}
alt={usr.name}
className="w-10 h-10 rounded-full object-cover"
/>
) : (
@@ -1683,11 +1678,10 @@ return (
<div>
{statusText ? (
<span className={`px-3 py-1 rounded-lg text-xs font-bold border ${
statusText === t('friends') || statusText === t('familyGroup')
<span className={`px-3 py-1 rounded-lg text-xs font-bold border ${statusText === t('friends') || statusText === t('familyGroup')
? 'bg-emerald-950/30 border-emerald-900/50 text-emerald-300'
: 'bg-slate-800/80 border-slate-700 text-slate-400'
}`}>
}`}>
{statusText}
</span>
) : (
@@ -1724,15 +1718,15 @@ return (
) : (
<div className="flex flex-col gap-3">
{receivedRequests.map((req) => (
<div
<div
key={req.id}
className="bg-slate-900/50 border border-slate-800/60 rounded-2xl p-4 flex items-center justify-between"
>
<div className="flex items-center gap-3">
{req.requester?.avatar ? (
<img
src={req.requester.avatar}
alt={req.requester.name}
<img
src={req.requester.avatar}
alt={req.requester.name}
className="w-10 h-10 rounded-full object-cover"
/>
) : (
@@ -1778,15 +1772,15 @@ return (
) : (
<div className="flex flex-col gap-3">
{sentRequests.map((req) => (
<div
<div
key={req.id}
className="bg-slate-900/50 border border-slate-800/60 rounded-2xl p-4 flex items-center justify-between"
>
<div className="flex items-center gap-3">
{req.receiver?.avatar ? (
<img
src={req.receiver.avatar}
alt={req.receiver.name}
<img
src={req.receiver.avatar}
alt={req.receiver.name}
className="w-10 h-10 rounded-full object-cover"
/>
) : (
@@ -1822,17 +1816,17 @@ return (
</div>
)}
{/* TAB 4: REALTIME CHAT */}
{activeTab === 'chats' && (
<div className="flex flex-col h-[100dvh] md:h-auto w-full bg-slate-900/40 border-0 md:border border-slate-800/80 md:rounded-3xl overflow-hidden flex animate-in fade-in slide-in-from-bottom-2 duration-300">
{/* TAB 4: REALTIME CHAT */}
{activeTab === 'chats' && (
<div className="flex flex-col h-[100dvh] md:h-auto w-full bg-slate-900/40 border-0 md:border border-slate-800/80 md:rounded-3xl overflow-hidden flex animate-in fade-in slide-in-from-bottom-2 duration-300">
{/* Chats List sidebar: show if not mobile OR if mobile and no active chat user */}
{(!isMobile || !activeChatUser) && (
<div className={`${isMobile ? 'w-full' : 'w-72 border-r border-slate-800/60'} bg-slate-950/25 flex flex-col shrink-0`}>
<div className="p-4 border-b border-slate-800/60">
<h3 className="text-xs font-black uppercase text-slate-400 tracking-wider">Chọn người hội thoại</h3>
</div>
<div className="flex-1 overflow-y-auto p-2 flex flex-col gap-1">
{connections.length === 0 ? (
<div className="text-center py-8 text-xs text-slate-500 italic px-4">
@@ -1847,16 +1841,15 @@ return (
<button
key={conn.id}
onClick={() => handleSelectChatUser(connUser)}
className={`w-full p-3 rounded-xl flex items-center gap-3 transition-all text-left ${
isActive
? 'bg-indigo-650 text-white shadow-md'
className={`w-full p-3 rounded-xl flex items-center gap-3 transition-all text-left ${isActive
? 'bg-indigo-650 text-white shadow-md'
: 'text-slate-350 hover:bg-slate-850/40 hover:text-slate-100'
}`}
}`}
>
{connUser.avatar ? (
<img
src={connUser.avatar}
alt={connUser.name}
<img
src={connUser.avatar}
alt={connUser.name}
className={`w-10 h-10 rounded-full object-cover ${isActive ? 'border-2 border-white' : 'border border-slate-700'}`}
/>
) : (
@@ -1902,9 +1895,9 @@ return (
</button>
)}
{activeChatUser.avatar ? (
<img
src={activeChatUser.avatar}
alt={activeChatUser.name}
<img
src={activeChatUser.avatar}
alt={activeChatUser.name}
className="w-10 h-10 rounded-full object-cover border border-indigo-500"
/>
) : (
@@ -1931,20 +1924,19 @@ return (
chatMessages.map((msg) => {
const isMe = msg.senderId === user.id;
return (
<div
<div
key={msg.id}
className={`flex flex-col max-w-[70%] ${isMe ? 'self-end items-end' : 'self-start items-start'}`}
>
<div className={`p-3.5 rounded-2xl text-xs font-medium leading-relaxed flex flex-col gap-1.5 relative group ${
isMe
? 'bg-indigo-650 text-white rounded-br-none shadow-md shadow-indigo-950/20'
<div className={`p-3.5 rounded-2xl text-xs font-medium leading-relaxed flex flex-col gap-1.5 relative group ${isMe
? 'bg-indigo-650 text-white rounded-br-none shadow-md shadow-indigo-950/20'
: 'bg-slate-800 text-slate-200 rounded-bl-none border border-slate-700/60'
}`}>
}`}>
{msg.attachmentUrl && (
<div className="relative rounded-lg overflow-hidden border border-black/10 max-w-xs group/img">
<img
src={msg.attachmentUrl}
alt="Đính kèm"
<img
src={msg.attachmentUrl}
alt="Đính kèm"
className="w-full max-h-48 object-cover hover:brightness-95 transition-all"
/>
<button
@@ -1959,15 +1951,14 @@ return (
)}
{msg.latitude !== undefined && msg.latitude !== null && (
<a
<a
href={`https://www.google.com/maps/search/?api=1&query=${msg.latitude},${msg.longitude}`}
target="_blank"
rel="noopener noreferrer"
className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-[11px] font-bold transition-all border ${
isMe
? 'bg-indigo-750 border-indigo-750/30 text-indigo-100 hover:bg-indigo-800'
className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-[11px] font-bold transition-all border ${isMe
? 'bg-indigo-750 border-indigo-750/30 text-indigo-100 hover:bg-indigo-800'
: 'bg-slate-900/60 border-slate-800/80 text-slate-200 hover:bg-slate-900'
}`}
}`}
>
<MapPin className="w-3.5 h-3.5 text-rose-500 shrink-0 animate-bounce" />
<div className="flex flex-col text-left">
@@ -2024,11 +2015,11 @@ return (
)}
{/* Chat Input form */}
<form
<form
onSubmit={handleSendMessage}
className="p-4 border-t border-slate-800/80 bg-slate-900/60 flex gap-2 items-center"
>
<input
<input
type="file"
accept="image/*"
ref={fileInputRef}
@@ -2055,9 +2046,8 @@ return (
type="button"
onClick={handleGetLocation}
disabled={isLocating}
className={`p-3 bg-slate-900 border border-slate-800 hover:bg-slate-855 text-slate-400 hover:text-white rounded-2xl transition-all shadow-sm active:scale-95 flex items-center justify-center shrink-0 ${
isLocating ? 'animate-pulse' : ''
}`}
className={`p-3 bg-slate-900 border border-slate-800 hover:bg-slate-855 text-slate-400 hover:text-white rounded-2xl transition-all shadow-sm active:scale-95 flex items-center justify-center shrink-0 ${isLocating ? 'animate-pulse' : ''
}`}
title="Chia sẻ vị trí GPS hiện tại"
>
{isLocating ? (
@@ -2099,128 +2089,128 @@ return (
</div>
)}
{/* Emergency Share Configuration Modal */}
{sharingTour && (
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-300">
<div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[32px] overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
{/* Modal Header */}
<div className="p-6 border-b border-slate-800/80 flex items-center justify-between">
<div className="flex items-center gap-3 text-rose-500">
<ShieldAlert className="w-6 h-6 animate-pulse" />
<h3 className="text-lg font-black uppercase tracking-tight text-white">{t('emergencyShare')}</h3>
</div>
<button
onClick={() => setSharingTour(null)}
className="p-2 hover:bg-slate-800 rounded-xl text-slate-400 hover:text-white transition-all active:scale-95"
>
<X className="w-5 h-5" />
</button>
</div>
{/* Modal Body */}
<div className="p-6 space-y-6">
<div>
<h4 className="text-sm font-bold text-white mb-1">{sharingTour.title}</h4>
<p className="text-xs text-slate-450 leading-relaxed">{t('emergencyShareTooltip')}</p>
</div>
{loadingShare ? (
<div className="py-8 flex flex-col items-center justify-center gap-2">
<Loader2 className="w-8 h-8 text-rose-500 animate-spin" />
<span className="text-xs text-slate-500 font-bold">{t('loading')}</span>
</div>
) : (
<>
{/* Share Activation Toggle */}
<div className="bg-slate-950/40 border border-slate-800/60 p-4 rounded-2xl flex items-center justify-between">
<div>
<span className="text-xs font-bold text-slate-300">Kích hoạt đường dẫn cứu hộ</span>
{/* Emergency Share Configuration Modal */}
{sharingTour && (
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-300">
<div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[32px] overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
{/* Modal Header */}
<div className="p-6 border-b border-slate-800/80 flex items-center justify-between">
<div className="flex items-center gap-3 text-rose-500">
<ShieldAlert className="w-6 h-6 animate-pulse" />
<h3 className="text-lg font-black uppercase tracking-tight text-white">{t('emergencyShare')}</h3>
</div>
{shareStatus && (
<label className="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
checked={shareStatus.isEnabled}
onChange={(e) => handleToggleShare(e.target.checked)}
className="sr-only peer"
/>
<div className="w-11 h-6 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-rose-600"></div>
</label>
<button
onClick={() => setSharingTour(null)}
className="p-2 hover:bg-slate-800 rounded-xl text-slate-400 hover:text-white transition-all active:scale-95"
>
<X className="w-5 h-5" />
</button>
</div>
{/* Modal Body */}
<div className="p-6 space-y-6">
<div>
<h4 className="text-sm font-bold text-white mb-1">{sharingTour.title}</h4>
<p className="text-xs text-slate-450 leading-relaxed">{t('emergencyShareTooltip')}</p>
</div>
{loadingShare ? (
<div className="py-8 flex flex-col items-center justify-center gap-2">
<Loader2 className="w-8 h-8 text-rose-500 animate-spin" />
<span className="text-xs text-slate-500 font-bold">{t('loading')}</span>
</div>
) : (
<>
{/* Share Activation Toggle */}
<div className="bg-slate-950/40 border border-slate-800/60 p-4 rounded-2xl flex items-center justify-between">
<div>
<span className="text-xs font-bold text-slate-300">Kích hoạt đường dẫn cứu hộ</span>
</div>
{shareStatus && (
<label className="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
checked={shareStatus.isEnabled}
onChange={(e) => handleToggleShare(e.target.checked)}
className="sr-only peer"
/>
<div className="w-11 h-6 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-rose-600"></div>
</label>
)}
</div>
{shareStatus?.isEnabled && (
<>
{/* Configuration: Language and Theme selectors */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">{t('languageSelect')}</label>
<select
value={lang}
onChange={(e) => changeLanguage(e.target.value as any)}
className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2.5 text-xs font-bold focus:outline-none cursor-pointer"
>
<option value="vi">Tiếng Việt</option>
<option value="en">English</option>
<option value="zh">中文</option>
</select>
</div>
<div className="space-y-2">
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">{t('themeSelect')}</label>
<select
value={theme}
onChange={(e) => changeTheme(e.target.value as any)}
className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2.5 text-xs font-bold focus:outline-none cursor-pointer"
>
<option value="light">{t('themeLight')}</option>
<option value="dark">{t('themeDark')}</option>
<option value="system">{t('themeSystem')}</option>
</select>
</div>
</div>
{/* Shareable Link Input with Copy button */}
<div className="bg-rose-950/10 border border-rose-950/20 p-4 rounded-2xl space-y-2">
<div className="text-[10px] font-black text-rose-400 uppercase tracking-widest">Đường dẫn khẩn cấp:</div>
<div className="flex items-center gap-2">
<input
type="text"
readOnly
value={`${window.location.origin}/journey/${shareStatus.token}?lang=${lang}&theme=${theme}`}
className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5 text-xs text-slate-200 select-all outline-none"
/>
<button
type="button"
onClick={() => {
navigator.clipboard.writeText(`${window.location.origin}/journey/${shareStatus.token}?lang=${lang}&theme=${theme}`);
notify({ title: 'Thành công', message: 'Đã sao chép liên kết!', type: 'success' });
}}
className="bg-rose-600 hover:bg-rose-700 text-white font-bold px-4 py-2.5 rounded-xl text-xs transition-all active:scale-95 shrink-0"
>
{t('copyShareLink')}
</button>
</div>
</div>
</>
)}
</>
)}
</div>
{shareStatus?.isEnabled && (
<>
{/* Configuration: Language and Theme selectors */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">{t('languageSelect')}</label>
<select
value={lang}
onChange={(e) => changeLanguage(e.target.value as any)}
className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2.5 text-xs font-bold focus:outline-none cursor-pointer"
>
<option value="vi">Tiếng Việt</option>
<option value="en">English</option>
<option value="zh">中文</option>
</select>
</div>
<div className="space-y-2">
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">{t('themeSelect')}</label>
<select
value={theme}
onChange={(e) => changeTheme(e.target.value as any)}
className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2.5 text-xs font-bold focus:outline-none cursor-pointer"
>
<option value="light">{t('themeLight')}</option>
<option value="dark">{t('themeDark')}</option>
<option value="system">{t('themeSystem')}</option>
</select>
</div>
</div>
{/* Shareable Link Input with Copy button */}
<div className="bg-rose-950/10 border border-rose-950/20 p-4 rounded-2xl space-y-2">
<div className="text-[10px] font-black text-rose-400 uppercase tracking-widest">Đường dẫn khẩn cấp:</div>
<div className="flex items-center gap-2">
<input
type="text"
readOnly
value={`${window.location.origin}/journey/${shareStatus.token}?lang=${lang}&theme=${theme}`}
className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5 text-xs text-slate-200 select-all outline-none"
/>
<button
type="button"
onClick={() => {
navigator.clipboard.writeText(`${window.location.origin}/journey/${shareStatus.token}?lang=${lang}&theme=${theme}`);
notify({ title: 'Thành công', message: 'Đã sao chép liên kết!', type: 'success' });
}}
className="bg-rose-600 hover:bg-rose-700 text-white font-bold px-4 py-2.5 rounded-xl text-xs transition-all active:scale-95 shrink-0"
>
{t('copyShareLink')}
</button>
</div>
</div>
</>
)}
</>
)}
</div>
{/* Modal Footer */}
<div className="p-6 bg-slate-950/20 border-t border-slate-800/80 flex justify-end">
<button
type="button"
onClick={() => setSharingTour(null)}
className="py-2.5 px-6 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-xl text-xs transition-all active:scale-95"
>
Đóng
</button>
</div>
</div>
</div>
)}
{/* Modal Footer */}
<div className="p-6 bg-slate-950/20 border-t border-slate-800/80 flex justify-end">
<button
type="button"
onClick={() => setSharingTour(null)}
className="py-2.5 px-6 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-xl text-xs transition-all active:scale-95"
>
Đóng
</button>
</div>
</div>
</div>
)}
</div>
</main>