Sửa lỗi hiển thị chi phí ở điểm của chặng

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>

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">
+                        <span className="bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm shrink-0">
-                        {leg.sequence}
+                          {leg.sequence}
-                      </span>
+                        </span>
-                      {leg.note || `Chi tiết Chặng ${leg.sequence}`}
+                        <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>