# Page: Send

<!-- FIXES applied (architect-1, iteration 1):
1. Heading font: Fraunces (serif) → sans-serif (text-xl font-bold), Fraunces is logo-only
2. Step indicator position: was right-aligned on same row as heading → moved below heading, centered
3. Back arrow icon: ChevronLeft → ArrowLeft (thin left arrow matches Figma)
4. Search input: removed explicit border, uses bg contrast on gray page
5. "Ny mottaker" button: removed border, uses bg contrast only
6. Design Tokens: removed Brand font Fraunces reference
-->
# 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
```tsx
<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
```tsx
<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
```tsx
<div className="py-12 text-center">
  <p className="text-sm text-[#6B7280]">Ingen mottakere funnet</p>
</div>
```

### Add Recipient Button
```tsx
<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)
```tsx
<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.