From 08a0d2b0eadfbbe01fb2b619f310467b36d78364 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 8 Jun 2026 05:06:15 +0000
Subject: [PATCH] Add 'New claim' period button; format period as 'd Mmmm'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- '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
---
 app/index.html | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/index.html b/app/index.html
index e96c2ff..098349e 100644
--- a/app/index.html
+++ b/app/index.html
@@ -782,12 +782,16 @@ function render() {
   const wordmark = el('div', {className:'app-wordmark'});
   wordmark.innerHTML = `reimburse<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><rect width="48" height="48" rx="12" fill="#2f6fed"/><rect x="7.5" y="14" width="33" height="20" rx="3.2" fill="none" stroke="#fff" stroke-width="2.8"/><circle cx="24" cy="24" r="4.6" fill="none" stroke="#fff" stroke-width="2.6"/><path d="M12.7 21.4V26.6M35.3 21.4V26.6" stroke="#fff" stroke-width="2.6" stroke-linecap="round"/></svg>`;
   const periodMeta = el('div', {className:'meta'});
+  function fmtPeriodDate(iso) {
+    const [y, m, d] = iso.split('-').map(Number);
+    return `${d} ${new Date(y, m-1, 1).toLocaleString('en-GB', {month:'long'})}`;
+  }
   function updatePeriodMeta() {
     const from = state.periodFrom, to = state.periodTo;
-    if (from && to) periodMeta.textContent = `${from} – ${to}`;
-    else if (from) periodMeta.textContent = `From ${from}`;
-    else if (to) periodMeta.textContent = `Until ${to}`;
-    else periodMeta.textContent = 'No period selected';
+    if (from && to) periodMeta.textContent = `${fmtPeriodDate(from)} – ${fmtPeriodDate(to)}`;
+    else if (from) periodMeta.textContent = `From ${fmtPeriodDate(from)}`;
+    else if (to) periodMeta.textContent = `Until ${fmtPeriodDate(to)}`;
+    else periodMeta.textContent = '';
   }
   updatePeriodMeta();
   docTitle.append(wordmark, periodMeta);
@@ -831,6 +835,15 @@ function render() {
   claimGrid.appendChild(kbField('Period to', toInput));
   claimGrid.appendChild(kbField('Base currency', baseCurDD));
   claimCard.appendChild(claimGrid);
+
+  const fillPeriodBtn = el('button', {type:'button', className:'kb-btn kb-btn--ghost', style:{marginTop:'12px'}}, 'New claim');
+  fillPeriodBtn.addEventListener('click', () => {
+    const p = defaultPeriod();
+    state.periodFrom = p.from; state.periodTo = p.to;
+    fromInput.value = p.from; toInput.value = p.to;
+    updatePeriodMeta();
+  });
+  claimCard.appendChild(fillPeriodBtn);
   wrap.appendChild(claimCard);
 
   // ── Expenses card ─────────────────────────────────────────────────────────