Sửa lỗi OWNER, MANAGER không thể chia sẻ link

frontend/src/components/ItineraryTimeline.tsx

@@ -37,10 +37,11 @@ const formatTravelTime = (minutes: number) => {
   return mins > 0 ? `${hours} giờ ${mins} phút` : `${hours} giờ`;
 };
 
-export const ItineraryTimeline = ({ 
+export const ItineraryTimeline = ({
   onAddLocation, 
-  onEditLocation 
-}: { onAddLocation?: (legId: string) => void, onEditLocation?: (location: any) => void }) => {
+  onEditLocation,
+  isPublicView = false
+}: { onAddLocation?: (legId: string) => void, onEditLocation?: (location: any) => void, isPublicView?: boolean }) => {
   // Tối ưu hóa selectors để chỉ lắng nghe những thay đổi cần thiết
   const currentTour = useTourStore(state => state.currentTour);
   const legs = useTourStore(state => state.legs);
@@ -48,11 +49,15 @@ export const ItineraryTimeline = ({
   const optimizeRouting = useTourStore(state => state.optimizeRouting);
   const addLeg = useTourStore(state => state.addLeg);
   const updateLeg = useTourStore(state => state.updateLeg);
+  // Removed: const { isPublicView } = useTourStore(state => state); // isPublicView is passed as a prop
   const deleteLeg = useTourStore(state => state.deleteLeg);
   const initializeLegs = useTourStore(state => state.initializeLegs);
   const fetchTour = useTourStore(state => state.fetchTour);
   const deleteLocation = useTourStore(state => state.deleteLocation);
 
+  // Khai báo logic canEdit để sử dụng trong toàn bộ component
+  const canEdit = isPublicView ? false : ['OWNER', 'MANAGER'].includes(userRole || '');
+
   const [confirmState, setConfirmState] = useState<{ open: boolean; title?: string; message?: string; onConfirm?: () => void }>({ open: false });
   const [isLegCountModalOpen, setIsLegCountModalOpen] = useState(false);
   const [tempLegCount, setTempLegCount] = useState(3);
@@ -202,7 +207,7 @@ export const ItineraryTimeline = ({
                       )}
                     </div>
                     <div className="flex items-center gap-2 ml-4">
-                      {['OWNER', 'MANAGER'].includes(userRole || '') && (
+                      {canEdit && (
                         <>
                           <button 
                             onClick={() => onAddLocation?.(leg.id)}
@@ -236,7 +241,7 @@ export const ItineraryTimeline = ({
                         </div>
                       </div>
                     )}
-                      {totalDwellMinutes > 0 && (
+                      {totalDwellMinutes > 0 && ( // Always show dwell time
                         <div className="hidden md:flex text-xs font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-lg border border-amber-100 items-center gap-1">
                           <Clock className="w-3 h-3" />
                           Dừng: {formatTravelTime(totalDwellMinutes)}
@@ -251,7 +256,7 @@ export const ItineraryTimeline = ({
                         <Zap className="w-3 h-3" />
                         Tối ưu
                       </button>
-                    )}
+                    )} {/* Only show optimize button if canEdit */}
                   </div>
 
                   {/* Vertical Line for the whole leg */}
@@ -365,7 +370,7 @@ export const ItineraryTimeline = ({
                                       Thực tế: {format(parseISO(location.actualStart), 'HH:mm')}
                                     </div>
                                   )}
-                                  {['OWNER', 'MANAGER'].includes(userRole || '') && !isStartPoint && !isEndPoint && (
+                                  {canEdit && !isStartPoint && !isEndPoint && ( // Only show edit/delete if canEdit
                                     <div className="flex gap-1 mt-2">
                                       <button onClick={() => onEditLocation?.(location)} className="p-1 text-gray-400 hover:text-blue-600 transition-colors">
                                         <Edit2 className="w-3.5 h-3.5" />
@@ -409,7 +414,7 @@ export const ItineraryTimeline = ({
         )}
 
         {/* Actions at the bottom of the list */}
-        {['OWNER', 'MANAGER'].includes(userRole || '') && (
+        {canEdit && ( // Only show these buttons if canEdit
           <div className="flex flex-col gap-3 pb-20 mt-8">
             <button
               onClick={handleDeclareLegs}