Skip to content

feat(web-frontend): Add print management frontend#161

Closed
jeastham1993 wants to merge 33 commits into
mainfrom
feat/print-management-frontend
Closed

feat(web-frontend): Add print management frontend#161
jeastham1993 wants to merge 33 commits into
mainfrom
feat/print-management-frontend

Conversation

@jeastham1993

@jeastham1993 jeastham1993 commented Jan 20, 2026

Copy link
Copy Markdown
Collaborator

DO NOT MERGE BEFORE BACKEND PR MERGED PR and this PR tested against the actual service.

Summary

Implement print station UI for the sticker printing microservice:

  • PrintStation page (/print-station) - Lists printers with online/offline status, 30-second polling
  • PrintDialog - Select sticker from collection and submit print job to selected printer
  • RegisterPrinterDialog - Admin-only printer registration with one-time API key display
  • StickerDetail enhancement - Added "Print This Sticker" button with navigation state passing
  • Sidebar - Fixed Print Station link to use proper React Router Link

Features

Feature Access Description
View printers All users See available printers with online/offline status
Print sticker All users Select from collection or use pre-selected sticker
Register printer Admin only Register new printer, receive one-time API key

Technical Details

New Files:

  • src/services/print.js - API functions for print service
  • src/components/print/PrintStation.jsx - Main page component
  • src/components/print/PrinterCard.jsx - Printer card with status
  • src/components/print/PrintDialog.jsx - Print job submission modal
  • src/components/print/RegisterPrinterDialog.jsx - Admin registration modal

Modified Files:

  • src/config.js - Added DEFAULT_EVENT constant
  • src/main.jsx - Added /print-station route
  • src/components/Sidebar.jsx - Fixed Print Station link
  • src/components/StickerDetail.jsx - Added print button with navigation

Security & Stability Improvements (from code review)

Applied fixes for all P1 and P2 findings from multi-agent code review:

P1 - Critical:

  • ✅ Added AbortController for all async fetch operations
  • ✅ Added mounted ref checks to prevent state updates after unmount
  • ✅ Added token validation in getHeaders() to prevent "Bearer undefined"
  • ✅ Added Authorization headers to all API calls

P2 - Important:

  • ✅ Fixed stale closure in escape handler with useCallback
  • ✅ Added URL parameter encoding (encodeURIComponent)
  • ✅ Added double-submit protection with ref guards
  • ✅ Added userId validation before API calls
  • ✅ Fixed race condition on rapid sticker ID changes

Test plan

  • Navigate to Print Station via sidebar link
  • Verify printer list loads with status indicators
  • Verify offline printers show disabled Print button
  • Click Print on online printer, select sticker, submit
  • Verify print job submission success message
  • Navigate to sticker detail, click "Print This Sticker"
  • Verify sticker is pre-selected in print dialog
  • (Admin) Click "Register Printer", enter name, verify API key displayed
  • Verify API key can be copied and dialog requires acknowledgment
  • Navigate away during loading, verify no console errors

Compound Engineered 🤖 Generated with Claude Code

jeastham1993 and others added 28 commits January 14, 2026 12:32
…/ViewModels/RegisterPrinterResponse.cs

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Implement print station UI for the sticker printing microservice:

- Add PrintStation page with printer list and status polling
- Add PrintDialog for selecting stickers and submitting print jobs
- Add RegisterPrinterDialog for admin printer registration with API key display
- Add print button to StickerDetail page with navigation state
- Fix Sidebar link to Print Station
- Add print.js service with proper auth and error handling

Security & stability improvements from code review:
- Add AbortController for all async fetch operations
- Add mounted ref checks to prevent state updates after unmount
- Add double-submit protection with ref guards
- Add userId validation before API calls
- Add URL parameter encoding (encodeURIComponent)
- Add token validation in getHeaders() to prevent "Bearer undefined"
- Fix stale closure in escape handler with useCallback

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@claude

claude Bot commented Jan 22, 2026

Copy link
Copy Markdown

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

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