Skip to main content

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

<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

<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

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

Transaction Card

<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).

Back to top