Skip to content

feat(admin): page count & colour badges + React Query migration for orders-by-timeslot#88

Merged
choden-dev merged 2 commits into
mainfrom
feat/timeslot-file-page-color-badges
Jun 24, 2026
Merged

feat(admin): page count & colour badges + React Query migration for orders-by-timeslot#88
choden-dev merged 2 commits into
mainfrom
feat/timeslot-file-page-color-badges

Conversation

@choden-dev

@choden-dev choden-dev commented Jun 24, 2026

Copy link
Copy Markdown
Owner

Summary

Two related improvements to the Orders by Timeslot admin view (components/admin/OrdersByTimeslotView.tsx):

  1. At-a-glance file details — show each file's page count and colour preference so the admin no longer needs to click into each order.
  2. React Query migration — migrate the component off raw useEffect + fetch to @tanstack/react-query, per the roadmap in AGENTS.md.

Changes

Page count & colour badges

  • Each file row in the Files column now shows two responsive badges next to the filename/copies:
    • 📄 Page count (e.g. 📄 12p) — pages per copy
    • 🎨 Colour / ⚫ B&W — colour preference, colour-coded (orange for colour, grey for B&W)
  • Row uses flex-wrap so badges and the existing Open button reflow cleanly on narrow widths (responsive).
  • Added pageCount to the orders-by-timeslot API response (app/api/admin/orders-by-timeslot/route.ts) so the component can render it.

React Query migration

  • Replaced useState/useEffect/fetchData with useQuery keyed ["orders-by-timeslot", filter], using placeholderData: (prev) => prev.
  • Converted the Mark Printed and Mark Picked Up status updates to useMutation that invalidate the ["orders-by-timeslot"] query on success.
  • Extracted module-level fetchOrdersByTimeslot and updateOrderStatus helpers.
  • Refresh button now calls refetch().
  • Follows the pattern established in components/pickup/TimeslotSelector.tsx.

Notes

  • Colour labels follow the existing project convention (COLOR → "Colour", otherwise "B&W").
  • pageCount is rendered conditionally, so older data without it degrades gracefully.

Verification

  • tsc --noEmit passes with no errors.
  • biome check passes on all changed files.

…t files

Display per-file page count and colour preference as responsive badges in
the Orders by Timeslot admin view so the admin can see print details at a
glance without clicking into each order. Adds pageCount to the
orders-by-timeslot API response and renders flex-wrapping badges.
Replace raw useEffect + fetch data loading with useQuery (keyed
["orders-by-timeslot", filter]) and convert the mark-ready / mark-picked-up
status updates to useMutation that invalidate the query on success.
Follows the pattern established in TimeslotSelector and the React Query
roadmap in AGENTS.md.
@choden-dev choden-dev changed the title feat(admin): show page count & colour preference on orders-by-timeslot files feat(admin): page count & colour badges + React Query migration for orders-by-timeslot Jun 24, 2026
@choden-dev choden-dev merged commit 9633e5b into main Jun 24, 2026
4 checks passed
@choden-dev choden-dev deleted the feat/timeslot-file-page-color-badges branch June 24, 2026 04:04
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