# 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
```tsx
<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
```tsx
<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
```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-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
```tsx
<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
```tsx
<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).