x

apps/admin/src/pages/analytics/RepeatCustomersTimelinePage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, Fragment } from 'react';
 import {
   Clock,
   RefreshCw,
@@ -429,19 +429,28 @@ export default function RepeatCustomersTimelinePage() {
                   </span>
                 </div>
 
-                {/* Horizontal Bar with Nodes */}
+                {/* Horizontal Bar with Nodes & Inter-order Days */}
-                <div className="relative w-full py-4 px-3 bg-slate-950/50 rounded-xl border border-white/5 overflow-x-auto">
+                <div className="relative w-full pt-6 pb-4 px-4 bg-slate-950/50 rounded-xl border border-white/5 overflow-x-auto">
-                  <div className="relative flex items-center justify-between min-w-[500px]">
+                  <div
-                    {/* Connecting line */}
+                    className="relative flex items-start justify-between"
-                    <div className="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-0.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-amber-500" />
+                    style={{ minWidth: `${Math.max(560, (cust.orders.length + 1) * 70)}px` }}
-
+                  >
-                    {/* Order Nodes */}
                     {cust.orders.map((o: any, oIdx: number) => {
                       const isLast = oIdx === cust.orders.length - 1;
+                      const nextOrder = cust.orders[oIdx + 1];
+
+                      // Calculate interval days between this order and next order
+                      let diffDays: number | null = null;
+                      if (nextOrder?.timestamp && o?.timestamp) {
+                        diffDays = Math.max(0, Math.round((nextOrder.timestamp - o.timestamp) / 86400000));
+                      }
+
                       return (
+                        <Fragment key={o.orderId || oIdx}>
+                          {/* Order Node */}
                           <div
-                          key={o.orderId || oIdx}
                             className="relative z-10 flex flex-col items-center group cursor-pointer"
+                            onClick={() => setSelectedCustomer(cust)}
                             title={`ออเดอร์ #${o.orderId} — ${o.date} (${fmtBaht(o.amount)})`}
                           >
                             {/* Node Circle */}
@@ -465,6 +474,47 @@ export default function RepeatCustomersTimelinePage() {
                               </span>
                             </div>
                           </div>
+
+                          {/* Connector Segment & Gap Days Floating Above Line */}
+                          {nextOrder && (
+                            <div
+                              className="flex-1 flex items-center justify-center relative min-w-[28px] mx-1 h-5 group/gap cursor-default"
+                              title={`รอบ #${oIdx + 1} ➔ รอบ #${oIdx + 2}: เว้นช่วง ${diffDays} วัน (${o.date.slice(0, 10)} ถึง ${nextOrder.date.slice(0, 10)})`}
+                            >
+                              {/* Connector Line */}
+                              <div className="w-full h-0.5 bg-gradient-to-r from-indigo-500/80 via-purple-500/80 to-indigo-500/80 group-hover/gap:h-1 group-hover/gap:from-indigo-400 group-hover/gap:to-purple-400 transition-all" />
+
+                              {/* Days Number Floating Above the Line */}
+                              {diffDays !== null && (
+                                <span
+                                  className={`absolute -top-3.5 left-1/2 -translate-x-1/2 text-[10px] font-mono font-semibold transition-all select-none ${
+                                    diffDays > 90
+                                      ? 'text-amber-400 font-bold'
+                                      : 'text-slate-400 group-hover/gap:text-white'
+                                  }`}
+                                >
+                                  {diffDays}
+                                </span>
+                              )}
+                            </div>
+                          )}
+
+                          {/* Gap to Predicted Order */}
+                          {isLast && (
+                            <div
+                              className="flex-1 flex items-center justify-center relative min-w-[28px] mx-1 h-5 group/gap cursor-default"
+                              title={`รอบถัดไป (คาดการณ์): ~${cust.avgIntervalDays} วัน (ซื้อล่าสุด ${cust.lastOrderDate.slice(0, 10)})`}
+                            >
+                              {/* Dashed Connector Line */}
+                              <div className="w-full border-t-2 border-dashed border-amber-400/50 group-hover/gap:border-amber-400 transition-all" />
+
+                              {/* Predicted Days Floating Above Line */}
+                              <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 text-[10px] font-mono font-semibold text-amber-400/90 select-none">
+                                {Math.round(cust.avgIntervalDays)}
+                              </span>
+                            </div>
+                          )}
+                        </Fragment>
                       );
                     })}