# Page: Dashboard

# Page Spec: Dashboard

## Route
`/dashboard`

## Architecture Status
**Core**

## Figma Reference
`dashboard.png`

## Visual Description from Figma

The dashboard is the main home screen after login:

- **Top bar:** Left side has a small Drop icon (green, simplified) + "drop" wordmark in bold serif. Right side has three icons: bell (notifications), a logout/share icon (arrow pointing out of box), and user avatar circle (gray circle with "A" initial).
- **Balance card:** White rounded card with:
  - "Hei, Amir!" greeting in muted text
  - **"kr 47 520,50"** — large bold balance amount
  - "DNB . 1234.56.78901" — bank name and partial account number
  - "Saldo lest fra din bankkonto via Open Banking" — small muted text explaining PSD2
  - Green building/bank icon + "2 kontoer tilkoblet" green link text
- **Action buttons row:** Two side-by-side buttons:
  - **"Send penger"** — dark green bg, white text, paper plane icon (Send/navigation style). Takes about 45% width.
  - **"Skann QR"** — white bg with border, dark text, QR code icon. Takes about 55% width.
- **Recent transactions section:**
  - "Siste transaksjoner" bold heading with "Se alle" green link on the right
  - Three transaction cards, each in its own white rounded card:
    1. **Kenan Basic** — "Overforing" subtitle, green paper plane icon in green circle, "-2 500 NOK" amount, green "fullfort" badge
    2. **Rema 1000** — "QR-betaling" subtitle, yellow QR icon in yellow circle, "-189 NOK" amount, green "fullfort" badge
    3. **Mirza Hadzic** — "Overforing" subtitle, green paper plane icon, "-5 000 NOK" amount, yellow/orange "behandler" badge
- **Bottom navigation:** 5 tabs — Hjem (active, green, filled house icon), Send (paper plane outline), Skann (QR outline), Kort (card outline), Profil (person outline). All inactive tabs are gray.

Background is light gray. Large empty space between transactions and bottom nav.

## Page Layout

```
App page WITH bottom nav
├── Top Bar
│   ├── Left: Drop icon (small) + "drop" wordmark
│   └── Right: Bell icon, Logout icon, User avatar (initials)
├── Balance Card (white rounded)
│   ├── "Hei, {name}!" greeting
│   ├── Balance amount (large bold)
│   ├── Bank name + account number
│   ├── PSD2 explanation text
│   └── "{n} kontoer tilkoblet" link
├── Action Buttons Row
│   ├── "Send penger" (green, paper plane icon)
│   └── "Skann QR" (outlined, QR icon)
├── Recent Transactions Section
│   ├── "Siste transaksjoner" heading + "Se alle" link
│   └── Transaction cards (up to 3)
│       ├── Icon (type-based) + Name + Type subtitle
│       └── Amount + Status badge
└── Bottom Nav (Hjem active)
```

## Components

### Top Bar
```tsx
<div className="flex items-center justify-between px-6 pt-6">
  <div className="flex items-center gap-2">
    <Image src="/drop-icon.png" alt="Drop" width={28} height={28} />
    <span className="font-[family-name:var(--font-fraunces)] text-lg font-bold text-[#1A1A1A]">drop</span>
  </div>
  <div className="flex items-center gap-3">
    <button className="rounded-lg p-2 hover:bg-white/80">
      <Bell className="h-5 w-5 text-[#6B7280]" />
    </button>
    <button className="rounded-lg p-2 hover:bg-white/80">
      <LogOut className="h-5 w-5 text-[#6B7280]" />
    </button>
    <div className="flex h-9 w-9 items-center justify-center rounded-full bg-[#E5E7EB] text-sm font-semibold text-[#6B7280]">
      {initials}
    </div>
  </div>
</div>
```

### Balance Card
```tsx
<div className="rounded-2xl bg-white p-6 shadow-sm">
  <p className="text-sm text-[#6B7280]">Hei, {firstName}!</p>
  <p className="mt-1 text-2xl font-bold text-[#1A1A1A]">kr {formattedBalance}</p>
  <p className="mt-1 text-xs text-[#6B7280]">{bankName} . {accountNumber}</p>
  <p className="text-xs text-[#9CA3AF]">Saldo lest fra din bankkonto via Open Banking</p>
  <div className="mt-3 flex items-center gap-1.5">
    <Landmark className="h-4 w-4 text-[#0B6E35]" />
    <Link href="/accounts" className="text-sm font-medium text-[#0B6E35] hover:underline">{accountCount} kontoer tilkoblet</Link>
  </div>
</div>
```

### Action Buttons Row
```tsx
<div className="flex gap-3">
  <Link href="/send" className="flex h-12 flex-1 items-center justify-center gap-2 rounded-xl bg-[#0B6E35] text-sm font-semibold text-white hover:bg-[#095C2C] transition-colors">
    <Send className="h-4 w-4" />
    Send penger
  </Link>
  <Link href="/scan" className="flex h-12 flex-1 items-center justify-center gap-2 rounded-xl border border-[#E5E7EB] bg-white text-sm font-medium text-[#1A1A1A] transition-colors hover:bg-[#F9FAFB]">
    <QrCode className="h-4 w-4" />
    Skann QR
  </Link>
</div>
```

### Recent Transactions Section
```tsx
<div>
  <div className="flex items-center justify-between">
    <h2 className="text-lg font-bold text-[#1A1A1A]">Siste transaksjoner</h2>
    <Link href="/transactions" className="text-sm font-medium text-[#0B6E35] hover:underline">Se alle</Link>
  </div>
  <div className="mt-3 space-y-3">
    {/* transaction cards */}
  </div>
</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 bg-[#0B6E35]/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 |
|------|--------|-----|
| User name | JWT / user profile | GET `/api/account` |
| Balance | AISP (primary bank account) | GET `/api/account` |
| Bank name + account number | AISP linked account | GET `/api/account` |
| Connected accounts count | AISP | GET `/api/account` |
| Last 3 transactions | Transaction history | GET `/api/transactions?limit=3` |

## User Interactions
| Element | Action | Result |
|---------|--------|--------|
| Bell icon | Click | Navigate to `/notifications` |
| Logout icon | Click | Clear JWT cookie, redirect to `/login` |
| User avatar | Click | Navigate to `/profile` |
| "2 kontoer tilkoblet" link | Click | Navigate to `/accounts` |
| "Send penger" button | Click | Navigate to `/send` |
| "Skann QR" button | Click | Navigate to `/scan` |
| "Se alle" link | Click | Navigate to `/transactions` |
| Transaction card | Click | Navigate to transaction detail (optional) |
| Bottom nav tabs | Click | Navigate to respective page |

## Norwegian Labels
| Element | Norwegian Text |
|---------|---------------|
| Greeting | Hei, {name}! |
| PSD2 note | Saldo lest fra din bankkonto via Open Banking |
| Accounts link | {n} kontoer tilkoblet |
| Send button | Send penger |
| Scan button | Skann QR |
| Transactions heading | Siste transaksjoner |
| See all link | Se alle |
| Transfer type | Overforing |
| QR payment type | 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 body | `#374151` |
| 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` |
| Icon circle radius | `rounded-full` |
| Avatar size | `h-9 w-9` |

## Bottom Navigation
**Yes** — "Hjem" tab active (green, filled house icon). All other tabs inactive (gray, outline icons).