/* ============ Scan / Upload + OCR review ============ */
// แปลงข้อความที่ OCR อ่านได้ → เดาฟิลด์ (เลขภาษี/ยอดเงิน/ชื่อร้าน) ผู้ใช้ตรวจ/แก้ได้
function parseReceipt(text) {
const out = {};
if (!text) return out;
const clean = text.replace(/[ \t]+/g, ' ');
// เลขผู้เสียภาษี 13 หลัก (อาจมีเว้นวรรค/ขีด)
const taxM = clean.replace(/[ \-.]/g, '').match(/\d{13}/);
if (taxM) out.vendorTax = taxM[0];
// ยอดเงิน (มีจุดทศนิยม 2 ตำแหน่ง)
const nums = (clean.match(/\d{1,3}(?:,\d{3})*\.\d{2}|\d+\.\d{2}/g) || [])
.map((s) => parseFloat(s.replace(/,/g, ''))).filter((n) => n > 0);
if (nums.length) {
const total = Math.max(...nums);
out.total = total.toFixed(2);
const vatGuess = total * 7 / 107;
const vat = nums.find((n) => Math.abs(n - vatGuess) < Math.max(1, vatGuess * 0.06));
if (vat) { out.vat = vat.toFixed(2); out.pre = (total - vat).toFixed(2); }
else { out.pre = total.toFixed(2); out.vat = '0.00'; }
}
// ชื่อร้าน: บรรทัดแรกๆ ที่เป็นตัวอักษร (ไม่ขึ้นต้นด้วยตัวเลข)
const lines = text.split('\n').map((l) => l.replace(/^[#>*\-\s|]+/, '').replace(/\|/g, ' ').trim()).filter(Boolean);
const vline = lines.find((l) => l.length >= 4 && !/^\d/.test(l) && /[ก-๙A-Za-z]/.test(l) && !/ใบ(กำกับ|เสร็จ|เสนอ|ส่งของ)|tax\s*invoice|receipt/i.test(l));
if (vline) out.vendor = vline.slice(0, 80);
return out;
}
// โหลด pdf.js worker เป็น blob (same-origin) — กัน worker cross-origin ค้าง
let _pdfWorkerSrc = null;
async function ensurePdfWorker() {
const WURL = 'https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js';
if (!_pdfWorkerSrc) {
try { const resp = await fetch(WURL); _pdfWorkerSrc = URL.createObjectURL(await resp.blob()); }
catch (e) { _pdfWorkerSrc = WURL; }
}
pdfjsLib.GlobalWorkerOptions.workerSrc = _pdfWorkerSrc;
}
// แปลงหน้าแรกของ PDF → รูป (data URL) เพื่อส่งให้ OCR — มี timeout กันค้าง
async function pdfFirstPageDataUrl(url) {
try {
if (!window.pdfjsLib) return null;
await ensurePdfWorker();
const render = (async () => {
const pdf = await pdfjsLib.getDocument(url).promise;
const page = await pdf.getPage(1);
const base = page.getViewport({ scale: 1 });
const scale = Math.min(2, 1300 / base.width);
const viewport = page.getViewport({ scale });
const c = document.createElement('canvas');
c.width = Math.round(viewport.width); c.height = Math.round(viewport.height);
await page.render({ canvasContext: c.getContext('2d'), viewport }).promise;
return c.toDataURL('image/jpeg', 0.9);
})();
const timeout = new Promise((res) => setTimeout(() => res(null), 15000));
return await Promise.race([render, timeout]);
} catch (e) { return null; }
}
// โหลดรูปแล้วย่อขนาด → data URL (jpeg) สำหรับส่งให้ OCR ฝั่งเซิร์ฟเวอร์
function imgToDataUrl(url, maxW) {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => {
const scale = Math.min(1, (maxW || 1600) / img.width);
const w = Math.round(img.width * scale), h = Math.round(img.height * scale);
const c = document.createElement('canvas'); c.width = w; c.height = h;
c.getContext('2d').drawImage(img, 0, 0, w, h);
try { resolve(c.toDataURL('image/jpeg', 0.85)); } catch (e) { resolve(null); }
};
img.onerror = () => resolve(null);
img.src = url;
});
}
function ScanPage({ role, onNav, toast, period }) {
const readOnly = role === 'viewer';
const [step, setStep] = useState('upload'); // upload | processing | review
const [progress, setProgress] = useState(0);
const [drafts, setDrafts] = useState([]); // one editable draft per uploaded file
const [selIdx, setSelIdx] = useState(0);
const [saving, setSaving] = useState(false);
const [vSug, setVSug] = useState(false); // vendor autocomplete dropdown
const [ocrMsg, setOcrMsg] = useState('');
const fileRef = useRef(null);
const conf = { docDate: 0.98, docNo: 0.94, vendor: 0.88, vendorTax: 0.99, pre: 0.96, vat: 0.91, total: 0.99 };
const today = new Date().toISOString().slice(0, 10);
// วันที่ตั้งต้นของเอกสาร = ตามเดือนที่กำลังดูอยู่ (กันเอกสารไปโผล่ผิดเดือน)
const p = period || CURRENT_PERIOD;
const isCurrentP = p.m === CURRENT_PERIOD.m && p.y === CURRENT_PERIOD.y;
const defaultISO = (p.y - 543) + '-' + String(p.m + 1).padStart(2, '0') + '-' + String(isCurrentP ? new Date().getDate() : 1).padStart(2, '0');
const makeDraft = (file, i) => ({
fileName: file ? file.name : 'เอกสาร ' + (i + 1),
sizeKB: file ? Math.round(file.size / 1024) : 0,
url: file ? URL.createObjectURL(file) : null,
isImage: !!(file && file.type && file.type.startsWith('image/')),
type: 'full', docDate: defaultISO, docNo: file ? file.name.replace(/\.[^.]+$/, '') : '',
vendor: '', vendorTax: '', branch: 'สำนักงานใหญ่', cat: 'material',
pre: '', vat: '', total: '', creditable: true, deductible: true, note: '',
});
// ค้นหาร้านค้าจากที่เคยบันทึก (ช่วยกรอกชื่อ + แก้เองได้)
const vendorBook = React.useMemo(() => {
const m = new Map();
(D.docs || []).forEach((x) => { if (x.vendor && !m.has(x.vendor)) m.set(x.vendor, { vendor: x.vendor, vendorTax: x.vendorTax, cat: x.cat, type: x.type }); });
return [...m.values()];
}, []);
const pickVendor = (c) => { setDrafts((ds) => ds.map((dd, i) => i === selIdx ? { ...dd, vendor: c.vendor, vendorTax: c.vendorTax && c.vendorTax !== '—' ? c.vendorTax : dd.vendorTax, cat: c.cat || dd.cat, type: c.type || dd.type } : dd)); setVSug(false); };
const runOcr = async (list) => {
const total = list.length;
let serverOn = true; // Typhoon พร้อมใช้ไหม
let usedTyphoon = false;
let completed = 0;
setOcrMsg('กำลังอ่าน… (0/' + total + ')');
const processOne = async (i) => {
const dr = list[i];
if (dr.url) {
// แปลงเป็นรูป data URL (PDF → render หน้าแรก, รูป → ย่อขนาด)
let imgUrl = dr.isImage ? await imgToDataUrl(dr.url, 1300) : await pdfFirstPageDataUrl(dr.url);
if (imgUrl) setDrafts((ds) => ds.map((x, idx) => (idx === i ? { ...x, imgData: imgUrl, previewImg: x.isImage ? x.previewImg : imgUrl } : x)));
let parsed = null;
if (imgUrl) {
if (serverOn) {
try {
const res = await API.ocr(imgUrl);
if (res.ok && res.data.ok && res.data.text) { parsed = parseReceipt(res.data.text); usedTyphoon = true; }
else if (res.data && res.data.code === 'noconfig') { serverOn = false; }
} catch (e) {}
}
// Tesseract สำรอง (เฉพาะตอน Typhoon ใช้ไม่ได้ — ช้ากว่า)
if (!parsed && !serverOn && window.Tesseract) {
try { const { data } = await Tesseract.recognize(imgUrl, 'tha+eng'); parsed = parseReceipt(data.text); } catch (e) {}
}
}
if (parsed) setDrafts((ds) => ds.map((x, idx) => (idx === i ? { ...x, ...parsed } : x)));
}
completed++; setProgress(Math.round((completed / total) * 100)); setOcrMsg('กำลังอ่าน… (' + completed + '/' + total + ')');
};
// อ่านพร้อมกันทีละ 3 ใบ (เร็วขึ้นมากเวลามีหลายไฟล์)
const CONC = 3;
let next = 0;
const lanes = Array.from({ length: Math.min(CONC, total) }, async () => {
while (next < total) { const my = next++; await processOne(my); }
});
await Promise.all(lanes);
setOcrMsg(''); setStep('review');
if (usedTyphoon) toast('อ่านด้วย Typhoon OCR เรียบร้อย');
};
const onFiles = (fileList) => {
const arr = Array.from(fileList || []);
if (!arr.length) return;
const list = arr.map(makeDraft);
setDrafts(list); setSelIdx(0);
setStep('processing'); setProgress(0);
runOcr(list);
};
const setDraft = (k, v) => setDrafts((ds) => ds.map((d, i) => (i === selIdx ? { ...d, [k]: v } : d)));
const recalcVat = (pre) => { const v = (parseFloat(pre || 0) * (D.company.vatRate / 100)); setDrafts((ds) => ds.map((d, i) => i === selIdx ? { ...d, pre, vat: v.toFixed(2), total: (parseFloat(pre || 0) + v).toFixed(2) } : d)); };
const recalcTotal = (vat) => setDrafts((ds) => ds.map((d, i) => i === selIdx ? { ...d, vat, total: (parseFloat(d.pre || 0) + parseFloat(vat || 0)).toFixed(2) } : d));
const removeDraft = (idx) => { setDrafts((ds) => ds.filter((_, i) => i !== idx)); setSelIdx((s) => (idx <= s && s > 0 ? s - 1 : s)); };
const draftReady = (d) => d.vendor.trim() && parseFloat(d.pre) > 0;
const readyCount = drafts.filter(draftReady).length;
const thDate = (iso) => { const dt = new Date(iso); return isNaN(dt) ? '' : dt.getDate() + ' ' + D.thMonthsShort[dt.getMonth()] + ' ' + String((dt.getFullYear() + 543) % 100).padStart(2, '0'); };
const saveAll = async () => {
const ready = drafts.filter(draftReady);
if (!ready.length) { toast('กรอกชื่อร้านค้าและยอดก่อน VAT อย่างน้อย 1 ใบก่อนบันทึก', 'warn'); return; }
setSaving(true);
let ok = 0;
for (const d of ready) {
const pre = +d.pre || 0, vat = +d.vat || 0;
const rec = { docNo: d.docNo.trim() || '—', docDateISO: d.docDate, docDate: thDate(d.docDate), uploadDate: thDate(today), vendor: d.vendor.trim(), vendorTax: d.vendorTax.trim() || '—', branch: d.branch.trim(), cat: d.cat, type: d.type, pre, vat, total: +d.total || (pre + vat), creditable: d.creditable, deductible: d.deductible, status: 'pending', note: d.note.trim(), file: !!d.imgData, fileData: d.imgData || null };
const res = await API.addDoc(rec);
if (res.ok && res.data.ok) { D.docs.push(res.data.record || rec); ok++; }
}
setSaving(false);
toast('บันทึกเข้าทะเบียน ' + ok + ' ใบเรียบร้อย');
onNav('docs');
};
const d = drafts[selIdx] || makeDraft(null, 0);
if (readOnly) return ;
return (
<>
สแกน / อัปโหลดเอกสาร
อัปโหลดใบกำกับภาษี ระบบจะอ่านข้อมูลให้อัตโนมัติ — ตรวจและแก้ไขก่อนบันทึก
{/* step indicator */}
{[['upload', 'อัปโหลด', 'upload'], ['processing', 'อ่านข้อมูล (OCR)', 'scan'], ['review', 'ตรวจ & บันทึก', 'checkCircle']].map(([id, lbl, ic], i) => {
const order = ['upload', 'processing', 'review'];
const cur = order.indexOf(step), mine = order.indexOf(id);
const state = mine < cur ? 'done' : mine === cur ? 'active' : 'todo';
return (
{state === 'done' ? : }
{lbl}
{i < 2 && }
);
})}
onFiles(e.target.files)} />
อ่านบิลด้วย OCR ภาษาไทยในเครื่องคุณเอง (ฟรี ไม่ต้องตั้งค่า) — เลือกรูปบิล/ใบเสร็จ (JPG/PNG) หรือไฟล์ PDF ระบบจะอ่าน เลขผู้เสียภาษี · ยอดเงิน · VAT · ชื่อร้าน มาให้ แล้วตรวจ/แก้ก่อนบันทึก · ครั้งแรกอาจช้าสักครู่
)}
{step === 'processing' && (
กำลังอ่านข้อมูลจากเอกสาร…
{ocrMsg || 'ตรวจจับเลขผู้เสียภาษี · ยอดเงิน · VAT · ชื่อร้าน'}
)}
{step === 'review' && (
<>
{/* file strip — เลือกตรวจทีละใบ (อ่านหลายไฟล์พร้อมกัน) */}
{drafts.length > 1 && (
ไฟล์ที่อ่าน {drafts.length} ใบ
กดเลือกแต่ละใบเพื่อตรวจ/แก้
กรอกครบ {readyCount}/{drafts.length}
{drafts.map((dr, i) => (
))}
)}
{/* receipt preview */}
ต้นฉบับเอกสาร{drafts.length > 1 ? ` (${selIdx + 1}/${drafts.length})` : ''}
อ่านสำเร็จ
{(d.isImage && d.url) || d.previewImg ? (
) : (
<>
{d.fileName}
{d.url ? 'กด “ดูเต็มจอ” เพื่อเปิดไฟล์' : ''}
)}
{d.fileName} · {d.sizeKB} KB
{/* extracted form (bound to selected draft) */}
ข้อมูลที่อ่านได้
ตรวจสอบและแก้ไขให้ถูกต้องก่อนบันทึก{drafts.length > 1 ? ' · ใบที่ ' + (selIdx + 1) : ''}
setDraft('docDate', v)} />
setDraft('docNo', e.target.value)} />
setVSug(true)} onChange={(e) => { setDraft('vendor', e.target.value); setVSug(true); }} onBlur={() => setTimeout(() => setVSug(false), 160)} placeholder="กรอกชื่อร้าน หรือพิมพ์เพื่อค้นหา (จำเป็น)" />
{vSug && (() => {
const q = (d.vendor || '').trim().toLowerCase();
const list = (q ? vendorBook.filter((c) => c.vendor.toLowerCase().includes(q) || (c.vendorTax || '').toLowerCase().includes(q)) : vendorBook).slice(0, 6);
return list.length > 0 ? (
ร้านค้าที่เคยบันทึก — กดเพื่อเติม
{list.map((c, i) => (
))}
) : null;
})()}
setDraft('vendorTax', e.target.value)} />
setDraft('branch', e.target.value)} />
recalcVat(e.target.value)} placeholder="0.00" />
recalcTotal(e.target.value)} placeholder="0.00" />
setDraft('total', e.target.value)} style={{ fontWeight: 700 }} placeholder="0.00" />
setDraft('creditable', !d.creditable)} label="ใช้เป็น VAT ซื้อ (เครดิตได้)" />
setDraft('deductible', !d.deductible)} label="หักเป็นค่าใช้จ่ายได้" />
{!d.creditable &&
ไม่ใช่ใบกำกับภาษีเต็มรูป — บันทึกเป็นค่าใช้จ่ายได้ แต่จะไม่นำ VAT ไปเครดิต
}
{drafts.length > 1 && (
)}
{children}
);
}
function ConfBadge({ c }) {
const pct = Math.round(c * 100);
const tone = c >= 0.95 ? 'ok' : c >= 0.88 ? 'warn' : 'danger';
return {pct}%;
}
function Toggle({ on, onClick, label }) {
return (
);
}
window.ScanPage = ScanPage;
window.Field = Field; window.Toggle = Toggle; window.ConfBadge = ConfBadge;
/* ============ Document register table ============ */
function DocsPage({ role, onNav, toast, pShort, period, setPeriod }) {
const canEdit = role === 'owner' || role === 'staff' || role === 'accountant';
const canDelete = role === 'owner';
const [, setVer] = useState(0);
const refresh = () => setVer((v) => v + 1);
const [q, setQ] = useState('');
const [catF, setCatF] = useState('all');
const [statusF, setStatusF] = useState('all');
const [sel, setSel] = useState([]);
const [detail, setDetail] = useState(null);
const [newDoc, setNewDoc] = useState(null); // manual-entry (กรอกเอง) blank doc
const [delDoc, setDelDoc] = useState(null); // single-row delete confirm
const [bulkDel, setBulkDel] = useState(false); // bulk delete confirm
const isCurrent = period.m === CURRENT_PERIOD.m && period.y === CURRENT_PERIOD.y;
const defaultISO = (period.y - 543) + '-' + String(period.m + 1).padStart(2, '0') + '-' + String(isCurrent ? new Date().getDate() : 1).padStart(2, '0');
const blankDoc = () => ({ id: '', docNo: '', docDateISO: defaultISO, docDate: '', uploadDate: '', vendor: '', vendorTax: '', branch: 'สำนักงานใหญ่', cat: 'material', type: 'full', pre: 0, vat: 0, total: 0, creditable: true, deductible: true, status: 'pending', note: '', file: false });
const removeLocal = (id) => { const i = D.docs.findIndex((x) => x.id === id); if (i >= 0) D.docs.splice(i, 1); };
const doDeleteOne = async () => {
const res = await API.deleteDoc(delDoc.id);
if (res.ok && res.data.ok) { removeLocal(delDoc.id); setSel((s) => s.filter((x) => x !== delDoc.id)); toast('ลบเอกสารแล้ว'); refresh(); }
else toast('ลบไม่สำเร็จ', 'warn');
setDelDoc(null);
};
const doDeleteBulk = async () => {
const ids = [...sel];
const results = await Promise.all(ids.map((id) => API.deleteDoc(id)));
let okCount = 0;
results.forEach((res, i) => { if (res.ok && res.data.ok) { removeLocal(ids[i]); okCount++; } });
toast('ลบ ' + okCount + ' รายการแล้ว');
setSel([]); setBulkDel(false); refresh();
};
const markSent = async () => {
const ids = [...sel];
await Promise.all(ids.map((id) => {
const d = D.docs.find((x) => x.id === id);
return d ? API.updateDoc({ ...d, status: 'sent' }) : Promise.resolve();
}));
ids.forEach((id) => { const d = D.docs.find((x) => x.id === id); if (d) d.status = 'sent'; });
toast('ทำเครื่องหมาย "ส่งบัญชีแล้ว" ' + ids.length + ' รายการ');
setSel([]); refresh();
};
const applyEdit = (saved) => { const i = D.docs.findIndex((x) => x.id === saved.id); if (i >= 0) D.docs[i] = saved; refresh(); };
const applyAdd = (saved) => { D.docs.push(saved); refresh(); };
let rows = D.docs.filter((d) => d.status !== 'deleted' && inPeriod(d.docDateISO, period));
if (q) rows = rows.filter((d) => (d.vendor + d.docNo + d.vendorTax).toLowerCase().includes(q.toLowerCase()));
if (catF !== 'all') rows = rows.filter((d) => d.cat === catF);
if (statusF !== 'all') rows = rows.filter((d) => d.status === statusF);
const totals = rows.reduce((a, d) => ({ pre: a.pre + d.pre, vat: a.vat + d.vat, total: a.total + d.total }), { pre: 0, vat: 0, total: 0 });
const toggle = (id) => setSel((s) => s.includes(id) ? s.filter((x) => x !== id) : [...s, id]);
const allSel = rows.length > 0 && sel.length === rows.length;
return (
<>
ทะเบียนเอกสาร
เอกสารรายจ่าย/ใบกำกับภาษีซื้อทั้งหมด · รอบ {pShort}
{canEdit &&
}
{/* filters */}
{sel.length > 0 && (
เลือก {sel.length} รายการ
{canDelete &&
}
)}
{rows.length === 0 && (() => {
const allDocs = D.docs.filter((x) => x.status !== 'deleted');
const inThisPeriod = allDocs.some((x) => inPeriod(x.docDateISO, period));
if (allDocs.length > 0 && !inThisPeriod) {
const latest = allDocs.slice().sort((a, b) => (b.docDateISO || '').localeCompare(a.docDateISO || ''))[0];
const ld = latest && latest.docDateISO ? new Date(latest.docDateISO) : null;
const target = ld && !isNaN(ld) ? { m: ld.getMonth(), y: ld.getFullYear() + 543 } : null;
return
{ setQ(''); setCatF('all'); setStatusF('all'); setPeriod(target); }}>ไปเดือนที่มีเอกสาร ({D.thMonthsShort[target.m]} {target.y}) : null} />;
}
return ;
})()}
{detail && setDetail(null)} canEdit={canEdit} canDelete={canDelete} toast={toast}
onSaved={applyEdit} onAskDelete={(d) => { setDetail(null); setDelDoc(d); }} />}
{newDoc && setNewDoc(null)} onSaved={(saved) => { applyAdd(saved); setNewDoc(null); }} onAskDelete={() => {}} />}
{delDoc && (
setDelDoc(null)}
footer={<>}>
ต้องการลบเอกสาร
{delDoc.docNo} · {delDoc.vendor} ยอด
{D.baht(delDoc.total)} ใช่หรือไม่?
การลบจะมีผลทันที และทำให้ยอดสรุปภาษีซื้อ/ภ.พ.30 ของเดือนนี้เปลี่ยนตาม
ต้องการลบเอกสารที่เลือกไว้ {sel.length} รายการ ใช่หรือไม่? การลบจะมีผลทันที
)}
);
}
function DocDetail({ doc, onClose, canEdit, canDelete, toast, onSaved, onAskDelete, isNew }) {
const [f, setF] = useState({
docNo: doc.docNo || '', vendor: doc.vendor, vendorTax: doc.vendorTax, branch: doc.branch || 'สำนักงานใหญ่',
dateISO: doc.docDateISO || '', type: doc.type, cat: doc.cat,
pre: doc.pre ? String(doc.pre) : '', vat: doc.vat ? String(doc.vat) : '', total: doc.total ? String(doc.total) : '',
creditable: doc.creditable, deductible: doc.deductible, status: doc.status, note: doc.note || '',
});
const [saving, setSaving] = useState(false);
const [vSug, setVSug] = useState(false);
const [docImg, setDocImg] = useState(null);
const [imgLoading, setImgLoading] = useState(false);
useEffect(() => {
if (!isNew && doc.file && doc.id) {
setImgLoading(true);
API.getFile(doc.id).then((res) => { if (res.ok && res.data.ok && res.data.data) setDocImg(res.data.data); }).finally(() => setImgLoading(false));
}
}, []);
const openImg = (u) => { fetch(u).then((r) => r.blob()).then((b) => window.open(URL.createObjectURL(b), '_blank')).catch(() => {}); };
const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
// VAT auto-calc from ก่อน VAT × อัตรา (กรอกเองสะดวก — อ่านใบเสร็จไม่ออก)
const recalc = (pre, vat) => set('total', (parseFloat(pre || 0) + parseFloat(vat || 0)).toFixed(2));
const calcVat = (pre) => { const v = (parseFloat(pre || 0) * (D.company.vatRate / 100)); set('vat', v.toFixed(2)); set('total', (parseFloat(pre || 0) + v).toFixed(2)); };
const thDate = (iso) => { const d = new Date(iso); if (isNaN(d)) return doc.docDate || ''; return d.getDate() + ' ' + D.thMonthsShort[d.getMonth()] + ' ' + String((d.getFullYear() + 543) % 100).padStart(2, '0'); };
// vendor autocomplete (จากร้านค้าที่เคยบันทึก)
const vendorBook = React.useMemo(() => {
const m = new Map();
(D.docs || []).forEach((x) => { if (x.vendor && !m.has(x.vendor)) m.set(x.vendor, { vendor: x.vendor, vendorTax: x.vendorTax, cat: x.cat, type: x.type }); });
return [...m.values()];
}, []);
const vq = f.vendor.trim().toLowerCase();
const vSuggestions = (vq ? vendorBook.filter((c) => c.vendor.toLowerCase().includes(vq) || (c.vendorTax || '').toLowerCase().includes(vq)) : vendorBook).slice(0, 6);
const pickVendor = (c) => { setF((p) => ({ ...p, vendor: c.vendor, vendorTax: c.vendorTax && c.vendorTax !== '—' ? c.vendorTax : '', cat: c.cat || p.cat, type: c.type || p.type })); setVSug(false); };
const save = async () => {
if (!f.vendor.trim()) { toast('กรุณากรอกชื่อร้านค้า/ผู้ขาย', 'warn'); return; }
if (!(parseFloat(f.pre) > 0)) { toast('กรุณากรอกยอดก่อน VAT', 'warn'); return; }
setSaving(true);
const rec = {
id: doc.id, docNo: f.docNo.trim() || '—', uploadDate: doc.uploadDate || thDate(f.dateISO), file: doc.file,
docDateISO: f.dateISO, docDate: thDate(f.dateISO),
vendor: f.vendor.trim(), vendorTax: f.vendorTax.trim() || '—', branch: f.branch.trim(),
type: f.type, cat: f.cat, pre: +f.pre || 0, vat: +f.vat || 0, total: +f.total || 0,
creditable: f.creditable, deductible: f.deductible, status: f.status, note: f.note.trim(),
};
const res = isNew ? await API.addDoc(rec) : await API.updateDoc(rec);
setSaving(false);
if (res.ok && res.data.ok) { onSaved(res.data.record || rec); toast(isNew ? 'เพิ่มเอกสารแล้ว' : 'บันทึกการแก้ไขแล้ว'); onClose(); }
else toast((res.data && (res.data.msg || res.data.error)) || 'บันทึกไม่สำเร็จ', 'warn');
};
return (
{canDelete && }
{canEdit && }
}>
{docImg
?
openImg(docImg)} />
: imgLoading ?
กำลังโหลดรูป…
:
}
{docImg ? (
<>
ดาวน์โหลด
) : isNew
?
กรอกเอง — แนบไฟล์ภายหลังได้ที่หน้าสแกน
: !imgLoading &&
ไม่มีไฟล์แนบ
}
{!isNew &&
อัปโหลด {doc.uploadDate}
}
{canEdit ? (
setVSug(true)} onChange={(e) => { set('vendor', e.target.value); setVSug(true); }} onBlur={() => setTimeout(() => setVSug(false), 160)} placeholder="พิมพ์ชื่อเพื่อค้นหาร้านที่เคยบันทึก" />
{vSug && vSuggestions.length > 0 && (
ร้านค้าที่เคยบันทึก — กดเพื่อเติม
{vSuggestions.map((c, i) => (
))}
)}
set('docNo', e.target.value)} placeholder="เลขใบกำกับ" />
set('vendorTax', e.target.value)} placeholder="13 หลัก" />
set('dateISO', v)} />
{ set('pre', e.target.value); calcVat(e.target.value); }} placeholder="0.00" />
{ set('vat', e.target.value); recalc(f.pre, e.target.value); }} placeholder="0.00" />
set('total', e.target.value)} style={{ fontWeight: 700 }} />
set('creditable', !f.creditable)} label="ใช้เป็น VAT ซื้อ (เครดิตได้)" />
set('deductible', !f.deductible)} label="หักเป็นค่าใช้จ่ายได้" />
) : (
{D.docTypes[doc.type]}
{doc.creditable && เครดิต VAT ได้}
{[['ร้านค้า', doc.vendor], ['เลขผู้เสียภาษี', doc.vendorTax], ['สาขา', doc.branch], ['วันที่เอกสาร', doc.docDate], ['หมวดรายจ่าย', D.catLabel(doc.cat)]].map(([k, v]) => (
{k}{v}
))}
{[['ยอดก่อน VAT', doc.pre], ['VAT ' + D.company.vatRate + '%', doc.vat], ['ยอดรวมสุทธิ', doc.total]].map(([k, v], i) => (
{k}{D.baht(v)}
))}
{doc.note &&
หมายเหตุ: {doc.note}
}
)}
);
}
window.DocsPage = DocsPage;