);
}
// ─────────────────────────────────────────────────────────────────────
// OVERVIEW
// ─────────────────────────────────────────────────────────────────────
function OverviewView({ data, range, setRange, role }) {
const { products, monthLabels, monthlyByCat, totals, mtoGroups,
dayLabels, dailyByCat } = data;
const months = monthLabels || [];
const days = (dayLabels && dayLabels.length > 0) ? dayLabels : [];
const hasDailyData = days.length > 0;
// ── new states for month picker + comparison ──────────────────────
const [selMonth, setSelMonth] = uS(null); // null = latest
const [cmpSel, setCmpSel] = uS([]); // explicit month selection for comparison
const [showCmp, setShowCmp] = uS(false);
// activeMonth: currently selected month (for "รายเดือน" mode)
const activeMonth = selMonth || months[months.length - 1] || null;
const monthlySeries = uM(() => months.map(m => {
const cats = monthlyByCat[m] || {};
let qty = 0, rev = 0;
for (const c of Object.keys(cats)) { qty += cats[c].qty; rev += cats[c].sales; }
return { month: m, label: monthLabel(m), qty, rev };
}), [months, monthlyByCat]);
// Real daily series from uploaded dailySales
const dailySeries = uM(() => {
if (!hasDailyData) return [];
return days.map(d => {
const cats = (dailyByCat || {})[d] || {};
let qty = 0, rev = 0;
for (const c of Object.keys(cats)) { qty += cats[c].qty; rev += cats[c].sales; }
// Format DD/MM/YYYY → DD/MM
const parts = d.split("/");
const label = parts.length >= 2 ? `${parts[0]}/${parts[1]}` : d;
return { day: d, label, qty, rev };
});
}, [days, dailyByCat, hasDailyData]);
// daily series filtered to selected month (for drill-down)
const selMonthDailySeries = uM(() => {
if (!hasDailyData || !activeMonth) return dailySeries;
const [mo, yr] = activeMonth.split("/");
if (!yr) return dailySeries;
return dailySeries.filter(s => {
const dp = s.day.split("/"); // DD/MM/YYYY
return dp.length >= 3 && dp[1] === mo && dp[2] === yr;
});
}, [activeMonth, dailySeries, hasDailyData]);
const filtered = uM(() => {
if (range === 'day') return dailySeries;
if (range === 'year') return monthlySeries;
if (range === 'month') return monthlySeries.filter(m => m.month === activeMonth);
return monthlySeries;
}, [monthlySeries, dailySeries, range, activeMonth]);
const sumRev = filtered.reduce((s,m) => s + m.rev, 0);
const sumQty = filtered.reduce((s,m) => s + m.qty, 0);
const prevRev = monthlySeries.length >= 2 ? monthlySeries[monthlySeries.length-2].rev : 0;
const curRev = monthlySeries[monthlySeries.length-1]?.rev || 0;
const momDelta = prevRev > 0 ? ((curRev - prevRev) / prevRev * 100).toFixed(1) : null;
// For daily delta: last day vs previous day
const dailyDelta = uM(() => {
if (range !== 'day' || dailySeries.length < 2) return null;
const last = dailySeries[dailySeries.length-1].rev;
const prev = dailySeries[dailySeries.length-2].rev;
if (!prev) return null;
return ((last - prev) / prev * 100).toFixed(1);
}, [range, dailySeries]);
const allCats = uM(() => {
const s = new Set();
products.forEach(p => p.cat && s.add(p.cat));
return [...s].sort();
}, [products]);
// catShare: use daily data when in day mode
const catShare = uM(() => {
let accum = {};
if (range === 'day' && hasDailyData) {
for (const d of days) {
const cats = (dailyByCat || {})[d] || {};
for (const c of Object.keys(cats)) {
if (!c || c === "ไม่มีรหัสสินค้า") continue;
accum[c] = (accum[c] || 0) + cats[c].sales;
}
}
} else {
const targetMonths = range === 'year' ? months : (activeMonth ? [activeMonth] : months.slice(-1));
for (const m of targetMonths) {
const cats = monthlyByCat[m] || {};
for (const c of Object.keys(cats)) {
if (!c || c === "ไม่มีรหัสสินค้า") continue;
accum[c] = (accum[c] || 0) + cats[c].sales;
}
}
}
return Object.entries(accum)
.map(([cat, rev]) => ({ cat, rev, color: catColor(cat, allCats) }))
.sort((a,b) => b.rev - a.rev);
}, [monthlyByCat, dailyByCat, range, months, days, allCats, hasDailyData]);
const topCats = catShare.slice(0, 6).map(c => c.cat);
// Stacked chart: use daily or monthly series depending on mode
const stackedSeries = uM(() => {
// รายวัน mode — use full daily data
if (range === 'day' && hasDailyData) {
return days.map(d => {
const parts = d.split("/");
const label = parts.length >= 2 ? `${parts[0]}/${parts[1]}` : d;
const row = { label };
const cats = (dailyByCat || {})[d] || {};
let other = 0;
for (const c of Object.keys(cats)) {
if (topCats.includes(c)) row[c] = Math.round(cats[c].sales);
else other += cats[c].sales;
}
row["อื่นๆ"] = Math.round(other);
return row;
});
}
// รายเดือน drill-down — show daily within selected month if available
if (range === 'month' && hasDailyData && selMonthDailySeries.length > 0) {
return selMonthDailySeries.map(s => {
const dp = s.day.split("/");
const label = dp.length >= 2 ? `${dp[0]}/${dp[1]}` : s.day;
const row = { label };
const cats = (dailyByCat || {})[s.day] || {};
let other = 0;
for (const c of Object.keys(cats)) {
if (topCats.includes(c)) row[c] = Math.round(cats[c].sales);
else other += cats[c].sales;
}
row["อื่นๆ"] = Math.round(other);
return row;
});
}
// ทั้งปี / รายเดือน (no daily) — use monthly data
const targetMonths = range === 'month' && activeMonth ? [activeMonth] : months;
return targetMonths.map(m => {
const row = { label: monthLabel(m) };
const cats = monthlyByCat[m] || {};
let other = 0;
for (const c of Object.keys(cats)) {
if (topCats.includes(c)) row[c] = Math.round(cats[c].sales);
else other += cats[c].sales;
}
row["อื่นๆ"] = Math.round(other);
return row;
});
}, [months, days, monthlyByCat, dailyByCat, topCats, range, hasDailyData, activeMonth, selMonthDailySeries]);
const topSellers = uM(() =>
[...products].filter(p => p.soldRev > 0 && !p.isMTO)
.sort((a,b) => b.soldRev - a.soldRev).slice(0, 10),
[products]
);
// Top sellers per category — for the gallery section
const topByCategory = uM(() => {
const byCat = {};
products.filter(p => p.soldRev > 0 && !p.isMTO && p.cat && p.cat !== "ไม่มีรหัสสินค้า")
.forEach(p => {
if (!byCat[p.cat]) byCat[p.cat] = [];
byCat[p.cat].push(p);
});
return Object.entries(byCat)
.map(([cat, ps]) => ({
cat,
products: ps.sort((a,b) => b.soldRev - a.soldRev).slice(0, 10),
totalRev: ps.reduce((s,p) => s+p.soldRev, 0),
}))
.sort((a,b) => b.totalRev - a.totalRev);
}, [products]);
const [overviewModalP, setOverviewModalP] = uS(null);
// ── Comparison chart data (multi-select months) ──────────────────
const cmpData = uM(() => {
const activeTargets = cmpSel.length > 0 ? cmpSel : months.slice(-Math.min(3, months.length));
const topCatsForCmp = catShare.slice(0, 5).map(c => c.cat);
const bars = activeTargets.map(m => {
const cats = monthlyByCat[m] || {};
const row = { label: monthLabel(m) };
let total = 0, other = 0;
for (const c of Object.keys(cats)) {
total += cats[c].sales;
if (topCatsForCmp.includes(c)) row[c] = Math.round(cats[c].sales);
else other += cats[c].sales;
}
if (other > 0) row["อื่นๆ"] = Math.round(other);
row.total = Math.round(total);
return row;
});
return { bars, topCats: topCatsForCmp, activeTargets };
}, [cmpSel, months, monthlyByCat, catShare]);
// ── Forecast calculations (owner only) ──
const forecast = uM(() => {
const linReg = (vals) => {
const n = vals.length;
if (n < 2) return { slope: 0, intercept: vals[0] || 0, r2: 0 };
const xMean = (n - 1) / 2;
const yMean = vals.reduce((s, v) => s + v, 0) / n;
let ssxx = 0, ssxy = 0, ssyy = 0;
for (let i = 0; i < n; i++) {
ssxx += (i - xMean) ** 2;
ssxy += (i - xMean) * (vals[i] - yMean);
ssyy += (vals[i] - yMean) ** 2;
}
const slope = ssxx === 0 ? 0 : ssxy / ssxx;
const intercept = yMean - slope * xMean;
const r2 = ssyy === 0 ? 1 : Math.min(1, Math.max(0, (ssxy * ssxy) / (ssxx * ssyy)));
return { slope, intercept, r2 };
};
const useLast = 6;
const mSlice = monthlySeries.slice(-useLast);
if (mSlice.length < 2) return null;
const revVals = mSlice.map(m => m.rev);
const qtyVals = mSlice.map(m => m.qty);
const revLR = linReg(revVals);
const qtyLR = linReg(qtyVals);
const nextIdx = mSlice.length;
const nextMonthRev = Math.max(0, revLR.slope * nextIdx + revLR.intercept);
const nextMonthQty = Math.max(0, qtyLR.slope * nextIdx + qtyLR.intercept);
// MAE-based confidence range
const revMAE = revVals.reduce((s, v, i) => s + Math.abs(v - (revLR.slope * i + revLR.intercept)), 0) / revVals.length;
const qtyMAE = qtyVals.reduce((s, v, i) => s + Math.abs(v - (qtyLR.slope * i + qtyLR.intercept)), 0) / qtyVals.length;
const curMonthRev = mSlice[mSlice.length - 1].rev;
const revChangePct = curMonthRev > 0 ? ((nextMonthRev - curMonthRev) / curMonthRev * 100) : 0;
// Weekly forecast from daily data (last 8 weeks → project next 7 days)
let weekly = null;
if (dailySeries.length >= 14) {
const weeksData = [];
for (let i = dailySeries.length - 1; i >= 0 && weeksData.length < 8; ) {
let wRev = 0, wQty = 0;
for (let d = 0; d < 7 && i >= 0; d++, i--) {
wRev += dailySeries[i].rev;
wQty += dailySeries[i].qty;
}
weeksData.unshift({ rev: wRev, qty: wQty });
}
if (weeksData.length >= 2) {
const wRevLR = linReg(weeksData.map(w => w.rev));
const wQtyLR = linReg(weeksData.map(w => w.qty));
const wNextIdx = weeksData.length;
weekly = {
rev: Math.max(0, wRevLR.slope * wNextIdx + wRevLR.intercept),
qty: Math.max(0, wQtyLR.slope * wNextIdx + wQtyLR.intercept),
changePct: weeksData[weeksData.length-1].rev > 0
? ((Math.max(0, wRevLR.slope * wNextIdx + wRevLR.intercept) - weeksData[weeksData.length-1].rev) / weeksData[weeksData.length-1].rev * 100)
: 0,
r2: wRevLR.r2,
};
}
}
// Chart: historical months + forecast point
const chartData = mSlice.map((m, i) => ({
label: m.label, actual: Math.round(m.rev),
trend: Math.round(Math.max(0, revLR.slope * i + revLR.intercept)),
}));
// Add next month projected point
const nextMonthLabel = (() => {
const last = mSlice[mSlice.length - 1].month;
if (!last) return "ถัดไป";
const [yr, mo] = last.split("-").map(Number);
const nm = mo === 12 ? 1 : mo + 1;
const ny = mo === 12 ? yr + 1 : yr;
return `${nm}/${String(ny).slice(-2)}`;
})();
chartData.push({ label: nextMonthLabel, forecast: Math.round(nextMonthRev) });
return {
nextMonthRev, nextMonthQty,
revChangePct, revMAE, qtyMAE,
r2: revLR.r2,
chartData,
weekly,
basedOn: mSlice.length,
};
}, [monthlySeries, dailySeries]);
const deltaVal = range === 'day' ? dailyDelta : (range !== 'year' ? momDelta : null);
const deltaDir = deltaVal && parseFloat(deltaVal) < 0 ? 'down' : 'up';
const subLabel = range === 'day'
? (hasDailyData ? `${days.length} วัน (${dailySeries[0]?.label}–${dailySeries[dailySeries.length-1]?.label})` : "ยังไม่มีข้อมูลรายวัน")
: range === 'month' ? (activeMonth ? monthLabel(activeMonth) : "เดือนล่าสุด")
: `${months.length} เดือนรวม`;
return (
ภาพรวมยอดขาย
{range === 'day' && hasDailyData
? `ข้อมูลรายวัน · ${days.length} วัน`
: `ข้อมูล ${months.length} เดือน`}
Live
{range === 'day' && !hasDailyData && (
อัปโหลด dailySales ก่อนเพื่อดูข้อมูลรายวัน
)}
{/* ── Month picker strip — เลือกเดือนเมื่ออยู่ใน "รายเดือน" ── */}
{range === 'month' && months.length > 1 && (
{months.map(m => (
))}
)}
{role === 'owner' && (
)}
{role === 'owner' && (
)}
{role === 'owner' && (
0 ? `${(totals.totalSoldRev / totals.totalStockValue).toFixed(2)}×` : "—"}
sub="หมุนเวียนสินค้า"
icon={I.trend} />
)}
{/* ─── Forecast Tool (owner only) ─── */}
{role === 'owner' && forecast && (
📈 Forecast Tool
พยากรณ์จากข้อมูล {forecast.basedOn} เดือนล่าสุด · Linear Regression
= 0.7 ? "#e8f5e9" : forecast.r2 >= 0.4 ? "#fff8e1" : "#fdecea",
color: forecast.r2 >= 0.7 ? "var(--g-700)" : forecast.r2 >= 0.4 ? "#a07417" : "var(--dang)",
}}>
R² {(forecast.r2 * 100).toFixed(0)}% {forecast.r2 >= 0.7 ? "✓ น่าเชื่อถือ" : forecast.r2 >= 0.4 ? "~ พอใช้" : "⚠ ข้อมูลน้อย"}
{/* Next Month card */}
ประมาณยอดขาย เดือนหน้า
{fmtB(forecast.nextMonthRev)}
±{fmtB(forecast.revMAE)} จากเทรนด์
= 0 ? "#c8e6c9" : "#ffcdd2",
color: forecast.revChangePct >= 0 ? "#1b5e20" : "#b71c1c",
fontSize:12,fontWeight:700,
}}>
{forecast.revChangePct >= 0 ? "▲" : "▼"} {Math.abs(forecast.revChangePct).toFixed(1)}%
vs เดือนนี้
จำนวน ~{Math.round(forecast.nextMonthQty).toLocaleString()} ชิ้น
{/* Next Week card */}
{forecast.weekly ? (
ประมาณยอดขาย 7 วันหน้า
{fmtB(forecast.weekly.rev)}
~{Math.round(forecast.weekly.qty).toLocaleString()} ชิ้น
= 0 ? "#e8eaf6" : "#ffcdd2",
color: forecast.weekly.changePct >= 0 ? "#283593" : "#b71c1c",
fontSize:12,fontWeight:700,
}}>
{forecast.weekly.changePct >= 0 ? "▲" : "▼"} {Math.abs(forecast.weekly.changePct).toFixed(1)}%
vs สัปดาห์นี้
R² รายสัปดาห์ {(forecast.weekly.r2 * 100).toFixed(0)}%
) : (
📅
ยังไม่มีข้อมูลรายวัน
อัปโหลด dailySales เพื่อดู Forecast รายสัปดาห์
)}
{/* Trend chart: historical + forecast */}
v>=1e6?`${(v/1e6).toFixed(1)}M`:v>=1e3?`${(v/1e3).toFixed(1)}K`:String(v)}/>
[fmtB(v), n==="actual"?"ยอดจริง":n==="trend"?"Trend Line":"Forecast"]}/>
)}
0
? `ยอดขายรายวัน · ${activeMonth ? monthLabel(activeMonth) : ''}`
: `ยอดขายรายเดือน · ${activeMonth ? monthLabel(activeMonth) : ''}`)
: "แนวโน้มยอดขายรายเดือน · แยกหมวด"}
sub={range === 'month' && hasDailyData && selMonthDailySeries.length > 0
? `${selMonthDailySeries.length} วัน · แท่งซ้อน Top 6 หมวด`
: 'แท่งซ้อน — Top 6 หมวด + อื่นๆ'}>
{range === 'day' && !hasDailyData ? (
) : (
v>=1e6?`${(v/1e6).toFixed(1)}M`:v>=1e3?`${(v/1e3).toFixed(1)}K`:v}/>
[fmtB(v), n]}/>
)}
{catShare.slice(0,8).map((c) => | )}
|
fmtB(v)}/>
{catShare.slice(0,8).map((c) => {
const pct = (c.rev / (catShare.reduce((s,x)=>s+x.rev,0)||1) * 100).toFixed(1);
return (
{c.cat}
{pct}%
);
})}
{/* ─── Monthly Comparison Chart ─── */}
{months.length >= 2 && role === 'owner' && (
📊 เทียบยอดขายรายเดือน
เลือกเดือนที่ต้องการเปรียบเทียบ (สูงสุด 6)
{showCmp && (
<>
{/* Month multi-select chips */}
{months.map(m => {
const activeTargets = cmpSel.length > 0 ? cmpSel : months.slice(-Math.min(3,months.length));
const sel = activeTargets.includes(m);
return (
);
})}
{cmpSel.length > 0 && (
)}
{/* Stacked bar — selected months comparison */}
v>=1e6?`${(v/1e6).toFixed(1)}M`:v>=1e3?`${(v/1e3).toFixed(1)}K`:v}/>
[fmtB(v), n]}/>
{/* Line chart — total revenue trend across selected months */}
v>=1e6?`${(v/1e6).toFixed(1)}M`:v>=1e3?`${(v/1e3).toFixed(1)}K`:v}/>
[fmtB(v), 'ยอดขายรวม']}/>
)}
)}
{/* MTO Section */}
{mtoGroups && mtoGroups.length > 0 && (
{mtoGroups.map(g => (
MTO
{g.base}
{g.variants.length} แบบ · {fmtN(g.totalQty)} ชิ้น
{role === "owner" &&
{fmtB(g.totalRev)}
}
))}
)}
0 ? `เรียงตามรายได้ · ${monthLabel(months[0]).split(" ")[0]}–${monthLabel(months[months.length-1])}` : "เรียงตามรายได้"}
action={null}>
| # |
สินค้า |
หมวด |
ขาย (ชิ้น) |
{role === "owner" && รายได้ | }
คงเหลือ |
แนวโน้ม 5 เดือน |
{topSellers.map((p, i) => (
setOverviewModalP(p)}>
| {i+1} |
{p.imageUrl ? (
) : (
)}
{p.imageUrl && p.color && (
)}
|
{p.cat || "—"}
|
{fmtN(p.soldQty)} |
{role === "owner" && {fmtB(p.soldRev)} | }
{fmtN(stockQty(p))} |
m.sales)}
color={catColor(p.cat, allCats)} height={22}/>
|
))}
{/* Top sellers per category */}
{topByCategory.map(g => {
const cc = catColor(g.cat, allCats);
return (
{g.cat}
{role === "owner" && {fmtB(g.totalRev)}}
{g.products.map((p, i) => (
))}
);
})}
{overviewModalP &&
setOverviewModalP(null)} allCats={allCats}/>}
);
}
// ─────────────────────────────────────────────────────────────────────
// CATEGORIES — All products + sort + gallery
// ─────────────────────────────────────────────────────────────────────
const SORT_OPTIONS = [
{ value: "sku", label: "รหัสสินค้า (SKU)" },
{ value: "bestseller", label: "ขายดี" },
{ value: "revenue", label: "รายได้สูง" },
{ value: "price-high", label: "ราคาแพง → ถูก" },
{ value: "price-low", label: "ราคาถูก → แพง" },
{ value: "vendor", label: "ตามร้าน (Supplier)" },
{ value: "color", label: "ตามสี" },
{ value: "stock-low", label: "สต๊อกน้อย → มาก" },
{ value: "stock-high", label: "สต๊อกมาก → น้อย" },
{ value: "name", label: "ชื่อ A→Z" },
];
// Compare SKUs naturally: letters prefix → numeric color part → numeric sequence part
// e.g. RT09050 → ["RT", 9, 50] so RT09050 < RT09100 < RT10001
function compareSku(a, b) {
const parse = (sku) => {
if (!sku) return ["", 9999, 9999];
const m = String(sku).match(/^([A-Za-z]+)(\d{2})(\d+)$/);
if (m) return [m[1].toUpperCase(), parseInt(m[2], 10), parseInt(m[3], 10)];
return [String(sku).toUpperCase(), 9999, 9999];
};
const [pa, ca, sa] = parse(a.sku);
const [pb, cb, sb] = parse(b.sku);
return pa.localeCompare(pb) || ca - cb || sa - sb;
}
const COLOR_ORDER = ["แดง","ส้ม","เหลือง","เขียว","ฟ้า","น้ำเงิน","ม่วง","ชมพู","ขาว","ครีม","น้ำตาล","ทอง","เงิน","ดำ","บานเย็น","มิ้นต์","พีช","เบจ"];
const CAT_EMOJI = {
"Realtouch": "✨",
"ดอกไม้": "🌸",
"บูช": "🌿",
"ไม้แซม": "🌾",
"ดอกหญ้า": "🌱",
"ใบ": "🍃",
"ใบบูช": "🍂",
"ใบไม้แขวน": "🎋",
"กิ่งไม้": "🌵",
"กุหลาบหิน": "🪨",
"ต้นไม้": "🌳",
"แจกันแก้ว": "🏺",
"เรซิ่น": "💎",
"Made to Order จัดแบบพิเศษ":"🎁",
};
const COLOR_MAP = {
// ── base ──────────────────────────────────────────────────────────────────
"บานเย็น": { name:"บานเย็น", hex:"#a82a6a", en:"Magenta" },
"มิ้นต์": { name:"มิ้นต์", hex:"#9adcc1", en:"Mint" },
"พีช": { name:"พีช", hex:"#e8b4a0", en:"Peach" },
"ครีม": { name:"ครีม", hex:"#f0e2c0", en:"Cream" },
"เบจ": { name:"เบจ", hex:"#d4bc94", en:"Beige" },
"ทอง": { name:"ทอง", hex:"#c89030", en:"Gold" },
"เงิน": { name:"เงิน", hex:"#bcbcbc", en:"Silver" },
"ขาว": { name:"ขาว", hex:"#f4f4f4", en:"White" },
"ดำ": { name:"ดำ", hex:"#2a2a2a", en:"Black" },
// ── น้ำเงิน ────────────────────────────────────────────────────────────────
"น้ำเงินเข้ม": { name:"น้ำเงินเข้ม", hex:"#1c3060", en:"NavyDark" },
"น้ำเงินอ่อน": { name:"น้ำเงินอ่อน", hex:"#7096d0", en:"NavyLight" },
"น้ำเงิน": { name:"น้ำเงิน", hex:"#2e4d8f", en:"Navy" },
// ── น้ำตาล ────────────────────────────────────────────────────────────────
"น้ำตาลเข้ม": { name:"น้ำตาลเข้ม", hex:"#4a2810", en:"BrownDark" },
"น้ำตาลอ่อน": { name:"น้ำตาลอ่อน", hex:"#c9a070", en:"BrownLight" },
"น้ำตาล": { name:"น้ำตาล", hex:"#7a4e2a", en:"Brown" },
// ── เหลือง ────────────────────────────────────────────────────────────────
"เหลืองเข้ม": { name:"เหลืองเข้ม", hex:"#c89010", en:"YellowDark" },
"เหลืองอ่อน": { name:"เหลืองอ่อน", hex:"#fde98c", en:"YellowLight" },
"เหลือง": { name:"เหลือง", hex:"#f4c220", en:"Yellow" },
// ── เขียว ─────────────────────────────────────────────────────────────────
"เขียวเข้ม": { name:"เขียวเข้ม", hex:"#1e5c1e", en:"GreenDark" },
"เขียวอ่อน": { name:"เขียวอ่อน", hex:"#80c880", en:"GreenLight" },
"เขียว": { name:"เขียว", hex:"#3a8f3a", en:"Green" },
// ── ชมพู ──────────────────────────────────────────────────────────────────
"ชมพูเข้ม": { name:"ชมพูเข้ม", hex:"#d43878", en:"PinkDark" },
"ชมพูอ่อน": { name:"ชมพูอ่อน", hex:"#f5c6d8", en:"PinkLight" },
"ชมพู": { name:"ชมพู", hex:"#e88aa6", en:"Pink" },
// ── ฟ้า ───────────────────────────────────────────────────────────────────
"ฟ้าเข้ม": { name:"ฟ้าเข้ม", hex:"#2878b8", en:"SkyDark" },
"ฟ้าอ่อน": { name:"ฟ้าอ่อน", hex:"#b0d8f5", en:"SkyLight" },
"ฟ้า": { name:"ฟ้า", hex:"#5aa3d6", en:"Sky" },
// ── แดง ───────────────────────────────────────────────────────────────────
"แดงเข้ม": { name:"แดงเข้ม", hex:"#880000", en:"RedDark" },
"แดงอ่อน": { name:"แดงอ่อน", hex:"#e87070", en:"RedLight" },
"แดง": { name:"แดง", hex:"#c5352a", en:"Red" },
// ── ส้ม ───────────────────────────────────────────────────────────────────
"ส้มเข้ม": { name:"ส้มเข้ม", hex:"#c85010", en:"OrangeDark" },
"ส้มอ่อน": { name:"ส้มอ่อน", hex:"#f5c080", en:"OrangeLight" },
"ส้ม": { name:"ส้ม", hex:"#e6862a", en:"Orange" },
// ── ม่วง ──────────────────────────────────────────────────────────────────
"ม่วงเข้ม": { name:"ม่วงเข้ม", hex:"#501878", en:"PurpleDark" },
"ม่วงอ่อน": { name:"ม่วงอ่อน", hex:"#c0a0e0", en:"PurpleLight" },
"ม่วง": { name:"ม่วง", hex:"#7c4ea8", en:"Purple" },
// ── เทา ───────────────────────────────────────────────────────────────────
"เทาเข้ม": { name:"เทาเข้ม", hex:"#505050", en:"GrayDark" },
"เทาอ่อน": { name:"เทาอ่อน", hex:"#cccccc", en:"GrayLight" },
"เทา": { name:"เทา", hex:"#909090", en:"Gray" },
};
// Longer/compound first → "เขียวเข้ม" matches before "เขียว", "น้ำเงิน" before "เงิน"
const COLOR_KEYS = [
"บานเย็น",
"น้ำเงินเข้ม","น้ำเงินอ่อน","น้ำเงิน",
"น้ำตาลเข้ม","น้ำตาลอ่อน","น้ำตาล",
"มิ้นต์","พีช","ครีม","เบจ","ทอง","เงิน",
"เหลืองเข้ม","เหลืองอ่อน","เหลือง",
"เขียวเข้ม","เขียวอ่อน","เขียว",
"ชมพูเข้ม","ชมพูอ่อน","ชมพู",
"ฟ้าเข้ม","ฟ้าอ่อน","ฟ้า",
"แดงเข้ม","แดงอ่อน","แดง",
"ส้มเข้ม","ส้มอ่อน","ส้ม",
"ม่วงเข้ม","ม่วงอ่อน","ม่วง",
"เทาเข้ม","เทาอ่อน","เทา",
"ขาว","ดำ",
];
function detectColor(text) {
if (!text) return null;
const s = String(text);
for (const k of COLOR_KEYS) if (s.indexOf(k) >= 0) return COLOR_MAP[k];
return null;
}
// Consistent stock quantity: prefer qtyStore+qtyWH when those fields exist,
// fall back to p.qty (Zort grand-total which may include other branches).
// Used everywhere a "current stock" number is needed.
function stockQty(p) {
return (p.qtyStore > 0 || p.qtyWH > 0)
? (p.qtyStore || 0) + (p.qtyWH || 0)
: (p.qty || 0);
}
// Warehouse-only qty: warehouseQty (from Sheet) → qtyWH (from Zort upload) → qty fallback.
// Used in StockCount/Storage views where we want warehouse stock only (not store+WH combined).
function whQty(p) {
if (!p) return 0;
if (p.warehouseQty != null) return p.warehouseQty;
if (p.qtyWH != null) return p.qtyWH;
return p.qty != null ? p.qty : 0;
}
// Strip "#1", "#10", trailing numbers, etc. from MTO product names
// "แจกันชุด#1" → "แจกันชุด", "แจกันชุด 5 อะไร" → "แจกันชุด"
function mtoBase(name) {
if (!name) return 'งานพิเศษ';
return String(name)
.replace(/\s*#\s*\d+.*$/, '')
.replace(/\s+\d+\s*$/, '')
.trim() || 'งานพิเศษ';
}
function CategoryView({ data, role }) {
const { products } = data;
const allCats = uM(() => {
const s = new Set();
products.forEach(p => p.cat && p.cat !== "ไม่มีรหัสสินค้า" && s.add(p.cat));
// Custom sort order
const CAT_ORDER = [
"Realtouch",
"ดอกไม้",
"บูช",
"ไม้แซม",
"ดอกหญ้า",
"ใบ",
"ใบบูช",
"ใบไม้แขวน",
"กิ่งไม้",
"กุหลาบหิน",
"ต้นไม้",
"แจกันแก้ว",
"เรซิ่น",
];
return [...s].sort((a, b) => {
const idxA = CAT_ORDER.indexOf(a);
const idxB = CAT_ORDER.indexOf(b);
if (idxA >= 0 && idxB >= 0) return idxA - idxB;
if (idxA >= 0) return -1;
if (idxB >= 0) return 1;
return a.localeCompare(b, "th");
});
}, [products]);
const [active, setActive] = uS(allCats[0] || "");
const [search, setSearch] = uS("");
const [globalSearch, setGlobalSearch] = uS("");
const [sortBy, setSortBy] = uS("sku");
const [showAll, setShowAll] = uS(false);
const [colorFilter, setColorFilter] = uS(null);
const [supplierFilter, setSupplierFilter] = uS(null);
const [newStockFilter, setNewStockFilter] = uS(false);
const [orderProduct, setOrderProduct] = uS(null);
const [globalVendor, setGlobalVendor] = uS(null); // global supplier filter (all categories)
// default list on narrow portrait screens, grid on wider/landscape
const [viewMode, setViewMode] = uS(() =>
window.innerWidth < 500 ? 'list' : 'grid'
);
const pillNavRef = React.useRef(null);
// Scroll active pill into view when category changes
uE(() => {
if (!pillNavRef.current) return;
const activeBtn = pillNavRef.current.querySelector('[data-active="true"]');
if (activeBtn) activeBtn.scrollIntoView({ behavior:"smooth", block:"nearest", inline:"center" });
}, [active]);
// ── helper: parse DD/MM/YYYY → Date ──
const parseStockDate = (str) => {
if (!str) return null;
const p = str.split("/");
if (p.length !== 3) return null;
return new Date(parseInt(p[2]), parseInt(p[1])-1, parseInt(p[0]));
};
const isNew45 = (dateStr) => {
const d = parseStockDate(dateStr);
if (!d || isNaN(d)) return false;
return (new Date() - d) / (1000*60*60*24) <= 45;
};
const isMtoCat = active === "Made to Order จัดแบบพิเศษ";
const sortFn = uC((a, b) => {
switch (sortBy) {
case "sku": return compareSku(a, b);
case "bestseller": return (b.soldQty - a.soldQty) || compareSku(a, b);
case "revenue": return (b.soldRev - a.soldRev) || compareSku(a, b);
case "price-high": return ((b.price||0) - (a.price||0)) || compareSku(a, b);
case "price-low": return ((a.price||0) - (b.price||0)) || compareSku(a, b);
case "vendor": return (a.vendor||"zzz").localeCompare(b.vendor||"zzz") || compareSku(a, b);
case "color": {
const ao = a.color ? COLOR_ORDER.indexOf(a.color.name) : 99;
const bo = b.color ? COLOR_ORDER.indexOf(b.color.name) : 99;
return ((ao===-1?99:ao) - (bo===-1?99:bo)) || compareSku(a, b);
}
case "stock-low": return (a.qty - b.qty) || compareSku(a, b);
case "stock-high": return (b.qty - a.qty) || compareSku(a, b);
case "name": return a.name.localeCompare(b.name) || compareSku(a, b);
default: return compareSku(a, b);
}
}, [sortBy]);
const isGlobalSearch = globalSearch.trim().length > 0;
const isGlobalVendor = !!globalVendor;
// All vendors across every category (for the supplier picker)
const allVendors = uM(() => {
const m = {};
products.forEach(p => {
const v = p.vendor;
if (!v) return;
if (!m[v]) m[v] = { code: v, count: 0, totalQty: 0 };
m[v].count++;
m[v].totalQty += stockQty(p);
});
return Object.values(m).sort((a, b) => b.count - a.count);
}, [products]);
const filtered = uM(() => {
// ── Global vendor mode ──────────────────────────────────────────
if (globalVendor) {
let f = products.filter(p => p.cat && p.cat !== "ไม่มีรหัสสินค้า" && p.vendor === globalVendor);
const gq = globalSearch.trim().toLowerCase();
if (gq) f = f.filter(p => (p.sku||"").toLowerCase().includes(gq) || (p.name||"").toLowerCase().includes(gq));
return [...f].sort(sortFn);
}
const gq = globalSearch.trim().toLowerCase();
if (gq) {
// Global: search all categories
let f = products.filter(p => p.cat && p.cat !== "ไม่มีรหัสสินค้า");
f = f.filter(p => (p.sku||"").toLowerCase().includes(gq) || (p.name||"").toLowerCase().includes(gq));
if (newStockFilter) f = f.filter(p => isNew45(p.lastStockInDate));
return [...f].sort(sortFn);
}
// Normal: filter by active category
let f = products.filter(p => p.cat === active);
if (search) {
const q = search.toLowerCase();
f = f.filter(p => (p.sku||"").toLowerCase().includes(q) || (p.name||"").toLowerCase().includes(q));
}
if (colorFilter) f = f.filter(p => p.color && p.color.name === colorFilter);
if (supplierFilter) f = f.filter(p => (p.lastSupplier || p.vendor) === supplierFilter);
if (newStockFilter) f = f.filter(p => isNew45(p.lastStockInDate));
return [...f].sort(sortFn);
}, [products, active, search, globalSearch, globalVendor, colorFilter, supplierFilter, newStockFilter, sortFn]);
const visible = showAll ? filtered : filtered.slice(0, 24);
// Compute reason tags per product (within this category sort)
const totalCatRev = filtered.reduce((s,p) => s + p.soldRev, 0);
const reasonMap = uM(() => {
const map = {};
filtered.forEach((p, idx) => {
const tags = [];
const m = p.monthly || [];
// Rising trend: late half avg > early half avg × 1.4
if (m.length >= 4) {
const half = Math.floor(m.length / 2);
const early = m.slice(0, half).reduce((s,x) => s + x.qty, 0) / half;
const late = m.slice(half).reduce((s,x) => s + x.qty, 0) / (m.length - half);
if (early > 0 && late >= early * 1.4) tags.push({ text:"กำลังมาแรง 📈", color:"#2a9b56" });
}
// Consistent: sold in 3+ months
const soldMonths = m.filter(x => x.qty > 0).length;
if (soldMonths >= 3 && idx > 0) tags.push({ text:"ขายสม่ำเสมอ", color:"#1f6f8b" });
// High turnover: soldQty > stock
if (stockQty(p) > 0 && p.soldQty > stockQty(p) * 2) tags.push({ text:"ขายเร็ว ⚡", color:"#c2570a" });
// Top revenue contributor in cat
if (totalCatRev > 0 && p.soldRev / totalCatRev > 0.15 && idx > 0)
tags.push({ text:`${(p.soldRev/totalCatRev*100).toFixed(0)}% รายได้หมวด`, color:"#a07417" });
// New arrival
if (p.lastStockInISO) {
const daysAgo = (Date.now() - new Date(p.lastStockInISO).getTime()) / 86400000;
if (daysAgo <= 30) tags.push({ text:"สินค้าใหม่ 🆕", color:"#705d96" });
}
map[p.sku] = tags.slice(0, 2);
});
return map;
}, [filtered, totalCatRev]);
const catStats = uM(() => {
const f = products.filter(p => p.cat === active);
return {
n: f.length,
stock: f.reduce((s,p)=>s+stockQty(p),0),
sold: f.reduce((s,p)=>s+p.soldQty,0),
rev: f.reduce((s,p)=>s+p.soldRev,0),
stockValue: f.reduce((s,p)=>s+(stockQty(p)*p.price),0),
};
}, [products, active]);
// Supplier list for this category
const supplierChips = uM(() => {
const m = {};
products.filter(p => p.cat === active).forEach(p => {
const s = p.lastSupplier || p.vendor;
if (s) m[s] = (m[s] || 0) + 1;
});
return Object.entries(m).map(([name, count]) => ({ name, count }))
.sort((a,b) => b.count - a.count);
}, [products, active]);
// Colors in this category for filter chips
const colorChips = uM(() => {
const m = {};
products.filter(p => p.cat === active).forEach(p => {
if (p.color) m[p.color.name] = (m[p.color.name]||{count:0, hex:p.color.hex}, {count:(m[p.color.name]?.count||0)+1, hex:p.color.hex});
});
return Object.entries(m).map(([name, v]) => ({ name, ...v }))
.sort((a,b) => (COLOR_ORDER.indexOf(a.name)===-1?99:COLOR_ORDER.indexOf(a.name)) -
(COLOR_ORDER.indexOf(b.name)===-1?99:COLOR_ORDER.indexOf(b.name)));
}, [products, active]);
const color = catColor(active, allCats);
return (
หมวดหมู่สินค้า
ดูสินค้าทุกตัวในแต่ละหมวด · เรียงตามขายดี / ราคา / Supplier / สี
{/* ── Global Search Bar ── */}
setGlobalSearch(e.target.value)}
placeholder="ค้นหาสินค้าทั้งหมด (SKU / ชื่อ)..."
style={{
width:"100%", padding:"11px 40px 11px 38px",
borderRadius:12, fontSize:15, fontFamily:"inherit",
border: isGlobalSearch ? "2px solid var(--g-500)" : "1.5px solid var(--bdr)",
background: isGlobalSearch ? "#f0fdf4" : "#fafcf7",
boxSizing:"border-box", outline:"none",
transition:"border-color .15s, background .15s",
}}/>
{isGlobalSearch && (
)}
setGlobalSearch(sku)}
style={{borderRadius:12,border:"1.5px solid var(--bdr)",background:"#fafcf7"}}/>
{isGlobalSearch && (
พบ {filtered.length} รายการ จากทุกหมวดหมู่
{filtered.length === 0 && — ลองค้นหาด้วยคำอื่น}
)}
{/* ── Supplier input ── */}
{allVendors.length > 0 && !isGlobalSearch && (
{
const val = e.target.value.trim();
const match = allVendors.find(v => v.code.toUpperCase() === val.toUpperCase());
setGlobalVendor(match ? match.code : (val === "" ? null : val || null));
setShowAll(false);
}}
style={{
width:"100%", padding:"11px 40px 11px 14px",
borderRadius:10, fontSize:14, fontFamily:"monospace",
fontWeight:700,
border: globalVendor ? "2px solid var(--g-500)" : "1.5px solid var(--bdr)",
background: globalVendor ? "#f0fdf4" : "#fff",
boxSizing:"border-box", outline:"none",
}}
/>
{globalVendor && (
)}
)}
{/* ── Category Pill Nav — hidden in vendor mode ── */}
{(() => {
const renderPill = (c, isNoStock) => {
const em = CAT_EMOJI[c] || "📁";
const isMto = c === "Made to Order จัดแบบพิเศษ";
const n = products.filter(p => p.cat === c).length;
const isActive = active === c;
const cc = catColor(c, allCats);
const shortName = isMto ? "MTO 🎁" : c.length > 7 ? c.slice(0,6)+"…" : c;
return (
);
};
const withStock = allCats.filter(c => products.some(p => p.cat === c && stockQty(p) > 0));
const noStock = allCats.filter(c => !products.some(p => p.cat === c && stockQty(p) > 0));
return [
...withStock.map(c => renderPill(c, false)),
noStock.length > 0 && (
),
...noStock.map(c => renderPill(c, true)),
];
})()}
{/* Sidebar — hidden on mobile and in vendor/search mode */}
หมวดหมู่ ({allCats.length})
{allCats.map(c => {
const n = products.filter(p => p.cat === c).length;
const cc = catColor(c, allCats);
const isMto = c === "Made to Order จัดแบบพิเศษ";
return (
);
})}
{/* KPIs — hide in global search / vendor mode */}
{!isMtoCat ? (
) : (
p.cat===active).map(p=>p.mtoBase)).size)} sub="กลุ่ม"/>
)}
{role === "owner" && }
{/* Controls — hide in global search / vendor mode */}
{/* Search */}
{/* Sort */}
เรียงตาม
🎨 สี
{colorChips.map(c => (
))}
)}
{/* Supplier filter chips */}
{supplierChips.length > 0 && (
🏪 ร้าน
{supplierChips.map(s => (
))}
)}
{/* New stock filter */}
{(() => {
const newCount = products.filter(p => p.cat === active && isNew45(p.lastStockInDate)).length;
if (newCount === 0) return null;
return (
✨ ใหม่
);
})()}
{/* Header */}
{!isGlobalSearch && !isGlobalVendor && (
{CAT_EMOJI[active] || "📁"}
{isMtoCat ? "งานจัดพิเศษ (MTO)" : active}
· {filtered.length} รายการ
{showAll ? "แสดงทั้งหมด" : `แสดง ${Math.min(24, filtered.length)} จาก ${filtered.length}`} ·
เรียงตาม {SORT_OPTIONS.find(o=>o.value===sortBy)?.label}
{filtered.length > 24 && (
)}
)}
{/* Vendor mode header */}
{isGlobalVendor && (
🏭 {globalVendor}
· {filtered.length} รายการ
stock รวม {filtered.reduce((s,p)=>s+stockQty(p),0).toLocaleString()} ชิ้น ·
เรียงตาม {SORT_OPTIONS.find(o=>o.value===sortBy)?.label}
{filtered.length > 24 && (
)}
)}
{/* View toggle */}
{filtered.length === 0 ? (
) : viewMode === 'list' ? (
/* ── List view — compact horizontal rows ── */
{visible.map((p, idx) => {
const totalQty = stockQty(p);
const outOfStock = !p.isMTO && totalQty === 0;
const lowStock = !p.isMTO && totalQty > 0 && totalQty <= 36;
const accent2 = isGlobalSearch ? catColor(p.cat, allCats) : color;
return (
{/* Image */}
{p.imageUrl
?
:
{CAT_EMOJI[p.cat] || '📦'}}
{/* Info */}
{p.sku}
{(isGlobalSearch||isGlobalVendor) && p.cat && (
{p.cat}
)}
{outOfStock && หมด}
{lowStock && !outOfStock &&
เหลือ {totalQty}}
{p.name}
{!p.isMTO && (
🏪 {p.qtyStore||0} · 🏭 {p.qtyWH||0}
)}
{role==='owner' && (
{fmtB(p.price)}
)}
{/* Order button */}
{setOrderProduct && (
)}
);
})}
) : (
/* ── Grid view — existing card layout ── */
{visible.map((p, idx) => (
{(isGlobalSearch || isGlobalVendor) && p.cat && (
{p.cat}
)}
))}
)}
{orderProduct &&
setOrderProduct(null)}/>}
);
}
// ────────────── Product Card ──────────────
// ────────────── Order Modal ──────────────
const QUICK_QTYS = [24, 36, 48, 60];
function OrderModal({ product, onClose }) {
const [qty, setQty] = uS(24);
const [customMode, setCustomMode] = uS(false);
const [orderType, setOrderType] = uS('รอขึ้นรถ');
const [loading, setLoading] = uS(false);
const [done, setDone] = uS(false);
const [err, setErr] = uS(null);
const sheetUrl = (typeof GOOGLE_SHEET_URL !== 'undefined') ? GOOGLE_SHEET_URL : null;
const outOfStock = (product.qtyWH !== undefined ? product.qtyWH : product.qty) <= 0;
const handleSubmit = () => {
if (outOfStock) return;
if (!sheetUrl) { setErr('ไม่พบ GOOGLE_SHEET_URL'); return; }
if (qty < 1) { setErr('กรุณาระบุจำนวน'); return; }
setLoading(true); setErr(null);
const url = `${sheetUrl}?action=order&sku=${encodeURIComponent(product.sku)}&qty=${qty}&orderType=${encodeURIComponent(orderType)}`;
fetch(url)
.then(r => r.json())
.then(d => {
if (d.ok) { setDone(true); setTimeout(onClose, 2000); }
else setErr(d.error || 'เกิดข้อผิดพลาด');
})
.catch(e => setErr(e.message))
.finally(() => setLoading(false));
};
const btnBase = {borderRadius:8, border:"1px solid var(--bdr)", cursor:"pointer",
fontFamily:"inherit", fontWeight:700, fontSize:13, padding:"8px 0",
transition:"all .12s"};
return (
ev.stopPropagation()} style={{
background:"#fff", borderRadius:16, maxWidth:420, width:"100%",
boxShadow:"0 20px 60px rgba(0,0,0,.3)", overflow:"hidden"
}}>
{/* Header */}
{done ? (
✅
บันทึกรายการสำเร็จ
ดูได้ที่ Sheet "ลำดับที่สั่งสินค้า"
) : (
{/* Product info */}
{product.imageUrl ? (
) : (
📦
)}
{product.sku}
{product.name}
คลัง:
{outOfStock ? "หมดสต๊อก" : `${fmtN(product.qtyWH ?? product.qty)} ชิ้น`}
{product.price > 0 && sessionStorage.getItem("dmj_role") === "owner" && <> · ราคา {fmtB(product.price)}}
{outOfStock ? (
⚠️ สินค้าหมดสต๊อก ไม่สามารถสั่งได้
) : (<>
{/* Quick qty */}
จำนวนที่สั่ง (ชิ้น)
{QUICK_QTYS.map(q => (
))}
{customMode && (
setQty(Math.max(1, parseInt(ev.target.value)||1))}
style={{marginTop:8, width:"100%", padding:"10px 12px",
border:"1.5px solid var(--g-400)", borderRadius:8,
fontSize:16, fontWeight:700, textAlign:"center",
fontFamily:"inherit", boxSizing:"border-box"}}/>
)}
{/* Order type */}
ประเภทการรับ
{[{v:'หิ้ว',icon:'🚶',sub:'รับที่ร้าน/หิ้วไปเลย'},{v:'รอขึ้นรถ',icon:'🚛',sub:'รอจัดส่งทีหลัง'}].map(t => (
))}
{err && (
⚠️ {err}
)}
)}
)}
);
}
function ProductCard({ p, rank, accent, allCats, reasonTags, onOrder, role }) {
const totalQty = (p.qtyStore > 0 || p.qtyWH > 0) ? (p.qtyStore || 0) + (p.qtyWH || 0) : (p.qty || 0);
const lowStock = !p.isMTO && totalQty > 0 && totalQty <= 36;
const outOfStock = !p.isMTO && totalQty === 0;
const hashHue = (p.sku || "").split("").reduce((a,c) => a + c.charCodeAt(0), 0) % 360;
const [lightbox, setLightbox] = uS(false);
// Image (real or placeholder)
const hasImg = !!p.imageUrl;
return (
<>
{/* Image */}
setLightbox(true) : null}
style={{position:"relative", padding:8, background: "linear-gradient(180deg, var(--g-50), #fff)",
cursor: hasImg ? "zoom-in" : "default", flex:"none"}}>
{hasImg ? (
) : (
{p.color ? (
) : (
{I.leaf}
)}
{hasImg ? "" : "NO IMAGE"}
)}
{/* Rank */}
{rank != null && (
{rank===1?"🥇 #1":rank===2?"🥈 #2":rank===3?"🥉 #3":`#${rank}`}
)}
{/* Stock badge */}
{outOfStock &&
หมด
}
{lowStock && !outOfStock && (
เหลือ {totalQty}
)}
{p.isMTO && (
MTO
)}
{/* Body */}
{p.sku}
{p.color && (
{p.color.name}
)}
{p.name}
{reasonTags && reasonTags.length > 0 && (
{reasonTags.map((t,i) => (
{t.text}
))}
)}
{(p.lastSupplier || p.vendor) && (
{React.cloneElement(I.store, {size:11})}
{p.lastSupplier || p.vendor}
)}
{p.lastStockInDate && (
📅 เข้าล่าสุด {p.lastStockInDate}
)}
{p.isMTO ? "ขายแล้ว" : "คงเหลือ"}
{p.isMTO ? fmtN(p.soldQty) : fmtN(totalQty)}
ชิ้น
{!p.isMTO && (p.qtyStore > 0 || p.qtyWH > 0) && (
🏪 {fmtN(p.qtyStore||0)} · 🏭 {fmtN(p.qtyWH||0)}
)}
{role === 'owner' && (
)}
{/* Order button */}
{onOrder && (
)}
{lightbox && p.imageUrl &&
setLightbox(false)}/>}
);
}
// ─────────────────────────────────────────────────────────────────────
// STOCK / ALERTS — absolute thresholds, exclude MTO
// ─────────────────────────────────────────────────────────────────────
const STOCK_PAGE = 50;
function StockView({ data, role }) {
const { products, thresholds: dataThresholds } = data;
const [filter, setFilter] = uS("low");
const [modalP, setModalP] = uS(null);
const [page, setPage] = uS(0);
const [stockSearch, setStockSearch] = uS("");
// Editable thresholds (persisted in memory)
const [defaultThr, setDefaultThr] = uS(dataThresholds?.default || 36);
const [overrides, setOverrides] = uS(dataThresholds?.overrides || { "แจกันแก้ว": 3, "เรซิ่นและอื่นๆ": 3 });
const [supplierFilter, setSupplierFilter] = uS(null);
const getThr = uC((cat) => overrides[cat] != null ? overrides[cat] : defaultThr, [overrides, defaultThr]);
const allCats = uM(() => {
const s = new Set();
products.forEach(p => p.cat && s.add(p.cat));
return [...s].sort();
}, [products]);
// Exclude MTO + ไม่มีรหัสสินค้า + empty cat
const checkable = uM(() => products.filter(p =>
!p.isMTO &&
p.cat &&
p.cat !== "ไม่มีรหัสสินค้า" &&
p.cat !== "Made to Order จัดแบบพิเศษ"
), [products]);
const enriched = uM(() => checkable.map(p => {
const currentQty = (p.qtyStore > 0 || p.qtyWH > 0) ? (p.qtyStore || 0) + (p.qtyWH || 0) : (p.qty || 0);
const avgMonthly = p.soldQty / 5;
const monthsLeft = avgMonthly > 0 ? currentQty / avgMonthly : null;
const threshold = getThr(p.cat);
return { ...p, qty: currentQty, avgMonthly, monthsLeft, threshold };
}), [checkable, getThr]);
const nearOut = uM(() => enriched
.filter(p => p.qty > 0 && p.qty <= p.threshold)
.sort((a,b) => (a.qty - b.qty) || compareSku(a, b)),
[enriched]);
const outOfStock = uM(() => enriched
.filter(p => p.qty === 0 && p.soldQty > 0)
.sort((a,b) => (b.soldRev - a.soldRev) || compareSku(a, b)),
[enriched]);
const slowMovers = uM(() => enriched
.filter(p => p.qty >= 20 && (p.soldQty === 0 || (p.soldQty/p.qty) < 0.1))
.sort((a,b) => (b.qty * b.price) - (a.qty * a.price)),
[enriched]);
const overstocked = uM(() => enriched
.filter(p => p.qty > 50 && p.avgMonthly > 0 && p.monthsLeft > 12)
.sort((a,b) => b.monthsLeft - a.monthsLeft),
[enriched]);
// Sales decline detection: was selling well early, dropped off late
const declining = uM(() => enriched
.map(p => {
const m = p.monthly || [];
if (m.length < 4) return null;
const half = Math.floor(m.length / 2);
const early = m.slice(0, half);
const late = m.slice(half);
const earlyAvg = early.reduce((s,x) => s + (x.qty||0), 0) / early.length;
const lateAvg = late.reduce((s,x) => s + (x.qty||0), 0) / late.length;
if (earlyAvg < 2) return null; // too small to matter
if (lateAvg >= earlyAvg * 0.4) return null; // not a real drop
if (p.qty <= 0) return null; // already out of stock — different problem
const dropPct = earlyAvg > 0 ? (1 - lateAvg/earlyAvg) * 100 : 0;
return { ...p, earlyAvg, lateAvg, dropPct };
})
.filter(Boolean)
.sort((a,b) => b.dropPct - a.dropPct)
.slice(0, 80),
[enriched]);
const allSuppliers = uM(() => {
const s = new Set();
checkable.forEach(p => { const v = p.lastSupplier || p.vendor; if (v) s.add(v); });
return [...s].sort();
}, [checkable]);
const lists = { low: nearOut, out: outOfStock, slow: slowMovers, over: overstocked, drop: declining };
const rawList = lists[filter] || [];
const list = uM(() => {
let result = rawList;
if (supplierFilter) result = result.filter(p => (p.lastSupplier || p.vendor) === supplierFilter);
if (!stockSearch) return result;
const q = stockSearch.toLowerCase();
return result.filter(p =>
(p.sku || "").toLowerCase().includes(q) ||
(p.name || "").toLowerCase().includes(q) ||
(p.cat || "").toLowerCase().includes(q)
);
}, [rawList, stockSearch, supplierFilter]);
const totalPages = Math.ceil(list.length / STOCK_PAGE);
const paginated = list.slice(page * STOCK_PAGE, (page + 1) * STOCK_PAGE);
return (
สต๊อก & แจ้งเตือน
สั่งซื้อสินค้าก่อนหมด · ไม่นับ MTO (งานจัดพิเศษ)
{/* Threshold editor */}
เกณฑ์ทั่วไป
setDefaultThr(parseInt(e.target.value)||36)}
style={{
width:80, padding:"7px 10px", borderRadius:8,
border:"1.5px solid var(--g-300)", background:"var(--g-50)",
fontSize:14, fontWeight:700, color:"var(--g-700)",
fontFamily:"inherit", textAlign:"center"
}}/>
ชิ้น
ยกเว้น:
{Object.entries(overrides).map(([cat, val]) => (
{cat}
setOverrides({...overrides, [cat]: parseInt(e.target.value)||1})}
style={{
width:50, padding:"3px 6px", borderRadius:5,
border:"1px solid var(--bdr)", fontSize:12, fontWeight:700,
fontFamily:"inherit", textAlign:"center"
}}/>
ชิ้น
))}
💡 แจกันแก้วและเรซิ่นเป็นสินค้าชิ้นใหญ่/ราคาสูง — ตั้งเกณฑ์ต่ำกว่าหมวดอื่น
{/* Filter tabs */}
ดูตาม
{[
{id:"low", label:`⚠️ ใกล้หมด`, count:nearOut.length, color:"#c2570a"},
{id:"out", label:`🚫 หมดสต๊อก`, count:outOfStock.length, color:"#b8341c"},
{id:"drop", label:`📉 ยอดขายตก`, count:declining.length, color:"#8a3a8a"},
{id:"slow", label:`📦 จมนาน`, count:slowMovers.length, color:"#a07417"},
{id:"over", label:`🗂️ สต๊อกเกิน`,count:overstocked.length, color:"#1f6f8b"},
].map(t => (
))}
{/* Supplier filter */}
{allSuppliers.length > 0 && (
🏪 ร้านที่ซื้อ
{
const v = e.target.value;
setSupplierFilter(allSuppliers.includes(v) ? v : null);
setPage(0);
}}
placeholder="ค้นหาหรือเลือกร้าน..."
style={{
padding:"7px 12px", borderRadius:9, fontSize:13,
border: supplierFilter ? "1.5px solid var(--g-600)" : "1px solid var(--bdr)",
background: supplierFilter ? "var(--g-50)" : "var(--paper)",
fontFamily:"inherit", minWidth:220, width:220,
}}/>
{supplierFilter && (
)}
{supplierFilter && (
{list.length} รายการจาก {rawList.length}
)}
)}
{/* Search + result count */}
แสดง {page*STOCK_PAGE+1}–{Math.min((page+1)*STOCK_PAGE, list.length)} จาก {list.length} รายการ
| รูป |
สินค้า |
หมวด |
ร้านที่ซื้อ |
คงเหลือ |
เกณฑ์ |
ขาย/เดือน |
{role === 'owner' && รายได้รวม | }
สถานะ |
{paginated.map((p, i) => {
const ratio = p.qty / (p.threshold || 1);
const lvlColor = p.qty === 0 ? "var(--dang)" :
ratio <= 0.33 ? "var(--dang)" :
ratio <= 0.66 ? "var(--warn)" : "var(--gold)";
return (
setModalP(p)}>
|
{p.imageUrl ? (
) : (
{!p.color && React.cloneElement(I.leaf, {size:16, stroke:1.5})}
)}
|
{p.sku}
{p.name}
|
{p.cat}
|
{(p.lastSupplier || p.vendor) || —}
{p.lastStockInDate && เข้า {p.lastStockInDate} }
|
{fmtN(p.qty)}
{(p.qtyStore > 0 || p.qtyWH > 0) && (
ร้าน {fmtN(p.qtyStore||0)} · คลัง {fmtN(p.qtyWH||0)}
)}
|
≤ {p.threshold} |
{p.avgMonthly>0?fmtN(p.avgMonthly):"—"} |
{role === 'owner' && {fmtB(p.soldRev)} | }
{filter==='out' && หมด!}
{filter==='low' && (
p.qty < 12
? 🚨 ต้องส่งด่วน ({p.qty})
: p.qty < 24
? ⚠️ ใกล้ต้องส่ง ({p.qty})
: เหลือ {p.qty}/{p.threshold}
)}
{filter==='drop' && ลด {p.dropPct.toFixed(0)}%}
{filter==='slow' && {p.soldQty===0?"ไม่เคยขาย":`${(p.soldQty/p.qty*100).toFixed(1)}%`}}
{filter==='over' && {p.monthsLeft > 99 ? ">99" : p.monthsLeft.toFixed(1)} เดือน}
|
);
})}
{list.length === 0 && }
{/* Pagination */}
{totalPages > 1 && (
{Array.from({length:totalPages},(_,i)=>i).map(i => (
))}
)}
{modalP &&
setModalP(null)} allCats={allCats}/>}
);
}
// ─────────────────────────────────────────────────────────────────────
// TRENDS — สินค้าเสี่ยงหาย / ใหม่น่าจับตา / มาแรง / ไม่ขายเลย
// ─────────────────────────────────────────────────────────────────────
function TrendsView({ data }) {
const { products } = data;
const [section, setSection] = uS("rising");
const [modalP, setModalP] = uS(null);
const [trendPage, setTrendPage] = uS(0);
const PAGE = 30;
const allCats = uM(() => {
const s = new Set();
products.forEach(p => p.cat && s.add(p.cat));
return [...s].sort();
}, [products]);
const enriched = uM(() => products.filter(p => !p.isMTO && p.cat && p.cat !== "ไม่มีรหัสสินค้า"
&& p.cat !== "Made to Order จัดแบบพิเศษ").map(p => {
const m = p.monthly || [];
let earlyAvg = 0, lateAvg = 0, soldMonths = 0;
if (m.length >= 2) {
const half = Math.floor(m.length / 2);
earlyAvg = m.slice(0, half).reduce((s,x) => s + (x.qty||0), 0) / Math.max(half, 1);
lateAvg = m.slice(half).reduce((s,x) => s + (x.qty||0), 0) / Math.max(m.length - half, 1);
soldMonths = m.filter(x => x.qty > 0).length;
}
// Prefer ISO (set by transaction-file upload), fall back to DD/MM/YYYY string from Sheet
let daysAgoStockIn = null;
if (p.lastStockInISO) {
daysAgoStockIn = (Date.now() - new Date(p.lastStockInISO).getTime()) / 86400000;
} else if (p.lastStockInDate) {
const pts = String(p.lastStockInDate).split('/');
if (pts.length === 3) {
const d = new Date(parseInt(pts[2]), parseInt(pts[1]) - 1, parseInt(pts[0]));
if (!isNaN(d.getTime())) daysAgoStockIn = (Date.now() - d.getTime()) / 86400000;
}
}
return { ...p, earlyAvg, lateAvg, soldMonths, daysAgoStockIn };
}), [products]);
// 🔥 มาแรง — late > early × 1.4, has stock, sold this period
const rising = uM(() => enriched
.filter(p => p.earlyAvg >= 1 && p.lateAvg >= p.earlyAvg * 1.4 && stockQty(p) > 0)
.map(p => ({...p, growthPct: p.earlyAvg > 0 ? ((p.lateAvg/p.earlyAvg - 1) * 100) : 0}))
.sort((a,b) => b.growthPct - a.growthPct),
[enriched]);
// 🆕 สินค้าใหม่น่าจับตา — เข้าสต๊อกใน 60 วัน หรือขายได้แค่ 1-2 เดือน
const newArrivals = uM(() => enriched
.filter(p => {
if (stockQty(p) <= 0) return false;
// มีวันที่เข้าสต๊อก (ISO หรือ DD/MM/YYYY) และเข้าใน 60 วัน
if (p.daysAgoStockIn != null && p.daysAgoStockIn <= 60) return true;
// ไม่มีวันที่เข้าเลย — ใช้ยอดขายเป็น proxy (≤ 2 เดือน = น่าจะใหม่)
if (p.daysAgoStockIn == null && p.soldMonths <= 2 && p.soldQty > 0) return true;
return false;
})
.map(p => ({
...p,
growthPct: p.earlyAvg > 0 ? ((p.lateAvg / p.earlyAvg - 1) * 100) : 0,
}))
.sort((a, b) => {
// เรียงตาม: เข้าใหม่สุดก่อน ถ้าไม่มีวันเข้า เรียงตามยอดขาย
if (a.daysAgoStockIn != null && b.daysAgoStockIn != null) return a.daysAgoStockIn - b.daysAgoStockIn;
if (a.daysAgoStockIn != null) return -1;
if (b.daysAgoStockIn != null) return 1;
return b.soldQty - a.soldQty;
}),
[enriched]);
// 🆘 สินค้าเสี่ยงหายจากตลาด — เคยขายได้ แต่ครึ่งหลังหยุดขายเลย
// (soldQty===0 → "ไม่ขายเลย" เท่านั้น ไม่ overlap ที่นี่)
const fading = uM(() => enriched
.filter(p => {
if (stockQty(p) <= 0) return false;
if (p.soldQty === 0) return false; // ← ไปอยู่ "ไม่ขายเลย" แทน
const m = p.monthly || [];
if (m.length < 4) return false;
const half = Math.floor(m.length / 2);
const earlySold = m.slice(0, half).reduce((s,x) => s + (x.qty||0), 0);
const lateSold = m.slice(half).reduce((s,x) => s + (x.qty||0), 0);
// เคยขายในช่วงแรกอย่างน้อย 2 ชิ้น แต่ช่วงหลังไม่ขายเลย
return earlySold >= 2 && lateSold === 0;
})
.sort((a,b) => (stockQty(b) * b.price) - (stockQty(a) * a.price)),
[enriched]);
// 💀 ไม่ขายเลย — soldQty = 0, has stock
const zeroSales = uM(() => enriched
.filter(p => p.soldQty === 0 && stockQty(p) > 0)
.sort((a,b) => (stockQty(b) * b.price) - (stockQty(a) * a.price)),
[enriched]);
const sections = {
rising: { list: rising, label: "🔥 มาแรง", color: "#c2570a", desc: "ยอดขายครึ่งหลังเพิ่ม > 40% จากครึ่งแรก" },
new: { list: newArrivals, label: "🆕 สินค้าใหม่น่าจับตา", color: "#705d96", desc: "เข้าสต๊อกใน 60 วัน + เริ่มมียอด" },
fading: { list: fading, label: "🆘 เสี่ยงหายจากตลาด", color: "#b8341c", desc: "เคยขาย แต่ครึ่งหลังขายไม่ได้เลย" },
zero: { list: zeroSales, label: "💀 ไม่ขายเลย", color: "#5b6b5e", desc: "มีของในสต๊อก แต่ขายไม่ได้ตลอด 5 เดือน" },
};
const cur = sections[section];
const totalPages = Math.ceil(cur.list.length / PAGE);
const paged = cur.list.slice(trendPage * PAGE, (trendPage + 1) * PAGE);
return (
เทรนด์สินค้า
วิเคราะห์จากยอดขายและรายการซื้อเข้า — กดที่สินค้าเพื่อดูรายละเอียด
{/* Section selector */}
{Object.entries(sections).map(([key, s]) => (
))}
{cur.label} — {cur.desc} ·
แสดง {trendPage*PAGE+1}–{Math.min((trendPage+1)*PAGE, cur.list.length)} จาก {cur.list.length}
{cur.list.length === 0 ? (
) : (
{paged.map(p => (
setModalP(p)}
className="card hover" style={{padding:0, overflow:"hidden", cursor:"pointer"}}>
{p.imageUrl ? (
) : (
{p.color ? (
) :
{I.leaf}
}
)}
{p.imageUrl && p.color && (
)}
{section==='rising' && `+${p.growthPct.toFixed(0)}%`}
{section==='new' && (p.daysAgoStockIn != null ? `${Math.floor(p.daysAgoStockIn)}d` : "ใหม่")}
{section==='fading' && "หยุดขาย"}
{section==='zero' && "0 ขาย"}
{p.sku}
{p.name}
{p.cat}
{p.lastStockInDate && (
📅 เข้าล่าสุด {p.lastStockInDate} · {p.lastSupplier || p.vendor || "—"}
)}
คงเหลือ
{fmtN(stockQty(p))} ชิ้น
))}
)}
{totalPages > 1 && (
หน้า {trendPage+1} / {totalPages}
)}
{modalP &&
setModalP(null)} allCats={allCats}/>}
);
}
// ────────────── Product detail modal ──────────────
function ProductModal({ p, onClose, allCats }) {
const hasImg = !!p.imageUrl;
return (
e.stopPropagation()} style={{
background:"#fff", borderRadius:16, maxWidth:560, width:"100%",
maxHeight:"90vh", overflow:"auto", boxShadow:"0 20px 60px rgba(0,0,0,.25)"
}}>
{hasImg ? (
) : (
ไม่มีรูปภาพ
)}
ร้านที่ซื้อ
{p.lastSupplier || p.vendor || "—"}
{p.lastStockInDate && (
📅 เข้าล่าสุด {p.lastStockInDate}
)}
🏪 หน้าร้าน
{fmtN(p.qtyStore || 0)} ชิ้น
🏭 คลัง
{fmtN(p.qtyWH || 0)} ชิ้น
📊 คงเหลือรวม
{fmtN(stockQty(p))}
{" "}ชิ้น
);
}
// ─────────────────────────────────────────────────────────────────────
// UPLOAD — Smart file detection
// ─────────────────────────────────────────────────────────────────────
function UploadView({ onDataLoaded, currentData }) {
const [files, setFiles] = uS([]);
const [dragOver, setDragOver] = uS(false);
const [processing, setProcessing] = uS(false);
const [done, setDone] = uS(false);
const [toast, showToast, hideToast] = useToast();
const detectFileType = (name, headers, titleRow, rawRows) => {
const n = name.toLowerCase();
const h = (headers || []).join("|").toLowerCase();
// Filename takes precedence — Zort exports are consistent
if (n.includes("daily")) return { type: "daily", label: "ยอดขายรายวัน", color: "#2a9b56" };
if (n.includes("monthly")) return { type: "sales", label: "สรุปยอดขายรายเดือน", color: "#1f7f44" };
if (n.includes("transfer")) return { type: "transfer", label: "รายการโอนสินค้า", color: "#1f6f8b" };
if (n.includes("product")) return { type: "product", label: "ข้อมูลสินค้า (สต๊อก)", color: "#a07417" };
if (n.includes("transaction"))return { type: "transaction", label: "รายการซื้อเข้า", color: "#c2570a" };
// Content-based fallback — inspect title row column headers
// For sales files, the *column-position* date headers (at cols 4,6,8...) tell us daily vs monthly
if (titleRow) {
const dateCols = [];
for (let c = 0; c < titleRow.length; c++) {
const v = String(titleRow[c] || "").trim();
if (/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(v)) dateCols.push({col:c, type:"daily"});
else if (/^\d{1,2}\/\d{4}$/.test(v)) dateCols.push({col:c, type:"monthly"});
}
if (dateCols.length > 0) {
const isDaily = dateCols.every(d => d.type === "daily");
return isDaily
? { type: "daily", label: "ยอดขายรายวัน", color: "#2a9b56" }
: { type: "sales", label: "สรุปยอดขายรายเดือน", color: "#1f7f44" };
}
}
if (h.includes("จาก") && h.includes("ไป"))
return { type: "transfer", label: "รายการโอนสินค้า", color: "#1f6f8b" };
if (h.includes("ราคาขาย") && h.includes("ราคาซื้อ"))
return { type: "product", label: "ข้อมูลสินค้า (สต๊อก)", color: "#a07417" };
if (h.includes("ผู้ติดต่อ"))
return { type: "transaction", label: "รายการซื้อเข้า", color: "#c2570a" };
if (h.includes("ยอดขาย"))
return { type: "sales", label: "สรุปยอดขายรายเดือน", color: "#1f7f44" };
return { type: "unknown", label: "ไม่ระบุประเภท", color: "#5b6b5e" };
};
const handleFiles = uC(async (fileList) => {
const arr = Array.from(fileList);
const parsed = [];
for (const f of arr) {
try {
const buf = await f.arrayBuffer();
const wb = XLSX.read(buf, {type:"array"});
const ws = wb.Sheets[wb.SheetNames[0]];
const rows = XLSX.utils.sheet_to_json(ws, {header:1, defval:""});
let headerRow = [];
for (let i=0;i String(c).includes("รหัส") || String(c) === "#")) {
headerRow = rows[i]; break;
}
}
const detected = detectFileType(f.name, headerRow, rows[0]);
parsed.push({ name: f.name, size: f.size, rows: rows.length,
rawRows: rows, headerRow, sheet: wb.SheetNames[0], ...detected });
} catch(e) {
parsed.push({ name: f.name, error: e.message, type: "error",
label: "เปิดไฟล์ไม่ได้", color: "#b8341c" });
}
}
setFiles(prev => [...prev, ...parsed]);
setDone(false);
}, []);
const processFiles = uC(async () => {
setProcessing(true);
try {
// --- Product file ---
const productFile = files.find(f => f.type === "product");
if (!productFile || !productFile.rawRows) {
showToast("error", "ไม่พบไฟล์สินค้า · อัปโหลด product*.xlsx ก่อน", "📁");
setProcessing(false);
return;
}
const allRows = productFile.rawRows;
let hIdx = -1;
for (let i = 0; i < Math.min(10, allRows.length); i++) {
if (allRows[i].some(c => String(c).toLowerCase().includes("รหัส") || String(c).toLowerCase() === "sku")) {
hIdx = i; break;
}
}
if (hIdx < 0) hIdx = 0;
const headers = allRows[hIdx];
const dataRows = allRows.slice(hIdx + 1).filter(r => r.some(c => c !== ""));
const colIdx = (keywords) => {
for (const kw of keywords) {
const i = headers.findIndex(h => String(h).toLowerCase().includes(kw.toLowerCase()));
if (i >= 0) return i;
}
return -1;
};
const iSku = colIdx(["รหัสสินค้า","sku","รหัส"]);
const iName = colIdx(["ชื่อสินค้า","ชื่อ","name"]);
const iCat = colIdx(["หมวดหมู่","หมวด","category"]);
const iQtyStore = colIdx(["หน้าร้าน","store"]);
const iQtyWH = colIdx(["คลัง","warehouse","wh"]);
const iQty = colIdx(["คงเหลือรวม","จำนวนรวม","รวม","จำนวน","คงเหลือ","qty","stock"]);
const iPrice = colIdx(["ราคาขาย","ราคา","price"]);
const iSupplier = colIdx(["ผู้ติดต่อ","supplier","ร้าน"]);
const iImg = colIdx(["imageurl","รูป","image"]);
// Build lookup map of existing products (from Google Sheet) by SKU
// so we can preserve imageUrl (and other fields not in Zort export)
const existingMap = {};
if (currentData && Array.isArray(currentData.products)) {
currentData.products.forEach(p => {
if (p.sku) existingMap[String(p.sku).trim().toUpperCase()] = p;
});
}
const products = dataRows
.map(r => {
const qtyStore = (iQtyStore >= 0 && iQtyStore < r.length) ? (parseFloat(r[iQtyStore]) || 0) : 0;
const qtyWH = (iQtyWH >= 0 && iQtyWH < r.length) ? (parseFloat(r[iQtyWH]) || 0) : 0;
const qtyTot = (iQty >= 0 && iQty < r.length) ? (parseFloat(r[iQty]) || 0) : (qtyStore + qtyWH);
const sku = String(r[iSku] || "").trim();
const name = String(r[iName] || "").trim();
const existing = existingMap[sku.toUpperCase()];
const rawImg = String(r[iImg] || "").trim();
// Use Zort imageUrl if present, else fall back to existing (Google Sheet) imageUrl
const imageUrl = rawImg || (existing && existing.imageUrl) || "";
return {
sku, name,
cat: String(r[iCat] || "").trim(),
qty: qtyTot,
qtyStore, qtyWH,
price: parseFloat(r[iPrice]) || (existing && existing.price) || 0,
vendor: String(r[iSupplier] || "").trim() || (existing && existing.vendor) || "",
imageUrl,
soldQty: 0, soldRev: 0,
monthly: [],
isMTO: String(r[iCat] || "").includes("Made to Order"),
color: detectColor(name),
};
})
.filter(p => p.sku || p.name);
// --- Monthly sales file ---
const salesFile = files.find(f => f.type === "sales");
let monthLabels = [];
let monthlyByCat = {};
const salesMap = {};
if (salesFile && salesFile.rawRows) {
const sRows = salesFile.rawRows;
// Row 0: title — month labels at col 4,6,8… format "MM/YYYY"
const titleRow = sRows[0] || [];
const months = [];
for (let c = 4; c < titleRow.length; c += 2) {
const v = String(titleRow[c] || "").trim();
if (/^\d{2}\/\d{4}$/.test(v)) months.push(v);
}
monthLabels = months;
// Row 1: headers — find SKU col (รหัส but not หมวด)
const hdr = sRows[1] || [];
const skuCol = hdr.findIndex(h => {
const s = String(h).toLowerCase();
return s.includes("รหัส") && !s.includes("หมวด");
});
const catCol = hdr.findIndex(h => String(h).toLowerCase().includes("หมวดหมู่"));
const sData = sRows.slice(2).filter(r => r.some(c => c !== ""));
for (const r of sData) {
const sku = String(r[skuCol >= 0 ? skuCol : 1] || "").trim();
const cat = String(r[catCol >= 0 ? catCol : 3] || "").trim();
if (!sku) continue;
let totalQty = 0, totalRev = 0;
const monthly = [];
for (let mi = 0; mi < months.length; mi++) {
const qtyVal = parseFloat(r[4 + mi * 2]) || 0;
const revVal = parseFloat(r[5 + mi * 2]) || 0;
monthly.push({ month: months[mi], qty: qtyVal, sales: revVal });
totalQty += qtyVal;
totalRev += revVal;
if (!monthlyByCat[months[mi]]) monthlyByCat[months[mi]] = {};
if (!monthlyByCat[months[mi]][cat]) monthlyByCat[months[mi]][cat] = { qty: 0, sales: 0 };
monthlyByCat[months[mi]][cat].qty += qtyVal;
monthlyByCat[months[mi]][cat].sales += revVal;
}
salesMap[sku] = { soldQty: totalQty, soldRev: totalRev, monthly };
}
}
// Merge monthly sales into products
for (const p of products) {
if (salesMap[p.sku]) {
p.soldQty = salesMap[p.sku].soldQty;
p.soldRev = salesMap[p.sku].soldRev;
p.monthly = salesMap[p.sku].monthly;
}
}
// --- Daily sales file ---
const dailyFile = files.find(f => f.type === "daily");
let dayLabels = [];
let dailyByCat = {};
const dailyMap = {};
if (dailyFile && dailyFile.rawRows) {
const dRows = dailyFile.rawRows;
const titleRow = dRows[0] || [];
const days = [];
const dayCols = [];
for (let c = 0; c < titleRow.length; c++) {
const v = String(titleRow[c] || "").trim();
if (/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(v)) {
days.push(v);
dayCols.push(c);
}
}
dayLabels = days;
const hdr = dRows[1] || [];
const skuCol = hdr.findIndex(h => {
const s = String(h).toLowerCase();
return s.includes("รหัส") && !s.includes("หมวด");
});
const catCol = hdr.findIndex(h => String(h).toLowerCase().includes("หมวดหมู่"));
const dData = dRows.slice(2).filter(r => r.some(c => c !== ""));
for (const r of dData) {
const sku = String(r[skuCol >= 0 ? skuCol : 1] || "").trim();
const cat = String(r[catCol >= 0 ? catCol : 3] || "").trim();
if (!sku) continue;
const daily = [];
for (let di = 0; di < days.length; di++) {
const qtyCol = dayCols[di];
const qtyVal = (qtyCol != null && qtyCol < r.length) ? (parseFloat(r[qtyCol]) || 0) : 0;
const revVal = (qtyCol != null && qtyCol+1 < r.length) ? (parseFloat(r[qtyCol + 1]) || 0) : 0;
daily.push({ day: days[di], qty: qtyVal, sales: revVal });
if (!dailyByCat[days[di]]) dailyByCat[days[di]] = {};
if (!dailyByCat[days[di]][cat]) dailyByCat[days[di]][cat] = { qty: 0, sales: 0 };
dailyByCat[days[di]][cat].qty += qtyVal;
dailyByCat[days[di]][cat].sales += revVal;
}
dailyMap[sku] = daily;
}
for (const p of products) {
if (dailyMap[p.sku]) p.daily = dailyMap[p.sku];
}
}
// --- Transaction detail (purchases in) — supplier + last stock-in date ---
const txFile = files.find(f => f.type === "transaction");
const txMap = {}; // sku -> { lastDate, lastSupplier, count }
if (txFile && txFile.rawRows) {
const tRows = txFile.rawRows;
// Find header row containing "ประเภท" and "ผู้ติดต่อ"
let tHdrIdx = -1;
for (let i = 0; i < Math.min(5, tRows.length); i++) {
const j = tRows[i].map(c => String(c).toLowerCase()).join("|");
if (j.includes("ประเภท") && (j.includes("ผู้ติดต่อ") || j.includes("วันที่"))) {
tHdrIdx = i; break;
}
}
if (tHdrIdx < 0) tHdrIdx = 0;
const tHdr = tRows[tHdrIdx];
const findCol = (kws) => {
for (const kw of kws) {
const i = tHdr.findIndex(h => String(h).toLowerCase().includes(kw.toLowerCase()));
if (i >= 0) return i;
}
return -1;
};
const iType = findCol(["ประเภท"]);
const iContact = findCol(["ชื่อผู้ติดต่อ","ผู้ติดต่อ"]);
const iDate = findCol(["วันที่ทำรายการ","วันที่"]);
const iSku = findCol(["รหัสสินค้า","รหัส","sku"]);
const parseDate = (v) => {
if (!v) return null;
if (v instanceof Date) return v;
const s = String(v).trim();
const m = s.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
if (m) return new Date(+m[3], +m[2]-1, +m[1]);
// Excel serial date
const n = parseFloat(s);
if (!isNaN(n) && n > 25569 && n < 100000) {
return new Date((n - 25569) * 86400000);
}
const d = new Date(s);
return isNaN(d.getTime()) ? null : d;
};
const tData = tRows.slice(tHdrIdx + 1);
for (const r of tData) {
if (iType >= 0 && !String(r[iType] || "").includes("ซื้อเข้า")) continue;
const sku = iSku >= 0 ? String(r[iSku] || "").trim() : "";
if (!sku) continue;
const supplier = iContact >= 0 ? String(r[iContact] || "").trim() : "";
const date = iDate >= 0 ? parseDate(r[iDate]) : null;
const cur = txMap[sku];
if (!cur || (date && (!cur.lastDate || date > cur.lastDate))) {
txMap[sku] = {
lastDate: date || cur?.lastDate || null,
lastSupplier: supplier || cur?.lastSupplier || "",
count: (cur?.count || 0) + 1,
};
} else {
cur.count += 1;
}
}
for (const p of products) {
const t = txMap[p.sku];
if (t) {
if (t.lastDate) {
const d = t.lastDate;
p.lastStockInDate = `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}/${d.getFullYear()}`;
p.lastStockInISO = d.toISOString();
}
if (t.lastSupplier) p.lastSupplier = t.lastSupplier;
p.purchaseCount = t.count;
}
}
}
// Build mtoGroups — group by base name (strip #1, #2, trailing numbers)
const mtoGroups = Object.values(
products.filter(p => p.isMTO).reduce((acc, p) => {
const k = mtoBase(p.name);
if (!acc[k]) acc[k] = { base: k, variants: [], totalRev: 0, totalQty: 0 };
acc[k].variants.push(p);
acc[k].totalRev += p.soldRev;
acc[k].totalQty += p.soldQty;
return acc;
}, {})
).sort((a,b) => b.totalRev - a.totalRev);
const totals = {
nSold: products.filter(p => p.soldQty > 0 && !p.isMTO).length,
nWithStock: products.filter(p => stockQty(p) > 0).length,
totalStockValue: products.reduce((s, p) => s + stockQty(p) * p.price, 0),
totalSoldRev: products.reduce((s, p) => s + p.soldRev, 0),
};
const newData = {
generatedAt: new Date().toISOString(),
products,
monthLabels,
monthlyByCat,
dayLabels,
dailyByCat,
totals,
mtoGroups,
thresholds: { default: 36, overrides: { "แจกันแก้ว": 3, "เรซิ่นและอื่นๆ": 3 } },
};
setDone(true);
setProcessing(false);
setTimeout(() => onDataLoaded && onDataLoaded(newData), 800);
} catch(e) {
showToast("error", "เกิดข้อผิดพลาด: " + e.message, "❌");
setProcessing(false);
}
}, [files, onDataLoaded, currentData, showToast]);
return (
<>
อัปโหลดไฟล์ Zort
อัปโหลดแล้วกด "ประมวลผล" — Dashboard จะแสดงข้อมูลจากไฟล์ทันที
{e.preventDefault();setDragOver(true);}}
onDragLeave={()=>setDragOver(false)}
onDrop={e=>{e.preventDefault();setDragOver(false);handleFiles(e.dataTransfer.files);}}
onClick={()=>document.getElementById("upfile").click()}>
{done ? I.check : React.cloneElement(I.upload, {})}
{done ? "✅ ประมวลผลเสร็จแล้ว!" : "ลากไฟล์มาวางตรงนี้"}
หรือคลิกเพื่อเลือกไฟล์ — รองรับหลายไฟล์พร้อมกัน (.xlsx, .xls, .csv)
handleFiles(e.target.files)}/>
{[
{ type:"product", label:"ข้อมูลสินค้า ⭐", desc:"product*.xlsx", hint:"สำคัญที่สุด — สต๊อก + ราคา", color:"#a07417"},
{ type:"sales", label:"ยอดขายรายเดือน", desc:"monthlySales*.xlsx", hint:"ยอดขายรายหมวดต่อเดือน", color:"#1f7f44"},
{ type:"daily", label:"ยอดขายรายวัน", desc:"dailySales*.xlsx", hint:"ยอดขายรายวัน 2 วันล่าสุด", color:"#2a9b56"},
{ type:"transaction", label:"รายการซื้อเข้า", desc:"transactionDetail*.xlsx", hint:"วันสินค้าเข้า + ร้านที่ซื้อ", color:"#c2570a"},
{ type:"transfer", label:"รายการโอน", desc:"transferDetail*.xlsx", hint:"โอนจากคลัง → ร้าน", color:"#1f6f8b"},
].map(g => {
const uploaded = files.find(f => f.type === g.type);
return (
{uploaded && (
{React.cloneElement(I.check,{size:11})} อัปโหลดแล้ว
)}
{g.type}
{g.label}
{g.desc}
{g.hint}
);
})}
{files.length > 0 && (
{processing ? : I.refresh}
{processing ? "กำลังประมวลผล…" : "ประมวลผลข้อมูล"}
}>
{files.map((f, i) => (
{f.type==="error"?React.cloneElement(I.alert,{size:18}):React.cloneElement(I.sheets,{size:18})}
{f.name}
{f.rows ? `${(f.rows-1).toLocaleString()} แถว · ` : ""}
{(f.size/1024).toFixed(1)} KB
{React.cloneElement(I.check,{size:12})}{f.label}
))}
💡 ต้องมีไฟล์ product*.xlsx เป็นหลัก — ไฟล์อื่นเสริมข้อมูลยอดขาย
)}
);
}
// ─────────────────────────────────────────────────────────────────────
// CONNECT — Google Sheets setup
// ─────────────────────────────────────────────────────────────────────
function ConnectView({ sheetUrl, sheetViewUrl, syncing, lastSync, source, onSync, onClearLocal }) {
const [url, setUrl] = uS(sheetViewUrl || "");
const lastSyncLabel = (() => {
if (!lastSync) return "ยังไม่ sync";
const dt = new Date(lastSync);
const pad = n => String(n).padStart(2,'0');
return `${pad(dt.getDate())}/${pad(dt.getMonth()+1)}/${dt.getFullYear()} ${pad(dt.getHours())}:${pad(dt.getMinutes())}`;
})();
return (
เชื่อม Google Sheet
ใช้เป็นแหล่งข้อมูลหลัก — กด Sync เพื่อโหลดข้อมูลใหม่จาก Sheet
{React.cloneElement(I.sheets,{size:20})}
Doomuenjing — Inventory Master
{source === "upload"
? <>ใช้ ไฟล์ที่อัปโหลด · บันทึก {lastSyncLabel}
: <>เชื่อมแล้ว · sync ล่าสุด {lastSyncLabel}}
{source === "upload" ? "ไฟล์อัปโหลด (ทับ Sheet)" : "เชื่อมต่อแล้ว"}
{source === "upload" && (
กำลังใช้ข้อมูลจากไฟล์ที่อัปโหลด — Dashboard จะใช้ไฟล์นี้จนกว่าจะอัปโหลดใหม่หรือล้างข้อมูล
)}
{[
["Products", "สินค้าทั้งหมด + สต๊อก + ราคา + imageUrl", "5,485 แถว", "var(--g-600)"],
["MonthlySales", "ยอดขายรายเดือน × หมวด", "1,971 แถว", "var(--g-500)"],
["Transfers", "รายการโอนสินค้าระหว่างคลัง", "956 แถว", "var(--info)"],
["Purchases", "รายการซื้อเข้า + vendor", "671 แถว", "var(--warn)"],
].map(([name, desc, rows, color]) => (
{rows}
{React.cloneElement(I.check, {size: 12})}อ่านแล้ว
))}
💡 รูปสินค้า: เพิ่มคอลัมน์ imageUrl ใน Products sheet —
วาง URL ของรูป (Google Drive / Imgur / Cloudinary) แล้วระบบจะแสดงในการ์ดทุกใบ
{[
["คุณ (Owner)", "you@doomuenjing.com", "Admin"],
["เจ้าของ 1", "owner1@doomuenjing.com", "Editor"],
["เจ้าของ 2", "owner2@doomuenjing.com", "Editor"],
].map(([name, email, role]) => (
))}
);
}
// ─────────────────────────────────────────────────────────────────────
// STORAGE VIEW — Phase 2: Visual warehouse grid (A1–B10 × 15 locks each)
// ─────────────────────────────────────────────────────────────────────
function StorageView({ data }) {
const storage = data.storage || {};
const verifiedLockMap = storage.verifiedLockMap || {};
const productLockMap = storage.productLockMap || {};
const unassigned = storage.unassigned || [];
const shelves = storage.shelves || { A: 10, B: 10, locksPerShelf: 15 };
const products = data.products || [];
const productMap = uM(() => {
const m = {};
products.forEach(p => { m[p.sku] = p; });
return m;
}, [products]);
const [side, setSide] = uS('A');
const [search, setSearch] = uS('');
const [selectedLock, setSelectedLock] = uS(null);
// Quick-assign mode state
const [qaMode, setQaMode] = uS(false);
const [qaSku, setQaSku] = uS('');
const [qaLockKey, setQaLockKey] = uS('');
const [qaLog, setQaLog] = uS([]);
const [qaSaving, setQaSaving] = uS(false);
const [qaToast, showQaToast, hideQaToast] = useToast();
// Local overrides stored in localStorage
const LS_LOCK_OV = "dmj_lock_overrides_v1";
const [lockOv, setLockOv] = uS(() => {
try { return JSON.parse(localStorage.getItem(LS_LOCK_OV) || "{}"); } catch { return {}; }
});
const saveLockOv = (next) => {
setLockOv(next);
localStorage.setItem(LS_LOCK_OV, JSON.stringify(next));
};
const handleUpdateLock = (key, skus) => {
const next = { ...lockOv, [key]: skus };
saveLockOv(next);
};
const lockData = uM(() => {
const merged = {};
Object.keys(productLockMap).forEach(key => {
merged[key] = { skus: productLockMap[key], verified: false, entries: [], mismatch: false };
});
Object.keys(verifiedLockMap).forEach(key => {
const verifiedSkus = verifiedLockMap[key].map(v => v.sku);
// เปรียบจำนวนจริงกับระบบ — ไม่ใช้ string status เพราะอาจล้าสมัย
const mismatch = verifiedLockMap[key].some(v => {
const sysP = products.find(p => p.sku === v.sku);
const sysQty = sysP ? whQty(sysP) : v.sysQty;
return sysQty != null && v.qty != null && v.qty !== sysQty;
});
const allSkus = merged[key] ? [...new Set([...merged[key].skus, ...verifiedSkus])] : verifiedSkus;
merged[key] = { skus: allSkus, verified: true, mismatch, entries: verifiedLockMap[key] };
});
// Apply local overrides
Object.keys(lockOv).forEach(key => {
const ovSkus = lockOv[key];
if (!merged[key]) merged[key] = { skus: ovSkus, verified: false, entries: [], mismatch: false, localOnly: true };
else merged[key] = { ...merged[key], skus: [...new Set([...merged[key].skus, ...ovSkus])] };
});
return merged;
}, [verifiedLockMap, productLockMap, lockOv]);
const totalLocks = (shelves.A + shelves.B) * shelves.locksPerShelf;
const usedCount = Object.keys(lockData).length;
const verifiedCount = Object.keys(verifiedLockMap).length;
const mismatchCount = Object.values(lockData).filter(d => d.mismatch).length;
const searchSku = search.trim().toUpperCase();
const searchMatches = uM(() => {
if (!searchSku) return new Set();
const matches = new Set();
Object.entries(lockData).forEach(([key, d]) => {
if (d.skus.some(s => s.toUpperCase().includes(searchSku))) matches.add(key);
// also match product name
if (d.skus.some(s => {
const p = productMap[s];
return p && (p.name||'').toUpperCase().includes(searchSku);
})) matches.add(key);
});
return matches;
}, [searchSku, lockData, productMap]);
// sku → [lockKey, ...] reverse map
const skuToLocks = uM(() => {
const m = {};
Object.entries(lockData).forEach(([lk, d]) => {
(d.skus || []).forEach(sku => {
if (!m[sku]) m[sku] = [];
m[sku].push(lk);
});
});
return m;
}, [lockData]);
// Enhanced search results (product cards with lock positions)
const searchResults = uM(() => {
if (!searchSku || searchSku.length < 1) return [];
const results = [];
products.forEach(p => {
if (p.sku.toUpperCase().includes(searchSku) ||
(p.name||'').toUpperCase().includes(searchSku)) {
results.push({ p, locks: skuToLocks[p.sku] || [] });
}
});
return results.slice(0, 12);
}, [searchSku, products, skuToLocks]);
// Quick-assign: save sku → lock
const handleQuickAssign = async () => {
const sku = qaSku.trim().toUpperCase();
const lk = qaLockKey.trim().toUpperCase();
if (!sku || !lk) return;
setQaSaving(true);
const existingSkus = (lockData[lk]?.skus || []).filter(s => s !== sku);
handleUpdateLock(lk, [...existingSkus, sku]);
const prod = productMap[sku];
const qty = prod ? whQty(prod) : 0;
const result = await syncLockData(lk, [{ sku, qty, isNew: true }]);
setQaSaving(false);
if (result.success !== false) {
setQaLog(prev => [
{ sku, lockKey: lk, name: prod?.name || '', ts: new Date() },
...prev.slice(0, 9),
]);
setQaSku('');
setQaLockKey('');
showQaToast('success', `✅ ${sku} → ${lk}`, '💾');
} else {
showQaToast('error', 'บันทึกไม่สำเร็จ', '❌');
}
};
const sides = side === 'all' ? ['A', 'B'] : [side];
// ── QUICK ASSIGN MODE ─────────────────────────────────────────────
if (qaMode) {
const qaProduct = productMap[qaSku.trim().toUpperCase()];
const canSave = qaSku.trim() && qaLockKey.trim() && !qaSaving;
return (
<>
{/* Header */}
📥 บันทึกตำแหน่งด่วน
สแกน/พิมพ์ SKU แล้วระบุล็อค — บันทึกทันที
{/* Step 1 — SKU */}
① สินค้าที่จะบันทึกตำแหน่ง
setQaSku(e.target.value.toUpperCase())}
onKeyDown={e => e.key === 'Enter' && document.getElementById('qa-lock-input')?.focus()}
style={{flex:1,padding:'12px 14px',borderRadius:10,fontSize:14,fontWeight:700,
fontFamily:'monospace',border:'2px solid ' + (qaProduct ? '#1b5e20' : 'var(--bdr)'),
background: qaProduct ? '#f0fdf4' : '#fff'}}/>
setQaSku(sku.toUpperCase())}/>
{qaSku && }
{qaProduct && (
{qaProduct.imageUrl
?
:
{CAT_EMOJI[qaProduct.cat] || '📦'}
}
{qaProduct.name}
คลัง {whQty(qaProduct)} ชิ้น
{(skuToLocks[qaSku.trim().toUpperCase()] || []).length > 0 && (
ปัจจุบัน: {(skuToLocks[qaSku.trim().toUpperCase()] || []).join(', ')}
)}
⚠️ ไม่พบ SKU นี้ในระบบ — จะบันทึกตำแหน่งได้แต่ไม่มีข้อมูลสินค้า
)}
{/* Step 2 — Lock */}
② ตำแหน่งล็อคที่วางของ (เช่น A3/7)
setQaLockKey(e.target.value.toUpperCase())}
onKeyDown={e => e.key === 'Enter' && canSave && handleQuickAssign()}
style={{flex:1,padding:'12px 14px',borderRadius:10,fontSize:16,fontWeight:800,
fontFamily:'monospace',border:'2px solid ' + (qaLockKey.trim() ? '#1b5e20' : 'var(--bdr)'),
background: qaLockKey.trim() ? '#f0fdf4' : '#fff', letterSpacing:2}}/>
{qaLockKey && }
{/* Quick lock picker — tap shelf buttons */}
setQaLockKey(v)}/>
{/* Save button */}
{/* Log of recent assignments */}
{qaLog.length > 0 && (
{qaLog.map((entry, i) => (
{entry.sku}
{entry.lockKey}
{entry.name}
{entry.ts.getHours().toString().padStart(2,'0')}:{entry.ts.getMinutes().toString().padStart(2,'0')}
))}
)}
{/* ── Prominent search + quick-assign button ── */}
setSearch(e.target.value)}
style={{width:'100%',padding:'12px 14px 12px 44px',borderRadius:12,
border:'2px solid ' + (search.trim() ? '#1b5e20' : 'var(--bdr)'),
fontSize:14,fontFamily:'inherit',background:'#fff',
boxSizing:'border-box'}}/>
🔍
{search && }
setSearch(sku)}/>
{/* ── Search results panel (replaces grid while searching) ── */}
{search.trim() && (
{searchResults.length === 0 ? (
ไม่พบสินค้า "{search.trim().toUpperCase()}" ในระบบ
) : (
พบ {searchResults.length} รายการ
{searchResults.map(({ p, locks }) => (
locks.length > 0 ? setSelectedLock(locks[0]) : null}
style={{display:'flex',alignItems:'center',gap:12,padding:'12px 14px',
background:'#fff',borderRadius:12,
border:'2px solid ' + (locks.length > 0 ? '#1b5e20' : '#fbbf24'),
cursor: locks.length > 0 ? 'pointer' : 'default',
boxShadow:'0 1px 4px rgba(0,0,0,.05)'}}>
{p.imageUrl
?
:
{CAT_EMOJI[p.cat] || '📦'}
}
{p.sku}
{locks.length > 0 ? locks.map(lk => (
📍 {lk}
)) : (
⚠️ ยังไม่มีตำแหน่ง
)}
{p.name}
{whQty(p)} ชิ้น
{locks.length === 0 && (
)}
{locks.length > 0 && (
แตะเพื่อดูล็อค
)}
))}
)}
)}
0 ? (verifiedCount/usedCount*100).toFixed(0) : 0}% ของที่ใช้`}
accent="#4fb472" icon={I.check}/>
0 ? "⚠️ ต้องตรวจสอบ" : "✓ ปกติ"}
accent={mismatchCount > 0 ? "#b8341c" : "#5c8a3c"} icon={I.warning}/>
}>
{searchSku && (
{searchMatches.size > 0
? <>ไฮไลต์ {searchMatches.size} ล็อคที่มี "{searchSku}" — กดล็อคสีส้มเพื่อดูรายละเอียด
: ไม่พบ "{searchSku}" ในล็อคใดเลย}
)}
✅ เช็คแล้ว (ตรง)
📦 มีในระบบ
❌ ไม่ตรงระบบ
⬜ ว่าง
🔍 ผลค้นหา
{sides.map(s => {
const total = shelves[s] || 10;
const locksN = shelves.locksPerShelf || 15;
// Build bays: pair odd (right) with next even (left)
// A1+A2, A3+A4, A5+A6, …
const bays = [];
for (let n = 1; n <= total; n += 2) {
bays.push({ right: n, left: n + 1 <= total ? n + 1 : null });
}
return (
ซอย {s}
← ลึกเข้าไป · ทางเข้า →
{bays.map(({right, left}) => (
{/* Right shelf label + grid */}
ฝั่งขวา (ติดกำแพง) · {s}{right}
{/* Aisle divider */}
── ทางเดิน ──
{/* Left shelf grid + label */}
{left && <>
ฝั่งซ้าย · {s}{left}
}
))}
);
})}
{/* Step 1: shelf buttons */}
① เลือกชั้น
{shelfList.map(s => (
))}
{/* Step 2: lock grid */}
{selShelf && (
<>
② เลือกล็อค ใน {selShelf}
{isEven ? "ฝั่งซ้าย (1→ขวา)" : "ฝั่งขวา (1←ซ้าย)"}
{Array.from({length: rows}, (_, row) =>
Array.from({length: cols}, (_, col) => {
const n = isEven
? col * rows + row + 1
: (cols - 1 - col) * rows + row + 1;
if (n > locksN) return
;
const picked = selLock === n && value === `${selShelf}/${n}`;
return (
);
})
)}
{value && (
เลือก: {value}
)}
)}
);
}
function UnassignedProductCards({ products, lockData, shelves, onAssigned }) {
const assignedSkus = uM(() => {
const s = new Set();
Object.values(lockData).forEach(d => d.skus.forEach(sk => s.add(sk)));
return s;
}, [lockData]);
const noLock = uM(() =>
products
.filter(p => whQty(p) > 0 && !assignedSkus.has(p.sku))
.sort(compareSku),
[products, assignedSkus]);
// All categories in noLock list
const cats = uM(() => {
const s = new Set();
noLock.forEach(p => { if (p.cat) s.add(p.cat); });
return ["ALL", ...Array.from(s)];
}, [noLock]);
const [catFilter, setCatFilter] = uS("ALL");
const [search, setSearch] = uS("");
const [page, setPage] = uS(0);
const [picks, setPicks] = uS({});
const [saving, setSaving] = uS({});
const [done, setDone] = uS({});
const [openPicker, setOpenPicker] = uS(null);
const [toast, showToast, hideToast] = useToast();
const filtered = uM(() => {
let f = catFilter === "ALL" ? noLock : noLock.filter(p => p.cat === catFilter);
if (search.trim()) {
const q = search.trim().toUpperCase();
f = f.filter(p => (p.sku||"").toUpperCase().includes(q) || (p.name||"").toUpperCase().includes(q));
}
return f;
}, [noLock, catFilter, search]);
const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
const paginated = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
const handleCatFilter = (cat) => { setCatFilter(cat); setPage(0); setSearch(""); };
const handleSearch = (val) => { setSearch(val); setPage(0); };
const setPick = (sku, val) => setPicks(p => ({ ...p, [sku]: val }));
const handleAssign = async (sku) => {
const lockKey = picks[sku];
if (!lockKey) return;
setSaving(s => ({ ...s, [sku]: true }));
// 1. บันทึก localStorage ทันที
onAssigned(sku, lockKey);
// 2. บันทึกขึ้น Google Sheet
const prod = products.find(p => p.sku === sku);
const qty = prod ? whQty(prod) : 0;
const result = await syncLockData(lockKey, [{ sku, qty, isNew: true }]);
setSaving(s => ({ ...s, [sku]: false }));
if (result.success !== false) {
setDone(d => ({ ...d, [sku]: lockKey }));
setOpenPicker(null);
showToast("success", `บันทึก ${sku} → ล็อค ${lockKey}`, "💾");
} else {
showToast("error", "บันทึก Sheet ไม่สำเร็จ — ลองใหม่อีกครั้ง", "❌");
}
};
if (noLock.length === 0) return null;
return (
<>
{/* Search + scan */}
handleSearch(e.target.value)}
style={{flex:1,padding:"8px 12px",borderRadius:9,border:"1.5px solid var(--bdr)",
fontSize:13,fontFamily:"inherit"}}/>
{ handleSearch(sku); setOpenPicker(sku); }}/>
{/* Category filter */}
{cats.map(cat => {
const emoji = CAT_EMOJI[cat] || "";
const count = cat === "ALL" ? noLock.length : noLock.filter(p => p.cat === cat).length;
const active = catFilter === cat;
return (
);
})}
{/* Product cards */}
{paginated.map(p => {
const pWhQty = whQty(p);
const isDone = !!done[p.sku];
const isSaving = !!saving[p.sku];
const isOpen = openPicker === p.sku;
const picked = picks[p.sku] || "";
const emoji = CAT_EMOJI[p.cat] || "";
return (
{/* Product image */}
{p.imageUrl ? (
) : (
{emoji || "📦"}
ไม่มีรูป
)}
{/* SKU + qty */}
{p.sku}
คลัง {pWhQty}
{/* Name */}
{emoji && {emoji}}{p.name || "-"}
{/* Done state */}
{isDone ? (
✓ บันทึกล็อค {done[p.sku]} แล้ว
) : (
<>
{/* Toggle picker button */}
{/* Inline lock picker */}
{isOpen && (
setPick(p.sku, v)}/>
)}
)}
);
})}
{Array.from({length: totalPages}, (_,i) => (
))}
หน้า {page+1}/{totalPages} ({filtered.length} รายการ)
)}
);
}
function ShelfBlock({ side, shelf, locks, lockData, searchMatches, onClick, allowEmpty, isRight }) {
// ฝั่งซ้าย (isRight=false): ฝั่งขวา (isRight=true):
// 15 12 9 6 3 13 10 7 4 1
// 14 11 8 5 2 14 11 8 5 2
// 13 10 7 4 1 15 12 9 6 3
const cols = 5, rows = 3;
const cells = [];
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const num = isRight
? (cols - 1 - col) * rows + (row + 1) // ขวา: 1 บนขวา, 15 ล่างซ้าย
: (cols - 1 - col) * rows + (rows - row); // ซ้าย: 15 บนซ้าย, 1 ล่างขวา
if (num > locks) { cells.push(); continue; }
const key = `${side}${shelf}/${num}`;
const d = lockData[key];
const isSearch = searchMatches.has(key);
let cls = 'lock empty';
if (d) {
if (d.mismatch) cls = 'lock mismatch';
else if (d.verified) cls = 'lock verified';
else cls = 'lock master';
}
if (isSearch) cls += ' search';
cells.push(
(d || allowEmpty) && onClick(key)}
style={!d && allowEmpty ? {cursor:"pointer"} : undefined}
title={d ? `${key} · ${d.skus.length} SKU${d.mismatch?' · สต๊อกไม่ตรง':''}` : `${key} · ว่าง (กดเพื่อเพิ่มสินค้า)`}>
{num}
{d && d.skus.length > 1 && {d.skus.length}}
);
}
}
return (
);
}
function ImageLightbox({ url, name, onClose }) {
useBackHandler(onClose); // Android back = ปิดรูป
return (
e.stopPropagation()} style={{
display:"flex", flexDirection:"column", alignItems:"center", gap:12,
maxWidth:"90vw", maxHeight:"90vh"
}}>
{name}
);
}
// ─── QR Scanner (html5-qrcode — รองรับทุก browser: iOS Safari, Android, Desktop) ───
function QRScanModal({ onDetected, onClose }) {
const scannerRef = React.useRef(null);
const containerId = React.useMemo(() => `qr-reader-${Math.random().toString(36).slice(2,9)}`, []);
const [err, setErr] = uS(null);
const [lastSku, setLastSku] = uS(null);
const [ready, setReady] = uS(false);
const lastDetectRef = React.useRef({ sku:null, t:0 });
uE(() => {
if (!window.Html5Qrcode) {
setErr("ไม่สามารถโหลด library scanner ได้\nกรุณาตรวจสอบ internet แล้วโหลดหน้านี้ใหม่");
return;
}
let h5q;
let cancelled = false;
const start = async () => {
try {
h5q = new window.Html5Qrcode(containerId, {
formatsToSupport: [
window.Html5QrcodeSupportedFormats.QR_CODE,
window.Html5QrcodeSupportedFormats.CODE_128,
window.Html5QrcodeSupportedFormats.CODE_39,
window.Html5QrcodeSupportedFormats.CODE_93,
window.Html5QrcodeSupportedFormats.EAN_13,
window.Html5QrcodeSupportedFormats.EAN_8,
window.Html5QrcodeSupportedFormats.UPC_A,
window.Html5QrcodeSupportedFormats.UPC_E,
window.Html5QrcodeSupportedFormats.DATA_MATRIX,
window.Html5QrcodeSupportedFormats.ITF,
],
});
scannerRef.current = h5q;
await h5q.start(
{ facingMode: "environment" },
{ fps: 10, qrbox: { width: 220, height: 220 } },
(decoded) => {
const sku = String(decoded || "").trim().toUpperCase();
if (!sku) return;
const now = Date.now();
if (lastDetectRef.current.sku === sku && now - lastDetectRef.current.t < 1500) return;
lastDetectRef.current = { sku, t: now };
setLastSku(sku);
onDetected(sku);
},
() => { /* ignore decode errors */ }
);
if (!cancelled) setReady(true);
} catch (e) {
if (!cancelled) {
const msg = e?.name || e?.message || String(e);
const friendly =
msg.includes("NotAllowed") || msg.includes("Permission")
? "🚫 ไม่ได้รับอนุญาตใช้กล้อง — กดอนุญาต (Allow) ใน browser แล้วลองใหม่"
: msg.includes("NotFound") || msg.includes("Devices")
? "📵 ไม่พบกล้อง — ตรวจสอบว่าอุปกรณ์มีกล้องและเสียบแล้ว"
: msg.includes("NotReadable") || msg.includes("busy")
? "⚠️ กล้องถูกใช้งานอยู่ — ปิดแอปอื่นที่ใช้กล้องแล้วลองใหม่"
: msg.includes("https") || msg.includes("secure")
? "🔒 ต้องการ HTTPS — ไม่สามารถใช้กล้องบน HTTP ได้"
: "❌ เปิดกล้องไม่ได้ — ลองรีโหลดหน้าหรือเปลี่ยน browser";
setErr(friendly);
}
}
};
start();
return () => {
cancelled = true;
const s = scannerRef.current;
if (s) s.stop().then(() => s.clear()).catch(() => {});
};
}, []);
const handleClose = async () => {
const s = scannerRef.current;
scannerRef.current = null;
try { if (s) { await s.stop(); s.clear(); } } catch(e) {}
onClose();
};
useBackHandler(handleClose); // Android back = ปิด scanner
return (
e.stopPropagation()} style={{
background:"#fff",borderRadius:16,padding:20,
maxWidth:400,width:"100%",
}}>
{err ? (
{err}
) : (
{!ready && (
กำลังเปิดกล้อง…
)}
)}
{lastSku && (
✓ สแกนได้: {lastSku}
)}
กดปิดเมื่อเสร็จ · สแกนได้ต่อเนื่อง · รองรับ iPhone/Android/PC
);
}
// ─── Reusable ScanButton ───
function ScanButton({ onScan, continuous = false, size = 36, style: extraStyle }) {
const [open, setOpen] = uS(false);
const handleDetected = (sku) => {
onScan(sku.trim().toUpperCase());
if (!continuous) setOpen(false);
};
const iconSize = Math.round(size * 0.52);
return (
<>
{open &&
setOpen(false)}/>}
);
}
// ─── sync front store data ───
async function syncFrontStoreData(entries) {
if (!SHEET_DEPLOY_URL) { console.warn("SHEET_DEPLOY_URL not set"); return { success: false }; }
try {
await fetch(SHEET_DEPLOY_URL, {
method: "POST", mode: "no-cors",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
updateFrontStore: true,
datetime: new Date().toLocaleString("th-TH", { timeZone: "Asia/Bangkok" }),
entries,
}),
});
return { success: true };
} catch (err) { return { success: false, error: err.message }; }
}
// ─── Supplier Search Autocomplete ───
function SupplierSearch({ value, onChange, allSuppliers }) {
const [text, setText] = uS(value || "");
const [open, setOpen] = uS(false);
const wrapRef = React.useRef(null);
uE(() => { if (!value) setText(""); }, [value]);
uE(() => {
const handle = e => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", handle);
return () => document.removeEventListener("mousedown", handle);
}, []);
const suggestions = uM(() => {
const q = text.trim().toLowerCase();
if (!q) return allSuppliers;
return allSuppliers.filter(s => s.toLowerCase().includes(q));
}, [text, allSuppliers]);
const select = (s) => { setText(s); onChange(s); setOpen(false); };
const clear = () => { setText(""); onChange(""); setOpen(false); };
return (
{ setText(e.target.value); setOpen(true); onChange(""); }}
onFocus={() => setOpen(true)}
style={{flex:1, padding:"8px 10px", border:"none", outline:"none",
fontSize:13, fontFamily:"inherit",
color: value ? "var(--g-700)" : "var(--text)",
fontWeight: value ? 600 : 400, minWidth:0}}/>
{(text || value) && (
)}
{open && suggestions.length > 0 && (
{suggestions.map(s => (
))}
)}
);
}
// ─── Memoized FrontStore Card ───
const FSCard = React.memo(function FSCard({ p, val, isSaved, isTouched, onSetQty, onImageClick, onOpenCalc }) {
const sysStore = p.qtyStore ?? 0;
const wh = p.qtyWH ?? 0;
const hasVal = val !== "" && val != null;
const num = hasVal ? (parseInt(val) || 0) : null;
const matched = hasVal && num === sysStore;
const diff = hasVal ? num - sysStore : null;
const borderColor = !hasVal ? "var(--bdr)"
: matched ? "var(--g-500)" : "var(--dang)";
const cardBg = isSaved ? "#f0fdf4"
: isTouched ? "#fffbeb"
: "#fff";
const numVal = hasVal ? (parseInt(val) || 0) : 0;
const adjustQty = (delta) => {
const nv = Math.max(0, numVal + delta);
onSetQty(p.sku, String(nv));
};
return (
{p.imageUrl ? (
onImageClick({url:p.imageUrl,name:p.name})}
style={{width:"100%",aspectRatio:"4/3",borderRadius:10,cursor:"zoom-in",
backgroundImage:`url("${p.imageUrl}")`,backgroundSize:"contain",
backgroundPosition:"center",backgroundRepeat:"no-repeat",
backgroundColor:"#f8f9fa",border:"1px solid var(--bdr)"}}/>
) : (
📦
)}
{p.imageUrl && p.color && (
)}
{p.sku}
{isSaved && (
✓ บันทึก
)}
{p.name}
{(p.lastSupplier || p.vendor) && (
🏪 {p.lastSupplier || p.vendor}
)}
✏️ เช็คจริงที่นับได้
{/* ±qty buttons + input row */}
onSetQty(p.sku, e.target.value)}
placeholder="0"
style={{
width:"100%", padding:"10px 6px", borderRadius:9,
fontSize:20, fontWeight:800, fontFamily:"inherit",
textAlign:"center", outline:"none",
border: hasVal
? (matched ? "2px solid var(--g-500)" : "2px solid var(--dang)")
: "1.5px solid var(--bdr)",
background: hasVal
? (matched ? "#f0fdf4" : "#fff5f5")
: "#fff",
color: hasVal ? (matched ? "var(--g-700)" : "var(--dang)") : "var(--text)",
}}/>
{hasVal && (
{!matched && diff !== null ? (diff > 0 ? `+${diff}` : diff) : "✓"}
)}
{onOpenCalc && (
)}
);
});
// ─── FrontStoreView ───
function FrontStoreView({ data, role }) {
const products = data.products || [];
const [toast, showToast, hideToast] = useToast();
const CAT_ORDER = ["Realtouch","ดอกไม้","บูช","ไม้แซม","ดอกหญ้า","ใบ","ใบบูช","ใบไม้แขวน","กิ่งไม้","กุหลาบหิน","ต้นไม้","แจกันแก้ว","เรซิ่น"];
const allCats = uM(() => {
const s = new Set();
products.forEach(p => p.cat && p.cat !== "ไม่มีรหัสสินค้า" && s.add(p.cat));
return [...s].sort((a, b) => {
const ia = CAT_ORDER.indexOf(a), ib = CAT_ORDER.indexOf(b);
if (ia >= 0 && ib >= 0) return ia - ib;
if (ia >= 0) return -1; if (ib >= 0) return 1;
return a.localeCompare(b, "th");
});
}, [products]);
const allSuppliers = uM(() => {
const s = new Set();
products.forEach(p => { if (p.lastSupplier) s.add(p.lastSupplier); if (p.vendor) s.add(p.vendor); });
return [...s].sort();
}, [products]);
const [activeCat, setActiveCat] = uS("ALL");
const [supplierFilter, setSupplierFilter] = uS("");
const [search, setSearch] = uS("");
const [saving, setSaving] = uS(false);
const [lightbox, setLightbox] = uS(null);
const [savedSkus, setSavedSkus] = uS(new Set());
const [scrollToSku, setScrollToSku] = uS(null);
const [showMode, setShowMode] = uS("all");
const [mounted, setMounted] = uS(false);
uE(() => { const t = setTimeout(() => setMounted(true), 350); return () => clearTimeout(t); }, []);
const [checkedQtys, setCheckedQtys] = uS(() => {
const init = {};
products.forEach(p => {
if (p.frontStoreCheckedQty != null && p.frontStoreCheckedQty !== "")
init[p.sku] = p.frontStoreCheckedQty;
});
return init;
});
const [touched, setTouched] = uS(new Set());
const [lastSavedTime, setLastSavedTime] = uS(null); // timestamp of last successful save
const [fsCalcPad, setFsCalcPad] = uS(null); // {sku, name, val} for CalcPadModal
const setQty = uC((sku, val) => {
setCheckedQtys(prev => ({ ...prev, [sku]: val === "" ? "" : parseInt(val) || 0 }));
setTouched(prev => new Set([...prev, sku]));
}, []);
const baseFiltered = uM(() => {
let f = products.filter(p => p.cat && p.cat !== "ไม่มีรหัสสินค้า");
if (activeCat !== "ALL") f = f.filter(p => p.cat === activeCat);
if (supplierFilter) f = f.filter(p => (p.lastSupplier || p.vendor) === supplierFilter);
if (search) {
const q = search.trim().toLowerCase();
f = f.filter(p => (p.sku||"").toLowerCase().includes(q) || (p.name||"").toLowerCase().includes(q));
}
return [...f].sort(compareSku);
}, [products, activeCat, supplierFilter, search]);
const filtered = uM(() => {
if (showMode === "all") return baseFiltered;
if (showMode === "unchecked")
return baseFiltered.filter(p => checkedQtys[p.sku] == null || checkedQtys[p.sku] === "");
if (showMode === "mismatch")
return baseFiltered.filter(p => {
const v = checkedQtys[p.sku];
if (v == null || v === "") return false;
return parseInt(v) !== (p.qtyStore ?? 0);
});
return baseFiltered;
}, [baseFiltered, showMode, checkedQtys]);
const counts = uM(() => {
let unchecked = 0, mismatch = 0;
const perCat = {};
products.forEach(p => {
if (!p.cat || p.cat === "ไม่มีรหัสสินค้า") return;
const v = checkedQtys[p.sku];
const noVal = v == null || v === "";
if (noVal) {
unchecked++;
perCat[p.cat] = (perCat[p.cat] || 0) + 1;
} else if (parseInt(v) !== (p.qtyStore ?? 0)) {
mismatch++;
}
});
return { unchecked, mismatch, perCat };
}, [products, checkedQtys]);
const uncheckedCount = counts.unchecked;
const mismatchCount = counts.mismatch;
const touchedWithValue = uM(() =>
[...touched].filter(sku => checkedQtys[sku] !== "" && checkedQtys[sku] != null).length
, [touched, checkedQtys]);
const handleScanDetected = (sku) => {
if (!sku) return;
const clean = sku.trim().toUpperCase();
const p = products.find(x => x.sku === clean);
if (!p) {
showToast("error", `ไม่พบ ${clean}`, "🔍");
return;
}
setActiveCat("ALL");
setSearch(clean);
setScrollToSku(clean);
};
uE(() => {
if (!scrollToSku) return;
const t = setTimeout(() => {
const el = document.getElementById(`fs-row-${scrollToSku}`);
if (el) {
el.scrollIntoView({ behavior: "smooth", block: "center" });
el.style.background = "#fff9c4";
setTimeout(() => { if (el) el.style.background = ""; }, 2000);
}
setScrollToSku(null);
}, 200);
return () => clearTimeout(t);
}, [scrollToSku]);
const handleSave = async () => {
const entries = [...touched]
.filter(sku => checkedQtys[sku] !== "" && checkedQtys[sku] != null)
.map(sku => ({ sku, qty: parseInt(checkedQtys[sku]) || 0 }));
if (entries.length === 0) {
showToast("warn", "ยังไม่ได้กรอกจำนวน", "✏️");
return;
}
setSaving(true);
const result = await syncFrontStoreData(entries);
setSaving(false);
if (result.success !== false) {
setSavedSkus(prev => new Set([...prev, ...entries.map(e => e.sku)]));
setTouched(new Set());
setLastSavedTime(new Date());
showToast("success", `บันทึก ${entries.length} รายการ`, "💾");
} else {
showToast("error", "บันทึกไม่สำเร็จ", "❌");
}
};
const PAGE_SIZE = 20;
const [page, setPage] = uS(0);
uE(() => { setPage(0); }, [activeCat, supplierFilter, search, showMode]);
const totalInCat = activeCat === "ALL"
? products.filter(p => p.cat && p.cat !== "ไม่มีรหัสสินค้า").length
: products.filter(p => p.cat === activeCat).length;
const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
const paginated = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
return (
<>
{/* ── CalcPadModal for FrontStoreView ── */}
({ ...prev, [fsCalcPad.sku]: qty === '' ? '' : parseInt(qty)||0 }));
setTouched(prev => new Set([...prev, fsCalcPad.sku]));
}
setFsCalcPad(null);
}}
onClose={function(){ setFsCalcPad(null); }}
/>
🛒 เช็คจำนวนหน้าร้าน
{uncheckedCount > 0
? รอเช็ค {uncheckedCount} รายการ
: ✓ เช็คครบแล้ว}
{mismatchCount > 0 && · ไม่ตรง {mismatchCount} รายการ}
{lastSavedTime && (
✓ บันทึกแล้ว {lastSavedTime.getHours().toString().padStart(2,"0")}:{lastSavedTime.getMinutes().toString().padStart(2,"0")}
)}
setSearch(e.target.value)}
style={{flex:1, minWidth:160, padding:"8px 12px", borderRadius:10,
border:"1.5px solid var(--bdr)", fontSize:13, fontFamily:"inherit"}}/>
0?` (${uncheckedCount})`:""}`},
{value:"mismatch", label:`❌ ไม่ตรง${mismatchCount>0?` (${mismatchCount})`:""}`},
]}/>
{supplierFilter && (
)}
{allCats.map(c => {
const cnt = products.filter(p => p.cat === c).length;
const uncheckedInCat = counts.perCat[c] || 0;
const emoji = CAT_EMOJI[c] || "";
return (
);
})}
{!mounted ? (
{Array.from({length:6}).map((_,i) => )}
) : filtered.length === 0 ? (
) : (
{paginated.map(p => (
{
const cur = checkedQtys[sku];
setFsCalcPad({ sku, name, val: (cur != null && cur !== '') ? String(cur) : '' });
}}/>
))}
)}
{totalPages > 1 && (
{Array.from({length:totalPages},(_,i)=>i)
.filter(i => Math.abs(i-page) <= 2 || i===0 || i===totalPages-1)
.reduce((acc,i,idx,arr) => {
if (idx>0 && i-arr[idx-1]>1) acc.push("...");
acc.push(i); return acc;
},[])
.map((item,idx) => item === "..." ? (
…
) : (
))
}
)}
หน้า {page+1}/{totalPages || 1} ·
แสดง {page*PAGE_SIZE+1}–{Math.min((page+1)*PAGE_SIZE, filtered.length)} จาก {fmtN(filtered.length)} รายการ
{touchedWithValue > 0 && (
· แก้ไขแล้ว {touchedWithValue} รายการ (ยังไม่บันทึก)
)}
{lightbox && setLightbox(null)}/>}
);
}
// ─── sync lock data to "ตำแหน่งจัดเก็บ" sheet ───
async function syncLockData(lockKey, entries) {
// entries = [{ sku, qty, isNew }]
if (!SHEET_DEPLOY_URL) { console.warn("SHEET_DEPLOY_URL not set"); return { success: false }; }
try {
await fetch(SHEET_DEPLOY_URL, {
method: "POST", mode: "no-cors",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
updateLockData: true,
lockKey,
datetime: new Date().toLocaleString("th-TH", { timeZone: "Asia/Bangkok" }),
entries,
}),
});
return { success: true };
} catch (err) { return { success: false, error: err.message }; }
}
async function syncDeleteLockEntry(lockKey, sku) {
if (!SHEET_DEPLOY_URL) { console.warn("SHEET_DEPLOY_URL not set"); return { success: false }; }
try {
await fetch(SHEET_DEPLOY_URL, {
method: "POST", mode: "no-cors",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ deleteLockEntry: true, lockKey, sku }),
});
return { success: true };
} catch (err) { return { success: false, error: err.message }; }
}
function LockModal({ lockKey, data, productMap, products, lockOv, onUpdateLock, onClose }) {
const [lightbox, setLightbox] = uS(null);
const [editMode, setEditMode] = uS(false);
const [addSku, setAddSku] = uS("");
const [saving, setSaving] = uS(false);
const [savedSkus, setSavedSkus] = uS(new Set());
const [toast, showToast, hideToast] = useToast();
// confirm modal state for delete
const [delConfirm, setDelConfirm] = uS(null); // { sku, isLocal }
// เช็คจริง: { sku: qty } — กรอกได้ทุก SKU
const [checkedQtys, setCheckedQtys] = uS(() => {
const init = {};
(data.entries || []).forEach(e => { init[e.sku] = e.qty ?? ""; });
return init;
});
// ติดตาม SKU ที่เพิ่งเพิ่มใหม่ (isNew = true สำหรับ append row ใน sheet)
const [newSkus, setNewSkus] = uS(new Set());
// ติดตาม SKU ที่ลบออกแล้ว (ซ่อนจาก UI ทันทีหลัง API สำเร็จ)
const [deletedSkus, setDeletedSkus] = uS(new Set());
const ovSet = new Set(lockOv);
const addToLock = (skuOverride) => {
const sku = (skuOverride || addSku).trim().toUpperCase();
if (!sku) return;
if (data.skus.includes(sku) || ovSet.has(sku)) { setAddSku(""); return; }
onUpdateLock([...ovSet, sku]);
setNewSkus(prev => new Set([...prev, sku]));
setAddSku("");
};
const handleScanDetected = (sku) => {
if (!sku) return;
const clean = sku.trim().toUpperCase();
if (!data.skus.includes(clean) && !ovSet.has(clean)) {
onUpdateLock([...ovSet, clean]);
setNewSkus(prev => new Set([...prev, clean]));
}
};
const removeFromLock = (sku) => {
onUpdateLock(lockOv.filter(s => s !== sku));
};
const handleDelete = (sku, isLocal) => {
setDelConfirm({ sku, isLocal });
};
const doDelete = async () => {
const { sku, isLocal } = delConfirm || {};
setDelConfirm(null);
if (!sku) return;
if (isLocal) {
onUpdateLock(lockOv.filter(s => s !== sku));
setNewSkus(prev => { const n = new Set(prev); n.delete(sku); return n; });
setCheckedQtys(prev => { const n = {...prev}; delete n[sku]; return n; });
showToast("success", `ลบ ${sku} แล้ว`, "🗑️");
} else {
const result = await syncDeleteLockEntry(lockKey, sku);
if (result.success !== false) {
setDeletedSkus(prev => new Set([...prev, sku]));
setCheckedQtys(prev => { const n = {...prev}; delete n[sku]; return n; });
setSavedSkus(prev => { const n = new Set(prev); n.delete(sku); return n; });
if (ovSet.has(sku)) onUpdateLock(lockOv.filter(s => s !== sku));
showToast("success", `ลบ ${sku} แล้ว`, "🗑️");
} else {
showToast("error", "ลบไม่สำเร็จ", "❌");
}
}
};
const handleSave = async () => {
const entries = Object.entries(checkedQtys)
.filter(([, v]) => v !== "" && v !== null && v !== undefined)
.map(([sku, qty]) => ({ sku, qty: parseInt(qty) || 0, isNew: newSkus.has(sku) }));
if (entries.length === 0) {
showToast("warn", "ยังไม่ได้กรอกจำนวน", "✏️");
return;
}
setSaving(true);
const result = await syncLockData(lockKey, entries);
setSaving(false);
if (result.success !== false) {
const done = new Set([...savedSkus, ...entries.map(e => e.sku)]);
setSavedSkus(done);
setNewSkus(new Set());
showToast("success", `บันทึก ${entries.length} รายการ`, "💾");
} else {
showToast("error", "บันทึกไม่สำเร็จ", "❌");
}
};
const allSkus = [...new Set([...data.skus, ...lockOv])].filter(s => !deletedSkus.has(s));
const prods = allSkus.map(s => ({ sku: s, p: productMap[s], isLocal: ovSet.has(s) && !data.skus.includes(s) }));
return (
<>
e.stopPropagation()} style={{
background:"#fff", borderRadius:16, maxWidth:680, width:"100%",
maxHeight:"90vh", overflow:"auto", boxShadow:"0 20px 60px rgba(0,0,0,.25)"
}}>
ตำแหน่งจัดเก็บ
📦 ล็อค {lockKey}
{data.skus.length} SKU · {data.verified ? "เช็คแล้ว manual" : "ข้อมูลจากระบบ (ยังไม่ได้เช็ค)"}
{data.mismatch && ⚠️ สต๊อกไม่ตรง}
{/* Add SKU panel — shown in edit mode */}
{editMode && (
+ เพิ่มสินค้า:
setAddSku(e.target.value)}
onKeyDown={e => e.key==="Enter" && addToLock()}
placeholder="พิมพ์ SKU หรือชื่อสินค้า..."
style={{
flex:1, minWidth:180, padding:"7px 12px", borderRadius:8,
border:"1.5px solid var(--g-300)", fontSize:13, fontFamily:"inherit",
}}/>
)}
| สินค้า |
คงเหลือ
ในระบบ |
{prods.map(({sku, p, isLocal}) => {
const warehouseQty = p ? whQty(p) : null;
const checkedVal = checkedQtys[sku];
const isSaved = savedSkus.has(sku);
const hasChecked = checkedVal !== "" && checkedVal !== undefined && checkedVal !== null;
const checkedNum = hasChecked ? (parseInt(checkedVal) || 0) : null;
const hasData = warehouseQty !== null && checkedNum !== null;
const matched = hasData && warehouseQty === checkedNum;
const diff = hasData ? checkedNum - warehouseQty : null;
return (
{p && p.imageUrl ? (
setLightbox({url:p.imageUrl, name:p.name})}
style={{width:52,height:52,borderRadius:8,
backgroundImage:`url("${p.imageUrl}")`,
backgroundSize:"contain",backgroundPosition:"center",
backgroundRepeat:"no-repeat",backgroundColor:"#fff",
border:"1px solid var(--bdr)",
cursor:"zoom-in", transition:"transform .15s, box-shadow .15s"}}
onMouseEnter={e=>{e.currentTarget.style.transform="scale(1.1)";e.currentTarget.style.boxShadow="0 4px 12px rgba(0,0,0,.15)"}}
onMouseLeave={e=>{e.currentTarget.style.transform="scale(1)";e.currentTarget.style.boxShadow=""}}
title="คลิกเพื่อขยายรูป"/>
) : (
📦
)}
{p && p.imageUrl && p.color && (
)}
{sku}
{isLocal && + เพิ่มเอง}
{isSaved && ✓ บันทึกแล้ว}
{p ? p.name : ไม่พบในระบบ}
|
{/* คงเหลือ — read-only เสมอ */}
{warehouseQty != null ? fmtN(warehouseQty) : "—"}
|
);
})}
{lightbox && setLightbox(null)}/>}
setDelConfirm(null)}
/>
);
}
// ─────────────────────────────────────────────────────────────────────
// STOCK COUNT VIEW — นับ stock คลัง ทีละล็อค (Owner + WH เท่านั้น)
// ─────────────────────────────────────────────────────────────────────
function StockCountView({ data }) {
const storage = data.storage || {};
const shelves = storage.shelves || { A: 10, B: 10, locksPerShelf: 15 };
const verifiedLockMap = storage.verifiedLockMap || {};
const productLockMap = storage.productLockMap || {};
const products = data.products || [];
const lockData = uM(() => {
const merged = {};
Object.keys(productLockMap).forEach(k => {
merged[k] = { skus: productLockMap[k] || [] };
});
Object.keys(verifiedLockMap).forEach(k => {
const vSkus = verifiedLockMap[k].map(v => v.sku);
const base = merged[k] ? merged[k].skus : [];
merged[k] = { skus: [...new Set([...base, ...vSkus])] };
});
return merged;
}, [verifiedLockMap, productLockMap]);
const productMap = uM(() => {
const m = {};
products.forEach(p => { m[p.sku] = p; });
return m;
}, [products]);
const [step, setStep] = uS(1);
const [selShelf, setSelShelf] = uS(null);
const [selLockKey, setSelLockKey] = uS(null);
const [checkedQtys, setCheckedQtys] = uS({});
const [savedSkus, setSavedSkus] = uS(new Set());
const [saving, setSaving] = uS(false);
const [lastSavedTime, setLastSavedTime] = uS(null);
const [toast, showToast, hideToast] = useToast();
const [calcPad, setCalcPad] = uS(null); // {sku, val, name}
const [stockSearch, setStockSearch] = uS('');
// Supplier mode
const [supplierMode, setSupplierMode] = uS(false);
const [selSupplier, setSelSupplier] = uS(null);
const [suppSearch, setSuppSearch] = uS('');
uE(() => { setCheckedQtys({}); setSavedSkus(new Set()); setLastSavedTime(null); setStockSearch(''); }, [selLockKey]);
uE(() => { setCheckedQtys({}); setSavedSkus(new Set()); setLastSavedTime(null); setStockSearch(''); }, [selSupplier]);
// Android back button: step 3 → 2 → 1
uE(function(){
if (step === 1 || !window.__dmjBackStack) return;
var handler = function(){ setStep(function(s){ return s > 1 ? s - 1 : 1; }); };
window.__dmjBackStack.push(handler);
history.pushState({ _dmj: 1 }, '');
return function(){
var i = window.__dmjBackStack.lastIndexOf(handler);
if (i >= 0) window.__dmjBackStack.splice(i, 1);
};
}, [step]);
const openCalc = (sku, name) => {
const cur = checkedQtys[sku];
const init = (cur != null && cur !== '') ? String(cur) : '';
setCalcPad({ sku, name, expr: init, result: null, justOp: false });
};
// Safe expression evaluator — supports + - * /
const evalExpr = (expr) => {
try {
const clean = expr.replace(/[^0-9+\-*/.()]/g,'');
if (!clean) return null;
// eslint-disable-next-line no-new-func
const v = Function('return (' + clean + ')')();
if (!isFinite(v)) return null;
return Math.max(0, Math.round(v * 100) / 100);
} catch(e) { return null; }
};
const calcPress = (key) => {
if (!calcPad) return;
const { expr, result, justOp } = calcPad;
if (key === 'CONFIRM') {
// Confirm final value → set qty
const finalExpr = result !== null ? String(result) : expr;
const v = evalExpr(finalExpr);
const qty = v !== null ? String(Math.max(0, Math.floor(v))) : '';
setCheckedQtys(prev => { const o = Object.assign({},prev); o[calcPad.sku] = qty; return o; });
setCalcPad(null);
return;
}
if (key === 'CANCEL') { setCalcPad(null); return; }
if (key === 'DEL') {
if (result !== null) {
setCalcPad(p => ({ ...p, expr: String(result), result: null, justOp: false }));
} else {
setCalcPad(p => ({ ...p, expr: p.expr.length > 1 ? p.expr.slice(0,-1) : '', justOp: false }));
}
return;
}
if (key === 'C') {
setCalcPad(p => ({ ...p, expr: '', result: null, justOp: false }));
return;
}
if (key === '=') {
const toEval = result !== null ? String(result) : expr;
const v = evalExpr(toEval);
setCalcPad(p => ({ ...p, result: v !== null ? v : p.result, expr: toEval, justOp: false }));
return;
}
const isOp = ['+','-','*','/'].includes(key);
if (isOp) {
// If just evaluated, continue from result
const base = result !== null ? String(result) : expr;
// Replace trailing operator if already has one
const trimmed = base.replace(/[+\-*\/]$/, '');
setCalcPad(p => ({ ...p, expr: trimmed + key, result: null, justOp: true }));
return;
}
// Digit or dot
if (result !== null && !justOp) {
// Start fresh after result (unless continuing with operator)
setCalcPad(p => ({ ...p, expr: key, result: null, justOp: false }));
} else {
setCalcPad(p => ({
...p,
expr: p.expr.length >= 16 ? p.expr : p.expr + key,
result: null,
justOp: false,
}));
}
};
// What to show on display
const calcDisplay = calcPad
? (calcPad.result !== null ? String(calcPad.result) : (calcPad.expr || '0'))
: '0';
const calcEvalPreview = calcPad && calcPad.expr && !calcPad.justOp
? evalExpr(calcPad.expr) : null;
const locksN = shelves.locksPerShelf || 15;
const COLS = 5, ROWS = 3; // match ShelfBlock exactly
const shelfList = uM(() => {
const list = [];
['A','B'].forEach(side => {
for (let n = 1; n <= (shelves[side] || 10); n++) list.push(side + n);
});
return list;
}, [shelves]);
const lockSkus = uM(() => {
if (!selLockKey) return [];
return lockData[selLockKey] ? lockData[selLockKey].skus : [];
}, [selLockKey, lockData]);
const summary = uM(() => {
let waiting = 0, matched = 0, mismatched = 0;
lockSkus.forEach(sku => {
const p = productMap[sku];
const sys = p ? whQty(p) : null;
const val = checkedQtys[sku];
const has = val !== '' && val != null;
if (!has) { waiting++; return; }
(sys !== null && (parseInt(val)||0) === sys) ? matched++ : mismatched++;
});
return { waiting, matched, mismatched };
}, [lockSkus, checkedQtys, productMap]);
const adjustQty = (sku, delta) => {
const cur = checkedQtys[sku];
const n = (cur !== '' && cur != null) ? (parseInt(cur)||0) : 0;
setCheckedQtys(prev => ({ ...prev, [sku]: String(Math.max(0, n + delta)) }));
};
const handleSave = async () => {
const entries = Object.entries(checkedQtys)
.filter(([, v]) => v !== '' && v != null)
.map(([sku, qty]) => ({ sku, qty: parseInt(qty)||0 }));
if (!entries.length) { showToast('warn', 'ยังไม่ได้กรอกจำนวน', '✏️'); return; }
setSaving(true);
const result = await syncLockData(selLockKey, entries);
setSaving(false);
if (result.success !== false) {
setSavedSkus(new Set(entries.map(e => e.sku)));
setLastSavedTime(new Date());
showToast('success', 'บันทึกแล้ว ' + entries.length + ' รายการ', '💾');
} else {
showToast('error', 'บันทึกไม่สำเร็จ', '❌');
}
};
const shelfNum = selShelf ? parseInt(selShelf.replace(/[A-Za-z]/g,'')) : 0;
const isRight = shelfNum % 2 !== 0;
const lockNumAt = (row, col) =>
isRight
? (COLS - 1 - col) * ROWS + (row + 1) // ขวา: 1 บนขวา
: (COLS - 1 - col) * ROWS + (ROWS - row); // ซ้าย: 15 บนซ้าย
const shelfStats = uM(() => {
const s = {};
shelfList.forEach(sh => {
let total = 0;
for (let n = 1; n <= locksN; n++) {
const d = lockData[sh + '/' + n];
if (d && d.skus.length) total += d.skus.length;
}
s[sh] = { total };
});
return s;
}, [shelfList, lockData, locksN]);
// ── SUPPLIER MODE memos ──────────────────────────────────────────
// sku → lockKey reverse map
const skuToLock = uM(() => {
const m = {};
Object.entries(lockData).forEach(([lk, d]) => {
(d.skus || []).forEach(sku => { m[sku] = lk; });
});
return m;
}, [lockData]);
// suppliers that have at least one product with warehouse stock
const allSuppliersWH = uM(() => {
const s = new Set();
products.forEach(p => {
if (whQty(p) > 0) {
const v = p.lastSupplier || p.vendor;
if (v) s.add(v);
}
});
return [...s].sort();
}, [products]);
const filteredSuppliers = uM(() => {
if (!suppSearch.trim()) return allSuppliersWH;
const q = suppSearch.trim().toLowerCase();
return allSuppliersWH.filter(s => s.toLowerCase().includes(q));
}, [allSuppliersWH, suppSearch]);
// products from selected supplier in warehouse, sorted by lock position
const supplierProducts = uM(() => {
if (!selSupplier) return [];
return products
.filter(p => (p.lastSupplier || p.vendor) === selSupplier && whQty(p) > 0)
.sort((a, b) => {
const la = skuToLock[a.sku] || 'zzz';
const lb = skuToLock[b.sku] || 'zzz';
return la.localeCompare(lb, undefined, { numeric: true }) || compareSku(a, b);
});
}, [selSupplier, products, skuToLock]);
const supplierSummary = uM(() => {
let waiting = 0, matched = 0, mismatched = 0;
supplierProducts.forEach(p => {
const sys = whQty(p);
const val = checkedQtys[p.sku];
const has = val !== '' && val != null;
if (!has) { waiting++; return; }
((parseInt(val)||0) === sys) ? matched++ : mismatched++;
});
return { waiting, matched, mismatched };
}, [supplierProducts, checkedQtys]);
const handleSaveSupplier = async () => {
// group checked entries by lockKey
const byLock = {};
let noLockCount = 0;
supplierProducts.forEach(p => {
const qty = checkedQtys[p.sku];
if (qty === '' || qty == null) return;
const lk = skuToLock[p.sku];
if (!lk) { noLockCount++; return; }
if (!byLock[lk]) byLock[lk] = [];
byLock[lk].push({ sku: p.sku, qty: parseInt(qty)||0 });
});
const lockEntries = Object.entries(byLock);
if (lockEntries.length === 0) {
showToast('warn', noLockCount > 0 ? 'สินค้าที่กรอกยังไม่มีตำแหน่งล็อค' : 'ยังไม่ได้กรอกจำนวน', '✏️');
return;
}
setSaving(true);
let anyError = false;
for (const [lk, entries] of lockEntries) {
const result = await syncLockData(lk, entries);
if (result.success === false) anyError = true;
}
setSaving(false);
const totalSaved = lockEntries.reduce((s, [, e]) => s + e.length, 0);
if (!anyError) {
setSavedSkus(new Set(lockEntries.flatMap(([, e]) => e.map(x => x.sku))));
setLastSavedTime(new Date());
showToast('success', `บันทึก ${totalSaved} รายการ ใน ${lockEntries.length} ล็อค`, '💾');
} else {
showToast('error', 'บันทึกบางรายการไม่สำเร็จ', '❌');
}
};
// ── step 1 global search — must be declared before any early return (Rules of Hooks) ──
const step1SearchResults = uM(() => {
const q = stockSearch.trim().toUpperCase();
if (!q) return [];
const hits = [];
Object.entries(lockData).forEach(([lk, d]) => {
(d.skus || []).forEach(sku => {
if (hits.length >= 30) return;
const p = productMap[sku];
const skuUp = sku.toUpperCase();
const nameUp = (p && p.name ? p.name : '').toUpperCase();
if (skuUp.includes(q) || nameUp.includes(q)) {
hits.push({ sku, lockKey: lk, p });
}
});
});
// also include products in no lock
if (hits.length < 30) {
products.forEach(p => {
if (hits.length >= 30) return;
if (!skuToLock[p.sku]) {
const skuUp = p.sku.toUpperCase();
const nameUp = (p.name || '').toUpperCase();
if (skuUp.includes(q) || nameUp.includes(q)) {
hits.push({ sku: p.sku, lockKey: null, p });
}
}
});
}
return hits;
}, [stockSearch, lockData, productMap, products, skuToLock]);
// ── SUPPLIER MODE — นับตามซัพพลายเออร์ ──────────────────────────
if (supplierMode) {
const suppFilledCount = Object.values(checkedQtys).filter(v => v !== '' && v != null).length;
return (
<>
{/* Header */}
{selSupplier ? (
) : (
)}
🏭 {selSupplier || 'เลือกซัพพลายเออร์'}
{selSupplier
? `${supplierProducts.length} SKU ในคลัง — กรอกจำนวนที่นับได้`
: `${allSuppliersWH.length} ซัพพลายเออร์ที่มีของในคลัง`}
{selSupplier && (
{lastSavedTime && (
{'✓ '+lastSavedTime.getHours().toString().padStart(2,'0')+':'+lastSavedTime.getMinutes().toString().padStart(2,'0')}
)}
)}
{/* ── ยังไม่ได้เลือก supplier → แสดง list ── */}
{!selSupplier && (
<>
setSuppSearch(e.target.value)}
style={{padding:'10px 14px',borderRadius:10,border:'1.5px solid var(--bdr)',
fontSize:13,fontFamily:'inherit',background:'#fff'}}/>
{filteredSuppliers.length === 0 && (
)}
{filteredSuppliers.map(sup => {
const prods = products.filter(p =>
(p.lastSupplier || p.vendor) === sup && whQty(p) > 0);
const locks = new Set(prods.map(p => skuToLock[p.sku]).filter(Boolean));
return (
setSelSupplier(sup)}
style={{background:'#fff',border:'1.5px solid var(--bdr)',borderRadius:14,
padding:'14px 16px',cursor:'pointer',
display:'flex',alignItems:'center',gap:12,
boxShadow:'0 1px 4px rgba(0,0,0,.04)'}}>
🏭
{sup}
{prods.length} SKU · {locks.size > 0 ? `${locks.size} ล็อค` : 'ยังไม่มีตำแหน่ง'}
›
);
})}
)}
{/* ── เลือก supplier แล้ว → แสดงสินค้า ── */}
{selSupplier && (
<>
{/* Summary chips */}
{supplierProducts.length > 0 && (
{[
{n:supplierSummary.waiting, label:'⬜ รอนับ', bg:'#f1f5f9', c:'var(--muted)'},
{n:supplierSummary.matched, label:'✅ ตรง', bg:'#f0fdf4', c:'var(--g-700)'},
{n:supplierSummary.mismatched, label:'⚠️ ไม่ตรง',
bg:supplierSummary.mismatched>0?'#fff5f5':'#f1f5f9',
c:supplierSummary.mismatched>0?'var(--dang)':'var(--muted)'},
].map(function(item){
return (
);
})}
)}
{/* Search */}
setStockSearch(e.target.value.toUpperCase())}
style={{flex:1,padding:'9px 12px',borderRadius:10,border:'1.5px solid var(--bdr)',
fontSize:13,fontFamily:'inherit',background:'#fff'}}/>
setStockSearch(sku)}/>
{stockSearch && (
)}
{/* Product cards */}
{supplierProducts.length === 0 ? (
) : (
{supplierProducts.filter(p => {
if (!stockSearch) return true;
const sq = stockSearch.trim().toUpperCase();
return p.sku.toUpperCase().includes(sq) || (p.name||'').toUpperCase().includes(sq);
}).map(p => {
const lockKey = skuToLock[p.sku];
const sys = whQty(p);
const val = checkedQtys[p.sku];
const has = val !== '' && val != null;
const num = has ? (parseInt(val)||0) : 0;
const matched = has && num === sys;
const diff = has ? num - sys : null;
const saved = savedSkus.has(p.sku);
const bdr = !has ? 'var(--bdr)' : matched ? 'var(--g-500)' : 'var(--dang)';
const bgCard = saved ? '#f0fdf4' : !has ? '#fff' : matched ? '#f0fdf4' : '#fff5f5';
return (
{/* Image */}
{p.imageUrl ? (
) : (
{CAT_EMOJI[p.cat] || '📦'}
)}
{/* Lock badge — prominent position indicator */}
{lockKey ? (
📍 {lockKey}
) : (
⚠️ ไม่มีตำแหน่ง
)}
{p.color && (
)}
{p.sku}
คลัง {sys}
{p.name || '—'}
{/* Count result */}
{has && (
{matched ? `✅ นับได้ ${num} ตรง` : `⚠️ นับได้ ${num} (${diff>0?'+':''}${diff} จากระบบ)`}
)}
{/* ± controls */}
{[-5,-1].map(d => (
))}
{[1,5].map(d => (
))}
);
})}
)}
)}
📊 นับ stock คลัง
ขั้น 1 — เลือกชั้น หรือค้นหาสินค้า
{/* ── Search + Scan (global) ── */}
setStockSearch(e.target.value.toUpperCase())}
style={{flex:1,padding:'11px 14px',borderRadius:10,border:'1.5px solid var(--bdr)',
fontSize:13,fontFamily:'inherit',background:'#fff'}}/>
setStockSearch(sku.toUpperCase())}/>
{stockSearch && (
)}
{/* ── Search results ── */}
{stockSearch.trim().length > 0 && (
{step1SearchResults.length === 0 ? (
ไม่พบสินค้าที่ตรงกัน
) : (
<>
พบ {step1SearchResults.length} รายการ — แตะเพื่อไปนับล็อคนั้นเลย
{step1SearchResults.map(({ sku, lockKey, p }) => {
const sys = p ? whQty(p) : null;
const shelf = lockKey ? lockKey.split('/')[0] : null;
return (
{
if (!lockKey) return;
setSelShelf(shelf);
setSelLockKey(lockKey);
setStockSearch('');
setStep(3);
}}
style={{
display:'flex', alignItems:'center', gap:12,
background: lockKey ? '#fff' : '#fffbf0',
border:'1.5px solid ' + (lockKey ? 'var(--bdr)' : '#fbbf24'),
borderRadius:12, padding:'10px 14px',
cursor: lockKey ? 'pointer' : 'default',
boxShadow:'0 1px 4px rgba(0,0,0,.04)',
}}>
{/* Image or emoji */}
{p && p.imageUrl ? (
) : (
{(p && CAT_EMOJI[p.cat]) || '📦'}
)}
{sku}
{lockKey ? (
📍 {lockKey}
) : (
⚠️ ไม่มีตำแหน่ง
)}
{(p && p.name) || '—'}
{sys != null && (
{sys} ชิ้น
)}
{lockKey && (
แตะเพื่อนับ ›
)}
);
})}
)}
)}
{/* Mode toggle — ซ่อนเมื่อกำลังค้นหา */}
{!stockSearch.trim() && (
)}
{/* Shelf grid — ซ่อนเมื่อกำลังค้นหา */}
{!stockSearch.trim() && (
{['A','B'].map(side => (
ซอย {side}
{shelfList.filter(s => s[0] === side).map(sh => {
const shN = parseInt(sh.replace(/[A-Za-z]/g,''));
const isR = shN % 2 !== 0;
const stat = shelfStats[sh] || { total:0 };
return (
{ setSelShelf(sh); setStep(2); }}
style={{
background:'#fff',
border:'2px solid ' + (stat.total>0 ? 'var(--bdr)' : '#e2e8f0'),
borderRadius:14, padding:'16px 8px', cursor:'pointer',
display:'flex', flexDirection:'column', alignItems:'center', gap:6,
boxShadow:'0 1px 4px rgba(0,0,0,.05)',
minHeight:96,
}}>
{sh}
{isR ? '🧱 ขวา' : '🚪 ซ้าย'}
{stat.total>0 ? stat.total+' SKU' : 'ว่าง'}
);
})}
))}
)}
);
// ── STEP 2: เลือกล็อค ───────────────────────────────────────────
if (step === 2) return (
<>
ชั้น {selShelf}
{isRight ? '🧱 ฝั่งขวา' : '🚪 ฝั่งซ้าย'} · ขั้น 2 — เลือกล็อค
{isRight ? '🔢 ล็อค 1 อยู่มุมบน-ขวา' : '🔢 ล็อค 1 อยู่มุมบน-ซ้าย'}
{Array.from({length:ROWS}, (_, row) =>
Array.from({length:COLS}, (_, col) => {
const n = lockNumAt(row, col);
if (n < 1 || n > locksN) return
;
const key = selShelf + '/' + n;
const d = lockData[key];
const cnt = d ? d.skus.length : 0;
return (
{ if(cnt>0){ setSelLockKey(key); setStep(3); } }}
style={{
background: cnt>0 ? '#fff' : '#f8fafc',
border:'2px solid ' + (cnt>0 ? 'var(--g-400)' : '#e2e8f0'),
borderRadius:10, padding:'12px 4px',
cursor: cnt>0 ? 'pointer' : 'default',
textAlign:'center',
opacity: cnt>0 ? 1 : 0.4,
}}>
{n}
0?'var(--g-600)':'#94a3b8',fontWeight:600}}>
{cnt>0 ? cnt+' SKU' : 'ว่าง'}
);
})
)}
ล็อค {selLockKey}
ขั้น 3 — กรอกจำนวนที่นับได้จริง
{lastSavedTime && (
{'✓ บันทึก '+lastSavedTime.getHours().toString().padStart(2,'0')+':'+lastSavedTime.getMinutes().toString().padStart(2,'0')}
)}
{lockSkus.length > 0 && (
{[
{n:summary.waiting, label:'⬜ รอนับ', bg:'#f1f5f9', c:'var(--muted)'},
{n:summary.matched, label:'✅ ตรง', bg:'#f0fdf4', c:'var(--g-700)'},
{n:summary.mismatched, label:'⚠️ ไม่ตรง',
bg:summary.mismatched>0?'#fff5f5':'#f1f5f9',
c:summary.mismatched>0?'var(--dang)':'var(--muted)'},
].map(function(item){
return (
);
})}
)}
{/* ── Search + Scan ── */}
{lockSkus.length > 0 && (
{stockSearch && (
)}
)}
{lockSkus.length === 0 ? (
) : (
{lockSkus.filter(function(sku){
if (!stockSearch) return true;
const sq = stockSearch.trim().toUpperCase();
const p = productMap[sku];
return sku.toUpperCase().includes(sq) || (p && p.name && p.name.toUpperCase().includes(sq));
}).map(function(sku){
const p = productMap[sku];
const sys = p ? whQty(p) : null;
const val = checkedQtys[sku];
const has = val !== '' && val != null;
const num = has ? (parseInt(val)||0) : 0;
const matched = has && sys !== null && num === sys;
const diff = has && sys !== null ? num - sys : null;
const saved = savedSkus.has(sku);
const bdr = !has ? 'var(--bdr)' : matched ? 'var(--g-500)' : 'var(--dang)';
const bgCard = saved ? '#f0fdf4' : !has ? '#fff' : matched ? '#f0fdf4' : '#fff5f5';
return (
{/* Image 4:3 ratio */}
{p && p.imageUrl ? (
) : (
📦
)}
{p && p.imageUrl && p.color && (
)}
{!has ? '⬜ รอนับ' : matched ? '✅ ตรง' : (diff>0?'⚠️ +'+diff:'⚠️ '+diff)}
{sku}
{p ? p.name : React.createElement('span',{style:{color:'var(--muted)',fontStyle:'italic'}},'ไม่พบในระบบ')}
{/* Sys qty row */}
ระบบ
{sys != null ? sys : '—'}
{saved ? React.createElement('span',{style:{
marginLeft:6,fontSize:10,background:'#dcfce7',color:'#166534',
borderRadius:8,padding:'1px 6px',fontWeight:700}},'✓') : null}
{/* ±5 ±1 [input] ±1 ±5 */}
{/* Calc button */}
);
})}
)}
);
}
function TransferView({ data }) {
const transfers = data.transfers || [];
const stats = data.transferStats || { 'โอน': {count:0,qty:0}, 'ปรับ': {count:0,qty:0}, 'ยกมา': {count:0,qty:0} };
const products = data.products || [];
const [filterType, setFilterType] = uS('all');
const [search, setSearch] = uS('');
const productMap = uM(() => {
const m = {};
products.forEach(p => { m[p.sku] = p; });
return m;
}, [products]);
const filtered = uM(() => {
let list = transfers;
if (filterType !== 'all') list = list.filter(t => t.type === filterType);
const sq = search.trim().toUpperCase();
if (sq) list = list.filter(t => t.sku.toUpperCase().includes(sq) || t.name.toUpperCase().includes(sq));
return list;
}, [transfers, filterType, search]);
const transferByType = uM(() => {
const map = { 'โอน': [], 'ปรับ': [], 'ยกมา': [] };
transfers.forEach(t => { if (map[t.type]) map[t.type].push(t); });
return map;
}, [transfers]);
const transferByMonth = uM(() => {
const map = {};
transfers.forEach(t => {
const d = (t.date || '').substring(0, 7);
if (!d) return;
map[d] = map[d] || { 'โอน': 0, 'ปรับ': 0, 'ยกมา': 0 };
map[d][t.type] = (map[d][t.type] || 0) + (t.qty || 0);
});
return Object.entries(map).sort((a,b) => a[0].localeCompare(b[0])).map(([m, v]) => ({month: m, ...v}));
}, [transfers]);
const totalQty = transfers.reduce((s, t) => s + (t.qty || 0), 0);
const totalCount = transfers.length;
return (
}
style={{marginTop:16}}>
{filtered.length === 0 ? (
) : (
| ประเภท |
วันที่ |
SKU |
สินค้า |
จำนวน |
จาก |
ไป |
สถานะ |
{filtered.map((t, i) => {
const p = productMap[t.sku];
const typeColor = t.type === 'โอน' ? '#2196F3' : t.type === 'ปรับ' ? '#FF9800' : '#4CAF50';
return (
| {t.type} |
{t.date} |
{t.sku} |
{p ? p.name : t.name || '—'} |
{fmtN(t.qty)} |
{t.from || '—'} |
{t.to || '—'} |
{t.status || '—'} |
);
})}
)}
);
}
// ─────────────────────────────────────────────────────────────────────
// LABEL PRINT — QR Code labels, 5×14 = 70 per A4
// ─────────────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────────────
// ORDERS — localStorage state helpers
// ─────────────────────────────────────────────────────────────────────
const LS_ORDERS_STATE = "dmj_orders_state_v1";
const LS_PRINTED_ORDERS = "dmj_printed_orders_v1";
function getOrdersState() { try { return JSON.parse(localStorage.getItem(LS_ORDERS_STATE) || "{}"); } catch { return {}; } }
function getPrintedOrders() { try { return JSON.parse(localStorage.getItem(LS_PRINTED_ORDERS) || "{}"); } catch { return {}; } }
function patchOrderState(id, updates) {
const s = getOrdersState(); s[id] = { ...(s[id]||{}), ...updates };
// record when status was changed so we can detect ID collisions with new orders
if ('status' in updates) s[id].markedAt = new Date().toISOString();
localStorage.setItem(LS_ORDERS_STATE, JSON.stringify(s)); return s;
}
async function syncOrderUpdate(order, updates) {
if (!SHEET_DEPLOY_URL) return;
try {
await fetch(SHEET_DEPLOY_URL, {
method: "POST", mode: "no-cors",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
orderId: order.id,
status: updates.status,
preparedQty: updates.preparedQty,
printFlag: updates.printFlag,
carryMode: updates.carryMode,
}),
});
} catch(e) { console.warn("syncOrderUpdate failed:", e.message); }
}
// ─────────────────────────────────────────────────────────────────────
// ORDER LIST VIEW
// ─────────────────────────────────────────────────────────────────────
function OrderItemRow({ order, onPatch, productMap }) {
const isPending = !order.status || order.status === "รอ" || order.status === "pending";
const [prepQty, setPrepQty] = uS(() => order.preparedQty > 0 ? order.preparedQty : (order.orderQty || 0));
const [imgOpen, setImgOpen] = uS(false);
const [toast, showToast, hideToast] = useToast();
uE(() => {
setPrepQty(prev => prev === 0 ? (order.orderQty || 0) : prev);
}, [order.orderQty]);
const savePrepQty = v => {
const n = Math.max(0, parseInt(v)||0);
setPrepQty(n);
onPatch(order.id, {preparedQty: n});
syncOrderUpdate(order, {preparedQty: n});
};
const setPrintFlag = f => {
onPatch(order.id, {printFlag: f});
syncOrderUpdate(order, {printFlag: f});
};
const setCarryMode = m => onPatch(order.id, {carryMode: m});
const markComplete = () => {
if (!order.printFlag) {
showToast("warn", "เลือก PRINT หรือ SKIP ก่อน", "🖨️");
return;
}
onPatch(order.id, { status: "สำเร็จ" });
syncOrderUpdate(order, { status: "สำเร็จ" });
showToast("success", "บันทึกแล้ว", "✅", 2500);
};
const pf = order.printFlag;
// carryMode: ใช้จาก localStorage ก่อน ถ้าไม่มีดูจากข้อมูลใน sheet ถ้าไม่มีก็ default "truck"
const cm = order.carryMode || "truck";
const product = productMap ? productMap[order.sku] : null;
const locs = product?.locations || [];
const locStr = locs.length
? locs.map(l => `${l.side}${l.shelf}/${l.lock}`).join(", ")
: null;
return (
<>
{/* ── Row 1: image + info ── */}
{/* Thumbnail — clickable */}
(order.image || product) && setImgOpen(true)}
style={{
width:54,height:54,borderRadius:8,flexShrink:0,overflow:"hidden",
background:"var(--g-50)",cursor:(order.image||product)?"pointer":"default",
border:"1px solid var(--bdr)",position:"relative",
}}>
{order.image
?
:
{I.package}
}
{(order.image||product) && (
🔍
)}
{/* Info */}
{order.sku}
{isPending?"🟡 รอ":"✅ Done"}
{order.name}
{order.date}{order.from ? ` · ${order.from}` : ""}{order.to ? ` → ${order.to}` : ""}
{locStr && (
📍 {locStr}
)}
{/* ── Row 2: quantities + actions ── */}
{/* Quantities */}
{/* จัด — with +/- buttons (≥44px for mobile) */}
📦 จัด
{[-10,-5,-1].map(d => (
))}
savePrepQty(e.target.value)}
disabled={!isPending}
className="order-adj-input"
style={{
width:64,height:44,textAlign:"center",borderRadius:8,
border:"2px solid var(--g-500)",fontSize:18,fontWeight:800,
background:isPending?"#f0fdf4":"var(--g-50)",fontFamily:"inherit",
}}/>
{[+1,+5,+10].map(d => (
))}
🔢 เหลือ
{order.remaining ?? "—"}
{/* QR toggle */}
{/* Image + location modal */}
{imgOpen && (
setImgOpen(false)} style={{
position:"fixed",inset:0,background:"rgba(0,0,0,.78)",
display:"flex",alignItems:"center",justifyContent:"center",
zIndex:1000,cursor:"pointer",padding:16,
}}>
e.stopPropagation()} style={{
background:"#fff",borderRadius:16,padding:20,
maxWidth:380,width:"100%",maxHeight:"90vh",overflow:"auto",
}}>
{order.image && (
)}
{order.name}
{order.sku}
{locStr && (
📍 ตำแหน่ง: {locStr}
)}
{product?.cat && (
หมวด: {product.cat}
)}
สั่ง: {order.orderQty}
จัด: {prepQty}
เหลือ: {order.remaining??"—"}
)}
);
}
// สร้าง stable ID จาก sku + date + qty ถ้าไม่มี id จาก sheet
function stableOrderId(o, i) {
if (o.id) return String(o.id);
const parts = [o.sku || '', String(o.date || '').replace(/\D/g,''), String(o.orderQty || 0)];
return parts.join('_') || String(i);
}
function OrderListView({ data }) {
const orders = data.orders || [];
const [filter, setFilter] = uS("all");
const [st, setSt] = uS(getOrdersState);
const productMap = uM(() => { const m={}; (data.products||[]).forEach(p=>m[p.sku]=p); return m; }, [data.products]);
const enriched = uM(() => {
const DONE_ST = new Set(["สำเร็จ","completed","ส่งแล้ว","shipped"]);
return orders.map((o, i) => {
const id = stableOrderId(o, i);
const local = st[id] || {};
// Guard: sheet says "รอ" but localStorage says a terminal status.
// Only keep localStorage if we can positively confirm it's the SAME order
// (order date ≤ markedAt). Otherwise trust the sheet — new order / ID collision.
const sheetPending = !o.status || o.status === "รอ" || o.status === "pending";
if (sheetPending && DONE_ST.has(local.status)) {
let keepLocal = false;
if (local.markedAt && o.date) {
const orderMs = new Date(o.date).getTime();
const markedMs = new Date(local.markedAt).getTime();
keepLocal = !isNaN(orderMs) && !isNaN(markedMs) && orderMs <= markedMs;
}
if (!keepLocal) {
// strip all terminal-state fields → show as pending
const { status:_s, markedAt:_m, shipped:_sh, ...rest } = local;
return { ...o, id, ...rest };
}
}
return { ...o, id, ...local };
});
}, [orders, st]);
const sorted = uM(() => [...enriched].sort((a,b) => {
const aP = !a.status||a.status==="รอ"||a.status==="pending";
const bP = !b.status||b.status==="รอ"||b.status==="pending";
return (aP&&!bP)?-1:(!aP&&bP)?1:0;
}), [enriched]);
const isShippedOut = o => o.status === "ส่งแล้ว" || o.status === "shipped";
const filtered = uM(() => {
const base = sorted.filter(o => !isShippedOut(o)); // ส่งแล้ว → ออกจากรายการนี้ทันที
if (filter==="pending") return base.filter(o => !o.status||o.status==="รอ"||o.status==="pending");
if (filter==="completed") return base.filter(o => o.status==="สำเร็จ"||o.status==="completed");
return base;
}, [sorted, filter]);
const patch = (id, updates) => setSt(patchOrderState(id, updates));
const pendingCount = sorted.filter(o => !o.status||o.status==="รอ"||o.status==="pending").length;
if (!orders.length) return (
);
return (
📋 รายการสั่งของ
📦 {orders.length} รายการ · 🟡 {pendingCount} รอดำเนินการ
{filtered.length === 0 ? (
) : (
filtered.map(order =>
)
)}
);
}
// ─── deduct stock from sheet ───
async function syncStockDeduct(sku, qty) {
if (!SHEET_DEPLOY_URL) { console.warn("SHEET_DEPLOY_URL not set"); return { success: false }; }
try {
await fetch(SHEET_DEPLOY_URL, {
method: "POST", mode: "no-cors",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ transferStock: true, sku, qty }),
});
return { success: true };
} catch(e) { return { success: false, error: e.message }; }
}
const LS_SHIPPED_ORDERS = "dmj_shipped_orders_v1";
const LS_MISSED_TRUCK = "dmj_missed_truck_v1";
function getShippedOrders() { try { return JSON.parse(localStorage.getItem(LS_SHIPPED_ORDERS)||"{}"); } catch { return {}; } }
function getMissedOrders() { try { return JSON.parse(localStorage.getItem(LS_MISSED_TRUCK) ||"{}"); } catch { return {}; } }
// ─────────────────────────────────────────────────────────────────────
// ORDER SUMMARY VIEW
// ─────────────────────────────────────────────────────────────────────
function OrderSummaryView({ data, onPrintRequest }) {
const orders = data.orders || [];
const products = data.products || [];
const [st, setSt] = uS(getOrdersState);
const [printed, setPrinted] = uS(getPrintedOrders);
const [shipped, setShipped] = uS(getShippedOrders);
const [missed, setMissed] = uS(getMissedOrders);
const [sending, setSending] = uS(null);
const [bigImg, setBigImg] = uS(null);
const [toast, showToast, hideToast] = useToast();
const [shipConfirm, setShipConfirm] = uS(null); // single order
const [shipAllConfirm, setShipAllConfirm] = uS(null); // ready[] array
const productMap = uM(() => { const m={}; products.forEach(p => m[p.sku]=p); return m; }, [products]);
const enriched = uM(() => {
const DONE_ST = new Set(["สำเร็จ","completed","ส่งแล้ว","shipped"]);
return orders.map((o, i) => {
const id = stableOrderId(o, i);
const local = st[id] || {};
const sheetPending = !o.status || o.status === "รอ" || o.status === "pending";
if (sheetPending && DONE_ST.has(local.status)) {
let keepLocal = false;
if (local.markedAt && o.date) {
const orderMs = new Date(o.date).getTime();
const markedMs = new Date(local.markedAt).getTime();
keepLocal = !isNaN(orderMs) && !isNaN(markedMs) && orderMs <= markedMs;
}
if (!keepLocal) {
const { status:_s, markedAt:_m, shipped:_sh, ...rest } = local;
return { ...o, id, ...rest, product: productMap[o.sku] };
}
}
return { ...o, id, ...local, product: productMap[o.sku] };
});
}, [orders, st, productMap]);
// แสดงเฉพาะที่กด Done แล้ว
const isDone = o => o.status === "สำเร็จ" || o.status === "completed" || o.status === "done";
const doneOrders = uM(() => enriched.filter(isDone), [enriched]);
// แยกกลุ่ม: หิ้วก่อน, รถหลัง
const carryOrders = uM(() => doneOrders.filter(o => o.carryMode === "carry"), [doneOrders]);
const truckOrders = uM(() => doneOrders.filter(o => o.carryMode !== "carry"), [doneOrders]);
const handlePrint = (order) => {
const qty = order.preparedQty || order.orderQty || 1;
onPrintRequest([{ sku: order.sku, qty }]);
const p2 = { ...printed, [order.id]: true };
setPrinted(p2);
localStorage.setItem(LS_PRINTED_ORDERS, JSON.stringify(p2));
};
const handleShip = (order) => setShipConfirm(order);
const doShip = async () => {
const order = shipConfirm;
setShipConfirm(null);
if (!order) return;
const qty = order.preparedQty || order.orderQty || 0;
setSending(order.id);
await syncStockDeduct(order.sku, qty);
try {
await fetch(SHEET_DEPLOY_URL, {
method: "POST", mode: "no-cors",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ deleteOrder: true, orderId: order.id }),
});
} catch(e) { console.warn("deleteOrder failed:", e.message); }
setSending(null);
const next = { ...shipped, [order.id]: true };
setShipped(next);
localStorage.setItem(LS_SHIPPED_ORDERS, JSON.stringify(next));
setSt(patchOrderState(order.id, { status: "ส่งแล้ว" }));
showToast("success", `ส่ง ${qty} ชิ้นแล้ว`, "📦");
};
const toggleMissed = (order) => {
const next = { ...missed };
if (next[order.id]) delete next[order.id];
else next[order.id] = true;
setMissed(next);
localStorage.setItem(LS_MISSED_TRUCK, JSON.stringify(next));
};
// ship all ready (not missed, not already shipped) in a group
const handleShipAll = (orders) => {
const ready = orders.filter(o => !shipped[o.id] && !missed[o.id]);
if (!ready.length) return;
setShipAllConfirm(ready);
};
const doShipAll = async () => {
const ready = shipAllConfirm;
setShipAllConfirm(null);
if (!ready || !ready.length) return;
const nextShipped = { ...shipped };
let nextSt = getOrdersState();
for (const order of ready) {
setSending(order.id);
const qty = order.preparedQty || order.orderQty || 0;
await syncStockDeduct(order.sku, qty);
nextShipped[order.id] = true;
// อัพเดท shared state ให้ OrderListView เห็นด้วย
nextSt[order.id] = { ...(nextSt[order.id]||{}), status: "ส่งแล้ว" };
syncOrderUpdate(order, { shipped: true, status: "ส่งแล้ว" });
}
setSending(null);
setShipped(nextShipped);
localStorage.setItem(LS_SHIPPED_ORDERS, JSON.stringify(nextShipped));
localStorage.setItem(LS_ORDERS_STATE, JSON.stringify(nextSt));
setSt(nextSt);
showToast("success", `ส่ง ${ready.length} รายการแล้ว`, "📦");
};
if (!orders.length) return (
);
if (!doneOrders.length) return (
);
// render group section
const renderSection = (label, emoji, orders, isTruck) => {
if (!orders.length) return null;
const readyCount = orders.filter(o => !shipped[o.id] && !missed[o.id]).length;
// sort: not-shipped-not-missed first, missed to end, shipped to very end
const sorted = [...orders].sort((a,b) => {
const aS = shipped[a.id] ? 2 : missed[a.id] ? 1 : 0;
const bS = shipped[b.id] ? 2 : missed[b.id] ? 1 : 0;
return aS - bS;
});
return (
{/* Section header */}
{emoji}
{label}
{readyCount > 0 ? `${readyCount} รายการรอส่ง` : "ส่งหมดแล้ว"}
{readyCount > 0 && (
)}
{sorted.map(order => {
const isShipped = !!shipped[order.id];
const isMissed = !!missed[order.id];
const isSending = sending === order.id;
const alreadyPrinted = printed[order.id];
const prepQty = order.preparedQty || order.orderQty || 0;
return (
{/* Image */}
{order.image ? (
setBigImg(order)}
style={{width:"100%",height:88,objectFit:"contain",
borderRadius:8,cursor:"pointer",display:"block",
background:"var(--g-50)"}}/>
) : (
setBigImg(order)}
style={{width:"100%",height:88,background:"var(--g-50)",borderRadius:8,
display:"flex",alignItems:"center",justifyContent:"center",
color:"var(--muted)",cursor:"pointer"}}>{I.package}
)}
{/* Status badge */}
{isShipped && (
✅ ส่งแล้ว
)}
{isMissed && !isShipped && (
🚫 ไม่ขึ้น
)}
{/* Info */}
{order.sku} · {order.date}
{order.name}
{/* Qty pills */}
{[["สั่ง",order.orderQty,"#fee2e2","var(--dang)"],
["จัด",prepQty,"#e8f5e9","var(--g-700)"],
["เหลือ",order.remaining??"—","var(--g-50)","var(--text)"]
].map(([lbl,val,bg,col]) => (
))}
{/* Action buttons */}
{!isShipped && (
{/* Print Label */}
{order.printFlag==="print" && !alreadyPrinted && (
)}
{alreadyPrinted && (
✓ Printed
)}
{/* Ship + Missed row */}
{isTruck && (
)}
)}
);
})}
{/* "Missed truck" sub-section summary */}
{isTruck && orders.some(o => missed[o.id] && !shipped[o.id]) && (
🚫 ไม่ได้ขึ้นรถ ({orders.filter(o=>missed[o.id]&&!shipped[o.id]).length} รายการ)
— กด 🚫 อีกครั้งเพื่อยกเลิกและส่งได้
)}
สรุปสินค้าออกจากคลัง
สินค้าที่จัดเสร็จแล้ว · {doneOrders.length} รายการ
{Object.keys(shipped).length > 0 && ` · ส่งแล้ว ${Object.keys(shipped).filter(id=>doneOrders.find(o=>o.id===id)).length} รายการ`}
{renderSection("หิ้วเอง", "🚶", carryOrders, false)}
{renderSection("ขึ้นรถ", "🚛", truckOrders, true)}
{/* Expanded image modal */}
{bigImg && (
setBigImg(null)} style={{
position:"fixed",inset:0,background:"rgba(0,0,0,.78)",
display:"flex",alignItems:"center",justifyContent:"center",
zIndex:1000,cursor:"pointer",
}}>
e.stopPropagation()} style={{
background:"#fff",borderRadius:16,padding:20,
maxWidth:380,width:"90%",maxHeight:"90vh",overflow:"auto",
}}>
{bigImg.image && (
)}
{bigImg.name}
{bigImg.sku}
สั่ง: {bigImg.orderQty}
จัด: {bigImg.preparedQty||0}
เหลือ: {bigImg.remaining??"—"}
{bigImg.product && (
{bigImg.product.cat &&
หมวดหมู่: {bigImg.product.cat}
}
{bigImg.product.price>0 &&
ราคา: {bigImg.product.price} ฿
}
)}
)}
setShipConfirm(null)}
/>
setShipAllConfirm(null)}
/>
);
}
// Fallback SVG logo if logo.png not found
const LOGO_FALLBACK_SVG = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(`
`)}`;
function LabelPrintView({ data, initItems, onInitConsumed }) {
const { products } = data;
const [items, setItems] = uS([]);
const [printMode, setPrintMode] = uS("a4"); // "a4" | "sticker"
// Auto-populate from order summary "Print Label" button
uE(() => {
if (!initItems || !initItems.length) return;
setItems(initItems.map(it => ({ sku: it.sku, qty: it.qty })));
if (onInitConsumed) onInitConsumed();
}, [initItems]);
const [searchVal, setSearchVal] = uS("");
const [qtyVal, setQtyVal] = uS("1");
const [qrMap, setQrMap] = uS({});
const [logoSrc, setLogoSrc] = uS("logo.png");
const productMap = uM(() => {
const m = {};
products.forEach(p => { m[p.sku] = p; });
return m;
}, [products]);
// Generate QR codes using qrcodejs (synchronous DOM-based)
const doGenerate = uC((skus) => {
if (!skus.length) return;
const QR = window.QRCode;
if (!QR) { console.warn("qrcodejs not loaded"); return; }
const wrap = document.createElement("div");
wrap.style.cssText = "position:fixed;left:-9999px;top:-9999px;visibility:hidden;pointer-events:none";
document.body.appendChild(wrap);
const results = {};
skus.forEach(sku => {
const el = document.createElement("div");
wrap.appendChild(el);
try {
new QR(el, {
text: sku, width: 80, height: 80,
colorDark: "#000000", colorLight: "#ffffff",
correctLevel: QR.CorrectLevel.M,
});
const canvas = el.querySelector("canvas");
if (canvas) results[sku] = canvas.toDataURL("image/png");
} catch(e) { console.warn("QR error:", sku, e); }
});
document.body.removeChild(wrap);
if (Object.keys(results).length) {
setQrMap(prev => ({ ...prev, ...results }));
}
}, []);
uE(() => {
const pending = items.map(i => i.sku).filter(s => !qrMap[s]);
if (!pending.length) return;
// slight delay ensures qrcodejs is ready after page load
const t = setTimeout(() => doGenerate(pending), 80);
return () => clearTimeout(t);
}, [items, doGenerate]);
// Expand items to exact label list (no padding)
const labelList = uM(() => {
const flat = [];
items.forEach(item => {
const p = productMap[item.sku];
if (!p) return;
for (let i = 0; i < item.qty; i++) flat.push(p);
});
return flat;
}, [items, productMap]);
// 70 labels per A4 page (5 cols × 14 rows)
const pages = uM(() => {
const ps = [];
for (let i = 0; i < labelList.length; i += 70) ps.push(labelList.slice(i, i + 70));
return ps;
}, [labelList]);
const totalQty = items.reduce((s, i) => s + i.qty, 0);
// Safely escape HTML entities to prevent XSS in popup
const escHtml = (s) => String(s || "")
.replace(/&/g,"&").replace(//g,">")
.replace(/"/g,""").replace(/'/g,"'");
// Print sticker labels in a popup window (50mm thermal printer, single column, gap 3mm)
const printVaseLabels = uC(() => {
if (!labelList.length) return;
const labelsHTML = labelList.map(p => {
const qrImg = qrMap[p.sku]
? `
`
: `QR
`;
const priceStr = p.price != null && p.price > 0 ? `${escHtml(String(p.price))} ฿` : "";
return `
${escHtml(p.name)}
${priceStr ? `${priceStr}` : ""}
${qrImg}
${p.sku}
`;
}).join("");
const html = `
${labelsHTML}
`;
const win = window.open("", "_blank", "width=520,height=700");
if (!win) {
// Popup blocked — show toast instead of alert
if (window.__dmjToast) window.__dmjToast({ type:"warn", message:"🔒 Browser บล็อก Pop-up — กด Allow ใน address bar แล้วลองใหม่" });
else alert("กรุณาอนุญาต Pop-up ใน address bar แล้วลองใหม่");
return;
}
win.document.write(html);
win.document.close();
win.focus(); // bring popup to front
}, [labelList, qrMap, logoSrc]);
const addItem = () => {
const raw = searchVal.trim();
const sku = raw.includes(" — ") ? raw.split(" — ")[0].trim() : raw.toUpperCase().trim();
const qty = Math.min(700, Math.max(1, parseInt(qtyVal) || 1)); // clamp 1–700
if (!sku || !productMap[sku]) return;
setItems(prev => {
const ex = prev.find(i => i.sku === sku);
if (ex) return prev.map(i => i.sku === sku ? { ...i, qty: i.qty + qty } : i);
return [...prev, { sku, qty }];
});
setSearchVal("");
setQtyVal("1");
};
const removeItem = sku => setItems(prev => prev.filter(i => i.sku !== sku));
const updateQty = (sku, qty) => setItems(prev => prev.map(i => i.sku === sku ? { ...i, qty: Math.min(700, Math.max(1, qty || 1)) } : i));
return (
{/* ── Controls (hidden on print) ── */}
พิมพ์ Label สินค้า
{printMode === "a4"
? "A4 · 5 คอลัมน์ · 70 ใบ/หน้า"
: "สติ๊กเกอร์ · 50×25mm · gap 3mm · แถวเดียว"}
{labelList.length > 0 && (
{printMode === "a4" ? (
) : (
)}
)}
{/* ── Print mode toggle ── */}
{[
{id:"a4", label:"📄 A4", sub:"42×21mm · 70/หน้า"},
{id:"sticker", label:"🏷️ สติ๊กเกอร์", sub:"50×25mm · แถวเดียว"},
].map(m => (
))}
{/* Add product row */}
{
if (!productMap[sku]) return;
const qty = Math.max(1, parseInt(qtyVal) || 1);
setItems(prev => {
const ex = prev.find(i => i.sku === sku);
if (ex) return prev.map(i => i.sku===sku ? {...i, qty:i.qty+qty} : i);
return [...prev, { sku, qty }];
});
}}/>
{/* Items list */}
{items.length > 0 ? (
รายการที่จะพิมพ์
{items.map(item => {
const p = productMap[item.sku];
return (
{item.sku}
{p?.name || "—"}
{p?.price && sessionStorage.getItem("dmj_role") === "owner" ? `${p.price} ฿` : ""}
updateQty(item.sku, parseInt(e.target.value) || 1)}
style={{width:70,padding:"4px 8px",borderRadius:6,border:"1.5px solid var(--bdr)",
fontFamily:"inherit",fontSize:12,textAlign:"center"}}/>
ใบ
);
})}
รวม {totalQty} ใบ
{printMode === "a4" && <>
= {pages.length} หน้า A4
{totalQty % 70 !== 0 && pages.length > 0 && (
(หน้าสุดท้ายมี {totalQty - (pages.length-1)*70} ใบ)
)}
}
) : (
🏷️
ยังไม่มีสินค้า
ค้นหาสินค้าหรือพิมพ์ SKU ด้านบน แล้วกด Enter หรือ "+ เพิ่ม"
)}
{labelList.length > 0 && (
💡 ตัวอย่างด้านล่างคือ preview · กด 🖨️ พิมพ์ เพื่อส่งไปปริ้นเตอร์
)}
{/* ── Preview area — switches by printMode ── */}
{printMode === "a4" ? (
/* A4 pages (visible on print too) */
pages.map((page, pi) => (
{page.map((p, i) => (
{p.name}
{p.price != null && p.price > 0 ? `${p.price} ฿` : ""}
{qrMap[p.sku]
?
:
QR
}
setLogoSrc(LOGO_FALLBACK_SVG)}/>
{p.sku}
))}
))
) : (
/* Sticker preview — actual 50×25mm proportions (2:1), scaled up 3× for readability */
{labelList.map((p, i) => (
{/* Row 1: name + price */}
{p.name}
{p.price != null && p.price > 0 && (
{p.price} ฿
)}
{/* Row 2: QR center + logo corner */}
{qrMap[p.sku]
?
:
QR
}
e.currentTarget.style.display="none"}/>
{/* Row 3: SKU */}
{p.sku}
))}
)}
🧮 {name || ''}
{expr || ''}
10 ? 22 : display.length > 7 ? 30 : display.length > 4 ? 38 : 44,
fontWeight:800,color:'#f8fafc',
fontFamily:'monospace',lineHeight:1,
width:'100%',textAlign:'right',
overflow:'hidden',whiteSpace:'nowrap',textOverflow:'ellipsis'}}>
{display}
{preview !== null && preview !== parseFloat(display) && (
{'= '+preview}
)}
{BTNS.map(function(btn){
return (
);
})}
);
}
Object.assign(window, { OverviewView, CategoryView, TrendsView, StockView, StorageView, StockCountView, TransferView, UploadView, ConnectView, LabelPrintView, ProductCard, OrderListView, OrderSummaryView, ConfirmModal, Toast, useToast, SkeletonCard, FrontStoreView, CalcPadModal });
Object.assign(window, { OverviewView, CategoryView, TrendsView, StockView, StorageView, StockCountView, TransferView, UploadView, ConnectView, LabelPrintView, ProductCard, OrderListView, OrderSummaryView, ConfirmModal, Toast, useToast, SkeletonCard, FrontStoreView, CalcPadModal });