Page Specifications
Per-page UI and feature specifications

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

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

Page: Landing
Page Spec: Landing 
 Route 
 / 
 Architecture Status 
 Core 
 Figma Reference 
 NO FIGMA — design needed. Designed from architecture document + design system reference. 
 Visual Description (Design Direction) 
 No Figma screenshot exists. This is a public marketing/landing page for unauthenticated users. It should follow the design system's visual language (green primary, white cards, DM Sans body font, Fraunces for brand text) and present Drop's value proposition: simple remittance and QR payments for everyone in Norway/Scandinavia. Desktop max-width 1200px, responsive down to 375px mobile. 
 Page Layout 
 Full-width page (no bottom nav, public page)
├── Hero Section
│ ├── Drop logo (green square + $ icon + gold dot)
│ ├── "drop" wordmark (Fraunces serif bold)
│ ├── Tagline: "Enklere betalinger. Lavere gebyrer."
│ ├── Subtitle text explaining value proposition
│ ├── CTA: "Kom i gang" → /register
│ └── Secondary CTA: "Logg inn" → /login
├── Hero Section (with ambient glow background)
│ ├── Drop logo (green square + $ icon + gold dot)
│ ├── "drop" wordmark (Fraunces serif bold)
│ ├── Headline: "Enklere betalinger. Lavere gebyrer." (split, second line green)
│ ├── Subtitle text explaining value proposition
│ ├── Primary CTA: "Opprett konto — gratis" → /register
│ ├── Secondary CTA: "Logg inn" → /login
│ └── Stats card (3 columns): "0,5%" gebyr, "<2t" leveringstid, "30+" land
├── Features Section
│ ├── Heading: "Alt du trenger i en app"
│ ├── Feature card 1: Send penger (remittance icon + description)
│ ├── Feature card 2: Betal med QR (QR icon + description)
│ └── Feature card 3: Virtuelt kort (card icon + description) **NOT "Bankkontoer"**
├── Trust Section
│ ├── BankID-verifisert badge (shield icon)
│ ├── Rask overføring badge (fast transfer icon)
│ └── 30+ land badge (corridors icon)
├── Merchant CTA Section
│ ├── "Er du butikkeier?" heading
│ ├── Description: "Ta imot betalinger via QR. 1% gebyr..."
│ └── "Kom i gang" button
└── Footer
 └── "Drop — et produkt av ALAI Holding AS" copyright
 
 Components 
 Hero Section 
 <div className="flex min-h-screen flex-col items-center justify-center bg-[#EEEEEE] px-6">
 <div className="w-full max-w-sm space-y-6 text-center">
 <Image src="/drop-icon.png" alt="Drop" width={80} height={80} />
 <h1 className="font-[family-name:var(--font-fraunces)] text-3xl font-bold text-[#1A1A1A]">drop</h1>
 <p className="text-sm italic text-[#0B6E35]">Enklere betalinger. Lavere gebyrer.</p>
 <!-- CTA buttons -->
 </div>
</div>
 
 Feature Cards 
 <div className="rounded-2xl bg-white p-6 shadow-sm">
 <Icon className="h-8 w-8 text-[#0B6E35] mb-3" />
 <h3 className="text-lg font-bold text-[#1A1A1A]">Feature Title</h3>
 <p className="text-sm text-[#374151]">Description</p>
</div>
 
 Hero Headline 
 <h1 className="font-[family-name:var(--font-fraunces)] text-5xl font-extrabold tracking-tight mb-4 leading-[1.08] text-[#1A1A1A]">
 Enklere betalinger.
 <br />
 <span className="text-[#0B6E35]">Lavere gebyrer.</span>
</h1>
 
 Primary CTA Button 
 <Link href="/register" className="group flex h-14 items-center justify-center gap-2 rounded-xl bg-[#0B6E35] text-white font-semibold text-base hover:bg-[#095C2C]">
 Opprett konto — gratis
 <ArrowRight className="h-4 w-4 group-hover:translate-x-0.5" />
</Link>
 
 Secondary CTA 
 <Link href="/login" className="flex h-14 items-center justify-center rounded-xl border border-[#E5E7EB] bg-white text-[#1A1A1A] font-semibold text-base hover:bg-[#F9FAFB]">
 Logg inn
</Link>
 
 Stats Card 
 <div className="grid grid-cols-3 gap-4 rounded-2xl bg-white border border-[#E5E7EB] shadow-sm p-5">
 <div className="text-center">
 <p className="text-2xl font-bold text-[#0B6E35]">0,5%</p>
 <p className="text-xs text-[#6B7280] mt-1">Gebyr</p>
 </div>
 <!-- repeat for other stats -->
</div>
 
 Data Displayed 
 
 Static marketing content only 
 No API calls 
 No authentication required 
 
 User Interactions 
 
 
 
 Element 
 Action 
 Result 
 
 
 
 
 "Opprett konto — gratis" button 
 Click 
 Navigate to /register 
 
 
 "Logg inn" button 
 Click 
 Navigate to /login 
 
 
 Merchant "Kom i gang" button 
 Click 
 NOT IMPLEMENTED (placeholder, href="#") 
 
 
 
 Norwegian Labels 
 
 
 
 Element 
 Norwegian Text 
 
 
 
 
 Brand wordmark 
 drop 
 
 
 Hero headline line 1 
 Enklere betalinger. 
 
 
 Hero headline line 2 
 Lavere gebyrer. 
 
 
 Hero subtitle 
 Send penger, betal med QR, administrer kort — alt på ett sted. Laget for alle i Skandinavia. 
 
 
 Primary CTA 
 Opprett konto — gratis 
 
 
 Secondary CTA 
 Logg inn 
 
 
 Stats label 1 
 Gebyr 
 
 
 Stats label 2 
 Leveringstid 
 
 
 Stats label 3 
 Land 
 
 
 Features heading 
 Alt du trenger i en app 
 
 
 Feature 1 title 
 Send penger 
 
 
 Feature 1 desc 
 Overfør penger internasjonalt. 0,5% gebyr — billigere enn banken. 
 
 
 Feature 2 title 
 Betal med QR 
 
 
 Feature 2 desc 
 Skann og betal i butikken. Raskere og billigere enn kort. 
 
 
 Feature 3 title 
 Virtuelt kort 
 
 
 Feature 3 desc 
 Få et virtuelt kort for netthandel. Bestill fysisk kort hjem. 
 
 
 Trust badge 1 
 BankID-verifisert 
 
 
 Trust badge 2 
 Rask overføring 
 
 
 Trust badge 3 
 30+ land 
 
 
 Merchant CTA heading 
 Er du butikkeier? 
 
 
 Merchant CTA desc 
 Ta imot betalinger via QR. 1% gebyr — billigere enn kortterminalen. 
 
 
 Merchant CTA button 
 Kom i gang 
 
 
 Footer copyright 
 Drop — et produkt av ALAI Holding AS 
 
 
 
 Design Tokens 
 
 
 
 Token 
 Value 
 
 
 
 
 Page bg 
 #EEEEEE 
 
 
 Card bg 
 #FFFFFF 
 
 
 Primary 
 #0B6E35 
 
 
 Primary hover 
 #095C2C 
 
 
 Text primary 
 #1A1A1A 
 
 
 Text body 
 #374151 
 
 
 Text muted 
 #6B7280 
 
 
 Brand font 
 font-[family-name:var(--font-fraunces)] 
 
 
 Body font 
 DM Sans (default) 
 
 
 Card radius 
 rounded-2xl 
 
 
 Button radius 
 rounded-xl 
 
 
 Button height 
 h-12 
 
 
 Shadow 
 shadow-sm 
 
 
 
 Bottom Navigation 
 No — this is a public page, no bottom nav.

Page: Login
Page Spec: Login 
 Route 
 /login 
 Architecture Status 
 Core 
 Figma Reference 
 login.png 
 Visual Description from Figma 
 The login page shows: 
 
 Top section: Drop logo — green rounded square with white dollar-sign icon (with circular arrows around it) and a small gold/orange dot on the top-right corner of the icon. Below the icon: "drop" in bold serif font (Fraunces). Below that: "Enklere betalinger. Lavere gebyrer." in green italic text. 
 Form card: White rounded card with subtle shadow containing:
 
 E-postadresse — label above, input field with mail/envelope icon on the left. Placeholder: "navn@eksempel.no". Field has light gray background with rounded corners and subtle border. 
 Passord — label above, input field with lock icon on the left and an eye/visibility toggle icon on the right. Shows dots (password masked). Same styling as email field. 
 "Glemt passord?" — right-aligned green link text below the password field. 
 "Logg inn" button — full width, dark green background ( #0B6E35 ), white text, rounded corners. Has a right arrow icon next to the text. 
 Divider: NOT IMPLEMENTED (claimed in Figma spec but missing from code) 
 Social login buttons: NOT IMPLEMENTED (BankID + Vipps claimed in Figma spec but missing from code) 
 
 
 Bottom text: "Har du ikke konto? Opprett konto" — "Opprett konto" is a green bold link. 
 
 Background is light gray. The entire form is centered vertically and horizontally on the page. 
 Page Layout 
 Full-page centered (no bottom nav — auth page)
├── Logo Section (centered)
│ ├── Drop icon (64x64)
│ ├── "drop" wordmark (Fraunces serif bold)
│ └── Tagline italic green
├── Form Card (white rounded)
│ ├── E-postadresse input (mail icon)
│ ├── Passord input (lock icon + eye toggle)
│ ├── "Glemt passord?" link (right-aligned) **NOT IMPLEMENTED** (href="#")
│ └── "Logg inn" button (green, full width, arrow icon)
└── "Har du ikke konto? Opprett konto" link
 
 Components 
 Logo Block 
 <div className="flex flex-col items-center space-y-2">
 <Image src="/drop-icon.png" alt="Drop" width={64} height={64} />
 <h1 className="font-[family-name:var(--font-fraunces)] text-3xl font-bold text-[#1A1A1A]">drop</h1>
 <p className="text-sm italic text-[#0B6E35]">Enklere betalinger. Lavere gebyrer.</p>
</div>
 
 Form Card 
 <div className="rounded-2xl bg-white p-6 shadow-sm space-y-4">
 {/* form fields + buttons */}
</div>
 
 Email Input 
 <div>
 <label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">E-postadresse</label>
 <div className="relative">
 <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
 <input type="email" className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-3 text-sm outline-none transition-colors focus:border-[#0B6E35] focus:ring-1 focus:ring-[#0B6E35]" placeholder="navn@eksempel.no" />
 </div>
</div>
 
 Password Input 
 <div>
 <label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">Passord</label>
 <div className="relative">
 <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
 <input type={showPassword ? "text" : "password"} className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-10 text-sm outline-none transition-colors focus:border-[#0B6E35] focus:ring-1 focus:ring-[#0B6E35]" placeholder="........" />
 <button className="absolute right-3 top-1/2 -translate-y-1/2">
 <Eye className="h-4 w-4 text-[#9CA3AF]" />
 </button>
 </div>
 <div className="mt-1 text-right">
 <Link href="/forgot-password" className="text-xs font-medium text-[#0B6E35] hover:underline">Glemt passord?</Link>
 </div>
</div>
 
 Login Button 
 <Button className="h-12 w-full rounded-xl bg-[#0B6E35] text-white text-sm font-semibold hover:bg-[#095C2C] transition-colors flex items-center justify-center gap-2">
 Logg inn
 <ArrowRight className="h-4 w-4" />
</Button>
 
 Divider 
 <div className="flex items-center gap-3">
 <div className="h-px flex-1 bg-[#D1D5DB]" />
 <span className="text-xs font-medium tracking-wide text-[#9CA3AF]">ELLER LOGG INN MED</span>
 <div className="h-px flex-1 bg-[#D1D5DB]" />
</div>
 
 Social Login Buttons 
 <div className="flex gap-3">
 <button 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]">
 <Image src="/bankid-icon.png" alt="BankID" width={20} height={20} />
 BankID
 </button>
 <button 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]">
 <Image src="/vipps-icon.png" alt="Vipps" width={20} height={20} />
 Vipps
 </button>
</div>
 
 Register Link 
 <p className="text-center text-sm text-[#6B7280]">
 Har du ikke konto? <Link href="/register" className="font-semibold text-[#0B6E35] hover:underline">Opprett konto</Link>
</p>
 
 Error Message 
 <p className="text-sm text-[#EF4444] bg-[#EF4444]/10 rounded-md p-2">{error}</p>
 
 Data Displayed 
 
 Static form (no pre-loaded data) 
 On submit: POST /api/auth/login with email + password 
 On success: JWT set in httpOnly cookie, redirect to /dashboard 
 
 User Interactions 
 
 
 
 Element 
 Action 
 Result 
 
 
 
 
 E-postadresse input 
 Type 
 Captures email 
 
 
 Passord input 
 Type 
 Captures password 
 
 
 Eye icon 
 Click 
 Toggle password visibility 
 
 
 "Glemt passord?" link 
 Click 
 Navigate to forgot password flow 
 
 
 "Logg inn" button 
 Click 
 POST /api/auth/login, on success redirect to /dashboard 
 
 
 BankID button 
 Click 
 Initiate BankID auth flow (research ongoing) 
 
 
 Vipps button 
 Click 
 Initiate Vipps auth flow (research ongoing) 
 
 
 "Opprett konto" link 
 Click 
 Navigate to /register 
 
 
 
 Validation Rules 
 
 
 
 Field 
 Rule 
 Error Message 
 
 
 
 
 E-postadresse 
 Required, valid email 
 Ugyldig e-postadresse 
 
 
 Passord 
 Required, min 1 char 
 Passord er paakrevd 
 
 
 Auth failure 
 Invalid credentials 
 Feil e-postadresse eller passord 
 
 
 
 Norwegian Labels 
 
 
 
 Element 
 Norwegian Text 
 
 
 
 
 Email label 
 E-postadresse 
 
 
 Email placeholder 
 navn@eksempel.no 
 
 
 Password label 
 Passord 
 
 
 Forgot password link 
 Glemt passord? 
 
 
 Login button 
 Logg inn 
 
 
 Divider text 
 ELLER LOGG INN MED 
 
 
 BankID button 
 BankID 
 
 
 Vipps button 
 Vipps 
 
 
 Register prompt 
 Har du ikke konto? 
 
 
 Register link 
 Opprett konto 
 
 
 
 Design Tokens 
 
 
 
 Token 
 Value 
 
 
 
 
 Page bg 
 #EEEEEE 
 
 
 Card bg 
 #FFFFFF 
 
 
 Input bg 
 #F9FAFB 
 
 
 Primary 
 #0B6E35 
 
 
 Primary hover 
 #095C2C 
 
 
 Border 
 #E5E7EB 
 
 
 Divider 
 #D1D5DB 
 
 
 Text primary 
 #1A1A1A 
 
 
 Text muted 
 #6B7280 
 
 
 Text light 
 #9CA3AF 
 
 
 Error 
 #EF4444 
 
 
 Brand font 
 font-[family-name:var(--font-fraunces)] 
 
 
 Card radius 
 rounded-2xl 
 
 
 Input radius 
 rounded-lg 
 
 
 Button radius 
 rounded-xl 
 
 
 Input height 
 h-11 
 
 
 Button height 
 h-12 
 
 
 
 Bottom Navigation 
 No — this is an auth page, no bottom nav.

Page: Notifications
Page Spec: Notifications 
 Route 
 /notifications 
 Architecture Status 
 Core 
 Figma Reference 
 No Figma — designed from architecture 
 Visual Description 
 The notifications page displays transaction alerts, system messages, and payment confirmations: 
 
 Top bar: Left side has a back arrow (ArrowLeft, NOT chevron). "Varsler" heading in bold sans-serif (NOT serif). No right-side icons. 
 Notification list: Vertically stacked notification cards, each in its own white rounded card:
 
 Unread notifications: Bold title text with a green dot indicator (left edge) 
 Read notifications: Regular title text without indicator 
 Each card contains:
 
 Icon: Type-based icon in colored circle (green for transfers, yellow for QR payments, blue for system messages) 
 Title: Bold notification heading 
 Description: Muted text with details 
 Timestamp: Muted text showing relative time ("2 timer siden", "I går 14:30") 
 
 
 
 
 Empty state: When no notifications exist:
 
 Large bell icon with slash (gray, centered) 
 "Ingen varsler" heading 
 "Du vil motta varsler om transaksjoner og viktige meldinger her" description text 
 
 
 Bottom navigation: 5 tabs — Hjem (house outline, gray), Send (paper plane outline, gray), Skann (QR outline, gray), Kort (card outline, gray), Profil (person outline, gray). No tab highlighted as active. 
 
 Background is light gray (#EEEEEE). All cards are white with rounded corners (#FFFFFF, rounded-2xl). Unread notifications appear at the top. 
 Page Layout 
 App page WITH bottom nav
├── Top Bar
│ ├── Left: Back arrow (chevron left)
│ └── Center: "Varsler" heading
├── Notification List (or Empty State)
│ └── Notification cards (sorted by date, unread first)
│ ├── Unread indicator (green dot)
│ ├── Icon (type-based color)
│ ├── Title (bold if unread)
│ ├── Description (muted text)
│ └── Timestamp (relative time)
└── Bottom Nav (no active tab)
 
 Components 
 Top Bar 
 <div className="flex items-center gap-3 px-6 pt-6">
 <Link href="/dashboard">
 <button className="rounded-lg p-2 hover:bg-white/80">
 <ArrowLeft className="h-5 w-5 text-[#6B7280]" />
 </button>
 </Link>
 <h1 className="text-xl font-bold text-[#1A1A1A]">
 Varsler
 </h1>
</div>
 
 Notification Card (Unread) 
 <div
 onClick={() => markAsRead(notification.id)}
 className="relative flex items-start gap-3 rounded-2xl bg-white p-4 shadow-sm cursor-pointer hover:bg-[#F9FAFB] transition-colors"
>
 {/* Unread indicator dot */}
 <div className="absolute left-0 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-[#0B6E35]" />

 {/* Icon */}
 <div className={`flex h-10 w-10 items-center justify-center rounded-full ${iconBgColor}`}>
 {getNotificationIcon(notification.type)}
 </div>

 {/* Content */}
 <div className="flex-1">
 <p className="text-sm font-bold text-[#1A1A1A]">{notification.title}</p>
 <p className="text-xs text-[#6B7280] mt-0.5">{notification.description}</p>
 <p className="text-xs text-[#9CA3AF] mt-1">{formatTimestamp(notification.created_at)}</p>
 </div>
</div>
 
 Notification Card (Read) 
 <div
 className="flex items-start gap-3 rounded-2xl bg-white p-4 shadow-sm"
>
 {/* Icon */}
 <div className={`flex h-10 w-10 items-center justify-center rounded-full ${iconBgColor}`}>
 {getNotificationIcon(notification.type)}
 </div>

 {/* Content */}
 <div className="flex-1">
 <p className="text-sm font-semibold text-[#1A1A1A]">{notification.title}</p>
 <p className="text-xs text-[#6B7280] mt-0.5">{notification.description}</p>
 <p className="text-xs text-[#9CA3AF] mt-1">{formatTimestamp(notification.created_at)}</p>
 </div>
</div>
 
 Empty State 
 <div className="flex flex-col items-center justify-center px-6 py-16">
 <div className="flex h-16 w-16 items-center justify-center rounded-full bg-[#E5E7EB]">
 <BellOff className="h-8 w-8 text-[#9CA3AF]" />
 </div>
 <p className="mt-4 text-lg font-bold text-[#1A1A1A]">Ingen varsler</p>
 <p className="mt-2 text-center text-sm text-[#6B7280] max-w-xs">
 Du vil motta varsler om transaksjoner og viktige meldinger her
 </p>
</div>
 
 Notification Icon Logic 
 function getNotificationIcon(type: string) {
 switch (type) {
 case 'transaction_sent':
 case 'transaction_received':
 return <Send className="h-5 w-5 text-[#0B6E35]" />;
 case 'qr_payment':
 return <QrCode className="h-5 w-5 text-[#D4A017]" />;
 case 'system_message':
 case 'account_linked':
 case 'security_alert':
 return <AlertCircle className="h-5 w-5 text-[#3B82F6]" />;
 default:
 return <Bell className="h-5 w-5 text-[#6B7280]" />;
 }
}

function getIconBgColor(type: string) {
 switch (type) {
 case 'transaction_sent':
 case 'transaction_received':
 return 'bg-[#0B6E35]/10';
 case 'qr_payment':
 return 'bg-[#D4A017]/10';
 case 'system_message':
 case 'account_linked':
 case 'security_alert':
 return 'bg-[#3B82F6]/10';
 default:
 return 'bg-[#E5E7EB]';
 }
}
 
 Timestamp Formatter 
 function formatTimestamp(timestamp: string): string {
 const now = new Date();
 const then = new Date(timestamp);
 const diffMs = now.getTime() - then.getTime();
 const diffMins = Math.floor(diffMs / 60000);
 const diffHours = Math.floor(diffMs / 3600000);
 const diffDays = Math.floor(diffMs / 86400000);

 if (diffMins < 1) return 'Akkurat nå';
 if (diffMins < 60) return `${diffMins} ${diffMins === 1 ? 'minutt' : 'minutter'} siden`;
 if (diffHours < 24) return `${diffHours} ${diffHours === 1 ? 'time' : 'timer'} siden`;
 if (diffDays === 1) return `I går ${then.toLocaleTimeString('nb-NO', { hour: '2-digit', minute: '2-digit' })}`;
 if (diffDays < 7) return `${diffDays} dager siden`;

 return then.toLocaleDateString('nb-NO', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
}
 
 Data Displayed 
 
 
 
 Data 
 Source 
 API 
 
 
 
 
 Notification list 
 Notifications table 
 GET /api/notifications 
 
 
 Notification title 
 Notification record 
 From notifications table 
 
 
 Notification description 
 Notification record 
 From notifications table 
 
 
 Notification type 
 Notification record 
 transaction_sent / transaction_received / qr_payment / system_message / account_linked / security_alert 
 
 
 Notification read status 
 Notification record 
 is_read boolean 
 
 
 Notification timestamp 
 Notification record 
 created_at 
 
 
 
 User Interactions 
 
 
 
 Element 
 Action 
 Result 
 
 
 
 
 Back arrow 
 Click 
 Navigate back to previous page (dashboard) 
 
 
 Unread notification card 
 Click 
 Mark notification as read, update UI to show read state 
 
 
 Read notification card 
 Click 
 Optional — navigate to related resource (e.g., transaction detail) 
 
 
 Bottom nav tabs 
 Click 
 Navigate to respective page 
 
 
 
 Norwegian Labels 
 
 
 
 Element 
 Norwegian Text 
 
 
 
 
 Page heading 
 Varsler 
 
 
 Empty state heading 
 Ingen varsler 
 
 
 Empty state description 
 Du vil motta varsler om transaksjoner og viktige meldinger her 
 
 
 Timestamp: Now 
 Akkurat nå 
 
 
 Timestamp: Minutes 
 {n} minutt siden / {n} minutter siden 
 
 
 Timestamp: Hours 
 {n} time siden / {n} timer siden 
 
 
 Timestamp: Yesterday 
 I går {time} 
 
 
 Timestamp: Days 
 {n} dager siden 
 
 
 Notification: Transaction sent 
 Overføring sendt 
 
 
 Notification: Transaction received 
 Penger mottatt 
 
 
 Notification: QR Payment 
 QR-betaling fullført 
 
 
 Notification: System message 
 Systemmelding 
 
 
 Notification: Account linked 
 Bankkonto tilkoblet 
 
 
 Notification: Security alert 
 Sikkerhetsvarsel 
 
 
 
 Design Tokens 
 
 
 
 Token 
 Value 
 
 
 
 
 Page bg 
 #EEEEEE 
 
 
 Card bg 
 #FFFFFF 
 
 
 Primary 
 #0B6E35 
 
 
 Primary hover 
 #095C2C 
 
 
 Accent/Gold 
 #D4A017 
 
 
 Info blue 
 #3B82F6 
 
 
 Text primary 
 #1A1A1A 
 
 
 Text muted 
 #6B7280 
 
 
 Text light 
 #9CA3AF 
 
 
 Border 
 #E5E7EB 
 
 
 Unread indicator 
 #0B6E35 (green dot) 
 
 
 Brand font 
 font-[family-name:var(--font-fraunces)] 
 
 
 Card radius 
 rounded-2xl 
 
 
 Icon circle radius 
 rounded-full 
 
 
 Hover bg 
 #F9FAFB 
 
 
 
 Bottom Navigation 
 Yes — No tab active (all tabs gray, outline icons).

Page: Profile
Page Spec: Profile (Settings) 
 Route 
 /profile 
 Architecture Status 
 Core 
 Figma Reference 
 profile.png 
 Visual Description from Figma 
 The profile/settings page is the user account management screen: 
 
 Top bar: Left side has a back arrow (ArrowLeft, NOT chevron) in muted gray. "Profil" heading in bold sans-serif font (NOT serif). Right side is empty. Background is light gray (#EEEEEE). 
 User card: White rounded card at top with:
 
 Circular avatar with light green background (#0B6E35/10 = 10% opacity green) 
 Initials "AH" in dark green (#0B6E35) centered in the avatar circle 
 User name "Amir Hadžić" in bold black LEFT-ALIGNED (NOT centered) next to avatar 
 Email "amir@eksempel.no" in muted gray below name, LEFT-ALIGNED (NOT centered) 
 LAYOUT: Avatar and text are in horizontal flexbox (NOT centered vertical stack) 
 
 
 Menu card: White rounded card containing 5 menu items:
 
 "Mine kontoer" — building/bank icon (outlined, dark gray) on left, chevron right on right side 
 "Varsler" — bell icon (outlined, dark gray) on left, chevron right on right side 
 "Innstillinger" — gear/cog icon (outlined, dark gray) on left, chevron right on right side 
 "Sikkerhet" — shield icon (outlined, dark gray) on left, chevron right on right side 
 "Hjelp og støtte" — question mark in circle icon (outlined, dark gray) on left, chevron right on right side 
 
 
 Each menu item has padding, separated by subtle divider lines 
 Icons are consistent size (approximately 20-24px) 
 Text is medium weight, dark black 
 Chevron right icons are muted gray 
 
 
 Logout button: Separate white rounded button with:
 
 "Logg ut" text in red (#EF4444) 
 Logout/exit icon (LogOut component) inline with text (NOT on left with text to right) 
 2px solid red border (border-2 border-[#EF4444]) 
 White background, hover changes to light red (#FEF2F2) 
 
 
 Footer text: NOT IMPLEMENTED (claimed in spec but missing from code) 
 Bottom navigation: 5 tabs — Hjem (house outline), Send (paper plane outline), Skann (QR outline), Kort (card outline), Profil (active, green, filled person icon). All inactive tabs are gray. 
 
 Background is light gray (#EEEEEE). Spacing between cards is consistent. 
 Page Layout 
 App page WITH bottom nav
├── Top Bar
│ ├── Left: Back arrow
│ ├── Center: "Profil" heading
│ └── Right: Empty
├── User Card (white rounded, centered content)
│ ├── Avatar circle (initials, green on light green bg)
│ ├── User full name (bold)
│ └── Email address (muted)
├── Menu Card (white rounded)
│ ├── "Mine kontoer" (bank icon + chevron)
│ ├── "Varsler" (bell icon + chevron)
│ ├── "Innstillinger" (gear icon + chevron)
│ ├── "Sikkerhet" (shield icon + chevron)
│ └── "Hjelp og støtte" (question icon + chevron)
├── Logout Button Card (white rounded, red text)
│ └── "Logg ut" (logout icon)
├── Footer Text
│ └── "Drop v0.1.0 · ALAI Holding AS"
└── Bottom Nav (Profil active)
 
 Components 
 Top Bar 
 <div className="flex items-center gap-3 px-6 pt-6">
 <Link href="/dashboard">
 <button className="rounded-lg p-2 hover:bg-white/80">
 <ArrowLeft className="h-5 w-5 text-[#6B7280]" />
 </button>
 </Link>
 <h1 className="text-xl font-bold text-[#1A1A1A]">Profil</h1>
</div>
 
 User Card 
 <div className="rounded-2xl bg-white p-6 shadow-sm">
 <div className="flex items-center gap-4">
 <div className="h-14 w-14 rounded-full bg-[#0B6E35]/10 flex items-center justify-center text-xl font-bold text-[#0B6E35]">
 {user.firstName.charAt(0)}{user.lastName.charAt(0)}
 </div>
 <div>
 <p className="font-semibold text-lg text-[#1A1A1A]">{user.firstName} {user.lastName}</p>
 <p className="text-sm text-[#6B7280]">{user.email}</p>
 </div>
 </div>
</div>
 
 Menu Card 
 <div className="rounded-2xl bg-white shadow-sm overflow-hidden">
 <MenuItem
 icon={<Building2 className="h-5 w-5" />}
 label="Mine kontoer"
 href="/accounts"
 />
 <Divider />
 <MenuItem
 icon={<Bell className="h-5 w-5" />}
 label="Varsler"
 href="/notifications"
 />
 <Divider />
 <MenuItem
 icon={<Settings className="h-5 w-5" />}
 label="Innstillinger"
 href="/settings"
 />
 <Divider />
 <MenuItem
 icon={<Shield className="h-5 w-5" />}
 label="Sikkerhet"
 href="/security"
 />
 <Divider />
 <MenuItem
 icon={<HelpCircle className="h-5 w-5" />}
 label="Hjelp og støtte"
 href="/support"
 />
</div>
 
 Menu Item Component 
 <Link href={href} className="flex items-center justify-between px-5 py-4 hover:bg-[#F9FAFB] transition-colors">
 <div className="flex items-center gap-3">
 <div className="text-[#6B7280]">{icon}</div>
 <span className="text-[15px] font-medium text-[#1A1A1A]">{label}</span>
 </div>
 <ChevronRight className="h-5 w-5 text-[#9CA3AF]" />
</Link>
 
 Divider 
 <div className="h-px bg-[#E5E7EB] mx-5" />
 
 Logout Button 
 <button
 onClick={handleLogout}
 className="w-full rounded-2xl bg-white border border-[#E5E7EB] p-4 shadow-sm hover:bg-[#FEF2F2] transition-colors"
>
 <div className="flex items-center justify-center gap-2">
 <LogOut className="h-5 w-5 text-[#EF4444]" />
 <span className="text-[15px] font-semibold text-[#EF4444]">Logg ut</span>
 </div>
</button>
 
 Footer Text 
 <p className="text-center text-xs text-[#9CA3AF]">
 Drop v0.1.0 · ALAI Holding AS
</p>
 
 Data Displayed 
 
 
 
 Data 
 Source 
 API 
 
 
 
 
 User full name 
 JWT / user profile 
 GET /api/account 
 
 
 User email 
 User profile 
 GET /api/account 
 
 
 User initials 
 Derived from full name 
 Client-side 
 
 
 App version 
 Build metadata 
 Static 
 
 
 Company name 
 Static 
 Static 
 
 
 
 User Interactions 
 
 
 
 Element 
 Action 
 Result 
 
 
 
 
 Back arrow 
 Click 
 Navigate back to previous page 
 
 
 Avatar 
 Click 
 Optional: navigate to profile edit page 
 
 
 "Mine kontoer" 
 Click 
 Navigate to /accounts 
 
 
 "Varsler" 
 Click 
 Navigate to /notifications 
 
 
 "Innstillinger" 
 Click 
 Navigate to /settings (app preferences) 
 
 
 "Sikkerhet" 
 Click 
 Navigate to /security (PIN, biometrics, 2FA) 
 
 
 "Hjelp og støtte" 
 Click 
 Navigate to /support (FAQs, contact) 
 
 
 "Logg ut" button 
 Click 
 Clear JWT cookie, redirect to /login 
 
 
 Bottom nav tabs 
 Click 
 Navigate to respective page 
 
 
 
 Norwegian Labels 
 
 
 
 Element 
 Norwegian Text 
 
 
 
 
 Page title 
 Profil 
 
 
 Bank accounts menu 
 Mine kontoer 
 
 
 Notifications menu 
 Varsler 
 
 
 Settings menu 
 Innstillinger 
 
 
 Security menu 
 Sikkerhet 
 
 
 Help menu 
 Hjelp og støtte 
 
 
 Logout button 
 Logg ut 
 
 
 Footer 
 Drop v0.1.0 · ALAI Holding AS 
 
 
 
 Design Tokens 
 
 
 
 Token 
 Value 
 
 
 
 
 Page bg 
 #EEEEEE 
 
 
 Card bg 
 #FFFFFF 
 
 
 Avatar bg 
 #D1E9DC (light green/mint) 
 
 
 Avatar text 
 #0B6E35 
 
 
 Primary 
 #0B6E35 
 
 
 Text primary 
 #1A1A1A 
 
 
 Text muted 
 #6B7280 
 
 
 Text light 
 #9CA3AF 
 
 
 Border 
 #E5E7EB 
 
 
 Danger 
 #EF4444 
 
 
 Danger hover bg 
 #FEF2F2 
 
 
 Hover bg 
 #F9FAFB 
 
 
 Brand font 
 font-[family-name:var(--font-fraunces)] 
 
 
 Card radius 
 rounded-2xl 
 
 
 Avatar radius 
 rounded-full 
 
 
 Avatar size 
 h-20 w-20 
 
 
 Menu item padding 
 px-5 py-4 
 
 
 Icon size 
 h-5 w-5 
 
 
 
 Bottom Navigation 
 Yes — "Profil" tab active (green, filled person icon). All other tabs inactive (gray, outline icons).

Page: Register
Page Spec: Register 
 Route 
 /register 
 Architecture Status 
 Core 
 Figma Reference 
 onboarding.png 
 Implementation Status 
 SPEC DOCUMENTS STEP 1 ONLY. The actual implementation has 4 steps: 
 
 Personal Info (documented below) — name, email, phone, DOB, password 
 Phone Verification (NOT DOCUMENTED) — OTP input 
 PIN Setup (NOT DOCUMENTED) — 4-digit PIN with number pad 
 Success Screen (NOT DOCUMENTED) — welcome message + navigate to dashboard 
 
 This spec covers ONLY step 1. Steps 2-4 need separate specs or this spec needs expansion. 
 Visual Description from Figma 
 The register page (called "Opprett konto" in Figma) has step 1 of 3: 
 
 Top section: Drop logo (green rounded square with white $ icon and gold dot top-right), "drop" wordmark in bold serif font, tagline "Enklere betalinger. Lavere gebyrer." in green italic text. 
 Progress indicator: Three-segment horizontal bar below the tagline. First segment is filled dark green (active), other two segments are light gray. This indicates "step 1 of 3" in a multi-step registration. 
 Form card: White rounded card containing the form with heading "Opprett konto" in bold. 
 Form fields (6 total): 
 
 Fornavn and Etternavn — side by side in a 2-column layout. Each has a user icon (person outline) on the left. Placeholders: "Amir" / "Hadzic". 
 E-postadresse — full width, mail/envelope icon left. Placeholder: "amir@eksempel.no". 
 Telefonnummer — full width, phone icon left. Placeholder shows "+47" prefix. 
 Fodselsdato — full width, calendar icon left. Placeholder: "mm/dd/yyyy". Has a calendar picker icon on the right. 
 Passord — full width, lock icon left. Placeholder: "Minst 8 tegn". Eye/visibility toggle icon on the right. 
 
 
 "Fortsett" button: Full-width green button below the card (appears slightly muted green, not as saturated as the login button). 
 Bottom text: "Har du allerede konto? Logg inn" — "Logg inn" is a green link. 
 
 Background is light gray ( #EEEEEE ). All input fields have light gray backgrounds with subtle borders. 
 Page Layout 
 Full-page centered (no bottom nav — auth page)
├── Logo Section (centered)
│ ├── Drop icon (64x64)
│ ├── "drop" wordmark (Fraunces serif bold)
│ └── Tagline italic green
├── Progress Bar (3 steps)
│ ├── Step 1: filled green (active)
│ ├── Step 2: gray
│ └── Step 3: gray
├── Form Card (white rounded)
│ ├── "Opprett konto" heading
│ ├── Row: Fornavn | Etternavn (2-col)
│ ├── E-postadresse input
│ ├── Telefonnummer input (+47)
│ ├── Fodselsdato input (date picker)
│ └── Passord input (toggle visibility)
├── "Fortsett" button (full width, outside card)
└── "Har du allerede konto? Logg inn" link
 
 Components 
 Logo Block 
 <div className="flex flex-col items-center space-y-2">
 <Image src="/drop-icon.png" alt="Drop" width={64} height={64} />
 <h1 className="font-[family-name:var(--font-fraunces)] text-3xl font-bold text-[#1A1A1A]">drop</h1>
 <p className="text-sm italic text-[#0B6E35]">Enklere betalinger. Lavere gebyrer.</p>
</div>
 
 Progress Bar (3-step) 
 <div className="flex gap-2">
 <div className="h-1 flex-1 rounded-full bg-[#0B6E35]" /> {/* active */}
 <div className="h-1 flex-1 rounded-full bg-[#E5E7EB]" /> {/* inactive */}
 <div className="h-1 flex-1 rounded-full bg-[#E5E7EB]" /> {/* inactive */}
</div>
 
 Form Card 
 <div className="rounded-2xl bg-white p-6 shadow-sm">
 <h2 className="mb-4 text-xl font-bold text-[#1A1A1A]">Opprett konto</h2>
 {/* form fields */}
</div>
 
 Name Fields (2-column) 
 <div className="grid grid-cols-2 gap-3">
 <div>
 <label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">Fornavn</label>
 <div className="relative">
 <User className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
 <input className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-3 text-sm" placeholder="Amir" />
 </div>
 </div>
 <div>
 <label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">Etternavn</label>
 <div className="relative">
 <User className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
 <input className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-3 text-sm" placeholder="Hadzic" />
 </div>
 </div>
</div>
 
 Standard Input (email, phone, DOB, password) 
 <div>
 <label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">{label}</label>
 <div className="relative">
 <Icon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
 <input className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-3 text-sm outline-none transition-colors focus:border-[#0B6E35] focus:ring-1 focus:ring-[#0B6E35]" />
 </div>
</div>
 
 Password Input (with eye toggle) 
 <div className="relative">
 <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
 <input type={showPassword ? "text" : "password"} className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-10 text-sm" placeholder="Minst 8 tegn" />
 <button className="absolute right-3 top-1/2 -translate-y-1/2">
 <Eye className="h-4 w-4 text-[#9CA3AF]" />
 </button>
</div>
 
 Submit Button 
 <Button className="h-12 w-full rounded-xl bg-[#0B6E35] text-white text-sm font-semibold hover:bg-[#095C2C] transition-colors">
 Fortsett
</Button>
 
 Error Message 
 <p className="text-sm text-[#EF4444] bg-[#EF4444]/10 rounded-md p-2">{error}</p>
 
 Data Displayed 
 
 Static form (no pre-loaded data) 
 On submit: POST /api/auth/register with form data 
 
 User Interactions 
 
 
 
 Element 
 Action 
 Result 
 
 
 
 
 Fornavn input 
 Type 
 Captures first name 
 
 
 Etternavn input 
 Type 
 Captures last name 
 
 
 E-postadresse input 
 Type 
 Captures email 
 
 
 Telefonnummer input 
 Type 
 Captures phone (+47 prefix) 
 
 
 Fodselsdato input 
 Click/type 
 Opens date picker, captures DOB 
 
 
 Passord input 
 Type 
 Captures password (min 8 chars) 
 
 
 Eye icon 
 Click 
 Toggle password visibility 
 
 
 "Fortsett" button 
 Click 
 Validate all fields, POST /api/auth/register, on success navigate to /login 
 
 
 "Logg inn" link 
 Click 
 Navigate to /login 
 
 
 
 Validation Rules 
 
 
 
 Field 
 Rule 
 Error Message 
 
 
 
 
 Fornavn 
 Required, min 2 chars 
 Fornavn er paakrevd 
 
 
 Etternavn 
 Required, min 2 chars 
 Etternavn er paakrevd 
 
 
 E-postadresse 
 Required, valid email format 
 Ugyldig e-postadresse 
 
 
 Telefonnummer 
 Required, starts with +47, 8 digits 
 Ugyldig telefonnummer 
 
 
 Fodselsdato 
 Required, age >= 18 
 Du ma vaere minst 18 ar 
 
 
 Passord 
 Required, min 8 chars 
 Passordet ma vaere minst 8 tegn 
 
 
 
 Norwegian Labels 
 
 
 
 Element 
 Norwegian Text 
 
 
 
 
 Page heading 
 Opprett konto 
 
 
 First name label 
 Fornavn 
 
 
 Last name label 
 Etternavn 
 
 
 Email label 
 E-postadresse 
 
 
 Email placeholder 
 amir@eksempel.no 
 
 
 Phone label 
 Telefonnummer 
 
 
 Phone placeholder 
 +47 
 
 
 DOB label 
 Fodselsdato 
 
 
 DOB placeholder 
 mm/dd/yyyy 
 
 
 Password label 
 Passord 
 
 
 Password placeholder 
 Minst 8 tegn 
 
 
 Submit button 
 Fortsett 
 
 
 Login prompt 
 Har du allerede konto? 
 
 
 Login link 
 Logg inn 
 
 
 
 Design Tokens 
 
 
 
 Token 
 Value 
 
 
 
 
 Page bg 
 #EEEEEE 
 
 
 Card bg 
 #FFFFFF 
 
 
 Input bg 
 #F9FAFB 
 
 
 Primary 
 #0B6E35 
 
 
 Primary hover 
 #095C2C 
 
 
 Border 
 #E5E7EB 
 
 
 Progress active 
 #0B6E35 
 
 
 Progress inactive 
 #E5E7EB 
 
 
 Text primary 
 #1A1A1A 
 
 
 Text muted 
 #6B7280 
 
 
 Text light 
 #9CA3AF 
 
 
 Error 
 #EF4444 
 
 
 Card radius 
 rounded-2xl 
 
 
 Input radius 
 rounded-lg 
 
 
 Button radius 
 rounded-xl 
 
 
 Input height 
 h-11 
 
 
 Button height 
 h-12 
 
 
 
 Bottom Navigation 
 No — this is an auth page, no bottom nav.

Page: Scan
Page Spec: Scan QR 
 Route 
 /scan 
 Architecture Status 
 Core 
 Figma Reference 
 scan.png 
 Visual Description from Figma 
 The scan page is a full-screen dark camera-style view for QR code scanning: 
 
 Top bar: Left side has a white back arrow ( ← ). Center has "Scan QR" in white bold text. No right-side elements. 
 Camera viewport: Full-screen dark background ( #1A1A1A or near-black) simulating a camera feed. 
 Scanner viewfinder: Large centered square/rectangle with:
 
 Dashed gray border ( #6B7280 approx) forming the full perimeter 
 Four green corner brackets (thick, #0B6E35 ) at each corner — top-left, top-right, bottom-left, bottom-right 
 A horizontal green scanning line across the middle of the viewfinder (animated or static) 
 
 
 Instruction text: Near the bottom, white/light text: "Pek kameraet mot butikkens QR-kode" — muted, centered. 
 Simulate button: Full-width green button at the very bottom: "Simuler skanning" — dark green background ( #0B6E35 ), white text, rounded corners. This is a demo-only button for simulating a QR scan without a real camera. 
 No bottom navigation — this is a full-screen overlay/modal page. 
 
 Page Layout 
 Full-screen dark (no bottom nav — camera overlay)
├── Top Bar (over dark bg)
│ ├── Left: Back arrow (white)
│ └── Center: "Scan QR" title (white, bold)
├── Camera Viewport (dark bg, full screen)
│ └── Scanner Viewfinder (centered)
│ ├── Dashed border (gray)
│ ├── Green corner brackets (4 corners)
│ └── Green scan line (horizontal, centered)
├── Instruction Text
│ └── "Pek kameraet mot butikkens QR-kode"
└── Simulate Button (demo only)
 └── "Simuler skanning" (green, full width)
 
 Components 
 Top Bar 
 <div className="flex items-center justify-between px-6 pt-6">
 <button onClick={() => router.back()} className="rounded-lg p-2 hover:bg-white/10">
 <ArrowLeft className="h-5 w-5 text-white" />
 </button>
 <h1 className="text-lg font-bold text-white">Scan QR</h1>
 <div className="w-9" /> {/* spacer for centering */}
</div>
 
 Scanner Viewfinder 
 <div className="relative mx-auto aspect-square w-[75%] max-w-[320px]">
 {/* Dashed border */}
 <div className="absolute inset-0 rounded-2xl border-2 border-dashed border-[#6B7280]" />

 {/* Green corner brackets — top-left */}
 <div className="absolute left-0 top-0 h-10 w-10 rounded-tl-2xl border-l-4 border-t-4 border-[#0B6E35]" />
 {/* Green corner brackets — top-right */}
 <div className="absolute right-0 top-0 h-10 w-10 rounded-tr-2xl border-r-4 border-t-4 border-[#0B6E35]" />
 {/* Green corner brackets — bottom-left */}
 <div className="absolute bottom-0 left-0 h-10 w-10 rounded-bl-2xl border-b-4 border-l-4 border-[#0B6E35]" />
 {/* Green corner brackets — bottom-right */}
 <div className="absolute bottom-0 right-0 h-10 w-10 rounded-br-2xl border-b-4 border-r-4 border-[#0B6E35]" />

 {/* Scan line (centered horizontal) */}
 <div className="absolute left-4 right-4 top-1/2 h-0.5 -translate-y-1/2 bg-[#0B6E35]" />
</div>
 
 Instruction Text 
 <p className="text-center text-sm text-[#9CA3AF]">
 Pek kameraet mot butikkens QR-kode
</p>
 
 Simulate Button (Demo Only) 
 <button
 onClick={handleSimulateScan}
 className="mx-6 mb-8 h-12 w-[calc(100%-48px)] rounded-xl bg-[#0B6E35] text-sm font-semibold text-white transition-colors hover:bg-[#095C2C]"
>
 Simuler skanning
</button>
 
 Data Displayed 
 
 
 
 Data 
 Source 
 API 
 
 
 
 
 None pre-loaded 
 — 
 — 
 
 
 On scan success 
 QR payload (merchant ID, amount) 
 POST /api/transactions (type: qr_payment) 
 
 
 
 User Interactions 
 
 
 
 Element 
 Action 
 Result 
 
 
 
 
 Back arrow 
 Click 
 Navigate back (router.back()) 
 
 
 Camera viewfinder 
 Scan QR code 
 Parse QR payload → navigate to payment confirmation 
 
 
 "Simuler skanning" button 
 Click 
 Simulate QR scan with mock merchant data → navigate to payment confirmation 
 
 
 
 QR Scan Flow (Demo) 
 
 User taps "Simuler skanning" 
 App generates mock QR payload: { merchantId: "REMA1000-001", merchantName: "Rema 1000", amount: 189 } 
 Navigate to confirmation screen (inline or modal) showing merchant name + amount 
 User confirms → POST /api/transactions with type qr_payment , PISP initiates payment from linked bank account 
 On success → redirect to /dashboard with success toast 
 
 QR Scan Flow (Production — Future) 
 
 Camera activates, user points at merchant QR code 
 QR library decodes payload (merchant ID, amount, reference) 
 Same confirmation + PISP flow as above 
 
 Norwegian Labels 
 
 
 
 Element 
 Norwegian Text 
 
 
 
 
 Page title 
 Scan QR 
 
 
 Instruction 
 Pek kameraet mot butikkens QR-kode 
 
 
 Simulate button 
 Simuler skanning 
 
 
 Confirm prompt 
 Bekreft betaling 
 
 
 Merchant label 
 Butikk 
 
 
 Amount label 
 Belop 
 
 
 Pay button 
 Betal nå 
 
 
 Cancel button 
 Avbryt 
 
 
 Success toast 
 Betaling fullfort! 
 
 
 Error toast 
 Betaling feilet. Prov igjen. 
 
 
 
 Design Tokens 
 
 
 
 Token 
 Value 
 
 
 
 
 Page bg 
 #1A1A1A (dark/camera) 
 
 
 Viewfinder border 
 border-dashed border-[#6B7280] 
 
 
 Corner brackets 
 border-[#0B6E35] (4px) 
 
 
 Scan line 
 bg-[#0B6E35] 
 
 
 Primary 
 #0B6E35 
 
 
 Primary hover 
 #095C2C 
 
 
 Text white 
 #FFFFFF 
 
 
 Text muted (on dark) 
 #9CA3AF 
 
 
 Button radius 
 rounded-xl 
 
 
 Viewfinder radius 
 rounded-2xl 
 
 
 Button height 
 h-12 
 
 
 
 Bottom Navigation 
 No — this is a full-screen camera overlay, no bottom nav.

Page: Send
Page Spec: Send Money 
 Route 
 /send 
 Architecture Status 
 Core 
 Implementation Status 
 SPEC DOCUMENTS STEP 1 ONLY. The actual implementation has a 4-step flow: 
 
 Select Recipient (documented below) — search recipients, add new 
 Enter Amount (NOT DOCUMENTED) — amount input + exchange rate display 
 Confirm (NOT DOCUMENTED) — review transfer details, fee breakdown 
 Success (NOT DOCUMENTED) — confirmation screen + receipt 
 
 This spec covers ONLY step 1. Steps 2-4 need separate specs or this spec needs expansion. 
 Figma Reference 
 send.png 
 Visual Description from Figma 
 The Send Money page is the first step in the money transfer flow: 
 
 Top bar: Left side has a back arrow (thin left arrow) icon in muted gray. Center has "Send penger" heading in bold sans-serif font. Below the heading, centered, is "1/4" step indicator in muted text. 
 Background: Light gray ( #EEEEEE ). 
 Search input: Large white rounded input field with:
 
 Magnifying glass icon on the left (gray) 
 Placeholder text "Søk mottakere..." in gray 
 Full width with rounded corners 
 
 
 Empty state message: Centered text below search input:
 
 "Ingen mottakere funnet" in muted gray text ( #6B7280 ) 
 Indicates no recipients have been added yet 
 
 
 Add recipient button: White rounded button at bottom of content area:
 
 "+" icon on left in dark color 
 "Ny mottaker" text in dark color 
 Full width, white rounded, no visible border (contrast against gray bg) 
 Positioned well above bottom navigation 
 
 
 Bottom navigation: Visible but all tabs inactive (no green highlight). 
 
 The page has a clean, minimal design with large touch targets and plenty of whitespace. 
 Page Layout 
 App page WITH bottom nav
├── Top Bar
│ ├── Left: Back arrow (chevron)
│ ├── Center: "Send penger" heading
│ └── Right: "1/4" step indicator
├── Content Area (light gray bg)
│ ├── Search Input
│ │ ├── Search icon (left)
│ │ └── "Søk mottakere..." placeholder
│ ├── Empty State
│ │ └── "Ingen mottakere funnet" message
│ └── Add Recipient Button
│ ├── "+" icon
│ └── "Ny mottaker" label
└── Bottom Nav (all tabs inactive)
 
 Components 
 Top Bar 
 <div className="flex items-center justify-between px-6 pt-6 pb-4">
 <button onClick={() => router.back()} className="rounded-lg p-2 hover:bg-white/80">
 <ChevronLeft className="h-6 w-6 text-[#1A1A1A]" />
 </button>
 <h1 className="font-[family-name:var(--font-fraunces)] text-xl font-bold text-[#1A1A1A]">Send penger</h1>
 <span className="text-sm text-[#6B7280]">1/4</span>
</div>
 
 Search Input 
 <div className="relative">
 <Search className="absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9CA3AF]" />
 <input
 type="text"
 placeholder="Søk mottakere..."
 className="h-14 w-full rounded-2xl border border-[#E5E7EB] bg-white pl-12 pr-4 text-[#1A1A1A] placeholder:text-[#9CA3AF] focus:border-[#0B6E35] focus:outline-none focus:ring-2 focus:ring-[#0B6E35]/20"
 value={searchQuery}
 onChange={(e) => setSearchQuery(e.target.value)}
 />
</div>
 
 Empty State 
 <div className="py-12 text-center">
 <p className="text-sm text-[#6B7280]">Ingen mottakere funnet</p>
</div>
 
 Add Recipient Button 
 <button
 onClick={() => router.push('/send/add-recipient')}
 className="flex h-14 w-full items-center justify-center gap-2 rounded-2xl border border-[#E5E7EB] bg-white text-sm font-medium text-[#1A1A1A] transition-colors hover:bg-[#F9FAFB]"
>
 <Plus className="h-5 w-5" />
 Ny mottaker
</button>
 
 Recipient List (when populated) 
 <div className="space-y-3">
 {recipients.map((recipient) => (
 <button
 key={recipient.id}
 onClick={() => handleSelectRecipient(recipient)}
 className="flex w-full items-center justify-between rounded-2xl bg-white p-4 text-left transition-colors hover:bg-[#F9FAFB]"
 >
 <div className="flex items-center gap-3">
 <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#0B6E35]/10">
 <User className="h-5 w-5 text-[#0B6E35]" />
 </div>
 <div>
 <p className="text-sm font-semibold text-[#1A1A1A]">{recipient.name}</p>
 <p className="text-xs text-[#6B7280]">{recipient.country} • {recipient.accountNumber}</p>
 </div>
 </div>
 <ChevronRight className="h-5 w-5 text-[#9CA3AF]" />
 </button>
 ))}
</div>
 
 Data Displayed 
 
 
 
 Data 
 Source 
 API 
 
 
 
 
 Saved recipients 
 User's recipient list 
 GET /api/recipients 
 
 
 Search results 
 Filtered recipient list 
 Client-side filtering 
 
 
 Step indicator 
 Flow state 
 Static (1/4) 
 
 
 
 User Interactions 
 
 
 
 Element 
 Action 
 Result 
 
 
 
 
 Back arrow 
 Click 
 Navigate back to previous page (dashboard) 
 
 
 Search input 
 Type 
 Filter recipient list in real-time 
 
 
 Add recipient button 
 Click 
 Navigate to /send/add-recipient (step 2) 
 
 
 Recipient card 
 Click 
 Select recipient, navigate to amount input (step 3) 
 
 
 Bottom nav tabs 
 Click 
 Navigate to respective page (exits send flow) 
 
 
 
 Norwegian Labels 
 
 
 
 Element 
 Norwegian Text 
 
 
 
 
 Page title 
 Send penger 
 
 
 Step indicator 
 1/4 
 
 
 Search placeholder 
 Søk mottakere... 
 
 
 Empty state 
 Ingen mottakere funnet 
 
 
 Add recipient button 
 Ny mottaker 
 
 
 
 Design Tokens 
 
 
 
 Token 
 Value 
 
 
 
 
 Page bg 
 #EEEEEE 
 
 
 Card bg 
 #FFFFFF 
 
 
 Input bg 
 #FFFFFF 
 
 
 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 
 
 
 Input radius 
 rounded-2xl 
 
 
 Avatar/Icon circle 
 rounded-full 
 
 
 Icon circle bg 
 #0B6E35]/10 (10% opacity green) 
 
 
 
 Bottom Navigation 
 Yes — All tabs inactive (gray, outline icons). User is in the send flow but not on a main tab page. 
 Flow Context 
 This is step 1 of 4 in the send money flow: 
 
 Select Recipient (this page) — choose from saved recipients or add new 
 Add Recipient — enter recipient details (name, country, account) 
 Enter Amount — specify amount and currency 
 Review & Confirm — review details, initiate PISP payment from user's bank account 
 
 Pass-through model reminder: Drop initiates payment via PISP from user's linked bank account. No money is held by Drop.

Page: Transactions
Page Spec: Transaction History 
 Route 
 /transactions 
 Architecture Status 
 Core 
 Figma Reference 
 history.png 
 Visual Description from Figma 
 The transaction history page shows a complete list of all transactions with filtering: 
 
 Top bar: Left side has a back arrow (ArrowLeft, NOT chevron). Center has "Transaksjonshistorikk" heading in bold sans-serif (NOT serif). No right-side icons. 
 Filter tabs row: Three pill-shaped tabs using Tabs/TabsList/TabsTrigger components:
 
 "Alle" — filter="all", active tab with dark green background (#0B6E35), white text 
 "Overføringer" — filter="remittance" (NOT "Overforinger"), inactive gray 
 "QR-betalinger" — filter="qr_payment", inactive gray 
 
 
 Date-based grouping: Transactions grouped by labels:
 
 "I dag" — transactions from today 
 "I går" — transactions from yesterday 
 "Denne uken" — transactions within last 7 days (NOT "DENNE UKEN" in uppercase) 
 "Eldre" — older transactions (NOT in original Figma, but implemented) 
 
 
 Transaction cards: Each card shows:
 
 Icon (ArrowUpRight for remittance in green, QrCode for QR payment in gold #D4A017) 
 Recipient name or "Betaling" 
 Type label: "Overføring" or "QR-betaling" 
 Amount with Norwegian number formatting (space as thousand separator) 
 Status badge: "fullført" (green), "behandler" (orange), "feilet" (red) 
 
 
 Bottom navigation: 5 tabs — ALL INACTIVE (no active tab shown on this page, contrary to Figma which shows Kort active). 
 
 Background is light gray (#EEEEEE). Large empty space below transactions. All cards are white with rounded corners (#FFFFFF, rounded-2xl). 
 Page Layout 
 App page WITH bottom nav
├── Top Bar
│ ├── Left: Back arrow (chevron left)
│ └── Center: "Transaksjonshistorikk" heading
├── Filter Tabs Row (white rounded container)
│ ├── "Alle" (active, green bg)
│ ├── "Overforinger" (inactive, white bg)
│ └── "QR-betalinger" (inactive, white bg)
├── Transaction List (grouped by date)
│ ├── Date Separator: "I GAR" (uppercase, muted)
│ ├── Transaction cards (yesterday's transactions)
│ ├── Date Separator: "DENNE UKEN" (uppercase, muted)
│ └── Transaction cards (this week's transactions)
└── Bottom Nav (Kort tab active/highlighted)
 
 Components 
 Top Bar 
 <div className="flex items-center justify-center px-6 pt-6 relative">
 <button onClick={() => router.back()} className="absolute left-6 rounded-lg p-2 hover:bg-white/80">
 <ChevronLeft className="h-6 w-6 text-[#1A1A1A]" />
 </button>
 <h1 className="font-[family-name:var(--font-fraunces)] text-xl font-bold text-[#1A1A1A]">
 Transaksjonshistorikk
 </h1>
</div>
 
 Filter Tabs Row 
 <div className="flex gap-2 rounded-2xl bg-white p-1.5 shadow-sm">
 <button
 onClick={() => setFilter('all')}
 className={`flex-1 rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
 filter === 'all'
 ? 'bg-[#0B6E35] text-white'
 : 'bg-white text-[#6B7280] hover:bg-[#F9FAFB]'
 }`}
 >
 Alle
 </button>
 <button
 onClick={() => setFilter('transfers')}
 className={`flex-1 rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
 filter === 'transfers'
 ? 'bg-[#0B6E35] text-white'
 : 'bg-white text-[#6B7280] hover:bg-[#F9FAFB]'
 }`}
 >
 Overforinger
 </button>
 <button
 onClick={() => setFilter('qr')}
 className={`flex-1 rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
 filter === 'qr'
 ? 'bg-[#0B6E35] text-white'
 : 'bg-white text-[#6B7280] hover:bg-[#F9FAFB]'
 }`}
 >
 QR-betalinger
 </button>
</div>
 
 Date Separator 
 <div className="px-6 pt-4 pb-2">
 <p className="text-xs font-semibold uppercase tracking-wider text-[#9CA3AF]">
 {dateLabel}
 </p>
</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 ${
 type === 'transfer' ? 'bg-[#0B6E35]/10' : 'bg-[#D4A017]/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 
 
 
 
 
 All transactions 
 Transaction history, filtered by selected tab 
 GET /api/transactions?filter={all|transfers|qr} 
 
 
 Transaction counterparty 
 Transaction record 
 From transactions table 
 
 
 Transaction type 
 Transaction record 
 transfer / qr_payment 
 
 
 Transaction amount 
 Transaction record 
 Negative for outgoing 
 
 
 Transaction status 
 Transaction record 
 completed / pending / failed 
 
 
 Transaction date 
 Transaction record 
 For grouping by date separator 
 
 
 
 User Interactions 
 
 
 
 Element 
 Action 
 Result 
 
 
 
 
 Back arrow 
 Click 
 Navigate back to previous page (dashboard) 
 
 
 "Alle" tab 
 Click 
 Show all transactions (no filter) 
 
 
 "Overforinger" tab 
 Click 
 Filter to show only transfer transactions 
 
 
 "QR-betalinger" tab 
 Click 
 Filter to show only QR payment transactions 
 
 
 Transaction card 
 Click 
 Navigate to transaction detail page (optional) 
 
 
 Bottom nav tabs 
 Click 
 Navigate to respective page 
 
 
 
 Norwegian Labels 
 
 
 
 Element 
 Norwegian Text 
 
 
 
 
 Page heading 
 Transaksjonshistorikk 
 
 
 Filter: All 
 Alle 
 
 
 Filter: Transfers 
 Overforinger 
 
 
 Filter: QR Payments 
 QR-betalinger 
 
 
 Date separator: Yesterday 
 I GAR 
 
 
 Date separator: This week 
 DENNE UKEN 
 
 
 Date separator: This month 
 DENNE MANEDEN 
 
 
 Date separator: Earlier 
 TIDLIGERE 
 
 
 Transaction type: Transfer 
 Overforing 
 
 
 Transaction type: QR Payment 
 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 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 
 
 
 Pill radius 
 rounded-full 
 
 
 Icon circle radius 
 rounded-full 
 
 
 
 Bottom Navigation 
 Yes — "Kort" tab appears active/highlighted (based on Figma). All other tabs inactive (gray, outline icons).