/* global React, Icon, kDb, kStorage, PRODUCT, applyProductConfig, printSlipWithQR */ const { useState, useEffect, useMemo } = React; // ── Line chart (pure SVG) ─────────────────────────────────────────────────── function LineChart({ data, yFmt = v => "$" + v.toFixed(0), color = "var(--accent)" }) { const W = 800, H = 160; const pL = 44, pR = 8, pT = 10, pB = 30; const cW = W - pL - pR, cH = H - pT - pB; const vals = data.map(d => d.v); const max = Math.max(...vals, 1); const cx = i => pL + (i / Math.max(data.length - 1, 1)) * cW; const cy = v => pT + cH - (v / max) * cH; const linePts = data.map((d, i) => `${i ? "L" : "M"} ${cx(i).toFixed(1)} ${cy(d.v).toFixed(1)}`).join(" "); const area = `${linePts} L ${cx(data.length - 1).toFixed(1)} ${(pT + cH).toFixed(1)} L ${pL} ${(pT + cH).toFixed(1)} Z`; const gridYs = [0, 0.25, 0.5, 0.75, 1].map(t => ({ yy: pT + t * cH, val: max * (1 - t) })); const step = Math.max(1, Math.ceil(data.length / 7)); const xTicks = data.map((d, i) => ({ d, i })).filter(({ i }) => i % step === 0 || i === data.length - 1); return ( {gridYs.map((g, k) => ( {yFmt(g.val)} ))} {xTicks.map(({ d, i }) => ( {d.label} ))} {data.map((d, i) => d.v > 0 ? : null )} ); } // ── Analytics section ─────────────────────────────────────────────────────── function AnalyticsSection({ orders }) { const [range, setRange] = useState(30); // 7 | 30 | 90 | 0 = all time const [chart, setChart] = useState("revenue"); // "revenue" | "count" const cutoff = useMemo(() => { if (range === 0) return null; const d = new Date(); d.setDate(d.getDate() - range); d.setHours(0, 0, 0, 0); return d; }, [range]); const filtered = useMemo(() => cutoff ? orders.filter(o => { const d = o.createdAt?.toDate?.(); return d && d >= cutoff; }) : orders, [orders, cutoff] ); // ── Metrics ──────────────────────────────────────────────────────────────── const totalRevenue = filtered.reduce((s, o) => s + (o.total || 0), 0); const totalDiscount = filtered.reduce((s, o) => s + (o.discount || 0), 0); const totalOrders = filtered.length; const avgOrder = totalOrders > 0 ? totalRevenue / totalOrders : 0; // ── Daily timeline ───────────────────────────────────────────────────────── const days = range > 0 ? range : 90; const dayData = useMemo(() => { const today = new Date(); today.setHours(0, 0, 0, 0); return Array.from({ length: days }, (_, i) => { const d = new Date(today); d.setDate(d.getDate() - (days - 1 - i)); const key = d.toISOString().slice(0, 10); const dayOrders = orders.filter(o => o.createdAt?.toDate?.()?.toISOString().slice(0, 10) === key); return { key, label: d.toLocaleDateString("en-US", { month: "short", day: "numeric" }), revenue: dayOrders.reduce((s, o) => s + (o.total || 0), 0), count: dayOrders.length, }; }); }, [orders, days]); const chartData = dayData.map(d => ({ label: d.label, v: chart === "revenue" ? d.revenue : d.count })); // ── Status breakdown ─────────────────────────────────────────────────────── const statusBreakdown = Object.entries(STATUS_LABEL).map(([k, label]) => ({ label: `${STATUS_KH[k]} · ${label}`, value: filtered.filter(o => o.status === k).length, color: STATUS_COLOR[k], })).filter(s => s.value > 0); // ── Variant performance ──────────────────────────────────────────────────── const variantPerf = PRODUCT.sizes.map(s => { const qty = filtered.reduce((sum, o) => sum + (o.items || []).filter(it => it.sizeId === s.id).reduce((a, it) => a + it.qty, 0), 0); const rev = filtered.reduce((sum, o) => sum + (o.items || []).filter(it => it.sizeId === s.id).reduce((a, it) => a + it.qty * (it.price || 0), 0), 0); return { ...s, qty, rev }; }); const maxRev = Math.max(...variantPerf.map(v => v.rev), 1); // ── Stat card ────────────────────────────────────────────────────────────── const StatCard = ({ kh, en, val, accent }) => (
{kh} · {en} {val}
); return (
{/* ── Range + chart toggle ── */}
{[[7,"7D"],[30,"30D"],[90,"90D"],[0,"All"]].map(([v, l]) => ( ))}
{filtered.length} ORDERS · {{ 7:"7 days",30:"30 days",90:"90 days",0:"All time" }[range]}
{/* ── Metrics ── */}
{/* ── Chart ── */}
{chart === "revenue" ? "ចំណូល" : "ចំនួនការបញ្ជាទិញ"} {" · "}{chart === "revenue" ? "Revenue over time" : "Orders over time"}
{chartData.every(d => d.v === 0) ?
No data in this period.
: `$${v.toFixed(0)}` : v => String(Math.round(v))} color={chart === "revenue" ? "var(--accent)" : "#2563eb"} /> }
{/* ── Status + Variants ── */}
ស្ថានភាព · By status {statusBreakdown.length === 0 ? No orders. :
{statusBreakdown.map(s => (
{s.label} {s.value}
))}
}
ប្រភេទ · Variant performance
{variantPerf.map(v => (
{v.labelKh} {v.label} · {v.qty} units
${v.rev.toFixed(2)}
))}
{/* ── Discount summary ── */} {totalDiscount > 0 && (
បញ្ចុះតម្លៃសរុប · Total discounts given −${totalDiscount.toFixed(2)}
)}
); } const STATUS_NEXT = { pending: "confirmed", pending_payment: "confirmed", confirmed: "shipped", shipped: "delivered" }; const STATUS_LABEL = { pending: "Pending", pending_payment: "Awaiting Payment", confirmed: "Confirmed", shipped: "Shipped", delivered: "Delivered" }; const STATUS_KH = { pending: "រង់ចាំ", pending_payment: "រង់ចាំABA", confirmed: "បញ្ជាក់", shipped: "កំពុងដឹក", delivered: "បានដឹក" }; const STATUS_COLOR = { pending: "var(--accent)", pending_payment: "#f59e0b", confirmed: "#2563eb", shipped: "#7c3aed", delivered: "var(--primary)" }; const STATUS_ACTION = { pending: "Confirm order", pending_payment: "Confirm manually", confirmed: "Mark shipped", shipped: "Mark delivered" }; // ── Shared field ──────────────────────────────────────────────────────────── function AField({ label, value, onChange, type = "text", placeholder, mono }) { return (
); } // ── Promos section ────────────────────────────────────────────────────────── function PromosSection() { const [promos, setPromos] = useState([]); const [loading, setLoading] = useState(true); const [newForm, setNewForm] = useState({ code: "", type: "percent", value: "", minOrder: "0" }); const [creating, setCreating] = useState(false); const [createErr, setCreateErr] = useState(""); const [actioning, setActioning] = useState(null); useEffect(() => { const unsub = kDb.collection("promos").onSnapshot( snap => { const list = snap.docs.map(d => ({ id: d.id, ...d.data() })); list.sort((a, b) => a.code > b.code ? 1 : -1); setPromos(list); setLoading(false); }, () => setLoading(false) ); return unsub; }, []); const setNF = k => e => setNewForm(f => ({ ...f, [k]: e.target.value })); const createPromo = async () => { const code = newForm.code.trim().toUpperCase(); if (!code) { setCreateErr("Code is required."); return; } if (!newForm.value || isNaN(newForm.value)) { setCreateErr("Value is required."); return; } setCreating(true); setCreateErr(""); try { await kDb.collection("promos").doc(code).set({ code, type: newForm.type, value: parseFloat(newForm.value), minOrder: parseFloat(newForm.minOrder) || 0, active: true, uses: 0, }); setNewForm({ code: "", type: "percent", value: "", minOrder: "0" }); } catch { setCreateErr("Could not create. Try again."); } finally { setCreating(false); } }; const toggle = async (p) => { setActioning(p.id); await kDb.collection("promos").doc(p.id).update({ active: !p.active }).catch(() => {}); setActioning(null); }; const del = async (p) => { if (!window.confirm(`Delete promo code "${p.code}"?`)) return; setActioning(p.id); await kDb.collection("promos").doc(p.id).delete().catch(() => {}); setActioning(null); }; const sectionHead = (kh, en) => (
{kh} · {en}
); return (
{/* ── Create ── */}
{sectionHead("បង្កើតកូដថ្មី", "Create promo code")}
setNewForm(f => ({ ...f, code: e.target.value.toUpperCase() }))} placeholder="SAVE10" mono />
{createErr &&
{createErr}
}
{/* ── List ── */}
{sectionHead("កូដបញ្ចុះតម្លៃ", "Existing promo codes")} {loading && Loading…} {!loading && promos.length === 0 && ( No promo codes yet. )} {!loading && promos.length > 0 && (
<>
{["CODE","TYPE","VALUE","MIN ORDER","USES","STATUS",""].map(h => ( {h} ))}
{promos.map(p => (
{p.code} {p.type === "percent" ? "%" : "$"} off {p.type === "percent" ? `${p.value}%` : `$${p.value}`} ${p.minOrder || 0} min {p.uses || 0} {p.active ? "Active" : "Paused"}
))}
)}
); } // ── Products section ──────────────────────────────────────────────────────── function ProductsSection() { const fileInputRef = React.useRef(null); const [images, setImages] = useState(() => PRODUCT.images || []); const [uploading, setUploading] = useState(false); const [uploadProgress, setUploadProgress] = useState(0); const [form, setForm] = useState(() => ({ nameKh: PRODUCT.nameKh || "", name: PRODUCT.name || "", taglineKh: PRODUCT.taglineKh || "", tagline: PRODUCT.tagline || "", sizes: PRODUCT.sizes.map(s => ({ id: s.id, labelKh: s.labelKh || "", label: s.label || "", descKh: s.descKh || "", desc: s.desc || "", priceUsd: String(s.priceUsd || ""), popular: !!s.popular, save: s.save || "", buyingPrice: "", profitType: "pct", profitValue: "", })), })); const [storeForm, setStoreForm] = useState(() => { const cfg = window.STORE_CONFIG || {}; return { shippingFreeThreshold: String(cfg.shippingFreeThreshold ?? 75), shippingRate: String(cfg.shippingRate ?? 9), }; }); const [saving, setSaving] = useState(false); const [saved, setSaved] = useState(false); const [err, setErr] = useState(""); const [invForm, setInvForm] = useState(() => { const inv = window.INVENTORY || {}; return Object.fromEntries(PRODUCT.sizes.map(s => [s.id, inv[s.id] != null ? String(inv[s.id]) : ""])); }); const [invSaving, setInvSaving] = useState(false); const [invSaved, setInvSaved] = useState(false); const saveImageList = async (newImages) => { await kDb.collection("config").doc("product").set({ images: newImages }, { merge: true }); PRODUCT.images = newImages; if (newImages.length) { window.PRODUCT_SHOTS = newImages.map((src, i) => ({ src, c: `PRODUCT · IMAGE ${i + 1}` })); } }; const handleUpload = async (e) => { const files = Array.from(e.target.files); if (!files.length) return; setUploading(true); setUploadProgress(0); try { const urls = []; for (let i = 0; i < files.length; i++) { const f = files[i]; const ref = kStorage.ref(`product-images/${Date.now()}-${f.name.replace(/[^a-zA-Z0-9._-]/g, "_")}`); await ref.put(f); const url = await ref.getDownloadURL(); urls.push(url); setUploadProgress(Math.round(((i + 1) / files.length) * 100)); } const next = [...images, ...urls]; setImages(next); await saveImageList(next); } catch (err) { console.error("Upload failed", err); } finally { setUploading(false); setUploadProgress(0); e.target.value = ""; } }; const deleteImage = async (url) => { const next = images.filter(u => u !== url); setImages(next); await saveImageList(next); try { await kStorage.refFromURL(url).delete(); } catch {} // fire-and-forget }; const moveImage = async (i, dir) => { const next = [...images]; const j = i + dir; if (j < 0 || j >= next.length) return; [next[i], next[j]] = [next[j], next[i]]; setImages(next); await saveImageList(next); }; const setF = (key) => (e) => setForm(f => ({ ...f, [key]: e.target.value })); const setSize = (idx, key) => (e) => setForm(f => { const sizes = [...f.sizes]; sizes[idx] = { ...sizes[idx], [key]: e.target.value }; return { ...f, sizes }; }); const setSizeCheck = (idx, key) => (e) => setForm(f => { const sizes = [...f.sizes]; sizes[idx] = { ...sizes[idx], [key]: e.target.checked }; return { ...f, sizes }; }); const setProfit = (idx, key, val) => setForm(f => { const sizes = [...f.sizes]; const s = { ...sizes[idx], [key]: val }; const cost = parseFloat(s.buyingPrice); const pv = parseFloat(s.profitValue); if (!isNaN(cost) && cost > 0 && !isNaN(pv) && pv >= 0) { const price = s.profitType === "pct" ? cost * (1 + pv / 100) : cost + pv; s.priceUsd = price.toFixed(2); } sizes[idx] = s; return { ...f, sizes }; }); const saveInventory = async () => { setInvSaving(true); try { const data = {}; PRODUCT.sizes.forEach(s => { const v = parseInt(invForm[s.id], 10); data[s.id] = isNaN(v) ? 999 : Math.max(0, v); }); await kDb.collection("config").doc("inventory").set(data); Object.assign(window.INVENTORY, data); setInvSaved(true); setTimeout(() => setInvSaved(false), 3000); } catch { /* silent */ } finally { setInvSaving(false); } }; const handleSave = async () => { setSaving(true); setErr(""); try { const productData = { ...form, sizes: form.sizes.map(s => ({ ...s, priceUsd: parseFloat(s.priceUsd) || 0 })), }; const storeData = { shippingFreeThreshold: parseFloat(storeForm.shippingFreeThreshold) || 75, shippingRate: parseFloat(storeForm.shippingRate) || 9, }; await Promise.all([ kDb.collection("config").doc("product").set(productData), kDb.collection("config").doc("store").set(storeData), ]); applyProductConfig(productData); Object.assign(window.STORE_CONFIG, storeData); setSaved(true); setTimeout(() => setSaved(false), 3000); } catch (e) { setErr("Save failed — please try again."); } finally { setSaving(false); } }; const sectionHead = (kh, en) => (
{kh} · {en}
); return (
{/* ── Product name + tagline ── */}
{sectionHead("ផលិតផល", "Product")}
{/* ── Sizes ── */}
{sectionHead("ប្រភេទ", "Variants")}
{form.sizes.map((s, idx) => (
VARIANT {idx + 1} · {s.id}
{/* ── Profit calculator ── */}
គណនាតម្លៃ · Price calculator
setProfit(idx, "buyingPrice", e.target.value)} type="number" placeholder="0.00" mono />
setProfit(idx, "profitValue", e.target.value)} type="number" placeholder={s.profitType === "pct" ? "30" : "5"} mono />
{s.buyingPrice && s.profitValue && (
${s.priceUsd} {" "}= ${parseFloat(s.buyingPrice || 0).toFixed(2)} cost +{" "} {s.profitType === "pct" ? `${s.profitValue}% profit` : `$${parseFloat(s.profitValue || 0).toFixed(2)} profit`}
)}
))}
{/* ── Shipping ── */}
{sectionHead("ការដឹកជញ្ជូន", "Shipping")}
setStoreForm(f => ({ ...f, shippingFreeThreshold: e.target.value }))} type="number" placeholder="75" mono /> setStoreForm(f => ({ ...f, shippingRate: e.target.value }))} type="number" placeholder="9" mono />
{/* ── Inventory ── */}
{sectionHead("ស្តុក", "Inventory")}
{PRODUCT.sizes.map(s => { const stock = invForm[s.id] === "" ? null : parseInt(invForm[s.id], 10); const oos = stock === 0; const low = stock !== null && stock > 0 && stock <= 10; return (
{s.label} {oos && OUT OF STOCK} {low && LOW}
setInvForm(f => ({ ...f, [s.id]: e.target.value }))} type="number" placeholder="999 = unlimited" mono />
); })}
{invSaved && Saved ✓}
{/* ── Images ── */}
{sectionHead("រូបភាពផលិតផល", "Product images")} {images.length > 0 ? (
{images.map((url, i) => (
{`Product
{i > 0 && ( )}
{i === 0 && (
HERO
)}
))}
) : (
No uploaded images. Using default local photos.
)}
{uploading && (
)} JPG · PNG · WEBP · First image = hero
{/* ── Save ── */}
{err && (
{err}
)} {saved && (
រក្សាទុករួចរាល់ · Saved successfully.
)}
); } // ── Notifications section ─────────────────────────────────────────────────── const WEBHOOK_URL = "https://telegramwebhook-qsn4ilcqva-uc.a.run.app"; function NotificationsSection() { const [form, setForm] = useState({ telegramBotToken: "", telegramChatId: "" }); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [saved, setSaved] = useState(false); const [testing, setTesting] = useState(false); const [testMsg, setTestMsg] = useState(""); const [hooking, setHooking] = useState(false); const [hookMsg, setHookMsg] = useState(""); useEffect(() => { kDb.collection("config").doc("notifications").get() .then(doc => { if (doc.exists) { const d = doc.data(); setForm({ telegramBotToken: d.telegramBotToken || "", telegramChatId: String(d.telegramChatId || "") }); } setLoading(false); }) .catch(() => setLoading(false)); }, []); const setF = k => e => setForm(f => ({ ...f, [k]: e.target.value })); const save = async () => { setSaving(true); setSaved(false); try { await kDb.collection("config").doc("notifications").set({ telegramBotToken: form.telegramBotToken.trim(), telegramChatId: form.telegramChatId.trim(), }); setSaved(true); setTimeout(() => setSaved(false), 3000); } catch {} finally { setSaving(false); } }; const test = async () => { setTesting(true); setTestMsg(""); const chatIds = form.telegramChatId.split(",").map(s => s.trim()).filter(Boolean); try { const results = await Promise.all(chatIds.map(id => fetch(`https://api.telegram.org/bot${form.telegramBotToken.trim()}/sendMessage`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ chat_id: id, text: "✅ Kshop test — Telegram notifications are connected!" }), }).then(r => r.json()) )); const failed = results.filter(d => !d.ok); setTestMsg(failed.length === 0 ? "success" : `Error on some IDs: ${failed.map(d => d.description).join(", ")}`); } catch (e) { setTestMsg("Failed to connect: " + e.message); } finally { setTesting(false); } }; const registerWebhook = async () => { setHooking(true); setHookMsg(""); try { const r = await fetch( `https://api.telegram.org/bot${form.telegramBotToken.trim()}/setWebhook`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: WEBHOOK_URL }) } ); const d = await r.json(); setHookMsg(d.ok ? "success" : `Error: ${d.description}`); } catch (e) { setHookMsg("Failed: " + e.message); } finally { setHooking(false); } }; if (loading) return
Loading…
; return (
SETUP GUIDE 1. Message @BotFather on Telegram → /newbot → copy the token.
2. Add your bot to a group, or get your personal chat ID via @userinfobot.
3. Paste both below → Save → Test.
{testMsg && (
{testMsg === "success" ? "✓ Test message sent! Check your Telegram." : testMsg}
)}
{saved && Saved ✓} {hookMsg && ( {hookMsg === "success" ? "Webhook registered ✓" : hookMsg} )}
); } // ── Bakong section ────────────────────────────────────────────────────────── function BakongSection() { const [bkForm, setBkForm] = useState({ accountId: "", token: "", merchantName: "KSHOP", currency: "USD" }); const [loading, setLoading] = useState(true); const [bkSaving, setBkSaving] = useState(false); const [bkSaved, setBkSaved] = useState(false); useEffect(() => { kDb.collection("config").doc("bakong").get() .then(doc => { if (doc.exists) { const d = doc.data(); setBkForm({ accountId: d.accountId || "", token: d.token || "", merchantName: d.merchantName || "KSHOP", currency: d.currency || "USD" }); } setLoading(false); }) .catch(() => setLoading(false)); }, []); const setBk = k => e => setBkForm(f => ({ ...f, [k]: e.target.value })); const saveBakong = async () => { setBkSaving(true); setBkSaved(false); try { await kDb.collection("config").doc("bakong").set({ accountId: bkForm.accountId.trim(), token: bkForm.token.trim(), merchantName: bkForm.merchantName.trim() || "KSHOP", currency: bkForm.currency, }); setBkSaved(true); setTimeout(() => setBkSaved(false), 3000); } catch {} finally { setBkSaving(false); } }; if (loading) return
Loading…
; return (
Get your Account ID from the Bakong Business app (format: username@bankcode) and your API Token from the Bakong Open API portal.
Currency
{["USD", "KHR"].map(c => ( ))}
{bkSaved && Saved ✓}
); } // ── Admin panel ───────────────────────────────────────────────────────────── function AdminPanel({ user, setRoute }) { const [isAdmin, setIsAdmin] = useState(null); // null=checking, true/false=resolved const [section, setSection] = useState("orders"); const [orders, setOrders] = useState([]); const [loading, setLoading] = useState(true); const [filter, setFilter] = useState("all"); const [updating, setUpdating] = useState(null); const [expanded, setExpanded] = useState(null); useEffect(() => { if (!user) { setIsAdmin(false); return; } kDb.collection("admins").doc(user.uid).get() .then(() => setIsAdmin(true)) .catch(() => setIsAdmin(false)); }, [user]); useEffect(() => { if (isAdmin !== true) { if (isAdmin === false) setLoading(false); return; } const unsub = kDb.collection("orders").onSnapshot( snap => { const list = snap.docs.map(d => ({ id: d.id, ...d.data() })); list.sort((a, b) => (b.createdAt?.toMillis?.() || 0) - (a.createdAt?.toMillis?.() || 0)); setOrders(list); setLoading(false); }, () => setLoading(false) ); return unsub; }, [isAdmin]); const advanceStatus = async (order) => { const next = STATUS_NEXT[order.status]; if (!next) return; setUpdating(order.id); try { await kDb.collection("orders").doc(order.id).update({ status: next }); } finally { setUpdating(null); } }; // ── Access denied ────────────────────────────────────────────────────────── if (!isAdmin) { return (

គ្មានការអនុញ្ញាត

Access denied.
); } const filtered = filter === "all" ? orders : orders.filter(o => o.status === filter); const confirmed = orders.filter(o => o.status === "confirmed").length; const revenue = orders.reduce((s, o) => s + (o.total || 0), 0); return (
{/* Header */}
— ផ្ទាំងគ្រប់គ្រង · Admin

ការគ្រប់គ្រង។

Management.
{/* Section tabs */}
{[ { id: "orders", kh: "ការបញ្ជាទិញ", en: "Orders", badge: confirmed > 0 ? confirmed : null }, { id: "products", kh: "ផលិតផល", en: "Products", badge: null }, { id: "promos", kh: "បញ្ចុះតម្លៃ", en: "Promos", badge: null }, { id: "analytics", kh: "វិភាគ", en: "Analytics", badge: null }, { id: "notifications", kh: "ការជូនដំណឹង", en: "Notifications", badge: null }, { id: "bakong", kh: "បាគង KHQR", en: "Bakong", badge: null }, ].map(({ id, kh, en, badge }) => ( ))}
{/* ── Orders section ── */} {section === "orders" && ( <> {/* Stats */}
{[ { kh: "ការបញ្ជាទិញសរុប", en: "Total orders", val: orders.length, serif: false, accent: false }, { kh: "បញ្ជាក់", en: "Confirmed", val: confirmed, serif: false, accent: confirmed > 0 }, { kh: "ចំណូលសរុប", en: "Revenue", val: `$${revenue.toFixed(2)}`, serif: true, accent: false }, ].map(s => (
{s.kh} · {s.en} {s.val}
))}
{/* Filter tabs */}
{[ ["all", "ទាំងអស់", "All"], ["pending_payment", STATUS_KH.pending_payment, STATUS_LABEL.pending_payment], ["confirmed", STATUS_KH.confirmed, STATUS_LABEL.confirmed], ["shipped", STATUS_KH.shipped, STATUS_LABEL.shipped], ["delivered", STATUS_KH.delivered, STATUS_LABEL.delivered], ].map(([id, kh, en]) => { const count = id === "all" ? orders.length : orders.filter(o => o.status === id).length; return ( ); })}
{/* Loading */} {loading && (
)}
{/* Table header */} {!loading && filtered.length > 0 && (
{["", "ORDER ID", "DATE", "CUSTOMER", "ITEMS + ADDRESS", "TOTAL", "STATUS"].map(h => ( {h} ))}
)} {/* Empty state */} {!loading && filtered.length === 0 && (
គ្មានការបញ្ជាទិញ No orders in this category.
)} {/* Order rows */} {!loading && filtered.map(o => { const date = o.createdAt?.toDate?.().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) || "—"; const nextStatus = STATUS_NEXT[o.status]; const isUpdating = updating === o.id; const isExpanded = expanded === o.id; return (
{/* ── Summary row (clickable) ── */}
setExpanded(isExpanded ? null : o.id)} onKeyDown={e => (e.key === "Enter" || e.key === " ") && setExpanded(isExpanded ? null : o.id)} style={{ display: "grid", gridTemplateColumns: "20px 130px 90px 200px 1fr 70px 180px", gap: 16, padding: "20px 20px", alignItems: "start", cursor: "pointer", background: isExpanded ? "var(--bg-2)" : "transparent", }} > {/* Chevron */} ▶ KS-{o.id.slice(0, 8).toUpperCase()} {date}
{o.name || "—"} {o.phone || "—"}
{(o.items || []).map((it, i) => ( {it.labelKh || it.label} ×{it.qty} ))} {o.address && ( {o.address} )}
${Number(o.total || 0).toFixed(2)}
e.stopPropagation()}> {STATUS_KH[o.status] || o.status} · {(STATUS_LABEL[o.status] || o.status).toUpperCase()} {nextStatus && ( )} {o.status === "delivered" && (
COMPLETE
)}
{/* ── Expanded detail panel ── */} {isExpanded && (
{/* Left: customer + items */}
ទំនាក់ទំនង · Customer
{[ ["Name", o.name || "—"], ["Phone", o.phone || "—"], ["Address", o.address || "—"], ["Payment", o.paymentMethod === "cod" ? "Cash on Delivery" : (o.paymentMethod || "—").toUpperCase()], ].map(([k, v]) => ( {k} {v} ))}
{o.notes && (
"{o.notes}"
)}
ទំនិញ · Items {(o.items || []).map((it, i) => (
{it.labelKh || it.label} ×{it.qty} ${Number((it.price || 0) * it.qty).toFixed(2)}
))}
{/* Right: totals + print */}
ការទូទាត់ · Totals {[ ["Subtotal", `$${Number(o.subtotal || 0).toFixed(2)}`], ["Shipping", Number(o.shipping || 0) === 0 ? "Free" : `$${Number(o.shipping || 0).toFixed(2)}`], ["Total", `$${Number(o.total || 0).toFixed(2)}`], ].map(([k, v], i) => (
{k} {v}
))}
Order ID KS-{o.id.slice(0, 8).toUpperCase()}
)}
); })}
{/* admin-table-inner */}
{/* admin-table-scroll */} )} {/* ── Products section ── */} {section === "products" && } {/* ── Promos section ── */} {section === "promos" && } {/* ── Analytics section ── */} {section === "analytics" && } {/* ── Notifications section ── */} {section === "notifications" && } {/* ── Bakong section ── */} {section === "bakong" && }
); } Object.assign(window, { AdminPanel });