Skip to content

[FE-15] Implement QR code display and download for assets in opsce folder #780

@yusuftomilola

Description

@yusuftomilola

Problem

The backend can generate QR codes for assets (BE-22), but the frontend has no component to display or download them. Physical asset tags cannot be printed without this.

Proposed Solution

Create frontend/opsce/features/assets/AssetQRCode.tsx. Fetch the QR code from GET /api/assets/:id/qr?format=base64 and display it. Provide a download button and a print button.

Acceptance Criteria

  • QR code image displayed in the asset detail page within a card
  • "Download PNG" button triggers browser download of the QR code image
  • "Print Tag" button opens a print-optimized view with the QR code, asset name, and serial number
  • Shows a loading skeleton while the QR code is fetching
  • Gracefully shows an error state if the QR endpoint returns a non-200 response
  • QR code component also accepts an optional size prop (default 200px)

Metadata

Metadata

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions