QR Code Tab — Developer Guide

1. Screenshot

Live screenshot from dev environment (QR Code tab, current state)

2. Component Tree

Assembly [id].tsx                 pages/assemblies/[id].tsx
 |- AssetDetailTabs               components/asset-detail-tabs/index.tsx
 |   '- tab: "QR Code"
 '- QrCode                        components/qr-code/index.tsx
     props: asset, setAsset, setTab, permissions, domain
     |- useState: qrImage, type, verified, loading states
     |- useFormik (qr_number field, Yup validation)
     |- Select (type: 'generate' | 'manual-create')
     |                             components/qr-code/select.tsx
     |- ConfirmModal               components/confirm-modal/index.tsx
     |   '- "Delete QR Code" confirmation
     |- LazyLoadImage              react-lazy-load-image-component
     |   '- QR code image (from qrImage state)
     '- QRCodeService              @client/shared-layer
         |- .get(assetId) -> qrImage URL
         |- .generate(assetId) -> new QR
         |- .create(assetId, qr_number) -> manual
         |- .update(assetId, qr_number)
         '- .delete(assetId)

3. Design Tokens

Element	Tailwind Classes
Card container	`rounded-lg border border-gray-200 bg-white`
Card header	`flex items-center justify-between border-b border-gray-100 px-5 py-4`
QR image area	`flex items-center justify-center p-8 bg-gray-50 rounded-lg`
QR image	`w-48 h-48 object-contain`
Action button (primary)	`bg-ag_red hover:bg-ag_red/90 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-white`
Action button (secondary)	`inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50`
Delete button	`inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-red-600 shadow-sm hover:bg-red-50`
Text input	`w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-ag_red focus:ring-1 focus:ring-ag_red`
Verification badge (valid)	`inline-flex items-center gap-1 rounded-full bg-green-50 text-green-700 px-2 py-0.5 text-xs`
Verification badge (invalid)	`inline-flex items-center gap-1 rounded-full bg-red-50 text-red-600 px-2 py-0.5 text-xs`
Warning banner	`flex items-center gap-2 rounded-lg bg-yellow-50 border border-yellow-200 px-4 py-3 text-sm text-yellow-800`

4. Data Fields

Field Name	Type	Source Property	Editable	Condition
QR Number	TextInput / Read-only	`asset.qr_number`	On create/update	Manual create mode
QR Image	LazyLoadImage	`qrImage` (state)	No	Fetched from QRCodeService.get()
Type selector	Custom Select	`type` (state)	Yes	'generate' or 'manual-create'
Verified	Badge	`verified` (state)	No	URL validation via isValidQrCodeUrl()

QR code value is sanitized with sanitizeQrValue() (trim) before submission. URL is debounce-validated.

5. Permissions

Action	RIGHTKEY	Condition
View QR tab	--	Always visible in tab bar
Generate QR	`Manage{AssetType}`	No existing QR code on asset
Manual create QR	`Manage{AssetType}`	No existing QR code on asset
Update QR	`Manage{AssetType}`	Existing QR code present
Delete QR	`Manage{AssetType}`	Existing QR code + confirmation modal
Print QR	--	QR image exists

Permission key resolved via permissions prop passed from parent page.

6. Variants

HAS QR QR code exists

Displays the QR image centered, the QR number, and action buttons (Update, Delete, Print). Formik is initialized with the existing qr_number.

NO QR No QR code assigned

Shows the type selector (Generate vs Manual Create). Generate calls QRCodeService.generate(); manual shows the text input + URL verification badge.

WARNING QR code URL mismatch

When isQrCodeWarning is true, a yellow banner warns that the QR URL does not match the expected domain pattern via isValidQrCodeUrl().

LOADING Loading states

Four independent loading states: loading (fetch), addLoading (create), updateLoading, deleteLoading. Buttons show spinner and are disabled during their respective operations.

7. Status

TODO -- NEEDS REDESIGN

✓ Web implementation functional (generate, manual-create, update, delete)

☐ Web UI redesign (center QR, cleaner actions layout)

☐ Download QR as image action

☐ Print QR action

✓ Permissions enforced (Manage{AssetType})

☐ Mobile (React Native) -- not started

☐ Test coverage

8. Web Interactive Mockup

Left: current wrapped card state. Right: proposed redesign with centered QR and cleaner action bar.

Current Implementation

QR Code

QR-2024-08471

QR Number

Current: side-by-side wrapping layout, no print/download

Proposed Redesign

QR Code Verified

QR-2024-08471

https://app.alfatraka.com/qr/QR-2024-08471

Proposed: centered QR, Generate / Print / Download actions

9. Mobile Design (React Native)

Two mobile modes: camera viewfinder for scanning, and QR display with share/print/download actions.

Scan Mode

9:41

Scan QR Code

Point camera at QR code

Position the QR code within the frame to scan

Display Mode

9:41

Assemblies

2" Gate Valve Assy

Info Specs QR Code Label

QR-2024-08471

Verified

Dashboard

Search

Assets

QR Scan

Profile

Left: camera viewfinder scan mode. Right: QR display with Print / Download / Share actions.