# 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
คำนวณงวดงานสิ่งก่อสร้าง
| งวดที่ |
จำนวนวัน
(แก้ไขได้) |
ร้อยละ (%)
(แก้ไขได้) |
วันส่งมอบงาน |
จำนวนเงินงวดนั้น (บาท) |
จำนวนเงินสะสม (บาท) |
|
| รวม |
เงิน งปม. |
เงินนอก |
รวม |
เงิน งปม. |
เงินนอก |
```
- [ ] **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.