feat: tính năng offline cho upload ảnh và tải bản đồ

GET_ANDROID.md

@@ -1,110 +0,0 @@
-# To AI Agent: Restore Smart Android App Download Banner Below Top-Bar Header
-
-## 1. Context & Feature Objective
-Previously, the codebase had a promotional banner encouraging mobile users to download the native Android `.apk` file. However, during the recent overhaul of the Top-Bar header and Member Dropdown Menu configurations, this banner component was accidentally unmounted or hidden.
-
-**Objective:** Restore and refactor this promotional frame (`AppDownloadBanner.tsx`). It must **ONLY** appear when a user accesses the web application via a **Mobile Android Browser** (Chrome, Samsung Internet, Opera Mobile, etc.). It must be positioned dynamically as a small, clean horizontal frame pinned directly underneath the main Top-Bar header layout, without conflicting with the new absolute Profile Dropdown Menu.
-
----
-
-## 2. Visual & Behavioral Layout Specifications
-- **Placement Context:** Directly underneath the Top-Bar layer, shifting the core page content (Map Canvas or Landing Hero) down proportionally (`relative` or `sticky` stack). It must not overlay or block map navigation tools.
-- **Conditional Trigger Logic:** The banner must evaluate `navigator.userAgent`. If the user agent includes `'android'` **AND** the user is running inside a standard web browser (not inside the compiled wrapper app itself), display the banner.
-- **Dismissible Interaction:** Include a small close button (`X`). Clicking it should temporarily store a flag in `sessionStorage` or `localStorage` to prevent the banner from bugging the user repeatedly during their session.
-
----
-
-## 3. Technical Implementation Blueprint
-
-### Step 1: Create the Responsive Banner Component (`AppDownloadBanner.tsx`)
-Create or re-engineer the banner layout within `frontend/src/components/layout/AppDownloadBanner.tsx`:
-
-```typescript
-import React, { useState, useEffect } from 'react';
-import { X, Download } from 'lucide-react';
-
-export const AppDownloadBanner: React.FC = () => {
-  const [isVisible, setIsVisible] = useState(false);
-  const APK_DOWNLOAD_URL = `${import.meta.env.VITE_BACKEND_URL || window.location.origin}/downloads/yotrip-latest.apk`;
-
-  useEffect(() => {
-    const userAgent = navigator.userAgent.toLowerCase();
-    const isAndroidBrowser = userAgent.includes('android') && !window.location.origin.includes('capacitor://') && !window.location.origin.includes('localhost:80');
-    const isBannerDismissed = localStorage.getItem('yotrip_apk_banner_dismissed') === 'true';
-
-    // ✅ Target condition match: User is on Android mobile browser and hasn't closed it yet
-    if (isAndroidBrowser && !isBannerDismissed) {
-      setIsVisible(true);
-    }
-  }, []);
-
-  const handleDismiss = () => {
-    localStorage.setItem('yotrip_apk_banner_dismissed', 'true');
-    setIsVisible(false);
-  };
-
-  if (!isVisible) return null;
-
-  return (
-    <div className="w-full bg-gradient-to-r from-blue-900 to-indigo-950 border-b border-blue-800 px-4 py-2 flex items-center justify-between text-white text-[11px] font-medium z-40 relative animate-fade-in shrink-0">
-      <div className="flex items-center gap-2.5 flex-1 min-w-0">
-        <div className="p-1 bg-blue-500/20 rounded-lg text-blue-400 shrink-0">
-          <Download className="w-3.5 h-3.5" />
-        </div>
-        <p className="truncate text-slate-200">
-          Trải nghiệm mượt mà hơn với ứng dụng <span className="text-white font-bold">YoTrip cho Android</span>!
-        </p>
-      </div>
-      
-      <div className="flex items-center gap-3 ml-2 shrink-0">
-        {/* Direct Download Trigger Target Link */}
-        <a 
-          href={APK_DOWNLOAD_URL}
-          download="yotrip.apk"
-          className="bg-blue-600 hover:bg-blue-500 px-2.5 py-1 rounded font-bold text-white transition-colors shadow-sm active:scale-95"
-        >
-          Tải APK
-        </a>
-        
-        {/* Close Button Trigger */}
-        <button 
-          onClick={handleDismiss}
-          className="p-1 hover:bg-slate-800 rounded text-slate-400 hover:text-slate-200 transition-colors"
-          title="Đóng thông báo"
-        >
-          <X className="w-3.5 h-3.5" />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-### Step 2: Integrate into Layout Hierarchies (LandingPage.tsx & ExplorerMap.tsx)
-Mount the verified download banner right below your primary header or top-bar row item array context:
-
-{/* ❌ BEFORE STRUCTURAL INTEGRATION */}
-<div className="w-screen h-screen flex flex-col">
-  <TopBarHeader />
-  <MapCanvasWorkspace />
-</div>
-
-{/* ✅ AFTER STRUCTURAL INTEGRATION: Stacked relative context */}
-<div className="w-screen h-screen flex flex-col overflow-hidden">
-  {/* 1. Main Application Header */}
-  <TopBarHeader />
-  
-  {/* 2. THE RESTORED ANDROID APP PROMOTIONAL BANNER */}
-  <AppDownloadBanner />
-
-  {/* 3. Primary Workspace Area - Shifts down cleanly when banner initializes */}
-  <div className="flex-1 relative min-h-0 w-full">
-    <MapCanvasWorkspace />
-  </div>
-</div>
-
-## 4. Verification & Quality Acceptance Criteria for AI Agent
-[ ] Targeted UserAgent Isolation: Emulate a desktop display width (iPhone or Desktop layouts). Verify the banner remains completely hidden. Toggle the network responsive preview device model to Android (e.g., Pixel 7) and refresh. Confirm the download bar pops up seamlessly.
-
-[ ] Absolute Dropdown Overlay Preservation: Expand the Member Avatar menu row dropdown list while the banner is visible. Confirm that the dropdown box displays layered ON TOP of the banner context, without layout shifting or text clipping.
-
-[ ] State Dismissal Memory: Click the X button on the banner, then refresh the browser session. Confirm the banner remains hidden and respects the localStorage condition toggle.

OFFLINE_FIRST.md

@@ -0,0 +1,181 @@
+# To AI Agent: Implement Offline-First Architecture for Mobile App & Web Browsers (Offline Photo Upload & Offline Map Routing)
+
+## 1. Context & Architectural Strategy
+We are implementing an **Offline-First Capabilities Layer** for both browser environments (Chrome Android, iOS Safari) and mobile application wrappers. The application must remain functional when network connectivity is lost ($Network = 0$).
+
+### Core Requirements:
+1. **Offline Photo Upload Queue:** When a user uploads a photo without an active internet connection, the system must not throw a network exception. Instead, it must store the image file (Blob/ArrayBuffer) and its accompanying metadata (GPS, Timestamp) into a browser-native transactional database (**IndexedDB**).
+2. **Background Sync Resume:** As soon as the device regains cellular/Wi-Fi data telemetry, a background synchronization worker must automatically trigger, reading the IndexedDB queue and completing the multi-part upload streams to the Debian server sequentially.
+3. **Offline Map Navigation Routing:** Cache critical operational Map Layout Tiles and routing geometries via a persistent client-side caching framework (**Service Workers + Cache API**).
+
+---
+
+## 2. Technical Offline System Stack Overview
+
+[Offline User Interaction]
+│
+├──➔ (Photo Upload) ──➔ Save Blob & EXIF Metadata ──➔ [ IndexedDB Storage ]
+│                                                           │ (Device re-connects)
+│                                                           ▼
+│                                                     [ Background Sync ] ──➔ POST to Server
+│
+└──➔ (Map Routing)  ──➔ Request Map Assets ──➔ [ Service Worker Cache API ] ──➔ Render View
+
+## 3. Code Refactoring Blueprint
+
+### Step 1: Implement Offline Storage Queue Service (`offlineQueue.ts`)
+Create a localized database management layer at `frontend/src/utils/offlineQueue.ts` leveraging IndexedDB to hold pending image uploads:
+
+```typescript
+import { openDB, IDBPDatabase } from 'idb';
+
+const DB_NAME = 'yotrip-offline-db';
+const STORE_NAME = 'pending-uploads';
+
+interface OfflinePhoto {
+  id: string;
+  fileBlob: Blob;
+  fileName: string;
+  latitude: string | null;
+  longitude: string | null;
+  capturedAt: string | null;
+  timestamp: number;
+}
+
+// Initialize the local IndexedDB container safely
+const getDB = (): Promise<IDBPDatabase> => {
+  return openDB(DB_NAME, 1, {
+    upgrade(db) {
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: 'id' });
+      }
+    },
+  });
+};
+
+// 1. STASH UPLOAD METADATA INTO OFFLINE STORAGE
+export const queueOfflineUpload = async (photoData: Omit<OfflinePhoto, 'id' | 'timestamp'>) => {
+  const db = await getDB();
+  const id = crypto.randomUUID();
+  const item: OfflinePhoto = {
+    ...photoData,
+    id,
+    timestamp: Date.now(),
+  };
+  await db.put(STORE_NAME, item);
+  console.log(`📦 Photo [${id}] stashed safely into local IndexedDB queue for offline background sync.`);
+  return id;
+};
+
+// 2. RETRIEVE ALL PENDING FILES ONCE ONLINE
+export const getPendingUploads = async (): Promise<OfflinePhoto[]> => {
+  const db = await getDB();
+  return db.getAll(STORE_NAME);
+};
+
+// 3. REMOVE COMPLETED TRANSACTION FROM QUEUE
+export const removePendingUpload = async (id: string) => {
+  const db = await getDB();
+  await db.delete(STORE_NAME, id);
+};
+
+### Step 2: Implement Background Synchronization Sync Engine (backgroundSync.ts)
+Create an active network monitoring service that intercepts reconnection signals and synchronizes the local database records:
+
+import { getPendingUploads, removePendingUpload } from './offlineQueue';
+import { api } from '../services/api';
+
+export const executeBackgroundSyncEngine = async (refreshMapPins: () => void) => {
+  const pendingItems = await getPendingUploads();
+  if (pendingItems.length === 0) return;
+
+  console.log(`🔄 Internet restored! Syncing [${pendingItems.length}] pending items to yotrip.labz.io.vn...`);
+
+  for (const item of pendingItems) {
+    const formData = new FormData();
+    formData.append('photo', item.fileBlob, item.fileName);
+    
+    if (item.latitude && item.longitude) {
+      formData.append('latitude', item.latitude);
+      formData.append('longitude', item.longitude);
+    }
+    if (item.capturedAt) {
+      formData.append('capturedAt', item.capturedAt);
+    }
+
+    try {
+      // Dispatch payload to Debian production server endpoint
+      const response = await api.post('/photos/upload-with-meta', formData, {
+        headers: { 'Content-Type': 'multipart/form-data' }
+      });
+
+      if (response.status === 200 || response.status === 201) {
+        // Remove item from local DB once server confirms safe receipt
+        await removePendingUpload(item.id);
+        console.log(`✅ Offline photo [${item.id}] synchronized successfully.`);
+      }
+    } catch (error) {
+      console.error(`✖ Failed to synchronize item [${item.id}]. Will retry on next connectivity cycle:`, error);
+      break; // Stop loop if server goes down mid-transit to protect execution queues
+    }
+  }
+
+  // Trigger reactive map layer update
+  refreshMapPins();
+};
+
+// Global Connectivity Listener initialization hook
+export const initNetworkStatusListeners = (refreshMapPins: () => void) => {
+  window.addEventListener('online', () => executeBackgroundSyncEngine(refreshMapPins));
+  
+  // Guard check on application startup in case network recovered while app was closed
+  if (navigator.onLine) {
+    executeBackgroundSyncEngine(refreshMapPins);
+  }
+};
+
+### Step 3: Configure Service Worker for Offline Map Tiles Cache (sw.js)
+Configure your service worker script block (e.g., public/sw.js) to intercept and cache vector navigation maps or stylesheet assets statically:
+
+const CACHE_NAME = 'yotrip-static-map-v1';
+const MAP_TILE_PATTERN = /tiles\.maps\.lincoln|openstreetmap|mapbox/;
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll([
+        '/',
+        '/index.html',
+        '/src/main.tsx',
+        '/manifest.json',
+        '/assets/offline-map-placeholder.png' // Fallback image asset
+      ]);
+    })
+  );
+});
+
+// NETWORK-FIRST FALLBACK TO CACHE STRATEGY FOR OFFLINE ROUTING MAPS
+self.addEventListener('fetch', (event) => {
+  const requestUrl = event.request.url;
+
+  if (MAP_TILE_PATTERN.test(requestUrl)) {
+    event.respondWith(
+      fetch(event.request)
+        .then((response) => {
+          // Clone and update cache with newly acquired dynamic tile data layers
+          const responseClone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, responseClone);
+          });
+          return response;
+        })
+        .catch(() => {
+          // If offline, serve map tiles seamlessly straight from client-side Cache API
+          return caches.match(event.request);
+        })
+    );
+  }
+});
+
+## 4. Quality Verification & Acceptance Criteria for AI Agent[ ] Airplane Mode Upload Stability: Toggle Airplane mode ($Network = 0$) inside the Android Emulator/iOS Safari responsive inspector. Upload an image. The UI must transition seamlessly, displaying an "Ảnh đã được lưu tạm ngoại tuyến" notification banner without runtime exceptions.[ ] Automatic Queue Flushing Check: Disable Airplane mode. Verify through the browser network inspector tool that a series of asynchronous multi-part POST network requests fire automatically towards https://yotrip.labz.io.vn/api/ without requiring user interaction.[ ] Offline Map Cache Test: Clear your browser network connectivity states. Navigate around the map interface canvas. Previously inspected map sections and routing data blocks must remain fully rendered from the Service Worker cache layer.
+

UI_ANDROID.md

@@ -0,0 +1,151 @@
+# To AI Agent: Restructure Mobile Photo Viewer Layout with Fixed Viewport, Overlay Metadata, and Scrollable Comments
+
+## 1. Context & Architectural UI Refactor
+We are redesigning the full-screen mobile photo inspector interface based on the visual layout annotated in `image.png`. The current structure is fragmented, causing layout instability when switching between images.
+
+### Key Refactor Requirements:
+1. **Fixed Image Viewport (Blue Zone):** Secure the photo viewport inside a strict, unyielding aspect-locked square container. Regardless of whether the active image is Landscape or Portrait, the container dimension must NOT snap, resize, or cause screen layout jumps.
+2. **Geospatial Overlay (Red Arrow Destination):** Completely remove the static location metadata box from the bottom white panel. Relocate and render this location string as a clean, translucent text overlay pinned directly to the **bottom-left corner inside the image viewport**.
+3. **Title Transformation (Green Arrow Destination):** Remove the text header segment "Lịch sử ảnh tại vị trí này (...)". In its place, dynamically render the active **Title of the Photo** (Tiêu đề của ảnh), serving as the primary text separator.
+4. **Isolated Scrollable Comment Feed:** The entire lower comment zone must be configured to scroll dynamically. When users swipe up to read multiple comments, the layout thread must slide seamlessly underneath the fixed sticky image frame container (`z-20`).
+
+---
+
+## 2. Structural Layer Elevation (`z-index`) Matrix
+
+┌────────────────────────────────────────────────────────┐
+│  Tier 4: System Action Row & Closes (z-50)             │ ➔ Native buttons (X, Close)
+├────────────────────────────────────────────────────────┤
+│  Tier 3: Fixed Photo Frame Viewport (z-20 / sticky)   │ ➔ Aspect-Square Image Box
+│    └─► Sub-Layer: Location & Time Overlay (z-30)       │ ➔ Pinned Bottom-Left on Image
+├────────────────────────────────────────────────────────┤
+│  Tier 2: Scrollable Comments Panel (z-10)              │ ➔ Slides BEHIND Tier 3 when swiped
+└────────────────────────────────────────────────────────┘
+
+---
+
+## 3. Code Refactoring Blueprint
+
+### Step 1: Overhaul Layout Architecture (`MobilePhotoViewerModal.tsx`)
+Update or create the mobile component layout to enforce the absolute layer boundaries and fixed dimensions:
+
+```typescript
+import React, { useState } from 'react';
+import { X, MapPin, Calendar, Heart, Send } from 'lucide-react';
+
+interface PhotoDetail {
+  id: string;
+  url: string;
+  title: string;
+  description?: string;
+  latitude: number;
+  longitude: number;
+  locationName: string;
+  capturedAt: string;
+  likesCount: number;
+}
+
+export const MobilePhotoViewerModal: React.FC<{ photo: PhotoDetail; onClose: () => void }> = ({ photo, onClose }) => {
+  const [commentInput, setCommentInput] = useState('');
+
+  return (
+    <div className="fixed inset-0 bg-slate-950 z-[999999] flex flex-col overflow-hidden select-none text-white antialiased">
+      
+      {/* TIER 4: FIXED SYSTEM ACTIONS CONTROL ROW (z-50) */}
+      <div className="absolute top-4 right-4 z-50">
+        <button 
+          onClick={onClose} 
+          className="p-2.5 bg-black/60 hover:bg-black/80 rounded-full border border-slate-800 backdrop-blur-md active:scale-95 transition-transform"
+        >
+          <X className="w-5 h-5 text-white" />
+        </button>
+      </div>
+
+      {/* TIER 3: FIXED BLUE ZONE - ASPECT LOCKED PHOTO FRAME (z-20 / sticky) */}
+      <div className="w-full aspect-square bg-slate-950 flex items-center justify-center sticky top-0 z-20 border-b border-slate-900/60 shadow-2xl shrink-0">
+        <img 
+          src={photo.url} 
+          alt={photo.title} 
+          className="w-full h-full object-contain select-none pointer-events-none"
+        />
+
+        {/* TIER 3.1: RELOCATED DYNAMIC LOCATION & TIMESTAMP OVERLAY (z-30) */}
+        <div className="absolute bottom-4 left-4 right-16 z-30 flex flex-col gap-1 p-2.5 bg-black/50 backdrop-blur-sm rounded-xl border border-white/10 text-[10px] text-slate-200 max-w-[75vw] pointer-events-none">
+          <div className="flex items-center gap-1.5 font-semibold text-white">
+            <MapPin className="w-3.5 h-3.5 text-blue-400 shrink-0" />
+            <span className="truncate">{photo.locationName || "Vị trí không xác định"}</span>
+          </div>
+          <div className="flex items-center gap-1.5 text-slate-300 pl-5">
+            <Calendar className="w-3 h-3 text-slate-400 shrink-0" />
+            <span>Ngày chụp: {new Date(photo.capturedAt).toLocaleDateString('vi-VN')}</span>
+          </div>
+        </div>
+
+        {/* Floating Like Badge Counter */}
+        <div className="absolute bottom-4 right-4 z-30 bg-black/50 backdrop-blur-sm border border-white/10 rounded-xl px-2.5 py-1.5 flex items-center gap-1 text-[11px] font-bold text-rose-500">
+          <Heart className="w-3.5 h-3.5 fill-rose-500" />
+          <span>{photo.likesCount}</span>
+        </div>
+      </div>
+
+      {/* TIER 2: SCROLLABLE CORE CONTENTS & COMMENTS PANEL (z-10) */}
+      {/* This entire workspace container slides underneath the photo layout on swipe-up */}
+      <div className="flex-1 overflow-y-auto bg-slate-900/30 relative z-10 flex flex-col min-h-0">
+        
+        {/* REPLACED HEADER ZONE: Title replaces the old History text strip */}
+        <div className="px-5 py-4 border-b border-slate-900/80 bg-slate-900/90 backdrop-blur-md sticky top-0 z-10 space-y-1">
+          <h2 className="text-sm font-bold text-slate-100 tracking-wide">
+            {photo.title || "Chưa có tiêu đề"}
+          </h2>
+          {photo.description && (
+            <p className="text-[11px] text-slate-400 leading-relaxed font-medium">
+              {photo.description}
+            </p>
+          )}
+        </div>
+
+        {/* DYNAMIC COMMENTS FEED BLOCK */}
+        <div className="p-4 space-y-3.5 flex-1 overflow-y-visible">
+          {/* Mock iteration loop representing user chat bubbles */}
+          {[...Array(5)].map((_, index) => (
+            <div key={index} className="flex gap-3 items-start text-xs text-slate-300 animate-fade-in">
+              <div className="w-7 h-7 rounded-full bg-slate-800 font-bold text-[9px] flex items-center justify-center shrink-0 border border-slate-700">U</div>
+              <div className="flex-1 bg-slate-900/50 border border-slate-800/60 rounded-xl p-3 space-y-1 shadow-sm">
+                <div className="flex justify-between items-center text-[10px] font-semibold">
+                  <span className="text-slate-200">Thành viên YoTrip</span>
+                  <span className="text-slate-500 font-normal">Vừa xong</span>
+                </div>
+                <p className="text-slate-400 leading-relaxed text-[11px]">Góc chụp đẹp quá, bối cảnh nhìn rất thoáng và đầy đủ ánh sáng tự nhiên!</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* STICKY BOTTOM INPUT SEND TRAY BAR */}
+        <div className="p-3 bg-slate-950 border-t border-slate-900 flex items-center gap-2 sticky bottom-0 z-20">
+          <input 
+            type="text" 
+            value={commentInput}
+            onChange={(e) => setCommentInput(e.target.value)}
+            placeholder="Viết bình luận công khai..." 
+            className="flex-1 bg-slate-900 border border-slate-800 text-white rounded-xl p-3 text-xs outline-none focus:border-blue-500 transition-colors placeholder-slate-500"
+          />
+          <button className="p-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-colors active:scale-95 shadow-lg">
+            <Send className="w-4 h-4" />
+          </button>
+        </div>
+
+      </div>
+
+    </div>
+  );
+};
+
+## 4. Quality Verification & Acceptance Criteria for AI Agent
+[ ] Dimension Stability Test: Switch back and forth between an ultra-wide panoramic photo and a 4:3 vertical shot. The parent blue container (aspect-square) must remain exactly static on the viewport layout, blocking size shifts.
+
+[ ] Overlay Check Validation: Verify the location marker coordinates box is completely wiped from the lower white profile zone and draws successfully on top of the image canvas at the bottom-left edge.
+
+[ ] Text Swap Alignment: Ensure the string text "Lịch sử ảnh tại vị trí này" is replaced completely by the active image title asset hook.
+
+[ ] Scroll Pass Inspection: Swipe up to read the text inside the comments panel. Verify the message rows pass behind the bottom border line of the image canvas container (z-20), while the close button at the top remains fully accessible.

frontend/dist/index.html

@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#10b981" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
     <script src="https://accounts.google.com/gsi/client" async defer></script>
     <title>Travel Planner</title>
     
@@ -21,7 +27,7 @@
     <meta name="twitter:title" content="Travel Planner - Lên kế hoạch chuyến đi của bạn" />
     <meta name="twitter:description" content="Khám phá những hành trình tuyệt vời và chia sẻ khoảnh khắc đẹp với cộng đồng du lịch." />
     <meta name="twitter:image" content="https://yotrip.labz.io.vn/background.avif" />
-    <script type="module" crossorigin src="/assets/index-CSiax1SI.js"></script>
+    <script type="module" crossorigin src="/assets/index-1GoR2rZV.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-CMxvf4Kt.js">
     <link rel="modulepreload" crossorigin href="/assets/vendor-others-CNhtyHGs.js">
     <link rel="modulepreload" crossorigin href="/assets/vendor-editor-BDwQQzB8.js">
@@ -30,7 +36,7 @@
     <link rel="modulepreload" crossorigin href="/assets/vendor-pdf-C3XQY6t9.js">
     <link rel="stylesheet" crossorigin href="/assets/vendor-maps-CcXJxNtP.css">
     <link rel="stylesheet" crossorigin href="/assets/vendor-react-CuSj0z1j.css">
-    <link rel="stylesheet" crossorigin href="/assets/index-CIipVipb.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-CLipHKhu.css">
   </head>
 <body>
     <div id="root"></div>

frontend/index.html

@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#10b981" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
     <script src="https://accounts.google.com/gsi/client" async defer></script>
     <title>Travel Planner</title>
     

frontend/public/manifest.json

@@ -0,0 +1,18 @@
+{
+  "name": "YoTrip - Khám phá chuyến đi",
+  "short_name": "YoTrip",
+  "description": "Chia sẻ ảnh du lịch và khám phá bản đồ cộng đồng",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#020617",
+  "theme_color": "#10b981",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "categories": ["travel", "social", "maps"]
+}

frontend/public/sw.js

@@ -0,0 +1,116 @@
+/**
+ * sw.js — YoTrip Service Worker
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Strategy: Network-First with Cache-API fallback.
+ *
+ * Caches:
+ *   1. App Shell (static assets): cached at install time
+ *   2. OpenStreetMap tiles: cached dynamically on first fetch, served from
+ *      cache when offline — so previously visited map areas remain navigable
+ *
+ * Cache names are versioned so old caches get evicted on SW update.
+ */
+
+const SHELL_CACHE   = 'yotrip-shell-v1';
+const MAP_CACHE     = 'yotrip-map-tiles-v1';
+
+// App shell files to pre-cache at install
+const SHELL_URLS = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+  '/favicon.ico',
+];
+
+// URL patterns for map tile providers
+const MAP_TILE_ORIGINS = [
+  'tile.openstreetmap.org',
+  'a.tile.openstreetmap.org',
+  'b.tile.openstreetmap.org',
+  'c.tile.openstreetmap.org',
+  'tiles.stadiamaps.com',
+  'server.arcgisonline.com',
+];
+
+// ─── Install ──────────────────────────────────────────────────────────────
+
+self.addEventListener('install', (event) => {
+  console.log('[SW] Installing yotrip service worker…');
+  event.waitUntil(
+    caches.open(SHELL_CACHE).then((cache) => {
+      return cache.addAll(SHELL_URLS).catch((err) => {
+        // Non-fatal: some shell files may not exist in dev mode
+        console.warn('[SW] Shell pre-cache partial failure (non-fatal):', err);
+      });
+    })
+  );
+  // Activate immediately without waiting for old tabs to close
+  self.skipWaiting();
+});
+
+// ─── Activate ─────────────────────────────────────────────────────────────
+
+self.addEventListener('activate', (event) => {
+  const CURRENT_CACHES = [SHELL_CACHE, MAP_CACHE];
+  event.waitUntil(
+    caches.keys().then((cacheNames) =>
+      Promise.all(
+        cacheNames
+          .filter((name) => !CURRENT_CACHES.includes(name))
+          .map((name) => {
+            console.log('[SW] Evicting stale cache:', name);
+            return caches.delete(name);
+          })
+      )
+    )
+  );
+  // Take control of all open clients immediately
+  self.clients.claim();
+});
+
+// ─── Fetch ────────────────────────────────────────────────────────────────
+
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url);
+
+  // 1. Map tile requests — Network-First, fall back to cache
+  const isMapTile = MAP_TILE_ORIGINS.some((origin) => url.hostname.includes(origin));
+  if (isMapTile) {
+    event.respondWith(
+      fetch(event.request)
+        .then((response) => {
+          if (response && response.status === 200) {
+            const clone = response.clone();
+            caches.open(MAP_CACHE).then((cache) => {
+              cache.put(event.request, clone);
+            });
+          }
+          return response;
+        })
+        .catch(() => caches.match(event.request))
+    );
+    return;
+  }
+
+  // 2. API calls — Network-Only (never cache API responses)
+  if (url.pathname.startsWith('/api/')) {
+    return; // Let the browser handle normally
+  }
+
+  // 3. App shell navigation — Cache-First for HTML, then network
+  if (event.request.mode === 'navigate') {
+    event.respondWith(
+      caches.match('/index.html').then((cached) => {
+        return cached || fetch(event.request);
+      })
+    );
+    return;
+  }
+
+  // 4. Static assets (JS/CSS/images) — Cache-First
+  event.respondWith(
+    caches.match(event.request).then((cached) => {
+      return cached || fetch(event.request);
+    })
+  );
+});

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { LandingPage } from './pages/LandingPage';
 import { ExploreMap } from './pages/ExploreMap';
 import { TourDetailPage } from './pages/TourDetailPage';
@@ -13,6 +13,7 @@ import { ConfirmProvider } from './hooks/useConfirm';
 import { NotificationProvider, useNotification } from './hooks/useNotification';
 import { io } from 'socket.io-client';
 import { Capacitor } from '@capacitor/core';
+import { initNetworkStatusListeners } from './utils/backgroundSync';
 
 interface GlobalNotificationListenerProps {
   user: any;
@@ -141,6 +142,29 @@ function App() {
   const [previousPage, setPreviousPage] = useState<'explore' | 'landing'>('explore');
   const [navigationPayload, setNavigationPayload] = useState<{ tourId: string; origin: { lat: number; lng: number }; destination: { lat: number; lng: number; name: string }; tourTitle: string } | null>(null);
 
+  // ── Service Worker registration ─────────────────────────────────────────
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker
+        .register('/sw.js', { scope: '/' })
+        .then((reg) => console.log('[SW] Registered, scope:', reg.scope))
+        .catch((err) => console.warn('[SW] Registration failed:', err));
+    }
+  }, []);
+
+  // ── Background sync network listeners ────────────────────────────────────
+  // refreshLanding is a stable callback that fires fetchPublicPhotos inside LandingPage.
+  // We use a window CustomEvent as a lightweight cross-component bus.
+  const triggerMapRefresh = useCallback(() => {
+    window.dispatchEvent(new CustomEvent('app:offlineSyncComplete'));
+  }, []);
+
+  useEffect(() => {
+    const cleanup = initNetworkStatusListeners(triggerMapRefresh);
+    return cleanup;
+  }, [triggerMapRefresh]);
+
+  // ── Auth + routing bootstrap ─────────────────────────────────────────────
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     const viewTourId = params.get('viewTour');

frontend/src/components/PublicPhotoModal.tsx

@@ -427,358 +427,308 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
           <X className="w-5 h-5" />
         </button>
 
-        {/* Left Side: Photo Detail */}
-        <div className="relative w-full md:w-3/5 md:h-full bg-slate-950 flex flex-col overflow-hidden group shrink-0">
-          
-          {/* Photo wrapper for mobile view (handles top overlay name and bottom-right like) */}
-          <div className="relative w-full flex items-center justify-center md:absolute md:inset-0 md:flex md:items-center md:justify-center bg-slate-950">
-            {/* Mobile Only: Uploader details overlay */}
-            <div className="absolute top-[calc(0.75rem+env(safe-area-inset-top,0px))] left-4 z-40 md:hidden flex items-center gap-2 bg-slate-950/70 backdrop-blur-md px-2.5 py-1.5 rounded-full border border-slate-700/50">
-              <div className="w-5 h-5 rounded-full bg-emerald-500/20 flex items-center justify-center">
-                <User className="w-3 h-3 text-emerald-400" />
-              </div>
-              <span className="text-xs text-slate-200 max-w-[120px] truncate">
-                {photo.uploader?.name || 'Ẩn danh'}
-              </span>
+        {/* ============================================================
+            TIER 3: FIXED PHOTO FRAME VIEWPORT (z-20 / sticky on mobile)
+            Aspect-square container. Does NOT resize on image swap.
+            Desktop: left 3/5 column, absolute-fill with overlay metadata.
+            ============================================================ */}
+        <div className="w-full aspect-square bg-slate-950 flex items-center justify-center sticky top-0 z-20 shrink-0 shadow-2xl border-b border-slate-900/60 md:relative md:aspect-auto md:w-3/5 md:h-full md:overflow-hidden md:border-b-0 group">
+
+          {/* Image fill */}
+          <a
+            href={`${window.location.origin}/api/v1/public-photos/${photo.id}/share`}
+            className="absolute inset-0 flex items-center justify-center cursor-zoom-in"
+            onClick={(e) => {
+              e.preventDefault();
+              setIsFullscreen(true);
+            }}
+          >
+            <img
+              src={photo.imageUrl}
+              alt="Public Map Upload"
+              onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+              onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+              className="w-full h-full object-contain select-none pointer-events-none"
+              draggable={false}
+            />
+            {(!isAuthorized || !isLoggedIn) && (
+              <div className="absolute inset-0 bg-transparent select-none z-10" />
+            )}
+          </a>
+
+          {/* TIER 3.1: LOCATION & TIMESTAMP OVERLAY — bottom-left inside image (z-30) */}
+          <div className="absolute bottom-3 left-3 z-30 flex flex-col gap-0.5 max-w-[70vw] md:max-w-[45%] pointer-events-none drop-shadow-[0_1px_3px_rgba(0,0,0,0.9)]">
+            <div className="flex items-center gap-1.5 text-[10px] font-bold text-blue-300">
+              <MapPin className="w-3.5 h-3.5 text-red-500 shrink-0" />
+              <span className="truncate leading-tight">{resolvedAddress}</span>
+            </div>
+            <div className="flex items-center gap-1.5 text-[9px] text-blue-200/80 pl-5">
+              <Calendar className="w-2.5 h-2.5 text-blue-300/70 shrink-0" />
+              <span>{new Date(photo.capturedAt).toLocaleDateString('vi-VN', {
+                day: '2-digit', month: '2-digit', year: 'numeric',
+                hour: '2-digit', minute: '2-digit'
+              })}</span>
             </div>
-
-            {/* Like Button Overlay */}
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                handleToggleLike();
-              }}
-              className="absolute bottom-4 right-4 z-40 flex items-center gap-1.5 bg-slate-950/70 hover:bg-slate-900/80 border border-slate-700/50 text-slate-200 hover:text-white font-bold py-1.5 px-3 rounded-full transition-all active:scale-95 text-[11px] backdrop-blur-md md:absolute md:top-[calc(1rem+env(safe-area-inset-top,0px))] md:left-4 md:bottom-auto md:right-auto"
-              title={isLiked ? "Bỏ thích" : "Thích"}
-            >
-              <Heart className={`w-4 h-4 transition-colors ${
-                isLiked ? 'text-rose-500 fill-rose-500 animate-in zoom-in-75' : 'text-slate-350 hover:text-rose-450'
-              }`} />
-              <span>{likeCount}</span>
-            </button>
-
-            <a
-              href={`${window.location.origin}/api/v1/public-photos/${photo.id}/share`}
-              className="w-full h-auto max-h-[85vh] object-contain cursor-zoom-in md:h-full md:max-h-none flex items-center justify-center relative"
-              onClick={(e) => {
-                e.preventDefault();
-                setIsFullscreen(true);
-              }}
-            >
-              <img
-                src={photo.imageUrl}
-                alt="Public Map Upload"
-                onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
-                onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
-                className={`w-full h-auto max-h-[85vh] object-contain md:h-full md:max-h-none select-none ${
-                  !isLoggedIn ? 'pointer-events-none' : ''
-                }`}
-                draggable={false}
-              />
-              {/* Shield overlay to prevent Save Image As on right-click / long press for non-owners */}
-              {(!isAuthorized || !isLoggedIn) && (
-                <div className="absolute inset-0 bg-transparent select-none z-10" />
-              )}
-            </a>
           </div>
 
-          {/* Info & Timeline overlay inside photo panel */}
-          <div className="relative z-20 p-6 bg-slate-900 border-b border-slate-800/60 md:absolute md:bottom-0 md:left-0 md:right-0 md:bg-gradient-to-t md:from-black/60 md:via-black/20 md:to-transparent md:border-b-0 flex flex-col gap-4">
-            
-            {/* Timeline scroll */}
+          {/* Like button — bottom-right on mobile, top-left on desktop */}
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              handleToggleLike();
+            }}
+            className="absolute bottom-3 right-3 z-30 flex items-center gap-1 bg-black/55 backdrop-blur-sm border border-white/10 rounded-xl px-2.5 py-1.5 text-[11px] font-bold transition-all active:scale-95 md:top-[calc(1rem+env(safe-area-inset-top,0px))] md:left-4 md:bottom-auto md:right-auto"
+            title={isLiked ? "Bỏ thích" : "Thích"}
+          >
+            <Heart className={`w-3.5 h-3.5 transition-colors ${
+              isLiked ? 'text-rose-500 fill-rose-500' : 'text-white'
+            }`} />
+            <span className="text-white">{likeCount}</span>
+          </button>
+
+          {/* Uploader pill — top-left on mobile */}
+          <div className="absolute top-[calc(0.75rem+env(safe-area-inset-top,0px))] left-3 z-30 md:hidden flex items-center gap-1.5 bg-black/55 backdrop-blur-sm px-2.5 py-1 rounded-full border border-white/10">
+            <div className="w-4 h-4 rounded-full bg-emerald-500/30 flex items-center justify-center">
+              <User className="w-2.5 h-2.5 text-emerald-300" />
+            </div>
+            <span className="text-[10px] text-slate-200 max-w-[110px] truncate font-semibold">
+              {photo.uploader?.name || 'Ẩn danh'}
+            </span>
+          </div>
+
+          {/* Desktop: overlay metadata gradient at bottom of photo column */}
+          <div className="hidden md:flex absolute bottom-0 left-0 right-0 z-20 px-6 pb-5 pt-12 bg-gradient-to-t from-black/70 via-black/20 to-transparent flex-col gap-1 pointer-events-none">
+            <h4 className="text-sm font-black text-white tracking-tight leading-snug drop-shadow">
+              {photo.metadata?.title || ''}
+            </h4>
+            {photo.metadata?.description && (
+              <p className="text-xs text-slate-300 leading-snug line-clamp-2 drop-shadow">{photo.metadata.description}</p>
+            )}
+            <div className="flex items-center gap-1.5 text-[10px] text-slate-300 mt-1">
+              <MapPin className="w-3 h-3 text-rose-400 shrink-0" />
+              <span className="truncate">{resolvedAddress}</span>
+            </div>
+            <div className="flex items-center gap-1.5 text-[10px] text-slate-400">
+              <Calendar className="w-2.5 h-2.5 shrink-0" />
+              <span>{new Date(photo.capturedAt).toLocaleDateString('vi-VN', {
+                day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit'
+              })}</span>
+            </div>
+          </div>
+
+          {/* Desktop thumbnail timeline carousel at the bottom */}
+          {photoGroup && photoGroup.length > 1 && (
+            <div className="hidden md:flex absolute bottom-0 left-0 right-0 z-20 px-4 pb-3 gap-2 overflow-x-auto no-scrollbar justify-end items-end pointer-events-auto">
+              {photoGroup.map((p) => {
+                const isActive = p.id === photo.id;
+                return (
+                  <button
+                    key={p.id}
+                    onClick={(e) => { e.stopPropagation(); onSelectPhoto?.(p); }}
+                    className={`relative w-10 h-10 rounded-xl overflow-hidden transition-all active:scale-95 shrink-0 ${
+                      isActive ? 'border-2 border-emerald-400 scale-105 shadow-lg' : 'border border-slate-600/50 opacity-70 hover:opacity-100'
+                    }`}
+                  >
+                    <img src={p.imageUrl} alt="thumb" className="w-full h-full object-cover pointer-events-none" />
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* ============================================================
+            TIER 2: SCROLLABLE COMMENTS PANEL (z-10)
+            Slides BEHIND the sticky image frame when swiping up on mobile.
+            Desktop: right 2/5 column with its own overflow-y-auto.
+            ============================================================ */}
+        <div className="flex-1 overflow-y-auto relative z-10 flex flex-col bg-slate-900 border-t md:border-t-0 md:border-l border-slate-800 md:w-2/5 md:flex-1 md:min-h-0">
+
+          {/* ---- TITLE HEADER: replaces old "Lịch sử ảnh tại vị trí này" strip ---- */}
+          <div className="px-5 pt-4 pb-0 bg-slate-900/95 backdrop-blur-md border-b border-slate-800/60 sticky top-0 z-10 flex flex-col gap-2">
+
+            {/* Row 1: Title + Edit button */}
+            <div className="flex items-start justify-between gap-3">
+              <div className="flex-1 min-w-0">
+                <h2 className="text-sm font-black text-slate-100 tracking-wide leading-snug">
+                  {photo.metadata?.title || 'Chưa có tiêu đề'}
+                </h2>
+                {photo.metadata?.description && (
+                  <p className="text-[11px] text-slate-400 leading-relaxed mt-0.5 line-clamp-2">
+                    {photo.metadata.description}
+                  </p>
+                )}
+              </div>
+              {isAuthorized && (
+                <button
+                  onClick={(e) => { e.stopPropagation(); setIsEditing(true); }}
+                  className="p-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700/50 rounded-xl text-slate-300 hover:text-white transition-all shrink-0"
+                  title="Chỉnh sửa thông tin"
+                >
+                  <Edit className="w-3.5 h-3.5" />
+                </button>
+              )}
+            </div>
+
+            {/* Row 2: Thumbnail timeline strip — below title, mobile only */}
             {photoGroup && photoGroup.length > 1 && (
-              <div className="flex flex-col gap-2 border-b border-slate-800/80 pb-3 relative z-20">
-                <span className="text-[10px] font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
-                  <span className="inline-block w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping"></span>
-                  Lịch sử ảnh tại vị trí này ({photoGroup.length})
-                </span>
-                <div className="flex gap-3 overflow-x-auto no-scrollbar py-1 relative z-20">
-                  {photoGroup.map((p) => {
-                    const isActive = p.id === photo.id;
-                    return (
-                      <button
-                        key={p.id}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onSelectPhoto?.(p);
-                        }}
-                        className={`relative w-12 h-12 rounded-xl overflow-hidden border-2 transition-all active:scale-95 shrink-0 ${
-                          isActive ? 'border-emerald-500 scale-110 shadow-lg' : 'border-slate-700 hover:border-slate-500'
-                        }`}
-                      >
-                        <img 
-                          src={p.imageUrl} 
-                          alt="Timeline thumbnail" 
-                          onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
-                          onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
-                          className={`w-full h-full object-cover ${
-                            !isLoggedIn ? 'pointer-events-none' : ''
-                          }`} 
-                        />
-                        <div className="absolute bottom-0 inset-x-0 bg-slate-950/70 text-[8px] text-center font-bold text-slate-300 py-0.5">
-                          {new Date(p.capturedAt).toLocaleDateString('vi-VN', { month: '2-digit', day: '2-digit' })}
-                        </div>
-                      </button>
-                    );
-                  })}
-                </div>
+              <div className="flex gap-2 overflow-x-auto no-scrollbar pb-3 md:hidden">
+                {photoGroup.map((p) => {
+                  const isActive = p.id === photo.id;
+                  const dateObj = new Date(p.capturedAt);
+                  const day = String(dateObj.getDate()).padStart(2, '0');
+                  const month = String(dateObj.getMonth() + 1).padStart(2, '0');
+                  return (
+                    <button
+                      key={p.id}
+                      onClick={(e) => { e.stopPropagation(); onSelectPhoto?.(p); }}
+                      className={`relative w-12 h-12 rounded-2xl overflow-hidden transition-all active:scale-95 shrink-0 ${
+                        isActive
+                          ? 'border-[3px] border-emerald-500 shadow-lg shadow-emerald-500/25'
+                          : 'border-2 border-slate-600 hover:border-slate-400'
+                      }`}
+                    >
+                      <img
+                        src={p.imageUrl}
+                        alt="thumb"
+                        onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+                        className="w-full h-full object-cover pointer-events-none"
+                      />
+                      <div className="absolute bottom-0 inset-x-0 bg-slate-950/70 text-[7px] text-center font-black text-slate-200 py-px tracking-wide">
+                        {day}-{month}
+                      </div>
+                    </button>
+                  );
+                })}
               </div>
             )}
+          </div>
 
-            {isEditing ? (
+          {/* Edit form (when editing) */}
+          {isEditing && (
+            <div className="px-5 py-4 border-b border-slate-800/60 bg-slate-900/95">
               <div className="flex flex-col gap-3 bg-slate-900/95 border border-slate-800 p-4 rounded-2xl animate-in slide-in-from-bottom-2">
                 <h4 className="text-xs font-black uppercase tracking-wider text-emerald-400">Chỉnh sửa thông tin ảnh</h4>
-                
                 <div className="space-y-2">
                   <div>
                     <label className="block text-[9px] uppercase font-bold tracking-wider text-slate-400 mb-1">Tiêu đề</label>
-                    <input
-                      type="text"
-                      value={editTitle}
-                      onChange={(e) => setEditTitle(e.target.value)}
+                    <input type="text" value={editTitle} onChange={(e) => setEditTitle(e.target.value)}
                       placeholder="Nhập tiêu đề cho ảnh..."
-                      className="w-full bg-slate-850 border border-slate-700/60 text-slate-100 rounded-xl px-3 py-2 text-base md:text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500"
-                    />
+                      className="w-full bg-slate-850 border border-slate-700/60 text-slate-100 rounded-xl px-3 py-2 text-base md:text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500" />
                   </div>
-
                   <div>
                     <label className="block text-[9px] uppercase font-bold tracking-wider text-slate-400 mb-1">Mô tả</label>
-                    <textarea
-                      value={editDescription}
-                      onChange={(e) => setEditDescription(e.target.value)}
-                      placeholder="Mô tả bức ảnh này..."
-                      rows={2}
-                      className="w-full bg-slate-850 border border-slate-700/60 text-slate-100 rounded-xl px-3 py-2 text-base md:text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500 resize-none"
-                    />
+                    <textarea value={editDescription} onChange={(e) => setEditDescription(e.target.value)}
+                      placeholder="Mô tả bức ảnh này..." rows={2}
+                      className="w-full bg-slate-850 border border-slate-700/60 text-slate-100 rounded-xl px-3 py-2 text-base md:text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500 resize-none" />
                   </div>
-
                   <div className="grid grid-cols-2 gap-2">
                     <div>
                       <label className="block text-[9px] uppercase font-bold tracking-wider text-slate-400 mb-1">Vĩ độ</label>
-                      <input
-                        type="number"
-                        step="any"
-                        value={editLat}
+                      <input type="number" step="any" value={editLat}
                         onChange={(e) => setEditLat(e.target.value === '' ? '' : parseFloat(e.target.value))}
                         placeholder="Vĩ độ..."
-                        className="w-full bg-slate-850 border border-slate-700/60 text-slate-100 rounded-xl px-3 py-2 text-base md:text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500"
-                      />
+                        className="w-full bg-slate-850 border border-slate-700/60 text-slate-100 rounded-xl px-3 py-2 text-base md:text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500" />
                     </div>
                     <div>
                       <label className="block text-[9px] uppercase font-bold tracking-wider text-slate-400 mb-1">Kinh độ</label>
-                      <input
-                        type="number"
-                        step="any"
-                        value={editLng}
+                      <input type="number" step="any" value={editLng}
                         onChange={(e) => setEditLng(e.target.value === '' ? '' : parseFloat(e.target.value))}
                         placeholder="Kinh độ..."
-                        className="w-full bg-slate-850 border border-slate-700/60 text-slate-100 rounded-xl px-3 py-2 text-base md:text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500"
-                      />
+                        className="w-full bg-slate-850 border border-slate-700/60 text-slate-100 rounded-xl px-3 py-2 text-base md:text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500" />
                     </div>
                   </div>
-
-                  <div className="flex justify-start">
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setIsMapOpen(true);
-                      }}
-                      className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-800 hover:bg-slate-750 border border-slate-700/50 text-slate-300 hover:text-white rounded-xl text-[10px] font-bold transition-all"
-                    >
-                      <MapPin className="w-3.5 h-3.5 text-rose-500" />
-                      Chọn trên bản đồ
-                    </button>
-                  </div>
+                  <button type="button" onClick={(e) => { e.stopPropagation(); setIsMapOpen(true); }}
+                    className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-800 hover:bg-slate-750 border border-slate-700/50 text-slate-300 hover:text-white rounded-xl text-[10px] font-bold transition-all">
+                    <MapPin className="w-3.5 h-3.5 text-rose-500" />
+                    Chọn trên bản đồ
+                  </button>
                 </div>
-
-                <div className="flex justify-end gap-2 mt-2">
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setIsEditing(false);
-                    }}
-                    disabled={isSavingEdit}
-                    className="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-xs font-bold transition-all"
-                  >
+                <div className="flex justify-end gap-2 mt-1">
+                  <button onClick={(e) => { e.stopPropagation(); setIsEditing(false); }} disabled={isSavingEdit}
+                    className="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-xs font-bold transition-all">
                     Hủy
                   </button>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleSaveEdit();
-                    }}
-                    disabled={isSavingEdit}
-                    className="flex items-center gap-1 px-4 py-1.5 bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-800 disabled:opacity-50 text-white rounded-lg text-xs font-bold transition-all"
-                  >
-                    {isSavingEdit ? (
-                      <>
-                        <Loader2 className="w-3 h-3 animate-spin" />
-                        Đang lưu...
-                      </>
-                    ) : (
-                      'Lưu lại'
-                    )}
+                  <button onClick={(e) => { e.stopPropagation(); handleSaveEdit(); }} disabled={isSavingEdit}
+                    className="flex items-center gap-1 px-4 py-1.5 bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-800 disabled:opacity-50 text-white rounded-lg text-xs font-bold transition-all">
+                    {isSavingEdit ? (<><Loader2 className="w-3 h-3 animate-spin" />Đang lưu...</>) : 'Lưu lại'}
                   </button>
                 </div>
               </div>
-            ) : (
-              <>
-                {/* Title & Description display */}
-                <div className="flex justify-between items-start gap-4">
-                  <div className="flex-1 min-w-0">
-                    {photo.metadata?.title ? (
-                      <h4 className="text-sm font-black text-white tracking-tight leading-snug break-words">
-                        {photo.metadata.title}
-                      </h4>
-                    ) : (
-                      <span className="text-[10px] text-slate-500 italic block mb-1">Chưa có tiêu đề</span>
-                    )}
-                    {photo.metadata?.description ? (
-                      <p className="text-xs text-slate-300 leading-relaxed mt-1 max-h-20 overflow-y-auto no-scrollbar break-words">
-                        {photo.metadata.description}
-                      </p>
-                    ) : (
-                      <span className="text-[10px] text-slate-500 italic block mt-1">Chưa có mô tả</span>
-                    )}
-                  </div>
-                  {isAuthorized && (
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setIsEditing(true);
-                      }}
-                      className="p-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700/50 rounded-xl text-slate-300 hover:text-white transition-all shrink-0"
-                      title="Chỉnh sửa thông tin"
-                    >
-                      <Edit className="w-3.5 h-3.5" />
-                    </button>
-                  )}
-                </div>
-
-                {/* Photo Metadata */}
-                <div className="flex flex-wrap items-center justify-between gap-4 border-t border-slate-800/80 pt-3 text-xs text-slate-350">
-                  <div className="space-y-1 text-left">
-                    <div className="flex items-center gap-1.5 text-slate-400">
-                      <Calendar className="w-3.5 h-3.5" />
-                      Ngày chụp: {new Date(photo.capturedAt).toLocaleDateString('vi-VN', {
-                        day: '2-digit',
-                        month: '2-digit',
-                        year: 'numeric',
-                        hour: '2-digit',
-                        minute: '2-digit'
-                      })}
-                    </div>
-                    <div className="flex items-center gap-1.5 text-slate-400" title={photo.metadata?.lat && photo.metadata?.lng ? `${photo.metadata.lat.toFixed(6)}, ${photo.metadata.lng.toFixed(6)}` : ''}>
-                      <MapPin className="w-3.5 h-3.5 text-rose-500" />
-                      Địa điểm: {resolvedAddress}
-                    </div>
-                    <div className="hidden md:flex items-center gap-1.5 text-xs text-emerald-400">
-                      <User className="w-3.5 h-3.5" />
-                      Người đăng: {photo.uploader?.name || 'Ẩn danh'}
-                    </div>
-                  </div>
-                  {isAuthorized && photo.originalUrl && (
-                    <a
-                      href={photo.originalUrl}
-                      download
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-1.5 bg-slate-800/80 hover:bg-slate-700/80 border border-slate-700/50 text-slate-200 hover:text-white font-bold py-1 px-3 rounded-full transition-all active:scale-95 text-[10px]"
-                    >
-                      <Download className="w-3.5 h-3.5 text-emerald-500" />
-                      Tải ảnh gốc
-                    </a>
-                  )}
-                </div>
-              </>
-            )}
-
-            <style>{`
-              .no-scrollbar::-webkit-scrollbar {
-                display: none;
-              }
-              .no-scrollbar {
-                -ms-overflow-style: none;
-                scrollbar-width: none;
-              }
-            `}</style>
-          </div>
-        </div>
-
-        {/* Right Side: Comments */}
-        <div className="w-full md:w-2/5 md:flex-1 md:min-h-0 flex flex-col bg-slate-900 border-t md:border-t-0 md:border-l border-slate-800">
-          
-          {/* Comments Header */}
-          <div className="hidden md:block p-6 border-b border-slate-800">
-            <div>
-              <h3 className="text-lg font-black tracking-tight text-white flex items-center gap-2">
-                <MessageSquare className="w-5 h-5 text-emerald-500" />
-                {t('commentSectionTitle')}
-              </h3>
-              <p className="text-xs text-slate-400 mt-1">Ảnh chia sẻ công khai trên bản đồ</p>
             </div>
+          )}
+
+          {/* Download original (authorized) */}
+          {isAuthorized && photo.originalUrl && (
+            <div className="px-5 py-2 border-b border-slate-800/40 flex justify-end">
+              <a href={photo.originalUrl} download target="_blank" rel="noopener noreferrer"
+                className="flex items-center gap-1.5 bg-slate-800/80 hover:bg-slate-700/80 border border-slate-700/50 text-slate-200 hover:text-white font-bold py-1 px-3 rounded-full transition-all active:scale-95 text-[10px]">
+                <Download className="w-3.5 h-3.5 text-emerald-500" />
+                Tải ảnh gốc
+              </a>
+            </div>
+          )}
+
+          {/* ---- COMMENTS HEADER (desktop) ---- */}
+          <div className="hidden md:block px-6 py-4 border-b border-slate-800">
+            <h3 className="text-base font-black tracking-tight text-white flex items-center gap-2">
+              <MessageSquare className="w-4 h-4 text-emerald-500" />
+              {t('commentSectionTitle')}
+            </h3>
+            <p className="text-xs text-slate-400 mt-0.5">Ảnh chia sẻ công khai trên bản đồ</p>
           </div>
 
-          {/* Comments list scroll area */}
-          <div className="md:flex-1 md:overflow-y-auto p-6 space-y-4 bg-slate-900/50">
+          {/* ---- COMMENT FEED ---- */}
+          <div className="p-4 space-y-4 flex-1">
             {isLoading ? (
               <div className="flex flex-col items-center justify-center py-12 text-slate-500 gap-2">
                 <Loader2 className="w-8 h-8 animate-spin text-emerald-500" />
                 <span className="text-xs font-semibold">{t('loading')}</span>
               </div>
             ) : comments.length === 0 ? (
-              <div className="flex flex-col items-center justify-center py-16 text-slate-500 gap-3">
+              <div className="flex flex-col items-center justify-center py-12 text-slate-500 gap-3">
                 <div className="p-4 bg-slate-800/40 rounded-full text-slate-600">
-                  <MessageSquare className="w-8 h-8" />
+                  <MessageSquare className="w-7 h-7" />
                 </div>
                 <span className="text-sm font-semibold italic">Chưa có bình luận nào. Hãy bắt đầu cuộc trò chuyện!</span>
               </div>
             ) : (
-              comments.map((c) => {
-                return (
-                  <div key={c.id} className="flex gap-3 items-start animate-in fade-in slide-in-from-bottom-2 duration-200">
-                    <div className="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700/60">
-                      <User className="w-4.5 h-4.5 text-slate-400" />
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <div className="bg-slate-800/55 p-3.5 rounded-2xl rounded-tl-none border border-slate-800 shadow-lg">
-                        <div className="flex justify-between items-center mb-1">
-                          <span className="text-xs font-black text-slate-200 truncate">{c.userName}</span>
-                          <div className="flex items-center gap-2">
-                            <span className="text-[9px] font-medium text-slate-500">
-                              {new Date(c.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                            </span>
-                            {(currentUser?.isAdmin || 
-                              currentUser?.id === c.userId || 
-                              currentUser?.id === photo.uploaderId || 
-                              currentUser?.id === photo.uploader?.id) && (
-                              <button
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleDeleteComment(c.id);
-                                }}
-                                className="text-slate-500 hover:text-rose-500 transition-colors p-0.5"
-                                title={t('delete') || "Xóa"}
-                              >
-                                <Trash2 className="w-3.5 h-3.5" />
-                              </button>
-                            )}
-                          </div>
+              comments.map((c) => (
+                <div key={c.id} className="flex gap-3 items-start animate-in fade-in slide-in-from-bottom-2 duration-200">
+                  <div className="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700/60">
+                    <User className="w-4 h-4 text-slate-400" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="bg-slate-800/55 p-3.5 rounded-2xl rounded-tl-none border border-slate-800 shadow-lg">
+                      <div className="flex justify-between items-center mb-1">
+                        <span className="text-xs font-black text-slate-200 truncate">{c.userName}</span>
+                        <div className="flex items-center gap-2">
+                          <span className="text-[9px] font-medium text-slate-500">
+                            {new Date(c.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                          </span>
+                          {(currentUser?.isAdmin || currentUser?.id === c.userId ||
+                            currentUser?.id === photo.uploaderId || currentUser?.id === photo.uploader?.id) && (
+                            <button
+                              onClick={(e) => { e.stopPropagation(); handleDeleteComment(c.id); }}
+                              className="text-slate-500 hover:text-rose-500 transition-colors p-0.5"
+                              title={t('delete') || "Xóa"}
+                            >
+                              <Trash2 className="w-3.5 h-3.5" />
+                            </button>
+                          )}
                         </div>
-                        <p className="text-sm text-slate-300 leading-relaxed break-words">{c.content}</p>
                       </div>
+                      <p className="text-sm text-slate-300 leading-relaxed break-words">{c.content}</p>
                     </div>
                   </div>
-                );
-              })
+                </div>
+              ))
             )}
-
             <div ref={commentsEndRef} />
           </div>
 
-          {/* Comment Input Area */}
-          <div className="sticky bottom-0 md:static p-4 bg-slate-950 md:bg-slate-950/40 border-t border-slate-800/80 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] md:pb-4 z-40">
+          {/* ---- STICKY COMMENT INPUT TRAY BAR (z-20 stays above comments) ---- */}
+          <div className="sticky bottom-0 z-20 p-4 bg-slate-950 border-t border-slate-800/80 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] md:pb-4">
             <div className="relative flex items-center gap-2">
               <input
                 type="text"
@@ -790,22 +740,19 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
                 disabled={isSending}
               />
               <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleSend();
-                }}
+                onClick={(e) => { e.stopPropagation(); handleSend(); }}
                 disabled={!newComment.trim() || isSending}
-                className="p-3 bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-800 disabled:opacity-40 text-white rounded-2xl transition-all active:scale-95 shadow-lg shadow-emerald-950/30 flex items-center justify-center"
+                className="p-3 bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-800 disabled:opacity-40 text-white rounded-2xl transition-all active:scale-95 shadow-lg flex items-center justify-center"
               >
-                {isSending ? (
-                  <Loader2 className="w-4.5 h-4.5 animate-spin" />
-                ) : (
-                  <Send className="w-4.5 h-4.5" />
-                )}
+                {isSending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
               </button>
             </div>
           </div>
 
+          <style>{`
+            .no-scrollbar::-webkit-scrollbar { display: none; }
+            .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+          `}</style>
         </div>
 
       </div>

frontend/src/pages/LandingPage.tsx

@@ -15,6 +15,7 @@ import { processImageModeration } from '../hooks/useImageModeration';
 import { useTranslation } from '../hooks/useTranslation';
 import { processAndResizeImage } from '../utils/imageProcessor';
 import { getDeviceLocation } from '../utils/geolocation';
+import { queueOfflineUpload } from '../utils/offlineQueue';
 import { Capacitor } from '@capacitor/core';
 import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
 
@@ -182,6 +183,16 @@ export const LandingPage: React.FC<LandingPageProps> = ({
     fetchBlacklist();
   }, []);
 
+  // Listen for background-sync completion event dispatched by App.tsx
+  useEffect(() => {
+    const handleSyncComplete = () => {
+      console.log('[LandingPage] Offline sync complete — refreshing public photos…');
+      fetchPublicPhotos();
+    };
+    window.addEventListener('app:offlineSyncComplete', handleSyncComplete);
+    return () => window.removeEventListener('app:offlineSyncComplete', handleSyncComplete);
+  }, []);
+
   useEffect(() => {
     if (publicPhotos.length <= 1) return;
     const interval = setInterval(() => {
@@ -307,6 +318,46 @@ export const LandingPage: React.FC<LandingPageProps> = ({
     if (!pendingPhotoFile) return;
 
     setIsTagsModalOpen(false);
+
+    // ── OFFLINE GUARD ────────────────────────────────────────────────────────────
+    if (!navigator.onLine) {
+      try {
+        const token = localStorage.getItem('token') || localStorage.getItem('guest_token') || '';
+        const formFields: Record<string, string> = {};
+        if (pendingPhotoLocation) {
+          formFields['latitude']  = pendingPhotoLocation.latitude.toString();
+          formFields['longitude'] = pendingPhotoLocation.longitude.toString();
+        }
+        if (selectedTags.length > 0) {
+          formFields['tags'] = JSON.stringify(selectedTags);
+        }
+
+        await queueOfflineUpload({
+          endpoint:    'https://yotrip.labz.io.vn/api/v1/photos/upload-anonymous',
+          authToken:   token,
+          fileBlob:    pendingPhotoFile,
+          fileName:    pendingPhotoFile.name,
+          formFields,
+        });
+
+        notify({
+          title:   'Ảnh đã được lưu tạm ngoại tuyến 📦',
+          message: 'Kết nối lại mạng, ảnh sẽ tự động được tải lên bản đồ.',
+          type:    'info',
+        });
+      } catch (err) {
+        notify({ title: 'Lỗi', message: 'Không thể lưu ảnh ngoại tuyến.', type: 'error' });
+      } finally {
+        setPendingPhotoFile(null);
+        setPendingPhotoLocation(null);
+        if (photoPreviewUrl) {
+          URL.revokeObjectURL(photoPreviewUrl);
+          setPhotoPreviewUrl('');
+        }
+      }
+      return;
+    }
+    // ── ONLINE PATH (original logic) ────────────────────────────────────────────────
     notify({ title: 'Đang tải lên...', message: 'Vui lòng chờ trong giây lát.', type: 'info' });
 
     try {

frontend/src/pages/MemberDashboard.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { io, Socket } from 'socket.io-client';
 import { Capacitor } from '@capacitor/core';
 import { BACKEND_URL } from '@/utils/backendEndpoint';
+import { queueOfflineUpload } from '@/utils/offlineQueue';
 import {
   Compass,
   Users,
@@ -287,6 +288,37 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
       }
       setIsLocating(false);
 
+      // ── OFFLINE GUARD ──────────────────────────────────────────────────────────
+      if (!navigator.onLine) {
+        try {
+          const token = localStorage.getItem('token') || '';
+          const formFields: Record<string, string> = {};
+          if (attachedLocation) {
+            formFields['latitude']  = attachedLocation.latitude.toString();
+            formFields['longitude'] = attachedLocation.longitude.toString();
+          }
+
+          await queueOfflineUpload({
+            endpoint:  `${BACKEND_URL}/api/v1/tours/${tourId}/photos`,
+            authToken: token,
+            fileBlob:  file,
+            fileName:  file.name,
+            formFields,
+          });
+
+          notify({
+            title:   'Ảnh đã được lưu tạm ngoại tuyến 📦',
+            message: 'Kết nối lại mạng, ảnh sẽ tự động được tải lên tour.',
+            type: 'info',
+          });
+        } catch (err) {
+          notify({ title: 'Lỗi', message: 'Không thể lưu ảnh ngoại tuyến.', type: 'error' });
+        } finally {
+          if (cameraInputRef.current) cameraInputRef.current.value = '';
+        }
+        return;
+      }
+      // ── ONLINE PATH ───────────────────────────────────────────────────────────────
       // Upload photo to tour
       setIsUploading(true);
       try {

frontend/src/utils/backgroundSync.ts

@@ -0,0 +1,113 @@
+/**
+ * backgroundSync.ts
+ * ───────────────────────────────────────────────────────────────────────────
+ * Background sync engine:
+ *   • Reads all pending items from IndexedDB when connectivity is restored
+ *   • Replays each upload as a multipart/form-data POST
+ *   • Removes the item from the queue on server 2xx acknowledgement
+ *   • Calls the optional `onSynced` callback after all items are flushed
+ *     (so the map/photo list can refresh reactively)
+ *
+ * Also exports `initNetworkStatusListeners` to wire everything up once at
+ * application startup.
+ */
+
+import { getPendingUploads, getPendingCount, removePendingUpload } from './offlineQueue';
+
+let isSyncing = false; // guard against concurrent sync runs
+
+// ─── Core sync engine ───────────────────────────────────────────────────────
+
+export const executeBackgroundSyncEngine = async (
+  onSynced?: () => void
+): Promise<void> => {
+  if (isSyncing) return; // already running
+  if (!navigator.onLine) return;
+
+  const pending = await getPendingUploads();
+  if (pending.length === 0) return;
+
+  isSyncing = true;
+  console.log(
+    `🔄 [BackgroundSync] Internet restored — syncing ${pending.length} pending upload(s) to server…`
+  );
+
+  let syncedCount = 0;
+
+  for (const item of pending) {
+    try {
+      const formData = new FormData();
+
+      // Re-attach the image file
+      formData.append('images', item.fileBlob, item.fileName);
+
+      // Re-attach all serialised form fields (lat, lng, tags, capturedAt …)
+      for (const [key, value] of Object.entries(item.formFields)) {
+        formData.append(key, value);
+      }
+
+      const response = await fetch(item.endpoint, {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${item.authToken}` },
+        body: formData,
+      });
+
+      if (response.ok) {
+        await removePendingUpload(item.id);
+        syncedCount++;
+        console.log(`✅ [BackgroundSync] Photo "${item.fileName}" (${item.id}) synced.`);
+      } else {
+        const body = await response.text();
+        console.warn(
+          `⚠️  [BackgroundSync] Server rejected ${item.id} (${response.status}): ${body}`
+        );
+        // Don't break — try remaining items; server-rejected items stay in queue
+      }
+    } catch (error) {
+      console.error(
+        `✖  [BackgroundSync] Network error on ${item.id} — will retry on next reconnect:`,
+        error
+      );
+      // Network error mid-sync: stop and wait for the next 'online' event
+      break;
+    }
+  }
+
+  isSyncing = false;
+
+  if (syncedCount > 0 && onSynced) {
+    console.log(`🗺  [BackgroundSync] ${syncedCount} photo(s) synced — refreshing map pins…`);
+    onSynced();
+  }
+};
+
+// ─── Pending count helper (for optional UI badge) ───────────────────────────
+
+export const getOfflinePendingCount = getPendingCount;
+
+// ─── App startup hook ───────────────────────────────────────────────────────
+
+/**
+ * Call once during App mount.
+ * Attaches the `window.online` listener AND does an immediate
+ * flush in case the device was offline while the app was closed.
+ */
+export const initNetworkStatusListeners = (onSynced?: () => void): (() => void) => {
+  const handleOnline = () => {
+    console.log('🌐 [BackgroundSync] Network restored — triggering sync…');
+    executeBackgroundSyncEngine(onSynced);
+  };
+
+  window.addEventListener('online', handleOnline);
+
+  // Startup guard: if we're already online, attempt an immediate flush
+  if (navigator.onLine) {
+    // Defer slightly so React tree is fully mounted before map refreshes
+    setTimeout(() => executeBackgroundSyncEngine(onSynced), 2000);
+  }
+
+  // Return cleanup function for useEffect
+  return () => {
+    window.removeEventListener('online', handleOnline);
+  };
+};

frontend/src/utils/offlineQueue.ts

@@ -0,0 +1,115 @@
+/**
+ * offlineQueue.ts
+ * ───────────────────────────────────────────────────────────────────────────
+ * Offline photo upload queue backed by native IndexedDB.
+ * No external libraries — works in all modern browsers and Capacitor WebViews.
+ *
+ * Stored schema per item:
+ *   id          — UUID generated at queue time
+ *   endpoint    — full upload URL (e.g. https://yotrip.labz.io.vn/api/v1/photos/upload-anonymous)
+ *   authToken   — Bearer token captured at queue time
+ *   fileBlob    — raw Blob of the processed image
+ *   fileName    — original filename (e.g. "photo-1718000000.jpg")
+ *   formFields  — key-value pairs: latitude, longitude, capturedAt, tags …
+ *   timestamp   — epoch ms when the item was queued
+ */
+
+const DB_NAME    = 'yotrip-offline-db';
+const DB_VERSION = 1;
+const STORE_NAME = 'pending-uploads';
+
+export interface OfflineUploadItem {
+  id: string;
+  endpoint: string;
+  authToken: string;
+  fileBlob: Blob;
+  fileName: string;
+  formFields: Record<string, string>;
+  timestamp: number;
+}
+
+// ─── Internal DB bootstrap ──────────────────────────────────────────────────
+
+const getDB = (): Promise<IDBDatabase> =>
+  new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+
+    req.onupgradeneeded = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: 'id' });
+      }
+    };
+
+    req.onsuccess = () => resolve(req.result);
+    req.onerror   = () => reject(req.error);
+  });
+
+// ─── Public API ─────────────────────────────────────────────────────────────
+
+/**
+ * Stash a failed upload into the local IndexedDB queue.
+ * Returns the generated item id.
+ */
+export const queueOfflineUpload = async (
+  data: Omit<OfflineUploadItem, 'id' | 'timestamp'>
+): Promise<string> => {
+  const db = await getDB();
+  const id  = crypto.randomUUID();
+  const item: OfflineUploadItem = { ...data, id, timestamp: Date.now() };
+
+  await new Promise<void>((resolve, reject) => {
+    const tx    = db.transaction(STORE_NAME, 'readwrite');
+    const store = tx.objectStore(STORE_NAME);
+    const req   = store.put(item);
+    req.onsuccess = () => resolve();
+    req.onerror   = () => reject(req.error);
+  });
+
+  console.log(`📦 [OfflineQueue] Photo "${item.fileName}" (${id}) queued for background sync.`);
+  return id;
+};
+
+/**
+ * Retrieve all pending items ordered by timestamp (oldest first).
+ */
+export const getPendingUploads = async (): Promise<OfflineUploadItem[]> => {
+  const db = await getDB();
+
+  return new Promise((resolve, reject) => {
+    const tx    = db.transaction(STORE_NAME, 'readonly');
+    const store = tx.objectStore(STORE_NAME);
+    const req   = store.getAll();
+    req.onsuccess = () =>
+      resolve((req.result as OfflineUploadItem[]).sort((a, b) => a.timestamp - b.timestamp));
+    req.onerror   = () => reject(req.error);
+  });
+};
+
+/**
+ * Get the total count of pending items (for UI badge).
+ */
+export const getPendingCount = async (): Promise<number> => {
+  const db = await getDB();
+  return new Promise((resolve, reject) => {
+    const tx    = db.transaction(STORE_NAME, 'readonly');
+    const store = tx.objectStore(STORE_NAME);
+    const req   = store.count();
+    req.onsuccess = () => resolve(req.result);
+    req.onerror   = () => reject(req.error);
+  });
+};
+
+/**
+ * Remove a successfully synced item from the queue.
+ */
+export const removePendingUpload = async (id: string): Promise<void> => {
+  const db = await getDB();
+  await new Promise<void>((resolve, reject) => {
+    const tx    = db.transaction(STORE_NAME, 'readwrite');
+    const store = tx.objectStore(STORE_NAME);
+    const req   = store.delete(id);
+    req.onsuccess = () => resolve();
+    req.onerror   = () => reject(req.error);
+  });
+};