feat: khi người dùng click vào nút Chi tiết hành trình thì sẽ tự cuộn đến mốc thời gian hiện tại

DATE_FIX_TOUR.md

@@ -0,0 +1,126 @@
+# To AI Agent: Implement Smart Date-Based Accordion Auto-Expansion and Smooth Viewport Auto-Scroll
+
+## 1. Context & UI/UX Requirements
+We are enhancing the routing UX between `MemberDashboard.tsx` and `ItineraryTimeline.tsx` based on `image_cc31a4.png`.
+
+### Functional Specifications:
+1. **Date-Matching Evaluation:** When a user clicks "Chi tiết hành trình" on a tour card, calculate if the current user system local date falls inside any Stage/Leg timeline block.
+2. **Auto-Expansion State:** On timeline page load, the matched Leg accordion must be expanded by default (`expandedStageId === leg.id`).
+3. **Smart Auto-Scroll Layout:** The viewport must smoothly auto-scroll so that the expanded Leg's title bar lands **exactly below the sticky navigation tab bar** ("Lộ trình", "Chi phí", etc.), making it fully visible at the top of the viewport without layout clipping.
+
+---
+
+## 2. Technical Architecture & Layout Constraints
+
+- **The Sticky Header Challenge:** Since the top navigation tab bar uses sticky/fixed positioning, a naive `scrollIntoView({ block: 'start' })` will cause the Leg's title to crawl *underneath* the tabs, hiding it.
+- **The Solution:** We will inject a dynamic CSS scroll-margin-top parameter (`scroll-mt-[70px]` or matching header height) on each Leg container, and trigger a minor delayed layout effect pool using a React `setTimeout` to wait for the DOM accordion expansion reflow before pulling the scroll trigger.
+
+---
+
+## 3. Code Refactoring Blueprint
+
+### Step 1: Update Navigation Payload Handler in Dashboard Component
+Ensure the `MemberDashboard.tsx` accurately packages the matched target identifier into the client route state bucket:
+
+```typescript
+import { useNavigate } from 'react-router-dom';
+
+const navigate = useNavigate();
+
+const handleNavigateToItinerary = (tour: any) => {
+  let targetLegId = null;
+
+  if (tour?.legs && tour.legs.length > 0) {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    for (const leg of tour.legs) {
+      const rawStart = leg.startDate || leg.plannedStart || leg.date;
+      const rawEnd = leg.endDate || leg.plannedEnd || leg.date;
+
+      if (rawStart) {
+        const startBound = new Date(rawStart);
+        startBound.setHours(0, 0, 0, 0);
+
+        const endBound = rawEnd ? new Date(rawEnd) : new Date(rawStart);
+        endBound.setHours(23, 59, 59, 999);
+
+        if (today >= startBound && today <= endBound) {
+          targetLegId = leg.id;
+          break;
+        }
+      }
+    }
+
+    if (!targetLegId) {
+      targetLegId = tour.legs[0].id; // Fallback to Chặng 1 if out of tour bounds
+    }
+  }
+
+  navigate(`/tour/${tour.id}`, { 
+    state: { defaultExpandedLegId: targetLegId, shouldScrollToTarget: true } 
+  });
+};
+
+### Step 2: Inject Safe Identifiers and Scroll Margin inside ItineraryTimeline
+Locate the top-level outer container div of each Leg item inside the timeline loop (currentTour.legs.map). Assign a unique id and a scroll margin class utility:
+
+{currentTour.legs.map((leg: any, legIdx: number) => (
+  <div 
+    key={leg.id}
+    id={`leg-anchor-node-${leg.id}`}
+    /* CRITICAL: scroll-mt-[70px] leaves a 70px buffer space at the top. 
+      Adjust '70px' to match the exact height of your white Tour Navigation Tabs bar!
+    */
+    className="scroll-mt-[70px] transition-all w-full mb-4"
+  >
+    {/* Accordion Header Title ("Chặng 2: Dạo chơi ở xứ hoa vàng...") */}
+    <div className="flex items-center justify-between ...">
+       ...
+    </div>
+  </div>
+))}
+
+### Step 3: Implement Lifecycle Interaction Trigger Engine
+Inside ItineraryTimeline.tsx, listen to the passed history route parameters. Set the state, then handle the async smooth scrolling action:
+
+import { useLocation } from 'react-router-dom';
+
+const location = useLocation();
+const [expandedStageId, setExpandedStageId] = useState<string | null>(null);
+
+useEffect(() => {
+  if (location.state?.defaultExpandedLegId) {
+    const targetId = location.state.defaultExpandedLegId;
+    
+    // 1. Instantly trigger the accordion state layout expansion
+    setExpandedStageId(targetId);
+
+    // 2. Schedule a deferred macro-task callback to allow DOM re-renders to finish
+    if (location.state?.shouldScrollToTarget) {
+      const scrollTimer = setTimeout(() => {
+        const targetElement = document.getElementById(`leg-anchor-node-${targetId}`);
+        if (targetElement) {
+          targetElement.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'start' 
+          });
+        }
+        
+        // Clear history router state token flags to prevent repeating scroll on subsequent reload shifts
+        window.history.replaceState({}, document.title);
+      }, 150); // 150ms ensures smooth accordion height deployment transition finishes
+
+      return () => clearTimeout(scrollTimer);
+    }
+  } else if (currentTour?.legs && currentTour.legs.length > 0 && !expandedStageId) {
+    setExpandedStageId(currentTour.legs[0].id);
+  }
+}, [location.state, currentTour]);
+
+## 4. Quality Control & Acceptance Verification
+[ ] Date Matching Accuracy: Set today's date context matching a target Leg configuration profile. Tap the transition interface button from dashboard. The page must route directly and expand the target container block node.
+
+[ ] Flush Viewport Ceiling Test: The animated target header segment node must slide upwards smoothly. It must lock positions cleanly right below the lowest baseline layer shadow boundary of the Tab Controller without passing behind it.
+
+[ ] State Cleanliness Check: Refreshing or navigating back and forth within the active Timeline panel after the initial landing should not lock or force layout views to keep jumping scroll heights automatically.

DATE_OF_TOUR.md

@@ -1,106 +0,0 @@
-# To AI Agent: Implement Smart Date-Based Accordion Auto-Expansion on Itinerary Navigation
-
-## 1. Context & Feature Objective
-We are introducing a smart UX routing feature between the `MemberDashboard.tsx` (or Tour Card grid) and the `ItineraryTimeline.tsx` detailed view as shown in `image_c1bcff.png` and `image_c1bdb7.png`.
-
-- **The Goal:** When a user clicks the "Chi tiết hành trình" (Itinerary Details) button on a tour card, the system must evaluate the user's **current real-time system date**. It will match this date against the date ranges allocated to each Stage/Leg within that specific tour. 
-- **Action:** Upon navigating to the timeline page, the accordion wrapper corresponding to today's matching Leg must be **expanded by default** (`expandedStageId === leg.id`). If today's date falls outside the entire tour timeline (before start or after end), fallback to expanding the very first Leg (`legs[0].id`).
-
----
-
-## 2. Technical Implementation Architecture
-
-We will use `react-router-dom`'s navigation state mechanism to transfer the target calculated ID across routing boundaries without polluting the URL structure with complex query strings.
-
-### Execution Blueprint:
-1. **In Dashboard / Card Component:** Intercept the click event on "Chi tiết hành trình". Calculate the matching `leg.id` using a safe date-range comparison algorithm. Pass it inside the `Maps()` state payload.
-2. **In Timeline Component:** Check for the passed state parameter inside a mount-level `useEffect` hook. If detected, override the initial `expandedStageId` state with this smart calculated ID.
-
----
-
-## 3. Detailed Code Specifications
-
-### Step 1: Implement Date-Matching Engine in Dashboard
-Locate the "Chi tiết hành trình" action button inside the dashboard module. Refactor its click handler to compute the current timezone-safe operational timeline match:
-
-```typescript
-import { useNavigate } from 'react-router-dom';
-
-// Inside your Tour Card / MemberDashboard component:
-const navigate = useNavigate();
-
-const handleNavigateToItinerary = (tour: any) => {
-  let targetLegId = null;
-
-  if (tour?.legs && tour.legs.length > 0) {
-    // 1. Get current system local time stripped of hours/minutes for pure date comparison
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-
-    // 2. Loop and evaluate leg date bounds
-    for (const leg of tour.legs) {
-      // Resolve flexible date parameter keys from schema model
-      const rawStart = leg.startDate || leg.plannedStart || leg.date;
-      const rawEnd = leg.endDate || leg.plannedEnd || leg.date;
-
-      if (rawStart) {
-        const startBound = new Date(rawStart);
-        startBound.setHours(0, 0, 0, 0);
-
-        const endBound = rawEnd ? new Date(rawEnd) : new Date(rawStart);
-        endBound.setHours(23, 59, 59, 999);
-
-        // Check if today falls cleanly inside this specific leg's timeline envelope
-        if (today >= startBound && today <= endBound) {
-          targetLegId = leg.id;
-          break; // Match found, terminate loop early
-        }
-      }
-    }
-
-    // 3. Robust Fallback: If today doesn't match any leg, default to the first leg
-    if (!targetLegId) {
-      targetLegId = tour.legs[0].id;
-    }
-  }
-
-  // 4. Route with state package injection
-  navigate(`/tour/${tour.id}`, { 
-    state: { defaultExpandedLegId: targetLegId } 
-  });
-};
-
-Update your JSX button connector to trigger this method:
-
-<button 
-  onClick={() => handleNavigateToItinerary(currentTour)}
-  className="flex-1 bg-yotrip-surface ... flex items-center justify-center"
->
-  Chi tiết hành trình
-</button>
-
-### Step 2: Consume State Payload inside the Itinerary Timeline Page
-Locate the state hooks where expandedStageId is managed inside your timeline component. Update the initialization lifecycle engine to look for the navigation bundle parameters:
-
-import { useLocation } from 'react-router-dom';
-
-// Inside your main Itinerary Timeline rendering component:
-const location = useLocation();
-const [expandedStageId, setExpandedStageId] = useState<string | null>(null);
-
-useEffect(() => {
-  // Check if a specific leg ID was passed down via smart routing engine
-  if (location.state?.defaultExpandedLegId) {
-    setExpandedStageId(location.state.defaultExpandedLegId);
-  } else if (currentTour?.legs && currentTour.legs.length > 0) {
-    // Standard basic fallback behavior if user accessed URL directly without dashboard state
-    setExpandedStageId(currentTour.legs[0].id);
-  }
-}, [location.state, currentTour]);
-
-## 4. Verification & Acceptance Criteria
-[ ] Mid-Tour Testing: Set a tour leg's duration date range to cover the current real-world date. Click "Chi tiết hành trình" from the dashboard. The timeline page must load with that specific leg opened automatically.
-
-[ ] Out-of-Bounds Fallback Testing: Access a historical tour (e.g., a trip from 2024). Click the details button. The system must gracefully recognize no dates match today, and auto-expand Chặng 1 (legs[0]) instead of breaking or leaving all accordions closed.
-
-[ ] Direct URL Access Resilience: Manually type the tour URL directly into the browser address bar (without clicking the dashboard button). The timeline state must recover gracefully and default open the first leg seamlessly.

frontend/dist/index.html

@@ -21,8 +21,8 @@
     <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-BGRXypxd.js"></script>
+    <script type="module" crossorigin src="/assets/index-DTmIGIUE.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CRk_hghu.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-DpJrHqwq.css">
   </head>
 <body>
     <div id="root"></div>

frontend/src/components/ItineraryTimeline.tsx

@@ -207,6 +207,17 @@ export const ItineraryTimeline = ({
     if (storedLegId) {
       setExpandedStageId(storedLegId);
       sessionStorage.removeItem('defaultExpandedLegId');
+
+      setTimeout(() => {
+        const targetElement = document.getElementById(`leg-anchor-node-${storedLegId}`);
+        if (targetElement) {
+          targetElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+          });
+        }
+        window.history.replaceState({}, document.title);
+      }, 150);
     } else if (legs.length > 0 && !expandedStageId) {
       setExpandedStageId(legs[0].id);
     }
@@ -232,7 +243,7 @@ export const ItineraryTimeline = ({
               const prevLegLastLoc = legIdx > 0 ? legs[legIdx - 1]?.locations.slice(-1)[0] : null;
 
               return (
-                <section key={leg.id} className={`folder-node-wrapper ${expandedStageId === leg.id ? 'expanded' : 'collapsed'}`}>
+                <section key={leg.id} id={`leg-anchor-node-${leg.id}`} className={`folder-node-wrapper scroll-mt-[70px] ${expandedStageId === leg.id ? 'expanded' : 'collapsed'}`}>
                   {/* Folder header row - clickable to toggle exclusive expansion */}
                   <div 
                     onClick={() => toggleStageExpanded(leg.id)}