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

<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

<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

<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

<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

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