// Entry.jsx — main "record one expense" screen with keypad, sheets, and (fake) OCR const { useState, useMemo, useRef } = React; const MAX_PHOTOS = 3; const MAX_TOTAL_PHOTO_BYTES = 900_000; // safety margin under Firestore's 1 MiB doc limit function EntryScreen({ me, names, books, cats, templates, currentBookId, setCurrentBookId, onSave, defaultMode, amountFontSize, keyHeight, accent, editing, onCancelEdit }) { const initial = editing || {}; const [amount, setAmount] = useState(editing ? String(editing.amount) : "0"); const [payer, setPayer] = useState(initial.payer || me); const [split, setSplit] = useState(initial.split || { mode: defaultMode }); const [category, setCategory] = useState(initial.category || "food"); const [note, setNote] = useState(initial.note || ""); const [items, setItems] = useState(initial.items || []); const [bookId, setBookId] = useState(initial.bookId || currentBookId); const [date, setDate] = useState(initial.date || new Date().toISOString()); const [pending, setPending] = useState(!!initial.pending); const [photos, setPhotos] = useState(initial.photos || []); function applyTemplate(tpl) { if (tpl.amount) setAmount(String(tpl.amount)); if (tpl.category) setCategory(tpl.category); if (tpl.note) setNote(tpl.note); if (tpl.split) setSplit(tpl.split); } const [splitSheet, setSplitSheet] = useState(false); const [bookSheet, setBookSheet] = useState(false); const [itemSheet, setItemSheet] = useState(false); const [dateSheet, setDateSheet] = useState(false); const [photoSheet, setPhotoSheet] = useState(false); const [previewIdx, setPreviewIdx] = useState(null); const [addingPhoto, setAddingPhoto] = useState(false); const [ocrLoading, setOcrLoading] = useState(false); const [ocrConfirm, setOcrConfirm] = useState(null); const [tplSheet, setTplSheet] = useState(false); const [error, setError] = useState(""); const [toast, setToast] = useState(""); const ocrInputRef = useRef(null); const exprValue = useMemo(() => { const v = window.evalExpr(amount); return v == null ? 0 : v; }, [amount]); const showingExpr = /[+\-*/]/.test(amount); const activeBooks = books.filter((b) => b.status === "active"); const currentBook = books.find((b) => b.id === bookId); function handleSave() { const finalAmount = exprValue; if (!pending && finalAmount <= 0) { setError("金額不可為 0"); return; } if (!pending && split.mode === "custom") { const sum = (split.amounts.A || 0) + (split.amounts.B || 0); if (split.amounts.totalDriven !== true && Math.abs(sum - finalAmount) > 0.01) { setError(`分攤金額需等於 ${fmtMoney(finalAmount)}`); return; } } const totalPhotoBytes = photos.reduce((s, p) => s + dataUrlByteSize(p), 0); if (totalPhotoBytes > MAX_TOTAL_PHOTO_BYTES) { setError("附件總大小超過上限,請減少張數或重拍"); return; } const tx = { id: editing ? editing.id : "tx" + Date.now(), amount: pending ? 0 : finalAmount, pending, payer, split, category, note, items, bookId, date, }; if (photos.length > 0) tx.photos = photos; onSave(tx); setToast(editing ? "已更新" : "已記下"); setTimeout(() => setToast(""), 1200); if (!editing) { setAmount("0"); setNote(""); setItems([]); setPending(false); setSplit({ mode: defaultMode }); setDate(new Date().toISOString()); setPhotos([]); } else { onCancelEdit && onCancelEdit(); } } async function handleOcrFile(file) { if (!file) return; setOcrLoading(true); setError(""); try { const dataUrl = await window.compressImage(file, 1600, 0.85); const token = await window.firebaseApi.auth.getIdToken(); if (!token) throw new Error("請先登入"); const url = window.__OCR_WORKER_URL__; if (!url) throw new Error("OCR 尚未設定"); const res = await fetch(url, { method: "POST", headers: { "Authorization": "Bearer " + token, "Content-Type": "application/json", }, body: JSON.stringify({ image: dataUrl }), }); if (!res.ok) { throw new Error(res.status === 401 ? "登入逾時,請重新登入" : "辨識失敗"); } const r = await res.json(); setOcrConfirm({ amount: r.amount, category: r.suggestedCategory || "other", merchant: r.merchant || "", date: r.date, items: Array.isArray(r.items) ? r.items : [], }); } catch (e) { setError(e.message || "辨識失敗"); } finally { setOcrLoading(false); } } function applyOcr() { setAmount(String(ocrConfirm.amount || 0)); if (ocrConfirm.category) setCategory(ocrConfirm.category); if (ocrConfirm.merchant) setNote(ocrConfirm.merchant); if (ocrConfirm.date) { const d = new Date(ocrConfirm.date + "T12:00:00"); if (!isNaN(d)) setDate(d.toISOString()); } if (Array.isArray(ocrConfirm.items) && ocrConfirm.items.length > 0) { setItems(ocrConfirm.items.map((it) => ({ name: it.name || "", qty: it.qty || 1, price: it.price || 0, }))); } setOcrConfirm(null); } const splitLabel = useMemo(() => { if (split.mode === "even") return "均分"; if (split.mode === "ratio") return `${names.A} : ${names.B} / ${split.ratio[0]} : ${split.ratio[1]}`; if (split.mode === "custom") { const a = split.amounts?.A || 0; const b = split.amounts?.B || 0; return `${names.A} ${fmtMoney(a)} / ${names.B} ${fmtMoney(b)}`; } if (split.mode === "treat") return `${names[split.treatBy]} 請客`; return "均分"; }, [split, names]); const displayAmount = useMemo(() => { if (showingExpr) return amount.replace(/\*/g, "×").replace(/\//g, "÷"); if (amount === "0") return "0"; const n = parseFloat(amount) || 0; return n.toLocaleString("en-US", { maximumFractionDigits: 2 }) + (amount.endsWith(".") ? "." : ""); }, [amount, showingExpr]); return (
{editing &&
編輯一筆
}
{ const f = e.target.files && e.target.files[0]; e.target.value = ""; handleOcrFile(f); }} />
NT$
{displayAmount}
{showingExpr &&
＝ {fmtMoney(exprValue)}
}
付款
{cats.map((c) => )}
setSplitSheet(true)}> 分攤 {splitLabel} ›
備註