fix: hiển thị ngày ở các chặng

frontend/src/pages/TourDetailPage.tsx

@@ -513,24 +513,35 @@ export const TourDetailPage = ({
     const legRowRanges: Record<string, { start: number; count: number }> = {};
     const pdfMapLinks: { [key: number]: string } = {};
 
-    const formatDateTime = (dateStr: string) => {
-      if (!dateStr) return '';
-      const d = new Date(dateStr);
-      if (isNaN(d.getTime())) return '';
-      const hours = String(d.getHours()).padStart(2, '0');
-      const minutes = String(d.getMinutes()).padStart(2, '0');
-      const day = String(d.getDate()).padStart(2, '0');
-      const month = String(d.getMonth() + 1).padStart(2, '0');
-      const year = d.getFullYear();
-      return `${hours}:${minutes} ${day}/${month}/${year}`;
-    };
-
     let stt = 1;
     let globalRowIndex = 0;
 
+    const extractAndFormatTimeInline = (primaryTime: any, fallbackLegObj: any) => {
+      const absoluteTimeSource = primaryTime || 
+                                  fallbackLegObj?.plannedStart || 
+                                  fallbackLegObj?.startDate || 
+                                  fallbackLegObj?.start_date || 
+                                  fallbackLegObj?.date || 
+                                  fallbackLegObj?.createdAt;
+
+      if (!absoluteTimeSource) return '';
+
+      const d = new Date(absoluteTimeSource);
+      if (isNaN(d.getTime())) return '';
+
+      const hhmm = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+      const ddmmyyyy = `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}/${d.getFullYear()}`;
+      return `${hhmm}|${ddmmyyyy}`;
+    };
+
     if (currentTour?.legs && currentTour.legs.length > 0) {
       currentTour.legs.forEach((leg: any, legIdx: number) => {
         const legName = leg.note || `Chặng ${legIdx + 1}`;
+        const legNameCellObj = {
+          content: legName,
+          styles: { fontStyle: 'bold' as const }
+        };
+
         const legLocations = (leg.locations || []).filter((loc: any) =>
           loc && (loc.plannedStart || loc.plannedEnd || loc.name)
         );
@@ -542,14 +553,13 @@ export const TourDetailPage = ({
 
           legLocations.forEach((loc: any, locIdx: number) => {
             const isStartPoint = loc.plannedStart && new Date(loc.plannedStart).getTime() === 0;
-            const timeSource = isStartPoint ? loc.plannedEnd : loc.plannedStart;
-            const timeStr = timeSource ? formatDateTime(timeSource) : '';
+            const initialTimeSource = isStartPoint ? loc.plannedEnd : loc.plannedStart;
+
+            const timeStr = extractAndFormatTimeInline(initialTimeSource, leg);
 
             const locName = loc.name || '';
             const addressStr = loc.address || '';
-            const coordStr = loc.latitude && loc.longitude
-              ? `\n${loc.latitude}, ${loc.longitude}`
-              : '';
+            const coordStr = loc.latitude && loc.longitude ? `\n${loc.latitude}, ${loc.longitude}` : '';
             const locationText = [locName, addressStr, coordStr].filter(Boolean).join('\n');
             const noteText = loc.note || '';
 
@@ -573,18 +583,20 @@ export const TourDetailPage = ({
             tableRows.push([
               stt++,
               timeStr,
-              locIdx === 0 ? legName : '',
+              locIdx === 0 ? legNameCellObj : '',
               locationCellObj,
               noteText
             ]);
             globalRowIndex++;
           });
         } else {
+          const legTimeStr = extractAndFormatTimeInline(null, leg);
+
           legRowRanges[leg.id] = { start: startRow, count: 1 };
           tableRows.push([
             stt++,
-            '',
-            legName,
+            legTimeStr,
+            legNameCellObj,
             'Chưa có địa điểm trong chặng này',
             ''
           ]);
@@ -646,7 +658,44 @@ export const TourDetailPage = ({
           }
         }
       },
+      willDrawCell: (data: any) => {
+        if (data.section === 'body' && data.column.index === 1) {
+          if (data.cell.text && data.cell.text.length > 0) {
+            data.cell.customInlineBuffer = data.cell.text.join('');
+          }
+          data.cell.text = [];
+        }
+      },
       didDrawCell: (data: any) => {
+        if (data.section === 'body' && data.column.index === 1) {
+          const rawTextStr = data.cell.customInlineBuffer || data.cell.raw;
+
+          if (rawTextStr && typeof rawTextStr === 'string' && rawTextStr.includes('|')) {
+            const [timePart, datePart] = rawTextStr.split('|');
+            const separatorSpace = "   ";
+
+            data.doc.setFont(data.cell.styles.font, 'bold');
+            const timeWidth = data.doc.getTextWidth(timePart);
+
+            data.doc.setFont(data.cell.styles.font, 'normal');
+            const spaceWidth = data.doc.getTextWidth(separatorSpace);
+            const dateWidth = data.doc.getTextWidth(datePart);
+
+            const totalBlockWidth = timeWidth + spaceWidth + dateWidth;
+
+            const targetX = data.cell.x + (data.cell.width - totalBlockWidth) / 2;
+            const targetY = data.cell.y + (data.cell.height / 2) + (data.cell.styles.fontSize / 2) - 1;
+
+            data.doc.setFont(data.cell.styles.font, 'bold');
+            data.doc.setTextColor(239, 68, 68);
+            data.doc.text(timePart, targetX, targetY);
+
+            data.doc.setFont(data.cell.styles.font, 'normal');
+            data.doc.setTextColor(37, 99, 235);
+            data.doc.text(datePart, targetX + timeWidth + spaceWidth, targetY);
+          }
+        }
+
         if (data.section === 'body' && data.column.index === 3) {
           const activeRowIndex = data.row.index;
           const targetMapUrl = pdfMapLinks[activeRowIndex];