Previously y -= lh then line at y+lh put the separator exactly at
the stripe bottom with no breathing room. Dropping 2×lh leaves one
full line height of white space between the stripe and the separator,
and another line height between the separator and the item header.
y was at the stripe bottom when the separator was drawn at y+lh,
landing inside the previous stripe. Dropping y by lh first puts the
separator in the gap between the two items.
- Accent separator line moved to y+lh (one line-height above text
baseline) so it sits cleanly above the ITEM/PROJECT/TRAVEL label
instead of cutting through it
- Item name rendered bold and uppercased
Vendor line now shows: [Vendor] FXC amt – FXC rate per LCC LCC amt
- FX portion (foreign amount and rate) rendered in grey regular weight
- Base currency amount right-aligned in bold black, same font size
- Vendor name truncated dynamically to leave room for the right-side figures
- FX rate detail removed from line 3 (receipt line) since it is now on line 1
- Thin accent-coloured line (0.75pt) drawn just above each ITEM /
PROJECT / TRAVEL header for visual separation between items
- Alternating white / light-grey (0.95) stripe backgrounds on expense
lines; stripe height is pre-calculated from content so it covers
vendor, description, receipt and account/program rows cleanly
- Thin grey vendor rule is drawn on top of the stripe background
- Header divider (under Staff/Period/Currency) now matches grand-total
rule thickness (3pt instead of 1.5pt)
- ITEM / PROJECT / TRAVEL label rendered at body font size (sz) for
stronger visual weight
- Thin grey rule drawn above every vendor line (including first in an
item); replaces the between-lines-only separator
- Foreign currency amount moved to line 1, left of the bold base
amount, in muted grey — removes it from line 3
- Line 3 right side now shows only the FX rate (e.g. THB 34.05000 per
USD) since the amount is already on line 1
- Receipt line shows plain "See page N for receipt" with no prefix, or
wraps the no-receipt explanation directly with no heading label
- Vendor and description rendered as plain text (no box or background)
Each expense line now renders as:
[Vendor box] LCC amount
[Description box] Date: YYYY-MM-DD
Receipt: See page X / No receipt FXC amount – FXC rate per LCC
Account: value Program: value
Replaces the previous label-row / value-row grid (Date | Vendor | Currency |
FX rate, then Description | Receipt | Amount) which BPSOS found too busy.
Receipt refs are backfilled with the "Receipt: " prefix as before. Form
input behaviour is unchanged.
Green button next to the Staff Name field. Clicking shows a confirmation
modal; on confirm it removes all localStorage and IndexedDB data, resets
state using defaultPeriod() for the period dates, and re-renders.
Also fixes period date pickers to set .value directly (same fix applied
earlier to expense line date inputs) so they open to the right month.
https://claude.ai/code/session_01MbwfxnjLA9KdFTrfzB55HM
Text state (items, lines, programs, amounts, etc.) is saved to localStorage
and receipts/images are saved to IndexedDB. Data is restored automatically
on the next visit in the same browser.
Auto-save runs 1 s after the last input event. A green Save button triggers
an explicit save with a confirmation modal. Receipt validation is skipped on
save and only enforced at PDF generation time.
An entry modal on every load explains the save behaviour and (if IndexedDB
is unavailable) warns that receipts cannot be persisted.
https://claude.ai/code/session_01MbwfxnjLA9KdFTrfzB55HM
Selecting a non-base currency now shows a modal explaining the exchange
rate convention, using the actual currency names. Selecting Other shows
a variant asking the user to enter the ISO code first. Both messages
are configurable via fx-rate-message and fx-rate-message-other in
config.yml using {foreign} and {base} placeholders.
The Other option in the currency dropdown no longer shows __OTHER__.
https://claude.ai/code/session_01MbwfxnjLA9KdFTrfzB55HM
Tooltip now appears below the FX rate field, wraps across multiple lines,
and explains the rate convention using the actual currency names from config.
Currency dropdown gains an Other option: selecting it swaps to a three-letter
ISO input with its own tooltip. A × button cancels back to the dropdown.
The FX rate field responds to the custom code once three letters are entered.
https://claude.ai/code/session_01MbwfxnjLA9KdFTrfzB55HM
state.periodFrom was set inside render(), after newItem() was called,
so the first line always got an empty date. Setting the period before
pushing the first item ensures the default date is the period start.
https://claude.ai/code/session_01MbwfxnjLA9KdFTrfzB55HM
When a user enters a date outside the selected period, a modal warning
appears explaining they can continue but the date will be flagged. The
date input gets an amber border/background as a persistent visual cue.
The PDF marks out-of-period dates in orange with a trailing (!) marker.
https://claude.ai/code/session_01MbwfxnjLA9KdFTrfzB55HM
When multiple programmes are allocated on a line, each row now displays
the pro-rated amount in the base currency next to the percentage
(e.g. "10.00% – USD 12.34"). The figure updates live as the line amount,
FX rate, or currency changes, as well as when the percentage is edited.
The PDF receipt renders the same information as a right-aligned suffix
on each programme row.
https://claude.ai/code/session_01MbwfxnjLA9KdFTrfzB55HM
Replaces single program field with a dynamic multi-program UI. A single
program shows the select inline with an "+ Add program" button and no
percentages. Adding a second program switches the layout to show a percent
input per row, a colour-coded total (yellow <100%, green =100%, red >100%),
and a × button to remove individual rows. Returning to one program reverts
to the simple layout. PDF renders programmes stacked with (XX.XX%) suffix
when multiple are present. Validation requires each selection, all percents
positive, and total = 100% when multiple programmes are allocated.
https://claude.ai/code/session_01MbwfxnjLA9KdFTrfzB55HM
Creates docs/ with three audience-specific guides:
- docs/user-guide.md: step-by-step form-filling instructions, field
descriptions, FX rate explanation, receipt handling, troubleshooting
- docs/admin-guide.md: deployment instructions and exhaustive config.yml
key/value reference with types, defaults, and constraints
- docs/developer-guide.md: architecture overview, full state model, all
CFG key mappings, PDF engine internals, column positions, four-pass build
process, common modification checklists, known limitations
Rewrites CLAUDE.md as a dense agent reference covering the same ground
in a compact format: code section line ranges, full config key table with
JS access patterns, validation rules, PDF coordinate system, design
decisions, and modification checklists.
https://claude.ai/code/session_01Dad69NPna53u4hucCYnVNs
Logo is now pinned to an absolute position (10mm from top, 10mm from
left) independent of the content cursor, so it can never overlap any
form elements. The cursor y is pushed below the logo bottom before
the title and remaining header elements are drawn.
https://claude.ai/code/session_016aNBqHpiQciTr1DvNvE7nk
The logo was placed with a fixed +10pt offset that didn't account for
actual logo height. Content below always advanced by a fixed 28pt, so
any logo taller than ~18pt bled into the intro text and form fields.
Now the logo is anchored with its top at the cursor position (bottom at
y - lhh), the title baseline aligns to the same top edge, and y advances
by max(logoHeight, titleSize) + 8pt gap before the next element.
https://claude.ai/code/session_016aNBqHpiQciTr1DvNvE7nk
Row 1: Date | Vendor (grow) | Currency | FX rate
Row 2: Description (grow) | Receipt | Amount
Currency and Receipt share the same x position; FX rate and Amount share the same x position.
https://claude.ai/code/session_014uUwDBtG5y5FuWcy5zqVD1
The last item divider plus two double-rule lines produced three blue lines.
Removed the item divider and the double-rule pair; replaced with a single
line at thickness 3 (double the standard 1.5).
https://claude.ai/code/session_014uUwDBtG5y5FuWcy5zqVD1
- Move inter-line separator from bottom to top of each expense line;
skip on first line and on page breaks (justBroke flag) so the
continuation header is never followed immediately by a divider
- Increase needSpace from lh*5 (70pt) to lh*7 (98pt) to match the
actual line block height (~6lh + 16pt), preventing content from
overrunning M.bottom and bleeding into the footer area
https://claude.ai/code/session_014uUwDBtG5y5FuWcy5zqVD1
- New config key date-format (default DD/MM/YYYY) controls date display
throughout the form and PDF output
- formatDate(iso) converts stored YYYY-MM-DD to the configured display format
- parseDate(str) converts user input back to YYYY-MM-DD for state storage
- All three date inputs (line date, period from/to) switched from type=date
to type=text with format placeholder, removing browser locale dependency
- PDF line dates, period header, and continuation header all use formatDate()
- Filename stays in YYYY-MM-DD for safe file naming
https://claude.ai/code/session_014uUwDBtG5y5FuWcy5zqVD1
state.baseCurrency was set to CFG['currency-base'] at declaration time,
but CFG is only populated after await loadConfig(). Reading a property of
undefined throws synchronously, crashing the script before init() runs.
Move the assignment to after loadConfig() resolves in init().
https://claude.ai/code/session_014uUwDBtG5y5FuWcy5zqVD1
- Remember the last valid FX rate entered per currency in state.fxRateMemory;
pre-fill it when staff picks the same currency on a new line.
- Move Remove button to top-right of item header (alongside label);
Subtotal moves below the name input, right-aligned in its own row.
https://claude.ai/code/session_014uUwDBtG5y5FuWcy5zqVD1
