- Remove app-wordmark from toolbar; place it in kb-doctitle where
the h1 "Reimbursement" was, at the same font size (--fs-h1)
- Glyph now appears to the right of "reimburse"
- Replace "Claim · today's date" with the user's selected period
(from – to), updated live as dates are changed
https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
- Replace plain <select> for FX direction with the same makeCDD custom
dropdown used for currency selection throughout the form
- Add padding-right:2px to .kb-toolbar so the theme icon button border
is not clipped on the right edge
https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
Users can now enter the exchange rate from either direction:
- "35 THB per USD" (foreign per base, the canonical form)
- "0.02857 USD per THB" (base per foreign, inverted display)
A compact inline select next to the rate field lets the user choose
which currency is in the numerator; the "per X" label updates to show
the denominator. Switching direction re-displays the current rate
inverted — the stored canonical (foreign/base) is unchanged, so
recalc(), fxRateMemory, and PDF output are unaffected.
Persists fxDir alongside fxRate in localStorage/IndexedDB.
https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
- Remove static app-bar header element
- Add glyph + "reimburse" wordmark to toolbar left
- Add optional language <select> (shown only when CFG.languages > 1)
- Replace 3-way Auto/Light/Dark segmented with single moon/sun icon toggle
- Theme toggle persists to localStorage and respects OS preference
https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
Thin 34px strip at the top of the page — the reimburse icon (card/
banknote outline glyph from dev/design_assets/reimburse-glyph.svg)
at 16px, 50% opacity, in var(--text-muted). One hairline border below.
aria-hidden so it is invisible to screen readers.
https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
Replaces the ad-hoc CSS and DOM structure with the full kBenestad
forms design language from dev/mockups/kbenestad-forms.css and the
dev/mockups/reimburse.html reference mockup. Surface-only change —
all PDF engine, state, validation, and persistence logic is intact.
Key changes:
- Schibsted Grotesk + JetBrains Mono (bunny.net, system fallback)
- Semantic CSS tokens with light/dark auto + manual override
- Toolbar: font-size A−/A/A+, theme Auto/Light/Dark, about button
- Document header: logo tile + org name left, title + date right
- kb-card sections for claimant and expenses
- kb-block item containers; kb-line line rows with kb-field/kb-label
- kb-btn variants (primary, ghost, soft, dashed, danger)
- kb-note for validation errors and modal feedback
- kb-totals grand total panel (mono tabular figures)
- kb-footer with kBenestad attribution
- Favicons from dev/design_assets/favicons/
https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
Adds a footer bar at the bottom of the page with copyright, a link to
docs.benestad.net/invoice, a repo link, and an About link that opens a
modal. Modal title, Markdown content, and button label are configurable
via config.yml (about-title, about-content, about-button).
https://claude.ai/code/session_01MNy1ymwx9URLgXSgHc9W3T
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
