# Page: Scan

# Page Spec: Scan QR

## Route
`/scan`

## Architecture Status
**Core**

## Figma Reference
`scan.png`

## Visual Description from Figma

The scan page is a full-screen dark camera-style view for QR code scanning:

- **Top bar:** Left side has a white back arrow (`←`). Center has "Scan QR" in white bold text. No right-side elements.
- **Camera viewport:** Full-screen dark background (`#1A1A1A` or near-black) simulating a camera feed.
- **Scanner viewfinder:** Large centered square/rectangle with:
  - Dashed gray border (`#6B7280` approx) forming the full perimeter
  - Four green corner brackets (thick, `#0B6E35`) at each corner — top-left, top-right, bottom-left, bottom-right
  - A horizontal green scanning line across the middle of the viewfinder (animated or static)
- **Instruction text:** Near the bottom, white/light text: "Pek kameraet mot butikkens QR-kode" — muted, centered.
- **Simulate button:** Full-width green button at the very bottom: "Simuler skanning" — dark green background (`#0B6E35`), white text, rounded corners. This is a demo-only button for simulating a QR scan without a real camera.
- **No bottom navigation** — this is a full-screen overlay/modal page.

## Page Layout

```
Full-screen dark (no bottom nav — camera overlay)
├── Top Bar (over dark bg)
│   ├── Left: Back arrow (white)
│   └── Center: "Scan QR" title (white, bold)
├── Camera Viewport (dark bg, full screen)
│   └── Scanner Viewfinder (centered)
│       ├── Dashed border (gray)
│       ├── Green corner brackets (4 corners)
│       └── Green scan line (horizontal, centered)
├── Instruction Text
│   └── "Pek kameraet mot butikkens QR-kode"
└── Simulate Button (demo only)
    └── "Simuler skanning" (green, full width)
```

## Components

### Top Bar
```tsx
<div className="flex items-center justify-between px-6 pt-6">
  <button onClick={() => router.back()} className="rounded-lg p-2 hover:bg-white/10">
    <ArrowLeft className="h-5 w-5 text-white" />
  </button>
  <h1 className="text-lg font-bold text-white">Scan QR</h1>
  <div className="w-9" /> {/* spacer for centering */}
</div>
```

### Scanner Viewfinder
```tsx
<div className="relative mx-auto aspect-square w-[75%] max-w-[320px]">
  {/* Dashed border */}
  <div className="absolute inset-0 rounded-2xl border-2 border-dashed border-[#6B7280]" />

  {/* Green corner brackets — top-left */}
  <div className="absolute left-0 top-0 h-10 w-10 rounded-tl-2xl border-l-4 border-t-4 border-[#0B6E35]" />
  {/* Green corner brackets — top-right */}
  <div className="absolute right-0 top-0 h-10 w-10 rounded-tr-2xl border-r-4 border-t-4 border-[#0B6E35]" />
  {/* Green corner brackets — bottom-left */}
  <div className="absolute bottom-0 left-0 h-10 w-10 rounded-bl-2xl border-b-4 border-l-4 border-[#0B6E35]" />
  {/* Green corner brackets — bottom-right */}
  <div className="absolute bottom-0 right-0 h-10 w-10 rounded-br-2xl border-b-4 border-r-4 border-[#0B6E35]" />

  {/* Scan line (centered horizontal) */}
  <div className="absolute left-4 right-4 top-1/2 h-0.5 -translate-y-1/2 bg-[#0B6E35]" />
</div>
```

### Instruction Text
```tsx
<p className="text-center text-sm text-[#9CA3AF]">
  Pek kameraet mot butikkens QR-kode
</p>
```

### Simulate Button (Demo Only)
```tsx
<button
  onClick={handleSimulateScan}
  className="mx-6 mb-8 h-12 w-[calc(100%-48px)] rounded-xl bg-[#0B6E35] text-sm font-semibold text-white transition-colors hover:bg-[#095C2C]"
>
  Simuler skanning
</button>
```

## Data Displayed
| Data | Source | API |
|------|--------|-----|
| None pre-loaded | — | — |
| On scan success | QR payload (merchant ID, amount) | POST `/api/transactions` (type: qr_payment) |

## User Interactions
| Element | Action | Result |
|---------|--------|--------|
| Back arrow | Click | Navigate back (router.back()) |
| Camera viewfinder | Scan QR code | Parse QR payload → navigate to payment confirmation |
| "Simuler skanning" button | Click | Simulate QR scan with mock merchant data → navigate to payment confirmation |

### QR Scan Flow (Demo)
1. User taps "Simuler skanning"
2. App generates mock QR payload: `{ merchantId: "REMA1000-001", merchantName: "Rema 1000", amount: 189 }`
3. Navigate to confirmation screen (inline or modal) showing merchant name + amount
4. User confirms → POST `/api/transactions` with type `qr_payment`, PISP initiates payment from linked bank account
5. On success → redirect to `/dashboard` with success toast

### QR Scan Flow (Production — Future)
1. Camera activates, user points at merchant QR code
2. QR library decodes payload (merchant ID, amount, reference)
3. Same confirmation + PISP flow as above

## Norwegian Labels
| Element | Norwegian Text |
|---------|---------------|
| Page title | Scan QR |
| Instruction | Pek kameraet mot butikkens QR-kode |
| Simulate button | Simuler skanning |
| Confirm prompt | Bekreft betaling |
| Merchant label | Butikk |
| Amount label | Belop |
| Pay button | Betal nå |
| Cancel button | Avbryt |
| Success toast | Betaling fullfort! |
| Error toast | Betaling feilet. Prov igjen. |

## Design Tokens
| Token | Value |
|-------|-------|
| Page bg | `#1A1A1A` (dark/camera) |
| Viewfinder border | `border-dashed border-[#6B7280]` |
| Corner brackets | `border-[#0B6E35]` (4px) |
| Scan line | `bg-[#0B6E35]` |
| Primary | `#0B6E35` |
| Primary hover | `#095C2C` |
| Text white | `#FFFFFF` |
| Text muted (on dark) | `#9CA3AF` |
| Button radius | `rounded-xl` |
| Viewfinder radius | `rounded-2xl` |
| Button height | `h-12` |

## Bottom Navigation
**No** — this is a full-screen camera overlay, no bottom nav.