Skip to main content

Page: Accounts

Page Spec: Bank Accounts

Route

/accounts

Architecture Status

Core

Figma Reference

accounts.png

Visual Description from Figma

The bank accounts page displays all AISP-linked bank accounts via Open Banking:

  • Top bar: Left side has a back arrow (ArrowLeft, NOT chevron) icon. "Mine kontoer" heading in bold sans-serif (NOT serif). No right-side icons.
  • Info card: Light green/mint-colored rounded card with green shield icon (left side) and Norwegian text:
    • "Open Banking (PSD2)" — bold heading
    • "Drop leser saldo fra banken din via BankID-samtykke. Vi lagrer aldri pengene dine — alt går direkte fra din bankkonto." — body text explaining PSD2 pass-through model
  • Bank account cards: Two white rounded cards, vertically stacked:
    1. DNB account
      • Green circular icon with bank/building symbol (left side)
      • "DNB" — bold heading
      • "Primær" — small green badge/pill with green text and light green background, positioned next to bank name
      • "1234.56.78901" — account number in muted gray text below bank name
      • "35 200,00 NOK" — large bold balance amount (right side, top-aligned)
    2. Nordea account
      • Green circular icon with bank/building symbol (left side)
      • "Nordea" — bold heading (no badge)
      • "9876.54.32100" — account number in muted gray text below bank name
      • "12 320,50 NOK" — large bold balance amount (right side, top-aligned)
  • Total balance card: White rounded card with:
    • "Samlet saldo" — muted gray text on left
    • "47 520,50 NOK" — large bold green text on right
  • Add account button: White rounded card/button with:
    • "+ Koble til ny bankkonto" — center-aligned, dark text, plus icon prefix
  • Bottom navigation: 5 tabs — Hjem (house outline), Send (paper plane outline), Skann (QR outline), Kort (card outline, active/green filled), Profil (person outline). "Kort" tab is active (green).

NOTE: Figma shows "Kort" tab active, but this is likely a design artifact. The accounts page should activate the "Profil" tab or no tab (if accounts is accessed from dashboard link).

Background is light gray. Spacing between cards is consistent.

Page Layout

App page WITH bottom nav
├── Top Bar
│   ├── Left: Back arrow (chevron left)
│   └── Center: "Mine kontoer" heading
├── Info Card (light green bg, green shield icon)
│   ├── "Open Banking (PSD2)" heading
│   └── Explanation text (PSD2 pass-through)
├── Bank Account Cards (white rounded)
│   └── For each account:
│       ├── Bank icon (green circle) + Bank name + Badge (if primary) + Account number
│       └── Balance amount (right-aligned)
├── Total Balance Card (white rounded)
│   ├── "Samlet saldo" label (left)
│   └── Total amount in green (right)
├── Add Account Button (white rounded)
│   └── "+ Koble til ny bankkonto"
└── Bottom Nav (Profil active or none)

Components

Top Bar

<div className="flex items-center px-6 pt-6">
  <button onClick={router.back} className="rounded-lg p-2 hover:bg-white/80">
    <ChevronLeft className="h-5 w-5 text-[#1A1A1A]" />
  </button>
  <h1 className="flex-1 text-center font-[family-name:var(--font-fraunces)] text-xl font-bold text-[#1A1A1A] -ml-12">
    Mine kontoer
  </h1>
</div>

Info Card

<div className="rounded-2xl bg-[#0B6E35]/10 p-4 border border-[#0B6E35]/20">
  <div className="flex gap-3">
    <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-[#0B6E35]/20">
      <Shield className="h-5 w-5 text-[#0B6E35]" />
    </div>
    <div>
      <p className="font-semibold text-[#1A1A1A]">Open Banking (PSD2)</p>
      <p className="mt-1 text-sm text-[#6B7280]">
        Drop leser saldo fra banken din via BankID-samtykke. Vi lagrer aldri pengene dine — alt går direkte fra din bankkonto.
      </p>
    </div>
  </div>
</div>

Bank Account 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-12 w-12 items-center justify-center rounded-full bg-[#0B6E35]/10">
      <Landmark className="h-6 w-6 text-[#0B6E35]" />
    </div>
    <div>
      <div className="flex items-center gap-2">
        <p className="text-base font-bold text-[#1A1A1A]">{bankName}</p>
        {isPrimary && (
          <span className="rounded-full bg-[#0B6E35]/10 px-2 py-0.5 text-xs font-medium text-[#0B6E35]">
            Primær
          </span>
        )}
      </div>
      <p className="text-sm text-[#6B7280]">{accountNumber}</p>
    </div>
  </div>
  <p className="text-lg font-bold text-[#1A1A1A]">{formattedBalance} NOK</p>
</div>

Total Balance Card

<div className="flex items-center justify-between rounded-2xl bg-white p-4 shadow-sm">
  <p className="text-sm text-[#6B7280]">Samlet saldo</p>
  <p className="text-xl font-bold text-[#0B6E35]">{formattedTotal} NOK</p>
</div>

Add Account Button

<button className="flex h-14 w-full items-center justify-center gap-2 rounded-2xl bg-white text-base font-medium text-[#1A1A1A] shadow-sm transition-colors hover:bg-[#F9FAFB]">
  <Plus className="h-5 w-5" />
  Koble til ny bankkonto
</button>

Data Displayed

Data Source API
List of linked bank accounts AISP (Open Banking) GET /api/accounts
Bank name AISP account metadata —
Account number AISP account metadata —
Account balance AISP real-time balance read —
Primary account flag User preference stored in DB —
Total balance Calculated sum of all accounts Client-side calculation

User Interactions

Element Action Result
Back arrow Click Navigate back to previous page (likely /dashboard)
Bank account card Click Navigate to account detail page (optional)
"+ Koble til ny bankkonto" button Click Initiate BankID flow to link new account via Open Banking
Bottom nav tabs Click Navigate to respective page

Norwegian Labels

Element Norwegian Text
Page heading Mine kontoer
Info card heading Open Banking (PSD2)
Info card text Drop leser saldo fra banken din via BankID-samtykke. Vi lagrer aldri pengene dine — alt går direkte fra din bankkonto.
Primary badge Primær
Total balance label Samlet saldo
Add account button Koble til ny bankkonto

Design Tokens

Token Value
Page bg #EEEEEE
Card bg #FFFFFF
Info card bg #0B6E35 at 10% opacity (bg-[#0B6E35]/10)
Info card border #0B6E35 at 20% opacity (border-[#0B6E35]/20)
Primary #0B6E35
Primary hover #095C2C
Text primary #1A1A1A
Text muted #6B7280
Text light #9CA3AF
Border #E5E7EB
Brand font font-[family-name:var(--font-fraunces)]
Card radius rounded-2xl
Button radius rounded-2xl
Icon circle radius rounded-full
Bank icon size h-12 w-12
Shield icon size h-10 w-10

Bottom Navigation

Yes — "Kort" tab shown as active in Figma (green, filled card icon), but this is likely a design artifact. In production, either "Profil" tab should be active (if accounts is part of profile section) or no tab should be highlighted (if accessed from dashboard link).

No comments to display

Back to top