# drop-make-integration-plan

# Plan: Drop Figma Make Frontend Integration

## Research Summary

### Make Export (source: ~/ALAI/products/Drop/mockups/figma-make-export/)
- **10 screens**, all custom Tailwind styling (NO shadcn imports despite package.json having them)
- **react-router** navigation (Link, useLocation, useState)
- **All hardcoded mock data** — no API calls
- **2 shared components:** BottomNav (5 items: Hjem, Kontoer, Skann, Historikk, Profil), Logo (gradient square + wordmark)
- **lucide-react** icons throughout
- **Norwegian text**, DM Sans + Fraunces fonts, #0B6E35 green + #D4A017 gold
- Total: ~1,200 lines across 12 component files

### Existing Drop (source: ~/ALAI/products/Drop/src/drop-app/)
- **10 routes**, all "use client" components with real API integration
- **API calls:** auth (login/register), transactions (list/create), recipients, rates, cards, merchants
- **Auth:** useAuth hook, JWT httpOnly cookies
- **Feature flags:** cards gated behind useFeatureFlag()
- **shadcn/ui components** used (Card, Button, Badge, Tabs, ScrollArea, etc.)
- **BottomNav** with different icons (Home, Send, QrScan, CreditCard, User)
- **DropLogo** components (broken SVG from task #947 — needs replacement)
- Total: ~2,350 lines across page components

### Key Difference
Make export = **beautiful UI with mock data**. Existing Drop = **ugly UI with working backend**. Goal: merge both — Make's design + Drop's API integration.

### Conversion Needs Per Screen
| Make Screen | react-router → Next.js | Mock Data → API | Lines |
|-------------|----------------------|-----------------|-------|
| Login | Link → next/link, form → POST /api/auth/login | Remove mock, add auth | 80 |
| Onboarding | Link → next/link, form → POST /api/auth/register | Remove mock, add validation | 117 |
| Dashboard | Link → next/link | Mock txns → GET /api/transactions, mock balance → GET /api/bank-accounts | 129 |
| SendMoney | Link → next/link, useState kept | Mock recipients → GET /api/recipients, mock rates → GET /api/rates, submit → POST /api/transactions/remittance | 168 |
| BankAccounts | Link → next/link | Mock accounts → GET /api/bank-accounts | 82 |
| TransactionHistory | Link → next/link, useState kept | Mock txns → GET /api/transactions | 181 |
| ScanQR | Link → next/link, useState kept | Mock merchant → POST /api/transactions/qr-payment | 125 |
| Profile | Link → next/link | Mock user → GET /api/auth/me, logout → POST /api/auth/logout | 113 |
| Notifications | Link → next/link | Mock notifs → static for MVP (no API yet) | 96 |
| MerchantDashboard | useState kept | Mock stats → GET /api/merchants/dashboard, mock txns → GET /api/merchants/transactions | 147 |

## Objective

Replace all 10 Drop frontend page components with Figma Make export designs, converting from Vite/react-router to Next.js App Router, and wiring mock data to existing Drop API endpoints. Backend stays 100% untouched.

## Team Orchestration

### Team Members
| ID | Name | Role | Agent Type | Model |
|----|------|------|------------|-------|
| B1 | foundation-builder | Setup shared components + theme | builder | sonnet |
| V1 | foundation-validator | Validate shared components | validator | sonnet |
| B2 | screens-builder-1 | Convert Login, Onboarding, Dashboard, Profile | builder | sonnet |
| B3 | screens-builder-2 | Convert SendMoney, BankAccounts, TransactionHistory | builder | sonnet |
| B4 | screens-builder-3 | Convert ScanQR, Notifications, MerchantDashboard | builder | sonnet |
| V2 | screens-validator | Validate all 10 screens build + API wiring | validator | sonnet |
| B5 | integration-builder | Final integration, build test, fix issues | builder | sonnet |
| V3 | final-validator | Full app build + visual check | validator | sonnet |

### Step-by-Step Tasks

---

#### Phase 1: Foundation (shared components + theme)

**Task 1: Replace shared components and merge theme**
- Owner: B1
- BlockedBy: none
- Files owned:
  - `src/components/bottom-nav.tsx` — REPLACE with Make's BottomNav (convert react-router Link/useLocation → next/link + usePathname)
  - `src/components/drop-logo.tsx` — REPLACE with Make's Logo component
  - `src/app/globals.css` — MERGE Make's theme.css variables into existing globals.css (keep existing Tailwind @theme inline, add missing CSS vars from Make)
  - `src/components/ui/` — keep all existing shadcn components, no changes
- Read FIRST:
  - Make: `mockups/figma-make-export/src/app/components/BottomNav.tsx`
  - Make: `mockups/figma-make-export/src/app/components/Logo.tsx`
  - Make: `mockups/figma-make-export/src/styles/theme.css`
  - Existing: `src/components/bottom-nav.tsx`
  - Existing: `src/components/drop-logo.tsx`
  - Existing: `src/app/globals.css`
- Conversion rules:
  - `import { Link } from 'react-router'` → `import Link from 'next/link'`
  - `import { useLocation } from 'react-router'` → `import { usePathname } from 'next/navigation'`
  - `const { pathname } = useLocation()` → `const pathname = usePathname()`
  - `to=` → `href=`
  - Add `"use client"` at top of each file
  - BottomNav: 5 items — Hjem(/dashboard), Kontoer(/accounts), Skann QR(/scan, center green circle), Historikk(/transactions), Profil(/profile)
- Acceptance:
  - [ ] bottom-nav.tsx uses next/link + usePathname, 5 items, center QR button elevated
  - [ ] drop-logo.tsx renders green gradient square + gold dot + "drop" wordmark
  - [ ] globals.css has all Make theme variables merged (--primary-green, --gold-accent, etc.)
  - [ ] No react-router imports remain
  - [ ] `npx tsc --noEmit` passes for changed files

**Task 2: Validate foundation**
- Owner: V1
- BlockedBy: 1
- Acceptance:
  - [ ] bottom-nav.tsx: no react-router, uses next/link + usePathname, "use client" present
  - [ ] drop-logo.tsx: renders correctly, no broken SVG paths, "use client" present
  - [ ] globals.css: valid CSS, no duplicate custom properties, Tailwind @theme inline still present
  - [ ] All existing imports of BottomNav and DropLogo from other files still resolve

---

#### Phase 2: Screen Conversion (parallel — 3 builders)

**Task 3: Convert Login, Onboarding, Dashboard, Profile**
- Owner: B2
- BlockedBy: 1
- Files owned:
  - `src/app/login/page.tsx` — REPLACE with Make's Login.tsx + add POST /api/auth/login
  - `src/app/register/page.tsx` — REPLACE with Make's Onboarding.tsx + add POST /api/auth/register (keep age validation, OTP, PIN from existing)
  - `src/app/dashboard/page.tsx` — REPLACE with Make's Dashboard.tsx + add GET /api/transactions + GET /api/bank-accounts
  - `src/app/profile/page.tsx` — REPLACE with Make's Profile.tsx + add GET /api/auth/me + POST /api/auth/logout
- Read FIRST:
  - Make screens: Login.tsx, Onboarding.tsx, Dashboard.tsx, Profile.tsx
  - Existing pages: login/page.tsx, register/page.tsx, dashboard/page.tsx, profile/page.tsx
  - API spec: ~/ALAI/products/Drop/project/architecture/api-specification.md
- Conversion rules (SAME for all screens):
  - `import { Link } from 'react-router'` → `import Link from 'next/link'`
  - `to=` → `href=`
  - Add `"use client"` at top
  - Replace hardcoded mock data with `useState` + `useEffect` + `fetch('/api/...')` from existing pages
  - Import BottomNav from `@/components/bottom-nav`
  - Import Logo from `@/components/drop-logo` (use DropLogo/DropLogoFull as appropriate)
  - Keep Make's visual layout/structure, replace data layer
  - Login: add form onSubmit → POST /api/auth/login, router.push('/dashboard') on success
  - Register: keep existing multi-step validation (age 18+, password strength, OTP) but use Make's visual design
  - Dashboard: fetch transactions + bank accounts on mount, show real data in Make's layout
  - Profile: show real user data from /api/auth/me, logout → POST /api/auth/logout + router.push('/login')
- Acceptance:
  - [ ] All 4 pages render with Make's visual design
  - [ ] Login form submits to /api/auth/login
  - [ ] Register validates age 18+, password, creates account
  - [ ] Dashboard shows real API data (transactions, bank accounts)
  - [ ] Profile shows real user, logout works
  - [ ] No react-router imports, all use next/link
  - [ ] `npx tsc --noEmit` passes

**Task 4: Convert SendMoney, BankAccounts, TransactionHistory**
- Owner: B3
- BlockedBy: 1
- Files owned:
  - `src/app/send/page.tsx` — REPLACE with Make's SendMoney.tsx + add GET /api/recipients, GET /api/rates, POST /api/transactions/remittance
  - `src/app/accounts/page.tsx` — REPLACE with Make's BankAccounts.tsx + add GET /api/bank-accounts
  - `src/app/transactions/page.tsx` — REPLACE with Make's TransactionHistory.tsx + add GET /api/transactions
- Read FIRST:
  - Make screens: SendMoney.tsx, BankAccounts.tsx, TransactionHistory.tsx
  - Existing pages: send/page.tsx, accounts/page.tsx, transactions/page.tsx
  - API spec: ~/ALAI/products/Drop/project/architecture/api-specification.md
- Conversion rules: Same as Task 3 + specific:
  - SendMoney: 4-step flow (recipient → amount → review → success), real recipients from API, real exchange rates, POST remittance on confirm
  - BankAccounts: real bank accounts from GET /api/bank-accounts, no mock data
  - TransactionHistory: real transactions with filters (all/sendt/qr), grouped by date
- Acceptance:
  - [ ] SendMoney fetches real recipients + rates, creates real remittance
  - [ ] BankAccounts shows real linked accounts from API
  - [ ] TransactionHistory shows real transactions with filter tabs
  - [ ] No react-router imports
  - [ ] `npx tsc --noEmit` passes

**Task 5: Convert ScanQR, Notifications, MerchantDashboard**
- Owner: B4
- BlockedBy: 1
- Files owned:
  - `src/app/scan/page.tsx` — REPLACE with Make's ScanQR.tsx + add POST /api/transactions/qr-payment
  - `src/app/notifications/page.tsx` — REPLACE with Make's Notifications.tsx (keep mock data for MVP — no notifications API yet)
  - `src/app/(merchant)/merchant/page.tsx` or appropriate route — REPLACE with Make's MerchantDashboard.tsx + add GET /api/merchants/dashboard + GET /api/merchants/transactions
- Read FIRST:
  - Make screens: ScanQR.tsx, Notifications.tsx, MerchantDashboard.tsx
  - Existing pages: scan/page.tsx, notifications/page.tsx
  - API spec sections 7, 9 (QR Payment, Merchants)
- Conversion rules: Same as Task 3 + specific:
  - ScanQR: keep demo simulation mode, POST /api/transactions/qr-payment on confirm, show bank account info
  - Notifications: keep Make's mock data (no backend API for notifications in MVP)
  - MerchantDashboard: real stats from /api/merchants/dashboard, real transactions from /api/merchants/transactions
- Acceptance:
  - [ ] ScanQR simulates scan, creates real QR payment
  - [ ] Notifications renders with demo data
  - [ ] MerchantDashboard shows real merchant stats
  - [ ] No react-router imports
  - [ ] `npx tsc --noEmit` passes

**Task 6: Validate all 10 screens**
- Owner: V2
- BlockedBy: 3, 4, 5
- Acceptance:
  - [ ] All 10 page.tsx files exist and compile
  - [ ] No react-router imports anywhere in src/
  - [ ] All pages have "use client" directive
  - [ ] All API calls match api-specification.md endpoints
  - [ ] BottomNav appears on all pages except Login and Onboarding
  - [ ] All text is Norwegian
  - [ ] Brand colors (#0B6E35, #D4A017) used consistently
  - [ ] `npx tsc --noEmit` passes for entire project

---

#### Phase 3: Integration & Build

**Task 7: Build test + fix issues**
- Owner: B5
- BlockedBy: 6
- Steps:
  - Run `npm run build` (or `next build`)
  - Fix any TypeScript errors
  - Fix any import path issues
  - Fix any missing dependencies
  - Ensure all routes accessible
  - Remove unused old components if any
  - Remove /cards route or keep as feature-flagged placeholder
- Files owned: Any file that needs fixing from build errors
- Acceptance:
  - [ ] `next build` succeeds with 0 errors
  - [ ] `next dev` starts without errors
  - [ ] All 10 routes load in browser
  - [ ] No console errors on any page

**Task 8: Final validation**
- Owner: V3
- BlockedBy: 7
- Steps:
  - Verify `next build` passes
  - Check each route renders (curl localhost:3000/login, /dashboard, etc.)
  - Verify API endpoints still work (GET /api/auth/me, GET /api/transactions)
  - Check no old broken SVG logos remain
  - Verify BottomNav navigation works between pages
- Acceptance:
  - [ ] Build passes
  - [ ] All 10 routes return 200
  - [ ] API health check passes
  - [ ] No broken imports or missing components

## Validation Commands

```bash
# TypeScript check
cd ~/ALAI/products/Drop/src/drop-app && npx tsc --noEmit

# Build
cd ~/ALAI/products/Drop/src/drop-app && npm run build

# Dev server
cd ~/ALAI/products/Drop/src/drop-app && npm run dev

# Check no react-router imports remain
grep -r "from 'react-router" ~/ALAI/products/Drop/src/drop-app/src/ || echo "CLEAN"
grep -r "from \"react-router" ~/ALAI/products/Drop/src/drop-app/src/ || echo "CLEAN"

# Check all pages exist
ls ~/ALAI/products/Drop/src/drop-app/src/app/{login,register,dashboard,send,accounts,transactions,scan,profile,notifications}/page.tsx
```

## Risk Mitigation

1. **Backup first:** `cp -r src/drop-app/src src/drop-app/src-backup-pre-make` before any changes
2. **Register vs Onboarding:** Existing register has complex multi-step validation (age 18+, OTP, PIN). Make's Onboarding is simpler. MUST keep existing validation logic, only replace visual layer.
3. **Cards route:** Make export has no Cards screen (replaced with BankAccounts per pass-through model). Keep /cards as feature-flagged placeholder or remove.
4. **Merchant route:** May need new route directory if doesn't exist. Check first.
5. **Landing page (/):** NOT touched. Existing landing page stays as-is.

## Estimated Scope

- **Phase 1:** 3 files changed (foundation)
- **Phase 2:** 10 files replaced (screens) — 3 builders in parallel
- **Phase 3:** Bug fixes from build
- **Total:** ~13 files modified, 0 new files, backend untouched