kbenestad/reimburse
1
0
Fork 0
mirror of https://github.com/kbenestad/reimburse.git synced 2026-06-18 08:04:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Compare commits

base: kbenestad:be4b4c463eb2966fe1b5472a6a1342b7087f339d
Branches Tags
kbenestad:main
kbenestad:claude/nice-lamport-rpe2F
kbenestad:bpsos-customisation
..
compare: kbenestad:b1efad2ab497e827d89e8aebbdf3b2fbb8ae6eea
Branches Tags
kbenestad:main
kbenestad:claude/nice-lamport-rpe2F
kbenestad:bpsos-customisation

12 commits
be4b4c463e ... b1efad2ab4

Author SHA1 Message Date
Claude
b1efad2ab4
Match toolbar and header to timesheet app design
Some checks failed
/ mirror (push) Has been cancelled
Details 
- Language select moves to toolbar left, unstyled (CSS via .kb-toolbar select)
- Moon/sun and about SVGs updated to match timesheet icon set (stroke style)
- kb-doctitle h1 is now inline-flex with icon left of text, mirroring timesheet
- Icon uses var(--accent) fill so it adapts to dark mode
- Toolbar gap 8px to match

https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
 2026-06-08 05:22:09 +00:00
Claude
43a7638b12
Reorganise claimant card: move New form below, adjust column widths 
- Remove 'New claim' button
- Move 'New form' below the fields row (was inline next to staff input)
- Staff column 2fr, period columns 0.85fr each, currency 0.5fr
- Staff input no longer wrapped in staffWrap flex container

https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
 2026-06-08 05:16:11 +00:00
Claude
08a0d2b0ea
Add 'New claim' period button; format period as 'd Mmmm' 
- 'New claim' button below the claimant fields fills period from/to
  using defaultPeriod() (previous month, or current if today is the
  last day of the month)
- Period meta in the doctitle now shows '1 June – 30 June' format
  instead of ISO dates

https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
 2026-06-08 05:06:15 +00:00
Claude
6787fd15a2
Put base currency on the same row as staff and period 
Switch claimant card from cols-3 (staff | period-group | currency on
its own row) to cols-4 (staff | from | to | currency), all one line.

https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
 2026-06-08 05:02:31 +00:00
Claude
364cac2155
Use blue squircle app icon in doctitle wordmark 
Replace stroke-only glyph with the full reimburse icon (blue squircle
+ white glyph). Sized to 1em so it scales with the h1 font size.

https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
 2026-06-08 04:57:17 +00:00
Claude
076996a470
Move wordmark to doctitle; show period instead of today's date 
- 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
 2026-06-08 04:53:02 +00:00
Claude
013563d13e
Polish FX direction picker and toolbar clipping 
- 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
 2026-06-08 04:50:00 +00:00
Claude
e371505323
Add bidirectional FX rate entry 
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
 2026-06-08 04:40:02 +00:00
Claude
0a84ba4628
Redesign toolbar: wordmark, language select, icon theme toggle 
- 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
 2026-06-08 04:28:12 +00:00
Claude
3f7fcf47ed
Add subtle app bar with reimburse glyph 
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
 2026-06-08 04:19:10 +00:00
Claude
345e285d30
Redesign PDF output to match kBenestad design language 
Visual-only change — all logic, validation, and page-break handling
is identical. Uses Helvetica/Courier (standard PDF fonts) to avoid
file size increase.

Changes:
- kBenestad color tokens: clrText #14181E, clrMuted #5F6975,
  clrBorder #E3E7EE, clrSurface2 #F8F9FB, clrAccent from config
- Page 1 header: 44pt initials box (surface-2 fill, accent initials)
  or logo image, org name + "Expense reimbursement" subtitle left;
  "Reimbursement" title + "Claim · DD Mon YYYY" in Courier right;
  0.5pt hairline below
- Staff/period/currency: light surface-2 info block with hairline
  borders, currency value in accent color
- Continuation headers (p2+): full-width surface-2 strip with labels
  and values, bordered top + bottom
- Item sections: 3pt accent left-stripe, item name bold left,
  subtotal in Courier accent right, 0.5pt hairline below
- Eyebrow labels: uppercase, bold, szXs (sz-2), clrMuted
- Value text: clrText vs old near-black; dates/FX/amounts in Courier
- Line dividers: 0.3pt clrBorder (was 0.3pt gray)
- Grand total: 1.5pt clrBorderStrong rule; label left, szLg bold
  accent amount right (was single right-aligned string)
- Footers: clrBorder hairline, all text clrMuted at szXs

https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
 2026-06-08 04:08:56 +00:00
Claude
2482cf544f
Restyle app to kBenestad design language 
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
 2026-06-08 03:17:02 +00:00
4 changed files with 945 additions and 517 deletions
Show stats Expand all files Collapse all files

BIN
app/assets/apple-touch-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
app/assets/favicon-32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 893 B

6
app/assets/favicon.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="reimburse">
<rect width="48" height="48" rx="12" fill="#2f6fed"></rect>
<rect x="7.5" y="14" width="33" height="20" rx="3.2" fill="none" stroke="#fff" stroke-width="2.8"></rect>
<circle cx="24" cy="24" r="4.6" fill="none" stroke="#fff" stroke-width="2.6"></circle>
<path d="M12.7 21.4 V26.6 M35.3 21.4 V26.6" stroke="#fff" stroke-width="2.6" stroke-linecap="round"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 493 B

1456
app/index.html
View file

File diff suppressed because it is too large Load diff