/* admin-views.jsx — JongMe Platform Admin view components. Exports to window: AUI (shared primitives), AdminOverview, AdminShops, AdminBilling, AdminAnalytics, AdminFlags */ // ── shared primitives ──────────────────────────────────────────────────────── const AUI = { Card: ({ title, sub, action, children, style, pad = 20, bodyStyle }) => (
{(title || action) && (
{title}
{sub &&
{sub}
}
{action}
)}
{children}
), Btn: ({ children, on, kind = 'primary', sm, icon, style }) => { const base = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7, cursor: 'pointer', border: 'none', borderRadius: 10, font: `600 ${sm ? 12.5 : 13.5}px/1 ${AT.font}`, padding: sm ? '8px 12px' : '10px 16px', whiteSpace: 'nowrap', transition: 'filter .15s, background .15s', ...style }; const kinds = { primary: { background: AT.primaryGrad, color: '#fff', boxShadow: '0 8px 18px -10px rgba(21,115,212,.6)' }, soft: { background: AT.primarySoft, color: AT.primaryDeep }, ghost: { background: AT.surface, color: AT.ink, border: `1px solid ${AT.line}` }, danger: { background: AT.redSoft, color: AT.red }, success: { background: AT.greenSoft, color: AT.green }, }; return ; }, Delta: ({ v, suffix = '%' }) => { const up = v >= 0; return {up ? AIc.up(12) : AIc.down(12)}{Math.abs(v)}{suffix} ; }, }; // ── OVERVIEW ────────────────────────────────────────────────────────────────── function AdminOverview({ shops, go, openShop }) { const k = ADMIN.kpis; const kpiCards = [ { label: 'ร้านค้าทั้งหมด', value: fmt(k.shops.value), delta: k.shops.delta, dSuf: '', trend: k.shops.trend, icon: AIc.store, sub: 'ร้าน' }, { label: 'Subscription ที่ active', value: fmt(k.active.value), delta: k.active.delta, dSuf: '', trend: k.active.trend, icon: AIc.check, sub: 'ราย' }, { label: 'MRR (รายได้ต่อเดือน)', value: '฿' + fmt(k.mrr.value), delta: k.mrr.delta, dSuf: '%', trend: k.mrr.trend, icon: AIc.card, sub: '' }, { label: 'การจองเดือนนี้', value: fmt(k.bookings.value), delta: k.bookings.delta, dSuf: '%', trend: k.bookings.trend, icon: AIc.bolt, sub: 'ครั้ง' }, ]; const pending = shops.filter(s => s.status === 'pending'); const segs = ADMIN.plans.map(p => ({ value: p.count, color: p.color, label: p.name })); const actIcon = { pending: [AIc.clock, AT.amber, AT.amberSoft], up: [AIc.up, AT.primary, AT.primarySoft], fail: [AIc.x, AT.red, AT.redSoft], paid: [AIc.check, AT.green, AT.greenSoft], susp: [AIc.pause, AT.muted, AT.surface2] }; return (
{/* KPI row */}
{kpiCards.map((c, i) => (
{c.icon(19)}
{c.label}
{c.value}{c.sub}
))}
{/* revenue + plan distribution */}
}>
฿412,800 เดือนนี้
a+p.count,0))} ร้าน`}>
{ADMIN.plans.map(p => (
{p.name} {p.count}
))}
{/* pending + activity */}
go('shops')}>ดูทั้งหมด}>
{pending.map(s => (
{AIc.store(18)}
{s.name}
{s.area} · {s.owner} ·
openShop(s.id)}>ตรวจ
))}
{ADMIN.activity.map((a, i) => { const [ic, c, b] = actIcon[a.kind]; return (
{ic(16)}
{a.who}
{a.what}
{a.when}
); })}
); } // ── SHOPS ───────────────────────────────────────────────────────────────────── function AdminShops({ shops, openShop, query, setQuery, onRegister, onShopAction }) { const [tab, setTab] = React.useState('all'); const [confirm, setConfirm] = React.useState(null); // { action, shop } const tabs = [ { id: 'all', label: 'ทั้งหมด', n: shops.length }, { id: 'active', label: 'ใช้งานอยู่', n: shops.filter(s => s.status === 'active').length }, { id: 'pending', label: 'รออนุมัติ', n: shops.filter(s => s.status === 'pending').length }, { id: 'suspended', label: 'ระงับ', n: shops.filter(s => s.status === 'suspended').length }, ]; const filtered = shops.filter(s => (tab === 'all' || s.status === tab) && (!query || (s.name + s.th + s.area + s.owner).toLowerCase().includes(query.toLowerCase()))); const cols = '1.9fr 1fr 0.75fr 1fr 0.85fr 0.7fr 0.85fr 0.9fr 0.75fr 1.65fr'; const cell = { font: `400 13px/1.3 ${AT.font}`, color: AT.ink, display: 'flex', alignItems: 'center' }; const fmtDate = (iso) => { if (!iso) return '—'; const [y, m, d] = String(iso).substring(0,10).split('-'); return `${d}/${m}/${y}`; }; const askConfirm = (action, shop) => setConfirm({ action, shop }); const doConfirm = () => { if (confirm) { onShopAction && onShopAction(confirm.action, confirm.shop); setConfirm(null); } }; const confirmCfg = confirm ? { approve: { title: 'ยืนยันการอนุมัติ', body: `อนุมัติร้าน "${confirm.shop.name}" และเปิดใช้งานทันที?`, okLabel: 'อนุมัติ', okColor: AT.green, okBg: AT.greenSoft }, suspend: { title: 'ยืนยันการระงับ', body: `ระงับการใช้งานร้าน "${confirm.shop.name}"?`, okLabel: 'ระงับ', okColor: AT.red, okBg: AT.redSoft }, activate: { title: 'ยืนยันการเปิดใช้', body: `เปิดใช้งานร้าน "${confirm.shop.name}" อีกครั้ง?`, okLabel: 'เปิดใช้', okColor: AT.primary, okBg: AT.primarySoft }, }[confirm.action] : null; // Small action icon button const ActBtn = ({ icon, label, color = AT.muted, bg = AT.surface2, onClick }) => ( ); return ( <> {/* toolbar */}
{tabs.map(tb => ( ))}
{AIc.search(16)} setQuery(e.target.value)} placeholder="ค้นหาร้าน..." style={{ border: 'none', outline: 'none', background: 'transparent', font: `400 13px/1 ${AT.font}`, color: AT.ink, padding: '9px 0', width: '100%' }} />
เพิ่มร้าน
{/* header */}
{['ร้านค้า', 'เจ้าของ', 'ที่ตั้ง', 'แพ็กเกจ', 'สถานะ', 'Package', 'เริ่ม', 'สิ้นสุด', 'คงเหลือ', ''].map((h, i) => ( {h} ))}
{/* rows */}
{filtered.map((s, i) => (
openShop(s.id)} className="adm-row" style={{ display: 'grid', gridTemplateColumns: cols, gap: 10, padding: '12px 20px', borderBottom: i < filtered.length - 1 ? `1px solid ${AT.line2}` : 'none', cursor: 'pointer', alignItems: 'center' }}> {/* ร้านค้า */}
{s.name[0]}
{s.name}
{s.name_th || s.th}
{/* เจ้าของ */} {s.owner} {/* ที่ตั้ง */} {s.area} {/* แพ็กเกจ */} {/* สถานะ */} {/* Package (price) */} {s.mrr ? '฿' + fmt(s.mrr) : '—'} {/* เริ่ม */} {fmtDate(s.start_date)} {/* สิ้นสุด */} {fmtDate(s.end_date)} {/* คงเหลือ */} {s.start_date ? (Number(s.days_left) <= 0 ? 'หมดอายุ' : s.days_left + ' วัน') : '—'} {/* Actions */}
e.stopPropagation()}> window.open('#', '_blank')} /> onShopAction && onShopAction('packages', s)} /> {s.status === 'active' && ( askConfirm('suspend', s)} /> )} {s.status === 'suspended' && ( askConfirm('activate', s)} /> )} {s.status === 'pending' && ( askConfirm('approve', s)} /> )}
))} {filtered.length === 0 &&
ไม่พบร้านค้า
}
{/* Confirm modal */} {confirm && confirmCfg && (
setConfirm(null)}>
e.stopPropagation()}>
{confirmCfg.title}
{confirmCfg.body}
)} ); } // ── BILLING ─────────────────────────────────────────────────────────────────── function AdminBilling({ invoices, retry }) { const failed = invoices.filter(i => i.status === 'failed'); const failedSum = failed.reduce((a, i) => a + i.amount, 0); const stat = [ { label: 'MRR', value: '฿412,800', c: AT.primary, b: AT.primarySoft, icon: AIc.card }, { label: 'รายได้เดือนนี้', value: '฿438,210', c: AT.green, b: AT.greenSoft, icon: AIc.up }, { label: 'ค้างชำระ', value: '฿' + fmt(failedSum), c: AT.red, b: AT.redSoft, icon: AIc.x, note: `${failed.length} ใบแจ้งหนี้` }, { label: 'Active subscriptions', value: '214', c: AT.violet, b: AT.violetSoft, icon: AIc.check }, ]; const istatus = { paid: AT.green, failed: AT.red, pending: AT.amber }; return (
{stat.map((s, i) => (
{s.icon(18)}
{s.label}
{s.value}
{s.note &&
{s.note}
}
))}
{/* plan revenue + invoices */}
{ADMIN.plans.filter(p => p.price > 0).map(p => { const rev = p.price * p.count, max = Math.max(...ADMIN.plans.filter(x => x.price > 0).map(x => x.price * x.count)); return (
{p.name} · {p.count} ร้าน ฿{fmt(rev)}
); })}
ส่งออก} pad={0} bodyStyle={{ padding: 0 }}>
{['เลขที่', 'ร้านค้า', 'แพ็กเกจ', 'ยอด', 'สถานะ', ''].map((h, i) => {h})}
{invoices.map((iv, i) => (
{iv.id}
{iv.shop}
{iv.date}
{iv.plan} ฿{fmt(iv.amount)} {iv.status === 'failed' ? retry(iv.id)}>เรียกเก็บ : —}
))}
); } // ── ANALYTICS ───────────────────────────────────────────────────────────────── function AdminAnalytics({ shops }) { const top = [...shops].filter(s => s.bk > 0).sort((a, b) => b.bk - a.bk).slice(0, 5); const maxBk = top[0]?.bk || 1; const metrics = [ { label: 'การจองทั้งหมด', value: '18,430', d: 14.2 }, { label: 'อัตรามาตามนัด', value: '91.4%', d: 2.1 }, { label: 'No-show rate', value: '6.2%', d: -1.4 }, { label: 'มัดจำที่เก็บได้', value: '฿284,500', d: 11.8 }, ]; return (
{metrics.map((m, i) => (
{m.label}
{m.value}
))}
({ m: r.m, v: ADMIN.kpis.bookings.trend[i + 4] || r.v / 22 }))} color={AT.violet} />
{top.map((s, i) => (
{i + 1}{s.name} {fmt(s.bk)}
))}
); } // ── FEATURE FLAGS ───────────────────────────────────────────────────────────── function AdminFlags({ features, toggle }) { const planCols = ADMIN.plans.filter(p => p.id !== 'trial'); return (
ฟีเจอร์ {planCols.map(p => {p.name})}
{features.map((f, i) => (
{f.name}
{f.desc}
{planCols.map(p => { const on = f.plans[p.id]; return (
); })}
))} ); } Object.assign(window, { AUI, AdminOverview, AdminShops, AdminBilling, AdminAnalytics, AdminFlags });