// Admin screens: Dashboard, Users, Orders const { useState: useStateA, useMemo: useMemoA } = React; const fmt = (n) => '฿' + n.toLocaleString(); function AdminLayout({ active, nav, children, title, subtitle, action }) { const items = [ { label: 'แดชบอร์ด', icon: 'chart', path: '/admin' }, { label: 'ผู้ใช้', icon: 'users', path: '/admin/users' }, { label: 'คำสั่งซื้อ', icon: 'receipt', path: '/admin/orders' }, { label: 'สินค้า', icon: 'package', path: '/admin/products', soon: true }, { label: 'คูปอง', icon: 'tag', path: '/admin/coupons', soon: true }, { label: 'Analytics', icon: 'trendUp', path: '/admin/analytics', soon: true }, { label: 'ตั้งค่า', icon: 'settings', path: '/admin/settings', soon: true }, ]; return (
Admin

{title}

{subtitle &&

{subtitle}

}
{action}
{children}
); } function AdminKPI({ label, value, delta, prefix }) { const up = delta > 0; return (
{label}
{prefix}{value.toLocaleString()}
{up ? '+' : ''}{delta}% vs. เดือนก่อน
); } function RevenueChart({ data }) { const max = Math.max(...data); const min = Math.min(...data); const w = 720, h = 220, pad = 24; const xs = (i) => pad + (i / (data.length - 1)) * (w - pad * 2); const ys = (v) => h - pad - ((v - min) / (max - min)) * (h - pad * 2); const line = data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${xs(i)} ${ys(v)}`).join(' '); const area = `${line} L ${xs(data.length - 1)} ${h - pad} L ${xs(0)} ${h - pad} Z`; return (
รายได้ 30 วันย้อนหลัง
รวม ฿{data.reduce((a, b) => a + b, 0).toLocaleString()}
{['7D', '30D', '90D'].map((p, i) => ( ))}
{[0.25, 0.5, 0.75].map(t => ( ))} {data.map((v, i) => ( ))}
); } function AdminDashboard({ nav }) { return ( } >
ยอดขายตามระบบ
{[ { sys: 'Academy', v: 198400, p: 0.82 }, { sys: 'SEO', v: 142800, p: 0.59 }, { sys: 'Lumo', v: 96400, p: 0.40 }, { sys: 'Bundle', v: 49690, p: 0.21 }, ].map(r => (
{r.sys} ฿{r.v.toLocaleString()}
))}
nav('/admin/orders')} headers={['Order', 'ลูกค้า', 'จำนวน', '']} rows={ADMIN_ORDERS.slice(0, 10).map(o => [ {o.id}, o.customer, ฿{o.amount.toLocaleString()}, {o.status} , ])} /> nav('/admin/users')} headers={['ชื่อ', 'อีเมล', 'ออเดอร์', 'รวม']} rows={ADMIN_USERS.slice(0, 10).map(u => [ {u.name}, {u.email}, u.orders, ฿{u.spend.toLocaleString()}, ])} />
); } function AdminMiniTable({ title, headers, rows, actionLabel, onAction }) { return (
{title}
{actionLabel && }
{headers.map(h => )} {rows.map((r, i) => ( {r.map((c, j) => )} ))}
{h}
{c}
); } function AdminUsers({ nav }) { const [q, setQ] = useStateA(''); const [filter, setFilter] = useStateA('all'); const filtered = ADMIN_USERS.filter(u => { if (filter === 'active' && u.status !== 'active') return false; if (filter === 'inactive' && u.status === 'active') return false; if (q && !u.name.includes(q) && !u.email.includes(q)) return false; return true; }); return ( เชิญผู้ใช้} >
setQ(e.target.value)} placeholder="ค้นหาด้วยชื่อหรืออีเมล..." style={{ width: '100%', height: 36, padding: '0 14px 0 36px', borderRadius: 8, background: 'var(--bg-2)', border: '1px solid var(--line)', color: 'var(--ink)', fontSize: 13, }} />
{[{ v: 'all', l: 'ทั้งหมด' }, { v: 'active', l: 'Active' }, { v: 'inactive', l: 'Inactive' }].map(f => ( ))}
{['ผู้ใช้', 'อีเมล', 'วันสมัคร', 'ออเดอร์', 'รวมใช้จ่าย', 'สถานะ', ''].map(h => ( ))} {filtered.map(u => ( e.currentTarget.style.background = 'var(--bg-3)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}> ))}
{h}
{u.name}
{u.email} {u.joined} {u.orders} ฿{u.spend.toLocaleString()} {u.status}
แสดง 1–{filtered.length} จาก {ADMIN_USERS.length}
); } function AdminOrders({ nav }) { const [filter, setFilter] = useStateA('all'); const filtered = ADMIN_ORDERS.filter(o => filter === 'all' || o.status === filter); const counts = { all: ADMIN_ORDERS.length, paid: ADMIN_ORDERS.filter(o => o.status === 'paid').length, pending: ADMIN_ORDERS.filter(o => o.status === 'pending').length, failed: ADMIN_ORDERS.filter(o => o.status === 'failed').length, refunded: ADMIN_ORDERS.filter(o => o.status === 'refunded').length, }; return (
} >
{[ { v: 'all', l: 'ทั้งหมด' }, { v: 'paid', l: 'ชำระแล้ว' }, { v: 'pending', l: 'รอชำระ' }, { v: 'failed', l: 'ล้มเหลว' }, { v: 'refunded', l: 'คืนเงิน' }, ].map(f => ( ))}
{['Order ID', 'ลูกค้า', 'รายการ', 'จำนวน', 'วิธีชำระ', 'สถานะ', 'วันที่', ''].map(h => ( ))} {filtered.map(o => ( e.currentTarget.style.background = 'var(--bg-3)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}> ))}
{h}
{o.id} {o.customer} {o.items} ฿{o.amount.toLocaleString()} {o.method} {o.status} {o.date}
); } Object.assign(window, { AdminLayout, AdminDashboard, AdminUsers, AdminOrders });