From 9e26aabce69f9238ba0fe20c25ca3088dda8147d Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Tue, 16 Jun 2026 10:36:38 +0700
Subject: [PATCH] =?UTF-8?q?S=E1=BB=ADa=20l=E1=BB=97i=20hi=E1=BB=83n=20th?=
 =?UTF-8?q?=E1=BB=8B=20chi=20ph=C3=AD=20=E1=BB=9F=20=C4=91i=E1=BB=83m=20c?=
 =?UTF-8?q?=E1=BB=A7a=20ch=E1=BA=B7ng?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/AddLocationModal.tsx  |  6 +++++-
 frontend/src/components/ItineraryTimeline.tsx | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/AddLocationModal.tsx b/frontend/src/components/AddLocationModal.tsx
index 89b9a8f..13fe966 100644
--- a/frontend/src/components/AddLocationModal.tsx
+++ b/frontend/src/components/AddLocationModal.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { format, parseISO } from 'date-fns';
 import { X, MapPin, Loader2, Clock, Map as MapIcon } from 'lucide-react';
 import { useTourStore } from '@/store/useTourStore.js';
 import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet';
@@ -274,7 +275,10 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
             <select required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none"
               value={currentLegId} onChange={e => setFormData({...formData, legId: e.target.value})}>
               {legs.map(leg => (
-                <option key={leg.id} value={leg.id}>Chặng {leg.sequence}: {leg.note || 'Không có tên'}</option>
+                <option key={leg.id} value={leg.id}>
+                  Chặng {leg.sequence}: {leg.note || 'Không có tên'} 
+                  {leg.startDate ? ` (${format(parseISO(leg.startDate), 'dd/MM')})` : ''}
+                </option>
               ))}
             </select>
           </div>
diff --git a/frontend/src/components/ItineraryTimeline.tsx b/frontend/src/components/ItineraryTimeline.tsx
index dd2b13c..66863b1 100644
--- a/frontend/src/components/ItineraryTimeline.tsx
+++ b/frontend/src/components/ItineraryTimeline.tsx
@@ -195,10 +195,19 @@ export const ItineraryTimeline = ({
                   <div className="sticky top-[136px] z-20 bg-gray-50/90 backdrop-blur-sm flex items-center mb-6 py-2 px-2">
                     <div className="font-black text-blue-600 text-xl truncate flex-1 flex flex-col gap-1">
                       <div className="flex items-center gap-2">
-                      <span className="bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm">
-                        {leg.sequence}
-                      </span>
-                      {leg.note || `Chi tiết Chặng ${leg.sequence}`}
+                        <span className="bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm shrink-0">
+                          {leg.sequence}
+                        </span>
+                        <div className="flex flex-col overflow-hidden">
+                          <span className="truncate leading-tight">{leg.note || `Chi tiết Chặng ${leg.sequence}`}</span>
+                          {leg.startDate && (
+                            <span className="text-[10px] text-gray-400 font-black uppercase tracking-wider flex items-center gap-1 mt-0.5">
+                              <CalendarIcon className="w-2.5 h-2.5" />
+                              {format(parseISO(leg.startDate), 'dd/MM/yyyy')}
+                              {leg.endDate && leg.endDate !== leg.startDate && ` - ${format(parseISO(leg.endDate), 'dd/MM/yyyy')}`}
+                            </span>
+                          )}
+                        </div>
                       </div>
                       {prevLegLastLoc && (
                         <div className="flex items-center gap-1 text-[10px] text-gray-400 uppercase tracking-widest ml-10">
@@ -334,7 +343,7 @@ export const ItineraryTimeline = ({
                                      <div className="mt-2 text-xs text-indigo-600 bg-indigo-50/80 p-2 rounded-lg border border-indigo-100 space-y-1">
                                        <div className="flex items-center gap-1 font-bold">
                                          <Zap className="w-3 h-3" />
-                                         <span>Chi phí: {Number(locationExpense.amount).toLocaleString()}đ ({locationExpense.category})</span>
+                                         <span>Chi phí: {Number(locationExpense.amount).toLocaleString()}đ</span>
                                        </div>
                                        {locationExpense.description && (
                                          <div className="text-[10px] text-gray-600">Dịch vụ: {locationExpense.description}</div>