Style update

app.js

@@ -42,6 +42,7 @@ function bindEvents() {
   $('settingsDialog').addEventListener('click', closeDialogOnBackdrop);
   $('entryForm').addEventListener('submit', saveEntry);
   $('settingsForm').addEventListener('submit', saveSettings);
+  $('deleteHiddenEntriesBtn').addEventListener('click', deleteEntriesOutsideDisplayedMonths);
   ['startDate', 'endDate', 'nonWorkingDays'].forEach((id) => $(id).addEventListener('input', updateWorkdayPreview));
   $('cancelEditBtn').addEventListener('click', resetEntryForm);
 }
@@ -186,6 +187,43 @@ async function deleteEntry(id) {
   toast('Entry deleted');
 }
 
+async function deleteEntriesOutsideDisplayedMonths() {
+  const hiddenEntries = state.entries.filter((entry) => !entryOverlapsDisplayedRange(entry));
+  if (!hiddenEntries.length) {
+    toast('No hidden entries to delete');
+    return;
+  }
+  if (!confirm(`Delete ${hiddenEntries.length} entries outside the currently displayed months?`)) return;
+
+  let latestEntries = state.entries;
+  for (const entry of hiddenEntries) {
+    const data = await post({ action: 'deleteEntry', id: entry.id });
+    latestEntries = data.entries.map(normalizeEntry);
+  }
+  state.entries = latestEntries;
+  state.plan = calculatePlan(state.settings, state.entries, state.corrections, state.feriefridageOverrides, state.flexOverrides);
+  renderAll();
+  toast('Hidden entries deleted');
+}
+
+function entriesInDisplayedMonths() {
+  return state.entries.filter(entryOverlapsDisplayedRange);
+}
+
+function entryOverlapsDisplayedRange(entry) {
+  if (!state.plan?.range) return true;
+  return entry.start_date <= state.plan.range.end && entry.end_date >= state.plan.range.start;
+}
+
+function isPastEntry(entry) {
+  return entry.end_date < toIsoDate(new Date());
+}
+
+function isPastMonth(month) {
+  const today = new Date();
+  return month.year < today.getFullYear() || (month.year === today.getFullYear() && month.month < today.getMonth() + 1);
+}
+
 async function post(payload) {
   const res = await fetch('api.php', {
     method: 'POST',
@@ -317,18 +355,19 @@ function renderWarnings() {
 }
 
 function renderEntries() {
-  $('entriesHeaderTitle').textContent = `VACATIONS (${state.entries.length})`;
+  const visibleEntries = entriesInDisplayedMonths();
+  $('entriesHeaderTitle').textContent = `VACATIONS (${visibleEntries.length})`;
   const tbody = $('entriesTable').querySelector('tbody');
-  if (!state.entries.length) {
-    tbody.innerHTML = '<tr><td colspan="8" class="muted">No entries yet.</td></tr>';
+  if (!visibleEntries.length) {
+    tbody.innerHTML = '<tr><td colspan="7" class="muted">No entries in displayed months.</td></tr>';
     return;
   }
 
-  tbody.innerHTML = state.entries.map((entry) => {
+  tbody.innerHTML = visibleEntries.map((entry) => {
     const summary = state.plan.entrySummaries[entry.id] || { workdays: 0, grossWorkdays: 0, nonWorkingDays: 0, usedVacation: 0, usedFeriefridage: 0, usedFlex: 0, usedFlexDays: 0 };
     const source = sourceLabels[entry.source] || entry.source;
     return `
-      <tr>
+      <tr class="${isPastEntry(entry) ? 'past-entry' : ''}">
         <td><strong>${escapeHtml(entry.title)}</strong> <span class="muted">${escapeHtml(source)}</span><br><span class="muted entry-date">${escapeHtml(entry.start_date)} → ${escapeHtml(entry.end_date)}</span>${Number(entry.allow_unpaid) ? ' <span class="pill unpaid">unpaid</span>' : ''}</td>
         <td class="num strong-num">${days(summary.workdays)}</td>
         <td class="num">${days(summary.usedVacation)}</td>
@@ -394,7 +433,7 @@ function renderMonthRow(month) {
     : '<span class="muted">—</span>';
 
   return `
-    <tr>
+    <tr class="${isPastMonth(month) ? 'past-month' : ''}">
       <td>${month.year} - ${monthNames[month.month - 1]}${month.expiredFeriefridage > 0 ? `<br><span class="warn-text">Expired FF: ${days(month.expiredFeriefridage)}</span>` : ''}</td>
       <td class="entries">${entries}</td>
       <td class="num ${month.vacationBalance < -0.001 ? 'bad-text' : ''}"><input class="balance-override-input ${month.hasVacationOverride ? 'is-overridden' : ''}" type="number" step="0.01" value="${month.hasVacationOverride ? Number(month.vacationOverride) : Number(month.vacationBalance.toFixed(2))}" data-kind="vacation" data-year="${month.year}" data-month="${month.month}" aria-label="Vacation days for ${monthNames[month.month - 1]} ${month.year}"></td>
@@ -580,6 +619,7 @@ function calculatePlan(settings, entries, corrections = {}, feriefridageOverride
   const totalDays = vacationBalance + feriefridageBalance + (flexBalance / avgDayHours);
   return {
     months,
+    range: { start: toIsoDate(startDate), end: toIsoDate(endDate) },
     warnings: dedupeWarnings(warnings),
     current: calculateCurrentSnapshot(settings, entries, corrections, feriefridageOverrides, flexOverrides),
     entrySummaries,
@@ -817,6 +857,10 @@ function dateFromParts(year, month, day) {
   return new Date(year, month - 1, day, 12, 0, 0);
 }
 
+function toIsoDate(date) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+}
+
 function parseDate(value) {
   const [year, month, day] = value.split('-').map(Number);
   return dateFromParts(year, month, day);