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
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
