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

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

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

# 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