// BOQ & Quotation — New full-featured editor with drafts, cover pages, Excel I/O, contract conversion function BOQPage({ lang }) { const [view, setView] = useState("list"); // list | editor | preview | drive const [drafts, setDrafts] = useState([]); const [currentDraft, setCurrentDraft] = useState(null); // BOQ being edited or previewed const [loading, setLoading] = useState(false); const toast = useToast(); // ── Load drafts list from DB ──────────────────────────────── const reloadDrafts = useCallback(async () => { if (!window.electron?.boqDraftList) return; setLoading(true); try { const list = await window.electron.boqDraftList(); setDrafts(list || []); } finally { setLoading(false); } }, []); useEffect(() => { reloadDrafts(); }, [reloadDrafts]); // ── Editor actions ────────────────────────────────────────── const openEditor = (draft = null) => { setCurrentDraft(draft || emptyDraft()); setView("editor"); }; const openPreview = async (id) => { if (!window.electron?.boqDraftGet) return; const d = await window.electron.boqDraftGet(id); if (d) { d.data = d.data_json ? JSON.parse(d.data_json) : { groups: [] }; setCurrentDraft(d); setView("preview"); } }; const editDraft = async (id) => { const d = await window.electron.boqDraftGet(id); if (d) { d.data = d.data_json ? JSON.parse(d.data_json) : { groups: [] }; setCurrentDraft(d); setView("editor"); } }; const duplicateDraft = async (id) => { const r = await window.electron.boqDraftDuplicate(id); if (r.success) { toast(lang === "th" ? "ทำสำเนาแล้ว" : "Duplicated", "success"); reloadDrafts(); } else toast((lang === "th" ? "ผิดพลาด: " : "Error: ") + r.error, "danger"); }; const deleteDraft = async (id) => { if (!confirm(lang === "th" ? "ยืนยันลบ BOQ นี้?" : "Delete this BOQ?")) return; const r = await window.electron.boqDraftDelete(id); if (r.success) { toast(lang === "th" ? "ลบแล้ว" : "Deleted", "success"); reloadDrafts(); } }; const convertToContract = async (id) => { if (!confirm(lang === "th" ? "สร้างสัญญาจาก BOQ นี้?" : "Create contract from this BOQ?")) return; const r = await window.electron.boqDraftToContract(id); if (r.success) { // Refresh in-memory CONTRACTS array so contracts page sees the new contract if (window.loadRealData) await window.loadRealData(); if (window.__triggerReload) window.__triggerReload(); toast(lang === "th" ? `สร้างสัญญาสำเร็จ (ID: ${r.contractId}) — ไปดูที่ Tab สัญญา` : `Contract created (ID: ${r.contractId}) — see Contracts tab`, "success"); reloadDrafts(); } else toast((lang === "th" ? "ผิดพลาด: " : "Error: ") + r.error, "danger"); }; const exportExcel = async (id) => { const r = await window.electron.boqExportFilled(id); if (r.success) toast(lang === "th" ? `บันทึกที่: ${r.filePath}` : `Saved: ${r.filePath}`, "success"); else if (!r.canceled) toast((lang === "th" ? "ผิดพลาด: " : "Error: ") + r.error, "danger"); }; const downloadTemplate = async () => { const r = await window.electron.boqExportTemplate({}); if (r.success) toast(lang === "th" ? `ดาวน์โหลด Template แล้ว: ${r.filePath}` : `Template saved: ${r.filePath}`, "success"); else if (!r.canceled) toast((lang === "th" ? "ผิดพลาด: " : "Error: ") + r.error, "danger"); }; const importExcel = async () => { const r = await window.electron.boqImportExcel(); if (r.success) { const draft = { ...emptyDraft(), ...r.data, name: r.fileName?.replace(/\.xlsx?$/i, '') || 'Imported BOQ', source: 'excel', data: { groups: r.data.groups || [] }, }; setCurrentDraft(draft); setView("editor"); toast(lang === "th" ? "นำเข้าจาก Excel สำเร็จ - ตรวจสอบและบันทึก" : "Imported - review and save", "success"); } else if (!r.canceled) toast((lang === "th" ? "ผิดพลาด: " : "Error: ") + r.error, "danger"); }; return (
} /> {/* Tab bar */}
{[ { id: "list", th: `รายการ (${drafts.length})`, en: `List (${drafts.length})` }, { id: "editor", th: "ตัวแก้ไข", en: "Editor", hidden: !currentDraft && view !== "editor" }, { id: "preview", th: "พรีวิว", en: "Preview", hidden: !currentDraft || view !== "preview" }, { id: "drive", th: "Drive ย้อนหลัง", en: "Drive history" }, ].filter(t => !t.hidden).map((t) => ( ))}
{view === "list" && ( openEditor()} /> )} {view === "editor" && currentDraft && ( { reloadDrafts(); }} onClose={() => { setView("list"); reloadDrafts(); }} onPreview={(d) => { setCurrentDraft(d); setView("preview"); }} onConvertContract={(id) => convertToContract(id)} onExportExcel={(id) => exportExcel(id)} /> )} {view === "preview" && currentDraft && ( setView("editor")} onClose={() => setView("list")} /> )} {view === "drive" && }
); } // ─────────────────────────────────────────────────────────────── // LIST // ─────────────────────────────────────────────────────────────── function BOQList({ drafts, loading, lang, onEdit, onPreview, onDuplicate, onDelete, onConvert, onExport, onNew }) { const [filter, setFilter] = useState("all"); // all | draft | finalized | converted const [search, setSearch] = useState(""); const filtered = drafts.filter(d => { if (filter === "draft" && d.status !== "draft") return false; if (filter === "finalized" && d.status !== "finalized") return false; if (filter === "converted" && d.status !== "converted_to_contract") return false; if (search) { const s = search.toLowerCase(); if (!(d.name || '').toLowerCase().includes(s) && !(d.boq_number || '').toLowerCase().includes(s) && !(d.project_name || '').toLowerCase().includes(s) && !(d.client_name || '').toLowerCase().includes(s)) return false; } return true; }); if (loading) return
Loading…
; return (
{/* Filter bar */}
setSearch(e.target.value)} style={{ paddingLeft: 36, height: 36 }} />
{[ { id: "all", th: "ทั้งหมด", en: "All" }, { id: "draft", th: "ฉบับร่าง", en: "Draft" }, { id: "finalized", th: "เสร็จสมบูรณ์", en: "Finalized" }, { id: "converted", th: "แปลงเป็นสัญญา", en: "Converted" }, ].map(f => ( ))}
{filtered.length === 0 ? (
{lang === "th" ? "ยังไม่มี BOQ" : "No BOQs yet"}
) : (
{filtered.map(d => ( onPreview(d.id)} style={{ cursor: "pointer" }}> ))}
{lang === "th" ? "ชื่อ BOQ" : "Name"} {lang === "th" ? "เลขที่" : "Number"} {lang === "th" ? "โครงการ" : "Project"} {lang === "th" ? "ลูกค้า" : "Client"} {lang === "th" ? "ยอดรวม" : "Total"} {lang === "th" ? "สถานะ" : "Status"} {lang === "th" ? "ที่มา" : "Source"} {lang === "th" ? "อัพเดท" : "Updated"}
{d.name || '—'} {d.boq_number || '—'} {d.project_name || '—'} {d.client_name || '—'} {fmtTHB(d.total_thb || 0)} {d.source || 'manual'} {d.updated_at?.split('T')[0] || '—'} e.stopPropagation()}>
)}
); } // ─────────────────────────────────────────────────────────────── // EDITOR — full editor with free-form line items + cover pages // ─────────────────────────────────────────────────────────────── function BOQEditor({ draft, lang, onSaved, onClose, onPreview, onConvertContract, onExportExcel }) { const dirtyRef = useRef(false); const savingRef = useRef(false); // suppress auto-dirty trigger while save() updates state // Helper: ensure every group/item has a stable _id (for React keys) const ensureIds = (groups) => (groups || []).map(g => ({ _id: g._id || `g_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`, name: g.name || '', coverPageEnabled: g.coverPageEnabled || false, coverPageNote: g.coverPageNote || '', items: (g.items || []).map((it, i) => ({ _id: it._id || `it_${Date.now()}_${i}_${Math.random().toString(36).slice(2, 6)}`, ...it, })), })); // Mark dirty whenever d state changes (after first render) const markDirty = useCallback(() => { if (!dirtyRef.current) { dirtyRef.current = true; window.__setDirty?.(true, lang === 'th' ? 'BOQ Editor' : 'BOQ Editor'); } }, [lang]); const markClean = useCallback(() => { dirtyRef.current = false; window.__setDirty?.(false); }, []); // Clear dirty when editor unmounts (e.g., after Save→Close flow) useEffect(() => () => { window.__setDirty?.(false); }, []); const [d, setD] = useState(() => ({ id: draft.id, name: draft.name || '', boq_number: draft.boq_number || autoNumber(), project_id: draft.project_id || null, project_name: draft.project_name || '', client_name: draft.client_name || '', site: draft.site || '', area: draft.area || 0, margin_pct: draft.margin_pct ?? 12, valid_days: draft.valid_days ?? 30, payment_terms: draft.payment_terms || '', notes: draft.notes || '', status: draft.status || 'draft', source: draft.source || 'manual', include_vat: draft.include_vat === false || draft.include_vat === 0 ? false : true, vat_pct: draft.vat_pct ?? 7, retention_pct: draft.retention_pct ?? 5, wht_pct: draft.wht_pct ?? 3, data: { groups: ensureIds(draft.data?.groups) }, })); const toast = useToast(); const [saving, setSaving] = useState(false); const [section, setSection] = useState("info"); // info | items | terms // Auto-save indicator const [lastSavedAt, setLastSavedAt] = useState(null); // Track first render to skip initial "dirty" trigger const firstRender = useRef(true); useEffect(() => { if (firstRender.current) { firstRender.current = false; return; } if (savingRef.current) return; // skip during save — id update isn't user input markDirty(); }, [d, markDirty]); // ── Totals computation ───────────────────────────────────── const totals = useMemo(() => { let subtotal = 0; let totalLab = 0; let totalMat = 0; for (const g of d.data.groups) { for (const it of (g.items || [])) { const qty = +it.qty || 0; const mat = +it.mat || 0; const lab = +it.lab || 0; subtotal += qty * (mat + lab); totalMat += qty * mat; totalLab += qty * lab; } } const margin = subtotal * (d.margin_pct || 0) / 100; const beforeVAT = subtotal + margin; const vatPct = d.vat_pct ?? 7; const vat = d.include_vat ? beforeVAT * vatPct / 100 : 0; const total = beforeVAT + vat; return { subtotal, margin, beforeVAT, vat, total, totalMat, totalLab, vatPct }; }, [d.data, d.margin_pct, d.include_vat, d.vat_pct]); // ── Group/item actions ───────────────────────────────────── const addGroup = useCallback(() => { setD(prev => { const newG = { _id: `g_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`, name: `${prev.data.groups.length + 1}. หมวดงานใหม่`, items: [], coverPageNote: '', coverPageEnabled: false }; return { ...prev, data: { ...prev.data, groups: [...prev.data.groups, newG] } }; }); }, []); const removeGroup = useCallback((gi) => { if (!confirm(lang === "th" ? "ลบหมวดนี้?" : "Delete category?")) return; setD(prev => { const newGroups = [...prev.data.groups]; newGroups.splice(gi, 1); return { ...prev, data: { ...prev.data, groups: newGroups } }; }); }, [lang]); const updateGroup = useCallback((gi, patch) => { setD(prev => { const newGroups = [...prev.data.groups]; newGroups[gi] = { ...newGroups[gi], ...patch }; return { ...prev, data: { ...prev.data, groups: newGroups } }; }); }, []); const moveGroup = useCallback((gi, dir) => { setD(prev => { const newGroups = [...prev.data.groups]; const tgt = gi + dir; if (tgt < 0 || tgt >= newGroups.length) return prev; [newGroups[gi], newGroups[tgt]] = [newGroups[tgt], newGroups[gi]]; return { ...prev, data: { ...prev.data, groups: newGroups } }; }); }, []); const addItem = useCallback((gi) => { setD(prev => { const newGroups = [...prev.data.groups]; const g = { ...newGroups[gi] }; const items = [...(g.items || [])]; const nextNo = `${gi + 1}.${items.length + 1}`; items.push({ _id: `it_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`, no: nextNo, desc: '', qty: '', unit: '', mat: '', lab: '', note: '' }); g.items = items; newGroups[gi] = g; return { ...prev, data: { ...prev.data, groups: newGroups } }; }); }, []); const updateItem = useCallback((gi, ii, patch) => { setD(prev => { const newGroups = [...prev.data.groups]; const g = { ...newGroups[gi] }; const items = [...(g.items || [])]; items[ii] = { ...items[ii], ...patch }; g.items = items; newGroups[gi] = g; return { ...prev, data: { ...prev.data, groups: newGroups } }; }); }, []); const removeItem = useCallback((gi, ii) => { setD(prev => { const newGroups = [...prev.data.groups]; const g = { ...newGroups[gi] }; const items = [...(g.items || [])]; items.splice(ii, 1); g.items = items; newGroups[gi] = g; return { ...prev, data: { ...prev.data, groups: newGroups } }; }); }, []); const moveItem = useCallback((gi, ii, dir) => { setD(prev => { const newGroups = [...prev.data.groups]; const g = { ...newGroups[gi] }; const items = [...(g.items || [])]; const tgt = ii + dir; if (tgt < 0 || tgt >= items.length) return prev; [items[ii], items[tgt]] = [items[tgt], items[ii]]; g.items = items; newGroups[gi] = g; return { ...prev, data: { ...prev.data, groups: newGroups } }; }); }, []); // ── Save (single unified button) ───────────────────────────── // Uses d.status as-is (user controls status via dropdown in Info section) const save = async () => { setSaving(true); savingRef.current = true; // prevent useEffect from marking dirty on the id update try { const isFinal = d.status && d.status !== 'draft'; const payload = { ...d, subtotal_thb: totals.subtotal, total_thb: totals.total, is_draft: !isFinal, status: d.status || 'draft', }; const r = await window.electron.boqDraftSave(payload); if (r.success) { setD(prev => ({ ...prev, id: r.id })); setLastSavedAt(new Date()); markClean(); const statusLabel = { 'draft': 'ฉบับร่าง', 'review': 'รอตรวจสอบ', 'finalized': 'ฉบับสมบูรณ์', 'sent': 'ส่งให้ลูกค้าแล้ว', 'approved': 'อนุมัติแล้ว', }[payload.status] || payload.status; toast(lang === "th" ? `บันทึก (${statusLabel}) สำเร็จ` : `Saved (${payload.status})`, "success"); onSaved?.(r.id); } else toast((lang === "th" ? "ผิดพลาด: " : "Error: ") + r.error, "danger"); } finally { setSaving(false); // Allow next user-driven state changes to mark dirty again setTimeout(() => { savingRef.current = false; }, 150); } }; const handlePreview = async () => { if (!d.id) { // Save first await save(); } onPreview({ ...d, subtotal_thb: totals.subtotal, total_thb: totals.total }); }; const handleConvertContract = async () => { if (!d.id) { toast(lang === "th" ? "กรุณาบันทึกก่อน" : "Save first", "warn"); return; } await save(); onConvertContract(d.id); }; const handleExportExcel = async () => { if (!d.id) await save(); onExportExcel(d.id || draft.id); }; return (
{/* Editor toolbar */}
{[ { id: "info", th: "ข้อมูลทั่วไป", en: "Info", icon: "doc" }, { id: "items", th: `รายการ (${d.data.groups.reduce((a, g) => a + (g.items?.length || 0), 0)})`, en: `Items (${d.data.groups.reduce((a, g) => a + (g.items?.length || 0), 0)})`, icon: "grid" }, { id: "terms", th: "เงื่อนไข & สรุป", en: "Terms & Total", icon: "receipt" }, ].map(s => { const Icon = I[s.icon] || I.dot; return ( ); })}
{lastSavedAt && ( {lang === "th" ? "บันทึกล่าสุด:" : "Last saved:"} {lastSavedAt.toLocaleTimeString()} )}
{/* Section content */} {section === "info" && (

{lang === "th" ? "ข้อมูล BOQ" : "BOQ Information"}

{/* Work type — datalist combobox: pick from list OR type freely */}
setD(prev => ({ ...prev, name: e.target.value }))} placeholder={lang === "th" ? "▼ เลือกประเภทงาน..." : "Select work type..."} />
setD(prev => ({ ...prev, boq_number: e.target.value }))} />
{/* Status dropdown — replaces 2nd save button */}
{[ { v: 'draft', th: '📝 ฉบับร่าง', en: 'Draft', color: '#9ca3af' }, { v: 'review', th: '🔍 รอตรวจสอบ', en: 'Review', color: '#fbbf24' }, { v: 'finalized', th: '✅ ฉบับสมบูรณ์ (ล็อค)', en: 'Finalized', color: '#4ade80' }, { v: 'sent', th: '📤 ส่งให้ลูกค้าแล้ว', en: 'Sent', color: '#60a5fa' }, { v: 'approved', th: '✓ ลูกค้าอนุมัติ', en: 'Approved', color: '#22c55e' }, ].map(s => ( ))}
setD(prev => ({ ...prev, project_name: e.target.value }))} />
setD(prev => ({ ...prev, client_name: e.target.value }))} />
setD(prev => ({ ...prev, site: e.target.value }))} />
setD(prev => ({ ...prev, area: parseFloat(e.target.value) || 0 }))} />