/* Kay Construction — Expenses + Company Settings. */ const EXP_CATEGORIES = ["material", "upah", "sewa alat", "transport", "perizinan", "lainnya"]; function ExpenseForm({ expense, onClose, defaultProject }) { const [lang] = useLang(); const projects = S.all("projects"); const [f, setF] = useState(expense || { projectId: defaultProject || (projects[0] ? projects[0].id : ""), date: S.todayISO(), category: "material", description: "", amount: 0, supplier: "" }); const set = (k, v) => setF((o) => ({ ...o, [k]: v })); const save = () => { if (!f.description.trim() || !f.amount) return alert(lang === "en" ? "Description and amount required" : "Deskripsi dan jumlah wajib diisi"); S.upsert("expenses", f); onClose(); }; return ( }>
set("date", e.target.value)} /> set("amount", v)} /> set("description", e.target.value)} /> set("supplier", e.target.value)} />
{f.receiptImage ?
:
} set("receiptImage", d)} size="sm" />
); } function ExpensesPage() { useStore(); const [lang] = useLang(); const [q, setQ] = useState(""); const [proj, setProj] = useState("all"); const [cat, setCat] = useState("all"); const [showForm, setShowForm] = useState(false); const [editing, setEditing] = useState(null); const [viewing, setViewing] = useState(null); const [confirm, confirmNode] = useConfirm(); let rows = S.all("expenses").slice().sort((a, b) => (b.date || "").localeCompare(a.date || "")); if (proj !== "all") rows = rows.filter((r) => r.projectId === proj); if (cat !== "all") rows = rows.filter((r) => r.category === cat); if (q) rows = rows.filter((r) => (r.description + r.supplier).toLowerCase().includes(q.toLowerCase())); const total = rows.reduce((s, r) => s + (Number(r.amount) || 0), 0); const projects = S.all("projects"); return (
setQ(e.target.value)} placeholder={t("common.search")} />
setCat("all")}>{t("common.all")} {EXP_CATEGORIES.map((c) => setCat(c)}>{t("exp.cat." + c)})}
{t("common.total")}
{S.formatRupiah(total)}
{rows.length === 0 && } {rows.map((r) => ( ))}
{t("common.date")}{t("common.project")}{t("common.category")}{t("common.description")}{t("exp.supplier")}{t("common.amount")}
{S.shortDate(r.date)}{S.projectName(r.projectId)} {t("exp.cat." + r.category)}
{r.receiptImage && setViewing(r)} title={t("exp.viewReceipt")} style={{ width: 28, height: 28, objectFit: "cover", borderRadius: 4, border: "1px solid var(--line)", cursor: "pointer", flex: "0 0 28px" }} />} {r.description}
{r.supplier || "—"} {S.formatRupiah(r.amount)}
{showForm && setShowForm(false)} />} {viewing && setViewing(null)}> } {confirmNode}
); } /* ---------------- Settings ---------------- */ /* signature drawing pad (works with mouse + touch) */ function SignaturePadModal({ onClose, onSave }) { const [lang] = useLang(); const cvRef = useRef(null); const drawing = useRef(false); const last = useRef(null); const dirty = useRef(false); useEffect(() => { const cv = cvRef.current; const ctx = cv.getContext("2d"); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, cv.width, cv.height); ctx.strokeStyle = "#16181a"; ctx.lineWidth = 2.6; ctx.lineCap = "round"; ctx.lineJoin = "round"; }, []); const pos = (e) => { const cv = cvRef.current; const r = cv.getBoundingClientRect(); const cx = (e.touches ? e.touches[0].clientX : e.clientX) - r.left; const cy = (e.touches ? e.touches[0].clientY : e.clientY) - r.top; return { x: cx * (cv.width / r.width), y: cy * (cv.height / r.height) }; }; const start = (e) => { e.preventDefault(); drawing.current = true; last.current = pos(e); }; const move = (e) => { if (!drawing.current) return; e.preventDefault(); const ctx = cvRef.current.getContext("2d"); const p = pos(e); ctx.beginPath(); ctx.moveTo(last.current.x, last.current.y); ctx.lineTo(p.x, p.y); ctx.stroke(); last.current = p; dirty.current = true; }; const end = () => { drawing.current = false; }; const clear = () => { const cv = cvRef.current; const ctx = cv.getContext("2d"); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, cv.width, cv.height); dirty.current = false; }; const save = () => { if (!dirty.current) return onClose(); onSave(cvRef.current.toDataURL("image/png")); onClose(); }; return (
}>
{lang === "en" ? "Sign inside the box with your finger or mouse." : "Tanda tangani di dalam kotak pakai jari atau mouse."}
 ); } /* image field with upload + (optional) draw, used for signature / stamp / header */ function SignImageField({ label, value, onChange, allowDraw, hint, bg }) { const [draw, setDraw] = useState(false); return (
{value ? : —}
{allowDraw && } {value && }
{hint &&
{hint}
} {draw && setDraw(false)} onSave={onChange} />}
); } function SettingsPage() { useStore(); const [lang] = useLang(); const [c, setC] = useState(S.getDB().company || {}); const [saved, setSaved] = useState(false); const [confirm, confirmNode] = useConfirm(); const set = (k, v) => { setC((o) => ({ ...o, [k]: v })); setSaved(false); }; const save = () => { const db = S.getDB(); db.company = c; S.saveDB(db); setSaved(true); setTimeout(() => setSaved(false), 2000); }; return (

{t("set.title")}

set("name", e.target.value)} /> set("legalName", e.target.value)} /> set("ownerName", e.target.value)} /> set("tagline", e.target.value)} /> set("address", e.target.value)} /> set("city", e.target.value)} /> set("phone", e.target.value)} /> set("email", e.target.value)} /> set("website", e.target.value)} /> set("npwp", e.target.value)} />

{t("set.bank")}

set("bankName", e.target.value)} /> set("bankAccount", e.target.value)} /> set("bankHolder", e.target.value)} /> set("defaultPpn", parseFloat(e.target.value) || 0)} />

{t("doc.paymentTerms")}