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

fix: thêm thành viên ngoài hệ thống vào Tour

Browse Source
This commit is contained in:
3dtours
2026-06-20 17:56:56 +07:00
parent ae97f061e8
commit 52706cab7d
17 changed files with 533 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/change-owner.js
+39
View File
@@ -0,0 +1,39 @@
const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();
async function main() {
const tourId = '84d84c21-c12b-4a18-9655-043c85f5c0c5';
const ownerUserId = '5b2053bb-f523-4a11-817c-f47fef7322bb'; // owner@travel.com
// Check if owner@travel.com is already a participant
const existing = await prisma.tourParticipant.findFirst({
where: { tourId, userId: ownerUserId }
});
if (existing) {
await prisma.tourParticipant.update({
where: { id: existing.id },
data: { role: 'OWNER' }
});
console.log('Updated existing participant to OWNER');
} else {
// Demote current owner to MEMBER or just keep them
const result = await prisma.tourParticipant.create({
data: {
tourId,
userId: ownerUserId,
role: 'OWNER'
}
});
console.log('Created new OWNER participant:', result);
}
// Update tour createdById to ownerUserId
await prisma.tour.update({
where: { id: tourId },
data: { createdById: ownerUserId }
});
console.log('Updated tour creator to owner@travel.com');
}
main().catch(console.error).finally(() => prisma.$disconnect());
backend/dist/src/main.js
Vendored
+74 -12
View File
@@ -555,7 +555,7 @@ let TourController = class TourController {
this.cacheManager = cacheManager;
}
async createTour(body, req) {
const { title, description, startDate, endDate, adultCount, childCount, childDiscount, tags } = body;
const { title, description, startDate, endDate, adultCount, childCount, childDiscount, tags, members } = body;
const tour = await this.prisma.tour.create({
data: {
title,
@@ -568,10 +568,19 @@ let TourController = class TourController {
childDiscount: childDiscount || 0,
createdById: req.user.id,
participants: {
create: {
create: [
{
userId: req.user.id,
role: 'OWNER'
}
},
...(members && Array.isArray(members)
? members.map((m) => ({
userId: m.userId || null,
displayName: m.displayName || null,
role: m.role || 'MEMBER'
}))
: [])
]
},
legs: {
create: {
@@ -610,6 +619,13 @@ let TourController = class TourController {
}
}).then(async (loc) => {
if (body.expenseAmount && Number(body.expenseAmount) > 0) {
let paidById = body.paidById || null;
if (paidById) {
const userExists = await this.prisma.user.findUnique({ where: { id: paidById } });
if (!userExists) {
paidById = null;
}
}
await this.prisma.expense.create({
data: {
amount: Number(body.expenseAmount),
@@ -618,7 +634,7 @@ let TourController = class TourController {
legId: loc.legId,
description: body.expenseDescription || `Chi phí tại ${loc.name}`,
note: body.expenseNote || null,
paidById: body.paidById || null,
paidById,
}
});
}
@@ -794,8 +810,10 @@ let TourController = class TourController {
if (!tour)
throw new common_1.NotFoundException('Không tìm thấy tour');
for (const participant of tour.participants) {
if (participant.userId) {
await this.cacheManager.del(`user-role:${participant.userId}:${id}`);
}
}
await this.cacheManager.del(`res-to-tour:${id}`);
for (const leg of tour.legs) {
await this.cacheManager.del(`res-to-tour:${leg.id}`);
@@ -898,6 +916,25 @@ let TourController = class TourController {
async addMember(tourId, body, req) {
const validRoles = ['OWNER', 'MANAGER', 'MEMBER', 'MEMBER_NO_FINANCE', 'VIEWER_ONLY'];
const role = validRoles.includes(body.role) ? body.role : 'MEMBER';
if (body.displayName) {
const participation = await this.prisma.tourParticipant.create({
data: {
tourId,
role,
displayName: body.displayName,
},
include: { user: { select: { id: true, name: true, email: true } } },
});
await Promise.all([
this.cacheManager.del(tourId),
this.cacheManager.del(`/api/v1/tours/${tourId}`),
this.cacheManager.del(`/api/v1/tours/${tourId}/public`),
]);
return participation;
}
if (!body.userId) {
throw new common_1.BadRequestException('Vui lòng cung cấp userId hoặc displayName');
}
await this.cacheManager.del(`user-role:${body.userId}:${tourId}`);
const participation = await this.prisma.tourParticipant.findUnique({
where: { tourId_userId: { tourId, userId: body.userId } },
@@ -941,7 +978,18 @@ let TourController = class TourController {
});
}
async updateMemberCounts(tourId, userId, body, req) {
const isSelf = req.user.id === userId;
const participant = await this.prisma.tourParticipant.findFirst({
where: {
OR: [
{ id: userId },
{ tourId, userId }
]
}
});
if (!participant) {
throw new common_1.NotFoundException('Không tìm thấy thành viên trong tour.');
}
const isSelf = req.user.id === participant.userId;
const requesterParticipation = await this.prisma.tourParticipant.findUnique({
where: { tourId_userId: { tourId, userId: req.user.id } },
});
@@ -966,14 +1014,16 @@ let TourController = class TourController {
data.role = body.role;
}
}
if (participant.userId) {
await this.cacheManager.del(`user-role:${participant.userId}:${tourId}`);
}
await Promise.all([
this.cacheManager.del(`user-role:${userId}:${tourId}`),
this.cacheManager.del(tourId),
this.cacheManager.del(`/api/v1/tours/${tourId}`),
this.cacheManager.del(`/api/v1/tours/${tourId}/public`),
]);
return this.prisma.tourParticipant.update({
where: { tourId_userId: { tourId, userId } },
where: { id: participant.id },
data,
include: { user: { select: { id: true, name: true, email: true } } },
});
@@ -1090,15 +1140,27 @@ let TourController = class TourController {
return { success: true, message: 'Đã từ chối yêu cầu tham gia.' };
}
async removeMember(tourId, userId) {
const participation = await this.prisma.tourParticipant.findUnique({
where: { tourId_userId: { tourId, userId } },
const participant = await this.prisma.tourParticipant.findFirst({
where: {
OR: [
{ id: userId },
{ tourId, userId }
]
}
});
if (!participation) {
if (!participant) {
throw new common_1.NotFoundException('Thành viên này không có trong tour');
}
await this.cacheManager.del(`user-role:${userId}:${tourId}`);
if (participant.userId) {
await this.cacheManager.del(`user-role:${participant.userId}:${tourId}`);
}
await Promise.all([
this.cacheManager.del(tourId),
this.cacheManager.del(`/api/v1/tours/${tourId}`),
this.cacheManager.del(`/api/v1/tours/${tourId}/public`),
]);
await this.prisma.tourParticipant.delete({
where: { tourId_userId: { tourId, userId } },
where: { id: participant.id },
});
return { message: 'Đã xóa thành viên khỏi tour' };
}
backend/dist/src/main.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
backend/prisma/migrations/20260620100240_make_participant_id_primary/migration.sql
+22
View File
@@ -0,0 +1,22 @@
/*
Warnings:
- The primary key for the `TourParticipant` table will be changed. If it partially fails, the table could be left without primary key constraint.
- A unique constraint covering the columns `[tourId,userId]` on the table `TourParticipant` will be added. If there are existing duplicate values, this will fail.
- The required column `id` was added to the `TourParticipant` table with a prisma-level default value. This is not possible if the table is not empty. Please add this column as optional, then populate it before making it required.
*/
-- AlterTable
ALTER TABLE "TourParticipant" DROP CONSTRAINT "TourParticipant_pkey",
ADD COLUMN "displayName" TEXT,
ADD COLUMN "id" TEXT;
UPDATE "TourParticipant" SET "id" = md5(random()::text);
ALTER TABLE "TourParticipant" ALTER COLUMN "id" SET NOT NULL,
ALTER COLUMN "userId" DROP NOT NULL;
ALTER TABLE "TourParticipant" ADD CONSTRAINT "TourParticipant_pkey" PRIMARY KEY ("id");
-- CreateIndex
CREATE UNIQUE INDEX "TourParticipant_tourId_userId_key" ON "TourParticipant"("tourId", "userId");
backend/src/main.ts
+78 -13
View File
@@ -531,7 +531,7 @@ class TourController {
@UseGuards(JwtAuthGuard)
@Post()
async createTour(@Body() body: any, @Req() req: any) {
const { title, description, startDate, endDate, adultCount, childCount, childDiscount, tags } = body;
const { title, description, startDate, endDate, adultCount, childCount, childDiscount, tags, members } = body;
const tour = await this.prisma.tour.create({
data: {
title,
@@ -544,10 +544,19 @@ class TourController {
childDiscount: childDiscount || 0,
createdById: req.user.id,
participants: {
create: {
create: [
{
userId: req.user.id,
role: 'OWNER'
}
},
...(members && Array.isArray(members)
? members.map((m: any) => ({
userId: m.userId || null,
displayName: m.displayName || null,
role: m.role || 'MEMBER'
}))
: [])
]
},
legs: {
create: {
@@ -594,6 +603,13 @@ class TourController {
}
}).then(async (loc) => {
if (body.expenseAmount && Number(body.expenseAmount) > 0) {
let paidById = body.paidById || null;
if (paidById) {
const userExists = await this.prisma.user.findUnique({ where: { id: paidById } });
if (!userExists) {
paidById = null;
}
}
await this.prisma.expense.create({
data: {
amount: Number(body.expenseAmount),
@@ -602,7 +618,7 @@ class TourController {
legId: loc.legId,
description: body.expenseDescription || `Chi phí tại ${loc.name}`,
note: body.expenseNote || null,
paidById: body.paidById || null,
paidById,
}
});
}
@@ -832,8 +848,10 @@ class TourController {
// --- BẮT ĐẦU DỌN DẸP CACHE ---
// a. Xóa cache vai trò của tất cả thành viên trong tour này
for (const participant of tour.participants) {
if (participant.userId) {
await this.cacheManager.del(`user-role:${participant.userId}:${id}`);
}
}
// b. Xóa cache mapping tài nguyên (Leg, Location, Photo) về Tour này
await this.cacheManager.del(`res-to-tour:${id}`); // Bản thân tour
@@ -961,10 +979,31 @@ class TourController {
@Roles(ParticipantRole.OWNER, ParticipantRole.MANAGER) // Only owner/manager can add members
@UseGuards(JwtAuthGuard, TourRoleGuard)
@Post(':tourId/members')
async addMember(@Param('tourId', ParseUUIDPipe) tourId: string, @Body() body: { userId: string; role?: string }, @Req() req: any) {
async addMember(@Param('tourId', ParseUUIDPipe) tourId: string, @Body() body: { userId?: string; displayName?: string; role?: string }, @Req() req: any) {
const validRoles = ['OWNER', 'MANAGER', 'MEMBER', 'MEMBER_NO_FINANCE', 'VIEWER_ONLY'] as const;
const role = validRoles.includes(body.role as any) ? body.role as 'OWNER' | 'MANAGER' | 'MEMBER' | 'MEMBER_NO_FINANCE' | 'VIEWER_ONLY' : 'MEMBER';
if (body.displayName) {
const participation = await this.prisma.tourParticipant.create({
data: {
tourId,
role,
displayName: body.displayName,
},
include: { user: { select: { id: true, name: true, email: true } } },
});
await Promise.all([
this.cacheManager.del(tourId),
this.cacheManager.del(`/api/v1/tours/${tourId}`),
this.cacheManager.del(`/api/v1/tours/${tourId}/public`),
]);
return participation;
}
if (!body.userId) {
throw new BadRequestException('Vui lòng cung cấp userId hoặc displayName');
}
// Xóa cache khi thay đổi quyền hạn hoặc thêm thành viên mới
await this.cacheManager.del(`user-role:${body.userId}:${tourId}`);
@@ -1021,7 +1060,19 @@ class TourController {
@Body() body: { adultCount?: number; childCount?: number; role?: string },
@Req() req: any
) {
const isSelf = req.user.id === userId;
const participant = await this.prisma.tourParticipant.findFirst({
where: {
OR: [
{ id: userId },
{ tourId, userId }
]
}
});
if (!participant) {
throw new NotFoundException('Không tìm thấy thành viên trong tour.');
}
const isSelf = req.user.id === participant.userId;
// Tìm quyền hạn của người gửi yêu cầu trong tour này
const requesterParticipation = await this.prisma.tourParticipant.findUnique({
@@ -1050,15 +1101,17 @@ class TourController {
}
// Xóa cache liên quan
if (participant.userId) {
await this.cacheManager.del(`user-role:${participant.userId}:${tourId}`);
}
await Promise.all([
this.cacheManager.del(`user-role:${userId}:${tourId}`),
this.cacheManager.del(tourId),
this.cacheManager.del(`/api/v1/tours/${tourId}`),
this.cacheManager.del(`/api/v1/tours/${tourId}/public`),
]);
return this.prisma.tourParticipant.update({
where: { tourId_userId: { tourId, userId } },
where: { id: participant.id },
data,
include: { user: { select: { id: true, name: true, email: true } } },
});
@@ -1208,17 +1261,29 @@ class TourController {
@UseGuards(JwtAuthGuard, TourRoleGuard)
@Delete(':tourId/members/:userId')
async removeMember(@Param('tourId', ParseUUIDPipe) tourId: string, @Param('userId', ParseUUIDPipe) userId: string) {
const participation = await this.prisma.tourParticipant.findUnique({
where: { tourId_userId: { tourId, userId } },
const participant = await this.prisma.tourParticipant.findFirst({
where: {
OR: [
{ id: userId },
{ tourId, userId }
]
}
});
if (!participation) {
if (!participant) {
throw new NotFoundException('Thành viên này không có trong tour');
}
await this.cacheManager.del(`user-role:${userId}:${tourId}`);
if (participant.userId) {
await this.cacheManager.del(`user-role:${participant.userId}:${tourId}`);
}
await Promise.all([
this.cacheManager.del(tourId),
this.cacheManager.del(`/api/v1/tours/${tourId}`),
this.cacheManager.del(`/api/v1/tours/${tourId}/public`),
]);
await this.prisma.tourParticipant.delete({
where: { tourId_userId: { tourId, userId } },
where: { id: participant.id },
});
return { message: 'Đã xóa thành viên khỏi tour' };
}
backend/test-add-manual.js
+28
View File
@@ -0,0 +1,28 @@
async function test() {
const loginRes = await fetch('http://localhost:3001/api/v1/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: 'owner@travel.com', password: '123456' })
});
const loginData = await loginRes.json();
if (loginRes.ok) {
const token = loginData.access_token;
const tourId = '84d84c21-c12b-4a18-9655-043c85f5c0c5'; // Tour ID from seed
const res = await fetch(`http://localhost:3001/api/v1/tours/${tourId}/members`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({ displayName: 'Offline Member X', role: 'MEMBER' })
});
console.log('Add status:', res.status);
const data = await res.json();
console.log('Add response:', data);
} else {
console.error('Login failed:', loginData);
}
}
test().catch(console.error);
backend/test-db.js
+14
View File
@@ -0,0 +1,14 @@
const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();
async function main() {
const users = await prisma.user.findMany();
console.log('--- Users in DB ---');
console.log(users);
const participants = await prisma.tourParticipant.findMany();
console.log('--- Tour Participants in DB ---');
console.log(participants);
}
main().catch(console.error).finally(() => prisma.$disconnect());
backend/test-find-tours.js
+17
View File
@@ -0,0 +1,17 @@
const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();
async function main() {
const tours = await prisma.tour.findMany({
include: {
participants: {
include: {
user: { select: { email: true, name: true } }
}
}
}
});
console.log(JSON.stringify(tours, null, 2));
}
main().finally(() => prisma.$disconnect());
backend/test-manual.js
+36
View File
@@ -0,0 +1,36 @@
const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();
async function main() {
const tourId = '84d84c21-c12b-4a18-9655-043c85f5c0c5'; // Use existing tour ID from seed
console.log('Inserting first manual member...');
try {
const p1 = await prisma.tourParticipant.create({
data: {
tourId,
role: 'MEMBER',
displayName: 'Manual Member 1'
}
});
console.log('Inserted:', p1);
} catch (err) {
console.error('Failed to insert first:', err);
}
console.log('Inserting second manual member...');
try {
const p2 = await prisma.tourParticipant.create({
data: {
tourId,
role: 'MEMBER',
displayName: 'Manual Member 2'
}
});
console.log('Inserted:', p2);
} catch (err) {
console.error('Failed to insert second:', err);
}
}
main().catch(console.error).finally(() => prisma.$disconnect());
backend/test-search.js
+22
View File
@@ -0,0 +1,22 @@
async function test() {
const loginRes = await fetch('http://localhost:3001/api/v1/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: 'photomember@travel.com', password: '123456' })
});
const loginData = await loginRes.json();
if (loginRes.ok) {
const token = loginData.access_token;
const usersRes = await fetch('http://localhost:3001/api/v1/users?q=owner@travel.com', {
headers: { 'Authorization': `Bearer ${token}` }
});
console.log('Users status:', usersRes.status);
const usersData = await usersRes.json();
console.log('Users data:', usersData);
} else {
console.error('Login failed:', loginData);
}
}
test().catch(console.error);
frontend/public/tempBase64.code
+1
View File
File diff suppressed because one or more lines are too long
frontend/src/components/AddLocationModal.tsx
+3 -3
View File
@@ -498,12 +498,12 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
<select className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm"
value={formData.paidById} onChange={e => setFormData({...formData, paidById: e.target.value})}>
<option value="">-- Chọn người thanh toán --</option>
{currentTour?.participants?.filter((p: any) => p.user)?.map((p: any) => {
const name = p.user?.name;
{currentTour?.participants?.filter((p: any) => p.user || p.displayName)?.map((p: any) => {
const name = p.user?.name || p.displayName;
const email = p.user?.email;
const label = [name, email && name ? `(${email})` : email].filter(Boolean).join(' ');
return (
<option key={p.userId} value={p.userId}>{label || p.userId}</option>
<option key={p.id} value={p.userId || p.id}>{label || p.userId || p.id}</option>
);
})}
</select>
frontend/src/components/AddMemberModal.tsx
+61 -12
View File
@@ -1,5 +1,5 @@
import React, { useState, useEffect, useMemo } from 'react';
import { X, Search, UserPlus, Loader2, Shield, Trash2, Clock, Check } from 'lucide-react';
import { X, Search, UserPlus, Loader2, Shield, Trash2, Clock } from 'lucide-react';
import { useConfirm } from '@/hooks/useConfirm';
import { useNotification } from '@/hooks/useNotification';
@@ -7,7 +7,7 @@ interface AddMemberModalProps {
isOpen: boolean;
onClose: () => void;
tourId: string;
participants?: Array<{ userId: string; role: string; user?: { id: string; name: string; email: string } }>;
participants?: Array<{ id: string; userId?: string | null; role: string; displayName?: string | null; user?: { id: string; name: string; email: string } | null }>;
joinRequests?: Array<{ id: string; userId: string; user?: { id: string; name: string; email: string }; status: string; requestedById: string }>;
onRemoveMember?: (userId: string) => Promise<void>;
onMemberAdded?: () => void;
@@ -29,12 +29,39 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
const confirm = useConfirm();
const notify = useNotification();
const participantIds = useMemo(() => new Set(participants.map((p) => p.userId)), [participants]);
const participantIds = useMemo(() => new Set(participants.map((p) => p.userId).filter(Boolean) as string[]), [participants]);
const requestUserIds = useMemo(() => new Set(joinRequests.map((r) => (r as any).userId)), [joinRequests]);
const visibleUsers = useMemo(() => users.filter((u) => !participantIds.has(u.id)), [users, participantIds]);
const canCreateDirectly = !userRole || userRole === 'OWNER' || userRole === 'MANAGER';
const handleManualAdd = async () => {
const name = query.trim();
if (!name) return;
setSubmitting(true);
setSubmitError('');
try {
const res = await fetch(`/api/v1/tours/${tourId}/members`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`,
},
body: JSON.stringify({ displayName: name, role }),
});
if (!res.ok) {
const data = await res.json();
throw new Error(data.message || data.error || 'Thao tác thất bại');
}
await onMemberAdded?.();
onClose();
} catch (err: any) {
setSubmitError(err.message || 'Thao tác thất bại');
} finally {
setSubmitting(false);
}
};
const fetchUsers = async () => {
setLoading(true);
setFetchError('');
@@ -87,7 +114,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
}
};
const handleRequestAction = async (reqId: string, action: 'accept' | 'reject', userName: string) => {
const handleRequestAction = async (reqId: string, action: 'accept' | 'reject') => {
if (!onMemberAdded) return;
setActionLoading(reqId);
try {
@@ -162,9 +189,9 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
<div className="p-5 space-y-4">
<div>
<p className="text-[11px] font-bold text-gray-500 mb-2">Thành viên của tour ({participants.filter(p => p.user).length})</p>
<p className="text-[11px] font-bold text-gray-500 mb-2">Thành viên của tour ({participants.filter(p => p.user || p.displayName).length})</p>
<div className="flex flex-wrap gap-3">
{participants.filter(p => p.user).map((p) => {
{participants.filter(p => p.user || p.displayName).map((p) => {
const rawToken = localStorage.getItem('token');
let currentUserId: string | null = null;
try {
@@ -176,15 +203,16 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
const isCurrentUser = currentUserId && p.userId === currentUserId;
const isOwner = p.role === 'OWNER';
const canRemove = onRemoveMember && !isCurrentUser && !isOwner;
const memberName = p.user?.name || p.displayName || p.userId || 'Thành viên';
return (
<div key={p.userId} className="flex flex-col items-center gap-1">
<div key={p.id} className="flex flex-col items-center gap-1">
<div className="relative">
<div className="w-10 h-10 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold text-sm overflow-hidden">
{p.user?.name?.charAt(0) || '?'}
{memberName.charAt(0)}
</div>
{canRemove && (
<button
onClick={() => handleRemove(p.userId, p.user?.name || p.userId)}
onClick={() => handleRemove(p.userId || p.id, memberName)}
className="absolute -top-1 -right-1 w-4 h-4 bg-gray-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white"
aria-label="Remove item"
>
@@ -192,7 +220,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
</button>
)}
</div>
<span className="text-[10px] font-semibold text-gray-700 max-w-[72px] truncate">{p.user?.name || p.userId}</span>
<span className="text-[10px] font-semibold text-gray-700 max-w-[72px] truncate">{memberName}</span>
</div>
);
})}
@@ -217,7 +245,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
<button
type="button"
disabled={actionLoading === req.id}
onClick={() => handleRequestAction(req.id, 'accept', req.user?.name || req.userId)}
onClick={() => handleRequestAction(req.id, 'accept')}
className="w-4 h-4 bg-green-500 hover:bg-green-600 rounded-full flex items-center justify-center text-white text-[10px] leading-none disabled:opacity-50"
aria-label="Accept"
>
@@ -226,7 +254,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
<button
type="button"
disabled={actionLoading === req.id}
onClick={() => handleRequestAction(req.id, 'reject', req.user?.name || req.userId)}
onClick={() => handleRequestAction(req.id, 'reject')}
className="w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white text-[10px] leading-none disabled:opacity-50 -ml-1"
aria-label="Reject"
>
@@ -293,6 +321,27 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
<div className="flex justify-center py-10"><Loader2 className="w-8 h-8 animate-spin text-blue-600" /></div>
) : (
<div className="space-y-2 max-h-[40vh] overflow-y-auto pr-1">
{query.trim() && canCreateDirectly && (
<button
type="button"
onClick={handleManualAdd}
disabled={submitting}
className="w-full flex items-center gap-3 p-3 rounded-2xl border border-dashed border-blue-300 hover:border-blue-400 bg-blue-50/20 text-blue-700 transition-all text-left mb-2"
>
<div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
+
</div>
<div className="flex-1 text-left">
<div className="text-sm font-bold">Thêm thành viên thủ công</div>
<div className="text-[11px] text-gray-500">Thêm "{query.trim()}" trực tiếp vào danh sách thành viên</div>
</div>
{submitting ? (
<Loader2 className="w-4 h-4 animate-spin text-blue-600" />
) : (
<span className="px-2.5 py-1 bg-blue-600 text-white rounded-xl text-xs font-bold transition-all">Thêm</span>
)}
</button>
)}
{visibleUsers.map((u) => {
const isSelected = selectedUser === u.id;
return (
frontend/src/components/CreateTourModal.tsx
+56 -28
View File
@@ -73,13 +73,19 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
setIsLoading(true);
setError('');
try {
const memberIds = members.map((m) => m.id);
const membersPayload = members.map((m) => {
if (m.isManual) {
return { displayName: m.name };
} else {
return { userId: m.id };
}
});
const tour = await createTour({
title,
description,
startDate,
endDate,
memberIds,
members: membersPayload,
adultCount,
childCount,
childDiscount,
@@ -97,18 +103,18 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
return (
<div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
<div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
<div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden p-6">
<div className="flex justify-between items-center mb-4">
<div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
<div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
<h2 className="text-xl font-bold text-gray-900">Tạo Tour mới</h2>
<button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">✕</button>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<form onSubmit={handleSubmit} className="p-5 space-y-4 overflow-y-auto flex-1">
<div>
<label className="block text-sm font-bold text-gray-700 mb-1">Tên Tour</label>
<input
required
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 text-sm"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="VD: Khám phá Đà Lạt"
@@ -170,7 +176,7 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
<label className="block text-sm font-bold text-gray-700 mb-1">Bắt đầu</label>
<input
type="date"
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 text-sm"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
/>
@@ -179,7 +185,7 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
<label className="block text-sm font-bold text-gray-700 mb-1">Kết thúc</label>
<input
type="date"
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 text-sm"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
/>
@@ -211,50 +217,72 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
<p className="text-[10px] text-blue-400 italic font-medium">* Dùng để tính toán đơn giá bình quân trong báo cáo chi phí.</p>
</div>
<div>
<label className="block text-sm font-bold text-gray-700 mb-2">Thành viên tham gia</label>
<div className="flex flex-wrap gap-3">
{members.map((m) => (
<div key={m.id} className="relative">
<div className="w-12 h-12 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold text-sm overflow-hidden">
{m.name}
<div className="space-y-2">
<label className="block text-sm font-bold text-gray-700">Thành viên tham gia ({members.length})</label>
{members.length > 0 && (
<div className="flex flex-wrap gap-3 mb-3 p-3 bg-gray-50 rounded-2xl border border-gray-100">
{members.map((m) => {
const initial = m.name?.charAt(0) || '?';
return (
<div key={m.id} className="flex flex-col items-center gap-1">
<div className="relative">
<div className="w-10 h-10 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold text-sm overflow-hidden">
{initial}
</div>
<button
type="button"
onClick={() => removeMember(m.id)}
className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-gray-500 hover:bg-red-600 text-white flex items-center justify-center transition-colors"
className="absolute -top-1 -right-1 w-4 h-4 bg-gray-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white"
aria-label="Remove item"
>
<Trash2 size={12} />
<Trash2 size={10} />
</button>
<div className="text-[10px] text-center mt-1 max-w-[70px] truncate">{m.name}</div>
</div>
))}
<span className="text-[10px] font-semibold text-gray-700 max-w-[72px] truncate">{m.name}</span>
</div>
);
})}
</div>
)}
<div className="relative">
<input
className="w-36 px-2 py-1 text-sm border border-gray-200 rounded-lg outline-none"
placeholder="Tìm email..."
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 text-sm font-bold text-gray-800"
placeholder="Tìm email hoặc nhập tên thành viên ngoài hệ thống..."
value={query}
onChange={(e) => searchUsers(e.target.value)}
/>
{results.length > 0 && (
<div className="absolute top-full left-0 right-0 mt-2 bg-white border border-gray-100 rounded-xl shadow-lg z-10 max-h-60 overflow-y-auto">
{results.map((u) => (
{(results.length > 0 || query.trim()) && (
<div className="absolute bottom-full mb-2 left-0 right-0 bg-white border border-gray-100 rounded-2xl shadow-xl z-20 max-h-48 overflow-y-auto p-2 space-y-1">
{query.trim() && (
<button
type="button"
onClick={() => {
const name = query.trim();
setMembers((prev) => (prev.some((m) => m.name.toLowerCase() === name.toLowerCase()) ? prev : [...prev, { id: `manual-${Date.now()}`, name, isManual: true }]));
setQuery('');
setResults([]);
}}
className="w-full text-left px-3 py-2 text-sm hover:bg-blue-50 rounded-xl text-blue-600 font-bold flex items-center gap-2"
>
<span className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-600 text-sm font-black">+</span>
<span>Thêm thành viên ngoài hệ thống: "{query.trim()}"</span>
</button>
)}
{results.filter(u => !members.some(m => m.id === u.id)).map((u) => (
<button
key={u.id}
type="button"
onClick={() => confirmAddMember(u)}
className="w-full text-left px-3 py-2 text-sm hover:bg-blue-50"
className="w-full text-left px-3 py-2 text-sm hover:bg-blue-50 rounded-xl flex flex-col"
>
<span className="font-bold text-gray-900">{u.name}</span>
<span className="block text-xs text-gray-500">{u.email}</span>
<span className="font-bold text-gray-900">{u.name || 'Chưa đặt tên'}</span>
<span className="text-xs text-gray-500">{u.email}</span>
</button>
))}
</div>
)}
</div>
</div>
{error && <p className="text-xs text-red-600 mt-2">{error}</p>}
</div>
frontend/src/components/ExpenseManager.tsx
+19 -15
View File
File diff suppressed because one or more lines are too long
frontend/src/pages/TourDetailPage.tsx
+21 -16
View File
@@ -1411,7 +1411,7 @@ export const TourDetailPage = ({
const tourInfo = {
title: currentTour?.title || "Hành trình khám phá TP.HCM",
date: tourDateDisplay,
membersCount: currentTour?.participants?.filter((p: any) => p.user)?.length || 0,
membersCount: currentTour?.participants?.filter((p: any) => p.user || p.displayName)?.length || 0,
budget: currentTour?.totalCost ? `${Number(currentTour.totalCost).toLocaleString()} VND` : "0 VND",
coverImage: getMostLikedPhoto(currentTour?.photos || [])?.imageUrl || "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop"
};
@@ -1507,19 +1507,26 @@ export const TourDetailPage = ({
{/* Member Avatars Stack */}
<div className="flex items-center gap-2 mt-4">
<div className="flex flex-wrap gap-2"> {/* Always show participants */}
{currentTour?.participants?.filter((p: any) => p.user)?.slice(0, 5).map((p: any, i: number) => (
{currentTour?.participants?.filter((p: any) => p.user || p.displayName)?.slice(0, 5).map((p: any) => {
const memberName = p.user?.name || p.displayName || 'Thành viên';
return (
<button
key={p.userId || i}
key={p.id}
onClick={() => {
setSelectedMember(p);
setIsMemberDetailOpen(true);
}}
className="w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg hover:scale-110 transition-transform"
title={p.user?.name || p.userId}
title={memberName}
>
{p.user ? (
<img src={`https://i.pravatar.cc/100?u=${p.userId}`} alt="Avatar" />
) : (
<span>{memberName.charAt(0)}</span>
)}
</button>
))}
);
})}
{isOwner && !isPublicView && joinRequests.slice(0, 3).map((req: any) => ( // Hide join requests in public view
<div key={req.id} className="relative group">
<div className="w-10 h-10 rounded-full border-2 border-amber-400 bg-amber-50 flex items-center justify-center text-amber-700 font-bold overflow-hidden shadow-lg">
@@ -1589,18 +1596,16 @@ export const TourDetailPage = ({
</div>
)}
</div>
{!isPublicView && ( // Hide add member button in public view
{!isPublicView && canInvite && (
<button
onClick={() => {
if (!currentTour) return;
if (canInvite) setIsAddMemberOpen(true);
setIsAddMemberOpen(true);
}}
disabled={!canInvite}
className={`p-2 rounded-full border backdrop-blur-sm transition-all ml-2 ${
canInvite ? 'bg-white/10 hover:bg-white/20 border-white/20' : 'bg-white/5 border-white/10 opacity-50'
}`}
className="flex items-center gap-1.5 px-3 py-2 rounded-full border border-white/20 bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition-all ml-2 shadow-md hover:scale-105 active:scale-95"
>
<Plus className="w-4 h-4" />
<Plus className="w-3.5 h-3.5" />
Thêm thành viên
</button>
)}
</div>
@@ -2796,11 +2801,11 @@ export const TourDetailPage = ({
<div className="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold">
{selectedMember.user?.name?.charAt(0) || '?'}
{selectedMember.user?.name?.charAt(0) || selectedMember.displayName?.charAt(0) || '?'}
</div>
<div>
<div className="text-base font-bold text-gray-900">{selectedMember.user?.name || 'Chưa đặt tên'}</div>
<div className="text-xs text-gray-500">{selectedMember.user?.email}</div>
<div className="text-base font-bold text-gray-900">{selectedMember.user?.name || selectedMember.displayName || 'Chưa đặt tên'}</div>
<div className="text-xs text-gray-500">{selectedMember.user?.email || 'Thành viên ngoài hệ thống'}</div>
<div className="text-[10px] font-semibold text-gray-500">{selectedMember.role}</div>
</div>
</div>
@@ -2817,7 +2822,7 @@ export const TourDetailPage = ({
onClick={async () => {
if (!currentTour || !selectedMember) return;
try {
await removeMember(currentTour.id, selectedMember.userId);
await removeMember(currentTour.id, selectedMember.userId || selectedMember.id);
setIsMemberDetailOpen(false);
} catch (e) {
notify({ title: 'Thông báo', message: 'Không thể xóa thành viên', type: 'error' });
frontend/src/store/useTourStore.ts
+2 -2
View File
@@ -23,7 +23,7 @@ interface TourState {
updateTourStartPoint: (tourId: string, data: any) => Promise<void>;
updateTourEndPoint: (tourId: string, data: any) => Promise<void>;
optimizeRouting: (legId: string) => Promise<void>;
addMember: (tourId: string, member: { userId: string; role?: string }) => Promise<any>;
addMember: (tourId: string, member: { userId?: string; displayName?: string; role?: string }) => Promise<any>;
removeMember: (tourId: string, userId: string) => Promise<void>;
updateMemberFamilyCount: (tourId: string, userId: string, adultCount: number, childCount: number) => Promise<void>;
setActiveLegId: (id: string | null) => void;
@@ -314,7 +314,7 @@ export const useTourStore = create<TourState>((set, get) => ({
const { currentTour } = get();
if (currentTour) get().fetchTour(currentTour.id);
},
addMember: async (tourId: string, member: { userId: string; role?: string }) => {
addMember: async (tourId: string, member: { userId?: string; displayName?: string; role?: string }) => {
const response = await fetch(`/api/v1/tours/${tourId}/members`, {
method: 'POST',
headers: {