Values editable in the top row

app.js

@@ -356,24 +356,39 @@ function resetEntryForm() {
 
 function renderDashboard() {
   const current = state.plan.current;
+  const { year, month } = currentMonthParts();
   const cards = [
-    ['Feriefridage', days(current.feriefridage), 'Use before 31 August', current.feriefridage > 0.001 ? 'warn' : ''],
-    ['Vacation days', days(current.vacation), 'Available today', current.vacation < -0.001 ? 'bad' : 'good'],
+    {
+      kind: 'feriefridage',
+      label: 'Feriefridage',
+      value: current.feriefridage,
+      hint: 'Use before 31 August',
+      tone: current.feriefridage > 0.001 ? 'warn' : '',
+      step: '0.01',
+      overridden: hasCorrection(state.feriefridageOverrides, year, month),
+    },
+    {
+      kind: 'vacation',
+      label: 'Vacation days',
+      value: current.vacation,
+      hint: 'Available today',
+      tone: current.vacation < -0.001 ? 'bad' : 'good',
+      step: '0.01',
+      overridden: hasCorrection(state.corrections, year, month),
+    },
+    {
+      kind: 'flex',
+      label: 'FLEX hours',
+      value: current.flex,
+      hint: 'Current balance',
+      tone: current.flex < -0.001 ? 'bad' : 'good',
+      step: '0.25',
+      overridden: hasCorrection(state.flexOverrides, year, month),
+    },
   ];
 
   $('dashboard').innerHTML = `
-    ${cards.map(([label, value, hint, tone]) => `
-      <article class="card ${tone}">
-        <div class="label">${escapeHtml(label)}</div>
-        <div class="value">${value}</div>
-        <div class="hint">${escapeHtml(hint)}</div>
-      </article>
-    `).join('')}
-    <article class="card ${current.flex < -0.001 ? 'bad' : 'good'}">
-      <div class="label">FLEX hours</div>
-      <div class="value">${hours(current.flex)}</div>
-      <div class="hint">Current balance</div>
-    </article>
+    ${cards.map((card) => renderDashboardBalanceCard(card, year, month)).join('')}
     <article class="card ${current.totalDays < -0.001 ? 'bad' : 'good'}">
       <div class="label">Total days</div>
       <div class="value">${days(current.totalDays)}</div>
@@ -382,6 +397,21 @@ function renderDashboard() {
   `;
 }
 
+function renderDashboardBalanceCard(card, year, month) {
+  return `
+    <article class="card ${card.tone}">
+      <div class="label">${escapeHtml(card.label)}</div>
+      <input class="value balance-override-input dashboard-balance-input ${card.overridden ? 'is-overridden' : ''}" type="number" step="${card.step}" value="${Number(Number(card.value || 0).toFixed(2))}" data-kind="${card.kind}" data-year="${year}" data-month="${month}" aria-label="${escapeHtml(card.label)} for current month">
+      <div class="hint">${escapeHtml(card.hint)}</div>
+    </article>
+  `;
+}
+
+function currentMonthParts() {
+  const today = new Date();
+  return { year: today.getFullYear(), month: today.getMonth() + 1 };
+}
+
 function renderHeaderWarnings() {
   const warnings = state.plan.current.warnings;
   $('headerWarnings').innerHTML = warnings.length
@@ -444,10 +474,14 @@ function renderPlanner() {
       </table>
     </div>
   `;
+  bindBalanceOverrideInputs();
+  syncPlannerScroll();
+}
+
+function bindBalanceOverrideInputs() {
   document.querySelectorAll('.balance-override-input').forEach((input) => {
     input.addEventListener('change', (event) => saveBalanceOverride(event).catch((error) => toast(error.message || String(error))));
   });
-  syncPlannerScroll();
 }
 
 function syncPlannerScroll() {