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:

1. Select Recipient (documented below) — search recipients, add new
2. Enter Amount (NOT DOCUMENTED) — amount input + exchange rate display
3. Confirm (NOT DOCUMENTED) — review transfer details, fee breakdown
4. 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:

1. Select Recipient (this page) — choose from saved recipients or add new
2. Add Recipient — enter recipient details (name, country, account)
3. Enter Amount — specify amount and currency
4. 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.