fix: sửa lỗi các nút bị che dưới thanh địa chỉ của chrome, hỗ trợ iphone upload ảnh heic

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "continue.enableConsole": true
+    "continue.enableConsole": true,
+    "remote.autoForwardPortsFallback": 0
 }

backend/dist/src/main.js

@@ -1695,7 +1695,7 @@ let UserController = class UserController {
         this.prisma = prisma;
     }
     async getAllUsers(req, q) {
-        const currentUserId = req.user?.sub;
+        const currentUserId = req.user?.id;
         const users = await this.prisma.user.findMany({
             where: q
                 ? {
@@ -1718,18 +1718,32 @@ let UserController = class UserController {
             orderBy: { capturedAt: 'desc' }
         });
     }
-    async updateUser(id, data) {
+    async updateUser(id, data, req) {
+        const requestingUser = req.user;
+        const targetUser = await this.prisma.user.findUnique({ where: { id } });
+        if (!targetUser) {
+            throw new common_1.NotFoundException('Không tìm thấy người dùng');
+        }
+        if (targetUser.isAdmin && !requestingUser.isAdmin) {
+            throw new common_1.ForbiddenException('Không có quyền thay đổi thông tin hoặc reset password của Quản trị viên');
+        }
+        if (!requestingUser.isAdmin && requestingUser.id !== id) {
+            throw new common_1.ForbiddenException('Bạn không có quyền thực hiện hành động này');
+        }
         if (data.password) {
             data.passwordHash = await bcrypt.hash(data.password, 10);
             delete data.password;
         }
+        if (!requestingUser.isAdmin && data.isAdmin !== undefined) {
+            delete data.isAdmin;
+        }
         return this.prisma.user.update({
             where: { id },
             data,
             select: { id: true, email: true, name: true, isAdmin: true, isBlocked: true }
         });
     }
-    async deleteUser(id) {
+    async deleteUser(id, req) {
         const user = await this.prisma.user.findUnique({ where: { id } });
         if (!user)
             throw new common_1.NotFoundException('Không tìm thấy người dùng');
@@ -1757,10 +1771,13 @@ let UserController = class UserController {
         }
         return { message: 'Đã xóa người dùng' };
     }
-    async toggleBlock(id) {
+    async toggleBlock(id, req) {
         const user = await this.prisma.user.findUnique({ where: { id } });
         if (!user)
             throw new common_1.NotFoundException('Người dùng không tồn tại');
+        if (user.isAdmin) {
+            throw new common_1.BadRequestException('Không thể khóa tài khoản Quản trị viên');
+        }
         const updated = await this.prisma.user.update({
             where: { id },
             data: { isBlocked: !user.isBlocked },
@@ -1771,6 +1788,7 @@ let UserController = class UserController {
 };
 __decorate([
     (0, common_1.Get)(),
+    (0, common_1.UseGuards)(admin_guard_1.AdminGuard),
     __param(0, (0, common_1.Req)()),
     __param(1, (0, common_1.Query)('q')),
     __metadata("design:type", Function),
@@ -1790,27 +1808,33 @@ __decorate([
     (0, common_1.Patch)(':id'),
     __param(0, (0, common_1.Param)('id', common_1.ParseUUIDPipe)),
     __param(1, (0, common_1.Body)()),
+    __param(2, (0, common_1.Req)()),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [String, Object]),
+    __metadata("design:paramtypes", [String, Object, Object]),
     __metadata("design:returntype", Promise)
 ], UserController.prototype, "updateUser", null);
 __decorate([
     (0, exports.Roles)(client_1.ParticipantRole.OWNER),
     (0, common_1.Delete)(':id'),
+    (0, common_1.UseGuards)(admin_guard_1.AdminGuard),
     __param(0, (0, common_1.Param)('id', common_1.ParseUUIDPipe)),
+    __param(1, (0, common_1.Req)()),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [String]),
+    __metadata("design:paramtypes", [String, Object]),
     __metadata("design:returntype", Promise)
 ], UserController.prototype, "deleteUser", null);
 __decorate([
     (0, exports.Roles)(client_1.ParticipantRole.OWNER, client_1.ParticipantRole.MANAGER),
     (0, common_1.Post)('block/:id'),
+    (0, common_1.UseGuards)(admin_guard_1.AdminGuard),
     __param(0, (0, common_1.Param)('id', common_1.ParseUUIDPipe)),
+    __param(1, (0, common_1.Req)()),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [String]),
+    __metadata("design:paramtypes", [String, Object]),
     __metadata("design:returntype", Promise)
 ], UserController.prototype, "toggleBlock", null);
 UserController = __decorate([
+    (0, common_1.UseGuards)(jwt_auth_guard_1.JwtAuthGuard),
     (0, common_1.Controller)('users'),
     (0, exports.Roles)(client_1.ParticipantRole.OWNER, client_1.ParticipantRole.MANAGER),
     __metadata("design:paramtypes", [prisma_service_1.PrismaService])

backend/scratch/check-users.ts

@@ -0,0 +1,19 @@
+import { PrismaClient } from '@prisma/client';
+import { PrismaPg } from '@prisma/adapter-pg';
+import { Pool } from 'pg';
+import * as dotenv from 'dotenv';
+import * as path from 'path';
+
+const envPath = path.resolve(process.cwd(), '..', '.env');
+dotenv.config({ path: envPath });
+
+const pool = new Pool({ connectionString: process.env.DATABASE_URL });
+const adapter = new PrismaPg(pool);
+const prisma = new PrismaClient({ adapter });
+
+async function main() {
+  const users = await prisma.user.findMany();
+  console.log('USERS:', users);
+}
+
+main().finally(() => pool.end());

backend/src/main.ts

@@ -1640,14 +1640,16 @@ class PhotoController {
   }
 }
 
+@UseGuards(JwtAuthGuard)
 @Controller('users')
 @Roles(ParticipantRole.OWNER, ParticipantRole.MANAGER) // Default roles for User management (Admin/Manager)
 class UserController {
   constructor(private prisma: PrismaService) {}
 
   @Get()
+  @UseGuards(AdminGuard)
   async getAllUsers(@Req() req: any, @Query('q') q?: string) {
-    const currentUserId = req.user?.sub;
+    const currentUserId = req.user?.id;
     const users = await this.prisma.user.findMany({
       where: q
         ? {
@@ -1677,11 +1679,36 @@ class UserController {
 
   @Roles(ParticipantRole.OWNER, ParticipantRole.MANAGER) // Default roles for updating user (Admin/Manager)
   @Patch(':id')
-  async updateUser(@Param('id', ParseUUIDPipe) id: string, @Body() data: any) {
+  async updateUser(@Param('id', ParseUUIDPipe) id: string, @Body() data: any, @Req() req: any) {
+    const requestingUser = req.user;
+    
+    // Fetch target user from DB
+    const targetUser = await this.prisma.user.findUnique({ where: { id } });
+    if (!targetUser) {
+      throw new NotFoundException('Không tìm thấy người dùng');
+    }
+
+    // 1. If target user is an Admin, only an Admin can update them.
+    // (A manager/normal user cannot reset/change password of an Admin)
+    if (targetUser.isAdmin && !requestingUser.isAdmin) {
+      throw new ForbiddenException('Không có quyền thay đổi thông tin hoặc reset password của Quản trị viên');
+    }
+
+    // 2. A non-admin can only update their own profile.
+    if (!requestingUser.isAdmin && requestingUser.id !== id) {
+      throw new ForbiddenException('Bạn không có quyền thực hiện hành động này');
+    }
+
     if (data.password) {
       data.passwordHash = await bcrypt.hash(data.password, 10);
       delete data.password;
     }
+
+    // Safety: prevent non-admins from promoting anyone to admin
+    if (!requestingUser.isAdmin && data.isAdmin !== undefined) {
+      delete data.isAdmin;
+    }
+
     return this.prisma.user.update({
       where: { id },
       data,
@@ -1691,7 +1718,8 @@ class UserController {
 
   @Roles(ParticipantRole.OWNER) // Only owner can delete user
   @Delete(':id')
-  async deleteUser(@Param('id', ParseUUIDPipe) id: string) {
+  @UseGuards(AdminGuard)
+  async deleteUser(@Param('id', ParseUUIDPipe) id: string, @Req() req: any) {
     const user = await this.prisma.user.findUnique({ where: { id } });
     if (!user) throw new NotFoundException('Không tìm thấy người dùng');
     if (user.isAdmin) {
@@ -1729,9 +1757,16 @@ class UserController {
 
   @Roles(ParticipantRole.OWNER, ParticipantRole.MANAGER) // Default roles for blocking user (Admin/Manager)
   @Post('block/:id')
-  async toggleBlock(@Param('id', ParseUUIDPipe) id: string) {
+  @UseGuards(AdminGuard)
+  async toggleBlock(@Param('id', ParseUUIDPipe) id: string, @Req() req: any) {
     const user = await this.prisma.user.findUnique({ where: { id } });
     if (!user) throw new NotFoundException('Người dùng không tồn tại');
+    
+    // Safety check: Cannot block an Admin
+    if (user.isAdmin) {
+      throw new BadRequestException('Không thể khóa tài khoản Quản trị viên');
+    }
+
     const updated = await this.prisma.user.update({
       where: { id },
       data: { isBlocked: !user.isBlocked },

frontend/dist/index.html

@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <title>Travel Planner</title>
-    <script type="module" crossorigin src="/assets/index-D1uuLlpI.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-f6lAQjsT.css">
+    <script type="module" crossorigin src="/assets/index-Dn1e9vte.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-C4TR57aU.css">
   </head>
   <body>
     <div id="root"></div>

frontend/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <title>Travel Planner</title>
   </head>

frontend/src/pages/ExploreMap.tsx

@@ -251,9 +251,9 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
   }, []);
 
   return (
-    <div className="h-screen w-full relative">
+    <div className="h-dvh w-full relative overflow-hidden">
       {/* Top Bar Container - Chứa tất cả các nút điều hướng phía trên */}
-      <div className="absolute top-4 left-4 right-4 z-[1002] flex items-center justify-between pointer-events-none">
+      <div className="absolute top-[calc(1rem+env(safe-area-inset-top,0px))] left-4 right-4 z-[1002] flex items-center justify-between pointer-events-none">
         {/* Nhóm bên trái: Quay lại và Thông tin vị trí */}
         <div className="flex items-center gap-3 pointer-events-auto">
           <button

frontend/src/pages/LandingPage.tsx

@@ -195,7 +195,7 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
 
 
   return (
-    <div className="h-screen w-full overflow-hidden font-sans bg-gray-900 relative">
+    <div className="h-dvh w-full overflow-hidden font-sans bg-gray-900 relative">
       {/* Background Image - Hiển thị trên mọi thiết bị với hiệu ứng Crossfade & Panning */}
       <div className="absolute inset-0 z-0 bg-gray-950 overflow-hidden">
         {/* Slot 1 */}
@@ -242,7 +242,7 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
       `}</style>
 
       {/* Top Bar - Thanh điều hướng trên cùng */}
-      <div className="absolute top-0 left-0 right-0 z-20 p-4 flex justify-between items-center">
+      <div className="absolute top-0 left-0 right-0 z-20 p-4 pt-[calc(1rem+env(safe-area-inset-top,0px))] flex justify-between items-center">
         <div className="flex items-center gap-2 text-white drop-shadow-lg">
           <Compass className="w-8 h-8" />
           <span className="text-xl font-black tracking-tighter uppercase hidden sm:block">Travel Planner</span>
@@ -274,7 +274,7 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
 
       {/* Community Gallery Previews */}
       {publicPhotos.length > 0 && (
-        <div className="absolute bottom-28 left-0 right-0 z-20 px-4 flex flex-col items-center gap-2">
+        <div className="absolute bottom-[calc(7rem+env(safe-area-inset-bottom,0px))] left-0 right-0 z-20 px-4 flex flex-col items-center gap-2">
           <span className="text-xs font-bold uppercase tracking-wider text-white/70 drop-shadow-md">
             Khoảnh khắc từ cộng đồng ({publicPhotos.length})
           </span>
@@ -305,7 +305,7 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
       )}
 
       {/* Bottom Bar - Nút hành động chính */}
-      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 w-full px-4">
+      <div className="absolute bottom-[calc(2rem+env(safe-area-inset-bottom,0px))] left-1/2 -translate-x-1/2 z-20 w-full px-4">
         <button 
           onClick={onGoToMap}
           className="w-full max-w-md mx-auto flex items-center justify-center gap-3 bg-white/20 backdrop-blur-lg text-white font-bold py-4 px-8 rounded-2xl transition-all shadow-2xl border border-white/30 hover:bg-white/30 active:scale-95"

frontend/src/pages/TourDetailPage.tsx

@@ -2221,7 +2221,7 @@ export const TourDetailPage = ({
           {/* Nút X để quay lại */}
           <button 
             onClick={() => setIsMapFullscreen(false)}
-            className="absolute top-4 left-4 z-[1002] w-11 h-11 bg-white/90 backdrop-blur-md rounded-full shadow-2xl flex items-center justify-center border border-white/20 hover:bg-white transition-all active:scale-95 group"
+            className="absolute top-[calc(1rem+env(safe-area-inset-top,0px))] left-4 z-[1002] w-11 h-11 bg-white/90 backdrop-blur-md rounded-full shadow-2xl flex items-center justify-center border border-white/20 hover:bg-white transition-all active:scale-95 group"
             title="Đóng bản đồ"
           >
             <X className="w-6 h-6 text-gray-800 group-hover:rotate-90 transition-transform duration-300" />
@@ -2229,7 +2229,7 @@ export const TourDetailPage = ({
 
           {/* Transparent Top Bar Label - Glassmorphism style */}
           {selectedRouteInfo && drivingRoute.length > 0 && (
-            <div className="absolute top-4 left-1/2 -translate-x-1/2 z-[1001] bg-white/20 backdrop-blur-lg px-6 py-2.5 rounded-full border border-white/30 flex items-center gap-4 animate-in fade-in slide-in-from-top-2 duration-500 shadow-xl">
+            <div className="absolute top-[calc(1rem+env(safe-area-inset-top,0px))] left-1/2 -translate-x-1/2 z-[1001] bg-white/20 backdrop-blur-lg px-6 py-2.5 rounded-full border border-white/30 flex items-center gap-4 animate-in fade-in slide-in-from-top-2 duration-500 shadow-xl">
               <div className="flex items-center gap-2">
                 <Navigation className="w-4 h-4 text-blue-600 rotate-45 fill-blue-600" />
                 <span className="text-[11px] font-black text-gray-700 uppercase tracking-widest">{selectedRouteInfo.label}</span>
@@ -2286,7 +2286,7 @@ export const TourDetailPage = ({
           </MapContainer>
 
           {/* Overlay điều khiển trên bản đồ toàn màn hình */}
-          <div className="absolute top-4 right-4 z-[1001] flex flex-col gap-2">
+          <div className="absolute top-[calc(1rem+env(safe-area-inset-top,0px))] right-4 z-[1001] flex flex-col gap-2">
              <button
                 onClick={() => setIsMapControlsOpen(!isMapControlsOpen)}
                 className="w-11 h-11 bg-white/90 backdrop-blur-md rounded-2xl shadow-xl border border-white text-blue-600 flex items-center justify-center transition-all active:scale-95"