# Page: Transactions

# Page Spec: Transaction History

## Route
`/transactions`

## Architecture Status
**Core**

## Figma Reference
`history.png`

## Visual Description from Figma

The transaction history page shows a complete list of all transactions with filtering:

- **Top bar:** Left side has a back arrow (ArrowLeft, NOT chevron). Center has "Transaksjonshistorikk" heading in bold **sans-serif** (NOT serif). No right-side icons.
- **Filter tabs row:** Three pill-shaped tabs using Tabs/TabsList/TabsTrigger components:
  - **"Alle"** — filter="all", active tab with dark green background (#0B6E35), white text
  - **"Overføringer"** — filter="remittance" (NOT "Overforinger"), inactive gray
  - **"QR-betalinger"** — filter="qr_payment", inactive gray
- **Date-based grouping:** Transactions grouped by labels:
  - **"I dag"** — transactions from today
  - **"I går"** — transactions from yesterday
  - **"Denne uken"** — transactions within last 7 days (NOT "DENNE UKEN" in uppercase)
  - **"Eldre"** — older transactions (NOT in original Figma, but implemented)
- **Transaction cards:** Each card shows:
  - Icon (ArrowUpRight for remittance in green, QrCode for QR payment in gold #D4A017)
  - Recipient name or "Betaling"
  - Type label: "Overføring" or "QR-betaling"
  - Amount with Norwegian number formatting (space as thousand separator)
  - Status badge: "fullført" (green), "behandler" (orange), "feilet" (red)
- **Bottom navigation:** 5 tabs — **ALL INACTIVE** (no active tab shown on this page, contrary to Figma which shows Kort active).

Background is light gray (#EEEEEE). Large empty space below transactions. All cards are white with rounded corners (#FFFFFF, rounded-2xl).

## Page Layout

```
App page WITH bottom nav
├── Top Bar
│   ├── Left: Back arrow (chevron left)
│   └── Center: "Transaksjonshistorikk" heading
├── Filter Tabs Row (white rounded container)
│   ├── "Alle" (active, green bg)
│   ├── "Overforinger" (inactive, white bg)
│   └── "QR-betalinger" (inactive, white bg)
├── Transaction List (grouped by date)
│   ├── Date Separator: "I GAR" (uppercase, muted)
│   ├── Transaction cards (yesterday's transactions)
│   ├── Date Separator: "DENNE UKEN" (uppercase, muted)
│   └── Transaction cards (this week's transactions)
└── Bottom Nav (Kort tab active/highlighted)
```

## Components

### Top Bar
```tsx
<div className="flex items-center justify-center px-6 pt-6 relative">
  <button onClick={() => router.back()} className="absolute left-6 rounded-lg p-2 hover:bg-white/80">
    <ChevronLeft className="h-6 w-6 text-[#1A1A1A]" />
  </button>
  <h1 className="font-[family-name:var(--font-fraunces)] text-xl font-bold text-[#1A1A1A]">
    Transaksjonshistorikk
  </h1>
</div>
```

### Filter Tabs Row
```tsx
<div className="flex gap-2 rounded-2xl bg-white p-1.5 shadow-sm">
  <button
    onClick={() => setFilter('all')}
    className={`flex-1 rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
      filter === 'all'
        ? 'bg-[#0B6E35] text-white'
        : 'bg-white text-[#6B7280] hover:bg-[#F9FAFB]'
    }`}
  >
    Alle
  </button>
  <button
    onClick={() => setFilter('transfers')}
    className={`flex-1 rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
      filter === 'transfers'
        ? 'bg-[#0B6E35] text-white'
        : 'bg-white text-[#6B7280] hover:bg-[#F9FAFB]'
    }`}
  >
    Overforinger
  </button>
  <button
    onClick={() => setFilter('qr')}
    className={`flex-1 rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
      filter === 'qr'
        ? 'bg-[#0B6E35] text-white'
        : 'bg-white text-[#6B7280] hover:bg-[#F9FAFB]'
    }`}
  >
    QR-betalinger
  </button>
</div>
```

### Date Separator
```tsx
<div className="px-6 pt-4 pb-2">
  <p className="text-xs font-semibold uppercase tracking-wider text-[#9CA3AF]">
    {dateLabel}
  </p>
</div>
```

### Transaction Card
```tsx
<div className="flex items-center justify-between rounded-2xl bg-white p-4 shadow-sm">
  <div className="flex items-center gap-3">
    <div className={`flex h-10 w-10 items-center justify-center rounded-full ${
      type === 'transfer' ? 'bg-[#0B6E35]/10' : 'bg-[#D4A017]/10'
    }`}>
      {type === 'transfer'
        ? <Send className="h-5 w-5 text-[#0B6E35]" />
        : <QrCode className="h-5 w-5 text-[#D4A017]" />
      }
    </div>
    <div>
      <p className="text-sm font-semibold text-[#1A1A1A]">{counterparty}</p>
      <p className="text-xs text-[#6B7280]">{typeLabel}</p>
    </div>
  </div>
  <div className="text-right">
    <p className="text-sm font-semibold text-[#1A1A1A]">{formattedAmount} NOK</p>
    <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${statusClasses}`}>
      {statusLabel}
    </span>
  </div>
</div>
```

### Status Badges
| Status | Label | Classes |
|--------|-------|---------|
| completed | fullfort | `bg-[#16A34A]/10 text-[#16A34A]` |
| pending | behandler | `bg-[#D97706]/10 text-[#D97706]` |
| failed | feilet | `bg-[#EF4444]/10 text-[#EF4444]` |

## Data Displayed
| Data | Source | API |
|------|--------|-----|
| All transactions | Transaction history, filtered by selected tab | GET `/api/transactions?filter={all\|transfers\|qr}` |
| Transaction counterparty | Transaction record | From transactions table |
| Transaction type | Transaction record | transfer / qr_payment |
| Transaction amount | Transaction record | Negative for outgoing |
| Transaction status | Transaction record | completed / pending / failed |
| Transaction date | Transaction record | For grouping by date separator |

## User Interactions
| Element | Action | Result |
|---------|--------|--------|
| Back arrow | Click | Navigate back to previous page (dashboard) |
| "Alle" tab | Click | Show all transactions (no filter) |
| "Overforinger" tab | Click | Filter to show only transfer transactions |
| "QR-betalinger" tab | Click | Filter to show only QR payment transactions |
| Transaction card | Click | Navigate to transaction detail page (optional) |
| Bottom nav tabs | Click | Navigate to respective page |

## Norwegian Labels
| Element | Norwegian Text |
|---------|---------------|
| Page heading | Transaksjonshistorikk |
| Filter: All | Alle |
| Filter: Transfers | Overforinger |
| Filter: QR Payments | QR-betalinger |
| Date separator: Yesterday | I GAR |
| Date separator: This week | DENNE UKEN |
| Date separator: This month | DENNE MANEDEN |
| Date separator: Earlier | TIDLIGERE |
| Transaction type: Transfer | Overforing |
| Transaction type: QR Payment | QR-betaling |
| Status: completed | fullfort |
| Status: pending | behandler |
| Status: failed | feilet |

## Design Tokens
| Token | Value |
|-------|-------|
| Page bg | `#EEEEEE` |
| Card bg | `#FFFFFF` |
| Primary | `#0B6E35` |
| Primary hover | `#095C2C` |
| Accent/Gold | `#D4A017` |
| Text primary | `#1A1A1A` |
| Text muted | `#6B7280` |
| Text light | `#9CA3AF` |
| Border | `#E5E7EB` |
| Success | `#16A34A` |
| Warning | `#D97706` |
| Error | `#EF4444` |
| Brand font | `font-[family-name:var(--font-fraunces)]` |
| Card radius | `rounded-2xl` |
| Button radius | `rounded-xl` |
| Pill radius | `rounded-full` |
| Icon circle radius | `rounded-full` |

## Bottom Navigation
**Yes** — "Kort" tab appears active/highlighted (based on Figma). All other tabs inactive (gray, outline icons).