From c21b125fc6192852311004cb55128fe38917f1af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nut=2E=E0=B9=84=E0=B8=9B=E0=B9=80=E0=B8=A3=E0=B8=B7?= =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=A2?= Date: Thu, 28 May 2026 12:48:48 +0700 Subject: [PATCH] chore: add construction installment calculator design spec and plan --- ...-28-construction-installment-calculator.md | 630 ++++++++++++++++++ ...struction-installment-calculator-design.md | 84 +++ 2 files changed, 714 insertions(+) create mode 100644 docs/superpowers/plans/2026-05-28-construction-installment-calculator.md create mode 100644 docs/superpowers/specs/2026-05-28-construction-installment-calculator-design.md diff --git a/docs/superpowers/plans/2026-05-28-construction-installment-calculator.md b/docs/superpowers/plans/2026-05-28-construction-installment-calculator.md new file mode 100644 index 0000000..5f845bf --- /dev/null +++ b/docs/superpowers/plans/2026-05-28-construction-installment-calculator.md @@ -0,0 +1,630 @@ +# Construction Installment Calculator Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Build a single-file HTML tool that calculates construction payment installments (งวดงาน), supports editable rows, live recalculation, and Excel export. + +**Architecture:** Single `index.html` with vanilla JS and inline CSS. State lives in a JS array `installments[]`. Every input change triggers `recalcAll()` which redraws summary cards and all calculated table cells. SheetJS (CDN) handles Excel export. + +**Tech Stack:** HTML5, Vanilla JS (ES6+), SheetJS xlsx CDN, no build step + +--- + +## File Map + +| File | Purpose | +|---|---| +| `construction-installment-calculator/index.html` | Only file — contains all HTML, CSS, and JS | + +--- + +### Task 1: HTML skeleton, CSS, and static layout + +**Files:** +- Create: `construction-installment-calculator/index.html` + +- [ ] **Step 1: Create the file with full CSS and static HTML structure** + +Create `construction-installment-calculator/index.html` with this complete content: + +```html + + + + + +คำนวณงวดงานสิ่งก่อสร้าง + + + + +
+
+

การคำนวณงวดงานสิ่งก่อสร้าง

+

กรอกข้อมูล กำหนดจำนวนงวด แล้วแก้ไขวันและร้อยละในตาราง ระบบจะคำนวณให้อัตโนมัติ

+
+ +
+
+
+ + +
+
+ + +
+
+ +
+ + งปม. / + + นอก +
+
+
+ + +
+
+ +
+
+
+ +
+
+
+
วงเงินสัญญา
+
—
+
+
+
เงิน งปม.
+
—
+
+
+
เงินนอก
+
—
+
+
+
รวมร้อยละทุกงวด
+
0.00%
+
+
+
วันสิ้นสุดสัญญา
+
—
+
+
+ +
+
+ + + แก้ไขได้ + + + + คำนวณอัตโนมัติ + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + +
งวดที่จำนวนวัน
(แก้ไขได้)		ร้อยละ (%)
(แก้ไขได้)		วันส่งมอบงานจำนวนเงินงวดนั้น (บาท)จำนวนเงินสะสม (บาท)
รวมเงิน งปม.เงินนอกรวมเงิน งปม.เงินนอก
+
+
+
+ + + + +``` + +- [ ] **Step 2: Open in browser and verify initial render** + +Open `construction-installment-calculator/index.html` in a browser (double-click or `open construction-installment-calculator/index.html`). + +Expected: +- Page loads with blue header +- Form shows 4 inputs: วงเงิน, วันเริ่มก่อสร้าง, สัดส่วน, จำนวนงวด +- Table shows 27 rows pre-filled (days column: first 5 rows=20, rows 6-24=30, rows 25-27=40) +- ร้อยละ column: row 1=3.80, rest=3.70 +- Export button is disabled (grey) + +- [ ] **Step 3: Test contract amount input** + +Type `120000000` in วงเงินสัญญา field. + +Expected: +- Summary cards update instantly +- เงิน งปม. shows `114,000,000 ฿` +- เงินนอก shows `6,000,000 ฿` + +- [ ] **Step 4: Test start date input** + +Pick a date (e.g., today) in วันเริ่มก่อสร้าง. + +Expected: +- วันส่งมอบงาน column populates with Thai-Buddhist-era dates +- วันสิ้นสุดสัญญา in summary cards shows a date 790 days later +- รวมร้อยละ card shows `100.00%` with green ✓ +- Export button becomes active (green) + +- [ ] **Step 5: Test ratio input** + +Change งปม. to `80`. Expected: เงินนอก auto-updates to `20`, amounts recalculate. + +- [ ] **Step 6: Test editable cells** + +Click on จำนวนวัน in row 1, change from `20` to `25`. Expected: วันส่งมอบงาน for all subsequent rows shifts by 5 days. Cumulative columns update. + +Change ร้อยละ in row 1 from `3.80` to `3.75`. Expected: total % card shows `99.95%` in red ⚠. + +- [ ] **Step 7: Test จำนวนงวด change** + +Change จำนวนงวด from `27` to `5`. Confirm the dialog. Expected: table regenerates with 5 blank rows, % total = 0.00% red. + +Change back to `27` and confirm. Expected: template re-fills. + +- [ ] **Step 8: Test add/delete rows** + +Click `+ เพิ่มงวด`. Expected: row 28 (or +1) added as blank, จำนวนงวด input increments. + +Click ✕ on any row. Expected: row removed, rows renumber, จำนวนงวด input decrements. + +- [ ] **Step 9: Test Excel export** + +With 27-template + valid contract + valid start date + 100% total: click Export Excel. + +Expected: `.xlsx` file downloads named `งวดงาน_YYYYMMDD.xlsx`. Open in Excel/Numbers — should show 27 data rows + header row + summary row, with correct dates and amounts. + +- [ ] **Step 10: Commit** + +```bash +git -C /Users/nut.looknut/Project/rmutr add construction-installment-calculator/index.html docs/superpowers/specs/2026-05-28-construction-installment-calculator-design.md docs/superpowers/plans/2026-05-28-construction-installment-calculator.md +git -C /Users/nut.looknut/Project/rmutr commit -m "feat: add construction installment calculator (single HTML)" +``` + +--- + +## Self-Review + +**Spec coverage:** +- ✓ วงเงิน input → Task 1 +- ✓ วันเริ่มก่อสร้าง input → Task 1 +- ✓ สัดส่วน งปม/นอก adjustable → Task 1 (ngpmPct input, nookPct auto-fills) +- ✓ จำนวนงวด configurable → Task 1 (onCountChange) +- ✓ Editable วัน and ร้อยละ → Task 1 (editable-cell inputs) +- ✓ Live recalculation → Task 1 (recalcAll on every input event) +- ✓ 27-งวด template pre-fill → Task 1 (TEMPLATE_27 + init) +- ✓ Summary cards → Task 1 +- ✓ Add/delete rows → Task 1 (addRow, deleteRow) +- ✓ Validation: % total indicator → Task 1 (pct-ok/warn classes) +- ✓ Export disabled until valid → Task 1 (btnExport.disabled) +- ✓ Excel export with SheetJS → Task 1 (exportExcel) +- ✓ Thai Buddhist Era dates → Task 1 (toThaiDate: +543) + +**Placeholder scan:** None found — all code is complete. + +**Type consistency:** All function names used in event handlers (`recalcAll`, `addRow`, `deleteRow`, `exportExcel`, `onCountChange`) are defined in the same script block. diff --git a/docs/superpowers/specs/2026-05-28-construction-installment-calculator-design.md b/docs/superpowers/specs/2026-05-28-construction-installment-calculator-design.md new file mode 100644 index 0000000..c4e0d68 --- /dev/null +++ b/docs/superpowers/specs/2026-05-28-construction-installment-calculator-design.md @@ -0,0 +1,84 @@ +# Construction Installment Calculator — Design Spec + +Date: 2026-05-28 + +## Overview + +Single HTML file tool for calculating construction project payment installments (งวดงาน). Users input contract details and edit installment structure; the page calculates dates, amounts, and cumulative totals, then exports to Excel. + +## Inputs (top form) + +| Field | Type | Description | +|---|---|---| +| วงเงินสัญญา | Number | Total contract amount (บาท) | +| วันเริ่มก่อสร้าง | Date | Construction start date | +| สัดส่วน งปม. (%) | Number | Budget money percentage (default 95) | +| สัดส่วนเงินนอก (%) | Number | Outside budget percentage (default 5); auto-fills to 100 - งปม% | +| จำนวนงวด | Number | Number of installments; changing this regenerates table rows | + +When จำนวนงวด = 27, pre-fill the standard structure from the Excel template (see below). + +## Installment Structure (fixed template for 27 งวด) + +| งวดที่ | วัน | ร้อยละ | +|---|---|---| +| 1 | 20 | 3.80 | +| 2–5 | 20 | 3.70 | +| 6–24 | 30 | 3.70 | +| 25–27 | 40 | 3.70 | + +Total: 790 days, 100.00% + +For other installment counts, rows are generated blank (days=0, %=0) for user to fill in. + +## Table Columns + +| Column | Editable? | Calculation | +|---|---|---| +| งวดที่ | No | Sequential 1..n | +| จำนวนวัน | Yes | User input | +| ร้อยละ (%) | Yes | User input | +| วันส่งมอบงาน | No | startDate + cumulative days | +| รวม (บาท) | No | contractAmount × % / 100 | +| เงิน งปม. (บาท) | No | รวม × งปม% / 100 | +| เงินนอก (บาท) | No | รวม × เงินนอก% / 100 | +| รวมสะสม (บาท) | No | Cumulative รวม | +| งปม. สะสม (บาท) | No | Cumulative เงิน งปม. | +| เงินนอก สะสม (บาท) | No | Cumulative เงินนอก | +| ลบ | — | Button to remove row | + +## Summary Cards (above table) + +- วงเงินสัญญา +- เงิน งปม. (งปม%×contract) +- เงินนอก (เงินนอก%×contract) +- รวมร้อยละ (sum of all % rows) — shown in red if ≠ 100%, green if = 100% +- วันสิ้นสุดสัญญา (startDate + sum of all days) + +## Behavior + +- **Live recalculation**: every change to วัน, %, or header inputs recalculates all derived columns instantly (no Calculate button needed) +- **Add row**: "+ เพิ่มงวด" button appends a blank row at the bottom +- **Delete row**: ✕ button removes that row; remaining rows renumber +- **จำนวนงวด input**: changing it regenerates rows (27 → template, other → blank rows); warns user before clearing existing data +- **Validation**: total % card turns red/green; Export button disabled if total % ≠ 100% + +## Excel Export + +Uses SheetJS (xlsx CDN). Exported file includes: +- Sheet name: "งวดงาน" +- All 10 data columns + header row +- Summary rows at top (contract amount, dates, totals) +- Filename: `งวดงาน_YYYYMMDD.xlsx` + +## Architecture + +- Single `index.html` file +- Vanilla JS (no framework) +- SheetJS loaded from CDN for Excel export +- Thai date display in Buddhist Era (พ.ศ.) +- No backend, no build step required + +## File Location + +`/Users/nut.looknut/Project/rmutr/construction-installment-calculator/index.html`