+ {!selectedCustomer ? (
+ /* ── Customer List ───────────────────────── */
+
+ {/* Walk-in option */}
+
+
+
+
+ Registered Customers ({filteredCustomers.length})
+
+
+
+
+ {filteredCustomers.map((customer, i) => (
+ handleSelectCustomer(customer)}
+ className={`w-full p-4 rounded-2xl border ${theme === 'light' ? 'border-slate-200 hover:border-violet-300 hover:bg-violet-50/50' : 'border-white/5 hover:border-violet-500/30 hover:bg-violet-500/5'} flex items-center gap-3 transition-all group text-left`}
+ >
+
+ {customer.name.charAt(0).toUpperCase()}
+
+
+
+
+ {customer.loyaltyPoints > 0 ? `${customer.loyaltyPoints} pts` : ''}
+
+
+
+ {filteredCustomers.length === 0 && searchTerm && (
+
+ )}
+
+ ) : (
+ /* ── Customer Profile ────────────────────── */
+
+ {/* Profile Card */}
+
+ {/* Decorative gradient orb */}
+
+
+
+
+ {selectedCustomer.name.charAt(0).toUpperCase()}
+
+
+
{selectedCustomer.name}
+
{selectedCustomer.phone}
+ {stats && (
+
+
+ {tierConfig.icon}
+ {stats.tier}
+
+
+ {selectedCustomer.loyaltyPoints} pts
+
+
+ )}
+
+
+
+
+ {/* Stats Grid */}
+ {loadingStats ? (
+
+
+
+ ) : stats ? (
+ <>
+
+ {[
+ { label: 'Total Spend', value: `LKR ${Math.round(stats.totalSpend).toLocaleString()}`, icon: , color: 'text-emerald-500', bg: theme === 'light' ? 'bg-emerald-50' : 'bg-emerald-500/10' },
+ { label: 'Avg Order', value: `LKR ${Math.round(stats.avgOrderValue).toLocaleString()}`, icon: , color: 'text-blue-400', bg: theme === 'light' ? 'bg-blue-50' : 'bg-blue-500/10' },
+ { label: 'Total Visits', value: stats.visitCount.toString(), icon: , color: 'text-amber-400', bg: theme === 'light' ? 'bg-amber-50' : 'bg-amber-500/10' },
+ { label: 'Last Visit', value: getTimeAgo(stats.lastVisit), icon: , color: 'text-violet-400', bg: theme === 'light' ? 'bg-violet-50' : 'bg-violet-500/10' },
+ ].map((stat, i) => (
+
+ {stat.icon}
+ {stat.label}
+ {stat.value}
+
+ ))}
+
+
+ {/* ── Usual Orders / Predictive Section ──── */}
+ {recommendations.length > 0 && (
+
+
+
+
+
+
+
Usual Orders
+
One-tap to add their favorites
+
+
+
+ {recommendations.map((rec, i) => {
+ const isAdded = addedItems.has(rec._id);
+ return (
+ !isAdded && handleAddItem(rec)}
+ disabled={isAdded}
+ className={`w-full p-4 rounded-2xl flex items-center gap-3 transition-all text-left group ${isAdded
+ ? `${theme === 'light' ? 'bg-emerald-50 border border-emerald-200' : 'bg-emerald-500/10 border border-emerald-500/20'}`
+ : `${theme === 'light' ? 'bg-white border border-slate-200 hover:border-violet-300 hover:shadow-md hover:shadow-violet-100' : 'bg-white/[0.03] border border-white/5 hover:border-violet-500/30 hover:bg-violet-500/5'}`
+ }`}
+ >
+ {/* Rank */}
+
+ #{i + 1}
+
+
+ {/* Details */}
+
+
+ {rec.name}
+
+
+
+ Ordered {rec.count}× ({rec.totalQty} units)
+
+
+
+
+ {isAdded ? '✓ Added' : `LKR ${rec.price.toLocaleString()}`}
+
+
+
+ )}
+
+ {recommendations.length === 0 && stats.visitCount === 0 && (
+
+
+ First-time Customer
+ No purchase history yet. Complete this sale to start building their profile!
+
+ )}
+
+ {/* ── Recent Orders ──────────────────────── */}
+ {stats.recentOrders && stats.recentOrders.length > 0 && (
+
+
+ Recent Transactions
+
+
+ {stats.recentOrders.map((order: any, i: number) => (
+
+
+
+
+
+
+ {order.items?.map((it: any) => it.name).join(', ') || 'Order'}
+
+
+ {order.date ? new Date(order.date).toLocaleDateString() : ''}
+
+
+ LKR {Math.round(order.grandTotal || 0).toLocaleString()}
+
+
+ ))}
+
+ )}
+
+ ) : null}
+
+ )}
+