Add a day view to a trip #51

New Issue

shaun · 2026-02-24T19:12:15Z

shaun commented

2026-02-24 19:12:15 +00:00

Background

Currently there are two views of plans on the trip page:

Timeline view
Type/category view.

For long trips, or trips with lots of itinerary items the page may be quite long so we want to add a way to filter to a specific day.

Specification

You will add a switcher next to the current view switcher with the following options:

Trip (default)
Day
Week

When Tripis selected, you'll see the current view (this is also the default option).
If the trip is in progress (e.g. the current date is between the start and end date of the trip) then show a button next to this switcher called "Today". This will be a quick select to the day view for the current day.

Week View

A new widget will appear above the itinerary with left and right arrow buttons (if appropriate).
The left arrow button will be floating left, the right floating right and the text centered.
If only a single week, then don't show the buttons.
Disable the buttons as appropriate (e.g. on first week disable the left button, on last disable right).
The widget will look like this:

|  [<-].        Week 1                        [->]  |
|            April 1 - April 8                         |

The week number should be in larger font, and the date range in a smaller font.
The itinerary view should be the same as before, just filtered for the date range.

Day View

A new widget will appear above the itinerary with left and right arrow buttons (if appropriate).
The left arrow button will be floating left, the right floating right and the text centered.
If only a single day, then don't show the buttons.
Disable the buttons as appropriate (e.g. on first day, disable the left button; on last, disable right)
The widget will look like this:

|  [<-].        Monday, April 1 2027                       [->]  |
|                  Day 1                                                          |

The date should be in larger font
The itinerary view should be the same as before, just filtered for the date.

QA Considerations

You should add ample unit and end to end tests to cover this functionality.
You should record a playwright demo video and attach it to this issue showing the functionality at work.

# Background Currently there are two views of plans on the trip page: - Timeline view - Type/category view. For long trips, or trips with lots of itinerary items the page may be quite long so we want to add a way to filter to a specific day. # Specification You will add a switcher next to the current view switcher with the following options: - Trip (default) - Day - Week When Tripis selected, you'll see the current view (this is also the default option). If the trip is in progress (e.g. the current date is between the start and end date of the trip) then show a button next to this switcher called "Today". This will be a quick select to the day view for the current day. ## Week View - A new widget will appear above the itinerary with left and right arrow buttons (if appropriate). - The left arrow button will be floating left, the right floating right and the text centered. - If only a single week, then don't show the buttons. - Disable the buttons as appropriate (e.g. on first week disable the left button, on last disable right). - The widget will look like this: ``` | [<-]. Week 1 [->] | | April 1 - April 8 | ``` - The week number should be in larger font, and the date range in a smaller font. - The itinerary view should be the same as before, just filtered for the date range. ## Day View - A new widget will appear above the itinerary with left and right arrow buttons (if appropriate). - The left arrow button will be floating left, the right floating right and the text centered. - If only a single day, then don't show the buttons. - Disable the buttons as appropriate (e.g. on first day, disable the left button; on last, disable right) - The widget will look like this: ``` | [<-]. Monday, April 1 2027 [->] | | Day 1 | ``` - The date should be in larger font - The itinerary view should be the same as before, just filtered for the date. # QA Considerations - You should add ample unit and end to end tests to cover this functionality. - You should record a playwright demo video and attach it to this issue showing the functionality at work.

shaun added the ai-agent label 2026-02-24 19:12:15 +00:00

ai-agent was assigned by cicd

2026-02-24 19:12:17 +00:00

ai-agent commented

2026-02-24 19:20:13 +00:00

Playwright demo run failed, so I could not capture the required video.\n\nCommand: PW_VIDEO_MODE=on PW_TRACE_MODE=on bunx --bun playwright test e2e/trip-date-view.test.ts\nError: error: Cannot find module '/tmp/trips-51/playwright.config.ts.esm.preflight' from '/tmp/trips-51/node_modules/playwright/lib/transform/transform.js'\n\nCommand: PW_VIDEO_MODE=on PW_TRACE_MODE=on bunx playwright test e2e/trip-date-view.test.ts\nError: error: Cannot find module '/tmp/trips-51/playwright.config.ts.esm.preflight' from '/tmp/trips-51/node_modules/playwright/lib/transform/transform.js'\n\nCommand: PW_VIDEO_MODE=on PW_TRACE_MODE=on ./node_modules/.bin/playwright test e2e/trip-date-view.test.ts\nError: env: can't execute 'node': No such file or directory

ai-agent commented

2026-02-24 19:21:08 +00:00

PR creation attempt failed.\n\nCommand: tea pulls create --login ai-agent --repo campbellwireless/trips --head ai-agent/51-add-a-day-view-to-a-trip --base main --title "trip) add day/week trip views" --body "" --assignees shaun\nError: Incorrect Usage: flag provided but not defined: -body

PR creation attempt failed.\n\nCommand: tea pulls create --login ai-agent --repo campbellwireless/trips --head ai-agent/51-add-a-day-view-to-a-trip --base main --title "trip) add day/week trip views" --body "<body>" --assignees shaun\nError: Incorrect Usage: flag provided but not defined: -body

ai-agent commented

2026-02-24 19:33:13 +00:00

Retried Playwright (non-bun) after installing Node; web server failed during seed.\n\nCommand: PW_VIDEO_MODE=on PW_TRACE_MODE=on ./node_modules/.bin/playwright test e2e/trip-date-view.test.ts\nError: SQLiteError: disk I/O error (SQLITE_IOERR_DELETE_NOENT) at e2e/setup/seed-db.ts:29:17 during migrations; webServer exited with code 1.