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.