+ {/* ── Top Header Bar ────────────────────────────────────────── */}
+
+
+
+
+
+
+
+
+ {t('repeatCustomersTimeline.title', 'ไทม์ไลน์รอบการซื้อซ้ำ (Repeat Customers Timeline)')}
+
+
+ {t(
+ 'repeatCustomersTimeline.subtitle',
+ 'วิเคราะห์วงรอบการกลับมาซื้อ (Purchase Cycles) และคาดการณ์กำหนดซื้อซ้ำรอบถัดไปเพื่อป้องกันการ Churn'
+ )}
+
+
+
+
+
+
+
+
+
+
+ {/* ── Nav Tabs Bar ───────────────────────────────────────────── */}
+
+
+ {/* ── Churn Risk & Retention Summary KPI Cards ───────────────── */}
+
+
+
+ ลูกค้าซื้อซ้ำทั้งหมด
+
+
+
+ {fmtNum(summary.totalRepeatCustomers)} คน
+
+
ลูกค้าที่มี ≥ 2 ออเดอร์
+
+
+ {/* Due Soon Card */}
+
{
+ setChurnStatus('due_soon');
+ setPage(1);
+ }}
+ className={`bg-slate-900/50 p-4 rounded-2xl border backdrop-blur-md cursor-pointer transition-all hover:scale-[1.02] ${
+ churnStatus === 'due_soon' ? 'border-amber-400 ring-1 ring-amber-400' : 'border-amber-500/20 hover:border-amber-500/40'
+ }`}
+ >
+
+
ถึงรอบซื้อซ้ำ (Due Soon)
+
+
+
+ {fmtNum(summary.dueSoonCount)} คน
+
+
โอกาสทองในการส่งโปรโมชัน
+
+
+ {/* Healthy Card */}
+
{
+ setChurnStatus('healthy');
+ setPage(1);
+ }}
+ className={`bg-slate-900/50 p-4 rounded-2xl border backdrop-blur-md cursor-pointer transition-all hover:scale-[1.02] ${
+ churnStatus === 'healthy' ? 'border-emerald-400 ring-1 ring-emerald-400' : 'border-emerald-500/20 hover:border-emerald-500/40'
+ }`}
+ >
+
+ ซื้อตามรอบปกติ (Active)
+
+
+
+ {fmtNum(summary.healthyCount)} คน
+
+
ระยะเวลายังไม่เกินรอบเฉลี่ย
+
+
+ {/* Churn Risk Card */}
+
{
+ setChurnStatus('churn_risk');
+ setPage(1);
+ }}
+ className={`bg-slate-900/50 p-4 rounded-2xl border backdrop-blur-md cursor-pointer transition-all hover:scale-[1.02] ${
+ churnStatus === 'churn_risk' ? 'border-rose-400 ring-1 ring-rose-400' : 'border-rose-500/20 hover:border-rose-500/40'
+ }`}
+ >
+
+
เสี่ยงหลุด (Churn Risk)
+
+
+
+ {fmtNum(summary.churnRiskCount)} คน
+
+
เกินรอบเฉลี่ยไปมาก (Win-back)
+
+
+
+ {/* ── Filters & Search Bar ───────────────────────────────────── */}
+
+ {/* Status Filter Tabs */}
+
+
+
+
+
+
+
+ {/* Channel Selection */}
+
+
+
+
+
+
+
+ {/* Search */}
+
+
+ setSearch(e.target.value)}
+ placeholder="ค้นหาชื่อลูกค้า, Username..."
+ className="w-full pl-9 pr-3 py-1.5 text-xs bg-slate-950 border border-white/10 rounded-xl text-slate-200 placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-all"
+ />
+
+
+
+ {/* ── Customer Journey Swimlane Cards ────────────────────────── */}
+
+ {loading ? (
+
+
+ กำลังคำนวณไทม์ไลน์และรอบการซื้อซ้ำ...
+
+ ) : !data?.customers || data.customers.length === 0 ? (
+
+
+ ไม่พบข้อมูลลูกค้าที่ตรงตามเงื่อนไข
+
+ ) : (
+ data.customers.map((cust: any) => (
+
+ {/* Card Top: Customer Identity & Status */}
+
+
+
+ {cust.displayName.slice(0, 2)}
+
+
+
+
+ {cust.displayName}
+
+ {getChannelBadge(cust.primaryChannel)}
+ {getStatusBadge(cust.churnStatus)}
+
+
+ {cust.location && (
+
+
+ {cust.location}
+
+ )}
+ •
+
+ ยอดสะสม {fmtBaht(cust.totalSpent)}
+
+ •
+
+ {cust.orderCount} คำสั่งซื้อ
+
+
+
+
+
+ {/* Right side: Cycle metrics */}
+
+
+ รอบซื้อเฉลี่ย
+
+ {cust.avgIntervalDays} วัน
+
+
+
+
+ ซื้อล่าสุด
+
+ {cust.daysSinceLastOrder} วันที่แล้ว
+
+
+
+
+ คาดการณ์รอบถัดไป
+
+ {cust.predictedNextOrderDate}
+
+
+
+
+
+ {/* Visual Horizontal Timeline Bar (Swimlane) */}
+
+
+ ไทม์ไลน์คำสั่งซื้อ (Order Timeline)
+
+ {cust.firstOrderDate.slice(0, 10)} ───► {cust.lastOrderDate.slice(0, 10)}
+
+
+
+ {/* Horizontal Bar with Nodes */}
+
+
+ {/* Connecting line */}
+
+
+ {/* Order Nodes */}
+ {cust.orders.map((o: any, oIdx: number) => {
+ const isLast = oIdx === cust.orders.length - 1;
+ return (
+
+ {/* Node Circle */}
+
+ {oIdx + 1}
+
+
+ {/* Node Label Below */}
+
+
+ {o.date.slice(5, 10)}
+
+
+ {fmtBaht(o.amount)}
+
+
+
+ );
+ })}
+
+ {/* Predicted Next Order Marker */}
+
+
+
+
+
+
+ รอบถัดไป
+
+
+ ~{cust.predictedNextOrderDate.slice(5, 10)}
+
+
+
+
+
+
+
+ {/* Card Bottom Actions */}
+
+
+ {cust.orders?.[0]?.productNames?.[0] ? `สินค้าล่าสุด: ${cust.orders[cust.orders.length - 1]?.productNames?.[0] || ''}` : ''}
+
+
+
+
+
+ ))
+ )}
+
+
+ {/* ── Pagination Bar ─────────────────────────────────────────── */}
+ {data?.pagination && data.pagination.totalPages > 1 && (
+
+
+
+ กำลังแสดงหน้า {page} จาก{' '}
+ {data.pagination.totalPages} หน้า (ทั้งหมด {fmtNum(data.pagination.total)} ลูกค้า)
+
+
+ แสดง:
+
+
+
+
+
+
+
+
+ {page} / {data.pagination.totalPages}
+
+
+
+
+
+ )}
+
+ {/* ── Order Detail Modal ─────────────────────────────────────── */}
+ {selectedCustomer && (
+
setSelectedCustomer(null)}
+ />
+ )}
+