admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-09-13 18:52:42 +07:00
1 parent 8e35cb48d1
commit d5ea45a536
1 file changed
+59 -9
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin/src/pages/analytics/RepeatCustomersTimelinePage.tsx
+59 -9
View File
@@ -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 */}
<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 flex items-center justify-between min-w-[500px]">
{/* Connecting line */}
<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" />
{/* Order Nodes */}
{/* Horizontal Bar with Nodes & Inter-order Days */}
<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-start justify-between"
style={{ minWidth: `${Math.max(560, (cust.orders.length + 1) * 70)}px` }}
>
{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>
);
})}