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:
 
 Kenan Basic — "Overforing" subtitle, green paper plane icon in green circle, "-2 500 NOK" amount, green "fullfort" badge 
 Rema 1000 — "QR-betaling" subtitle, yellow QR icon in yellow circle, "-189 NOK" amount, green "fullfort" badge 
 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).