Skip to content

perf: replace N+1 order fetching with batched server-side endpoint#85

Merged
choden-dev merged 4 commits into
mainfrom
feat/change-timeslot-ui
Apr 25, 2026
Merged

perf: replace N+1 order fetching with batched server-side endpoint#85
choden-dev merged 4 commits into
mainfrom
feat/change-timeslot-ui

Conversation

@choden-dev
Copy link
Copy Markdown
Owner

Problem

The OrdersByTimeslotView admin dashboard was making ~52 sequential HTTP requests to load data — one to fetch timeslots, then one per timeslot to fetch its orders (in a sequential for loop), plus one for unassigned orders. With ~50 slots per week, this was extremely slow.

Solution

New dedicated /api/admin/orders-by-timeslot endpoint that does everything server-side:

  1. 1 DB query for all active timeslots (date-filtered in JS for "upcoming" mode)
  2. 2 parallel DB queries for orders (assigned via in operator + unassigned PAID orders)
  3. Server-side grouping by timeslot ID

The component now makes a single fetch() call instead of ~52.

Metric Before After
HTTP requests ~52 (sequential) 1
DB queries ~52 3 (2 in parallel)
Network round-trips ~52 × latency 1 × latency

Changes

  • New: app/api/admin/orders-by-timeslot/route.ts — admin-authenticated batched endpoint
  • Modified: components/admin/OrdersByTimeslotView.tsx — replaced N+1 fetch loop with single API call

When the user already has a timeslot and navigates to the pickup
step, the UI now clearly indicates they are changing their timeslot:

TimeslotSelector:
- New optional currentTimeslot prop
- Shows an orange 'CURRENT TIMESLOT' card at the top with the
  existing date/time when changing
- Heading changes to 'Change Pickup Timeslot' vs 'Select a Pickup Timeslot'
- Button text changes to 'Update Timeslot' / 'Updating...' vs
  'Confirm Timeslot' / 'Confirming...'

OrderSteps:
- Passes orderDetails.pickupTimeslot to TimeslotSelector
- Heading changes to 'Change Pickup Time' vs 'Select Pickup Time'
- Description text adapts accordingly
Replace the date heading in the 'CURRENT TIMESLOT' card with the
pickup instruction profile name and short summary (e.g. the pickup
method/location) since the date is already visible in the timeslot
list below. The card now shows:
- Time range and label
- Pickup type name with optional short summary
The OrdersByTimeslotView dashboard was making ~52 sequential HTTP requests
(1 per timeslot + 1 for unassigned orders). This replaces that with a single
API call to a new /api/admin/orders-by-timeslot endpoint that:

- Fetches all active timeslots in 1 DB query
- Fetches all assigned + unassigned orders in 2 parallel DB queries
- Groups orders by timeslot server-side

Reduces network round-trips from ~52 to 1 and DB queries from ~52 to 3.
@choden-dev choden-dev merged commit adeb8c7 into main Apr 25, 2026
4 checks passed
@choden-dev choden-dev deleted the feat/change-timeslot-ui branch April 25, 2026 07:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant