Thêm tính năng trong mục 4.1 của ARCHITECTURE.md

ItineraryTimeline.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { format, differenceInMinutes, parseISO } from 'date-fns';
-import { CheckCircle2, Circle, Clock, MapPin, AlertCircle } from 'lucide-react';
+import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation } from 'lucide-react';
 import { useTourStore } from './useTourStore.js';
 
 const TimeVariance = ({ planned, actual }: { planned: string, actual: string | null }) => {
@@ -19,8 +19,24 @@ const TimeVariance = ({ planned, actual }: { planned: string, actual: string | n
   );
 };
 
+const calculateDistance = (lat1: number, lon1: number, lat2: number, lon2: number) => {
+  const p = 0.017453292519943295; // Math.PI / 180
+  const c = Math.cos;
+  const a = 0.5 - c((lat2 - lat1) * p) / 2 + 
+            c(lat1 * p) * c(lat2 * p) * 
+            (1 - c((lon2 - lon1) * p)) / 2;
+  return 12742 * Math.asin(Math.sqrt(a)); // 2 * R; R = 6371 km
+};
+
+const formatTravelTime = (minutes: number) => {
+  if (minutes < 60) return `${minutes} phút`;
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  return mins > 0 ? `${hours} giờ ${mins} phút` : `${hours} giờ`;
+};
+
 export const ItineraryTimeline = () => {
-  const { legs } = useTourStore();
+  const { legs, optimizeRouting, userRole } = useTourStore();
 
   const toggleComplete = async (locationId: string) => {
     // Gọi API PATCH /api/v1/locations/:id để cập nhật trạng thái
@@ -32,24 +48,72 @@ export const ItineraryTimeline = () => {
       <h2 className="text-2xl font-bold text-gray-800 mb-8 px-2">Lộ trình chuyến đi</h2>
       
       <div className="space-y-8">
-        {legs.map((leg, legIdx) => (
+        {legs.map((leg, legIdx) => {
+          const totalDwellMinutes = leg.locations.reduce((acc: number, loc: any) => {
+            if (loc.plannedStart && loc.plannedEnd) {
+              return acc + differenceInMinutes(parseISO(loc.plannedEnd), parseISO(loc.plannedStart));
+            }
+            return acc;
+          }, 0);
+
+          return (
           <div key={leg.id} className="relative">
             {/* Leg Header */}
             <div className="flex items-center mb-4 px-2">
               <div className="bg-blue-600 text-white text-sm font-bold px-3 py-1 rounded-full shadow-sm">
                 Chặng {leg.sequence}
               </div>
+              {leg.totalDistance !== undefined && (
+                <div className="flex flex-wrap items-center gap-2 ml-3">
+                  <div className="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-lg border border-blue-100">
+                    {leg.totalDistance} km
+                  </div>
+                  <div className="text-xs font-bold text-gray-500 bg-gray-50 px-2 py-1 rounded-lg border border-gray-100 flex items-center gap-1">
+                    <Clock className="w-3 h-3" />
+                    ~ {formatTravelTime(Math.round((leg.totalDistance / 35) * 60))}
+                  </div>
+                  {totalDwellMinutes > 0 && (
+                    <div className="text-xs font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-lg border border-amber-100 flex items-center gap-1">
+                      <Clock className="w-3 h-3" />
+                      Dừng: {formatTravelTime(totalDwellMinutes)}
+                    </div>
+                  )}
+                </div>
+              )}
+              {['OWNER', 'MANAGER'].includes(userRole || '') && (
+                <button 
+                  onClick={() => optimizeRouting(leg.id)}
+                  className="ml-auto flex items-center gap-1.5 text-xs font-bold text-indigo-600 hover:text-indigo-700 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-xl transition-all"
+                >
+                  <Zap className="w-3 h-3" />
+                  Tối ưu đường đi
+                </button>
+              )}
               <div className="ml-4 h-[1px] flex-1 bg-gray-200" />
             </div>
 
             {/* Vertical Line for the whole leg */}
             <div className="absolute left-6 top-10 bottom-0 w-0.5 bg-gray-200 -z-0" />
 
-            <div className="space-y-6 ml-2">
-              {leg.locations.map((location) => (
-                <div key={location.id} className="relative flex group">
-                  {/* Timeline Node */}
-                  <div className="z-10 mt-1.5 mr-4">
+            <div className="ml-2">
+              {leg.locations.map((location, idx) => {
+                const nextLocation = leg.locations[idx + 1];
+                const distanceToNext = nextLocation 
+                  ? calculateDistance(location.latitude, location.longitude, nextLocation.latitude, nextLocation.longitude)
+                  : null;
+
+                const averageSpeed = 35; // km/h (vận tốc trung bình giả định)
+                const travelTimeMinutes = distanceToNext ? Math.round((distanceToNext / averageSpeed) * 60) : null;
+
+                const dwellMinutes = (location.plannedStart && location.plannedEnd)
+                  ? differenceInMinutes(parseISO(location.plannedEnd), parseISO(location.plannedStart))
+                  : null;
+
+                return (
+                  <div key={location.id}>
+                    <div className="relative flex group mb-6">
+                      {/* Timeline Node */}
+                      <div className="z-10 mt-1.5 mr-4">
                     <button 
                       onClick={() => toggleComplete(location.id)}
                       className={`transition-colors duration-200 ${location.status === 'COMPLETED' ? 'text-green-500' : 'text-gray-300 hover:text-blue-500'}`}
@@ -75,6 +139,12 @@ export const ItineraryTimeline = () => {
                           <MapPin className="w-3 h-3 mr-1" />
                           <span className="truncate max-w-[200px] sm:max-w-md">{location.address}</span>
                         </div>
+                        {dwellMinutes !== null && (
+                          <div className="flex items-center text-xs text-amber-600 font-medium mt-1">
+                            <Clock className="w-3 h-3 mr-1" />
+                            <span>Thời gian dừng: {formatTravelTime(dwellMinutes)}</span>
+                          </div>
+                        )}
                       </div>
                       
                       <div className="text-right flex flex-col items-end">
@@ -94,7 +164,26 @@ export const ItineraryTimeline = () => {
                     <TimeVariance planned={location.plannedStart || ''} actual={location.actualStart || null} />
                   </div>
                 </div>
-              ))}
+
+                    {distanceToNext !== null && travelTimeMinutes !== null && (
+                      <div className="ml-4 -mt-4 mb-2 flex items-center gap-3">
+                        <div className="w-8 flex justify-center">
+                          <Navigation className="w-3 h-3 text-blue-400 rotate-180" />
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <span className="text-[10px] font-bold text-blue-500 bg-blue-50 px-2 py-0.5 rounded-full border border-blue-100">
+                            {distanceToNext.toFixed(2)} km
+                          </span>
+                          <span className="text-[10px] font-bold text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100 flex items-center gap-1">
+                            <Clock className="w-2.5 h-2.5" />
+                            ~ {formatTravelTime(travelTimeMinutes)}
+                          </span>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
             </div>
             
             {leg.notes && (
@@ -103,7 +192,8 @@ export const ItineraryTimeline = () => {
               </p>
             )}
           </div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );