Make Dates and Editing Feel Natural

A useful form should start with a sensible date, and editing should feel like changing an existing entry rather than creating an unrelated one.

Open client/src/lib/finance.js. The current-month cursor should come from the current date:

javascript

export function getCurrentMonthCursor(date = new Date()) {
  return { year: date.getFullYear(), month: date.getMonth() };
}

Then use the selected cursor to choose the form’s default date:

javascript

export function getDefaultDateForCursor(cursor, now = new Date()) {
  if (cursor.year === now.getFullYear() && cursor.month === now.getMonth()) {
    return getLocalDateString(now);
  }

  const month = String(cursor.month + 1).padStart(2, "0");
  return `${cursor.year}-${month}-01`;
}

For the current month, the user gets today’s local date. For another month, the form starts on the first day of that selected month. The important part is that there is no fixed 2026 date in the source code.

Now open client/src/components/EntryForm.jsx. When an edit begins, focus the description field so the learner can immediately correct the part they are most likely to change. Keep the edit state separate from the normal add state so the same form can support both workflows.

Add the keyboard shortcut for cancelling:

javascript

if (event.key === "Escape") {
  cancelEdit();
}

Cancel the edit when month navigation moves away from the row being edited. Otherwise the form could continue showing an entry that is no longer in the visible month.

Test it

Open the application on the current month. Confirm the date field uses today’s date. Move to another month and confirm the date defaults to the first of that month.

Edit an entry, type a small correction, press Escape, and confirm the edit is cancelled. Start the edit again and confirm the description field is ready for typing.

Checkpoint

The same form now has predictable defaults and a clear distinction between adding a new entry and changing an existing one.